.call-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.call-actions[hidden],#call-root[hidden]{display:none!important}
.call-start{min-height:36px;border:1px solid #444;border-radius:9px;background:#101010;color:#fff;padding:7px 10px;font-size:11px;white-space:nowrap}.call-start:disabled{color:#777;border-color:#222;cursor:not-allowed}
#call-root{position:fixed;z-index:180;top:var(--app-top,0px);left:0;right:0;height:var(--app-height,100dvh);background:#000e;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));overflow-y:auto;touch-action:pan-y}
.call-sheet{background:#0c0c0c;border:1px solid #393939;border-radius:20px;padding:25px;width:min(620px,100%);max-height:100%;overflow-y:auto;color:#fff;text-align:center;outline:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.call-sheet h2{font-size:23px;margin:0 0 9px}.call-peer{font-size:17px;overflow-wrap:anywhere;margin-bottom:9px}.call-status{min-height:24px;font-size:12px;color:#ccc;line-height:1.8;margin:0 0 16px}.call-picture{position:relative;width:100%;height:clamp(150px,40vh,340px);background:#000;border:1px solid #252525;border-radius:12px;overflow:hidden;margin-bottom:18px}.call-remote-video{width:100%;height:100%;object-fit:contain}.call-local-video{position:absolute;bottom:10px;right:10px;width:27%;max-height:42%;object-fit:cover;background:#111;border:1px solid #555;border-radius:7px;transform:scaleX(-1)}
.call-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.call-controls button{min-height:44px;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500}.call-answer{background:#fff;color:#000;border:1px solid #fff}.call-end{background:#202020;color:#fff;border:1px solid #777}.call-control{background:#080808;color:#fff;border:1px solid #444}.call-controls button:disabled{opacity:.45}.call-controls [hidden],.call-picture[hidden]{display:none!important}.call-note{font-size:10px;line-height:1.9;color:#aaa;margin:20px 0 0;text-wrap:pretty}.call-sheet audio{display:none}
@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){.call-start{font-size:10px;padding:7px 8px}.call-actions{gap:4px}.chat-heading-name{min-width:0}.chat-heading-name h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.call-sheet{padding:20px 16px}.call-picture{height:min(42dvh,270px)}.call-note{margin-top:14px}}
@media(max-height:380px){.call-sheet{padding:14px}.call-sheet h2{font-size:18px}.call-picture{height:100px;margin-bottom:10px}.call-status{margin-bottom:8px}.call-note{margin-top:10px;font-size:9px}.call-controls button{min-height:36px;padding:8px 11px}}

/* Consistent messenger controls; the sheet remains independently scrollable
   when a landscape viewport cannot show video and every control together. */
.call-actions{gap:7px;align-items:center}
.call-start{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;line-height:1.3;padding:8px 11px;border-radius:9px;background:#fff;color:#000;border-color:#fff;font-size:12px;font-weight:500}
.call-start:hover:not(:disabled){background:#e5e5e5;border-color:#e5e5e5}
.call-start:disabled{background:#151515;color:#888;border-color:#333}
#call-root{background:#000e;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.call-sheet{width:min(640px,100%);border-color:#333;border-radius:20px;padding:28px;background:#101010;box-shadow:0 18px 60px #0008}
.call-sheet h2{font-size:23px;line-height:1.35;font-weight:600;margin:0 0 10px}
.call-peer{font-size:18px;line-height:1.5;margin-bottom:8px}
.call-status{font-size:13px;line-height:1.7;min-height:24px;color:#ccc;margin-bottom:18px;overflow-wrap:anywhere}
.call-picture{height:clamp(160px,40vh,340px);border-color:#333;border-radius:14px;margin-bottom:20px}
.call-local-video{right:12px;bottom:12px;border-radius:9px;border-color:#777}
.call-controls{align-items:center;gap:10px}
.call-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:88px;line-height:1.4;font-size:13px;padding:10px 15px;border-radius:10px}
.call-answer{background:#fff;color:#000;border-color:#fff}
.call-end{background:#292929;color:#fff;border-color:#888}
.call-control{background:#090909;color:#fff;border-color:#555}
.call-note{font-size:11px;line-height:1.8;margin-top:20px;color:#bbb}
@media(max-width:700px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
  .call-actions{gap:5px}
  .call-start{min-height:34px;font-size:11px;padding:7px 8px;gap:4px}
  #call-root{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .call-sheet{padding:22px 16px;border-radius:18px}
  .call-sheet h2{font-size:22px}
  .call-peer{font-size:17px}
  .call-status{font-size:12px;margin-bottom:16px}
  .call-picture{height:clamp(130px,38dvh,300px);margin-bottom:16px;border-radius:12px}
  .call-controls{gap:8px}
  .call-controls button{min-height:44px;min-width:86px;font-size:13px;padding:10px 13px}
  .call-note{font-size:11px;margin-top:16px}
  .keyboard-tight .call-start{min-height:30px;font-size:10px;padding:5px 7px}
  .keyboard-tight #call-root{padding:8px}
  .keyboard-tight .call-sheet{padding:12px;max-height:100%;border-radius:13px}
  .keyboard-tight .call-sheet h2{font-size:18px;margin-bottom:6px}
  .keyboard-tight .call-status{margin-bottom:10px}
  .keyboard-tight .call-picture{height:100px;margin-bottom:12px}
  .keyboard-tight .call-controls button{min-height:36px;min-width:75px;padding:7px 10px;font-size:12px}
}
@media(max-height:380px){
  .call-sheet{padding:14px;border-radius:14px}
  .call-sheet h2{font-size:19px;margin-bottom:6px}
  .call-peer{font-size:15px;margin-bottom:6px}
  .call-status{margin-bottom:10px;font-size:11px}
  .call-picture{height:110px;margin-bottom:12px}
  .call-controls button{min-height:36px;min-width:76px;font-size:12px;padding:7px 10px}
  .call-note{font-size:10px;margin-top:12px}
}