.join-qr-layout { display:flex; flex:1; min-height:0; min-width:0; position:relative; z-index:1; }
.join-qr-layout > :not(.join-qr-panel) { min-width:0; }
.join-qr-panel { box-sizing:border-box; width:clamp(200px,22vw,300px); flex-shrink:0; padding:56px 24px 24px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; color:#dffcff; background:rgba(6,15,28,.72); border:1px solid #7bffec38; border-radius:24px; overflow:auto; }
.join-qr-panel[hidden] { display:none; }
.join-qr-panel h2 { margin:0; font:700 clamp(22px,2.2vw,36px)/1.25 Manrope,Arial,sans-serif; text-align:center; overflow-wrap:anywhere; }
.join-qr-panel img { display:block; width:100%; height:auto; flex-shrink:0; aspect-ratio:1; border-radius:4%; image-rendering:pixelated; cursor:zoom-in; }
.join-qr-panel img:focus-visible, .join-qr-close:focus-visible { outline:2px solid #00f0ff; outline-offset:4px; }
.join-qr-close { position:absolute; top:12px; right:12px; width:36px; height:36px; padding:0; display:grid; place-items:center; font:28px/1 Arial,sans-serif; border:1px solid #7bffec38; border-radius:50%; background:#071424; color:#dffcff; cursor:pointer; }
.audience-screen-page .join-qr-layout--open { gap:clamp(12px,2vw,28px); }
.chat-panel .join-qr-panel { border-radius:0; border-width:0 1px 0 0; justify-content:flex-start; padding-top:64px; }
.chat-panel .join-qr-layout--open .mc-sidebar { width:clamp(160px,20vw,240px); min-width:160px; }
/* The QR stays physically on the left; each content area retains its reading direction. */
[dir=rtl] .join-qr-layout { flex-direction:row-reverse; }
.join-qr-image-viewer .chat-image-viewer__toolbar { direction:ltr; }
.join-qr-image-viewer [data-image-action=close] { width:56px; height:56px; font-size:40px; border:2px solid #7beaf5; }
.join-qr-image-viewer .chat-image-viewer__stage img { border-radius:4%; image-rendering:pixelated; }
@media(max-width:767px), (hover:none) and (pointer:coarse) {
    .join-qr-panel { display:none; }
    .join-qr-layout { gap:0!important; }
}
