/* Keep portrait and landscape calls contained without cropping the remote video. */
html body.chat-page #callPanel{width:calc(100% - 32px);max-width:880px;margin:16px auto;padding:0;overflow:hidden;border:1px solid #dfd5eb;border-radius:20px;background:#191621;color:#fff;box-shadow:0 8px 28px #24133220}
html body.chat-page #callPanel[hidden]{display:none!important}
html body.chat-page #callStatus{margin:0;padding:14px 18px;font-size:15px;line-height:1.5;color:#fff;overflow-wrap:anywhere}
.call-stage{position:relative;isolation:isolate;background:#111018}
html body.chat-page #remoteCall{display:block;width:100%;height:clamp(240px,52dvh,520px);object-fit:contain;background:#111018}
html body.chat-page #localCall{position:absolute;top:12px;right:12px;width:clamp(80px,15vw,144px);height:auto;aspect-ratio:3/4;max-height:180px;object-fit:cover;border:2px solid #ffffffb3;border-radius:12px;box-shadow:0 4px 16px #0006;background:#282332;pointer-events:none}
html body.chat-page #callButtons{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:12px 16px;background:#241d30}
html body.chat-page #callButtons button{min-height:44px;min-width:112px;margin:0;padding:10px 20px;border-radius:24px;background:#b92546;color:#fff;font-weight:600;white-space:normal}
html body.chat-page #callButtons button:focus-visible{outline:3px solid #fff;outline-offset:3px}
html body.chat-page #callPanel[data-call-mode="audio"] .call-stage{display:none}
@media(max-width:600px){html body.chat-page #callPanel{width:calc(100% - 20px);margin:10px auto;border-radius:16px}html body.chat-page #remoteCall{height:clamp(220px,48dvh,420px)}html body.chat-page #localCall{width:88px;max-height:118px;top:8px;right:8px}html body.chat-page #callStatus{padding:12px 14px}html body.chat-page #callButtons{padding:10px 12px}}
@media(max-height:500px) and (orientation:landscape){html body.chat-page #remoteCall{height:52dvh;min-height:150px}html body.chat-page #localCall{width:64px;max-height:86px}}