/* One face, with separate lanes for status, portrait, tools and controls. */
#facePanel{--face-stage-top:52px;--face-stage-bottom:28px;--face-tools-bottom:14px}
#facePanel:not(.face-arrival-active):not(.face-workspace-active) .face-service-activity{
 position:absolute;inset:auto 14px var(--face-tools-bottom) 72px;display:flex;
 justify-content:flex-end;align-items:flex-end;gap:8px;max-height:none;overflow:hidden;z-index:24;
}
#facePanel .face-service-orb{flex:0 1 44px;min-width:0;gap:4px;animation:none}
#facePanel .face-service-orb img{display:block;width:40px;height:40px;object-fit:contain;filter:none}
#facePanel .face-service-orb span{display:none}
#facePanel.face-workspace-active .face-service-activity{
 position:absolute;inset:auto 16px var(--face-tools-bottom) 16px;display:flex;
 justify-content:center;align-items:flex-start;gap:12px;max-height:none;overflow:hidden;z-index:25;
}
#facePanel.face-workspace-active .face-service-orb{flex-basis:70px}
#facePanel.face-workspace-active .face-service-orb img{width:44px;height:44px}
#facePanel.face-workspace-active .face-service-orb span{
 display:block;margin:0;padding:0;background:transparent;color:#c8dfeb;
 font:500 11px/1.35 'Segoe UI',sans-serif;max-width:100%;overflow-wrap:anywhere;
}
#facePanel .face-service-orb:nth-child(n){display:flex}
#facePanel .face-service-activity[hidden]{display:none!important}
#facePanel .face-service-orb img:not([src]){visibility:hidden}

/* Apply the same available portrait rectangle to both GPU and CPU faces. */
#dashboardFaceHost #facePanel:not(.face-arrival-active) :is(#faceCanvas,.katrina-hologram,.max-face-scene-fx,.max-face-near-fx,.max-face-compat),
#facePanel.face-workspace-active:not(.face-arrival-active) :is(#faceCanvas,.katrina-hologram,.max-face-scene-fx,.max-face-near-fx,.max-face-compat){
 position:absolute!important;inset:auto!important;left:0!important;top:var(--face-stage-top)!important;
 width:100%!important;height:calc(100% - var(--face-stage-top) - var(--face-stage-bottom))!important;
 min-height:0!important;max-height:none!important;max-width:none!important;box-sizing:border-box!important;
}
#facePanel.face-workspace-active{--face-stage-top:max(126px,calc(env(safe-area-inset-top,0px) + 114px))}
#facePanel.face-workspace-active .face-mode-indicator{max-width:calc(50% - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#facePanel.face-workspace-active .katrina-result-launcher{left:auto;right:auto;inset-inline-end:70px;top:max(14px,env(safe-area-inset-top,0px))}
#facePanel.face-arrival-active .face-service-activity{display:none!important}
#facePanel .face-appearance-note{inset-inline:12px;bottom:var(--face-stage-bottom);max-height:35%;overflow:auto}

/* A readable, keyboard-accessible native menu; no transparent hit target. */
.katrina-premium #chatFaceHost{position:relative;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px}
.katrina-premium #chatFaceHost>.face-choice{
 position:static;inset:auto;display:flex!important;grid-column:3;grid-row:1;
 align-self:center;min-width:0;width:100%;height:auto;min-height:44px;margin:0!important;
 padding:0!important;border:0;background:transparent;overflow:visible;z-index:4;
}
#chatFaceHost>.face-choice::before{content:none!important}
#chatFaceHost .face-choice-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.katrina-premium #chatFaceHost #faceAppearance{
 position:static;opacity:1;width:100%!important;height:44px!important;min-height:44px!important;
 margin:0!important;padding:8px 6px!important;font-size:12px!important;line-height:1.4;
 border:1px solid #3c657e;border-radius:11px;background:#0d2535;color:#c9f6ec;
 cursor:pointer;direction:inherit;text-overflow:ellipsis;
}
#faceAppearance:focus-visible{outline:2px solid #8ae7d0;outline-offset:3px}
@media(min-width:761px){
 .katrina-premium #dashboardContent>#dashboardFaceHost{grid-column:1!important;grid-row:1!important}
 .katrina-premium #dashboardContent>.face-choice{grid-column:1;grid-row:2;align-self:start;margin:0}
 .katrina-premium #dashboardContent>.overview-side{grid-column:2;grid-row:1/span 2;align-content:start}
}
@media(min-width:761px) and (max-width:1100px){
 /* Reserve the actual sidebar in both directions; the tablet width reset
    previously let it cover the face picker and the rest of the page. */
 html[data-viewport-size=tablet] .katrina-premium .shell{padding-inline-start:calc(220px + clamp(18px,4vw,42px))!important;padding-inline-end:clamp(18px,4vw,42px)!important}
 html[data-viewport-size=tablet] .katrina-premium #dashboardContent{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html[data-viewport-size=tablet] .katrina-premium .overview-side{grid-template-columns:minmax(0,1fr)!important}
 .katrina-premium #chatFaceHost>.chat-face-state span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.katrina-premium #chatFaceHost>.chat-face-state{position:absolute;inset:auto 12px 5px auto;font-size:10px;gap:5px;max-width:calc(50% - 48px)}
.katrina-premium #chatFaceHost .chat-face-state i{width:5px;height:5px;box-shadow:none}
.katrina-premium #chatFaceHost>.face-panel:not(:fullscreen):not(.expanded){translate:none!important}
#chatFaceHost .chat-face-tools{justify-content:flex-end;gap:5px}
#chatFaceHost .chat-face-tool{width:26px;height:28px;border-radius:8px}
#chatFaceHost .chat-face-tool img{width:19px;height:19px}
@media(max-width:760px){
 body.katrina-premium:has(#shell:not(.hidden)){height:100dvh;min-height:0;padding:0!important;overflow:hidden}
 .katrina-premium #chatFaceHost{padding:8px 10px!important;min-height:80px!important;gap:8px!important}
 html[data-katrina-tab=chat] .katrina-premium #workspaceContent{grid-template-rows:80px minmax(0,1fr)}
 .katrina-premium #chatFaceHost>.face-panel:not(:fullscreen):not(.expanded){width:62px!important;height:62px!important;min-height:62px!important;max-height:62px!important}
 .katrina-premium #chatFaceHost #faceAppearance{font-size:11px!important}
}
@media(max-height:500px) and (orientation:landscape){
 #facePanel.face-workspace-active{--face-stage-top:112px}
 #facePanel.face-workspace-active .face-service-activity{left:66%;right:10px;top:132px;bottom:auto;height:44px;gap:6px}
 #facePanel.face-workspace-active .face-service-orb{flex-basis:38px}
 #facePanel.face-workspace-active .face-service-orb img{width:32px;height:32px}
 #facePanel.face-workspace-active .face-service-orb span{display:none}
 :is(#dashboardFaceHost,#chatFaceHost) #facePanel.face-workspace-active:not(.face-arrival-active) :is(#faceCanvas,.katrina-hologram,.max-face-scene-fx,.max-face-near-fx,.max-face-compat){left:4%!important;width:58%!important;height:calc(100% - var(--face-stage-top) - 16px)!important}
 .face-workspace-active .fc-dock{left:82%;width:34%;bottom:12px;transform:translateX(-50%)}
 .face-workspace-active .fc-actions{flex-wrap:wrap}
 .face-workspace-active .fc-actions>button{flex:1 1 42%;min-width:0}
}
@media(prefers-reduced-motion:reduce){#facePanel .face-service-orb{animation:none!important}}