:root{
  --ground:#EEF2F2; --surface:#FFFFFF; --surface-2:#F5F8F8; --raise:#FFFFFF;
  --ink:#0E1A1B; --ink-2:#3C4E4F; --muted:#6B7C7D; --faint:#93A3A3;
  --line:#D8E2E1; --line-soft:#E7EEED;
  --accent:#0F6E7A; --accent-ink:#FFFFFF; --accent-wash:#E2F0F1; --accent-line:#B9DBDD;
  --ok:#15704A; --ok-wash:#E1F1E9; --ok-line:#A8D5C1;
  --warn:#9A5B06; --warn-wash:#FBEEDB; --warn-line:#EBC98F;
  --bad:#A8281D; --bad-wash:#FBE7E4; --bad-line:#EFB4AC;
  --them:#EDF1F1; --them-ink:#0E1A1B;
  --me:#0F6E7A; --me-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(14,26,27,.06), 0 8px 24px -12px rgba(14,26,27,.18);
  --shadow-lift:0 2px 6px rgba(14,26,27,.08), 0 18px 40px -16px rgba(14,26,27,.26);
  --r:14px; --r-sm:9px;
  --sans:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", ui-serif, Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080F10; --surface:#111B1C; --surface-2:#162223; --raise:#1A2728;
    --ink:#E7EFEE; --ink-2:#B4C4C3; --muted:#869797; --faint:#637576;
    --line:#253435; --line-soft:#1D2B2C;
    --accent:#5CC4CF; --accent-ink:#07191C; --accent-wash:#12292D; --accent-line:#1F4A50;
    --ok:#5FCF9B; --ok-wash:#0F2A20; --ok-line:#215A42;
    --warn:#E5AE4E; --warn-wash:#2C2110; --warn-line:#5C4520;
    --bad:#FF7B6D; --bad-wash:#2E1512; --bad-line:#5F2A24;
    --them:#1B2829; --them-ink:#E7EFEE;
    --me:#1F6E78; --me-ink:#F2FBFB;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --ground:#080F10; --surface:#111B1C; --surface-2:#162223; --raise:#1A2728;
  --ink:#E7EFEE; --ink-2:#B4C4C3; --muted:#869797; --faint:#637576;
  --line:#253435; --line-soft:#1D2B2C;
  --accent:#5CC4CF; --accent-ink:#07191C; --accent-wash:#12292D; --accent-line:#1F4A50;
  --ok:#5FCF9B; --ok-wash:#0F2A20; --ok-line:#215A42;
  --warn:#E5AE4E; --warn-wash:#2C2110; --warn-line:#5C4520;
  --bad:#FF7B6D; --bad-wash:#2E1512; --bad-line:#5F2A24;
  --them:#1B2829; --them-ink:#E7EFEE;
  --me:#1F6E78; --me-ink:#F2FBFB;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.75);
}

/* The `hidden` attribute must actually hide things. The browser's own [hidden]{display:none}
   rule is a UA-stylesheet rule, so ANY class selector that sets display — .gate{display:flex}
   here — silently beats it, leaving the element on top of the page while `hidden` reads true.
   This kept the sign-in panel covering the whole app after a successful login. */
[hidden]{display:none !important}

/* #app holds the whole signed-in UI. On phones it is a flex column so the list can fill
   the leftover height; from 768px up it becomes the two-pane grid (see RESPONSIVE). */
#app{display:flex; flex-direction:column; flex:1; min-height:0}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- shell ---------- */
.wrap{display:flex; justify-content:center; gap:26px; padding-block:0; padding-left:0; padding-right:0}
.device{
  width:100%; max-width:100%; min-height:100dvh; background:var(--surface);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.aside{display:none}
.aside,.mobnote{display:none!important}


/* ---------- top bars ---------- */
.appbar{
  flex:none; background:var(--surface); border-bottom:1px solid var(--line-soft);
  padding:14px 16px 10px; display:flex; align-items:center; gap:10px;
}
.wordmark{font-family:var(--serif); font-size:23px; line-height:1; letter-spacing:.1px}
.wordmark em{font-style:italic; color:var(--accent)}
.appbar .sub{font-size:11.5px; color:var(--faint); font-family:var(--mono); letter-spacing:.02em}

.netbar{
  flex:none; display:none; align-items:center; gap:8px; padding:7px 16px;
  background:var(--warn-wash); color:var(--warn); border-bottom:1px solid var(--warn-line);
  font-size:12.5px; font-weight:600;
}
.netbar.on{display:flex}
.netbar .dot{width:7px;height:7px;border-radius:50%;background:currentColor; animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* the counter — the whole point of the failure feature */
.counter{
  flex:none; display:flex; align-items:center; gap:10px; padding:11px 16px;
  border-bottom:1px solid var(--line-soft); background:var(--ok-wash); color:var(--ok);
}
.counter.alert{background:var(--bad-wash); color:var(--bad)}
.counter .n{
  font-family:var(--mono); font-weight:600; font-size:13px;
  min-width:22px; height:22px; padding:0 6px; border-radius:6px;
  display:grid; place-items:center; background:currentColor;
}
.counter .n span{color:var(--ok-wash); font-variant-numeric:tabular-nums}
.counter.alert .n span{color:var(--bad-wash)}
.counter .t{font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.counter .hint{margin-left:auto; font-size:11.5px; opacity:.8; font-weight:500}

/* ---------- filters ---------- */
.filters{
  flex:none; display:flex; gap:7px; padding:11px 16px; background:var(--surface);
  border-bottom:1px solid var(--line-soft);
  overflow-x:auto; scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  border:1px solid var(--line); background:transparent; color:var(--muted);
  padding:5px 12px; border-radius:99px; font-size:12.5px; font-weight:600; letter-spacing:-.005em;
  white-space:nowrap; flex:none;
}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}
.chip .c{font-family:var(--mono); font-size:11px; opacity:.75; margin-left:4px}

/* ---------- list ---------- */
.scroll{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
.list{display:flex; flex-direction:column}
.row{
  display:grid; grid-template-columns:44px 1fr; gap:11px; align-items:start;
  width:100%; text-align:left; background:var(--surface); border:0;
  border-bottom:1px solid var(--line-soft); padding:12px 16px 12px 16px;
  position:relative; transition:background .12s ease;
}
.row:hover{background:var(--surface-2)}
.row.flagged{background:var(--bad-wash)}
.row.flagged::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--bad)}
.row.flagged:hover{filter:brightness(.985)}

.av{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-weight:600; font-size:15px; letter-spacing:-.02em; color:#fff; position:relative;
}
.av .pip{
  position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%;
  border:2.5px solid var(--surface); background:var(--accent);
}
.row.flagged .av .pip{background:var(--bad); border-color:var(--bad-wash)}

.rmain{min-width:0; display:flex; flex-direction:column; gap:3px}
.rtop{display:flex; align-items:baseline; gap:7px}
.rname{font-weight:650; font-size:14.5px; letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rhandle{font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.rtime{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); white-space:nowrap; flex:none}
.rprev{
  font-size:13.2px; color:var(--muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.row.flagged .rprev{color:var(--bad)}
.rtags{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px}

.tag{
  font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:2.5px 7px; border-radius:5px;
  border:1px solid var(--line); color:var(--muted); background:var(--surface-2); white-space:nowrap;
}
.tag.intent{background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent)}
.tag.draft{background:transparent; border-color:var(--accent-line); color:var(--accent)}
.tag.draft::before{content:"✦ "; }
.tag.bad{background:var(--bad); border-color:var(--bad); color:#fff}
.tag.warn{background:var(--warn); border-color:var(--warn); color:#fff}
.tag.done{background:transparent; border-color:var(--line); color:var(--faint)}

.empty{padding:52px 30px; text-align:center; color:var(--faint); font-size:13.5px}

/* ---------- thread ---------- */
.thread{position:absolute; inset:0; background:var(--surface); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.32,.72,0,1); z-index:5}
.thread.open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){ .thread{transition:none} }

.thead{
  flex:none; display:grid; grid-template-columns:auto 36px 1fr auto; gap:10px; align-items:center;
  padding:11px 14px; border-bottom:1px solid var(--line-soft); background:var(--surface);
}
.back{background:none; border:0; padding:4px; margin-left:-4px; color:var(--accent); display:grid; place-items:center}
.thead .av{width:36px; height:36px; font-size:13px}
.tmeta{min-width:0}
.tname{font-weight:650; font-size:14.5px; letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thandle{font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.window{
  font-family:var(--mono); font-size:10.5px; font-weight:500; padding:4px 8px; border-radius:6px;
  white-space:nowrap; border:1px solid var(--line); color:var(--muted); background:var(--surface-2);
}
.window.soon{background:var(--warn-wash); border-color:var(--warn-line); color:var(--warn)}
.window.shut{background:var(--bad-wash); border-color:var(--bad-line); color:var(--bad)}

.msgs{flex:1; overflow-y:auto; padding:16px 14px 8px; display:flex; flex-direction:column; gap:9px; background:var(--surface)}
.daymark{align-self:center; font-family:var(--mono); font-size:10px; color:var(--faint); padding:2px 9px;
  background:var(--surface-2); border-radius:99px; margin:4px 0 8px}

.m{max-width:78%; display:flex; flex-direction:column; gap:4px}
.m.in{align-self:flex-start}
.m.out{align-self:flex-end; align-items:flex-end}
.bub{padding:9px 12px; border-radius:16px; font-size:14.2px; line-height:1.42; overflow-wrap:anywhere}
.m.in .bub{background:var(--them); color:var(--them-ink); border-bottom-left-radius:5px}
.m.out .bub{background:var(--me); color:var(--me-ink); border-bottom-right-radius:5px}
.m.out.pending .bub{opacity:.72}

.state{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; color:var(--faint); padding:0 3px}
.state .tick{color:var(--ok); font-weight:600}
.spin{width:9px;height:9px;border:1.5px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }

.alertbox{
  max-width:88%; align-self:flex-end; border-radius:11px; padding:10px 12px; margin-top:1px;
  border:1px solid var(--bad-line); background:var(--bad-wash); color:var(--bad);
}
.alertbox.unknown{border-color:var(--warn-line); background:var(--warn-wash); color:var(--warn)}
.alertbox .ttl{font-size:12.5px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:6px}
.alertbox .why{font-size:12.2px; margin-top:3px; line-height:1.4; color:var(--ink-2)}
.alertbox .raw{font-family:var(--mono); font-size:10px; margin-top:5px; opacity:.65; overflow-wrap:anywhere}
.alertbox .acts{display:flex; gap:7px; margin-top:9px; align-items:center}
.retry{
  border:1px solid currentColor; background:transparent; color:inherit; font-size:12px; font-weight:650;
  padding:5px 11px; border-radius:7px;
}
.retry:hover{background:color-mix(in srgb, currentColor 12%, transparent)}
.dupwarn{font-size:10.5px; line-height:1.3; opacity:.85; font-weight:500}

/* ---------- composer ---------- */
.composer{flex:none; border-top:1px solid var(--line-soft); background:var(--surface); padding:9px 12px 12px}
.note{
  display:flex; gap:8px; align-items:flex-start; padding:8px 10px; margin-bottom:8px;
  background:var(--warn-wash); border:1px solid var(--warn-line); border-radius:10px; color:var(--warn);
}
.note .nt{font-size:12.2px; line-height:1.38; flex:1}
.note .nt b{font-weight:700}
.note .x{background:none; border:0; color:inherit; font-size:15px; line-height:1; padding:1px 3px; opacity:.65}
.note .x:hover{opacity:1}

.draftflag{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--accent); font-weight:600; margin:0 2px 6px; letter-spacing:-.005em}

.crow{display:flex; gap:8px; align-items:flex-end}
textarea#box{
  flex:1; resize:none; font:inherit; font-size:14.5px; line-height:1.4; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:19px;
  padding:9px 13px; max-height:132px; min-height:38px; font-family:var(--sans);
}
textarea#box:focus{border-color:var(--accent); background:var(--surface); outline:none}
textarea#box:disabled{opacity:.55; cursor:not-allowed}
.send{
  flex:none; width:38px; height:38px; border-radius:50%; border:0; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; transition:transform .1s ease, opacity .12s ease;
}
.send:disabled{opacity:.32; cursor:not-allowed}
.send:not(:disabled):active{transform:scale(.93)}
.skip{
  flex:none; height:38px; padding:0 13px; border-radius:19px; border:1px solid var(--line);
  background:transparent; color:var(--muted); font-size:12.5px; font-weight:650;
}
.skip:hover{color:var(--ink); border-color:var(--ink-2)}

.shutbox{
  padding:11px 13px; border-radius:12px; background:var(--surface-2); border:1px dashed var(--line);
  color:var(--muted); font-size:12.6px; line-height:1.45;
}
.shutbox b{color:var(--ink); font-weight:650}

/* ---------- aside (desktop only) ---------- */
.aside h2{font-family:var(--serif); font-size:25px; margin:0 0 4px; font-weight:400; letter-spacing:.1px}
.aside .lede{font-size:13.2px; color:var(--muted); line-height:1.5; margin:0 0 18px}
.aside .warn{
  font-size:12.4px; line-height:1.5; padding:10px 12px; border-radius:10px; margin-bottom:18px;
  background:var(--warn-wash); border:1px solid var(--warn-line); color:var(--warn);
}
.aside h3{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 9px; font-weight:700}
.acts2{display:flex; flex-direction:column; gap:7px; margin-bottom:20px}
.act{
  text-align:left; padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); font-size:13px; font-weight:600; letter-spacing:-.01em; box-shadow:var(--shadow);
}
.act:hover{border-color:var(--accent); color:var(--accent)}
.act small{display:block; font-weight:400; font-size:11.5px; color:var(--muted); margin-top:2px; letter-spacing:0}
.act:hover small{color:var(--muted)}
.legend{display:flex; flex-direction:column; gap:8px}
.leg{display:grid; grid-template-columns:76px 1fr; gap:10px; align-items:baseline; font-size:12.3px; line-height:1.4}
.leg .k{font-family:var(--mono); font-size:10.5px; font-weight:600; padding:2.5px 6px; border-radius:5px; text-align:center}
.k.sent{background:var(--ok-wash); color:var(--ok); border:1px solid var(--ok-line)}
.k.failed{background:var(--bad-wash); color:var(--bad); border:1px solid var(--bad-line)}
.k.unknown{background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn-line)}
.k.sending{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.leg .v{color:var(--muted)}
.leg .v b{color:var(--ink); font-weight:650}

.mobnote{display:block; padding:14px 16px 20px; font-size:12px; color:var(--faint); line-height:1.5; text-align:center; background:var(--ground)}
@media (min-width:900px){ .mobnote{display:none} }

.toast{
  position:absolute; left:50%; bottom:78px; transform:translate(-50%, 14px); z-index:20;
  background:var(--ink); color:var(--ground); font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:99px; box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:88%;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* ============ additions for the live app ============ */

/* --- sign in --- */
.gate{position:absolute; inset:0; z-index:40; background:var(--surface); display:flex;
  flex-direction:column; justify-content:center; padding:0 26px; gap:18px}
.gate .brand{font-family:var(--serif); font-size:34px; line-height:1.05; letter-spacing:.2px}
.gate .brand em{font-style:italic; color:var(--accent)}
.gate .sub{font-size:13.5px; color:var(--muted); margin-top:-10px; line-height:1.45}
.gate label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--faint); font-weight:700; margin-bottom:5px}
.gate input{width:100%; font:inherit; font-size:16px; padding:11px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink)}
.gate input:focus{border-color:var(--accent); background:var(--surface); outline:none}
.gate .field + .field{margin-top:13px}
.gate button{width:100%; padding:12px; border-radius:11px; border:0; background:var(--accent);
  color:var(--accent-ink); font-size:15px; font-weight:650; letter-spacing:-.01em}
.gate button:disabled{opacity:.5}
.gate .err{font-size:13px; color:var(--bad); background:var(--bad-wash);
  border:1px solid var(--bad-line); border-radius:10px; padding:9px 11px; line-height:1.4}
.gate .err:empty{display:none}

/* --- header controls --- */
.appbar .right{margin-left:auto; display:flex; align-items:center; gap:7px}
.iconbtn{background:none; border:1px solid var(--line); border-radius:9px; width:31px; height:31px;
  display:grid; place-items:center; color:var(--muted)}
.iconbtn:hover{color:var(--ink); border-color:var(--ink-2)}

/* --- loading / empty --- */
.loading{padding:44px 30px; text-align:center; color:var(--faint); font-size:13.5px}
.loading .spin{margin:0 auto 12px; width:17px; height:17px; border-width:2px}

/* --- retry-in-flight --- */
.retry:disabled{opacity:.5; cursor:wait}

/* --- send failure surfaced at the composer --- */
.sendfail{margin-top:8px; padding:9px 11px; border-radius:10px; font-size:12.4px; line-height:1.4;
  background:var(--bad-wash); border:1px solid var(--bad-line); color:var(--bad)}
.sendfail:empty{display:none}

/* --- offline --- */
.netbar.offline{background:var(--bad-wash); color:var(--bad); border-color:var(--bad-line)}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   Three tiers, one DOM. The mobile layout is the base; the wider tiers
   re-place the same elements with grid rather than duplicating markup.

     < 768px   phone    one pane, thread slides in over the list
     768–1199  tablet   two panes, narrow list
     ≥ 1200px  desktop  two panes, wider list, capped overall width

   On the two-pane tiers the thread is always mounted, so the list stays
   visible while reading a thread — the whole point of a desktop inbox.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The "nothing selected yet" pane. Only exists on two-pane tiers. */
.nosel{display:none}

@media (min-width:768px){
  .wrap{padding:0}
  .device{
    max-width:none; height:100dvh; min-height:0; border-radius:0; border:0; box-shadow:none;
  }
  /* The panes are children of #app, not of .device — putting the grid on .device would
     leave every grid-area below inert, because they would be grandchildren. */
  #app{
    height:100%; min-height:0;
    display:grid;
    grid-template-columns:var(--pane, 316px) 1fr;
    grid-template-rows:auto auto auto auto minmax(0,1fr);
    grid-template-areas:
      "bar     bar"
      "net     net"
      "count   thread"
      "filter  thread"
      "list    thread";
  }
  .appbar{grid-area:bar; border-bottom:1px solid var(--line)}
  .gate{position:fixed}
  .netbar{grid-area:net}
  .counter{grid-area:count; border-right:1px solid var(--line)}
  .filters{grid-area:filter; border-right:1px solid var(--line)}
  .scroll{grid-area:list; border-right:1px solid var(--line); min-height:0}

  /* Docked pane, not an overlay. */
  .thread{
    grid-area:thread; position:static; transform:none; inset:auto;
    min-height:0; min-width:0; background:var(--surface-2);
  }
  .back{display:none}                      /* nothing to go back to — the list is right there */
  .nosel{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; height:100%; padding:40px 32px; text-align:center; color:var(--faint);
  }
  .nosel .mark{
    width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--line); color:var(--accent);
  }
  .nosel .h{font-family:var(--serif); font-size:23px; color:var(--ink-2); letter-spacing:.1px}
  .nosel .p{font-size:13.5px; max-width:34ch; line-height:1.5}
  .thread.open .nosel{display:none}
  .thread:not(.open) .thead,
  .thread:not(.open) .msgs,
  .thread:not(.open) .composer{display:none}

  .thead{background:var(--surface); grid-template-columns:36px 1fr auto; padding-block:12px}
  .msgs{background:var(--surface-2); padding-block:20px 10px}
  .composer{background:var(--surface); padding-block:12px 16px}

  /* Centre the reading column with padding rather than a wrapper element, so the bubbles
     stay real flex children and can still align left/right within it. */
  .thead, .msgs, .composer{--measure:820px; padding-inline:max(22px, calc((100% - var(--measure)) / 2))}

  /* A bubble stretched across a 1000px pane is unreadable. Cap the line length. */
  .msgs > .m{max-width:min(74%, 560px)}
  .msgs > .alertbox{max-width:min(84%, 540px)}
  .msgs > .m.out, .msgs > .alertbox{align-self:flex-end}
  .msgs > .m.in{align-self:flex-start}

  /* Anchor a short thread to the bottom, above the composer, the way chat reads —
     without justify-content:flex-end, which can clip the top of an overflowing
     scroll container. An auto margin on a zero-height ::before does it safely. */
  .msgs::before{content:""; margin-top:auto}

  /* Selected row reads as selected — the list no longer disappears when you open a thread. */
  .row.active{background:var(--accent-wash)}
  .row.active::after{content:""; position:absolute; inset:0 0 0 auto; width:3px; background:var(--accent)}
  .row.active.flagged{background:var(--bad-wash)}
  .row:focus-visible{outline-offset:-2px}

  .appbar{padding:12px 18px}
  .counter, .filters{padding-inline:16px}
}

/* Tablet: keep both panes but give the thread the room. */
@media (min-width:768px) and (max-width:1199px){
  :root{--pane:296px}
  .rprev{-webkit-line-clamp:1}
  .rtags .tag.intent{display:none}          /* the intent badge is the first thing to lose */
  .counter .hint{display:none}              /* then the counter's trailing hint */
  .chip{padding-inline:10px; font-size:12px}
  .nosel .h{font-size:20px}
}

/* Desktop: wider list, and stop the thread sprawling on ultrawide displays. */
@media (min-width:1200px){
  :root{--pane:364px}
  #app{max-width:1680px; margin-inline:auto; width:100%; border-inline:1px solid var(--line)}
  .msgs{padding-block:26px 12px}
  .composer{padding-block:14px 20px}
  .thead{padding-block:14px}
  .row{padding:14px 18px}
  .appbar{padding:14px 22px}
  .counter, .filters{padding-inline:18px}
  .wordmark{font-size:25px}
  textarea#box{font-size:15px}
}

@media (min-width:1600px){
  .thead, .msgs, .composer{--measure:940px}
}

/* Pointer devices get hover affordances; touch screens should not keep a stuck :hover. */
@media (hover:hover){
  .row{cursor:pointer}
}

/* Landscape phones are short — reclaim vertical space rather than scrolling the chrome away. */
@media (max-height:520px) and (max-width:900px){
  .appbar{padding-block:8px 6px}
  .wordmark{font-size:19px}
  .appbar .sub{display:none}
  .counter{padding-block:7px}
  .filters{padding-block:7px}
}