/* Usher — tenant-skinnable chat surface.
   Every colour/type decision is a token, so a tenant skin is a variable swap
   (spec §4 persona pack → brand tokens). Defaults below are the house neutral.

   The tokens are set at runtime from the tenant's own persona record
   (GET /usher/persona → cssVars), NOT from a per-tenant stylesheet. That is
   what makes a new tenant a config write rather than a deploy: the second
   tenant used to render in the first one's clothes because the skin was a
   static <link> in index.html.

   Anything the Apothekary skin once overrode has a token here, so her look is
   reproducible from config alone — which is the proof the token surface is
   expressive enough for a real brand rather than just a palette swap. */

:root{
  --bg:#0E1116;
  --surface:#151A21;
  --card:#1C232C;
  --raised:#232C37;
  --hairline:#2A3541;
  --fg:#ECEEF1;
  --muted:#98A2B0;
  --faint:#6B7684;
  --accent:#E8833A;
  --accent-ink:#12161B;
  --accent-wash:rgba(232,131,58,.12);
  --good:#4FB39A;
  --radius:14px;
  --radius-sm:10px;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.32);
  --maxw:760px;

  /* Type + shape. A tenant that sets none of these still looks deliberate. */
  --font-label:var(--font-body);
  --offer-title-font:var(--font-body);
  --body-size:16px;
  --title-size:1.7rem;      --title-weight:700;  --title-tracking:-.02em;  --title-lh:1.1;
  --pre-size:12px;          --pre-tracking:.14em;  --pre-color:var(--faint);
  --tag-size:.95rem;        --tag-style:normal;    --tag-color:var(--accent);
  --blurb-size:.93rem;
  --label-size:.95rem;      --label-tracking:0em;  --label-transform:none;
  --path-desc-size:.85rem;  --path-rule-width:0px;
  --offer-title-size:1rem;  --offer-title-weight:650;  --offer-title-tracking:-.01em;
  --offer-body-size:.9rem;  --offer-rule-width:3px;    --offer-bullet:none;
  --badge-size:10.5px;      --badge-tracking:.06em;    --chip-radius:20px;
  --cta-size:.88rem;        --cta-tracking:0em;        --cta-radius:8px;
  --fine-size:.78rem;
  --av-size:11px;           --av-tracking:.02em;
  --rule-width:0px;         --field-radius:var(--radius);
  --accent-blunt:#E5484D;   --accent-blunt-wash:rgba(229,72,77,.12);
}
:root[data-theme="light"]{
  --bg:#F5F3F0; --surface:#FFFFFF; --card:#FFFFFF; --raised:#F0EDE9;
  --hairline:#E2DDD6; --fg:#1A1D21; --muted:#5C646E; --faint:#8B9199;
  --accent:#C8631C; --accent-ink:#FFFFFF; --accent-wash:rgba(200,99,28,.09);
  --shadow:0 1px 2px rgba(20,24,28,.06),0 8px 24px rgba(20,24,28,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--body-size);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Fixed viewport height so .chat scrolls internally — otherwise the whole
   page scrolls and the composer walks off the bottom. dvh handles mobile
   browser chrome; vh is the fallback. */
.app{
  max-width:var(--maxw);margin:0 auto;
  height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;padding:0 16px;
}
.hd{flex:0 0 auto}

/* ── header ─────────────────────────────────────────── */
.hd{display:flex;gap:16px;align-items:flex-start;padding:26px 4px 18px;position:relative}
/* Accent rule under the masthead. Zero-width by default, so a tenant opts in
   by setting --rule-width rather than the house carrying someone's flourish. */
.hd::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--rule-width);
  background:linear-gradient(90deg,var(--accent),transparent);
}
.hd-avatar{
  width:60px;height:60px;border-radius:50%;flex:0 0 60px;
  background:linear-gradient(145deg,var(--raised),var(--card));
  border:1px solid var(--hairline);background-size:cover;background-position:center;
}
.hd-text{min-width:0}
.hd-pre{
  margin:0;font-family:var(--font-label);font-size:var(--pre-size);
  letter-spacing:var(--pre-tracking);text-transform:uppercase;color:var(--pre-color);
}
.hd-title{
  margin:.12em 0 .1em;font-family:var(--font-display);font-size:var(--title-size);
  line-height:var(--title-lh);letter-spacing:var(--title-tracking);
  font-weight:var(--title-weight);text-wrap:balance;
}
.hd-tag{
  margin:0;color:var(--tag-color);font-size:var(--tag-size);
  font-family:var(--font-display);font-style:var(--tag-style);
}
.hd-blurb{margin:.5em 0 0;color:var(--muted);font-size:var(--blurb-size);max-width:56ch}

/* ── chat ───────────────────────────────────────────── */
.chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:16px;padding:8px 0 20px;overflow-y:auto}
.msg{display:flex;gap:11px;align-items:flex-start;animation:rise .26s ease both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}
.msg.user{flex-direction:row-reverse}
.av{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-label);
  font-size:var(--av-size);font-weight:700;letter-spacing:var(--av-tracking);
  background:var(--raised);color:var(--muted);border:1px solid var(--hairline);
  background-size:cover;background-position:center;
}
.msg.bot .av{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.body{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:12px 15px;max-width:min(84%,58ch);
}
.msg.user .body{background:var(--accent-wash);border-color:transparent}
.body p{margin:0 0 .6em}
.body p:last-child{margin-bottom:0}
.body strong{font-weight:600}

/* typing */
.dots{display:inline-flex;gap:4px;padding:3px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:blink 1.3s infinite}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.5}}
.slow{color:var(--faint);font-size:.82rem;margin-top:6px}

/* ── quick paths ────────────────────────────────────── */
.paths{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.path{
  text-align:left;cursor:pointer;font:inherit;color:var(--fg);
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-sm);
  padding:11px 13px;display:flex;flex-direction:column;gap:2px;
  border-left:var(--path-rule-width) solid transparent;
  transition:border-color .15s,background .15s,transform .1s;
}
.path:hover{border-color:var(--accent);background:var(--raised)}
.path:active{transform:translateY(1px)}
.path b{
  font-family:var(--font-label);font-weight:600;font-size:var(--label-size);
  letter-spacing:var(--label-tracking);text-transform:var(--label-transform);
}
.path span{color:var(--muted);font-size:var(--path-desc-size);line-height:1.4}

/* ── offer card ─────────────────────────────────────── */
.offer{
  background:var(--card);border:1px solid var(--hairline);
  border-left:var(--offer-rule-width) solid var(--accent);
  border-radius:var(--radius-sm);padding:13px 15px;margin:11px 0;box-shadow:var(--shadow);
}
.offer-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.offer h4{
  margin:0;font-family:var(--offer-title-font);font-size:var(--offer-title-size);
  font-weight:var(--offer-title-weight);letter-spacing:var(--offer-title-tracking);
}
/* Tenant glyph before an offer title — empty by default, so no pseudo-element
   box is painted unless a tenant asks for one. */
.offer h4::before{
  content:var(--offer-bullet);color:var(--accent);
  font-size:.62em;vertical-align:.18em;margin-right:.5em;
}
.badge{
  font-family:var(--font-label);font-size:var(--badge-size);
  letter-spacing:var(--badge-tracking);text-transform:uppercase;font-weight:600;
  padding:2px 7px;border-radius:var(--chip-radius);border:1px solid var(--hairline);color:var(--muted);
}
.badge[data-s="free"]{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.badge[data-s="open-window"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.offer p{margin:0;color:var(--muted);font-size:var(--offer-body-size)}
.cta{
  display:inline-block;margin-top:10px;padding:7px 13px;border-radius:var(--cta-radius);
  background:var(--accent);color:var(--accent-ink);text-decoration:none;
  font-family:var(--font-label);font-size:var(--cta-size);letter-spacing:var(--cta-tracking);
  text-transform:var(--label-transform);font-weight:600;transition:filter .15s;
}
.cta:hover{filter:brightness(1.08)}

/* ── offer wall (hybrid surface) ────────────────────── */
.wall{margin:4px 0 2px;padding-left:41px}
.wall-lead{
  margin:0 0 2px;font-family:var(--font-label);font-size:var(--fine-size);
  letter-spacing:var(--label-tracking);text-transform:var(--label-transform);
  color:var(--faint);
}
.wall-ask{margin:10px 0 0;font-size:var(--fine-size);color:var(--faint)}
@media(max-width:560px){.wall{padding-left:0}}

/* ── capture ────────────────────────────────────────── */
.cap{margin-top:12px;border-top:1px dashed var(--hairline);padding-top:11px}
.cap-btn{
  cursor:pointer;font:inherit;font-family:var(--font-label);font-size:var(--cta-size);
  letter-spacing:var(--cta-tracking);text-transform:var(--label-transform);
  font-weight:600;color:var(--accent);
  background:none;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:var(--cta-radius);padding:7px 12px;
}
.cap-btn:hover{background:var(--accent-wash)}
.cap-form{display:flex;flex-direction:column;gap:9px}
.cap-form input[type=email]{
  font:inherit;font-size:.92rem;padding:9px 11px;border-radius:8px;
  background:var(--bg);border:1px solid var(--hairline);color:var(--fg);width:100%;
}
.cap-opt{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;color:var(--muted);line-height:1.4}
.cap-row{display:flex;gap:8px}
.cap-send{
  cursor:pointer;font:inherit;font-family:var(--font-label);font-size:var(--cta-size);
  letter-spacing:var(--cta-tracking);text-transform:var(--label-transform);font-weight:600;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--cta-radius);padding:8px 15px;
}
.cap-cancel{cursor:pointer;font:inherit;font-size:.88rem;background:none;border:none;color:var(--muted);padding:8px 6px}
.cap-status{font-size:.85rem;color:var(--muted);margin-top:7px}
.cap-status.ok{color:var(--good)}
.hidden{display:none !important}

/* ── composer ───────────────────────────────────────── */
.composer{position:sticky;bottom:0;background:var(--bg);padding:10px 0 14px;border-top:1px solid var(--hairline)}
.composer-in{display:flex;gap:9px;align-items:flex-end}
textarea#input{
  flex:1;font:inherit;font-size:.97rem;resize:none;max-height:120px;
  padding:11px 13px;border-radius:var(--field-radius);
  background:var(--surface);border:1px solid var(--hairline);color:var(--fg);
}
textarea#input:focus,input[type=email]:focus,.path:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
#send{
  flex:0 0 42px;height:42px;border-radius:var(--field-radius);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);border:none;display:grid;place-items:center;
}
#send:disabled{opacity:.45;cursor:default}
.hint,.privacy{margin:7px 2px 0;font-size:var(--fine-size);color:var(--faint);line-height:1.45}
.privacy a{color:var(--muted)}

/* feral/blunt mode — a tenant "mode" (spec §4 modes) restyles the surface */
body.mode-blunt{--accent:var(--accent-blunt);--accent-wash:var(--accent-blunt-wash)}
body.mode-blunt .hd-title{letter-spacing:-.03em}

@media(max-width:560px){
  .hd{padding-top:18px}
  .hd-avatar{width:48px;height:48px;flex-basis:48px}
  .hd-title{font-size:1.42rem}
  .body{max-width:88%}
}

/* §2.5 — a URL that appeared in prose. Never a link; shown as inert text so
   the visitor can see it was not endorsed as a destination. */
.inert-url{
  color:var(--faint);
  text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--faint) 55%,transparent);
  word-break:break-all;
}