*{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;
}