/* One final responsive layer shared by the portal, administration and public site.
   Fix intrinsic grid/flex sizing rather than clipping the entire document. */
#app,.app-shell,.content{min-width:0;max-width:100%}
.app-shell :is(.dashboard-page,.overview-cards,.usage-layout,.settings-columns,.settings-left,.settings-right,
 .instructions-columns,.instruction-main,.instruction-aside,.referral-body,.image-workspace,.grid,.stack)>*{min-width:0}
.app-shell :is(h1,h2,h3,h4,p,.notice,.key-name,.key-title,.profile-email){overflow-wrap:anywhere}
.app-shell :is(.row,.section-title,.copy-field,.invitation-copy,.channel-strip,.header-inner)>div{min-width:0}
.app-shell :is(.copy-field code,.domain-option code,.endpoint-item code){min-width:0;overflow-wrap:anywhere}
.app-shell :is(form,fieldset,pre,.code-window,.table-wrap,.filter-row,.option-buttons){min-width:0;max-width:100%}
.app-shell .table-wrap{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;isolation:isolate}
.app-shell .table-wrap table{max-width:none}
.app-shell pre,.glass-dialog pre{max-width:100%;overflow:auto;overscroll-behavior-x:contain}
.app-shell .header-actions{min-width:0}
.app-shell .dashboard-page{grid-template-columns:minmax(0,1fr)}
.app-shell .dashboard-greeting{min-width:0}
.app-shell :is(.key-row,.inset-card,.instruction-aside,.log-section,.invite-link){min-width:0}
.app-shell .provider-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.chat-history-toggle,.chat-history-close,.chat-history-backdrop{display:none}
.chat-select-menu{max-width:calc(100vw - 28px)}
.chat-select-menu button{min-width:0}
.chat-select-menu button>span{overflow-wrap:anywhere}
.chat-reasoning-control{position:relative}
.chat-reasoning-trigger{width:100%;min-width:0}
.chat-reasoning-trigger>span{display:none}
.chat-reasoning-trigger>strong{min-width:0;overflow-wrap:anywhere}
.chat-reasoning-popover{position:absolute;z-index:40;bottom:calc(100% + 12px);right:0;
 width:min(560px,calc(100vw - 32px));padding:18px;border:1px solid #ffc69f45;border-radius:18px;
 background:#211a29;box-shadow:0 16px 45px #0006}
.chat-reasoning-popover[hidden]{display:none}
.chat-reasoning-popover input[type=range]{height:44px;width:100%}
.chat-reasoning-popover .chat-reasoning-labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
 gap:8px;white-space:normal;overflow:visible;font-size:11px;line-height:1.4;color:#dbc4d0}
.chat-reasoning-labels span{overflow:visible;text-overflow:clip;text-align:center;overflow-wrap:anywhere}

@media(max-width:1100px){
  .app-shell .desktop-nav{display:none}
  .app-shell .mobile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .app-shell .mobile-links .header-link{justify-content:flex-start;white-space:normal;min-height:44px;padding:10px;font-size:13px}
  .app-shell .mobile-links .header-link>span{display:inline}
  .app-shell .header-inner{gap:12px}
  .app-shell .header-user-name{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media(max-width:900px){
  .app-shell .content:not(.chat-content){padding:24px 20px 104px}
  .app-shell .settings-columns,.app-shell .instructions-columns,.app-shell .referral-body,
  .app-shell .image-workspace,.app-shell .settings-layout{grid-template-columns:minmax(0,1fr)}
  .app-shell .instruction-aside{position:static;min-width:0}
  .app-shell .usage-layout{grid-template-columns:minmax(0,1fr);align-items:start}
  .app-shell .overview-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell .overview-cards>.main-key{grid-column:1/-1}
  .app-shell .header-menu{width:min(370px,calc(100vw - 24px));right:12px;top:calc(100% - 1px);
    max-height:calc(100dvh - 86px);overflow:auto;overscroll-behavior:contain;border-radius:18px;padding:12px}
  .app-shell .header-menu .menu-links a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;overflow-wrap:anywhere}
  .app-shell .site-header{height:64px}
  .app-shell .header-inner{height:63px}
  .app-shell .header-actions>.icon-button{width:44px;height:44px;min-height:44px;padding:11px}
  .app-shell .wordmark{min-width:0;gap:7px;font-size:16px}
  .app-shell .brand-mark{flex:none}
  .app-shell .wordmark-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .app-shell :is(.page-head,.section-title){flex-wrap:wrap}
  .app-shell .page-head{align-items:flex-start}
  .app-shell .page-head h1{font-size:28px}
  .app-shell :is(button,.button,summary){min-height:44px}
  .app-shell :is(#copy-endpoints,#copy-guide,#copy-remove,#copy-main-key,#copy-invite,#docs-copy-key,#docs-copy-base){
    min-height:44px;
  }
  .app-shell .icon-button{min-width:44px;width:44px;height:44px;padding:11px}
  .app-shell input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),
  .app-shell select,.app-shell textarea,dialog.glass-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  dialog.glass-dialog select,dialog.glass-dialog textarea{font-size:16px;min-width:0;max-width:100%}
  .app-shell :is(input,select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){min-height:44px}
  .app-shell .option-buttons{display:flex;flex-wrap:wrap;gap:8px}
  .app-shell .option-buttons>button{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .app-shell .filter-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .app-shell .filter-row>input[type=search]{grid-column:1/-1}
  .app-shell .pagination{flex-wrap:wrap;gap:12px}
  .app-shell .pagination>small{width:100%;font-size:12px}
  .app-shell .settings-page>.page-head{padding:20px}
  .app-shell .referral-hero{grid-template-columns:minmax(0,1fr)}
  .app-shell .settings-right{grid-template-columns:minmax(0,1fr)}
  .app-shell .image-controls{padding:20px}
  .app-shell .image-empty{min-height:280px}
  .app-shell .image-canvas{min-height:320px}
  .app-shell .code-titlebar{flex-wrap:wrap;gap:8px;min-width:0}
  .app-shell .code-titlebar .code-filename{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .app-shell .guide-output,.app-shell .setup-wizard{min-width:0}
  .app-shell .guide-mode{max-width:none}
  .app-shell .guide-mode button{flex:1;min-width:0;font-size:13px}
  .app-shell .guide-actions{flex-wrap:wrap;gap:8px}
  .app-shell .guide-actions>button{flex:1}
  .app-shell .doc-toc{position:static;display:flex;flex-wrap:wrap;flex-direction:row;gap:8px}
  .app-shell .doc-toc a{flex:1 1 140px;min-width:0;min-height:44px;white-space:normal}
  .app-shell .reseller-docs .grid.two{grid-template-columns:minmax(0,1fr)}
  .app-shell .domain-option{flex-wrap:wrap}
  .app-shell .endpoint-panel .copy-field{width:100%}

  /* Keep the whole conversation and composer in the visual viewport, including a software keyboard. */
  .app-shell .chat-content{height:var(--chat-available-height,calc(100dvh - 64px));min-height:0}
  .app-shell .chat-layout,.app-shell .chat-layout.expanded{position:relative;height:100%;min-height:0;grid-template-columns:minmax(0,1fr)}
  .app-shell .chat-main{min-height:0;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .app-shell .chat-toolbar{height:auto;min-height:62px;padding:8px 12px;gap:8px;align-items:center}
  .app-shell .chat-history-toggle{display:inline-flex;min-width:44px;min-height:44px;flex:none;padding:10px}
  .app-shell .chat-history-close{display:inline-flex;min-width:44px;min-height:44px;flex:none;padding:10px}
  .app-shell #chat-model-select{flex:1;min-width:0}
  .app-shell .chat-select>summary{min-width:0;max-width:none;min-height:44px;font-size:14px;
    overflow-wrap:anywhere;line-height:1.4;white-space:normal}
  .app-shell .chat-select-menu{width:calc(100vw - 28px);max-width:420px;min-width:0;
    left:-52px;max-height:min(420px,60dvh);padding:8px}
  .app-shell .chat-select-menu button{min-height:56px;font-size:14px;grid-template-columns:24px minmax(0,1fr);padding:10px;gap:5px 10px}
  .app-shell .chat-select-menu button small{font-size:11px;line-height:1.4}
  .app-shell #expand-chat{display:none}
  .app-shell .chat-messages,.app-shell .chat-messages.empty-chat{flex:1;min-height:0;padding:18px 14px;overscroll-behavior:contain}
  .app-shell .chat-welcome{padding:0;min-height:120px;align-items:center;flex-direction:column;text-align:center}
  .app-shell .chat-welcome h1{font-size:26px}
  .app-shell .chat-welcome p{font-size:13px}
  .app-shell .chat-composer{flex:none;width:calc(100% - 24px);max-width:100%;margin:0 12px;padding:10px;border-radius:18px}
  .app-shell .composer-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:6px;align-items:center}
  .app-shell .composer-row>textarea{grid-column:1/-1;grid-row:1;width:100%;padding:8px 4px;min-height:54px;max-height:128px;font-size:16px;line-height:1.5}
  .app-shell #attach-text{grid-column:1;grid-row:2}
  .app-shell #reasoning-control{grid-column:2;grid-row:2;order:initial;min-width:0;width:100%;padding:0;border:0;background:transparent;box-shadow:none}
  .app-shell #reasoning-control[hidden]{display:none}
  .app-shell .chat-reasoning-trigger{min-width:0;min-height:44px;padding:8px;gap:6px;font-size:12px}
  .app-shell #chat-mic{grid-column:3;grid-row:2}
  .app-shell #send-chat{grid-column:4;grid-row:2;width:44px;height:44px}
  .app-shell #chat-mic:disabled{display:inline-flex}
  .app-shell .chat-reasoning-popover{position:fixed;left:12px;right:12px;bottom:var(--reasoning-bottom,150px);width:auto;max-width:none;max-height:40dvh;overflow:auto;padding:14px}
  .app-shell .chat-reasoning-popover .chat-reasoning-labels{grid-template-columns:repeat(3,minmax(0,1fr));font-size:12px}
  .app-shell .composer-note{padding:8px 2px 0;font-size:11px;line-height:1.5}
  .app-shell #chat-error{flex:none;padding:6px 14px;font-size:12px;max-height:80px;overflow:auto}
  .app-shell #chat-error:empty{display:none}
  .app-shell .message{font-size:15px;margin-bottom:20px;max-width:100%}
  .app-shell .message.assistant>.message-bubble{padding:2px 0}
  .app-shell .message-meta{gap:6px 12px;font-size:11px}
  .app-shell .message-meta button{font-size:12px;min-height:40px}
  .app-shell .chat-code-block{min-width:0;max-width:100%}
  .app-shell .chat-code-block header{flex-wrap:wrap;padding:10px;gap:10px}
  .app-shell .chat-code-block pre{font-size:13px;line-height:1.6}
  .app-shell .chat-code-actions{flex-wrap:wrap}
  .app-shell .chat-code-actions button{min-height:40px;font-size:12px}
  .app-shell .chat-attachment-dock{min-width:0;max-width:100%}
  .app-shell .chat-attachment{max-width:100%;min-width:0}
  .app-shell .chat-attachment-remove{min-width:36px;min-height:36px;width:36px;height:36px;padding:9px}
  .app-shell .chat-layout .chat-history{display:none;position:absolute;inset:0 auto 0 0;width:min(330px,calc(100% - 36px));
    z-index:44;border-radius:0 18px 18px 0;padding:14px;gap:16px;box-shadow:14px 0 40px #0006}
  .app-shell .chat-layout.history-open .chat-history{display:flex}
  .app-shell .chat-layout.history-open .chat-history-backdrop{display:block;position:absolute;inset:0;z-index:43;
    border:0;border-radius:0;background:#090810a6;cursor:default}
  .app-shell .chat-history-head{gap:4px;flex-wrap:wrap}
  .app-shell .chat-history-head #new-chat{flex:1;min-width:0}
  .app-shell .chat-history :is(.small,small,.check){font-size:12px}
  .app-shell .conversation-item{min-height:44px;font-size:14px;white-space:normal;overflow-wrap:anywhere}
  .app-shell .chat-history .check{min-height:44px}
}

@media(max-width:600px){
  html{scroll-padding-top:78px}
  .app-shell .content:not(.chat-content){padding:20px 14px 100px}
  .app-shell .header-inner{padding:0 12px;gap:6px}
  .app-shell .header-actions{gap:0;flex:1;justify-content:flex-end}
  .app-shell .header-user-name{max-width:min(82px,17vw);font-size:11px;margin-left:auto;margin-right:3px}
  .app-shell .language-label{font-size:10px;padding:3px 5px;margin-right:2px}
  .app-shell .wordmark{font-size:15px;gap:6px;flex:0 1 auto}
  .app-shell .wordmark-text{letter-spacing:-.055em}
  .app-shell .brand-mark{width:26px;height:30px}
  .app-shell .brand-mark img{width:26px;height:30px}
  .app-shell .admin-label{display:none}
  .app-shell .panel{padding:18px;border-radius:18px}
  .app-shell .page-head{gap:12px;margin-bottom:18px}
  .app-shell .page-head h1{font-size:26px}
  .app-shell .page-head p{font-size:14px;line-height:1.6}
  .app-shell .dashboard-page{gap:14px}
  .app-shell .dashboard-greeting{padding-bottom:20px;margin-bottom:4px}
  .app-shell .dashboard-greeting h1{font-size:clamp(25px,7.4vw,32px);line-height:1.2;letter-spacing:-.035em}
  .app-shell .overview-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .app-shell .overview-cards>.panel{grid-column:auto;min-height:156px;padding:18px}
  .app-shell .balance-number,.app-shell .request-bottom>strong{font-size:clamp(32px,9vw,40px)!important;line-height:1.2;overflow-wrap:anywhere}
  .app-shell .balance-number{margin:18px 0}
  .app-shell .request-bottom{margin-top:16px}
  .app-shell .request-bottom>div{font-size:22px;flex-shrink:0}
  .app-shell .main-key .copy-field{margin-top:16px}
  .app-shell .invitation-strip{grid-template-columns:minmax(0,1fr);gap:18px}
  .app-shell .invitation-copy{gap:12px}
  .app-shell .invitation-copy p{font-size:14px}
  .app-shell .invite-link{width:100%}
  .app-shell .copy-field{min-height:52px;padding:8px 10px;gap:8px}
  .app-shell .copy-field code{font-size:12px;line-height:1.5;flex:1}
  .app-shell .channel-strip{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px}
  .app-shell .channel-strip>div{min-width:0}
  .app-shell .channel-strip>:last-child:is(button,a){grid-column:1/-1;width:100%}
  .app-shell .channel-strip h2{font-size:16px;line-height:1.4}
  .app-shell .chart-panel{padding:0}
  .app-shell .chart-panel>.section-title{padding:18px;align-items:flex-start;gap:16px}
  .app-shell .segmented{min-height:44px;padding:3px}
  .app-shell .segmented button{min-height:38px;padding:8px 13px;font-size:13px}
  .app-shell .interactive-chart{min-width:0;max-width:100%}
  .app-shell .model-families{grid-template-columns:minmax(0,1fr)}
  .app-shell .model-family-button{font-size:14px;min-height:52px;padding:12px;gap:10px}
  .app-shell :is(.grid.two,.grid.three,.grid.four){grid-template-columns:minmax(0,1fr);gap:14px}
  .app-shell .key-volume{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .app-shell .key-volume>div{padding:12px;min-width:0}
  .app-shell .key-volume strong{font-size:clamp(18px,5.5vw,24px);overflow-wrap:anywhere}
  .app-shell .key-row-top{flex-wrap:wrap;gap:10px}
  .app-shell .key-name{flex:1;min-width:0}
  .app-shell .key-icon-actions{width:100%;max-width:none;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start}
  .app-shell .key-icon-actions .icon-button{border:1px solid var(--line-soft);border-radius:11px}
  .app-shell .key-row{padding:16px}
  .app-shell .key-row :is(.key-meta,.row,.key-actions){flex-wrap:wrap;gap:8px}
  .app-shell .tag,.app-shell .badge{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
  .app-shell .settings-page>.page-head{padding:18px}
  .app-shell .settings-left>.panel,.app-shell .settings-right>.panel{padding:18px}
  .app-shell .inset-card{padding:14px}
  .app-shell .filter-row{grid-template-columns:minmax(0,1fr)}
  .app-shell .filter-row>*{grid-column:auto}
  .app-shell .filter-row>.custom-select{width:100%}
  .app-shell :is(.custom-select-menu,.chat-select-menu){max-width:calc(100vw - 28px);overflow-x:hidden}
  .app-shell .check{min-height:44px;font-size:13px;gap:10px}
  .app-shell .referral-hero{padding:22px 18px;gap:24px}
  .app-shell .referral-hero h1{font-size:34px}
  .app-shell .referral-link-box{padding:18px;min-width:0}
  .app-shell .referral-stats{flex-wrap:wrap;gap:20px}
  .app-shell .referral-stats>div{min-width:0}
  .app-shell .log-table{font-size:12px}
  .app-shell .table-wrap :is(td,th){padding:12px;white-space:normal;overflow-wrap:anywhere}
  .app-shell .table-wrap td{min-width:100px}
  .app-shell .table-wrap td:has(button){min-width:140px}
  .app-shell .table-wrap button{min-height:44px}
  .app-shell .setup-wizard{padding:18px 14px}
  .app-shell .wizard-heading h2{font-size:23px}
  .app-shell .wizard-heading p{font-size:14px}
  .app-shell .wizard-step{padding:16px 0;min-width:0}
  .app-shell .wizard-step-head{gap:10px}
  .app-shell .wizard-step-head>div{min-width:0}
  .app-shell .wizard-step-head h3{font-size:16px}
  .app-shell .wizard-step-head p{font-size:13px}
  .app-shell .wizard-number{flex:none}
  .app-shell .option-buttons button{flex:1 1 auto;min-height:44px;padding:10px 12px;font-size:13px}
  .app-shell .guide-model-trigger{gap:8px;padding:12px}
  .app-shell .guide-model-trigger>span:first-of-type{min-width:0}
  .app-shell .guide-model-trigger b{white-space:normal;font-size:14px}
  .app-shell .guide-output{padding:14px 12px}
  .app-shell .guide-output>.section-title{display:flex}
  .app-shell .guide-actions{width:100%;margin:0}
  .app-shell .setup-terminal pre,.app-shell .code-window pre{font-size:12px;line-height:1.7;padding:14px;min-width:0;overflow-wrap:anywhere}
  .app-shell .terminal-file-label{font-size:11px;overflow-wrap:anywhere}
  .app-shell .terminal-controls{margin-left:auto}
  .app-shell .restore-note{padding:14px;min-width:0}
  .app-shell .restore-note>summary{font-size:14px;line-height:1.5}
  .app-shell .endpoint-panel,.app-shell .instruction-aside>.panel{padding:18px}
  .app-shell .endpoint-item{min-width:0}
  .app-shell .endpoint-item code{font-size:12px;white-space:normal}
  .app-shell .docs-hero,.app-shell .agent-guide-panel{padding:20px 16px}
  .app-shell .docs-hero h1{font-size:28px}
  .app-shell .docs-section h2{font-size:23px}
  .app-shell .docs-section{min-width:0;max-width:100%}
  .app-shell .endpoint-directory-row{grid-template-columns:54px minmax(0,1fr);gap:10px}
  .app-shell .endpoint-directory-row>code{overflow-wrap:anywhere}
  .app-shell .agent-guide-actions{display:flex;flex-wrap:wrap;gap:8px}
  .app-shell .agent-guide-actions>*{flex:1;min-width:0;white-space:normal}
  dialog.glass-dialog .modal-close{width:44px;height:44px;min-width:44px;min-height:44px;padding:11px}
  .app-shell .media-api-actions{width:100%;flex-wrap:wrap}
  .app-shell .media-api-actions>.button{flex:1}
  .app-shell .image-info-grid{grid-template-columns:minmax(0,1fr)}
  .app-shell .admin-model-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0}
  .app-shell .admin-model-name{min-width:0}
  .app-shell .admin-model-meta,.app-shell .admin-model-actions{grid-column:2;margin:0;width:auto;gap:14px;flex-wrap:wrap}
  .app-shell .admin-model-actions{justify-content:flex-start}
  .app-shell .admin-model-meta b{font-size:13px}
  .app-shell .model-admin-panel .catalog-search{width:100%}

  /* Native dialog retains focus handling and backdrop dismissal; only its layout changes. */
  dialog.glass-dialog,dialog.dialog-wide{width:calc(100% - 16px);max-width:calc(100% - 16px);
    max-height:calc(100dvh - 24px);margin:auto;padding:0;border-radius:20px;overflow:auto;overscroll-behavior:contain}
  dialog.glass-dialog .modal-head{padding:16px;gap:10px;align-items:flex-start;min-width:0}
  dialog.glass-dialog .modal-head h2{font-size:22px;line-height:1.3;overflow-wrap:anywhere}
  dialog.glass-dialog .modal-heading{min-width:0;display:block}
  dialog.glass-dialog .modal-header-note{display:block;font-size:12px;line-height:1.5;margin-top:6px}
  dialog.glass-dialog .modal-close{width:44px;height:44px;min-width:44px;min-height:44px;padding:11px}
  dialog.glass-dialog .modal-body{padding:16px;min-width:0;overflow-wrap:anywhere}
  dialog.glass-dialog :is(form,fieldset,.catalog-dialog,.catalog-toolbar,.catalog-search,.code-window,.inset-card){min-width:0;max-width:100%}
  dialog.glass-dialog :is(.grid.two,.grid.three,.grid.four,.topup-form,.media-help-grid,.image-info-grid){grid-template-columns:minmax(0,1fr)}
  dialog.glass-dialog .section-title{flex-wrap:wrap}
  dialog.glass-dialog :is(button,.button,summary){min-height:44px}
  dialog.glass-dialog :is(.footer-actions,.modal-bottom){display:flex;flex-wrap:wrap;gap:10px;justify-content:stretch}
  dialog.glass-dialog :is(.footer-actions,.modal-bottom)>button{flex:1 1 120px;min-width:0;white-space:normal;padding:12px}
  dialog.glass-dialog .compact-model-form .model-selection-list.compact-model-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  dialog.glass-dialog .compact-model-option{min-height:70px;padding:12px;grid-template-columns:24px minmax(0,1fr) 22px;gap:10px}
  dialog.glass-dialog .compact-model-name b{font-size:14px;white-space:normal;overflow-wrap:anywhere}
  dialog.glass-dialog .compact-model-name code{font-size:11px;white-space:normal;overflow-wrap:anywhere}
  dialog.glass-dialog .model-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
  dialog.glass-dialog .model-filters>button{min-height:40px;padding:8px 10px;font-size:12px}
  dialog.glass-dialog .model-search-field input{font-size:16px;min-width:0;min-height:44px}
  dialog.glass-dialog .model-all-option{padding:12px;gap:10px}
  dialog.glass-dialog .model-all-option>span{min-width:0}
  dialog.glass-dialog .model-all-option small{font-size:12px}
  dialog.glass-dialog .compact-picker-footer{padding:12px 0 max(4px,env(safe-area-inset-bottom));background:#1a1520f5}
  dialog.glass-dialog .selection-caption{font-size:12px;line-height:1.5}
  dialog.glass-dialog .catalog-card{padding:16px}
  dialog.glass-dialog .catalog-card-top{gap:12px}
  dialog.glass-dialog .catalog-identity{flex-basis:100%;min-width:0}
  dialog.glass-dialog .catalog-identity h3{font-size:21px;overflow-wrap:anywhere}
  dialog.glass-dialog .catalog-metrics{width:100%;gap:8px}
  dialog.glass-dialog .catalog-metric{min-width:0;flex:1;padding:12px}
  dialog.glass-dialog .catalog-facts{grid-template-columns:minmax(0,1fr)}
  dialog.glass-dialog .catalog-facts>div{grid-template-columns:minmax(0,1fr);gap:6px;padding:12px}
  dialog.glass-dialog .catalog-facts>div:first-child{grid-column:auto}
  dialog.glass-dialog .catalog-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
  dialog.glass-dialog .catalog-tag{font-size:11px;white-space:normal;overflow-wrap:anywhere}
  dialog.glass-dialog .catalog-reasoning{gap:10px}
  dialog.glass-dialog .catalog-description{font-size:14px}
  dialog.glass-dialog .model-edit-form>fieldset{padding:14px}
  dialog.glass-dialog .detail-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  dialog.glass-dialog .detail-list dd{overflow-wrap:anywhere}
  dialog.glass-dialog .topup-form .amount-section,dialog.glass-dialog .topup-form .quote-card{padding:16px}
  dialog.glass-dialog .amount-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
  dialog.glass-dialog .amount-presets button{padding:8px 4px;font-size:12px}
  dialog.glass-dialog .quote-token-value strong{font-size:30px;overflow-wrap:anywhere}
  dialog.glass-dialog .calculation-total strong{font-size:28px;overflow-wrap:anywhere}
  dialog.glass-dialog :is(.media-help-hero,.image-info-code .section-title){flex-wrap:wrap}
  #toast{max-width:calc(100vw - 24px);width:max-content;left:50%;right:auto;transform:translateX(-50%);
    bottom:max(18px,env(safe-area-inset-bottom));overflow-wrap:anywhere;font-size:13px}
  .app-shell .support-widget{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}
  .app-shell .support-widget>.support-button{font-size:12px;min-height:48px;gap:8px;padding:6px 12px 6px 6px}
  .app-shell .support-widget>.support-button>span{width:32px;height:32px}
}

@media(max-width:360px){
  .app-shell .header-user-name{max-width:44px}
  .app-shell .language-label{padding-inline:3px}
  .app-shell .wordmark{font-size:14px}
  .app-shell .content:not(.chat-content){padding-inline:12px}
  .app-shell .panel{padding:16px}
  .app-shell .header-inner{padding-inline:8px}
}

/* Public/auth screens share the same width containment without disabling zoom or scrolling. */
@media(max-width:900px){
  .easy-landing :is(.landing-header,.landing-section,.easy-section,.easy-hero,.easy-feature-grid,.easy-calculator,.easy-footer,.site-footer){min-width:0;max-width:100%}
  .easy-landing :is(.easy-hero,.easy-feature-grid,.easy-model-grid,.easy-savings,.footer-grid)>*{min-width:0}
  .easy-landing :is(h1,h2,h3,p,.wordmark,.copy-field){overflow-wrap:anywhere}
  .easy-landing .landing-header{gap:12px}
  .easy-landing .landing-header .button{min-height:44px}
  .easy-landing :is(input,select){font-size:16px;min-width:0;max-width:100%}
  .auth-shell :is(input,select,textarea){font-size:16px}
  .legal-page,.legal-layout,.legal-content{min-width:0;max-width:100%}
  .legal-page :is(code,a,h1,h2,p,li){overflow-wrap:anywhere}
  .cookie-notice :is(p,strong,a){overflow-wrap:anywhere}
}