:root { --bg:#1d1e20; --sidebar:#131416; --panel:#292b2e; --panel-hover:#34373b; --line:rgba(255,255,255,.1); --text:#f4f4f2; --muted:#999da4; --acid:#eaff58; --focus:#58dcea; --focus-soft:rgba(88,220,234,.16); --focus-line:rgba(88,220,234,.42); --ease:cubic-bezier(.16,1,.3,1); }
body[data-focus="video"] { --focus:#58dcea; --focus-soft:rgba(88,220,234,.16); --focus-line:rgba(88,220,234,.42); }
body[data-focus="image"] { --focus:#ffb35c; --focus-soft:rgba(255,179,92,.16); --focus-line:rgba(255,179,92,.42); }
body[data-focus="music"] { --focus:#b998ff; --focus-soft:rgba(185,152,255,.16); --focus-line:rgba(185,152,255,.42); }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); }
body { color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:14px; }
button,input,textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
::selection { color:#111; background:var(--acid); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; z-index:100; top:-60px; left:15px; padding:10px 14px; color:#111; background:var(--acid); }.skip-link:focus { top:15px; }
.app-shell { display:flex; width:100%; height:100dvh; }
.sidebar { position:relative; z-index:20; flex:0 0 268px; display:flex; flex-direction:column; min-width:0; padding:12px; background:linear-gradient(180deg,#151618 0%,#101113 100%); border-right:1px solid rgba(255,255,255,.055); transition:transform .35s var(--ease); }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 4px 0 7px; }
.agent-brand { display:flex; align-items:center; gap:9px; }.agent-brand > span { display:grid; place-items:center; width:28px; height:28px; color:#111; background:var(--acid); border-radius:8px; font-size:11px; font-weight:900; }.agent-brand strong { font-size:13px; letter-spacing:-.03em; }
.icon-button { display:grid; place-items:center; width:36px; height:36px; padding:0; color:#b8b8b8; background:transparent; border:0; border-radius:8px; font-size:16px; }.icon-button:hover { color:white; background:rgba(255,255,255,.08); }
.sidebar-close { display:none; }
.new-chat { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:5px; width:100%; margin:14px 0 18px; padding:10px 12px; color:#f2f2f2; background:#2b2b2b; border:0; border-radius:9px; text-align:left; font-size:13px; }.new-chat:hover { background:#343434; }.new-chat kbd { color:#777; background:transparent; font:9px Arial; }
.focus-nav { display:flex; flex-direction:column; gap:4px; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.07); }.focus-nav > p { margin:0 9px 5px; color:#666b72; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; }.focus-item { position:relative; display:grid; grid-template-columns:34px 1fr 12px; align-items:center; gap:9px; min-height:50px; padding:7px 9px; color:#8e9298; background:transparent; border:1px solid transparent; border-radius:11px; text-align:left; transition:.22s var(--ease); }.focus-item:hover { color:white; background:rgba(255,255,255,.045); }.focus-item.is-active { color:white; background:linear-gradient(110deg,var(--focus-soft),rgba(255,255,255,.035)); border-color:var(--focus-line); box-shadow:inset 3px 0 0 var(--focus); }.focus-item svg { width:20px; height:20px; margin:auto; }.focus-item > span { display:flex; min-width:0; flex-direction:column; gap:2px; }.focus-item strong { font-size:11px; }.focus-item small { overflow:hidden; color:#6f747c; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.focus-item.is-active small { color:#a2a7ae; }.focus-item i { color:var(--focus); font-size:9px; font-style:normal; opacity:0; transform:translateX(-4px); transition:.2s; }.focus-item:hover i,.focus-item.is-active i { opacity:1; transform:none; }
.app-nav { display:flex; flex-direction:column; gap:2px; }.nav-item { display:grid; grid-template-columns:24px 1fr auto; align-items:center; width:100%; padding:9px 11px; color:#898e95; background:transparent; border:0; border-radius:8px; text-align:left; font-size:11px; }.nav-item:hover,.nav-item.is-active { color:#f0f0f0; background:rgba(255,255,255,.065); }.nav-item b { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; color:#111; background:var(--focus); border-radius:20px; font-size:8px; }
.recent-chats { margin-top:20px; min-height:0; overflow:auto; }.recent-chats > p { margin:0 10px 8px; color:#656970; font-size:9px; font-weight:700; }.recent-chats button { width:100%; overflow:hidden; padding:8px 11px; color:#8d9197; background:transparent; border:0; border-radius:8px; text-align:left; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.recent-chats button:hover { color:white; background:#25272a; }
.sidebar-footer { margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); }.profile-button { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:9px; width:100%; padding:8px; background:transparent; border:0; border-radius:9px; text-align:left; }.profile-button:hover { background:#252525; }.profile-button > span:first-child { display:grid; place-items:center; width:30px; height:30px; color:#111; background:#b6a2ff; border-radius:50%; font-size:10px; font-weight:800; }.profile-button > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; }.profile-button strong { font-size:11px; }.profile-button small { color:#777; font-size:9px; }.profile-button b { color:#777; font-size:9px; }
.agent-main { position:relative; flex:1; min-width:0; height:100%; background:radial-gradient(circle at 50% 24%,var(--focus-soft),transparent 31%),linear-gradient(145deg,#1f2022 0%,#1a1b1d 100%); transition:background .45s var(--ease); }
.agent-topbar { position:absolute; z-index:12; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; height:62px; padding:0 18px; background:linear-gradient(rgba(29,30,32,.96) 58%,transparent); }
.sidebar-open { display:none; }.mode-switcher,.platform-switcher { position:relative; }.model-selector { display:flex; align-items:center; gap:8px; min-height:39px; padding:5px 9px 5px 5px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06); border-radius:11px; }.model-selector:hover,.model-selector[aria-expanded="true"] { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }.model-selector strong { font-size:12px; }.model-monogram { display:grid; place-items:center; width:28px; height:28px; color:#111; background:var(--focus); border-radius:8px; font-size:8px; font-weight:900; letter-spacing:-.04em; box-shadow:0 5px 18px var(--focus-soft); }.selector-chevron { width:12px; height:12px; color:#7f848b; transition:transform .22s var(--ease); }.model-selector[aria-expanded="true"] .selector-chevron { transform:rotate(180deg); }
.mode-switcher { margin-right:auto; }
.conversation-header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
.conversation-header-actions[hidden] { display:none; }
.conversation-header-share,.conversation-header-more { display:flex; align-items:center; justify-content:center; height:36px; color:#f4f4f4; background:transparent; border:0; border-radius:8px; }
.conversation-header-share { min-width:133px; padding:0 12px; font-family:inherit; font-size:14px; font-weight:500; line-height:20px; }
.conversation-header-share > span { display:flex; width:100%; align-items:center; justify-content:center; gap:6px; }
.conversation-header-share svg,.conversation-header-more svg { width:20px; height:20px; fill:currentColor; }
.conversation-header-more { width:36px; padding:0; }
.conversation-header-share:hover,.conversation-header-more:hover,.conversation-header-share:focus-visible,.conversation-header-more:focus-visible { color:#fff; background:var(--focus-soft); outline:0; }
body.has-active-conversation .agent-topbar { height:52px; padding:0 8px; }
body.has-active-conversation .mode-switcher { display:none; }
#mode-selector .selector-chevron { transform:rotate(-90deg); }
#mode-selector[aria-expanded="true"] .selector-chevron { transform:rotate(0); }
.selector-menu { position:absolute; z-index:30; padding:7px; background:#151618; border:1px solid rgba(255,255,255,.13); border-radius:13px; box-shadow:0 18px 60px rgba(0,0,0,.48); animation:menu-in .2s var(--ease); scrollbar-width:thin; scrollbar-color:#45484d transparent; }.selector-menu[hidden] { display:none; }.selector-menu button { display:grid; grid-template-columns:33px 1fr 18px; align-items:center; gap:10px; width:100%; padding:9px; color:#aaa; background:transparent; border:0; border-radius:9px; text-align:left; }.selector-menu button:hover,.selector-menu button.is-selected { color:white; background:#292b2e; }.selector-menu button > span:first-child { display:grid; place-items:center; width:31px; height:31px; color:#111; background:var(--focus); border-radius:9px; font-size:9px; font-weight:900; letter-spacing:-.04em; }.selector-menu button > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; gap:3px; }.selector-menu button strong { font-size:11px; }.selector-menu button small { overflow:hidden; color:#777; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.selector-menu button i { color:var(--focus); font-size:10px; font-style:normal; opacity:0; }.selector-menu button.is-selected i { opacity:1; }.mode-menu { top:47px; left:0; width:280px; }.platform-menu { left:0; bottom:42px; width:310px; max-height:min(375px,51vh); overflow:auto; }.platform-menu > p { margin:5px 8px 7px; color:#777; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }.platform-menu button > span:first-child { background:var(--platform-color); }.platform-menu button small { text-transform:none; }.platform-menu button + button { margin-top:2px; }@keyframes menu-in{from{opacity:0;transform:translateY(-7px)}}
.view { display:none; width:100%; height:100%; }.view.is-active { display:block; }
.chat-view.is-active { display:flex; flex-direction:column; }
.chat-scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-color:#555 transparent; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(850px,calc(100% - 40px)); min-height:calc(100% - 20px); margin:auto; padding:85px 0 190px; text-align:center; transition:opacity .3s; }.empty-state.is-hidden { display:none; }
.kino-orb { position:relative; display:grid; place-items:center; width:58px; height:58px; color:#101112; background:var(--focus); border-radius:18px; box-shadow:0 0 0 10px rgba(255,255,255,.018),0 18px 70px var(--focus-soft); font-size:20px; font-weight:900; transform:rotate(-5deg); transition:.4s var(--ease); }.kino-orb span { transform:rotate(5deg); }
.empty-eyebrow { margin-top:21px; color:var(--focus); font-size:8px; font-weight:800; letter-spacing:.19em; }.empty-state h1 { margin:10px 0 9px; font-size:clamp(30px,3.7vw,44px); letter-spacing:-.052em; text-shadow:0 1px 20px rgba(0,0,0,.3); }.empty-state > p { width:min(690px,100%); margin:0; color:#a7abb2; font-size:13px; line-height:1.62; }
.suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; width:min(720px,100%); margin-top:32px; }.suggestions button { display:flex; justify-content:space-between; align-items:center; min-height:61px; padding:11px 14px; color:#bcbcbc; background:transparent; border:1px solid var(--line); border-radius:13px; text-align:left; transition:background .2s,border-color .2s; }.suggestions button:hover { color:white; background:#292929; border-color:rgba(255,255,255,.2); }.suggestions button > span { display:flex; min-width:0; flex-direction:column; gap:4px; }.suggestions strong { color:#dedede; font-size:11px; }.suggestions small { overflow:hidden; color:#777; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.suggestions b { color:#777; font-size:13px; }
.messages { display:flex; flex-direction:column; width:min(768px,calc(100% - 128px)); margin:0 auto; padding:64px 0 210px; box-sizing:border-box; }.message { display:grid; grid-template-columns:minmax(0,1fr); margin-bottom:30px; animation:message-in .35s var(--ease); }.message.user { grid-template-columns:1fr; }.message-avatar { display:none; }.message.agent .message-body { width:100%; }.message.user .message-body { justify-self:end; max-width:70%; padding:10px 16px; background:#303030; border-radius:22px; line-height:24px; }.message-body { min-width:0; }.message-body > strong { display:block; margin:0 0 8px; font-size:14px; }.message-body p { margin:0 0 4px; color:#e5e5e5; font-size:16px; font-weight:400; line-height:26px; }.message.user .message-body p { margin:0; line-height:24px; }.message-body .muted { color:#aaa; font-size:12px; }
.message-reference{width:min(280px,100%);margin:0 0 10px;overflow:hidden;background:#202020;border:1px solid rgba(255,255,255,.1);border-radius:12px}.message-reference img{display:block;width:100%;max-height:190px;object-fit:cover}.message-reference figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;color:#aaa;font-size:9px}.message-reference figcaption span{color:var(--acid);font-size:8px;font-weight:700}
@keyframes message-in { from { opacity:0; transform:translateY(12px); } }
.typing-dots { display:flex; gap:4px; padding-top:8px; }.typing-dots i { width:5px; height:5px; background:#888; border-radius:50%; animation:pulse .8s infinite alternate; }.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes pulse{to{transform:translateY(-4px);background:white}}
.message.typing.is-deep-thinking { margin-top:2px; margin-bottom:34px; }
.message.typing.is-deep-thinking .message-body > strong { display:none; }
.kino-thinking { display:flex; flex-direction:column; align-items:flex-start; width:min(450px,100%); min-height:76px; }
.kino-thinking-identity { display:flex; align-items:center; gap:10px; min-height:46px; }
.kino-thinking-mark { position:relative; display:block; flex:0 0 46px; width:46px; height:46px; overflow:visible; }
.kino-thinking-mark img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; transform-origin:center; }
.kino-thinking-core { filter:drop-shadow(0 0 7px rgba(63,210,255,.5)); }
.kino-thinking-orbit { will-change:transform; animation:kino-thinking-orbit-spin 4.2s linear infinite; }
.kino-thinking-name { display:block; margin:0; color:#f4f7fa; font-size:14px; font-weight:800; line-height:19px; letter-spacing:-.008em; }
.kino-thinking-status { display:flex; flex-direction:column; align-items:flex-start; min-width:0; margin:-3px 0 0 56px; }
.kino-thinking-title { color:#f4f7fa; font-size:15px; font-weight:760; line-height:22px; letter-spacing:-.012em; }
.kino-thinking-detail { margin-top:3px; color:#969da7; font-size:13px; line-height:19px; transition:opacity .2s ease,color .2s ease; }
.kino-thinking-progress { position:relative; display:block; width:min(250px,88%); height:2px; margin-top:9px; overflow:hidden; background:rgba(255,255,255,.065); border-radius:99px; }
.kino-thinking-progress::after { content:""; position:absolute; inset:0; width:42%; background:linear-gradient(90deg,transparent,#49d5ff 46%,#aeeeff 70%,transparent); transform:translateX(-120%); filter:drop-shadow(0 0 5px #43cfff); animation:kino-thinking-progress 1.65s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes kino-thinking-orbit-spin { to { transform:rotate(360deg); } }
@keyframes kino-thinking-progress { 60%,100% { transform:translateX(290%); } }
.message.agent .message-body p strong { color:inherit; font-weight:750; }
.message.agent .message-body h2,.message.agent .message-body h3,.message.agent .message-body h4 { margin:16px 0 5px; color:#f2f2f1; font-weight:760; letter-spacing:-.018em; }
.message.agent .message-body h2 { font-size:20px; line-height:28px; }
.message.agent .message-body h3 { font-size:18px; line-height:26px; }
.message.agent .message-body h4 { font-size:16px; line-height:24px; }
.message.agent .message-body > :is(h2,h3,h4):first-child { margin-top:0; }
.message.agent .message-body > p + :is(h2,h3,h4) { margin-top:10px; }
.message.agent .message-body > :is(ul,ol) + :is(h2,h3,h4) { margin-top:14px; }
.message.agent .message-body ul,.message.agent .message-body ol { display:flex; flex-direction:column; gap:5px; margin:5px 0 14px; padding-left:24px; color:#e5e5e5; font-size:16px; line-height:26px; }
.message.agent .message-body :is(h2,h3,h4) + :is(ul,ol) { margin-top:3px; }
.message.agent .message-body li { padding-left:3px; }
.message.agent .message-body li::marker { color:#aeb4bb; }
.message.agent .message-body em { font-style:italic; }
.message.agent .message-body p code,.message.agent .message-body li code { padding:2px 5px; color:#eafaff; background:rgba(87,216,239,.1); border-radius:5px; font:13px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
.message.agent .message-body .assistant-code { margin:12px 0 18px; overflow:auto; padding:15px 17px; color:#ececec; background:#202020; border-radius:12px; font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
.prompt-result { margin-top:15px; padding:18px; background:#171717; border:1px solid var(--line); border-radius:14px; }.prompt-result header { display:flex; justify-content:space-between; align-items:center; gap:14px; }.prompt-result header span { color:#aaa; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }.prompt-result button { padding:7px 10px; color:#d8d8d8; background:transparent; border:1px solid var(--line); border-radius:7px; font-size:10px; }.prompt-result button:hover { color:#111; background:var(--acid); }.prompt-result pre { max-height:390px; margin:18px 0; overflow:auto; color:#ededed; white-space:pre-wrap; font:12px/1.7 'Courier New',monospace; scrollbar-color:#555 transparent; }.defined-choices { margin:4px 0 15px; padding:12px; background:#202020; border-radius:9px; }.defined-choices > strong { color:#888; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.defined-choices ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 18px; margin:10px 0 0; padding:0; list-style:none; }.defined-choices li { display:flex; flex-direction:column; gap:2px; }.defined-choices b { color:#777; font-size:8px; text-transform:uppercase; }.defined-choices span { color:#ddd; font-size:10px; }.prompt-result details { margin:0 0 15px; padding:11px 12px; background:#202020; border-radius:9px; }.prompt-result summary { color:#aaa; font-size:10px; cursor:pointer; }.prompt-result details > p { margin:10px 0 0; color:#666; font-size:8px; line-height:1.5; }.result-sources { display:flex; flex-direction:column; gap:4px; margin-top:10px; }.result-sources a { display:flex; justify-content:space-between; gap:14px; padding:7px 8px; color:#bdbdbd; background:#171717; border-radius:6px; font-size:9px; }.result-sources a:hover { color:var(--acid); }.prompt-result footer { display:flex; gap:7px; padding-top:13px; border-top:1px solid rgba(255,255,255,.07); }.prompt-result footer button.is-saved { color:#111; background:var(--acid); border-color:var(--acid); }
.composer-zone { position:absolute; z-index:10; left:0; right:0; bottom:0; padding:28px 20px 12px; background:linear-gradient(transparent,var(--bg) 24%,var(--bg)); }
/* Claude-style question dock: measured 44px rows, 28px badges and 8px composer gap. */
.composer-questions { width:min(800px,100%); margin:0 auto 8px; padding-top:12px; overflow:hidden; color:var(--text); background:#222426; border:0; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.24),0 0 0 .5px rgba(255,255,255,.06); font-size:14px; line-height:21px; }
.composer-questions[hidden],.question-error[hidden] { display:none; }
.composer-question-header { display:flex; align-items:center; gap:8px; min-height:30px; padding:0 12px 6px 16px; }
.composer-question-header h2 { flex:1; min-width:0; margin:0; font-size:14px; font-weight:500; line-height:21px; }
.composer-question-header nav { display:flex; flex-shrink:0; align-items:center; gap:2px; color:#96999c; }
.composer-question-header nav span { font-variant-numeric:tabular-nums; white-space:nowrap; }
.composer-question-header button { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; padding:0; color:#96999c; background:transparent; border:0; border-radius:6px; }
.composer-question-header button:hover:not(:disabled) { color:var(--text); background:rgba(255,255,255,.06); }
.composer-question-header button:disabled { opacity:.35; cursor:default; }
.composer-questions svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.composer-question-body { padding:6px; }
.composer-question-options { display:flex; flex-direction:column; max-height:min(45dvh,420px); overflow-y:auto; outline:0; scrollbar-width:thin; scrollbar-color:#555 transparent; }
.composer-question-option { position:relative; display:flex; align-items:center; gap:10px; flex-shrink:0; width:100%; min-height:44px; padding:6px 10px; color:#b8bbbe; background:transparent; border:0; border-radius:12px; text-align:left; font-size:14px; line-height:21px; cursor:pointer; transition:background .15s,color .15s,transform .1s; }
.composer-question-option:active { transform:scale(.99); }
.composer-question-option + .composer-question-option,.composer-question-custom { margin-top:.5px; }
.composer-question-option + .composer-question-option::before,.composer-question-custom::before { position:absolute; top:0; left:12px; right:12px; height:.5px; background:rgba(255,255,255,.1); content:''; }
.question-number { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; overflow:hidden; color:#93979b; background:rgba(255,255,255,.05); border-radius:8px; }
.question-option-label { flex:1; min-width:0; overflow-wrap:anywhere; }
.question-option-arrow { flex:0 0 16px; margin-right:8px; color:#96999c; visibility:hidden; }
.composer-question-option.is-active,.composer-question-option:focus-visible { color:var(--text); background:rgba(255,255,255,.05); outline:0; }
.composer-question-option:is(.is-active,:focus-visible) .question-number { color:var(--text); background:rgba(255,255,255,.1); }
.composer-question-option:is(.is-active,:focus-visible) .question-option-arrow { visibility:visible; }
.composer-question-option:is(.is-active,:focus-visible)::before,.composer-question-option:is(.is-active,:focus-visible) + .composer-question-option::before,.composer-question-options:has(.composer-question-option:last-child:is(.is-active,:focus-visible)) + .composer-question-custom::before { opacity:0; }
.composer-question-option[aria-selected="true"] .question-number { color:var(--focus); }
.composer-question-custom { position:relative; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 10px; border-radius:12px; }
.composer-question-custom:is(:hover,:focus-within),.has-custom-answer .composer-question-custom { background:rgba(255,255,255,.05); }
.composer-question-custom:is(:hover,:focus-within) .question-number,.has-custom-answer .composer-question-custom .question-number { background:rgba(255,255,255,.1); }
.composer-question-body:has(.composer-question-custom:is(:hover,:focus-within)) .composer-question-option,
.has-custom-answer .composer-question-option { color:#b8bbbe; background:transparent; }
.composer-question-body:has(.composer-question-custom:is(:hover,:focus-within)) .composer-question-option .question-number,
.has-custom-answer .composer-question-option .question-number { color:#93979b; background:rgba(255,255,255,.05); }
.composer-question-body:has(.composer-question-custom:is(:hover,:focus-within)) .question-option-arrow,
.has-custom-answer .question-option-arrow { visibility:hidden; }
.composer-question-body:has(.composer-question-custom:is(:hover,:focus-within)) .composer-question-option::before,
.composer-questions.has-custom-answer .composer-question-option::before { opacity:1; }
.composer-question-custom:is(:hover,:focus-within)::before,.has-custom-answer .composer-question-custom::before { opacity:0; }
.composer-question-options { transition:opacity .15s; }
.has-custom-answer .composer-question-options { opacity:.35; }
.composer-question-custom .question-number svg { width:14px; height:14px; color:#b8bbbe; }
.composer-question-custom input { flex:1; min-width:0; width:100%; padding:0; color:var(--text); background:transparent; border:0; outline:0; font-size:14px; line-height:20px; }
.composer-question-custom input::placeholder { color:#93979b; }
.composer-question-custom button { flex-shrink:0; min-height:28px; padding:3px 10px; color:var(--text); background:rgba(255,255,255,.1); border:0; border-radius:8px; font-size:14px; line-height:21px; }
.composer-question-custom button:hover { background:rgba(255,255,255,.16); }
.composer-question-custom button.is-send { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; min-height:28px; padding:0; color:#1d1e20; background:#f4f4f2; }
.composer-question-custom button.is-send:hover { background:#fff; }
.composer-question-header button:focus-visible,.composer-question-custom button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.question-error { margin:3px 10px 7px; color:#ffbf90; font-size:12px; line-height:18px; }
.chat-view.has-question-dock .composer-zone { background:linear-gradient(transparent,var(--bg) 14%,var(--bg)); }
@media(max-height:640px) { .composer-question-options { max-height:30dvh; } }
@media(max-width:540px) { .composer-question-header { gap:4px; padding-left:12px; padding-right:6px; } .composer-question-header h2 { font-size:13px; line-height:18px; } .composer-question-header nav span { font-size:12px; } .composer-question-option { padding-left:8px; padding-right:8px; } }
.composer { position:relative; width:min(800px,100%); margin:auto; padding:13px 13px 10px 16px; background:linear-gradient(145deg,rgba(48,50,53,.97),rgba(39,41,44,.98)); border:0; border-radius:20px; box-shadow:0 24px 65px rgba(0,0,0,.28); transition:box-shadow .25s; }.composer::before { display:none; }.composer:focus-within { box-shadow:0 24px 70px rgba(0,0,0,.32); }
.attachment-preview { position:relative; display:grid; grid-template-columns:54px 1fr 24px; align-items:center; gap:10px; margin:0 0 9px; padding:7px; background:#252525; border:1px solid rgba(255,255,255,.1); border-radius:12px; }.attachment-preview[hidden]{display:none}.attachment-preview img{width:54px;height:48px;object-fit:cover;border-radius:8px}.attachment-preview>span{display:flex;min-width:0;flex-direction:column;gap:3px}.attachment-preview strong{overflow:hidden;color:#e7e7e7;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.attachment-preview small{color:#777;font-size:8px}.attachment-preview button{display:grid;place-items:center;width:22px;height:22px;padding:0;color:#aaa;background:#171717;border:1px solid rgba(255,255,255,.12);border-radius:50%;font-size:13px}.attachment-preview button:hover{color:white;background:#3b3b3b}
.composer textarea { display:block; width:100%; max-height:170px; resize:none; padding:7px 4px 4px; color:white; background:transparent; border:0; outline:0; font-size:14px; line-height:1.5; }.composer textarea::placeholder { color:#aaa; }
.composer-actions { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }.composer-actions > div { display:flex; align-items:center; gap:7px; }.composer-icon { position:relative; display:grid; place-items:center; width:34px; height:34px; padding:0; color:#c3c6ca; background:#222427; border:1px solid rgba(255,255,255,.14); border-radius:10px; }.composer-icon:hover { color:#111; background:var(--focus); border-color:var(--focus); box-shadow:0 0 20px var(--focus-soft); }.composer-icon > span,.composer-icon > span::before { display:block; width:11px; height:1.5px; background:currentColor; border-radius:2px; }.composer-icon > span::before { content:''; transform:rotate(90deg); }.platform-button { display:flex; align-items:center; gap:7px; height:34px; padding:4px 9px 4px 5px; color:#c0c3c8; background:#222427; border:1px solid rgba(255,255,255,.12); border-radius:10px; font-size:9px; }.platform-button:hover,.platform-button[aria-expanded="true"] { color:white; background:#36393d; border-color:var(--focus-line); }.platform-button > span { display:grid; place-items:center; min-width:23px; height:23px; padding:0 4px; color:#111; background:var(--platform-color,var(--focus)); border-radius:7px; font-size:7px; font-weight:900; }.platform-button strong { font-size:9px; }.platform-chevron { width:11px; height:11px; color:#777; transition:transform .2s var(--ease); }.platform-button[aria-expanded="true"] .platform-chevron { transform:rotate(180deg); }.send-button { display:grid; place-items:center; width:35px; height:35px; color:#111; background:var(--focus); border:0; border-radius:11px; font-size:17px; font-weight:700; box-shadow:0 8px 24px var(--focus-soft); }.send-button:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.08); }.send-button:disabled { color:#72767c; background:#4b4e52; box-shadow:none; cursor:default; }
.send-button svg { width:18px; height:18px; display:block; }
.send-button-stop-icon { display:none; width:10px; height:10px; background:#fff; border-radius:1.5px; }
.send-button.is-stop { width:36px; height:36px; color:#fff; background:#3474d4; border-radius:50%; box-shadow:none; }
.send-button.is-stop .send-button-send-icon { display:none; }
.send-button.is-stop .send-button-stop-icon { display:block; }
.send-button.is-stop:hover:not(:disabled) { transform:none; filter:brightness(1.08); }
.platform-button > span.is-preferences { position:relative; min-width:24px; width:24px; height:24px; padding:0; overflow:hidden; color:#8ff5df; background:linear-gradient(145deg,rgba(143,245,223,.18),rgba(85,191,255,.1)); border-radius:7px; box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.18),0 5px 14px rgba(70,224,204,.12); backdrop-filter:blur(8px) saturate(145%); }.platform-button > span.is-preferences::after { content:''; position:absolute; inset:1px 2px auto; height:42%; border-radius:6px 6px 4px 4px; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); pointer-events:none; }.preferences-acrylic-icon { position:relative; z-index:1; width:17px; height:17px; filter:drop-shadow(0 1px 3px rgba(62,238,213,.35)); }
.platform-button { background:rgba(255,255,255,.018); border-color:rgba(255,255,255,.065); box-shadow:none; }.platform-button:hover { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }.platform-button[aria-expanded="true"] { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11); }.platform-button > span.is-preferences { min-width:20px; width:20px; height:20px; overflow:visible; background:transparent; border-radius:0; box-shadow:none; backdrop-filter:none; }.platform-button > span.is-preferences::after { display:none; }.preferences-acrylic-icon { width:18px; height:18px; filter:drop-shadow(0 1px 3px rgba(62,238,213,.3)); }
.platform-button > span.is-models { min-width:20px; width:20px; height:20px; padding:0; color:#d8dce1; background:transparent; border-radius:0; }.platform-button > span.is-models svg { width:18px; height:18px; }
.generation-preferences { display:flex; align-items:center; gap:4px; }.preference-switcher { position:relative; height:36px; }.dreamina-preference-button { height:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:flex-start; gap:4px; padding:0 14px 0 12px; color:#f5fbff; background:transparent; border:1px solid rgba(204,221,255,.06); border-radius:8px; font-size:12px; font-weight:500; line-height:18px; white-space:nowrap; }.dreamina-preference-button:hover,.dreamina-preference-button[aria-expanded="true"] { background:rgba(204,221,255,.12); border-color:rgba(204,221,255,.06); }.dreamina-control-icon { width:16px; height:16px; flex:0 0 16px; }.dreamina-format-button > i { width:1px; height:10px; margin:0 4px; flex:0 0 1px; background:rgba(204,221,255,.06); border-radius:1px; }.kino-quality-icon { width:14px; height:14px; flex:0 0 14px; color:#39d7e8; filter:drop-shadow(0 0 5px rgba(57,215,232,.18)); }.dreamina-duration-button .dreamina-control-icon { transform:rotate(24deg); }.dreamina-preferences-panel { position:absolute; z-index:40; bottom:calc(100% + 8px); color:rgba(246,247,255,.7); background:rgb(28,29,33); border:1px solid rgba(204,221,255,.08); border-radius:16px; box-shadow:0 8px 56px rgba(0,0,0,.24); }.dreamina-preferences-panel[hidden] { display:none; }
.dreamina-format-button { width:127px; }.dreamina-preferences-panel button:focus,.dreamina-preferences-panel button:focus-visible { outline:0; }
.dreamina-reference-button { max-width:190px; padding-right:10px; }.dreamina-reference-icon { display:grid; place-items:center; width:16px; height:16px; flex:0 0 16px; }.dreamina-reference-icon svg { width:16px; height:16px; }.dreamina-reference-label { max-width:146px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.reference-mode-chevron { width:12px; height:12px; margin-left:1px; flex:0 0 12px; color:rgba(245,251,255,.48); transition:transform .2s var(--ease); }.dreamina-reference-button[aria-expanded="true"] .reference-mode-chevron { transform:rotate(180deg); }
.video-reference-menu { left:-16px; width:227px; height:206px; padding:4px 4px 4px; display:flex; flex-direction:column; gap:4px; overflow:hidden; border-radius:12px; }.video-reference-menu[hidden] { display:none; }.video-reference-menu > button { position:relative; width:217px; height:36px; min-height:36px; padding:0 12px; display:grid; grid-template-columns:16px minmax(0,1fr) auto 16px; align-items:center; gap:8px; color:rgba(245,251,255,.82); background:transparent; border:0; border-radius:8px; text-align:left; font-size:13px; font-weight:500; line-height:36px; }.video-reference-menu > button:hover,.video-reference-menu > button.is-selected { color:#f5fbff; background:rgba(88,220,234,.11); }.video-reference-menu > button > svg { width:16px; height:16px; }.video-reference-menu > button > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.video-reference-menu > button > b { display:grid; place-items:center; width:20px; height:12px; color:#56e4ed; background:rgba(21,219,224,.13); border-radius:4px; font-size:5.5px; font-weight:700; line-height:12px; }.video-reference-menu > button > i { width:16px; height:16px; opacity:0; }.video-reference-menu > button.is-selected > i { opacity:1; background:currentColor; clip-path:path('M15.652 6.902a.5.5 0 0 1 0 .707l-6.548 6.55a.5.5 0 0 1-.707 0l-4.05-4.05a.5.5 0 0 1 0-.707l.472-.471a.5.5 0 0 1 .707 0l3.224 3.224 5.724-5.724a.5.5 0 0 1 .707 0l.471.471Z'); }
.long-video-notice { position:absolute; z-index:55; left:12px; bottom:calc(100% + 18px); width:320px; height:76px; padding:14px 38px 13px 16px; color:#eaffff; background:linear-gradient(135deg,rgba(34,215,225,.96),rgba(24,159,185,.98)); border:1px solid rgba(191,255,255,.3); border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px rgba(0,0,0,.34),0 0 34px rgba(49,218,231,.14); animation:kino-notice-in .2s var(--ease); }.long-video-notice[hidden] { display:none; }.long-video-notice::before { content:''; position:absolute; left:-8px; bottom:14px; width:16px; height:16px; background:linear-gradient(135deg,rgba(34,215,225,.96),rgba(30,193,207,.98)); transform:rotate(45deg); border-radius:2px; }.long-video-notice > button { position:absolute; z-index:1; top:9px; right:10px; display:grid; place-items:center; width:22px; height:22px; padding:0; color:rgba(234,255,255,.72); background:transparent; border:0; border-radius:6px; font-size:17px; font-weight:300; line-height:1; }.long-video-notice > button:hover { color:white; background:rgba(2,55,64,.14); }.long-video-notice > div { position:relative; z-index:1; display:flex; align-items:center; gap:8px; height:18px; }.long-video-notice > div span { padding:3px 6px; color:#075b68; background:#eaffff; border-radius:3px; font-size:8px; font-weight:800; line-height:11px; }.long-video-notice > div strong { font-size:12px; line-height:18px; }.long-video-notice > p { position:relative; z-index:1; margin:5px 0 0; color:#f2ffff; font-size:11px; line-height:17px; }.long-video-notice.is-closing { animation:kino-notice-out .16s ease forwards; }@keyframes kino-notice-in{from{opacity:0;transform:translateX(-7px) scale(.985)}}@keyframes kino-notice-out{to{opacity:0;transform:translateX(-5px) scale(.985)}}
.long-video-notice::before { left:42.3px; bottom:-8px; }
.video-reference-menu > button > i { position:relative; background:none!important; clip-path:none!important; }.video-reference-menu > button > i::before { content:''; position:absolute; left:3px; top:3px; width:9px; height:5px; border-left:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(-45deg); }
.video-reference-menu > button { grid-template-columns:16px minmax(0,1fr) auto; }.video-reference-menu > button > i { position:absolute; right:12px; top:10px; }.video-reference-menu > button.is-selected > span { padding-right:22px; }
.format-preferences-panel { left:-16px; width:334px; height:206px; padding:16px; overflow:hidden; }.format-preferences-panel section { width:300px; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }.format-preferences-panel section:first-child { height:84px; }.format-preferences-panel section:last-child { height:64px; margin-top:24px; }.dreamina-panel-label { width:300px; height:12px; color:rgba(224,245,255,.35); font-size:12px; line-height:12px; }.dreamina-ratio-grid,.dreamina-resolution-row { width:300px; padding:2px; display:flex; align-items:center; justify-content:space-around; gap:2px; background:rgba(204,221,255,.04); }.dreamina-ratio-grid { height:60px; border-radius:12px; }.dreamina-resolution-row { height:40px; border-radius:10px; }.dreamina-ratio-grid > button,.dreamina-resolution-row > button { min-width:0; margin:0; padding:0; display:flex; align-items:center; justify-content:center; flex:1 1 0; color:#f5fbff; background:transparent; border:0; border-radius:8px; }.dreamina-ratio-grid > button { width:47.67px; height:56px; flex:0 0 47.67px; flex-direction:column; gap:8px; font-size:12px; line-height:12px; }.dreamina-ratio-grid > button svg { width:16px; height:16px; flex:0 0 16px; }.dreamina-resolution-row > button { width:97.33px; height:36px; flex:0 0 97.33px; gap:0; font-size:13px; }.dreamina-resolution-row > button .kino-quality-icon { margin-left:2px; }.dreamina-ratio-grid > button:hover,.dreamina-ratio-grid > button[aria-checked="true"],.dreamina-resolution-row > button:hover,.dreamina-resolution-row > button[aria-checked="true"] { background:rgba(204,221,255,.08); }
.duration-preferences-panel { right:0; width:400px; height:96px; padding:16px; overflow:hidden; }.dreamina-duration-title { width:368px; height:12px; display:block; color:rgba(224,245,255,.35); font-size:12px; font-weight:500; line-height:12px; }.dreamina-duration-content { width:368px; height:38px; margin-top:12px; display:grid; grid-template-columns:254px 90px; align-items:start; gap:24px; }.dreamina-duration-slider { width:254px; height:38px; padding-top:4px; }.dreamina-duration-range-wrap { position:relative; width:254px; height:12px; }.dreamina-duration-range-wrap input { position:relative; z-index:2; width:254px; height:12px; margin:0; display:block; appearance:none; border:0; border-radius:4px; outline:0; background:linear-gradient(90deg,rgba(204,221,255,.20) 0 var(--duration-progress,0%),rgba(204,221,255,.08) var(--duration-progress,0%) 100%); }.dreamina-duration-range-wrap input::-webkit-slider-thumb { width:4px; height:16px; appearance:none; border:0; border-radius:2px; background:rgba(248,250,255,.94); cursor:pointer; }.dreamina-duration-range-wrap input::-moz-range-thumb { width:4px; height:16px; border:0; border-radius:2px; background:rgba(248,250,255,.94); cursor:pointer; }.dreamina-duration-range-wrap > span { position:absolute; z-index:3; top:4px; width:1px; height:4px; background:rgba(204,221,255,.2); transform:translateX(-.5px); pointer-events:none; }.dreamina-duration-ticks { position:relative; width:254px; height:14px; margin-top:4px; }.dreamina-duration-ticks button { position:absolute; top:0; width:32px; min-width:32px; height:14px; min-height:14px; padding:0; color:rgba(248,250,255,.48); background:transparent; border:0; transform:translateX(-50%); font-size:10px; font-weight:500; line-height:14px; }.dreamina-duration-number { width:90px; height:36px; padding:0 8px; display:flex; align-items:center; border-radius:8px; color:rgba(248,250,255,.75); background:rgba(204,221,255,.08); font-size:14px; font-weight:500; }.dreamina-duration-number input { width:58px; height:36px; padding:0; color:#f5fbff; background:transparent; border:0; outline:0; font-size:12px; font-weight:500; }.dreamina-duration-number input::-webkit-inner-spin-button { display:none; }.dreamina-duration-number span { color:rgba(248,250,255,.42); }.dreamina-duration-ticks button:first-child { transform:none; }.dreamina-duration-ticks button:last-child { transform:translateX(-100%); }
.preference-duration-switcher { width:74px; min-width:74px; flex:0 0 74px; }.dreamina-duration-button { width:74px; min-width:74px; }.dreamina-duration-button > span { min-width:29px; text-align:left; }
.video-audio-toggle { width:36px; height:36px; min-width:36px; padding:0; display:grid; place-items:center; flex:0 0 36px; color:#39d7e8; background:transparent; border:1px solid rgba(204,221,255,.06); border-radius:8px; }
.video-audio-toggle:hover { color:#f5fbff; background:rgba(204,221,255,.12); border-color:rgba(204,221,255,.06); }
.video-audio-toggle:focus-visible { outline:2px solid color-mix(in srgb,var(--focus) 72%,white 28%); outline-offset:2px; }
.video-audio-icon { width:14px; height:14px; display:block; overflow:visible; filter:drop-shadow(0 0 5px rgba(57,215,232,.18)); }
.video-audio-muted { display:none; }
.video-audio-toggle[aria-pressed="false"] { color:rgba(245,251,255,.48); }
.video-audio-toggle[aria-pressed="false"] .video-audio-sound { display:none; }
.video-audio-toggle[aria-pressed="false"] .video-audio-muted { display:block; }
/* Dreamina title/rail geometry, retaining KINO's compact seconds field. */
.duration-preferences-panel { width:368px; height:96px; }
.dreamina-duration-title { width:100%; font:500 12px/12px Montserrat,"Manrope",sans-serif; }
.dreamina-duration-content { width:100%; height:38px; grid-template-columns:minmax(0,1fr) 56px; gap:24px; }
.dreamina-duration-slider { width:100%; height:38px; padding-top:4px; }
.dreamina-duration-range-wrap,.dreamina-duration-range-wrap input,.dreamina-duration-ticks { width:100%; }
.dreamina-duration-ticks { margin-top:8px; }
.dreamina-duration-ticks button { font:500 10px/14px Montserrat,"Manrope",sans-serif; }
.dreamina-duration-ticks button:first-child,.dreamina-duration-ticks button:last-child { transform:translateX(-50%); }
.dreamina-duration-number { width:56px; height:32px; justify-content:center; transform:translateY(-6px); }
.dreamina-duration-number input { height:32px; flex-shrink:0; font:500 12px/20px Montserrat,"Manrope",sans-serif; font-variant-numeric:tabular-nums; }
.dreamina-duration-number > span { margin-left:4px; }
.platform-menu,.dreamina-preferences-panel { background:radial-gradient(circle at 16% -15%,rgba(88,220,234,.13),transparent 42%),linear-gradient(145deg,rgba(48,54,61,.78),rgba(17,19,23,.86)); border-color:rgba(214,235,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 72px rgba(0,0,0,.48); -webkit-backdrop-filter:blur(28px) saturate(155%); backdrop-filter:blur(28px) saturate(155%); }.platform-menu { scrollbar-width:none; -ms-overflow-style:none; }.platform-menu::-webkit-scrollbar { display:none; width:0; height:0; }.platform-menu button:hover,.platform-menu button.is-selected { background:rgba(214,235,255,.075); }
.platform-menu button > span.platform-acrylic-mark,#platform-icon:not(.is-models):not(.is-preferences) { position:relative; isolation:isolate; overflow:hidden; color:#f8fbff; background:var(--platform-color); background:conic-gradient(from 215deg,color-mix(in srgb,var(--platform-color) 54%,#72dfff 46%),color-mix(in srgb,var(--platform-color) 58%,#ff5bd4 42%),color-mix(in srgb,var(--platform-color) 62%,#a982ff 38%),color-mix(in srgb,var(--platform-color) 58%,#61d9ff 42%),color-mix(in srgb,var(--platform-color) 54%,#ff65c9 46%)); border:0; box-shadow:0 0 0 1px color-mix(in srgb,var(--platform-color) 48%,rgba(255,255,255,.58) 52%),0 5px 15px color-mix(in srgb,var(--platform-color) 27%,transparent 73%),inset 0 1px 0 rgba(255,255,255,.7); text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 8px color-mix(in srgb,var(--platform-color) 60%,white 40%); transition:transform .22s var(--ease),filter .22s var(--ease),box-shadow .22s var(--ease); }.platform-menu button > span.platform-acrylic-mark::before,#platform-icon:not(.is-models):not(.is-preferences)::before { content:''; position:absolute; z-index:0; inset:2px; background:radial-gradient(circle at 25% 12%,rgba(255,255,255,.16),transparent 35%),linear-gradient(145deg,rgba(34,39,53,.94),rgba(9,13,23,.96)); border-radius:inherit; box-shadow:inset 1px 1px 2px rgba(255,255,255,.18),inset -2px -3px 6px rgba(0,0,0,.48); }.platform-menu button > span.platform-acrylic-mark::after,#platform-icon:not(.is-models):not(.is-preferences)::after { content:''; position:absolute; z-index:2; inset:3px; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 35%,transparent 72%,color-mix(in srgb,var(--platform-color) 38%,transparent 62%)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); pointer-events:none; }.platform-menu button > span.platform-acrylic-mark > b,#platform-icon:not(.is-models):not(.is-preferences) > b { position:relative; z-index:1; display:block; color:#f8fbff; background:linear-gradient(135deg,color-mix(in srgb,var(--platform-color) 35%,white 65%) 5%,color-mix(in srgb,var(--platform-color) 72%,#ff8de5 28%) 49%,color-mix(in srgb,var(--platform-color) 60%,#87c8ff 40%) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 1px rgba(0,0,0,.58)) drop-shadow(0 0 4px color-mix(in srgb,var(--platform-color) 48%,transparent 52%)); font-size:9px; font-weight:900; line-height:1; letter-spacing:-.04em; }.platform-menu button > span.platform-acrylic-mark { width:31px; height:31px; border-radius:9px; }.platform-menu button:hover > span.platform-acrylic-mark,.platform-menu button.is-selected > span.platform-acrylic-mark { transform:translateY(-1px) scale(1.055) rotate(-1deg); filter:brightness(1.12) saturate(1.16); box-shadow:0 0 0 1px color-mix(in srgb,var(--platform-color) 52%,rgba(255,255,255,.7) 48%),0 8px 22px color-mix(in srgb,var(--platform-color) 38%,transparent 62%),inset 0 1px 0 rgba(255,255,255,.82); }
#platform-icon:not(.is-models):not(.is-preferences) { min-width:23px; width:23px; height:23px; padding:0; border-radius:7px; }#platform-icon:not(.is-models):not(.is-preferences)::before { inset:1.5px; }#platform-icon:not(.is-models):not(.is-preferences)::after { inset:2px; }#platform-icon:not(.is-models):not(.is-preferences) > b { font-size:7px; }
.dreamina-reference-button,.video-reference-menu { font-family:Montserrat,"Manrope",sans-serif; }.dreamina-preferences-panel.video-reference-menu { width:227px; height:206px; padding:4px 0 4px 4px; background:rgb(28,30,34); border:1px solid rgba(204,221,255,.08); border-radius:12px; box-shadow:0 8px 56px rgba(0,0,0,.24); -webkit-backdrop-filter:none; backdrop-filter:none; }.video-reference-menu > button { width:217px; height:36px; min-height:36px; color:#f5fbff; background:transparent; border-radius:8px; font-family:Montserrat,"Manrope",sans-serif; font-size:13px; font-weight:500; line-height:36px; }.video-reference-menu > button:hover,.video-reference-menu > button.is-selected { color:#f5fbff; background:rgba(204,221,255,.08); }.video-reference-menu > button > span { font-weight:400; }.video-reference-menu > button > b { display:block; width:20px; height:12px; padding:0; overflow:hidden; color:inherit; background:transparent; border-radius:0; line-height:0; }.video-reference-menu > button > b svg { display:block; width:20px; height:12px; }.video-reference-menu > button > b rect { color:rgba(0,202,224,.12); fill:currentColor; }.video-reference-menu > button > b path { color:rgb(0,202,224); fill:currentColor; }.video-reference-menu > button > i { width:16px; height:16px; color:#f5fbff; line-height:0; }.video-reference-menu > button > i::before { display:none; }.video-reference-menu > button > i svg { display:block; width:16px; height:16px; }
.dreamina-reference-button { padding-right:10.8px; }
.video-reference-menu > button { display:flex; align-items:center; gap:0; }.video-reference-menu > button > .reference-option-main { width:177px; max-width:calc(100% - 16px); height:36px; padding:0; display:flex; align-items:center; gap:8px; flex:0 0 177px; overflow:visible; }.video-reference-menu > button.is-selected > .reference-option-main { padding-right:0; }.reference-option-main > svg { width:16px; height:16px; flex:0 0 16px; }.reference-option-main > span { min-width:0; max-width:153px; overflow:hidden; flex:0 1 auto; font-size:13px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }.reference-option-main > b { display:block; width:20px; height:12px; padding:0; overflow:hidden; flex:0 0 20px; color:inherit; background:transparent; border-radius:0; line-height:0; }.reference-option-main > b svg { display:block; width:20px; height:12px; }.reference-option-main > b rect { color:rgba(0,202,224,.12); fill:currentColor; }.reference-option-main > b path { color:rgb(0,202,224); fill:currentColor; }.video-reference-menu > button > i { position:static; right:auto; top:auto; width:16px; height:16px; margin:0; flex:0 0 16px; color:#f5fbff; line-height:0; }
body:not([data-focus="video"]) .generation-preferences { display:none; }
.image-generation-preferences { display:flex; align-items:center; gap:4px; }.image-generation-preferences[hidden] { display:none; }.image-preference-switcher { height:36px; }.image-preferences-button { min-width:92px; max-width:186px; padding:0 10px; gap:6px; }.image-preferences-button > span { overflow:hidden; text-overflow:ellipsis; }.image-preferences-button .kino-quality-icon { width:12px; height:12px; color:var(--focus); }.image-preferences-panel { left:-18px; bottom:calc(100% + 9px); width:368px; max-height:min(468px,calc(100vh - 190px)); padding:15px; overflow:auto; border-radius:14px; scrollbar-width:none; -ms-overflow-style:none; }.image-preferences-panel::-webkit-scrollbar { display:none; width:0; height:0; }.image-preferences-panel > header { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 1px 14px; padding-bottom:12px; border-bottom:1px solid rgba(214,235,255,.08); }.image-preferences-panel > header span { color:#f4f7fa; font:600 12px/1.2 Montserrat,"Manrope",sans-serif; }.image-preferences-panel > header small { color:rgba(224,235,245,.38); font:500 9px/1.2 Montserrat,"Manrope",sans-serif; }.image-option-section { display:flex; flex-direction:column; gap:8px; margin-top:15px; }.image-option-section:first-of-type { margin-top:0; }.image-option-section > span { color:rgba(224,235,245,.48); font:500 10px/1.2 Montserrat,"Manrope",sans-serif; }.image-option-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding:3px; background:rgba(204,221,255,.04); border-radius:10px; }.image-option-grid > button { min-width:0; min-height:34px; padding:0 7px; color:rgba(245,251,255,.76); background:transparent; border:0; border-radius:7px; font:500 10px/1.15 Montserrat,"Manrope",sans-serif; white-space:normal; }.image-option-grid > button:hover,.image-option-grid > button.is-selected { color:#f7fbff; background:rgba(255,179,92,.12); box-shadow:inset 0 0 0 1px rgba(255,179,92,.08); }.image-option-grid.is-ratios { grid-template-columns:repeat(5,minmax(0,1fr)); }.image-option-grid.is-ratios > button { height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:3px; }.image-option-grid.is-ratios > button svg { width:18px; height:18px; }.image-ratio-glyph { display:block; min-width:7px; max-width:16px; min-height:7px; max-height:16px; border:1.4px solid currentColor; border-radius:2.5px; }.image-dimensions { display:grid; grid-template-columns:1fr 12px 1fr; align-items:center; gap:6px; }.image-dimensions > b { color:rgba(224,235,245,.28); font-size:11px; text-align:center; }.image-dimensions label { height:38px; display:grid; grid-template-columns:18px 1fr 18px; align-items:center; gap:4px; padding:0 8px; color:rgba(224,235,245,.42); background:rgba(204,221,255,.05); border-radius:8px; }.image-dimensions label > span { font-size:9px; font-weight:700; }.image-dimensions label > small { font-size:8px; }.image-dimensions input { min-width:0; width:100%; padding:0; color:#f6f9fc; background:transparent; border:0; outline:0; font:500 11px/1 Montserrat,"Manrope",sans-serif; text-align:right; }.image-dimensions input::-webkit-inner-spin-button { display:none; }.image-utility-button { width:36px; height:36px; display:grid; place-items:center; padding:0; color:rgba(245,251,255,.78); background:transparent; border:1px solid rgba(204,221,255,.06); border-radius:8px; font:600 14px/1 Montserrat,"Manrope",sans-serif; }.image-utility-button svg { width:17px; height:17px; }.image-utility-button:hover,.image-utility-button.is-active { color:#fff; background:rgba(204,221,255,.1); }.image-utility-button.is-active { color:var(--focus); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--focus) 24%,transparent); }.image-mention-button { font-size:15px; }
.image-generation-preferences > [hidden] { display:none; }.image-preferences-button { width:auto; min-width:0; max-width:none; height:36px; padding:0 14px 0 12px; gap:0; border:1px solid rgba(204,221,255,.06); border-radius:8px; font:450 12px/18px Montserrat,"Manrope",sans-serif; }.image-preferences-button:hover,.image-preferences-button[aria-expanded="true"] { color:#f5fbff; background:rgba(204,221,255,.12); border-color:rgba(204,221,255,.06); }.image-preferences-summary,#image-preferences-summary { display:flex; align-items:center; overflow:visible; color:#f5fbff; }.image-summary-part { display:flex; align-items:center; gap:4px; white-space:nowrap; }.image-summary-part > svg:not(.image-commercial-star) { width:16px; height:16px; flex:0 0 16px; }.image-summary-part > b { font:450 12px/18px Montserrat,"Manrope",sans-serif; }.image-summary-divider { width:1px; height:10px; margin:0 7px; background:rgba(204,221,255,.06); border-radius:1px; }.image-commercial-star { width:14px; height:14px; flex:0 0 14px; color:#00cadd; }.dreamina-preferences-panel.image-preferences-panel { left:-18px; bottom:calc(100% + 8px); width:434px; max-height:none; padding:16px; overflow:visible; color:rgba(246,247,255,.7); background:rgb(28,29,33); border:1px solid rgba(204,221,255,.08); border-radius:16px; box-shadow:0 8px 56px rgba(0,0,0,.24); -webkit-backdrop-filter:none; backdrop-filter:none; scrollbar-width:none; }.image-preferences-panel > header { display:none; }.image-option-section { width:400px; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }.image-option-section + .image-option-section { margin-top:20px; }.image-option-section[data-image-section="count"] { padding-bottom:8px; }.image-option-section > span { width:400px; height:12px; color:rgba(224,245,255,.35); font:12px/12px Montserrat,"Manrope",sans-serif; }.image-option-grid { width:400px; height:40px; padding:2px; display:flex; align-items:center; gap:2px; background:rgba(204,221,255,.04); border-radius:10px; }.image-option-grid.is-ratios { width:400px; height:60px; padding:2px; display:flex; grid-template-columns:none; gap:2px; border-radius:12px; }.image-option-grid > button,.image-option-grid.is-ratios > button { min-width:0; width:auto; height:36px; min-height:36px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; flex:1 1 0; gap:4px; color:#f5fbff; background:transparent; border:0; border-radius:8px; box-shadow:none; font:500 12px/28px Montserrat,"Manrope",sans-serif; white-space:nowrap; }.image-option-grid.is-ratios > button { height:56px; min-height:56px; flex-direction:column; gap:0; }.image-option-grid.is-ratios > button svg { width:16px; height:16px; flex:0 0 16px; }.image-option-grid > button:hover,.image-option-grid > button.is-selected,.image-option-grid.is-ratios > button:hover,.image-option-grid.is-ratios > button.is-selected { color:#f5fbff; background:rgba(204,221,255,.08); box-shadow:none; }.image-option-grid > button:disabled { color:rgba(245,251,255,.3); background:transparent; cursor:not-allowed; }.image-option-grid > button:disabled:hover { background:transparent; }.image-option-grid > button .image-commercial-star { margin-left:0; }.image-dimensions { width:400px; height:36px; display:flex; align-items:center; gap:0; }.image-dimensions label { width:149px; height:36px; padding:10px 16px; display:flex; align-items:center; gap:8px; color:rgba(229,233,250,.4); background:rgba(204,221,255,.04); border-radius:8px; }.image-dimensions label > span { width:12px; flex:0 0 12px; color:rgba(224,245,255,.6); font:500 12px/16px Montserrat,"Manrope",sans-serif; }.image-dimensions input { width:103px; height:34px; padding:7px 0; color:#f5fbff; background:transparent; border:0; outline:0; font:500 12px/20px Montserrat,"Manrope",sans-serif; text-align:right; }.image-dimension-lock { width:48px; height:36px; padding:0; display:grid; place-items:center; flex:0 0 48px; color:rgba(224,245,255,.6); background:transparent; border:0; border-radius:10px; }.image-dimension-lock svg { width:20px; height:20px; }.image-dimensions > small { width:54px; color:rgba(224,245,255,.6); font:500 12px/16px Montserrat,"Manrope",sans-serif; text-align:center; }.image-utility-button { width:36px; height:36px; padding:0; color:rgba(245,251,255,.78); background:transparent; border:1px solid rgba(204,221,255,.06); border-radius:8px; box-shadow:none; }.image-utility-button svg { width:18px; height:18px; }.image-utility-button:hover,.image-utility-button.is-active { color:#f5fbff; background:rgba(204,221,255,.12); border-color:rgba(204,221,255,.06); box-shadow:none; }.image-utility-button.is-active { color:#f5fbff; }
.platform-switcher + .image-generation-preferences { margin-left:-3px; }.image-preferences-button[data-image-model="seedream_image"] { width:134px; }.dreamina-preferences-panel.image-preferences-panel { left:-16px; }
.image-task-button { max-width:178px; padding-right:10px; gap:7px; font-family:Montserrat,"Manrope",sans-serif; }
.image-task-button .image-task-icon { width:16px; height:16px; flex:0 0 16px; color:#f5fbff; }
.image-task-label { min-width:0; max-width:128px; overflow:hidden; color:#f5fbff; text-overflow:ellipsis; white-space:nowrap; }
.image-task-button[aria-expanded="true"] .reference-mode-chevron { transform:rotate(180deg); }
.dreamina-preferences-panel.image-task-menu { width:227px; height:auto; min-height:44px; max-height:164px; padding:4px 0 4px 4px; overflow:auto; scrollbar-width:none; }
.image-task-menu::-webkit-scrollbar { display:none; width:0; height:0; }
.image-task-menu > button { width:217px; }
.image-task-menu .reference-option-main { width:177px; flex-basis:177px; }
.image-task-menu .reference-option-main > span { max-width:153px; }
/* Image controls retain the reference geometry with KINO's acrylic finish. */
.dreamina-preferences-panel.image-preferences-panel {
  background:radial-gradient(ellipse at 12% 0%,rgba(88,220,234,.12),transparent 55%),linear-gradient(145deg,rgba(44,50,57,.74),rgba(20,23,28,.84));
  border-color:rgba(214,235,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
}
.image-ratio-section { gap:14px; }
.image-option-grid.is-ratios > button { gap:8px; line-height:12px; }
.image-option-grid.is-ratios > button[data-image-preference-value="Automático"] { flex:0 0 84px; }
.image-option-grid.is-ratios > button > span { max-width:100%; }
.image-summary-part > svg.image-quality-icon,.image-preferences-button .image-quality-icon,.image-option-grid .image-quality-icon {
  width:14px; height:14px; flex:0 0 14px; color:#39d7e8;
  filter:drop-shadow(0 0 5px rgba(57,215,232,.18));
}
.composer-note { margin:8px 0 0; color:#777; font-size:9px; text-align:center; }

/* KINO model effort selector: Airi/GPT geometry with KINO acrylic finish. */
.kino-composer-right { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:0 0 auto; min-width:0; }
.kino-model-selector { position:absolute; z-index:75; right:12px; bottom:calc(100% + 8px); overflow:visible; flex:0 0 auto; font-family:Montserrat,"Manrope",sans-serif; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px) scale(.96); transform-origin:bottom right; transition:opacity 150ms cubic-bezier(.2,.8,.2,1),transform 180ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 180ms; }
.composer.is-model-control-visible .kino-model-selector { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s; }
.kino-model-selector-button { position:relative; display:flex; align-items:center; justify-content:center; width:170px; min-width:0; height:36px; min-height:36px; margin:0; padding:0; box-sizing:border-box; color:rgba(245,251,255,.9); background:transparent; border:0; border-radius:999px; box-shadow:none; font:500 14px/20px Montserrat,"Manrope",sans-serif; letter-spacing:normal; transition:width 300ms cubic-bezier(.19,1,.22,1),margin 300ms cubic-bezier(.19,1,.22,1),color 150ms ease,background-color 140ms ease,box-shadow 180ms ease; }
.kino-model-selector-button:hover,.kino-model-selector.is-open .kino-model-selector-button { color:#fff; }
.kino-model-selector.is-open .kino-model-selector-button { width:248px; background:rgba(57,215,232,.075); box-shadow:0 4px 12px rgba(57,215,232,.1); }
.kino-model-selector-button:focus,.kino-model-selector-button:focus-visible { outline:0; box-shadow:none; }
.kino-model-selector-button:focus-visible { color:#fff; background:transparent; }
.kino-model-selector-pill { position:relative; display:flex; align-items:center; gap:5px; min-width:0; padding:4px 8px; border-radius:999px; background:transparent; box-shadow:none; transition:background-color 140ms ease,box-shadow 180ms ease; }
.kino-model-selector:not(.is-open) .kino-model-selector-button:hover .kino-model-selector-pill { background:rgba(57,215,232,.075); box-shadow:0 4px 12px rgba(57,215,232,.1); }
.kino-model-selector.is-open .kino-model-selector-pill { background:transparent; box-shadow:none; }
.kino-model-selector-summary { min-width:0; max-width:160px; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.kino-model-selector-chevron { width:16px; height:16px; flex:0 0 16px; color:rgba(224,235,245,.48); transform:rotate(180deg); }
.kino-model-panel { position:absolute; z-index:70; right:50%; bottom:calc(100% + 4px); width:248px; height:96px; box-sizing:border-box; padding:10px 0; overflow:visible; color:#f5fbff; background:radial-gradient(ellipse at 12% 0%,rgba(88,220,234,.13),transparent 55%),linear-gradient(145deg,rgba(44,50,57,.78),rgba(20,23,28,.88)); border:1px solid rgba(214,235,255,.14); border-radius:20px; box-shadow:0 8px 20px rgba(57,215,232,.11); -webkit-backdrop-filter:blur(28px) saturate(155%); backdrop-filter:blur(28px) saturate(155%); opacity:0; visibility:hidden; pointer-events:none; transform:translate(50%,10px); transition:opacity 150ms cubic-bezier(.2,.8,.2,1),transform 180ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 180ms; }
.kino-model-selector.is-open .kino-model-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translate(50%,0); transition-delay:70ms; }
.kino-model-panel.is-details-open { height:168px; animation:kino-model-panel-expand 400ms cubic-bezier(.22,.72,.16,1) both; }
.kino-model-panel.is-details-closing { height:96px; animation:kino-model-panel-collapse 300ms cubic-bezier(.32,.72,0,1) both; }
.kino-model-panel.is-details-animating { overflow:hidden; }
@keyframes kino-model-panel-expand { 0%{height:96px} 72%{height:181px} 100%{height:168px} }
@keyframes kino-model-panel-collapse { 0%{height:168px} 100%{height:96px} }
.kino-model-view-frame { position:relative; height:76px; overflow:hidden; transition:none; }
.kino-model-view-track { position:relative; width:100%; height:100%; transform:none; transition:none; }
.kino-model-compact-view,.kino-model-details-view { position:absolute; right:0; bottom:0; left:0; width:100%; overflow:hidden; }
.kino-model-compact-view { height:76px; opacity:1; visibility:visible; transition:none; }
.kino-model-details-view { height:148px; opacity:0; visibility:hidden; pointer-events:none; transform:none; transition:none; }
.kino-model-panel.is-details-open .kino-model-view-frame { height:148px; animation:kino-model-frame-expand 400ms cubic-bezier(.22,.72,.16,1) both; }
.kino-model-panel.is-details-closing .kino-model-view-frame { height:76px; animation:kino-model-frame-collapse 300ms cubic-bezier(.32,.72,0,1) both; }
@keyframes kino-model-frame-expand { 0%{height:76px} 72%{height:161px} 100%{height:148px} }
@keyframes kino-model-frame-collapse { 0%{height:148px} 100%{height:76px} }
.kino-model-panel.is-details-open .kino-model-view-track { transform:none; }
.kino-model-panel.is-details-open .kino-model-compact-view { opacity:0; visibility:hidden; pointer-events:none; transition-delay:0s; }
.kino-model-panel.is-details-open .kino-model-details-view { opacity:1; visibility:visible; transform:none; }
.kino-model-panel.is-details-open .kino-model-details-view { pointer-events:auto; }
.kino-model-panel.is-details-closing .kino-model-details-view { opacity:0; visibility:hidden; pointer-events:none; }
.kino-model-advanced-toggle { position:relative; display:flex; align-items:center; width:100%; height:32px; min-height:32px; padding:0 14px; color:rgba(224,235,245,.56); background:transparent; border:0; border-radius:8px; font:500 14px/20px Montserrat,"Manrope",sans-serif; text-align:left; }
.kino-model-advanced-action { display:inline-flex; align-items:center; min-height:32px; padding:4px 0; border-radius:8px; transition:background 150ms ease; }
.kino-model-advanced-copy { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kino-model-advanced-chevron { width:12px; height:12px; margin-left:4px; color:rgba(255,255,255,.45); }
.kino-model-zap { width:16px; height:16px; margin-left:auto; color:rgba(224,235,245,.5); }
.kino-model-advanced-toggle:hover .kino-model-advanced-action { color:rgba(245,251,255,.86); }
.kino-model-advanced-toggle:focus,.kino-model-detail-row:focus,.kino-model-details-back:focus { outline:0; }
.kino-model-advanced-toggle:focus-visible,.kino-model-detail-row:focus-visible,.kino-model-details-back:focus-visible { box-shadow:inset 0 0 0 1px rgba(57,215,232,.42); }
.kino-model-adjusting-copy { position:absolute; inset:0 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:rgba(224,235,245,.62); opacity:0; transform:translateY(2px); pointer-events:none; transition:opacity 120ms ease,transform 120ms ease; }
.kino-model-adjusting-copy small { margin:0; color:inherit; font:inherit; white-space:nowrap; }
.kino-model-compact-view.is-adjusting .kino-model-advanced-action { opacity:0; transform:translateY(-2px); }
.kino-model-compact-view.is-adjusting .kino-model-adjusting-copy { opacity:1; transform:translateY(0); }
.kino-model-compact-view.is-adjusting .kino-model-zap { opacity:0; visibility:hidden; }
.kino-model-effort-control { position:relative; height:34px; margin:2px 6px 6px; overflow:hidden; border-radius:999px; }
.kino-model-effort-control::before,.kino-model-effort-control::after { content:""; position:absolute; top:5px; left:0; height:24px; border-radius:999px; pointer-events:none; }
.kino-model-effort-control::before { z-index:1; width:100%; background:rgba(255,255,255,.09); }
.kino-model-effort-control::after { z-index:2; width:var(--kino-effort-progress,40%); background:#4b8df8; transition:width 150ms ease; }
.kino-model-effort-control input { position:relative; z-index:4; width:100%; height:34px; margin:0; outline:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.kino-model-effort-control input::-webkit-slider-runnable-track { height:24px; border-radius:999px; background:transparent; }
.kino-model-effort-control input::-webkit-slider-thumb { width:28px; height:28px; margin-top:-2px; appearance:none; -webkit-appearance:none; background:#f3f3f3; border:0; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.kino-model-effort-control input::-moz-range-track { height:24px; border-radius:999px; background:transparent; }
.kino-model-effort-control input::-moz-range-progress { height:24px; border-radius:999px; background:transparent; }
.kino-model-effort-control input::-moz-range-thumb { width:28px; height:28px; background:#f3f3f3; border:0; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.kino-model-effort-control input:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 3px rgba(57,215,232,.34),0 1px 3px rgba(0,0,0,.2); }
.kino-model-effort-dots { position:absolute; z-index:3; left:10px; right:10px; top:17px; display:flex; justify-content:space-between; transform:translateY(-50%); pointer-events:none; }
.kino-model-effort-dots span { width:4px; height:4px; flex:0 0 4px; background:rgba(255,255,255,.35); border-radius:50%; transform:scale(1); transition:transform 120ms ease,background-color 120ms ease; }
.kino-model-effort-dots span.is-hovered { background:rgba(255,255,255,.48); transform:scale(2); }
.kino-model-detail-row { display:grid; grid-template-columns:max-content minmax(0,1fr) 16px; align-items:center; column-gap:10px; width:calc(100% - 20px); height:36px; min-height:36px; margin:0 10px; padding:6px 10px; color:#f5fbff; background:transparent; border:0; border-radius:12px; box-sizing:border-box; font:500 14px/20px Montserrat,"Manrope",sans-serif; text-align:left; cursor:default; }
button.kino-model-detail-row:hover { background:rgba(204,221,255,.08); }
.kino-model-detail-value { min-width:0; color:rgba(224,235,245,.56); overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.kino-model-detail-row > svg { width:16px; height:16px; color:rgba(224,235,245,.48); }
.kino-model-detail-row[aria-expanded="true"] { background:rgba(204,221,255,.08); }
.kino-model-panel-divider { height:1px; margin:3px 16px 4px; background:rgba(214,235,255,.08); }
.kino-model-submenu { position:absolute; z-index:3; right:auto; left:calc(100% + 8px); bottom:0; width:208px; padding:6px; box-sizing:border-box; color:#f5fbff; background-color:#171d22; background-image:radial-gradient(ellipse at 12% 0%,rgba(88,220,234,.12),transparent 58%),linear-gradient(145deg,#28343b 0%,#171d22 100%); border:1px solid rgba(88,220,234,.18); border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.34),0 5px 20px rgba(57,215,232,.1),inset 0 1px 0 rgba(255,255,255,.05); -webkit-backdrop-filter:none; backdrop-filter:none; }
.kino-model-submenu::before { content:""; position:absolute; z-index:1; top:0; right:100%; bottom:0; width:10px; background:rgba(0,0,0,.001); pointer-events:auto; }
.kino-model-submenu[hidden] { display:none; }
.kino-model-submenu-title { padding:5px 10px 4px; color:rgba(224,235,245,.48); font:500 11px/16px Montserrat,"Manrope",sans-serif; }
.kino-model-submenu > button { display:flex; align-items:center; width:100%; min-height:36px; padding:5px 10px; color:#f5fbff; background:transparent; border:0; border-radius:10px; box-shadow:none; font:500 13px/20px Montserrat,"Manrope",sans-serif; text-align:left; transition:background-color 120ms ease,box-shadow 120ms ease; }
.kino-model-submenu > button:hover,.kino-model-submenu > button:focus-visible { background:rgba(57,215,232,.085); box-shadow:0 3px 10px rgba(57,215,232,.09); outline:0; }
.kino-model-submenu > button.is-selected:not(:hover):not(:focus-visible) { background:transparent; box-shadow:none; }
.kino-model-submenu > button > span { display:flex; align-items:center; gap:6px; min-width:0; flex:1; }
.kino-model-submenu > button > span > small { padding:1px 5px; color:rgba(224,235,245,.55); background:rgba(204,221,255,.08); border-radius:5px; font:600 9px/14px Montserrat,"Manrope",sans-serif; }
.kino-model-submenu > button > svg { display:none; width:16px; height:16px; margin-left:8px; flex:0 0 16px; color:#39d7e8; }
.kino-model-submenu > button.is-selected > svg { display:block; }
.kino-model-effort-menu { width:268px; max-height:330px; overflow:visible; }
.kino-model-name-menu { width:224px; }
.kino-model-speed-menu { width:224px; }
.kino-model-name-menu > button { position:relative; min-height:36px; }
.kino-model-effort-menu > button,.kino-model-speed-menu > button { position:relative; min-height:42px; }
.kino-model-option-copy { display:flex; flex-direction:column; align-items:flex-start!important; gap:0!important; }
.kino-model-option-copy strong { display:flex; align-items:center; gap:6px; font:600 13px/18px Montserrat,"Manrope",sans-serif; }
.kino-model-effort-menu strong > small { padding:1px 5px; color:rgba(224,235,245,.55); background:rgba(204,221,255,.08); border-radius:5px; font:600 9px/14px Montserrat,"Manrope",sans-serif; }
.kino-model-option-copy > small { padding:0!important; color:rgba(224,235,245,.48)!important; background:transparent!important; font:500 10px/15px Montserrat,"Manrope",sans-serif!important; }
.kino-model-info-icon { display:inline-flex; width:13px; height:13px; color:rgba(224,235,245,.5); }
.kino-model-info-icon svg { width:13px; height:13px; }
.kino-model-ultra-tooltip { position:absolute; right:calc(100% + 10px); bottom:0; display:block!important; width:286px; padding:11px 12px; color:rgba(245,251,255,.92); background:rgba(25,28,33,.97); border:1px solid rgba(214,235,255,.14); border-radius:12px; box-shadow:0 6px 16px rgba(57,215,232,.09); -webkit-backdrop-filter:blur(24px) saturate(145%); backdrop-filter:blur(24px) saturate(145%); font:600 11px/16px Montserrat,"Manrope",sans-serif; opacity:0; visibility:hidden; transform:translateX(5px); transition:opacity 130ms ease,transform 130ms ease,visibility 0s linear 130ms; pointer-events:none; z-index:5; }
.kino-model-effort-menu > button.is-ultra:hover .kino-model-ultra-tooltip,.kino-model-effort-menu > button.is-ultra:focus-visible .kino-model-ultra-tooltip { opacity:1; visibility:visible; transform:translateX(0); transition-delay:0s; }
.kino-model-details-back { display:flex; align-items:center; width:calc(100% - 20px); height:32px; min-height:32px; margin:0 10px; padding:6px 10px; color:rgba(224,235,245,.56); background:transparent; border:0; border-radius:8px; font:500 14px/20px Montserrat,"Manrope",sans-serif; transition:color 140ms ease,background-color 140ms ease; }
.kino-model-details-back:hover { color:rgba(245,251,255,.86); background:rgba(204,221,255,.08); }
.kino-model-details-back svg { width:12px; height:12px; margin-left:5px; color:rgba(255,255,255,.45); transform:rotate(-90deg); }
@media(max-width:540px) {
  .composer-actions { align-items:flex-end; gap:8px; }
  .composer-actions > div { flex:1; min-width:0; flex-wrap:wrap; }
  .composer .generation-preferences,.composer .image-generation-preferences { flex:1 1 100%; max-width:100%; flex-wrap:wrap; }
  .composer-actions .send-button { flex:0 0 35px; }
  .composer-actions > .kino-composer-right { flex:0 0 auto; flex-wrap:nowrap; }
  .kino-model-selector { right:8px; }
  .kino-model-selector-summary { max-width:118px; }
  .kino-model-panel { right:0; transform:translate(0,10px); }
  .kino-model-selector.is-open .kino-model-panel { transform:translate(0,0); }
  .kino-model-submenu { right:auto; left:calc(100% + 8px); bottom:0; }
  .kino-model-ultra-tooltip { right:0; bottom:calc(100% + 8px); width:min(286px,calc(100vw - 32px)); }
}
.view-container { width:min(1050px,calc(100% - 64px)); height:100%; margin:auto; padding:105px 0 50px; overflow:auto; }.view-header { display:flex; align-items:end; justify-content:space-between; padding-bottom:28px; border-bottom:1px solid var(--line); }.view-header p { margin:0 0 8px; color:#888; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.view-header h1 { margin:0; font-size:32px; letter-spacing:-.04em; }.view-header input { width:230px; padding:11px 14px; color:white; background:#2c2c2c; border:1px solid var(--line); border-radius:9px; outline:0; }
.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-top:24px; }.empty-library { grid-column:1/-1; display:grid; place-items:center; min-height:340px; color:#777; text-align:center; }.library-card { display:flex; flex-direction:column; min-height:210px; padding:17px; background:#292929; border:1px solid var(--line); border-radius:13px; }.library-card small { color:#777; font-size:9px; }.library-card h2 { margin:13px 0 8px; font-size:16px; }.library-card p { display:-webkit-box; overflow:hidden; margin:0; color:#aaa; font-size:11px; line-height:1.5; -webkit-line-clamp:4; -webkit-box-orient:vertical; }.library-card div { display:flex; gap:6px; margin-top:auto; padding-top:14px; }.library-card button { padding:7px 9px; color:#bbb; background:transparent; border:1px solid var(--line); border-radius:7px; font-size:9px; }.library-card button:hover { color:white; background:#3a3a3a; }
.knowledge-container { padding-bottom:70px; }.knowledge-date { color:#888; font-size:10px; }.knowledge-intro { max-width:740px; margin:20px 0 0; color:#888; font-size:11px; line-height:1.65; }.knowledge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding-top:22px; }.knowledge-card { display:flex; flex-direction:column; min-height:390px; padding:20px; background:#292929; border:1px solid var(--line); border-top:2px solid var(--platform-color); border-radius:13px; }.knowledge-card header { display:flex; align-items:center; gap:11px; }.knowledge-card header > span { display:grid; place-items:center; width:37px; height:37px; color:#111; background:var(--platform-color); border-radius:10px; font-size:10px; font-weight:900; }.knowledge-card header div { display:flex; flex-direction:column; }.knowledge-card header small { color:#777; font-size:8px; }.knowledge-card h2 { margin:3px 0 0; font-size:17px; }.knowledge-card > p { min-height:48px; margin:17px 0 13px; color:#aaa; font-size:11px; line-height:1.55; }.capability-list { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:20px; }.capability-list span { padding:5px 7px; color:#bbb; background:#202020; border:1px solid rgba(255,255,255,.07); border-radius:6px; font-size:8px; }.knowledge-card > strong { color:#777; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }.knowledge-card ul { display:flex; flex-direction:column; gap:6px; margin:10px 0 18px; padding-left:14px; color:#aaa; font-size:9px; line-height:1.45; }.knowledge-card footer { display:flex; flex-direction:column; gap:5px; margin-top:auto; padding-top:13px; border-top:1px solid rgba(255,255,255,.07); }.knowledge-card footer a { display:flex; justify-content:space-between; gap:12px; color:#bbb; font-size:9px; }.knowledge-card footer a:hover { color:var(--platform-color); }
.settings-container { max-width:850px; }.settings-card { margin-top:24px; background:#292929; border:1px solid var(--line); border-radius:14px; }.settings-card label { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:21px 22px; border-bottom:1px solid var(--line); cursor:pointer; }.settings-card label:last-child { border:0; }.settings-card span { display:flex; flex-direction:column; gap:5px; }.settings-card strong { font-size:13px; }.settings-card small { color:#888; font-size:10px; }.settings-card input { appearance:none; width:41px; height:23px; padding:3px; background:#555; border-radius:20px; }.settings-card input::before { content:''; display:block; width:17px; height:17px; background:white; border-radius:50%; transition:transform .2s; }.settings-card input:checked { background:var(--acid); }.settings-card input:checked::before { background:#111; transform:translateX(18px); }
.mobile-scrim { display:none; position:fixed; z-index:15; inset:0; background:rgba(0,0,0,.6); }.toast { position:fixed; z-index:120; top:22px; left:50%; width:max-content; max-width:min(680px,calc(100vw - 32px)); padding:11px 16px; color:#111; background:var(--acid); border-radius:12px; box-shadow:0 14px 42px rgba(0,0,0,.34),0 0 28px var(--focus-soft); font-size:10px; font-weight:700; line-height:1.45; text-align:center; opacity:0; transform:translate(-50%,-14px); pointer-events:none; transition:.3s var(--ease); }.toast.is-visible { opacity:1; transform:translate(-50%,0); }
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media(max-width:820px){.sidebar{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-100%)}body.sidebar-visible .sidebar{transform:translateX(0)}body.sidebar-visible .mobile-scrim{display:block}.sidebar-close,.sidebar-open{display:grid}.document-status{display:none}.agent-topbar{padding:0 12px}.empty-state{padding-bottom:180px}.suggestions{grid-template-columns:1fr;width:min(480px,100%)}.view-container{width:calc(100% - 36px)}.library-grid,.knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:720px) and (min-width:821px){.recent-chats{display:none}.focus-item{min-height:44px}.focus-nav{margin-bottom:10px;padding-bottom:10px}.app-nav{margin-bottom:8px}}
@media(max-width:540px){.model-monogram{display:none}.mode-menu{left:-42px;width:min(280px,calc(100vw - 24px))}.empty-state{width:calc(100% - 28px);justify-content:flex-start;padding-top:15vh}.empty-state h1{font-size:28px}.empty-state>p{font-size:12px}.suggestions{grid-template-columns:1fr;margin-top:24px}.suggestions button:nth-child(n+3){display:none}.messages{width:calc(100% - 28px);padding-top:78px}.message{grid-template-columns:minmax(0,1fr);gap:0}.message.user .message-body{max-width:94%}.composer-zone{padding-left:10px;padding-right:10px}.composer{border-radius:18px}.platform-button strong{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.platform-menu{left:-40px;width:min(300px,calc(100vw - 58px))}.composer-note{display:none}.defined-choices ul{grid-template-columns:1fr}.view-header{align-items:stretch;flex-direction:column;gap:18px}.view-header input{width:100%}.library-grid,.knowledge-grid{grid-template-columns:1fr}.knowledge-card{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* The neutral KINO palette is shared by Orion, Atlas, Core and Mini. */
body {
  --model-accent:var(--focus);
  --model-accent-2:var(--focus);
  --model-ink:#101214;
  --model-composer-a:rgba(48,50,53,.97);
  --model-composer-b:rgba(39,41,44,.98);
  --model-bubble-a:#303030;
  --model-bubble-b:#303030;
  --model-line:rgba(255,255,255,.10);
  --model-glow:var(--focus-soft);
  --model-glow-2:rgba(0,0,0,0);
  --model-aura-opacity:.18;
  --model-canvas-top:#1f2022;
  --model-canvas-middle:#1c1d1f;
  --model-canvas-bottom:#1a1b1d;
  --model-sidebar-top:#151618;
  --model-sidebar-bottom:#101113;
  --model-topbar:rgba(29,30,32,.96);
}
body[data-model="omega"] {
  --model-accent:#ffe785;
  --model-accent-2:#62e9ff;
  --model-ink:#15130a;
  --model-composer-a:rgba(45,41,27,.985);
  --model-composer-b:rgba(24,43,48,.99);
  --model-bubble-a:#54461d;
  --model-bubble-b:#173f49;
  --model-line:rgba(255,231,133,.58);
  --model-glow:rgba(255,214,90,.32);
  --model-glow-2:rgba(75,224,255,.26);
  --model-aura-opacity:.62;
  --model-canvas-top:#282316;
  --model-canvas-middle:#17272b;
  --model-canvas-bottom:#171b1d;
  --model-sidebar-top:#1d1a12;
  --model-sidebar-bottom:#101719;
  --model-topbar:rgba(32,29,20,.96);
}
body[data-model="eclipse"] {
  --model-accent:#ca91ff;
  --model-accent-2:#ff7654;
  --model-ink:#fff9ff;
  --model-composer-a:rgba(28,19,36,.99);
  --model-composer-b:rgba(35,22,21,.99);
  --model-bubble-a:#392344;
  --model-bubble-b:#48251d;
  --model-line:rgba(198,128,255,.64);
  --model-glow:rgba(167,76,255,.38);
  --model-glow-2:rgba(255,93,48,.30);
  --model-aura-opacity:.72;
  --model-canvas-top:#1e1424;
  --model-canvas-middle:#241917;
  --model-canvas-bottom:#19191c;
  --model-sidebar-top:#1a141d;
  --model-sidebar-bottom:#121012;
  --model-topbar:rgba(29,22,31,.96);
}
.composer-zone::before {
  content:'';
  position:absolute;
  left:50%;
  bottom:-92px;
  width:min(1040px,92vw);
  height:285px;
  background:
    radial-gradient(ellipse at 34% 62%,var(--model-glow),transparent 48%),
    radial-gradient(ellipse at 67% 62%,var(--model-glow-2),transparent 48%);
  filter:blur(28px) saturate(125%);
  opacity:var(--model-aura-opacity);
  transform:translateX(-50%);
  pointer-events:none;
  transition:background 650ms var(--ease),opacity 650ms var(--ease),filter 650ms var(--ease);
}
.composer {
  isolation:isolate;
  background:
    radial-gradient(circle at 18% -35%,color-mix(in srgb,var(--model-accent) 13%,transparent),transparent 46%),
    radial-gradient(circle at 88% 135%,color-mix(in srgb,var(--model-accent-2) 12%,transparent),transparent 48%),
    linear-gradient(145deg,var(--model-composer-a),var(--model-composer-b));
  box-shadow:0 24px 65px rgba(0,0,0,.31),0 8px 42px var(--model-glow),0 0 28px var(--model-glow-2);
  transition:background 520ms var(--ease),box-shadow 520ms var(--ease),transform 420ms var(--ease);
}
.composer::before {
  content:'';
  display:block;
  position:absolute;
  z-index:4;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(112deg,var(--model-accent),transparent 29%,transparent 68%,var(--model-accent-2));
  opacity:.52;
  pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transition:background 520ms var(--ease),opacity 520ms var(--ease);
}
.composer:focus-within {
  box-shadow:0 26px 74px rgba(0,0,0,.34),0 10px 54px var(--model-glow),0 0 38px var(--model-glow-2);
}
.composer textarea { caret-color:var(--model-accent); transition:color 400ms var(--ease); }
.composer textarea::placeholder { color:color-mix(in srgb,var(--model-accent) 30%,#aaa); transition:color 400ms var(--ease); }
.kino-model-selector-summary { color:var(--model-accent); text-shadow:0 0 18px var(--model-glow); transition:color 420ms var(--ease),text-shadow 420ms var(--ease); }
.kino-model-selector-chevron { color:color-mix(in srgb,var(--model-accent) 62%,#747982); transition:color 420ms var(--ease),transform 220ms var(--ease); }
.kino-model-selector:not(.is-open) .kino-model-selector-button:hover .kino-model-selector-pill,
.kino-model-selector.is-open .kino-model-selector-button { background:color-mix(in srgb,var(--model-accent) 10%,transparent); box-shadow:0 4px 18px var(--model-glow); }
.kino-model-submenu [data-model-name].is-selected { background:color-mix(in srgb,var(--model-accent) 12%,#202124); color:#fff; }
.kino-model-submenu [data-model-name].is-selected > svg { color:var(--model-accent); filter:drop-shadow(0 0 7px var(--model-glow)); }
.send-button:not(:disabled):not(.is-stop) {
  color:var(--model-ink);
  background:linear-gradient(135deg,var(--model-accent),var(--model-accent-2));
  box-shadow:0 8px 28px var(--model-glow),0 0 16px var(--model-glow-2);
  transition:background 450ms var(--ease),box-shadow 450ms var(--ease),color 450ms var(--ease),transform 180ms var(--ease);
}
.message.user .message-body {
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--model-accent) 8%,transparent),color-mix(in srgb,var(--model-accent-2) 6%,transparent)),
    linear-gradient(135deg,var(--model-bubble-a),var(--model-bubble-b));
  border:0;
  box-shadow:0 10px 30px color-mix(in srgb,var(--model-glow) 55%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--model-line) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.055);
  transition:background 520ms var(--ease),border-color 520ms var(--ease),box-shadow 520ms var(--ease);
}
body[data-model="omega"] .composer::before {
  background:linear-gradient(112deg,var(--model-accent),transparent 34% 66%,var(--model-accent-2));
  opacity:.66;
}
body[data-model="eclipse"] .composer {
  background:
    radial-gradient(circle at 50% 155%,rgba(255,96,55,.21),transparent 44%),
    radial-gradient(circle at 50% -65%,rgba(174,81,255,.24),transparent 55%),
    linear-gradient(145deg,var(--model-composer-a),var(--model-composer-b));
  box-shadow:0 26px 72px rgba(0,0,0,.42),-18px 10px 52px var(--model-glow),18px 12px 52px var(--model-glow-2);
}
body[data-model="eclipse"] .composer::before {
  background:linear-gradient(112deg,var(--model-accent),transparent 34% 66%,var(--model-accent-2));
  opacity:.72;
}
body[data-model="eclipse"] .composer-zone::before {
  background:
    radial-gradient(ellipse at 50% 58%,rgba(5,3,8,.96) 0 14%,transparent 31%),
    radial-gradient(ellipse at 38% 64%,var(--model-glow),transparent 46%),
    radial-gradient(ellipse at 64% 64%,var(--model-glow-2),transparent 46%);
}
body[data-model="eclipse"] .message.user .message-body { box-shadow:-8px 10px 28px color-mix(in srgb,var(--model-glow) 62%,transparent),8px 10px 28px color-mix(in srgb,var(--model-glow-2) 62%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--model-line) 78%,transparent),inset 0 1px 0 rgba(255,255,255,.07); }

/* Compact navigation and improved reading scale */
body { font-size:15px; }
.sidebar { flex-basis:260px; padding:0 13px 12px; overflow:visible; }
.sidebar-header { height:60px; padding:0 4px 0 7px; }
.new-chat { grid-template-columns:20px minmax(0,1fr) auto; min-height:36px; height:36px; margin:0; padding:6px 10px; gap:8px; border-radius:10px; font-size:14px; line-height:20px; font-weight:600; }
.new-chat svg { width:20px; height:20px; }
.new-chat kbd { font-size:10px; font-weight:400; }
.app-nav { gap:0; }
.nav-item { grid-template-columns:26px minmax(0,1fr) auto; min-height:36px; height:36px; padding:6px 10px; color:#b6b9be; border-radius:10px; font-size:14px; line-height:20px; }
.nav-item svg { width:20px; height:20px; justify-self:start; fill:currentColor; }
.nav-item b { min-width:20px; height:20px; font-size:10px; }
.nav-item.is-active { color:#fff; background:#2b2d30; }
.active-focus-label { justify-self:end; color:var(--focus); font-size:11px; font-weight:700; }
.more-menu { position:absolute; z-index:45; top:240px; left:calc(100% - 5px); width:252px; padding:8px; background:#2b2c2f; border:1px solid rgba(255,255,255,.13); border-radius:16px; box-shadow:0 22px 70px rgba(0,0,0,.55); animation:menu-side-in .2s var(--ease); }
.more-menu[hidden] { display:none; }
.more-menu > p { margin:4px 10px 7px; color:#9da1a8; font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.more-menu .focus-item { grid-template-columns:26px minmax(0,1fr) 16px; width:100%; min-height:52px; height:52px; padding:6px 10px; gap:6px; color:#d1d3d6; border:0; border-radius:10px; box-shadow:none; }
.more-menu .focus-item:hover,.more-menu .focus-item.is-active { color:#fff; background:#393b3f; }
.more-menu .focus-item.is-active { box-shadow:inset 3px 0 0 var(--focus); }
.more-menu .focus-item svg { width:20px; height:20px; }
.more-menu .focus-item strong { font-size:14px; }
.more-menu .focus-item small { color:#9a9ea5; font-size:11px; }
.more-menu .focus-item i { font-size:12px; opacity:0; }
.more-menu .focus-item.is-active i { opacity:1; }
@keyframes menu-side-in { from { opacity:0; transform:translate(-8px,4px); } }
.recent-chats { margin-top:22px; }
.recent-chats > p { color:#9a9da3; font-size:12px; }
.recent-chats button { color:#b3b6bb; font-size:13px; }
.profile-button strong { font-size:13px; }
.profile-button small { font-size:11px; }

/* Agent readability */
.model-selector strong { font-size:14px; }
.model-monogram { width:31px; height:31px; font-size:10px; }
.selector-menu button strong { font-size:13px; }
.selector-menu button small { color:#9da1a7; font-size:10px; }
.mode-menu { width:310px; }
.mode-menu button + button { margin-top:3px; }
.mode-menu:has(button:hover) button:not(:hover),
.mode-menu:has(button:focus-visible):not(:has(button:hover)) button:not(:focus-visible) { background:transparent; }
.mode-menu button:focus-visible { color:#fff; background:#292b2e; outline:1px solid var(--focus); outline-offset:-1px; }
.platform-menu { width:340px; }
.platform-menu > p { font-size:10px; }
.empty-eyebrow { font-size:10px; }
.empty-state > p { color:#bdc0c5; font-size:15px; }
.suggestions { width:min(760px,100%); }
.suggestions strong { font-size:13px; }
.suggestions small { color:#9ca0a6; font-size:11px; line-height:1.5; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
.composer textarea { font-size:15px; }
.attachment-preview strong { font-size:13px; }
.attachment-preview small { color:#a3a7ad; font-size:11px; }
.message-reference figcaption { font-size:11px; }
.message-reference figcaption span { font-size:10px; }
.platform-button { height:36px; font-size:11px; }
.platform-button strong { font-size:11px; }
.composer-note { color:#94989e; font-size:11px; }
.message-body > strong { font-size:14px; }
.message-body p { font-size:16px; line-height:26px; }
.prompt-result header span { font-size:11px; }
.prompt-result button { font-size:12px; }
.prompt-result pre { font-size:13px; }
.defined-choices > strong,.prompt-result summary { font-size:11px; }
.defined-choices b,.prompt-result details > p { font-size:10px; }
.defined-choices span,.result-sources a { font-size:12px; }
.view-header p { font-size:11px; }
.view-header h1 { font-size:36px; }
.library-card small,.library-card button { font-size:11px; }
.library-card p { font-size:13px; }
.settings-card strong { font-size:14px; }
.settings-card small { color:#a5a9af; font-size:12px; }

/* One complete documentation page at a time */
.documentation-view .mode-switcher { visibility:hidden; pointer-events:none; }
.knowledge-container { width:min(1000px,calc(100% - 72px)); padding-bottom:90px; }
.knowledge-date { color:#a7abb1; font-size:12px; }
.knowledge-toolbar { display:grid; grid-template-columns:minmax(280px,430px) 1fr; align-items:end; gap:30px; margin:28px 0 22px; }
.knowledge-toolbar label { display:flex; flex-direction:column; gap:8px; }
.knowledge-toolbar label > span { color:#a6aab0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.knowledge-toolbar select { width:100%; min-height:48px; padding:0 44px 0 15px; color:#fff; background:#292b2e; border:1px solid rgba(255,255,255,.16); border-radius:11px; outline:0; font-size:14px; font-weight:650; color-scheme:dark; }
.knowledge-toolbar select:focus { border-color:var(--focus); box-shadow:0 0 0 3px var(--focus-soft); }
.knowledge-toolbar p { margin:0; color:#aeb2b8; font-size:13px; line-height:1.6; }
.knowledge-detail { overflow:hidden; background:linear-gradient(145deg,#27292c,#212225); border:1px solid rgba(255,255,255,.12); border-top:3px solid var(--platform-color); border-radius:18px; box-shadow:0 28px 80px rgba(0,0,0,.22); }
.doc-hero { display:flex; align-items:center; gap:18px; padding:26px 28px 20px; }
.doc-platform-icon { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; color:#101112; background:var(--platform-color); border-radius:15px; font-size:13px; font-weight:900; box-shadow:0 10px 28px color-mix(in srgb,var(--platform-color) 24%,transparent); }
.doc-hero > div > p { margin:0 0 4px; color:#a9adb3; font-size:12px; }
.doc-hero h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
.doc-hero > div > div { display:flex; gap:6px; margin-top:9px; }
.doc-hero > div > div span { padding:4px 7px; color:#151617; background:var(--platform-color); border-radius:6px; font-size:10px; font-weight:800; }
.doc-summary { max-width:850px; margin:0; padding:0 28px 25px; color:#d0d2d5; font-size:15px; line-height:1.7; }
.doc-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 28px 4px; padding:0; background:#1b1c1e; border:1px solid rgba(255,255,255,.09); border-radius:12px; }
.doc-facts div { min-width:0; padding:15px 17px; border-right:1px solid rgba(255,255,255,.08); }
.doc-facts div:last-child { border:0; }
.doc-facts dt { color:#92969d; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.doc-facts dd { margin:6px 0 0; color:#f0f0ef; font-size:14px; line-height:1.35; }
.doc-section { display:grid; grid-template-columns:54px 1fr; gap:18px; margin:0 28px; padding:30px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.doc-section:last-child { border:0; }
.doc-section-number { color:var(--platform-color); font:700 12px/1.4 'Courier New',monospace; }
.doc-section h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.02em; }
.doc-section > div > p { margin:0 0 17px; color:#aeb1b7; font-size:14px; line-height:1.65; }
.doc-capabilities { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.doc-capabilities li { padding:8px 11px; color:#d9dbdd; background:#1b1c1e; border:1px solid rgba(255,255,255,.09); border-radius:8px; font-size:13px; }
.doc-formula { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.doc-formula li { display:flex; align-items:center; gap:10px; min-height:42px; padding:8px 11px; background:#1b1c1e; border-radius:8px; }
.doc-formula b { color:var(--platform-color); font:700 10px 'Courier New',monospace; }
.doc-formula span { color:#d6d8db; font-size:13px; }
.doc-questions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.doc-questions article { padding:15px; background:#1b1c1e; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.doc-questions strong { font-size:13px; }
.doc-questions ul,.doc-rules { display:flex; flex-direction:column; gap:8px; margin:11px 0 0; padding-left:17px; color:#b9bdc2; font-size:13px; line-height:1.5; }
.doc-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 28px; }
.doc-sources nav { display:flex; flex-direction:column; gap:7px; }
.doc-sources a { display:flex; justify-content:space-between; gap:18px; padding:12px 14px; color:#e1e2e3; background:#1b1c1e; border:1px solid rgba(255,255,255,.08); border-radius:9px; font-size:13px; }
.doc-sources a:hover { color:var(--platform-color); border-color:color-mix(in srgb,var(--platform-color) 45%,transparent); }
.doc-sources small { display:block; margin-top:16px; color:#94989e; font-size:11px; line-height:1.55; }

@media(max-width:820px) {
  .sidebar { width:260px; }
  .more-menu { top:257px; left:12px; width:calc(100% - 24px); }
  .knowledge-container { width:calc(100% - 34px); }
  .knowledge-toolbar { grid-template-columns:1fr; align-items:stretch; gap:14px; }
  .doc-questions { grid-template-columns:1fr; }
}
@media(max-width:540px) {
  .view-header h1 { font-size:30px; }
  .knowledge-date { font-size:11px; }
  .knowledge-toolbar { margin-top:20px; }
  .doc-hero { padding:22px 19px 16px; }
  .doc-summary { padding:0 19px 20px; font-size:14px; }
  .doc-facts { grid-template-columns:1fr; margin:0 19px; }
  .doc-facts div { border-right:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .doc-section { grid-template-columns:1fr; gap:8px; margin:0 19px; padding:24px 0; }
  .doc-formula,.doc-rules { grid-template-columns:1fr; }
}

/* Keep full suggestion descriptions reachable on shorter screens. */
.messages:empty { display:none; }
.chat-scroll:has(.empty-state:not(.is-hidden)) { overflow-y:auto; scrollbar-width:none; }
.chat-scroll:has(.empty-state:not(.is-hidden))::-webkit-scrollbar { display:none; }
.empty-state:not(.is-hidden) { min-height:100%; padding:72px 0 168px; }

/* Refined editorial documentation layout */
.view-container { scrollbar-width:none; }
.view-container::-webkit-scrollbar { display:none; }
.knowledge-container { width:min(980px,calc(100% - 64px)); padding:84px 0 56px; }
.knowledge-container .view-header { align-items:center; padding-bottom:18px; }
.knowledge-container .view-header p { margin-bottom:6px; color:#90959c; font-size:10px; letter-spacing:.14em; }
.knowledge-container .view-header h1 { font-size:30px; line-height:1.08; letter-spacing:-.035em; }
.knowledge-date { padding:6px 9px; color:#aeb2b8; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:999px; font-size:11px; white-space:nowrap; }
.knowledge-toolbar { grid-template-columns:340px minmax(0,1fr); align-items:center; gap:24px; margin:18px 0 0; padding:13px 14px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.knowledge-toolbar label { gap:6px; }
.knowledge-toolbar label > span { color:#9da2a9; font-size:10px; letter-spacing:.09em; }
.knowledge-toolbar select { min-height:40px; height:40px; padding:0 38px 0 12px; background:#26282b; border-color:rgba(255,255,255,.12); border-radius:9px; font-size:13px; }
.knowledge-toolbar p { color:#a8adb4; font-size:12px; line-height:1.55; }
.knowledge-detail { margin-top:14px; overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; }
.doc-hero { gap:14px; padding:19px 20px; background:linear-gradient(120deg,color-mix(in srgb,var(--platform-color) 10%,#242629),#222427 56%); border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--platform-color); border-radius:13px; }
.doc-platform-icon { flex-basis:44px; width:44px; height:44px; border-radius:12px; font-size:11px; box-shadow:0 8px 24px color-mix(in srgb,var(--platform-color) 18%,transparent); }
.doc-hero > div > p { margin-bottom:2px; font-size:11px; }
.doc-hero h2 { font-size:23px; }
.doc-hero > div > div { margin-top:6px; }
.doc-hero > div > div span { padding:3px 6px; font-size:9px; }
.doc-summary { max-width:none; margin:0 4px; padding:17px 0; color:#c5c9ce; border-bottom:1px solid rgba(255,255,255,.08); font-size:14px; line-height:1.65; }
.doc-facts { gap:8px; margin:14px 0 0; background:transparent; border:0; border-radius:0; }
.doc-facts div { padding:12px 14px; background:#232528; border:1px solid rgba(255,255,255,.08); border-radius:10px; }
.doc-facts div:last-child { border:1px solid rgba(255,255,255,.08); }
.doc-facts dt { font-size:9px; letter-spacing:.08em; }
.doc-facts dd { margin-top:4px; font-size:13px; }
.doc-section { grid-template-columns:42px minmax(0,1fr); gap:14px; margin:0; padding:24px 4px; }
.doc-section-number { padding-top:3px; font-size:11px; }
.doc-section h3 { margin-bottom:6px; font-size:17px; }
.doc-section > div > p { max-width:760px; margin-bottom:14px; font-size:13px; line-height:1.6; }
.doc-capabilities { gap:6px; }
.doc-capabilities li { padding:7px 9px; background:#232528; border-radius:7px; font-size:12px; }
.doc-formula { gap:6px; }
.doc-formula li { min-height:38px; padding:7px 10px; background:#232528; border:1px solid rgba(255,255,255,.055); border-radius:7px; }
.doc-formula span { font-size:12px; }
.doc-questions { gap:8px; }
.doc-questions article { padding:12px; background:#232528; border-radius:9px; }
.doc-questions strong { font-size:12px; }
.doc-questions ul,.doc-rules { gap:6px; margin-top:9px; color:#b7bbc1; font-size:12px; }
.doc-sources a { padding:10px 12px; background:#232528; border-radius:8px; font-size:12px; }
.doc-sources small { margin-top:13px; font-size:10px; }

@media(max-height:700px) and (min-width:821px) {
  .empty-state:not(.is-hidden) { padding-top:62px; padding-bottom:150px; }
  .empty-state h1 { font-size:clamp(29px,3.4vw,40px); }
  .empty-state > p { font-size:14px; }
  .suggestions { margin-top:24px; }
}

@media(max-width:820px) {
  .knowledge-container { width:calc(100% - 32px); padding-top:78px; }
  .knowledge-toolbar { grid-template-columns:1fr; gap:10px; }
}

@media(max-width:540px) {
  .knowledge-container .view-header { align-items:flex-start; }
  .knowledge-container .view-header h1 { font-size:27px; }
  .knowledge-date { align-self:flex-start; }
  .doc-hero { padding:16px; }
  .doc-summary { margin:0; }
  .doc-facts { grid-template-columns:1fr; }
  .doc-section { grid-template-columns:1fr; gap:6px; padding:21px 0; }
}

/* Sidebar width measured from ChatGPT; preserve KINO navigation and styling. */
.sidebar {
  flex:0 0 260px;
  width:260px;
  padding:0;
  background:linear-gradient(180deg,#15191c 0%,#111416 100%);
  border-right:1px solid rgba(214,235,255,.08);
  box-shadow:none;
}
.sidebar-header {
  width:260px;
  height:52px;
  padding:0 8px;
  flex-shrink:0;
  gap:8px;
  overflow:visible;
}
.sidebar-header .agent-brand { flex-shrink:0; }
.sidebar-header-actions { position:relative; flex:1; min-width:72px; height:36px; }
.sidebar-header-actions .icon-button { width:36px; height:36px; flex-shrink:0; color:#b4b4b4; }
.sidebar-header-actions svg,.sidebar-open svg { display:block; width:20px; height:20px; }
.sidebar-header-actions .sidebar-close { position:absolute; right:0; display:grid; transition:transform .24s var(--ease),opacity .16s,visibility .24s; }
.sidebar-search { position:absolute; z-index:1; top:0; right:36px; display:flex; align-items:center; width:36px; height:36px; overflow:hidden; background:transparent; border:1px solid transparent; border-radius:9px; transition:width .28s var(--ease),right .28s var(--ease),background .2s,border-color .2s; }
.sidebar-search .sidebar-search-toggle { width:34px; height:34px; }
.sidebar-search input { width:0; min-width:0; padding:0; opacity:0; color:#eee; background:transparent; border:0; outline:0; font-size:12px; transition:opacity .18s; }
.sidebar-search input::placeholder { color:#999da4; }
.sidebar-search input::-webkit-search-cancel-button { display:none; }
.sidebar.is-searching .sidebar-search { right:0; width:100%; background:#1e2023; border-color:rgba(255,255,255,.12); }
.sidebar.is-searching .sidebar-search input { flex:1; width:100%; padding-right:8px; opacity:1; }
.sidebar.is-searching .sidebar-close { transform:translateX(44px); opacity:0; visibility:hidden; pointer-events:none; }
.sidebar.is-searching .recent-chats { display:block; }
.sidebar-search:focus-within { border-color:rgba(255,255,255,.28); }
.sidebar .sidebar-search-empty { margin:8px 16px; color:#999da4; font-size:12px; line-height:1.5; }
#recent-list button[hidden],.sidebar-search-empty[hidden] { display:none; }
.sidebar-header .icon-button:focus-visible,.sidebar-open:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.sidebar-open-mark { display:none; }
@media(prefers-reduced-motion:reduce) {
  .sidebar-search,.sidebar-search input,.sidebar-header-actions .sidebar-close { transition:none; }
}
.agent-brand {
  height:36px;
  gap:0;
  border-radius:8px;
  box-shadow:none;
}
.agent-brand .agent-brand-wordmark { display:flex; align-items:baseline; gap:5px; color:#f4f4f2; font-family:Sora,ui-sans-serif,system-ui,sans-serif; font-size:13px; font-weight:700; line-height:18px; letter-spacing:-.035em; white-space:nowrap; }
.agent-brand .agent-brand-wordmark span { color:#8f959b; font-size:9px; font-weight:600; letter-spacing:.11em; }
.new-chat {
  grid-template-columns:20px minmax(0,1fr) auto;
  width:233px;
  min-height:36px;
  height:36px;
  margin:8px 0 0 6px;
  padding:6px 10px;
  gap:6px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-shadow:none;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:normal;
}
.new-chat.is-active { background:transparent; box-shadow:none; }
.new-chat:hover { background:rgba(255,255,255,.10); box-shadow:none; }
.new-chat kbd { color:#8e8e8e; font-size:10px; font-weight:400; }
.app-nav {
  width:245px;
  gap:0;
}
.nav-item {
  grid-template-columns:20px minmax(0,1fr) auto;
  width:auto;
  min-height:36px;
  height:36px;
  margin:0 6px;
  padding:6px 10px;
  gap:6px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-shadow:none;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:normal;
}
.nav-item svg {
  width:20px;
  height:20px;
  justify-self:start;
}
.nav-item.is-active {
  color:#fff;
  background:transparent;
  box-shadow:none;
}
.nav-item:hover,.more-toggle[aria-expanded="true"] {
  color:#fff;
  background:rgba(255,255,255,.10);
  box-shadow:none;
}
.nav-item b { box-shadow:none; }
.nav-item b[hidden] { display:none; }
.active-focus-label { font-size:11px; }
.app-nav .focus-item {
  grid-template-columns:20px minmax(0,1fr) auto;
  width:auto;
  min-height:36px;
  height:36px;
  margin:0 6px;
  padding:6px 10px;
  gap:6px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-shadow:none;
}
.app-nav .focus-item svg { width:20px; height:20px; margin:0; justify-self:start; }
.app-nav .focus-item > span { display:block; }
.app-nav .focus-item strong { display:block; font-size:14px; font-weight:400; line-height:20px; }
.app-nav .focus-item.is-active { background:transparent; border:0; box-shadow:none; }
.app-nav .focus-item:hover { background:rgba(255,255,255,.10); box-shadow:none; }
.recent-chats {
  width:260px;
  margin-top:20px;
  padding:0;
}
.recent-chats > p { margin:0 16px 8px; color:#afafaf; font-size:14px; font-weight:500; line-height:20px; }
.recent-chats button {
  width:248px;
  height:36px;
  margin:0 6px;
  padding:6px 10px;
  border-radius:10px;
  box-shadow:none;
  font-size:14px;
  line-height:20px;
}
.sidebar-footer {
  width:260px;
  margin-top:auto;
  padding:8px 0 4px;
  border:0;
  box-shadow:none;
}
.profile-button {
  width:248px;
  min-height:52px;
  margin:0 6px;
  padding:8px 10px;
  border-radius:10px;
  box-shadow:none;
}
.profile-button:hover { background:rgba(255,255,255,.10); box-shadow:none; }

/* Account surface — ChatGPT composition with KINO materials */
#mode-selector {
  border-color:transparent;
  box-shadow:none;
}
#mode-selector:hover,
#mode-selector[aria-expanded="true"] { border-color:transparent; }
.sidebar-footer { position:relative; overflow:visible; }
.sidebar-account-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 36px;
  align-items:center;
  gap:0;
  width:248px;
  height:52px;
  margin:0 6px;
  padding-right:8px;
  background:rgba(7,10,12,.46);
  border-radius:10px;
}
.sidebar-account-row:hover,
.sidebar-account-row:focus-within,
.sidebar-account-row:has(.profile-button[aria-expanded="true"]) { background:rgba(214,235,255,.07); }
.sidebar-account-row .profile-button {
  grid-template-columns:24px minmax(0,1fr);
  gap:8px;
  width:100%;
  height:52px;
  min-width:0;
  margin:0;
  padding:8px;
  background:transparent;
}
.sidebar-account-row .profile-button:hover { background:transparent; }
.sidebar-account-row .profile-button > .account-avatar { width:24px; height:24px; font-size:9px; font-weight:400; }
.sidebar-account-row .profile-button > span:nth-child(2) { min-width:0; gap:2px; }
.sidebar-account-row .profile-button strong { overflow:hidden; font-size:14px; font-weight:400; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-account-row .profile-button small { overflow:hidden; font-size:12px; line-height:16px; text-overflow:ellipsis; white-space:nowrap; }
.account-avatar {
  overflow:hidden;
  background-color:#939da0 !important;
  background-position:center !important;
  background-size:cover !important;
  color:#fff !important;
}
.kino-store-coming-soon { position:relative; display:grid; place-items:center; border-radius:10px; outline:0; }
.kino-store-button {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  color:#d7d9dc;
  background:transparent;
  border:0;
  border-radius:10px;
  opacity:.72;
  cursor:not-allowed;
}
.kino-store-button svg { width:16px; height:16px; }
.kino-store-coming-soon:hover .kino-store-button,
.kino-store-coming-soon:focus-visible .kino-store-button { color:var(--focus); background:rgba(255,255,255,.09); opacity:1; }
.kino-store-coming-soon::after {
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  z-index:70;
  padding:6px 9px;
  color:#111;
  background:var(--focus);
  border-radius:7px;
  content:"Em breve";
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}
.kino-store-coming-soon:hover::after,
.kino-store-coming-soon:focus-visible::after { opacity:1; transform:none; }
.account-menu {
  position:absolute;
  z-index:65;
  left:6px;
  bottom:62px;
  width:min(248px,calc(100vw - 20px));
  padding:10px 0;
  color:#f5f5f4;
  background:radial-gradient(circle at 16% -15%,rgba(88,220,234,.13),transparent 42%),linear-gradient(145deg,rgba(48,54,61,.78),rgba(17,19,23,.86));
  border:1px solid rgba(214,235,255,.12);
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 72px rgba(0,0,0,.58);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
  transform-origin:left bottom;
  animation:account-menu-in .18s var(--ease);
}
.account-menu[hidden] { display:none; }
@keyframes account-menu-in { from { opacity:0; transform:translateY(8px) scale(.98); } }
.account-identity,
.account-menu-item {
  width:calc(100% - 20px);
  margin:0 10px;
  color:#f4f4f2;
  background:transparent;
  border:0;
  border-radius:12px;
  text-align:left;
}
.account-identity:hover,
.account-menu-item:hover,
.account-identity:focus-visible,
.account-menu-item:focus-visible { background:rgba(255,255,255,.09); outline:0; }
.account-identity {
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 16px;
  align-items:center;
  gap:8px;
  height:51px;
  min-height:51px;
  padding:6px 10px;
}
.account-identity .account-avatar { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:9px; font-weight:400; }
.account-identity > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; gap:3px; }
.account-identity strong { overflow:hidden; font-size:14px; font-weight:400; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
.account-identity small { overflow:hidden; color:#a8abb0; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.account-identity > svg { width:16px; height:16px; margin-right:-1px; color:#d8dadd; }
.account-menu-separator { height:1px; margin:8px 16px; background:rgba(255,255,255,.15); }
.account-menu-item {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) 16px;
  align-items:center;
  gap:6px;
  height:36px;
  min-height:36px;
  padding:6px 10px;
  font-size:14px;
  line-height:20px;
}
.account-menu-item > svg:first-child { width:20px; height:20px; }
.account-menu-item > span { grid-column:2; }
.account-menu-item .account-row-chevron { grid-column:3; width:16px; height:16px; color:#d6d8db; }
.account-menu-item[aria-expanded="true"] { background:rgba(255,255,255,.10); border-radius:12px; }
.account-help-menu {
  position:absolute;
  z-index:66;
  top:-9px;
  left:calc(100% - 7px);
  width:244px;
  height:289px;
  padding:10px 0;
  color:#f5f5f4;
  background:radial-gradient(circle at 12% -18%,rgba(88,220,234,.16),transparent 44%),linear-gradient(145deg,#293238,#171b1f 82%);
  border:0;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 24px 72px rgba(0,0,0,.58),0 0 30px rgba(57,215,232,.07);
  transform-origin:left top;
  animation:account-help-menu-in 150ms var(--ease);
}
.account-help-menu[hidden] { display:none; }
@keyframes account-help-menu-in { from { opacity:0; transform:translateX(-5px) scale(.985); } }
.account-help-menu-item {
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:center;
  gap:6px;
  width:224px;
  height:36px;
  min-height:36px;
  margin:0 10px;
  padding:6px 10px;
  color:#f4f8fa;
  background:transparent;
  border:0;
  border-radius:12px;
  font-size:14px;
  line-height:20px;
  text-align:left;
}
.account-help-menu-item:hover,
.account-help-menu-item:focus-visible { background:rgba(255,255,255,.10); box-shadow:none; outline:0; }
.account-help-menu-item.has-external-arrow { grid-template-columns:20px minmax(0,1fr) 16px; }
.account-help-menu-item > svg { width:20px; height:20px; }
.account-help-menu-item > .account-help-external-arrow {
  grid-column:3;
  width:16px;
  height:16px;
  color:rgba(224,235,245,.56);
  opacity:0;
  transition:opacity 100ms ease;
}
.account-help-menu-item:hover > .account-help-external-arrow,
.account-help-menu-item:focus-visible > .account-help-external-arrow { opacity:1; }
.account-help-menu-separator { height:1px; margin:8px 16px; background:rgba(214,235,255,.15); }

/* Reference capture uses 1.25 device pixels per CSS pixel:
   850 x 750 capture = 680 x 600 CSS, with a 210 CSS sidebar. */
.personalization-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }
.personalization-modal[hidden] { display:none; }
.personalization-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.personalization-dialog {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  width:min(680px,100%);
  height:min(600px,calc(100dvh - 40px));
  overflow:hidden;
  color:#f5f5f4;
  background:radial-gradient(circle at 16% -15%,rgba(88,220,234,.13),transparent 42%),linear-gradient(145deg,rgba(48,54,61,.78),rgba(17,19,23,.86));
  border:0;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(214,235,255,.12),0 24px 72px rgba(0,0,0,.48);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
  animation:profile-dialog-in .2s var(--ease);
}
.personalization-rail { min-height:0; padding:12px 10px; background:transparent; border-right:1px solid rgba(214,235,255,.10); }
.personalization-close {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-bottom:12px;
  padding:0;
  color:#f2f4f7;
  background:rgba(255,255,255,.08);
  border:0;
  border-radius:8px;
}
.personalization-close:hover { background:rgba(255,255,255,.13); }
.personalization-close svg { width:18px; height:18px; }
.personalization-nav-item {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:36px;
  padding:6px 8px;
  color:#f5f5f4;
  background:transparent;
  border:0;
  border-radius:10px;
  text-align:left;
  font-size:14px;
}
.personalization-nav-item.is-active { background:rgba(214,235,255,.10); box-shadow:none; }
.personalization-nav-item svg { width:20px; height:20px; flex:0 0 20px; }
.personalization-content { min-width:0; min-height:0; overflow:auto; padding:0 30px 24px 16px; scrollbar-width:thin; scrollbar-color:rgba(214,235,255,.22) transparent; }
.personalization-content > header { position:sticky; z-index:2; top:0; height:60px; display:flex; align-items:flex-start; padding:16px 0 20px; background:transparent; border-bottom:1px solid rgba(214,235,255,.12); }
.personalization-content h2 { margin:0; font-size:18px; line-height:24px; font-weight:400; letter-spacing:-.02em; }
.personalization-settings { margin-top:18px; }
.personalization-settings label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:84px;
  padding:16px 0;
  border-bottom:1px solid rgba(214,235,255,.09);
  cursor:pointer;
}
.personalization-settings label > span { display:flex; min-width:0; flex-direction:column; gap:5px; }
.personalization-settings strong { font-size:14px; line-height:20px; font-weight:400; }
.personalization-settings small { max-width:336px; color:#aeb4bc; font-size:12px; line-height:16px; }
.personalization-settings input { appearance:none; width:32px; height:20px; margin:0; padding:2px; flex:0 0 32px; background:#555a60; border:0; border-radius:999px; cursor:pointer; }
.personalization-settings input::before { content:''; display:block; width:16px; height:16px; background:white; border-radius:50%; transition:transform .2s var(--ease); }
.personalization-settings input:checked { background:var(--focus); }
.personalization-settings input:checked::before { background:#fff; transform:translateX(12px); }
body.personalization-modal-open { overflow:hidden; }

/* Profile page: layout and density measured against the current ChatGPT profile. */
.profile-page-title,
.profile-page-header-actions { display:none; }
body.profile-page-open .agent-main { background:radial-gradient(circle at 50% 10%,rgba(88,220,234,.10),transparent 36%),#1b1e21; }
body.profile-page-open .agent-topbar {
  height:52px;
  padding:8px 12px;
  background:rgba(27,30,33,.96);
  border-bottom:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
body.profile-page-open .mode-switcher { display:none; }
body.profile-page-open .profile-page-title {
  display:block;
  margin:0 auto 0 0;
  color:#f9f9f9;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  letter-spacing:0;
}
body.profile-page-open .profile-page-header-actions { display:flex; align-items:center; gap:4px; }
.profile-privacy-label,
.profile-page-edit {
  display:flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:4px 8px;
  color:#b4b4b4;
  background:transparent;
  border:0;
  border-radius:8px;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  white-space:nowrap;
}
.profile-page-edit { height:28px; padding:0 10px; color:#f9f9f9; border-radius:999px; }
.profile-page-edit:hover { background:#212121; }
.profile-page-edit:focus-visible { outline:2px solid #f9f9f9; outline-offset:1px; }
.profile-privacy-label svg,
.profile-page-edit svg { flex:0 0 20px; width:20px; height:20px; fill:currentColor; }
.profile-view.is-active { display:block; overflow:hidden; color:#f9f9f9; background:radial-gradient(circle at 50% 10%,rgba(88,220,234,.10),transparent 36%),#1b1e21; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
.profile-page-scroll { width:100%; height:100%; padding:116px 32px 64px; overflow:auto; scrollbar-width:thin; scrollbar-color:#424242 transparent; }
.profile-page-content { display:flex; flex-direction:column; gap:32px; width:min(720px,100%); margin:0 auto; }
.profile-page-hero { display:flex; flex-direction:column; align-items:center; width:100%; height:160px; text-align:center; }
.profile-page-avatar {
  display:grid;
  place-items:center;
  flex:0 0 80px;
  width:80px;
  height:80px;
  margin:0 0 16px;
  color:#0d0d0d;
  background-color:var(--focus);
  background-position:center;
  background-size:cover;
  border-radius:50%;
  font-size:28px;
  font-weight:400;
  line-height:1;
}
.profile-page-hero h2 { height:32px; margin:0; font-size:24px; font-weight:400; line-height:32px; letter-spacing:-.02em; }
.profile-page-hero p { display:flex; align-items:center; justify-content:center; gap:6px; height:28px; margin:4px 0 0; color:#b4b4b4; font-size:14px; line-height:20px; }
.profile-page-hero p > i { color:#676767; font-style:normal; }
.profile-plan-badge { padding:2px 7px; color:#f9f9f9; border:1px solid rgba(255,255,255,.15); border-radius:8px; font-size:12px; line-height:18px; }
.profile-page-stats {
  display:flex;
  align-items:center;
  width:100%;
  height:62px;
  min-height:62px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
}
.profile-page-stats > div { display:flex; flex:1 1 0; flex-direction:column; align-items:center; justify-content:center; min-width:0; height:60px; padding:10px 12px; text-align:center; }
.profile-page-stats strong { overflow:hidden; max-width:100%; font-size:14px; font-weight:400; line-height:20px; text-overflow:ellipsis; white-space:nowrap; }
.profile-page-stats span { overflow:hidden; max-width:100%; color:#f9f9f9; font-size:14px; line-height:20px; text-overflow:ellipsis; white-space:nowrap; }
.profile-page-stats > i { flex:0 0 1px; width:1px; height:36px; margin:12px 0; background:rgba(255,255,255,.15); border-radius:4px; }
.profile-page-activity { width:100%; height:150.4px; }
.profile-page-activity > header { display:flex; align-items:center; justify-content:space-between; height:20px; margin-bottom:12px; }
.profile-page-activity h2,
.profile-insight-column h2 { margin:0; font-size:14px; font-weight:600; line-height:20px; letter-spacing:0; }
.profile-page-activity header div { display:flex; align-items:center; gap:16px; height:20px; }
.profile-page-activity header button { height:20px; padding:0; color:#b4b4b4; background:transparent; border:0; font-size:14px; font-weight:400; line-height:20px; }
.profile-page-activity header button:hover,
.profile-page-activity header button.is-active { color:#f9f9f9; }
.profile-page-activity header button.is-active { font-weight:500; }
.profile-page-activity header button:focus-visible { outline:2px solid #f9f9f9; outline-offset:3px; border-radius:2px; }
.profile-activity-grid {
  display:grid;
  grid-template-rows:repeat(7,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:3px;
  width:100%;
  height:94.4px;
}
.profile-activity-cell { min-width:0; min-height:0; background:#292e32; border-radius:3px; }
.profile-activity-cell[data-level="1"] { background:color-mix(in srgb,#58dcea 28%,#292e32); }
.profile-activity-cell[data-level="2"] { background:color-mix(in srgb,#58dcea 48%,#292e32); }
.profile-activity-cell[data-level="3"] { background:color-mix(in srgb,#58dcea 72%,#292e32); }
.profile-activity-cell[data-level="4"] { background:#58dcea; }
.profile-activity-months { display:flex; align-items:center; justify-content:space-between; height:16px; margin-top:8px; color:#b4b4b4; font-size:12px; line-height:16px; }
.profile-page-insights { display:grid; grid-template-columns:minmax(0,340px) minmax(0,340px); gap:40px; width:100%; min-height:180px; }
.profile-insight-column { display:flex; min-width:0; flex-direction:column; gap:8px; }
.profile-insight-column dl { display:flex; flex-direction:column; margin:0; }
.profile-insight-column dl > div { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:30.4px; }
.profile-insight-column dt,
.profile-insight-column dd { margin:0; font-size:14px; font-weight:400; line-height:20px; }
.profile-insight-column dt { color:#f9f9f9; }
.profile-insight-column dd { overflow:hidden; color:#f9f9f9; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.profile-mcp-list { display:flex; min-height:32px; flex-direction:column; }
.profile-mcp-list p { margin:0; color:#b4b4b4; font-size:14px; line-height:32px; }
.profile-mcp-item { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:32px; }
.profile-mcp-item > span:first-child { display:grid; place-items:center; width:24px; height:24px; color:#0d0d0d; background:#58dcea; border-radius:7px; font-size:10px; font-weight:800; }
.profile-mcp-item strong,
.profile-mcp-item small { overflow:hidden; font-size:14px; font-weight:400; line-height:20px; text-overflow:ellipsis; white-space:nowrap; }
.profile-mcp-item small { color:#f9f9f9; }
@media(max-width:760px) {
  .profile-page-scroll { padding:92px 20px 52px; }
  .profile-page-content { gap:28px; }
  .profile-page-stats { height:auto; min-height:0; flex-wrap:wrap; }
  .profile-page-stats > div { flex:1 1 50%; }
  .profile-page-stats > i { display:none; }
  .profile-page-insights { grid-template-columns:1fr; gap:28px; }
}
@media(max-width:460px) {
  .profile-privacy-label span { display:none; }
  .profile-page-edit { padding:0 8px; }
  .profile-page-scroll { padding-right:14px; padding-left:14px; }
  .profile-page-stats span { font-size:12px; }
  .profile-page-activity header div { gap:10px; }
  .profile-page-activity header button { font-size:12px; }
}

/* Edit profile dialog */
.profile-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }
.profile-modal[hidden] { display:none; }
.profile-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.profile-dialog {
  position:relative;
  z-index:1;
  width:min(448px,100%);
  max-height:calc(100dvh - 40px);
  padding:0;
  overflow:auto;
  color:#fff;
  background:#212121;
  border:0;
  border-radius:16px;
  outline:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  box-shadow:0 8px 16px rgba(0,0,0,.32),inset 0 0 1px rgba(255,255,255,.2),0 0 1px rgba(0,0,0,.62);
  animation:profile-dialog-in .2s var(--ease);
}
@keyframes profile-dialog-in { from { opacity:0; transform:translateY(12px) scale(.98); } }
.profile-dialog h2 { margin:0; padding:12px 16px; font-size:18px; font-weight:400; line-height:28px; letter-spacing:normal; }
#profile-form { padding:4px 16px 16px; }
.profile-avatar-editor { position:relative; width:128px; height:128px; margin:24px auto 37.6px; }
.profile-avatar-button { position:absolute; inset:-4px; display:block; width:136px; height:136px; margin:0; padding:4px; color:inherit; background:transparent; border:0; border-radius:50%; }
.profile-avatar-button:hover { background:rgba(255,255,255,.08); }
.profile-avatar-button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.profile-avatar-preview { display:grid; place-items:center; width:128px; height:128px; border-radius:50%; font-size:48px; font-weight:400; line-height:1; }
.profile-avatar-camera {
  position:absolute;
  right:0;
  bottom:0;
  transform:translate(-33.333%,-33.333%);
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  color:#cdcdcd;
  background:#212121;
  border:0;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.profile-avatar-camera svg { width:18px; height:18px; }
.profile-field {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:8px 12px;
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
}
.profile-field + .profile-field { margin-top:8px; }
.profile-field:focus-within { border-color:#9b9b9b; box-shadow:0 0 0 1px #9b9b9b; }
.profile-field span { font-size:12px; line-height:16px; }
.profile-field input { display:block; width:100%; height:20px; padding:0; background:transparent; border:0; outline:0; font-size:14px; line-height:20px; }
.profile-dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }
.profile-dialog-actions button { flex:0 0 auto; height:36px; padding:0 12px; border-radius:999px; font-size:14px; font-weight:500; line-height:20px; }
.profile-cancel { color:#fff; background:#212121; border:1px solid rgba(255,255,255,.15); }
.profile-cancel:hover { background:rgba(255,255,255,.08); }
.profile-save { color:#0d0d0d; background:#f9f9f9; border:1px solid transparent; box-shadow:none; }
.profile-save:hover { background:#e5e5e5; }
body.profile-modal-open { overflow:hidden; }

/* Conversation actions: measurements and SVGs matched to the reference menu. */
.recent-chats { display:block; }
.conversation-group-title { margin:12px 16px 8px; color:#afafaf; font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"; font-size:14px; line-height:20px; font-weight:400; }
.conversation-group-title:first-child { margin-top:0; }
.conversation-group-toggle { display:flex; align-items:center; gap:1px; width:auto!important; height:20px!important; margin:0!important; padding:0!important; color:inherit!important; background:transparent!important; border:0; border-radius:0!important; font:inherit; font-weight:400; line-height:20px; }
.conversation-group-toggle svg { flex:0 0 12px; width:12px; height:12px; fill:currentColor; transition:transform .16s ease; }
.conversation-group-toggle[aria-expanded="false"] svg { transform:rotate(-90deg); }
.conversation-row { position:relative; display:flex; align-items:center; gap:8px; width:232.8px; height:36px; margin:0 6px; overflow:visible; padding:6px 10px; border:0; border-bottom:.8px solid transparent; border-radius:10px; background-clip:padding-box; font-family:-apple-system-body,ui-sans-serif,-apple-system,system-ui,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"; }
.conversation-row:hover,.conversation-row:focus-within,.conversation-row.is-menu-open,.conversation-row.is-current { background-color:rgba(214,235,255,.09); }
.recent-chats .conversation-title { display:flex; align-items:center; gap:8px; flex:1; min-width:0; width:auto; height:24px; margin:0; overflow:visible; padding:0; color:#fff; background:transparent; text-align:left; }
.recent-chats .conversation-title:hover { background:transparent; }
.conversation-chat-icon { display:block; flex:0 0 20px; width:20px; height:20px; fill:currentColor; }
.conversation-title-viewport { display:block; width:100%; min-width:0; height:20px; overflow:visible; white-space:nowrap; --conversation-leading-fade:8px; --conversation-trailing-fade:16px; }
.conversation-title-clip { display:block; width:calc(100% + var(--conversation-leading-fade)); min-width:0; height:20px; margin-left:calc(-1 * var(--conversation-leading-fade)); overflow:hidden; }
.conversation-title-track { display:inline-block; min-width:max-content; padding-left:var(--conversation-leading-fade); line-height:20px; will-change:transform; }
.conversation-title-text { display:inline-block; width:max-content; min-width:max-content; max-width:none; overflow:visible; line-height:20px; white-space:nowrap; }
.conversation-actions { position:relative; z-index:2; display:flex; align-items:center; flex:0 0 48px; gap:8px; width:48px; height:23.2px; padding:0; background:transparent; opacity:0; pointer-events:none; }
.conversation-row:is(:hover,:focus-within,.is-menu-open) .conversation-actions { opacity:1; pointer-events:auto; }
.conversation-row.has-title-marquee:is(:hover,:focus-within,.is-menu-open) .conversation-title-clip { mask-image:linear-gradient(to right,transparent 0 var(--conversation-leading-fade),#000 var(--conversation-leading-fade),#000 calc(100% - var(--conversation-trailing-fade)),transparent); mask-repeat:no-repeat; }
.conversation-row.has-title-marquee:is(:hover,:focus-within,.is-menu-open) .conversation-title-track { animation:conversation-title-marquee 1.1s ease-out .08s 1 both; }
@keyframes conversation-title-marquee { from { transform:translateX(0); } to { transform:translateX(var(--conversation-title-shift)); } }
.recent-chats .conversation-dots,.recent-chats .conversation-pin-button { display:grid; place-items:center; flex:0 0 34px; width:34px; height:36px; margin:0 -10px 0 -4px; padding:0; color:#afafaf; background:transparent; overflow:visible; }
.recent-chats .conversation-dots { border-radius:0 10px 10px 0; }
.conversation-pin-button svg { width:16px; height:16px; fill:currentColor; }
.conversation-dots svg { display:block; width:20px; height:20px; fill:currentColor; }
.conversation-rename { width:100%; height:32px; margin:2px; padding:5px 8px; color:#fff; background:#212121; border:1px solid #afafaf; border-radius:6px; outline:none; font:inherit; font-size:14px; }
.conversation-menu { position:fixed; z-index:110; width:168.6px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; padding:10px 0; color:#fff; background:#353535; border:0; border-radius:20px; outline:0; box-shadow:inset 0 0 1px rgba(255,255,255,.2); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
.conversation-menu[hidden],.conversation-row[hidden],.conversation-group-title[hidden] { display:none; }
.conversation-menu button { display:flex; align-items:center; gap:6px; width:calc(100% - 20px); height:36px; margin:0 10px; padding:6px 32px 6px 10px; border:0; border-radius:12px; color:inherit; background:transparent; font:inherit; font-size:14px; font-weight:400; line-height:20px; white-space:nowrap; text-align:left; outline:0; }
.conversation-menu button:hover,.conversation-menu button:focus-visible { background:rgba(255,255,255,.10); }
.conversation-menu button svg { flex:0 0 20px; width:20px; height:20px; fill:currentColor; }
.conversation-menu-divider { height:1px; margin:8px 16px; background:rgba(255,255,255,.15); }
.conversation-menu [data-chat-action="delete"] { color:#fa423e; }
.conversation-dialog { width:min(448px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:24px; color:#fff; background:#212121; border:0; border-radius:16px; box-shadow:0 8px 16px #0005; }
.conversation-dialog::backdrop { background:rgba(0,0,0,.65); }
.conversation-dialog h2 { margin:0 0 16px; font-size:18px; font-weight:500; }
.conversation-dialog p { font-size:14px; line-height:1.6; }
.conversation-dialog textarea { width:100%; min-height:160px; max-height:35dvh; padding:12px; resize:vertical; color:inherit; background:#171717; border:1px solid #ffffff26; border-radius:8px; font-size:13px; }
.conversation-dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.conversation-dialog-actions button,.archived-chat button { min-height:36px; padding:6px 12px; color:#fff; background:transparent; border:1px solid #ffffff26; border-radius:999px; font-size:14px; }
#conversation-dialog-confirm { color:#0d0d0d; background:#f9f9f9; }
#conversation-dialog-confirm.is-danger { color:#fff; background:#e02e2a; border-color:transparent; }
.conversation-dialog.is-delete-dialog { box-sizing:border-box; padding:16px; background:#212121; border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.52); }
.conversation-dialog.is-delete-dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(2px); }
.conversation-dialog.is-delete-dialog h2 { margin:0 0 18px; padding:0; font-size:18px; font-weight:500; line-height:24px; letter-spacing:-.01em; }
.conversation-dialog.is-delete-dialog .delete-chat-copy { display:flex; flex-direction:column; gap:10px; }
.conversation-dialog.is-delete-dialog .delete-chat-copy p { margin:0; color:#f2f2f2; font-size:14px; line-height:20px; }
.conversation-dialog.is-delete-dialog .delete-chat-copy strong { font-weight:700; }
.conversation-dialog.is-delete-dialog .delete-chat-copy .delete-chat-memory { color:#b4b4b4; }
.conversation-dialog.is-delete-dialog .delete-chat-copy a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.conversation-dialog.is-delete-dialog .delete-chat-copy a:hover,.conversation-dialog.is-delete-dialog .delete-chat-copy a:focus-visible { color:#ececec; outline:0; }
.conversation-dialog.is-delete-dialog .conversation-dialog-actions { gap:12px; margin-top:18px; }
.conversation-dialog.is-delete-dialog .conversation-dialog-actions button { min-height:36px; padding:6px 12px; font-size:14px; font-weight:600; line-height:20px; }
.conversation-dialog.is-delete-dialog #conversation-dialog-confirm { min-width:66px; color:#fff; background:#ff003d; border-color:transparent; box-shadow:0 0 0 2px #000; }
.conversation-dialog.is-delete-dialog #conversation-dialog-confirm:hover,.conversation-dialog.is-delete-dialog #conversation-dialog-confirm:focus-visible { background:#e81136; outline:0; }
.archived-chat { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #ffffff26; }
.archived-chat span { flex:1; min-width:0; overflow-wrap:anywhere; }
.more-menu:has(#archived-chats-button:not([hidden])) { height:auto; }
@media(hover:none) { .conversation-actions { opacity:1; pointer-events:auto; } }

/* Navigation labels above the conversation groups use the same regular weight as ChatGPT. */
.new-chat,.app-nav .nav-item,.app-nav .nav-item strong { font-weight:400; }

/* ChatGPT compact rail geometry, retaining KINO's own navigation and brand color. */
@media(min-width:821px) {
  body.sidebar-collapsed:not(.library-expanded) .agent-topbar { z-index:25; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar {
    display:flex;
    flex:0 0 52px;
    width:52px;
    min-width:52px;
    overflow:visible;
    border-right-color:rgba(214,235,255,.10);
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-header { width:52px; height:52px; padding:0 8px; }
  body.sidebar-collapsed:not(.library-expanded) .agent-brand,
  body.sidebar-collapsed:not(.library-expanded) .sidebar-header-actions,
  body.sidebar-collapsed:not(.library-expanded) .new-chat kbd,
  body.sidebar-collapsed:not(.library-expanded) .nav-item > span,
  body.sidebar-collapsed:not(.library-expanded) .nav-item > b,
  body.sidebar-collapsed:not(.library-expanded) .app-nav .focus-item > span,
  body.sidebar-collapsed:not(.library-expanded) .recent-chats,
  body.sidebar-collapsed:not(.library-expanded) .profile-button > span:nth-child(2),
  body.sidebar-collapsed:not(.library-expanded) .kino-store-coming-soon { display:none; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open {
    position:fixed;
    z-index:50;
    top:6px;
    left:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:40px;
    padding:0;
    border-radius:10px;
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open > svg { display:none; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open-mark {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    background:transparent;
    border-radius:10px;
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open-mark img {
    display:block;
    width:24px;
    height:24px;
    object-fit:contain;
    filter:saturate(.88) brightness(.96);
  }
  body.sidebar-collapsed:not(.library-expanded) .new-chat {
    grid-template-columns:20px;
    justify-content:center;
    width:36px;
    height:36px;
    margin:8px 8px 0;
    padding:8px;
    gap:0;
    overflow:hidden;
    font-size:0;
  }
  body.sidebar-collapsed:not(.library-expanded) .app-nav { width:52px; }
  body.sidebar-collapsed:not(.library-expanded) .app-nav .nav-item,
  body.sidebar-collapsed:not(.library-expanded) .app-nav .focus-item {
    grid-template-columns:20px;
    justify-content:center;
    width:36px;
    height:36px;
    margin:0 8px;
    padding:8px;
    gap:0;
    overflow:hidden;
    font-size:0;
  }
  body.sidebar-collapsed:not(.library-expanded) .app-nav .nav-item svg,
  body.sidebar-collapsed:not(.library-expanded) .app-nav .focus-item svg { justify-self:center; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-footer { width:52px; padding:8px 0 5px; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-account-row {
    display:block;
    width:52px;
    height:44px;
    margin:0;
    padding:0;
    overflow:visible;
    background:transparent;
  }
  body.sidebar-collapsed:not(.library-expanded) .profile-button {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    min-height:36px;
    margin:0 8px;
    padding:4px;
    background:transparent;
  }
  body.sidebar-collapsed:not(.library-expanded) .profile-button:hover,
  body.sidebar-collapsed:not(.library-expanded) .profile-button:focus-visible { background:rgba(214,235,255,.10); }
  body.sidebar-collapsed:not(.library-expanded) .account-menu { left:60px; bottom:8px; }
}

@media(max-width:540px) {
  .account-menu { left:6px; }
  .personalization-modal { padding:8px; }
  .personalization-dialog { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:min(600px,calc(100dvh - 16px)); }
  .personalization-rail { display:flex; align-items:center; gap:8px; padding:10px; border-right:0; border-bottom:1px solid rgba(214,235,255,.10); }
  .personalization-close { width:40px; height:40px; margin:0; flex:0 0 40px; }
  .personalization-nav-item { min-height:40px; }
  .personalization-content { padding:0 16px 22px; }
}

@media(max-width:820px) {
  .sidebar { width:260px; }
  .sidebar-header,.sidebar-footer { width:260px; }
}

/* Exact ChatGPT More flyout proportions */
.more-menu {
  top:268px;
  left:239px;
  width:252px;
  height:56px;
  padding:9px;
  background:#353535;
  border:1px solid #383838;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.more-menu > p { display:none; }
.more-menu .more-view-item {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  width:100%;
  min-height:36px;
  height:36px;
  padding:6px 10px;
  gap:8px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-shadow:none;
  font-size:14px;
  font-weight:400;
  line-height:20px;
  text-align:left;
}
.more-menu .more-view-item:hover {
  background:rgba(255,255,255,.10);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.more-menu .more-view-item svg {
  width:20px;
  height:20px;
  margin:0;
}
.more-menu .more-view-item b {
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  color:#111;
  background:var(--focus);
  border-radius:20px;
  font-size:8px;
}

/* Static, continuous surface. Only Omega and Eclipse override these colors. */
.agent-main {
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 24%,var(--focus-soft),transparent 31%),
    linear-gradient(145deg,var(--model-canvas-top) 0%,var(--model-canvas-middle) 55%,var(--model-canvas-bottom) 100%);
  transition:background 360ms var(--ease),box-shadow 360ms var(--ease);
}
.agent-main::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  transition:opacity 360ms var(--ease),background 360ms var(--ease);
}
.agent-main::before {
  background:
    radial-gradient(circle at 24% 26%,var(--model-glow),transparent 31%),
    radial-gradient(circle at 78% 62%,var(--model-glow-2),transparent 36%);
  filter:blur(18px);
  opacity:var(--model-aura-opacity);
}
.chat-scroll { position:relative; }
.chat-scroll > .empty-state,.chat-scroll > .messages { position:relative; z-index:1; }
.agent-topbar {
  background:linear-gradient(var(--model-topbar) 58%,transparent);
  transition:height 300ms var(--ease),padding 300ms var(--ease),background 360ms var(--ease);
}
.sidebar {
  background:linear-gradient(180deg,var(--model-sidebar-top) 0%,var(--model-sidebar-bottom) 100%);
  border-right-color:color-mix(in srgb,var(--model-accent) 15%,rgba(255,255,255,.055));
  box-shadow:8px 0 32px color-mix(in srgb,var(--model-glow) 14%,transparent);
  transition:transform .35s var(--ease),border-color 360ms var(--ease),box-shadow 360ms var(--ease),background 360ms var(--ease);
}
.composer-zone {
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--model-canvas-bottom) 82%,transparent) 28%,var(--model-canvas-bottom) 70%);
  transition:background 360ms var(--ease);
}
.chat-view.has-question-dock .composer-zone {
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--model-canvas-bottom) 82%,transparent) 18%,var(--model-canvas-bottom) 58%);
}
.kino-model-panel,.kino-model-submenu {
  background-color:var(--model-canvas-bottom);
  background-image:
    radial-gradient(ellipse at 12% 0%,var(--model-glow),transparent 56%),
    linear-gradient(145deg,var(--model-composer-a),var(--model-composer-b));
  border-color:color-mix(in srgb,var(--model-accent) 18%,rgba(255,255,255,.11));
  transition:background 360ms var(--ease),border-color 360ms var(--ease);
}
.empty-eyebrow { color:var(--model-accent); text-shadow:0 0 18px var(--model-glow); transition:color 520ms var(--ease),text-shadow 520ms var(--ease); }
.suggestions button:hover { border-color:color-mix(in srgb,var(--model-accent) 24%,rgba(255,255,255,.14)); box-shadow:0 10px 30px color-mix(in srgb,var(--model-glow) 14%,transparent); }
.kino-orb {
  isolation:isolate;
  color:var(--model-ink);
  background:linear-gradient(135deg,var(--model-accent),var(--model-accent-2));
  box-shadow:0 0 0 9px color-mix(in srgb,var(--model-accent) 7%,transparent),0 18px 70px var(--model-glow),0 0 44px var(--model-glow-2);
  transition:color 620ms var(--ease),background 620ms var(--ease),box-shadow 620ms var(--ease),filter 620ms var(--ease);
}
.kino-orb::before,.kino-orb::after {
  content:'';
  position:absolute;
  pointer-events:none;
}
.kino-orb::before {
  z-index:-1;
  inset:-12px;
  border:1px solid color-mix(in srgb,var(--model-accent) 58%,transparent);
  border-radius:24px;
  box-shadow:0 0 24px var(--model-glow),inset 0 0 20px var(--model-glow-2);
  opacity:.54;
  transform:rotate(11deg);
}
.kino-orb::after {
  z-index:1;
  inset:2px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.32),transparent 36% 70%,rgba(255,255,255,.08));
  mix-blend-mode:screen;
}
.kino-orb > span { position:relative; z-index:2; }
body[data-model="omega"] .agent-main {
  background:
    radial-gradient(circle at 50% 31%,rgba(255,221,102,.15),transparent 25%),
    radial-gradient(circle at 28% 68%,rgba(43,211,255,.12),transparent 36%),
    radial-gradient(circle at 78% 76%,rgba(255,192,62,.09),transparent 38%),
    linear-gradient(145deg,#211e16 0%,#152429 54%,#191b1d 100%);
  box-shadow:inset 0 0 120px rgba(255,213,75,.045);
}
body[data-model="omega"] .agent-main::before { opacity:.64; filter:blur(12px) saturate(135%); }
body[data-model="omega"] .kino-orb::before { border-radius:50%; }
body[data-model="eclipse"] .agent-main {
  background:
    radial-gradient(circle at 50% 12%,rgba(168,77,255,.17) 0,rgba(255,90,45,.10) 7%,transparent 21%),
    radial-gradient(circle at 24% 70%,rgba(131,55,222,.14),transparent 36%),
    radial-gradient(circle at 78% 72%,rgba(255,76,35,.12),transparent 38%),
    linear-gradient(145deg,#17121b 0%,#1c1717 54%,#18191b 100%);
  box-shadow:inset 0 0 150px rgba(72,22,96,.16);
}
body[data-model="eclipse"] .agent-main::before { opacity:.74; filter:blur(14px) saturate(148%); }
body[data-model="eclipse"] .kino-orb {
  color:#fff;
  background:radial-gradient(circle at 50% 50%,#080609 0 52%,#5e2e72 54%,#ff714c 76%,#c88fff 100%);
  box-shadow:0 0 0 9px rgba(6,4,8,.68),-12px 7px 54px var(--model-glow),12px 9px 58px var(--model-glow-2);
}
body[data-model="eclipse"] .kino-orb::before {
  inset:-16px;
  border:2px solid transparent;
  border-radius:50%;
  background:conic-gradient(from 30deg,transparent,var(--model-accent),transparent 34%,var(--model-accent-2),transparent 69%,var(--model-accent),transparent) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
}
/* ChatGPT code-surface geometry with KINO colors and a Dreamina-thin scrollbar. */
.messages { width:min(768px,calc(100vw - 124px)); }
.prompt-response {
  width:100%;
  margin-top:0;
}
.prompt-result {
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  overflow:clip;
  color:#ececec;
  background:#212121;
  border:0;
  border-radius:24px;
  box-shadow:none;
  box-sizing:border-box;
  font-size:16px;
  line-height:24px;
}
.prompt-result header {
  position:absolute;
  z-index:2;
  top:4px;
  right:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  color:#d1d1d1;
  background:transparent;
}
.prompt-result header > span { display:none; }
.prompt-result .prompt-copy-button {
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  margin:0;
  padding:8px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:9999px;
  box-sizing:border-box;
}
.prompt-result .prompt-copy-button:hover,
.prompt-result .prompt-copy-button:focus-visible { color:#fff; background:rgba(255,255,255,.1); outline:0; }
.prompt-result .prompt-copy-button svg { width:20px; height:20px; }
.prompt-code-shell {
  padding:12px 44px 0 0;
  box-sizing:border-box;
}
.prompt-code-viewport {
  display:flex;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  box-sizing:border-box;
  scrollbar-color:rgba(255,255,255,.30) transparent;
  scrollbar-width:auto;
}
.prompt-result pre {
  flex:0 0 auto;
  width:max-content;
  min-width:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0 16px 12px;
  overflow:visible;
  color:#f1f1f1;
  background:transparent;
  font:400 12.25px/20px ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  white-space:pre;
  box-sizing:border-box;
}
.prompt-code-viewport::-webkit-scrollbar { width:15px; height:15px; }
.prompt-code-viewport::-webkit-scrollbar-track { background:transparent; }
.prompt-code-viewport::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.32);
  background-clip:padding-box;
  border:5px solid transparent;
  border-left-width:2px;
  border-right-width:2px;
  border-radius:999px;
}
.prompt-code-viewport::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.42); background-clip:padding-box; }
.prompt-code-viewport::-webkit-scrollbar-corner { background:transparent; }
.prompt-code-viewport::-webkit-scrollbar-button { display:none; width:0; height:0; }
.prompt-result pre code {
  display:inline;
  color:#fff;
  font:400 12.25px/20px ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
.result-followup { margin:0 0 16px !important; }
.response-actions {
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  min-height:38px;
  margin-top:4px;
  color:#b7b7b7;
}
.response-actions > button,
.response-more-wrap > button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  color:inherit;
  background:transparent;
  border:0;
  border-radius:8px;
}
.response-actions > button:hover,
.response-actions > button:focus-visible,
.response-more-wrap > button:hover,
.response-more-wrap > button:focus-visible,
.response-more-wrap > button[aria-expanded="true"] { color:#fff; background:#2f2f2f; outline:0; }
.response-actions button[aria-pressed="true"] { color:var(--focus); background:var(--focus-soft); }
.response-actions svg { width:20px; height:20px; fill:currentColor; }
.response-actions [data-action="like"] svg,
.response-actions [data-action="dislike"] svg,
.response-actions [data-action="copy"] svg { fill:none; }
.response-more-wrap { position:relative; display:block; width:32px; height:32px; }
.response-more-menu {
  position:absolute;
  z-index:55;
  bottom:calc(100% + 8px);
  left:0;
  display:flex;
  flex-direction:column;
  width:268px;
  padding:10px;
  color:#ececec;
  background:#353535;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 16px 48px rgba(0,0,0,.48);
  animation:menu-in .16s var(--ease);
}
.response-more-menu[hidden] { display:none; }
.response-more-menu > small {
  padding:0 10px 8px;
  color:#a9a9a9;
  font-size:13px;
  line-height:20px;
}
.response-more-menu > button {
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 16px;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:45px;
  padding:6px 10px;
  color:#f2f2f2;
  background:transparent;
  border:0;
  border-radius:10px;
  text-align:left;
  font:400 15px/20px ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.response-more-menu > button:hover,
.response-more-menu > button:focus-visible { background:rgba(255,255,255,.08); outline:0; }
.response-more-menu > button svg { width:20px; height:20px; }
.response-more-menu > button b { justify-self:end; color:#d7d7d7; font-size:23px; font-weight:300; line-height:1; }
.response-more-menu > button.is-speaking { color:var(--focus); }
.message.agent.is-regenerating { pointer-events:none; animation:kino-response-regenerating .26s ease both; }
.response-sources-dialog { display:flex; flex-direction:column; gap:7px; }
.response-sources-dialog a { padding:10px 12px; color:#e4e4e4; background:#292929; border-radius:9px; }
.response-sources-dialog a:hover { color:var(--focus); background:#303030; }
@keyframes kino-response-regenerating { to { opacity:.2; transform:translateY(6px); } }

@media (max-width:700px) {
  .prompt-result { border-radius:24px; }
  .prompt-code-shell { padding:12px 44px 0 0; }
  .prompt-result pre { width:max-content; min-width:100%; max-height:none; padding:0 16px 12px; }
  .prompt-result pre code { font-size:12.25px; line-height:20px; }
  .response-more-menu { left:auto; right:-8px; width:min(268px,calc(100vw - 32px)); }
}

@media (max-width:540px) {
  .messages { width:calc(100% - 28px); }
  .prompt-response { width:100%; }
}

/* Live ChatGPT sidebar parity — measured at 1528px on 2026-09-05. */
:root {
  --chatgpt-sidebar-open:260px;
  --chatgpt-sidebar-closed:52px;
  --chatgpt-sidebar-row:36px;
  --chatgpt-sidebar-hover:#ffffff26;
  --chatgpt-sidebar-selected:#ffffff1a;
  --chatgpt-sidebar-border:#ffffff0d;
  --chatgpt-sidebar-ease:cubic-bezier(.4,0,.2,1);
}

.sidebar {
  flex:0 0 var(--chatgpt-sidebar-open);
  width:var(--chatgpt-sidebar-open);
  height:100dvh;
  padding:0;
  overflow:visible;
  color:#fff;
  background:#000;
  border-right:1px solid var(--chatgpt-sidebar-border);
  box-shadow:none;
  box-sizing:border-box;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:width .15s var(--chatgpt-sidebar-ease),flex-basis .15s var(--chatgpt-sidebar-ease),transform .15s var(--chatgpt-sidebar-ease);
}
.sidebar-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:0 0 52px;
  width:228.8px;
  height:52px;
  margin:0 0 0 8px;
  padding:0;
  gap:0;
  overflow:visible;
  box-sizing:border-box;
}
.agent-brand {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:36px;
  margin:0;
  padding:0 10px;
  color:#fff;
  background:transparent;
  border-radius:8px;
  box-sizing:border-box;
  transition:background-color .15s var(--chatgpt-sidebar-ease);
}
.agent-brand:hover,.agent-brand:focus-visible { color:#fff; background:var(--chatgpt-sidebar-hover); outline:0; }
.agent-brand .agent-brand-wordmark {
  display:block;
  color:#fff;
  font:400 16px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:normal;
  white-space:nowrap;
}
.agent-brand .agent-brand-wordmark span { color:inherit; font:inherit; letter-spacing:inherit; }
.sidebar-header-actions { position:relative; flex:0 0 72px; width:72px; min-width:72px; height:36px; }
.sidebar-header-actions .icon-button {
  top:0;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:8px;
  color:#afafaf;
  background:transparent;
  border:0;
  border-radius:8px;
  box-sizing:border-box;
  transition:color .15s var(--chatgpt-sidebar-ease),background-color .15s var(--chatgpt-sidebar-ease);
}
.sidebar-header-actions .icon-button:hover,
.sidebar-header-actions .icon-button:focus-visible { color:#fff; background:var(--chatgpt-sidebar-hover); outline:0; }
.sidebar-header-actions .sidebar-search { right:36px; }
.sidebar-header-actions .sidebar-close { right:0; }
.sidebar-search { border:0; border-radius:8px; }
.sidebar.is-searching .sidebar-search { right:0; width:228.8px; background:#212121; border-color:#ffffff26; }

.new-chat,
.app-nav .nav-item {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  width:232.8px;
  min-width:232.8px;
  height:var(--chatgpt-sidebar-row);
  min-height:var(--chatgpt-sidebar-row);
  margin:0 6px;
  padding:6px 10px;
  gap:8px;
  overflow:hidden;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-shadow:none;
  box-sizing:border-box;
  font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:normal;
  text-align:left;
  white-space:nowrap;
  transition:color .15s var(--chatgpt-sidebar-ease),background-color .15s var(--chatgpt-sidebar-ease);
}
.new-chat { margin-top:8px; }
.new-chat svg,.app-nav .nav-item svg { display:block; justify-self:start; width:20px; height:20px; fill:currentColor; }
.new-chat kbd { display:none; }
.new-chat:hover,.new-chat:focus-visible,
.app-nav .nav-item:hover,.app-nav .nav-item:focus-visible,
.app-nav .nav-item[aria-expanded="true"] { color:#fff; background:var(--chatgpt-sidebar-hover); outline:0; box-shadow:none; }
.new-chat.is-active,.app-nav .nav-item.is-active { color:#fff; background:transparent; box-shadow:none; }
.app-nav { display:flex; flex:0 0 auto; flex-direction:column; width:244.8px; margin:0; padding:0; gap:0; }
.app-nav .nav-item { font-weight:400; }
.app-nav .nav-item strong { font:inherit; }
.compact-sidebar-actions { display:none; }

.recent-chats {
  flex:1 1 auto;
  width:260px;
  min-height:0;
  margin:12px 0 0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-color:#ffffff26 transparent;
  scrollbar-width:thin;
}
.recent-chats::-webkit-scrollbar { width:8px; }
.recent-chats::-webkit-scrollbar-track { background:transparent; }
.recent-chats::-webkit-scrollbar-thumb { background:#ffffff26; border:2px solid #000; border-radius:999px; }
.conversation-group-title {
  width:228.8px;
  height:32px;
  margin:0;
  padding:6px 16px;
  color:#afafaf;
  box-sizing:border-box;
  font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.conversation-group-title:first-child { margin-top:0; }
.conversation-row {
  width:232.8px;
  height:36px;
  margin:0 6px;
  padding:6px 10px;
  gap:8px;
  border:0;
  border-radius:10px;
  box-sizing:border-box;
  transition:background-color .15s var(--chatgpt-sidebar-ease);
}
.conversation-row.is-current { background:var(--chatgpt-sidebar-selected); }
.conversation-row:hover,.conversation-row:focus-within,.conversation-row.is-menu-open { background:var(--chatgpt-sidebar-hover); }
.recent-chats .conversation-title { font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.sidebar-footer {
  position:relative;
  flex:0 0 auto;
  width:260px;
  margin:0;
  padding:8px 0 4px;
  overflow:visible;
  background:#000;
  border:0;
  border-top:1px solid var(--chatgpt-sidebar-border);
  box-shadow:none;
  box-sizing:border-box;
}
.sidebar-account-row {
  display:block;
  width:248px;
  height:52px;
  margin:0 6px;
  padding:0;
  background:transparent;
  border-radius:10px;
  box-sizing:border-box;
  transition:background-color .15s var(--chatgpt-sidebar-ease);
}
.sidebar-account-row:hover,
.sidebar-account-row:focus-within,
.sidebar-account-row:has(.profile-button[aria-expanded="true"]) { background:var(--chatgpt-sidebar-hover); }
.sidebar-account-row .profile-button {
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:center;
  width:100%;
  height:52px;
  min-height:52px;
  margin:0;
  padding:8px 10px;
  gap:8px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-sizing:border-box;
  text-align:left;
}
.sidebar-account-row .profile-button:hover,.sidebar-account-row .profile-button:focus-visible { background:transparent; outline:0; }
.sidebar-account-row .profile-button > .account-avatar { width:24px; height:24px; font-size:9px; }
.sidebar-account-row .profile-button strong { color:#fff; font:400 14px/18px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.sidebar-account-row .profile-button small { color:#cdcdcd; font:400 12px/16px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.kino-store-coming-soon { display:none; }

.more-menu {
  top:268px;
  left:239px;
  width:252px;
  height:auto;
  max-height:calc(100dvh - 284px);
  padding:9px;
  overflow:auto;
  color:#fff;
  background:#353535;
  border:1px solid #383838;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  box-sizing:border-box;
}
.more-menu .more-view-item {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  width:100%;
  height:36px;
  min-height:36px;
  margin:0;
  padding:6px 10px;
  gap:8px;
  color:#fff;
  background:transparent;
  border:0;
  border-radius:10px;
  box-sizing:border-box;
  font:400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:background-color .15s var(--chatgpt-sidebar-ease);
}
.more-menu .more-view-item:hover,.more-menu .more-view-item:focus-visible { background:var(--chatgpt-sidebar-hover); outline:0; box-shadow:none; }
.more-menu .more-view-item.is-active { background:var(--chatgpt-sidebar-selected); }

@media (min-width:821px) {
  body.sidebar-collapsed:not(.library-expanded) .sidebar {
    flex-basis:var(--chatgpt-sidebar-closed);
    width:var(--chatgpt-sidebar-closed);
    min-width:var(--chatgpt-sidebar-closed);
    height:100dvh;
    overflow:hidden;
    background:#000;
    border-right:1px solid var(--chatgpt-sidebar-border);
    box-shadow:none;
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-header {
    width:52px;
    height:52px;
    margin:0;
    padding:0;
  }
  body.sidebar-collapsed:not(.library-expanded) .agent-brand,
  body.sidebar-collapsed:not(.library-expanded) .sidebar-header-actions,
  body.sidebar-collapsed:not(.library-expanded) .app-nav,
  body.sidebar-collapsed:not(.library-expanded) .recent-chats,
  body.sidebar-collapsed:not(.library-expanded) .profile-button > span:nth-child(2) { display:none; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open {
    position:fixed;
    z-index:50;
    top:8px;
    left:8px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    color:#fff;
    background:transparent;
    border:0;
    border-radius:8px;
    box-sizing:border-box;
    transition:background-color .15s var(--chatgpt-sidebar-ease);
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open:hover,
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open:focus-visible { background:var(--chatgpt-sidebar-hover); outline:0; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open-mark,
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open > svg {
    position:absolute;
    inset:8px;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    margin:0;
    transition:opacity .15s steps(1,start);
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open-mark { opacity:1; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open > svg { opacity:0; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open:hover .sidebar-open-mark,
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open:focus-visible .sidebar-open-mark { opacity:0; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open:hover > svg,
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open:focus-visible > svg { opacity:1; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-open-mark img {
    display:block;
    width:20px;
    height:20px;
    object-fit:contain;
    filter:none;
  }
  body.sidebar-collapsed:not(.library-expanded) .new-chat {
    grid-template-columns:20px;
    justify-content:center;
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    margin:8px 8px 0;
    padding:8px;
    gap:0;
    overflow:hidden;
    color:#fff;
    font-size:0;
  }
  body.sidebar-collapsed:not(.library-expanded) .new-chat svg { justify-self:center; }
  body.sidebar-collapsed:not(.library-expanded) .compact-sidebar-actions {
    display:flex;
    flex-direction:column;
    width:52px;
    margin:0;
    padding:0;
    gap:0;
  }
  body.sidebar-collapsed:not(.library-expanded) .compact-sidebar-actions button {
    display:grid;
    place-items:center;
    width:40px;
    height:36px;
    margin:0 6px;
    padding:8px 10px;
    color:#fff;
    background:transparent;
    border:0;
    border-radius:10px;
    box-sizing:border-box;
    transition:background-color .15s var(--chatgpt-sidebar-ease);
  }
  body.sidebar-collapsed:not(.library-expanded) .compact-sidebar-actions button:hover,
  body.sidebar-collapsed:not(.library-expanded) .compact-sidebar-actions button:focus-visible { background:var(--chatgpt-sidebar-hover); outline:0; }
  body.sidebar-collapsed:not(.library-expanded) .compact-sidebar-actions svg { display:block; width:20px; height:20px; }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-footer {
    width:52px;
    margin-top:auto;
    padding:0 0 6px;
    background:#000;
    border-top:0;
  }
  body.sidebar-collapsed:not(.library-expanded) .sidebar-account-row {
    display:block;
    width:52px;
    height:40px;
    margin:0;
    padding:0;
    background:transparent;
  }
  body.sidebar-collapsed:not(.library-expanded) .profile-button {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    min-height:40px;
    margin:0 6px;
    padding:8px;
    background:transparent;
    border-radius:10px;
  }
  body.sidebar-collapsed:not(.library-expanded) .profile-button:hover,
  body.sidebar-collapsed:not(.library-expanded) .profile-button:focus-visible { background:var(--chatgpt-sidebar-hover); }
  body.sidebar-collapsed:not(.library-expanded) .profile-button > .account-avatar { width:24px; height:24px; }
  body.sidebar-collapsed:not(.library-expanded) .account-menu { left:60px; bottom:8px; }
}

@media (max-width:820px) {
  .sidebar { width:260px; transform:translateX(-100%); }
  body.sidebar-visible .sidebar { transform:translateX(0); }
  .compact-sidebar-actions { display:none; }
  .sidebar-header { width:228.8px; }
}

@media (prefers-reduced-motion:reduce) {
  .sidebar,.agent-brand,.new-chat,.app-nav .nav-item,.conversation-row,
  .sidebar-account-row,.sidebar-header-actions .icon-button,
  .compact-sidebar-actions button { transition:none!important; }
}