/* Viewer chrome stays outside the initial image fit; zoom remains unchanged. */
.photo-viewer .photo-viewer__caption {
 font-size:12px;line-height:1.4;padding:6px 10px;
 background:rgba(0,0,0,.65);border-radius:8px;
 left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
 max-height:46px;-webkit-line-clamp:2;
}
.photo-viewer :is(.photo-viewer__pill,.photo-viewer__close){min-width:44px;min-height:44px;flex-shrink:0;}
.photo-viewer :is(button,a):focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:640px),(max-height:500px){
 .photo-viewer .photo-viewer__topbar{
  top:max(8px,env(safe-area-inset-top,0px));left:max(72px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));gap:4px;justify-content:flex-end;flex-wrap:wrap;
 }
 .photo-viewer .photo-viewer__pill{width:44px;height:44px;padding:0;justify-content:center;flex:0 0 44px;}
 .photo-viewer .photo-viewer__pill>span{display:none;}
 .photo-viewer .photo-viewer__counter{left:max(8px,env(safe-area-inset-left,0px));padding:6px;max-width:60px;font-size:12px;}
 .photo-viewer .photo-viewer__stage{top:calc(60px + env(safe-area-inset-top,0px));bottom:calc(58px + env(safe-area-inset-bottom,0px));}
 .photo-viewer .photo-viewer__img,.photo-viewer .photo-viewer__video{max-width:100%;max-height:100%;height:auto;}
 .photo-viewer .photo-viewer__video{width:100%;height:100%;}
}

/* Keep preview and joining controls side by side on a short landscape screen. */
@media (min-width:600px) and (max-height:500px) {
 html #call-prejoin {flex-direction:row;align-items:stretch;gap:16px;padding: max(8px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));}
 #call-prejoin .call-prejoin__media {flex:1 1 42%;width:0;max-height:100%;height:100%;aspect-ratio:auto;margin:0;}
 #call-prejoin .call-prejoin__body {flex:1 1 58%;width:0;max-width:none;min-height:0;margin:0;gap:6px;overflow-y:auto;padding-bottom:0;}
 #call-prejoin .call-prejoin__row {padding:6px 10px;gap:4px;}
 #call-prejoin .call-prejoin__peer {margin-top:0;}
 #call-prejoin .call-prejoin__join {min-height:44px;flex-shrink:0;}
 #call-prejoin .call-prejoin__cancel {min-height:44px;flex-shrink:0;}
}