/* Device-wide usability overrides, loaded after each page's theme. */
:root{--shadow-viewport-height:100dvh;--shadow-safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{overflow-wrap:break-word}
button,a,input,textarea,select{touch-action:manipulation}
input,textarea,select{max-width:100%;box-sizing:border-box}
img,svg,video{max-width:100%}
dialog{max-height:calc(var(--shadow-viewport-height) - 24px);overscroll-behavior:contain}
:root[data-page-hidden="true"] *,:root[data-page-hidden="true"] *::before,:root[data-page-hidden="true"] *::after{animation-play-state:paused!important}
:root[data-lite="true"] .command-visual *,:root[data-lite="true"] .command-hero::before,:root[data-lite="true"] .command-hero::after,:root[data-lite="true"] .ai-art *{animation:none!important;filter:none!important}
:root[data-lite="true"] .command-visual{transform:none!important}
:root[data-lite="true"] .card,:root[data-lite="true"] .cap-card,:root[data-lite="true"] .detail-panel{transform:none!important;backdrop-filter:none!important}
/* The AI composer stays inside the available viewport on both device modes. */
.sw-workspace,.sw-workspace.has-artifact{height:var(--shadow-workspace-height,calc(100dvh - 168px));min-height:0;max-height:1100px;position:relative}
.sw-main{min-height:0}.sw-conversation{flex:1 1 0;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}.sw-composer-wrap{flex:0 0 auto;margin:0 auto}
.sw-message-body,.sw-thread-heading{min-width:0;overflow-wrap:anywhere}.sw-code pre{max-width:100%;overscroll-behavior:contain}
.sw-history-toggle,.sw-quick-new,.sw-export,.sw-delete,.sw-model-button,.sw-send,.sw-attach,.sw-stop{min-height:40px;min-width:40px}
/* Source-wide search is paginated, keeping rendered controls and heights bounded. */
.chat-pages{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:12px 0;font-variant-numeric:tabular-nums}
.chat-pages[hidden]{display:none}
.chat-pages>span{white-space:nowrap;font-size:14px}
.chat-pages>.btn{min-height:44px}
@media(max-width:480px){.chat-pages{justify-content:space-between;gap:8px}.chat-pages>.btn{padding-inline:10px}}
html[data-theme] #app .approval-tools p{flex:1 1 260px;min-width:0;font-size:14px;line-height:1.6;color:var(--v-muted)}
html[data-theme] #app .approval-tools>.btn{max-width:100%;white-space:normal}
@media(pointer:coarse),(max-width:780px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,.sw-workspace .sw-composer textarea{font-size:16px!important}
  :root[data-theme] .btn,:root[data-theme] .theme-toggle,:root[data-theme] .user-btn,:root[data-theme] .friend-select,:root[data-theme] .profile-btn,:root[data-theme] .approval-btn,:root[data-theme] .mobile-menu-toggle,:root[data-theme] .service-switcher a{min-height:44px!important}
  .primary,.secondary,.icon-button,.side-item,.site-nav a,.anime-mobile-nav a,.player-control,.episode-button{min-height:44px}
  .sw-toolbar button,.sw-modes button,.sw-send,.sw-attach,.sw-stop,.sw-artifact button,.sw-model-dialog button{min-height:44px!important;min-width:44px}
  .sw-composer-wrap{padding-bottom:max(12px,var(--shadow-safe-bottom))}
  .sw-composer textarea{min-height:48px;max-height:130px}
  .sw-agent-help{font-size:11px;line-height:1.5;max-height:36px;overflow:auto}
  .sw-composer-actions{flex-wrap:wrap;gap:8px}.sw-modes{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.sw-send-tools{margin-left:auto}.sw-modes button{padding:7px 5px!important;font-size:11px!important}
  .sw-composer-help{font-size:10px}.sw-model-button{max-width:140px}.sw-toolbar{gap:4px;padding:8px}.sw-readiness{flex-wrap:wrap;font-size:11px}
  .sw-history{max-width:min(88vw,320px);overscroll-behavior:contain}.sw-artifact{inset:0!important;border-radius:12px}.sw-artifact pre{font-size:13px}
  .player-volume{display:none}.video-controls{gap:4px}.player-seek{min-width:40px}.player-time{font-size:11px}
  .site-header{padding-top:max(12px,env(safe-area-inset-top,0px))}.anime-mobile-nav{padding-bottom:var(--shadow-safe-bottom)}
  .anime-page{padding-bottom:calc(80px + var(--shadow-safe-bottom))}.watch-tabs{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.watch-tabs button{flex-shrink:0;min-height:44px}
  .watch-dialog{max-width:100%;margin-inline:auto}.episode-list{overscroll-behavior:contain}.watch-party .party-actions button{min-height:44px}
  :root[data-theme] .main{padding-bottom:calc(24px + var(--shadow-safe-bottom))}:root[data-theme] .command-copy h2{font-size:clamp(22px,6vw,28px)}
  :root[data-theme] .command-visual{align-self:start}:root[data-theme] .assistant-emblem{width:80px;height:80px}:root[data-theme] .command-copy>p{font-size:13px;line-height:1.6}
}
@media(max-width:780px){
  :root[data-theme] #app[data-view="aiworkspace"] .top{margin-bottom:12px;gap:8px}:root[data-theme] #app[data-view="aiworkspace"] .top>div:first-child{display:none}
  :root[data-theme] #app[data-view="aiworkspace"] .top h1{font-size:22px}:root[data-theme] #app[data-view="aiworkspace"] .top-actions .data-sync{display:none}
  .sw-workspace,.sw-workspace.has-artifact{min-height:0;border-radius:12px}
  .sw-welcome{padding:20px 14px}.sw-welcome h2{font-size:25px}.sw-welcome-sub{font-size:13px}.sw-starters{gap:8px}.sw-starters button{min-height:64px}
  .sw-conversation{padding:12px}.sw-message-body{font-size:14px;line-height:1.7}
  :root[data-keyboard="true"] #app .side,:root[data-keyboard="true"] #app .top{display:none!important}
  :root[data-keyboard="true"] #app .main{padding:8px!important}:root[data-keyboard="true"] .sw-agent-help,:root[data-keyboard="true"] .sw-composer-help{display:none}
  :root[data-keyboard="true"] .anime-mobile-nav{display:none}
  body:has(> #login:not([hidden])){padding:16px!important}body:has(> #login:not([hidden])) #login{max-width:100%;box-sizing:border-box}
}
@media(max-height:600px){
  :root[data-theme] #app[data-view="aiworkspace"] .top>div:first-child{display:none}
  .sw-toolbar{min-height:52px}.sw-conversation{padding-block:0}.sw-readiness{flex-wrap:nowrap}.sw-readiness>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sw-agent-help,.sw-composer-help{display:none}.sw-composer textarea{min-height:36px;max-height:80px}.sw-composer{padding:8px}.sw-composer-wrap{padding:6px 10px}
  .sw-readiness{padding-block:5px}.sw-toolbar{padding-block:6px}.sw-welcome{padding:12px}.sw-welcome-sub,.sw-welcome .sw-eyebrow{display:none}.sw-welcome h2{font-size:23px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
  :root[data-theme] .side{position:relative;width:auto;height:auto;padding:8px 14px;flex-direction:row;justify-content:space-between}:root[data-theme] .side .workspace-nav{display:none!important}:root[data-theme] .mobile-menu-toggle{display:inline-flex}
  :root[data-theme] .layout{display:block}:root[data-theme] .main{margin-left:0;padding:10px 16px}:root[data-theme] .top{margin-bottom:8px}:root[data-theme] .top h1{font-size:22px}
  :root[data-theme] .side.menu-open .workspace-nav{position:absolute;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));inset:100% 8px auto;max-height:calc(var(--shadow-viewport-height) - 70px);overflow:auto;background:var(--v-side);z-index:50;padding:10px;border:1px solid var(--v-line)}
}
@media(min-width:1500px){:root[data-theme] .main{max-width:1900px}.sw-workspace{max-height:1400px}.sw-message-body{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){:root[data-theme] #app[data-view="aiworkspace"] .top>div:first-child{display:none}}

/* Main control panels: keep actions and form controls inside their cards. */
:root[data-theme] #app .top{flex-wrap:wrap;align-items:flex-start}
:root[data-theme] #app .top>div{min-width:0;max-width:100%}
@media(max-width:1180px){
 :root[data-theme] #app .top-actions{flex-wrap:wrap;max-width:100%}
 :root[data-theme] #app .panel-grid,:root[data-theme] #app .dev-compose{grid-template-columns:minmax(0,1fr)}
 :root[data-theme] #app .detail-panel,:root[data-theme] #app .dev-card{min-width:0}
 :root[data-theme] #app .setting-row{flex-wrap:wrap;gap:12px}
 :root[data-theme] #app .setting-row>div{min-width:0;flex:1 1 160px}
 :root[data-theme] #app .setting-row>select{min-width:0;max-width:100%;flex:1 1 160px}
 :root[data-theme] #app .setting-row>.switch{flex-shrink:0}
 :root[data-theme] #app .detail-panel dd{min-width:0;overflow-wrap:anywhere}
 :root[data-theme] #app .guardian-columns{grid-template-columns:minmax(0,1fr)}
 :root[data-theme] #app .guardian-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
 :root[data-theme] #app .chat-tools{grid-template-columns:minmax(0,1fr)}
 :root[data-theme] #app .row:not(.thead){grid-template-columns:minmax(0,1fr);gap:10px}
 :root[data-theme] #app .thead{display:none}
 :root[data-theme] #app .row>.chat-kind,:root[data-theme] #app .row>.unread{display:none}
 :root[data-theme] #app .approval-cell{justify-content:flex-start;max-width:100%;width:100%;flex-wrap:wrap;gap:7px}
 :root[data-theme] #app .approval-cell :is(button,.friend-picker){max-width:100%;white-space:normal}
 :root[data-theme] #app .accounts-page .acc-row{flex-wrap:wrap}
 :root[data-theme] #app .accounts-page .acc-info{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:600px){
 :root[data-theme] #app .guardian-roles{grid-template-columns:minmax(0,1fr)}
 :root[data-theme] #app .detail-panel{padding:16px}
 :root[data-theme] #app .overview-panel-head,:root[data-theme] #app .dev-session-heading{flex-wrap:wrap}
 :root[data-theme] #app .chat-name{white-space:normal;overflow-wrap:anywhere}
 :root[data-theme] #app .approval-cell :is(.approval-btn,.profile-btn){min-height:44px}
 :root[data-theme] #app .setting-row>input[type=checkbox]{flex-shrink:0}
}
@media(max-width:780px){
 :root[data-skin][data-theme] #app .side{position:relative;overflow:visible;z-index:40}
 :root[data-theme] #app .side .workspace-nav{max-height:calc(var(--shadow-viewport-height) - 115px);overscroll-behavior:contain}
}