:root{
  --bg:#070b14;--bg2:#0c1220;--panel:#111a2c;--panel2:#16213a;--line:#1f2b45;
  --txt:#e6ecf7;--muted:#8a97b3;--acc:#38bdf8;--acc2:#818cf8;--ok:#34d399;--warn:#fbbf24;--err:#f87171;
  --r:16px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#0f1a33 0%,var(--bg) 60%);color:var(--txt);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;display:flex;flex-direction:column;min-height:100dvh;-webkit-font-smoothing:antialiased}
a{color:var(--acc)}
.muted{color:var(--muted)}
.error{color:var(--err);background:#2a1418;border:1px solid #4a1f25;padding:8px 12px;border-radius:10px}
small{font-size:12px}

/* --- top bar --- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(8px + var(--sat)) 12px 8px;background:rgba(7,11,20,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.3px;display:flex;align-items:center;gap:8px;flex:1}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.brand .dot.off{background:var(--err);box-shadow:0 0 8px var(--err)}
.icon-btn{background:var(--panel);border:1px solid var(--line);color:var(--txt);width:40px;height:40px;border-radius:12px;font-size:18px;display:grid;place-items:center;cursor:pointer;flex:none}
.icon-btn:active{transform:scale(.96)}
.provider-switch{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.provider-switch button{border:0;background:transparent;color:var(--muted);padding:6px 10px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}
.provider-switch button.active{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04101c}
.provider-switch button:disabled{opacity:.4;cursor:not-allowed}

/* --- drawer --- */
.drawer{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:var(--bg2);border-right:1px solid var(--line);z-index:40;transform:translateX(-105%);transition:transform .25s ease;padding:calc(12px + var(--sat)) 14px calc(14px + var(--sab));overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.drawer h4{margin:12px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.conv-list,.mem-list{list-style:none;margin:0;padding:0}
.conv-list li{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;cursor:pointer;font-size:14px}
.conv-list li.active,.conv-list li:hover{background:var(--panel)}
.conv-list li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-list li .del{opacity:.5;font-size:12px}
.mem-list li{padding:6px 8px;font-size:13px;border-bottom:1px solid var(--line);display:flex;gap:6px}
.mem-list li span{flex:1}.mem-list li .del{cursor:pointer;opacity:.5}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.portal-grid a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--txt);font-size:11px;text-align:center}
.portal-grid a i{font-style:normal;font-size:20px}
.pg-group{grid-column:1/-1;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}

/* --- buttons --- */
.btn{border:1px solid var(--line);background:var(--panel);color:var(--txt);padding:10px 16px;border-radius:12px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center;font-size:14px}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04101c;border:0}
.btn.ghost{background:transparent}
.btn.full{width:100%;display:block}
.btn:active{transform:scale(.98)}

/* --- orb --- */
.orb{position:relative;width:150px;height:150px;margin:8px auto 14px}
.orb.small{width:90px;height:90px}
.orb-core{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c7ecff 0%,var(--acc) 35%,var(--acc2) 75%,#1e1b4b 100%);box-shadow:0 0 40px rgba(56,189,248,.55),0 0 90px rgba(129,140,248,.35);animation:breath 3.2s ease-in-out infinite}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(56,189,248,.35);animation:spin 9s linear infinite}
.orb-ring.r2{inset:9%;border-color:rgba(129,140,248,.35);animation-duration:14s;animation-direction:reverse;border-style:dashed}
.orb-ring.r3{inset:-8%;border-color:rgba(56,189,248,.15);animation-duration:22s}
.orb.thinking .orb-core{animation:breath .9s ease-in-out infinite}
.orb.thinking .orb-ring{animation-duration:2s}
.orb.listening .orb-core{background:radial-gradient(circle at 35% 35%,#d1fae5 0%,var(--ok) 40%,#065f46 100%);box-shadow:0 0 40px rgba(52,211,153,.6)}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- chat --- */
.chat{flex:1;overflow-y:auto;padding:12px 12px 8px;scroll-behavior:smooth}
.hero{text-align:center;padding:14px 0 6px;max-width:640px;margin:0 auto}
.hero h2{margin:0 0 4px;font-size:24px}
.hero.hidden{display:none}
.widgets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 10px;text-align:left}
.widget{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:90px}
.widget ul{list-style:none;margin:6px 0 0;padding:0;font-size:13px}
.widget li{padding:4px 0;border-top:1px solid var(--line);display:flex;gap:6px;align-items:flex-start}
.widget li:first-child{border-top:0}
.widget li input{margin-top:3px}
.widget li .due{color:var(--muted);font-size:11px;white-space:nowrap}
.w-title{font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.badge{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11px;color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:8px 12px;border-radius:999px;font-size:13px;cursor:pointer}
.messages{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.msg{max-width:88%;padding:10px 14px;border-radius:18px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,#1d4ed8,#4f46e5);border-bottom-right-radius:6px}
.msg.assistant{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.assistant .meta{display:block;margin-top:6px;font-size:11px;color:var(--muted)}
.msg.error{align-self:center;background:#2a1418;border:1px solid #4a1f25;color:#fca5a5;font-size:13px}
.msg p{margin:0 0 6px}.msg p:last-child{margin:0}
.msg ul,.msg ol{margin:4px 0 6px 18px;padding:0}
.msg code{background:#0b1222;padding:1px 5px;border-radius:5px;font-size:13px}
.msg pre{background:#0b1222;padding:8px 10px;border-radius:10px;overflow-x:auto;font-size:13px}
.msg table{border-collapse:collapse;font-size:13px}.msg td,.msg th{border:1px solid var(--line);padding:3px 6px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* --- cards --- */
.card{align-self:stretch;background:var(--panel2);border:1px solid var(--acc2);border-radius:var(--r);padding:12px 14px;font-size:14px}
.card-title{font-weight:700;margin-bottom:8px}
.kv{display:grid;grid-template-columns:64px 1fr;gap:6px;padding:2px 0}.kv.cc:has(span:empty){display:none}
.card pre{white-space:pre-wrap;background:#0b1222;padding:8px 10px;border-radius:10px;margin:8px 0;font:inherit}
.card-actions{display:flex;gap:8px;justify-content:flex-end}
.card.done{opacity:.6;border-color:var(--ok)}

/* --- composer --- */
.composer{position:sticky;bottom:0;background:rgba(7,11,20,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:8px 12px calc(8px + var(--sab))}
.composer form{display:flex;gap:8px;align-items:flex-end;max-width:760px;margin:0 auto}
.composer textarea{flex:1;resize:none;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:14px;padding:10px 14px;font:inherit;max-height:160px;outline:none}
.composer textarea:focus{border-color:var(--acc)}
.icon-btn.send{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04101c;border:0}
.icon-btn.mic.on{background:var(--ok);color:#04101c;animation:breath 1s infinite}
.composer-foot{display:flex;justify-content:space-between;max-width:760px;margin:6px auto 0;font-size:12px;color:var(--muted)}
.switch{display:flex;align-items:center;gap:6px;cursor:pointer}

/* --- login --- */
body.login{align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px 24px;text-align:center}
.login-card h1{margin:6px 0 2px;font-size:22px}
.login-card form{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.login-card input{background:var(--bg2);border:1px solid var(--line);color:var(--txt);padding:12px 14px;border-radius:12px;font:inherit;outline:none}
.login-card input:focus{border-color:var(--acc)}
.password-field{position:relative;display:block}
.password-field input{width:100%;padding-right:48px}
.password-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;padding:6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:16px;line-height:1}
.password-eye:hover{background:var(--bg)}

@media (min-width:900px){
  .top{padding-left:20px}
  .drawer{transform:none;position:sticky;top:0;height:100dvh;inset:auto}
  .scrim{display:none}#btnMenu,#btnCloseDrawer{display:none}
  body{display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"drawer top" "drawer chat" "drawer composer"}
  .top{grid-area:top}.drawer{grid-area:drawer}.chat{grid-area:chat}.composer{grid-area:composer}
}
@media (max-width:420px){.widgets{grid-template-columns:1fr}.orb{width:120px;height:120px}}
@media (orientation:landscape) and (max-height:500px){.orb{width:80px;height:80px;margin:4px auto}.hero h2{font-size:18px}.widgets{margin:8px 0}}

.switches{display:flex;gap:14px;flex-wrap:wrap}
.orb.wake .orb-ring.r3{border-color:rgba(52,211,153,.5);animation-duration:4s}

/* --- Social --- */
.btn.small{padding:6px 10px;font-size:12px;margin-top:8px}
.widget.social li{flex-direction:column;gap:2px}
.widget.social .who{font-weight:600;font-size:12px}.widget.social .txt{color:var(--muted);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.social-pages{display:flex;flex-direction:column;gap:6px;font-size:13px}
.social-pages label{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.social-pages select{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:4px 6px}
[hidden]{display:none!important}
.social-panel{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;padding:12px 14px calc(12px + env(safe-area-inset-bottom));overflow:auto}
.sp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.sp-head strong{flex:1}
.sp-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.chip.on{border-color:var(--acc);color:var(--acc)}
.sp-list{display:flex;flex-direction:column;gap:10px;max-width:760px;width:100%;margin:0 auto}
.sp-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:14px}
.sp-item .meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.sp-item .kind{border:1px solid var(--line);border-radius:999px;padding:0 8px}
.sp-item .quote{margin:6px 0;padding:8px 10px;background:var(--panel2);border-radius:10px;white-space:pre-wrap}
.sp-item .post{font-size:12px;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-item textarea{width:100%;min-height:70px;background:#0b1222;color:var(--txt);border:1px solid var(--acc2);border-radius:10px;padding:8px 10px;font:inherit;resize:vertical;margin-top:6px}
.sp-item .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.sp-item .err{color:#f87171;font-size:12px;margin-top:4px}
.sp-item.sent{opacity:.75;border-color:var(--ok)}

.brand{cursor:pointer}

/* Layout safeguards and accessibility. */
.chat{min-height:0;min-width:0}.composer textarea{min-width:0}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media(max-width:480px){.top{flex-wrap:wrap}.brand{min-width:150px}.provider-switch{margin-left:auto}.composer-foot{flex-wrap:wrap;gap:6px}.widget{min-width:0}.widget li{overflow-wrap:anywhere}.sp-head{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.brand .dot.api{background:var(--acc);box-shadow:none}