/* Nyx Hive — cosmic lobster theme 🦞🐝🌌 (matches nyxvault.org / Nyx Analytics) */
:root {
  --pink: #e879a8; --purple: #a855f7; --cyan: #67e8f9; --violet: #7c3aed; --magenta: #d946ef;
  --green: #4ade80; --red: #f87171; --yellow: #fbbf24; --amber: #f59e0b; --blue: #60a5fa;
  --bg: #0d0d1a; --bg2: #141425; --text: #e2e8f0; --text-dim: rgba(226,232,240,.55);
  --glass: rgba(255,255,255,.04); --glass-border: rgba(168,85,247,.2);
  --glow-pink: rgba(232,121,168,.4); --glow-purple: rgba(168,85,247,.3);
  --grad: linear-gradient(135deg, var(--pink), var(--purple), var(--violet));
  --grad-text: linear-gradient(135deg, var(--text) 0%, var(--cyan) 40%, var(--pink) 70%, var(--purple) 100%);
  --radius: 16px; --radius-sm: 10px; --radius-lg: 20px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden; min-height:100vh; min-height:100dvh; }
a { color:var(--cyan); text-decoration:none; }
button { font-family:inherit; }

/* cosmic background */
.cosmic-bg { position:fixed; inset:0; z-index:-3; background:url('/assets/cosmic-bg.webp') center/cover no-repeat fixed; opacity:.28; }
.cosmic-overlay { position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(13,13,26,.78) 0%,rgba(20,20,37,.9) 50%,rgba(13,13,26,.96) 100%); }
.starfield { position:fixed; inset:0; z-index:-1; pointer-events:none; }
.stars { position:absolute; inset:0; background-image:
  radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.7) 50%, transparent 100%),
  radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,.5) 50%, transparent 100%),
  radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.6) 50%, transparent 100%),
  radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.4) 50%, transparent 100%),
  radial-gradient(1.5px 1.5px at 20% 85%, rgba(103,232,249,.5) 50%, transparent 100%),
  radial-gradient(1.5px 1.5px at 60% 45%, rgba(232,121,168,.4) 50%, transparent 100%),
  radial-gradient(1px 1px at 90% 10%, rgba(168,85,247,.5) 50%, transparent 100%);
  animation:twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.4;} to{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .stars,.logo,.dot,.bee-orbit{animation:none!important;} }

.grad-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.container { max-width:1240px; margin:0 auto; padding:18px 18px 96px; }

/* header */
header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0 18px; border-bottom:1px solid rgba(168,85,247,.12); margin-bottom:20px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:44px; height:44px; filter:drop-shadow(0 0 14px var(--glow-pink)); animation:logoPulse 4s ease-in-out infinite; }
@keyframes logoPulse { 0%,100%{transform:scale(1); filter:drop-shadow(0 0 14px var(--glow-pink));} 50%{transform:scale(1.05); filter:drop-shadow(0 0 22px var(--glow-pink)) drop-shadow(0 0 40px var(--glow-purple));} }
.brand h1 { font-size:1.45rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.brand .subtitle { font-size:.7rem; color:var(--text-dim); letter-spacing:.06em; margin-top:3px; }
.header-right { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.realtime { display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--text-dim); padding:6px 13px; background:rgba(74,222,128,.08); border:1px solid rgba(74,222,128,.22); border-radius:999px; }
.realtime.off { background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.25); }
.realtime .dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 2s infinite; }
.realtime.off .dot { background:var(--red); box-shadow:0 0 10px var(--red); animation:none; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.btn { border:none; cursor:pointer; font-weight:700; border-radius:12px; padding:9px 17px; font-size:.83rem; transition:all .25s; color:#fff; background:var(--grad); box-shadow:0 4px 22px rgba(168,85,247,.35); }
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 32px rgba(168,85,247,.5); }
.btn.ghost { background:var(--glass); border:1px solid var(--glass-border); color:var(--text); backdrop-filter:blur(8px); box-shadow:none; }
.btn.ghost:hover { background:rgba(168,85,247,.1); border-color:rgba(168,85,247,.4); }
.btn.icon { padding:9px 12px; }

/* overview stat strip */
.stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.card { background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); padding:16px 18px; backdrop-filter:blur(12px); transition:all .3s; position:relative; overflow:hidden; }
.card:hover { border-color:rgba(168,85,247,.4); box-shadow:0 8px 40px rgba(168,85,247,.12); }
.stat .label { font-size:.66rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.stat .value { font-size:1.85rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
.stat.alert .value { color:var(--amber); }
.stat.bad .value { color:var(--red); }
.stat.good .value { color:var(--green); }

/* tabs */
.tabs { display:inline-flex; background:var(--glass); border:1px solid var(--glass-border); border-radius:999px; padding:4px; gap:2px; backdrop-filter:blur(8px); margin-bottom:18px; }
.tabs button { background:transparent; border:none; color:var(--text-dim); padding:9px 18px; border-radius:999px; cursor:pointer; font-size:.85rem; font-weight:700; transition:all .25s; display:flex; align-items:center; gap:7px; }
.tabs button.active { background:var(--grad); color:#fff; box-shadow:0 0 18px rgba(168,85,247,.4); }
.tabs .badge { background:rgba(0,0,0,.3); border-radius:999px; padding:1px 7px; font-size:.7rem; min-width:18px; }
.tabs button.active .badge { background:rgba(255,255,255,.25); }

.view { display:none; }
.view.active { display:block; animation:fade .35s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ── BEES ── */
.bee-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.bee { padding:16px 18px; cursor:pointer; border-left:3px solid var(--text-dim); }
.bee.running { border-left-color:var(--cyan); }
.bee.stalled { border-left-color:var(--amber); box-shadow:0 0 0 1px rgba(245,158,11,.25); }
.bee.failed,.bee.timeout { border-left-color:var(--red); }
.bee.done { border-left-color:var(--green); }
.bee.queued { border-left-color:var(--purple); }
.bee-top { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.bee-emoji { font-size:1.15rem; }
.bee-emoji.spin { display:inline-block; animation:bee-orbit 2.2s linear infinite; }
@keyframes bee-orbit { from{transform:rotate(0);} to{transform:rotate(360deg);} }
.bee-label { font-weight:700; font-size:.95rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.running { background:rgba(103,232,249,.14); color:var(--cyan); }
.pill.stalled { background:rgba(245,158,11,.16); color:var(--amber); }
.pill.failed,.pill.timeout { background:rgba(248,113,113,.15); color:var(--red); }
.pill.done { background:rgba(74,222,128,.14); color:var(--green); }
.pill.queued { background:rgba(168,85,247,.15); color:var(--purple); }
.pill.ended { background:rgba(226,232,240,.1); color:var(--text-dim); }
.bee-task { font-size:.85rem; color:var(--text); opacity:.9; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bee-meta { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.72rem; color:var(--text-dim); }
.bee-meta b { color:var(--text); font-weight:600; }
.bee-meta .tag { display:inline-flex; align-items:center; gap:4px; }

/* ── PROJECTS ── */
.proj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.proj { padding:16px 18px; }
.proj-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.proj-top .pe { font-size:1.4rem; }
.proj-top .pn { font-weight:800; font-size:1rem; flex:1; }
.proj .blurb { font-size:.78rem; color:var(--text-dim); margin-bottom:12px; }
.dot-status { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot-status.up { background:var(--green); box-shadow:0 0 10px var(--green); }
.dot-status.degraded { background:var(--amber); box-shadow:0 0 10px var(--amber); }
.dot-status.down { background:var(--red); box-shadow:0 0 10px var(--red); }
.dot-status.unknown { background:var(--text-dim); }
.checks { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chk { font-size:.7rem; padding:3px 9px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); display:inline-flex; align-items:center; gap:5px; }
.chk.ok { color:var(--green); border-color:rgba(74,222,128,.25); }
.chk.bad { color:var(--red); border-color:rgba(248,113,113,.25); }
.git-line { font-size:.72rem; color:var(--text-dim); border-top:1px solid rgba(168,85,247,.1); padding-top:9px; }
.git-line code { color:var(--cyan); font-family:ui-monospace,Menlo,monospace; }
.proj-links { margin-top:8px; display:flex; gap:8px; }
.proj-links a { font-size:.74rem; }

/* ── CHAT ── */
.chat-wrap { display:grid; grid-template-columns:300px 1fr; gap:14px; height:calc(100dvh - 290px); min-height:420px; }
.conv-list { overflow-y:auto; display:flex; flex-direction:column; gap:5px; padding-right:4px; }
.conv { padding:11px 13px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:all .2s; }
.conv:hover { background:rgba(168,85,247,.07); }
.conv.active { background:rgba(168,85,247,.12); border-color:var(--glass-border); }
.conv-top { display:flex; align-items:center; gap:8px; }
.conv .ce { font-size:1rem; }
.conv .cp { font-weight:700; font-size:.85rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv .ct { font-size:.66rem; color:var(--text-dim); }
.conv .cmeta { font-size:.68rem; color:var(--text-dim); margin-top:3px; display:flex; gap:8px; }
.chat-main { display:flex; flex-direction:column; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius); overflow:hidden; backdrop-filter:blur(12px); }
.chat-head { padding:13px 16px; border-bottom:1px solid rgba(168,85,247,.12); display:flex; align-items:center; gap:9px; font-weight:700; }
.chat-head .sub { font-size:.7rem; color:var(--text-dim); font-weight:400; }
.chat-feed { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:80%; padding:10px 14px; border-radius:16px; font-size:.88rem; white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.msg.user { align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; }
.msg.assistant { align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-bottom-left-radius:5px; }
.msg .mt { display:block; font-size:.64rem; opacity:.6; margin-top:5px; }
.chat-empty { margin:auto; color:var(--text-dim); text-align:center; padding:30px; }
.composer { display:flex; gap:8px; padding:12px; border-top:1px solid rgba(168,85,247,.12); }
.composer textarea { flex:1; resize:none; background:rgba(255,255,255,.03); border:1px solid var(--glass-border); color:var(--text); padding:11px 14px; border-radius:14px; font-size:.9rem; font-family:inherit; outline:none; max-height:120px; }
.composer textarea:focus { border-color:rgba(168,85,247,.5); }
.composer .btn { align-self:flex-end; }
.scroll::-webkit-scrollbar,.conv-list::-webkit-scrollbar,.chat-feed::-webkit-scrollbar { width:6px; }
.scroll::-webkit-scrollbar-thumb,.conv-list::-webkit-scrollbar-thumb,.chat-feed::-webkit-scrollbar-thumb { background:rgba(168,85,247,.3); border-radius:3px; }

/* empty / loading */
.empty { color:var(--text-dim); font-size:.9rem; text-align:center; padding:50px 0; }

/* ── modal (login + bee detail) ── */
.modal-overlay { position:fixed; inset:0; background:rgba(8,8,20,.6); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; animation:fade .3s ease; }
.modal { background:rgba(20,20,37,.92); backdrop-filter:blur(30px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:34px 32px; width:100%; max-width:440px; text-align:center; position:relative; box-shadow:0 0 80px rgba(168,85,247,.12),0 32px 100px rgba(0,0,0,.55); animation:slideUp .5s cubic-bezier(.16,1,.3,1); }
@keyframes slideUp { from{transform:translateY(20px) scale(.97); opacity:0;} to{transform:none; opacity:1;} }
.modal .logo { width:72px; height:72px; margin:0 auto 14px; display:block; filter:drop-shadow(0 0 22px var(--glow-pink)); animation:logoPulse 4s ease-in-out infinite; }
.modal h2 { font-size:1.4rem; font-weight:800; margin-bottom:6px; }
.modal p { color:var(--text-dim); font-size:.86rem; margin-bottom:20px; }
.modal input { width:100%; margin-bottom:14px; text-align:center; background:rgba(255,255,255,.03); border:1px solid var(--glass-border); color:var(--text); padding:12px 14px; border-radius:var(--radius-sm); font-size:.9rem; outline:none; }
.modal input:focus { border-color:rgba(168,85,247,.5); }
.modal .btn { width:100%; padding:13px; }
.err { color:var(--red); font-size:.82rem; min-height:18px; margin-bottom:8px; }

/* bee detail modal */
.modal.detail { max-width:720px; text-align:left; max-height:86dvh; display:flex; flex-direction:column; }
.modal.detail h2 { display:flex; align-items:center; gap:10px; font-size:1.2rem; }
.detail-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.76rem; color:var(--text-dim); margin:10px 0 14px; }
.detail-sec { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin:14px 0 7px; }
.detail-body { overflow-y:auto; }
.detail-pre { background:rgba(0,0,0,.3); border:1px solid var(--glass-border); border-radius:12px; padding:14px; font-size:.82rem; white-space:pre-wrap; word-break:break-word; line-height:1.55; max-height:none; }
.close-x { position:absolute; top:16px; right:18px; background:none; border:none; color:var(--text-dim); font-size:1.4rem; cursor:pointer; }
.close-x:hover { color:var(--text); }

/* toast */
.toasts { position:fixed; bottom:84px; right:18px; z-index:1100; display:flex; flex-direction:column; gap:8px; max-width:340px; }
.toast { background:rgba(20,20,37,.95); border:1px solid var(--glass-border); border-left:3px solid var(--cyan); border-radius:12px; padding:12px 15px; font-size:.84rem; backdrop-filter:blur(12px); box-shadow:0 12px 40px rgba(0,0,0,.5); animation:slideIn .4s cubic-bezier(.16,1,.3,1); }
.toast.warn { border-left-color:var(--amber); }
.toast.bad { border-left-color:var(--red); }
.toast.good { border-left-color:var(--green); }
.toast b { display:block; margin-bottom:2px; }
@keyframes slideIn { from{transform:translateX(40px); opacity:0;} to{transform:none; opacity:1;} }

/* mobile bottom nav */
.botnav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:900; background:rgba(13,13,26,.92); backdrop-filter:blur(16px); border-top:1px solid rgba(168,85,247,.18); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
.botnav button { flex:1; background:none; border:none; color:var(--text-dim); padding:8px 0; font-size:.62rem; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; position:relative; }
.botnav button .bi { font-size:1.2rem; }
.botnav button.active { color:var(--pink); }
.botnav .badge { position:absolute; top:2px; right:50%; transform:translateX(18px); background:var(--red); color:#fff; border-radius:999px; font-size:.58rem; padding:0 5px; min-width:15px; }
.hide { display:none !important; }

.conv-col { min-height:0; }
.conv-col .conv-list { flex:1; min-height:0; }
.copy-btn { float:right; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-dim); font-size:.66rem; padding:2px 9px; border-radius:7px; cursor:pointer; font-weight:700; }
.copy-btn:hover { color:var(--text); border-color:rgba(168,85,247,.4); }
.composer.disabled textarea { opacity:.6; cursor:not-allowed; }

@media (max-width:980px) {
  .chat-wrap { grid-template-columns:1fr; height:auto; }
  .chat-main { height:calc(100dvh - 230px); min-height:400px; }
  .chat-wrap.show-thread .conv-col { display:none; }
  .chat-wrap:not(.show-thread) .chat-main { display:none; }
}
@media (max-width:760px) {
  .stats { grid-template-columns:repeat(3,1fr); }
  .tabs { display:none; }
  .botnav { display:flex; }
  .container { padding-bottom:88px; }
  .brand .subtitle { display:none; }
  .modal.detail { max-width:100%; }
}
@media (max-width:440px) { .stats { grid-template-columns:repeat(2,1fr); } }

/* ── toolbar: filter chips + search ── */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.chips { display:inline-flex; flex-wrap:wrap; gap:6px; }
.chips button { background:var(--glass); border:1px solid var(--glass-border); color:var(--text-dim); padding:7px 14px; border-radius:999px; cursor:pointer; font-size:.78rem; font-weight:700; transition:all .2s; }
.chips button:hover { border-color:rgba(168,85,247,.45); color:var(--text); }
.chips button.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 16px rgba(168,85,247,.35); }
.chips.chips-sm button { padding:5px 11px; font-size:.72rem; }
.search { background:rgba(255,255,255,.03); border:1px solid var(--glass-border); color:var(--text); padding:9px 14px; border-radius:999px; font-size:.84rem; font-family:inherit; outline:none; min-width:220px; transition:border .2s; }
.search:focus { border-color:rgba(168,85,247,.5); }

/* ── skeletons ── */
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.skeleton-grid::before,.skeleton-grid::after { content:''; height:120px; border-radius:var(--radius); background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(168,85,247,.08) 50%,rgba(255,255,255,.03) 70%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { from{background-position:200% 0;} to{background-position:-200% 0;} }

/* ── markdown rendering (chat + bee results) ── */
.md b,.md strong { font-weight:800; color:#fff; }
.md i,.md em { font-style:italic; }
.md code { background:rgba(0,0,0,.32); padding:1px 6px; border-radius:6px; font-family:ui-monospace,Menlo,monospace; font-size:.86em; color:var(--cyan); }
.md pre.cb { background:rgba(0,0,0,.4); border:1px solid var(--glass-border); border-radius:10px; padding:11px 13px; margin:7px 0; overflow-x:auto; font-family:ui-monospace,Menlo,monospace; font-size:.8rem; color:var(--text); white-space:pre; }
.md a { color:var(--cyan); text-decoration:underline; }
.md .mh { display:block; font-weight:800; color:#fff; margin:7px 0 2px; }
.msg.user .md code { background:rgba(0,0,0,.22); color:#fff; }
.msg.user .md a { color:#fff; }

/* ── chat upgrades: column, previews, date sep, jump, back ── */
.conv-col { display:flex; flex-direction:column; gap:8px; min-height:0; }
.conv .cp-preview { font-size:.72rem; color:var(--text-dim); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.date-sep { align-self:center; font-size:.66rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); padding:3px 11px; border-radius:999px; margin:4px 0; }
.jump-btn { position:absolute; right:18px; bottom:78px; background:var(--grad); color:#fff; border:none; border-radius:999px; padding:8px 15px; font-size:.78rem; font-weight:700; cursor:pointer; box-shadow:0 6px 24px rgba(168,85,247,.5); z-index:5; animation:slideIn .3s; }
.chat-main { position:relative; }
.back-btn { display:none; background:none; border:none; color:var(--text); font-size:1.2rem; cursor:pointer; padding:0 4px 0 0; }

/* ── projects: latency sparkline ── */
.spark { display:flex; align-items:flex-end; gap:2px; height:26px; margin:4px 0 10px; }
.spark i { flex:1; min-width:2px; background:linear-gradient(180deg,var(--cyan),var(--purple)); border-radius:2px 2px 0 0; opacity:.8; transition:height .3s; }
.spark i.down { background:var(--red); opacity:.9; }
.spark-label { font-size:.66rem; color:var(--text-dim); }

/* ── activity timeline ── */
.timeline { display:flex; flex-direction:column; gap:2px; max-height:calc(100dvh - 320px); min-height:300px; overflow-y:auto; }
.tl-row { display:flex; align-items:flex-start; gap:12px; padding:10px 8px; border-radius:10px; transition:background .2s; }
.tl-row:hover { background:rgba(168,85,247,.06); }
.tl-ic { font-size:1.1rem; flex-shrink:0; width:24px; text-align:center; }
.tl-body { flex:1; min-width:0; }
.tl-title { font-size:.86rem; }
.tl-title b { font-weight:700; }
.tl-sub { font-size:.74rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-time { font-size:.7rem; color:var(--text-dim); flex-shrink:0; font-variant-numeric:tabular-nums; }
.tl-row.bee-done .tl-ic { filter:drop-shadow(0 0 6px var(--green)); }
.tl-row.bee-failed .tl-ic { filter:drop-shadow(0 0 6px var(--red)); }

@media (max-width:980px) {
  .conv-col { flex-direction:column; }
  .chat-wrap.show-thread .back-btn { display:inline; }
  .search { min-width:0; width:100%; }
  .toolbar { gap:9px; }
}