/* Consistent call controls: the complete feed always fits within its frame. */
#videoPanel{aspect-ratio:3/4;width:min(210px,25vw);height:auto;max-height:48dvh;border-color:#72ded866}
#videoPanel video,#videoPanel .remote-fallback{object-fit:contain!important;object-position:center}
#videoPanel.hologram-mode{width:100px;height:134px;aspect-ratio:3/4;max-height:30dvh}
#videoPanel.hologram-mode:not(.has-local){width:1px;height:1px;opacity:.001;pointer-events:none;overflow:hidden;border:0}
#videoPanel.hologram-mode #remoteVideo,#videoPanel.hologram-mode #remoteFallback{position:absolute;width:1px;height:1px;opacity:.001;pointer-events:none}
#videoPanel.hologram-mode #localVideo{inset:0;width:100%;height:100%;border:0;border-radius:0;object-fit:contain}
#videoPanel.hologram-mode .video-empty,#videoPanel.hologram-mode #closeCamera{display:none}
#videoPanel.hologram-mode .video-label{font-size:9px;left:4px;top:4px;padding:3px 5px}
#videoPanel.hologram-mode .video-controls{bottom:4px;right:4px;left:auto;transform:none}
#videoPanel.hologram-mode #flipCamera{width:30px;height:30px;min-height:30px;padding:5px}
.action .icon svg,.video-controls svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.action .icon{flex:0 0 38px;border-radius:50%;width:38px;height:38px;background:rgba(196,167,108,.16);color:#dfc893}
.action.active .icon{background:#3f8f68;color:#eafaf1}.action.active .off-slash{display:none}
.action.active{border-color:rgba(63,143,104,.45)}
/* Permission/device error: distinct from the neutral resting or the green active
   state, so a blocked mic doesn't read the same as an ordinary idle control. */
.action.has-error .icon{background:rgba(151,47,32,.16);color:#e8a597}
.action.has-error small{color:#c76a55}
.action .phone-end{display:none}.actions.in-call #talkButton .phone-idle{display:none}.actions.in-call #talkButton .phone-end{display:block}
.actions.in-call #talkButton{background:#9f303c;border-color:#ff899766;color:white;order:5}
.actions.in-call #talkButton .icon{background:#ffffff18;color:white}.actions.in-call #talkButton small{color:#ffe1e5}
.action:focus-visible,.video-controls button:focus-visible{outline:3px solid #b7fff1;outline-offset:3px}
.actions.in-call{padding:10px;border-radius:22px;background:#091812dc;border:1px solid #ffffff20;backdrop-filter:blur(18px);gap:7px}
.actions.in-call #micButton{order:2}.actions.in-call #cameraButton{order:3}.actions.in-call #broadcastButton{display:none}
.actions.in-call .call-header{order:0}.actions.in-call .action{min-height:48px;box-shadow:none}
@media(max-width:760px),(max-height:600px){#videoPanel{width:120px;max-height:34dvh;top:70px}#videoPanel.hologram-mode{width:78px;height:104px}.actions.in-call{padding:6px;border-radius:18px;gap:5px}.actions.in-call .action{min-height:44px}.actions.in-call .icon{width:32px;height:32px;flex-basis:32px}.actions.in-call .copy b{font-size:11px}}