/* ══════════════════════════════════════════════════════════════════════════════════════════
   chat.css — Messages: the full page (Option A) and the docked panel (Option B).
   Ava, 9 Sep 2026: "build a and b as an option".
   ══════════════════════════════════════════════════════════════════════════════════════════
   ⭐ WHY THIS IS ITS OWN FILE, against the house habit of one big index.html:
   public/index.html is 4MB and, on the day this was written, was being edited by a second
   Claude session at the same time. Two sessions writing one 4MB file is how work gets silently
   clobbered. Everything here lives outside it; index.html gains three one-line inserts and
   nothing else, so a collision can cost three lines rather than a day's build.

   ⭐⭐ COLOURS COME FROM THE APP'S OWN TOKENS, never from new literals. The --sk-* set is
   declared at :root in index.html — Ava's settled palette of 19 Aug (warm white, dark grey
   slab, dark/light pink, dark/light navy). The hex after each var() is the same value written
   out, so this file still renders correctly if it is ever opened on its own.
   The one exception is --ch-accent: the editorial reskin's rose (#A24F6C), which is what the
   masthead and the active-menu underline actually use. Matching the chrome beats matching a
   token that predates it.
   ⚠ Light is the ONLY theme — index.html forces data-theme="light" on every load — so there
   is deliberately no dark block here. Do not add one "for consistency"; it would be dead code
   of exactly the kind that made the first draft of this feature come out dark by mistake.  */

:root{
  --ch-paper:var(--sk-warm,#FDFBFA);
  --ch-card:#FFFFFF;
  --ch-card2:var(--sk-warm2,#F8F5F4);
  --ch-ink:var(--sk-ink,#141011);
  --ch-ink2:var(--sk-ink2,#5C5257);
  --ch-ink3:#6F676C;
  --ch-line:var(--sk-line,#E7E2E1);
  --ch-line2:#F4F0EF;
  --ch-accent:#A24F6C;            /* the reskin's AA-safe rose */
  --ch-rose:#B0587A;              /* the active-menu underline */
  --ch-accent-soft:#F5E6EC;
  --ch-dark:#2E1E24;              /* the Comms Hub pill */
  --ch-grey3:#EEEAE9;
  --ch-green:#4A7C59;
  --ch-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ch-serif:'Lora','Iowan Old Style',Georgia,serif;
  --ch-dockw:340px;
}

/* ══ shared furniture, used by both the page and the dock ══════════════════════════════ */
.ch-av{
  border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-family:var(--ch-sans); font-weight:700; background:var(--ch-grey3); color:var(--ch-ink2);
  text-transform:uppercase; overflow:hidden;
}
.ch-av.t1{background:var(--ch-accent-soft); color:var(--ch-accent);}
.ch-av.t2{background:#E8EAEF; color:#4A5568;}
.ch-av.t3{background:#E9EEE9; color:#41654A;}
.ch-av.me{background:var(--ch-dark); color:#fff;}

.ch-chip{
  border:1px solid var(--ch-line); border-radius:20px; padding:4px 10px; font-size:11px;
  color:var(--ch-ink2); background:var(--ch-card); white-space:nowrap; cursor:pointer;
  font-family:var(--ch-sans);
}
.ch-chip:hover{background:var(--ch-card2);}
.ch-chip.meet{border-color:var(--ch-accent); color:var(--ch-accent); background:var(--ch-accent-soft); font-weight:600;}
.ch-chip.on{background:var(--ch-dark); color:#fff; border-color:var(--ch-dark);}
.ch-chip:focus-visible,.ch-btn:focus-visible,.ch-cv:focus-visible{outline:2px solid var(--ch-accent); outline-offset:2px;}

.ch-btn{
  border:0; border-radius:20px; padding:6px 15px; font:600 11.5px/1.5 var(--ch-sans);
  background:var(--ch-dark); color:#fff; cursor:pointer;
}
.ch-btn[disabled]{opacity:.45; cursor:default;}
.ch-btn.ghost{background:var(--ch-card); color:var(--ch-ink2); border:1px solid var(--ch-line);}
.ch-btn.rose{background:var(--ch-accent);}

.ch-muted{color:var(--ch-ink3); font-size:12.5px;}
.ch-empty{padding:34px 22px; text-align:center; color:var(--ch-ink3); font-family:var(--ch-serif); font-size:14.5px;}
.ch-empty b{display:block; color:var(--ch-ink); font-size:16px; margin-bottom:6px; font-weight:600;}

/* ══ OPTION A — the full Messages page ════════════════════════════════════════════════ */
#view-messages{padding:0!important;}
.ch-page{
  display:grid; grid-template-columns:250px minmax(0,1fr) 0;
  /* 🔴 10 Sep — THE reason Ava had no typing box, through three attempts at the wrong thing.
     There were columns here and no ROWS, so the implicit row was `auto` and sized itself to its
     content: 779px of header + messages + composer inside a 460px panel. overflow:hidden then
     clipped the bottom 300px away — composer included — and clipped content cannot be scrolled
     to. The panel LOOKED right and the box was simply not on the screen.
     minmax(0,1fr) pins the row to the panel, so the message list has to scroll instead. */
  grid-template-rows:minmax(0,1fr);
  border:1px solid var(--ch-line); border-radius:12px; overflow:hidden;
  background:var(--ch-paper); height:calc(100vh - 190px);
  /* Was 460, which on a short window floored the panel taller than the space it had. The typing
     box matters more than a roomy message list. */
  min-height:380px;
  font-family:var(--ch-sans);
}
/* The thread panel is a third column that only exists when a thread is open, so the room gets
   the full width the rest of the time rather than living beside a permanently empty gutter. */
.ch-page.threading{grid-template-columns:250px minmax(0,1fr) 300px;}

/* ── the rail of conversations ─────────────────────────────────────────────────────── */
.ch-rail{background:var(--ch-card2); border-right:1px solid var(--ch-line); display:flex; flex-direction:column; min-width:0;}
.ch-rail-hd{
  padding:12px 13px 10px; border-bottom:1px solid var(--ch-line);
  display:flex; align-items:center; gap:8px;
}
.ch-rail-hd h3{margin:0; font-family:var(--ch-serif); font-size:15px; font-weight:600; flex:1; color:var(--ch-ink);}
.ch-search{
  margin:9px 11px 4px; display:block; width:calc(100% - 22px);
  border:1px solid var(--ch-line); border-radius:20px; padding:6px 12px;
  font:400 12px/1.5 var(--ch-sans); background:var(--ch-card); color:var(--ch-ink);
}
.ch-search::placeholder{color:var(--ch-ink3);}
.ch-rail-scroll{overflow-y:auto; padding:4px 0 10px; flex:1;}
.ch-grp{
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ch-ink3);
  font-weight:700; padding:13px 13px 5px; display:flex; align-items:center; gap:7px;
}
.ch-grp .add{
  margin-left:auto; cursor:pointer; color:var(--ch-ink3); font-size:14px; line-height:1;
  padding:0 3px; border-radius:4px;
}
.ch-grp .add:hover{color:var(--ch-accent); background:var(--ch-accent-soft);}
.ch-cv{
  display:flex; align-items:center; gap:10px; padding:8px 13px; cursor:pointer;
  border-left:2px solid transparent; border-top:0; border-right:0; border-bottom:0;
  background:none; width:100%; text-align:left; font-family:inherit;
}
.ch-cv:hover{background:var(--ch-card);}
.ch-cv.on{background:var(--ch-card); border-left-color:var(--ch-rose);}
.ch-cv .ch-av{width:26px; height:26px; font-size:10px;}
.ch-cv .hash{width:26px; text-align:center; color:var(--ch-ink3); font-size:15px; font-family:var(--ch-serif); flex:0 0 26px;}
.ch-cv .who{min-width:0; flex:1; display:flex; flex-direction:column;}
.ch-cv .who b{font-size:12.5px; font-weight:500; color:var(--ch-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ch-cv.on .who b,.ch-cv.unread .who b{color:var(--ch-ink); font-weight:600;}
.ch-cv .who span{font-size:11px; color:var(--ch-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ch-cv .n{
  flex:0 0 auto; background:var(--ch-accent); color:#fff; font-size:9.5px; font-weight:700;
  padding:1px 6px; border-radius:9px; font-variant-numeric:tabular-nums;
}
.ch-cv .at{flex:0 0 auto; color:var(--ch-accent); font-size:12px; font-weight:700;}

/* ── the room ──────────────────────────────────────────────────────────────────────── */
/* min-height:0 on both — a flex/grid item defaults to min-height:auto and refuses to shrink
   below its content, which is how overflow-y:auto ends up never engaging. */
.ch-room{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--ch-paper);}
.ch-room-hd{padding:10px 16px; border-bottom:1px solid var(--ch-line); display:flex; align-items:center; gap:11px;}
/* "# capital-raise" broken over two lines reads as a bug, not a channel. It keeps its width. */
.ch-room-hd h3{
  margin:0; font-family:var(--ch-serif); font-size:15.5px; font-weight:600;
  flex:0 0 auto; white-space:nowrap; color:var(--ch-ink); max-width:44%;
  overflow:hidden; text-overflow:ellipsis;
}
.ch-room-hd .topic{
  color:var(--ch-ink3); font-size:11.5px; padding-left:11px; border-left:1px solid var(--ch-line);
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ch-room-hd .acts{margin-left:auto; display:flex; gap:6px; align-items:center; flex:0 0 auto;}
.ch-faces{display:flex; margin-left:2px;}
.ch-faces .ch-av{
  width:22px; height:22px; font-size:8.5px; border:2px solid var(--ch-paper); margin-left:-7px;
}
.ch-msgs{flex:1; min-height:0; overflow-y:auto; padding:15px 16px 6px; display:flex; flex-direction:column; gap:13px;}
/* A half-empty room should have its messages at the BOTTOM, next to the box you type in —
   which is what every chat app does and what the eye expects. This spacer takes up the slack
   when there is spare room and collapses to nothing once the messages overflow, so it does
   not clip the top of a long conversation the way justify-content:flex-end would. */
.ch-msgs:before{content:""; margin-top:auto;}
.ch-day{display:flex; align-items:center; gap:12px; color:var(--ch-ink3); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;}
.ch-day:before,.ch-day:after{content:""; height:1px; background:var(--ch-line); flex:1;}

.ch-m{display:flex; gap:10px; position:relative;}
.ch-m .ch-av{width:31px; height:31px; font-size:10.5px;}
.ch-m .bd{min-width:0; flex:1;}
.ch-m .mh{display:flex; align-items:baseline; gap:8px; margin-bottom:2px; flex-wrap:wrap;}
.ch-m .mh b{font-size:12.5px; font-weight:600; color:var(--ch-ink);}
.ch-m .mh time{font-size:10.5px; color:var(--ch-ink3); font-variant-numeric:tabular-nums;}
.ch-m .mh .edited{font-size:10px; color:var(--ch-ink3); font-style:italic;}
.ch-m .tx{font-size:13.5px; color:var(--ch-ink); line-height:1.52; overflow-wrap:anywhere;}
.ch-m .tx a{color:var(--ch-accent);}
.ch-m .tx .men{background:var(--ch-accent-soft); color:var(--ch-accent); border-radius:4px; padding:1px 4px; font-weight:600;}
.ch-m .tx.gone{color:var(--ch-ink3); font-style:italic;}
/* ⭐ This rail is INFORMATION, not decoration: it marks the one message that names you, which
   is the thing you must never miss in a busy room. */
.ch-m.mentioned{
  background:var(--ch-accent-soft); border-left:2px solid var(--ch-accent);
  margin-left:-16px; padding:8px 0 8px 14px; border-radius:0 6px 6px 0;
}
/* Hover actions sit in the corner rather than on every row, so a quiet room stays quiet. */
.ch-m .rowacts{
  position:absolute; top:-9px; right:0; display:none; gap:3px;
  background:var(--ch-card); border:1px solid var(--ch-line); border-radius:20px; padding:2px 4px;
  box-shadow:0 4px 14px -6px rgba(46,30,36,.3);
}
.ch-m:hover .rowacts,.ch-m:focus-within .rowacts{display:flex;}
.ch-m .rowacts button{
  border:0; background:none; cursor:pointer; font-size:13px; line-height:1;
  padding:3px 4px; border-radius:5px; color:var(--ch-ink2);
}
.ch-m .rowacts button:hover{background:var(--ch-card2);}

.ch-rx{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap;}
.ch-rx button{
  border:1px solid var(--ch-line); background:var(--ch-card); border-radius:20px; padding:2px 8px;
  font:500 11.5px/1.5 var(--ch-sans); color:var(--ch-ink2); cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
}
.ch-rx button.mine{border-color:var(--ch-accent); background:var(--ch-accent-soft); color:var(--ch-accent);}
.ch-rx button span{font-variant-numeric:tabular-nums; font-size:10.5px;}

.ch-thr{
  margin-top:7px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  color:var(--ch-accent); font:600 11.5px/1.5 var(--ch-sans); background:none; border:0; padding:0;
}
.ch-thr:hover{text-decoration:underline;}
.ch-thr .fc{display:flex;}
.ch-thr .fc .ch-av{width:17px; height:17px; font-size:7.5px; border:1.5px solid var(--ch-paper); margin-left:-5px;}

.ch-att{
  margin-top:8px; border:1px solid var(--ch-line); border-radius:9px; padding:9px 11px;
  display:flex; align-items:center; gap:11px; background:var(--ch-card); max-width:360px;
  cursor:pointer; text-align:left; font-family:inherit; width:100%;
}
.ch-att:hover{border-color:var(--ch-accent);}
.ch-att .fi{
  width:29px; height:35px; border-radius:3px; flex:0 0 29px; background:var(--ch-accent-soft);
  color:var(--ch-accent); display:grid; place-items:center; font:700 8.5px/1 var(--ch-sans);
}
.ch-att .fn{min-width:0;}
.ch-att .fn b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ch-ink);}
.ch-att .fn span{font-size:11px; color:var(--ch-ink3); font-variant-numeric:tabular-nums;}
.ch-att img{max-width:100%; border-radius:6px; display:block;}

.ch-meet{
  margin-top:8px; border:1px solid var(--ch-line); border-radius:9px; padding:10px 12px;
  background:var(--ch-card); display:flex; align-items:center; gap:12px; max-width:400px;
}
.ch-meet .mi{
  width:31px; height:31px; border-radius:7px; flex:0 0 31px; background:var(--ch-dark);
  color:#fff; display:grid; place-items:center; font-size:13px;
}
.ch-meet .mt{min-width:0; flex:1;}
.ch-meet .mt b{display:block; font-size:12.5px; font-weight:600; color:var(--ch-ink);}
.ch-meet .mt span{font-size:11px; color:var(--ch-ink3); overflow-wrap:anywhere;}

.ch-receipt{display:flex; align-items:center; gap:7px; justify-content:flex-end; color:var(--ch-ink3); font-size:10.5px; padding:0 2px 2px;}
.ch-receipt .fc{display:flex;}
.ch-receipt .fc .ch-av{width:15px; height:15px; font-size:7px; border:1.5px solid var(--ch-paper); margin-left:-4px;}

/* ── composer ──────────────────────────────────────────────────────────────────────── */
.ch-comp{border-top:1px solid var(--ch-line); padding:10px 16px 12px; background:var(--ch-card2); position:relative;}
.ch-compbox{border:1px solid var(--ch-line); border-radius:9px; background:var(--ch-card); padding:8px 10px;}
.ch-compbox:focus-within{border-color:var(--ch-accent);}
.ch-input{
  width:100%; border:0; outline:0; resize:none; background:none; color:var(--ch-ink);
  font:400 13.5px/1.5 var(--ch-sans); max-height:132px; min-height:20px; display:block;
}
.ch-input::placeholder{color:var(--ch-ink3);}
.ch-comptools{display:flex; align-items:center; gap:4px; margin-top:8px;}
.ch-tool{
  width:26px; height:26px; border-radius:6px; display:grid; place-items:center; cursor:pointer;
  color:var(--ch-ink3); font-size:12.5px; border:0; background:none;
}
.ch-tool:hover{background:var(--ch-card2); color:var(--ch-ink);}
.ch-comptools .ch-btn{margin-left:auto;}
.ch-pending{
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px;
}
.ch-pending span{
  border:1px solid var(--ch-line); border-radius:20px; padding:2px 9px; font-size:11px;
  background:var(--ch-card2); color:var(--ch-ink2); display:inline-flex; gap:6px; align-items:center;
}
.ch-pending span i{cursor:pointer; font-style:normal; color:var(--ch-ink3);}

/* @mention autocomplete */
.ch-mentions{
  position:absolute; bottom:calc(100% - 4px); left:16px; z-index:40;
  background:var(--ch-card); border:1px solid var(--ch-line); border-radius:10px;
  box-shadow:0 18px 44px -20px rgba(46,30,36,.42); padding:5px; min-width:210px; max-height:214px; overflow-y:auto;
}
.ch-mentions button{
  display:flex; align-items:center; gap:9px; width:100%; border:0; background:none; cursor:pointer;
  padding:7px 9px; border-radius:7px; font:500 12.5px/1.4 var(--ch-sans); color:var(--ch-ink2); text-align:left;
}
.ch-mentions button .ch-av{width:22px; height:22px; font-size:9px;}
.ch-mentions button.on,.ch-mentions button:hover{background:var(--ch-accent-soft); color:var(--ch-accent);}

/* ── thread panel ──────────────────────────────────────────────────────────────────── */
.ch-thread{background:var(--ch-card2); border-left:1px solid var(--ch-line); display:flex; flex-direction:column; min-width:0; overflow:hidden;}
.ch-page:not(.threading) .ch-thread{display:none;}
.ch-thread-hd{padding:10px 13px; border-bottom:1px solid var(--ch-line); display:flex; align-items:center; justify-content:space-between;}
.ch-thread-hd b{font-family:var(--ch-serif); font-size:13.5px; font-weight:600; color:var(--ch-ink);}
.ch-thread-hd button{border:0; background:none; cursor:pointer; color:var(--ch-ink3); font-size:17px; line-height:1; padding:0 3px;}
.ch-thread-bd{padding:12px 13px; display:flex; flex-direction:column; gap:12px; flex:1; overflow-y:auto;}
.ch-thread-root{background:var(--ch-card); border:1px solid var(--ch-line); border-radius:9px; padding:9px 10px;}

/* ══ OPTION B — the docked panel ═══════════════════════════════════════════════════════ */
/* Fixed to the viewport rather than placed in the page, because the whole point is that it
   survives moving from a firm to a mandate to the dashboard without losing the conversation. */
#ch-dock{
  position:fixed; right:0; top:0; bottom:0; width:var(--ch-dockw); z-index:60;
  background:var(--ch-card2); border-left:1px solid var(--ch-line);
  box-shadow:-18px 0 40px -24px rgba(46,30,36,.3);
  display:flex; flex-direction:column; font-family:var(--ch-sans);
  transform:translateX(100%); transition:transform .22s ease;
}
#ch-dock.open{transform:translateX(0);}
#ch-dock .ch-msgs{padding:13px 13px 5px;}
/* At 340px the header cannot carry a name, three controls AND a row of faces — the faces were
   being clipped by the panel edge. They are the first thing to go: in a DM they say nothing the
   name has not already said, and in a group the picker above names it. */
#ch-dock .ch-faces{display:none;}
#ch-dock .ch-room-hd{padding:9px 12px; gap:8px;}
#ch-dock .ch-room-hd h3{max-width:52%;}
#ch-dock .ch-comp{padding:9px 12px 11px;}
#ch-dock .ch-m.mentioned{margin-left:-13px; padding-left:11px;}
#ch-dock .ch-mentions{left:12px;}
/* When the dock is open the app shell gives up the width instead of hiding under it —
   a panel that covers the table you are reading defeats its own purpose. */
body.ch-docked main.main{padding-right:var(--ch-dockw);}

/* The handle: a tab on the right edge, carrying the unread count so it is worth glancing at. */
#ch-handle{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:59;
  background:var(--ch-dark); color:#fff; border:0; cursor:pointer;
  border-radius:9px 0 0 9px; padding:13px 7px; display:flex; flex-direction:column;
  align-items:center; gap:8px; box-shadow:-6px 0 18px -8px rgba(46,30,36,.4);
  font-family:var(--ch-sans);
}
#ch-handle:hover{background:#3d2830;}
#ch-handle .lbl{
  writing-mode:vertical-rl; text-orientation:mixed; font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
#ch-handle .n{
  background:var(--ch-accent); color:#fff; border-radius:9px; padding:1px 5px;
  font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
body.ch-docked #ch-handle{display:none;}
#ch-handle[hidden]{display:none!important;}
/* On the Messages page itself the panel and its handle stand down — see afterNav() in chat.js.
   The padding has to come back with them, or the page keeps a 340px empty margin. */
body.ch-onmessages #ch-dock,
body.ch-onmessages #ch-handle{display:none!important;}
body.ch-onmessages.ch-docked main.main{padding-right:0;}

/* ══ the sound setting ════════════════════════════════════════════════════════════════ */
.ch-soundrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--ch-line); border-radius:9px; padding:11px 13px;
  background:var(--ch-card); margin-top:12px;
}
.ch-soundrow label{
  display:flex; align-items:center; gap:9px; flex:1 1 260px;
  font-size:12.5px; color:var(--ch-ink2); cursor:pointer; line-height:1.45;
}
.ch-soundrow input{accent-color:var(--ch-accent); margin:0; flex:0 0 auto; width:16px; height:16px;}

/* ══ "Talked about here" — the conversation, on the record it is about ════════════════
   Sits at the foot of a firm or contact dossier. Quiet by design: it is a reference, not the
   point of the page, so it uses a hairline and a heading rather than another card.          */
.ch-recpanel{
  margin-top:26px; padding-top:16px; border-top:1px solid var(--ch-line);
  font-family:var(--ch-sans);
}
.ch-recpanel-hd{display:flex; align-items:center; gap:11px; margin-bottom:12px; flex-wrap:wrap;}
.ch-recpanel-hd h3{
  margin:0; font-family:var(--ch-serif); font-size:16px; font-weight:600; color:var(--ch-ink);
}
.ch-recpanel-hd .n{
  font-size:11px; font-weight:700; color:var(--ch-ink3);
  border:1px solid var(--ch-line); border-radius:20px; padding:1px 8px;
  font-variant-numeric:tabular-nums;
}
.ch-recpanel-hd .ch-btn{margin-left:auto;}
.ch-recempty{margin:0; color:var(--ch-ink3); font-size:13px; max-width:62ch; line-height:1.55;}
.ch-recpanel-bd{display:flex; flex-direction:column; gap:2px;}
.ch-recmsg{
  display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:9px 10px; border-radius:9px;
  font-family:inherit; color:inherit;
}
.ch-recmsg:hover{background:var(--ch-card2);}
.ch-recmsg:focus-visible{outline:2px solid var(--ch-accent); outline-offset:-2px;}
.ch-recmsg .ch-av{width:28px; height:28px; font-size:10px;}
.ch-recmsg .rm{min-width:0; flex:1;}
.ch-recmsg .l1{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.ch-recmsg .l1 b{font-size:12.5px; font-weight:600; color:var(--ch-ink);}
.ch-recmsg .l1 em{
  font-style:normal; font-size:11px; color:var(--ch-accent);
  border:1px solid var(--ch-line); border-radius:20px; padding:0 7px;
}
.ch-recmsg .l1 time{font-size:10.5px; color:var(--ch-ink3); margin-left:auto; font-variant-numeric:tabular-nums;}
.ch-recmsg .l2{
  display:block; font-size:12.5px; color:var(--ch-ink2); margin-top:2px; line-height:1.45;
  overflow-wrap:anywhere;
}
@media (max-width:640px){
  .ch-recpanel-hd .ch-btn{margin-left:0; width:100%;}
  .ch-recmsg .l1 time{margin-left:0;}
}

/* ══ "nobody can reach you" ═══════════════════════════════════════════════════════════
   Sits above the conversation list, because it is about whether this tool works at all —
   not a setting. Warm rather than red: it is a thing to do, not a thing gone wrong.       */
.ch-nag{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid #E9CBD6; background:var(--ch-accent-soft); border-radius:10px;
  padding:12px 14px; margin-bottom:12px; font-family:var(--ch-sans); color:#7A3A50;
}
.ch-nag .t{flex:1 1 320px; min-width:0; font-size:13px; line-height:1.5;}
.ch-nag .t b{color:#5E2A3C; font-weight:600;}
.ch-nag .a{display:flex; gap:8px; flex:0 0 auto;}
.ch-nag.blocked{border-color:#E5D6C2; background:#FBF3E8; color:#6E5433;}
@media (max-width:640px){
  .ch-nag{margin:0 12px 10px; padding:11px 12px;}
  .ch-nag .a{width:100%;}
  .ch-nag .a .ch-btn{flex:1;}    /* thumb-width buttons, not two small ones in a corner */
}

/* ══ notifications panel ══════════════════════════════════════════════════════════════ */
.ch-notif{padding:2px 0 6px;}
.ch-dev{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--ch-line);
  border-radius:9px; background:var(--ch-card); margin-bottom:7px;
}
.ch-dev .st{width:9px; height:9px; border-radius:50%; flex:0 0 9px;}
.ch-dev .st.ok{background:var(--ch-green);}
.ch-dev .st.bad{background:var(--ch-accent);}
.ch-dev .st.unk{background:var(--ch-line);}
.ch-dev .dd{min-width:0; flex:1;}
.ch-dev .dd b{display:block; font-size:12.5px; font-weight:600; color:var(--ch-ink);}
.ch-dev .dd span{font-size:11px; color:var(--ch-ink3);}
.ch-warn{
  background:var(--ch-accent-soft); border:1px solid #E9CBD6; border-radius:9px;
  padding:11px 13px; font-size:12.5px; color:#7A3A50; margin-bottom:10px;
}
.ch-warn b{font-weight:600;}

/* ══ the little modal used for "new group chat" / "new message" ═══════════════════════ */
.ch-modal{
  position:fixed; inset:0; z-index:120; background:rgba(46,30,36,.34);
  display:grid; place-items:center; padding:20px;
}
.ch-modal[hidden]{display:none!important;}
.ch-modal .box{
  background:var(--ch-card); border-radius:14px; width:min(430px,100%);
  box-shadow:0 40px 90px -40px rgba(46,30,36,.6); overflow:hidden;
  max-height:86vh; display:flex; flex-direction:column;
}
.ch-modal .box h3{
  margin:0; padding:15px 17px 13px; font-family:var(--ch-serif); font-size:17px; font-weight:600;
  border-bottom:1px solid var(--ch-line); color:var(--ch-ink);
}
.ch-modal .box .bdy{padding:14px 17px; overflow-y:auto; flex:1;}
.ch-modal .box .ft{padding:12px 17px; border-top:1px solid var(--ch-line); display:flex; gap:8px; justify-content:flex-end; background:var(--ch-card2);}
.ch-field{
  width:100%; border:1px solid var(--ch-line); border-radius:8px; padding:8px 11px;
  font:400 13px/1.5 var(--ch-sans); background:var(--ch-card); color:var(--ch-ink); margin-bottom:11px;
}
.ch-field:focus{outline:0; border-color:var(--ch-accent);}
.ch-people{display:flex; flex-direction:column; gap:2px;}
.ch-people label{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px; cursor:pointer;
  font-size:13px; color:var(--ch-ink2);
}
.ch-people label:hover{background:var(--ch-card2);}
.ch-people label .ch-av{width:26px; height:26px; font-size:10px;}
.ch-people label input{accent-color:var(--ch-accent); margin:0;}

/* ══ responsive ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .ch-page.threading{grid-template-columns:220px minmax(0,1fr);}
  .ch-page.threading .ch-thread{
    position:absolute; right:0; top:0; bottom:0; width:300px; z-index:12;
    box-shadow:-16px 0 36px -22px rgba(46,30,36,.34);
  }
  .ch-page{position:relative;}
}
@media (max-width:820px){
  /* On a phone the rail IS the first screen and the room replaces it, rather than the two
     fighting over 380px. .roomopen is set when a conversation is picked. */
  /* dvh, not vh: on iOS Safari `vh` counts the address bar that then slides away, so the box
     you type in sits under the browser chrome — the one control you always need. */
  .ch-page,.ch-page.threading{grid-template-columns:minmax(0,1fr); height:calc(100dvh - 132px);}
  .ch-page .ch-room{display:none;}
  .ch-page.roomopen .ch-rail{display:none;}
  .ch-page.roomopen .ch-room{display:flex;}
  .ch-page.threading .ch-thread{width:100%;}
  .ch-back{display:inline-flex!important;}
  #ch-dock{width:100%;}
  body.ch-docked main.main{padding-right:0;}
}
/* ── the phone: give the conversation the screen ───────────────────────────────────────── */
@media (max-width:640px){
  /* Measured on a 375×812 screen: the editorial page-head was spending 67px — a 40px serif
     "Messages" and an eyebrow — restating the word already highlighted in the menu. On a
     laptop that heading sets the tone of the page; on a phone it is the difference between
     seeing four messages and seeing seven. The eyebrow goes, the word stays, smaller. */
  #view-messages .page-head{margin-bottom:8px;}
  #view-messages .page-head .eyebrow-row{display:none;}
  #view-messages .page-head .headline{font-size:23px; line-height:1.1;}
  /* Full-bleed. Measured: the chat sat 327px wide in a 375px screen, because the gutter is
     `padding:22px 24px` on the shared `.content` wrapper — the parent, not this view, which is
     why zeroing padding here did nothing. Cancelling it with a negative margin is the only way
     to go edge-to-edge without editing a container every other page depends on.
     ⚠ The -24px mirrors that padding. If .content's gutter ever changes, this goes slightly out
     of step — it will look a little inset or a little wide, and nothing will break. */
  /* ⚠ The negative margin goes on the PANEL, not the view. Putting it on #view-messages pulled
     the heading left with it and clipped the "M" of "Messages" against the screen edge. The
     heading is prose and wants the container's gutter; only the chat wants the full width. */
  #view-messages{padding-left:0; padding-right:0;}
  #view-messages #ch-mount{margin-left:-24px; margin-right:-24px;}
  .ch-page,.ch-page.threading{border-radius:0; border-left:0; border-right:0;}
  .ch-msgs{padding:12px 12px 4px;}
  .ch-comp{padding:8px 12px 10px;}
  .ch-m.mentioned{margin-left:-12px; padding-left:10px;}
  /* Room for a thumb, and iOS stops zooming the page on focus at 16px or above. */
  .ch-input{font-size:16px;}
  .ch-room-hd{padding:9px 12px;}
  .ch-room-hd h3{max-width:none; font-size:16px;}
  .ch-room-hd .topic{display:none;}       /* the name and the back arrow are what matter here */
}
.ch-back{display:none; border:0; background:none; cursor:pointer; color:var(--ch-ink2); font-size:17px; line-height:1; padding:0 2px 0 0;}

@media (prefers-reduced-motion:reduce){
  #ch-dock{transition:none;}
}

/* ── C (Ava, 10 Sep): presence. Worked out from the last heartbeat when it is READ, so a
   browser that dies fades to grey by itself rather than claiming somebody is available. */
.ch-avwrap{position:relative; display:inline-flex; flex:0 0 auto;}
.ch-dot{
  position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--ch-card); box-sizing:content-box;
}
.ch-dot.on{background:#2E7D5B;}
.ch-dot.away{background:#D9B25C;}
.ch-dot.off{background:#C9C1C1;}
.ch-typing{font-size:11px; color:var(--ch-ink3); font-style:italic; white-space:nowrap;}

/* ── A (Ava, 10 Sep): a message that names a firm, person or deal ─────────────────────────
   The chip is a link, not decoration: it opens the record it names. */
.ch-rec{
  display:inline-flex; align-items:center; gap:6px; margin-top:5px; cursor:pointer;
  font-family:var(--ch-sans); font-size:11px; color:var(--ch-ink);
  background:var(--ch-grey3); border:1px solid var(--ch-line); border-radius:5px; padding:2px 8px;
}
.ch-rec:hover{border-color:var(--ch-accent); color:var(--ch-accent);}
.ch-rec b{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ch-accent);
}
.ch-rec i{font-style:normal; cursor:pointer; opacity:.6; padding-left:2px;}
.ch-rec i:hover{opacity:1;}
.ch-recq{
  width:100%; border:1px solid var(--ch-line); border-radius:6px; padding:8px 10px;
  font-family:var(--ch-sans); font-size:13px; background:var(--ch-card);
}
.ch-reclist{max-height:280px; overflow:auto; margin-top:8px;}
.ch-recrow{
  padding:7px 9px; border-radius:5px; cursor:pointer; font-family:var(--ch-sans); font-size:12.5px;
  display:flex; align-items:baseline; gap:7px;
}
.ch-recrow:hover{background:var(--ch-grey3);}
.ch-recrow.on{background:var(--ch-accent-soft); color:var(--ch-accent);}
.ch-recrow b{font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ch-ink3);}
.ch-recrow.on b{color:var(--ch-accent);}
.ch-recrow span{margin-left:auto; font-size:11px; color:var(--ch-ink3);}
.ch-recnote{font-family:var(--ch-sans); font-size:12px; color:var(--ch-ink3); padding:10px 2px;}

/* When we last looked. Without it, "presence is broken" and "nobody is online" look the same. */
.ch-presage{
  font-family:var(--ch-sans); font-size:9.5px; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--ch-ink3); margin-left:7px; opacity:.85;
}

/* ── The emoji picker (Ava, 10 Sep: "fix the emoji set up") ───────────────────────────────
   The ☺ button used to insert a RANDOM one of eight. This is a real picker: searchable by what
   you would call the thing, grouped the way somebody looks, recents first. */
.ch-emojibox{
  position:absolute; bottom:calc(100% - 4px); left:16px; z-index:45; width:302px;
  background:var(--ch-card); border:1px solid var(--ch-line); border-radius:11px;
  box-shadow:0 18px 44px -20px rgba(46,30,36,.42); padding:9px;
}
.ch-emojibox.react{ bottom:auto; top:26px; right:12px; left:auto; }
.ch-emq{
  width:100%; border:1px solid var(--ch-line); border-radius:7px; padding:6px 9px;
  font:400 12px/1.4 var(--ch-sans); background:var(--ch-paper); color:var(--ch-ink);
}
.ch-emq:focus{outline:2px solid var(--ch-accent); outline-offset:1px; border-color:var(--ch-accent);}
.ch-emgrid{max-height:246px; overflow-y:auto; margin-top:7px;}
.ch-emgrp{
  font:600 9px/1 var(--ch-sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ch-ink3); padding:9px 3px 5px;
}
.ch-emrow{display:grid; grid-template-columns:repeat(8,1fr); gap:1px;}
.ch-emrow button{
  border:0; background:none; cursor:pointer; font-size:18px; line-height:1;
  padding:5px 0; border-radius:6px;
}
.ch-emrow button:hover{background:var(--ch-accent-soft);}
.ch-emrow button:focus-visible{outline:2px solid var(--ch-accent); outline-offset:-2px;}
.ch-emnone{font:400 12px/1.5 var(--ch-sans); color:var(--ch-ink3); padding:14px 4px;}