.rtc-panel { position:fixed; z-index:12000; inset: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); margin:auto; width:min(640px, calc(100% - 24px)); max-height:90dvh; height:max-content; overflow:auto; box-sizing:border-box; padding:24px; border:1px solid #44616a; border-radius:28px; background:#132d36; color:#f5fbfd; box-shadow:0 15px 60px #0008; }
.rtc-panel h2 { margin:0 0 16px; font-size:20px; }
.rtc-panel button { border:1px solid #54717b; border-radius:24px; padding:12px 16px; margin:4px; background:#234854; color:white; font:inherit; }
.rtc-panel button:disabled { opacity:.5; }
.rtc-panel .rtc-hangup { background:#a52d3c; }
.rtc-controls { display:flex; flex-wrap:nowrap; justify-content:center; gap:6px; padding-top:12px; }
.rtc-media { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.rtc-media video { width:min(240px, 100%); max-height:40dvh; border-radius:16px; object-fit:contain; background:#000; }
.rtc-media audio { display:none; }
.rtc-member { display:flex; align-items:center; padding:12px 0; gap:12px; }
.rtc-panel { max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; min-width:0; }
.rtc-member { min-width:0; overflow-wrap:anywhere; }
.rtc-member input[type="checkbox"] { width:22px; min-width:22px; height:22px; min-height:22px; flex:0 0 22px; padding:0; margin:0; }
.rtc-panel.rtc-selection { display:flex; flex-direction:column; overflow:hidden; width:min(480px, calc(100% - 24px)); padding:16px; }
.rtc-selection h2 { flex:0 0 auto; overflow-wrap:anywhere; max-height:20dvh; overflow:auto; }
.rtc-members { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.rtc-selection-actions { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; padding-top:8px; }
.rtc-selection-actions button { max-width:100%; white-space:normal; }
.rtc-panel .rtc-icon-button { display:inline-grid; place-items:center; width:56px; height:56px; padding:15px; border-radius:50%; }
.rtc-icon-button svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.rtc-panel .rtc-accept { background:#218e62; }
.rtc-hangup svg { rotate:135deg; }
.rtc-panel .rtc-off { color:#ffb4ba; }
.rtc-controls .rtc-icon-button { width:46px; height:46px; margin:0; padding:11px; flex:0 0 46px; }
.rtc-controls .rtc-hangup { order:5; }
[data-theme="dark"] .rtc-panel { background:#1e2025; border-color:#34373d; }
[data-theme="dark"] .rtc-panel button:not(.rtc-hangup):not(.rtc-accept) { background:#34373d; border-color:#535761; }
.chat-header > .header-calls { display:flex; flex:0 0 auto; margin-left:auto; padding:3px; border:1px solid var(--chat-glass-line, var(--line)); border-radius:999px; background:var(--chat-glass, var(--surface)); overflow:visible; }
.header-calls button { display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink); padding:10px; }
.header-calls svg { display:block; width:24px; height:24px; fill:currentColor; }
.chat-header > .header-calls.hidden { display:none; }
.rtc-panel.rtc-call-screen { inset:0; width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; margin:0; padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom)); overflow:hidden; background:radial-gradient(ellipse at 50% 48%,#34347c 0%,#1b2b50 40%,#17191f 80%); color:#fff; display:flex; flex-direction:column; align-items:center; }
.rtc-call-screen h2 { z-index:2; margin:12dvh 0 10px; font-size:clamp(24px,5vw,36px); text-align:center; max-width:100%; overflow-wrap:anywhere; }
.rtc-call-screen > p { z-index:2; margin:0; color:#cbd2e4; text-align:center; }
.rtc-call-avatar { position:absolute; top:35%; width:min(48vw,240px,32dvh); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:clamp(38px,12vw,80px); background:linear-gradient(140deg,#108ba6,#4d448c); color:white; }
.rtc-call-screen .rtc-controls { position:absolute; z-index:4; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(90%,420px); padding:12px; border-radius:64px; background:#35363ddd; justify-content:space-around; box-sizing:border-box; }
.rtc-call-screen .rtc-controls .rtc-icon-button { width:52px; height:52px; flex-basis:52px; padding:14px; background:transparent; border:0; }
.rtc-call-screen .rtc-controls .rtc-hangup { background:#cc405b; }
.rtc-call-screen .rtc-controls .rtc-accept { background:#218e62; }
.rtc-call-screen .rtc-media { position:absolute; inset:0; display:flex; align-items:center; }
.rtc-call-screen .rtc-media video[data-local="false"] { width:100%; max-height:100%; height:100%; border-radius:0; object-fit:contain; }
.rtc-call-screen .rtc-media video[data-local="true"] { position:absolute; z-index:3; right:16px; bottom:115px; width:min(30vw,150px); height:24dvh; object-fit:cover; max-height:240px; border-radius:24px; }
.rtc-call-screen .rtc-flip-camera { position:absolute; z-index:4; right:18px; bottom:calc(115px + 24dvh - 48px); width:40px; height:40px; padding:8px; background:#35363ddd; border:0; }
.rtc-has-video .rtc-call-avatar { display:none; }
.rtc-call-screen:not(.rtc-has-local-video) .rtc-flip-camera { display:none; }
.rtc-controls .rtc-sound { order:-1; }
.rtc-has-video h2,.rtc-has-video > p { text-shadow:0 1px 5px #000; }
@media (orientation:landscape) and (max-height:500px) {
 .rtc-call-screen h2 { margin-top:0; font-size:24px; }
 .rtc-call-avatar { top:26%; width:32dvh; font-size:40px; }
 .rtc-call-screen .rtc-controls { bottom:12px; padding:6px; }
 .rtc-call-screen .rtc-media video[data-local="true"] { bottom:90px; height:38dvh; }
 .rtc-call-screen .rtc-flip-camera { bottom:calc(90px + 38dvh - 48px); }
}
@media (max-width:760px), (hover:none) and (pointer:coarse) and (max-width:1200px) {
 .chat-header { gap:8px; }
 .chat-header > .chat-identity { flex:1 1 0; min-width:0; max-width:none; gap:6px; padding-right:10px; }
 .chat-header > .header-calls { flex:0 0 auto; }
 .chat-header .mobile-back { flex:0 0 44px; width:44px; height:44px; }
}