/* ================= AVEN — liquid glass ================= */
:root {
  --bg-deep:   #060912;
  --panel:     rgba(13, 16, 24, 0.72);
  --card:      #0d1017;
  --card-hi:   #12151d;
  --ink:       #f2f5fb;
  --ink-2:     #aab3c5;
  --ink-3:     #6f7a91;
  --ink-4:     #4e586c;
  --accent:    #8b7cf6;
  --accent-2:  #6f8dff;
  --periwinkle:#8e9ee6;
  --stroke:    rgba(255,255,255,.075);
  --stroke-2:  rgba(255,255,255,.14);
  --stroke-hot:rgba(150,160,255,.45);
  --r-xl: 24px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px;
  --ease: cubic-bezier(.32,.72,0,1);
  --shadow: 0 30px 80px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.4);
  font-size: 15px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  background: var(--bg-deep); color: var(--ink); overflow:hidden; -webkit-font-smoothing:antialiased;
}
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select { font:inherit; color:inherit; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
::selection { background: rgba(139,124,246,.35); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius:8px; }
::-webkit-scrollbar-track { background: transparent; }
:is(button,input,textarea,select,[tabindex]):focus-visible { outline:2px solid rgba(150,165,255,.8); outline-offset:2px; border-radius:6px; }

/* ---------------- atmosphere: navy + diagonal light streaks ---------------- */
.atmosphere { position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 80% at 88% -12%, rgba(58,86,160,.30), transparent 58%),
    radial-gradient(90% 70% at 0% 108%, rgba(60,70,140,.18), transparent 60%),
    linear-gradient(158deg, #0b1020 0%, #070a14 46%, #050710 100%);
}
.streak { position:absolute; border-radius:50%; filter:blur(46px); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(190,210,255,.16), rgba(232,240,255,.40), rgba(180,200,255,.12), transparent);
  transform: rotate(38deg); animation: streakMove 30s var(--ease) infinite alternate; }
.streak-a { width:150vmax; height:15vmin; top:-6vmin; right:-38vmax; opacity:1; }
.streak-b { width:150vmax; height:7vmin;  top:14vmin; right:-46vmax; opacity:.55; animation-duration:38s; animation-delay:-9s; }
.streak-c { width:130vmax; height:9vmin;  bottom:6vmin; left:-52vmax; opacity:.30; animation-duration:44s; animation-delay:-18s; }
.glow { position:absolute; border-radius:50%; filter:blur(90px); }
.glow-tr { width:52vmin; height:52vmin; right:-12vmin; top:-16vmin; background:radial-gradient(circle, rgba(120,150,255,.28), transparent 70%); }
.glow-bl { width:44vmin; height:44vmin; left:-12vmin; bottom:-14vmin; background:radial-gradient(circle, rgba(140,110,255,.20), transparent 70%); }
#particles { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
@keyframes streakMove { from { transform:rotate(38deg) translateX(-3vmax);} to { transform:rotate(38deg) translateX(3vmax);} }

/* ---------------- app window ---------------- */
.window { position:relative; z-index:1; display:flex; overflow:hidden;
  width:min(1500px, calc(100vw - 56px)); height:calc(100vh - 56px); margin:28px auto;
  border-radius:var(--r-xl); border:1px solid var(--stroke-2); box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(18,22,34,.60), rgba(8,11,20,.74));
  backdrop-filter:blur(34px) saturate(1.35); -webkit-backdrop-filter:blur(34px) saturate(1.35); }
.window::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  background:linear-gradient(118deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 82%, rgba(255,255,255,.06) 100%); }

/* ---------------- sidebar ---------------- */
.sidebar { position:relative; z-index:2; display:flex; flex-direction:column; width:268px; flex:0 0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border-right:1px solid var(--stroke); transition:width .38s var(--ease), transform .38s var(--ease); }
.window.collapsed .sidebar { width:76px; }
.window.collapsed :is(.brand-name,.nav-item span,.nav-item kbd,.history,.profile-meta,.pro-badge,#profileMenu) { display:none; }
.window.collapsed .nav-item { justify-content:center; padding-left:0; padding-right:0; }
.window.collapsed .profile { justify-content:center; }
/* the rail is too narrow for the lights and the toggle side by side — stack them */
.window.collapsed .sidebar-top { flex-direction:column; gap:13px; align-items:center; padding-top:15px; }
.window.collapsed .brand { justify-content:center; padding-left:0; padding-right:0; }
.sidebar-top { display:flex; align-items:center; justify-content:space-between; padding:17px 17px 0; }
.traffic { display:flex; gap:8px; }
.dot { width:11.5px; height:11.5px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.red{background:#ff5f57}.yellow{background:#febc2e}.green{background:#28c840}
.collapse-btn svg { width:19px; height:19px; }

.brand { display:flex; align-items:center; gap:12px; padding:26px 20px 20px; }
.brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid var(--stroke-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.mark-glyph { width:15px; height:15px; stroke-width:2.1; }
.brand-name {
  font-family:"Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  font-weight:500;
  font-size:1.02rem;
  letter-spacing:.34em;
  padding-left:.34em;
  line-height:1;
  color:#f3f6ff;
  text-shadow:0 0 18px rgba(178,194,255,.14);
  -webkit-font-smoothing:antialiased;
}
.brand-mark .mark-glyph { width:18px; height:18px; stroke-width:1.35; color:#e8edff; filter:drop-shadow(0 0 7px rgba(145,162,255,.16)); }

.nav { display:flex; flex-direction:column; gap:1px; padding:0 12px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--r-md);
  color:var(--ink-2); font-size:.92rem; transition:background .2s, color .2s; text-align:left; }
.nav-item svg { width:17px; height:17px; flex:0 0 auto; opacity:.9; }
.nav-item:hover { background:rgba(255,255,255,.055); color:var(--ink); }
.nav-item.active { background:rgba(255,255,255,.075); color:var(--ink); box-shadow:inset 0 0 0 1px var(--stroke); }
.nav-item.primary { color:var(--ink); background:rgba(255,255,255,.07); border:1px solid var(--stroke-2); margin-bottom:6px; }
.nav-item.primary:hover { border-color:var(--stroke-hot); box-shadow:0 0 24px rgba(140,150,255,.12); }
.nav-item kbd { margin-left:auto; font:inherit; font-size:.76rem; color:var(--ink-4); letter-spacing:.04em; }

.history { flex:1; overflow-y:auto; padding:22px 12px 8px; }
.history-group { margin-bottom:18px; }
.history-label { font-size:.78rem; color:var(--ink-3); padding:0 10px 8px; }
.history-item { display:flex; align-items:center; gap:10px; width:100%; padding:7px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:.88rem; transition:background .2s, color .2s; text-align:left; }
.history-item svg { width:15px; height:15px; opacity:.55; flex:0 0 auto; }
.history-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-item:hover { background:rgba(255,255,255,.055); color:var(--ink); }
.history-item.active { background:rgba(139,124,246,.14); color:var(--ink); }

.profile { display:flex; align-items:center; gap:10px; padding:14px 16px; }
.avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.82rem; font-weight:600;
  background:linear-gradient(150deg,#4a5578,#262d44); border:1px solid var(--stroke-2); }
.profile-meta { flex:1; min-width:0; }
.profile-name { font-size:.9rem; font-weight:500; }
.pro-badge { font-size:.74rem; font-weight:500; color:#cfc4ff; padding:3px 11px; border-radius:20px;
  background:rgba(139,124,246,.16); border:1px solid rgba(139,124,246,.28); }
.icon-btn.tiny { width:26px; height:26px; }
.icon-btn.tiny svg { width:15px; height:15px; }
#profileMenu { border:1px solid var(--stroke); border-radius:50%; }
.sidebar-scrim { display:none; }

/* ---------------- main + topbar ---------------- */
.main { position:relative; flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:9px; padding:18px 22px 4px; position:relative; z-index:30; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:9px; }
.icon-btn { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--ink-2);
  transition:background .2s, color .2s, transform .12s, border-color .2s; }
.icon-btn:hover { background:rgba(255,255,255,.07); color:var(--ink); }
.icon-btn:active { transform:scale(.93); }
.icon-btn.framed { border:1px solid var(--stroke-2); border-radius:11px; background:rgba(255,255,255,.03); }
.icon-btn.round { border:1px solid var(--stroke-2); border-radius:50%; background:rgba(255,255,255,.03); width:36px; height:36px; }
.icon-btn.round.playing { color:#c7bcff; border-color:rgba(139,124,246,.45); box-shadow:0 0 22px rgba(139,124,246,.22); }
.wave path { stroke-width:1.9; }
.mobile-menu { display:none; }

.model-pill { display:flex; align-items:center; gap:9px; padding:6px 11px; border-radius:11px; font-size:.94rem; font-weight:500;
  color:var(--ink); transition:background .2s; }
.model-pill:hover { background:rgba(255,255,255,.06); }
.pill-glyph { width:17px; height:17px; border-radius:50%; flex:0 0 auto;
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.6), inset 2px 3px 5px rgba(255,255,255,.35); }
.chev { width:14px; height:14px; color:var(--ink-3); transition:transform .25s var(--ease); }
.model-pill[aria-expanded="true"] .chev { transform:rotate(180deg); }

.conn-pill { display:flex; align-items:center; gap:8px; padding:7px 8px 7px 15px; border-radius:12px; font-size:.86rem;
  color:var(--ink-2); border:1px solid var(--stroke-2); background:rgba(255,255,255,.03); transition:border-color .25s, color .25s; }
.conn-pill:hover { border-color:var(--stroke-hot); color:var(--ink); }
.conn-pill.live { color:#a8e9c6; border-color:rgba(90,215,155,.34); background:rgba(60,190,130,.09); }

.model-dropdown { position:absolute; top:60px; left:22px; width:318px; border-radius:var(--r-lg); padding:7px; z-index:60;
  background:rgba(16,19,28,.86); border:1px solid var(--stroke-2); box-shadow:var(--shadow);
  backdrop-filter:blur(28px) saturate(1.3); -webkit-backdrop-filter:blur(28px) saturate(1.3);
  opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none; transform-origin:top left;
  transition:opacity .22s var(--ease), transform .22s var(--ease); }
.model-dropdown.open { opacity:1; transform:none; pointer-events:auto; }
.dd-item { display:flex; align-items:center; gap:12px; width:100%; padding:9px 11px; border-radius:11px; text-align:left; transition:background .18s; }
.dd-item:hover { background:rgba(255,255,255,.07); }
.dd-orb { width:26px; height:26px; flex:0 0 auto; }
.dd-name { font-weight:600; font-size:.88rem; }
.dd-desc { font-size:.75rem; color:var(--ink-3); }
.dd-check { margin-left:auto; color:var(--accent); width:16px; height:16px; opacity:0; }
.dd-item.selected .dd-check { opacity:1; }

/* ---------------- views ---------------- */
.view-host { flex:1; min-height:0; position:relative; }
.view { position:absolute; inset:0; overflow-y:auto; padding:0 38px 116px; animation:viewIn .42s var(--ease); }
@keyframes viewIn { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:none; } }
.view-title { font-size:1.6rem; font-weight:600; letter-spacing:-.02em; margin:26px 0 5px; }
.view-sub { color:var(--ink-3); margin-bottom:26px; font-size:.92rem; max-width:640px; line-height:1.55; }
.wrap { width:100%; max-width:1090px; margin:0 auto; }

/* ------- home ------- */
.greeting { text-align:center; margin:11vh 0 34px; }
.greeting h1 { font-size:clamp(1.75rem,2.9vw,2.45rem); font-weight:600; letter-spacing:-.026em; line-height:1.18; }
.greeting h2 { font-size:clamp(1.5rem,2.6vw,2.15rem); font-weight:500; letter-spacing:-.024em; color:var(--periwinkle); line-height:1.3; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:38px 0 15px; }
.section-head h3 { font-size:1rem; font-weight:500; color:var(--ink); }
.link-btn { font-size:.85rem; color:var(--ink-2); display:inline-flex; gap:6px; align-items:center; padding:6px 12px; border-radius:10px;
  border:1px solid var(--stroke-2); background:rgba(255,255,255,.03); transition:border-color .2s, color .2s; }
.link-btn:hover { color:var(--ink); border-color:var(--stroke-hot); }
.link-btn svg { width:13px; height:13px; }

/* ------- command bar ------- */
.cmdbar { position:relative; border-radius:22px; padding:18px 18px 14px;
  background:linear-gradient(180deg, rgba(38,42,53,.72), rgba(24,27,36,.78));
  border:1px solid var(--stroke-2); box-shadow:0 16px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s var(--ease), border-color .3s; }
.cmdbar::after { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  box-shadow:0 0 0 1px rgba(150,160,255,.42), 0 0 50px rgba(120,140,255,.20); }
.cmdbar.focused { transform:translateY(-2px); }
.cmdbar.focused::after { opacity:1; }
.cmdbar textarea { width:100%; background:transparent; border:0; outline:0; resize:none; color:var(--ink);
  font-size:1rem; line-height:1.5; padding:2px 4px 16px; max-height:190px; }
.cmdbar textarea::placeholder { color:var(--ink-3); }
.cmd-row { display:flex; align-items:center; gap:9px; min-width:0; }
.cmd-row .icon-btn, .cmd-row .send-btn { flex:0 0 auto; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:22px; font-size:.87rem; color:var(--ink-2);
  border:1px solid var(--stroke-2); background:rgba(255,255,255,.045); transition:all .2s; }
.chip svg { width:15px; height:15px; flex:0 0 auto; }
.chip { white-space:nowrap; flex:0 0 auto; }
.chip:hover { color:var(--ink); background:rgba(255,255,255,.09); }
.chip.on { color:#c6cdff; background:rgba(120,135,255,.18); border-color:rgba(140,155,255,.45); }
.cmd-spacer { flex:1; }
.send-btn { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#8f7cf8,#7b5cf0); box-shadow:0 5px 20px rgba(130,110,250,.42);
  transition:transform .18s var(--ease), box-shadow .25s, filter .2s; }
.send-btn svg { width:19px; height:19px; stroke-width:2; }
.send-btn:hover { transform:translateY(-1px) scale(1.06); box-shadow:0 9px 28px rgba(130,110,250,.6); }
.send-btn:active { transform:scale(.92); }
.send-btn:disabled { filter:grayscale(.55) brightness(.62); box-shadow:none; cursor:default; transform:none; }

/* ------- cards ------- */
.grid { display:grid; gap:14px; }
.grid.models { grid-template-columns:repeat(6, minmax(0,1fr)); }
.grid.featured { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid.two { grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); }
.card { position:relative; border-radius:var(--r-lg); padding:18px; border:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--card-hi), var(--card));
  transition:transform .28s var(--ease), border-color .25s, box-shadow .25s; }
.card.hoverable:hover { transform:translateY(-4px); border-color:var(--stroke-2);
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 32px rgba(140,150,255,.08); cursor:pointer; }
.model-card { display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px 12px 18px; }
.model-card.selected { border-color:rgba(139,124,246,.55); background:linear-gradient(180deg, rgba(60,48,120,.34), rgba(28,24,54,.5));
  box-shadow:0 0 0 1px rgba(139,124,246,.28), 0 0 40px rgba(139,124,246,.14); }
.model-card.selected .model-name { color:#b9a8ff; }
.model-name { font-weight:600; font-size:.94rem; margin-bottom:5px; }
.model-desc { font-size:.79rem; color:var(--ink-3); line-height:1.4; }
.caps { display:flex; gap:5px; margin-top:11px; flex-wrap:wrap; justify-content:center; }
.cap { font-size:.66rem; padding:2.5px 8px; border-radius:20px; background:rgba(255,255,255,.055); color:var(--ink-3); border:1px solid var(--stroke); }

/* orb — layered plasma sphere */
.orb { position:relative; border-radius:50%; overflow:hidden; flex:0 0 auto; isolation:isolate;
  background:radial-gradient(circle at 33% 26%, var(--c-lt), var(--c-md) 46%, var(--c-dk) 78%, #03050a 100%);
  box-shadow: inset -10px -12px 28px rgba(0,0,0,.85), inset 6px 8px 18px rgba(255,255,255,.14),
              0 10px 26px rgba(0,0,0,.55), 0 0 34px var(--c-glow); }
.orb i { position:absolute; inset:0; border-radius:50%; display:block; opacity:.5; filter:blur(5px);
  background:
    conic-gradient(from 200deg at 46% 44%, transparent 0deg, var(--c-lt) 46deg, transparent 118deg,
                   var(--c-md) 190deg, transparent 262deg, var(--c-lt) 320deg, transparent 360deg),
    radial-gradient(circle at 62% 68%, var(--c-md), transparent 52%);
  animation:swirl 26s linear infinite; }
.orb::before { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 68% 76%, var(--c-glow), transparent 42%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.orb::after { content:""; position:absolute; top:10%; left:17%; width:33%; height:23%; border-radius:50%;
  filter:blur(2.5px); background:radial-gradient(ellipse, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
@keyframes swirl { to { transform:rotate(360deg); } }
.model-card .orb { width:74px; height:74px; margin-bottom:16px; }

/* featured — icon on the RIGHT, per reference */
.feat-card { display:flex; align-items:center; gap:16px; padding:20px 20px; min-height:104px; }
.feat-text { flex:1; min-width:0; }
.feat-card h4 { font-size:1rem; font-weight:500; margin-bottom:6px; }
.feat-card p { font-size:.85rem; color:var(--ink-3); line-height:1.45; }
.feat-icon { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; color:var(--ink-2);
  background:rgba(255,255,255,.055); border:1px solid var(--stroke-2); transition:background .25s, color .25s, transform .25s var(--ease); }
.feat-card:hover .feat-icon { background:rgba(255,255,255,.1); color:var(--ink); transform:scale(1.06); }
.feat-icon svg { width:20px; height:20px; }

/* ---------------- dock ---------------- */
.dock-wrap { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:25;
  display:flex; align-items:center; gap:14px; transition:opacity .35s var(--ease), transform .35s var(--ease); }
.dock-wrap.hidden { opacity:0; transform:translateX(-50%) translateY(26px); pointer-events:none; }
.dock, .dock-search { background:rgba(22,26,36,.68); border:1px solid var(--stroke-2);
  backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3);
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.dock { display:flex; align-items:center; gap:5px; padding:9px 12px; border-radius:22px; }
.dock-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:var(--ink-2);
  transition:background .2s, color .2s, transform .22s var(--ease); }
.dock-btn svg { width:21px; height:21px; }
.dock-mark { stroke-width:2.1; }
.dock-btn:hover { background:rgba(255,255,255,.09); color:var(--ink); transform:translateY(-4px) scale(1.06); }
.dock-btn.active { color:var(--ink); background:rgba(139,124,246,.2); }
.dock-search { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--ink-2);
  transition:color .2s, transform .22s var(--ease), border-color .2s; }
.dock-search:hover { color:var(--ink); transform:scale(1.07); border-color:var(--stroke-hot); }
.dock-search svg { width:21px; height:21px; }

/* ---------------- chat ---------------- */
.view.chat-view { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.chat-scroll { flex:1; overflow-y:auto; padding:16px 0 24px; }
.chat-inner, .chat-input-wrap { width:min(790px, calc(100% - 60px)); margin:0 auto; }
.chat-input-wrap { padding-bottom:24px; }
.msg { display:flex; gap:13px; margin-bottom:24px; animation:msgIn .34s var(--ease); }
@keyframes msgIn { from { opacity:0; transform:translateY(9px);} to { opacity:1; transform:none;} }
.msg-avatar { width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; font-size:.78rem; font-weight:600;
  border:1px solid var(--stroke-2); }
.msg.user .msg-avatar { background:linear-gradient(150deg,#4a5578,#262d44); }
.msg.ai .msg-avatar { background:linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.03)); }
.msg.ai .msg-avatar svg { width:15px; height:15px; stroke-width:2.1; }
.msg-body { min-width:0; flex:1; }
.msg-head { display:flex; align-items:baseline; gap:9px; margin-bottom:5px; }
.msg-who { font-size:.84rem; font-weight:600; }
.msg-time { font-size:.7rem; color:var(--ink-4); }
.msg-content { font-size:.95rem; line-height:1.68; color:#dde3ef; overflow-wrap:break-word; }
.msg-content p { margin-bottom:.72em; }
.msg-content p:last-child { margin-bottom:0; }
.msg-content :is(ul,ol) { margin:0 0 .72em 1.35em; }
.msg-content li { margin-bottom:.28em; }
.msg-content :is(h1,h2,h3) { margin:.9em 0 .45em; font-size:1.02rem; font-weight:600; }
.msg-content code { background:rgba(255,255,255,.09); padding:2px 6px; border-radius:6px; font-size:.85em;
  font-family:"SF Mono", ui-monospace, Menlo, monospace; }
.msg-content strong { color:#fff; font-weight:600; }
.msg-content blockquote { border-left:2px solid rgba(139,124,246,.5); padding:2px 0 2px 13px; margin:0 0 .72em; color:var(--ink-2); }
.codeblock { margin:.85em 0; border-radius:14px; overflow:hidden; border:1px solid var(--stroke-2); background:rgba(4,6,12,.8); }
.codeblock-head { display:flex; align-items:center; justify-content:space-between; padding:8px 13px; font-size:.73rem; color:var(--ink-3);
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--stroke); }
.codeblock pre { padding:14px; overflow-x:auto; font-family:"SF Mono", ui-monospace, Menlo, monospace; font-size:.81rem; line-height:1.6; }
.codeblock pre code { background:none; padding:0; }
.copy-btn { font-size:.73rem; color:var(--ink-3); padding:3px 9px; border-radius:7px; transition:background .2s,color .2s; }
.copy-btn:hover { background:rgba(255,255,255,.09); color:var(--ink); }
.msg-actions { display:flex; gap:3px; margin-top:9px; opacity:0; transition:opacity .25s; }
.msg:hover .msg-actions, .msg-actions:focus-within { opacity:1; }
.msg-actions .icon-btn { width:28px; height:28px; }
.msg-actions svg { width:15px; height:15px; }
.msg-actions .icon-btn.lit { color:var(--accent); }
.typing { display:inline-flex; gap:5px; padding:7px 2px; }
.typing i { width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:bounce 1.2s infinite; }
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce { 0%,60%,100%{transform:none;opacity:.35} 30%{transform:translateY(-5px);opacity:1} }
.sys-chip { text-align:center; margin:16px 0; }
.sys-chip span { font-size:.76rem; color:var(--ink-2); padding:6px 15px; border-radius:20px; border:1px solid var(--stroke-2); background:rgba(255,255,255,.04); }

/* ---------------- panels, forms ---------------- */
.panel { border-radius:var(--r-lg); border:1px solid var(--stroke); padding:22px;
  background:linear-gradient(180deg, var(--card-hi), var(--card)); margin-bottom:16px; }
.panel h4 { font-size:1rem; font-weight:500; margin-bottom:5px; }
.panel .hint { font-size:.85rem; color:var(--ink-3); line-height:1.55; margin-bottom:16px; }
.field { margin-bottom:15px; }
.field label { display:block; font-size:.8rem; color:var(--ink-2); margin-bottom:7px; }
.field :is(input,select) { width:100%; max-width:470px; padding:11px 14px; border-radius:12px; outline:0;
  background:rgba(0,0,0,.34); border:1px solid var(--stroke-2); transition:border-color .25s, box-shadow .25s; }
.field :is(input,select):focus { border-color:var(--stroke-hot); box-shadow:0 0 0 3px rgba(139,124,246,.14); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 19px; border-radius:12px; font-size:.89rem; font-weight:500;
  background:linear-gradient(150deg,#8f7cf8,#7b5cf0); color:#fff; box-shadow:0 5px 18px rgba(130,110,250,.34);
  transition:transform .15s var(--ease), box-shadow .2s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 9px 26px rgba(130,110,250,.48); }
.btn.ghost { background:rgba(255,255,255,.06); border:1px solid var(--stroke-2); box-shadow:none; }
.btn.danger { background:rgba(255,95,95,.12); border:1px solid rgba(255,95,95,.32); color:#ffb3b3; box-shadow:none; }
.row-item { display:flex; align-items:center; gap:14px; padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.05); }
.row-item:last-child { border-bottom:0; }
.row-item .grow { flex:1; min-width:0; }
.row-title { font-size:.92rem; font-weight:500; }
.row-sub { font-size:.79rem; color:var(--ink-3); margin-top:2px; }
.status-pill { font-size:.72rem; padding:3.5px 11px; border-radius:20px; border:1px solid var(--stroke-2); color:var(--ink-3); white-space:nowrap; }
.status-pill.on { color:#a8e9c6; border-color:rgba(90,215,155,.34); }
.status-pill.idle { color:#f0d79a; border-color:rgba(240,200,120,.3); }
.toggle { position:relative; width:44px; height:26px; border-radius:20px; background:rgba(255,255,255,.13); transition:background .25s; flex:0 0 auto; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  transition:transform .26s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.4); }
.toggle.on { background:linear-gradient(150deg,#8f7cf8,#7b5cf0); }
.toggle.on::after { transform:translateX(18px); }
.dropzone { border:1.5px dashed var(--stroke-2); border-radius:var(--r-lg); padding:46px 20px; text-align:center; color:var(--ink-3);
  transition:background .25s, border-color .25s, color .25s; margin-bottom:16px; cursor:pointer; }
.dropzone.over { background:rgba(139,124,246,.08); border-color:var(--accent); color:var(--ink); }

/* ---------------- music ---------------- */
.music-search { display:flex; gap:10px; max-width:640px; margin-bottom:22px; }
.music-search input { flex:1; padding:12px 16px; border-radius:14px; outline:0; background:rgba(0,0,0,.34);
  border:1px solid var(--stroke-2); transition:border-color .25s, box-shadow .25s; }
.music-search input:focus { border-color:var(--stroke-hot); box-shadow:0 0 0 3px rgba(139,124,246,.14); }
.track { display:flex; align-items:center; gap:14px; padding:9px; border-radius:14px; transition:background .2s; cursor:pointer; max-width:800px; }
.track:hover { background:rgba(255,255,255,.05); }
.track img { width:86px; height:48px; object-fit:cover; border-radius:9px; border:1px solid var(--stroke); flex:0 0 auto; }
.track-title { font-size:.9rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-ch { font-size:.78rem; color:var(--ink-3); margin-top:2px; }

/* floating player */
.player { position:fixed; right:44px; bottom:44px; z-index:94; width:min(370px, calc(100vw - 32px));
  display:flex; align-items:center; gap:12px; padding:11px 14px 15px; border-radius:20px;
  background:rgba(20,24,34,.82); border:1px solid var(--stroke-2); box-shadow:var(--shadow);
  backdrop-filter:blur(28px) saturate(1.3); -webkit-backdrop-filter:blur(28px) saturate(1.3);
  animation:playerIn .45s var(--ease); }
@keyframes playerIn { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
.player-art { width:44px; height:44px; border-radius:11px; object-fit:cover; border:1px solid var(--stroke); flex:0 0 auto; }
.player-meta { flex:1; min-width:0; }
.player-title { font-size:.85rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-channel { font-size:.74rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-controls { display:flex; gap:1px; }
.player-controls .play { background:rgba(255,255,255,.09); border-radius:50%; color:var(--ink); }
.player-progress { position:absolute; left:14px; right:14px; bottom:7px; height:3px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.player-progress-fill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .5s linear; }
#ytHolder { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; bottom:0; right:0; overflow:hidden; }

/* ---------------- command palette ---------------- */
.palette-scrim { position:fixed; inset:0; z-index:130; background:rgba(2,4,10,.55); backdrop-filter:blur(6px);
  display:flex; justify-content:center; padding-top:16vh; animation:fadeIn .2s var(--ease); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.palette { width:min(560px, calc(100vw - 40px)); height:max-content; max-height:60vh; display:flex; flex-direction:column;
  border-radius:var(--r-lg); background:rgba(18,22,32,.92); border:1px solid var(--stroke-2); box-shadow:var(--shadow);
  backdrop-filter:blur(30px); overflow:hidden; animation:paletteIn .28s var(--ease); }
@keyframes paletteIn { from{opacity:0;transform:translateY(-14px) scale(.98)} to{opacity:1;transform:none} }
.palette-head { display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--stroke); }
.palette-head svg { color:var(--ink-3); flex:0 0 auto; }
.palette-head input { flex:1; background:none; border:0; outline:0; font-size:1rem; }
.palette-head kbd { font:inherit; font-size:.72rem; color:var(--ink-4); border:1px solid var(--stroke-2); border-radius:6px; padding:2px 7px; }
.palette-results { overflow-y:auto; padding:7px; }
.palette-item { display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:11px; text-align:left; color:var(--ink-2); transition:background .16s; }
.palette-item:hover, .palette-item.sel { background:rgba(255,255,255,.08); color:var(--ink); }
.palette-item .kind { margin-left:auto; font-size:.72rem; color:var(--ink-4); }

/* ---------------- toasts ---------------- */
.toast-host { position:fixed; top:44px; right:44px; z-index:140; display:flex; flex-direction:column; gap:10px; }
.toast { padding:12px 18px; border-radius:14px; font-size:.86rem; max-width:330px;
  background:rgba(20,24,34,.88); border:1px solid var(--stroke-2); backdrop-filter:blur(22px);
  box-shadow:var(--shadow); animation:toastIn .35s var(--ease); }
@keyframes toastIn { from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:none} }

/* ---------------- responsive ---------------- */
@media (max-width:1180px) {
  .window { width:calc(100vw - 28px); height:calc(100vh - 28px); margin:14px auto; }
  .toast-host { top:26px; right:26px; }
  .player { right:26px; bottom:26px; }
}
@media (max-width:980px) {
  .grid.models { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .grid.featured { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  .window { width:100vw; height:100vh; height:100dvh; margin:0; border-radius:0; border:0; }
  .sidebar { position:fixed; z-index:100; height:100%; width:284px; transform:translateX(-100%);
    background:rgba(11,14,22,.95); backdrop-filter:blur(30px); }
  body.drawer-open .sidebar { transform:none; }
  body.drawer-open .sidebar-scrim { display:block; position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.55); }
  .collapse-btn, .sidebar-top .traffic { display:none; }
  .sidebar-top { padding-top:8px; }
  .mobile-menu { display:grid; }
  .conn-pill { display:none; }
  .view { padding:0 18px 130px; }
  .greeting { margin:5vh 0 26px; }
  .grid.models { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin:0 -18px; padding-inline:18px; }
  .grid.models .card { flex:0 0 168px; scroll-snap-align:start; }
  .chat-inner, .chat-input-wrap { width:calc(100% - 32px); }
  .dock-wrap { bottom:14px; gap:10px; }
  .dock { padding:7px 9px; gap:2px; }
  .dock-btn { width:36px; height:36px; }
  .dock-search { width:46px; height:46px; }
  .player { left:16px; right:16px; bottom:82px; width:auto; }
  .toast-host { top:16px; right:16px; left:16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* composer shows focus on the container, so the inner textarea needn't double up */
.cmdbar textarea:focus-visible { outline:none; }

/* narrow screens: chips collapse to icons so mic + send always stay reachable */
@media (max-width:640px) {
  .chip-label { display:none; }
  .chip { padding:8px 11px; gap:0; }
  .cmd-row { gap:7px; }
  .view { padding-bottom:150px; }
}

/* [hidden] must beat the layout display rules above */
.palette-scrim[hidden], .player[hidden], [hidden] { display:none !important; }

/* ============================================================
   AVEN refinement pass — coherent luminous-glass product shell
   ============================================================ */
.window {
  border-color:rgba(194,211,255,.24);
  box-shadow:
    0 34px 100px rgba(0,0,0,.64),
    0 0 0 1px rgba(99,117,210,.08),
    0 0 58px rgba(83,102,210,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.window::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:4;
  background:linear-gradient(105deg, rgba(215,226,255,.52), rgba(122,139,255,.05) 20%, transparent 42%, transparent 76%, rgba(139,154,255,.22));
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.7;
}
.sidebar { background:linear-gradient(180deg, rgba(30,37,57,.58), rgba(12,16,27,.42)); }
.brand-mark { box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 0 24px rgba(123,139,255,.12); }
.nav-new { margin-left:auto; font-size:.66rem; padding:2px 8px; border-radius:20px; color:#c8c0ff; border:1px solid rgba(139,124,246,.28); background:rgba(139,124,246,.13); }
.window.collapsed .nav-new { display:none; }

.home-wrap { max-width:1120px; }
.home-view { background:radial-gradient(95% 65% at 72% -4%, rgba(76,99,170,.08), transparent 62%); }
.home-composer { max-width:790px; margin:0 auto; }
.home-section-head { margin-top:34px; }
.home-model-grid .model-card { min-height:184px; background:linear-gradient(165deg, rgba(17,22,33,.9), rgba(8,12,20,.9)); overflow:hidden; }
.home-model-grid .model-card::before { content:""; position:absolute; inset:-80% -30% 45%; transform:rotate(18deg); background:linear-gradient(90deg, transparent, rgba(194,207,255,.06), transparent); pointer-events:none; }
.home-model-grid .model-card.selected { background:linear-gradient(165deg, rgba(42,40,81,.68), rgba(13,17,31,.94)); }
.home-feature-grid .feat-card { background:linear-gradient(160deg, rgba(26,31,43,.72), rgba(10,13,21,.92)); }
.model-card .orb { box-shadow:inset -12px -15px 30px rgba(0,0,0,.88), inset 7px 9px 22px rgba(255,255,255,.16), 0 12px 30px rgba(0,0,0,.56), 0 0 42px var(--c-glow); }
.model-card .orb i { opacity:.72; filter:blur(3px); background:conic-gradient(from 210deg at 48% 46%, transparent 0 18deg, var(--c-lt) 42deg, transparent 78deg 112deg, var(--c-md) 146deg, transparent 185deg 230deg, var(--c-lt) 275deg, transparent 318deg), radial-gradient(circle at 62% 68%, var(--c-md), transparent 52%); }

/* Discover — three-column capability grid + Spotify glass module */
.discover-wrap { max-width:1160px; }
.discover-view { padding-bottom:104px; }
.discover-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.discover-grid .feat-card { min-height:110px; background:linear-gradient(165deg, rgba(17,22,32,.94), rgba(7,11,18,.94)); border-color:rgba(178,195,238,.11); }
.discover-grid .feat-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.035); }

.spotify-hub { position:relative; margin-top:16px; padding:13px; border-radius:19px; overflow:hidden;
  border:1px solid rgba(133,151,229,.34);
  background:linear-gradient(168deg, rgba(18,24,39,.88), rgba(7,11,19,.94));
  box-shadow:0 16px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04), 0 0 32px rgba(84,103,222,.07); }
.spotify-hub::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(65% 80% at 100% 0%, rgba(92,119,220,.08), transparent 66%), linear-gradient(115deg, rgba(255,255,255,.018), transparent 28%); }
.spotify-hub.connected { border-color:rgba(129,151,237,.42); }
.spotify-hub-top { position:relative; display:grid; grid-template-columns:180px minmax(0,1fr); gap:14px; align-items:center; z-index:1; }
.spotify-identity { display:flex; align-items:center; gap:11px; min-width:0; padding:3px 7px; }
.spotify-identity > span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.spotify-identity strong { font-size:.95rem; font-weight:600; }
.spotify-identity small { color:var(--ink-3); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-identity small i { width:6px; height:6px; display:inline-block; border-radius:50%; background:#33d17a; box-shadow:0 0 10px rgba(51,209,122,.6); margin-right:5px; }
.spotify-logo-wrap { color:#1ed760; width:35px; height:35px; display:grid; place-items:center; border-radius:50%; filter:drop-shadow(0 0 13px rgba(30,215,96,.18)); }
.spotify-logo-mark { width:35px; height:35px; }
.spotify-search-wrap { position:relative; display:flex; align-items:center; min-width:0; height:47px; border-radius:14px; border:1px solid rgba(255,255,255,.09); background:rgba(5,9,17,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.spotify-search-wrap > svg { width:18px; height:18px; color:var(--ink-3); margin-left:15px; flex:0 0 auto; }
.spotify-search-wrap input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; padding:0 12px; color:var(--ink); }
.spotify-search-wrap input::placeholder { color:#68758f; }
.spotify-search-wrap input:disabled { cursor:default; }
.spotify-search-go, .spotify-connect { height:34px; margin-right:6px; padding:0 13px; border-radius:10px; font-size:.78rem; font-weight:500; color:#dce4f5; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); transition:.2s; }
.spotify-search-go:hover, .spotify-connect:hover { background:rgba(255,255,255,.1); border-color:rgba(162,179,235,.28); }
.spotify-body { position:relative; z-index:1; margin-top:12px; border:1px solid rgba(255,255,255,.055); border-radius:15px; background:rgba(4,8,15,.30); overflow:hidden; }
.spotify-empty-state { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; min-height:258px; padding:28px; overflow:hidden; }
.spotify-empty-state h3 { position:relative; font-size:1.08rem; margin-bottom:7px; font-weight:600; }
.spotify-empty-state p { position:relative; max-width:610px; color:var(--ink-3); font-size:.84rem; line-height:1.55; margin-bottom:16px; }
.spotify-empty-state .btn { position:relative; }
.spotify-empty-glow { position:absolute; width:310px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(34,197,94,.08), rgba(83,99,223,.06) 42%, transparent 72%); filter:blur(28px); }
.spotify-loading { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; padding:18px; min-height:170px; }
.spotify-loading span { border-radius:13px; min-height:120px; background:linear-gradient(105deg, rgba(255,255,255,.025), rgba(255,255,255,.07), rgba(255,255,255,.025)); background-size:220% 100%; animation:spotifyShimmer 1.7s linear infinite; }
@keyframes spotifyShimmer { to{background-position:-220% 0} }
.spotify-shelf-head { display:flex; align-items:baseline; justify-content:space-between; padding:15px 16px 10px; }
.spotify-shelf-head.music-head { padding-top:16px; border-top:1px solid rgba(255,255,255,.045); margin-top:2px; }
.spotify-shelf-head h3 { font-size:.88rem; font-weight:600; }
.spotify-shelf-head span { font-size:.7rem; color:var(--ink-4); }
.spotify-playlist-row { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; padding:0 13px 14px; }
.spotify-playlist-card { min-width:0; display:flex; align-items:center; gap:9px; text-align:left; padding:7px; border-radius:11px; border:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.022); transition:transform .22s var(--ease), background .2s, border-color .2s; }
button.spotify-playlist-card:hover { transform:translateY(-2px); background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11); }
.spotify-cover { width:54px; height:54px; flex:0 0 auto; border-radius:8px; background:linear-gradient(145deg,#30384a,#121824); background-size:cover; background-position:center; box-shadow:0 8px 18px rgba(0,0,0,.34); }
.spotify-playlist-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.spotify-playlist-copy strong { font-size:.75rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-playlist-copy small { font-size:.66rem; color:var(--ink-4); }
.placeholder-cover.c0{background:linear-gradient(145deg,#94755e,#242633)} .placeholder-cover.c1{background:linear-gradient(145deg,#31546d,#191a2a)} .placeholder-cover.c2{background:linear-gradient(145deg,#8d315d,#151b32)} .placeholder-cover.c3{background:linear-gradient(145deg,#827362,#1b1d23)} .placeholder-cover.c4{background:linear-gradient(145deg,#8d496c,#1b2640)} .placeholder-cover.c5{background:linear-gradient(145deg,#8a4d31,#23182a)}
.spotify-quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:0 13px 14px; }
.spotify-quick { display:flex; align-items:center; gap:11px; min-width:0; text-align:left; padding:10px 12px; min-height:67px; border-radius:11px; border:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.025); transition:.2s; }
.spotify-quick:hover { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11); transform:translateY(-1px); }
.spotify-quick > span:last-child { display:flex; flex-direction:column; min-width:0; gap:3px; }
.spotify-quick strong { font-size:.78rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-quick small { font-size:.66rem; color:var(--ink-4); }
.spotify-quick-icon { width:39px; height:39px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; font-size:1.15rem; color:#fff; background:linear-gradient(145deg,#6c55e8,#2c2470); box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.spotify-quick-icon.clock { background:linear-gradient(145deg,#374052,#131923); color:#dbe5f4; }
.spotify-quick-icon.disc { background:linear-gradient(145deg,#214b31,#102118); color:#95edb2; }
.spotify-quick-icon.trend { background:linear-gradient(145deg,#173b29,#0c1d15); color:#79e6a0; }
.spotify-results { border-top:1px solid rgba(255,255,255,.045); }
.spotify-inline-loading,.spotify-inline-error { padding:22px 16px; color:var(--ink-3); font-size:.82rem; }
.spotify-track-head { display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px 8px; }
.spotify-track-head h3 { font-size:.88rem; }
.spotify-track-head span { font-size:.69rem; color:var(--ink-4); }
.spotify-track-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 13px 14px; }
.spotify-track-card { display:grid; grid-template-columns:46px minmax(0,1fr) 28px; align-items:center; gap:10px; text-align:left; padding:7px; border-radius:10px; border:1px solid rgba(255,255,255,.045); background:rgba(255,255,255,.018); transition:.2s; }
.spotify-track-card:hover { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.1); }
.spotify-track-art { width:46px; height:46px; border-radius:8px; background:linear-gradient(145deg,#372f49,#111827); background-size:cover; background-position:center; }
.spotify-track-card > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:3px; }
.spotify-track-card strong { font-size:.75rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-track-card small { font-size:.65rem; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-play-dot { color:#1ed760; opacity:.75; font-size:.7rem; text-align:center; }
.spotify-settings-actions { display:flex; gap:9px; flex-wrap:wrap; }
.spotify-settings-status { margin-top:13px; font-size:.78rem; color:#9ddbb7; display:flex; align-items:center; gap:7px; }
.spotify-settings-status span { width:7px; height:7px; border-radius:50%; background:#1ed760; box-shadow:0 0 10px rgba(30,215,96,.45); }

/* Spotify album-art-first floating player */
.spotify-float { position:fixed; z-index:96; right:42px; bottom:42px; display:flex; align-items:flex-end; pointer-events:none; }
.spotify-float[hidden] { display:none !important; }
.spotify-float-art { position:relative; z-index:2; pointer-events:auto; width:58px; height:58px; border-radius:14px; overflow:visible; box-shadow:0 16px 42px rgba(0,0,0,.58), 0 0 0 1px rgba(178,194,255,.14); transition:transform .3s var(--ease), border-radius .3s; }
.spotify-float-art img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; background:#141926; }
.spotify-playing-ring { position:absolute; inset:-4px; border-radius:18px; border:1px solid rgba(30,215,96,.45); opacity:0; box-shadow:0 0 18px rgba(30,215,96,.18); }
.spotify-float.is-playing .spotify-playing-ring { opacity:1; animation:spotifyPulse 2.4s ease-in-out infinite; }
@keyframes spotifyPulse { 0%,100%{transform:scale(.98);opacity:.35} 50%{transform:scale(1.04);opacity:.9} }
.spotify-float-panel { pointer-events:auto; width:0; max-width:0; opacity:0; overflow:hidden; margin-left:-7px; transform:translateX(-12px) scale(.98); transform-origin:left bottom; border-radius:18px; background:rgba(12,17,27,.92); border:1px solid rgba(171,188,237,.17); box-shadow:0 20px 60px rgba(0,0,0,.58); backdrop-filter:blur(30px) saturate(1.25); transition:max-width .42s var(--ease), width .42s var(--ease), opacity .22s, transform .42s var(--ease), padding .42s var(--ease); }
.spotify-float.expanded .spotify-float-panel { width:310px; max-width:310px; opacity:1; transform:none; padding:13px 14px 12px 21px; }
.spotify-float.expanded .spotify-float-art { transform:translateX(6px) scale(1.03); }
.spotify-float-head { display:flex; align-items:flex-start; gap:9px; min-width:260px; }
.spotify-float-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.spotify-float-meta strong { font-size:.84rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-float-meta span { font-size:.7rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spotify-mini-brand { font-size:.62rem; color:#68dc8d; }
.spotify-float-progress { margin-top:10px; height:3px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden; }
.spotify-float-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#1ed760,#69e897); transition:width .5s linear; }
.spotify-float-times { display:flex; justify-content:space-between; color:var(--ink-4); font-size:.58rem; margin-top:4px; }
.spotify-float-controls { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:4px; }
.spotify-main-play { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; margin:0 2px; color:#10141c; background:#eef2f8; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.spotify-main-play svg { width:18px; height:18px; stroke-width:2; }

/* Notes Vault */
.notes-view { padding-left:28px; padding-right:28px; }
.notes-wrap { max-width:1160px; height:100%; }
.notes-stage { min-height:calc(100vh - 155px); display:flex; align-items:center; justify-content:center; position:relative; perspective:1200px; }
.vault-layer { position:absolute; width:min(960px,92%); height:min(570px,74vh); border-radius:24px 24px 14px 14px; border:1px solid rgba(155,177,244,.24); background:linear-gradient(165deg, rgba(38,53,86,.30), rgba(5,9,17,.54)); box-shadow:0 20px 70px rgba(0,0,0,.34); }
.vault-layer-a { transform:translateY(-18px) scale(.965); opacity:.42; }
.vault-layer-b { transform:translateY(-9px) scale(.982); opacity:.62; }
.notes-vault { position:relative; width:min(980px,94%); min-height:min(560px,72vh); border-radius:25px 25px 12px 12px; border:1px solid rgba(177,198,255,.38); background:linear-gradient(160deg, rgba(40,54,84,.64), rgba(6,11,20,.90) 55%, rgba(4,8,15,.96)); box-shadow:0 26px 90px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08), 0 0 44px rgba(98,120,255,.13); overflow:hidden; animation:vaultRise .75s var(--ease); }
.notes-vault::before { content:""; position:absolute; top:-1px; left:50%; width:150px; height:14px; transform:translateX(-50%); border-radius:0 0 14px 14px; background:linear-gradient(90deg, rgba(73,95,163,.48), rgba(190,208,255,.26), rgba(73,95,163,.48)); border:1px solid rgba(189,206,255,.18); border-top:0; box-shadow:0 0 18px rgba(126,149,255,.17); }
.notes-vault::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 52% at 50% 38%, rgba(87,105,190,.09), transparent 66%), linear-gradient(125deg, rgba(255,255,255,.025), transparent 28%); }
@keyframes vaultRise { from{opacity:0; transform:translateY(34px) scale(.975)} to{opacity:1; transform:none} }
.notes-vault.authenticating { animation:vaultAuth 1.1s var(--ease); }
@keyframes vaultAuth { 0%{box-shadow:0 26px 90px rgba(0,0,0,.56),0 0 44px rgba(98,120,255,.13)} 55%{box-shadow:0 26px 90px rgba(0,0,0,.56),0 0 90px rgba(104,137,255,.32)} 100%{transform:scale(1.008);opacity:.72} }
.notes-vault-label { position:absolute; top:24px; left:27px; z-index:2; color:#d9e2f6; font-size:.76rem; display:flex; gap:7px; align-items:center; }
.notes-vault-label span { color:#aebfff; }
.notes-vault-core { position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:50px 20px 32px; text-align:center; }
.aven-vault-word { font-family:"Avenir Next","Helvetica Neue",-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif; font-size:clamp(2.3rem,5vw,4.2rem); letter-spacing:.34em; padding-left:.34em; font-weight:300; color:#dbe5ff; text-shadow:0 0 24px rgba(112,143,255,.22); }
.aven-vault-by { margin-top:5px; color:#aab8d2; font-size:.92rem; }
.fingerprint-wrap { position:relative; width:154px; height:154px; margin:25px 0 10px; display:grid; place-items:center; border-radius:50%; color:#a9c3ff; }
.fingerprint { width:58px; height:58px; stroke-width:2; filter:drop-shadow(0 0 10px rgba(125,163,255,.48)); z-index:3; }
.orbit { position:absolute; border-radius:50%; border:1px solid rgba(110,145,239,.22); }
.orbit::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:#b9caff; box-shadow:0 0 8px rgba(166,191,255,.9); top:-2px; left:50%; }
.orbit-a { inset:27px; animation:orbitSpin 10s linear infinite; }
.orbit-b { inset:15px; border-color:rgba(110,145,239,.14); animation:orbitSpin 16s linear infinite reverse; }
.orbit-c { inset:3px; border-color:rgba(110,145,239,.08); animation:orbitSpin 24s linear infinite; }
@keyframes orbitSpin { to{transform:rotate(360deg)} }
.fingerprint-glow { position:absolute; inset:42px; border-radius:50%; background:radial-gradient(circle, rgba(89,138,255,.22), transparent 70%); filter:blur(7px); }
.fingerprint-wrap:hover .fingerprint { transform:scale(1.05); }
.fingerprint-wrap:hover .orbit-a { border-color:rgba(132,169,255,.38); }
.notes-auth-copy { color:#c4cee1; font-size:.92rem; }
.notes-auth-sub { color:#75829a; font-size:.78rem; margin-top:6px; letter-spacing:.04em; }
.notes-prototype-note { color:#4f5c72; font-size:.62rem; margin-top:17px; }
.notes-open-wrap { padding-top:20px; }
.notes-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.notes-toolbar .view-title { margin-top:0; }
.notes-toolbar .view-sub { margin-bottom:14px; }
.notes-toolbar-actions { display:flex; gap:8px; margin-bottom:17px; }
.notes-app { height:calc(100vh - 220px); min-height:460px; display:grid; grid-template-columns:270px minmax(0,1fr); border-radius:20px; overflow:hidden; border:1px solid rgba(154,176,235,.17); background:linear-gradient(165deg, rgba(19,25,39,.82), rgba(7,11,19,.92)); box-shadow:0 20px 70px rgba(0,0,0,.35); }
.notes-list-pane { padding:13px; border-right:1px solid rgba(255,255,255,.055); background:rgba(255,255,255,.018); overflow:hidden; display:flex; flex-direction:column; }
.notes-search { height:40px; display:flex; align-items:center; gap:8px; padding:0 11px; border-radius:11px; border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.18); }
.notes-search svg { width:15px; height:15px; color:var(--ink-4); }
.notes-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:.8rem; }
.notes-list { margin-top:10px; overflow-y:auto; }
.note-list-item { display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; padding:11px; border-radius:11px; color:var(--ink-2); transition:.18s; }
.note-list-item:hover { background:rgba(255,255,255,.04); }
.note-list-item.active { background:rgba(115,126,204,.15); box-shadow:inset 0 0 0 1px rgba(147,164,240,.15); color:var(--ink); }
.note-list-item strong { font-size:.82rem; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-list-item span { font-size:.7rem; color:var(--ink-3); line-height:1.35; max-height:2.7em; overflow:hidden; }
.note-list-item small { font-size:.61rem; color:var(--ink-4); }
.notes-list-empty { padding:18px 10px; color:var(--ink-4); font-size:.75rem; }
.notes-editor-pane { min-width:0; display:flex; flex-direction:column; padding:22px 26px; }
.note-editor-head { display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.05); }
.note-editor-head input { flex:1; min-width:0; border:0; outline:0; background:none; color:#eef3fb; font-size:1.25rem; font-weight:600; letter-spacing:-.02em; }
.danger-note:hover { color:#ff9999; background:rgba(255,90,90,.08); }
.note-editor { flex:1; width:100%; resize:none; outline:0; border:0; background:none; color:#ccd5e4; font-size:.93rem; line-height:1.72; padding-top:19px; }
.note-editor::placeholder { color:#4c586d; }
.notes-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ink-3); }
.notes-empty > span { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#ccd6f6; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); font-size:1.4rem; margin-bottom:13px; }
.notes-empty h3 { color:var(--ink); font-size:1rem; margin-bottom:5px; }
.notes-empty p { font-size:.78rem; margin-bottom:14px; }

@media (max-width:1180px) {
  .spotify-float { right:26px; bottom:26px; }
  .discover-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spotify-playlist-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .spotify-track-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .discover-view { padding-bottom:150px; }
  .spotify-hub-top { grid-template-columns:1fr; }
  .spotify-search-wrap { width:100%; }
  .spotify-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spotify-float { left:auto; right:16px; bottom:88px; }
  .spotify-float.expanded .spotify-float-panel { width:min(300px,calc(100vw - 96px)); max-width:min(300px,calc(100vw - 96px)); }
  .notes-app { grid-template-columns:210px minmax(0,1fr); height:calc(100dvh - 190px); }
  .notes-stage { min-height:calc(100dvh - 90px); }
}
@media (max-width:640px) {
  .discover-grid { grid-template-columns:1fr; }
  .spotify-playlist-row { display:flex; overflow-x:auto; padding-bottom:14px; }
  .spotify-playlist-card { flex:0 0 176px; }
  .spotify-quick-grid { grid-template-columns:1fr 1fr; }
  .spotify-track-grid { grid-template-columns:1fr; }
  .spotify-hub { margin-left:-5px; margin-right:-5px; }
  .spotify-search-go,.spotify-connect { padding:0 10px; }
  .notes-view { padding-left:14px; padding-right:14px; }
  .notes-stage { align-items:flex-start; padding-top:34px; }
  .notes-vault { min-height:520px; width:100%; }
  .vault-layer { width:94%; height:500px; }
  .aven-vault-word { font-size:2.35rem; }
  .notes-toolbar { align-items:flex-start; }
  .notes-app { grid-template-columns:1fr; height:auto; min-height:600px; }
  .notes-list-pane { border-right:0; border-bottom:1px solid rgba(255,255,255,.05); max-height:210px; }
  .notes-editor-pane { min-height:420px; padding:18px; }
  .spotify-float { right:14px; bottom:88px; }
}


/* ---- both engines on screen at once: stack instead of overlap ---- */
/* Measured: the Spotify float is ~99px tall and sits at bottom:42, so the
   YouTube player must clear 42+99 plus a gap before the two stop colliding. */
body.spotify-active .player { bottom:196px; }
@media (max-width:1180px) { body.spotify-active .player { bottom:178px; } }
@media (max-width:860px)  { body.spotify-active .player { bottom:236px; } }

/* ---- vault stack sat above the card and poked out of the top ----
   Anchored to the bottom now, and shorter than the vault, so the layers
   can only ever peek out below and to the sides regardless of viewport. */
.vault-layer { top:auto; bottom:-15px; left:50%; height:min(470px,58vh); }
.vault-layer-a { transform:translateX(-50%) scale(.948); opacity:.3; }
.vault-layer-b { transform:translateX(-50%) scale(.975); opacity:.46; }
@media (max-width:860px) { .vault-layer { height:min(380px,46vh); } }

/* ============================================================
   MATERIAL PASS — smoked dark glass, silver edge lighting
   Substrate is blue-black charcoal. Highlights are neutral white
   and icy silver. Periwinkle appears ONLY on selected states and
   small accents — never as a surface tint.
   Delete from this marker down to revert.
   ============================================================ */
:root {
  /* neutral, near-colourless glass — the tint comes from what's behind it */
  --smoke-face:   linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.014) 46%, rgba(255,255,255,.008));
  --smoke-face-2: linear-gradient(168deg, rgba(255,255,255,.038), rgba(255,255,255,.009) 52%, rgba(0,0,0,.06));
  --smoke-blur:   blur(22px) saturate(1.15);
  --smoke-blur-s: blur(14px) saturate(1.1);
  /* icy white edge light, top-lit as if from the streak in the reference */
  --edge:      rgba(226,234,248,.22);
  --edge-hot:  rgba(238,244,255,.42);
  --spec:      inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.035);
  --drop:      0 16px 40px rgba(0,0,0,.5);
  --accent-sel: rgba(150,138,255,.5);
}

/* --- substrate: blue-black charcoal, not violet --- */
.atmosphere {
  background:
    radial-gradient(120% 80% at 86% -14%, rgba(78,102,150,.26), transparent 58%),
    radial-gradient(90% 70% at 4% 106%,  rgba(48,60,92,.16),  transparent 62%),
    linear-gradient(158deg, #0a0e18 0%, #06090f 48%, #04060b 100%);
}
.glow-tr { background:radial-gradient(circle, rgba(158,182,226,.26), transparent 70%); }
.glow-bl { background:radial-gradient(circle, rgba(96,112,158,.16), transparent 72%); }
/* directional white light rather than coloured haze */
.streak {
  background:linear-gradient(90deg, transparent, rgba(206,220,244,.16), rgba(244,249,255,.46), rgba(198,214,240,.12), transparent);
  filter:blur(48px);
}
.streak-a { opacity:1; height:16vmin; }
.streak-b { opacity:.6; }
.streak-c { opacity:.24; }

/* --- interior light so glass has something to refract --- */
.main::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 40% at 78% 0%,  rgba(196,214,244,.13), transparent 66%),
    radial-gradient(44% 32% at 8% 98%,  rgba(120,140,180,.07), transparent 68%);
}
.topbar, .view-host { position:relative; z-index:1; }
/* NB: never set position on .dock-wrap — it centres via absolute + translateX(-50%). */

/* --- window: charcoal body, bright caught edge, restrained bloom --- */
.window {
  background:linear-gradient(180deg, rgba(19,24,34,.62), rgba(7,10,16,.78));
  border-color:rgba(214,226,246,.20);
  box-shadow:
    0 40px 120px rgba(0,0,0,.72),
    0 0 0 1px rgba(150,166,196,.07),
    0 0 70px rgba(120,146,192,.10),
    inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(36px) saturate(1.2);
  -webkit-backdrop-filter:blur(36px) saturate(1.2);
}
.window::after {
  background:linear-gradient(104deg, rgba(238,245,255,.62), rgba(190,204,228,.06) 18%, transparent 44%, transparent 74%, rgba(206,220,244,.24));
  opacity:.9;
}

/* --- surfaces --- */
.card, .panel,
.home-model-grid .model-card,
.home-feature-grid .feat-card,
.discover-grid .feat-card {
  background:var(--smoke-face-2);
  backdrop-filter:var(--smoke-blur-s); -webkit-backdrop-filter:var(--smoke-blur-s);
  border-color:var(--edge);
  box-shadow:var(--spec), 0 12px 30px rgba(0,0,0,.42);
}
/* selected is the ONE place periwinkle earns a surface */
.home-model-grid .model-card.selected, .model-card.selected {
  background:linear-gradient(168deg, rgba(150,138,255,.13), rgba(255,255,255,.02) 54%, rgba(0,0,0,.06));
  border-color:var(--accent-sel);
  box-shadow:var(--spec), 0 0 0 1px rgba(150,138,255,.22), 0 14px 40px rgba(0,0,0,.5), 0 0 34px rgba(140,130,240,.14);
}
.card.hoverable:hover {
  border-color:var(--edge-hot);
  box-shadow:var(--spec), 0 22px 52px rgba(0,0,0,.55), 0 0 30px rgba(200,216,244,.09);
}
/* specular sweep — white, not violet */
.card.hoverable::after,
.home-feature-grid .feat-card::after,
.discover-grid .feat-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(112deg, transparent 32%, rgba(255,255,255,.075) 48%, transparent 62%);
  opacity:0; transform:translateX(-22%); transition:opacity .4s var(--ease), transform .7s var(--ease);
}
.card.hoverable:hover::after,
.home-feature-grid .feat-card:hover::after,
.discover-grid .feat-card:hover::after { opacity:1; transform:translateX(22%); }

/* --- chrome --- */
.sidebar {
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014) 46%, rgba(0,0,0,.05));
  backdrop-filter:var(--smoke-blur); -webkit-backdrop-filter:var(--smoke-blur);
  border-right-color:rgba(210,222,242,.13);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}
.nav-item.active { background:rgba(255,255,255,.075); box-shadow:inset 0 0 0 1px rgba(220,230,248,.14); }
.cmdbar {
  background:linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.018) 54%, rgba(0,0,0,.08));
  backdrop-filter:var(--smoke-blur); -webkit-backdrop-filter:var(--smoke-blur);
  border-color:rgba(220,231,250,.24);
  box-shadow:var(--spec), 0 18px 46px rgba(0,0,0,.46);
}
.cmdbar.focused {
  border-color:var(--edge-hot);
  box-shadow:var(--spec), 0 22px 54px rgba(0,0,0,.5), 0 0 42px rgba(206,222,248,.16);
}
.dock, .dock-search, .model-dropdown, .palette, .toast,
.player, .spotify-float-panel, .conn-pill, .icon-btn.framed, .icon-btn.round {
  background:var(--smoke-face);
  backdrop-filter:var(--smoke-blur); -webkit-backdrop-filter:var(--smoke-blur);
  border-color:var(--edge);
}
.dock, .dock-search, .model-dropdown, .palette, .player, .spotify-float-panel, .toast {
  box-shadow:var(--spec), var(--drop);
}
.chip { background:rgba(255,255,255,.05); border-color:rgba(216,228,248,.18); }
.chip:hover { background:rgba(255,255,255,.09); border-color:var(--edge-hot); }
.dock-btn.active { background:rgba(150,138,255,.18); }
.conn-pill.warn { color:#f2d9a4; border-color:rgba(238,196,120,.36); background:rgba(200,150,60,.10); }

/* --- notes vault: thicker smoked glass --- */
.notes-vault {
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.014) 46%, rgba(4,7,13,.34));
  backdrop-filter:blur(28px) saturate(1.2); -webkit-backdrop-filter:blur(28px) saturate(1.2);
  border-color:rgba(222,233,252,.28);
  box-shadow:var(--spec), 0 30px 96px rgba(0,0,0,.6), 0 0 48px rgba(178,200,236,.10);
}
.vault-layer {
  background:linear-gradient(165deg, rgba(255,255,255,.035), rgba(4,7,13,.3));
  backdrop-filter:var(--smoke-blur-s); -webkit-backdrop-filter:var(--smoke-blur-s);
  border-color:rgba(200,214,238,.14);
}

/* --- sidebar history rows carry a delete affordance --- */
.history-row { position:relative; display:flex; align-items:center; border-radius:var(--r-sm); transition:background .2s; }
.history-row:hover { background:rgba(255,255,255,.055); }
.history-row.active { background:rgba(150,138,255,.13); }
.history-row .history-item { flex:1; min-width:0; background:none; }
.history-row .history-item:hover { background:none; }
.history-del {
  flex:0 0 auto; width:26px; height:26px; margin-right:5px; display:grid; place-items:center;
  border-radius:7px; color:var(--ink-4); opacity:0; transition:opacity .18s, color .18s, background .18s;
}
.history-del svg { width:14px; height:14px; }
.history-row:hover .history-del, .history-del:focus-visible { opacity:1; }
.history-del:hover { color:#ffb2b2; background:rgba(255,95,95,.14); }

/* --- provider management rows --- */
.provider-edit { padding:4px 2px 16px; border-bottom:1px solid rgba(255,255,255,.05); }
.provider-edit[hidden] { display:none !important; }
.provider-row .btn.ghost { padding:7px 14px; font-size:.84rem; }

/* --- accessibility fallbacks --- */
@media (prefers-reduced-transparency: reduce) {
  .card, .panel, .sidebar, .cmdbar, .dock, .dock-search, .model-dropdown,
  .palette, .player, .spotify-float-panel, .notes-vault, .vault-layer,
  .home-model-grid .model-card, .home-feature-grid .feat-card, .discover-grid .feat-card {
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:linear-gradient(180deg, #12161f, #0a0d14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card.hoverable::after, .home-feature-grid .feat-card::after, .discover-grid .feat-card::after { display:none; }
}

/* ================= STABILIZATION PASS — functional affordances ================= */
/* Keep the model picker above the scrolling view. The earlier glass pass placed
   .topbar and .view-host in the same stacking layer, which could make the open
   dropdown look visible while the view intercepted clicks. */
.topbar { z-index:50 !important; }
.view-host { z-index:1 !important; }
.model-dropdown { z-index:120 !important; }

.feature-disabled { opacity:.42; cursor:not-allowed !important; }
.feature-disabled:hover { background:inherit !important; color:inherit !important; transform:none !important; }
.toggle.feature-locked { opacity:.32; cursor:not-allowed; }
.btn:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }

/* Composer image attachments — deliberately compact so the existing UI language
   stays intact rather than becoming a new attachment panel. */
.attachment-strip { display:flex; gap:8px; overflow-x:auto; padding:0 3px 12px; }
.attachment-strip[hidden] { display:none !important; }
.attachment-preview { position:relative; flex:0 0 auto; width:70px; height:70px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(220,232,250,.20); background:rgba(255,255,255,.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.attachment-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.attachment-preview button { position:absolute; top:4px; right:4px; width:20px; height:20px; display:grid; place-items:center;
  border-radius:50%; background:rgba(5,7,12,.78); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:15px; line-height:1; }
.cmdbar.preparing-attachments #attachBtn { opacity:.55; pointer-events:none; }

.msg-attachments { display:flex; flex-wrap:wrap; gap:8px; margin:7px 0 10px; }
.msg-attachment { margin:0; width:min(260px, 48%); min-width:140px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(218,230,250,.16); background:rgba(255,255,255,.035); }
.msg-attachment img { display:block; width:100%; max-height:300px; object-fit:cover; }
.msg-attachment figcaption { padding:6px 9px; font-size:.68rem; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:700px) {
  .attachment-preview { width:60px; height:60px; }
  .msg-attachment { width:100%; min-width:0; }
}
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;
}