:root{
  --bg:#080b14;--panel:#0d1220;--panel2:#111827;--line:#202a3b;--text:#eef2ff;--muted:#8d99ae;
  --accent:#7c5cff;--accent2:#16d9c5;--danger:#ff5577;--radius:14px
}
*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
button,input,textarea,select{font:inherit}button{color:inherit;border:0;cursor:pointer}
#app{display:flex}.hidden{display:none!important}
#sidebar{width:286px;min-width:286px;height:100%;background:#0a0f1b;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;position:relative;transition:width .18s ease,min-width .18s ease}
#sidebar.collapsed{width:76px;min-width:76px}.brand{display:flex;gap:11px;align-items:center;padding:3px 8px 20px}.brand b{font-size:18px;letter-spacing:.6px}.brand span{display:block;font-size:9px;color:var(--accent2);letter-spacing:1.6px;margin-top:3px}
.logo,.hero-logo{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#31b6ff);font-weight:900;border-radius:11px;box-shadow:0 8px 30px #5b4eff33}.logo{width:39px;height:39px}.hero-logo{width:64px;height:64px;font-size:28px;margin:auto}
.iconBtn{position:absolute;right:10px;top:18px;background:transparent;color:var(--muted);font-size:20px}.side-actions{display:grid;gap:5px}.nav{width:100%;height:42px;text-align:center;padding:10px 11px;background:transparent;border-radius:10px;color:#aeb8cb;display:flex;gap:0;align-items:center;justify-content:center;position:relative}.nav:hover,.nav.active{background:#151d2e;color:#fff}.nav-icon{width:19px;text-align:center;color:var(--accent2);font-size:16px;line-height:1}.nav-label{display:none}.nav[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);background:#171f31;border:1px solid #33415a;color:#fff;padding:7px 10px;border-radius:8px;font-size:12px;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:50;box-shadow:0 8px 25px #0008;transition:opacity .12s ease,transform .12s ease,visibility .12s ease}.nav[data-tooltip]:hover::after,.nav[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.nav-section{margin-top:20px}.section-title{font-size:10px;text-transform:uppercase;color:#647087;letter-spacing:1.4px;padding:0 10px 8px}.all-title{margin-top:18px}.chat-list{overflow:auto;min-height:0}.chat-item{padding:8px 10px;color:#aab4c8;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-size:13px}.chat-item:hover{background:#111827;color:#fff}.chat-item .star{float:right;color:#e4c85b}
.account-mini{margin-top:auto;border:1px solid var(--line);background:#0e1524;border-radius:12px;padding:9px;display:flex;align-items:center;gap:9px;cursor:pointer}.avatar{width:30px;height:30px;border-radius:50%;background:#222d44;display:grid;place-items:center;font-size:10px}.account-mini b{font-size:12px}.account-mini small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.account-mini>span{margin-left:auto;color:var(--muted)}
#main{flex:1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 0,#14172c 0,#080b14 40%)}.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.breadcrumbs{font-size:13px;color:#dce2f0}.dot{margin:0 8px;color:#3d4a61}.breadcrumbs #status{color:var(--accent2)}.top-actions{display:flex;gap:8px}.ghost,.primary{padding:9px 13px;border-radius:9px}.ghost{background:#111827}.primary{background:linear-gradient(135deg,var(--accent),#5d8cff);font-weight:700}
.content{flex:1;overflow:auto;padding:38px 7%;}.welcome{max-width:860px;margin:7vh auto 0;text-align:center}.welcome h1{font-size:42px;margin:18px 0 8px;letter-spacing:-1.5px}.welcome p{color:var(--muted);font-size:15px}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}.quick-grid button{background:#0f1626;border:1px solid var(--line);padding:16px;border-radius:12px;text-align:left}.quick-grid button:hover{border-color:#465a83;background:#141d30}
#workspace{max-width:1050px;margin:auto}.panel{background:#0e1421;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}.panel h2{margin-top:0}.muted{color:var(--muted)}.codebox{background:#070a11;border:1px solid #1b2435;border-radius:10px;padding:15px;overflow:auto;white-space:pre-wrap;font-family:Consolas,monospace;font-size:12px}
.message{max-width:900px;margin:0 auto 18px}.message .role{font-size:11px;color:var(--accent2);margin-bottom:6px}.message .bubble{background:#0f1626;border:1px solid var(--line);padding:15px;border-radius:12px;white-space:pre-wrap;line-height:1.55}.message.user .bubble{background:#141a2a}
#composerWrap{padding:0 7% 16px}.composer{max-width:1050px;margin:auto;background:#0e1421;border:1px solid #29354b;border-radius:16px;box-shadow:0 12px 50px #0008}.composer textarea{width:100%;resize:none;border:0;outline:0;background:transparent;color:#fff;padding:17px 18px 9px}.composer-bottom{display:flex;justify-content:space-between;align-items:center;padding:8px 10px}.composer-left,.composer-right{display:flex;gap:7px;align-items:center}.tool{background:#141c2c;color:#b6c0d2;padding:7px 10px;border-radius:8px;font-size:12px}.tool:hover{background:#1a2538;color:#fff}.tiny{font-size:10px;color:var(--accent2)}select{background:#111827;color:#dce2f0;border:1px solid var(--line);padding:7px 9px;border-radius:8px}.send{width:35px;height:35px;border-radius:10px;background:var(--accent);font-size:16px}.composer-note{text-align:center;color:#566278;font-size:10px;padding-top:7px}.attachments{max-width:1050px;margin:0 auto 8px;display:flex;gap:7px;flex-wrap:wrap}.attachment{background:#121b2c;border:1px solid var(--line);padding:6px 9px;border-radius:8px;font-size:11px;color:#c7d0df}.attachment img{max-height:50px;max-width:80px;vertical-align:middle;margin-right:6px;border-radius:5px}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:20}.modal-card{width:min(520px,90vw);background:#0d1320;border:1px solid #2a3850;border-radius:16px;padding:22px;box-shadow:0 30px 100px #000}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0}.modal-head button{background:transparent;font-size:26px;color:#8b97aa}.modal-card label{display:block;font-size:12px;color:#aeb8c9;margin-top:13px}.modal-card input{width:100%;margin-top:6px;background:#080d17;border:1px solid var(--line);color:#fff;padding:10px;border-radius:8px;outline:none}.modal-actions{display:flex;justify-content:flex-end;margin-top:18px}.provider-note{margin-top:15px;font-size:11px;color:#78859a;line-height:1.5}
#sidebar.collapsed .brand div:not(.logo),#sidebar.collapsed .section-title,#sidebar.collapsed .account-mini div,#sidebar.collapsed .account-mini>span{display:none}
#sidebar.collapsed .nav{justify-content:center}.chat-item{display:block}
@media(max-width:900px){#sidebar{width:230px;min-width:230px}.quick-grid{grid-template-columns:repeat(2,1fr)}.welcome h1{font-size:32px}}

/* ---- Ghost button: clear affordance ---- */
.ghost{border:1px solid var(--line);color:#c7d0df;transition:background .12s ease,border-color .12s ease,color .12s ease,transform .06s ease}
.ghost:hover{background:#182238;border-color:#3a4b6b;color:#fff}
.ghost:active{transform:scale(.97)}
.primary{transition:filter .12s ease,transform .06s ease}
.primary:hover{filter:brightness(1.12)}
.primary:active{transform:scale(.97)}

/* ---- Toasts ---- */
#toastHost{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none}
.toast{background:#141c2c;border:1px solid #2c3a54;color:#fff;padding:11px 15px;border-radius:10px;font-size:13px;box-shadow:0 12px 34px #0009;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .18s ease,transform .18s ease;max-width:320px}
.toast.show{opacity:1;transform:translateY(0) scale(1)}
.toast-success{border-color:#1f6b53;background:#0f2419}
.toast-error{border-color:#7a2340;background:#22101a}
.toast-info{border-color:#2c3a54}

/* ---- Empty states / panel actions ---- */
.empty-chat{text-align:center;color:var(--muted)}
.chat-item.empty{color:#586178;cursor:default;font-style:italic}
.chat-item{display:flex;justify-content:space-between;align-items:center;gap:6px}
.chat-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.chat-item .star{cursor:pointer;color:#586178;flex-shrink:0}
.chat-item .star:hover{color:#e4c85b}
.active-chat{background:#111827;color:#fff}
.panel-actions{display:flex;gap:8px;margin-top:10px}

/* ---- Settings controls ---- */
.row-setting{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.row-setting:first-of-type{border-top:0}
.switch{width:42px;height:24px;border-radius:99px;background:#222d44;position:relative;transition:background .15s ease}
.switch .knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8d99ae;transition:left .15s ease,background .15s ease}
.switch.on{background:var(--accent)}
.switch.on .knob{left:21px;background:#fff}
.swatches{display:flex;gap:8px}
.swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.swatch.selected{border-color:#fff}
.swatch.violet{background:linear-gradient(135deg,#7c5cff,#31b6ff)}
.swatch.teal{background:linear-gradient(135deg,#16d9c5,#31b6ff)}
.swatch.rose{background:linear-gradient(135deg,#ff5577,#ff9a5c)}
.swatch.amber{background:linear-gradient(135deg,#f5a623,#ffd76b)}
.design-grid{grid-template-columns:repeat(2,1fr)}

/* ---- Mic recording state ---- */
#micBtn.recording{background:var(--danger);color:#fff;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ---- Small prompt modal ---- */
.modal-card.small{width:min(380px,90vw)}
.pd-input{width:100%;margin-top:14px;background:#080d17;border:1px solid var(--line);color:#fff;padding:10px;border-radius:8px;outline:none}

/* ---- Accent theming ---- */
body[data-accent="teal"]{--accent:#16d9c5;--accent2:#31b6ff}
body[data-accent="rose"]{--accent:#ff5577;--accent2:#ff9a5c}
body[data-accent="amber"]{--accent:#f5a623;--accent2:#ffd76b}

/* ---- Auth screen ---- */
.auth-screen{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 0,#14172c 0,#080b14 55%);z-index:200}
.auth-card{width:min(400px,90vw);background:#0d1320;border:1px solid #2a3850;border-radius:18px;padding:30px 28px 26px;box-shadow:0 30px 100px #000}
.auth-brand{display:flex;gap:11px;align-items:center;margin-bottom:22px}
.auth-brand .logo{width:39px;height:39px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#31b6ff);font-weight:900;border-radius:11px;box-shadow:0 8px 30px #5b4eff33}
.auth-brand b{font-size:18px;letter-spacing:.6px;display:block}
.auth-brand span{display:block;font-size:9px;color:var(--accent2);letter-spacing:1.6px;margin-top:3px}
.auth-tabs{display:flex;background:#0a0f1b;border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:20px}
.auth-tab{flex:1;padding:9px;border-radius:8px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;transition:background .12s ease,color .12s ease}
.auth-tab.active{background:#151d2e;color:#fff}
.auth-pane label{display:block;font-size:12px;color:#aeb8c9;margin-top:13px}
.auth-pane input{width:100%;margin-top:6px;background:#080d17;border:1px solid var(--line);color:#fff;padding:11px;border-radius:8px;outline:none}
.auth-pane input:focus{border-color:var(--accent)}
.auth-submit{width:100%;margin-top:20px;padding:12px;font-size:14px}
.auth-error{margin-top:12px;padding:10px 12px;background:#22101a;border:1px solid #7a2340;color:#ff9ab0;border-radius:8px;font-size:12.5px}
.auth-hint{margin-top:16px;font-size:11px;color:#647087;line-height:1.5;text-align:center}

/* ---- Sidebar auth-related additions ---- */
.logout-btn{margin-top:8px;width:100%;text-align:center;padding:9px;font-size:12px}
.account-danger{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.account-danger .modal-actions{justify-content:space-between}

/* ---- Welcome banner (post-signup guided setup) ---- */
.welcome-banner{background:linear-gradient(135deg,#1a1440,#0f2038);border:1px solid #3a3a6b;border-radius:12px;padding:16px 18px;margin-bottom:16px}
.welcome-banner b{font-size:14.5px;color:#fff}
.welcome-banner p{margin:8px 0 0;font-size:12.5px;color:#c3cbdc;line-height:1.55}
.welcome-banner a{color:var(--accent2);font-weight:600;text-decoration:none}
.welcome-banner a:hover{text-decoration:underline}
.welcome-banner p.muted{margin-top:6px;color:#8b97aa}
.free-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.4px;color:#0a1f1a;background:linear-gradient(135deg,#16d9c5,#31b6ff);padding:2px 7px;border-radius:99px;vertical-align:middle;margin-left:6px}
.modal-actions{justify-content:flex-end}
.modal-actions:has(.welcome-only:not(.hidden)){justify-content:space-between}
.ghost.danger{border-color:#7a2340;color:#ff9ab0}
.ghost.danger:hover{background:#2a1420;border-color:#a53359}

/* ---- Email verification step ---- */
.verify-sent-to{font-size:12.5px;color:#aeb8c9;margin-top:2px}
.code-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.code-actions button{flex:1;font-size:12px;padding:8px 10px}
#signupCode{letter-spacing:6px;font-size:18px;text-align:center;font-weight:700}

/* ---- "Verify you're not a bot" checkbox ---- */
.bot-check{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 16px;background:#0a0f1b;border:1px solid var(--line);border-radius:10px}
.bot-checkbox{width:24px;height:24px;flex-shrink:0;border:2px solid #3a4b6b;border-radius:5px;background:#080d17;display:grid;place-items:center;transition:border-color .15s ease,background .15s ease}
.bot-checkbox:hover{border-color:var(--accent)}
.bot-check-mark{opacity:0;transform:scale(.5);transition:opacity .15s ease,transform .15s ease;color:#fff;font-size:15px;font-weight:900}
.bot-checkbox.checking{border-color:var(--accent)}
.bot-checkbox.verified{background:linear-gradient(135deg,var(--accent),#31b6ff);border-color:transparent}
.bot-checkbox.verified .bot-check-mark{opacity:1;transform:scale(1)}
.bot-check-label{font-size:13.5px;color:#dbe1ec;flex:1}
.bot-check-spinner{width:16px;height:16px;border-radius:50%;border:2px solid #2c3a54;border-top-color:var(--accent);animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}