@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
:root { --accent:#7c5cfc; --accent-rgb:124,92,252; --bg:#1a1b1e; --bg-obsidian:#1a1b1e; --bg-elevated:#222328; --bg2:rgba(34,35,40,.65); --bg3:rgba(30,31,36,.55); --surface:rgba(255,255,255,0.05); --surface-hover:rgba(255,255,255,0.08); --surface-active:rgba(255,255,255,0.12); --glass:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,.08); --glass-border-h:rgba(255,255,255,.15); --glass-highlight:rgba(255,255,255,.06); --glass-glow:rgba(var(--accent-rgb),.05); --border:rgba(255,255,255,0.08); --border-hover:rgba(255,255,255,0.15); --border-active:rgba(255,255,255,0.22); --text:#d0d3e0; --text-bright:#ecedf2; --text2:#9ca3c0; --text3:#7a7f9a; --text-dim:#7a7f9a; --text-muted:#505570; --radius:16px; --radius-lg:20px; --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom); --font-ui:'Sora',sans-serif; --font-mono:'IBM Plex Mono',monospace; --api-color:#00FF95; --health-color:#FF2D55; --focus-color:#BF94FF; --creative-color:#FF9F0A; --user-purple:#8B5CF6; --gpt:#10a37f; --opus:#a78bfa; --sonnet:#60a5fa; --grok:#f97316; --haiku:#8892a8; --gemini:#4285f4; --hume:#e8846b; --accent-green:#34d399; --accent-gold:#fbbf24; --accent-pink:#f472b6; --accent-cyan:#22d3ee; --accent-lime:#a3e635; --red:#ef4444; --blue:#60a5fa; }

@keyframes checkAnim { 0%{height:0} 100%{height:10px} }
input[type="checkbox"] { appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important; width:25px; height:25px; min-width:25px; border:1px solid var(--glass-border); border-radius:4px; background:rgba(255,255,255,.08); cursor:pointer; position:relative; transition:all .2s ease; flex-shrink:0; margin:0; box-shadow:0 2px 5px rgba(0,0,0,.2); }
input[type="checkbox"]:checked { background:var(--accent) !important; border-color:var(--accent) !important; box-shadow:0 3px 7px rgba(var(--accent-rgb),.3); }
input[type="checkbox"]:checked::after { content:''; position:absolute; left:50%; top:45%; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:translate(-50%,-50%) rotate(45deg); animation:checkAnim .2s forwards; }
input[type="checkbox"]:hover { border-color:rgba(var(--accent-rgb),.5); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.1); }
input[type="radio"] { appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important; width:16px; height:16px; min-width:16px; border:1.5px solid var(--glass-border); border-radius:50%; background:var(--bg2); cursor:pointer; position:relative; transition:all .2s ease; flex-shrink:0; margin:0; }
input[type="radio"]:checked { border-color:var(--accent); background:var(--bg2); }
input[type="radio"]:checked::after { content:''; position:absolute; left:3.5px; top:3.5px; width:7px; height:7px; border-radius:50%; background:var(--accent); }
input[type="radio"]:hover { border-color:rgba(var(--accent-rgb),.5); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.1); }
input[type="range"] { -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:linear-gradient(90deg,rgba(var(--accent-rgb),.3),rgba(var(--accent-rgb),.1)); outline:none; cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--accent),rgba(var(--accent-rgb),.7)); border:2px solid rgba(255,255,255,.15); box-shadow:0 2px 8px rgba(var(--accent-rgb),.3), inset 0 1px 0 rgba(255,255,255,.2); cursor:pointer; transition:all .2s; }
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.15); box-shadow:0 2px 12px rgba(var(--accent-rgb),.5); }
input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,var(--accent),rgba(var(--accent-rgb),.7)); border:2px solid rgba(255,255,255,.15); box-shadow:0 2px 8px rgba(var(--accent-rgb),.3); cursor:pointer; }

html { overscroll-behavior-y: none; }
body { font-family:'Sora',-apple-system,system-ui,sans-serif; background:var(--bg-obsidian); color:var(--text); height:100vh; height:100dvh; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:background-image 1.2s ease; overscroll-behavior-y:none; }
.ptr-indicator { position:fixed; top:0; left:50%; transform:translateX(-50%) translateY(-50px); z-index:9998; display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:0 0 14px 14px; background:rgba(var(--accent-rgb),.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(var(--accent-rgb),.2); border-top:none; transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s; opacity:0; pointer-events:none; font-size:11px; color:var(--accent); font-weight:600; letter-spacing:.3px; }
.ptr-indicator.active { opacity:1; }
.ptr-spinner { width:14px; height:14px; border:2px solid rgba(var(--accent-rgb),.3); border-top:2px solid var(--accent); border-radius:50%; animation:spin .6s linear infinite; }
.ptr-check { color:#4ade80; font-size:14px; }
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--aura-gradient, none); background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(167,139,250,0.07), transparent), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(16,163,127,0.05), transparent), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(96,165,250,0.04), transparent); transition:background-image 1.2s ease; }
body::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 120% 60% at 50% 100%, rgba(26,25,34,.4) 0%, transparent 70%), radial-gradient(ellipse 80% 50% at 0% 50%, rgba(22,21,30,.3) 0%, transparent 60%); }

* { touch-action:manipulation; }
.app { display:flex; height:100vh; height:100dvh; position:relative; z-index:1; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }

/* Icon Rail — always visible */
.icon-rail { width:68px; min-width:68px; background:rgba(26,27,30,.85); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:3px; z-index:10; }
.rail-logo { width:38px; height:38px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; border-radius:12px; transition:all .3s ease; }
.rail-logo:hover { transform:scale(1.1); background:rgba(var(--accent-rgb),.06); }
/* Rail pills — vertical cove-pill-tab inside the rail */
.icon-rail .cove-pill-tab { flex-direction:column; height:auto; width:56px; padding:7px 0 4px; gap:2px; border-radius:12px; font-size:11px; }
.icon-rail .cove-pill-tab .cove-tab-label { display:block !important; font-size:8px; letter-spacing:.3px; opacity:.7; }
.icon-rail .cove-pill-tab.active .cove-tab-label { opacity:1; }
.icon-rail .cove-pill-tab .cove-tab-icon svg { width:18px; height:18px; }
.icon-rail .cove-pill-tab::after { width:40px; height:40px; }
/* Cove avatar pill in rail */
.icon-rail .rail-cove-pill { flex-direction:column; display:flex; align-items:center; justify-content:center; gap:2px; width:56px; padding:6px 0 4px; border-radius:12px; border:none; background:transparent; cursor:pointer; position:relative; font-family:var(--font-ui); color:var(--text3); transition:color .2s, background .2s, box-shadow .2s; white-space:nowrap; }
.icon-rail .rail-cove-pill:hover { background:rgba(255,255,255,.03); color:rgba(255,255,255,.8); }
.icon-rail .rail-cove-pill.active { color:#fff; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); }
.icon-rail .rail-cove-pill .rail-cove-avatar { width:22px; height:22px; border-radius:7px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.icon-rail .rail-cove-pill .rail-cove-label { font-size:8px; letter-spacing:.3px; opacity:.7; }
.icon-rail .rail-cove-pill.active .rail-cove-label { opacity:1; }
/* Legacy rail-icon kept for any remaining uses */
.rail-icon { width:44px; height:44px; border-radius:12px; border:none; background:transparent; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s ease; position:relative; font-family:inherit; }
.rail-icon:hover { background:rgba(120,100,200,.08); color:var(--text); transform:scale(1.08); }
.rail-icon.active { background:rgba(var(--accent-rgb),.12); color:var(--accent); box-shadow:0 0 20px rgba(var(--accent-rgb),.1); transform:scale(1.05); }
.rail-icon.active::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:var(--accent); border-radius:0 2px 2px 0; box-shadow:0 0 8px rgba(var(--accent-rgb),.3); }
/* Tooltips for rail items — always-present with opacity transition to prevent flicker */
.icon-rail [data-tip]::after { content:attr(data-tip); position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(-4px); background:rgba(48,49,64,.95); color:#e8e8f0; font-size:11px; font-weight:500; padding:5px 12px; border-radius:6px; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.35); pointer-events:none; z-index:99999; font-family:var(--font-ui); letter-spacing:.2px; opacity:0; transition:opacity .15s ease-out .1s, transform .15s ease-out .1s; }
.icon-rail [data-tip]:hover::after { opacity:1; transform:translateY(-50%) translateX(0); transition:opacity .12s ease-out, transform .12s ease-out; }
.icon-rail [data-tip]:hover::before { content:''; position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); border:5px solid transparent; border-right-color:rgba(48,49,64,.95); pointer-events:none; z-index:99999; }
/* Cove profile avatar — neumorphic style inspired by Uiverse */
.cove-avatar-btn { width:42px; height:42px; border-radius:14px; border:2px solid rgba(var(--accent-rgb),.12); background:var(--bg3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s ease; position:relative; box-shadow:3px 3px 8px rgba(0,0,0,.18), -2px -2px 6px rgba(255,255,255,.04), inset 0 0 0 1px rgba(var(--accent-rgb),.06), 0 0 8px rgba(var(--accent-rgb),.06); overflow:hidden; }
.cove-avatar-btn:hover { transform:scale(1.08); border-color:rgba(var(--accent-rgb),.25); box-shadow:3px 3px 10px rgba(0,0,0,.22), -2px -2px 6px rgba(255,255,255,.05), inset 0 0 0 1px rgba(var(--accent-rgb),.15), 0 0 16px rgba(var(--accent-rgb),.08); }
.cove-avatar-btn.active { border-color:var(--accent); box-shadow:inset 2px 2px 6px rgba(0,0,0,.2), inset -1px -1px 4px rgba(255,255,255,.03), 0 0 20px rgba(var(--accent-rgb),.12); transform:scale(1.04); }
.cove-avatar-btn.active::before { content:''; position:absolute; left:-2px; top:6px; bottom:6px; width:3px; background:var(--accent); border-radius:0 2px 2px 0; box-shadow:0 0 8px rgba(var(--accent-rgb),.3); }
.cove-avatar-btn img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.cove-avatar-btn svg { color:var(--text2); transition:color .25s; filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.15)); }
.cove-avatar-btn:hover svg { color:var(--text1); }
.cove-avatar-btn.active svg { color:var(--accent); }
/* Profile header avatar (larger) */
.cove-header-avatar { width:42px; height:42px; border-radius:12px; overflow:hidden; flex-shrink:0; cursor:pointer; position:relative; background:var(--bg3); display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(var(--accent-rgb),.12); transition:all .25s; }
.cove-header-avatar:hover { border-color:rgba(var(--accent-rgb),.3); transform:scale(1.06); }
.cove-header-avatar:hover::after { content:'✎'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-size:14px; border-radius:12px; }
.cove-header-avatar img { width:100%; height:100%; object-fit:cover; }
.rail-spacer { flex:1; }

/* === PROFILE SIDEBAR === */
.profile-sidebar { width:220px; min-width:220px; background:var(--bg-elevated); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:10; transition:width .3s ease, min-width .3s ease; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.profile-sidebar::-webkit-scrollbar { display:none; }
.profile-sidebar.collapsed { width:56px; min-width:56px; }
.ps-section-label { font-size:9px; text-transform:uppercase; letter-spacing:2.5px; color:var(--text-muted); padding:14px 16px 6px; font-family:var(--font-ui); font-weight:600; white-space:nowrap; overflow:hidden; }
.profile-sidebar.collapsed .ps-section-label { font-size:0; padding:10px 0; text-align:center; }
.profile-sidebar.collapsed .ps-section-label::after { content:''; display:block; width:32px; height:1px; background:var(--border); margin:0 auto; }
.ps-divider { height:1px; background:var(--border); margin:8px 16px; }
.profile-sidebar.collapsed .ps-divider { margin:8px 16px; }
.ps-item { display:flex; align-items:center; gap:10px; padding:8px 16px; margin:1px 8px; border-radius:10px; cursor:pointer; color:var(--text-dim); transition:all .2s ease; position:relative; border:none; background:none; font-family:var(--font-ui); font-size:13px; font-weight:400; width:calc(100% - 16px); text-align:left; white-space:nowrap; }
.ps-item:hover { background:var(--surface-hover); color:var(--text); }
.ps-item.active { background:var(--surface); color:var(--text-bright); font-weight:500; }
.ps-item.active::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:0 2px 2px 0; }
.ps-item .ps-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ps-item .ps-icon svg { width:18px; height:18px; stroke-width:1.6; }
.ps-item .ps-label { overflow:hidden; text-overflow:ellipsis; }
.profile-sidebar.collapsed .ps-item { justify-content:center; padding:10px 0; margin:1px 4px; width:calc(100% - 8px); }
.profile-sidebar.collapsed .ps-label { display:none; }
.profile-sidebar.collapsed .ps-item[data-tip]::after { content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:rgba(48,49,64,.95); color:#e8e8f0; font-size:11px; font-weight:500; padding:5px 12px; border-radius:6px; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.35); pointer-events:none; z-index:99999; opacity:0; transition:opacity .15s ease-out; }
.profile-sidebar.collapsed .ps-item[data-tip]:hover::after { opacity:1; }
.ps-collapse-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; margin:auto 8px 8px; border-radius:10px; cursor:pointer; color:var(--text3); background:none; border:none; font-family:var(--font-ui); font-size:11px; transition:all .2s; }
.ps-collapse-btn:hover { background:var(--surface-hover); color:var(--text); }
.profile-sidebar.collapsed .ps-collapse-btn { justify-content:center; padding:10px 0; }
.ps-collapse-btn .ps-collapse-label { white-space:nowrap; overflow:hidden; }
.profile-sidebar.collapsed .ps-collapse-btn .ps-collapse-label { display:none; }
/* === Sidebar Accordion === */
.ps-accordion { margin:0 4px; }
.ps-acc-head { display:flex; align-items:center; gap:8px; padding:7px 12px; margin:1px 0; border-radius:9px; cursor:pointer; color:var(--text-dim); border:none; background:none; font-family:var(--font-ui); font-size:13px; font-weight:400; width:100%; text-align:left; transition:all .2s; }
.ps-acc-head:hover { background:var(--surface-hover); color:var(--text); }
.ps-acc-head.open { color:var(--text); }
.ps-acc-chevron { width:12px; height:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s ease; }
.ps-acc-head.open .ps-acc-chevron { transform:rotate(90deg); }
.ps-acc-body { overflow:hidden; max-height:0; opacity:0; transition:max-height .25s ease, opacity .2s ease, padding .2s ease; padding:0 4px; }
.ps-acc-body.open { max-height:800px; opacity:1; padding:2px 4px 6px; }
.ps-acc-item { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:8px; cursor:pointer; font-size:11px; color:var(--text2); border:none; background:none; font-family:var(--font-ui); width:100%; text-align:left; transition:all .15s; overflow:hidden; }
.ps-acc-item:hover { background:var(--surface-hover); color:var(--text); }
.ps-acc-item.active { color:var(--accent); font-weight:500; }
.ps-acc-item .acc-icon { width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; }
.ps-acc-item .acc-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.ps-acc-add { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:8px; cursor:pointer; font-size:10px; color:var(--text3); border:1px dashed var(--border); background:none; font-family:var(--font-ui); width:100%; text-align:left; transition:all .15s; margin-top:2px; }
.ps-acc-add:hover { border-color:rgba(var(--accent-rgb),.3); color:var(--accent); background:rgba(var(--accent-rgb),.04); }
.profile-sidebar.collapsed .ps-accordion { display:none; }
.profile-sidebar.collapsed .ps-acc-body { display:none; }

/* Profile sidebar chat toggle (returns to chat from profile view) */
.ps-chat-btn { display:flex; align-items:center; gap:8px; padding:8px 16px; margin:4px 8px; border-radius:10px; cursor:pointer; color:var(--text-dim); background:none; border:1px dashed var(--border); font-family:var(--font-ui); font-size:12px; transition:all .2s; width:calc(100% - 16px); }
.ps-chat-btn:hover { border-color:var(--border-hover); color:var(--text); background:var(--surface-hover); }
.ps-chat-btn.active { border-color:rgba(var(--accent-rgb),.3); color:var(--accent); background:rgba(var(--accent-rgb),.06); }
.profile-sidebar.collapsed .ps-chat-btn { justify-content:center; padding:10px 0; border:none; margin:1px 4px; width:calc(100% - 8px); }
.profile-sidebar.collapsed .ps-chat-btn span:not(.ps-icon) { display:none; }

/* Profile back bar */
.profile-back-bar { padding:10px 16px 0; }
.profile-back-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px; border:none; background:var(--surface-hover); color:var(--text2); font-family:var(--font-ui); font-size:12px; cursor:pointer; transition:all .15s; }
.profile-back-btn:hover { background:rgba(var(--accent-rgb),.1); color:var(--accent); }

/* Profile header card */
.profile-header-card { padding:16px; border-bottom:1px solid var(--border); }
.profile-header-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.profile-header-avatar { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1.5px solid rgba(255,255,255,.08); }
.profile-header-avatar img { width:100%; height:100%; object-fit:cover; border-radius:13px; }
.profile-header-info { flex:1; min-width:0; }
.profile-header-name { font-size:16px; font-weight:600; color:var(--text-bright); font-family:var(--font-ui); }
.profile-header-sub { font-size:11px; color:var(--text3); font-family:var(--font-ui); margin-top:2px; }
.profile-quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pqa-tile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 0; max-height:80px; background:var(--surface); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s; }
.pqa-tile .pqa-icon svg { width:22px; height:22px; }
.pqa-tile .pqa-label { font-size:10px; }
.pqa-tile:hover { border-color:var(--border-hover); transform:translateY(-1px); }
.pqa-tile .pqa-icon { color:var(--text-dim); transition:color .2s; }
.pqa-tile:hover .pqa-icon { color:var(--text); }

/* Profile content sub-tabs */
.profile-subtabs { display:flex; gap:2px; padding:4px; background:rgba(13,10,25,.7); backdrop-filter:blur(24px); border-radius:18px; border:1px solid rgba(255,255,255,.06); margin:0 16px 12px; overflow-x:auto; scrollbar-width:none; }
.profile-subtabs::-webkit-scrollbar { display:none; }
.profile-subtab { padding:6px 12px; border-radius:12px; font-size:11px; font-weight:500; color:rgba(255,255,255,.4); cursor:pointer; white-space:nowrap; transition:all .2s; border:none; background:none; font-family:var(--font-ui); }
.profile-subtab:hover { background:rgba(255,255,255,.03); color:rgba(255,255,255,.8); }
.profile-subtab.active { color:#fff; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); }
.profile-stub { padding:40px 20px; text-align:center; color:var(--text3); font-size:13px; font-family:var(--font-ui); }
.profile-stub-icon { font-size:32px; margin-bottom:12px; opacity:.3; }

@media(max-width:768px){
  .profile-sidebar { display:none; }
  .profile-sidebar.mobile-open { display:flex; position:fixed; left:0; top:0; bottom:0; z-index:55; width:260px; min-width:260px; box-shadow:12px 0 40px rgba(0,0,0,.5); padding-top:env(safe-area-inset-top); }
  .profile-quick-actions { grid-template-columns:repeat(3,1fr); gap:6px; }
}

/* Side Panel — slides out right of rail */
.panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:45; -webkit-tap-highlight-color:transparent; }
.side-panel { width:0; min-width:0; background:rgba(26,27,30,.92); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; transition:width .3s cubic-bezier(.4,0,.2,1), min-width .3s cubic-bezier(.4,0,.2,1); }
.side-panel.open { width:260px; min-width:260px; }
.panel-head { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:13px; color:var(--text-bright); flex-shrink:0; font-family:var(--font-ui); }
.panel-body { flex:1; overflow-y:auto; padding:6px; }

/* Image gallery thumbs */
.img-thumb { border:1px solid rgba(var(--accent-rgb),.06); background:rgba(var(--accent-rgb),.02); }
.img-thumb:hover { border-color:rgba(var(--accent-rgb),.18); transform:scale(1.03); box-shadow:0 4px 16px rgba(0,0,0,.2); }

/* Persona cards in Personas panel */
.persona-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:6px; transition:border-color .3s; }
.persona-card:hover { border-color:var(--border-hover); }
.persona-card.active-persona { border-color:rgba(var(--accent-rgb),.25); background:rgba(var(--accent-rgb),.04); }
.persona-card-head { padding:10px 12px; display:flex; align-items:center; gap:8px; cursor:pointer; transition:background .15s; }
.persona-card-head:hover { background:rgba(120,100,200,.06); }
.persona-menu-wrap .ib:hover { opacity:1!important; background:rgba(var(--accent-rgb),.1); }
.persona-card-body { padding:0 12px 12px; border-top:1px solid var(--glass-border); }
.persona-card-body .sys-preview { font-size:11px; color:var(--text3); line-height:1.5; margin:8px 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.persona-card-body .persona-actions { display:flex; gap:6px; margin-top:8px; }

/* Sidebar buttons (reused in panels) */
.sb-btn { width:100%; padding:8px 12px; background:none; border:none; color:var(--text2); cursor:pointer; text-align:left; border-radius:var(--radius); font-size:12.5px; display:flex; align-items:center; gap:8px; transition:all .3s; position:relative; font-family:var(--font-ui); }
.sb-btn:hover { background:var(--surface-hover); color:var(--text-bright); }
div:hover > .chat-menu-btn { opacity:1 !important; }
.sb-btn.active { background:var(--surface); color:var(--text-bright); border-left:2px solid var(--text-bright); }
.ib { background:none; border:none; color:var(--text3); cursor:pointer; padding:7px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .2s; }
.ib:hover { color:var(--text2); background:rgba(120,100,200,.08); }

/* Main area */
.main { flex:1; display:flex; flex-direction:column; min-width:0; background:transparent; }
.header { padding:8px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; background:rgba(26,27,30,.85); flex-wrap:wrap; position:relative; z-index:20; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.header::-webkit-scrollbar { display:none; }
.chat-area { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; background:transparent; min-width:0; position:relative; }

/* Messages — ChatGPT-style: no bubble for assistant, glassmorphic pill for user */
.msg-u { align-self:flex-end; background:var(--surface); border:1px solid var(--border); padding:0.8rem 1.4rem; border-radius:22px 22px 4px 22px; max-width:78%; line-height:1.6; font-size:0.95rem; word-break:break-word; color:var(--text-bright); font-family:var(--font-ui); }
.msg-a { align-self:stretch; width:100%; min-width:0; background:none; border:none; padding:0.4rem 0 0.4rem 1rem; border-radius:0; max-width:90%; line-height:1.8; font-size:0.95rem; word-break:break-word; overflow-wrap:anywhere; color:var(--text); font-family:var(--font-ui); -webkit-text-size-adjust:100%; }
.msg-a h1,.msg-a h2,.msg-a h3,.msg-a h4 { color:var(--text); margin:0.6em 0 0.3em; font-weight:600; }
.msg-a h1 { font-size:1.3em; } .msg-a h2 { font-size:1.15em; } .msg-a h3 { font-size:1.05em; }
.msg-a p { margin:0.3em 0; } .msg-a ul,.msg-a ol { margin:0.3em 0; padding-left:1.4em; }
.msg-a li { margin:0.15em 0; } .msg-a code { background:rgba(255,255,255,.06); padding:0.15em 0.4em; border-radius:4px; font-size:0.9em; }
.msg-a pre { background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); border-radius:8px; padding:0.8em 1em; overflow-x:auto; margin:0.5em 0; }
.msg-a pre code { background:none; padding:0; }
.msg-a strong { color:var(--text-bright); } .msg-a em, .msg-u em { font-style:italic; opacity:0.85; } .msg-a em { color:var(--text2); }
.msg-a blockquote { border-left:3px solid rgba(var(--accent-rgb),.4); padding-left:0.8em; margin:0.4em 0; color:var(--text2); }

/* Input bar — the hero piece, gradient glow border */
.input-bar { padding:12px 16px; background:rgba(26,27,30,.85); border-top:1px solid var(--border); display:flex; align-items:flex-end; gap:6px; position:relative; }
.input-wrap { flex:1; position:relative; border-radius:24px; display:flex; align-items:flex-end; }
.input-wrap::before { content:''; position:absolute; inset:-1.5px; border-radius:26px; background:linear-gradient(135deg, rgba(var(--accent-rgb),.25), rgba(180,140,255,.15), rgba(var(--accent-rgb),.2)); opacity:0; transition:opacity .5s ease; pointer-events:none; z-index:0; filter:blur(1px); }
.input-wrap.focused::before { opacity:1; animation:glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{opacity:.6;filter:blur(1px)} 50%{opacity:1;filter:blur(2px)} }
.input-bar textarea.msg-textarea { position:relative; z-index:1; width:100%; padding:11px 40px 11px 16px; background:var(--bg3); border:1px solid var(--glass-border); border-radius:24px; color:var(--text); font-size:13.5px; outline:none; font-family:inherit; transition:border-color .3s, box-shadow .3s, height .1s ease; resize:none; overflow-y:auto; min-height:42px; max-height:200px; line-height:1.4; }
.input-mic { position:absolute; right:8px; bottom:8px; z-index:2; width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.input-mic:hover { color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.input-bar textarea.msg-textarea:focus { border-color:rgba(var(--accent-rgb),.3); }
.input-bar textarea.msg-textarea::placeholder { color:var(--text3); }
.mic-inside { position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:2; width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.mic-inside:hover { color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.mic-inside.recording { color:#ef4444; animation:micPulse 1.5s ease-in-out infinite; }
/* Inline recording waveform — modern glass bar */
.inline-rec { position:absolute; inset:0; z-index:3; display:flex; align-items:center; gap:10px; padding:0 6px 0 14px; background:linear-gradient(135deg, rgba(var(--accent-rgb),.08), var(--bg3)); border-radius:24px; border:1px solid rgba(var(--accent-rgb),.25); box-shadow:0 0 20px rgba(var(--accent-rgb),.08), inset 0 1px 0 var(--glass-highlight); }
.inline-rec canvas { flex:1; height:32px; border-radius:8px; }
.inline-rec-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.5); animation:recBlink 1s infinite; flex-shrink:0; }
.inline-rec-stop { width:28px; height:28px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; background:var(--accent); color:#fff; box-shadow:0 2px 12px rgba(var(--accent-rgb),.35); }
.inline-rec-stop:hover { transform:scale(1.08); box-shadow:0 4px 20px rgba(var(--accent-rgb),.45); }
.inline-rec-cancel { width:22px; height:22px; border-radius:50%; border:1px solid var(--glass-border); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; background:rgba(248,113,113,.06); color:var(--text3); opacity:.6; }
.inline-rec-cancel:hover { opacity:1; background:rgba(248,113,113,.12); color:#f87171; border-color:rgba(248,113,113,.2); }

/* Inline dictation timer */
.inline-rec-timer { font-size:11px; color:var(--accent); font-family:var(--font-ui); font-variant-numeric:tabular-nums; flex-shrink:0; min-width:28px; text-align:center; opacity:.8; }

/* Weather Dashboard Widget */
/* Design-system weather (compact, data-first) */
.wx-ds { padding:4px 0; }
.wx-ds-loc { font-family:var(--font-ui); font-size:9px; text-transform:uppercase; letter-spacing:3.5px; color:var(--text-muted); margin-bottom:10px; }
.wx-ds-hero { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.wx-ds-icon { color:var(--text2); flex-shrink:0; }
.wx-ds-temp { font-family:var(--font-mono); font-size:28px; font-weight:500; color:var(--text-bright); letter-spacing:-0.5px; }
.wx-ds-cond { font-family:var(--font-ui); font-size:13px; color:var(--text-dim); margin-bottom:12px; }
.wx-ds-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.wx-ds-pill { font-family:var(--font-mono); font-size:10px; color:var(--text2); padding:3px 8px; border:1px solid var(--border); border-radius:8px; display:inline-flex; align-items:center; gap:4px; }
.wx-ds-hourly { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-bottom:8px; }
.wx-ds-hourly::-webkit-scrollbar { display:none; }
.wx-ds-hr { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 8px; min-width:48px; border-radius:10px; }
.wx-ds-hr:first-child { background:var(--surface); }
.wx-ds-hr-time { font-family:var(--font-ui); font-size:9px; color:var(--text3); }
.wx-ds-hr-temp { font-family:var(--font-mono); font-size:11px; color:var(--text); }
.weather-dash { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:380px; margin:0 auto 16px; animation:fadeSlideIn .6s ease-out both; }
.weather-hero { grid-column:1/-1; background:transparent; border:none; border-radius:14px; padding:14px 16px; text-align:center; position:relative; overflow:hidden; }
.weather-hero::before { content:''; position:absolute; top:-30%; left:-20%; width:140%; height:100%; background:radial-gradient(ellipse, rgba(var(--accent-rgb),.06) 0%, transparent 70%); pointer-events:none; animation:heroPulse 8s ease-in-out infinite alternate; }
@keyframes heroPulse { 0%{opacity:.6;transform:scale(1)} 100%{opacity:1;transform:scale(1.05)} }
.weather-hero.night { background:transparent; border-color:transparent; }
.weather-hero.night::after { content:''; position:absolute; inset:0; background-image:radial-gradient(1.5px 1.5px at 10% 15%, rgba(200,210,240,.3) 50%, transparent 50%), radial-gradient(1px 1px at 30% 40%, rgba(200,210,240,.2) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 55% 10%, rgba(200,210,240,.25) 50%, transparent 50%), radial-gradient(1px 1px at 70% 30%, rgba(200,210,240,.15) 50%, transparent 50%), radial-gradient(2px 2px at 85% 55%, rgba(200,210,240,.3) 50%, transparent 50%), radial-gradient(1px 1px at 15% 70%, rgba(200,210,240,.12) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 45% 80%, rgba(200,210,240,.2) 50%, transparent 50%), radial-gradient(1px 1px at 90% 75%, rgba(200,210,240,.2) 50%, transparent 50%), radial-gradient(2px 2px at 25% 90%, rgba(220,210,255,.15) 50%, transparent 50%), radial-gradient(1px 1px at 65% 65%, rgba(200,210,240,.12) 50%, transparent 50%), radial-gradient(1.5px 1.5px at 42% 25%, rgba(200,210,240,.18) 50%, transparent 50%), radial-gradient(1px 1px at 78% 85%, rgba(200,210,240,.22) 50%, transparent 50%); animation:starsTwinkle 4s ease-in-out infinite alternate; pointer-events:none; }
@keyframes starsTwinkle { 0%{opacity:.6} 100%{opacity:1} }
.weather-hero.sunset { background:linear-gradient(180deg, rgba(40,20,30,.7) 0%, rgba(60,30,20,.4) 50%, rgba(16,17,30,.72) 100%); }
.weather-hero.sunrise { background:linear-gradient(180deg, rgba(30,20,40,.6) 0%, rgba(60,40,20,.3) 50%, rgba(16,17,30,.72) 100%); }
.weather-hero.rain { background:linear-gradient(180deg, rgba(15,18,30,.85) 0%, rgba(20,25,40,.7) 100%); }
.weather-hero.rain .wh-drops { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.weather-hero.rain .wh-drop { position:absolute; top:-5%; width:1px; height:12px; background:linear-gradient(180deg, transparent, rgba(150,180,230,.2)); animation:heroRainFall 1.5s linear infinite; }
@keyframes heroRainFall { 0%{transform:translateY(-10px);opacity:0} 20%{opacity:1} 100%{transform:translateY(200px);opacity:0} }
.weather-hero.clear-day { background:linear-gradient(180deg, rgba(15,20,40,.6) 0%, rgba(20,25,45,.5) 100%); }
.weather-hero.clear-day .wh-sun-glow { position:absolute; top:-20%; right:-10%; width:160px; height:160px; background:radial-gradient(circle, rgba(255,200,60,.08) 0%, rgba(255,160,40,.03) 40%, transparent 70%); animation:sunGlowPulse 6s ease-in-out infinite alternate; pointer-events:none; }
@keyframes sunGlowPulse { 0%{opacity:.5;transform:scale(1)} 100%{opacity:1;transform:scale(1.1)} }
.weather-hero.snow { background:linear-gradient(180deg, rgba(20,22,35,.8) 0%, rgba(25,28,42,.7) 100%); }
.weather-hero.snow .wh-flakes { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.weather-hero.snow .wh-flake { position:absolute; top:-5%; color:rgba(200,210,240,.2); animation:heroSnowFall 4s linear infinite; }
@keyframes heroSnowFall { 0%{transform:translateY(-10px) rotate(0deg);opacity:0} 15%{opacity:1} 100%{transform:translateY(200px) rotate(360deg);opacity:0} }
/* Overcast/Cloudy floating clouds */
.weather-hero.overcast { background:linear-gradient(180deg, rgba(20,22,35,.8) 0%, rgba(30,32,48,.7) 100%); }
.weather-hero.overcast .wh-clouds { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.weather-hero.overcast .wh-cloud { position:absolute; background:radial-gradient(ellipse, rgba(140,150,180,.08) 0%, transparent 70%); border-radius:50%; }
.weather-hero.overcast .wh-cloud:nth-child(1) { width:180px; height:60px; top:10%; left:-20%; animation:cloudDrift 25s linear infinite; }
.weather-hero.overcast .wh-cloud:nth-child(2) { width:140px; height:50px; top:30%; left:60%; animation:cloudDrift 35s linear infinite reverse; opacity:.6; }
.weather-hero.overcast .wh-cloud:nth-child(3) { width:200px; height:70px; top:55%; left:20%; animation:cloudDrift 30s linear infinite; opacity:.4; }
@keyframes cloudDrift { 0%{transform:translateX(-30%)} 100%{transform:translateX(130%)} }
/* Full moon glow for clear nights */
.weather-hero.night .wh-moon-glow { position:absolute; top:8%; right:12%; width:50px; height:50px; border-radius:50%; background:radial-gradient(circle, rgba(200,210,240,.12) 0%, rgba(180,190,230,.05) 50%, transparent 70%); box-shadow:0 0 40px rgba(200,210,240,.08); animation:moonGlowPulse 5s ease-in-out infinite alternate; pointer-events:none; }
@keyframes moonGlowPulse { 0%{opacity:.5;transform:scale(1)} 100%{opacity:1;transform:scale(1.1)} }
/* Wind drift particles */
.weather-hero.windy .wh-wind-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.weather-hero.windy .wh-wind-line { position:absolute; top:50%; width:30px; height:1px; background:linear-gradient(90deg, transparent, rgba(180,200,230,.15), transparent); animation:windDrift 2s linear infinite; }
@keyframes windDrift { 0%{transform:translateX(-40px);opacity:0} 30%{opacity:1} 100%{transform:translateX(400px);opacity:0} }
/* Sunset/sunrise warm overlay */
.weather-hero.sunset-glow::after { content:''; position:absolute; bottom:0; left:0; right:0; height:60%; background:radial-gradient(ellipse at 50% 100%, rgba(255,140,50,.06) 0%, rgba(255,100,60,.02) 50%, transparent 80%); pointer-events:none; animation:sunsetPulse 6s ease-in-out infinite alternate; }
@keyframes sunsetPulse { 0%{opacity:.4} 100%{opacity:.8} }
/* Environment Engine v1 — Sky State Overlay */
.env-sky { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; transition:background .8s ease; z-index:0; }
.celestial { position:absolute; top:20px; right:20px; width:60px; height:60px; z-index:1; }
.env-sun { width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,210,90,.9) 45%, rgba(255,170,30,.55) 70%, rgba(255,170,30,0) 75%); animation:envSunFloat 6.5s ease-in-out infinite, envGlowPulse 7.5s ease-in-out infinite; }
.env-moon { width:100%; height:100%; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.85), rgba(200,210,255,.55) 55%, rgba(120,140,220,0) 78%); animation:envMoonDrift 7.2s ease-in-out infinite, envGlowPulse 9s ease-in-out infinite; }
.env-stars { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; background-image:radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px), radial-gradient(circle, rgba(255,255,255,.25) 1px, transparent 1px); background-size:120px 120px, 180px 180px; background-position:20px 30px, 60px 90px; animation:envStarDrift 22s linear infinite; }
.env-day { background:linear-gradient(180deg, rgba(135,206,235,.25), rgba(255,255,255,0)); }
.env-morning { background:linear-gradient(180deg, rgba(255,216,168,.35), rgba(255,255,255,0)); }
.env-midday { background:linear-gradient(180deg, rgba(135,206,235,.35), rgba(255,255,255,0)); }
.env-afternoon { background:linear-gradient(180deg, rgba(255,220,140,.25), rgba(255,255,255,0)); }
.env-sunset { background:linear-gradient(180deg, rgba(255,126,95,.45), rgba(254,180,123,.1)); }
.env-night { background:linear-gradient(180deg, rgba(15,23,42,.6), rgba(15,23,42,.02)); }
@keyframes envSunFloat { 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
@keyframes envMoonDrift { 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
@keyframes envGlowPulse { 0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))} 50%{filter:drop-shadow(0 0 10px rgba(255,220,140,.25))} 100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))} }
@keyframes envStarDrift { from{transform:translateY(0)} to{transform:translateY(14px)} }
.weather-hero .temp-big { font-size:38px; font-weight:300; color:#fff; letter-spacing:-2px; line-height:1; }
.weather-hero .temp-unit { font-size:16px; font-weight:300; color:var(--text2); vertical-align:super; }
.weather-hero .weather-desc { font-size:12px; color:var(--text2); margin-top:3px; font-weight:400; }
.weather-hero .weather-hilo { font-size:11px; color:var(--text3); margin-top:2px; }
.weather-hero .weather-sentence { font-size:12px; color:var(--text); margin-top:6px; line-height:1.45; font-weight:300; }
.weather-card { background:rgba(255,255,255,.02); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.04); border-radius:12px; padding:10px 12px; position:relative; overflow:hidden; transition:border-color .3s, box-shadow .3s, transform .3s; }
.weather-card:hover { border-color:rgba(var(--accent-rgb),.2); box-shadow:0 0 24px rgba(var(--accent-rgb),.06), inset 0 0 20px rgba(var(--accent-rgb),.03); transform:translateY(-1px); }
.weather-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
.weather-card::after { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.02), transparent); animation:cardShimmer 8s ease-in-out infinite; pointer-events:none; }
@keyframes cardShimmer { 0%,100%{left:-100%} 50%{left:150%} }
.weather-card .wc-label { font-size:8px; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.weather-card .wc-value { font-size:18px; font-weight:400; color:#fff; }
.weather-card .wc-sub { font-size:9px; color:var(--text3); margin-top:3px; }
.weather-hourly { grid-column:1/-1; background:rgba(20,20,30,.45); backdrop-filter:blur(16px); border:1px solid rgba(120,100,200,.08); border-radius:14px; padding:12px; display:flex; gap:0; overflow-x:auto; position:relative; }
.weather-hourly::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
.weather-hourly::-webkit-scrollbar { height:0; }
.weather-hour { flex:0 0 52px; text-align:center; padding:6px 4px; }
.weather-hour .wh-time { font-size:9px; color:var(--text3); font-weight:500; }
.weather-hour .wh-icon { font-size:16px; margin:4px 0; }
.weather-hour .wh-temp { font-size:12px; color:#fff; font-weight:400; }
.weather-daily { grid-column:1/-1; background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:14px; padding:10px 14px; }
.weather-daily-row { display:flex; align-items:center; padding:6px 0; border-bottom:1px solid rgba(120,100,200,.06); }
.weather-daily-row:last-child { border-bottom:none; }
.weather-daily-row .wd-day { width:42px; font-size:12px; color:var(--text2); font-weight:500; }
.weather-daily-row .wd-icon { width:28px; font-size:15px; text-align:center; }
.weather-daily-row .wd-lo { width:28px; font-size:11px; color:var(--text3); text-align:right; }
.weather-daily-row .wd-bar { flex:1; height:4px; border-radius:2px; background:rgba(120,100,200,.1); margin:0 8px; position:relative; overflow:hidden; }
.weather-daily-row .wd-bar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg, rgba(80,160,255,.6), rgba(var(--accent-rgb),.7)); }
.weather-daily-row .wd-hi { width:28px; font-size:11px; color:#fff; }
.weather-daily-row .wd-rain { width:32px; font-size:9px; color:#60a5fa; text-align:right; }

/* === WEATHER CARD v2 — Immersive 3D illustrated design === */
.wx-card { position:relative; overflow:hidden; border-radius:20px; padding:22px 18px 16px; background:linear-gradient(165deg,#0c1832 0%,#0f1f3d 40%,#0d1a35 100%); border:1px solid rgba(100,140,220,.12); box-shadow:0 4px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04); animation:fadeSlideIn .5s ease-out both; }
.wx-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(120,160,240,.15),transparent); }
.wx-card.wx-clear-day { background:linear-gradient(165deg,#1a2a50 0%,#1e3460 40%,#162445 100%); }
.wx-card.wx-clear-night { background:linear-gradient(165deg,#060c1a 0%,#0a1228 40%,#081020 100%); }
.wx-card.wx-rain,.wx-card.wx-heavy-rain { background:linear-gradient(165deg,#0e1828 0%,#121e35 40%,#0c1525 100%); }
.wx-card.wx-thunder { background:linear-gradient(165deg,#0a0e1c 0%,#121830 40%,#080d18 100%); }
.wx-card.wx-snow { background:linear-gradient(165deg,#141e38 0%,#1a2845 40%,#121a30 100%); }
.wx-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; z-index:0; }
.wx-raindrop { position:absolute; top:-8%; width:1.5px; height:12px; background:linear-gradient(180deg,transparent,rgba(120,170,240,.35)); animation:wxRainFall .8s linear infinite; }
.wx-snowflake { position:absolute; top:-8%; color:rgba(200,215,245,.2); animation:wxSnowFall 3s linear infinite; }
.wx-star-particle { position:absolute; border-radius:50%; background:rgba(200,215,245,.25); animation:starTwinkle 2.5s ease-in-out infinite alternate; }
@keyframes wxRainFall { from{transform:translateY(0)} to{transform:translateY(calc(100vh + 20px))} }
@keyframes wxSnowFall { from{transform:translateY(0) rotate(0deg)} to{transform:translateY(calc(100vh + 20px)) rotate(360deg)} }
.wx-hero { display:flex; align-items:center; gap:14px; position:relative; z-index:1; margin-bottom:14px; }
.wx-hero-icon { flex-shrink:0; }
.wx-hero-info { flex:1; min-width:0; }
.wx-city { font-size:10px; color:rgba(180,200,240,.55); text-transform:uppercase; letter-spacing:1.8px; font-weight:600; margin-bottom:2px; }
.wx-temp-row { display:flex; align-items:flex-start; }
.wx-temp-main { font-size:52px; font-weight:200; color:#fff; letter-spacing:-3px; line-height:.9; }
.wx-temp-unit { font-size:16px; font-weight:300; color:rgba(180,200,240,.5); margin-top:4px; margin-left:2px; }
.wx-desc { font-size:13px; color:rgba(220,230,255,.85); font-weight:500; margin-top:2px; }
.wx-feels { font-size:10px; color:rgba(160,180,220,.5); margin-top:1px; }
.wx-hilo { font-size:10px; color:rgba(160,180,220,.5); margin-top:1px; letter-spacing:.3px; }
.wx-stats { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:1; }
.wx-stat-pill { padding:4px 10px; border-radius:20px; background:rgba(100,140,220,.1); border:1px solid rgba(100,140,220,.12); font-size:10px; color:rgba(180,200,240,.7); backdrop-filter:blur(8px); white-space:nowrap; }
.wx-toggle-row { display:flex; gap:0; margin-bottom:12px; position:relative; z-index:1; background:rgba(100,140,220,.06); border-radius:10px; padding:2px; border:1px solid rgba(100,140,220,.1); }
.wx-toggle-btn { flex:1; padding:6px 0; border:none; border-radius:8px; background:transparent; color:rgba(160,180,220,.5); font-size:11px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; }
.wx-toggle-btn.active { background:rgba(100,140,220,.18); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.wx-hourly-scroll { display:flex; gap:2px; overflow-x:auto; padding-bottom:4px; position:relative; z-index:1; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.wx-hourly-scroll::-webkit-scrollbar { display:none; }
.wx-hourly-item { flex:0 0 52px; text-align:center; padding:8px 4px; border-radius:12px; background:rgba(100,140,220,.06); border:1px solid rgba(100,140,220,.06); transition:background .2s; }
.wx-hourly-item:first-child { background:rgba(100,140,220,.14); border-color:rgba(100,140,220,.15); }
.wx-hourly-time { font-size:9px; color:rgba(160,180,220,.5); font-weight:600; }
.wx-hourly-icon { font-size:16px; margin:4px 0; }
.wx-hourly-temp { font-size:12px; color:#fff; font-weight:500; }
.wx-hourly-precip { font-size:8px; color:#60a5fa; margin-top:1px; }
.wx-weekly { position:relative; z-index:1; }
.wx-weekly-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; }
.wx-weekly-row+.wx-weekly-row { border-top:1px solid rgba(100,140,220,.06); }
.wx-weekly-day { width:38px; color:rgba(180,200,240,.6); font-weight:500; font-size:11px; }
.wx-weekly-icon { width:24px; font-size:14px; text-align:center; flex-shrink:0; }
.wx-weekly-lo { width:28px; text-align:right; color:rgba(140,160,200,.45); font-size:11px; }
.wx-weekly-bar-track { flex:1; height:4px; border-radius:3px; background:rgba(100,140,220,.08); position:relative; overflow:hidden; }
.wx-weekly-bar-fill { position:absolute; top:0; height:100%; border-radius:3px; background:linear-gradient(90deg,rgba(80,150,255,.4),rgba(255,170,80,.4)); }
.wx-weekly-hi { width:28px; color:#fff; font-weight:600; font-size:11px; }
.wx-moon-row { display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(100,140,220,.06); position:relative; z-index:1; }
.wx-moon-label { font-size:10px; color:rgba(160,180,220,.45); }
/* Compact weather widget for chat screen */
.wx-compact { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(100,140,220,.06); border:1px solid rgba(100,140,220,.08); cursor:pointer; transition:all .2s; position:relative; z-index:1; }
.wx-compact:hover { background:rgba(100,140,220,.1); border-color:rgba(100,140,220,.14); }
.wx-compact-icon { font-size:18px; }
.wx-compact-temp { font-size:16px; font-weight:300; color:#fff; }
.wx-compact-city { font-size:9px; color:rgba(160,180,220,.45); }

/* === SLEEP TAB v2 — Immersive dark navy design === */
.sleep-section-title { font-size:9px; color:var(--text-muted); font-weight:700; letter-spacing:3.5px; text-transform:uppercase; margin-bottom:10px; display:flex; align-items:center; gap:8px; font-family:var(--font-ui); }
.sleep-accent-bar { width:3px; height:14px; border-radius:2px; flex-shrink:0; }
.sleep-stage-pill { flex:1; text-align:center; padding:8px 6px; border-radius:10px; background:var(--surface); border:1px solid var(--border); font-size:11px; display:flex; flex-direction:column; gap:2px; }
@keyframes cyclePulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }
.h-cosmic-wrap { contain:layout; }
.sleep-alarm-card { display:flex; align-items:center; gap:10px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-bottom:8px; transition:all .2s; }
.sleep-alarm-card.enabled { background:rgba(129,140,248,.06); border-color:rgba(129,140,248,.12); }
.breathwork-orb { width:100px; height:100px; border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(167,139,250,.25),rgba(129,140,248,.15),rgba(100,140,220,.08)); border:1px solid rgba(167,139,250,.2); cursor:pointer; margin:0 auto; transition:transform 4s ease-in-out,box-shadow 4s ease-in-out; display:flex; align-items:center; justify-content:center; position:relative; }
.breathwork-orb.active { box-shadow:0 0 40px rgba(167,139,250,.2),0 0 80px rgba(129,140,248,.1); }
.breathwork-orb-inner { width:60%; height:60%; border-radius:50%; background:radial-gradient(circle,rgba(167,139,250,.3),rgba(129,140,248,.15)); animation:breathOrbPulse 4s ease-in-out infinite; }
@keyframes breathOrbPulse { 0%,100%{opacity:.4;transform:scale(.9)} 50%{opacity:.8;transform:scale(1.1)} }

/* Energy Curve Card */
.ec-card { background:rgba(10,14,30,.6); border:1px solid rgba(100,140,220,.08); border-radius:16px; overflow:hidden; }
.ec-zone-pill { display:flex; flex-direction:column; gap:1px; padding:5px 10px; border-radius:10px; }
/* Melatonin Window Card */
.mel-card { background:linear-gradient(135deg,rgba(30,20,60,.7),rgba(15,12,35,.8)); border:1px solid rgba(139,92,246,.12); border-radius:16px; padding:14px 16px; transition:all .5s ease; }
.mel-card.mel-approaching { border-color:rgba(167,139,250,.35); box-shadow:0 0 30px rgba(139,92,246,.12),0 0 60px rgba(139,92,246,.05); }
.mel-card.mel-approaching::before { content:''; position:absolute; inset:-1px; border-radius:16px; background:linear-gradient(135deg,rgba(139,92,246,.15),transparent); pointer-events:none; z-index:0; }
/* Recovery Plan Card */
.recovery-card { background:rgba(10,14,30,.5); border:1px solid rgba(74,222,128,.08); border-radius:16px; padding:14px; }

/* Model selector chip in input bar */
.model-chip { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:16px; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.15); color:var(--text2); font-size:10px; cursor:pointer; white-space:nowrap; transition:all .2s; font-family:inherit; }
.model-chip:hover { background:rgba(var(--accent-rgb),.14); color:var(--text); }

/* GPT Persona Switcher */
.gpt-switcher { display:flex; align-items:center; gap:4px; background:none; border:none; color:var(--text); cursor:pointer; font-family:inherit; padding:4px 8px; border-radius:10px; transition:background .2s; }
.gpt-switcher:hover { background:rgba(120,100,200,.08); }
.model-badge { display:flex; align-items:center; gap:3px; background:none; border:1px solid var(--border); color:var(--text-dim); cursor:pointer; font-family:var(--font-mono); font-size:10px; padding:2px 8px; border-radius:10px; transition:all .3s; }
.model-badge:hover { border-color:var(--border-hover); color:var(--text); }
.gpt-dropdown { position:fixed; margin-top:4px; background:rgba(10,11,20,.95); border:1px solid var(--border); border-radius:16px; padding:6px 0; min-width:220px; max-height:min(70vh, 400px); overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.45); animation:fadeSlideIn .15s ease-out; z-index:9998; }
.gpt-drop-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 14px; background:none; border:none; color:var(--text2); cursor:pointer; font-family:inherit; transition:all .15s; border-radius:10px; }
.gpt-drop-item:hover { background:rgba(120,100,200,.1); }
.gpt-drop-item.active { background:rgba(var(--accent-rgb),.1); border-left:none; box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.2); }

/* Badges */
.badge { font-size:10px; background:var(--surface); padding:2px 7px; border-radius:10px; color:var(--text2); border:1px solid var(--border); font-family:var(--font-mono); font-weight:500; letter-spacing:.3px; }

/* Modals — glass treatment */
.modal-bg { position:fixed; inset:0; background:rgba(26,27,30,.75); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:100; animation:modalFadeIn .2s ease-out; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0; }
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }
.modal { background:rgba(10,11,20,.95); border-radius:var(--radius-lg); width:92%; max-width:660px; max-height:88vh; overflow:hidden; border:1px solid var(--border); display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,.5); animation:modalSlideIn .25s ease-out; }
@keyframes modalSlideIn { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--glass-border); }
.modal-head .close-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--glass-border); background:rgba(120,100,200,.06); color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; font-size:14px; font-family:inherit; }
.modal-head .close-btn:hover { background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.2); color:#f87171; }
.modal-body { padding:16px 20px; overflow-y:auto; flex:1; transition:opacity .15s ease; }
.modal-foot { padding:12px 20px; border-top:1px solid var(--glass-border); display:flex; gap:8px; }

/* Form elements */
.fi { width:100%; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:13px; outline:none; font-family:var(--font-ui); transition:border-color .3s; color-scheme:dark; }
input[type="date"].fi, input[type="number"].fi { color-scheme:dark; }
.light input[type="date"].fi, .light input[type="number"].fi { color-scheme:light; }
.fi:focus { border-color:var(--border-hover); }
.ta { width:100%; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:13px; outline:none; min-height:80px; resize:none; overflow:hidden; font-family:var(--font-ui); }
.ta:focus { border-color:rgba(var(--accent-rgb),.35); }
.sel { width:100%; padding:10px 32px 10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:13px; outline:none; font-family:var(--font-ui); -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235a6080' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; transition:border-color .3s; cursor:pointer; }
.sel:hover { border-color:rgba(var(--accent-rgb),.25); }
.sel:focus { border-color:rgba(var(--accent-rgb),.4); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }
.sel option { background:rgba(12,13,20,.95); color:var(--text); padding:8px 12px; }
.sel option:checked { background:rgba(var(--accent-rgb),.25); color:var(--text); }
input[type="text"]::-webkit-outer-spin-button, input[type="text"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Buttons — glass pills */
.btn { padding:9px 20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text-bright); cursor:pointer; font-size:13px; font-weight:600; font-family:var(--font-ui); transition:all .3s; }
.btn:hover { border-color:var(--border-hover); background:var(--surface-hover); }
.btn:active { transform:translateY(0); }
.btn-primary { background:rgba(var(--accent-rgb),.15); border-color:rgba(var(--accent-rgb),.25); color:#fff; }
.btn-primary:hover { background:rgba(var(--accent-rgb),.25); border-color:rgba(var(--accent-rgb),.35); }
.btn-danger { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:#f87171; }
.btn-danger:hover { background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.3); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text2); }
.btn-outline:hover { border-color:var(--border-hover); color:var(--text-bright); background:var(--surface); }
.btn-sm { padding:5px 12px; font-size:11px; border-radius:8px; }
.btn-glass { padding:9px 22px; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text); cursor:pointer; font-size:13px; font-weight:500; font-family:var(--font-ui); transition:all .3s; }
.btn-glass:hover { border-color:var(--border-hover); background:var(--surface-hover); }
.fg { margin-bottom:14px; }
.lb { font-size:10px; color:var(--text-dim); margin-bottom:4px; display:block; letter-spacing:1px; text-transform:uppercase; font-weight:600; font-family:var(--font-ui); }

/* Tabs — equal width, uniform height */
.tabs { display:flex; border-bottom:1px solid var(--border); padding:0; height:42px; }
.tab { flex:1; display:flex; align-items:center; justify-content:center; height:42px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; font-family:var(--font-ui); transition:color .3s; position:relative; outline:none; padding:0 4px; }
.tab.active { color:var(--text-bright); }
.tab.active::after { content:''; position:absolute; bottom:-1px; left:16px; right:16px; height:2px; background:var(--text-bright); border-radius:1px; }
.tab:hover:not(.active) { color:var(--text); }

/* (msg-actions replaced by msg-action-row) */
.section-label { font-size:10px; text-transform:uppercase; color:var(--text-muted); font-weight:600; padding:3px 6px; letter-spacing:2px; font-family:var(--font-ui); }

/* Code */
pre { background:rgba(5,5,8,.55); padding:12px; border-radius:10px; font-size:12px; margin:4px 0; border:1px solid var(--border); overflow:auto; font-family:var(--font-mono); }
code.inline { background:rgba(var(--accent-rgb),.1); padding:1px 6px; border-radius:4px; font-size:12px; color:var(--accent); }

/* Empty state */
.empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; overflow-y:auto; padding:20px 16px; background:transparent; }

/* Loading dots — 3-dot scale bounce */
.dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:dotScale .75s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay:.15s; }
.dot:nth-child(3) { animation-delay:.3s; }
@keyframes dotScale { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(.15);opacity:.3} }
/* Thinking shimmer bar — alternative to dots */
.thinking-shimmer { width:160px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb),.3) 30%, rgba(var(--accent-rgb),.6) 50%, rgba(var(--accent-rgb),.3) 70%, transparent 100%); background-size:200% 100%; animation:shimmerSlide 2s ease-in-out infinite; }
@keyframes shimmerSlide { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes pulse { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes imgGenPulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.img-gen-loading { animation:imgGenPulse 1.5s ease-in-out infinite; font-style:italic; color:var(--text2); }
/* Image gen placeholder + reveal */
.img-gen-placeholder { width:min(400px,100%);aspect-ratio:1;border-radius:14px;background:rgba(var(--accent-rgb),.06);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.img-gen-placeholder span { font-size:13px;color:var(--text3);z-index:1;animation:imgGenPulse 1.5s ease-in-out infinite; }
.img-gen-shimmer { position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(var(--accent-rgb),.08) 50%,transparent 70%);background-size:200% 100%;animation:shimmerSlide 2s ease-in-out infinite; }
@keyframes imgReveal { 0%{filter:blur(20px);opacity:.5;transform:scale(1.02)} 100%{filter:blur(0);opacity:1;transform:scale(1)} }
.img-gen-reveal { animation:imgReveal .6s ease-out forwards; }
@keyframes qdrantPulse { 0%{transform:scale(.8);opacity:0} 20%{transform:scale(1.1);opacity:1} 80%{transform:scale(1);opacity:1} 100%{transform:scale(.8);opacity:0} }
@keyframes qdrantSpin { to{transform:rotate(360deg)} }
.qdrant-indicator { position:fixed;top:8px;right:8px;display:flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;background:rgba(20,20,30,.85);backdrop-filter:blur(12px);border:1px solid rgba(139,92,246,.25);border-radius:20px;font-size:10px;color:#a78bfa;z-index:9999;pointer-events:none;animation:qdrantPulse 2.5s ease-in-out forwards; }
.qdrant-indicator .qdrant-dot { width:8px;height:8px;border:1.5px solid #a78bfa;border-top-color:transparent;border-radius:50%;animation:qdrantSpin .8s linear infinite; }

/* === UIVERSE-INSPIRED ENHANCEMENTS === */

/* 1. Animated Toggle Switch — replaces plain checkboxes for boolean settings */
.cove-toggle { position:relative; width:40px; height:22px; flex-shrink:0; cursor:pointer; }
.cove-toggle input { opacity:0; width:0; height:0; position:absolute; }
.cove-toggle .toggle-track { position:absolute; inset:0; background:var(--bg3); border:1.5px solid var(--glass-border); border-radius:11px; transition:all .35s cubic-bezier(.4,0,.2,1); }
.cove-toggle input:checked + .toggle-track { background:rgba(var(--accent-rgb),.25); border-color:rgba(var(--accent-rgb),.4); box-shadow:0 0 12px rgba(var(--accent-rgb),.15), inset 0 0 8px rgba(var(--accent-rgb),.1); }
.cove-toggle .toggle-thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--text3); transition:all .35s cubic-bezier(.4,0,.2,1); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.cove-toggle input:checked + .toggle-track + .toggle-thumb { left:21px; background:var(--accent); box-shadow:0 0 8px rgba(var(--accent-rgb),.4), 0 2px 4px rgba(0,0,0,.2); }
.cove-toggle:hover .toggle-track { border-color:rgba(var(--accent-rgb),.3); }
.cove-toggle:active .toggle-thumb { width:20px; }
.cove-toggle input:checked + .toggle-track + .toggle-thumb:active, .cove-toggle:active input:checked + .toggle-track + .toggle-thumb { left:17px; width:20px; }

/* 2. Send Button Glow — breathing idle + press squish */
@keyframes sendGlow { 0%,100%{box-shadow:0 2px 10px rgba(var(--accent-rgb),.3)} 50%{box-shadow:0 2px 20px rgba(var(--accent-rgb),.5),0 0 30px rgba(var(--accent-rgb),.15)} }
.send-btn:not(:disabled) { animation:sendGlow 3s ease-in-out infinite; }
.send-btn:not(:disabled):active { transform:scale(.9); animation:none; box-shadow:0 1px 6px rgba(var(--accent-rgb),.5); transition:transform .1s; }

/* 3. Toast Progress Bar + Accent Stripe */
.toast { position:relative; overflow:hidden; }
.toast::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; }
.toast-info::before { background:var(--accent); }
.toast-success::before { background:#22c55e; }
.toast-error::before { background:#ef4444; }
.toast-warning::before { background:#f59e0b; }
.toast::after { content:''; position:absolute; bottom:0; left:0; height:2px; background:rgba(255,255,255,.15); animation:toastProgress var(--toast-dur, 3s) linear forwards; }
@keyframes toastProgress { from{width:100%} to{width:0%} }

/* 4. (replaced by dotScale above) */

/* 5. Card Shimmer on Hover — light sweep effect */
@keyframes cardShimmer { 0%{transform:translateX(-100%) rotate(15deg)} 100%{transform:translateX(200%) rotate(15deg)} }
.card-shimmer { position:relative; overflow:hidden; }
.card-shimmer::after { content:''; position:absolute; top:-50%; left:-50%; width:30%; height:200%; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 60%, transparent 100%); transform:translateX(-100%) rotate(15deg); transition:none; pointer-events:none; }
.card-shimmer:hover::after { animation:cardShimmer .8s ease-out forwards; }

/* 6. Persona Card Lift — subtle 3D hover */
.persona-card { transition:border-color .2s, transform .25s ease, box-shadow .25s ease; }
.persona-card:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.15), 0 0 0 1px rgba(var(--accent-rgb),.08); }
.persona-card.active-persona:hover { box-shadow:0 4px 20px rgba(var(--accent-rgb),.12), 0 0 0 1px rgba(var(--accent-rgb),.2); }

/* 7. Settings Section Labels — subtle gradient underline */
.settings-section-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; font-weight:600; padding-bottom:6px; margin-bottom:10px; border-bottom:1px solid var(--border); font-family:var(--font-ui); }

/* 8. Messages — render instantly, no animation/transition. Text appears as-is during streaming. */
.msg-a, .msg-u { opacity:1; }
.msg-a:hover { /* no visual hover — clean text, no bubble */ }
.msg-u:hover { border-color:var(--border-hover); }


/* 10. Adderall Pill Widget — two-tone capsule (peach + clear with beads) */
.adderall-pill { position:relative; display:inline-flex; align-items:center; width:52px; height:24px; border-radius:12px; cursor:default; flex-shrink:0; }
.adderall-pill .pill-half { position:relative; width:50%; height:100%; overflow:hidden; transition:all .8s ease; }
.adderall-pill .pill-left { border-radius:12px 0 0 12px; background:linear-gradient(135deg,#E8A87C,#d4956a); box-shadow:inset 1px 1px 3px rgba(255,255,255,.15), inset -1px -1px 2px rgba(0,0,0,.15); }
.adderall-pill .pill-right { border-radius:0 12px 12px 0; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.06)); box-shadow:inset 1px 1px 3px rgba(255,255,255,.08), inset -1px -1px 2px rgba(0,0,0,.1); transition:all .8s ease; }
.adderall-pill .pill-right::before { content:''; position:absolute; top:4px; left:3px; right:3px; bottom:4px; border-radius:0 6px 6px 0; background:radial-gradient(circle at 30% 40%, rgba(232,168,124,.7) 1.5px, transparent 1.5px),radial-gradient(circle at 60% 60%, rgba(232,168,124,.6) 1.5px, transparent 1.5px),radial-gradient(circle at 45% 30%, rgba(232,168,124,.5) 1px, transparent 1px),radial-gradient(circle at 70% 45%, rgba(232,168,124,.65) 1px, transparent 1px),radial-gradient(circle at 25% 65%, rgba(232,168,124,.55) 1px, transparent 1px); pointer-events:none; }
.adderall-pill .pill-right::after { content:''; position:absolute; inset:0; border-radius:0 12px 12px 0; opacity:0; transition:opacity .8s ease; pointer-events:none; }
.adderall-pill .pill-seam { position:absolute; left:50%; top:2px; bottom:2px; width:1px; background:rgba(0,0,0,.15); z-index:2; }
.adderall-pill .pill-glow { position:absolute; inset:-3px; border-radius:15px; opacity:0; transition:opacity .8s ease; pointer-events:none; z-index:-1; }
/* Glow intensity states */
.adderall-pill.glow-0 .pill-left { background:linear-gradient(135deg,#9a7a62,#7a6050); }
.adderall-pill.glow-0 .pill-right { background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); }
.adderall-pill.glow-1 .pill-left { background:linear-gradient(135deg,#c4936e,#a87d5c); }
.adderall-pill.glow-1 .pill-glow { opacity:.15; box-shadow:0 0 8px rgba(232,168,124,.3); }
.adderall-pill.glow-2 .pill-left { background:linear-gradient(135deg,#d4a07a,#c08e68); }
.adderall-pill.glow-2 .pill-right::after { opacity:1; background:radial-gradient(ellipse at 60% 50%, rgba(232,168,124,.1) 0%, transparent 70%); }
.adderall-pill.glow-2 .pill-glow { opacity:.3; box-shadow:0 0 12px rgba(232,168,124,.4); }
.adderall-pill.glow-3 .pill-left { background:linear-gradient(135deg,#E8A87C,#d4956a); box-shadow:inset 1px 1px 4px rgba(255,200,160,.15), inset -1px -1px 2px rgba(0,0,0,.1); }
.adderall-pill.glow-3 .pill-right::after { opacity:1; background:radial-gradient(ellipse at 60% 50%, rgba(232,168,124,.15) 0%, transparent 70%); }
.adderall-pill.glow-3 .pill-glow { opacity:.5; box-shadow:0 0 16px rgba(232,168,124,.5), 0 0 32px rgba(212,149,106,.2); }
.adderall-pill.glow-4 .pill-left { background:linear-gradient(135deg,#f0b88e,#E8A87C); box-shadow:inset 1px 1px 5px rgba(255,210,170,.2), inset -1px -1px 2px rgba(0,0,0,.1); }
.adderall-pill.glow-4 .pill-right::after { opacity:1; background:radial-gradient(ellipse at 55% 50%, rgba(232,168,124,.2) 0%, transparent 65%); }
.adderall-pill.glow-4 .pill-glow { opacity:.7; box-shadow:0 0 20px rgba(232,168,124,.6), 0 0 40px rgba(212,149,106,.3); animation:pillPulse 3s ease-in-out infinite; }
.adderall-pill.glow-5 .pill-left { background:linear-gradient(135deg,#f5c8a0,#f0b88e); box-shadow:inset 1px 2px 6px rgba(255,220,180,.25), inset -1px -2px 3px rgba(0,0,0,.05); }
.adderall-pill.glow-5 .pill-right::before { background:radial-gradient(circle at 30% 40%, rgba(232,168,124,.85) 1.5px, transparent 1.5px),radial-gradient(circle at 60% 60%, rgba(232,168,124,.75) 1.5px, transparent 1.5px),radial-gradient(circle at 45% 30%, rgba(232,168,124,.65) 1px, transparent 1px),radial-gradient(circle at 70% 45%, rgba(232,168,124,.8) 1px, transparent 1px),radial-gradient(circle at 25% 65%, rgba(232,168,124,.7) 1px, transparent 1px); }
.adderall-pill.glow-5 .pill-right::after { opacity:1; background:radial-gradient(ellipse at 50% 45%, rgba(232,168,124,.25) 0%, transparent 60%); }
.adderall-pill.glow-5 .pill-glow { opacity:1; box-shadow:0 0 24px rgba(232,168,124,.7), 0 0 48px rgba(212,149,106,.35), 0 0 6px rgba(245,200,160,.4); animation:pillPulse 2.5s ease-in-out infinite; }
@keyframes pillPulse { 0%,100%{opacity:var(--pill-pulse-base,0.7);transform:scale(1)} 50%{opacity:1;transform:scale(1.03)} }
.adderall-pill-sm { width:36px; height:18px; border-radius:9px; }
.adderall-pill-sm .pill-left { border-radius:9px 0 0 9px; }
.adderall-pill-sm .pill-right { border-radius:0 9px 9px 0; }
.adderall-pill-sm .pill-right::before { border-radius:0 6px 6px 0; }
.adderall-pill-sm .pill-right::after { border-radius:0 9px 9px 0; }
.adderall-pill-sm .pill-seam { top:1px; bottom:1px; }
.adderall-pill-sm .pill-glow { inset:-2px; border-radius:11px; }

/* 11. Voice Mode Equalizer Bars — header indicator */
.voice-eq { display:inline-flex; align-items:flex-end; gap:2px; height:16px; padding:0 3px; }
.voice-eq .eq-bar { width:2.5px; border-radius:2px; background:var(--accent); animation:eqPulse 1.2s ease-in-out infinite; }
.voice-eq .eq-bar:nth-child(1) { height:8px; animation-delay:0s; }
.voice-eq .eq-bar:nth-child(2) { height:14px; animation-delay:.2s; }
.voice-eq .eq-bar:nth-child(3) { height:10px; animation-delay:.4s; }
.voice-eq .eq-bar:nth-child(4) { height:12px; animation-delay:.15s; }
@keyframes eqPulse { 0%,100%{transform:scaleY(.4);opacity:.5} 50%{transform:scaleY(1);opacity:1} }

/* 11. Morphing blob background for thinking dots */
@keyframes blobMorph { 0%{border-radius:30% 45% 30% 40%} 25%{border-radius:40% 30% 45% 30%} 50%{border-radius:35% 40% 30% 45%} 75%{border-radius:45% 35% 40% 30%} 100%{border-radius:30% 45% 30% 40%} }
@keyframes blobPulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.1);opacity:1} }
.thinking-blob { position:relative; width:60px; height:30px; display:flex; align-items:center; justify-content:center; gap:5px; }
.thinking-blob::before { content:''; position:absolute; inset:-4px; background:radial-gradient(ellipse at center, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.02)); animation:blobMorph 4s ease-in-out infinite, blobPulse 3s ease-in-out infinite; z-index:0; }

/* Roommate chat loading indicator */
.peer-card { background:var(--bg2);border:1px solid var(--glass-border);border-radius:14px;padding:16px;cursor:pointer;text-align:center;transition:transform .15s ease-out, box-shadow .15s ease-out, border-color .15s ease-out; }
.peer-card:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25);border-color:rgba(var(--accent-rgb),.25); }
.peer-card:active { transform:translateY(0);box-shadow:none; }
.peer-card .pc-avatar { width:48px;height:48px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgb),.08);border:2px solid rgba(var(--accent-rgb),.12);overflow:hidden;transition:border-color .15s ease-out; }
.peer-card:hover .pc-avatar { border-color:rgba(var(--accent-rgb),.3); }
.peer-card .pc-name { font-size:14px;font-weight:700;color:var(--text1); }
.peer-card .pc-model { font-size:10px;color:var(--text3);margin-bottom:4px; }
.peer-card .pc-stats { font-size:10px;color:var(--accent); }
.peer-card .pc-lastchat { font-size:9px;color:var(--text3);margin-top:4px; }
.peer-card .pc-action { display:inline-flex;align-items:center;gap:3px;margin-top:8px;padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;background:rgba(var(--accent-rgb),.1);color:var(--accent);border:none;cursor:pointer;transition:background .12s; }
.peer-card .pc-action:hover { background:rgba(var(--accent-rgb),.18); }
.roommate-loading { display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;animation:fadeSlideIn .4s ease-out; }
.roommate-loading svg { animation:roommateFloat 2s ease-in-out infinite; }
.roommate-loading .rl-text { font-size:12px;color:var(--text2);animation:roommatePulse 2s ease-in-out infinite; }
@keyframes roommateFloat { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(-6px);opacity:1} }
@keyframes roommatePulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* Follow-up suggestion chips */
.followup-chips { display:flex; flex-wrap:wrap; gap:8px; padding:8px 16px 4px; animation:fadeSlideIn .4s ease-out; }
.followup-chip { font-size:12px; font-family:var(--font-ui); padding:7px 14px; border-radius:18px; border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer; transition:all .3s; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.followup-chip:hover { border-color:var(--border-hover); color:var(--text-bright); }
.followup-chip:active { transform:scale(.97); }

/* Auto-complete suggestion bar above input */
.autocomplete-bar { display:flex; gap:6px; padding:4px 12px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; animation:fadeSlideIn .25s ease-out; }
.autocomplete-bar::-webkit-scrollbar { display:none; }
.ac-chip { font-size:11px; font-family:var(--font-ui); padding:5px 10px; border-radius:14px; border:1px solid rgba(var(--accent-rgb),.15); background:rgba(var(--accent-rgb),.04); color:var(--text3); cursor:pointer; transition:all .2s; white-space:nowrap; flex-shrink:0; }
.ac-chip:hover { background:rgba(var(--accent-rgb),.1); color:var(--accent); border-color:rgba(var(--accent-rgb),.25); }
.ac-chip .ac-completion { color:var(--accent); font-weight:500; }


/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

/* Memory & KB items */
.mem-item, .kb-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:var(--surface); border-radius:16px; border:1px solid var(--border); margin-bottom:5px; transition:border-color .3s; font-family:var(--font-ui); font-size:12px; }
.kb-item:hover { border-color:var(--border-hover); }
.kb-item .ib[title*="Delete"], .kb-item .ib[onclick*="delete"], .kb-del-btn { color:var(--text3); opacity:.4; transition:all .2s; }
.kb-item:hover .ib[title*="Delete"], .kb-item:hover .ib[onclick*="delete"], .kb-item:hover .kb-del-btn { opacity:.7; }
.kb-item .ib[title*="Delete"]:hover, .kb-item .ib[onclick*="delete"]:hover, .kb-del-btn:hover { opacity:1; color:#f87171; background:rgba(248,113,113,.08); }

/* Images */
.img-preview { max-width:180px; border-radius:12px; margin-bottom:3px; }
.img-gen { max-width:100%; border-radius:12px; margin:4px 0; }

/* Folders */
.folder-head { display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:pointer; font-size:11.5px; color:var(--text2); user-select:none; transition:all .2s; position:relative; border-top:1px solid var(--glass-border); font-weight:500; }
.folder-head:first-child { border-top:none; }
.folder-head:hover { background:rgba(120,100,200,.06); color:var(--text); }
.folder-head .fold-chevron { transition:transform .25s ease; display:inline-flex; }
.folder-menu-wrap { position:relative; z-index:100; }
.folder-menu-wrap .folder-ctx-menu { position:fixed; }
.folder-chats { padding:0 4px 4px 8px; overflow:hidden; transition:max-height .3s ease; }
@keyframes slideDown { from{opacity:0;max-height:0;transform:translateY(-4px)} to{opacity:1;max-height:500px;transform:translateY(0)} }

/* Usage Dashboard — fintech dark dashboard */
.usage-wrap { padding:0 16px; }
.usage-pills { display:flex; gap:4px; margin-bottom:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.usage-pills::-webkit-scrollbar { display:none; }
.usage-pill { flex-shrink:0; padding:6px 14px; font-size:11px; font-weight:600; border-radius:20px; border:1px solid rgba(255,255,255,.06); background:transparent; color:rgba(255,255,255,.4); cursor:pointer; transition:all .2s; white-space:nowrap; font-family:'Sora',var(--font-ui),sans-serif; }
.usage-pill:hover { border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.6); }
.usage-pill.active { border-color:var(--accent); background:var(--accent); color:#000; }
.usage-hero { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:24px; margin-bottom:16px; }
.usage-hero .label { font-size:10px; color:rgba(255,255,255,0.4); letter-spacing:1.2px; text-transform:uppercase; margin-bottom:6px; font-family:'Sora',var(--font-ui),sans-serif; font-weight:500; }
.usage-hero .amount { font-family:'IBM Plex Mono',monospace; font-size:36px; font-weight:700; color:#fff; letter-spacing:-1.5px; }
.usage-hero .trend-up { color:#ef4444; font-size:14px; font-weight:600; }
.usage-hero .trend-down { color:#22c55e; font-size:14px; font-weight:600; }
.usage-hero .subtitle { color:rgba(255,255,255,0.4); font-size:12px; margin-top:4px; }
.usage-providers { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
@media(max-width:560px){ .usage-providers { grid-template-columns:repeat(2,1fr); } }
.usage-prov-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:14px; transition:border-color .2s; }
.usage-prov-card:hover { border-color:rgba(255,255,255,.12); }
.usage-prov-card.zero { opacity:0.35; }
.usage-prov-card .prov-name { font-family:'Sora',sans-serif; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.6); }
.usage-prov-card .prov-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.usage-prov-card .prov-amount { font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; margin:6px 0 2px; color:#fff; }
.usage-prov-card .prov-pct { font-size:11px; color:rgba(255,255,255,0.4); }
.usage-prov-card .prov-rate { font-size:9px; color:rgba(255,255,255,0.25); margin-top:2px; font-family:'IBM Plex Mono',monospace; }
.usage-prov-card .prov-admin { font-size:10px; color:rgba(255,255,255,0.3); text-align:right; margin-top:4px; }
.usage-prov-card .prov-admin a { color:rgba(255,255,255,.3); text-decoration:none; transition:color .2s; }
.usage-prov-card .prov-admin a:hover { color:rgba(255,255,255,.5); }
.usage-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.usage-metric { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:14px; }
.usage-metric .val { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; color:#fff; }
.usage-metric .label { font-size:11px; color:rgba(255,255,255,0.4); margin-top:2px; }
.usage-subs { background:rgba(255,255,255,.015); border:1px solid rgba(255,255,255,.04); border-radius:12px; padding:14px 16px; margin-bottom:16px; opacity:.7; }
.usage-subs .subs-label { font-family:'Sora',sans-serif; font-size:9px; color:rgba(255,255,255,.4); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; font-weight:600; }
.usage-subs .sub-row { display:flex; justify-content:space-between; padding:4px 0; font-size:12px; color:rgba(255,255,255,.5); }
.usage-subs .sub-row .mono { font-family:'IBM Plex Mono',monospace; color:rgba(255,255,255,.6); }
.usage-subs .subs-note { font-size:9px; color:rgba(255,255,255,.25); margin-top:8px; font-style:italic; }
.usage-section { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px; margin-bottom:16px; }
.usage-section .section-head { font-family:'Sora',sans-serif; font-size:12px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.usage-section .section-meta { font-size:10px; color:rgba(255,255,255,.3); font-weight:400; }
.usage-chart { display:flex; align-items:flex-end; gap:2px; height:110px; }
.usage-chart .bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; cursor:pointer; transition:opacity .15s; }
.usage-chart .bar:hover { opacity:.8; }
.usage-chart-axis { display:flex; justify-content:space-between; margin-top:8px; font-size:9px; color:rgba(255,255,255,.25); font-family:'IBM Plex Mono',monospace; }
.usage-chart-legend { display:flex; gap:10px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.usage-chart-legend .leg { font-size:9px; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:4px; }
.usage-chart-legend .dot { width:8px; height:8px; border-radius:50%; }
.usage-bk-prov { border-bottom:1px solid rgba(255,255,255,.04); }
.usage-bk-prov:last-child { border-bottom:none; }
.usage-bk-head { display:flex; align-items:center; gap:8px; padding:10px 0; cursor:pointer; transition:background .15s; }
.usage-bk-head:hover { background:rgba(255,255,255,.02); margin:0 -16px; padding:10px 16px; border-radius:8px; }
.usage-bk-arrow { font-size:9px; transition:transform .2s; flex-shrink:0; width:12px; color:rgba(255,255,255,.4); }
.usage-bk-arrow.open { transform:rotate(90deg); }
.usage-bk-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.usage-bk-name { font-family:'Sora',sans-serif; font-size:12px; font-weight:700; letter-spacing:.3px; flex:1; color:rgba(255,255,255,.7); }
.usage-bk-total { font-size:13px; font-weight:700; font-family:'IBM Plex Mono',monospace; }
.usage-bk-pct { font-size:10px; color:rgba(255,255,255,.35); margin-left:6px; min-width:48px; text-align:right; }
.usage-bk-models { padding:2px 0 8px 28px; }
.usage-bk-model { display:flex; align-items:baseline; gap:10px; padding:4px 0; }
.usage-bk-mname { font-size:11px; color:rgba(255,255,255,.45); font-family:'IBM Plex Mono',monospace; min-width:140px; }
.usage-bk-mcost { font-size:11px; font-weight:600; font-family:'IBM Plex Mono',monospace; min-width:54px; }
.usage-bk-mrole { font-size:9px; color:rgba(255,255,255,.25); font-style:italic; }
.usage-credits-bar { height:4px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; margin:8px 0 4px; }
.usage-credits-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#7ae582,#4ade80); }
.usage-refresh { padding:7px 18px; border-radius:12px; font-size:10px; font-weight:600; background:rgba(255,255,255,.03); color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.06); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .2s; font-family:'Sora',var(--font-ui),sans-serif; }
.usage-refresh:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); }

/* Voice */
.voice-pulse { animation:vp 1.5s ease-in-out infinite; }
@keyframes vp { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)} 50%{box-shadow:0 0 0 10px rgba(var(--accent-rgb),0)} }

/* Selection bar */
.sel-bar { padding:6px 12px; background:var(--bg3); border-bottom:1px solid var(--glass-border); display:flex; align-items:center; gap:6px; font-size:11px; }

/* Context menu */
.ctx-menu { position:fixed; background:rgba(10,11,20,.95); border:1px solid var(--border); border-radius:12px; padding:4px 0; z-index:200; min-width:150px; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.ctx-item { padding:8px 16px; font-size:12px; color:var(--text); cursor:pointer; display:flex; align-items:center; gap:8px; transition:background .15s; }
.ctx-item:hover { background:var(--surface-hover); }
.ctx-item.danger { color:#f87171; }

/* Emotion badges */
.emo-badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.emo-badge { font-size:10px; background:rgba(var(--accent-rgb),.08); color:var(--accent); padding:1px 7px; border-radius:10px; border:1px solid rgba(var(--accent-rgb),.15); display:inline-flex; align-items:center; gap:3px; }
.emo-x { background:none; border:none; color:var(--text3); font-size:12px; line-height:1; cursor:pointer; padding:0 1px; opacity:.5; transition:opacity .15s; }
.emo-x:hover { opacity:1; color:var(--accent); }

/* Recording capsule — glass, alive */
.rec-capsule { display:flex; align-items:center; gap:8px; background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.2); border-radius:24px; padding:5px 8px 5px 12px; backdrop-filter:blur(12px); animation:recGlow 2s ease-in-out infinite; }
@keyframes recGlow { 0%,100%{box-shadow:0 0 8px rgba(var(--accent-rgb),.15)} 50%{box-shadow:0 0 20px rgba(var(--accent-rgb),.25), 0 0 40px rgba(var(--accent-rgb),.08)} }
.rec-mic-pulse { display:flex; align-items:center; animation:micPulse 1.5s ease-in-out infinite; }
@keyframes micPulse { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.rec-canvas-modern { border-radius:8px; background:transparent; }
.rec-action-btn { width:28px; height:28px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.rec-confirm { background:rgba(74,222,128,.1); color:#4ade80; border:1px solid rgba(74,222,128,.2); }
.rec-confirm:hover { background:rgba(74,222,128,.2); }
.rec-cancel { background:rgba(248,113,113,.08); color:#f87171; border:1px solid rgba(248,113,113,.15); }
.rec-cancel:hover { background:rgba(248,113,113,.15); }
.rec-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#ef4444; animation:recBlink 1s infinite; }
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Weather-aware ambient backgrounds */
.chat-area.weather-clear-night { background:radial-gradient(ellipse at 50% 0%, rgba(40,50,100,.06) 0%, transparent 60%); }
.chat-area.weather-clear-day { background:radial-gradient(ellipse at 50% 0%, rgba(80,120,200,.04) 0%, transparent 60%); }
.chat-area.weather-cloudy { background:radial-gradient(ellipse at 50% 0%, rgba(80,80,100,.04) 0%, transparent 60%); }
.chat-area.weather-rain { background:radial-gradient(ellipse at 50% 0%, rgba(60,70,120,.06) 0%, transparent 60%); }
.chat-area.weather-snow { background:radial-gradient(ellipse at 50% 0%, rgba(100,110,140,.04) 0%, transparent 60%); }

/* Time-aware orb color shifts */
.orb-glow.time-morning { background:radial-gradient(circle, rgba(255,180,80,.1) 0%, rgba(255,140,50,.03) 50%, transparent 70%); }
.orb-glow.time-afternoon { background:radial-gradient(circle, rgba(var(--accent-rgb),.12) 0%, rgba(var(--accent-rgb),.03) 50%, transparent 70%); }
.orb-glow.time-evening { background:radial-gradient(circle, rgba(255,140,60,.12) 0%, rgba(200,100,50,.04) 50%, transparent 70%); }
.orb-glow.time-night { background:radial-gradient(circle, rgba(80,100,200,.12) 0%, rgba(60,80,160,.04) 50%, transparent 70%); }
.orb-ring.time-morning { border-color:rgba(255,180,80,.15); }
.orb-ring.time-evening { border-color:rgba(255,140,60,.15); }
.orb-ring.time-night { border-color:rgba(80,100,200,.15); }

/* Message action icons — always visible */
.msg-action-row { display:flex; gap:3px; margin-top:2px; opacity:.55; transition:opacity .2s; }
.msg-action-row:hover { opacity:1; }
div:hover > .msg-action-row { opacity:.75; }
.msg-act { width:24px; height:24px; border-radius:6px; border:none; background:transparent; color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.msg-act:hover { background:rgba(var(--accent-rgb),.12); color:var(--accent); }

/* Reactions */
.msg-reactions { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.msg-reaction { display:inline-flex; align-items:center; gap:2px; padding:2px 6px; border-radius:10px; font-size:12px; cursor:pointer; border:1px solid var(--border); background:var(--surface); transition:all .3s; user-select:none; -webkit-user-select:none; }
.msg-reaction:hover { border-color:var(--border-hover); }
.msg-reaction.mine { background:var(--surface-hover); border-color:var(--border-hover); }
.msg-reaction-count { font-size:10px; color:var(--text3); }
.react-picker { display:none; position:absolute; bottom:100%; left:0; padding:4px 6px; border-radius:20px; background:rgba(10,11,20,.95); border:1px solid var(--border); box-shadow:0 4px 20px rgba(0,0,0,.4); z-index:100; gap:2px; }
.react-picker.show { display:flex; }
.react-picker button { width:30px; height:30px; border:none; background:transparent; border-radius:8px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.react-picker button:hover { background:rgba(var(--accent-rgb),.15); transform:scale(1.2); }

/* Status bar */
.status-bar { padding:4px 16px; background:rgba(26,27,30,.85); border-top:1px solid var(--border); font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:6px; font-family:var(--font-mono); }

/* Hint */
.hint { font-size:10px; color:var(--text3); margin-top:2px; }

/* Context bar (ambient) */
.context-bar { padding:5px 16px; background:rgba(26,27,30,.7); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; font-size:10.5px; color:var(--text-dim); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; flex-shrink:0; font-family:var(--font-mono); }
.context-bar::-webkit-scrollbar { display:none; }
.context-bar .ctx-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:8px; background:transparent; border:1px solid rgba(120,100,200,.08); font-size:10px; transition:background .2s; }
.context-bar .ctx-chip:hover { background:rgba(120,100,200,.06); }

/* Gap divider */
.gap-divider { text-align:center; padding:6px 0; font-size:10px; color:var(--text3); position:relative; }
.gap-divider::before { content:''; position:absolute; top:50%; left:15%; right:15%; height:1px; background:var(--glass-border); }
.gap-divider span { position:relative; background:var(--bg); padding:0 10px; }

/* Animated orb for empty state */
.orb-container { position:relative; width:120px; height:120px; min-height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; transition:all .8s cubic-bezier(.23,1,.32,1); opacity:1; }
.orb-container:hover { transform:scale(1.05); }
.orb-container.voice-active { width:180px; height:180px; transform:scale(1.2); filter:drop-shadow(0 0 80px rgba(var(--accent-rgb),.5)) drop-shadow(0 0 120px rgba(var(--accent-rgb),.2)); animation:orbBreathe 4s ease-in-out infinite; }
.orb-container.voice-active .orb-ring { border-color:rgba(var(--accent-rgb),.35); animation-duration:1.5s; }
.orb-container.voice-active .orb-glow { opacity:1; inset:-30px; background:radial-gradient(circle, rgba(var(--accent-rgb),.3) 0%, rgba(var(--accent-rgb),.1) 40%, transparent 70%); }
.orb-container.voice-active .orb-plasma { animation-duration:4s; opacity:.8; }
@keyframes orbBreathe { 0%,100%{transform:scale(1.2);filter:drop-shadow(0 0 80px rgba(var(--accent-rgb),.5)) drop-shadow(0 0 120px rgba(var(--accent-rgb),.2))} 50%{transform:scale(1.25);filter:drop-shadow(0 0 100px rgba(var(--accent-rgb),.6)) drop-shadow(0 0 160px rgba(var(--accent-rgb),.3))} }
.orb-container.voice-active .orb-plasma { opacity:.8; animation-duration:4s; }
.voice-stop-btn { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; background:rgba(239,68,68,.15); border:1.5px solid rgba(239,68,68,.4); color:var(--red); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:100; transition:all .2s ease; backdrop-filter:blur(8px); box-shadow:0 4px 20px rgba(239,68,68,.2); }
.voice-stop-btn:hover { background:rgba(239,68,68,.25); border-color:rgba(239,68,68,.6); transform:translateX(-50%) scale(1.08); }
.voice-stop-btn:active { transform:translateX(-50%) scale(.95); }
.orb-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.15); animation:orbBreathe 4s ease-in-out infinite; }
.orb-ring:nth-child(2) { inset:-8px; border-color:rgba(var(--accent-rgb),.08); animation-delay:.5s; }
.orb-ring:nth-child(3) { inset:-16px; border-color:rgba(var(--accent-rgb),.04); animation-delay:1s; }
.orb-glow { position:absolute; inset:-4px; border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb),.18) 0%, rgba(var(--accent-rgb),.06) 50%, transparent 70%); animation:orbBreathe 4s ease-in-out infinite; }
.orb-icon { font-size:44px; animation:orbFloat 3s ease-in-out infinite; filter:drop-shadow(0 0 24px rgba(var(--accent-rgb),.4)); z-index:1; }
@keyframes orbBreathe { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.08);opacity:1} }
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
/* Plasma orb overlay (from Shadow COO) */
.orb-plasma { position:absolute; inset:-15%; border-radius:50%; background:conic-gradient(from 0deg, transparent 0%, rgba(var(--accent-rgb),.18) 15%, transparent 30%, rgba(var(--accent-rgb),.12) 45%, transparent 60%, rgba(var(--accent-rgb),.15) 75%, transparent 90%); filter:blur(10px); animation:orbPlasma 8s linear infinite; opacity:.7; pointer-events:none; }
@keyframes orbPlasma { to{transform:rotate(360deg)} }


/* Quick status pills below greeting */
.status-pills { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; justify-content:center; animation:fadeSlideIn .8s ease-out .3s both; }
.status-pill { padding:4px 10px; border-radius:10px; background:var(--glass); backdrop-filter:blur(8px); border:1px solid var(--glass-border); font-size:10px; color:var(--text2); display:flex; align-items:center; gap:4px; }
.greeting-text { font-family:var(--font-ui); font-weight:300; font-size:16px; letter-spacing:-.3px; line-height:1.55; color:var(--text-bright); animation:fadeSlideIn .8s ease-out both; text-align:center; max-width:340px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .15s; }
.greeting-text:hover { opacity:.75; }
.greeting-text:active { opacity:.55; }
.greeting-sub { color:#6b6d76; font-family:var(--font-ui); font-weight:300; font-size:12px; max-width:440px; text-align:center; letter-spacing:.3px; animation:fadeSlideIn .8s ease-out .2s both; }
.greeting-chips { display:flex; gap:8px; margin-top:14px; animation:fadeSlideIn .8s ease-out .4s both; }
.no-anim .greeting-text, .no-anim .greeting-sub, .no-anim .greeting-chips, .no-anim .weather-dash, .no-anim .orb-container, .no-anim .orb-zone, .no-anim .dash-section, .no-anim .dash-cards { animation:none !important; }
/* === LIVING ORB AVATAR === */
.orb-zone { position:relative; display:flex; flex-direction:column; align-items:center; padding:20px 0 6px; }
.orb-stage { position:relative; width:200px; height:200px; cursor:pointer; animation:orbFloat 4s ease-in-out infinite; }
.orb-stage:active { animation-play-state:paused; transform:scale(0.96); }
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-10px)} 75%{transform:translateY(6px)} }
.orb-body { position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse 100% 100% at 50% 50%, rgba(30,32,38,0.95) 40%, rgba(20,22,28,1) 100%); border:1px solid rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.12); overflow:hidden; transition:border-color 0.8s ease; }
.orb-inner-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:70%; height:58%; border-radius:50%; filter:blur(28px); opacity:0.45; animation:orbGlowPulse 3s ease-in-out infinite; transition:opacity 1.2s ease; background:radial-gradient(ellipse, rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.45), rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.08), transparent); }
@keyframes orbGlowPulse { 0%,100%{opacity:0.35;transform:translate(-50%,-50%) scale(0.92)} 50%{opacity:0.6;transform:translate(-50%,-50%) scale(1.08)} }
.orb-stage.speaking .orb-inner-glow { animation:orbGlowSpeak 1.5s ease-in-out infinite; }
@keyframes orbGlowSpeak { 0%,100%{opacity:0.45;transform:translate(-50%,-50%) scale(0.95)} 50%{opacity:0.85;transform:translate(-50%,-50%) scale(1.18)} }
.orb-voice-ring { position:absolute; inset:-10px; border-radius:50%; border:2px solid transparent; opacity:0; pointer-events:none; transition:opacity 0.5s ease; }
.orb-stage.speaking .orb-voice-ring { opacity:1; border-color:rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.25); animation:orbRingPulse 1.2s ease-in-out infinite; }
.orb-voice-ring-outer { position:absolute; inset:-22px; border-radius:50%; border:1px solid transparent; opacity:0; pointer-events:none; }
.orb-stage.speaking .orb-voice-ring-outer { opacity:1; border-color:rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.1); animation:orbRingPulse 1.2s ease-in-out 0.3s infinite; }
@keyframes orbRingPulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.06);opacity:1} }
.orb-eyes { position:absolute; top:50%; left:50%; transform:translate(-50%,-55%); display:flex; gap:26px; align-items:center; z-index:10; transition:gap 0.4s ease; }
.orb-eye { width:18px; height:28px; border-radius:7px; background:#d8f0ff; box-shadow:0 0 8px rgba(100,220,255,0.6), 0 0 20px rgba(100,220,255,0.3), 0 0 40px rgba(100,220,255,0.08); transition: width 0.3s cubic-bezier(0.34,1.56,0.64,1), height 0.3s cubic-bezier(0.34,1.56,0.64,1), border-radius 0.3s ease, transform 0.3s ease, background 0.5s ease, box-shadow 0.5s ease; }
.orb-stage.blinking .orb-eye { height:3px !important; border-radius:3px !important; transition-duration:0.07s !important; }
.orb-mouth { position:absolute; top:50%; left:50%; transform:translate(-50%,20px); width:0; height:0; border-radius:50%; background:rgba(100,220,255,0.15); transition:all 0.4s ease; z-index:10; opacity:0; }
.orb-shadow { width:110px; height:14px; border-radius:50%; background:radial-gradient(ellipse, rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.1), transparent 70%); margin-top:-4px; animation:orbShadowPulse 4s ease-in-out infinite; transition:background 0.8s ease; }
@keyframes orbShadowPulse { 0%,100%{transform:scaleX(1);opacity:0.6} 25%{transform:scaleX(0.85);opacity:0.4} 75%{transform:scaleX(1.1);opacity:0.8} }
.orb-tap { display:none; }
@keyframes orbFadeIn { to { opacity:1; } }

/* Orb emotion states */
.orb-stage.happy .orb-eye { height:10px; width:24px; border-radius:14px 14px 4px 4px; background:#b8f0ff; }
.orb-stage.happy .orb-eyes { gap:20px; }
.orb-stage.amused .orb-eye { height:8px; width:22px; border-radius:12px 12px 4px 4px; background:#c0f0e8; }
.orb-stage.amused .orb-eyes { gap:22px; }
.orb-stage.amused .orb-eye:last-child { width:24px; height:7px; }
.orb-stage.thinking .orb-eye { height:16px; width:16px; border-radius:50%; background:#c0d8f0; box-shadow:0 0 6px rgba(96,165,250,0.4), 0 0 14px rgba(96,165,250,0.15); }
.orb-stage.thinking .orb-eyes { transform:translate(calc(-50% - 4px), calc(-55% - 4px)); }
.orb-stage.concerned .orb-eye { height:20px; width:16px; border-radius:6px; background:#ffd0a0; box-shadow:0 0 6px rgba(255,180,100,0.4), 0 0 14px rgba(255,180,100,0.15); }
.orb-stage.concerned .orb-eye:first-child { height:18px; transform:rotate(-3deg); }
.orb-stage.excited .orb-eye { height:30px; width:24px; border-radius:9px; background:#d0ffea; box-shadow:0 0 14px rgba(52,211,153,0.7), 0 0 30px rgba(52,211,153,0.3); }
.orb-stage.excited .orb-eyes { gap:30px; }
.orb-stage.curious .orb-eye:first-child { width:15px; height:20px; border-radius:6px; }
.orb-stage.curious .orb-eye:last-child { width:24px; height:32px; border-radius:8px; }
.orb-stage.calm .orb-eye { height:12px; width:20px; border-radius:12px 12px 6px 6px; background:#a0d8f0; box-shadow:0 0 6px rgba(100,200,240,0.4), 0 0 14px rgba(100,200,240,0.12); }
.orb-stage.empathetic .orb-eye { height:18px; width:18px; border-radius:50%; background:#f0c0d8; box-shadow:0 0 8px rgba(244,114,182,0.4), 0 0 18px rgba(244,114,182,0.15); }
.orb-stage.empathetic .orb-eyes { gap:22px; }
.orb-stage.sleepy .orb-eye { height:5px; width:20px; border-radius:3px; background:#80b8d0; box-shadow:0 0 4px rgba(80,160,200,0.3); }
.orb-stage.proud .orb-eye { height:12px; width:22px; border-radius:12px 12px 4px 4px; background:#ffe0a0; box-shadow:0 0 10px rgba(251,191,36,0.5), 0 0 24px rgba(251,191,36,0.2); }
.orb-stage.proud .orb-eyes { gap:22px; }
.orb-stage.surprised .orb-eye { width:30px; height:32px; border-radius:50%; box-shadow:0 0 16px rgba(100,235,255,0.9), 0 0 40px rgba(100,235,255,0.4); }
.orb-stage.surprised .orb-eyes { gap:32px; }
.orb-stage.surprised .orb-mouth { width:12px; height:14px; opacity:1; }
.orb-stage.warning .orb-eye { height:24px; width:20px; border-radius:7px; background:#ffc0a0; box-shadow:0 0 10px rgba(239,68,68,0.4), 0 0 22px rgba(239,68,68,0.15); }
.orb-stage.playful .orb-eye { height:22px; width:20px; border-radius:7px; background:#c8f0ff; animation:orbPlayBounce 0.5s ease-in-out infinite alternate; }
.orb-stage.playful .orb-eye:last-child { animation-delay:0.15s; }
@keyframes orbPlayBounce { from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-3px) rotate(2deg)} }
.orb-stage.cozy .orb-eye { height:14px; width:16px; border-radius:50%; background:#ffe0b8; box-shadow:0 0 8px rgba(255,190,120,0.5), 0 0 20px rgba(255,190,120,0.2); }
.orb-stage.cozy .orb-eyes { gap:22px; }
.orb-stage.latenight .orb-eye { height:10px; width:16px; border-radius:50%; background:#a090c0; box-shadow:0 0 6px rgba(167,139,250,0.4), 0 0 14px rgba(167,139,250,0.15); }

/* Dashboard Cards */
.dash-section { width:100%; max-width:680px; margin-top:24px; animation:fadeSlideIn .8s ease-out .5s both; }
.dash-section-title { font-size:13px; font-weight:600; color:var(--text2); margin-bottom:12px; letter-spacing:.3px; }
.dash-cards { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dash-cards::-webkit-scrollbar { display:none; }
.dash-card { flex:0 0 170px; min-height:140px; background:linear-gradient(135deg, rgba(var(--accent-rgb),.08) 0%, rgba(var(--accent-rgb),.02) 100%); border:1px solid rgba(var(--accent-rgb),.12); border-radius:20px; padding:16px; display:flex; flex-direction:column; scroll-snap-align:start; transition:border-color .3s, transform .2s; cursor:default; position:relative; overflow:hidden; }
.dash-card:hover { border-color:rgba(var(--accent-rgb),.25); transform:translateY(-2px); }
.dash-card-label { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.dash-card-value { font-size:28px; font-weight:200; color:#fff; letter-spacing:-1px; line-height:1.1; margin-top:auto; }
.dash-card-sub { font-size:11px; color:var(--text2); margin-top:4px; line-height:1.3; }
.dash-card-icon { width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:8px; }
.dash-card .dash-card-glow { position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%; filter:blur(30px); opacity:.15; pointer-events:none; }
.dash-card-accent { border-color:rgba(var(--accent-rgb),.25); background:linear-gradient(135deg, rgba(var(--accent-rgb),.15) 0%, rgba(var(--accent-rgb),.04) 100%); }
.dash-card-accent .dash-card-glow { opacity:.25; }

/* Quick action chips */
.quick-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; animation:fadeSlideIn .8s ease-out .35s both; }
.quick-chip { background:linear-gradient(135deg, rgba(var(--accent-rgb),.06) 0%, rgba(255,255,255,.03) 100%); border:1px solid rgba(var(--accent-rgb),.1); border-radius:20px; padding:8px 16px; font-size:11.5px; color:var(--text2); cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1); display:flex; align-items:center; gap:6px; font-family:inherit; backdrop-filter:blur(8px); }
.quick-chip:hover { background:linear-gradient(135deg, rgba(var(--accent-rgb),.14) 0%, rgba(var(--accent-rgb),.06) 100%); border-color:rgba(var(--accent-rgb),.25); color:var(--text); transform:translateY(-1px); box-shadow:0 4px 16px rgba(var(--accent-rgb),.1); }
.quick-chip:active { transform:translateY(0); box-shadow:none; }
.quick-chip svg { opacity:.6; transition:opacity .2s; }
.quick-chip:hover svg { opacity:1; }
.weather-mini { display:flex; align-items:center; gap:6px; margin-top:10px; }
.weather-mini-icon { font-size:36px; animation:weatherFloat 3s ease-in-out infinite; filter:drop-shadow(0 4px 12px rgba(255,200,80,.15)); }
.weather-mini-temp { font-size:28px; font-weight:200; color:#fff; letter-spacing:-1px; }
@keyframes weatherFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Weather Orb Animations — ethereal, translucent, ambient */
.weather-orb { overflow:hidden; border-radius:50%; }

/* Clear — (sun elements removed) */

/* Night — Moon + Stars */
.wo-night { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.wo-moon { width:36px; height:36px; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(200,210,240,.15) 0%, rgba(150,160,200,.06) 60%, transparent 100%); box-shadow:inset -8px -4px 0 rgba(100,110,160,.08), 0 0 30px rgba(180,190,230,.06); animation:orbBreathe 5s ease-in-out infinite; }
.wo-star { position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(200,210,240,.2); animation:starTwinkle 3s ease-in-out infinite; }
@keyframes starTwinkle { 0%,100%{opacity:.05;transform:scale(.8)} 50%{opacity:.25;transform:scale(1.2)} }

/* Rain */
.wo-rain { position:absolute; inset:0; }
.wo-cloud { position:absolute; top:15%; left:15%; width:70%; height:30%; border-radius:50%; background:radial-gradient(ellipse, rgba(120,130,160,.1) 0%, transparent 70%); }
.wo-drop { position:absolute; top:-5%; width:1px; height:10px; background:linear-gradient(to bottom, transparent, rgba(120,160,220,.15)); border-radius:0 0 2px 2px; animation:rainFall 1.2s linear infinite; }
@keyframes rainFall { to { transform:translateY(130px); opacity:0; } }

/* Snow */
.wo-snow { position:absolute; inset:0; }
.wo-flake { position:absolute; top:-10%; color:rgba(200,210,230,.15); animation:snowFall 4s linear infinite; }
@keyframes snowFall { to { transform:translateY(140px) rotate(180deg); opacity:0; } }

/* Cloudy */
.wo-cloudy { position:absolute; inset:0; }
.wo-cloud-layer { position:absolute; top:20%; left:-20%; width:140%; height:40%; border-radius:50%; background:radial-gradient(ellipse, rgba(140,150,180,.12) 0%, transparent 70%); animation:cloudDrift 12s ease-in-out infinite alternate; }
@keyframes cloudDrift { 0%{transform:translateX(-8px)} 100%{transform:translateX(8px)} }
@keyframes fogPulse { 0%{opacity:.5} 100%{opacity:1} }

/* Fog */
.wo-fog { position:absolute; inset:0; }
.wo-fog-band { position:absolute; left:-10%; width:120%; height:12px; border-radius:6px; background:rgba(160,170,190,.1); animation:fogDrift 8s ease-in-out infinite alternate; }
@keyframes fogDrift { 0%{transform:translateX(-6px);opacity:.06} 100%{transform:translateX(6px);opacity:.12} }

/* Storm */
.wo-storm { position:absolute; inset:0; }
.wo-lightning { position:absolute; top:40%; left:48%; width:2px; height:20px; background:rgba(200,200,255,.15); animation:lightningFlash 4s ease-in-out infinite; border-radius:1px; }
@keyframes lightningFlash { 0%,90%,100%{opacity:0} 92%{opacity:.3} 94%{opacity:0} 96%{opacity:.2} }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes heartPop { 0%{transform:scale(1);opacity:1} 15%{transform:scale(1.8);opacity:1} 30%{transform:scale(1.2)} 45%{transform:scale(1.5)} 60%{transform:scale(1);opacity:1} 100%{transform:scale(1) translateY(-30px);opacity:0} }
/* Loading skeleton shimmer */
.skel { border-radius:8px; background:linear-gradient(90deg, rgba(var(--accent-rgb),.04) 25%, rgba(var(--accent-rgb),.08) 50%, rgba(var(--accent-rgb),.04) 75%); background-size:200% 100%; animation:skelShimmer 1.8s ease-in-out infinite; }
.skel-line { height:12px; margin-bottom:8px; border-radius:6px; }
.skel-block { height:60px; margin-bottom:10px; border-radius:10px; }
.skel-circle { width:48px; height:48px; border-radius:50%; margin:0 auto 10px; }
@keyframes skelShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.loading-pulse { display:flex; align-items:center; gap:6px; padding:16px; justify-content:center; animation:fadeSlideIn .3s ease-out; }
.loading-pulse .lp-dot { width:6px; height:6px; border-radius:50%; background:rgba(var(--accent-rgb),.4); animation:lpBounce 1.2s ease-in-out infinite; }
.loading-pulse .lp-dot:nth-child(2) { animation-delay:.15s; }
.loading-pulse .lp-dot:nth-child(3) { animation-delay:.3s; }
@keyframes lpBounce { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

/* Location pills & cards */
.loc-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .25s;font-size:11px;color:var(--text);font-family:var(--font-ui)}
.loc-pill:hover{background:rgba(255,255,255,.07);border-color:rgba(167,139,250,.2)}
.loc-pill:active{transform:scale(.97)}
.loc-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;margin:8px 0;animation:locExpand .3s ease-out}
@keyframes locExpand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.loc-traffic-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;margin:8px 0;position:relative}
.loc-traffic-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#22c55e,#a78bfa);position:absolute;left:0;top:0;transition:width .8s ease-out}
.loc-traffic-delay{height:100%;border-radius:2px;background:#f59e0b;position:absolute;top:0;transition:all .8s ease-out}

/* Plus menu */
.plus-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.plus-btn:hover { background:rgba(var(--accent-rgb),.1); border-color:rgba(var(--accent-rgb),.25); color:var(--text); }
.plus-menu { position:fixed; background:var(--bg3); border:1px solid var(--glass-border); border-radius:14px; padding:6px 0; min-width:190px; box-shadow:0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(130,115,220,.1), inset 0 1px 0 var(--glass-highlight); backdrop-filter:blur(28px) saturate(1.5); -webkit-backdrop-filter:blur(28px) saturate(1.5); animation:fadeSlideIn .15s ease-out; z-index:9997; }
.plus-item { width:100%; padding:9px 14px; background:none; border:none; color:var(--text); font-size:12.5px; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background .15s; }
.plus-item:hover { background:rgba(var(--accent-rgb),.08); }
.plus-item svg { color:var(--text2); flex-shrink:0; }
.plus-divider { height:1px; background:var(--glass-border); margin:4px 8px; }

/* Send button */
.send-btn { width:36px; height:36px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; box-shadow:0 2px 10px rgba(var(--accent-rgb),.3); }
.send-btn:hover:not(:disabled) { transform:scale(1.05); box-shadow:0 4px 16px rgba(var(--accent-rgb),.4); }
.send-btn:disabled { opacity:.3; cursor:default; background:var(--bg3); box-shadow:none; }
.voice-mode-btn { width:36px; height:36px; border-radius:50%; border:none; background:var(--glass); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; border:1px solid var(--glass-border); flex-shrink:0; }
.voice-mode-btn:hover { background:rgba(var(--accent-rgb),.1); border-color:rgba(var(--accent-rgb),.25); color:var(--accent); }
.voice-mode-btn.active { background:linear-gradient(135deg,var(--accent),rgba(var(--accent-rgb),.7)); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(var(--accent-rgb),.3); animation:voicePulse 2s ease-in-out infinite; }
@keyframes voicePulse { 0%,100%{box-shadow:0 2px 10px rgba(var(--accent-rgb),.3)} 50%{box-shadow:0 2px 20px rgba(var(--accent-rgb),.5)} }

/* Staged image preview in compose — ChatGPT style */
.staged-img-wrap { display:inline-flex; position:relative; padding:4px; margin:0 0 4px 4px; }
.staged-img-thumb { width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.staged-img-label { display:none; }
.staged-img-remove { width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); background:rgba(0,0,0,.7); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; position:absolute; top:0; right:0; backdrop-filter:blur(4px); }
.staged-img-remove:hover { background:rgba(239,68,68,.8); border-color:transparent; transform:scale(1.1); }
/* Mic button */
.mic-btn { transition:all .2s; }
.mic-btn:hover { color:var(--accent) !important; }

/* Gear animation */
/* gear-icon removed — settings now in icon rail */

/* Toast notifications */
.toast-container { position:fixed; bottom:80px; right:20px; z-index:999; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; padding:10px 16px; border-radius:12px; font-size:12px; font-family:inherit; color:var(--text); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid var(--glass-border); box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 var(--glass-highlight); display:flex; align-items:center; gap:8px; animation:toastIn .3s ease-out both; max-width:360px; line-height:1.4; }
.toast.out { animation:toastOut .25s ease-in both; }
.toast-info { background:rgba(var(--accent-rgb),.2); border-color:rgba(var(--accent-rgb),.3); }
.toast-success { background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.25); }
.toast-error { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.25); color:#fca5a5; }
.toast-warning { background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.2); color:#fde68a; }
@keyframes toastIn { from{opacity:0;transform:translateY(12px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-8px) scale(.95)} }
@media(max-width:768px){
  /* Hide profile sidebar on mobile — use hamburger menu instead */
  .profile-sidebar { display:none; }
  .profile-sidebar.mobile-open { display:flex; position:fixed; left:0; top:0; bottom:0; z-index:60; width:260px; box-shadow:12px 0 40px rgba(0,0,0,.6); }
  .ps-mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:59; }
  .chat-menu-btn { opacity:.4 !important; }
  /* Side panel becomes full-width overlay */
  .side-panel.open { position:fixed; left:0; top:0; bottom:0; z-index:50; width:85vw; max-width:320px; min-width:0; box-shadow:12px 0 40px rgba(0,0,0,.5); padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  .header { padding:6px 12px; gap:6px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .header::-webkit-scrollbar { display:none; }
  .chat-area { padding:12px 10px; }
  .input-bar { padding:8px 10px; }
  .msg-u { max-width:85%; font-size:13px; }
  .msg-a { max-width:95%; font-size:13px; padding-left:0.6rem; }
  .greeting-text { font-size:16px !important; }
  .greeting-sub { font-size:12px !important; }
  .dash-section { margin-top:16px; }
  .weather-dash { grid-template-columns:1fr; max-width:300px; }
  .modal { width:96%; max-height:92vh; }
  .modal-body { padding:14px !important; }
  .gpt-dropdown { max-width:90vw; }
  /* Settings tabs — fill width evenly on mobile */
  .tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; display:flex; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { min-width:auto; padding:6px 12px; font-size:11px; flex:1 1 0; text-align:center; white-space:nowrap; }
  .fi, .sel, .ta { font-size:16px !important; /* prevents iOS zoom on focus */ }
  .kb-item { padding:10px 12px !important; }
  .mem-item { padding:10px 12px !important; }
  .btn-glass { padding:10px 18px; -webkit-tap-highlight-color:transparent; }
  .ib { min-width:36px; min-height:36px; }
  .qdrant-indicator { top:auto; bottom:70px; right:8px; }
  /* Persona menu — use fixed positioning to prevent clipping */
  .persona-menu-dropdown { position:fixed !important; right:12px !important; top:auto !important; z-index:200 !important; }
}
@media(max-width:480px){
  .side-panel.open { width:100vw; max-width:100vw; }
  .header { padding:4px 8px; gap:4px; }
  .gpt-switcher span { font-size:12px !important; }
  .model-badge { font-size:9px !important; padding:2px 6px !important; }
  .badge { font-size:8px !important; padding:1px 5px !important; }
  .chat-area { padding:8px 6px; gap:8px; }
  .msg-u { max-width:90%; padding:8px 12px; font-size:12.5px; }
  .msg-a { max-width:98%; padding:4px 0 4px 0.5rem; font-size:12.5px; }
  .input-bar { padding:6px 8px; gap:4px; }
  .input-bar textarea.msg-textarea { padding:9px 12px; font-size:16px; min-height:38px; border-radius:20px; }
  .voice-mode-btn { width:32px; height:32px; }
  .voice-mode-btn.mic-dictate { width:32px; height:32px; }
  .input-wrap::before { border-radius:22px; }
  .ctx-chip { font-size:8px !important; padding:1px 5px !important; }
  .quick-action { font-size:10px !important; padding:6px 10px !important; }
  .modal { width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:95vh; }
  .modal-bg { align-items:flex-end !important; }
  .modal-head { padding:12px 16px !important; }
  .modal-body { padding:12px !important; max-height:70vh !important; }
  .modal-foot { padding:10px 16px !important; }
  .tabs { gap:0; }
  .tab { font-size:10px; padding:6px 8px; }
  .plus-btn { width:32px; height:32px; }
  .send-btn { width:34px; height:34px; }
  .plus-menu { min-width:160px; }
  .empty { padding:20px 10px !important; }
  .orb-container { width:100px !important; height:100px !important; }
  .orb-stage { width:160px !important; height:160px !important; }
  .orb-eye { width:14px !important; height:22px !important; }
  .orb-eyes { gap:20px !important; }
  .orb-shadow { width:90px !important; }
  .greeting-text { font-size:16px !important; }
  .qdrant-indicator { top:auto; bottom:60px; right:6px; font-size:9px; padding:4px 8px 4px 6px; }
  .persona-card-head { padding:8px 10px; }
  .sb-btn { padding:10px 12px; font-size:12px; min-height:40px; }
  .img-preview { max-width:140px; }
}
/* iOS safe area support */
/* safe-area-inset-bottom handled by .app container */
/* Mobile visual viewport (keyboard-aware) */
@media(max-width:768px){
  body, .app { height:var(--vh, 100dvh); }
}
/* Cove Mind pill tabs — inspired by Uiverse.io/Pradeepsaranbishnoi */
.cove-pill-tabs { display:flex; position:relative; background:rgba(255,255,255,.02); box-shadow:none; padding:4px; border-radius:99px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; gap:2px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border); }
.cove-pill-tabs::-webkit-scrollbar { display:none; }
.cove-pill-tab { display:flex; align-items:center; justify-content:center; gap:5px; height:30px; padding:0 12px; font-size:11px; color:var(--text3); font-weight:500; border-radius:99px; cursor:pointer; transition:color .2s ease; background:none; border:none; white-space:nowrap; flex-shrink:0; font-family:var(--font-ui); position:relative; z-index:2; }
.cove-pill-tab .cove-tab-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cove-pill-tab .cove-tab-icon svg { display:block; transition:opacity .2s ease; }
.cove-pill-tab:hover { color:var(--text2); }
.cove-pill-tab.active { color:var(--creative-color); font-weight:600; }
.cove-pill-glider { position:absolute; display:flex; height:30px; background:rgba(255,159,10,.1); z-index:1; border-radius:99px; transition:left .25s ease-out, width .25s ease-out; top:4px; }
/* Notification dot — pill tab style */
.cove-notif-dot { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; font-size:9px; font-weight:700; border-radius:99px; background:rgba(var(--accent-rgb),.1); color:var(--accent); transition:all .2s ease; margin-left:2px; font-family:var(--font-ui); }
.cove-pill-tab.active .cove-notif-dot { background:var(--accent); color:#fff; }
/* Rail + avatar notification badge — refined pill style */
.cove-badge { position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:99px; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:2; font-family:var(--font-ui); transition:all .2s ease; background:rgba(var(--accent-rgb),.12); color:var(--accent); box-shadow:0 0 0 2px var(--bg2); }
.cove-badge.urgent { background:#ef4444; color:#fff; box-shadow:0 0 0 2px var(--bg2), 0 0 8px rgba(239,68,68,.3); }
@media(max-width:480px){
  .cove-pill-tabs { gap:0; justify-content:stretch; overflow-x:hidden; }
  .cove-pill-tab { padding:0; font-size:10px; height:28px; flex:1 1 0; flex-shrink:1; min-width:0; }
  .cove-pill-tab .cove-tab-label { display:none; }
  .cove-pill-tab .cove-tab-icon svg { width:16px; height:16px; }
  .cove-pill-glider { height:28px; top:4px; }
}

/* === Cove's Mind — Refined Aesthetics === */
.cove-mind-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; background:var(--bg-obsidian); }
.cove-mind-header { padding:16px 20px 12px; flex-shrink:0; position:relative; z-index:2; }
.cove-mind-header::after { display:none; }
.cove-mind-body { flex:1; overflow-y:auto; padding:16px 20px 24px; position:relative; }
.cove-mind-body::before { display:none; }

/* Card styles */
.cm-card { background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:16px; padding:1.25rem; margin-bottom:10px; transition:border-color .2s ease, box-shadow .2s ease; }
.cm-card:hover { border-color:rgba(255,255,255,.12); box-shadow:0 2px 16px rgba(0,0,0,.15); }
.cm-card-sm { background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:12px; padding:12px; margin-bottom:8px; transition:border-color .2s ease; }
.cm-card-sm:hover { border-color:rgba(255,255,255,.12); }

/* Date group header */
.cm-date-group { font-size:11px; color:var(--text3); font-weight:600; padding:6px 0 6px 0; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.cm-date-group::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--glass-border), transparent); }

/* Activity item row */
.cm-activity-row { display:flex; gap:10px; padding:8px 0; align-items:flex-start; border-bottom:1px solid rgba(var(--accent-rgb),.04); }
.cm-activity-row:last-child { border-bottom:none; }
.cm-activity-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:rgba(255,159,10,.06); color:var(--creative-color); flex-shrink:0; margin-top:1px; transition:background .2s, transform .15s; }
.cm-activity-row:hover .cm-activity-icon { background:rgba(255,159,10,.12); transform:scale(1.08); }

/* Empty state */
.qa-collapsed { display:none !important; }
.qa-card:hover { background:rgba(255,255,255,.05) !important; }
.cm-empty { text-align:center; padding:48px 24px; color:var(--text3); }
.cm-empty-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:rgba(var(--accent-rgb),.06); color:var(--accent); margin:0 auto 12px; opacity:.6; }
.cm-empty-text { font-size:13px; line-height:1.5; }

/* Mood pill */
.cm-mood { display:inline-flex; align-items:center; padding:3px 10px; border-radius:99px; font-size:10px; font-weight:600; margin-bottom:10px; letter-spacing:.2px; backdrop-filter:blur(4px); }

/* Section label */
.cm-label { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; font-weight:600; }

/* Notification item */
.cm-notif { display:flex; gap:10px; padding:10px; border-radius:10px; margin-bottom:4px; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.cm-notif:hover { background:rgba(var(--accent-rgb),.06) !important; }
.cm-notif-unread { background:rgba(var(--accent-rgb),.04); border:1px solid rgba(var(--accent-rgb),.1); }
.cm-notif-read { background:transparent; border:1px solid transparent; }
.cm-notif-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:28px; height:28px; border-radius:8px; transition:transform .15s; }
.cm-notif:hover .cm-notif-icon { transform:scale(1.1); }

/* Settings card */
.cm-settings-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:14px; transition:border-color .2s; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.cm-settings-card:hover { border-color:rgba(255,255,255,.12); }
.cm-settings-hdr { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.cm-settings-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:rgba(var(--accent-rgb),.08); }
.cm-settings-card input[type="checkbox"] { width:20px; height:20px; min-width:20px; flex-shrink:0; margin:0; cursor:pointer; }

/* Journal entry */
.cm-journal { position:relative; overflow:hidden; }
.cm-journal::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 2px 2px 0; }
.cm-journal-morning::before { background:linear-gradient(180deg, var(--creative-color), #f97316); }
.cm-journal-afternoon::before { background:linear-gradient(180deg, #60a5fa, var(--focus-color)); }
.cm-journal-evening::before { background:linear-gradient(180deg, var(--focus-color), #7c3aed); }
.cm-journal-manual::before { background:linear-gradient(180deg, var(--creative-color), rgba(255,159,10,.4)); }
.cm-journal-cron::before { background:linear-gradient(180deg, var(--api-color), #22d3ee); }


/* === Cove scanning/loading states === */
.cove-scan-card { display:inline-flex; align-items:center; gap:10px; background:rgba(15,15,25,.92); border:1px solid rgba(16,163,127,.25); border-radius:12px; padding:10px 18px; animation:cove-pulse-border 2.4s ease-in-out infinite; backdrop-filter:blur(8px); }
@keyframes cove-pulse-border { 0%,100%{border-color:rgba(16,163,127,.2);box-shadow:0 0 0 rgba(16,163,127,0)} 50%{border-color:rgba(16,163,127,.55);box-shadow:0 0 12px rgba(16,163,127,.1)} }
.cove-scan-icon { width:20px; height:20px; flex-shrink:0; position:relative; }
.cove-scan-icon svg { width:20px; height:20px; }
.cove-scan-icon .scan-sweep { transform-origin:center; animation:cove-sweep 1.6s linear infinite; }
@keyframes cove-sweep { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.cove-scan-label { font-size:12px; color:rgba(180,220,210,.85); letter-spacing:.4px; font-weight:500; }
.cove-scan-dots::after { content:''; animation:cove-dots 1.4s steps(4,end) infinite; }
@keyframes cove-dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
.cove-scan-shimmer { position:absolute; inset:0; border-radius:12px; overflow:hidden; pointer-events:none; }
.cove-scan-shimmer::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(16,163,127,.06),transparent); animation:cove-shimmer 2.2s ease-in-out infinite; }
@keyframes cove-shimmer { 0%{left:-100%} 100%{left:200%} }
/* Camera variant — scan-line effect */
.cove-scan-card.camera .cove-scan-icon svg { color:rgba(251,191,36,.8); }
.cove-scan-card.camera { border-color:rgba(251,191,36,.25); }
.cove-scan-card.camera .cove-scan-label { color:rgba(251,210,120,.85); }
@keyframes cove-pulse-border-cam { 0%,100%{border-color:rgba(251,191,36,.2)} 50%{border-color:rgba(251,191,36,.5);box-shadow:0 0 10px rgba(251,191,36,.08)} }
.cove-scan-card.camera { animation-name:cove-pulse-border-cam; }
.cove-scan-card.camera .cove-scan-shimmer::after { background:linear-gradient(90deg,transparent,rgba(251,191,36,.06),transparent); }
/* Light mode */

/* Chat area mask gradient for polished scroll */
.chat-area { mask-image:linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 3%, black 97%, transparent 100%); }

/* === GLASS TAB TREATMENT — Cove Mind pill tabs === */
.cove-pill-tabs { background:rgba(13,10,25,.7) !important; backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); border-radius:18px !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; padding:6px !important; gap:4px !important; }
.cove-pill-tab { color:rgba(255,255,255,.4); transition:color .2s, background .2s, box-shadow .2s; border-radius:12px; }
.cove-pill-tab:hover { background:rgba(255,255,255,.03); color:rgba(255,255,255,.8); }
.cove-pill-tab.active { color:#fff !important; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1); }
.cove-pill-tab.active .cove-tab-icon svg { filter:drop-shadow(0 0 8px var(--creative-color)); }
.cove-pill-tab::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; background:radial-gradient(circle, var(--creative-color) 0%, transparent 70%); opacity:0; transition:opacity .3s ease; z-index:-1; pointer-events:none; }
.cove-pill-tab.active::after { opacity:.25; }
.cove-pill-glider { background:transparent !important; }

/* Settings tabs — use accent color instead of creative-color */
#settings-tabs { flex-shrink:0; }
#settings-tabs .cove-pill-tab.active { color:var(--accent) !important; }
#settings-tabs .cove-pill-tab::after { background:radial-gradient(circle, var(--accent) 0%, transparent 70%) !important; }
#settings-tabs .cove-pill-tab.active .cove-tab-icon svg { filter:drop-shadow(0 0 8px var(--accent)) !important; }

/* === GLASSMORPHISM STATUS BADGES === */
.health-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.health-badge::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.health-badge.menstrual { background:rgba(255,45,85,.15); color:#ff6b8a; border-color:rgba(255,45,85,.3); }
.health-badge.menstrual::before { background:#ff6b8a; box-shadow:0 0 8px rgba(255,45,85,.5); }
.health-badge.follicular { background:rgba(34,197,94,.15); color:#4ade80; border-color:rgba(34,197,94,.3); }
.health-badge.follicular::before { background:#4ade80; box-shadow:0 0 8px rgba(34,197,94,.5); }
.health-badge.ovulation { background:rgba(234,179,8,.15); color:#fbbf24; border-color:rgba(234,179,8,.3); }
.health-badge.ovulation::before { background:#fbbf24; box-shadow:0 0 8px rgba(234,179,8,.5); }
.health-badge.luteal { background:rgba(245,158,11,.15); color:#fbbf24; border-color:rgba(245,158,11,.3); }
.health-badge.luteal::before { background:#fbbf24; box-shadow:0 0 8px rgba(245,158,11,.4); }
.health-badge.muted { background:rgba(255,255,255,.05); color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.1); }
.health-badge.muted::before { background:rgba(255,255,255,.3); box-shadow:none; }
.health-badge.sleep-good { background:rgba(34,197,94,.12); color:#4ade80; border-color:rgba(34,197,94,.25); }
.health-badge.sleep-good::before { background:#4ade80; box-shadow:0 0 8px rgba(34,197,94,.4); }
.health-badge.sleep-low { background:rgba(255,45,85,.12); color:#ff6b8a; border-color:rgba(255,45,85,.25); }
.health-badge.sleep-low::before { background:#ff6b8a; box-shadow:0 0 8px rgba(255,45,85,.4); }

/* === UNIFIED ACCORDION (g-acc = general, api-acc = API-specific alias) === */
.g-acc, .api-acc { background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:12px; margin-bottom:8px; overflow:hidden; transition:border-color .3s ease; }
.g-acc.open, .api-acc.open { border-left:2px solid var(--acc-color, var(--accent)); }
.g-acc-head, .api-acc-head { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; user-select:none; -webkit-user-select:none; }
.g-acc-head:active, .api-acc-head:active { background:rgba(255,255,255,.02); }
.api-acc-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.api-acc-dot.on { background:#4ade80; box-shadow:0 0 6px #4ade80; }
.api-acc-dot.off { background:rgba(255,255,255,.2); }
.g-acc-name, .api-acc-name { font-size:12px; font-weight:600; color:var(--text); font-family:var(--font-ui); flex:1; }
.g-acc-badge { font-size:9px; padding:2px 7px; border-radius:8px; background:rgba(var(--accent-rgb),.1); color:var(--accent); font-weight:600; flex-shrink:0; }
.g-acc-chev, .api-acc-chev { width:12px; height:12px; color:var(--text3); transition:transform .3s ease; flex-shrink:0; }
.g-acc.open .g-acc-chev, .api-acc.open .api-acc-chev { transform:rotate(90deg); }
.g-acc-body, .api-acc-body { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s ease; padding:0 14px; opacity:0; }
.g-acc.open .g-acc-body, .api-acc.open .api-acc-body { max-height:600px; padding:0 14px 14px; opacity:1; }
/* Journal accordion — taller max for long entries */
.g-acc.open .g-acc-body.tall { max-height:1200px; }
.g-acc.open .g-acc-body.xtall { max-height:4000px; }

/* === NIGHT MODE — Bedside Clock === */
.night-mode-overlay {
  position:fixed; inset:0; z-index:99999;
  background:#000; color:rgba(255,50,50,0.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  user-select:none; cursor:default;
  transition:opacity .5s ease;
}
.night-mode-overlay.entering { opacity:0; }
.night-mode-overlay.visible { opacity:1; }

.nm-clock {
  font-size:clamp(60px,18vw,120px); font-weight:400;
  color:rgba(255,50,50,0.35); letter-spacing:-2px;
  line-height:1; text-align:center;
  transition:color .3s ease;
}
.nm-clock-separator { animation:nm-blink 2s ease-in-out infinite; }
@keyframes nm-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.nm-seconds {
  font-size:14px; font-weight:400; color:rgba(255,50,50,0.15);
  margin-top:6px; letter-spacing:4px; text-align:center;
}

.nm-alarm-info {
  margin-top:24px; text-align:center;
  font-size:13px; color:rgba(255,50,50,0.2);
}
.nm-alarm-time {
  font-size:16px; color:rgba(255,50,50,0.25);
  margin-bottom:4px; letter-spacing:1px;
}
.nm-alarm-countdown {
  font-size:11px; color:rgba(255,50,50,0.15);
  letter-spacing:2px;
}

/* Controls — hidden by default, shown on tap */
.nm-controls {
  position:fixed; inset:0; z-index:100000;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:40px 20px env(safe-area-inset-bottom,20px);
  pointer-events:none; opacity:0;
  transition:opacity .4s ease;
}
.nm-controls.visible { opacity:1; pointer-events:auto; }

.nm-exit-btn {
  position:fixed; top:max(16px,env(safe-area-inset-top,16px)); right:16px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,50,50,0.08); border:1px solid rgba(255,50,50,0.15);
  color:rgba(255,50,50,0.4); font-size:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:100001;
}
.nm-exit-btn:active { background:rgba(255,50,50,0.15); }

.nm-brightness-wrap {
  width:min(260px,70vw); margin-bottom:30px;
}
.nm-brightness-label {
  font-size:9px; color:rgba(255,50,50,0.2);
  text-align:center; margin-bottom:8px;
  letter-spacing:3px; text-transform:uppercase;
}
.nm-brightness-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background:rgba(255,50,50,0.1); outline:none;
}
.nm-brightness-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:rgba(255,50,50,0.3);
  border:1px solid rgba(255,50,50,0.4); cursor:pointer;
}

/* Alarm ringing state */
.nm-ringing .nm-clock { animation:nm-pulse 1.5s ease-in-out infinite; }
@keyframes nm-pulse { 0%,100%{color:rgba(255,50,50,0.35)} 50%{color:rgba(255,80,60,0.6)} }

.nm-alarm-label {
  font-size:16px; color:rgba(255,100,70,0.5);
  letter-spacing:6px; text-transform:uppercase;
  margin-bottom:16px; animation:nm-pulse-text 1.5s ease-in-out infinite;
}
@keyframes nm-pulse-text { 0%,100%{opacity:1} 50%{opacity:.4} }

.nm-alarm-actions {
  display:flex; gap:16px; margin-top:20px;
}
.nm-alarm-btn {
  padding:14px 28px; border-radius:14px;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  cursor:pointer; border:none; letter-spacing:1px;
  transition:all .2s;
}
.nm-alarm-btn.snooze {
  background:rgba(255,50,50,0.08);
  border:1px solid rgba(255,50,50,0.2);
  color:rgba(255,50,50,0.5);
}
.nm-alarm-btn.snooze:active { background:rgba(255,50,50,0.15); }
.nm-alarm-btn.dismiss {
  background:rgba(255,50,50,0.12);
  border:1px solid rgba(255,50,50,0.25);
  color:rgba(255,80,60,0.6);
}
.nm-alarm-btn.dismiss:active { background:rgba(255,50,50,0.2); }

/* Night mode button in sleep screen */
.nm-enter-btn {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:10px;
  background:rgba(100,100,140,0.08); border:1px solid rgba(100,100,140,0.12);
  color:var(--text2); font-size:11px; font-family:var(--font-ui);
  cursor:pointer; transition:all .2s;
}
.nm-enter-btn:hover { background:rgba(100,100,140,0.14); }

/* === VOICE MODE ORB OVERLAY === */
.voice-orb-overlay {
  position:fixed; top:44px; left:0; right:0; bottom:60px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; z-index:50;
  pointer-events:none; opacity:0; transition:opacity 0.5s ease;
}
.voice-orb-overlay.active { opacity:1; pointer-events:auto; }
.voice-orb-overlay .orb-stage { width:180px; height:180px; }

/* Blur transcript behind voice orb */
.chat-area.voice-blur {
  filter:blur(6px); opacity:0.3;
  transition:filter 0.6s ease, opacity 0.6s ease;
}
.chat-area.voice-blur-peek {
  filter:blur(2px) !important; opacity:0.6 !important;
}

/* Voice utterance text below orb */
.voice-utterance {
  margin-top:20px; text-align:center; max-width:320px;
  font-size:14px; color:var(--text-bright); opacity:0;
  transition:opacity 0.4s; pointer-events:none;
}
.voice-utterance.visible { opacity:1; }

/* Listening indicator bars */
.voice-listen-bars { display:flex; gap:4px; margin-top:16px; opacity:0; transition:opacity 0.3s; }
.voice-listen-bars.active { opacity:1; }
.voice-listen-bar {
  width:3px; height:12px; border-radius:2px;
  background:rgba(var(--orb-r,16),var(--orb-g,163),var(--orb-b,127),0.5);
  animation:vListenPulse 0.8s ease-in-out infinite;
}
.voice-listen-bar:nth-child(2) { animation-delay:0.15s; height:18px; }
.voice-listen-bar:nth-child(3) { animation-delay:0.3s; height:14px; }
.voice-listen-bar:nth-child(4) { animation-delay:0.45s; height:20px; }
.voice-listen-bar:nth-child(5) { animation-delay:0.6s; height:10px; }
@keyframes vListenPulse { 0%,100%{transform:scaleY(0.5);opacity:0.4} 50%{transform:scaleY(1);opacity:1} }

@media(max-width:480px) {
  .voice-orb-overlay .orb-stage { width:160px !important; height:160px !important; }
}

/* Stopwatch widget */
.stopwatch-widget {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 27, 30, 0.95);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 12px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  font-family: var(--font-mono);
  backdrop-filter: blur(8px);
}
.sw-label {
  font-size: 11px;
  color: var(--text3);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sw-time {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: center;
}
.sw-stop-btn {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.sw-stop-btn:hover { background: rgba(239, 68, 68, 0.25); }

/* === Cove Mind grouped tabs (2026-04-08) === */
.cove-tab-groups {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:10px;
}
.cove-tab-group {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  border-radius:12px 12px 0 0;
  border:1px solid rgba(255,255,255,0.08);
  border-bottom:2px solid transparent;
  background:rgba(255,255,255,0.03);
  color:var(--text2,#7a7f9a);
  font-family:var(--font-ui,'Sora',sans-serif);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition:all .18s ease;
}
.cove-tab-group:hover {
  border-color:rgba(255,255,255,0.15);
  color:var(--text,#d0d3e0);
  background:rgba(255,255,255,0.05);
}
.cove-tab-group .cove-tab-icon svg { width:15px; height:15px; }
.cove-tab-group-active {
  background:rgba(167,139,250,0.10);
  border-color:rgba(167,139,250,0.28);
  border-bottom-color:#a78bfa;
  color:#ecedf2;
}
.cove-tab-group-active .cove-tab-icon { color:#a78bfa; }

.cove-sub-pills {
  display:flex;
  gap:5px;
  margin-bottom:12px;
  padding:4px 2px 2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.cove-sub-pills::-webkit-scrollbar { display:none; }
.cove-sub-pill {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:var(--text2,#7a7f9a);
  font-family:var(--font-ui,'Sora',sans-serif);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition:all .18s ease;
}
.cove-sub-pill:hover {
  border-color:rgba(255,255,255,0.15);
  color:var(--text,#d0d3e0);
}
.cove-sub-pill .cove-tab-icon svg { width:12px; height:12px; }
.cove-sub-pill-active {
  background:rgba(167,139,250,0.14);
  border-color:rgba(167,139,250,0.40);
  color:#ecedf2;
}
.cove-sub-pill-active .cove-tab-icon { color:#a78bfa; }

@media (max-width:480px) {
  .cove-tab-group { padding:9px 4px; font-size:10px; gap:4px; }
  .cove-tab-group .cove-tab-label { font-size:9.5px; }
  .cove-sub-pill { padding:5px 10px; font-size:10px; }
}