/* Music theme tokens and invitation-card theme integration. */

/* Together-listening surfaces inherit the active phone theme, including the
 * friend picker and invitation card rendered inside the chat view. */
body[class*="qixi-theme-"] .music-view .music-invite-sheet {
  --invite-surface: var(--music-surface);
  --invite-surface-strong: var(--music-surface-strong);
  --invite-border: var(--music-border);
  --invite-text: var(--music-text);
  --invite-muted: var(--music-muted);
  --invite-accent: var(--music-accent);
  --invite-accent-ink: var(--music-accent-ink);
}
body[class*="qixi-theme-"] .music-view .music-invite-backdrop {
  background: color-mix(in srgb, var(--qixi-frame) 42%, transparent);
}
body[class*="qixi-theme-"] .music-view .music-invite-panel {
  border: 1px solid var(--invite-border);
  background: var(--invite-surface);
  box-shadow: var(--qixi-shadow);
  color: var(--invite-text);
}
body[class*="qixi-theme-"] .music-view .music-invite-panel h3,
body[class*="qixi-theme-"] .music-view .music-invite-preview strong { color: var(--invite-text); }
body[class*="qixi-theme-"] .music-view .music-sheet-close,
body[class*="qixi-theme-"] .music-view .music-invite-contact,
body[class*="qixi-theme-"] .music-view .music-invite-preview { color: var(--invite-text); background: var(--music-soft); border-color: var(--invite-border); }
body[class*="qixi-theme-"] .music-view .music-sheet-close:hover,
body[class*="qixi-theme-"] .music-view .music-invite-contact:hover { background: var(--music-row-active); border-color: var(--invite-accent); }
body[class*="qixi-theme-"] .music-view .music-invite-preview-icon,
body[class*="qixi-theme-"] .music-view .music-invite-icon,
body[class*="qixi-theme-"] .music-view .music-invite-link { color: var(--invite-accent-ink); background: var(--invite-accent); }
body[class*="qixi-theme-"] .music-view .music-invite-preview small,
body[class*="qixi-theme-"] .music-view .music-invite-progress,
body[class*="qixi-theme-"] .music-view .music-invite-loading,
body[class*="qixi-theme-"] .music-view .music-invite-contact small { color: var(--invite-muted); }
body[class*="qixi-theme-"] .music-view .music-invite-contact > svg { color: var(--invite-accent-strong); }

/* The old recommendation panel is intentionally removed from the music
 * surface; playback remains available through the current track controls. */
.music-view .music-queue-panel,
.music-view #music-queue { display: none !important; }

/* Invitation cards live in the conversation modal rather than inside the
 * music view, so map them directly to the page theme variables. */
body[class*="qixi-theme-"] .music-invite-card {
  color: var(--ink);
  background: var(--qixi-surface) !important;
  border-color: var(--qixi-border);
  box-shadow: var(--qixi-shadow);
}
body[class*="qixi-theme-"] .music-invite-card:hover { border-color: var(--qixi-accent); }
body[class*="qixi-theme-"] .music-invite-card .music-invite-icon,
body[class*="qixi-theme-"] .music-invite-card .music-invite-link { color: #fff; background: var(--qixi-accent); }
body[class*="qixi-theme-"] .music-invite-card .music-invite-label,
body[class*="qixi-theme-"] .music-invite-card .music-invite-track,
body[class*="qixi-theme-"] .music-invite-card .music-invite-duration { color: var(--muted); }
body[class*="qixi-theme-"] .music-invite-card .music-invite-avatar { border-color: var(--qixi-surface); }

/* Music surfaces use the active phone palette instead of a fixed dark skin. */
.music-view {
  --music-bg: #211a1b;
  --music-surface: rgba(50,39,40,.86);
  --music-surface-strong: #302526;
  --music-border: rgba(255,255,255,.12);
  --music-text: #f4ede5;
  --music-muted: #b9aaa2;
  --music-accent: #e5d3bf;
  --music-accent-strong: #d8a46d;
  --music-accent-ink: #2b2020;
  --music-soft: rgba(255,255,255,.08);
  --music-row-active: rgba(255,255,255,.1);
  background: var(--music-bg);
  color: var(--music-text);
}
body[class*="qixi-theme-"] .music-view {
  --music-bg: var(--qixi-bg);
  --music-surface: var(--qixi-surface);
  --music-surface-strong: var(--qixi-surface-strong);
  --music-border: var(--qixi-border);
  --music-text: var(--ink);
  --music-muted: var(--muted);
  --music-accent: var(--qixi-accent);
  --music-accent-strong: var(--qixi-accent-strong);
  --music-accent-ink: #fff;
  --music-soft: var(--qixi-accent-soft);
  --music-row-active: var(--qixi-accent-soft);
}
body[class*="qixi-theme-"] .music-view .app-header,
body[class*="qixi-theme-"] .music-view .app-header h2,
body[class*="qixi-theme-"] .music-view .tiny-label { color: var(--music-text) !important; }
body[class*="qixi-theme-"] .music-view .back-button,
body[class*="qixi-theme-"] .music-view .music-invite-button { color: var(--music-muted) !important; background: var(--music-soft) !important; }
body[class*="qixi-theme-"] .music-view .music-now-playing,
body[class*="qixi-theme-"] .music-view .together-listening-panel,
body[class*="qixi-theme-"] .music-view .music-queue-panel { border-color: var(--music-border); background: var(--music-surface); box-shadow: var(--qixi-shadow); }
body[class*="qixi-theme-"] .music-view .music-cover-wrap { border-color: var(--music-border); box-shadow: var(--qixi-shadow); }
body[class*="qixi-theme-"] .music-view .music-vinyl-mark { background: var(--music-surface-strong); color: var(--music-text); }
body[class*="qixi-theme-"] .music-view .music-source-label,
body[class*="qixi-theme-"] .music-view .music-track-copy p,
body[class*="qixi-theme-"] .music-view .music-time-row,
body[class*="qixi-theme-"] .music-view .music-room-hint,
body[class*="qixi-theme-"] .music-view .music-track-row-copy small { color: var(--music-muted) !important; }
body[class*="qixi-theme-"] .music-view .music-track-copy h3,
body[class*="qixi-theme-"] .music-view .together-heading h3,
body[class*="qixi-theme-"] .music-view .music-section-heading,
body[class*="qixi-theme-"] .music-view .music-empty-room strong,
body[class*="qixi-theme-"] .music-view .music-track-row-copy strong { color: var(--music-text) !important; }
body[class*="qixi-theme-"] .music-view .music-icon-button,
body[class*="qixi-theme-"] .music-view .music-section-heading button { color: var(--music-muted); background: var(--music-soft); }
body[class*="qixi-theme-"] .music-view .music-icon-button:hover,
body[class*="qixi-theme-"] .music-view .music-icon-button.is-active,
body[class*="qixi-theme-"] .music-view .music-section-heading button:hover { color: var(--music-text); background: var(--music-row-active); }
body[class*="qixi-theme-"] .music-view .music-play-button,
body[class*="qixi-theme-"] .music-view .music-primary-button { color: var(--music-accent-ink); background: var(--music-accent); box-shadow: var(--qixi-shadow); }
body[class*="qixi-theme-"] .music-view .music-play-button:hover,
body[class*="qixi-theme-"] .music-view .music-primary-button:hover { filter: brightness(1.05); background: var(--music-accent); }
body[class*="qixi-theme-"] .music-view .music-ghost-button,
body[class*="qixi-theme-"] .music-view .music-room-status { color: var(--music-text); background: var(--music-soft); }
body[class*="qixi-theme-"] .music-view .music-room-icon { color: var(--music-accent-strong); background: var(--music-soft); }
body[class*="qixi-theme-"] .music-view .music-track-row { color: var(--music-muted); border-color: transparent; }
body[class*="qixi-theme-"] .music-view .music-track-row:hover,
body[class*="qixi-theme-"] .music-view .music-track-row.is-current { background: var(--music-row-active); border-color: var(--music-border); }
body[class*="qixi-theme-"] .music-view .music-track-index,
body[class*="qixi-theme-"] .music-view .music-track-actions { color: var(--music-muted); }
body[class*="qixi-theme-"] .music-view .music-track-index svg { color: var(--music-accent-strong); }
body[class*="qixi-theme-"] .music-view .music-track-art { background: var(--music-soft); }
body[class*="qixi-theme-"] .music-view .music-track-art-state { color: var(--music-accent-ink); background: var(--music-accent); }
body[class*="qixi-theme-"] .music-view .music-progress input { accent-color: var(--music-accent); }

body[class*="qixi-theme-"] .music-invite-card {
  color: var(--ink) !important;
  background: var(--qixi-surface) !important;
  border-color: var(--qixi-border) !important;
}
body[class*="qixi-theme-"] .music-invite-card .music-invite-title { color: var(--ink) !important; }
body[class*="qixi-theme-"] .music-invite-card .music-invite-label,
body[class*="qixi-theme-"] .music-invite-card .music-invite-track,
body[class*="qixi-theme-"] .music-invite-card .music-invite-duration { color: var(--muted) !important; }
body[class*="qixi-theme-"] .music-invite-card .music-invite-duration { border-top-color: var(--qixi-border); }
body[class*="qixi-theme-"] .music-invite-card .music-invite-avatar { border-color: var(--qixi-surface-strong); }