:root{
  --violet:#6E56F7; --teal:#19C8C0; --ink:#14152E; --muted:#6B6B80;
  --bg:#F6F7FB; --surface:#FFFFFF; --line:#E6E8F0; --soft:#EEF0F7;
  --grad:linear-gradient(135deg,#6E56F7,#19C8C0);
  --ok:#1FA971; --warn:#E2A400; --danger:#E5484D; --darknav:#0E1230;
  --radius:16px; --shadow:0 1px 3px rgba(20,21,46,.07),0 8px 24px rgba(20,21,46,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
.boot{display:grid;place-items:center;height:100vh;height:var(--app-h,100dvh);color:var(--muted)}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:14px}
a{color:var(--violet)}

/* ---------- Auth ---------- */
.auth{min-height:100vh;min-height:var(--app-h,100dvh);display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,rgba(110,86,247,.12),transparent)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.brand img{width:46px;height:46px;border-radius:12px}
.brand h1{font-size:22px;margin:0;font-weight:800}
.brand .ai{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);font-size:13px;margin:0 0 20px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
.field input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:none}
.field input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(110,86,247,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:10px;padding:11px 16px;font-weight:700;font-size:14px;background:var(--grad);color:#fff;width:100%}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:var(--soft);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--violet);width:auto;padding:6px 8px}
.btn.sm{padding:7px 11px;font-size:12.5px;width:auto}
.btn.danger{background:var(--danger)}
.btn.ok{background:var(--ok)}
.switcher{text-align:center;margin-top:14px;font-size:13px;color:var(--muted)}
.switcher a{cursor:pointer;font-weight:600}
.err{background:#fdecec;color:#b42318;border:1px solid #f5c6c6;border-radius:9px;padding:9px 11px;font-size:13px;margin-bottom:12px}
.hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ---------- App shell ---------- */
.shell{display:grid;grid-template-columns:300px 1fr;height:100vh;height:var(--app-h,100dvh);overflow:hidden;position:relative;transition:grid-template-columns .2s ease}
.shell.menu-collapsed{grid-template-columns:0 1fr}
/* take the sidebar out of grid flow when collapsed so it slides fully off (a 0-width
   grid column would make translateX(-100%) resolve to 0 and leave content overflowing) */
.shell.menu-collapsed .side{position:absolute;top:0;bottom:0;left:0;width:300px;transform:translateX(-100%);z-index:30}
.shell.menu-collapsed .main{grid-column:2} /* keep main in the wide track once the side is out of flow */
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;transition:transform .2s ease}
/* floating "open menu" button — desktop shows it only when collapsed (mobile: always, via media query) */
.menu-fab{position:fixed;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));z-index:46;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);display:none;align-items:center;justify-content:center;font-size:17px;color:var(--ink)}
.shell.menu-collapsed .menu-fab{display:inline-flex}
.shell.menu-collapsed .conv-head{padding-left:56px}
.shell.menu-collapsed .panel,.shell.menu-collapsed .empty{padding-top:calc(56px + env(safe-area-inset-top))}
.scrim{display:none}
.side-collapse{margin-left:6px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;width:26px;height:26px;font-size:15px;line-height:1;flex:none}
.side-collapse:hover{color:var(--ink);border-color:var(--violet)}
.side-x{display:none;margin-left:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;width:30px;height:30px;font-size:15px;line-height:1;flex:none;align-items:center;justify-content:center;cursor:pointer}
.side-x:hover{color:var(--ink);border-color:var(--violet)}
.side-top{padding:calc(14px + env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line)}
.side-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.side-brand img{width:30px;height:30px;border-radius:8px}
.side-brand b{font-size:16px;font-weight:800}
.side-brand .ai{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.me-chip{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
/* shared AiCB @username component (matches aicb.au / aiserver.au) */
.handle{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;font-size:.92em;color:#cbd0ff;background:rgba(110,86,247,.16);border:1px solid rgba(110,86,247,.4);border-radius:7px;padding:2px 9px;display:inline-flex;align-items:center;white-space:nowrap}
.handle .at{color:#19C8C0;margin-right:1px}
.search{display:flex;gap:6px}
.search input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:9px;outline:none}
.search input:focus{border-color:var(--violet)}
.tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:12.5px;padding:6px 10px;border-radius:8px}
.tab.active{background:var(--soft);color:var(--ink)}
.list{flex:1;min-height:0;overflow-y:auto}
.row{display:flex;gap:11px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.row:hover{background:var(--soft)}
.row.active{background:rgba(110,86,247,.08)}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;background:var(--grad);font-size:16px;overflow:hidden;position:relative}
/* Photo fills the circle and is centre-cropped at ANY container size. Absolute positioning stops the
   grid's auto row from stretching a non-square image to its aspect ratio (was overflowing the circle). */
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av.sm{width:30px;height:30px;font-size:12px}
.row-main{min-width:0;flex:1}
.row-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.row-sub{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:9px;font-weight:800;letter-spacing:.04em;padding:2px 5px;border-radius:5px;text-transform:uppercase}
.badge.AI{background:rgba(110,86,247,.14);color:var(--violet)}
.badge.BOT{background:rgba(25,200,192,.16);color:#0d8f88}
.badge.VERIFIED{background:rgba(31,169,113,.14);color:var(--ok)}
.badge.ADMIN{background:#fde7c7;color:#9a6a00}
.pill{margin-left:auto;background:var(--violet);color:#fff;border-radius:20px;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center}
.side-foot{padding:10px;border-top:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Main panel ---------- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}
.empty{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center;padding:20px}
.home{flex:1;display:flex;flex-direction:column;min-height:0}
.home-head{padding:14px 16px 8px;font-weight:700;font-size:15px;color:var(--ink)}
.home-list{flex:1;min-height:0;overflow-y:auto}
.empty img{width:84px;height:84px;opacity:.9;margin-bottom:14px}
.conv-head{display:flex;align-items:center;gap:11px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.conv-head .row-title{font-size:15px}
.conv-actions{margin-left:auto;display:flex;gap:6px}
.icon-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 9px;font-size:12px;color:var(--muted);font-weight:600}
.icon-btn:hover{color:var(--ink);border-color:var(--violet)}
.icon-btn svg{display:block;width:19px;height:19px}   /* header call buttons use two-tone line icons */
.disclaimer{background:#fff8e6;border-bottom:1px solid #f3e3b3;color:#7a5b00;font-size:12.5px;padding:8px 16px;display:flex;gap:8px;align-items:center}
.disclaimer .btn{width:auto;padding:5px 10px;font-size:12px;margin-left:auto;background:var(--ink)}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:72%;padding:9px 13px;border-radius:14px;background:var(--surface);border:1px solid var(--line);position:relative;word-wrap:break-word;white-space:pre-wrap;line-height:1.45;font-size:14px}
.msg.mine{align-self:flex-end;background:var(--grad);color:#fff;border:none}
.msg.system{align-self:center;background:transparent;border:none;color:var(--muted);font-size:12px;max-width:90%;text-align:center}
.msg .who{font-size:11px;font-weight:700;margin-bottom:3px;color:var(--violet);display:flex;align-items:center;gap:5px}
.msg.mine .who{color:rgba(255,255,255,.85)}
.msg .time{font-size:10px;color:var(--muted);margin-top:4px}
.msg.mine .time{color:rgba(255,255,255,.75)}
.msg .flag{position:absolute;top:2px;right:-28px;opacity:0;border:none;background:none;cursor:pointer;font-size:16px}
.msg:hover .flag{opacity:.5}
.msg .flag:hover{opacity:1}
.msg a{color:inherit;text-decoration:underline}
.msg .msgdel{position:absolute;top:2px;left:-28px;opacity:0;border:none;background:none;cursor:pointer;font-size:16px}
.msg:not(.mine) .msgdel{left:auto;right:-48px}
.msg:hover .msgdel{opacity:.5}
.msg .msgdel:hover{opacity:1}
/* tap-and-hold / right-click message action menu */
.msg-menu-bg{position:fixed;inset:0;z-index:60}
.msg-menu{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:172px;animation:menupop .12s ease}
.msg-menu button{display:flex;align-items:center;gap:11px;border:none;background:none;padding:12px 14px;font-size:15px;font-weight:600;color:var(--ink);border-radius:9px;text-align:left;width:100%;cursor:pointer}
.msg-menu button:hover,.msg-menu button:active{background:var(--soft)}
.msg-menu button[data-act="delete"]{color:var(--danger)}
@keyframes menupop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.msg.deleted{background:var(--soft)!important;border:1px dashed var(--line)!important;color:var(--muted)!important}
.msg.deleted .bd{font-style:italic;font-size:13px}
/* jump-to-latest button (appears when scrolled up) */
.scrolldown{position:absolute;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:none;align-items:center;justify-content:center;font-size:19px;color:var(--ink);z-index:6;line-height:1}
.scrolldown.show{display:flex}
.scrolldown .ndot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;background:var(--violet);color:#fff;border-radius:9px;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px}
.scrolldown.has-new .ndot{display:flex}
@media(max-width:760px){.msg .flag,.msg .msgdel{opacity:.4}}
.typing{align-self:flex-start;color:var(--muted);font-size:12.5px;padding:4px 6px}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;background:var(--surface);border-top:1px solid var(--line);padding-bottom:calc(10px + env(safe-area-inset-bottom));position:relative}
/* voice recording bar (overlays the composer while recording) */
.rec-bar{position:absolute;inset:0;background:var(--surface);display:flex;align-items:center;gap:12px;padding:10px 12px}
.rec-cancel{flex:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:11px;font-size:18px;color:var(--danger)}
.rec-cancel:hover{border-color:var(--danger)}
.rec-info{flex:1;display:flex;align-items:center;gap:9px;color:var(--ink);font-size:15px}
.rec-info .rec-hint{color:var(--muted);font-size:13px}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--danger);flex:none;animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec-send{flex:none;width:auto;padding:0 16px;height:42px}
/* voice message bubble */
.msg.has-audio{background:rgba(110,86,247,.07)!important;border:1px solid rgba(110,86,247,.18)!important}
.msg.has-audio.mine{background:rgba(110,86,247,.12)!important;color:var(--ink)}
.att-voice{display:flex;align-items:center;gap:8px}
.att-mic{font-size:18px;flex:none}
.att-audio{height:38px;width:min(220px,52vw);flex:1}
.att-dur{font-size:11px;color:var(--muted);flex:none}
/* delivery/read status dots (orange=sending · green=received · 2 green=read) */
.msg .status{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle}
.sdot{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.sdot.sending{background:var(--warn)}
.sdot.ok{background:var(--ok)}
.sdot.ok.ov{margin-left:-4px}
.sdot.fail{background:var(--danger)}
/* reply preview (above composer) + quoted block inside a message */
.reply-prev{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--soft);border-top:1px solid var(--line)}
.reply-prev .reply-q{flex:1;min-width:0;border-left:3px solid var(--violet);padding-left:9px;display:flex;flex-direction:column}
.reply-prev .reply-q b{font-size:12px;color:var(--violet)}
.reply-prev .reply-q span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-quote{border-left:3px solid currentColor;padding:3px 8px;margin-bottom:5px;border-radius:5px;background:rgba(0,0,0,.05);cursor:pointer;display:flex;flex-direction:column;max-width:100%}
.msg-quote b{font-size:11.5px;opacity:.9}
.msg-quote span{font-size:12.5px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg.mine .msg-quote{background:rgba(255,255,255,.18)}
.msg.flash{animation:msgflash 1.2s ease}
@keyframes msgflash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px rgba(110,86,247,.45)}}
/* two-tone action buttons: soft tinted tile + accent glyph (modern, flat) */
.composer .attach{flex:none;width:42px;height:42px;border:1px solid transparent;background:var(--soft);border-radius:12px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.composer .attach svg{width:20px;height:20px;display:block}
.composer .attach:hover{border-color:var(--violet);color:var(--violet);background:rgba(110,86,247,.09)}
.composer .attach[disabled]{opacity:.6;cursor:default}
.composer .attach.ai{color:var(--violet);background:rgba(110,86,247,.13)}          /* the AI button reads as the accent action */
.composer .attach.ai:hover{background:rgba(110,86,247,.22)}
.composer .attach.ai .spin{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:aispin .7s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.composer textarea{flex:1;order:2;resize:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;max-height:120px;min-height:42px;outline:none;font-size:14px}
.composer textarea:focus{border-color:var(--violet)}
.composer .btn{order:3;width:auto;padding:0 18px;height:42px}
.ctools{order:1;display:flex;gap:6px;align-items:center}    /* desktop: buttons in a row to the left of the box */
.composer .call-in-composer{display:none}    /* composer call buttons appear on mobile only (desktop keeps them in the header) — specificity must beat .composer .attach */
/* staged attachment preview (sits above the composer) */
.att-prev{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--soft);border-top:1px solid var(--line);font-size:13px}
.att-prev img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
.att-prev .att-ic{font-size:22px}
.att-prev .att-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-prev .att-sz{color:var(--muted);flex:none}
.att-prev .att-x{margin-left:auto;border:none;background:#fff;border-radius:8px;width:28px;height:28px;color:var(--muted);flex:none}
/* attachment messages */
.msg.has-img{padding:5px;background:var(--surface)}
.msg.has-img.mine{background:var(--grad)}
.att-img{max-width:min(260px,62vw);max-height:320px;border-radius:10px;display:block;cursor:pointer}
.att-cap{margin-top:5px;padding:0 6px 2px}
.att-file{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:170px}
.att-file .att-ic{font-size:22px;flex:none}
.att-file .att-fmeta{display:flex;flex-direction:column;min-width:0}
.att-file .att-fmeta b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-file .att-fmeta small{color:var(--muted);font-size:11px}
.msg.mine .att-file .att-fmeta small{color:rgba(255,255,255,.8)}
/* settings toggle rows */
.toggle{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:5px 0;cursor:pointer}
.toggle input{width:18px;height:18px;flex:none;accent-color:var(--violet)}

/* ---------- Cards / panels (experts, agents, admin) ---------- */
.panel{flex:1;min-height:0;overflow-y:auto;padding:20px}
.panel h2{margin:0 0 4px;font-size:20px}
.panel .sub{color:var(--muted);font-size:13px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.card.click{cursor:pointer}
.card.click:hover{border-color:var(--violet);transform:translateY(-1px)}
.card .emoji{font-size:24px}
/* AI agent cards: emoji in a soft two-tone brand tile (matches the composer button style) */
.card .agent-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;background:linear-gradient(135deg,rgba(110,86,247,.15),rgba(25,200,192,.15));border:1px solid var(--line);transition:background .15s,transform .15s}
.card.agent-card:hover .agent-ic{background:linear-gradient(135deg,rgba(110,86,247,.28),rgba(25,200,192,.24));transform:scale(1.04)}
.card h3{margin:8px 0 2px;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:12.5px}
.tierTag{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px}
.tierA{background:rgba(31,169,113,.13);color:var(--ok)}
.tierB{background:rgba(226,164,0,.15);color:#9a6a00}
.tierC{background:rgba(229,72,77,.12);color:var(--danger)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .n{font-size:26px;font-weight:800}
.stat .l{color:var(--muted);font-size:12px;margin-top:2px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:13px;min-width:520px}
.table-wrap .table{border-radius:0}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.table th{background:var(--soft);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.table tr:last-child td{border-bottom:none}
.subtabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.statusdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.statusdot.off{background:#c7c9d6}
.kv{font-size:13px;line-height:1.7}
.kv code{background:var(--soft);padding:2px 6px;border-radius:6px;font-size:12px;word-break:break-all}
.modal-bg{position:fixed;inset:0;background:rgba(20,21,46,.45);display:grid;place-items:center;padding:20px;z-index:50}
.modal{background:#fff;border-radius:16px;max-width:460px;width:100%;padding:22px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal h3{margin:0 0 12px}
.modal .field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;min-height:70px;outline:none}
.modal .field select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}
.modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}

@media(max-width:760px){
  .shell{grid-template-columns:1fr}                 /* main fills the screen; menu is a drawer */
  .side{position:fixed;top:0;left:0;bottom:0;width:min(86%,330px);z-index:45;transform:translateX(-100%);box-shadow:0 0 40px rgba(10,12,30,.28)}
  .shell.menu-collapsed{grid-template-columns:1fr}  /* neutralise the desktop-collapse concept on mobile */
  .shell.menu-collapsed .side{transform:translateX(-100%)}
  .shell.menu-open .side{transform:translateX(0)}
  .scrim{display:block;position:fixed;inset:0;background:rgba(10,12,30,.45);z-index:44;opacity:0;pointer-events:none;transition:opacity .2s}
  .shell.menu-open .scrim{opacity:1;pointer-events:auto}
  .menu-fab{display:inline-flex}
  .shell.menu-open .menu-fab{display:none}
  .conv-head{padding-left:56px}     /* clear the floating menu button */
  .conv-head #back{display:none}    /* drawer replaces the per-chat back arrow */
  .panel,.empty,.home{padding-top:calc(56px + env(safe-area-inset-top))}
  .side-collapse{display:none}      /* drawer closes via tapping a chat or the scrim */
  .side-x{display:inline-flex}      /* explicit ✕ to close the open drawer */
  .tabs{gap:8px;padding:10px}
  .tab{flex:1 1 calc(50% - 8px);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;padding:11px 10px;text-align:center;border-radius:10px}
  .tab.active{background:var(--violet);color:#fff;border-color:var(--violet)}
  .msg{max-width:86%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* long-press opens the action menu */
  .msg .flag,.msg .msgdel{display:none} /* replaced by the tap-and-hold menu on mobile */
  .att-img{max-width:74vw}
  /* full-width message box on its own row, with the action buttons in a horizontal row beneath it */
  .composer{flex-wrap:wrap}
  .composer textarea{order:1;flex:1 1 100%;min-height:44px}
  /* ONE row: all the icon buttons share the width (shrink to fit any screen) + Send at the end — no wrapping */
  .ctools{order:2;flex:1 1 0;min-width:0;flex-wrap:nowrap;gap:5px}   /* basis 0 → collapses+grows so Send never wraps below */
  .composer .attach{flex:1 1 0;min-width:0;width:auto;height:40px}
  .composer .attach svg{width:19px;height:19px}
  .composer .btn{order:3;flex:0 0 auto;padding:0 12px;height:40px;margin-left:6px}   /* Send stays on the same row */
  .composer .call-in-composer{display:inline-flex}                 /* voice + video call buttons join the row */
  .conv-actions #callstart,.conv-actions #callvoice{display:none}  /* header calls move into the composer on mobile */
}

/* ================= Skins (theme variable sets; default = no [data-skin]) ================= */
/* High-tech / modern — deep-space navy, neon cyan + violet, subtle glow */
:root[data-skin="tech"]{
  --ink:#E8ECFF; --muted:#8A93C7; --bg:#070A1B; --surface:#0F1430; --line:#242C55; --soft:#161C3D;
  --violet:#8B7BFF; --teal:#22E3D6; --grad:linear-gradient(135deg,#7C5CFF,#22E3D6); --darknav:#0F1430;
  --shadow:0 1px 3px rgba(0,0,0,.45),0 8px 30px rgba(34,227,214,.10);
}
:root[data-skin="tech"] .msg.mine{box-shadow:0 0 16px rgba(124,92,255,.35)}
:root[data-skin="tech"] .brand h1,:root[data-skin="tech"] .side-brand b{text-shadow:0 0 18px rgba(34,227,214,.35)}

/* Green matrix — black, phosphor green, monospace, glow */
:root[data-skin="matrix"]{
  --ink:#5CE88A; --muted:#3E9A60; --bg:#020A05; --surface:#07160B; --line:#123E22; --soft:#0B2815;
  --violet:#22C55E; --teal:#1FD46A; --grad:linear-gradient(135deg,#22C55E,#11A24A); --darknav:#07160B;
  --shadow:0 0 0 1px rgba(92,232,138,.14); --font:'Courier New',ui-monospace,monospace;
}
/* readable DARK text on the bright-green accents (buttons, unread pill, avatars, own bubble, active tab) */
:root[data-skin="matrix"] .btn,:root[data-skin="matrix"] .pill,:root[data-skin="matrix"] .av,:root[data-skin="matrix"] .tab.active,:root[data-skin="matrix"] .msg.mine{color:#04170B}
:root[data-skin="matrix"] .msg.mine .who,:root[data-skin="matrix"] .msg.mine .time{color:rgba(3,20,9,.62)}
:root[data-skin="matrix"] .msg.mine .msg-quote{background:rgba(0,0,0,.14)}
:root[data-skin="matrix"] .msg,:root[data-skin="matrix"] .brand h1,:root[data-skin="matrix"] .side-brand b{text-shadow:0 0 5px rgba(92,232,138,.35)}

/* Amber monochrome CRT — black, amber phosphor, monospace, glow */
:root[data-skin="amber"]{
  --ink:#FFC24A; --muted:#B08130; --bg:#0A0600; --surface:#150D00; --line:#3E2A08; --soft:#231800;
  --violet:#F0A81E; --teal:#FF9E2C; --grad:linear-gradient(135deg,#F5A623,#E2880C); --darknav:#150D00;
  --shadow:0 0 0 1px rgba(255,194,74,.14); --font:'Courier New',ui-monospace,monospace;
}
:root[data-skin="amber"] .btn,:root[data-skin="amber"] .pill,:root[data-skin="amber"] .av,:root[data-skin="amber"] .tab.active,:root[data-skin="amber"] .msg.mine{color:#1c1000}
:root[data-skin="amber"] .msg.mine .who,:root[data-skin="amber"] .msg.mine .time{color:rgba(28,16,0,.6)}
:root[data-skin="amber"] .msg.mine .msg-quote{background:rgba(0,0,0,.14)}
:root[data-skin="amber"] .msg,:root[data-skin="amber"] .brand h1,:root[data-skin="amber"] .side-brand b{text-shadow:0 0 5px rgba(255,194,74,.32)}

/* Tron — black-blue, electric cyan neon + glow + a faint grid behind the chat */
:root[data-skin="tron"]{
  --ink:#BFF3FF; --muted:#5F9DBE; --bg:#010812; --surface:#04121F; --line:#12557A; --soft:#072438;
  --violet:#22D3EE; --teal:#18E0FF; --grad:linear-gradient(135deg,#22D3EE,#0A9FE0); --darknav:#04121F;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 0 22px rgba(34,211,238,.14);
}
/* readable DARK text on the bright-cyan accents (buttons, unread pill, avatars, own bubble, active tab) */
:root[data-skin="tron"] .btn,:root[data-skin="tron"] .pill,:root[data-skin="tron"] .av,:root[data-skin="tron"] .tab.active,:root[data-skin="tron"] .msg.mine{color:#02121C}
:root[data-skin="tron"] .msg.mine .who,:root[data-skin="tron"] .msg.mine .time{color:rgba(2,18,28,.62)}
:root[data-skin="tron"] .msg.mine .msg-quote{background:rgba(0,0,0,.16)}
:root[data-skin="tron"] .msg,:root[data-skin="tron"] .brand h1,:root[data-skin="tron"] .side-brand b{text-shadow:0 0 7px rgba(34,211,238,.5)}
:root[data-skin="tron"] .btn,:root[data-skin="tron"] .msg.mine,:root[data-skin="tron"] .av{box-shadow:0 0 14px rgba(34,211,238,.4)}
:root[data-skin="tron"] .msgs{background-color:var(--bg);background-image:linear-gradient(rgba(34,211,238,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.06) 1px,transparent 1px);background-size:34px 34px}

/* Monospace for the terminal skins (body font is hardcoded, form controls don't inherit) */
:root[data-skin="matrix"] body,:root[data-skin="matrix"] input,:root[data-skin="matrix"] textarea,:root[data-skin="matrix"] button,:root[data-skin="matrix"] select,
:root[data-skin="amber"] body,:root[data-skin="amber"] input,:root[data-skin="amber"] textarea,:root[data-skin="amber"] button,:root[data-skin="amber"] select{font-family:var(--font)}

/* Any active skin: make the hardcoded-white surfaces follow the theme */
:root[data-skin] .field input,:root[data-skin] .composer textarea,
:root[data-skin] .side-collapse,:root[data-skin] .icon-btn,:root[data-skin] .rec-cancel,
:root[data-skin] .att-prev,:root[data-skin] .att-prev .att-x,:root[data-skin] .modal,
:root[data-skin] .modal input,:root[data-skin] .modal textarea,:root[data-skin] .modal select,
:root[data-skin] .search input{background:var(--surface);color:var(--ink)}
:root[data-skin] .field input::placeholder,:root[data-skin] .composer textarea::placeholder,:root[data-skin] .modal textarea::placeholder,:root[data-skin] .modal input::placeholder{color:var(--muted)}
:root[data-skin] .disclaimer{background:var(--soft);border-color:var(--line);color:var(--warn)}
:root[data-skin] .err{background:var(--soft);border-color:var(--danger);color:var(--danger)}
:root[data-skin] .badge.ADMIN{background:var(--soft);color:var(--warn)}

/* Voice-to-text (dictation) active state */
.composer .attach.rec{color:var(--danger);border-color:var(--danger);animation:dictpulse 1.1s ease-in-out infinite}
@keyframes dictpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.4)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
/* Skin picker swatches */
.skinrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.skinopt{flex:1;min-width:96px;border:2px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;text-align:center;font-size:12px;font-weight:700;color:var(--ink);background:var(--surface)}
.skinopt.sel{border-color:var(--violet)}
.skinswatch{height:34px;border-radius:8px;margin-bottom:7px;border:1px solid rgba(0,0,0,.15)}

/* ---- 1:1 video calls (WebRTC) ---- */
.conv-actions .call-start{font-size:17px}
.call-overlay{position:fixed;inset:0;z-index:120;background:#05060B;display:flex;align-items:center;justify-content:center;overflow:hidden}
.call-remote{width:100%;height:100%;object-fit:cover;background:#05060B}
.call-overlay:not(.connected) .call-remote{opacity:.12}
.call-local{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));width:114px;height:152px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.5);background:#111;box-shadow:0 6px 20px rgba(0,0,0,.5);transform:scaleX(-1)}
.call-info{position:absolute;top:calc(22px + env(safe-area-inset-top));left:0;right:0;text-align:center;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.7);pointer-events:none}
.call-peer{font-size:20px;font-weight:800}
.call-status{font-size:14px;opacity:.88;margin-top:4px;font-variant-numeric:tabular-nums}
.call-controls{position:absolute;bottom:calc(30px + env(safe-area-inset-bottom));left:0;right:0;display:flex;gap:16px;justify-content:center}
.call-btn{width:58px;height:58px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.15s}
.call-btn:hover{background:rgba(255,255,255,.28)}
.call-btn.off{background:#fff;color:#111}
.call-btn.hangup{background:#E5484D}
.call-btn.hangup:hover{background:#f2565b}
.call-incoming{position:fixed;inset:0;z-index:130;background:rgba(6,8,16,.74);display:flex;align-items:center;justify-content:center;padding:20px}
.call-in-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px;text-align:center;max-width:320px;width:100%;box-shadow:var(--shadow)}
.call-in-card .av.lg{width:76px;height:76px;font-size:30px;margin:0 auto 14px}
.call-in-card .av.lg img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.call-in-name{font-size:19px;font-weight:800;color:var(--ink)}
.call-in-sub{color:var(--muted);font-size:13.5px;margin:5px 0 20px}
.call-in-actions{display:flex;gap:12px}
.call-in-actions .btn{flex:1}
.call-in-actions .btn.danger{background:var(--soft);color:var(--danger)}
@media(max-width:760px){.call-local{width:94px;height:126px}}

/* ---- conversation-header ⋯ menu (Report / Leave / Add) ---- */
.conv-menu-wrap{position:relative;display:inline-flex}
.conv-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:172px;display:flex;flex-direction:column}
.conv-menu[hidden]{display:none}
.conv-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;color:var(--ink);font-weight:600;font-size:13.5px;padding:9px 11px;border-radius:9px;cursor:pointer}
.conv-menu button:hover{background:var(--soft)}

/* ---- call: peer avatar (voice calls + video before connect) ---- */
.av.xl{width:112px;height:112px;font-size:44px}
.av.xl img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.call-avatar{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:1;pointer-events:none}
.call-overlay.connected:not(.audio) .call-avatar{display:none}
.call-overlay.audio .call-local{display:none}
.call-overlay.audio .call-remote{opacity:0}

/* ---- video message: in-bubble player + recorder modal ---- */
.att-video{max-width:min(320px,68vw);width:100%;border-radius:11px;background:#000;display:block}
.att-video-fallback{max-width:min(320px,68vw);padding:12px 14px;background:var(--soft);border:1px solid var(--line);border-radius:11px;font-size:13px;color:var(--muted);line-height:1.55}
.att-video-fallback a{color:var(--violet);font-weight:700;text-decoration:none}
.att-video-fallback a:hover{text-decoration:underline}
.msg.has-video{padding:5px}
.vm-stage{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin-top:6px}
.vm-preview{width:100%;height:100%;object-fit:cover;background:#000}
.vm-preview.mirror{transform:scaleX(-1)}
.vm-timer{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:20px}
.vm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vm-actions .btn{flex:1;min-width:82px}
#vm-swap{display:inline-flex;align-items:center;justify-content:center;gap:5px}
#vm-swap svg{flex:none}