.call-entry { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px; }
.call-entry button,.call-dialog button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border:1px solid var(--qmx-line,var(--line,#b3c7bd));border-radius:14px;font:inherit;font-size:14px;line-height:1.4;background:var(--qmx-soft,var(--soft,#e9efe9));color:var(--qmx-ink,var(--ink,#153e34));cursor:pointer;white-space:pre-line;touch-action:manipulation; }
.call-icon { display:inline-flex;flex:0 0 auto;width:22px;height:22px; }.call-icon svg { width:100%;height:100%; }
.call-launch:disabled,.call-dialog button:disabled { opacity:.5;cursor:not-allowed; }
.call-dialog [hidden] { display:none!important; }
.call-dialog { box-sizing:border-box;width:min(1100px,calc(100vw - 32px));max-width:none;height:min(920px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:1px solid var(--qmx-line,#b3c7bd);border-radius:26px;color:var(--qmx-ink,#153e34);background:var(--qmx-surface,#fffdf8);overflow:auto;overscroll-behavior:contain; }
.call-dialog[open] { display:flex;flex-direction:column;gap:10px; }.call-dialog::backdrop { background:rgb(2 15 13 / .8); }
.call-dialog header { display:flex;justify-content:space-between;align-items:center;gap:14px;flex-shrink:0; }.call-dialog h2 { margin:0;font:700 clamp(22px,3vw,30px)/1.35 Georgia,'Noto Serif SC',serif;white-space:pre-line; }
.call-status { margin:0;font-size:14px;line-height:1.6;color:var(--qmx-muted,#53645e);white-space:pre-line;flex-shrink:0; }
.call-stage { position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:200px;border-radius:20px;overflow:hidden;background:#07130f;color:#f8f9f7; }
.call-remote { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }.call-local { position:absolute;bottom:16px;right:16px;width:24%;max-width:220px;min-width:100px;max-height:36%;object-fit:contain;background:#0f211c;border:2px solid #fff;border-radius:16px;box-shadow:0 8px 26px #0006; }.call-local[data-facing="user"] { transform:scaleX(-1); }
.call-placeholder { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:26px;text-align:center;max-width:100%;box-sizing:border-box; }.call-avatar { display:grid;place-items:center;width:108px;height:108px;background:var(--qmx-surface,#fffdf8);color:var(--qmx-ink,#153e34);border-radius:32px;font-size:44px; }.call-placeholder strong { font-size:clamp(23px,4vw,36px);overflow-wrap:anywhere; }.call-duration { font:700 23px/1.4 ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:.05em; }
.call-dialog[data-kind="audio"] .call-stage { background:var(--qmx-soft,#e9efe9);color:var(--qmx-ink,#153e34); }
.call-dialog .call-play { position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);z-index:2; }
.call-controls { display:flex;flex-wrap:wrap;justify-content:center;gap:12px;flex-shrink:0;padding-top:6px; }.call-controls button { flex:0 1 160px;min-height:64px;flex-direction:column; }.call-controls button[aria-pressed="true"] { border:2px solid var(--qmx-brand-2,#16806b); }
.call-dialog .call-end { background:#be3028;color:#fff;border-color:#be3028;min-width:140px; }.call-dialog .call-accept { background:#176b42;color:#fff;border-color:#176b42;min-width:140px; }
.call-security { flex-shrink:0;padding-top:8px;font-size:12px;line-height:1.6;color:var(--qmx-muted,#53645e);border-top:1px solid var(--qmx-line,#b3c7bd); }.call-security summary { cursor:pointer;white-space:pre-line; }.call-security code { display:block;font:700 18px/1.8 ui-monospace,monospace;letter-spacing:.1em;color:var(--qmx-ink,#153e34); }.call-security p { white-space:pre-line; }
.call-dialog button:focus-visible,.call-security summary:focus-visible { outline:3px solid var(--qmx-brand-2,#16806b);outline-offset:3px; }
@media(max-width:640px) { .call-dialog { width:100vw;height:100dvh;max-height:100dvh;padding:calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:0; }.call-stage { border-radius:16px;min-height:160px; }.call-controls { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.call-controls button { min-width:0;padding:9px;font-size:13px; }.call-controls .call-end { grid-column:1/-1;min-height:60px;flex-direction:row; }.call-local { bottom:12px;right:12px;width:28%; }.call-avatar { width:88px;height:88px;font-size:36px; } }
@media(max-height:560px) and (min-width:641px) { .call-dialog { display:grid;grid-template-columns:1fr 220px;grid-template-rows:auto auto 1fr; }.call-dialog header,.call-status { grid-column:1/-1; }.call-stage { min-height:120px;grid-row:3/5; }.call-controls { align-content:start; }.call-security { grid-column:2; }.call-placeholder { gap:8px; }.call-avatar { width:60px;height:60px;font-size:28px; } }

/* A short-desktop layout must never make a closed dialog visible. */
.call-dialog:not([open]) { display: none !important; }