/* Global responsive shell and overflow containment. Loaded after page CSS. */
html,body,.app-shell,.main-content{max-width:100%}
html,body{overflow-x:clip}
img,video,svg,canvas{max-width:100%}
.page-wrap,.panel,.quota-card,.stat-card,.record-card,.manage-card,.editor-dialog,.terms-modal-box{min-width:0;max-width:100%}
.service-alert{flex-wrap:wrap;overflow-wrap:anywhere}
.service-alert small{min-width:0}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.table-wrap table{width:max-content;min-width:100%}
.tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tabs .tab{flex:0 0 auto;white-space:nowrap}
.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:49;width:100%;height:100%;padding:0;border:0;background:rgba(2,6,23,.48);backdrop-filter:blur(2px);cursor:pointer}
.chat-history-backdrop{display:none;position:absolute;inset:0;z-index:19;width:100%;height:100%;padding:0;border:0;background:rgba(2,6,23,.42);backdrop-filter:blur(2px)}
.chat-answer,.chat-answer-column,.chat-message{min-width:0;max-width:100%}

@media(max-width:1024px){
  .chat-page .sidebar{width:min(280px,86vw);padding:calc(22px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom))}
  .chat-page .sidebar .brand{justify-content:flex-start;padding:0 10px 28px}
  .chat-page .sidebar .brand>span:last-child,.chat-page .sidebar .nav-item span,.chat-page .sidebar .user-chip span:last-child{display:inline}
  .chat-page .sidebar .nav-item{justify-content:flex-start;gap:12px;padding:11px 12px}
  .chat-page .sidebar .user-chip{justify-content:flex-start;padding:12px}
  .sidebar{width:min(280px,86vw);padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .sidebar.open+.sidebar-backdrop{display:block}
  html.mobile-menu-open body{overflow:hidden;touch-action:none}
  .main-content{width:100%;margin-left:0;padding:76px 24px 32px}
  .mobile-header{position:fixed;inset:0 0 auto;z-index:40;height:58px;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}
  .page-title-row{gap:18px}
  .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-wrap>.page-title-row{flex-wrap:wrap}
  .admin-wrap>.page-title-row>.card-actions{justify-content:flex-start}
  .chat-page .main-content{inset:0;width:auto;margin:0;padding:0}
  .chat-app{grid-template-columns:1fr}
  .chat-history-resizer{display:none}
  .chat-history{position:absolute;z-index:20;inset:0 auto 0 0;width:min(290px,88vw);transform:translateX(-105%);box-shadow:var(--shadow);transition:transform .2s}
  .chat-history.open{transform:translateX(0)}
  .chat-history.open+.chat-history-backdrop{display:block}
  .chat-history-toggle{display:grid}
}

@media(max-width:760px){
  .profile-panel,.token-summary-panel{grid-column:auto;grid-row:auto}
  .token-summary-grid{grid-template-columns:1fr}
  .main-content{padding:74px max(14px,env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .chat-page .main-content{padding:0}
  .page-title-row,.hero-row{gap:14px;margin-bottom:22px}
  .page-title-row h1,.hero-row h1{font-size:30px}
  .subtitle{font-size:14px;overflow-wrap:anywhere}
  .panel-heading{align-items:flex-start;flex-wrap:wrap}
  .panel-heading>button,.panel-heading>.actions,.actions,.card-actions,.card-toolbar{max-width:100%}
  .actions>*{flex:1 1 auto;justify-content:center}
  .profile-panel{align-items:flex-start}
  .profile-panel>div:last-child{min-width:0}
  .profile-panel h2,.profile-panel p{overflow-wrap:anywhere}
  .plan-panel{align-items:flex-start;flex-direction:column}
  .chart-box{height:230px}
  .editor-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);margin:auto}
  .chat-admin-dialog{padding:16px}
  .chat-admin-dialog>.dialog-head{top:-16px;margin:-16px -16px 12px;padding:14px 16px}
  .chat-admin-message{padding:12px}
  .chat-admin-message header{align-items:flex-start;flex-wrap:wrap}
  .chat-admin-message header time{width:100%;margin-left:0}
  .pager{justify-content:center;flex-wrap:wrap}
  .card-redeem-form{width:100%;min-width:0}
  .card-redeem-form input{min-width:0;width:100%}
  .pricing-grid{grid-template-columns:1fr}
  .referral-login-card,.empty-card{padding:42px 16px}
  .terms-modal-actions>*{flex:1;justify-content:center}
  .details-panel summary{padding:15px 16px;flex-wrap:wrap}
  .details-panel .markdown-body,.details-panel pre{padding:16px}
  .response-panel{min-height:220px}
  .stream-status{align-items:flex-start;flex-wrap:wrap}
  .stream-elapsed{margin-left:0}
  .token-audit{align-items:flex-start;flex-direction:column}
  .chat-toolbar{min-width:0}
  .chat-conversation-actions{flex:none}
  .chat-model{min-width:0}
  .chat-model select{min-width:0;width:min(190px,42vw);max-width:100%;text-overflow:ellipsis}
  .chat-message{margin-bottom:22px}
  .chat-user-bubble{max-width:92%}
  .chat-response-actions{flex-wrap:wrap}
  .chat-share-message{padding:16px}
  .chat-share-message.user{margin-left:6%}
}

@media(max-width:420px){
  .main-content{padding-inline:10px}
  .chat-page .main-content{padding-inline:0}
  .panel{padding:15px;border-radius:14px}
  .page-title-row h1,.hero-row h1{font-size:27px}
  .mobile-header{padding-inline:12px}
  .btn-primary,.btn-secondary,.btn-danger{padding:10px 12px}
  .captcha-wrap{flex-wrap:wrap}
  .captcha-wrap input{min-width:0;flex:1}
  .captcha-wrap img{flex:none}
  .terms-modal-actions{flex-direction:column-reverse}
  .chat-toolbar{padding-inline:9px;gap:6px}
  .chat-title{display:none}
  .chat-conversation-actions{gap:2px}
  .chat-conversation-actions .icon-btn{width:32px;height:32px}
  .chat-model{margin-left:auto}
  .chat-model select{width:min(170px,43vw);padding-left:8px;font-size:11px}
  .chat-messages{padding-inline:10px}
  .chat-composer-wrap{padding-inline:8px}
  .chat-ai-avatar{width:24px;height:24px}
  .chat-message.assistant{gap:7px}
  .chat-answer{font-size:13.5px}
  .chat-error{margin-left:31px}
  .chat-response-actions{gap:2px}
  .chat-action{padding-inline:6px}
  .chat-action span{font-size:10px}
}