/* VYXIN redesign — carbon charcoal, platinum type, rose-gold accents.
   Fonts: serif display for headings (Georgia stack — no webfont dependency,
   CSP stays 'self'), Inter/Arial for UI. All existing class names preserved;
   the light salon theme (body.mad) keeps its own palette. */
:root{
 --bg:#0d0e11; --bg2:#131418; --panel:#101116; --panel2:#15161c;
 --line:#23242b; --line2:#2e3038;
 --ink:#ecebe7; --ink2:#b9b8bd; --mut:#8f8f99;
 --rose:#c48b83; --rose2:#d9a494; --rosedeep:#b37066;
 --rose-glow:rgba(196,139,131,.22);
 --good:#8fbf9f;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 800px at 75% -10%,#191b21 0%,var(--bg) 55%) fixed,var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{outline-offset:5px}
button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}
[hidden]{display:none!important}
::selection{background:var(--rose-glow);color:#fff}
h1,h2,h3,.wordmark{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.4px}

/* Per-brand sidebar accents — the charcoal base stays stock in every theme;
   only the accent work (active row, + New chat, chips) picks up the brand.
   Private keeps rose-gold; MAD leans forest green; UNTZDADDY electric pink. */
:root{--sa:#c48b83;--sa-brite:#d9a494;--sa-soft:rgba(196,139,131,.45);--sa-line:rgba(196,139,131,.35);--sa-tint:rgba(196,139,131,.14);--sa-thov:rgba(196,139,131,.08)}
body.mad{--sa:#5f8366;--sa-brite:#9ec4a1;--sa-soft:rgba(95,131,102,.55);--sa-line:rgba(95,131,102,.45);--sa-tint:rgba(95,131,102,.16);--sa-thov:rgba(95,131,102,.10)}
body.untzdaddy{--sa:#ff2ec4;--sa-brite:#ff2ec4;--sa-soft:rgba(255,46,196,.5);--sa-line:rgba(255,46,196,.4);--sa-tint:rgba(255,46,196,.14);--sa-thov:rgba(255,46,196,.08)}
body.zodiacrangers{--sa:#8f7dff;--sa-brite:#b3a4ff;--sa-soft:rgba(143,125,255,.5);--sa-line:rgba(143,125,255,.4);--sa-tint:rgba(143,125,255,.14);--sa-thov:rgba(143,125,255,.08)}

/* ---------- shell / sidebar ---------- */
.shell{min-height:100dvh;display:grid;grid-template-columns:288px 1fr}
aside{padding:34px 24px 26px;background:linear-gradient(180deg,var(--panel) 0%,#0b0c10 100%);border-right:1px solid var(--line);display:flex;flex-direction:column}
.brand{display:grid;place-items:center;text-align:center;margin:4px 0 6px;text-decoration:none}
.brand img{width:88px;height:88px;object-fit:cover;border-radius:22px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.brandname{display:block;margin-top:10px;font-size:26px;letter-spacing:.38em;text-indent:.38em;color:var(--ink);text-decoration:none;font-weight:600}
.brandname span{color:var(--rose2)}
.wordmark{display:none}
.eyebrow{font-size:11px;letter-spacing:2.6px;color:var(--mut);font-weight:700;text-transform:uppercase}
nav.ws{margin-top:26px;display:grid;gap:6px}
nav.ws .navlabel{font-size:10px;letter-spacing:2.4px;color:var(--mut);font-weight:700;margin:6px 8px 2px}
nav.ws button{display:flex;align-items:center;gap:11px;border:1px solid transparent;background:none;color:var(--ink2);padding:11px 12px;text-align:left;border-radius:11px;font-size:14px;transition:background .15s,color .15s,border-color .15s}
nav.ws button .ic{width:18px;height:18px;flex:0 0 18px;opacity:.85}
nav.ws button:hover{background:var(--panel2);color:var(--ink)}
nav.ws button.active{background:linear-gradient(90deg,var(--sa-tint),transparent 75%),var(--panel2);color:#fff;border-color:var(--sa-line);box-shadow:inset 2px 0 0 var(--sa)}
nav.ws button span{margin-left:auto;font-size:11px;color:var(--mut)}
nav button.newchat{border-color:var(--sa-soft);color:var(--sa-brite);justify-content:flex-start;font-weight:600}
nav button.newchat:hover{background:var(--sa-thov);border-color:var(--sa)}
nav.ws button:not(.newchat) span{display:none}
.sidefoot{margin-top:auto;padding-top:26px;border-top:1px solid var(--line)}
.acct{display:flex;align-items:center;gap:10px}
.acct .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--rose2),var(--rosedeep));color:#17100e;display:grid;place-items:center;font-weight:700;font-size:15px}
.acct .who{font-size:14px;color:var(--ink)}
.acct .who small{display:block;color:var(--mut);font-size:11px}
.sidefoot p{font-size:20px;letter-spacing:-.3px}
.sidefoot small{color:var(--mut);font-size:12px}
#logout{display:block;margin-top:18px}

/* ---------- main ---------- */
main{max-width:1200px;width:100%;margin:auto;padding:36px 52px;align-self:start}
header.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px}
h1{font-size:26px;margin:4px 0;font-weight:500}
header button,#logout{background:transparent;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:9px 18px;font-size:13.5px;transition:border-color .15s,color .15s}
header button:hover,#logout:hover{border-color:var(--rose);color:var(--ink)}
#notice{color:var(--ink2);font-size:14px;margin:18px 0}

/* ---------- login ---------- */
#login{max-width:430px;margin:46px auto;text-align:center}
#login .mark{width:84px;height:84px;border-radius:22px;margin:0 auto 26px;display:block}
#login h2{font-size:32px;margin:10px 0 8px;font-weight:500}
#login p{color:var(--ink2)}
#login .eyebrow{margin-bottom:2px}
#loginform{display:grid;gap:14px;margin-top:26px;text-align:left}
label{font-size:12.5px;letter-spacing:.8px;color:var(--ink2);font-weight:600}
input,select,textarea{background:var(--bg2);color:var(--ink);border:1px solid var(--line2);border-radius:11px;padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-glow);outline:0}
button.primary{background:linear-gradient(135deg,var(--rose2),var(--rosedeep));color:#1a110f;border:0;padding:13px 24px;border-radius:999px;font-weight:700;letter-spacing:.2px;box-shadow:0 4px 16px rgba(196,139,131,.22);transition:filter .15s,transform .06s}
button.primary:hover{filter:brightness(1.06)}
button.primary:active{transform:translateY(1px)}
#loginform button{margin-top:12px;width:100%}

/* ---------- conversation ---------- */
#conversation{max-width:810px;margin:0 auto}
#messages{min-height:320px;max-height:55dvh;overflow:auto;padding:18px 4px}
.bubble{max-width:88%;margin:0 0 26px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble .author{font-size:10.5px;text-transform:uppercase;letter-spacing:2.2px;font-weight:700;color:var(--rose2);display:block;margin-bottom:8px}
.bubble.user{background:var(--panel2);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:15px 19px;margin-left:auto}
.bubble.user .author{color:var(--mut)}
#suggestions{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}
#suggestions button{background:transparent;color:var(--ink2);border:1px solid var(--line2);border-radius:999px;padding:9px 17px;font-size:13.5px}
#suggestions button:hover{border-color:var(--rose);color:var(--ink)}
/* Specialist runs: ONE concise line while a background run is in flight, ONE
   result card after; both inside the chat view, optional detail behind a
   toggle. Visible only when there is actually something to say. */
.agentsline{margin:0 0 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:10px 14px}
.agentshead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.agentsdot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--mut)}
.agentsdot.live{background:var(--rose2);box-shadow:0 0 0 3px var(--rose-glow);animation:agentpulse 1.8s ease-in-out infinite}
.agentsdot.ok{background:var(--good)}
.agentsdot.warn{background:var(--rose2)}
.agentsdot.err{background:var(--rosedeep)}
.agentstext{font-size:13px;color:var(--ink2);min-width:0;overflow-wrap:anywhere}
.agentsbtns{margin-left:auto;display:flex;gap:2px;flex:0 0 auto}
.agentsdetail{margin-top:8px;display:grid;gap:8px}
.agentsout{max-height:220px;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-family:Inter,Arial,sans-serif}
@keyframes agentpulse{50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.agentsdot.live{animation:none}}
#chatform{display:flex;flex-wrap:wrap;gap:12px;border:1px solid var(--line2);border-radius:18px;background:var(--panel2);padding:13px;align-items:end;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#chatform textarea{flex:1 1 auto;width:auto;min-width:0}
#chatform:focus-within{border-color:rgba(196,139,131,.55)}
textarea{resize:vertical;max-height:180px;border:0;padding:6px;background:transparent}
footer{font-size:12px;color:var(--mut);padding:16px 2px}
#buildmarker{padding:28px 2px 0;color:var(--mut);font-size:12px}

/* message tools, edit, history, export (kept from previous build, recolored) */
.msgrow{margin:0 0 26px}
.msgtools{margin-top:6px}
.msgbtn{background:none;border:0;color:var(--mut);font-size:12px;padding:4px 6px;border-radius:6px}
.msgbtn:hover{color:var(--ink)}
/* live-search panel: names the queries that ran this turn (UI chrome, not reply text) */
.searchnote{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px;font-size:12px;color:var(--mut)}
.searchnote b{font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
.searchnote .sq{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:2px 9px;font-size:11.5px;color:var(--ink2);max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchnote .sqmore{color:var(--mut);font-size:11px}
.editbox{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:12px;margin:0 0 26px;margin-left:auto;max-width:88%;display:grid;gap:8px}
.editbox textarea{border:1px solid var(--line2);border-radius:10px;padding:10px;resize:vertical;background:var(--bg2);color:var(--ink)}
.editbox .editbtns{display:flex;gap:8px;justify-content:flex-end}
.editbox .editbtns button{border-radius:999px;padding:8px 16px;font-size:13px}
.editbox .editbtns button:not(.primary){background:none;border:1px solid var(--line2);color:var(--ink2)}
.edithint{margin:0;font-size:12px;color:var(--mut)}
.exmenu{position:absolute;z-index:30;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;display:grid;min-width:220px;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.exmenu button{background:none;border:0;color:var(--ink);text-align:left;padding:8px 10px;border-radius:7px;font-size:13px}
.exmenu button:hover{background:var(--panel)}
.exmenu{margin-top:4px}
.sugg{background:var(--panel2);border-radius:12px;padding:10px 12px;margin:6px 0;border:1px dashed var(--line2)}
.sugg .membtns button{border-color:var(--line2)}
.suggclear{margin-top:10px;background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:6px 12px;font-size:12px}
/* cap-honesty note: the reply ended on the provider output cap; never fake-complete */
.capnote{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0;background:var(--panel2);border:1px dashed var(--rose);border-radius:10px;padding:6px 10px;font-size:12px;color:var(--ink2)}
.capnote .capbtn{border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:4px 10px;font-size:12px}
.capnote .capbtn:hover{color:var(--ink);border-color:var(--rose)}
.pendbanner{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--rose);border-radius:10px;padding:8px 12px;margin:0 0 6px}
.pendbanner p{margin:0;font-size:13px;color:var(--ink)}
.pendbanner button{background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:7px;padding:4px 10px;font-size:12px;white-space:nowrap}
#memsuggest{margin-top:12px;background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:8px 14px;font-size:13px}
#memsuggest:hover{color:var(--ink);border-color:var(--rose)}
.membox .convmuted{margin:8px 0 0}
.searchbox{margin:4px 0 2px}
.searchbox input{width:100%;padding:8px 11px;font-size:12.5px;border-radius:9px;background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.convsnap{font-size:11px;color:var(--mut);margin:2px 6px 6px;overflow-wrap:anywhere}
.convhead .exall{margin-top:6px;width:100%;background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:9px;padding:6px;font-size:12px}
.bubblebody p{margin:0 0 8px}.bubblebody p:last-child{margin:0}
.bubblebody ul{margin:0 0 8px;padding-left:20px}
.bubblebody h4{margin:10px 0 4px;font-size:15px}
.bubblebody code{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px;font-family:Consolas,monospace}
.bubblebody pre{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px;overflow:auto;margin:0 0 8px}
.bubblebody pre code{border:0;background:none;padding:0}
.bubblebody a{color:var(--rose2)}
.caret{display:inline-block;width:8px;height:14px;background:var(--rose2);margin-left:2px;vertical-align:text-bottom;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#chaterror,#loginerror{color:#e2a49b}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* conversations list */
#convlist{margin-top:20px;display:grid;gap:4px}
#convlist .convhead{margin-bottom:6px}
#convlist .convhead button{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);border-radius:11px;padding:10px 12px;font-size:13px;font-weight:700}
#convlist .convlabel{font-size:10px;letter-spacing:2px;color:var(--mut);margin:10px 0 4px;font-weight:700}
.convrow{display:flex;gap:4px;align-items:center;background:none;border:0;border-radius:9px;padding:2px 4px}
.convrow.active{background:var(--panel2)}
.convtitle{flex:1;background:none;border:0;color:var(--ink2);font-size:13px;text-align:left;padding:8px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:6px}
.convtitle:hover{color:var(--ink)}
.convbtn{background:none;border:0;color:var(--mut);font-size:12px;padding:6px;border-radius:6px}
.convbtn:hover{color:var(--ink)}
.convmuted{color:var(--mut);font-size:12px}

/* private tools */
#privtools{max-width:810px;margin:36px auto 0;display:grid;gap:26px}
#usage h3,.membox h3{font-size:16px;margin:0 0 8px;font-family:Inter,Arial,sans-serif;letter-spacing:0}
#usage p{margin:4px 0;font-size:14px}
.membox{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--panel)}
.memrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.memtext{font-size:14px;overflow-wrap:anywhere}
.membtns{display:flex;gap:6px}
.membtns button{background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:7px;padding:4px 10px;font-size:12px}

/* model panel (private workspace, generated by models.js) */
.modelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.modelcard{border:1px solid var(--line2);border-radius:14px;padding:14px 16px;background:var(--panel2)}
.modelcard.selected{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-glow)}
.modelcard strong{display:block;margin-bottom:4px}
.modelcard .pricetag{float:right;font-size:11px;color:var(--rose2);border:1px solid rgba(196,139,131,.45);border-radius:999px;padding:2px 9px}
.modelcard .priceinfo{font-size:12px;color:var(--mut)}
.modelcard .avail{font-size:12.5px;color:var(--ink2)}
.muted{color:var(--mut);font-size:13px}

/* brand knowledge editor */
.ktabs{display:flex;gap:6px;flex-wrap:wrap}
.ktabs button{background:transparent;border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:5px 12px;font-size:.82rem}
.ktabs button.active{background:linear-gradient(135deg,var(--rose2),var(--rosedeep));border-color:transparent;color:#1a110f;font-weight:700}
#knowledgeinput{font-size:.9rem;line-height:1.5;padding:10px;min-height:160px;resize:vertical}
.krow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.krow .convmuted{margin:0}
#knowledgebox textarea{max-height:none}
/* history panel */
.histpanel{background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:10px 12px;margin:0 0 26px;max-width:88%}
.histtitle{margin:0 0 8px;font-size:10px;letter-spacing:2px;font-weight:700;color:var(--mut)}
.histpanel .histclose{float:right;margin-top:-24px}
.histitem{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding:6px 0}
.histver{flex:1;background:none;border:0;color:var(--ink2);text-align:left;font-size:13px;padding:4px 6px;border-radius:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.histver:hover{background:var(--panel);color:var(--ink)}
.histacts button{background:none;border:1px solid var(--line2);color:var(--ink2);border-radius:7px;padding:4px 10px;font-size:12px}
.histacts button:hover{color:var(--ink)}

/* ---------- MAD Salon & Spa theme — modeled on madsalonandspa.com ----------
   Playfair Display serif headings, DM Sans body, deep forest green #2c3a2f on
   cream #e6e4d8 with ink #1d1e20, elegant botanical atmosphere. Applies to the
   MAIN CONTENT AREA ONLY — the sidebar stays Vyxin charcoal in every theme. */
body.mad{background:linear-gradient(180deg,#f0eee4 0%,#e6e4d8 55%,#eae7dc 100%) fixed;color:#1d1e20}
body.mad h1,body.mad h2,body.mad h3{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:0;color:#1d1e20}
body.mad main{font-family:'DM Sans',Inter,Arial,sans-serif}
body.mad::selection{background:#cdd7c9;color:#1d1e20}
body.mad main .eyebrow{color:#7a7668}
body.mad #notice{color:#4b4f46}
body.mad header.top{border-bottom-color:#cdc9b6}
body.mad h1{color:#1d1e20}
body.mad header button,body.mad #logout{color:#4b4f46;border-color:#c6c2b0}
body.mad header button:hover,body.mad #logout:hover{border-color:#2c3a2f;color:#1d1e20}
body.mad .bubble .author{color:#2c3a2f}
body.mad .bubble.user{background:#dfdccd;border-color:#cdc9b6}
body.mad #chatform{background:#fbfaf4;border-color:#cdc9b6;box-shadow:0 10px 30px rgba(29,30,32,.08)}
body.mad #chatform:focus-within{border-color:#2c3a2f}
body.mad input,body.mad select,body.mad textarea{background:#fbfaf4;color:#1d1e20;border-color:#cdc9b6}
body.mad .primary{background:#2c3a2f;color:#f4f2e6;box-shadow:0 4px 16px rgba(44,58,47,.25)}
body.mad .caret{background:#2c3a2f}
body.mad footer{color:#8a8574}
body.mad #suggestions button{color:#4b4f46;border-color:#c6c2b0}
body.mad #suggestions button:hover{border-color:#2c3a2f;color:#1d1e20}
body.mad #chaterror,body.mad #loginerror{color:#8c3b34}
body.mad .expmenu,body.mad .exmenu{background:#fbfaf4;border-color:#cdc9b6;box-shadow:0 8px 24px rgba(0,0,0,.12)}
body.mad .expmenu button,body.mad .exmenu button{color:#1d1e20}
body.mad .expmenu button:hover,body.mad .exmenu button:hover{background:#eeecdf}
body.mad .membox,body.mad #usage{color:#1d1e20}
body.mad .membox{background:#fbfaf4;border-color:#cdc9b6}
body.mad .memrow{border-bottom-color:#e3e0d2}
body.mad .memtext{color:#1d1e20}
body.mad .pendbanner{background:#eeecdf;border-color:#cdc9b6;border-left-color:#2c3a2f}
body.mad .pendbanner p{color:#1d1e20}
body.mad .pendbanner button{color:#3f4a3a;border-color:#cdc9b6}
body.mad .msgbtn{color:#4b4f46}
body.mad .editbox{background:#fbfaf4;border-color:#cdc9b6}
body.mad .editbox textarea{background:#f4f2e6;color:#1d1e20}
body.mad .edithint,body.mad .convlabel{color:#7a7668}
body.mad .sugg{background:#eeecdf;border-color:#cdc9b6}
body.mad .suggclear,body.mad #memsuggest{color:#3f4a3a;border-color:#cdc9b6}
body.mad .membtns button{color:#3f4a3a;border-color:#cdc9b6}
body.mad .convtitle,body.mad .convbtn{color:#4b4f46}
body.mad .searchbox input{background:#fbfaf4;border-color:#cdc9b6}
body.mad .ktabs button{color:#3f4a3a;border-color:#cdc9b6}
body.mad .ktabs button.active{background:#2c3a2f;border-color:#2c3a2f;color:#f4f2e6}
body.mad #knowledgeinput{background:#f4f2e6;color:#1d1e20;border-color:#cdc9b6}
body.mad .histpanel{background:#fbfaf4;border-color:#cdc9b6}
body.mad .histtitle,body.mad .histver{color:#7a7668}
body.mad .histitem{border-color:#e3e0d2}
body.mad .histver:hover{background:#eeecdf;color:#1d1e20}
body.mad .histacts button{color:#3f4a3a;border-color:#cdc9b6}
body.mad .bubblebody code,body.mad .bubblebody pre{background:#eeecdf;border-color:#cdc9b6;color:#1d1e20}
body.mad .bubblebody a{color:#2c3a2f}
body.mad .modelcard{background:#fbfaf4;border-color:#cdc9b6}
body.mad .priceinfo{color:#8a8574}
body.mad .loginbody{background:#e6e4d8}
body.mad .logincard{background:#fbfaf4;border-color:#cdc9b6;color:#1d1e20}

/* ---------- UNTZDADDY theme — modeled on untzdaddy.com ----------
   Black main area, electric pink #FF2EC4 and neon lime #B6FF00 as ACCENTS only
   (buttons, focus, labels) — text stays readable in grays/white. Sidebar stays
   Vyxin charcoal. */
body.untzdaddy{background:radial-gradient(1100px 700px at 82% -10%,#1c0614 0%,#020205 58%) fixed;color:#f4f2f4}
body.untzdaddy h1,body.untzdaddy h2,body.untzdaddy h3{color:#f6f4f6;font-weight:700}
body.untzdaddy main .eyebrow{color:#b6ff00;opacity:.92}
body.untzdaddy #notice{color:#c7c6d3}
body.untzdaddy::selection{background:rgba(255,46,196,.35);color:#fff}
body.untzdaddy header.top{border-bottom-color:#2e2e3a}
body.untzdaddy header button,body.untzdaddy #logout{color:#d3d2e0;border-color:#343440}
body.untzdaddy header button:hover,body.untzdaddy #logout:hover{border-color:#ff2ec4;color:#fff}
body.untzdaddy .bubble .author{color:#b6ff00;opacity:.82}
body.untzdaddy .bubble.user{background:#0e0e13;border-color:#31313c}
body.untzdaddy #chatform{background:#0b0b10;border-color:#31313c;box-shadow:0 10px 30px rgba(0,0,0,.5)}
body.untzdaddy #chatform:focus-within{border-color:#ff2ec4}
body.untzdaddy input,body.untzdaddy select,body.untzdaddy textarea{background:#0b0b10;color:#f4f2f4;border-color:#31313c}
body.untzdaddy input,body.untzdaddy textarea{caret-color:#ff2ec4}
body.untzdaddy .primary{background:#ff2ec4;color:#fff;box-shadow:0 2px 10px rgba(255,46,196,.16)}
body.untzdaddy .primary:hover{background:#ff5ed1}
body.untzdaddy .caret{background:#ff2ec4}
body.untzdaddy footer{color:#9493a2}
body.untzdaddy #suggestions button{color:#d3d2e0;border-color:#343440}
body.untzdaddy #suggestions button:hover{border-color:#ff2ec4;color:#fff}
body.untzdaddy #chaterror,body.untzdaddy #loginerror{color:#ff8fd8}
body.untzdaddy .expmenu,body.untzdaddy .exmenu{background:#101017;border-color:#343440;box-shadow:0 12px 28px rgba(0,0,0,.6)}
body.untzdaddy .expmenu button,body.untzdaddy .exmenu button{color:#f2f0f2}
body.untzdaddy .expmenu button:hover,body.untzdaddy .exmenu button:hover{background:#1d1d24}
body.untzdaddy .membox{background:#0b0b10;border-color:#31313c;color:#f4f2f4}
body.untzdaddy .memrow{border-bottom-color:#2e2e3a}
body.untzdaddy .editbox{background:#101017;border-color:#343440}
body.untzdaddy .editbox textarea{background:#0b0b10;color:#f4f2f4}
body.untzdaddy .ktabs button{color:#d3d2e0;border-color:#343440}
body.untzdaddy .ktabs button.active{background:#ff2ec4;border-color:#ff2ec4;color:#fff}
body.untzdaddy .bubblebody a{color:#ff2ec4}

/* Owner contrast pass (2026-10-23): crank the window's own contrast — deeper
   blacks, brighter surface borders, brighter neutral text — and keep electric   pink for INTERACTIVE/ACTIVE elements only. Sidebar panel labels (TASKS /
   WORKFLOWS / DAILY BRIEF) drop to a quiet rose AND the same .8 dim as the
   rose/green pair, so the active row stays the strongest accent in the rail;
   the row keeps its pink bar and slightly stronger tint. */
   body.untzdaddy #taskmini>.navlabel,body.untzdaddy #wfpanel>.navlabel,body.untzdaddy #briefpanel>.navlabel{color:#f2a3d9;opacity:.8}
   body.untzdaddy #taskadd .primary,body.untzdaddy #wfadd .primary{color:#e9e8f2;border-color:rgba(255,46,196,.55)}
   body.untzdaddy nav.ws button.active{background:linear-gradient(90deg,rgba(255,46,196,.2),transparent 75%),var(--panel2);border-color:rgba(255,46,196,.55)}

/* ---------- customer chat pages (chat.html) ---------- */
.chatmain{max-width:800px;margin:0 auto;padding:32px 24px;align-self:start}
body.mad.chatbody{background:#f5f6f8;color:#192526}
.chathead{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:10px}
body.mad.chatbody .chathead{border-color:#d7dedb}
.chathead h1{font-size:24px;margin:4px 0 0}

/* ---------- responsive: tablet & phone ---------- */
@media(max-width:1080px){main{padding:30px 32px}}
@media(max-width:800px){
 .shell{display:block}
 aside{padding:14px 16px 12px;border-right:0;border-bottom:1px solid var(--line)}
 .brand{display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;margin:0;min-width:0}
 .brand img{width:42px;height:42px;border-radius:11px}
 .brandname{font-size:17px;margin-top:0;letter-spacing:.26em;text-indent:.26em}
 nav.ws{margin-top:12px;display:flex;gap:5px;flex-wrap:wrap}
 nav.ws .navlabel{flex:0 0 100%;width:100%;margin:2px 2px 6px}
 nav.ws button{padding:10px 8px;font-size:12px;flex:1;justify-content:center;gap:6px}
 nav.ws button.active{box-shadow:none}
 nav.ws button .ic{width:15px;height:15px}
 nav.ws button:not(.newchat) span{display:none}
 aside>.eyebrow,.sidefoot p,.sidefoot small{display:none}
 #monpanel{margin-top:10px}
 #monpanel #montext{font-size:12px;line-height:1.55;max-height:210px;overflow:auto;white-space:pre-wrap}
 #monpanel #monrun{margin:8px 0 0;padding:6px 12px}
 .sidefoot{margin-top:10px;padding-top:10px;border:0}
 .sidefoot #logout{margin:8px 0 0;padding:6px 12px}
 main{padding:22px 16px}
 h1{font-size:22px}
 #login{margin:28px auto}
 #messages{min-height:240px;max-height:45dvh}
 #chatform{gap:4px;border-radius:14px}
 #send{padding:12px 16px}
 header.top{gap:12px;flex-wrap:wrap;row-gap:12px}
 .headline{flex:1 1 100%}
 .acct{margin-left:auto}
 header.top button{white-space:nowrap}
 header.top .acctbtn{padding:6px 14px 6px 7px;min-height:38px}
 .acctbtn .who{font-size:13.5px}
 h2{font-size:28px}
 #chaterror,#loginerror{font-size:13.5px}
}
/* phone XL lock-screen tidy */
@media(max-width:480px){
 .brandname{display:none}
 .brand img{width:44px;height:44px}
}
/* ---------- PWA install hint ---------- */
install-hint{display:none}

/* Proactive-assistant foundation (P0): login page, project badges, task panel. */
.loginbody{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px}
.loginmain{width:100%;max-width:380px}
.logincard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:34px 30px;text-align:center}
.loginlogo{border-radius:16px;margin-bottom:10px}
.logincard h1{font-family:Georgia,'Times New Roman',serif;letter-spacing:.35em;font-size:26px;margin:6px 0 2px;color:var(--ink)}
.loginsub{color:var(--mut);font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 22px}
.logincard label{display:block;text-align:left;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:14px 0 6px}
.logincard select,.logincard input{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:10px 12px}
.loginbtn{width:100%;margin-top:20px;padding:11px 0}
.loginerr{color:var(--rosedeep,#b37066);min-height:20px;font-size:14px;margin:12px 0 0}
.loginfoot{color:var(--mut);font-size:12px;margin:16px 0 0}
.pbadge{float:right;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.pbadge[title^="Private"]{color:var(--sa-brite)}
#taskmini{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.taskadd{display:flex;gap:6px;margin:8px 0 10px}
.taskadd input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:8px 10px;font-size:14px}
.taskadd .primary{padding:8px 12px}
.taskrow{display:flex;align-items:center;gap:6px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:14px}
.tchip{font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:2px 7px;flex-shrink:0}
.tchip-bg{color:var(--mut);border:1px solid var(--line2)}
.tchip-td{color:var(--ink2);border:1px solid var(--sa)}
.tchip-ac{color:#9fd4af;border:1px solid #3d6a4c}
.tchip-bl{color:var(--rosedeep);border:1px solid var(--rosedeep)}
.tchip-dn{color:var(--good);border:1px solid #3d6a4c}
.tproj{font-size:10px;color:var(--mut);flex-shrink:0} .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
 /* Workflow verify readout: exact anchors ✓ / paraphrase admits ≈ / flagged ⚠ */
 .wfver{flex-basis:100%;display:flex;flex-direction:column;gap:1px;padding:4px 2px 2px;font-size:13px}
 .wfv{margin:0;padding:1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
 .wfv-exact{color:var(--good)}
 .wfv-para{color:var(--ink2);font-style:italic}
 .wfv-flag{color:var(--rosedeep)}
.tdel{background:none;border:none;color:var(--mut);cursor:pointer;padding:2px 4px;font-size:12px}
.tdel:hover{color:var(--rosedeep)}
.tempty{color:var(--mut);font-size:13px}
/* Tasks panel (privtools): same memory-panel family as the skills panel,
   plus a click-to-expand title and a complete/reopen action. */
#tasklist .taskrow{padding:8px 4px}
/* Task filter row: sits between the refresh krow and the list (CSP forbids
   inline style attributes, so spacing lives here). */
#taskfilters,#inboxfilters{margin-top:6px}
#taskfilters .convmuted,#inboxfilters .convmuted{font-size:12px;align-self:center}
#tasklist{margin-top:6px}
/* Lead journal panel: reuses the task-row idiom (chip + expandable row). */
.leadrow{display:flex;align-items:center;gap:6px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
#leadslist .ttitl{flex:1}
.sendrow{margin:2px 0;font-size:13px;color:var(--ink2);overflow-wrap:anywhere}
.ttitl{flex:1;min-width:0;text-align:left;background:none;border:none;color:var(--ink2);cursor:pointer;font-size:14px;padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttitl:hover{color:var(--ink)}
.taskdetail{flex-basis:100%;display:flex;flex-direction:column;gap:3px;padding:4px 2px 2px;font-size:13px;color:var(--ink2)}
.taskdetail p{margin:0;overflow-wrap:anywhere}
.taskdetail strong{color:var(--mut);font-weight:600}
@media (max-width:640px){.logincard{border-radius:12px;padding:26px 20px}}

/* Workflow panel (P1): research → draft → verify → save-as-review-task. */
.wfadd{display:flex;gap:6px;margin:8px 0 10px}
.wfadd input{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:8px 10px;font-size:14px}
.wfadd .primary{padding:8px 12px;font-size:13px}
.wfstatus{color:var(--mut);font-size:13px;min-height:16px;margin:0 0 6px}

/* Owner panel theming (P2): so the sidebar's owner tools match the per-brand
   accents — Tasks, Workflows and Daily brief. Headers get the same navlabel
   treatment as the Workspaces list (10px caps, spaced) in the accent shade;
   action buttons switch from the static rose .primary gradient to the
   outline-accent grammar already used by the workspace rows (border --sa,
   hover fill --sa-thov). ID-scoped so the body-scoped theme rules such as
   body.mad .primary can never re-tint the charcoal sidebar: an ID selector
   outranks body.mad .primary in every theme, and the --sa variables already
   switch per workspace (rose / forest green / electric pink). */
#taskmini>.navlabel,#wfpanel>.navlabel,#briefpanel>.navlabel{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--sa-brite);font-weight:700;opacity:.8;margin:6px 0 2px}
#taskadd .primary,#wfadd .primary{background:none;border:1px solid var(--sa-line);color:var(--sa-brite);box-shadow:none}
#taskadd .primary:hover,#wfadd .primary:hover{background:var(--sa-thov);border-color:var(--sa)}
#taskadd .primary:active,#wfadd .primary:active{transform:translateY(1px)} #taskmini .tdel:hover,#wfpanel .tdel:hover,#briefpanel .tdel:hover{color:var(--sa-brite)}
 /* Pending-work dot: sidebar status chips that are NOT done (task backlog /
    todo / active / blocked, workflow researched / drafted / verified) carry a
    small dot in --sa, the same per-workspace accent as the row highlights, so
    pending items read at a glance even before the tiny chip text. Done and
    tasked rows (.tchip-dn) stay dotless — their state is final. */
 #taskmini .tchip::before,#wfpanel .tchip::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sa);margin-right:5px;vertical-align:middle}
 #taskmini .tchip-dn::before,#wfpanel .tchip-dn::before{display:none}

/* ---------- UI refinement: fonts, layout constraints, account control ---------- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/playfair-display-600.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/dm-sans-400-700.woff2') format('woff2')}

/* Sidebar layout constraints: nothing may spill outside the 288px column, and
   the saved-conversations list becomes a scroll region instead of an overflow. */
/* Desktop-only: on phones the shell stacks (≤800px) and the sidebar must keep
   its full-width top-bar layout, so these column constraints apply ≥801px. */
@media(min-width:801px){
 .shell{grid-template-columns:288px minmax(0,1fr)}
 /* The sidebar is a compact viewport-bounded rail: it never sets the page
    height, so legacy utility panels appended inside it (tasks/workflows/
    brief/monitor) scroll internally instead of stretching the grid row —
    the main chat column keeps the composer within the first fold. */
 aside{min-width:0;max-width:288px;height:100dvh;position:sticky;top:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
 #convlist{min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:4px}
}
.convrow{min-width:0}
.convtitle{min-width:0;flex:1 1 auto}
.convbtn{flex:0 0 auto}
.searchbox input{width:100%;min-width:0}
#taskmini,#wfpanel{flex:0 0 auto}

/* Legacy rule hid every span inside workspace buttons (old count hints); the
   Private/Shared project badges are spans too — keep the rule for legacy spans
   and punch the badges through separately. */
nav.ws button:not(.newchat) span{display:none}
nav.ws button[data-mode] .pbadge{display:inline-block;float:none;margin-left:auto}
@media(max-width:800px){nav.ws button .pbadge{display:none}}

/* Account control: top-right header chip with initial avatar, capitalized
   display name and a dropdown holding Sign out. Contrast-aware per theme. */
.acct{position:relative;display:flex;align-items:center;gap:10px} .acctbtn{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line2);border-radius:999px;padding:5px 14px 5px 6px;color:var(--ink2);font-size:14px;transition:border-color .15s,color .15s}
.acctbtn:hover{border-color:var(--rose);color:var(--ink)}
.acctbtn .ava{width:30px;height:30px;font-size:13px}
.acctbtn .who{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbtn .caret-ic{transition:transform .15s}
.acctbtn[aria-expanded="true"]{border-color:var(--rose);color:var(--ink)}
.acctbtn[aria-expanded="true"] .caret-ic{transform:rotate(180deg)}
.acctbtn .caret-ic{width:14px;height:14px;opacity:.7}
.acctmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:190px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.55);display:grid;gap:2px}
.acctmenu button{background:none;border:1px solid transparent;color:var(--ink);text-align:left;padding:8px 10px;border-radius:7px;font-size:13.5px}
.acctmenu button:hover{background:var(--panel);border-color:var(--line2)}
.acctrole{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:4px 10px 2px}
.acctname{margin:0 10px 4px;font-size:15px;font-weight:600;color:var(--ink)}
.acctusage{margin:2px 10px 6px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12px;color:var(--ink2)}
.acctmenu{min-width:210px}
body.mad .acctbtn{color:#4b4f46;border-color:#c6c2b0}
body.mad .acctbtn .who{color:#1d1e20}
body.mad .acctbtn:hover{border-color:#2c3a2f;color:#1d1e20}
body.mad .ava{background:#2c3a2f;color:#f4f2e6}
body.mad .acctmenu{background:#fbfaf4;border-color:#cdc9b6;box-shadow:0 12px 32px rgba(29,30,32,.16)}
body.mad .acctmenu button{color:#1d1e20}
body.mad .acctmenu button:hover{background:#eeecdf}
body.mad .acctrole{color:#8a8574}
body.mad .acctname{color:#1d1e20}
body.mad .acctusage{background:#eeecdf;border-color:#cdc9b6;color:#4b4f46}
body.untzdaddy .acctbtn{color:#cfcedd;border-color:#2b2b34}
body.untzdaddy .acctbtn .who{color:#f2f0f2}
body.untzdaddy .acctbtn:hover{border-color:#ff2ec4;color:#fff}
body.untzdaddy .ava{background:#ff2ec4;color:#fff}
body.untzdaddy .acctmenu{background:#14141a;border-color:#2b2b34;box-shadow:0 12px 32px rgba(0,0,0,.6)}
body.untzdaddy .acctmenu button{color:#f2f0f2}
body.untzdaddy .acctmenu button:hover{background:#1d1d24}
body.untzdaddy .acctrole{color:#77777f}
body.untzdaddy .acctname{color:#f2f0f2}
body.untzdaddy .acctusage{background:#101014;border-color:#26262e;color:#b9b8c2}

/* Per-brand logo slot in the main header: shown only in MAD mode at the
   original aspect ratio (height set, width auto). */
.headline{display:flex;align-items:center;gap:16px;min-width:0}
#brandlogo{width:auto;height:58px;max-width:160px;object-fit:contain;display:block;flex:0 0 auto}
@media(max-width:800px){#brandlogo{height:40px;max-width:110px}}

/* Sidebar must stay Vyxin charcoal in every theme, explicitly. */
body.mad aside,body.untzdaddy aside{background:linear-gradient(180deg,var(--panel) 0%,#0b0c10 100%);border-right:1px solid var(--line);color:var(--ink2)}

/* The old sidebar sign-out rules are retired — the control now lives in the header. */

/* Phone compaction: the sidebar is a full-width top bar on ≤800px. The Tasks,
   Workflows and Daily-brief utility panels are desktop owner tools — hidden
   here so the chat stays reachable; the saved list gets a viewport-bounded
   scroll. */
@media(max-width:800px){  #taskmini,#wfpanel,#briefpanel,#monpanel{display:none}
 #convlist{max-height:50dvh;overflow-y:auto}
 nav.ws{margin-top:10px}
}

/* Voice conversations: mic bar under the composer, speaking-status bar under
   the chat, and the recording state that must be impossible to miss. */
#voicebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
#voicebar:empty{display:none}
#micbtn.rec{background:#b3261e;border-color:#b3261e;color:#fff;animation:micpulse 1.1s ease-in-out infinite}
#micbtn.rec:hover{border-color:#d94636;color:#fff}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.55)}50%{box-shadow:0 0 0 7px rgba(179,38,30,0)}}
#speakingbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);width:100%}
#speakingbar button{padding:5px 12px}

/* PHASE-6 PWA: safe-area insets for standalone (Home Screen) launches. The
   owner shells use viewport-fit=cover, so keep the sidebar strip and chat
   composer clear of the notch and iOS home bar. Customer chat pages are
   iframe-embedded on brand sites and get their chrome from the host, so they
   deliberately stay out of this block. */
@media(max-width:800px){
 aside{padding-top:max(14px,env(safe-area-inset-top))}
 main,aside{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 main{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:640px){
 .logincard{margin-bottom:max(0px,env(safe-area-inset-bottom))}
}

/* ==========================================================================
   CHAT-FIRST RESTRUCTURE (2026-10-29)
   Adds: drawer sidebar + scrim, routed secondary views (#view-*), compact
   header (menu · title · new-chat · account), composer quickbar (+ Tools and
   the compact model select), badges. Phone layout is fixed at the cause:
   every fixed-width element gets a fluid fallback, so nothing needs a blanket
   overflow:hidden mask. Pinch-zoom stays enabled (no touch-action overrides).
   ========================================================================== */

/* Routed views: one section visible at a time, driven by app.js's showView(). */
main section.view{max-width:810px;margin:26px auto 0}

/* Header: hamburger + headline + new-chat + account, single compact row. */
header.top{gap:12px;padding:10px 0 14px}
header.top .headline{flex:1 1 auto;min-width:0}
header.top h1{font-size:19px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .eyebrow{display:none}
#newchat2{flex:0 0 auto}
.icobtn{background:transparent;border:1px solid var(--line2);border-radius:999px;padding:8px 13px;font-size:15px;color:var(--ink2);transition:border-color .15s,color .15s}
.icobtn:hover{border-color:var(--rose);color:var(--ink)}
#menubtn2{flex:0 0 auto}

/* Composer: quickbar row (+ Tools menu, compact model select) above the box. */
#quickbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;margin:0 0 8px}
#toolsbtn{background:transparent;border:1px solid var(--line2);color:var(--ink2);border-radius:999px;padding:6px 13px;font-size:13px}
#toolsbtn:active{transform:scale(.97)}
#toolsmenu{position:absolute;z-index:40;min-width:210px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;display:grid;box-shadow:0 12px 32px rgba(0,0,0,.55)}
#toolsmenu button{background:none;border:0;color:var(--ink);text-align:left;padding:8px 10px;border-radius:7px;font-size:13.5px}
#toolsmenu button:active{background:var(--panel)}
#modelcompact{width:auto;min-width:0;max-width:100%;flex:1 1 240px;padding:6px 10px;font-size:12.5px;border-radius:999px;background:var(--bg2);color:var(--ink2)}
#conversation{position:relative}

/* Sidebar tools nav + badges (badges count pending items per view). */
nav.tools{margin-top:20px;display:grid;gap:4px}
nav.tools .navlabel{font-size:10px;letter-spacing:2.4px;color:var(--mut);font-weight:700;margin:6px 8px 2px}
nav.tools button{display:flex;align-items:center;gap:9px;border:1px solid transparent;background:none;color:var(--ink2);padding:8px 12px;text-align:left;border-radius:9px;font-size:13px;transition:background .15s,color .15s,border-color .15s}
nav.tools button:hover{background:var(--panel2);color:var(--ink)}
nav.tools button.active{background:var(--panel2);color:#fff;border-color:var(--sa-line);box-shadow:inset 2px 0 0 var(--sa)}
nav.tools .badge{margin-left:auto;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sa-tint);border:1px solid var(--sa-line);color:var(--sa-brite);font-size:10.5px;font-weight:700}

/* Drawer behaviour on phones; compact collapsible sidebar on desktop. */
/* Hamburger buttons share the icobtn look — on phones <button> has no UA
   reset here, so an unstyled menubtn rendered as a white system button
   across the top of the open drawer. */
.menubtn{background:transparent;border:1px solid var(--line2);border-radius:999px;padding:8px 13px;font-size:15px;color:var(--ink2);transition:border-color .15s,color .15s}
.menubtn:hover{border-color:var(--rose);color:var(--ink)}
#menubtn{display:none;margin-bottom:10px;width:fit-content}
@media(min-width:801px){
 body.narrow aside{display:none}
 body.narrow .shell{grid-template-columns:1fr}
}
#scrim{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.55)}
@media(max-width:800px){
 .shell{display:block;min-height:100dvh}
 aside{position:fixed;z-index:50;top:0;bottom:0;left:0;width:min(320px,86vw);padding-top:max(14px,calc(14px + env(safe-area-inset-top)));transform:translateX(-102%);transition:transform .22s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;visibility:hidden}
 body.drawer-open aside{transform:translateX(0);visibility:visible}
 body.drawer-open #scrim{position:fixed}
 aside{transition:transform .22s ease,visibility .22s}
 #menubtn{display:block}
 #menubtn2{display:block}
 header.top{padding:8px 0 10px}
 h1{font-size:17px}
 #brandlogo{height:32px;max-width:96px}
 main{padding:14px 14px 30px}
 /* Chat column fills the viewport; sticky composer above the keyboard. */
 #conversation{display:flex;flex-direction:column;min-height:calc(100dvh - 120px)}
 #messages{flex:1 1 auto;min-height:180px;max-height:none;overflow:auto}
 #conversation form#chatform{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:10}
 #view-chat{margin:0}
 section#login{margin:30px auto}
 /* Phones: suggestion chips wrap; composer never overflows. */
 #suggestions button{padding:8px 13px;font-size:12.5px}
 .acctbtn .who{max-width:96px}
}
@media(max-width:480px){
 header.top{flex-wrap:wrap}
 header.top .headline{flex-basis:calc(100% - 96px)}
 header.top h1{font-size:15.5px}
 .acctbtn .who{max-width:70px}
 #quickbar{gap:6px}
 #modelcompact{flex-basis:100%}
}

/* Utility classes for the restructured markup (CSP-safe: no inline style attrs).
   Keep every amount in sync with the amounts the old inline styles used. */
.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}
.swaytabs{margin-top:8px}
.swayprice{display:block;margin-top:4px}
.swayresult{margin-top:10px;font-size:13px}
.capinput{width:110px;max-width:110px}
.jobid{max-width:220px}
.speedsel{max-width:120px}
.voiceusage{margin-top:8px}
.skillstatus{margin-top:8px}
.skilldecisions{margin-top:10px}
.skillnote{font-size:13px}
.skillsinstalled{margin-top:14px}
.leadslist{margin-top:10px}
.emailsend{margin-top:14px}
.recipsel{max-width:320px}
.sendsenderror{margin-top:6px}
.sendlog{margin-top:10px}

/* Mobile overflow: fix the causes below — every hard width gets a fluid cap;
   long content wraps instead of pushing the page sideways. */
img,video{max-width:100%;height:auto}
pre{max-width:100%;overflow-x:auto}
.bubblebody pre,pre code{overflow-wrap:normal}
.bubble,.bubblebody,.memtext,.convsnap,#notice,.sendrow,.capnote p,.pendbanner p{overflow-wrap:anywhere;min-width:0}
.memrow{flex-wrap:wrap}
.membtns{flex-wrap:wrap}
.krow{min-width:0}
.krow input{max-width:100%;flex:1 1 160px;min-width:0}
.krow select{max-width:100%;flex:0 1 auto}
.krow textarea{width:100%}
.leadrow{flex-wrap:wrap}
#tasklist,#inboxlist,#skillsuggestions,#skillsinstalledlist{max-width:100%}
.taskdetail{width:100%}
.exmenu{max-width:calc(100vw - 24px)}
.acctmenu{max-width:calc(100vw - 24px)}
.swaytray{max-width:100%}
#swaybox input,#swaycap{max-width:100%}
#userbottom{margin:22px 0 0}

/* Compact mode chips (Chat / Image / Video) beside the composer: Image and
   Video route to the Media studio view with that category preselected. */
#modero{display:flex;flex:0 0 auto;border:1px solid var(--line2);border-radius:999px;padding:2px;gap:0}
.modechip{background:transparent;border:0;border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink2);transition:background .15s,color .15s}
.modechip:active{transform:scale(.97)}
.modechip.active{background:var(--panel);color:#fff}
/* Memory rows: workspace tag (same accent family as the sidebar badges). */
.memtag{flex:0 0 auto;align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.memtag.ws{color:var(--sa-brite);border-color:var(--sa-line);background:var(--sa-tint)}
#memws{max-width:170px;border-radius:999px}
/* Post-persist memory note, appended under the assistant reply that did it. */
.memnote{margin:8px 2px 0;font-size:12.5px;color:var(--sa-brite);overflow-wrap:anywhere}
@media(max-width:480px){
 #modero{order:-1}
 .modechip{padding:6px 11px;font-size:12px}
 #memws{max-width:140px}
}

/* ==========================================================================
   IMMERSIVE VOICE MODE (turn-by-turn, 2026-10-29)
   One overlay screen: the line-sphere canvas, the status line, the transcript
   strip and four controls. Dark stage with platinum lines and restrained
   rose-gold arcs; no glow fills, no particles, no oversized buttons. The
   visual only animates when the corresponding audio function is truly live —
   the state machine in app.js owns that honesty rule and pauses the whole
   loop while the tab or overlay is hidden (battery + reduced-motion).
   ========================================================================== */
#voiceopen{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink2);transition:color .15s}
#voiceopen .ic{width:15px;height:15px}
#voicehud{position:fixed;inset:0;z-index:60;background:#0d0e11;color:var(--ink);display:flex;flex-direction:column;align-items:center}
#voicehud::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 38%,rgba(196,139,131,.05),transparent 55%)}
#orbcv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.vh-inner{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;width:min(680px,100%);padding:max(18px,env(safe-area-inset-top)) 20px max(14px,env(safe-area-inset-bottom))}
.vh-status{margin:2px 0 0;min-height:22px;font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--mut)}
.vh-status.err{color:var(--rose2)}
.vh-canvaswrap{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center}
/* Transcript strip: last half-dozen turns, always readable, optionally hidden. */
.vh-trans{width:100%;max-height:31dvh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 6px 10px;font-size:13.5px;line-height:1.45}
.vh-trans.spill{max-height:44dvh}
.vt-turn{overflow-wrap:anywhere}
.vt-you{color:var(--ink)}
.vt-her{color:var(--ink2)}
.vt-note{color:var(--mut);font-size:12px}
.vt-label{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);margin:2px 6px 0 0}
.vh-controls{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 0 2px;flex-wrap:wrap}
.vbtn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line2);border-radius:999px;padding:9px 16px;font-size:13px;color:var(--ink2);transition:border-color .15s,color .15s}
.vbtn:hover{border-color:var(--rose);color:var(--ink)}
.vbtn[aria-pressed=true]{border-color:var(--rose);color:var(--rose2)}
.vbtn .ic{width:16px;height:16px}
.vbtn.vhi{border-color:var(--sa-soft);color:var(--ink)}
.vbtn.vhi:hover{border-color:var(--sa-brite)}
#vmplay{align-self:center}
.vh-optmenu{position:fixed;right:calc(14px + env(safe-area-inset-right));bottom:max(78px,calc(env(safe-area-inset-bottom) + 78px));z-index:62;width:min(330px,calc(100vw - 28px));border:1px solid var(--line2);border-radius:14px;background:#15161b;padding:14px 16px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2)}
.vh-optmenu label{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);margin-top:6px}
.vh-optmenu select{width:100%;border-radius:999px}
.vmenu-note{margin:8px 0 0;font-size:12px;color:var(--mut);overflow-wrap:anywhere}
.vmenulink{padding:0;background:none;border:0;color:var(--sa-brite);text-decoration:underline;font:inherit;cursor:pointer}
#vscrim{position:fixed;inset:0;z-index:61;background:transparent}
#voicehud[data-state=muted] .vh-status{color:var(--mut)}
#voicehud[data-state=error] .vh-status{color:var(--rose2)}
@media (prefers-reduced-motion:reduce){
 #voicehud{display:block}
}

/* ==========================================================================
   INTERFACE POLISH + VOICE FORM (2026-10-30)
   One icon language, quieter chrome, a single voice surface. Refines the
   chat-first block above: smaller paddings, thin borders instead of glows,
   and a wireframe stage centred in its own area.
   ========================================================================== */
.ic{width:18px;height:18px;flex:0 0 auto;display:block}

/* Header: square icon buttons, tighter account chip. */
header.top{padding:12px 0 18px;gap:8px}
.icobtn,.menubtn{padding:9px;border-radius:10px;border-color:var(--line);display:inline-grid;place-items:center}
.icobtn .ic,.menubtn .ic{width:17px;height:17px}
.icobtn:hover,.menubtn:hover{background:#1a1b21;border-color:var(--line2)}
.acctbtn{padding:4px 10px 4px 4px;border-color:var(--line)}
.acctbtn .ava{width:26px;height:26px;font-size:12px}

/* Sidebar: compact rail, grouped tools, menu-based conversation actions. */
aside{padding:22px 16px 18px}
.brand img{width:64px;height:64px;border-radius:16px}
.brandname{font-size:20px;letter-spacing:.32em;text-indent:.32em;margin-top:8px}
nav.ws{margin-top:18px;gap:2px}
nav.ws button{padding:8px 10px;font-size:13.5px;border-radius:9px;gap:10px}
nav.ws button .ic{width:16px;height:16px;opacity:.8}
nav.ws .navlabel,nav.tools .navlabel{font-size:9.5px;letter-spacing:2px;margin:14px 8px 4px;color:var(--mut);opacity:.85}
nav.tools{margin-top:0;gap:1px}
nav.tools button{padding:7px 10px;gap:10px;border-radius:9px;font-size:13px}
nav.tools button .ic{width:16px;height:16px;opacity:.75}
nav.tools button.active{background:#1a1b21;border-color:var(--line2);box-shadow:none;color:var(--ink)}
nav.tools button.active .ic{opacity:1;color:var(--sa-brite)}
nav.tools .badge{margin-left:auto}
#convlist{margin-top:14px;gap:1px}
#convlist .convhead{display:flex;gap:6px;align-items:center;position:relative;margin-bottom:8px}
#convlist .convhead button{width:auto;flex:1;border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;background:transparent;border:1px solid var(--line2);color:var(--ink2);display:flex;align-items:center;gap:7px;justify-content:center}
#convlist .convhead button:hover{border-color:var(--sa);color:var(--ink)}
.convhead .convmore{flex:0 0 34px;max-width:34px;padding:8px;display:grid;place-items:center}
.convmore .ic{width:16px;height:16px}
.convrow{padding:0 2px;border-radius:8px;gap:2px}
.convtitle{font-size:12.5px;padding:7px 6px}
.convbtn{padding:5px;border-radius:7px;display:grid;place-items:center}
.convbtn .ic{width:15px;height:15px}
.convrow .convbtn{opacity:.45}
.convrow:hover .convbtn,.convrow .convbtn[aria-expanded="true"]{opacity:1}
.searchbox input{padding:7px 10px;font-size:12px;border-radius:8px;border-color:var(--line)}
.sidefoot{padding-top:16px}
.sidefoot p{font-size:16px}

/* Composer: one bordered box, compact chips, arrow send. */
main{padding:26px 34px 30px}
#conversation{max-width:760px}
#chatform{gap:6px;border-radius:16px;padding:10px 10px 10px 12px;border-color:var(--line2);box-shadow:0 6px 20px rgba(0,0,0,.26);transition:border-color .15s ease;-webkit-tap-highlight-color:transparent}
#chatform:focus-within{border-color:rgba(196,139,131,.5)}
#quickbar{gap:6px;margin:0 0 2px}
#modero{border-color:var(--line);border-radius:9px;padding:1px}
.modechip{padding:4px 10px;font-size:12px;border-radius:8px}
#toolsbtn{border-color:var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
#toolsbtn .ic{width:14px;height:14px}
#toolsmenu{border-radius:10px;padding:5px;min-width:200px}
#toolsmenu button{padding:7px 9px;font-size:13px;display:flex;align-items:center;gap:8px}
#toolsmenu button .ic{width:15px;height:15px;opacity:.8}
#message{padding:8px 4px;font-size:15px}
.sendbtn{flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--rose2),var(--rosedeep));color:#1a110f;transition:transform .16s var(--ease-out),filter .15s ease;touch-action:manipulation}
.sendbtn .ic{width:19px;height:19px}
.sendbtn:active{transform:scale(.97);transition-duration:.12s}
.sendbtn:disabled{opacity:.5;cursor:wait}
#voiceopen{padding:5px 9px;border:1px solid var(--line);border-radius:8px;color:var(--ink2);display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
#voiceopen:active{transform:scale(.97)}
#voicebar{display:none!important}
#speakingbar{padding:5px 10px;border-radius:9px;gap:6px;font-size:12.5px;width:auto;border-color:var(--line)}
#speakingbar button{padding:3px 9px;border-radius:7px;font-size:12px;background:none;border:1px solid var(--line2);color:var(--ink2)}
/* Watch: one compact attach button, one quiet chip. Nothing else changes. */
#watchattach{border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px;color:var(--ink2);background:transparent;display:inline-flex;align-items:center;gap:5px}
#watchattach .ic{width:14px;height:14px}
#watchattach:active{transform:scale(.97)}
#watchattach:hover{color:var(--ink)}
.watchchip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 9px;margin:0 0 2px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);font-size:12.5px;color:var(--ink2)}
.watchname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.watchmeta{color:var(--ink2);opacity:.75;font-variant-numeric:tabular-nums}
.watchx{margin-left:auto;background:none;border:0;color:var(--ink2);font-size:12px;padding:2px 4px;border-radius:6px}
.watchx:hover{color:var(--ink)}
.watchbtn{background:none;border:1px solid var(--line2);color:var(--ink);border-radius:7px;padding:3px 9px;font-size:12px}
.watchbtn.ghost{color:var(--ink2)}
@media(max-width:560px){#watchattach span{display:none}.watchname{max-width:30ch}}

/* Model selector: name only when closed, pricing + description in the menu. */
#modelcompact{display:none}
.modelpick{position:relative;flex:0 1 auto;min-width:0;max-width:100%}
.modelbtn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px;color:var(--ink2);max-width:100%}
.modelbtn:active{transform:scale(.97)}
.modelbtn .caret-ic{width:12px;height:12px;opacity:.7}
#modelmenu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:45;width:min(300px,calc(100vw - 32px));background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:5px;display:grid;gap:2px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.modelitem{display:grid;grid-template-columns:1fr auto;gap:1px 10px;text-align:left;background:none;border:1px solid transparent;border-radius:9px;padding:8px 10px;color:var(--ink2)}
.modelitem:active{background:var(--panel);border-color:var(--line2)}
.modelitem.current{border-color:var(--sa-line);background:var(--sa-tint);color:var(--ink)}
.mi-name{font-size:13px;color:var(--ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
.mi-price{font-size:11px;color:var(--sa-brite);white-space:nowrap;align-self:center}
.mi-desc{grid-column:1/-1;font-size:11.5px;color:var(--mut);line-height:1.35}

/* Overflow menus (sidebar header + conversation rows). */
.expmenu{border-radius:10px;padding:5px;min-width:200px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.expmenu button{padding:7px 9px;font-size:12.5px;border-radius:7px}
.side-menu{top:calc(100% + 6px);left:0;right:auto}
.row-menu{top:calc(100% + 4px);right:0;left:auto;min-width:150px}

/* Messages: less air, same readability. */
#messages{padding:14px 2px}
.bubble{margin:0 0 18px;max-width:90%}
.bubble.user{padding:11px 15px;border-radius:14px 14px 4px 14px;border-color:var(--line)}
.bubble .author{font-size:9.5px;letter-spacing:1.8px;margin-bottom:6px}
#suggestions{gap:7px;margin:16px 0}
#suggestions button{padding:7px 14px;font-size:12.5px}
footer{padding:12px 2px;font-size:11.5px}

/* Voice screen: the wireframe fills the free area and is centred within it. */
#voicehud{background:#0b0c10}
.vh-inner{width:min(760px,100%);padding:max(14px,env(safe-area-inset-top)) 18px max(12px,env(safe-area-inset-bottom))}
/* Flex spacer only: the canvas is a full-bleed layer behind .vh-inner, so the
   form can be centred in the measured space between the status line and the
   transcript/controls instead of inside this shrinking gap. */
.vh-canvaswrap{position:relative;width:100%;flex:1 1 auto;min-height:240px;display:block}
#orbcv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.vh-status{font-size:11px;letter-spacing:2.4px;margin:0 0 2px;color:var(--ink2)}
.vh-error{position:absolute;left:0;right:0;bottom:4px;max-width:520px;margin:0 auto;background:rgba(21,22,27,.95);border:1px solid var(--line2);border-left:2px solid var(--rose);border-radius:10px;padding:10px 12px;display:grid;gap:8px;justify-items:start}
.vh-error p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.vh-error button{padding:6px 12px;font-size:12px}
.vh-trans{max-height:26dvh;font-size:13px;padding:2px 4px 8px;gap:5px}
.vh-controls{gap:6px;padding:8px 0 0}
.vbtn{padding:7px 12px;font-size:12.5px;border-color:var(--line);gap:6px}
.vbtn .ic{width:15px;height:15px}
.vh-optmenu{bottom:max(66px,calc(env(safe-area-inset-bottom) + 66px))}

/* Phones: drawer chrome, keyboard-safe composer, no sideways scroll. */
@media(max-width:800px){
 main{padding:10px 14px 22px;max-width:100%}
 aside{width:min(300px,88vw);padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
 aside .brand img{width:40px;height:40px}
 header.top{padding:6px 0 10px}
 #conversation{min-height:calc(100dvh - 96px)}
 #chatform{position:sticky;bottom:calc(6px + env(safe-area-inset-bottom));gap:4px;padding:8px;border-radius:14px}
 .sendbtn{width:38px;height:38px;border-radius:10px}
 #messages{padding:8px 0}
 .bubble{max-width:94%}
 #quickbar{gap:4px}
 .modechip{padding:4px 8px;font-size:11.5px}
 #toolsbtn{padding:4px 8px;font-size:11.5px}
 #voiceopen{padding:4px 8px;font-size:11.5px}
 .modelbtn{padding:4px 8px;font-size:11.5px;max-width:10rem}
 .modelbtn .ic{width:11px;height:11px}
 #modelmenu{width:calc(100vw - 28px);left:0}
 .vh-inner{width:100%;padding:max(10px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom))}
 .vh-canvaswrap{min-height:0}
 .vh-status{font-size:10px;letter-spacing:2px}
 .vh-controls{gap:5px;padding:6px 0 0}
 .vbtn{padding:6px 10px;font-size:12px}
 .vh-error{padding:8px 10px}
 .vh-error p{font-size:12px}
 .vh-trans{max-height:22dvh;font-size:12.5px}
 .side-menu{left:0;right:auto}
 .row-menu{right:0;left:auto}
}
@media(max-width:380px){
 #modero{order:-1}
 .modelbtn{max-width:8rem}
 #convlist .convhead button{font-size:12px}
 .bubble{max-width:96%}
}
@media(max-width:340px){
 .modechip{padding:3px 6px;font-size:11px}
 #toolsbtn span{display:none}
}
@media(prefers-reduced-motion:reduce){
 .bubble .caret,#micbtn.rec,.agentsdot.live{animation:none}
}

/* Keyboard-aware shell (iOS): --apph is set from visualViewport in app.js. */
@media(max-width:800px){
 .shell{min-height:var(--apph,100dvh)}
 #conversation{min-height:calc(var(--apph,100dvh) - 96px)}
}

/* Desktop rail: the conversation list must never be squeezed to zero by the
   grouped tools nav (the rail itself scrolls instead), and the header shows one
   menu affordance only. */
@media(min-width:801px){
 #menubtn2{display:none}
 #convlist{flex:0 0 auto;overflow:visible}
 #convlist .convrow{min-height:32px}
}
nav.tools .navlabel:first-of-type{margin-top:6px}

/* Chat is the focus: the column fills the viewport, the message log takes the
   free space and the composer settles at the bottom instead of floating in the
   middle of a tall empty page. */
@media(min-width:801px){
 #conversation{display:flex;flex-direction:column;min-height:calc(100dvh - 210px)}
 #messages{flex:1 1 auto;max-height:none;min-height:120px}
 #chatform{margin-top:8px}
 #convlist{max-height:34dvh;overflow-y:auto;scrollbar-width:thin}
}

/* Phone header: one row — menu · title · new chat · avatar — instead of the
   account chip dropping onto a second line with dead space beside it. */
@media(max-width:480px){
 header.top{flex-wrap:nowrap;gap:6px}
 header.top .headline{flex:1 1 auto;min-width:0;flex-basis:auto}
 header.top h1{font-size:15px}
 .acctbtn{padding:3px;border-radius:999px}
 .acctbtn .who{display:none}
 .acctbtn .caret-ic{display:none}
 .acctbtn .ava{width:28px;height:28px}
 #newchat2{padding:8px}
}

/* Phone drawer: the conversation list must keep its height inside the scrolling
   rail (same flex-shrink trap as desktop), and rows stay on one line. */
@media(max-width:800px){
 aside{padding:12px 12px calc(14px + env(safe-area-inset-bottom))}
 aside .brand{justify-content:flex-start;gap:10px}
 #menubtn{margin-bottom:6px}
 #convlist{flex:0 0 auto;max-height:40dvh;overflow-y:auto;scrollbar-width:thin}
 #convlist .convhead{margin-bottom:6px}
 aside nav.ws button,nav.tools button{white-space:nowrap;padding:8px 9px;gap:9px}
 aside nav.ws button span.pbadge{font-size:9px;padding:0 7px}
 nav.ws .navlabel,nav.tools .navlabel{margin:10px 8px 3px}
}

/* Voice controls: four compact controls stay on one row down to 320px. */
@media(max-width:480px){
 .vh-controls{flex-wrap:nowrap;gap:5px;justify-content:center;width:100%;padding:6px 0 0}
 .vbtn{padding:6px 8px;font-size:11.5px;gap:4px}
 .vbtn .ic{width:14px;height:14px}
 #vopt{padding:6px 9px}
}

/* Send arrow / busy spinner (icon-only control). */
.sendspin{display:block;width:15px;height:15px;border-radius:50%;border:2px solid rgba(26,17,15,.35);border-top-color:#1a110f;animation:sendspin .7s linear infinite}
@keyframes sendspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sendspin{animation:none;opacity:.6}}

/* Composer micro-transitions — design-skills review bar, 2026-10-30.
   Presets-only curves, one press timing, colour work at 150ms, and every
   hover effect behind a real pointer so a tap on iOS cannot leave the send
   arrow bright or a chip stuck in its hover colour. Press scale is the
   feedback touch keeps; reduced-motion keeps the colour change and drops the
   movement. The drawer, the menus' geometry and the voice stage are not in
   this block — it owns the composer's own controls only. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
.modechip,#toolsbtn,.modelbtn,#voiceopen{transition:border-color .15s ease,color .15s ease,background .15s ease,transform .16s var(--ease-out);touch-action:manipulation}
#toolsmenu button,.modelitem{transition:background .15s ease,border-color .15s ease,color .15s ease;touch-action:manipulation}
@media (hover:hover) and (pointer:fine){
 .sendbtn:hover{filter:brightness(1.06)}
 .modechip:hover{color:var(--ink)}
 #toolsbtn:hover,.modelbtn:hover,#voiceopen:hover{border-color:var(--sa);color:var(--ink)}
 #toolsmenu button:hover{background:var(--panel)}
 .modelitem:hover{background:var(--panel);border-color:var(--line2)}
}
@media (prefers-reduced-motion:reduce){
 .modechip,#toolsbtn,.modelbtn,#voiceopen,.sendbtn{transition-property:border-color,color,background,filter}
 .modechip:active,#toolsbtn:active,.modelbtn:active,#voiceopen:active,.sendbtn:active{transform:none}
}

/* Voice Settings: compact picker row (voice · preview · apply) + speed/tone. */
.vrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.vrow label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);font-weight:700;min-width:42px}
#voicepick{flex:1 1 190px;min-width:0;max-width:260px;border-radius:9px;padding:7px 10px;font-size:13px}
#voicepreview{border-radius:9px;padding:7px 14px;font-size:12.5px;background:none;border:1px solid var(--line2);color:var(--ink2)}
#voicepreview:hover{border-color:var(--sa);color:var(--ink)}
#voicesave{border-radius:9px;padding:7px 14px;font-size:12.5px}
#voicepreview:disabled,#voicesave:disabled{opacity:.55;cursor:wait}
#voicespeed,#voicetone{width:auto;min-width:0;border-radius:9px;padding:7px 10px;font-size:13px;flex:0 0 auto}
#voicepicknote{margin:10px 0 0;font-size:12px;color:var(--mut);line-height:1.5}
@media(max-width:520px){#voicepick{flex-basis:100%;max-width:none}#voicepreview,#voicesave{flex:1 1 0}}

/* Voice enable is a small status toggle, not a hero button. */
#voiceenable{padding:7px 14px;font-size:12.5px;border-radius:9px}
#voicebox .krow{margin-top:8px}

/* Voice Settings on very narrow screens: keep the picker to three tidy rows. */
@media(max-width:520px){
 .vrow{gap:6px;margin-top:8px}
 .vrow label{min-width:0;font-size:9.5px;letter-spacing:1.2px}
 #voicepick{flex-basis:100%;max-width:none}
 #voicepreview,#voicesave{flex:1 1 auto;white-space:nowrap;padding:7px 8px;font-size:12px}
 #voicespeed,#voicetone{flex:1 1 0;min-width:0;padding:6px 8px;font-size:12.5px}
}

/* In-chat images: quote, progress, result — the same compact vocabulary as
   Watch, so the composer stays the focus and nothing new shouts. */
#imgro{align-items:center;gap:6px;flex:0 1 auto;min-width:0}
#imgro:not([hidden]){display:inline-flex}
#imgattach{border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px;color:var(--ink2);background:transparent;display:inline-flex;align-items:center;gap:5px}
#imgattach .ic{width:14px;height:14px}
#imgattach:hover{color:var(--ink)}
#imgattach:active{transform:scale(.97)}
#imgmodel{max-width:10.5rem;background:transparent;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12.5px;color:var(--ink2)}
.imgchip .imgnote{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.imgchip .imgmeta{color:var(--ink2);opacity:.75}
.imgx{margin-left:2px;background:none;border:0;color:var(--ink2);font-size:12px;padding:2px 4px;border-radius:6px}
.imgx:hover{color:var(--ink)}
.imgrow .imgcard{max-width:min(520px,100%)}
.imgbody{display:grid;gap:7px}
.chatimg{display:grid;gap:7px;max-width:100%}
.chatimg .imgresult{max-height:70vh;object-fit:contain}
.imgquote-head{margin:0;font-size:13.5px;color:var(--ink)}
.imgquote-meta{margin:0;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
.imgquote-note{margin:0;font-size:11.5px;color:var(--mut);line-height:1.4}
.imgprogress{margin:0;font-size:12px;color:var(--ink2)}
.imgprogress.bad{color:var(--rose2)}
.imgacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:1px}
.imgbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:5px 11px;font-size:12.5px;text-decoration:none;touch-action:manipulation}
.imgbtn.primary{background:var(--panel);border-color:var(--sa-line);color:#fff}
.imgbtn:active{transform:scale(.97)}
.imgresult{width:100%;max-width:100%;border-radius:12px;border:1px solid var(--line2);display:block;background:var(--bg2)}
@media(max-width:560px){#imgattach span{display:none}#imgmodel{max-width:11rem}.imgchip .imgnote{max-width:24ch}}

/* In-chat video studio: editable HyperFrames intro, inline preview, render
   controls and download. The portrait stage keeps the phone-shaped composition
   honest without taking over the conversation. */
#vidro{align-items:center;flex:0 1 auto}
#vidro:not([hidden]){display:inline-flex}
.vidnote{font-size:11.5px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap}
.vidrow .vidcard{max-width:min(680px,100%)}
.vidbody{display:grid;gap:9px}
.vidhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.vidtitle{margin:0;font-size:14px;color:var(--ink)}
.vidmeta{margin:0;font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.vidstage{display:grid;place-items:center;min-height:150px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,#111217,#0b0c10);padding:10px;overflow:hidden}
.vidstage video{width:min(100%,250px);max-height:430px;border-radius:9px;background:#000;display:block}
.vidstage video[hidden]{display:none}
.vidplaceholder{margin:0;color:var(--mut);font-size:12px;text-align:center;line-height:1.5;max-width:36ch}
.vidstatus{margin:0;font-size:12px;color:var(--ink2);line-height:1.45;overflow-wrap:anywhere}
.vidprogress{height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.vidprogress span{display:block;height:100%;width:2%;background:var(--sa-brite);transition:width .4s ease}
.vidfields{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.vidfields label{display:grid;gap:3px;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);font-weight:700;min-width:0}
.vidfields label.wide{grid-column:1/-1}
.vidfields input{width:100%;min-width:0;border:1px solid var(--line);border-radius:7px;background:var(--bg2);color:var(--ink);padding:6px 8px;font-size:12.5px}
.vidfields input:focus{outline:1px solid var(--sa);border-color:var(--sa)}
.vidacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vidacts .imgbtn[disabled]{opacity:.55;cursor:wait}
.vidcost{margin:0;font-size:11px;color:var(--mut)}
@media(max-width:560px){
 .vidfields{grid-template-columns:1fr}
 .vidfields label.wide{grid-column:auto}
 .vidacts .imgbtn{flex:1 1 auto;justify-content:center}
 .vidhead{display:block}
 .vidmeta{margin-top:3px}
}

/* Mini Vyxin sidebar entry — the single in-app door to her own chat page.
   The activity line is updated by vxCompanion() from real chat/voice events. */
.mininav{display:flex;align-items:center;gap:10px;margin:14px 2px 2px;padding:9px 10px;border:1px solid var(--line2,#2e3038);border-radius:12px;background:linear-gradient(135deg,rgba(183,129,231,.12),rgba(196,139,131,.05));color:var(--ink,#ecebe7);text-decoration:none}
.mininav:hover,.mininav:focus-visible{border-color:var(--sa-line,rgba(196,139,131,.45));color:#fff}
.mininav .miniava{display:grid;width:34px;height:34px;flex:0 0 34px;place-items:center;border-radius:9px;background:#17121f;overflow:hidden}
.mininav .miniava img{display:block;width:34px;height:34px;object-fit:cover}
.mininav .minitxt{display:grid;min-width:0;line-height:1.2}
.mininav .minitxt strong{font-size:13px;font-weight:650;letter-spacing:-.1px}
.mininav .minitxt small{overflow:hidden;color:var(--mut,#a5a4aa);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.mininav.busy-thinking .minitxt small,.mininav.busy-listening .minitxt small,.mininav.busy-speaking .minitxt small{color:#d7b6f3}
@media(max-width:800px){.mininav{margin:8px 2px 2px;padding:8px 9px}}