/* ---------- winnicat · dusk garden ---------- */
:root {
  --dusk-top: #1d2b33;
  --dusk-mid: #3d5a5e;
  --dusk-low: #b98a54;
  --dusk-glow: #e8b97a;
  --panel: rgba(24, 30, 32, .82);
  --panel-solid: #222a2d;
  --ink: #f0ead9;
  --ink-soft: #b8b2a2;
  --accent: #d9a95f;
  --accent-soft: rgba(217, 169, 95, .18);
  --bubble-user: rgba(217, 169, 95, .16);
  --bubble-cat: rgba(240, 234, 217, .09);
  --eye-green: #cdd96a;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Rubik', system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  background: #241a12;
}

.hidden { display: none !important; }

/* ---------- Winni's portrait (crossfading mood images) ---------- */
/* Portrait panel on the RIGHT (RTL-first: the hero is seen first). The image is
   CONTAIN + centred, so Winni is whole and never cropped in any pose; the warm
   surround frames it like a picture. */
#world {
  position: fixed; top: 0; bottom: 0; right: 0;
  /* width derived from height so the panel is ALWAYS exactly 4:5 (image ratio) —
     no side bars on any window shape. Capped so it never eats the chat column. */
  width: min(80vh, 56vw);
  z-index: 1;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 42%, #2a2016 0%, #1c150d 60%, #140f09 100%);
}
.winni-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;         /* whole cat, centred, never cropped */
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: opacity;
}
.winni-layer.show { opacity: 1; }
.shuffle-btn {
  position: absolute; bottom: 18px; right: 18px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(240, 234, 217, .28);
  background: rgba(24, 20, 13, .5); backdrop-filter: blur(6px);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  opacity: .6; transition: opacity .2s ease, transform .25s ease, background .2s ease;
}
.shuffle-btn:hover { opacity: 1; transform: rotate(-90deg); background: rgba(24, 20, 13, .72); }
.shuffle-btn:active { transform: rotate(-90deg) scale(.92); }
/* mobile-only: shrink the peeked image back to the floating card */
.collapse-btn {
  display: none; position: absolute; top: 12px; inset-inline-end: 12px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(240, 234, 217, .28);
  background: rgba(24, 20, 13, .55); backdrop-filter: blur(6px);
  color: var(--ink); cursor: pointer; place-items: center;
}
.collapse-btn:active { transform: scale(.92); }

/* ---------- chat column (left side, image on the right) ---------- */
#chat-column {
  position: fixed; top: 0; bottom: 0; left: 0; right: min(80vh, 56vw);
  z-index: 10;
  display: flex; flex-direction: column;
  background: var(--panel-solid);
  border-right: 1px solid rgba(240, 234, 217, .08);
}

#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  flex-wrap: wrap; gap: 6px;
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-weight: 700; font-size: 1.15rem; letter-spacing: .5px; }
.brand-tag { color: var(--ink-soft); font-size: .74rem; font-style: italic; }
.top-actions { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ghost-btn {
  border: none; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .8rem; padding: 6px 10px; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s;
  text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
}
.ghost-btn:hover { background: rgba(240, 234, 217, .1); color: var(--ink); }
.memorial-link { color: var(--accent); }
.memorial-link:hover { background: var(--accent-soft); color: var(--accent); }

/* language selector menu */
.lang-select { position: relative; }
.lang-menu {
  position: absolute; top: 110%; inset-inline-end: 0; z-index: 40;
  background: var(--panel-solid); border: 1px solid rgba(240,234,217,.12);
  border-radius: 12px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: flex; flex-direction: column; min-width: 130px;
}
.lang-opt {
  border: none; background: transparent; color: var(--ink); font: inherit; font-size: .88rem;
  text-align: start; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.lang-opt:hover { background: rgba(240,234,217,.1); }
.lang-opt.active { color: var(--accent); }

/* ---------- chat ---------- */
#chat-panel {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 0 6px;
}
#messages {
  flex: 1; overflow-y: auto; padding: 8px 12px 14px;
  display: flex; flex-direction: column; gap: 11px;
  scrollbar-width: thin; scrollbar-color: rgba(240,234,217,.2) transparent;
}
.msg { max-width: 88%; padding: 10px 14px; border-radius: var(--radius); line-height: 1.55;
  font-size: .93rem; white-space: pre-wrap; word-wrap: break-word; }
.msg.user  { align-self: flex-end; background: var(--bubble-user); border-end-end-radius: 5px; }
.msg.cat   { align-self: flex-start; background: var(--bubble-cat); border-end-start-radius: 5px; }
[dir="rtl"] .msg.user { align-self: flex-start; }
[dir="rtl"] .msg.cat  { align-self: flex-end; }
.msg.cat .cat-name { display: block; font-size: .68rem; color: var(--accent); font-weight: 600; margin-bottom: 3px; letter-spacing: .4px; }
.msg.thinking { color: var(--ink-soft); font-style: italic; }
.msg.thinking .dots::after { content: ''; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '·'; } 50% { content: '· ·'; } 75% { content: '· · ·'; } }

.empty-hint {
  margin: auto; text-align: center; color: var(--ink-soft);
  font-size: .9rem; line-height: 1.7; max-width: 300px; padding: 0 10px;
}
.empty-hint .hint-title { font-size: 1.2rem; color: var(--ink); font-weight: 600; margin-bottom: 6px; }

/* ---------- composer ---------- */
#composer {
  display: flex; gap: 8px; align-items: flex-end;
  background: rgba(240, 234, 217, .08);
  border: 1px solid rgba(240, 234, 217, .1);
  border-radius: 22px;
  padding: 7px 9px; margin: 4px 12px 12px;
}
#input {
  flex: 1; border: none; outline: none; resize: none; background: transparent;
  font: inherit; font-size: .95rem; line-height: 1.45; color: var(--ink);
  max-height: 110px; padding: 6px 8px;
}
#input::placeholder { color: var(--ink-soft); opacity: .7; }
#btn-send {
  border: none; background: var(--accent); color: #26200f; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  transition: transform .12s, filter .15s; flex-shrink: 0;
}
#btn-send:hover { transform: scale(1.07); filter: brightness(1.08); }
#btn-send:disabled { background: #5a5a4e; cursor: default; transform: none; }
[dir="rtl"] #btn-send svg { transform: scaleX(-1); }

/* ---------- footer ---------- */
#foot {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 6px 10px 10px;
  font-size: .66rem; color: var(--ink-soft); text-align: center;
}
#foot a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
#foot a:hover { color: var(--ink); }
/* on phones the About + memorial links live here instead of the topbar */
.foot-links { display: none; gap: 16px; justify-content: center; }
.foot-links a { font-size: .74rem; }
.foot-links a[href="memorial.html"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- overlay ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(18, 24, 27, .55); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
}
.overlay-card {
  background: #f5efe3; color: #2b2620;
  border-radius: 26px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
  max-width: 430px; width: 100%; padding: 34px 34px 26px; text-align: center;
}
.overlay-card h1 { margin: 10px 0 4px; font-size: 1.9rem; letter-spacing: 1px; }
.overlay-sub { color: #6b6156; line-height: 1.6; margin: 0 0 22px; }
.overlay-lang-label { font-size: .85rem; color: #6b6156; margin-bottom: 10px; }
.lang-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 22px; }
.lang-btn {
  font: inherit; font-size: 1.05rem; padding: 10px 30px; border-radius: 999px;
  border: 2px solid #7c8a4d; background: #fff; color: #2b2620; cursor: pointer;
  transition: background .15s, transform .12s;
}
.lang-btn:hover { background: #e4e8d2; transform: translateY(-1px); }
.overlay-disclaimer { font-size: .74rem; color: #6b6156; line-height: 1.6; margin: 0; }

/* ---------- history drawer ---------- */
#history-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 90vw);
  background: var(--panel-solid); box-shadow: 4px 0 24px rgba(0,0,0,.35); z-index: 60;
  display: flex; flex-direction: column; padding: 14px; color: var(--ink);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 10px; }
#history-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#history-list li {
  padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: .88rem;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
#history-list li:hover { background: rgba(240,234,217,.08); }
#history-list li.active { background: var(--accent-soft); }
#history-list .del { border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: .85rem; }
.drawer-note { font-size: .72rem; color: var(--ink-soft); text-align: center; }

/* ---------- mobile: adaptive cat ---------- */
@media (max-width: 700px) {
  /* EMPTY CHAT — big Winni on top: full-width band at exactly 4:5 (no bars),
     capped at 60vh so the composer stays reachable on short screens. */
  #world {
    inset-inline: 0; top: 0; bottom: auto;
    width: 100%; height: min(125vw, 60vh);
    transition: top .45s ease, height .45s ease, width .45s ease,
                inset-inline-end .45s ease, border-radius .45s ease, box-shadow .45s ease;
  }
  #chat-column {
    top: min(125vw, 60vh); bottom: 0; inset-inline: 0; width: 100%;
    border-right: none; border-top: 1px solid rgba(240, 234, 217, .1);
    border-radius: 20px 20px 0 0;
  }
  #topbar { padding: 8px 14px 6px; }
  /* the tagline earns its place: stacked under the name, small and quiet */
  .brand { flex-direction: column; align-items: flex-start; gap: 0; }
  .brand-name { line-height: 1.15; }
  .brand-tag { font-size: .66rem; line-height: 1.2; }
  /* slim topbar: About + memorial links move down to the footer on phones */
  .top-actions a.ghost-btn { display: none; }
  .foot-links { display: flex; }

  /* DOCKED — the chat takes the whole screen and Winni shrinks into a small
     floating polaroid (still 4:5, moods still crossfade inside it). Happens both
     automatically once a conversation starts (.chatting) and when the visitor
     shrinks him by hand from the welcome screen (.collapsed). */
  body.chatting #chat-column, body.collapsed #chat-column { top: 0; border-top: none; border-radius: 0; }
  body.chatting #world, body.collapsed #world {
    top: 52px; inset-inline-start: auto; inset-inline-end: 10px;
    width: 36vw; height: 45vw;                 /* ~35% bigger; 36 × 1.25 → still 4:5 */
    z-index: 30; cursor: grab; touch-action: none;
    border-radius: 14px;
    border: 1px solid rgba(240, 234, 217, .22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  }
  body.chatting #world:active, body.collapsed #world:active { cursor: grabbing; }
  body.chatting .shuffle-btn, body.collapsed .shuffle-btn { display: none; }

  /* PEEK — tap the polaroid to see Winni big again; tap again to shrink back */
  body.chatting.peek #world, body.collapsed.peek #world {
    top: 0; inset-inline: 0; width: 100%; height: min(125vw, 60vh);
    border-radius: 0 0 20px 20px; border: none; transform: none !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  }
  body.chatting.peek .shuffle-btn, body.collapsed.peek .shuffle-btn { display: grid; }

  /* the shrink button shows whenever Winni is BIG on mobile — on the welcome
     screen (so you can dock him early) and while peeking (to send him back). */
  body:not(.chatting):not(.collapsed) .collapse-btn,
  body.peek .collapse-btn { display: grid; }
}