/* Active-call layout only. Main owns call/camera/chat runtime. */
#app[data-call-active="true"] {height:100svh;height:100dvh;min-height:0;max-width:none;padding:0;display:flex;flex-direction:column;overflow:hidden}
#app[data-call-active="true"] > .brandbar {position:relative;flex:0 0 78px;width:100%;height:78px;padding:14px 24px;z-index:15}
#app[data-call-active="true"] > .conversation {flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0 20px 20px;display:grid;gap:20px;overflow:hidden}
#app[data-call-active="true"] > .conversation:not(.chat-collapsed){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#app[data-call-active="true"] .presence {position:relative;width:100%;height:100%;min-height:0;padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:24px}
#app[data-call-active="true"] .scene-body {position:relative;flex:1;min-height:0;width:100%;height:auto;margin:0;overflow:hidden}
#app[data-call-active="true"] #stage {position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;overflow:hidden}
#app[data-call-active="true"] #avatar,#app[data-call-active="true"] #avatar img {width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:none}
#app[data-call-active="true"] #stage.selfie-r70-active .selfie-r70-layer {object-fit:cover;object-position:50% 0%;width:100%;height:100%;transform:none}
#app[data-call-active="true"] .controls,#app[data-call-active="true"] .controls.active {flex:0 0 auto;position:relative;width:100%;max-width:none;margin:0;padding:8px 12px max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,74px);grid-template-rows:auto auto;justify-content:center;align-content:end;gap:8px 20px}
#app[data-call-active="true"] .controls>.phase {grid-column:1/-1;margin:0 0 2px;min-height:22px}
#app[data-call-active="true"] .controls>.notice,#app[data-call-active="true"] .controls>.camera-status-note {grid-column:1/-1;max-width:100%;margin:0}
#app[data-call-active="true"] .controls>#primary-action,#app[data-call-active="true"] .controls>#camera-toggle,#app[data-call-active="true"] .controls>#hangup {grid-column:auto;grid-row:auto;margin:0;justify-self:center}
#app[data-call-active="true"] .camera-self-view {right:16px;bottom:18px;width:92px;height:124px}
#app[data-call-active="true"] .chat {position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;max-height:none;transform:none;inset:auto;margin:0;border:1px solid #e6e9df;border-radius:24px;overflow:hidden}
#app[data-call-active="true"] .messages {flex:1;min-height:0;overflow:auto}
#app[data-call-active="true"] .composer {position:relative;flex:none;inset:auto;margin:0}
#app[data-call-active="true"] > footer,#app[data-call-active="true"] > #mobile-social,#app[data-call-active="true"] > #call-share-actions,#app[data-call-active="true"] #desktop-steps {display:none!important}
/* Selfie fills the entire presence pane; controls float over a legible scrim. */
#app[data-call-active="true"]:has(.selfie-r70-active) .presence .scene-body {position:absolute;inset:0;flex:none;height:100%}
#app[data-call-active="true"]:has(.selfie-r70-active) .presence .controls {position:absolute;bottom:0;left:0;right:0;z-index:12;padding-top:42px;background:linear-gradient(transparent,#17201488);color:white}
#app[data-call-active="true"]:has(.selfie-r70-active) .controls .phase {color:white;font-size:13px;text-shadow:0 1px 8px #0008}
#app[data-call-active="true"]:has(.selfie-r70-active) .controls #primary-label,#app[data-call-active="true"]:has(.selfie-r70-active) .controls .camera-control-label,#app[data-call-active="true"]:has(.selfie-r70-active) .controls #hangup-label {color:white!important;text-shadow:0 1px 8px #0009}
#app[data-call-active="true"]:has(.selfie-r70-active) .camera-self-view {bottom:170px}
@media(max-width:767px),(max-width:1024px) and (pointer:coarse){
 #conversation-panel,#chat-reopen,#mobile-chat-open,#typing {display:none!important}
 #app[data-call-active="true"] > .brandbar {flex-basis:78px;height:78px;padding:12px 20px}
 #app[data-call-active="true"] > .conversation,#app[data-call-active="true"] > .conversation:not(.chat-collapsed) {display:block;padding:0;gap:0;height:calc(100% - 78px);width:100%;margin:0}
 #app[data-call-active="true"] .presence {border-radius:0}
 #app[data-call-active="true"] .brandbar>.mobile-help-open {display:none!important}
 #app[data-call-active="true"]:has(.selfie-r70-active) > .brandbar {position:absolute;left:0;top:0;right:0;background:linear-gradient(#fff9,transparent);pointer-events:none}
 #app[data-call-active="true"]:has(.selfie-r70-active) > .brandbar .lockup {background:#ffffffe0;border-radius:16px;padding:7px 12px;backdrop-filter:blur(12px);width:max-content;pointer-events:auto}
 #app[data-call-active="true"]:has(.selfie-r70-active) > .conversation {height:100%;flex:1}
 #app[data-call-active="true"] .controls {gap:8px 18px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 #app[data-call-active="true"] .camera-self-view {width:78px;height:106px;right:14px;bottom:18px}
 #app[data-call-active="true"]:has(.selfie-r70-active) .camera-self-view {bottom:174px}
}
@media(max-height:480px){
 #app[data-call-active="true"] .controls {gap:3px 16px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 #app[data-call-active="true"]:has(.selfie-r70-active) .presence .controls {padding-top:12px}
 #app[data-call-active="true"]:has(.selfie-r70-active) .camera-self-view {bottom:125px;width:55px;height:74px}
 #app[data-call-active="true"] > .brandbar {flex-basis:58px;height:58px;padding:6px 12px}
 #app[data-call-active="true"]:has(.selfie-r70-active) #stage .selfie-r70-layer {object-position:center 24%}
}
@media(max-height:480px) and (orientation:landscape){
 #app[data-call-active="true"]:has(.selfie-r70-active) #stage {background:#eee9df}
 #app[data-call-active="true"]:has(.selfie-r70-active) #stage .selfie-r70-layer {object-fit:contain;object-position:center center}
 #app[data-call-active="true"]:has(.selfie-r70-active) > .brandbar .lockup {margin-left:0;margin-right:auto}
}

/* Fit the actual ordinary-call player like the approved full-figure preview. */
#app[data-call-active="true"] #stage .main-motion-video{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center bottom;transform:none}

/* Owner: the selfie picture stays clear of the brand lockup. */
#app[data-call-active="true"]:has(.selfie-r70-active) > .brandbar .lockup{visibility:hidden;pointer-events:none}