.room-call-button { flex: none; display: grid; place-items: center; width: var(--touch-small); height: var(--touch-normal); border: 0; background: transparent; color: var(--action-primary); padding: var(--space-1); }
.room-call-button svg { width: var(--icon-normal); height: var(--icon-normal); }
.call-people { display: grid; gap: var(--space-3); }
.call-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--focus-width) solid var(--line-soft); border-radius: var(--radius-control); }
.call-person strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.call-person .ghost { flex: none; width: var(--touch-normal); height: var(--touch-normal); display: grid; place-items: center; padding: var(--space-2); }
.call-person svg { width: var(--icon-normal); height: var(--icon-normal); }
.call-layer { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); overflow: hidden; background: var(--surface-page); color: var(--ink-primary); padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-6) + var(--safe-bottom)); }
.call-layer[hidden] { display: none; }
.call-heading { position: relative; z-index: 1; text-align: center; max-width: 100%; }
.call-heading h2 { font-size: var(--text-title); margin: var(--space-3) 0; overflow-wrap: anywhere; }
.call-heading p { margin: var(--space-2) 0; }
#callStatus { font-size: var(--text-body); color: var(--ink-secondary); }
#callDuration { display: block; font-variant-numeric: tabular-nums; font-size: var(--text-section); }
.call-portrait { display: grid; place-items: center; flex: 1; max-height: 40%; min-height: var(--call-avatar); width: 100%; }
.call-portrait .avatar { width: var(--call-avatar); height: var(--call-avatar); border-radius: var(--radius-pill); font-size: var(--text-title); aspect-ratio: 1; overflow: hidden; }
.call-portrait img { width: 100%; height: 100%; object-fit: cover; }
.call-remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: var(--call-video-surface); pointer-events: none; }
.call-local-video { position: absolute; top: calc(var(--space-4) + env(safe-area-inset-top)); right: var(--space-4); width: var(--call-preview-width); max-width: 28%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-control); z-index: 2; background: var(--surface-soft); }
.call-has-video { background: var(--call-video-surface); color: var(--ink-on-accent); }
.call-has-video .call-heading { align-self: flex-start; text-align: left; max-width: 65%; margin-bottom: auto; border-radius: var(--radius-control); padding: var(--space-3); background: var(--glass-dark); }
.call-has-video .call-heading h2 { font-size: var(--text-section); }
.call-has-video #callStatus, .call-has-video .eyebrow { color: var(--ink-on-accent); }
.call-has-video .call-remote-video { opacity: 1; }
.call-has-video .call-portrait { visibility: hidden; }
.call-controls { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-large); background: var(--surface-glass); color: var(--ink-primary); }
.call-control { width: var(--call-control-size); min-height: var(--call-control-size); border: 0; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-1); background: var(--surface-soft); color: var(--ink-primary); }
.call-control svg { width: var(--icon-large); height: var(--icon-large); }
.call-control span { font-size: var(--text-micro); white-space: nowrap; }
.call-control[aria-pressed="true"] { background: var(--surface-accent); color: var(--action-primary); }
.call-control.call-decline { background: var(--action-danger); color: var(--ink-on-accent); }
.call-control.call-accept { background: var(--feedback-success); color: var(--ink-on-accent); }
.call-error, .call-play { position: relative; z-index: 3; font-size: var(--text-small); text-align: center; max-width: 100%; }
.call-error { color: var(--action-danger); background: var(--surface-card); padding: var(--space-3); border-radius: var(--radius-control); }