/* Final responsive layer. Layout follows measured space instead of device names. */
/* One phone chat layout, with the composer always in its bottom row.
   Only the available height follows the keyboard; focus never moves the form. */
@media(max-width:760px){
 html[data-katrina-tab=chat] .katrina-premium .shell{position:fixed!important;inset:auto 0 auto 0!important;top:var(--chat-visible-top,0px)!important;height:var(--chat-visible-height,100dvh)!important;min-height:0!important;display:flex!important;flex-direction:column;padding-top:6px!important;padding-bottom:6px!important;overflow:clip!important}
 html[data-chat-keyboard][data-katrina-tab=chat] .workspace-navigation{display:none!important}
 html[data-katrina-tab=chat] .shell>header{flex:none}
 html[data-katrina-tab=chat] #pageContent{display:flex!important;flex:1;min-height:0;overflow:clip!important;padding-top:0!important;padding-bottom:calc(var(--smart-nav-h,62px) + 8px)!important}
 html[data-katrina-tab=chat] #workspaceContent{flex:1;width:100%;height:auto!important;min-height:0;grid-template-rows:80px minmax(0,1fr)!important;gap:8px!important;overflow:clip!important}
 html[data-chat-keyboard][data-katrina-tab=chat] #pageContent{padding-bottom:0!important}
 html[data-chat-keyboard][data-katrina-tab=chat] #workspaceContent{grid-template-rows:0 minmax(0,1fr)!important;gap:0!important}
 html[data-chat-keyboard][data-katrina-tab=chat] #chatFaceHost{display:none!important}
 html[data-katrina-tab=chat] #commands{grid-row:2;margin:0!important;min-height:0;padding:8px!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:clip!important}
 html[data-katrina-tab=chat] #commands>.chatlog{grid-row:2;height:auto;max-height:none;min-height:0;overflow:auto}
 html[data-katrina-tab=chat] #executeForm{grid-row:3;margin-top:6px!important;gap:6px!important}
 html[data-katrina-tab=chat] #executeForm .command-actions button{min-height:38px!important;padding:6px 10px!important}
 html[data-chat-keyboard][data-katrina-tab=chat] #executeForm .wake-option{display:none!important}
 html[data-katrina-tab=chat] #commands>.chat-toolbar{grid-row:1;min-height:26px;margin-bottom:2px}
 html[data-katrina-tab=chat] .chat-toolbar button{height:26px;min-height:26px!important;padding:2px 8px!important}
 html[data-katrina-tab=chat] #command{font-size:16px!important;min-height:44px!important;max-height:58px}
 html[data-katrina-tab=chat] :is(#command,#executeForm button){scroll-margin:0!important}
 html[data-katrina-tab=chat]{scroll-padding:0!important}
}
.chat-toolbar #chatCleanupStatus{flex:1;min-width:0;margin:0;font-size:11px;max-height:3em;overflow:auto}
*,*::before,*::after{box-sizing:border-box}
img,canvas,video,svg{max-width:100%}
.panel,.page-section,form,label,.service-card,.phone-card,.device-row{min-width:0;max-width:100%}
:is(button,input,select,textarea,output,strong,span,p,h1,h2,h3){overflow-wrap:anywhere}

html[data-viewport-size="phone"],html[data-viewport-size="phone-wide"]{overflow:hidden}
html[data-viewport-size="phone"] .shell,html[data-viewport-size="phone-wide"] .shell{width:100%;max-width:none;height:100dvh;min-height:0;padding-inline:clamp(8px,3vw,16px)!important;overflow:hidden}
html[data-viewport-size="phone"] #pageContent,html[data-viewport-size="phone-wide"] #pageContent{scrollbar-gutter:stable;overscroll-behavior:contain}
html[data-viewport-size="phone"]:not([data-katrina-tab="dashboard"]):not([data-katrina-tab="chat"]) #pageContent,
html[data-viewport-size="phone-wide"]:not([data-katrina-tab="dashboard"]):not([data-katrina-tab="chat"]) #pageContent{padding-bottom:calc(var(--smart-nav-h,62px) + 12px)!important}

html[data-viewport-size="phone"][data-katrina-tab="dashboard"] #pageContent,
html[data-viewport-size="phone-wide"][data-katrina-tab="dashboard"] #pageContent{padding-bottom:calc(var(--smart-nav-h,62px) + 8px)!important}
html[data-viewport-size="phone"][data-katrina-tab="dashboard"] #dashboardContent,
html[data-viewport-size="phone-wide"][data-katrina-tab="dashboard"] #dashboardContent{grid-template-rows:minmax(88px,1fr) auto!important;min-height:0!important;overflow:hidden!important}
html[data-short-viewport][data-katrina-tab="dashboard"] #dashboardContent{grid-template-rows:minmax(82px,1fr) auto!important}
html[data-tiny-viewport][data-katrina-tab="dashboard"] #dashboardFaceHost .face-panel{min-height:82px!important}

html[data-viewport-size="phone"] :is(.service-grid,.overview-metrics),
html[data-viewport-size="phone-wide"] :is(.service-grid,.overview-metrics){grid-template-columns:repeat(2,minmax(0,1fr))!important}
html[data-viewport-size="phone"][data-katrina-tab="chat"] #chatFaceHost>.face-panel,
html[data-viewport-size="phone-wide"][data-katrina-tab="chat"] #chatFaceHost>.face-panel{align-self:center!important;translate:0 -6px}
html[data-viewport-size="phone"][data-katrina-tab="chat"] #chatFaceHost,
html[data-viewport-size="phone-wide"][data-katrina-tab="chat"] #chatFaceHost{position:relative}
/* The conversation face picker is a visible native select in face-polish.css. */
html[data-viewport-size="phone"] :is(.settings-grid,#cameraSettingsBody form,#identitySettingsBody form,#guardianSettingsBody form,#guardianSoundSettingsBody .settings-form,#offloadSettings .settings-form),
html[data-viewport-size="phone-wide"] :is(.settings-grid,#cameraSettingsBody form,#identitySettingsBody form,#guardianSettingsBody form,#guardianSoundSettingsBody .settings-form,#offloadSettings .settings-form){grid-template-columns:minmax(0,1fr)!important}
html[data-viewport-size="phone"] .phone-grid,html[data-viewport-size="phone-wide"] .phone-grid{grid-template-columns:minmax(0,1fr)!important}

html[data-viewport-size="tablet"] .shell{width:min(100%,1100px);max-width:none;padding-inline:clamp(18px,4vw,42px)!important}
html[data-viewport-size="tablet"] #pageContent{padding-bottom:24px}
html[data-viewport-size="tablet"] :is(.service-grid,.phone-grid,.settings-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important;gap:clamp(10px,2vw,18px)!important}
html[data-viewport-size="tablet"] #dashboardContent{grid-template-columns:minmax(300px,1.2fr) minmax(260px,1fr)!important;grid-template-rows:auto!important;align-items:start;overflow:visible!important}
html[data-viewport-size="tablet"] #dashboardFaceHost .face-panel{height:clamp(300px,48vh,500px)!important}
html[data-viewport-size="tablet"] .overview-side{align-content:start!important}

@media(max-width:760px){
 dialog{width:min(calc(100vw - 20px),620px)!important;max-height:calc(100dvh - var(--smart-nav-h,0px) - 20px)!important;overflow:auto!important}
 .page-heading,.panel,.page-section{max-width:100%!important}
 .settings-range,.settings-stepper{width:100%;min-width:0}
 .settings-stepper{grid-template-columns:minmax(0,1fr)!important}
 .camera-days,.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-height:500px) and (max-width:760px){
 header{min-height:40px!important}.shell{padding-top:5px!important}
 .panel{padding:9px!important}.workspace-navigation .nav-item,.workspace-navigation .mobile-more{min-height:46px!important}
}

@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 html[data-katrina-tab="dashboard"] #dashboardContent{grid-template-columns:minmax(260px,1.25fr) minmax(230px,1fr)!important;grid-template-rows:1fr!important;overflow:auto!important}
 html[data-katrina-tab="dashboard"] #dashboardFaceHost .face-panel{height:calc(100dvh - var(--smart-header-h,0px) - 34px)!important;min-height:180px!important}
 html[data-katrina-tab="dashboard"] .overview-side{align-content:center!important}
}

/* Settings must size by the available card width, never by a stepper's intrinsic width. */
.katrina-premium .settings-stepper{display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-width:0;width:100%;gap:8px}
.katrina-premium .settings-stepper-controls{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;min-width:0;width:100%}
.katrina-premium .settings-stepper-input{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
.katrina-premium .settings-range-scale{display:flex;align-items:center;gap:8px;min-width:0}
.katrina-premium .settings-range-scale>span{white-space:nowrap;overflow-wrap:normal;word-break:normal;font-size:10px}
.katrina-premium label:has(>.settings-range){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center;gap:8px!important;min-width:0}
.katrina-premium label:has(>.settings-range)>.settings-range{grid-column:1/-1;grid-row:2;width:100%;min-width:0}
.katrina-premium label:has(>.settings-range)>.setting-help{position:static!important;grid-column:2;grid-row:1}
.katrina-premium label:has(>.settings-range)>:is(span:not(.settings-range):not(.setting-help),.setting-caption){min-width:0;overflow-wrap:normal;word-break:normal}
.katrina-premium .service-card.auto-setting-help-host{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-content:start;gap:10px!important}
.katrina-premium .service-card .service-name{grid-column:1/-1;padding-inline-end:0!important;min-width:0}
.katrina-premium .service-card .service-line{grid-column:1/-1}
.katrina-premium .service-card>.mcp-switch{position:static!important;grid-column:1;grid-row:3;justify-self:start}
.katrina-premium .service-card>.setting-help{position:static!important;grid-column:2;grid-row:3;justify-self:end}
#smartListenerContent{max-height:none!important;overflow:visible!important;padding-bottom:16px!important}
@media(max-width:760px){
 .katrina-premium label:has(>.settings-range){padding:10px!important}
 .katrina-premium #resultPopupSettings label:has(>.settings-range){display:grid!important;flex-direction:initial!important;padding:10px!important}
 .katrina-premium .service-card{min-height:100px!important}
 .katrina-premium .service-card .service-name{font-size:12px!important;line-height:1.4}
 .katrina-premium .shell>header{flex-wrap:nowrap!important;min-height:52px!important}
 html[data-native-shell] .shell>header{padding-right:58px!important;min-height:60px!important}
 html[data-native-shell] .shell>header .ui-language select{width:72px!important}
 .katrina-premium .listener-feature{min-inline-size:0;max-width:100%}
 .katrina-premium .listener-switch input[type=checkbox]{flex:none;width:40px!important;height:23px!important;min-height:23px!important;margin:0!important}
 .katrina-premium .listener-range input[type=range]{padding:0!important;min-height:24px!important}
 .katrina-premium .listener-range>span>span{overflow-wrap:normal}
}

.katrina-premium .settings-range input.settings-stepper-input{width:100%!important;max-width:none!important;min-width:0!important}
#smartListenerContent>.status-banner{display:block!important;white-space:normal!important;border-radius:12px!important}
@media(max-width:760px){
 .katrina-premium .shell>header .brand{flex:none!important}
 .katrina-premium .shell>header .ui-language{flex:0 0 auto!important;width:auto!important;margin-inline-start:auto!important}
 .katrina-premium .shell>header>.state{flex:none!important;margin-inline-start:0!important}
}

/* Keep the model settings scroll frame fixed when the interface direction changes.
   Only the scroll owner stays LTR; its Arabic content retains RTL direction. */
@media(max-width:760px){
 html[data-katrina-tab="model"] #pageContent{direction:ltr;scrollbar-gutter:stable}
 html[dir="rtl"][data-katrina-tab="model"] #pageContent>*{direction:rtl}
 html[data-katrina-tab="model"] :is(#modelContent,#gemmaRuntimeSettings,#gemmaRuntimeSettings form){min-width:0;max-width:100%;box-sizing:border-box}
}