/* Shared geometry, based on the home screen. Loaded after page styles. */
:root{--ui-pill:999px;--ui-card:18px;--ui-dialog:24px;--screen:#131316;--surface:#232327;--surface-2:#2B2B30;--text:#F5F5F7;--text-2:#A9A9AE;--blue:#2FA7E9}
.chip,.sort-btn,.compare-btn,.mini-search,.input-pill,.model-link,.use-btn,.profile-all-link,.full-catalog-link,.skill-chip,.profile-service-links a{border-radius:var(--ui-pill)}
.model-row,.spec-tile,.stat-tile,.settings-list,.home-page .card{border-radius:var(--ui-card)}
.studio-page{background:var(--screen);color:var(--text)}
.studio-page button,.studio-page .upload,.studio-page select,.studio-page input:not([type=checkbox]),.studio-page .badge,.studio-page .discovery-input{border-radius:var(--ui-pill)}
.studio-page button,.studio-page .upload{border-color:transparent;background:var(--surface)}
.studio-page .primary{background:var(--blue);color:white;border-color:transparent}
.studio-page .selected{background:rgba(47,167,233,.16)!important;color:#5FBDF2!important;border-color:transparent}
.studio-page .card,.studio-page .panel,.studio-page .model-card,.studio-page textarea,.studio-page .empty,.studio-page #catalogFilterDetails{border-radius:var(--ui-card);background:var(--surface);border-color:transparent}
.studio-page dialog{border-radius:var(--ui-dialog)}
.studio-page .model-star{background:transparent}
.studio-page .model-card-actions button{min-height:40px}
.studio-page input:not([type=checkbox]),.studio-page select,.studio-page textarea{background:var(--surface-2)}
.studio-page .discovery-input input{border:0;background:transparent}
/* Size the welcome copy against its own available width, not the viewport. */
.home-page .hero{grid-template-columns:minmax(0,30%) minmax(0,1fr);column-gap:clamp(10px,2.5vw,24px);justify-items:stretch}
.home-page .hero-copy{width:100%;max-width:none;container-type:inline-size;justify-self:stretch}
@supports(font-size:1cqi){
 .home-page .hero-title{font-size:clamp(20px,11.3cqi,92px);line-height:1.12;text-wrap:initial;letter-spacing:-.03em}
 .home-page .hero-subtitle{font-size:clamp(13px,7cqi,40px);line-height:1.35}
 .home-page .hero-model-count{font-size:clamp(12px,6cqi,32px);min-height:1.35em}
 .home-page .hero-catalog-link{font-size:clamp(13px,6.6cqi,32px)}
}
@media(max-height:620px){.home-page .hero-title{font-size:clamp(20px,11cqi,32px)}.home-page .hero-subtitle{font-size:13px}.home-page .hero-model-count{font-size:12px}.home-page .hero-catalog-link{font-size:13px}}

/* Desktop uses a readable workspace instead of scaling the phone layout. */
@media(min-width:900px){
 .phone{max-width:960px;width:calc(100% - 48px)}
 .screen>.header{padding:18px 24px 12px}
 .screen>.content{scrollbar-width:thin}
 .home-page .phone{max-width:1120px;width:calc(100% - 48px)}
 .home-page{--home-gutter:24px;--home-gap:20px}
 .home-page .content{display:block;padding-bottom:20px}
 .home-page .hero{grid-template-columns:200px minmax(0,1fr);gap:32px;min-height:0;padding:20px 24px 24px}
 .home-page .hero-title{font-size:42px;line-height:1.15}
 .home-page .hero-subtitle{font-size:20px}
 .home-page .hero-model-count{font-size:16px;min-height:2.7em}
 .home-page .hero-catalog-link{font-size:17px;min-height:36px}
 .home-page .chips-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;gap:8px;overflow:visible}
 .home-page .chip{width:100%;height:auto;min-height:42px;padding:10px 12px;white-space:normal;text-align:left;line-height:1.35}
 .home-page .cards-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;grid-auto-flow:row;grid-auto-columns:auto;gap:12px;overflow:visible}
 .home-page .card{min-height:132px;padding:14px;gap:6px}
 .home-page .card-text{font-size:15px;min-height:0}
 .home-page .card-count{margin-top:auto}
 .home-page .input-area{position:static;padding:12px 24px 16px;border-top:1px solid #ffffff0a}
 .home-page .block-title{font-size:20px}
 .chat-log{padding:24px 32px;scrollbar-width:thin}
 .chat-log::-webkit-scrollbar{display:block;width:6px}
 .chat-log::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:9px}
 .profile-page .phone{max-width:840px}
 .profile-page .profile-service-links{grid-template-columns:1fr 1fr}
 .profile-page .wallet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .studio-page .brainy-intro.intro{grid-template-columns:minmax(0,1fr) 150px;max-width:780px;min-height:110px;align-items:stretch}
 .studio-page .brainy-intro.intro h1{font-size:32px}
 .studio-page .brainy-intro.intro p{font-size:16px;max-width:560px}
 .studio-page .discovery-input{background:var(--surface);border:1px solid #ffffff18;padding:6px}
}
@media(min-width:900px) and (max-height:840px){
 .home-page{--home-gap:12px}
 .home-page .hero{grid-template-columns:150px minmax(0,1fr);padding:8px 24px 16px;gap:24px}
 .home-page .hero-title{font-size:32px;margin-bottom:4px}
 .home-page .hero-subtitle{font-size:16px}
 .home-page .hero-model-count{font-size:14px;margin-top:4px}
 .home-page .hero-catalog-link{font-size:14px;min-height:32px;padding:4px 0}
 .home-page .block-title{font-size:18px;margin-bottom:8px}
 .home-page .chip{min-height:36px;padding:8px 12px;font-size:13px}
 .home-page .card{min-height:108px;padding:10px 12px;gap:4px}
 .home-page .card-top{min-height:28px}
 .home-page .card-icon-wrap{width:28px;height:28px;flex-basis:28px}
 .home-page .card-icon-wrap svg{width:22px;height:22px}
 .home-page .card-text{font-size:13px}
 .home-page .input-area{padding-top:8px;padding-bottom:10px}
}

/* Chat keyboard: keep the layout width stable and fit the visible viewport.
   iOS focuses controls smaller than 16px by automatically zooming the page. */
.chat-page{overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.chat-page input,.chat-page textarea,.chat-page select{font-size:16px}
.chat-page #chatInput{font-size:19px}
.chat-page .phone,.chat-page .generation-shell{
 position:fixed;top:var(--chat-visible-top,0px);left:0;right:0;
 height:var(--chat-visible-height,100dvh);min-height:0;margin:0 auto;
}
.chat-page .generation-shell{width:100%;overflow:hidden}
.chat-page .screen{height:100%;min-height:0}
.chat-page .chat-log,.chat-page #timeline{min-height:0;overflow-y:auto}
.chat-page .input-area,.chat-page .composer-area{
 min-width:0;max-height:65%;overflow-y:auto;overscroll-behavior:contain;
}
.chat-page #fields{max-height:min(32dvh,200px)}
.chat-page #prompt{max-height:min(25dvh,160px)}

/* Compact chat navigation and contextual actions. */
[hidden]{display:none!important}
.history-search{flex:0 0 44px;min-height:44px;width:100%;margin-bottom:12px;padding:0 14px;border:0;border-radius:16px;background:var(--surface,#242428);color:inherit;font:inherit;font-size:16px}
.sheet-body{min-height:0;justify-content:flex-start}.sheet-new-chat{flex-shrink:0}
.chat-more,.chat-history-toggle{font-size:24px;flex:none;min-width:44px;min-height:44px;border:0;border-radius:16px;color:inherit;background:transparent}

.compact-answer-actions{display:flex;gap:8px;margin-top:6px}.compact-answer-actions button,.quiet-action{background:transparent;border:0;color:var(--text-2,#aaaab4);padding:8px 10px;min-height:44px;font:inherit;cursor:pointer}
.chat-action-dialog{box-sizing:border-box;margin:auto;width:min(440px,calc(100% - 24px));max-height:85dvh;overflow:auto;border:1px solid #38383f;border-radius:24px;background:#202024;color:#f4f4f6;padding:20px;font:16px/1.5 system-ui,sans-serif}
.chat-action-dialog::backdrop{background:#0009}.chat-action-dialog h2{font-size:20px;margin:0 0 16px}.chat-action-dialog button{min-height:44px;border:0;border-radius:16px;padding:10px 14px;background:#303036;color:inherit;cursor:pointer}.chat-action-body>div,.chat-action-body .answer-actions,.chat-action-body .chat-tools{display:flex;gap:8px;flex-wrap:wrap;padding:0}.dialog-close{float:right;margin-bottom:12px}.chat-action-body{clear:both}.settings-fields{display:grid;gap:14px;margin-bottom:16px}.chat-page #fields{padding:0;max-height:none;overflow:visible}.chat-page #fields:has(>dialog:only-child){display:contents}.chat-page #parameters{display:grid;gap:6px}.chat-page #settings{justify-self:start}.chat-page #settingsSummary{font-size:12px;overflow-wrap:anywhere}.chat-page .result-file>strong{font-size:12px;font-weight:400;color:#aaaab4;display:block;margin-top:6px}.chat-page .assistant-message>small{display:inline-block;margin-right:8px;font-size:12px}.chat-page #refresh{font-size:12px}
.chat-history-panel{position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(300px,88vw);padding:16px;box-sizing:border-box;display:none;flex-direction:column;gap:12px;background:#1b1b1e;color:#f4f4f6;border-right:1px solid #303036;font:14px/1.5 system-ui,sans-serif}.chat-history-panel.is-open{display:flex}.chat-history-head{display:flex;align-items:center;justify-content:space-between;flex:none}.chat-history-head button{font-size:24px;min-width:44px;min-height:44px;background:transparent;border:0;color:inherit}.chat-history-panel a{color:inherit;text-decoration:none}.chat-history-new{display:block;padding:12px;border-radius:16px;background:#303036}.chat-history-panel input{flex:none;box-sizing:border-box;width:100%;height:44px;border:1px solid #38383f;border-radius:14px;padding:10px;background:#242428;color:inherit;font:16px system-ui}.chat-history-list{min-height:0;overflow:auto;flex:1}.chat-history-list h3{font-size:12px;color:#aaaab4;margin:16px 8px 6px}.chat-history-row{display:block;padding:12px;border-radius:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-history-row:hover,.chat-history-row[aria-current]{background:#303036}.chat-history-shade{position:fixed;inset:0;z-index:39;background:#0008;border:0;width:100%;height:100%}
@media(min-width:1100px){.chat-history-panel{display:flex;width:280px}.chat-history-head button,.chat-history-toggle,.chat-history-shade{display:none}.chat-page .phone,.chat-page .generation-shell{left:280px;width:calc(100% - 312px);max-width:960px}}



.chat-action-dialog #newChatBtn,.chat-action-dialog #newChat{width:auto;height:auto;min-height:44px;display:inline-flex;align-items:center;padding:10px 14px;background:#303036;border-radius:16px;font:inherit}

.history-group{font-size:12px;color:#aaaab4;margin:12px 6px 4px}.sheet .sheet-new-chat{margin:0 0 12px;min-height:44px}

/* Dialogs stay centered in the visible viewport, including above a keyboard. */
.chat-page dialog.chat-action-dialog,.chat-page dialog#confirmation,.chat-page dialog#chatCostDialog{
 position:fixed;left:0;right:0;top:var(--chat-visible-top,0px);
 bottom:max(0px,calc(100dvh - var(--chat-visible-height,100dvh) - var(--chat-visible-top,0px)));
 margin:auto;box-sizing:border-box;width:min(440px,calc(100% - 32px));height:fit-content;
 max-height:calc(var(--chat-visible-height,100dvh) - 32px);overflow-y:auto;
 border:1px solid #38383f;border-radius:24px;padding:20px;
 background:#202024;color:#f4f4f6;overscroll-behavior:contain;
}
.chat-page dialog#confirmation::backdrop,.chat-page dialog#chatCostDialog::backdrop{background:#0009}
.chat-page .chat-home-link{display:inline-flex!important;align-items:center;justify-content:center;width:40px;min-width:40px;height:44px;flex:none;color:inherit;border-radius:14px}
.chat-page .chat-home-link svg{width:23px;height:23px;display:block}
.chat-page .chat-header,.chat-page .generation-header{gap:6px}
.chat-page .chat-model,.chat-page .model-title{min-width:0;flex:1}
@media(max-width:360px){.chat-page .chat-header,.chat-page .generation-header{padding-left:8px;padding-right:8px;gap:2px}.chat-page .chat-model-avatar{width:32px;height:32px;flex-basis:32px}.chat-page .chat-model-name{font-size:15px}}

/* Mobile feedback: loading is visible, not just a disabled control. */
.chat-page #estimate[aria-busy=true] svg{visibility:hidden}
.chat-page #estimate[aria-busy=true]::after{content:"";position:absolute;width:18px;height:18px;border:2px solid #06263655;border-top-color:#062636;border-radius:50%;animation:composer-spin .8s linear infinite}
@keyframes composer-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.chat-page #estimate[aria-busy=true]::after{animation:none}}
.chat-history-list[aria-busy=true]{opacity:.65}
.chat-history-panel{top:var(--chat-visible-top,0px);bottom:auto;height:var(--chat-visible-height,100dvh);padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.chat-page .chat-header .chat-model-sub,.chat-page .generation-header .model-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.chat-page .chat-model-info{min-width:0}

.chat-page .input-pill{border-radius:26px}
.chat-page .input-pill.is-multiline{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:0;padding:6px 8px}
.chat-page .input-pill.is-multiline textarea{grid-row:1;grid-column:1/-1;width:100%;padding:8px;min-height:44px}
.chat-page .input-pill.is-multiline .attach-btn{grid-row:2;grid-column:1}.chat-page .input-pill.is-multiline .send-btn{grid-row:2;grid-column:3}

/* The same history categories on the home sheet and both chat layouts. */
.history-kind-filter{display:flex;gap:4px;flex-shrink:0;padding:4px;background:#ffffff08;border-radius:16px}
.history-kind-filter button{flex:1;min-width:0;min-height:44px;padding:7px 5px;border:0;border-radius:12px;background:transparent;color:var(--text-2,#b8b8c0);font:500 12px/1.3 system-ui;cursor:pointer}
.history-kind-filter button[aria-pressed=true]{background:#ffffff16;color:var(--text,#fff)}
#historySheet .history-kind-filter{margin:0 20px 10px}
.chat-history-row span,.chat-history-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-history-row small{font-size:11px;color:#a8a8b2;margin-top:3px}
.history-filter-reset{min-height:44px;padding:8px 12px;border:1px solid #ffffff20;border-radius:14px;background:transparent;color:inherit;font:inherit}
.history-kind-filter button:focus-visible,.history-filter-reset:focus-visible{outline:2px solid #5fbdf2;outline-offset:2px}

.connection-status{flex:0 0 auto;padding:8px 12px;border-radius:12px;background:#34302a;color:#f1d8ad;font-size:13px;line-height:1.4;overflow-wrap:anywhere;grid-column:1/-1}

/* Shared touch, focus and motion baseline. Content can wrap at larger text sizes. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #70c8ff;outline-offset:3px}
:where(input,textarea,select){scroll-margin-block:24px}
:where(dialog){overflow-wrap:anywhere}
:where(dialog) :where(button,a,summary){min-height:44px}
.composer-count{display:block;text-align:right;color:#b9b9c2;font-size:12px;line-height:1.4;margin:0 4px}
.chat-page .chat-price{color:#b6b6bf}
.chat-page .input-area :where(p,button){overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Keep submit reachable while required media fields scroll independently. */
.chat-page .generation-shell .composer-area{display:flex;flex-direction:column;min-height:0;max-height:75%;overflow:hidden;gap:4px}
.chat-page .generation-shell #composer{display:flex;flex-direction:column;min-height:0;overflow:hidden;gap:8px}
.chat-page .generation-shell #parameters{flex:1 1 auto;min-height:0;max-height:min(32dvh,260px);overflow:auto;overscroll-behavior:contain;padding:2px}
.chat-page .generation-shell .generation-input,.chat-page .generation-shell #draftStatus{flex-shrink:0}
.chat-page .generation-shell #notice{flex-shrink:1;max-height:84px;overflow:auto}
.chat-page .generation-shell #recover{flex-shrink:0}

/* Catalog geometry follows the home: quiet surfaces, clear headings, roomy targets.
   Scoped to discovery so profile and the keyboard-sensitive composers keep their layout. */
.studio-page{--ui-card:24px;--ui-dialog:24px;--surface:#222227;--surface-2:#29292f;--catalog-gutter:20px}
.studio-page>header,.studio-page>main{padding-inline:var(--catalog-gutter)}
.studio-page>header{border-bottom-color:#ffffff08;gap:16px}
.studio-page .brand{font-size:1rem;letter-spacing:-.015em;min-width:0}
.studio-page .brand span{font-size:.8125rem;margin-left:8px}
.studio-page #balance{min-height:44px;display:inline-flex;align-items:center;flex-shrink:0;font-size:.8125rem;color:#acd9f5}
.studio-page .brainy-intro.intro h1{letter-spacing:-.03em;line-height:1.15}
.studio-page .brainy-intro.intro p{color:var(--text-2);line-height:1.5}
.studio-page main>nav{padding:4px;background:#ffffff05;border-radius:20px;gap:4px}
.studio-page main>nav button{background:transparent;min-height:44px;border-radius:16px;line-height:1.35}
.studio-page main>nav .selected{background:#ffffff0e!important;color:var(--text)!important}
.studio-page .discovery-search{background:var(--screen)}
.studio-page .discovery-search>label{font-size:1rem;letter-spacing:-.015em}
.studio-page .discovery-input{padding:5px;border:1px solid #ffffff12;border-radius:24px;background:#29292f;gap:4px}
.studio-page .discovery-input:focus-within{border-color:#6ebce7}
.studio-page .discovery-input input{padding:10px 12px;min-height:44px;font-size:16px;line-height:1.5}
.studio-page .discovery-input button{border-radius:18px;min-height:44px}
.studio-page .primary{background:#b5e3ff;color:#172a36;font-weight:600}
.studio-page .model-card{border:1px solid #ffffff06;padding:18px}
.studio-page .model-card-top h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.35}
.studio-page .model-card .model-summary{font-size:.8125rem;line-height:1.5;color:#b4b4bd}
.studio-page .model-card-actions button{min-height:44px;border-radius:18px;white-space:normal;line-height:1.35}
.studio-page .model-card .model-evidence>summary{color:#acd9f5}
.studio-page #catalogFilterDetails{border:1px solid #ffffff06}
.studio-page #catalogFilterDetails select{border-radius:16px;min-width:0}
.studio-page :focus-visible{outline-color:#91d3fb}
@media(max-width:350px){
 .studio-page{--catalog-gutter:16px}
 .studio-page .model-card{padding:16px}
 .studio-page main>nav button{white-space:normal;min-width:0;font-size:.75rem;padding:8px 5px}
 .studio-page #catalogFilterDetails .catalog-filters{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:768px){.studio-page{--catalog-gutter:32px}}

/* Mobile discovery rails reach the screen edge, while labels keep their gutter. */
@media(max-width:767px){
 .studio-page #taskChips,.studio-page #recentModelList{box-sizing:border-box;width:calc(100% + 2 * var(--catalog-gutter));max-width:none;margin-inline:calc(-1 * var(--catalog-gutter));padding-inline:var(--catalog-gutter);scroll-padding-inline:var(--catalog-gutter);overscroll-behavior-x:contain}
}

/* Progressive model settings, shared by studio and generation chat. */
.generation-optional-fields{border:1px solid var(--line,#38383f);border-radius:16px;padding:12px;min-width:0}
.generation-optional-fields>summary{cursor:pointer;font-weight:600;min-height:32px;overflow-wrap:anywhere}
.generation-optional-fields[open]>summary{margin-bottom:12px}
.generation-optional-fields>label,.generation-optional-fields>fieldset{margin-top:12px}
.generation-field-hint{display:block;white-space:normal;overflow-wrap:anywhere;color:var(--tx2,#aaaab4)}