/* 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(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:8px}
  .app-topbar .breadcrumb,.app-topbar .user-email{display:none}
  .app-topbar .user-menu{gap:6px;min-width:0}
  .mobile-toggle{display:flex;flex-shrink:0}
  .app-topbar .icon-btn,.app-topbar .avatar{width:44px;height:44px;flex-shrink:0}
  .app-shell .currency-toggle,.app-shell .topbar-balance{height:44px!important;min-height:44px!important;padding-inline:8px}
  .topbar-balance{min-width:0}
  .topbar-balance span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .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:#0c1010}
  .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}
  body.mobile-menu-open{overflow:hidden}
  body:has(dialog[open]){overflow:hidden}

  /* 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,
  .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,dialog.auth-dialog-modal{
    max-width:calc(100vw - 24px);max-height:calc(var(--visual-height,100dvh) - 24px);padding:20px 16px;border-radius:16px;overscroll-behavior:contain;scroll-padding-block:16px
  }
  .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.auth-dialog-modal,dialog:has(.auth-dialog){overflow-y:auto!important;overflow-x:hidden!important}
  .auth-dialog{grid-template-columns:minmax(0,1fr);min-height:0}
  .auth-promo-pane{display:none}
  .auth-main-pane{padding:64px 20px 24px;justify-content:flex-start}
  .auth-dialog-close{top:12px;right:12px}
  .auth-tab{min-height:44px;padding-inline:8px;min-width:0}
  .auth-tabs{display:grid;grid-template-columns:auto minmax(0,1fr);max-width:100%}
  .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] {
    height: var(--visual-height, 100dvh);
    max-height: var(--visual-height, 100dvh);
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    overflow: hidden;
  }
  .app-main:has([data-page=playground]),
  .app-shell[data-page=playground] .app-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .app-content[data-page=playground]{
    flex: 1 1 auto !important;
    height: calc(var(--visual-height, 100dvh) - var(--topbar-height)) !important;
    max-height: calc(var(--visual-height, 100dvh) - var(--topbar-height)) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)) !important;
  }
  .app-content[data-page=playground] .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 {
    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{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:0 0 8px;margin:0;min-height:0}
  .chat-header-main{flex:1;flex-wrap:nowrap;min-width:0;gap:10px}
  .chat-header-main h1{font-size:20px!important}
  .chat-model-picker{min-width:0;position:static}
  .chat-model-trigger{min-height:44px;min-width:0;padding:6px 10px}
  .chat-model-name{max-width:none}
  .app-content[data-page=playground] .page-header .header-actions{width:auto;gap:6px;margin-left:auto}
  .app-content[data-page=playground] .page-header .header-actions .btn,
  .app-content[data-page=playground] .page-header .header-actions .icon-btn{width:44px;height:44px;min-height:44px;flex:none;padding:0}
  .chat-header [data-action=chat-history] span,.chat-header [data-action=clear-chat] span{display:none}
  .chat-model-dropdown{position:fixed;top:calc(var(--topbar-height) + 60px);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) - 76px);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{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}
  .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{margin:0!important;flex-shrink:0!important}
  .composer-bar{gap:6px;padding:5px 6px;border-radius:26px}
  .composer-bar .send-btn{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .composer-attach-btn{width:44px;height:44px;min-width:44px;justify-content:center;padding:0}
  .composer-attach-btn span{display:none}
  .composer #prompt{font-size:16px!important;min-height:44px;max-height:min(160px,24dvh)}
  .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:relative;gap:8px;height:auto;min-height:76px;padding-block:12px}
  .topnav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .topnav-actions .topnav-account{display:none}
  .topnav-actions>.btn{padding-inline:12px;white-space:nowrap}
  .topnav-actions>.btn>.icon{display:none}
  .landing-mobile-nav{display:block;position:static}
  .landing-mobile-nav summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;border:1px solid var(--line);border-radius:10px;cursor:pointer}
  .landing-mobile-nav summary::-webkit-details-marker{display:none}
  .landing-mobile-nav[open] summary{color:var(--accent);background:#9aefd212}
  .landing-mobile-nav nav{position:absolute;top:100%;inset-inline:0;z-index:90;display:grid;padding:8px;background:#111716;border:1px solid var(--line-hi);border-radius:14px;box-shadow:0 18px 40px #0008}
  .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:#9aefd20b}
}

@media(max-width:650px){
  .app-content[data-page=playground] .chat-header-main{flex-basis:100%}
  .app-content[data-page=playground] .page-header .header-actions{margin-left:0;width:100%;justify-content:flex-end}
  .app-content[data-page=playground] .page-header .header-actions [data-action=chat-history]{width:auto;padding-inline:12px;margin-right:auto;gap:8px}
  .chat-header [data-action=chat-history] span{display:inline}
  .chat-model-picker{flex:1}
  .chat-model-trigger{width:100%;justify-content:space-between}
  .chat-model-dropdown{top:calc(var(--topbar-height) + 60px)}
  [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}
}

@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}
}