/* base.css — tokens, reset, shell, left rail, chat column
   Extracted verbatim from index.html lines 32-146 (the inline <style>).
   Design TOKENS are not here: they live in /assets/shell.css, shared with the
   document pages, exactly as before. */

/* ==========================================================================
   THALVIX v2 — the app screen. Real backend, real accounts.
   --------------------------------------------------------------------------
   Palette, spacing, type, radii and z-index scales are all in assets/shell.css.
   What stays here is what only the app shell needs: layout, the rail, the thread,
   bubbles, the composer, the sheet.
   ========================================================================== */
/* Preview-only A/B. Higher specificity than :root, so it wins wherever it sits. */
:root[data-prose="sans"]{--font-msg:var(--font-ui)}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 var(--t-md)/1.55 var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:var(--r1)}

/* ===================== shell ===================== */
.app{display:grid; grid-template-columns:290px 1fr; height:100dvh}
/* ⚠ Mobile rules live at the END of this stylesheet, not here. A media query
   placed ABOVE the rule it overrides loses the cascade at equal specificity —
   `.rail{display:none}` here was silently beaten by `.rail{display:flex}` below,
   which is why the rail stacked on top of the chat on a phone. */

/* ===================== left rail ===================== */
.rail{
  background:var(--bg-1); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; min-height:0;
}
.brand{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s5) var(--s4) var(--s4);
}
.brand-mark{
  width:34px;height:34px;border-radius:var(--r2);flex:none;
  background:linear-gradient(150deg,var(--accent-2),var(--accent-solid));
  display:grid;place-items:center;font-weight:600;color:#fff;font-size:var(--t-md);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(37,99,235,.28);
}
.brand-name{font-weight:600;letter-spacing:-.01em;font-size:var(--t-lg)}
.brand-sub{font-size:var(--t-xs);color:var(--ink-3);margin-top:-2px}

.rail-label{
  padding:var(--s4) var(--s4) var(--s2);
  font-size:var(--t-xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.rail-list{overflow-y:auto; flex:1; padding:0 var(--s2) var(--s4); min-height:0}
.companion{
  width:100%; display:flex; gap:var(--s3); align-items:center; text-align:left;
  padding:var(--s3); border-radius:var(--r2); transition:background .16s var(--ease);
}
.companion:hover{background:var(--bg-2)}
.companion[aria-current="true"]{background:var(--accent-wash); box-shadow:inset 0 0 0 1px var(--accent-line)}
.avatar{
  width:38px;height:38px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;font-weight:600;font-size:var(--t-sm);color:#fff;
  position:relative;
}
.avatar::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
  border-radius:var(--r-pill);background:var(--ok);border:2px solid var(--bg-1);
}
.companion-meta{min-width:0;flex:1}
.companion-name{font-weight:500;font-size:var(--t-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.companion-last{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  padding:2px 6px;border-radius:var(--r1);flex:none;
}
.tag-rp{background:rgba(61,214,140,.12);color:var(--ok)}
.tag-cw{background:rgba(245,158,11,.12);color:var(--warn)}

.rail-foot{border-top:1px solid var(--line-soft);padding:var(--s3);display:flex;align-items:center;gap:var(--s3)}
/* The avatar+name are now one link into account.php, so they need the flex layout their
   parent used to give them directly. */
.rail-user{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--s3);
  text-decoration:none;color:inherit;border-radius:var(--r1);
}
.rail-user:hover .companion-name{color:var(--accent-2)}
.rail-foot .avatar::after{display:none}

/* ===================== chat column ===================== */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}

.topbar{
  position:relative;
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:var(--z-sticky);
}
.topbar h1{font-size:var(--t-lg);font-weight:600;margin:0;letter-spacing:-.01em}
/* Mode belongs next to the name in here too: RP and CW behave differently enough
   (character sheets and scene state vs chapters) that you should not have to go back
   to the rail to find out which one you are in. */
.name-row{display:flex;align-items:center;gap:var(--s2)}
.topbar .sub{font-size:var(--t-xs);color:var(--ink-3)}
.spacer{flex:1}

/* ⭐ THE BUTTON FIX. The old chat carried every control in the header at all
   times. Here there are exactly TWO persistent controls; everything else
   lives behind one overflow, and message-level actions appear on hover. */
.icon-btn{
  width:34px;height:34px;border-radius:var(--r2);display:grid;place-items:center;
  color:var(--ink-2);transition:background .16s var(--ease),color .16s var(--ease);
}
.icon-btn:hover{background:var(--bg-2);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}