/* Shared Orlon controls. Existing component structure and behavior stay intact. */
:root{--control-h:44px;--control-r:999px;--surface-r:20px;--space:8px;--motion:160ms;--ease:cubic-bezier(.2,.7,.2,1);--chat-width:800px}
body{--text:var(--t1);--muted:var(--t2);--muted-2:var(--t3);--surface:var(--s1);--surface-2:var(--s2);--surface-3:var(--s3);--border:var(--line);--border-strong:var(--line-strong);--accent:var(--t1);--accent-ink:var(--bg);--raised:inset 0 1px 0 var(--line-strong),0 2px 5px #0003;background:var(--bg);color:var(--t1)}
body:not([data-theme="light"]){--bg:#000;--s1:#080808;--s2:#121212;--s3:#1b1b1b;--field:#000;--nav-bg:#050505;--line:#222;--line-strong:#343434;--t1:#f2f2f2;--t2:#aaa;--t3:#929292;--hover:#141414}
body:not([data-theme="light"]){--s1:#000;--s2:#000;--s3:#0e0e0e;--field:#000;--nav-bg:#000;--hover:#0c0c0c;--hover-2:#161616;--line:#1d1d1d;--line-strong:#2c2c2c}   /* Dark is true black: depth from hairlines, not gray fills */
body[data-theme="light"]{--raised:inset 0 1px 0 #fff,0 2px 5px #0000000a}
html,body{max-width:100%;overscroll-behavior:none}body{overflow:hidden}.app-shell{height:var(--app-height,100dvh)}
button,a,input,textarea,select{touch-action:manipulation}button{transition:background var(--motion) var(--ease),border-color var(--motion) var(--ease),color var(--motion) var(--ease)}
:where(button,a,input,textarea,select,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--t2);outline-offset:3px}
:where(button,input,textarea,select):disabled{cursor:default;opacity:.45}
:where(.button,.pill-button,.primary-pill,.outline-pill,.link-pill){min-height:var(--control-h);border-radius:var(--control-r);padding:10px 18px;font:500 14px/1.4 var(--sans);border:1px solid var(--line-strong);background:var(--field);color:var(--t1)}
:where(.button,.pill-button,.primary-pill,.outline-pill):not(:disabled):hover{background:var(--s2);border-color:var(--t3)}
.button.primary,.primary-pill,.pill-button.solid,.sidebar-login-actions #sidebar-signup-open{color:var(--t1);background:var(--field);border:1px solid var(--t3);box-shadow:var(--raised)}
:where(.button,.primary-pill,.pill-button):active:not(:disabled){box-shadow:none;border-color:var(--t2)}
.icon-button,.round-button,.sheet-close,.artifact-close{width:var(--control-h);height:var(--control-h);min-width:var(--control-h);padding:11px;border-radius:50%;color:var(--t2)}
.icon-button svg,.round-button svg,.sheet-close svg{width:20px;height:20px}.icon-button:hover,.round-button:hover,.sheet-close:hover{background:var(--s2);color:var(--t1)}
#settings-close:focus-visible{outline:2px solid var(--t2)!important;outline-offset:3px;box-shadow:none!important}
/* Same navigation density and icon weight as the app, with a quiet desktop rail. */
.sidebar{background:var(--nav-bg);border-color:var(--line);min-width:0;padding:16px 12px 12px}.sidebar-head{gap:6px;padding:0 2px 20px;min-width:0}.brand-wrap{min-width:0}.brand-button{min-height:44px}.brand-button .logo{width:36px;height:36px}.side-row,.tabs .tab{min-height:46px;height:auto;padding:11px 12px;gap:12px;font:550 14px/1.5 var(--sans);color:var(--t2);border-radius:12px}.side-row svg,.tabs .tab svg{width:22px;height:22px;stroke-width:1.8}.side-row:hover,.tabs .tab:hover{background:var(--s2);color:var(--t1)}.tab[aria-selected="true"]{background:var(--s2);color:var(--t1)}
.conversation-list{gap:2px;overscroll-behavior:contain}.conversation-item{border-radius:12px;min-width:0}.conversation-open{min-width:0;min-height:44px}.conversation-open strong{font:400 14px/1.5 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-more{min-width:36px;width:36px;height:36px;padding:9px;border-radius:50%}.profile-row{min-height:52px;border-radius:14px}.profile-row .who{min-width:0}.profile-row .who strong{font-weight:550}.topbar{min-height:60px;padding:8px 24px}.topbar-heading{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Keep reading width and draft width aligned rather than stretching with the display. */
.chat-main{padding:0 clamp(16px,3vw,48px) max(16px,env(safe-area-inset-bottom))}.message-list{gap:28px;padding-block:24px;scroll-padding-block:24px}.message.assistant .message-body{font-size:16px;line-height:1.75}.message.user{max-width:min(85%,660px);padding:12px 18px;border-radius:22px;background:var(--s2);border:0}.message-body{min-width:0;overflow-wrap:anywhere}.message-body a{color:var(--t1);text-decoration-thickness:1px;text-underline-offset:3px}.message-body pre{background:var(--s1);border:1px solid var(--line);border-radius:14px}.reply-actions{gap:4px;margin-top:12px}.reply-action{width:40px;height:40px;border-radius:50%}.reply-action svg{width:18px;height:18px}
#composer{grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:8px;padding:12px;border:1px solid var(--line-strong);border-radius:24px;background:var(--field);box-shadow:none;position:relative}#composer:focus-within{box-shadow:none;border-color:var(--t3)}#composer textarea{grid-column:1/-1;grid-row:1;padding:6px 4px;min-height:44px;max-height:180px;font:400 16px/1.5 var(--sans)}#composer #tools-open{grid-column:1;grid-row:2}#composer #model-open{grid-column:2;grid-row:2;justify-self:start;width:fit-content;max-width:100%;min-width:0;padding:6px 12px;min-height:44px;gap:8px;color:var(--t1);background:var(--field);box-shadow:none;border:1px solid var(--line-strong)}#model-chip-name{max-width:160px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#model-open .chev-down{width:14px;height:14px;flex:none}#composer #voice-record{grid-column:3;grid-row:2}#composer #voice-mode,#composer #send-button{grid-column:4;grid-row:2}#composer .round-button,#composer .send-button{width:44px;height:44px;min-width:44px;padding:11px;border-radius:50%}#composer-hint{display:none}#composer .send-button{background:var(--on);color:var(--on-ink);border:0}#composer .send-button:disabled{background:var(--s3);color:var(--t3);opacity:1}#composer #tools-open,#composer #voice-record{background:var(--s2);box-shadow:none;border:0}
#starters{display:none!important}#panel-chat.is-empty #composer{max-width:var(--chat-width);padding:12px;border-radius:24px}#panel-chat.is-empty #composer textarea{font-size:16px;min-height:44px}#panel-chat.is-empty #composer .round-button,#panel-chat.is-empty #composer .send-button{width:44px;height:44px}.welcome-regular .welcome-mark{width:64px;height:64px}.welcome-regular h2,.empty-state h2{font-size:clamp(28px,2.7vw,40px);line-height:1.3}.welcome-regular{gap:20px}#panel-chat.is-empty .chat-main{padding-top:clamp(32px,16dvh,160px)}
/* Dialogs share colors, edges and reachability rather than individual hardcoded fills. */
.sheet,.desktop-settings,.model-sheet{background:var(--s1);color:var(--t1);border-color:var(--line-strong);max-height:calc(var(--app-height,100dvh) - 32px);border-radius:var(--surface-r)}
.sheet::backdrop,dialog::backdrop{background:#0008;backdrop-filter:none}.sheet input,.sheet textarea,.sheet select,.desktop-settings input,.desktop-settings textarea,.desktop-settings select{color:var(--t1);background:var(--field);border-color:var(--line-strong);border-radius:12px;min-height:44px}.sheet input[type=checkbox],.sheet input[type=radio],.sheet input[type=range]{min-height:0}.sheet textarea{resize:vertical;max-width:100%}.sheet :where(input,textarea,select):focus-visible{outline:1px solid var(--t2);outline-offset:1px}.settings-content{min-width:0;overscroll-behavior:contain}.sgroup{border-radius:16px;background:var(--field);border-color:var(--line)}.srow{gap:16px;min-height:64px}.srow-text{min-width:0}.srow-text strong{font-weight:500}.sgroup select,.srow select{min-width:0;max-width:180px;min-height:40px}.settings-section-head{color:var(--t1)}.settings-empty,.usage-card,.stat,.box{background:var(--s1);border-color:var(--line)}
/* The picker retains Orlon Auto, tiers, descriptions and locks, plus local account-scoped favorites. */
.model-filter{display:flex;flex-wrap:wrap;gap:6px}.model-chip-filter{min-height:40px;padding:8px 14px;border-radius:999px;background:var(--field);color:var(--t2);border:1px solid var(--line)}.model-chip-filter[aria-pressed=true]{color:var(--t1);border-color:var(--line-strong);background:var(--s2);box-shadow:var(--raised)}.model-choice{display:flex;align-items:center;gap:2px;min-width:0;border-radius:14px}.model-choice:hover{background:var(--s2)}.model-choice>.m-item,.model-choice>.m-pop-item{flex:1;min-width:0;width:auto}.model-favorite{flex:none;width:40px;height:44px;display:grid;place-items:center;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--t3)}.model-favorite svg{width:18px;height:18px}.model-favorite[aria-pressed=true]{color:var(--t1)}.model-favorite[aria-pressed=true] svg{fill:currentColor}.model-favorite:hover{background:var(--s3);color:var(--t1)}.m-item,.m-pop-item{min-height:64px;padding:12px;border-radius:12px}.m-item-text,.m-pop-text{min-width:0}.m-item-text strong,.m-pop-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.m-item-text small,.m-pop-description{color:var(--t3);line-height:1.5;overflow-wrap:anywhere}.m-pop{max-width:calc(100vw - 24px);background:var(--s1);border-radius:20px;border-color:var(--line-strong);overflow:hidden}.m-pop-head{padding:16px}.m-pop>.model-filter{padding:0 12px 12px}.m-pop-search{margin:0 12px 12px}.m-pop-list{min-height:0;max-height:min(360px,45dvh);overscroll-behavior:contain}.m-pop-search input,.model-search input{font-size:16px;color:var(--t1);background:var(--field);min-height:44px;border-radius:999px}.model-sheet.is-desktop{width:min(880px,calc(100vw - 48px))}.model-desktop{grid-template-columns:minmax(150px,190px) minmax(0,1fr)}.model-body,.model-browser,.model-results,.m-main{min-width:0}.model-navigation{background:var(--field);border-color:var(--line)}
/* Only intentional content scrolling; no bright native tracks. */
.sidebar,.conversation-list,.message-list,.content,.settings-content,.model-results,.m-list,.m-pop-list,.model-body,.tools-menu,.sheet{scrollbar-width:none}.sidebar::-webkit-scrollbar,.conversation-list::-webkit-scrollbar,.message-list::-webkit-scrollbar,.content::-webkit-scrollbar,.settings-content::-webkit-scrollbar,.model-results::-webkit-scrollbar,.m-list::-webkit-scrollbar,.m-pop-list::-webkit-scrollbar,.model-body::-webkit-scrollbar,.sheet::-webkit-scrollbar{display:none}
.tools-menu{background:var(--s1);border-radius:20px;border-color:var(--line-strong);max-height:min(420px,calc(var(--app-height,100dvh) - 140px));overflow-y:auto;overscroll-behavior:contain}.tools-item{min-height:48px;border-radius:12px;padding:12px 14px;color:var(--t1)}.tools-item svg{width:22px;height:22px}.tools-item:hover{background:var(--s2)}.attachment-preview{max-width:var(--chat-width);min-width:0;overflow-x:auto}.message-attachment{max-width:100%;min-width:0;background:var(--s1);border-color:var(--line)}.generated-image{max-width:100%}.generated-image img{max-width:100%;height:auto;border-radius:16px}.generated-image .image-actions{display:flex;gap:8px;flex-wrap:wrap}.image-actions .button{min-width:44px}
@media(min-width:761px){.app-shell.collapsed .brand-button{min-width:44px}.app-shell.collapsed .brand-button .logo{width:36px;height:36px}.app-shell.collapsed .side-row,.app-shell.collapsed .tabs .tab{width:44px;min-height:44px;padding:11px}.sidebar-resizer{touch-action:none}}
@media(max-width:1024px) and (min-width:761px){:root{--sidebar-w:240px}.topbar{padding-inline:16px}.sidebar-head{gap:0}.sidebar-head .icon-button{width:36px;min-width:36px;padding:8px}.sidebar .brand-button{gap:6px}}
@media(max-width:760px){.app-shell{height:var(--app-height,100dvh);min-height:0}.sidebar{width:min(340px,calc(100vw - 36px));padding:16px 12px max(16px,env(safe-area-inset-bottom))}.sidebar-head{padding-bottom:16px}.topbar{padding:8px 12px;min-height:60px}.topbar .icon-button,.menu-button{width:44px;height:44px;min-width:44px;padding:11px}.chat-main{padding:0 12px max(12px,env(safe-area-inset-bottom))}.message-list{padding-block:20px;gap:24px}.message.user{max-width:90%;padding:11px 15px}.message.assistant .message-body{font-size:16px;line-height:1.7}.composer{margin-top:12px}#composer{padding:10px;gap:6px;grid-template-columns:44px minmax(0,1fr) 44px 44px}#composer textarea{padding:4px 4px;min-height:40px}#model-chip-name{max-width:120px}#model-open .model-chip-logo{width:18px;height:18px}#composer #model-open{padding-inline:8px;gap:5px}#panel-chat.is-empty .chat-main{padding:0 12px max(12px,env(safe-area-inset-bottom));justify-content:space-between}#panel-chat.is-empty .message-list{flex:1 1 auto;min-height:0;place-items:center;padding:12px 0}#panel-chat.is-empty .message-list .empty-state{margin:auto 0}.welcome-regular{gap:16px}.welcome-regular .welcome-mark{width:56px;height:56px}.welcome-regular h2,.empty-state h2{font-size:28px}.sheet,.model-sheet,.desktop-settings{width:calc(100vw - 16px);max-width:none;height:auto;max-height:calc(var(--app-height,100dvh) - 16px);margin:auto;padding:20px 16px;border-radius:24px}.model-sheet{height:calc(var(--app-height,100dvh) - 16px);padding:0}.model-sheet .model-body{min-height:0;overflow-y:auto}.desktop-settings{height:calc(var(--app-height,100dvh) - 16px);padding:0}.desktop-settings .settings-content{padding:16px 16px max(24px,env(safe-area-inset-bottom));max-width:100%}.settings-content .srow{padding:14px;gap:12px}.srow-text span{overflow-wrap:anywhere}.model-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}.model-filter{gap:5px}.model-chip-filter{padding-inline:12px}.model-results{padding:0 8px}.model-sheet .m-settings{display:flex;flex-wrap:wrap;gap:8px;padding:12px}.m-setting{flex:1 1 80px;min-height:48px}.m-item-text strong{font-size:14px}.m-item-text small{font-size:12px}.m-logo{flex:none}.tools-menu{left:0;right:0;max-width:100%;width:auto;bottom:calc(100% + 8px)}.projects-space,.orlons-space,.gallery-space{padding-inline:16px}.projects-head,.orlons-head{flex-wrap:wrap;gap:16px}.project-grid,.orlons-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}}
@media(max-width:360px){#model-chip-name{max-width:100px}.model-chip-filter{padding-inline:10px}.srow:has(select){flex-wrap:wrap}.srow select{margin-left:auto}.welcome-regular h2{font-size:25px}}
@media(max-height:520px) and (max-width:760px){.topbar{min-height:48px;padding-block:2px}.welcome-regular{gap:6px}.welcome-regular .welcome-mark{width:36px;height:36px}.welcome-regular h2{font-size:22px}#panel-chat.is-empty .message-list{padding:4px 0}#composer{margin-top:4px}.composer textarea{max-height:100px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.sidebar,.message-list,.settings-content,.model-results,.m-pop-list{scrollbar-width:auto}.model-favorite[aria-pressed=true]{border:1px solid currentColor}}
.m-vision{flex:none;width:16px;height:16px;color:var(--t3)}body[data-text-size="small"] .message-body,body[data-text-size="small"] .message.assistant .message-body{font-size:14px}body[data-text-size="large"] .message-body,body[data-text-size="large"] .message.assistant .message-body{font-size:19px}body[data-text-size="xlarge"] .message-body,body[data-text-size="xlarge"] .message.assistant .message-body{font-size:21px}
#composer #voice-mode{background:var(--on);color:var(--on-ink);box-shadow:none}#composer #voice-mode svg{stroke:currentColor;width:22px;height:22px}#brand-name{flex:none;width:68px;height:16px}.brand-button{flex-shrink:0}
/* A little more brand presence, with enough room for the header controls. */
:root{--sidebar-w:clamp(260px,19vw,292px)}.sidebar{container-type:inline-size}.sidebar-head{gap:4px}.brand-button .logo{width:40px;height:40px}#brand-name{width:74px;height:18px}.welcome-regular .welcome-mark{width:68px;height:68px}
@media(min-width:761px){.sidebar-head .icon-button{width:40px;height:44px;min-width:40px;padding:10px}.app-shell.collapsed .brand-button .logo{width:36px;height:36px}}
@container(max-width:220px){.sidebar-head #brand-name{width:60px;height:15px}.sidebar-head .brand-copy{gap:6px}.sidebar-head .brand-button .logo{width:36px;height:36px}.sidebar-head .icon-button{min-width:36px;width:36px;padding:8px}}
@container(max-width:185px){.sidebar-head #brand-name{display:none}}
@media(max-width:1024px) and (min-width:761px){:root{--sidebar-w:248px}}
@media(max-width:760px){.welcome-regular .welcome-mark{width:60px;height:60px}}
@media(max-height:520px) and (max-width:760px){.welcome-regular .welcome-mark{width:40px;height:40px}}
#message-input[data-improving=true]{background-image:linear-gradient(105deg,var(--t2) 0%,var(--t2) 35%,var(--t1) 48%,var(--t1) 52%,var(--t2) 65%,var(--t2) 100%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:prompt-light-sweep 1.5s linear infinite}@keyframes prompt-light-sweep{from{background-position:160% 0}to{background-position:-60% 0}}@media(prefers-reduced-motion:reduce){#message-input[data-improving=true]{animation:none}}
#gallery-viewer{width:min(1000px,calc(100vw - 32px));padding:16px;overflow-y:auto}#gallery-viewer-image{display:block;max-width:100%;width:100%;max-height:calc(var(--app-height,100dvh) - 200px);object-fit:contain;border-radius:12px;touch-action:pan-y}#gallery-viewer-image[hidden]{display:none}.viewer-navigation{display:flex;justify-content:space-between;gap:12px;padding:8px 0}.viewer-navigation .icon-button{background:var(--field);border:1px solid var(--line-strong);color:var(--t1)}.viewer-meta{gap:8px;min-width:0}.viewer-meta strong{overflow-wrap:anywhere}.viewer-error{min-height:200px;display:grid;place-content:center;gap:16px;text-align:center;color:var(--t2)}.viewer-error[hidden]{display:none}@media(max-width:760px){#gallery-viewer{width:calc(100vw - 16px);padding:12px}#gallery-viewer-image{max-height:calc(var(--app-height,100dvh) - 200px)}}
#composer #model-open{margin:0}
/* Desktop uses the available workspace; the phone keeps its own composition. */
@media(min-width:761px){
  :root{--chat-width:880px}
  .chat-main{padding-inline:clamp(24px,4vw,72px)}
  #panel-chat.is-empty .chat-main{padding-top:clamp(64px,20dvh,200px)}
  #panel-chat.is-empty .message-list{width:100%;max-width:var(--chat-width);margin:0 auto;padding:0 0 30px}
  .welcome-regular{flex-direction:row;align-items:center;justify-content:center;gap:20px;width:100%;text-align:center}
  .welcome-regular .welcome-mark{width:56px;height:56px;margin:0}
  .welcome-regular h2{font:400 clamp(30px,2.3vw,40px)/1.25 var(--serif);text-align:center;margin:0;max-width:none}
  #composer,#panel-chat.is-empty #composer{border-radius:20px;padding:12px 16px;grid-template-columns:40px minmax(0,1fr) 40px 40px}
  #composer .round-button,#composer .send-button,#panel-chat.is-empty #composer .round-button,#panel-chat.is-empty #composer .send-button{width:40px;height:40px;min-width:40px;padding:10px}
  #composer #model-open{min-height:40px}
  #model-chip-name{max-width:240px}
  .desktop-settings{width:min(1000px,calc(100vw - 64px))}
  .desktop-settings .settings-layout{grid-template-columns:200px minmax(0,1fr)}
  .desktop-settings .settings-layout>.settings-navigation{display:flex;flex-direction:column;gap:4px;padding:18px 12px}
  .desktop-settings .settings-content{padding:24px 32px 36px;max-width:none;margin:0;overflow-y:auto}
  .desktop-settings .settings-section-head h2{font:500 20px/1.4 var(--sans);color:var(--t1)}
  .model-sheet.is-desktop{width:min(1040px,calc(100vw - 64px));height:min(680px,calc(100dvh - 80px))}
  .model-desktop{grid-template-columns:210px minmax(0,1fr)}
  .model-navigation{padding:24px 18px}
  .model-browser .model-bar{padding:20px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .model-search{width:100%}
  .model-results{padding:0 16px 20px}
  .model-results>.m-item{width:100%;margin-bottom:12px;border:1px solid var(--line-strong);background:var(--field)}
  .model-results .m-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:0;overflow:visible}
  .model-results .m-empty{grid-column:1/-1}
  .model-choice{align-items:stretch;border:1px solid var(--line);background:var(--field)}
  .model-choice>.m-item{padding:14px 10px;align-items:flex-start;min-height:96px}
  .model-choice .m-item-text strong{white-space:normal;line-height:1.4}
  .model-choice .m-item-text small{display:block;margin-top:5px}
  .model-favorite{align-self:center;width:34px;padding:8px}
}
@media(min-width:761px) and (max-width:1100px){.model-results .m-list{grid-template-columns:1fr}.model-choice>.m-item{min-height:72px}.model-desktop{grid-template-columns:170px minmax(0,1fr)}}
@media(max-width:760px){.desktop-settings .settings-navigation{display:none}}

/* Theme-owned surfaces and one control scale across the web workspace. */
.settings-content .button.primary,.orlons-actions .primary-pill,.up-add .button{
  color:var(--t1);background:var(--field);border:1px solid var(--t3);box-shadow:var(--raised);filter:none;border-radius:999px;
}
.settings-content .button.primary:not(:disabled):hover,.orlons-actions .primary-pill:not(:disabled):hover,.up-add .button:not(:disabled):hover{background:var(--s2);filter:none}
.button.danger{color:var(--danger);border-color:var(--danger-line);box-shadow:none}
.button.danger:hover{background:var(--danger-fill)}
.osel-menu,.brand-menu,.chat-menu,.profile-menu,.tools-menu,.reply-menu{color:var(--t1);background:var(--s1);border-color:var(--line-strong);border-radius:16px}
.srow:hover,.osel-item:hover,.osel-item:focus-visible{background:var(--hover)}
.voice-panel{background:var(--s1);color:var(--t1)}
.voice-panel .voice-orb{background:radial-gradient(circle at 50% 38%,var(--s3),var(--field) 72%);border-color:var(--line-strong)}
.voice-panel .voice-orb:hover{background:var(--s2)}
.orlons-actions button,.projects-head .button,.gallery-space .button{font-size:14px;border-radius:999px}
.model-filter{border:0;background:transparent;box-shadow:none;padding:0}
@media(min-width:761px){
 .side-row,.tabs .tab{min-height:40px;padding:8px 12px;gap:10px;font-weight:500}
 .side-row svg,.tabs .tab svg{width:20px;height:20px}
 .conversation-open{min-height:36px}
 .sidebar-head{padding-bottom:16px}
 .sidebar-label{font-size:12px}
 .tools-item{min-height:40px;padding:10px 12px;font-size:14px}
 .tools-item svg{width:20px;height:20px}
 .model-chip-filter{min-height:36px;padding:6px 14px;font-size:14px;box-shadow:none}
 .model-favorite{height:40px}
 .model-choice>.m-item{min-height:80px}
 .srow{min-height:60px}
 .sheet:not(.model-sheet):not(.desktop-settings){border-radius:20px}
 .sheet h2{font-size:22px;line-height:1.35}
 .projects-head h2,.orlons-head h2,.gallery-space h2{font-size:28px;line-height:1.3}
 .voice-panel .voice-orb{width:160px;height:160px}
}
/* Flat brand marks and account details: no chrome finish or glow. */
.logo,.welcome-mark:not(.private-mark),.model-chip-logo.orlon-mark,.m-logo img.auto{filter:none}
body[data-theme="light"] .logo,body[data-theme="light"] .welcome-mark:not(.private-mark),body[data-theme="light"] .model-chip-logo.orlon-mark,body[data-theme="light"] .m-logo img.auto{filter:invert(1)}
body[data-plan="pro"] .profile-row .avatar,body[data-plan="pro"] #profile-avatar-big{color:var(--t1);background:var(--s2);box-shadow:none;border:1px solid var(--line-strong)}
body[data-plan="pro"] .profile-row .who small{color:var(--t2);text-shadow:none}
body[data-plan="pro"] #account-in #profile-plan{color:var(--t2);background:var(--s2);font-weight:500;letter-spacing:0}
body[data-plan="pro"] .creator-verified{color:var(--t1);filter:none}
/* A readable model list, with a clear selected row and quiet secondary controls. */
.model-choice{border:0;background:transparent;gap:8px;border-radius:12px}
.model-choice:has(.m-item.on){background:var(--s2)}
.model-choice>.m-item{background:transparent;border:0;box-shadow:none}
.model-choice .m-item-text strong{font:500 14px/1.5 var(--sans);white-space:normal}
.model-choice .m-item-text small{font:400 12px/1.5 var(--sans);margin-top:3px}
.model-favorite{color:var(--t3)}
.model-results>.m-item{border-radius:12px;background:var(--s2);border:1px solid var(--line-strong)}
.model-results .m-item.on{box-shadow:none}
@media(min-width:761px){
 .model-sheet.is-desktop{width:min(860px,calc(100vw - 64px));height:min(620px,calc(100dvh - 80px))}
 .model-desktop{grid-template-columns:180px minmax(0,1fr)}
 .model-results .m-list{display:flex;flex-direction:column;gap:4px}
 .model-choice>.m-item{min-height:70px;padding:12px;align-items:center}
 .model-favorite{width:40px;margin-right:4px}
 .model-sheet.is-desktop .m-logo{width:30px;height:30px;flex:none}
 .model-navigation{padding:22px 16px}
 .model-browser .model-bar{padding:18px 16px;gap:12px}
 .model-results{padding:0 16px 16px}
 .model-search input{border-radius:12px;font-size:14px}
 .model-filter{gap:6px}
 .model-chip-filter{border-radius:10px;border-color:transparent;background:transparent;box-shadow:none}
 .model-chip-filter[aria-pressed=true]{background:var(--s2);border-color:var(--line-strong);box-shadow:none}
}

/* Keep the welcome mark subordinate to the greeting. */
.welcome-regular .welcome-mark{width:44px;height:44px}
@media(min-width:761px){.welcome-regular{gap:16px}.welcome-regular .welcome-mark{width:40px;height:40px}}
@media(max-height:520px) and (max-width:760px){.welcome-regular .welcome-mark{width:32px;height:32px}}

/* Match the quieter welcome mark in the sidebar. */
.sidebar .brand-button .logo,.app-shell.collapsed .brand-button .logo{width:30px;height:30px}

/* Start with public navigation until the account check resolves. */
body[data-account-state="loading"] :is(#private-chat-row,#tab-projects,#tab-orlons,#more-toggle,#profile-open,#auth-buttons,#sidebar-login,#rail-login),
body[data-gated="true"] :is(#private-chat-row,#tab-projects,#tab-orlons){display:none!important}

/* Allowances belong to signed-in accounts, not the guest settings menu. */
body:not([data-account-state="signed-in"]) :is([data-settings-tab="usage"],[data-settings-panel="usage"],.model-usage){display:none!important}
/* Reserve a real trailing column for chat options instead of covering the title. */
.conversation-item{display:flex;align-items:center;gap:4px}
.conversation-open{flex:1 1 0;min-width:0;padding-right:4px}
.conversation-item .conversation-more{position:static;flex:0 0 36px;min-width:36px;width:36px;height:36px;margin:0 4px 0 0;padding:0;opacity:1;color:var(--t2);background:transparent}
.conversation-item .conversation-more svg{display:block;width:18px;height:18px;fill:currentColor;stroke:none}
.conversation-item .conversation-more:hover,.conversation-item .conversation-more:focus-visible{color:var(--t1);background:var(--s3)}

@media(hover:hover){
 .conversation-item .conversation-more{opacity:0}
 .conversation-item:hover .conversation-more,.conversation-item:focus-within .conversation-more,.conversation-item.menu-open .conversation-more{opacity:1}
}
@media(min-width:761px){
 .app-shell.collapsed .brand-button .brand-expand{display:none!important}
 .app-shell.collapsed .brand-button .logo{opacity:1!important}
 html .app-shell.collapsed .sidebar-collapse{display:inline-flex!important}
}

/* Chat workspace: a quiet reading column and a consistent control rhythm. */
.sidebar .sidebar-head{padding-inline:8px}
.sidebar .side-row,.sidebar .tabs .tab{font-size:14px;font-weight:450;border-radius:10px}
.sidebar .side-row svg,.sidebar .tabs .tab svg{width:20px;height:20px;stroke-width:1.7}
.sidebar .sidebar-label{font-size:12px;letter-spacing:0;color:var(--t3)}
.sidebar .conversation-item{border-radius:10px}
.sidebar .conversation-list{gap:4px}
.sidebar .conversation-open strong{font-size:14px;font-weight:400}
.sidebar .profile-row{border-radius:12px}
#messages .welcome-regular{justify-content:center;gap:12px;text-align:center}
#messages .welcome-regular h2{font-size:30px;line-height:1.3;font-weight:500;margin:0}
#messages .welcome-regular .welcome-mark{width:32px;height:32px;flex:none}
.chat-main #composer,#panel-chat.is-empty .chat-main #composer{border-radius:26px;transition:border-color 160ms ease}
#composer #tools-open,#composer #voice-record{background:transparent;color:var(--t2);box-shadow:none}
#composer #tools-open:hover,#composer #voice-record:hover{background:var(--s2);color:var(--t1)}
#composer #model-open{background:transparent;border-color:transparent;box-shadow:none;color:var(--t2)}
#composer #model-open:hover,#composer #model-open[aria-expanded=true]{background:var(--s2);color:var(--t1)}
#composer .model-chip-logo{width:18px;height:18px}
#composer #tools-open,#composer #voice-record,#composer #send-button,#composer #voice-mode{justify-self:center;align-self:center}
#composer #model-open{align-self:center}
#messages .reply-actions{gap:4px;margin-top:12px}
#messages .reply-action{color:var(--t2);border-radius:8px}
#messages .reply-action:hover,#messages .reply-action:focus-visible{color:var(--t1);background:var(--s2)}
#messages .message.user{border-radius:22px;line-height:1.6}
#messages .message.assistant .message-body{font-size:16px;line-height:1.8}
@media(min-width:761px){
 :root{--sidebar-w:clamp(248px,18vw,272px);--chat-width:820px}
 .sidebar{padding:16px 10px 12px}
 .sidebar .side-row,.sidebar .tabs .tab{min-height:38px;padding:8px 12px;gap:10px}
 .sidebar .conversation-open{min-height:36px}
 .topbar{min-height:56px;padding:8px 28px}
 .chat-main{padding-inline:clamp(24px,4vw,64px);padding-bottom:20px}
 #panel-chat.is-empty .chat-main{padding-top:clamp(96px,26dvh,280px)}
 #panel-chat.is-empty .message-list{padding-bottom:28px}
 #composer,#panel-chat.is-empty #composer{grid-template-columns:36px minmax(0,1fr) 36px 36px;gap:6px 8px;padding:12px}
 #composer textarea,#panel-chat.is-empty #composer textarea{min-height:40px;padding:4px 8px;font-size:16px}
 #composer .round-button,#composer .send-button,#panel-chat.is-empty #composer .round-button,#panel-chat.is-empty #composer .send-button{width:36px;height:36px;min-width:36px;padding:8px}
 #composer #model-open{min-height:36px;padding:5px 10px;gap:6px;margin-left:2px}
 #messages .message.user{max-width:min(78%,600px);padding:11px 17px}
 #messages .reply-action{width:36px;height:36px;padding:9px;border-radius:10px}
}
@media(max-width:760px){
 #messages .welcome-regular h2{font-size:27px}
 #messages .welcome-regular .welcome-mark{width:30px;height:30px}
 .chat-main #composer,#panel-chat.is-empty .chat-main #composer{border-radius:24px}
}
@media(max-height:520px) and (max-width:760px){#messages .welcome-regular h2{font-size:22px}#messages .welcome-regular .welcome-mark{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){#composer{transition:none}}

/* Keep the desktop composer at the same height in normal and private chat. */
@media(min-width:761px){
 html[data-private="true"] #panel-chat.is-empty .message-list{position:relative;height:68px;padding-bottom:28px}
 html[data-private="true"] #panel-chat.is-empty .message-list>.empty-state{position:absolute;left:0;right:0;bottom:56px}
}

/* Model selection follows the same restrained surfaces and control scale as chat. */
#model-sheet{background:var(--orlon-bg);border:1px solid var(--orlon-edge);box-shadow:0 24px 80px #0005}
#model-sheet .sheet-bar{min-height:62px;padding:14px 20px;border-bottom:1px solid var(--line);gap:12px}
#model-sheet .sheet-bar h2{font:500 17px/1.4 var(--sans);letter-spacing:-.015em}
#model-sheet .sheet-close{width:40px;height:40px;min-width:40px;border-radius:10px;color:var(--t2)}
#model-sheet .sheet-close:hover{color:var(--t1);background:var(--s2)}
#model-sheet .model-search{position:relative;display:block;min-width:0}
#model-sheet .model-search>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--t3);pointer-events:none}
#model-sheet .model-search input{height:44px;min-height:44px;padding:10px 38px;border-radius:12px;border:1px solid var(--line-strong);background:var(--orlon-bg);font:400 14px/1.5 var(--sans);box-shadow:none}
#model-sheet .model-search input:focus-visible{outline:none!important;border-color:var(--t2)}
#model-sheet .model-filter{gap:4px;flex-wrap:wrap;background:transparent;border:0;box-shadow:none}
#model-sheet .model-chip-filter{border-radius:9px;font-weight:500;color:var(--t2);box-shadow:none}
#model-sheet .model-chip-filter[aria-pressed=true]{color:var(--t1);background:var(--s2);border-color:var(--line-strong)}
#model-sheet .model-choice{border-radius:12px;gap:4px}
#model-sheet .model-choice:has(.m-item.on){background:var(--s2)}
#model-sheet .m-item-text{min-width:0}
#model-sheet .m-item-text strong{font-size:14px;line-height:1.4;font-weight:500}
#model-sheet .m-item-text small{font-size:12px;line-height:1.5;color:var(--t2);margin-top:4px}
#model-sheet .model-favorite{border-radius:9px;flex:none;color:var(--t3)}
#model-sheet .model-favorite:hover,#model-sheet .model-favorite[aria-pressed=true]{color:var(--t1);background:var(--s2)}
#model-sheet .m-empty{margin:0;padding:32px 16px;text-align:center;font-size:14px;line-height:1.6;color:var(--t2)}
#model-sheet .model-private-note{padding:0;margin-bottom:24px;border:0;border-radius:0;background:transparent;font-size:12px;line-height:1.6;color:var(--t2)}
#model-sheet .model-setting{gap:8px;font-size:12px}
@media(min-width:761px){
 #model-sheet.is-desktop{width:min(860px,calc(100vw - 64px))}
 #model-sheet.is-desktop:has(.model-private-note){height:min(480px,calc(100dvh - 64px))}
 #model-sheet .model-desktop{grid-template-columns:190px minmax(0,1fr)}
 #model-sheet .model-navigation{padding:22px 18px;border-right:1px solid var(--line)}
 #model-sheet .model-settings{gap:20px}
 #model-sheet .model-browser .model-bar{padding:18px;gap:12px}
 #model-sheet .model-results{padding:0 12px 18px}
 #model-sheet .model-choice>.m-item{min-height:68px;padding:12px}
 #model-sheet .model-results>.m-item{padding:12px;min-height:64px;margin-bottom:8px}
 #model-sheet .model-chip-filter{min-height:34px;padding:6px 13px}
}
@media(max-width:760px){
 #model-sheet .sheet-bar{padding:10px 4px;min-height:54px}
 #model-sheet .model-choice>.m-item{min-height:68px;padding:12px 8px}
 #model-sheet .model-favorite{width:44px;height:44px;min-width:44px;margin-right:0}
 #model-sheet .model-chip-filter{min-height:40px}
}
/* The bundled Meta mark has extra transparent padding on its left edge. */
.m-logo img[src$="/meta.webp"]{object-fit:contain;transform:translateX(-9%)}

/* Settings: the close button at control size with its ring only for the keyboard; on small screens the tabs scroll and fade at the edge. */
#settings-close{width:36px;height:36px;min-width:36px;padding:0;border:1px solid var(--line-strong);border-radius:10px;font-size:20px;line-height:1;background:transparent;color:var(--t2)}
#settings-close:hover{background:var(--s3);color:var(--t1)}
#settings-close:focus:not(:focus-visible){outline:none;box-shadow:none}
@media(max-width:760px){.desktop-settings .settings-layout>nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 85%,transparent)}.desktop-settings .settings-layout>nav button{flex:none}}
#settings-close:focus-visible{outline:2px solid var(--line-strong);outline-offset:2px;box-shadow:none}

/* Settings rows match the app: an icon tile, the name with one short line under it, then the control. */
.srow-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--s3);color:var(--t1);box-shadow:inset 0 0 0 1px var(--line-strong)}
.srow-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.srow-ic.danger{color:var(--danger,#e5675f);background:color-mix(in srgb,var(--danger,#e5675f) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger,#e5675f) 22%,transparent)}
.sgroup>:is(.srow,.settings-action):has(>.srow-ic){display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:64px}
.sgroup>:is(.srow,.settings-action):has(>.srow-ic)>:is(.srow-text,div:not(.osel)){flex:1 1 auto;min-width:0}
.sgroup>:is(.srow,.settings-action):has(>.srow-ic)>:is(select,input,.osel,.button,svg:last-child){flex:none;margin-left:auto}
.sgroup>.srow:has(>.srow-ic)>.osel{width:150px}
.sgroup>.srow:has(>.srow-ic)>.osel .osel-button{width:100%}
@media(max-width:760px){
  .sgroup>.srow:has(>.srow-ic)>.osel{width:112px}
  .sgroup>.srow:has(>.srow-ic)>.osel .osel-button{min-width:0;width:100%}
  .sgroup>.settings-action:has(>.srow-ic){flex-wrap:nowrap;gap:12px}
  .sgroup>.settings-action:has(>.srow-ic)>.button{height:32px;padding:0 12px}
}
.sgroup>.settings-action+.settings-action{border-top:1px solid var(--line)}
.settings-action strong{font-size:14.5px;font-weight:500;color:var(--t1)}
[data-settings-panel="data"] > h3{display:none}
.is-page [data-settings-panel="data"] > .settings-section-head p{display:none}
.desktop-settings .settings-content > [data-settings-panel="data"]{order:3}
.desktop-settings .settings-content > [data-settings-panel="about"]{order:4}
.desktop-settings .settings-content > [data-settings-panel="account"]{order:5}
.desktop-settings .settings-content > [data-settings-panel="usage"]{order:6}
/* Today's free model: the rendered planet with the orbit drawn over it, both filling the same box. */
.featured-orbit>:is(img,svg){position:absolute;inset:0;width:100%;height:100%}
.featured-orbit>img{object-fit:contain;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.featured-orbit{width:240px;height:160px;top:-22px;right:-30px}
@media(max-width:760px){.featured-orbit{width:200px;height:133px;right:-34px}}

/* Empty chat on a computer: one pill-shaped line while the text fits (see composer-shape.js). */
@media(min-width:900px){
  #panel-chat.is-empty #composer.one-line{grid-template-columns:36px minmax(0,1fr) auto 36px 36px;grid-template-rows:auto;align-items:center;gap:8px;padding:10px 12px;border-radius:32px;min-height:60px}
  #panel-chat.is-empty #composer.one-line #tools-open{grid-area:1/1}
  #panel-chat.is-empty #composer.one-line #message-input{grid-area:1/2;min-height:36px;height:36px;padding:7px 4px;overflow:hidden;resize:none}
  #panel-chat.is-empty #composer.one-line #model-open{grid-area:1/3}
  #panel-chat.is-empty #composer.one-line #voice-record{grid-area:1/4}
  #panel-chat.is-empty #composer.one-line :is(#voice-mode,#send-button){grid-area:1/5}
  #panel-chat.is-empty #composer.one-line #composer-wave{grid-area:1/1/auto/-1}
  #panel-chat.is-empty #composer.one-line #composer-hint{display:none}
}
/* Phones: the model sheet opens tall, and today's free model is a compact card, so the model list stays in view. */
@media(max-width:760px){
  #model-sheet:not(.is-desktop),#model-sheet:not(.is-desktop)[open]{max-height:min(90dvh,780px);height:min(90dvh,780px)}
  #model-sheet .m-featured{gap:8px;padding:12px 14px;margin-bottom:10px;border-radius:16px}
  #model-sheet .m-featured-main{gap:12px}
  .model-results .m-featured .m-featured-main .m-logo{width:40px;height:40px;min-width:40px;border-radius:12px}
  #model-sheet .m-featured-text strong{font-size:17px}
  #model-sheet .m-featured-text span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #model-sheet .m-featured-foot{padding-top:8px;font-size:12.5px}
  #model-sheet .featured-orbit{width:150px;height:100px;top:-14px;right:-26px}
}

/* Voice, the same as the app: a full black screen, the wave in the middle, a status pill, and round Mic and End buttons. */
#voice-panel{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));border:0;border-radius:0;background:#000;color:var(--t1);text-align:center;box-shadow:none}
#voice-panel[open]{display:flex;flex-direction:column;align-items:center}
#voice-panel::backdrop{background:#000}
#voice-panel .vp-top{align-self:stretch;display:flex;justify-content:flex-start;padding:4px 4px 0}
#voice-panel .vp-chip{padding:4px 10px;border:1px solid var(--line-strong);border-radius:999px;font:500 13px/1.4 var(--sans);color:var(--t2)}
#voice-panel .vp-stage{flex:1;display:grid;place-items:center;width:100%}
#voice-panel .voice-wave{width:auto;height:120px;gap:10px}
#voice-panel .voice-wave i{width:14px;background:var(--t2)}
#voice-panel .vp-status{min-height:0;margin:0 0 28px;padding:8px 18px;border:1px solid var(--line-strong);border-radius:999px;color:var(--t2);font-size:14px;max-width:min(420px,100%)}
#voice-panel .vp-status:empty{visibility:hidden}
#voice-panel .vp-controls{display:flex;gap:40px;justify-content:center}
#voice-panel .vp-control{display:grid;justify-items:center;gap:8px;min-width:72px}
#voice-panel .vp-control small{font:500 13px/1.3 var(--sans);color:var(--t2)}
#voice-panel .vp-button{position:static;display:grid;place-items:center;width:64px;height:64px;min-width:64px;margin:0;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:#000;color:var(--t1);transform:none;cursor:pointer;transition:border-color .15s,background-color .15s}
#voice-panel .vp-button:hover{background:#0e0e0e;border-color:var(--t3)}
#voice-panel .vp-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#voice-panel .vp-end{border-color:#3a3a3a}
#voice-panel[data-state="listening"] #voice-talk{background:var(--t1);color:#000;border-color:var(--t1)}
body[data-theme="light"] #voice-panel,body[data-theme="light"] #voice-panel::backdrop{background:#fff}
body[data-theme="light"] #voice-panel .vp-button{background:#fff}

/* Signed out: a small note under the voice (or dictation) button instead of a voice screen that can't work. */
.voice-gate{position:fixed;z-index:60;width:min(300px,calc(100vw - 16px));padding:16px;border:1px solid var(--line-strong);border-radius:16px;background:#000;color:var(--t1);text-align:left;box-shadow:0 16px 44px #000c;animation:voice-gate-in .18s cubic-bezier(.2,.7,.2,1)}
.voice-gate[hidden]{display:none}
@keyframes voice-gate-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.voice-gate[data-side="above"]{animation-name:voice-gate-up}
@keyframes voice-gate-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.voice-gate strong{display:block;font:500 15px/1.35 var(--sans)}
.voice-gate p{margin:4px 0 14px;font-size:13px;line-height:1.5;color:var(--t2)}
.voice-gate-actions{display:flex;gap:8px}
.voice-gate-actions button{flex:1;min-height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--t1);font:500 13.5px/1 var(--sans);cursor:pointer}
.voice-gate-actions button.solid{background:var(--t1);color:var(--bg);border-color:var(--t1)}
.voice-gate-actions button:hover{border-color:var(--t3)}
body[data-theme="light"] .voice-gate{background:#fff;box-shadow:0 12px 32px #0002}
@media(prefers-reduced-motion:reduce){.voice-gate{animation:none}}

/* Settings polish: dropdown values stay on one line and aren't selectable text; icon tiles are black with a hairline (AMOLED). */
.sgroup>.srow:has(>.srow-ic)>.osel{width:auto;min-width:150px}
.sgroup>.srow:has(>.srow-ic)>.osel .osel-button{width:auto;min-width:150px;white-space:nowrap;gap:14px}
.osel-button{-webkit-user-select:none;user-select:none}
.srow-ic{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* Every Settings card shares one width; the instructions card reads like the app's (a header row, then the box). */
.desktop-settings:not(.is-page) [data-settings-panel] > :is(.sgroup,.shint,.settings-action){max-width:600px}
.sgroup-text{padding:0 0 16px}
.sgroup-text .sinstr-head{cursor:default}
.sgroup-text .sinstr-head:hover{background:transparent}
.sgroup-text textarea{display:block;width:calc(100% - 36px);margin:0 18px;min-height:96px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--field);color:var(--t1);font:400 14px/1.5 var(--sans);resize:vertical}
#account-signedout[hidden]{display:none}
[data-settings-panel="account"] > .settings-section-head p{display:none}

/* Upgrade, quietly: a small chip by your name in the sidebar (Free plan), and a button inside a limit message. */
.sidebar-upgrade{flex:none;align-self:center;min-height:28px;padding:0 10px;margin-left:-4px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--t1);font:500 12px/1 var(--sans);cursor:pointer;transition:border-color .15s,background-color .15s}
.sidebar-upgrade:hover{border-color:var(--t3);background:var(--s3)}
.sidebar-upgrade[hidden]{display:none}
.toast .toast-action{margin-left:12px;min-height:30px;padding:0 12px;border:0;border-radius:999px;background:var(--t1);color:var(--bg);font:500 13px/1 var(--sans);cursor:pointer}
/* On phones the composer and its menus own the bottom edge, so notices sit below the top bar. */
@media(max-width:760px){.toast{top:calc(env(safe-area-inset-top,0px) + 68px);bottom:auto}}
#account-plan-group[hidden]{display:none}
.profile-bar:has(.sidebar-upgrade:not([hidden])){gap:6px}.profile-bar:has(.sidebar-upgrade:not([hidden])) .profile-row{flex:1 1 auto;min-width:0;gap:8px}
.profile-bar:has(.sidebar-upgrade:not([hidden])) #profile-sub{display:none}   /* the chip already says you are on Free */

/* Sidebar icons: one set, one size, one stroke (the ChatGPT-style rounded line icons). */
:is(.side-row,.tabs .tab,.sidebar-head .icon-button)>svg:not(.more-chev){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
#private-chat-row svg circle{fill:currentColor;stroke:none}
.side-row.rail-only{display:none}
@media(min-width:761px){.app-shell.collapsed .side-row.rail-only{display:flex}}

/* Intelligent UI: interactive pieces inside replies (intelligent-ui.js). Monochrome, hairlines, one accent: the text colour. */
.oui{margin:14px 0}

.oui-card{margin:0;padding:16px 18px;border:1px solid var(--line-strong);border-radius:16px;background:var(--bg)}
.oui-title{margin:0 0 12px;font:500 14px/1.4 var(--sans);color:var(--t1)}
.oui-bars{display:grid;gap:8px}
.oui-bar-row{display:grid;grid-template-columns:minmax(64px,28%) 1fr auto;align-items:center;gap:10px;font-size:13px}
.oui-bar-label{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oui-bar-track{height:10px;border-radius:999px;background:var(--s3);overflow:hidden}
.oui-bar{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--t1);transform-origin:left;animation:oui-grow .5s cubic-bezier(.2,.7,.2,1)}
@keyframes oui-grow{from{transform:scaleX(0)}to{transform:none}}
.oui-bar-row:hover .oui-bar{background:var(--t2)}
.oui-bar-value{font-variant-numeric:tabular-nums;color:var(--t1)}
.oui-line{display:block;width:100%;height:auto}
.oui-grid{stroke:var(--line);stroke-width:1}
.oui-path{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.oui-path-0{stroke:var(--t1);fill:var(--t1)}.oui-path-1{stroke:var(--t3);fill:var(--t3);stroke-dasharray:5 4}
polyline.oui-path-0,polyline.oui-path-1{fill:none}
.oui-dot{stroke:var(--bg);stroke-width:2;cursor:default}
.oui-dot:hover{r:6}
.oui-axis{fill:var(--t3);font:400 11px var(--sans)}
.oui-key{display:flex;gap:14px;margin-top:8px;font-size:12px;color:var(--t2)}
.oui-key-item{display:inline-flex;align-items:center;gap:6px;stroke:none;fill:none}
.oui-key-item i{width:14px;height:2px;border-radius:2px;background:var(--t1)}
.oui-key-item.oui-path-1 i{background:var(--t3)}
.oui-range{margin:6px 0 0;font-size:12px;color:var(--t3)}
.oui-step-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.oui-step label{display:flex;gap:12px;align-items:flex-start;padding:10px 8px;border-radius:10px;cursor:pointer}
.oui-step label:hover{background:var(--s3)}
.oui-step input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--t1)}
.oui-step-text{display:grid;gap:2px}
.oui-step-text strong{font-weight:500;font-size:14px}
.oui-step-text span{font-size:13px;color:var(--t2)}
.oui-step.is-checked strong{color:var(--t3);text-decoration:line-through}
.oui-progress{margin:10px 8px 0;font-size:12px;color:var(--t3)}
.oui-steps.is-done .oui-progress{color:var(--t1)}
.oui-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.oui-option{position:relative;padding:14px;border:1px solid var(--line);border-radius:12px}
.oui-option.is-pick{border-color:var(--t2)}
.oui-option h4{margin:0 0 4px;font:500 15px/1.3 var(--sans)}
.oui-pick{display:inline-block;margin-bottom:6px;padding:2px 8px;border:1px solid var(--line-strong);border-radius:999px;font-size:11px;color:var(--t1)}
.oui-summary{margin:0 0 8px;font-size:13px;color:var(--t2)}
.oui-pros,.oui-cons{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.oui-pros li::before{content:"+";display:inline-block;width:16px;color:var(--t1)}
.oui-cons li::before{content:"–";display:inline-block;width:16px;color:var(--t3)}
.oui-events{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--line-strong);display:grid;gap:14px}
.oui-event{position:relative;display:grid;gap:2px}
.oui-event::before{content:"";position:absolute;left:-23px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--t1);box-shadow:0 0 0 3px var(--bg)}
.oui-when{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.oui-event strong{font-weight:500;font-size:14px}
.oui-detail{font-size:13px;color:var(--t2)}
.oui-question{margin:0 0 10px;font-size:15px}
.oui-quiz-options{display:grid;gap:8px}
.oui-quiz-option{min-height:42px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--t1);text-align:left;font:400 14px/1.4 var(--sans);cursor:pointer}
.oui-quiz-option:not(:disabled):hover{background:var(--s3)}
.oui-quiz-option.is-right{border-color:var(--ok,#4caf7a);color:var(--t1)}
.oui-quiz-option.is-wrong{border-color:var(--danger,#e5675f);color:var(--t2)}
.oui-quiz-option:disabled{cursor:default}
.oui-quiz-result{margin:10px 0 0;font-size:13px;color:var(--t2)}
@media(prefers-reduced-motion:reduce){.oui-bar{animation:none}}
.oui-axis{font-weight:400;font-size:12px}
.oui-dot{stroke-dasharray:none}
.oui-card :is(ul,ol){margin-left:0;padding-left:0}
.oui-card :is(ul,ol)>li{margin:0;padding-left:0}
.oui-card .oui-events{padding-left:18px}
.oui-quiz-option:disabled{opacity:1}
.oui-quiz-option.is-right{border-color:var(--t1);background:var(--s3);font-weight:500}
.oui-quiz-option.is-right::after{content:"  ✓"}
.oui-quiz-option.is-wrong{opacity:.55}
.oui-quiz-options:has(:disabled) .oui-quiz-option:not(.is-right):not(.is-wrong){opacity:.55}
.oui-line .oui-axis{stroke:none}

/* Interactive apps in replies: a header with Preview / Code, Copy and Full screen; the app runs in a sandboxed frame. */
.oapp{margin:14px 0}
.oapp-cut{display:flex;align-items:center;gap:10px;padding:16px;border:1px dashed var(--line-strong);border-radius:16px;color:var(--t3);font-size:13px}
.oapp-card{padding:0;overflow:hidden}
.oapp-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line)}
.oapp-head .oui-title{margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oapp-tabs{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:10px}
.oapp-tab,.oapp-act{min-height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);font:500 12.5px/1 var(--sans);cursor:pointer}
.oapp-tab.is-on{background:var(--s3);color:var(--t1)}
.oapp-act{border:1px solid var(--line)}
.oapp-act:hover,.oapp-tab:hover{color:var(--t1)}
.oapp-actions{display:flex;gap:6px}
.oapp-stage{background:#000}
.oapp-stage:fullscreen{display:grid}
.oapp-stage:fullscreen .oapp-frame{height:100%!important}
.oapp-frame{display:block;width:100%;height:clamp(360px,56vh,520px);border:0;background:#000}
@media(max-width:600px){.oapp-frame{height:420px}}
.oapp-code{margin:0;max-height:420px;overflow:auto;border-radius:0;border:0}
@media(max-width:600px){.oapp-actions .oapp-act:last-child{display:none}.oapp-head{flex-wrap:wrap}}

.oapp-code{white-space:pre-wrap;word-break:break-word;border:0!important;margin:0!important}

/* Orlons: consistent controls and clear card focus. */
.orlons-bar{margin:18px 0 14px}
.orlons-tabs button{min-height:40px}
.orlons-create{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--t1);cursor:pointer}
.orlons-create:hover,.orlons-create:focus-visible{background:var(--s2)}
.orlons-create svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.orlons-search{margin-bottom:16px}
.orlons-list .orlon-card{border-radius:14px}
.orlons-list .orlon-card:focus-visible,.orlons-create:focus-visible{outline:2px solid var(--t2);outline-offset:2px}

/* Small interaction and text refinements across the main views. */
:is(.project-card,.project-chat,.gallery-open,.gallery-heart,.orlons-tabs button,.settings-navigation button):focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.orlons-tabs button:hover:not([aria-selected="true"]){color:var(--t1);background:var(--s2)}
.project-card-body strong,.project-chat-body strong,.orlons-list .orlon-card strong{overflow-wrap:anywhere}
.gallery-open .gallery-title{overflow-wrap:anywhere}
.message.assistant .message-body{overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.project-card-arrow,.gallery-open .gallery-picture img{transition:none}}

/* Keep responses readable and controls clear without changing the chat layout. */
.message.assistant .message-body :is(h1,h2,h3){line-height:1.35;text-wrap:balance}
.message.assistant .message-body :is(h1,h2,h3):first-child{margin-top:0}
.message.assistant .message-body :is(ul,ol){margin-block:12px}
.message.assistant .message-body pre,.message.assistant .message-body .table-wrap{margin-block:16px}
.message.assistant .message-body a:focus-visible{outline:2px solid var(--t2);outline-offset:3px;border-radius:2px}
#composer :is(#tools-open,#model-open,#voice-record,#voice-mode,#send-button):focus-visible{outline:2px solid var(--t2);outline-offset:2px}

/* Keep the voice glyph centered when compact composer padding changes. */
#panel-chat #composer #voice-mode{padding:0;place-items:center}

/* The greeting stands on its own in regular chat. */
#messages .welcome-regular h2{max-width:100%}

/* Bright neutron star and its two sweeping beams. */
.thinking-pulsar{position:relative;display:inline-block;flex:none;width:28px;height:28px;color:var(--t1);vertical-align:middle}
.thinking-pulsar::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,currentColor 42%,currentColor 58%,transparent);clip-path:polygon(48% 0,52% 0,57% 42%,57% 58%,52% 100%,48% 100%,43% 58%,43% 42%);opacity:.8;transform:rotate(-18deg);animation:pulsar-sweep .18s linear infinite}
.thinking-pulsar::after{content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 10%,var(--t2) 100%);box-shadow:0 0 8px color-mix(in srgb,currentColor 55%,transparent)}
@keyframes pulsar-sweep{from{transform:rotate(-18deg)}to{transform:rotate(162deg)}}
@media(prefers-reduced-motion:reduce){.thinking-pulsar::before{animation:none}}

/* Frequently used models in the composer. */
.model-quick{position:absolute;z-index:12;left:12px;bottom:calc(100% + 8px);width:min(260px,calc(100vw - 40px));padding:6px;background:var(--s1);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 12px 36px #0008}
.model-quick[hidden]{display:none}
.model-quick-label{padding:8px 10px;color:var(--t3);font:500 12px var(--sans)}
.model-quick-item,.model-quick-more{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--t1);text-align:left;font:500 14px var(--sans);cursor:pointer}
.model-quick-item:hover,.model-quick-more:hover,.model-quick-item:focus-visible,.model-quick-more:focus-visible{background:var(--s2)}
.model-quick-item .m-logo{width:24px;height:24px;flex:none}.model-quick-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.model-quick-item>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}.model-quick-more{justify-content:space-between;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--t2)}
.model-quick-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:900px){#panel-chat.is-empty .model-quick{top:calc(100% + 8px);bottom:auto}}
#model-open .chev-down{transform:rotate(0);transition:transform .16s ease}
#model-open[aria-expanded="true"] .chev-down{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){#model-open .chev-down{transition:none}}
/* Let the model menu enter and leave gently without moving the composer. */
.model-quick{opacity:1;transform:translateY(0);transition:opacity .16s ease,transform .16s ease,display .16s allow-discrete}
.model-quick[hidden]{opacity:0;transform:translateY(-4px)}
@starting-style{.model-quick:not([hidden]){opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.model-quick{transition:none}}

/* Consistent keyboard feedback in the workspace. */
:where(.sidebar button,.orlons-tabs button,.model-quick button,.gallery-tabs button,.settings-navigation button):focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.model-quick-item:focus-visible,.model-quick-more:focus-visible{outline-offset:-2px}

#main-content:focus{outline:none}

/* Quiet, consistent feedback on primary chat controls. */
#composer :is(#tools-open,#model-open,#voice-record){transition:background-color .16s ease,color .16s ease,border-color .16s ease}
#messages .reply-action{transition:background-color .16s ease,color .16s ease}
.sidebar :is(.side-row,.tabs .tab){transition:background-color .16s ease,color .16s ease}
.tools-menu:not([hidden]){animation:orlon-menu-enter .16s ease-out both}
@keyframes orlon-menu-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#composer :is(#tools-open,#model-open,#voice-record),#messages .reply-action,.sidebar :is(.side-row,.tabs .tab){transition:none}.tools-menu:not([hidden]){animation:none}}

/* Compact, legible sources that stay attached to the answer. */
.chat-sources summary{min-height:40px;display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;transition:background-color .16s ease,border-color .16s ease}
.chat-sources summary:hover{background:var(--s2);border-color:var(--line-strong)}
.chat-sources summary:focus-visible,.source-card:focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.source-card{align-items:flex-start;min-height:68px;transition:background-color .16s ease,border-color .16s ease}
.source-number{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:7px;line-height:1}
.source-text strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;overflow-wrap:anywhere}
.source-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.chat-sources summary,.source-card{transition:none}}
/* Your own messages sit in a soft raised bubble; on true black the old --s2 fill made it vanish */
body:not([data-theme="light"]) #messages .message.user{background:#181818}
/* Projects and Orlons share one column and one top edge, so switching pages doesn't shift the header */
.projects-space,.orlons-space{max-width:864px;padding:40px 32px 72px}
#panel-gallery .gallery-space{padding-top:40px}
@media(max-width:760px){.projects-space,.orlons-space{padding:24px 20px 48px}#panel-gallery .gallery-space{padding-top:24px}}
/* Code blocks: a header with the language and Copy, the code scrolls on its own, quiet syntax colours */
.message-body pre{position:relative;overflow:hidden;padding:0;background:var(--code-bg,#0a0a0a);border:1px solid var(--line);border-radius:14px}
.message-body pre .code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:36px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);font:500 12px/1 var(--sans);color:var(--t3);user-select:none}
.message-body pre .code-lang{text-transform:lowercase;letter-spacing:.01em}
.message-body pre .copy-code{position:static;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);font:500 12px/1 var(--sans);cursor:pointer;transition:background-color .15s,color .15s}
.message-body pre .copy-code::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat}
.message-body pre .copy-code:hover{background:var(--hover-2);color:var(--t1)}
.message-body pre code{display:block;overflow-x:auto;padding:14px 16px 16px;font-size:13.5px;line-height:1.65;tab-size:4;background:transparent;border:0}
.message-body .reading-text .code-head,.reading-text .code-head{display:none}
body:not([data-theme="light"]){--code-bg:#0a0a0a}
body[data-theme="light"]{--code-bg:#f7f7f8}
.tk-k{color:#ff7b72}.tk-s{color:#a5d6ff}.tk-c{color:#7d8590}.tk-n{color:#79c0ff}.tk-f{color:#d2a8ff}
body[data-theme="light"] .tk-k{color:#cf222e}body[data-theme="light"] .tk-s{color:#0a3069}body[data-theme="light"] .tk-c{color:#6e7781}body[data-theme="light"] .tk-n{color:#0550ae}body[data-theme="light"] .tk-f{color:#8250df}
/* Settings: separate groups breathe; Usage reads like every other page (one group, no repeated headings) */
.settings-content .sgroup + .sgroup{margin-top:12px}
[data-settings-panel="usage"] > .settings-section-head p,[data-settings-panel="usage"] > h3:first-of-type{display:none}
[data-settings-panel="usage"] > h3{text-transform:none;letter-spacing:0;font:500 13px/1.2 var(--sans);color:var(--t2);margin:28px 2px 10px}
#usage-body .usage-plan{margin:0 2px 10px;font:500 15px/1.4 var(--sans);letter-spacing:0;color:var(--t1)}
#usage-body .usage-plan .settings-link{font:500 13px/1 var(--sans);color:var(--t2)}
#usage-body > .usage-card{margin:0;padding:16px 18px;background:var(--s1,#000);border:1px solid var(--line);border-top-width:0;border-radius:0}
#usage-body > .usage-plan + .usage-card{border-top-width:1px;border-radius:14px 14px 0 0}
#usage-body > .usage-card:last-child{border-radius:0 0 14px 14px}
#usage-body .usage-line strong{font:500 14px/1.4 var(--sans)}
#usage-body .usage-meter{height:4px;margin:10px 0 8px}
#usage-body .usage-reset{margin:0;font-size:12px;color:var(--t3)}
#usage-body .usage-count{font:500 14px/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--t1)}
/* Interactive apps: a clear ring when the app has the keyboard, and a quiet bar when its code breaks */
.oapp-stage{position:relative}
.oapp-stage:focus-within::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line-strong,#3a3a3a);pointer-events:none}
.oapp-error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:6px 6px 6px 16px;border:1px solid var(--line-strong,#2c2c2c);border-radius:999px;background:rgba(10,10,10,.92);backdrop-filter:blur(8px);color:var(--t1);font-size:13px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.oapp-error[hidden]{display:none}
.oapp-fix{height:30px;padding:0 14px;border:0;border-radius:999px;background:var(--t1);color:var(--bg,#000);font:500 13px/1 var(--sans);cursor:pointer}
.oapp-fix:hover{opacity:.9}
/* Intelligent UI: recipe, choices, calculator, key figures */
.oui-subhead{margin:16px 0 6px;font:500 13px/1.3 var(--sans);color:var(--t2)}
.oui-recipe-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 10px}
.oui-recipe-meta{margin:0;font-size:13px;color:var(--t2)}
.oui-stepper{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-strong);border-radius:999px}
.oui-stepper button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--t1);font:400 18px/1 var(--sans);cursor:pointer}
.oui-stepper button:hover:not(:disabled){background:var(--hover-2)}
.oui-stepper button:disabled{color:var(--t3);cursor:default}
.oui-stepper output{min-width:92px;text-align:center;font:500 13px/1 var(--sans);font-variant-numeric:tabular-nums}
.oui-ingredients{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 20px}
.oui-ingredients li{display:flex;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px}
.oui-qty{flex:none;min-width:64px;font-weight:500;font-variant-numeric:tabular-nums}
.oui-question{margin:0 0 12px;font-size:15px;line-height:1.5}
.oui-choice-row{display:flex;flex-wrap:wrap;gap:8px}
.oui-choice{min-height:36px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--t1);font:400 14px/1.3 var(--sans);text-align:left;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.oui-choice:hover:not(:disabled){background:var(--hover-2);border-color:var(--t3)}
.oui-choice.is-on{background:var(--t1);border-color:var(--t1);color:var(--bg)}
.oui-choice:disabled:not(.is-on){opacity:.45;cursor:default}
.oui-choice-send{margin-top:12px;height:34px;padding:0 18px;border:0;border-radius:999px;background:var(--t1);color:var(--bg);font:500 13px/1 var(--sans);cursor:pointer}
.oui-choice-send:disabled{opacity:.35;cursor:default}
.oui-calc-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px}
.oui-calc-field{display:grid;gap:6px}
.oui-calc-label{font-size:12px;color:var(--t2)}
.oui-calc-box{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--field,#000)}
.oui-calc-box:focus-within{border-color:var(--t2)}
.oui-calc-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--t1);font:500 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.oui-calc-affix{color:var(--t3);font-size:13px}
.oui-calc-slider{width:100%;accent-color:var(--t1)}
.oui-calc-results,.oui-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}
.oui-calc-out,.oui-stat{display:grid;gap:4px;padding:14px 16px;background:var(--bg)}
.oui-calc-out strong,.oui-stat strong{font:500 22px/1.2 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.oui-stats-grid{margin-top:0}
.oui-stat-detail{font-size:12px;color:var(--t3)}
.oui-calc-box input::-webkit-outer-spin-button,.oui-calc-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.oui-calc-box input[type=number]{-moz-appearance:textfield;appearance:textfield}
.oui-calc-out,.oui-stat{align-content:start}
/* A picture being made: its label and a Stop button share one row above the preview */
.image-job-head{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:min(100%,420px);margin-bottom:10px}
.image-job-head .image-job-status{margin:0}
.image-job-stop{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border:1px solid var(--line-strong,#2c2c2c);border-radius:999px;background:transparent;color:var(--t1);font:500 13px/1 var(--sans);cursor:pointer;transition:background-color .15s}
.image-job-stop::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.image-job-stop:hover{background:var(--hover-2,#161616)}

/* Building an app: a compact strip with bricks stacking into a little wall, the app's name and a live line count.
   The node is kept across streaming redraws, so the motion never restarts. */
.oapp-building{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:10px 16px 10px 12px;border:1px solid var(--line-strong);border-radius:14px;background:var(--bg)}
.oapp-bricks{position:relative;flex:none;width:30px;height:22px}
.oapp-bricks i{position:absolute;width:13px;height:6px;border-radius:2px;background:var(--t1);opacity:0;animation:brick-drop 2.4s cubic-bezier(.3,.7,.3,1) infinite}
.oapp-bricks i:nth-child(1){left:1px;bottom:0;animation-delay:0s}
.oapp-bricks i:nth-child(2){left:16px;bottom:0;animation-delay:.18s}
.oapp-bricks i:nth-child(3){left:8px;bottom:8px;animation-delay:.36s}
.oapp-bricks i:nth-child(4){left:1px;bottom:16px;width:6px;animation-delay:.54s}
.oapp-bricks i:nth-child(5){left:9px;bottom:16px;width:13px;animation-delay:.72s}
.oapp-bricks i:nth-child(6){left:24px;bottom:16px;width:6px;animation-delay:.9s}
.oapp-build-title{font:500 14px/1.3 var(--sans);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oapp-build-count{flex:none;font:500 12px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--t3)}
@keyframes brick-drop{0%{opacity:0;transform:translateY(-10px)}10%{opacity:1;transform:translateY(0)}78%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
/* Drawing a chart or other piece: three soft bars rising, kept steady across redraws */
.oui-building{display:flex;align-items:flex-end;gap:6px;height:72px;padding:14px 16px;border:1px solid var(--line-strong);border-radius:16px}
.oui-build-label{margin-right:auto;align-self:center;font:500 13px/1 var(--sans);color:var(--t3)}
.oui-building i{width:10px;border-radius:3px 3px 0 0;background:var(--line-strong);animation:build-bar 1.4s ease-in-out infinite}
.oui-building i:nth-of-type(2){animation-delay:.2s}.oui-building i:nth-of-type(3){animation-delay:.4s}
@keyframes build-bar{0%,100%{height:12px}50%{height:40px}}
@media(prefers-reduced-motion:reduce){.oapp-bricks i,.oui-building i{animation:none}.oapp-bricks i{opacity:1}.oui-building i{height:24px}}
/* The typing dot belongs to text, not to an app or chart that is being built */
.message.assistant.streaming .message-body > :is(.oapp,.oui,pre,table,.table-wrap):last-child::after{content:none}
/* Full screen without the browser's API: the app card fills the window */
.oapp-card.is-full{position:fixed;inset:0;z-index:2000;margin:0;border-radius:0;display:flex;flex-direction:column;background:var(--bg,#000)}
.oapp-card.is-full .oapp-stage{flex:1;min-height:0}
.oapp-card.is-full .oapp-frame{height:100%}
html.oapp-filling{overflow:hidden}
/* Signed out on a phone: one clear Log in pill at the top right of the chat (Sign up is a tap away inside it) */
@media(max-width:760px){
  #auth-buttons:not([hidden]){display:flex!important;margin-left:auto}
  #auth-buttons #signup-open{display:none}
  #auth-buttons #login-open{height:38px;padding:0 18px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--bg,#000);background:var(--t1);border:1px solid var(--t1)}
}

/* Stable card rhythm and feedback shared across workspaces. */
.orlons-list .orlon-card{min-height:128px;align-items:flex-start;padding:18px;gap:14px}
.orlons-list .orlon-logo{flex:none;margin-top:2px}
.orlon-card-text{gap:6px}
.orlon-card-text strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.5;color:var(--t1)}
.orlon-card-text span{line-height:1.5}
.orlon-card-text small{line-height:1.4;color:var(--t2)}
:is(.button,.primary-pill,.pill-button,.outline-pill,.orlons-create):disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
:is(.button,.primary-pill,.pill-button,.outline-pill,.orlons-create):disabled:hover{filter:none;border-color:var(--line-strong)}
@media(max-width:760px){
 .orlons-tabs button,.orlons-create{min-height:44px}
 .orlons-create{width:44px;height:44px}
 .settings-content .osel-trigger{min-height:44px}
}

/* Sidebar: consistent navigation weight, quiet hierarchy and aligned utilities. */
.sidebar :is(.side-row,.tabs .tab){font-weight:500;line-height:20px;border:0}
.app-shell:not(.collapsed) .sidebar .more-group .tab{padding-left:20px}
.app-shell:not(.collapsed) .sidebar #more-toggle[hidden]+.more-group .tab{padding-left:12px}
.sidebar .more-chev{margin-left:auto;flex:none;width:16px;height:16px}
.sidebar .profile-bar{align-items:center}
.sidebar #profile-settings{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:10px;border-radius:10px}
.sidebar #profile-settings svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sidebar .profile-row .who{min-width:0}
.sidebar .profile-row .who :is(strong,small){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.sidebar #profile-settings{flex-basis:44px;width:44px;height:44px}}

/* Sources remain secondary until requested, then read as a tidy list. */
.chat-sources summary{list-style:none;gap:10px;min-height:40px;color:var(--t2)}
.chat-sources summary::-webkit-details-marker{display:none}
.chat-sources summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate 160ms ease,translate 160ms ease}
.chat-sources[open] summary::after{rotate:225deg;translate:0 2px}
.chat-sources .source-list{grid-template-columns:minmax(0,1fr);gap:0;max-width:640px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chat-sources .source-card{align-items:center;border:0;border-radius:0;min-height:64px}
.chat-sources .source-card+.source-card{border-top:1px solid var(--line)}
.chat-sources .source-card::after{content:"↗";flex:none;margin-left:auto;color:var(--t3)}
.chat-sources .source-number{border:0;background:var(--s2)}
.chat-sources .source-card:focus-visible{outline-offset:-3px}
.chat-sources[open] .source-list{animation:content-enter 180ms ease-out}
@media(max-width:760px){.chat-sources summary{min-height:44px}}
@media(prefers-reduced-motion:reduce){.chat-sources summary::after{transition:none}.chat-sources[open] .source-list{animation:none}}

/* Two-option filters share one quiet moving selection, rather than competing buttons. */
#panel-orlons .orlons-tabs,#panel-gallery .gallery-head>.pills{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:200px;max-width:100%;gap:0;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
#panel-orlons .orlons-tabs::before,#panel-gallery .gallery-head>.pills::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/2);border-radius:8px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);transition:translate 200ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
#panel-orlons .orlons-tabs:has(>button:last-child[aria-selected="true"])::before,#panel-gallery .gallery-head>.pills:has(>button:last-child[aria-pressed="true"])::before{translate:100% 0}
#panel-orlons .orlons-tabs>button,#panel-gallery .gallery-head>.pills>button{position:relative;z-index:1;min-height:36px;height:auto;padding:6px 10px;border:0;background:transparent;box-shadow:none;color:var(--t2);white-space:nowrap}
#panel-orlons .orlons-tabs>button[aria-selected="true"],#panel-gallery .gallery-head>.pills>button[aria-pressed="true"]{color:var(--t1);background:transparent}
#panel-orlons .orlons-search:focus{border-color:var(--t2);box-shadow:inset 0 0 0 1px var(--line-strong)}
@media(hover:hover) and (pointer:fine){.gallery-person:hover .gallery-author{text-decoration:underline;text-underline-offset:3px}}
@media(max-width:760px){#panel-orlons .orlons-tabs>button,#panel-gallery .gallery-head>.pills>button{min-height:44px}}
@media(prefers-reduced-motion:reduce){#panel-orlons .orlons-tabs::before,#panel-gallery .gallery-head>.pills::before{transition:none}}

.gallery-avatar { overflow: hidden; }
.gallery-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Give active conversations a calm shared rail and clear navigation hierarchy. */
@media(min-width:761px){#panel-chat:not(.is-empty) .message-list{padding-top:40px;scroll-padding-top:40px}}
.sidebar #new-chat{font-weight:600;color:var(--t1)}
.sidebar .conversation-group{color:var(--t2);font-size:12px;letter-spacing:.01em}
.sidebar .profile-row .who strong{color:var(--t1);font-weight:600}

.streak-summary{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.streak-summary strong{display:block;color:var(--t1);font:500 15px/1.5 var(--sans)}
.streak-summary p{margin:4px 0 0;color:var(--t2);font:400 13px/1.6 var(--sans)}

.message-body li.task-item{list-style:none}
.message-body .task-item label{display:flex;align-items:flex-start;gap:10px;margin-left:-20px;cursor:pointer}
.message-body .task-item input[type=checkbox]{flex:none;width:18px;height:18px;min-height:18px;margin:5px 0 0;padding:0;accent-color:var(--t1);cursor:pointer}
.message-body .task-item input:checked+span{color:var(--t2);text-decoration:line-through;text-decoration-color:var(--t3)}

/* Small proportion adjustments around the home composer. */
#messages .welcome-regular h2{font-weight:450;font-size:28px}
#composer #message-input::placeholder{color:var(--t2);opacity:1}
#composer #model-open .chev-down{margin-left:4px}
#composer #voice-mode svg{width:18px;height:18px}
@media(min-width:761px){#composer #voice-mode,#panel-chat.is-empty #composer #voice-mode{width:32px;height:32px;min-width:32px;padding:7px}}
@media(max-width:760px){#messages .welcome-regular h2{font-size:26px}}
@media(max-height:520px) and (max-width:760px){#messages .welcome-regular h2{font-size:22px}}


/* Compact model details, matching the segmented reference layout. */
.model-hover-card{position:fixed;z-index:1000;width:284px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--s1);color:var(--t1);box-shadow:0 12px 32px #0007;font:400 14px/1.45 var(--sans)}
.model-hover-heading strong{font-size:16px;font-weight:600}.model-hover-maker{display:flex;align-items:center;gap:7px;margin:5px 0 16px;color:var(--t2)}.model-hover-maker .m-logo{width:16px;height:16px;flex:none}.model-hover-card p{margin:0 0 22px;color:var(--t2);overflow-wrap:anywhere}
.model-hover-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.model-hover-metric{min-width:0}.model-hover-metric-head{display:flex;justify-content:space-between;gap:4px;color:var(--t2);font:500 10px/1.3 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.045em}.model-hover-metric-head strong{font-weight:400;color:var(--t3)}
.model-hover-meter{height:14px;overflow:hidden;border-radius:4px;background:var(--s3);margin-top:5px;position:relative}.model-hover-meter i{display:block;height:100%;background:#48ac70;border-radius:4px}.model-hover-meter::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 4px),var(--s1) calc(10% - 4px),var(--s1) 10%);pointer-events:none}
.model-hover-label{display:block;margin:26px 0 10px;color:var(--t2);font:500 10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.045em}.model-hover-reasoning{margin-bottom:7px;color:var(--t2)}.model-hover-efforts{display:flex;gap:4px}.model-hover-efforts button{flex:1;min-height:32px;padding:5px 8px;border:0;border-radius:8px;background:var(--s2);color:var(--t2);font:inherit;cursor:pointer}.model-hover-efforts button[aria-pressed=true]{color:var(--on-ink);background:var(--on)}.model-hover-efforts button:focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.model-hover-account{display:flex;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--t3)}
@media(prefers-reduced-motion:reduce){.model-hover-card{animation:none}}

.model-hover-estimate-note{display:block;margin-top:10px;color:var(--t3);font-size:10px;line-height:1.4}

/* Source identities use fixed-size favicons, with initials if a site has no icon. */
.chat-sources summary{padding:6px 12px 6px 8px;border-radius:999px;gap:8px;font-size:13px;color:var(--t2)}
.source-icons{display:flex;align-items:center;padding-right:2px}
.source-icon{position:relative;display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--s2);color:var(--t2);font:500 11px/1 var(--sans);overflow:hidden;border:2px solid var(--bg)}
.source-icons .source-icon+.source-icon{margin-left:-8px}
.source-icon img{position:absolute;inset:2px;width:16px;height:16px;object-fit:contain;background:var(--s2)}
.chat-sources .source-card>.source-icon{width:28px;height:28px}
.chat-sources .source-card>.source-icon img{inset:4px}

.source-icon img[hidden]{display:none}

.quote-selection{position:fixed;z-index:60;min-height:36px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--s2);color:var(--t1);font:500 13px/1.4 var(--sans);box-shadow:0 4px 16px #0005;cursor:pointer}
.quote-selection:hover{background:var(--hover)}
.quote-selection:focus-visible{outline:2px solid var(--t2);outline-offset:2px}
.quote-selection[hidden]{display:none}

/* Sources and reply actions share one stable footer slot on pointer devices. */
.reply-footer{display:grid;margin-top:10px;min-height:40px}
.reply-footer>.chat-sources,.reply-footer>.reply-actions{grid-area:1/1;margin-top:0;align-self:start}
@media(hover:hover) and (pointer:fine){
 .message.assistant .reply-footer>.reply-actions{opacity:0;visibility:hidden;pointer-events:none}
 .message.assistant:is(:hover,:focus-within) .reply-footer:not(:has(.chat-sources[open]))>.reply-actions{opacity:1;visibility:visible;pointer-events:auto}
 .message.assistant:is(:hover,:focus-within) .reply-footer>.chat-sources:not([open]){opacity:0;pointer-events:none}
 .reply-footer>.chat-sources{transition:opacity 140ms ease}
 .reply-footer>.chat-sources:focus-within{opacity:1!important;pointer-events:auto!important}
 .reply-footer:has(.chat-sources:focus-within)>.reply-actions{opacity:0!important;visibility:hidden!important}
}
@media(hover:none),(pointer:coarse){
 .reply-footer>.reply-actions{grid-area:2/1;margin-top:6px;opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.reply-footer>.chat-sources{transition:none}}

/* Actual ASCII art, fitted to the reading column without wrapping its rows. */
#messages .welcome-regular{container-type:inline-size;width:100%;min-width:0}
#messages .welcome-regular .welcome-greeting{width:100%;max-width:100%;line-height:1;text-align:center}
#messages .welcome-regular .welcome-greeting::before{content:none}
#messages .welcome-regular .ascii-greeting{margin:0;padding:0;border:0;background:none;color:var(--t1);font-family:var(--mono);font-size:min(clamp(3.2px,.365vw,4.667px),calc(100cqw / var(--ascii-cols) / .61));font-weight:600;font-style:normal;line-height:1.2;letter-spacing:0;white-space:pre;overflow:visible;text-align:center}
@media(max-width:760px){#messages .welcome-regular .ascii-greeting{font-size:min(3.2px,calc(100cqw / var(--ascii-cols) / .61))}}

body:not([data-theme=light]) #messages .welcome-regular .ascii-greeting{color:#fff}