/* A quiet, theme-aware listening room. The display comes only from the DJ's explicit crop. */
.call-view.dj-view { overflow: auto; background: var(--bg-chat); color: var(--text); }
.dj-deck { width: min(880px, 100%); min-height: 100%; padding: clamp(18px, 3vw, 40px); margin: auto; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.dj-topline, .dj-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dj-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 11px; letter-spacing: .16em; font-weight: 700; }
.dj-audience { font-size: 12px; color: var(--text-muted); }
.dj-now-playing { padding-top: 10px; }
.dj-status { color: var(--text-muted); font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.dj-status.live { color: var(--online); }
.dj-status.live::before { content: ''; display: inline-block; width: 6px; height: 6px; background: currentColor; border-radius: 50%; margin-right: 7px; }
.dj-heading { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.15; letter-spacing: -.035em; margin: 10px 0; color: var(--text-strong); overflow-wrap: anywhere; }
.dj-byline { color: var(--text-muted); margin: 0; }
.dj-artwork { margin: 0; padding: 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; }
.dj-track-display { display: block; width: 100%; max-height: 180px; object-fit: contain; background: #080a0f; border-radius: 6px; }
.dj-artwork figcaption { font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.dj-visual-stage { flex: 1; min-height: 140px; position: relative; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--bg-panel); }
.dj-visualizer { display: block; width: 100%; height: clamp(150px, 28vh, 300px); }
.dj-visual-stage:has(.dj-visualizer[hidden]) { display: none; }
.dj-options label { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--text-muted); }
.dj-options select { width: 130px; padding: 7px 10px; border-radius: 6px; background: var(--bg-input); color: var(--text-strong); border: 1px solid var(--border); }
.dj-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dj-actions button { min-height: 40px; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; }
.dj-actions button[hidden] { display: none; }
.dj-note { margin: 0; line-height: 1.5; }
.dj-track-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; }
.dj-track-form[hidden] { display: none; }
.dj-track-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.dj-track-fields input { min-width: 120px; flex: 1; }
.dj-track-fields button { min-height: 36px; }
.dj-badge { color: var(--online); font-size: 9px; font-weight: 700; letter-spacing: .07em; margin-left: 4px; }
html[data-layout="phone"] .dj-deck { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
html[data-layout="phone"] .dj-options { align-items: flex-start; }
html[data-layout="phone"] .dj-visualizer { height: 180px; }

/* Ordinary video calls deliberately keep dark labels in the light theme; the DJ deck follows
   the surrounding interface instead. Inherit the actual palette, including custom themes. */
:root[data-theme="light"] .call-view.dj-view { --text: inherit; --text-muted: inherit; --text-strong: inherit; --bg-sidebar: inherit; --bg-active: inherit; --bg-hover: inherit; --warning: inherit; }
.dj-actions button:not(.primary), .dj-track-fields button { color: var(--text-strong); background: var(--bg-panel); border: 1px solid var(--border); }
.dj-actions button:not(.primary):hover, .dj-track-fields button:hover { background: var(--bg-hover); }
.dj-actions button.danger-text { color: var(--danger); }
.voice-panel .controls.dj-controls { display: block; padding: 3px 0; }