.call-launch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--shell-border); }
.call-launch[hidden], .call-panel[hidden], .call-panel [hidden] { display: none !important; }
.call-launch .hint { margin: 0; font-size: .875rem; }
.call-panel { padding: 18px; border-bottom: 1px solid var(--shell-border); background: linear-gradient(120deg, rgba(139, 181, 255,.08), rgba(75, 139, 250,.04)); }
.call-panel-heading { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.call-panel h3 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.call-status { margin: 5px 0 14px; font-size: .875rem; color: var(--ink-dim); }
.call-live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--accent); }
.call-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.call-controls .btn, .call-launch .btn { font-size: .875rem; min-height: 40px; }
.call-end { background: #742c35 !important; border-color: #b24b5c !important; color: #fff !important; }
.call-screens { display: grid; gap: 12px; margin-top: 14px; }
.call-screen { margin: 0; min-width: 0; }
.call-screen figcaption { margin-bottom: 6px; color: var(--ink-dim); font-size: .875rem; }
.call-screen video { display: block; width: 100%; max-height: 480px; object-fit: contain; background: #020507; border: 1px solid var(--shell-border); border-radius: 10px; }
.call-screen.local video { max-height: 180px; }
.call-notice { margin: 12px 0 0; color: #f5ce85; font-size: .875rem; }
.call-screen-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 700px) { .call-panel, .call-launch { padding: 12px; } .call-controls .btn { flex: 1 1 auto; } }

/* The call surface belongs to the persistent outer document, not a shop page. */
.call-panel{position:fixed;inset:24px;z-index:150;max-width:1440px;margin:auto;display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid #435461;border-radius:18px;background:#10151d;box-shadow:0 25px 100px #000b;overflow:auto}
.call-window-actions{display:flex;gap:8px}.call-panel-heading{flex-shrink:0}.call-panel h3{font-size:1.1rem}.call-status{margin:0;color:#a8bcc8}.call-controls{order:4;justify-content:center;flex-shrink:0;padding-top:10px;border-top:1px solid #2c3743}.call-notice{order:5;margin:0}.call-screens{flex:1;min-height:0;display:none;margin:0;position:relative}.call-panel.has-screen .call-screens{display:grid}.call-screen{display:flex;flex-direction:column;min-height:0}.call-screen video{flex:1;min-height:0;width:100%;height:100%;max-height:none;aspect-ratio:16/9;object-fit:contain}.call-screen.local video{max-height:none}.call-panel.has-remote-screen .call-screen.local{position:absolute;width:min(24%,260px);right:14px;bottom:14px;padding:5px;background:#0a0f16;border:1px solid #627482;border-radius:10px}.call-panel.has-remote-screen .call-screen.local figcaption{font-size:.65rem}
.call-participants{display:flex;align-items:center;justify-content:center;gap:24px;flex:1;min-height:140px}.call-person{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;width:min(40%,280px);padding:24px;border:1px solid #34414d;border-radius:14px;background:#18222d}.call-person strong{max-width:100%;overflow-wrap:anywhere;text-align:center}.call-person>span:last-child{font-size:.75rem;color:#a6b7c4;text-align:center}.call-person .profile-avatar{--avatar-size:112px}.has-screen .call-participants{flex:0 0 auto;min-height:0;gap:10px;justify-content:flex-start}.has-screen .call-person{display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 10px;width:220px;padding:8px 12px}.has-screen .call-person .profile-avatar{--avatar-size:42px;grid-row:1 / 3}.has-screen .call-person strong,.has-screen .call-person>span:last-child{text-align:left;font-size:.75rem}
.call-panel.minimized{inset:auto 0 0;max-width:none;border-radius:0;border-width:1px 0 0;height:92px;overflow:hidden;display:grid;grid-template-columns:minmax(150px,1fr) auto;gap:3px 18px;padding:10px 20px}.call-panel.minimized .call-participants,.call-panel.minimized .call-screens{display:none}.call-panel.minimized .call-panel-heading{grid-column:1;grid-row:1}.call-panel.minimized .call-controls{grid-column:2;grid-row:1 / 3;border:0;padding:0;align-items:center}.call-panel.minimized .call-status{grid-column:1;grid-row:2;font-size:.75rem}.call-panel.minimized .call-notice{grid-column:1 / -1;font-size:.7rem}.call-panel.minimized [data-call-open]{display:none}.call-panel.minimized .call-controls .btn{font-size:.75rem;padding:7px 10px;min-height:34px}
@media(max-width:700px){.call-panel{inset:8px;padding:12px;gap:8px}.call-person{padding:18px 10px;width:46%}.call-person .profile-avatar{--avatar-size:80px}.call-panel.minimized{height:168px;grid-template-columns:1fr;padding:8px 12px}.call-panel.minimized .call-controls{grid-column:1;grid-row:3;justify-content:flex-start}.call-panel.minimized .call-controls .btn{flex:1}.call-panel.minimized .call-notice{grid-row:4}.call-panel.minimized .call-panel-heading{gap:5px}.call-panel h3{font-size:.9rem}.call-window-actions .btn{font-size:.72rem;min-height:32px;padding:6px 9px}.has-screen .call-person{width:50%;padding:6px;grid-template-columns:32px minmax(0,1fr)}.has-screen .call-person .profile-avatar{--avatar-size:32px}body.call-docked #shop-page{height:calc(100dvh - 168px)!important}}

.call-panel.minimized .call-panel-heading{flex-wrap:nowrap;min-width:0}.call-panel.minimized h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.call-panel.minimized .call-window-actions{flex-shrink:0}