*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#07101d;--panel:rgba(15,27,46,.72);--line:rgba(153,184,226,.16);--line2:rgba(132,177,234,.28);--text:#f4f8ff;--muted:#aab7c9;--muted2:#72839a;--cyan:#5ee7d7;--violet:#9b86ff;--pink:#ff7eb6;--blue:#4e8cff;--danger:#ff7189;--shadow:0 20px 70px rgba(0,0,0,.28)}
html,body{margin:0;width:100%;height:100%;background:radial-gradient(circle at 10% 0%,rgba(46,104,178,.13),transparent 34%),linear-gradient(155deg,#07101d,#091526 48%,#08111f);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}body{overscroll-behavior:none}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.mobile-only{display:none}.glass{background:linear-gradient(145deg,rgba(19,34,58,.78),rgba(11,21,37,.68));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;filter:saturate(115%)}.blob{position:absolute;border-radius:47% 53% 58% 42%/41% 45% 55% 59%;filter:blur(54px);opacity:.18;will-change:transform,border-radius}.blob-a{width:44vw;height:44vw;min-width:360px;min-height:360px;left:-12vw;top:-18vw;background:linear-gradient(135deg,#37e6cf,#3d69ff);animation:lavaA 25s ease-in-out infinite alternate}.blob-b{width:38vw;height:38vw;min-width:330px;min-height:330px;right:-11vw;top:10vh;background:linear-gradient(135deg,#8e72ff,#f36bd5);animation:lavaB 29s ease-in-out infinite alternate}.blob-c{width:36vw;height:36vw;min-width:300px;min-height:300px;left:28vw;bottom:-22vw;background:linear-gradient(135deg,#2fc7ff,#634bff);animation:lavaC 31s ease-in-out infinite alternate}.blob-d{width:24vw;height:24vw;min-width:240px;min-height:240px;right:23vw;bottom:5vh;background:linear-gradient(135deg,#65f0cf,#987cff);animation:lavaD 27s ease-in-out infinite alternate}@keyframes lavaA{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}100%{transform:translate3d(12vw,16vh,0) scale(1.16) rotate(24deg)}}@keyframes lavaB{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-15vw,18vh,0) scale(.9) rotate(-26deg)}}@keyframes lavaC{0%{transform:translate3d(0,0,0) scale(.92)}100%{transform:translate3d(-14vw,-14vh,0) scale(1.15) rotate(17deg)}}@keyframes lavaD{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(11vw,-18vh,0) scale(1.12) rotate(-13deg)}}@media(prefers-reduced-motion:reduce){.blob{animation:none!important}.sidebar{transition:none!important}}
.login-screen{position:relative;z-index:2;min-height:100dvh;display:grid;place-items:center;padding:24px}.login-card{width:min(100%,390px);border-radius:28px;padding:30px}.brand-mark{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-weight:900;color:#07131b;background:linear-gradient(135deg,var(--cyan),#74b7ff 55%,var(--violet));box-shadow:0 10px 34px rgba(83,214,220,.22)}.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:13px}.login-card h1{font-size:29px;margin:16px 0 5px}.login-card>p{margin:0 0 24px;color:var(--muted)}.login-card label{display:grid;gap:7px;margin:14px 0;color:var(--muted);font-size:13px}input,textarea{outline:none;color:var(--text);background:rgba(8,17,31,.66);border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus{border-color:rgba(94,231,215,.5);box-shadow:0 0 0 3px rgba(94,231,215,.08)}.login-card input{height:48px;border-radius:13px;padding:0 13px}.primary,.ghost{min-height:43px;border-radius:12px;padding:0 14px}.primary{border:0;color:#061316;font-weight:850;background:linear-gradient(135deg,var(--cyan),#6bc7ff);box-shadow:0 8px 24px rgba(74,212,219,.17)}.ghost{border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.025)}.wide{width:100%}.error-text{min-height:20px;margin-top:11px;color:#ff8ea0;font-size:13px}.preview-hint{margin-top:15px;padding:10px;border-radius:10px;background:rgba(155,134,255,.09);border:1px solid rgba(155,134,255,.18);color:#c8bdff;font-size:12px}
.app{position:relative;z-index:1;width:100%;height:100dvh;display:grid;grid-template-columns:278px minmax(0,1fr);padding:10px}.sidebar{min-height:0;display:flex;flex-direction:column;border-radius:24px;padding:14px 12px;margin-right:10px}.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 12px}.brand-row{display:flex;align-items:center;gap:10px}.brand-row strong{font-size:15px}.micro{font-size:10px;color:var(--muted2);margin-top:1px}.new-chat{margin-bottom:4px}.sidebar-section-title{padding:7px 9px 5px;color:var(--muted2);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.conversation-list{flex:1;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:4px;padding-right:2px}.conversation-item{width:100%;border:1px solid transparent;background:transparent;color:#dfe8f7;text-align:left;border-radius:11px;padding:10px 11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.conversation-item:hover{background:rgba(255,255,255,.035)}.conversation-item.active{background:linear-gradient(135deg,rgba(94,231,215,.10),rgba(107,110,255,.08));border-color:rgba(94,231,215,.15)}.sidebar-foot{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:11px}.signed-in{font-size:11px;color:var(--muted);padding:0 5px}
.main{min-width:0;min-height:0;height:calc(100dvh - 20px);display:flex;flex-direction:column;position:relative}.topbar{flex:0 0 auto;height:64px;border-radius:21px;display:flex;align-items:center;gap:11px;padding:7px 10px 7px 15px}.title-wrap{min-width:0;flex:1}.chat-title{font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.subtle{font-size:11px;color:var(--muted2);margin-top:2px}.model-button{height:46px;max-width:360px;display:flex;align-items:center;gap:9px;padding:0 11px;border-radius:14px;border:1px solid var(--line2);color:var(--text);background:linear-gradient(135deg,rgba(35,55,86,.72),rgba(21,33,55,.74))}.model-button:hover{border-color:rgba(94,231,215,.36)}.model-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 16px rgba(94,231,215,.5)}.model-button-text{min-width:0;display:grid;text-align:left}.model-button-text strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.model-button-text small{font-size:10px;color:var(--muted2);white-space:nowrap}.chevron{color:var(--muted);margin-left:3px}.user-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;font-size:13px;font-weight:850;background:linear-gradient(135deg,rgba(94,231,215,.21),rgba(155,134,255,.21));border:1px solid rgba(116,200,244,.25)}
.mode-tabs{flex:0 0 auto;margin-top:9px;border-radius:18px;padding:6px;display:flex;gap:5px;overflow-x:auto;box-shadow:none}.mode-tab{border:0;flex:0 0 auto;padding:9px 14px;border-radius:12px;color:var(--muted);background:transparent;font-size:12px;font-weight:700;white-space:nowrap}.mode-tab:hover{color:var(--text);background:rgba(255,255,255,.035)}.mode-tab.active{color:#07131b;background:linear-gradient(135deg,var(--cyan),#6dbfff);box-shadow:0 7px 19px rgba(63,196,221,.14)}.workspace{flex:1 1 auto;min-height:0;position:relative}.messages{height:100%;overflow-y:auto;padding:18px clamp(10px,3vw,36px) 22px}.welcome-panel{width:min(760px,95%);margin:9vh auto 0;padding:34px;border-radius:30px;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.18)}.welcome-orb{width:58px;height:58px;margin:0 auto 15px;display:grid;place-items:center;border-radius:20px;font-size:26px;color:#08121d;background:linear-gradient(135deg,var(--cyan),#75baff 48%,var(--violet));box-shadow:0 14px 50px rgba(104,163,255,.24)}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}.welcome-panel h1{font-size:clamp(25px,4vw,42px);line-height:1.05;margin:8px 0 12px;background:linear-gradient(135deg,#fff,#b6d8ff 58%,#c1b7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.welcome-panel p{max-width:620px;margin:0 auto;color:var(--muted);line-height:1.55}.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:25px}.quick-actions button{min-height:50px;border-radius:15px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(27,47,75,.56),rgba(13,25,44,.6));color:#dce8f7;text-align:left;padding:0 15px}.quick-actions button:hover{border-color:rgba(94,231,215,.28);transform:translateY(-1px)}
.message-row{max-width:980px;margin:0 auto 18px}.message-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted2);font-size:10px;margin:0 5px 6px}.message-meta strong{font-size:11px;color:#dfe8f8}.message-bubble{padding:14px 15px;border-radius:18px;line-height:1.5;overflow-wrap:anywhere;background:linear-gradient(145deg,rgba(20,34,57,.74),rgba(13,24,42,.75));border:1px solid var(--line);box-shadow:0 9px 30px rgba(0,0,0,.12)}.message-row.user .message-bubble{background:linear-gradient(135deg,rgba(35,99,164,.53),rgba(54,77,145,.42));border-color:rgba(91,161,230,.24)}.text-part{white-space:pre-wrap}.code-card{margin:13px 0;border:1px solid rgba(122,153,195,.18);border-radius:15px;overflow:hidden;background:#070c14}.code-toolbar{min-height:39px;display:flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;background:linear-gradient(90deg,#111b2a,#121827);border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.code-toolbar span{flex:1}.code-toolbar button{height:29px;padding:0 9px;border-radius:8px;border:1px solid var(--line);background:#1a2638;color:#dfe8f8}pre{margin:0;padding:15px;overflow-x:auto;white-space:pre;tab-size:4}code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12.5px;color:#deecff}.message-files{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.file-chip,.pending-file{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;border:1px solid var(--line);background:rgba(31,48,73,.72);color:#d9e8f8;text-decoration:none;font-size:11px}.attachment-tray{flex:0 0 auto;padding:7px 10px 0;display:flex;flex-wrap:wrap;gap:6px}.pending-file button{background:transparent;border:0;color:#ff9db0;padding:0}.composer{flex:0 0 auto;margin-top:8px;border-radius:20px;display:flex;align-items:flex-end;gap:7px;padding:8px;box-shadow:0 16px 50px rgba(0,0,0,.2)}.attach-button,.send-button{width:46px;height:46px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center}.attach-button{border:1px solid var(--line);background:rgba(25,41,65,.75);font-size:22px;color:var(--muted)}.attach-button:hover{color:var(--cyan);border-color:rgba(94,231,215,.28)}#messageInput{flex:1;min-width:0;height:46px;min-height:46px;max-height:36dvh;resize:none;border-radius:14px;padding:12px 13px;line-height:1.35;font-size:16px}.send-button{border:0;background:linear-gradient(135deg,var(--cyan),#68b8ff 56%,var(--violet));color:#061318;font-weight:900;font-size:17px;box-shadow:0 7px 20px rgba(69,196,220,.18)}button:disabled,textarea:disabled{opacity:.52}.icon-button{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:rgba(25,39,61,.72);color:var(--text);font-size:19px}
.coming-soon{width:min(820px,94%);margin:8vh auto 0;padding:35px;border-radius:28px;text-align:center}.coming-icon{width:58px;height:58px;margin:0 auto 15px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,rgba(155,134,255,.8),rgba(255,126,182,.82));font-size:25px}.coming-soon h2{margin:8px 0 9px;font-size:clamp(25px,4vw,38px)}.coming-soon p{max-width:620px;margin:0 auto;color:var(--muted);line-height:1.55}.coming-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.coming-card{padding:17px;border-radius:16px;border:1px solid var(--line);background:rgba(19,33,54,.5);text-align:left}.coming-card span{display:block;color:var(--muted2);font-size:10px;text-transform:uppercase;letter-spacing:.1em}.coming-card strong{display:block;margin-top:5px;font-size:13px}
.model-overlay{position:fixed;inset:0;z-index:50;padding:20px;display:grid;place-items:center;background:rgba(2,7,13,.72);backdrop-filter:blur(10px)}.model-browser{width:min(1120px,100%);height:min(860px,92dvh);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}.model-browser-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:17px 18px 14px;border-bottom:1px solid var(--line)}.model-browser-head h2{margin:3px 0 0;font-size:20px}.model-browser-body{min-height:0;overflow-y:auto;padding:15px}.quick-picks-panel,.all-models-panel{border:1px solid var(--line);border-radius:20px;background:rgba(8,17,30,.36);padding:14px}.all-models-panel{margin-top:12px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:11px}.section-heading strong{display:block}.section-heading span{display:block;margin-top:2px;font-size:10px;color:var(--muted2)}.quick-model-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-group{border:1px solid var(--line);border-radius:15px;padding:11px;background:linear-gradient(145deg,rgba(25,44,70,.52),rgba(11,21,37,.56))}.quick-group-title{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:12px;font-weight:800}.quick-group-list{display:grid;gap:5px}.quick-model{border:0;border-radius:10px;background:rgba(255,255,255,.025);color:#dae6f6;text-align:left;padding:8px 9px}.quick-model:hover{background:rgba(94,231,215,.07)}.model-search-wrap{height:39px;min-width:min(340px,45vw);display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:rgba(8,17,31,.5)}.model-search-wrap input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none;padding:0}.model-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(290px,.82fr);gap:10px;min-height:390px}.model-list{max-height:430px;overflow-y:auto;display:grid;align-content:start;gap:5px;padding-right:2px}.model-row{border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.022);color:var(--text);padding:9px 10px;text-align:left}.model-row:hover{background:rgba(255,255,255,.04)}.model-row.selected{border-color:rgba(94,231,215,.25);background:linear-gradient(135deg,rgba(94,231,215,.08),rgba(126,109,255,.06))}.model-row strong{display:block;font-size:12px}.model-row span{display:block;font-size:10px;color:var(--muted2);margin-top:2px}.model-details{border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(19,34,57,.66),rgba(10,19,33,.7));padding:15px;min-height:260px}.model-details-empty{color:var(--muted2);font-size:12px;line-height:1.5}.details-provider{font-size:10px;color:var(--cyan);text-transform:uppercase;letter-spacing:.12em}.model-details h3{font-size:20px;margin:6px 0 8px}.details-description{color:var(--muted);font-size:12px;line-height:1.55}.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:13px}.detail-card{padding:10px;border:1px solid var(--line);border-radius:11px;background:rgba(5,13,23,.34)}.detail-card span{display:block;font-size:9px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em}.detail-card strong{display:block;margin-top:3px;font-size:11px}.capability-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.capability-chip{padding:5px 7px;border-radius:8px;background:rgba(94,231,215,.065);border:1px solid rgba(94,231,215,.12);font-size:9px;color:#c9f9f0}.use-model{margin-top:14px}
dialog{width:min(94vw,760px);height:min(80dvh,720px);border:1px solid var(--line);border-radius:20px;background:#111c2e;color:var(--text);padding:0}dialog::backdrop{background:rgba(0,0,0,.65)}.dialog-head{height:61px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.activity-list{height:calc(100% - 61px);overflow-y:auto;padding:12px}.activity-item{padding:10px 4px;border-bottom:1px solid var(--line);font-size:12px}
@media(max-width:760px){.mobile-only{display:grid}.app{display:block;padding:7px;height:100dvh}.main{height:calc(100dvh - 14px)}.sidebar{position:fixed;inset:7px auto 7px 7px;z-index:35;width:min(86vw,330px);margin:0;transform:translateX(calc(-100% - 18px));transition:transform .18s ease}.sidebar.open{transform:translateX(0)}.topbar{height:58px;border-radius:18px;padding:6px 8px}.model-button{max-width:44vw;height:42px;padding:0 9px}.model-button-text strong{font-size:10.5px}.model-button-text small{font-size:9px}.user-avatar{display:none}.mode-tabs{margin-top:6px;border-radius:15px;padding:5px}.mode-tab{padding:8px 11px;font-size:11px}.messages{padding:9px 7px 10px}.welcome-panel{width:100%;margin:4vh auto 0;padding:24px 16px;border-radius:22px}.welcome-panel p{font-size:13px}.quick-actions{grid-template-columns:1fr;margin-top:18px}.coming-soon{width:100%;margin:4vh auto 0;padding:25px 17px;border-radius:22px}.coming-grid{grid-template-columns:1fr}.composer{margin-top:6px;border-radius:17px;padding:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}.attach-button,.send-button{width:44px;height:44px;border-radius:13px}#messageInput{height:44px;min-height:44px;max-height:34dvh;padding:11px 12px}.model-overlay{padding:7px}.model-browser{height:calc(100dvh - 14px);border-radius:22px}.model-browser-body{padding:10px}.quick-model-groups{grid-template-columns:1fr}.all-models-heading{display:block}.model-search-wrap{width:100%;min-width:0;margin-top:10px}.model-layout{grid-template-columns:1fr}.model-list{max-height:35dvh}.model-details{min-height:0}}


/* =========================================================
   V3.2 — COLOUR / DEPTH REDESIGN
   Less "dark box inside dark box", more floating glass.
   ========================================================= */

:root{
  --bg:#07172d;
  --bg2:#112f57;
  --panel:rgba(196,224,255,.095);
  --panel-strong:rgba(157,207,255,.16);
  --panel-soft:rgba(255,255,255,.075);
  --line:rgba(207,231,255,.20);
  --line-strong:rgba(207,236,255,.38);
  --text:#f8fbff;
  --muted:#c4d2e4;
  --muted2:#8fa7c3;
  --cyan:#5ff4e4;
  --cyan2:#5ed2ff;
  --violet:#a78bfa;
  --pink:#ff89bd;
  --blue:#68a5ff;
  --gold:#ffc978;
}

html,body{
  background:
    radial-gradient(circle at 10% 18%, rgba(0,224,255,.18), transparent 30%),
    radial-gradient(circle at 87% 24%, rgba(152,95,255,.19), transparent 31%),
    radial-gradient(circle at 50% 100%, rgba(65,128,255,.22), transparent 43%),
    linear-gradient(145deg,#06152a 0%,#0e2d51 44%,#241c52 100%);
}

/* Let the lava actually contribute to the design. */
.blob{opacity:.30;filter:blur(72px)}
.blob-a{background:linear-gradient(135deg,#00e5d0,#168cff)}
.blob-b{background:linear-gradient(135deg,#875cff,#ff68bb)}
.blob-c{background:linear-gradient(135deg,#00b9ff,#6757ff)}
.blob-d{background:linear-gradient(135deg,#4dffd1,#ff8ac6)}

/* Glass is now lighter and more translucent instead of black. */
.glass{
  background:linear-gradient(135deg,rgba(181,220,255,.105),rgba(112,96,207,.075));
  border:1px solid rgba(214,235,255,.20);
  box-shadow:
    0 18px 55px rgba(0,8,24,.19),
    inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}

/* Header: one restrained surface, with colour in it. */
.topbar{
  background:
    linear-gradient(100deg,rgba(14,80,111,.42),rgba(38,60,122,.33) 56%,rgba(87,48,137,.28));
}
.model-button{
  background:rgba(221,239,255,.11);
  border-color:rgba(216,237,255,.24);
}
.model-button:hover{background:rgba(229,243,255,.16)}

/* Tabs become a clean floating ribbon rather than another slab. */
.mode-tabs{
  background:rgba(199,225,255,.075);
  border-color:rgba(220,238,255,.15);
  box-shadow:0 8px 32px rgba(1,10,29,.10);
}
.mode-tab{color:#c5d6ea}
.mode-tab.active{
  background:linear-gradient(110deg,#64f2df 0%,#69c8ff 55%,#9a8cff 100%);
  color:#071727;
  box-shadow:0 9px 24px rgba(65,210,226,.22);
}

/* IMPORTANT: remove the giant dark welcome rectangle completely. */
.welcome-panel{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding-top:22px;
}
.welcome-orb{
  width:68px;height:68px;
  background:linear-gradient(135deg,#68f3df 0%,#70bfff 48%,#aa83ff 100%);
  box-shadow:
    0 20px 55px rgba(91,197,255,.28),
    0 0 80px rgba(157,102,255,.15);
}
.welcome-panel h1{
  background:linear-gradient(105deg,#ffffff 0%,#d9f7ff 38%,#b8ccff 68%,#d8baff 100%);
  -webkit-background-clip:text;background-clip:text;
}
.welcome-panel p{color:#c7d7e9}

/* Quick actions: actual colour, not four identical navy boxes. */
.quick-actions{gap:12px}
.quick-actions button{
  min-height:64px;
  border:1px solid rgba(255,255,255,.16);
  color:white;
  box-shadow:0 12px 30px rgba(1,12,33,.12);
  font-weight:700;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease;
}
.quick-actions button:nth-child(1){
  background:linear-gradient(125deg,rgba(34,193,195,.42),rgba(59,130,246,.32));
}
.quick-actions button:nth-child(2){
  background:linear-gradient(125deg,rgba(102,126,234,.42),rgba(166,92,255,.36));
}
.quick-actions button:nth-child(3){
  background:linear-gradient(125deg,rgba(247,118,87,.34),rgba(236,72,153,.30));
}
.quick-actions button:nth-child(4){
  background:linear-gradient(125deg,rgba(56,189,248,.34),rgba(99,102,241,.35));
}
.quick-actions button:hover{
  filter:brightness(1.12);
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.30);
}

/* Composer: visibly separate from the page without becoming another black block. */
.composer{
  background:
    linear-gradient(115deg,rgba(112,211,255,.15),rgba(126,95,218,.13));
  border-color:rgba(221,238,255,.22);
  box-shadow:0 14px 45px rgba(0,8,28,.20);
}
#messageInput{
  background:rgba(236,246,255,.10);
  border-color:rgba(222,239,255,.17);
}
#messageInput::placeholder{color:#a8bad0}
.attach-button{
  background:rgba(224,242,255,.10);
  border-color:rgba(221,238,255,.18);
}
.send-button{
  background:linear-gradient(135deg,#61f0de,#67c5ff 52%,#a98cff);
  box-shadow:0 9px 27px rgba(84,192,255,.28);
}

/* Conversation bubbles use contrast and colour, not identical slabs. */
.message-bubble{
  background:rgba(218,237,255,.09);
  border-color:rgba(218,238,255,.15);
}
.message-row.user .message-bubble{
  background:linear-gradient(125deg,rgba(49,171,202,.25),rgba(82,104,214,.26));
  border-color:rgba(125,212,239,.26);
}

/* Coming-soon screens float directly on the background too. */
.coming-soon{
  background:rgba(193,221,255,.08);
  border-color:rgba(219,237,255,.16);
}
.coming-card{
  background:rgba(230,243,255,.085);
  border-color:rgba(228,241,255,.15);
}

/* =========================================================
   MODEL BROWSER — dramatically reduce nested rectangles
   ========================================================= */
.model-overlay{
  background:rgba(1,8,20,.48);
  backdrop-filter:blur(18px) saturate(130%);
}
.model-browser{
  background:
    radial-gradient(circle at 12% 8%,rgba(43,212,206,.16),transparent 30%),
    radial-gradient(circle at 92% 14%,rgba(164,91,255,.18),transparent 34%),
    linear-gradient(150deg,rgba(15,51,83,.97),rgba(34,45,89,.97) 55%,rgba(59,37,91,.97));
  border-color:rgba(219,238,255,.23);
}
.model-browser-head{
  background:rgba(232,244,255,.055);
  border-bottom-color:rgba(224,239,255,.14);
}
.model-browser-head .icon-button{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.15);
}

/* Remove the two giant containing boxes. */
.quick-picks-panel,
.all-models-panel{
  background:none !important;
  border:0 !important;
  padding:5px 2px 10px;
}
.all-models-panel{
  margin-top:16px;
  padding-top:18px;
  border-top:1px solid rgba(224,239,255,.16) !important;
}

/* Each category gets its own tinted glass, so the screen reads immediately. */
.quick-model-groups{gap:11px}
.quick-group{
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,10,28,.10);
}
.quick-group:nth-child(1){
  background:linear-gradient(125deg,rgba(37,204,191,.28),rgba(43,128,205,.22));
}
.quick-group:nth-child(2){
  background:linear-gradient(125deg,rgba(111,109,232,.30),rgba(151,86,223,.24));
}
.quick-group:nth-child(3){
  background:linear-gradient(125deg,rgba(239,100,167,.25),rgba(248,134,91,.21));
}
.quick-group:nth-child(4){
  background:linear-gradient(125deg,rgba(52,176,235,.29),rgba(59,107,215,.22));
}
.quick-group:nth-child(5){
  background:linear-gradient(125deg,rgba(245,173,75,.23),rgba(220,92,147,.19));
}
.quick-group-title{
  font-size:13px;
  text-shadow:0 1px 12px rgba(0,0,0,.12);
}
.quick-model{
  background:rgba(244,249,255,.10);
  border:1px solid rgba(255,255,255,.07);
  color:white;
}
.quick-model:hover{
  background:rgba(255,255,255,.17);
}

/* Full catalogue gets one light-glass surface, not layers of black. */
.model-search-wrap{
  background:rgba(235,246,255,.10);
  border-color:rgba(231,244,255,.17);
}
.model-search-wrap input{color:white}
.model-search-wrap input::placeholder{color:#aebfd4}
.model-row{
  background:rgba(235,246,255,.075);
  border-color:rgba(255,255,255,.03);
}
.model-row:hover{background:rgba(242,249,255,.12)}
.model-row.selected{
  background:linear-gradient(110deg,rgba(73,224,207,.18),rgba(109,126,246,.20));
  border-color:rgba(106,232,220,.36);
}
.model-details{
  background:linear-gradient(135deg,rgba(221,240,255,.10),rgba(193,176,255,.08));
  border-color:rgba(230,242,255,.16);
}
.detail-card{
  background:rgba(238,248,255,.075);
  border-color:rgba(236,246,255,.12);
}
.capability-chip{
  background:rgba(88,238,216,.13);
  border-color:rgba(100,235,217,.20);
  color:#ddfffa;
}

/* Sidebar gets a blue-violet wash instead of near-black. */
.sidebar{
  background:
    linear-gradient(165deg,rgba(16,67,96,.74),rgba(28,46,88,.72) 55%,rgba(65,42,100,.67));
}
.conversation-item.active{
  background:linear-gradient(120deg,rgba(91,242,220,.16),rgba(133,111,255,.15));
  border-color:rgba(117,226,224,.20);
}
.ghost{background:rgba(239,248,255,.075)}

/* Mobile: reduce visible chrome and let the colourful page breathe. */
@media(max-width:760px){
  .app{padding:6px}
  .main{height:calc(100dvh - 12px)}
  .topbar{
    background:linear-gradient(100deg,rgba(15,82,110,.35),rgba(75,54,134,.29));
  }
  .welcome-panel{
    margin:2.7vh auto 0;
    padding:17px 12px 8px;
  }
  .welcome-orb{width:60px;height:60px}
  .welcome-panel h1{
    font-size:32px;
    margin-top:12px;
  }
  .welcome-panel p{font-size:14px;line-height:1.5}
  .quick-actions{margin-top:22px;gap:10px}
  .quick-actions button{
    min-height:62px;
    border-radius:17px;
    padding:0 18px;
    font-size:17px;
  }
  .composer{
    background:linear-gradient(110deg,rgba(112,211,255,.15),rgba(153,114,255,.13));
  }
  .model-browser-body{padding:13px}
  .quick-group{
    padding:14px;
    border-radius:18px;
  }
  .quick-model{
    padding:11px 12px;
    border-radius:12px;
    font-size:15px;
  }
  .all-models-panel{margin-top:19px}
  .model-row{padding:12px 13px}
}


/* V3.3 — prompt buttons removed */
.welcome-panel{
  padding-bottom:30px;
}
@media(max-width:760px){
  .welcome-panel{
    padding-bottom:18px;
  }
}


/* V3.4 — personal branding */
.brand-row strong{
  font-size:14px;
  letter-spacing:-0.01em;
}
@media(max-width:760px){
  .brand-row strong{
    font-size:13.5px;
  }
}


/* =========================================================
   V3.5 — usability pass
   ========================================================= */

/* Bigger default conversation/coding composer */
#messageInput{
  height:76px;
  min-height:76px;
  max-height:48dvh;
  padding:15px 15px;
}
.composer{align-items:flex-end}
.attach-button,.send-button{
  width:50px;
  height:50px;
}

/* Copy whole assistant reply, in addition to code-block Copy/Download. */
.meta-spacer{flex:1}
.copy-reply{
  border:0;
  background:transparent;
  color:var(--cyan);
  font-size:10px;
  padding:3px 5px;
}
.copy-reply:hover{text-decoration:underline}

/* Model browser has an explicit first screen: Quick Picks. */
.model-view-tabs{
  display:flex;
  gap:6px;
  padding:4px;
  margin-bottom:14px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(224,239,255,.15);
  background:rgba(234,246,255,.07);
  border-radius:14px;
}
.model-view-tab{
  border:0;
  border-radius:10px;
  padding:9px 15px;
  color:#c7d7e9;
  background:transparent;
  font-weight:800;
  font-size:12px;
}
.model-view-tab.active{
  color:#071727;
  background:linear-gradient(110deg,#64f2df,#69c8ff 55%,#9a8cff);
}
.common-model-details{
  margin-top:12px;
}
.all-models-panel .model-list{
  max-height:42dvh;
}

/* Creative tabs now show their real prompt/editor layout. */
.mode-workbench{
  height:100%;
  overflow-y:auto;
  padding:clamp(18px,3vw,34px);
}
.mode-workbench-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  max-width:1080px;
  margin:18px auto 20px;
}
.mode-workbench-head h2{
  margin:6px 0 6px;
  font-size:clamp(28px,4vw,44px);
}
.mode-workbench-head p{
  margin:0;
  color:var(--muted);
}
.preview-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.075);
  color:#b9cbe0;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}
.creative-grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr);
  gap:14px;
}
.creative-main,.creative-side{
  border-radius:24px;
  padding:18px;
}
.field-label{
  display:block;
  margin-bottom:8px;
  color:#ddecfb;
  font-size:12px;
  font-weight:800;
}
.mode-prompt{
  width:100%;
  min-height:190px;
  resize:vertical;
  border-radius:18px;
  padding:16px;
  font-size:16px;
  line-height:1.5;
  background:rgba(235,246,255,.10);
  border:1px solid rgba(225,241,255,.17);
}
.mode-options{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.option-pill{
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(226,241,255,.15);
  background:rgba(237,247,255,.07);
  color:#cbd9ea;
}
.option-pill.active{
  color:#071727;
  background:linear-gradient(110deg,#64f2df,#6fc5ff);
  border-color:transparent;
}
.creative-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.creative-attach{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid rgba(226,241,255,.15);
  background:rgba(236,247,255,.07);
  color:#d8e5f4;
  cursor:pointer;
}
.generate-preview{
  min-width:130px;
  min-height:44px;
}
.creative-side{
  display:grid;
  align-content:start;
  gap:10px;
}
.creative-stat{
  padding:13px;
  border-radius:14px;
  background:rgba(236,247,255,.075);
  border:1px solid rgba(232,244,255,.11);
}
.creative-stat span{
  display:block;
  color:var(--muted2);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.creative-stat strong{
  display:block;
  margin-top:5px;
  font-size:12px;
}
.creative-note{
  margin:5px 2px 0;
  color:var(--muted);
  line-height:1.5;
  font-size:11px;
}

@media(max-width:760px){
  #messageInput{
    height:78px;
    min-height:78px;
    max-height:48dvh;
    padding:15px 14px;
  }
  .attach-button,.send-button{
    width:48px;
    height:48px;
  }
  .model-view-tabs{
    width:100%;
  }
  .model-view-tab{
    flex:1;
    padding:10px 8px;
  }
  .common-model-details{margin-top:10px}
  .mode-workbench{
    padding:10px 7px 14px;
  }
  .mode-workbench-head{
    margin:12px 5px 15px;
  }
  .mode-workbench-head h2{
    font-size:30px;
  }
  .preview-badge{
    display:none;
  }
  .creative-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .creative-main,.creative-side{
    border-radius:19px;
    padding:14px;
  }
  .mode-prompt{
    min-height:180px;
    font-size:16px;
  }
  .creative-actions{
    align-items:stretch;
  }
  .creative-attach{
    flex:1;
  }
}


/* V3.6 — model selector is active in every workspace */
.model-button,
.model-button:disabled{
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  filter:none !important;
  color:var(--text) !important;
}


/* =========================================================
   V3.7 — actual lava-lamp bubbles
   ========================================================= */

.ambient{
  z-index:0;
  overflow:hidden;
  filter:none;
}

.blob{
  opacity:.46;
  filter:blur(18px);
  mix-blend-mode:screen;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 55px rgba(255,255,255,.08),
    0 0 65px rgba(91,190,255,.12);
}

.blob-a{
  width:34vw;
  height:34vw;
  min-width:250px;
  min-height:250px;
  left:-8vw;
  top:-10vw;
  background:
    radial-gradient(circle at 32% 28%,rgba(151,255,239,.74),rgba(61,173,255,.48) 42%,rgba(80,91,255,.22) 72%,rgba(80,91,255,0) 100%);
  animation:lavaBubbleA 23s ease-in-out infinite alternate;
}

.blob-b{
  width:30vw;
  height:30vw;
  min-width:230px;
  min-height:230px;
  right:-7vw;
  top:16vh;
  background:
    radial-gradient(circle at 38% 34%,rgba(255,173,230,.68),rgba(161,105,255,.50) 44%,rgba(102,72,255,.18) 76%,rgba(102,72,255,0) 100%);
  animation:lavaBubbleB 27s ease-in-out infinite alternate;
}

.blob-c{
  width:28vw;
  height:28vw;
  min-width:220px;
  min-height:220px;
  left:22vw;
  bottom:-12vw;
  background:
    radial-gradient(circle at 35% 30%,rgba(92,242,255,.70),rgba(67,125,255,.46) 45%,rgba(75,72,255,.16) 78%,rgba(75,72,255,0) 100%);
  animation:lavaBubbleC 29s ease-in-out infinite alternate;
}

.blob-d{
  width:21vw;
  height:21vw;
  min-width:170px;
  min-height:170px;
  right:22vw;
  bottom:8vh;
  background:
    radial-gradient(circle at 34% 30%,rgba(146,255,218,.68),rgba(118,164,255,.42) 48%,rgba(192,105,255,.16) 80%,rgba(192,105,255,0) 100%);
  animation:lavaBubbleD 25s ease-in-out infinite alternate;
}

@keyframes lavaBubbleA{
  0%{
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
    border-radius:46% 54% 61% 39% / 44% 57% 43% 56%;
  }
  50%{
    transform:translate3d(12vw,13vh,0) scale(1.08) rotate(18deg);
    border-radius:58% 42% 45% 55% / 61% 38% 62% 39%;
  }
  100%{
    transform:translate3d(18vw,25vh,0) scale(.96) rotate(34deg);
    border-radius:39% 61% 57% 43% / 48% 62% 38% 52%;
  }
}

@keyframes lavaBubbleB{
  0%{
    transform:translate3d(0,0,0) scale(1);
    border-radius:52% 48% 43% 57% / 41% 63% 37% 59%;
  }
  50%{
    transform:translate3d(-10vw,10vh,0) scale(.93) rotate(-17deg);
    border-radius:41% 59% 58% 42% / 56% 43% 57% 44%;
  }
  100%{
    transform:translate3d(-17vw,22vh,0) scale(1.08) rotate(-31deg);
    border-radius:62% 38% 46% 54% / 39% 56% 44% 61%;
  }
}

@keyframes lavaBubbleC{
  0%{
    transform:translate3d(0,0,0) scale(.92);
    border-radius:47% 53% 40% 60% / 57% 42% 58% 43%;
  }
  50%{
    transform:translate3d(-8vw,-10vh,0) scale(1.04) rotate(14deg);
    border-radius:59% 41% 55% 45% / 44% 63% 37% 56%;
  }
  100%{
    transform:translate3d(-15vw,-20vh,0) scale(1.12) rotate(27deg);
    border-radius:43% 57% 62% 38% / 61% 46% 54% 39%;
  }
}

@keyframes lavaBubbleD{
  0%{
    transform:translate3d(0,0,0) scale(1);
    border-radius:56% 44% 49% 51% / 40% 58% 42% 60%;
  }
  50%{
    transform:translate3d(7vw,-10vh,0) scale(1.1) rotate(-15deg);
    border-radius:42% 58% 63% 37% / 61% 39% 59% 41%;
  }
  100%{
    transform:translate3d(12vw,-18vh,0) scale(.95) rotate(-29deg);
    border-radius:63% 37% 44% 56% / 48% 61% 39% 52%;
  }
}

@media(max-width:760px){
  .blob{
    opacity:.42;
    filter:blur(14px);
  }
  .blob-a{
    width:270px;height:270px;left:-110px;top:110px;
  }
  .blob-b{
    width:230px;height:230px;right:-95px;top:34vh;
  }
  .blob-c{
    width:220px;height:220px;left:-55px;bottom:-55px;
  }
  .blob-d{
    width:175px;height:175px;right:12px;bottom:22vh;
  }
}


/* =========================================================
   V3.8 — stable Android lava orbs
   Radial-gradient edges + transform-only animation.
   No blend mode, no blur filter, no animated border-radius.
   ========================================================= */

.blob{
  mix-blend-mode:normal !important;
  filter:none !important;
  opacity:.30 !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:50% !important;
  backface-visibility:hidden;
  will-change:transform;
}

.blob-a{
  background:radial-gradient(circle at 35% 30%,
    rgba(126,255,235,.72) 0%,
    rgba(61,181,255,.40) 43%,
    rgba(61,113,255,.12) 72%,
    rgba(61,113,255,0) 100%) !important;
  animation:stableOrbA 34s ease-in-out infinite alternate !important;
}
.blob-b{
  background:radial-gradient(circle at 38% 34%,
    rgba(255,162,223,.58) 0%,
    rgba(169,109,255,.36) 46%,
    rgba(115,80,255,.10) 74%,
    rgba(115,80,255,0) 100%) !important;
  animation:stableOrbB 38s ease-in-out infinite alternate !important;
}
.blob-c{
  background:radial-gradient(circle at 37% 33%,
    rgba(104,237,255,.62) 0%,
    rgba(71,133,255,.35) 47%,
    rgba(78,72,255,.10) 75%,
    rgba(78,72,255,0) 100%) !important;
  animation:stableOrbC 40s ease-in-out infinite alternate !important;
}
.blob-d{
  background:radial-gradient(circle at 36% 32%,
    rgba(143,255,217,.58) 0%,
    rgba(124,168,255,.31) 48%,
    rgba(186,108,255,.08) 77%,
    rgba(186,108,255,0) 100%) !important;
  animation:stableOrbD 36s ease-in-out infinite alternate !important;
}

@keyframes stableOrbA{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(14vw,15vh,0) scale(1.06)}
}
@keyframes stableOrbB{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-12vw,14vh,0) scale(.95)}
}
@keyframes stableOrbC{
  from{transform:translate3d(0,0,0) scale(.97)}
  to{transform:translate3d(-10vw,-13vh,0) scale(1.06)}
}
@keyframes stableOrbD{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(9vw,-14vh,0) scale(.96)}
}

@media(max-width:760px){
  .blob{opacity:.24 !important}
}
@media(prefers-reduced-motion:reduce){
  .blob{animation:none !important}
}


/* =========================================================
   V3.9 — per-category favourite/default model stars
   ========================================================= */

.quick-model-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:5px;
  align-items:stretch;
}

.quick-model-row .quick-model{
  width:100%;
}

.favorite-star{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.055);
  color:#9fb0c6;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0;
}
.favorite-star:hover{
  color:#ffd77e;
  background:rgba(255,210,100,.09);
}
.favorite-star.active{
  color:#ffd36a;
  background:linear-gradient(135deg,rgba(255,199,89,.18),rgba(255,142,96,.10));
  border-color:rgba(255,213,115,.25);
  text-shadow:0 0 13px rgba(255,205,92,.35);
}

.model-detail-actions{
  display:grid;
  grid-template-columns:auto minmax(150px,1fr);
  gap:8px;
  margin-top:14px;
}
.model-detail-actions .use-model{
  margin-top:0;
  width:100%;
}
.favorite-default{
  min-height:43px;
  padding:0 13px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.065);
  color:#d5e1ef;
  font-weight:750;
}
.favorite-default:hover{
  border-color:rgba(255,211,106,.28);
  color:#ffe09a;
}
.favorite-default.active{
  color:#ffdf8a;
  background:rgba(255,199,89,.10);
  border-color:rgba(255,211,106,.22);
}

@media(max-width:760px){
  .quick-model-row{
    grid-template-columns:minmax(0,1fr) 44px;
  }
  .favorite-star{
    font-size:22px;
    border-radius:12px;
  }
  .model-detail-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4 — per-user custom Quick Picks
   ========================================================= */
.manage-quick-picks{
  width:100%; margin-top:8px; padding:8px 9px; border:0; border-top:1px solid rgba(255,255,255,.09);
  background:transparent; color:#b9cbe1; text-align:left; font-size:10px; font-weight:750;
}
.manage-quick-picks:hover{color:var(--cyan)}

.model-list-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:stretch;
  border:1px solid transparent; border-radius:12px; background:rgba(235,246,255,.06);
}
.model-list-row:hover{background:rgba(242,249,255,.10)}
.model-list-row.selected{
  border-color:rgba(94,231,215,.25);
  background:linear-gradient(110deg,rgba(73,224,207,.13),rgba(109,126,246,.14));
}
.model-row-main{
  min-width:0; border:0; background:transparent; color:var(--text); text-align:left; padding:10px 11px;
}
.model-row-main strong{display:block;font-size:12px}
.model-row-main span{display:block;font-size:10px;color:var(--muted2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-toggle{
  align-self:center; min-width:74px; height:32px; margin-right:7px; padding:0 8px; border-radius:9px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); color:#c5d4e5; font-size:10px; font-weight:800;
}
.quick-toggle:hover{border-color:rgba(94,231,215,.30);color:#dffff9}
.quick-toggle.active{background:rgba(94,231,215,.12);border-color:rgba(94,231,215,.23);color:#bcfff5}

.model-detail-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.quick-detail-toggle{
  min-height:43px; padding:0 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.065); color:#d7e4f2; font-weight:750;
}
.quick-detail-toggle:hover{border-color:rgba(94,231,215,.28);color:#cffff7}
.quick-detail-toggle.active{background:rgba(94,231,215,.10);border-color:rgba(94,231,215,.22);color:#c7fff6}

@media(max-width:760px){
  .model-list-row{grid-template-columns:minmax(0,1fr) 72px}
  .quick-toggle{min-width:65px;margin-right:5px;padding:0 5px;font-size:9px}
  .model-detail-actions{grid-template-columns:1fr}
}

/* =========================================================
   V5 — admin user management + forced password change
   ========================================================= */
.force-label{margin-top:18px}
.password-change-logout{margin-top:9px}

.users-dialog{
  width:min(96vw,920px);
  height:min(88dvh,820px);
}
.users-dialog-body{
  height:calc(100% - 61px);
  overflow-y:auto;
  padding:14px;
  display:grid;
  gap:14px;
  align-content:start;
}
.create-user-panel,.user-list-panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(235,246,255,.055);
  padding:14px;
}
.create-user-form{
  display:grid;
  grid-template-columns:1fr 1fr 150px;
  gap:10px;
  align-items:end;
}
.create-user-form label{display:grid;gap:6px}
.create-user-form label>span{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.create-user-form input,.create-user-form select{
  height:42px;border-radius:11px;padding:0 11px;border:1px solid var(--line);background:rgba(8,17,31,.48);color:var(--text)
}
.temp-password-label{grid-column:1/3}
.password-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.password-row .ghost{min-width:96px}
.force-change-note{
  align-self:center;
  min-height:42px;
  display:flex;
  align-items:center;
  color:#c9f9f0;
  font-size:11px;
}
.create-user-button{grid-column:3;grid-row:2}
.admin-message{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,211,106,.22);
  background:linear-gradient(135deg,rgba(255,199,89,.10),rgba(94,231,215,.07));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 10px;
  align-items:center;
}
.admin-message small{grid-column:1/-1;color:var(--muted);line-height:1.4}
.credential-text{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;overflow-wrap:anywhere}
.credential-copy{width:auto;padding:0 12px}
.user-list{display:grid;gap:8px}
.user-admin-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(226,241,255,.11);
  background:rgba(236,247,255,.055);
}
.user-admin-main strong{display:block;font-size:13px}
.user-admin-meta{margin-top:3px;color:var(--muted2);font-size:10px;line-height:1.4}
.user-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.user-badge{padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;border:1px solid rgba(255,255,255,.09)}
.user-badge.active{color:#bffff0;background:rgba(85,223,163,.09);border-color:rgba(85,223,163,.18)}
.user-badge.disabled{color:#ffafbd;background:rgba(255,113,137,.08);border-color:rgba(255,113,137,.17)}
.user-badge.password-due{color:#ffe09a;background:rgba(255,201,120,.08);border-color:rgba(255,201,120,.18)}
.user-admin-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.user-admin-actions .ghost{width:auto;padding:0 10px;min-height:36px;font-size:10px}

@media(max-width:760px){
  .users-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none}
  .users-dialog-body{padding:10px}
  .create-user-form{grid-template-columns:1fr}
  .temp-password-label,.create-user-button{grid-column:auto;grid-row:auto}
  .force-change-note{min-height:30px}
  .user-admin-row{grid-template-columns:1fr}
  .user-admin-actions{justify-content:stretch}
  .user-admin-actions .ghost{flex:1}
  .admin-message{grid-template-columns:1fr}
  .admin-message small{grid-column:auto}
  .credential-copy{width:100%}
}


/* =========================================================
   V6.1 — model capability clarity
   ========================================================= */
.catalogue-tools{
  display:flex;
  gap:9px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.compatible-toggle{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid rgba(231,244,255,.17);
  border-radius:11px;
  background:rgba(235,246,255,.08);
  color:#d7e4f3;
  font-size:11px;
  white-space:nowrap;
}
.compatible-toggle input{
  accent-color:#63eadb;
}
.model-list-empty{
  padding:20px 14px;
  border:1px dashed rgba(225,240,255,.16);
  border-radius:13px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.capability-box{
  display:grid;
  gap:8px;
  margin-top:13px;
}
.capability-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.capability-label{
  padding-top:5px;
  color:var(--muted2);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.capability-row .capability-chips{
  margin-top:0;
}
.capability-chip.input-cap{
  background:rgba(92,174,255,.10);
  border-color:rgba(105,184,255,.18);
  color:#d9ecff;
}
.capability-chip.output-cap{
  background:rgba(94,231,215,.11);
  border-color:rgba(94,231,215,.21);
  color:#d7fff8;
}
@media(max-width:760px){
  .catalogue-tools{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  .compatible-toggle{
    width:max-content;
  }
  .capability-row{
    grid-template-columns:1fr;
    gap:3px;
  }
}

/* =========================================================
   V7 — real image/video generation controls and results
   ========================================================= */
.compact-label{margin-top:14px;margin-bottom:6px}
.media-control-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}
.media-control{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.media-control select{
  width:100%;
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(225,241,255,.16);
  background:rgba(236,247,255,.08);
  color:var(--text);
  padding:0 11px;
  text-transform:none;
  letter-spacing:normal;
  font-size:13px;
}
.media-toggle{
  min-height:42px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid rgba(225,241,255,.14);
  border-radius:12px;
  background:rgba(236,247,255,.06);
  text-transform:none;
  letter-spacing:normal;
  font-size:12px;
}
.media-toggle input{accent-color:var(--cyan)}
.media-reference-tray{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.media-ref-chip{
  max-width:100%;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(103,202,255,.10);
  border:1px solid rgba(139,216,255,.17);
  color:#ddecfb;
  font-size:11px;
}
.media-ref-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-ref-chip button{
  border:0;
  background:transparent;
  color:#ff9eb1;
  padding:0;
  font-size:16px;
}
.media-status{
  min-height:18px;
  margin:10px 2px 0;
  color:#bcd1e7;
  font-size:11px;
}
.creative-attach:has(input:disabled){
  opacity:.45;
  cursor:not-allowed;
}
.media-result{
  max-width:1080px;
  margin:14px auto 28px;
}
.generated-media-card{
  border-radius:24px;
  padding:12px;
  overflow:hidden;
}
.generated-image,
.generated-video{
  display:block;
  width:100%;
  max-height:72dvh;
  object-fit:contain;
  border-radius:17px;
  background:rgba(4,10,18,.55);
}
.generated-media-meta{
  display:grid;
  gap:5px;
  padding:12px 5px 4px;
}
.generated-media-meta strong{font-size:13px}
.generated-media-meta>span{font-size:10px;color:var(--muted)}
.generated-media-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}
.generated-media-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:37px;
  padding:0 13px;
  border-radius:10px;
  text-decoration:none;
  color:#071727;
  font-weight:800;
  font-size:11px;
  background:linear-gradient(110deg,#64f2df,#69c8ff 55%,#9a8cff);
}
@media(max-width:760px){
  .media-control-grid{grid-template-columns:1fr 1fr}
  .media-result{margin:10px 7px 22px}
  .generated-media-card{border-radius:20px;padding:8px}
  .generated-image,.generated-video{border-radius:14px;max-height:62dvh}
}


/* =========================================================
   V7.1 — model descriptions, capability strengths
   ========================================================= */
.details-description-wrap{
  margin-top:2px;
}
.details-description{
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.details-description.collapsed{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}
.description-toggle{
  margin-top:6px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--cyan);
  font-size:11px;
  font-weight:750;
}
.description-toggle:disabled{
  opacity:.6;
}
.capability-chip.strength-cap{
  background:rgba(255,204,112,.11);
  border-color:rgba(255,204,112,.20);
  color:#ffe6b1;
}


/* =========================================================
   V7.2 — one clear credit figure only
   ========================================================= */
.status-row{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin-top:2px;
}
.status-row .subtle{
  margin-top:0;
}
.credit-balance{
  display:inline-flex;
  align-items:center;
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:#76f2d9;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 0 18px rgba(94,231,215,.20);
}
@media(max-width:760px){
  .credit-balance{
    font-size:11.5px;
  }
}


/* V7.3 — clearer credit label */
.credit-balance{
  gap:4px;
  font-weight:600;
}
.credit-label{
  color:var(--muted);
  font-weight:650;
}
.credit-value{
  color:#76f2d9;
  font-weight:900;
}


/* V7.4 — model picker guidance */
.model-warning{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  line-height:1.35;
}
@media(max-width:760px){
  .model-warning{font-size:10.5px;max-width:245px;}
}


/* =========================================================
   V7.5 — mobile model-details reveal
   ========================================================= */
@media(max-width:760px){
  .model-details{
    scroll-margin-top:82px;
  }
}


/* =========================================================
   V7.6 — reliable Android model-details scrolling
   ========================================================= */
@media(max-width:760px){
  .model-browser-body{
    scroll-behavior:smooth;
    overscroll-behavior:contain;
  }
  .model-details{
    scroll-margin-top:12px;
  }
}


/* =========================================================
   V7.7 — model cost tiers
   $ < $5/M output, $$ $5–$20/M, $$$ > $20/M
   ========================================================= */
.cost-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:21px;
  padding:0 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.13);
  flex:0 0 auto;
}
.cost-1{
  color:#9df3d4;
  background:rgba(69,214,159,.10);
  border-color:rgba(91,230,178,.18);
}
.cost-2{
  color:#ffd98a;
  background:rgba(255,191,77,.10);
  border-color:rgba(255,202,96,.20);
}
.cost-3{
  color:#ff9eae;
  background:rgba(255,88,121,.12);
  border-color:rgba(255,114,139,.23);
}
.quick-model{
  display:flex;
  align-items:center;
  gap:8px;
}
.quick-model-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
  text-align:left;
}
.model-row-main{
  position:relative;
  padding-right:58px;
}
.model-row-main>.cost-badge{
  position:absolute;
  top:9px;
  right:9px;
}
.model-title-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.model-title-row h3{
  margin-right:auto;
}
.high-cost-note{
  align-self:center;
  color:#ff9eae;
  font-size:9px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:0 5px;
  white-space:nowrap;
}
.high-cost-warning{
  grid-column:1/-1;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(255,114,139,.20);
  background:rgba(255,88,121,.08);
  color:#ffb1bd;
  font-size:10px;
  line-height:1.4;
}


/* =========================================================
   V7.8 — reliable model description expansion
   ========================================================= */
.details-description:not(.collapsed){
  display:block;
  overflow:visible;
  max-height:none;
  -webkit-line-clamp:unset;
  -webkit-box-orient:initial;
}
.description-toggle.loading-detail::after{
  content:" · updating";
  color:var(--muted2);
  font-weight:600;
}


/* =========================================================
   V8.0 — app-wide Quick Picks and defaults
   ========================================================= */
.model-admin-note{
  margin-top:5px;
  font-size:10px;
  line-height:1.35;
  color:var(--muted2);
  font-weight:650;
}
.favorite-star.readonly{
  cursor:default;
  pointer-events:none;
  opacity:.9;
}


/* =========================================================
   V8.1 — Markdown replies + visible thinking state
   ========================================================= */
.message-bubble p{
  margin:0 0 10px;
}
.message-bubble p:last-child{
  margin-bottom:0;
}
.message-bubble .md-heading{
  margin:17px 0 8px;
  color:#f1f7ff;
  line-height:1.22;
  letter-spacing:-.01em;
}
.message-bubble .md-heading:first-child{
  margin-top:0;
}
.message-bubble h2.md-heading{font-size:18px}
.message-bubble h3.md-heading{font-size:16px}
.message-bubble h4.md-heading,
.message-bubble h5.md-heading{font-size:14px}
.message-bubble strong{
  color:#f5fbff;
  font-weight:800;
}
.message-bubble em{
  color:#d8e7f7;
}
.message-bubble a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(94,231,215,.32);
}
.message-bubble .inline-code{
  padding:2px 5px;
  border-radius:6px;
  background:rgba(4,10,18,.55);
  border:1px solid rgba(122,153,195,.15);
  color:#cfe9ff;
  font-size:.92em;
}
.md-list{
  margin:8px 0 12px 21px;
  padding:0;
}
.md-list li{
  margin:5px 0;
  padding-left:2px;
}
.message-bubble blockquote{
  margin:10px 0;
  padding:9px 12px;
  border-left:3px solid var(--cyan);
  border-radius:0 10px 10px 0;
  background:rgba(64,211,210,.06);
  color:#cbd9e9;
}
.message-bubble hr{
  border:0;
  border-top:1px solid var(--line);
  margin:15px 0;
}
.md-table-wrap{
  overflow-x:auto;
  margin:11px 0 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(6,13,24,.32);
}
.md-table{
  width:100%;
  min-width:430px;
  border-collapse:collapse;
  font-size:12px;
  line-height:1.4;
}
.md-table th,
.md-table td{
  padding:9px 10px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(122,153,195,.12);
  border-right:1px solid rgba(122,153,195,.09);
}
.md-table th:last-child,
.md-table td:last-child{
  border-right:0;
}
.md-table tr:last-child td{
  border-bottom:0;
}
.md-table th{
  color:#f3f8ff;
  font-weight:800;
  background:rgba(79,129,184,.14);
}
.md-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.018);
}

.thinking-row{
  animation:thinkingAppear .18s ease-out;
}
.thinking-bubble{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  color:#c9d9e9;
  border-color:rgba(94,231,215,.18);
}
.thinking-label{
  font-size:12px;
  font-weight:700;
}
.thinking-dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.thinking-dots i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan);
  opacity:.35;
  animation:thinkingDot 1.2s infinite ease-in-out;
}
.thinking-dots i:nth-child(2){animation-delay:.16s}
.thinking-dots i:nth-child(3){animation-delay:.32s}
@keyframes thinkingDot{
  0%,70%,100%{transform:translateY(0);opacity:.28}
  35%{transform:translateY(-4px);opacity:1}
}
@keyframes thinkingAppear{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .thinking-row,.thinking-dots i{animation:none!important}
  .thinking-dots i{opacity:.7}
}


/* =========================================================
   V8.2 — conversation readability pass
   Keep the app identity, but let the answer be the interface.
   ========================================================= */

/* Give long-form answers a comfortable reading measure. */
.message-row{
  max-width:850px;
  margin-left:auto;
  margin-right:auto;
}

/* Assistant content should read like a document, not a glass card. */
.message-row.assistant .message-bubble{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:5px 3px 14px;
  font-size:16px;
  line-height:1.66;
  color:#edf4fc;
  overflow-wrap:break-word;
}

/* User messages can remain visually distinct and compact. */
.message-row.user{
  max-width:850px;
}
.message-row.user .message-bubble{
  width:fit-content;
  max-width:min(88%,760px);
  margin-left:auto;
  padding:12px 14px;
  border-radius:18px 18px 6px 18px;
  font-size:15px;
  line-height:1.55;
}

/* Metadata becomes secondary rather than competing with the answer. */
.message-row.assistant .message-meta{
  margin:0 3px 4px;
  min-height:20px;
  color:#8ea5c1;
  font-size:10px;
}
.message-row.assistant .message-meta strong{
  color:#bdd0e7;
  font-weight:750;
}
.message-model-name{
  color:#91abc8;
}
.copy-reply{
  opacity:.72;
}
.copy-reply:hover{
  opacity:1;
}

/* Paragraph rhythm is much closer to a reading app. */
.message-row.assistant .message-bubble p{
  margin:0 0 13px;
}
.message-row.assistant .message-bubble p:last-child{
  margin-bottom:0;
}

/* Headings should be obvious, but not enormous. */
.message-row.assistant .message-bubble .md-heading{
  margin:22px 0 9px;
  color:#ffffff;
  font-weight:820;
  line-height:1.22;
  letter-spacing:-.015em;
}
.message-row.assistant .message-bubble .md-heading:first-child{
  margin-top:1px;
}
.message-row.assistant .message-bubble h2.md-heading{font-size:21px}
.message-row.assistant .message-bubble h3.md-heading{font-size:18px}
.message-row.assistant .message-bubble h4.md-heading,
.message-row.assistant .message-bubble h5.md-heading{font-size:16px}

/* Bold should guide the eye instead of turning every cell pure white. */
.message-row.assistant .message-bubble strong{
  color:#ffffff;
  font-weight:780;
}

/* Lists need breathing room. */
.message-row.assistant .md-list{
  margin:7px 0 15px 22px;
}
.message-row.assistant .md-list li{
  margin:7px 0;
  padding-left:3px;
}

/* Table treatment: compact, readable and horizontally scrollable only when needed. */
.message-row.assistant .md-table-wrap{
  width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  margin:16px 0 18px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.message-row.assistant .md-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  table-layout:auto;
  font-size:13.5px;
  line-height:1.48;
}
.message-row.assistant .md-table th,
.message-row.assistant .md-table td{
  padding:10px 11px;
  text-align:left;
  vertical-align:top;
  border-right:0;
  border-bottom:1px solid rgba(190,214,242,.17);
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}
.message-row.assistant .md-table th{
  color:#ffffff;
  font-weight:800;
  background:rgba(182,217,255,.07);
  border-bottom-color:rgba(203,225,250,.30);
}
.message-row.assistant .md-table tbody tr:nth-child(even){
  background:rgba(211,231,255,.025);
}
.message-row.assistant .md-table th:first-child,
.message-row.assistant .md-table td:first-child{
  padding-left:4px;
}
.message-row.assistant .md-table th:last-child,
.message-row.assistant .md-table td:last-child{
  padding-right:4px;
}

/* Keep code visually separated because it benefits from a container. */
.message-row.assistant .code-card{
  margin:16px 0 18px;
}

/* Thinking state should feel light, not like another answer card. */
.message-row.assistant.thinking-row .message-bubble{
  padding:7px 3px 10px;
}
.thinking-bubble{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Mobile: use the width we've got and preserve comfortable type. */
@media(max-width:760px){
  .messages{
    padding:11px 16px 14px;
  }
  .message-row{
    margin-bottom:22px;
  }
  .message-row.assistant .message-bubble{
    font-size:16.5px;
    line-height:1.68;
    padding-left:0;
    padding-right:0;
  }
  .message-row.assistant .message-meta{
    margin-left:0;
    margin-right:0;
  }
  .message-row.user .message-bubble{
    max-width:92%;
    font-size:15.5px;
  }

  /* A comparison table may legitimately be wider than a phone.
     Scroll it sideways; never split normal words into fragments. */
  .message-row.assistant .md-table{
    min-width:520px;
    font-size:13px;
  }
  .message-row.assistant .md-table th,
  .message-row.assistant .md-table td{
    padding:9px 10px;
  }
}

/* Very narrow phones get a little more page width. */
@media(max-width:390px){
  .messages{
    padding-left:12px;
    padding-right:12px;
  }
}


/* =========================================================
   V8.3 — SOFT MIDNIGHT THEME
   Lower saturation, calmer surfaces, gentler contrast.
   ========================================================= */

:root{
  --bg:#10151c;
  --panel:rgba(24,30,39,.82);
  --line:rgba(222,231,240,.09);
  --line2:rgba(222,231,240,.14);
  --text:#e8edf2;
  --muted:#a5afb9;
  --muted2:#7e8995;
  --cyan:#91bbb5;
  --violet:#9895aa;
  --pink:#b997a6;
  --blue:#879fb5;
  --danger:#d18f9b;
  --shadow:0 18px 55px rgba(0,0,0,.22);
}

html,body{
  background:
    radial-gradient(circle at 12% -8%,rgba(101,133,151,.08),transparent 36%),
    linear-gradient(155deg,#10151c 0%,#121922 50%,#10161e 100%) !important;
  color:var(--text);
}

/* Ambient colour becomes almost subliminal. */
.ambient{
  filter:saturate(65%) !important;
  opacity:.72;
}
.blob{
  opacity:.07 !important;
  filter:blur(70px) saturate(65%) !important;
}
.blob-a{background:linear-gradient(135deg,#6d9993,#63788d) !important}
.blob-b{background:linear-gradient(135deg,#77778c,#8d7683) !important}
.blob-c{background:linear-gradient(135deg,#668b9b,#707488) !important}
.blob-d{background:linear-gradient(135deg,#72938b,#7c788d) !important}

/* Glass becomes a subtle translucent surface instead of a neon panel. */
.glass{
  background:linear-gradient(145deg,rgba(29,36,46,.84),rgba(20,26,34,.80)) !important;
  border-color:rgba(226,234,242,.085) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(18px) saturate(105%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(105%) !important;
}

/* Header / sidebar */
.topbar,
.sidebar{
  background:linear-gradient(145deg,rgba(28,35,44,.88),rgba(21,27,35,.86)) !important;
  border-color:rgba(225,234,242,.085) !important;
}
.chat-title{color:#f0f3f6}
.subtle,.micro,.signed-in{color:#8d98a5}

.model-button{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(225,234,242,.10) !important;
  box-shadow:none !important;
}
.model-button:hover{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(153,185,190,.20) !important;
}
.model-dot{
  background:#92b8b2 !important;
  box-shadow:0 0 10px rgba(146,184,178,.22) !important;
}
.user-avatar{
  background:rgba(145,187,181,.10) !important;
  border-color:rgba(145,187,181,.15) !important;
  color:#dfe9e7;
}

/* Tabs: calm selected state, no bright cyan-purple pill. */
.mode-tabs{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(225,234,242,.07) !important;
  box-shadow:none !important;
}
.mode-tab{
  color:#a7b1bc !important;
}
.mode-tab:hover{
  color:#e4e9ee !important;
  background:rgba(255,255,255,.035) !important;
}
.mode-tab.active{
  color:#eaf1f0 !important;
  background:rgba(124,160,157,.18) !important;
  border:1px solid rgba(146,184,178,.16) !important;
  box-shadow:none !important;
}

/* Conversation background and reading text. */
.workspace{
  background:transparent !important;
}
.message-row.assistant .message-bubble{
  color:#e2e7ec !important;
}
.message-row.assistant .message-bubble .md-heading,
.message-row.assistant .message-bubble strong{
  color:#f0f3f5 !important;
}
.message-row.assistant .message-meta strong{
  color:#b8c1ca !important;
}
.message-row.assistant .message-meta,
.message-model-name{
  color:#7f8c99 !important;
}

/* User bubble: distinguish it without glowing. */
.message-row.user .message-bubble{
  background:rgba(103,130,142,.14) !important;
  border-color:rgba(146,171,181,.14) !important;
  box-shadow:none !important;
  color:#e8edf1;
}

/* Markdown tables become quiet, neutral and paper-like. */
.message-row.assistant .md-table th{
  color:#edf1f4 !important;
  background:rgba(255,255,255,.035) !important;
  border-bottom-color:rgba(220,228,235,.16) !important;
}
.message-row.assistant .md-table td{
  border-bottom-color:rgba(220,228,235,.085) !important;
}
.message-row.assistant .md-table tbody tr:nth-child(even){
  background:rgba(255,255,255,.012) !important;
}
.message-bubble blockquote{
  background:rgba(145,187,181,.045) !important;
  border-left-color:#829f9a !important;
  color:#c7ced5 !important;
}
.message-bubble a{
  color:#a8cbc6 !important;
  border-bottom-color:rgba(168,203,198,.24) !important;
}

/* Composer: quieter and flatter. */
.composer{
  background:linear-gradient(145deg,rgba(29,36,46,.94),rgba(22,28,36,.94)) !important;
  border-color:rgba(224,233,241,.09) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.22) !important;
}
#messageInput{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(224,233,241,.08) !important;
}
#messageInput:focus{
  border-color:rgba(145,187,181,.24) !important;
  box-shadow:0 0 0 3px rgba(145,187,181,.05) !important;
}
#messageInput::placeholder{color:#77828e !important}
.attach-button{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(224,233,241,.08) !important;
  color:#aab4be !important;
}
.send-button,
.primary{
  background:#9abeb8 !important;
  color:#13201f !important;
  box-shadow:none !important;
}
.send-button:hover,
.primary:hover{
  filter:brightness(1.05);
}

/* Welcome screen: restrained and editorial. */
.welcome-orb,
.brand-mark{
  background:linear-gradient(135deg,#9fc6bf,#94aab8) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.16) !important;
}
.welcome-panel h1{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:#edf1f4 !important;
}
.welcome-panel p{color:#a8b2bd !important}
.eyebrow{color:#93b9b3 !important}

/* Quick actions become quiet cards rather than colourful tiles. */
.quick-actions button,
.quick-actions button:nth-child(1),
.quick-actions button:nth-child(2),
.quick-actions button:nth-child(3),
.quick-actions button:nth-child(4){
  background:rgba(255,255,255,.032) !important;
  border-color:rgba(225,234,242,.075) !important;
  color:#d7dde3 !important;
  box-shadow:none !important;
}
.quick-actions button:hover{
  background:rgba(255,255,255,.052) !important;
  border-color:rgba(145,187,181,.16) !important;
  filter:none !important;
}

/* Sidebar current conversation uses only a soft tint. */
.conversation-item.active{
  background:rgba(124,160,157,.09) !important;
  border-color:rgba(145,187,181,.10) !important;
}

/* Model browser: same calm theme, no purple wash. */
.model-overlay{
  background:rgba(5,8,12,.58) !important;
  backdrop-filter:blur(14px) !important;
}
.model-browser{
  background:
    radial-gradient(circle at 12% 4%,rgba(111,145,147,.07),transparent 32%),
    linear-gradient(155deg,rgba(30,37,47,.99),rgba(22,28,36,.99)) !important;
  border-color:rgba(226,234,242,.10) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.35) !important;
}
.model-browser-head{
  background:rgba(255,255,255,.02) !important;
  border-bottom-color:rgba(226,234,242,.07) !important;
}
.model-browser-head .icon-button{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(226,234,242,.08) !important;
}
.quick-group{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(226,234,242,.07) !important;
  box-shadow:none !important;
}
.quick-model{
  background:rgba(255,255,255,.028) !important;
  border-color:rgba(226,234,242,.07) !important;
}
.quick-model:hover{
  background:rgba(255,255,255,.045) !important;
}
.favorite-star.active{
  color:#d0c39d !important;
  background:rgba(192,174,123,.08) !important;
  border-color:rgba(192,174,123,.13) !important;
}
.model-row{
  background:rgba(255,255,255,.018) !important;
  border-color:rgba(226,234,242,.055) !important;
}
.model-row:hover{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(145,187,181,.11) !important;
}

/* Cost tiers remain meaningful but lose fluorescent colour. */
.cost-1{
  color:#a8c6bd !important;
  background:rgba(125,157,146,.07) !important;
  border-color:rgba(125,157,146,.12) !important;
}
.cost-2{
  color:#c7b98d !important;
  background:rgba(171,150,93,.07) !important;
  border-color:rgba(171,150,93,.12) !important;
}
.cost-3,
.high-cost-note{
  color:#c89aa2 !important;
}
.cost-3,
.high-cost-warning{
  background:rgba(169,101,112,.06) !important;
  border-color:rgba(169,101,112,.11) !important;
}

/* Login screen uses the same softer palette. */
.login-card{
  background:linear-gradient(145deg,rgba(29,36,46,.90),rgba(21,27,35,.88)) !important;
}
input,textarea{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(224,233,241,.085) !important;
}
input:focus,textarea:focus{
  border-color:rgba(145,187,181,.25) !important;
  box-shadow:0 0 0 3px rgba(145,187,181,.05) !important;
}
.preview-hint{
  background:rgba(145,187,181,.05) !important;
  border-color:rgba(145,187,181,.10) !important;
  color:#aebfbc !important;
}

/* Thinking indicator: subtle activity, not neon. */
.thinking-dots i{
  background:#91bbb5 !important;
}


/* =========================================================
   V8.4 — SOFT DUSK THEME
   Calm colour, not monochrome.
   ========================================================= */

:root{
  --bg:#17212c;
  --panel:rgba(31,43,56,.84);
  --line:rgba(211,225,239,.10);
  --line2:rgba(211,225,239,.16);
  --text:#e5ebf1;
  --muted:#a9b7c5;
  --muted2:#7f90a1;
  --cyan:#82b9b1;
  --violet:#9a91c7;
  --pink:#b48fa7;
  --blue:#7798b4;
  --danger:#cf8e98;
  --shadow:0 18px 55px rgba(4,10,18,.24);
}

html,body{
  background:
    radial-gradient(circle at 10% -8%,rgba(84,132,150,.18),transparent 34%),
    radial-gradient(circle at 92% 12%,rgba(116,91,145,.13),transparent 31%),
    linear-gradient(155deg,#17212c 0%,#1a2633 48%,#172331 100%) !important;
  color:var(--text);
}

/* Background colour is visible but soft. */
.ambient{
  opacity:.9 !important;
  filter:saturate(80%) !important;
}
.blob{
  opacity:.12 !important;
  filter:blur(72px) saturate(80%) !important;
}
.blob-a{background:linear-gradient(135deg,#4f8e96,#5f789b) !important}
.blob-b{background:linear-gradient(135deg,#766493,#8e6881) !important}
.blob-c{background:linear-gradient(135deg,#4f8097,#6d7197) !important}
.blob-d{background:linear-gradient(135deg,#628c82,#7d6e91) !important}

/* Panels retain colour instead of flattening to grey. */
.glass{
  background:
    linear-gradient(145deg,rgba(38,52,67,.84),rgba(28,39,52,.82)) !important;
  border-color:rgba(211,225,239,.11) !important;
  box-shadow:0 16px 48px rgba(5,11,18,.22) !important;
}

.topbar,
.sidebar{
  background:
    linear-gradient(145deg,rgba(36,51,66,.90),rgba(27,39,52,.88)) !important;
  border-color:rgba(211,225,239,.10) !important;
}

.chat-title{
  color:#eef3f7 !important;
}
.subtle,.micro,.signed-in{
  color:#9fadb9 !important;
}

.model-button{
  background:linear-gradient(145deg,rgba(75,103,128,.13),rgba(89,76,118,.08)) !important;
  border-color:rgba(179,204,223,.13) !important;
}
.model-dot{
  background:#86b8b1 !important;
  box-shadow:0 0 12px rgba(134,184,177,.28) !important;
}

/* Selected tab gets colour again, but desaturated. */
.mode-tabs{
  background:rgba(255,255,255,.025) !important;
}
.mode-tab{
  color:#aebbc8 !important;
}
.mode-tab.active{
  color:#f2f5f7 !important;
  background:
    linear-gradient(135deg,rgba(92,143,145,.30),rgba(122,100,157,.25)) !important;
  border-color:rgba(151,185,190,.18) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

/* Assistant text is warm off-white, not stark white. */
.message-row.assistant .message-bubble{
  color:#dfe7ee !important;
}
.message-row.assistant .message-bubble .md-heading{
  color:#edf2f6 !important;
}
.message-row.assistant .message-bubble strong{
  color:#f0f3f5 !important;
}
.message-row.assistant .message-meta strong{
  color:#b8c8d6 !important;
}
.message-row.assistant .message-meta,
.message-model-name{
  color:#8397aa !important;
}

/* User bubble gets a soft blue-teal tint. */
.message-row.user .message-bubble{
  background:
    linear-gradient(145deg,rgba(73,111,126,.19),rgba(82,78,119,.12)) !important;
  border-color:rgba(151,183,197,.14) !important;
  color:#e7edf2 !important;
}

/* Tables are readable but not stark. */
.message-row.assistant .md-table th{
  color:#ecf1f4 !important;
  background:rgba(108,141,167,.10) !important;
  border-bottom-color:rgba(191,209,224,.18) !important;
}
.message-row.assistant .md-table td{
  border-bottom-color:rgba(191,209,224,.09) !important;
}
.message-row.assistant .md-table tbody tr:nth-child(even){
  background:rgba(108,126,157,.035) !important;
}

.message-bubble blockquote{
  background:rgba(103,151,146,.07) !important;
  border-left-color:#7daaa3 !important;
  color:#c9d4dc !important;
}
.message-bubble a{
  color:#9ecac3 !important;
  border-bottom-color:rgba(158,202,195,.25) !important;
}

/* Composer: coloured edge and softer field. */
.composer{
  background:
    linear-gradient(145deg,rgba(38,52,67,.96),rgba(29,40,53,.95)) !important;
  border-color:rgba(196,215,231,.11) !important;
  box-shadow:0 10px 34px rgba(4,10,18,.25) !important;
}
#messageInput{
  background:rgba(16,24,34,.42) !important;
  border-color:rgba(196,215,231,.10) !important;
  color:#e5ebf1 !important;
}
#messageInput:focus{
  border-color:rgba(130,185,177,.28) !important;
  box-shadow:0 0 0 3px rgba(130,185,177,.06) !important;
}
#messageInput::placeholder{
  color:#8291a0 !important;
}
.attach-button{
  background:rgba(79,105,128,.10) !important;
  border-color:rgba(196,215,231,.10) !important;
  color:#aebdca !important;
}
.send-button,
.primary{
  background:
    linear-gradient(135deg,#86b8b1,#9a91c7) !important;
  color:#152129 !important;
  box-shadow:0 8px 20px rgba(40,63,78,.15) !important;
}

/* Welcome / brand retains identity. */
.welcome-orb,
.brand-mark{
  background:
    linear-gradient(135deg,#8fc2b8,#9893c4) !important;
}
.eyebrow{
  color:#91bdb6 !important;
}
.welcome-panel h1{
  color:#edf2f6 !important;
}

/* Quick-action cards use restrained colour hints. */
.quick-actions button,
.quick-actions button:nth-child(1),
.quick-actions button:nth-child(2),
.quick-actions button:nth-child(3),
.quick-actions button:nth-child(4){
  background:
    linear-gradient(145deg,rgba(73,106,131,.10),rgba(99,83,124,.07)) !important;
  border-color:rgba(196,215,231,.09) !important;
  color:#d8e1e8 !important;
}

/* Model browser carries the same dusk palette. */
.model-browser{
  background:
    radial-gradient(circle at 12% 4%,rgba(86,136,143,.13),transparent 31%),
    radial-gradient(circle at 92% 8%,rgba(115,91,143,.10),transparent 28%),
    linear-gradient(155deg,rgba(37,50,65,.99),rgba(28,39,52,.99)) !important;
}
.quick-group{
  background:
    linear-gradient(145deg,rgba(64,92,112,.08),rgba(91,75,115,.06)) !important;
}
.quick-model{
  background:rgba(92,121,145,.08) !important;
}
.quick-model:hover{
  background:rgba(104,139,160,.12) !important;
}
.favorite-star.active{
  color:#dbc990 !important;
  background:rgba(185,159,91,.09) !important;
}

/* Cost colours stay meaningful but muted. */
.cost-1{
  color:#a8c9c0 !important;
}
.cost-2{
  color:#d0bc85 !important;
}
.cost-3,
.high-cost-note{
  color:#d39ca7 !important;
}

/* Login follows the same palette. */
.login-card{
  background:
    linear-gradient(145deg,rgba(38,52,67,.92),rgba(28,39,52,.91)) !important;
}

/* Thinking dots are softly visible. */
.thinking-dots i{
  background:#86b8b1 !important;
}


/* =========================================================
   V8.6 — live streamed chat replies
   ========================================================= */
.streaming-reply{
  animation:thinkingAppear .16s ease-out;
}
.streaming-bubble{
  white-space:pre-wrap;
}
.streaming-bubble::after{
  content:"";
  display:inline-block;
  width:7px;
  height:1.05em;
  margin-left:3px;
  vertical-align:-2px;
  border-radius:2px;
  background:var(--cyan);
  opacity:.72;
  animation:streamCursor .9s steps(2,end) infinite;
}
@keyframes streamCursor{
  0%,45%{opacity:.72}
  46%,100%{opacity:.12}
}
@media(prefers-reduced-motion:reduce){
  .streaming-bubble::after{animation:none;opacity:.5}
}
/* =========================================================
   V8.7 — WARM PAPER
   Colour-only theme: ivory, charcoal and muted sage.
   No layout, typography, spacing or functionality changes.
   ========================================================= */

:root {
  color-scheme: light;

  --bg: #f5f3ed;
  --bg2: #eeece4;
  --panel: #fcfbf7;
  --panel-strong: #e9eee5;
  --panel-soft: #f0eee7;

  --line: #dedfd5;
  --line2: #c9cec1;
  --line-strong: #b8c2b0;

  --text: #343a32;
  --muted: #626a5d;
  --muted2: #70776a;

  --cyan: #526d4d;
  --cyan2: #60795a;
  --violet: #77718a;
  --pink: #946e7a;
  --blue: #5e7480;
  --gold: #866b35;
  --danger: #a34e58;

  --shadow: 0 12px 36px rgba(49, 56, 39, .045);
}

/* A steady reading surface, without coloured light behind it. */
html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.ambient {
  opacity: 0 !important;
}

/* Quiet, opaque surfaces keep contrast consistent. */
.glass,
.topbar,
.sidebar,
.login-card,
.model-browser,
.composer,
dialog {
  background: #fcfbf7 !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.sidebar {
  background: #eeeee6 !important;
}

.workspace {
  background: transparent !important;
}

.welcome-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Main text and secondary labels. */
.chat-title,
.brand-row strong,
.login-card h1,
.welcome-panel h1,
.mode-workbench-head h2,
.model-browser-head h2,
.model-details h3,
.dialog-head,
.section-heading strong,
.quick-group-title,
.model-row-main strong,
.user-admin-main strong,
.creative-stat strong,
.generated-media-meta strong {
  color: var(--text) !important;
}

.welcome-panel h1 {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
}

.subtle,
.micro,
.signed-in,
.sidebar-section-title,
.message-meta,
.message-row.assistant .message-meta,
.message-model-name,
.model-button-text small,
.section-heading span,
.model-row-main span,
.model-admin-note,
.model-warning,
.capability-label,
.detail-card span,
.creative-stat span,
.user-admin-meta,
.create-user-form label > span {
  color: var(--muted2) !important;
}

.welcome-panel p,
.login-card > p,
.mode-workbench-head p,
.details-description,
.model-details-empty,
.model-list-empty,
.creative-note,
.media-status,
.media-control,
.credit-label,
.admin-message small {
  color: var(--muted) !important;
}

.eyebrow,
.details-provider,
.copy-reply,
.description-toggle,
.credit-balance,
.credit-value {
  color: var(--cyan) !important;
  text-shadow: none !important;
}

/* Conversation text: charcoal rather than bright white. */
.message-bubble,
.message-row.assistant .message-bubble {
  color: var(--text) !important;
}

.message-row.assistant .message-bubble {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.message-bubble .md-heading,
.message-bubble strong,
.message-row.assistant .message-bubble .md-heading,
.message-row.assistant .message-bubble strong {
  color: #2e352c !important;
}

.message-bubble em,
.message-meta strong,
.message-row.assistant .message-meta strong {
  color: #515c4b !important;
}

.message-row.user .message-bubble {
  background: #e9eee3 !important;
  border-color: #d6dece !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.message-bubble a {
  color: #466742 !important;
  border-bottom-color: #b4c4a9 !important;
}

.message-bubble blockquote {
  background: #edf0e7 !important;
  border-left-color: #8a9f7c !important;
  color: #535f4b !important;
}

.message-bubble hr {
  border-top-color: var(--line) !important;
}

/* Tables stay understated and easy to scan. */
.md-table-wrap,
.message-row.assistant .md-table-wrap {
  background: transparent !important;
  border-color: var(--line) !important;
}

.md-table th,
.message-row.assistant .md-table th {
  background: #eeeee6 !important;
  color: var(--text) !important;
  border-bottom-color: #cbd1c1 !important;
}

.md-table td,
.message-row.assistant .md-table td {
  color: var(--text) !important;
  border-bottom-color: #dedfd5 !important;
}

.md-table th,
.md-table td {
  border-right-color: var(--line) !important;
}

.md-table tbody tr:nth-child(even),
.message-row.assistant .md-table tbody tr:nth-child(even) {
  background: rgba(93, 112, 75, .035) !important;
}

/* Code uses a slightly shaded paper surface. */
.code-card {
  background: #efefe7 !important;
  border-color: #d8dccf !important;
}

.code-toolbar {
  background: #e7eadf !important;
  color: #59644f !important;
  border-bottom-color: #d3dac8 !important;
}

code,
.code-card pre,
.code-card pre code {
  color: #35472e !important;
}

.message-bubble .inline-code {
  background: #e9ede1 !important;
  border-color: #d8dfcc !important;
  color: #405637 !important;
}

/* Form fields and composer. */
input,
textarea,
select,
#messageInput,
.mode-prompt,
.create-user-form input,
.create-user-form select,
.media-control select,
.model-search-wrap {
  background: #fffefb !important;
  color: var(--text) !important;
  border-color: #d9ddd0 !important;
}

input::placeholder,
textarea::placeholder,
#messageInput::placeholder,
.model-search-wrap input::placeholder {
  color: #7b8174 !important;
}

input:focus,
textarea:focus,
select:focus,
#messageInput:focus {
  border-color: #8d a180; /* Fallback overridden below. */
  border-color: #8da180 !important;
  box-shadow: 0 0 0 3px rgba(111, 139, 91, .10) !important;
}

.model-search-wrap input {
  background: transparent !important;
  color: var(--text) !important;
}

/* Primary actions: one restrained accent, no gradients. */
.primary,
.send-button,
.generated-media-actions a {
  background: #526d4d !important;
  color: #fffef9 !important;
  box-shadow: none !important;
}

.primary:hover,
.send-button:hover,
.generated-media-actions a:hover {
  background: #465f41 !important;
  filter: none !important;
}

/* Secondary controls. */
.ghost,
.icon-button,
.attach-button,
.creative-attach,
.option-pill,
.favorite-star,
.favorite-default,
.quick-toggle,
.quick-detail-toggle,
.code-toolbar button,
.compatible-toggle,
.media-toggle {
  background: #f2f2eb !important;
  border-color: #dadfd0 !important;
  color: #54614b !important;
  box-shadow: none !important;
}

.ghost:hover,
.icon-button:hover,
.attach-button:hover,
.creative-attach:hover,
.option-pill:hover,
.code-toolbar button:hover {
  background: #e9ede2 !important;
  border-color: #bbc8ae !important;
  color: #3f5737 !important;
}

/* Selected controls remain clearly visible. */
.mode-tabs,
.model-view-tabs {
  background: #eeeee6 !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

.mode-tab,
.model-view-tab {
  color: #626c59 !important;
}

.mode-tab:hover,
.model-view-tab:hover {
  background: #e7ecdf !important;
  color: #405337 !important;
}

.mode-tab.active,
.model-view-tab.active,
.option-pill.active,
.quick-toggle.active,
.quick-detail-toggle.active {
  background: #dfe8d5 !important;
  border-color: #bcccad !important;
  color: #3c5633 !important;
  box-shadow: none !important;
}

/* Branding and model selector. */
.brand-mark,
.welcome-orb {
  background: #dce6d2 !important;
  color: #405737 !important;
  box-shadow: none !important;
}

.user-avatar {
  background: #e5eadc !important;
  border-color: #cbd5bf !important;
  color: #506344 !important;
}

.model-button {
  background: #f1f3eb !important;
  border-color: #d5ddca !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.model-button:hover {
  background: #e9eee1 !important;
  border-color: #b9c8a9 !important;
}

.model-dot {
  background: #7d956b !important;
  box-shadow: none !important;
}

/* Sidebar conversations. */
.conversation-item {
  color: #505b47 !important;
}

.conversation-item:hover {
  background: #e5e9dc !important;
}

.conversation-item.active {
  background: #dfe7d5 !important;
  border-color: #c6d2b9 !important;
  color: #354b2e !important;
}

/* Model browser and creative/admin cards. */
.model-overlay,
dialog::backdrop {
  background: rgba(43, 49, 36, .26) !important;
}

.model-browser-head {
  background: #f3f3ec !important;
  border-bottom-color: var(--line) !important;
}

.quick-group,
.model-details,
.detail-card,
.creative-stat,
.create-user-panel,
.user-list-panel,
.user-admin-row,
.coming-card,
.quick-actions button,
.quick-actions button:nth-child(n) {
  background: #f3f4ed !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.quick-model,
.model-row,
.model-list-row {
  background: #f8f9f3 !important;
  border-color: #e0e4d7 !important;
  color: var(--text) !important;
}

.quick-model:hover,
.model-row:hover,
.model-list-row:hover {
  background: #edf1e5 !important;
}

.model-row.selected,
.model-list-row.selected {
  background: #e5eddb !important;
  border-color: #b9cba8 !important;
}

.manage-quick-picks {
  color: #607353 !important;
  border-top-color: var(--line) !important;
}

.field-label,
.creative-attach,
.file-chip,
.pending-file,
.media-ref-chip {
  color: #505f45 !important;
}

.file-chip,
.pending-file,
.media-ref-chip,
.preview-hint {
  background: #edf1e5 !important;
  border-color: #d5dfc9 !important;
}

.preview-hint {
  color: #5a6c4e !important;
}

.generated-image,
.generated-video {
  background: #eaece3 !important;
}

/* Muted semantic colours, with readable contrast. */
.capability-chip,
.capability-chip.input-cap,
.capability-chip.output-cap,
.cost-1,
.user-badge.active {
  background: #e8efe0 !important;
  border-color: #cbd9bc !important;
  color: #4f6a40 !important;
}

.capability-chip.strength-cap,
.cost-2,
.user-badge.password-due,
.favorite-star.active,
.favorite-default.active,
.admin-message {
  background: #f2ecdc !important;
  border-color: #ded2ae !important;
  color: #7a632e !important;
  text-shadow: none !important;
}

.cost-3,
.high-cost-warning,
.user-badge.disabled {
  background: #f5e8e7 !important;
  border-color: #e4c8c6 !important;
  color: #984f55 !important;
}

.high-cost-note,
.error-text,
.pending-file button,
.media-ref-chip button {
  color: #a04e56 !important;
}

.force-change-note {
  color: #526e43 !important;
}

/* Activity indicators use the same quiet accent. */
.thinking-bubble {
  color: #68765c !important;
}

.thinking-dots i,
.streaming-bubble::after {
  background: #718b5e !important;
}

/* =========================================================
   V8.7 — MODEL BROWSER REFINEMENT
   Built on the v8.65 Warm Paper theme.
   Clear hierarchy without returning to bright/neon controls.
   ========================================================= */

/* The browser frame stays calm, but the body gets a tiny tonal separation. */
.model-browser{
  background:#fbfaf5 !important;
}
.model-browser-head{
  background:#f2f2ea !important;
  border-bottom-color:#d9ddd2 !important;
}
.model-browser-body{
  background:#faf9f4;
}

/* View tabs: selected state should be obvious without looking like a CTA. */
.model-view-tabs{
  background:#ecece4 !important;
  border-color:#d6d9d0 !important;
}
.model-view-tab{
  color:#687060 !important;
  font-weight:760;
}
.model-view-tab.active{
  background:#dde7d5 !important;
  border-color:#bcc9b1 !important;
  color:#3f5938 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

/* Quick Pick category cards: parent card darker than individual model rows. */
.quick-group{
  background:#f0f1e9 !important;
  border-color:#d8dbd1 !important;
}

/* The category being edited gets a very gentle sage emphasis. */
.quick-group.current-category{
  background:#edf1e7 !important;
  border-color:#cbd4c3 !important;
  box-shadow:inset 3px 0 0 #829775 !important;
}

.quick-group-title{
  color:#394137 !important;
}
.quick-group.current-category .quick-group-title{
  color:#344b30 !important;
}

/* Model rows are visibly raised above the group card. */
.quick-model{
  background:#fafaf6 !important;
  border:1px solid #dde1d6 !important;
  color:#343a32 !important;
  box-shadow:0 1px 0 rgba(55,64,48,.025) !important;
}
.quick-model:hover{
  background:#f4f7ef !important;
  border-color:#c9d2c0 !important;
}

/* Default model gets a quiet tint across the model button as well as the star. */
.quick-model-row.default-model .quick-model{
  background:#edf4e8 !important;
  border-color:#c5d3ba !important;
}
.quick-model-row.default-model .quick-model-name{
  color:#30472c !important;
  font-weight:690;
}

/* Stars: sage = default. No more large gold target. */
.favorite-star{
  background:#f7f7f2 !important;
  border-color:#d8ddd2 !important;
  color:#7b8575 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
.favorite-star:hover{
  background:#edf2e8 !important;
  border-color:#bdcbb3 !important;
  color:#4f6847 !important;
}
.favorite-star.active{
  background:#dfe9d7 !important;
  border-color:#b8c9ab !important;
  color:#4d6845 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36) !important;
  text-shadow:none !important;
}
.favorite-star.readonly{
  background:#dfe9d7 !important;
  border-color:#b8c9ab !important;
  color:#4d6845 !important;
  opacity:1 !important;
}

/* The Manage link remains discoverable without shouting. */
.manage-quick-picks{
  color:#607454 !important;
  border-top-color:#d8ddd2 !important;
}
.manage-quick-picks:hover{
  color:#3f5e39 !important;
}

/* Cost badges should be labels, not focal controls. */
.cost-badge{
  min-width:30px;
  height:22px;
  padding:0 7px;
  font-size:10px;
  font-weight:820;
  opacity:.86;
  box-shadow:none !important;
}
.cost-1{
  background:#eaf0e4 !important;
  border-color:#ced9c3 !important;
  color:#5d7453 !important;
}
.cost-2{
  background:#f1eee3 !important;
  border-color:#ddd4b9 !important;
  color:#76663d !important;
}
.cost-3{
  background:#f3e8e7 !important;
  border-color:#dfc8c6 !important;
  color:#8b555a !important;
}

/* ---------------------------------------------------------
   ALL MODELS
   --------------------------------------------------------- */

/* Normal row: clean paper surface. */
.model-list-row{
  position:relative;
  background:#f8f8f3 !important;
  border:1px solid #e0e3d9 !important;
  box-shadow:none !important;
}

/* Hover gains just enough depth to confirm it is interactive. */
.model-list-row:hover{
  background:#f2f5ed !important;
  border-color:#d0d7c8 !important;
}

/* A model already in Quick Picks gets a subtle left marker. */
.model-list-row.quick-pick-model{
  border-left:3px solid #a4b798 !important;
}

/* The app default is more explicit, but still restrained. */
.model-list-row.default-model{
  background:#edf4e8 !important;
  border-color:#c5d3ba !important;
  border-left:3px solid #6f8c64 !important;
}
.model-list-row.default-model .model-row-main strong{
  color:#30472c !important;
}

/* "Selected for details" is different from "default".
   Use a neutral outline rather than another green fill. */
.model-list-row.selected{
  outline:2px solid rgba(102,120,96,.22) !important;
  outline-offset:-2px;
}
.model-list-row.selected:not(.default-model){
  background:#f1f3ed !important;
  border-color:#cbd1c5 !important;
}

/* If the selected item is also the default, keep the default tint. */
.model-list-row.selected.default-model{
  background:#eaf2e4 !important;
  border-color:#b9cbb0 !important;
}

/* + Quick / ✓ Quick controls now match the model hierarchy. */
.quick-toggle{
  background:#f3f3ed !important;
  border-color:#d6dbd0 !important;
  color:#65705e !important;
  box-shadow:none !important;
}
.quick-toggle:hover{
  background:#e9eee3 !important;
  border-color:#becab5 !important;
  color:#405c39 !important;
}
.quick-toggle.active{
  background:#dfe9d7 !important;
  border-color:#b8c9ab !important;
  color:#45613e !important;
}

/* Details panel should be distinct from both lists without looking boxed-in. */
.model-details{
  background:#f3f4ee !important;
  border-color:#d9ddd2 !important;
}
.detail-card{
  background:#fafaf6 !important;
  border-color:#dfe2d8 !important;
}

/* Details action buttons: default/favourite state uses the same sage language. */
.favorite-default,
.quick-detail-toggle{
  background:#f3f3ed !important;
  border-color:#d6dbd0 !important;
  color:#65705e !important;
}
.favorite-default:hover,
.quick-detail-toggle:hover{
  background:#e9eee3 !important;
  border-color:#becab5 !important;
  color:#405c39 !important;
}
.favorite-default.active,
.quick-detail-toggle.active{
  background:#dfe9d7 !important;
  border-color:#b8c9ab !important;
  color:#45613e !important;
}

/* Mobile: keep the hierarchy visible even in the single-column browser. */
@media(max-width:760px){
  .quick-group{
    border-radius:18px;
  }
  .quick-group.current-category{
    box-shadow:inset 3px 0 0 #829775 !important;
  }
  .favorite-star{
    min-width:44px;
  }
  .model-list-row.quick-pick-model,
  .model-list-row.default-model{
    border-left-width:3px !important;
  }
}

/* =========================================================
   V8.8 — MODEL BROWSER REDESIGN
   Flatter design with clearer visual hierarchy
   ========================================================= */

/* Simplified browser structure with fewer nested containers */
.model-browser-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px;
}

.model-view-tabs {
  display: none;
}

.quick-picks-panel,
.all-models-panel {
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin: 0;
}

.all-models-panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.section-heading {
  margin-bottom: 15px;
}

.section-heading strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text) !important;
}

.quick-model-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.quick-group {
  background: #f3f4ed !important;
  border: 1px solid #d9ddd2 !important;
  border-radius: 12px;
  padding: 15px;
  box-shadow: none !important;
}

.quick-group-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #343a32 !important;
}

.quick-group-list {
  display: grid;
  gap: 8px;
}

.quick-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-model {
  flex: 1;
  background: #fafaf6 !important;
  border: 1px solid #dde1d6 !important;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  box-shadow: none !important;
}

.quick-model:hover {
  background: #f4f7ef !important;
  border-color: #c9d2c0 !important;
}

.quick-model-name {
  font-size: 13px;
  font-weight: 600;
  color: #343a32 !important;
}

.favorite-star {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  font-size: 16px;
}

.all-models-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.catalogue-tools {
  display: flex;
  gap: 10px;
  align-items: center;
}

.compatible-toggle {
  background: #f3f3ed !important;
  border: 1px solid #d6dbd0 !important;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}

.compatible-toggle input {
  margin-right: 6px;
}

.model-search-wrap {
  background: #fffefb !important;
  border: 1px solid #d9ddd0 !important;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-search-wrap input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 0;
  font-size: 13px;
}

.model-list {
  display: grid;
  gap: 8px;
  max-height: none;
}

.model-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f8f3 !important;
  border: 1px solid #e0e3d9 !important;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: none !important;
}

.model-list-row:hover {
  background: #f2f5ed !important;
  border-color: #d0d7c8 !important;
}

.model-list-row.selected {
  outline: 2px solid rgba(102,120,96,.3) !important;
  outline-offset: -2px;
}

.model-list-row.default-model {
  background: #edf4e8 !important;
  border-color: #c5d3ba !important;
  border-left: 3px solid #6f8c64 !important;
}

.model-row-main {
  flex: 1;
  padding: 0;
}

.model-row-main strong {
  font-size: 13px;
  font-weight: 600;
  color: #343a32 !important;
}

.model-row-main span {
  font-size: 11px;
  color: #70776a !important;
  margin-top: 2px;
}

.quick-toggle {
  min-width: auto;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.model-details {
  background: #f3f4ee !important;
  border: 1px solid #d9ddd2 !important;
  border-radius: 12px;
  padding: 20px;
  align-self: start;
  position: sticky;
  top: 20px;
}

.model-details-empty {
  color: #70776a !important;
  font-size: 13px;
  line-height: 1.5;
}

.details-provider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #526d4d !important;
  margin-bottom: 5px;
}

.model-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.model-title-row h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #343a32 !important;
}

.details-description-wrap {
  margin-bottom: 20px;
}

.details-description {
  font-size: 13px;
  line-height: 1.6;
  color: #626a5d !important;
}

.description-toggle {
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
  padding: 0;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.detail-card {
  background: #fafaf6 !important;
  border: 1px solid #dfe2d8 !important;
  border-radius: 8px;
  padding: 12px;
}

.detail-card span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #70776a !important;
  margin-bottom: 5px;
  display: block;
}

.detail-card strong {
  font-size: 12px;
  font-weight: 600;
  color: #343a32 !important;
}

.capability-box {
  margin-bottom: 20px;
}

.capability-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.capability-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #70776a !important;
  padding-top: 6px;
}

.capability-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.capability-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.model-detail-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.quick-detail-toggle,
.favorite-default,
.use-model {
  height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-detail-toggle {
  background: #f3f3ed !important;
  border: 1px solid #d6dbd0 !important;
  color: #65705e !important;
}

.quick-detail-toggle:hover {
  background: #e9eee3 !important;
  border-color: #becab5 !important;
  color: #405c39 !important;
}

.quick-detail-toggle.active {
  background: #dfe9d7 !important;
  border-color: #b8c9ab !important;
  color: #45613e !important;
}

.favorite-default {
  background: #f3f3ed !important;
  border: 1px solid #d6dbd0 !important;
  color: #65705e !important;
}

.favorite-default:hover {
  background: #e9eee3 !important;
  border-color: #becab5 !important;
  color: #405c39 !important;
}

.favorite-default.active {
  background: #dfe9d7 !important;
  border-color: #b8c9ab !important;
  color: #45613e !important;
}

.use-model {
  background: #526d4d !important;
  border: none !important;
  color: #fffef9 !important;
}

.use-model:hover {
  background: #465f41 !important;
}

.use-model:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.high-cost-warning {
  background: #f5e8e7 !important;
  border: 1px solid #e4c8c6 !important;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #984f55 !important;
  margin-bottom: 15px;
}

/* Mobile responsive adjustments */
@media (max-width: 1024px) {
  .model-browser-body {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
  }
  
  .model-details {
    position: static;
    top: auto;
  }
}

@media (max-width: 760px) {
  .model-browser-body {
    padding: 10px;
  }
  
  .all-models-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .catalogue-tools {
    flex-direction: column;
    align-items: stretch;
  }
  
  .model-search-wrap {
    width: 100%;
  }
  
  .quick-group {
    padding: 12px;
  }
  
  .quick-model-row {
    gap: 8px;
  }
  
  .favorite-star {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 18px;
  }
  
  .model-list-row {
    gap: 8px;
  }
  
  .details-grid {
    grid-template-columns: 1fr;
  }
  
  .capability-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  
  .capability-label {
    padding-top: 0;
  }
}