/* Mobile overrides follow the shared component styles. */
.sidebar-close,.sidebar-backdrop,.landing-mobile-nav{display:none}
.topnav-actions{display:flex;align-items:center;gap:12px}

@media(max-width:900px){
  :root{--topbar-height:calc(60px + env(safe-area-inset-top))}
  .app-main{margin-left:0;min-width:0}
  .app-topbar{height:var(--topbar-height);padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:6px}
  .app-topbar .breadcrumb,.app-topbar .user-email{display:none}
  .app-topbar .user-menu{gap:10px!important;min-width:0;align-items:center}
  .topbar-news-link{display:none!important}
  .mobile-toggle,
  .app-topbar .mobile-toggle,
  header.app-topbar .mobile-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important;border-radius:8px!important;flex-shrink:0!important}
  .app-topbar .icon-btn,.app-topbar .avatar{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;border-radius:50%!important;flex-shrink:0}
  .app-shell .currency-toggle,.app-shell .lang-toggle{height:38px!important;min-height:38px!important;max-height:38px!important;padding-inline:7px!important;gap:4px!important;flex-shrink:0;border-radius:999px!important}
  .app-shell .theme-toggle,.app-topbar .theme-toggle,.theme-toggle{display:none!important}
  .app-shell .currency-arrow,.app-shell .lang-arrow{display:none!important}
  .app-shell .topbar-balance{height:38px!important;min-height:38px!important;max-height:38px!important;padding-inline:14px!important;gap:6px!important;flex-shrink:0;white-space:nowrap;border-radius:999px!important;max-width:none!important;width:auto!important}
  .topbar-balance{min-width:max-content;max-width:none!important;width:auto!important}
  .topbar-balance span{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;max-width:none!important}
  .app-topbar .btn.small[data-action=login],.app-topbar .btn[data-action=login],.topbar-login-btn{height:38px!important;min-height:38px!important;max-height:38px!important;padding-inline:10px!important;font-size:15px!important;white-space:nowrap;flex-shrink:0;border-radius:8px!important}
  @media(max-width:390px){
    .app-topbar{padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:6px}
    .app-topbar .user-menu{gap:8px!important}
    .app-shell .currency-toggle,.app-shell .lang-toggle{padding-inline:5px!important;font-size:15px!important}
    .app-shell .topbar-balance{padding-inline:8px!important;font-size:15px!important;max-width:none!important}
    .app-shell .topbar-balance span{font-size:15px!important;max-width:none!important}
    .app-topbar .icon-btn,.app-topbar .avatar{width:36px;height:36px}
  }
  @media(max-width:340px){
    .app-topbar{padding-inline:4px!important;gap:4px!important}
    .app-topbar .user-menu{gap:8px!important}
    .app-shell .currency-toggle,.app-shell .lang-toggle{padding-inline:3px!important;font-size:15px!important;height:36px!important;min-height:36px!important}
    .app-shell .topbar-balance{padding-inline:8px!important;font-size:15px!important;height:36px!important;min-height:36px!important;max-width:none!important}
    .app-topbar .icon-btn,.app-topbar .avatar{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
    .app-topbar .btn.small[data-action=login],.app-topbar .btn[data-action=login],.topbar-login-btn{padding-inline:5px!important;font-size:15px!important;height:36px!important;min-height:36px!important}
  }
  .sidebar{width:min(304px,calc(100vw - 48px));height:100dvh;bottom:auto;transform:translateX(-100%);visibility:hidden;z-index:100;padding:calc(20px + env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:#090a0b}
  .sidebar.open{transform:translateX(0);visibility:visible;box-shadow:20px 0 70px #0009}
  .sidebar-close{display:grid;position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));width:44px;height:44px}
  .sidebar .logo{margin-right:40px;min-height:36px}
  .sidebar .side-nav{flex:1;min-height:0;margin-block:20px 12px;overscroll-behavior:contain}
  .sidebar .nav-group a{min-height:44px}
  .sidebar-status{min-height:44px}
  .sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;border:0;background:#0009;z-index:99;touch-action:none}
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  body.mobile-menu-open{overflow:hidden}
  body:has(dialog[open]){overflow:hidden}
  html.modal-open,
  body.modal-open{
    overflow:hidden!important;
    overflow-x:hidden!important;
    overscroll-behavior:none!important;
    overscroll-behavior-y:none!important;
  }
  html.modal-open{
    height:100%!important;
  }
  body.modal-open{
    position:fixed!important;
    width:100%!important;
    height:100%!important;
    left:0!important;
    right:0!important;
  }

  /* 16px prevents focus zoom on iOS; controls keep a 44px touch target. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,
  .field input,.field select,.field textarea,
  .app-content .field input,.app-content .field select,.app-content .field textarea,
  .chat-model-search-wrap input#playground-model-search{font-size:16px!important}
  .btn,.btn.small,.app-content .btn,.app-content .page-header .btn,.app-topbar .btn,
  [data-page=connect] .connect-key-actions .btn,.filter-chip,.currency-option,.lang-option,
  .catalog-card h2 button,.rate-model{min-height:44px}
  .icon-btn,.app-content .icon-btn,[data-page=models] .model-id .icon-btn,
  .chat-history-actions .icon-btn,.chat-history-dialog .modal-head .icon-btn{width:44px;height:44px;min-width:44px}
  .field input:not([type=checkbox]):not([type=range]),.field select{min-height:46px}
  .connect-check,.auth-agreement{min-height:44px;align-items:center}
  .connect-check input,.auth-agreement input{width:20px;height:20px;flex-shrink:0}
  .app-content{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
  .page-header,.panel-head{gap:12px;flex-wrap:wrap}
  .page-header>div,.panel-head h2{min-width:0}
  .header-actions{flex-wrap:wrap}
  .message-label{flex-wrap:wrap;gap:6px}
  .message-label strong{overflow-wrap:anywhere}
  dialog,dialog.model-dialog,dialog.admin-dialog,dialog.chat-history-dialog{
    max-width:calc(100% - 24px)!important;max-height:calc(100dvh - 24px)!important;padding:20px 16px;border-radius:20px!important;overscroll-behavior:contain;scroll-padding-block:16px;box-sizing:border-box!important
  }
  dialog.auth-dialog-modal{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    padding:max(16px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom))!important;
    margin:0!important;
    background:rgba(0,0,0,.72)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    border:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    transform:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    box-sizing:border-box!important;
    overscroll-behavior:contain!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  dialog:has(.auth-dialog){
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    padding:max(16px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom))!important;
    margin:0!important;
    background:rgba(0,0,0,.72)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    border:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    transform:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    box-sizing:border-box!important;
    overscroll-behavior:contain!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
  }
  dialog.auth-dialog-modal .auth-dialog{
    width:100%!important;
    max-width:420px!important;
    margin:auto 0!important;
    background:#141416!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:20px!important;
    box-shadow:0 16px 48px rgba(0,0,0,.7)!important;
    overflow:hidden!important;
    position:relative!important;
    flex-shrink:0!important;
    box-sizing:border-box!important;
  }
  dialog:has(.auth-dialog) .auth-dialog{
    width:100%!important;
    max-width:420px!important;
    margin:auto 0!important;
    background:#141416!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:20px!important;
    box-shadow:0 16px 48px rgba(0,0,0,.7)!important;
    overflow:hidden!important;
    position:relative!important;
    flex-shrink:0!important;
    box-sizing:border-box!important;
  }
  dialog input,
  .auth-dialog input,
  .auth-dialog select,
  .auth-dialog textarea,
  .auth-dialog .field input,
  .auth-dialog .password-field input,
  .input-wrap input{
    font-size:16px!important;
  }
  .modal-head{align-items:flex-start;gap:12px}
  .modal-head h2{min-width:0;overflow-wrap:anywhere}
  .modal-head .icon-btn{flex-shrink:0}
  dialog,dialog.model-dialog,dialog.admin-dialog,dialog.chat-history-dialog{overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}
  .auth-dialog{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;width:100%!important;box-sizing:border-box!important}
  .auth-promo-pane{display:none!important}
  .auth-main-pane{padding:42px 18px 24px!important;justify-content:flex-start!important;width:100%!important;box-sizing:border-box!important}
  .auth-dialog-close{top:12px;right:12px}
  .auth-tab{border-radius:10px!important;min-height:44px;padding-inline:8px;min-width:0;box-sizing:border-box}
  .auth-tabs{border-radius:14px!important;display:grid;grid-template-columns:1fr 1fr;max-width:100%;box-sizing:border-box}
  .amount-choices{flex-wrap:wrap;gap:8px}
  .amount-choices button{min-width:44px;min-height:44px}
  .topup-estimate{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
  .topup-estimate>span,.topup-estimate>strong{white-space:nowrap}
  .topup-estimate>small{flex-basis:100%;margin:0}
  .chat-history-item{flex-wrap:wrap}
  .chat-history-open{flex-basis:calc(100% - 110px)}
  .chat-history-dialog .pager,.finance-pagination{flex-wrap:wrap;gap:12px}
  #toast{max-width:calc(100vw - 24px);bottom:max(16px,env(safe-area-inset-bottom));overflow-wrap:anywhere}

  /* Prevent dashboard metrics, chart and panel overflow on mobile */
  .app-shell, .app-main, .app-content {
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .dashboard-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .metric {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .metric-value {
    font-size: clamp(17px, 5.2vw, 26px) !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .panel {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .chart {
    gap: clamp(4px, 1.5vw, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .chart-bar {
    min-width: 0 !important;
  }
  .chart-bar label {
    font-size: clamp(8px, 2.2vw, 10px) !important;
  }
  .base-url {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .base-url code {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .table-wrap {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile chat layout: clean natural layout allowing viewport to scroll smoothly above keyboard */
  .app-shell[data-page=playground],
  .app-shell[data-page=images],
  .app-shell[data-page=videos],
  .app-shell[data-page=audio],
.app-shell[data-page=speech] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    width: 100% !important;
  }
  .app-main:has([data-page=playground]),
  .app-main:has([data-page=images]),
  .app-main:has([data-page=videos]),
  .app-main:has([data-page=audio]),
.app-main:has([data-page=speech]),
  .app-shell[data-page=playground] .app-main,
  .app-shell[data-page=images] .app-main,
  .app-shell[data-page=videos] .app-main,
  .app-shell[data-page=audio] .app-main,
.app-shell[data-page=speech] .app-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .app-content[data-page=playground],
  .app-content[data-page=images],
  .app-content[data-page=videos],
  .app-content[data-page=audio],
.app-content[data-page=speech]{
    flex: 1 1 auto !important;
    min-height: calc(100svh - var(--topbar-height)) !important;
    display: flex !important;
    flex-direction: column !important;
    padding:8px max(12px,env(safe-area-inset-right)) max(22px,calc(env(safe-area-inset-bottom) + 18px)) max(12px,env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }
  .app-content[data-page=playground] .playground-layout,
  .app-content[data-page=images] .playground-layout,
  .app-content[data-page=videos] .playground-layout,
  .app-content[data-page=audio] .playground-layout,
.app-content[data-page=speech] .playground-layout {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .app-content[data-page=playground] .chat-panel,
  .app-content[data-page=images] .chat-panel,
  .app-content[data-page=videos] .chat-panel,
  .app-content[data-page=audio] .chat-panel,
.app-content[data-page=speech] .chat-panel {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .app-content[data-page=playground] .page-header.chat-header,
  .app-content[data-page=images] .page-header.chat-header,
  .app-content[data-page=videos] .page-header.chat-header,
  .app-content[data-page=audio] .page-header.chat-header,
.app-content[data-page=speech] .page-header.chat-header{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 6px !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    min-height: auto !important;
    width: 100% !important;
  }
  .chat-header-main{
    display: contents !important;
  }
  .chat-header-main h1{display: none !important;}
  .workspace-mode-nav{
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  .workspace-mode-btn{
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 0 6px !important;
    font-size: 15px !important;
  }
  .chat-model-picker{
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: static !important;
  }
  .chat-compare-toggle{
    order: 2 !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    display: grid !important;
    place-items: center !important;
  }
  .chat-compare-toggle span{
    display: none !important;
  }
  .app-content[data-page=playground] .page-header.chat-header .header-actions,
  .app-content[data-page=images] .page-header.chat-header .header-actions,
  .app-content[data-page=videos] .page-header.chat-header .header-actions,
  .app-content[data-page=audio] .page-header.chat-header .header-actions,
.app-content[data-page=speech] .page-header.chat-header .header-actions{
    order: 3 !important;
    flex-shrink: 0 !important;
  }
  .chat-model-trigger{
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .chat-model-name{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    max-width: none !important;
  }
  .app-content[data-page=playground] .page-header .header-actions,
  .app-content[data-page=images] .page-header .header-actions,
  .app-content[data-page=videos] .page-header .header-actions,
  .app-content[data-page=audio] .page-header .header-actions,
.app-content[data-page=speech] .page-header .header-actions,
  .chat-header .header-actions{
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 6px !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .app-content[data-page=playground] .page-header .header-actions .btn,
  .app-content[data-page=playground] .page-header .header-actions .icon-btn,
  .app-content[data-page=images] .page-header .header-actions .btn,
  .app-content[data-page=images] .page-header .header-actions .icon-btn,
  .app-content[data-page=videos] .page-header .header-actions .btn,
  .app-content[data-page=videos] .page-header .header-actions .icon-btn,
  .app-content[data-page=audio] .page-header .header-actions .btn,
.app-content[data-page=speech] .page-header .header-actions .btn,
  .app-content[data-page=audio] .page-header .header-actions .icon-btn,
.app-content[data-page=speech] .page-header .header-actions .icon-btn,
  .chat-header .header-actions .btn,
  .chat-header .header-actions .icon-btn{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: none !important;
    padding: 0 !important;
    border-radius: 9px !important;
    display: grid !important;
    place-items: center !important;
  }
  .chat-header .header-actions .btn span,
  .chat-header [data-action=chat-history] span,
  .chat-header [data-action=clear-chat] span,
  .chat-header [data-action=video-refresh] span,
  .chat-header [data-action=video-code] span,
  .chat-header [data-action=image-refresh] span,
  .chat-header [data-action=image-code] span,
  .chat-header [data-action=audio-clear] span,
  .chat-header [data-action=audio-code] span{display:none !important;}
  .chat-model-dropdown{position:fixed;top:calc(var(--topbar-height) + 104px);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;max-width:none;max-height:calc(var(--visual-height,100dvh) - var(--topbar-height) - 116px);display:flex;flex-direction:column;overflow:hidden}
  .chat-model-search-wrap{flex-shrink:0}
  #chat-model-list{min-height:0;max-height:320px;overscroll-behavior:contain}
  .chat-model-option{min-height:48px}
  .chat-model-option>span:first-child{min-width:0}
  .chat-model-option-name-row{flex-wrap:wrap;gap:4px 8px}
  .chat-model-option small{overflow-wrap:anywhere}
  .chat-focused .chat-messages,.app-content[data-page=playground] .chat-focused .chat-messages,.app-content[data-page=images] .chat-focused .chat-messages,.app-content[data-page=videos] .chat-focused .chat-messages,.app-content[data-page=audio] .chat-focused .chat-messages,
.app-content[data-page=speech] .chat-focused .chat-messages{padding:16px 0;flex:1 1 auto;min-height:0}
  .chat-focused .chat-welcome{height:auto;min-height:100%;padding:24px 12px;justify-content:safe center}
  .welcome-orb{overflow:hidden}
  .chat-focused .welcome-orb{overflow:hidden}
  .chat-focused .chat-welcome h2{font-size:22px}
  .chat-welcome-sub{margin-bottom:12px}
  .chat-focused .suggestions{margin-top:12px;width:100%}
  .chat-focused .suggestions button{min-height:44px}
  .chat-focused .composer,.app-content[data-page=playground] .chat-focused .composer,.app-content[data-page=playground] .composer,.app-content[data-page=images] .composer,.app-content[data-page=videos] .composer,.app-content[data-page=audio] .composer{margin:0!important;flex-shrink:0!important}
  .composer-bar{
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .composer-bar .send-btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
  }
  .composer-attach-btn{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .composer-attach-btn span{display:none !important;}
  .composer-attach-btn svg{width: 17px !important; height: 17px !important;}
  .composer #prompt,
  .composer #image-prompt,
  .composer #video-prompt,
  .composer-bar textarea,
  .composer-bar #prompt,
  .composer-bar #image-prompt,
  .composer-bar #video-prompt{
    font-size: 16px !important;
    min-height: 38px !important;
    max-height: min(160px,24dvh) !important;
    padding: 7px 8px !important;
    line-height: 22px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
    overflow-y: auto !important;
  }
  .composer-sub-row button{min-height:44px}
  #chat-history-status:empty{display:none}
  .composer-sub-row:has(#vision-hint:empty):not(:has(#vision-clear:not([hidden]))):not(:has(.composer-foot)){display:none}
}

@media(max-width:800px){
  .product-landing .topnav{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:1000!important;height:64px;min-height:64px;padding:0;box-sizing:border-box}
  .product-landing .topnav-inner{padding:0 16px;height:64px;gap:6px}
  .product-landing .topnav .logo{font-size:18px;gap:7px;flex-shrink:1;min-width:0}
  .topnav-actions{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0}
  .topnav-actions .topnav-account{display:none}
  .topnav-actions .currency-toggle,.topnav-actions .lang-toggle{height:38px!important;min-height:38px!important;max-height:38px!important;padding-inline:12px!important;gap:3px!important;font-size:15px!important;border-radius:999px!important}
  .topnav-actions .theme-toggle{display:none!important}
  .topnav-actions .currency-arrow,.topnav-actions .lang-arrow{display:none!important}
  .topnav-actions>.btn,.topnav-actions .topnav-login-btn,.product-landing .topnav .btn{height:38px!important;min-height:38px!important;max-height:38px!important;padding:0 14px!important;font-size:15px!important;font-weight:550!important;white-space:nowrap!important;border-radius:999px!important}
  .topnav-actions>.btn>.icon,.topnav-login-btn>.icon{display:none!important}
  .landing-mobile-nav{display:block;position:static}
  .landing-mobile-nav summary{display:grid;place-items:center;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;max-height:38px!important;list-style:none;border:1px solid var(--line);border-radius:8px;cursor:pointer}
  .landing-mobile-nav summary::-webkit-details-marker{display:none}
  .landing-mobile-nav[open] summary{color:#ffffff;background:rgba(255,255,255,0.06)}
  .landing-mobile-nav:not([open]) nav{display:none!important}
  .landing-mobile-nav[open] nav{position:fixed;top:calc(var(--topbar-height, 64px) + 8px);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;max-width:calc(100vw - 24px);z-index:1001;display:grid;padding:8px;background:#0c0d0e;border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,0.6)}
  .landing-mobile-nav nav a{display:flex;align-items:center;min-height:48px;padding:8px 12px;border-radius:8px}
  .landing-mobile-nav nav a:hover{background:rgba(255,255,255,0.06);color:#ffffff}
}
@media(max-width:390px){
  .product-landing .container{padding:0 12px!important}
  .product-landing .topnav{gap:4px}
  .product-landing .topnav .logo{font-size:16px;gap:5px}
  .topnav-actions{gap:4px}
  .topnav-actions .currency-toggle,.topnav-actions .lang-toggle{padding-inline:5px!important;font-size:15px!important}
  .topnav-actions>.btn,.topnav-actions .topnav-login-btn{padding-inline:7px!important;font-size:15px!important}
}
@media(max-width:330px){
  .product-landing .container{padding:0 8px!important}
  .product-landing .topnav .logo span:last-child{display:none}
  .topnav-actions .currency-toggle,.topnav-actions .lang-toggle{padding-inline:4px!important;font-size:15px!important}
  .topnav-actions>.btn,.topnav-actions .topnav-login-btn{padding-inline:6px!important;font-size:15px!important}
}

@media(max-width:650px){
  .chat-model-picker{flex:1;min-width:0}
  .chat-model-trigger{width:100%;justify-content:space-between}
  .chat-model-dropdown{top:calc(var(--topbar-height) + 104px);max-height:calc(var(--visual-height,100dvh) - var(--topbar-height) - 116px)}
  .chat-header .header-actions [data-action="export-chat"]:disabled{display:none !important}
  .workspace-mode-btn .icon{display:none !important}
  .composer-bar{gap:6px !important;padding:5px 6px !important}
  .catalog-category-bar{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  [data-page=models] .catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-page=models] .catalog-filters .model-search{grid-column:1/-1}
  [data-page=models] .favorite-filter{min-height:44px}
  .image-prompt-suggestions .prompt-chip{min-height:44px}
  .chat-history-dialog .chat-history-item{padding:12px;gap:8px}
  .chat-focused .message{gap:8px}
  .message-avatar{width:28px;height:28px;min-width:28px}
  .app-footer a,.product-footer a,.footer-links a{min-height:44px}
  .app-topbar .user-menu .lang-dropdown,
  .app-topbar .user-menu .currency-dropdown{left:0!important;right:auto!important;transform-origin:top left!important;max-width:calc(100vw - 20px)!important}
  .product-landing .topnav-actions .lang-dropdown,
  .product-landing .topnav-actions .currency-dropdown{left:auto!important;right:0!important;transform-origin:top right!important;max-width:calc(100vw - 20px)!important}
  .product-models-ticker{position:relative!important;left:50%!important;right:50%!important;margin-left:-50vw!important;margin-right:-50vw!important;width:100vw!important;max-width:100vw!important;overflow:hidden!important;box-sizing:border-box!important}
  .models-ticker-caption{text-align:center!important;margin:0 auto 16px!important;padding:0 16px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .models-ticker-viewport{width:100%!important;max-width:100%!important;overflow:hidden!important}
}

@media(max-width:900px) and (max-height:500px){
  .app-content[data-page=playground] .chat-header-main{flex-basis:auto}
  .app-content[data-page=playground] .page-header .header-actions{width:auto;margin-left:auto}
  .app-content[data-page=playground] .page-header .header-actions [data-action=chat-history]{width:44px;padding:0;margin:0}
  .chat-header [data-action=chat-history] span{display:none}
  .chat-focused .chat-welcome{padding:16px 8px}
  .chat-focused .welcome-orb{display:none!important}
}

@media(max-width:380px){
  .metrics{grid-template-columns:1fr !important}
  [data-page=models] .catalog-filters{grid-template-columns:1fr!important}
}