/**
 * SunoPadho — Synchronized Read + Listen (Suno + Padho) Design System
 */

.sync-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--reader-bg, #FFFFFF);
  color: var(--reader-text, #1C272C);
  position: relative;
}

/* Floating Audio-Text Sync Bar */
.sync-floating-hud {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--sp-z-mini-player);
  background: rgba(11, 30, 40, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #FFFFFF;
  border-radius: var(--sp-radius-full);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  box-shadow: 0 16px 36px rgba(4, 13, 18, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 90vw;
}

.sync-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(29, 184, 119, 0.2);
  border: 1px solid var(--sp-emerald-500);
  border-radius: var(--sp-radius-full);
  color: var(--sp-emerald-300);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sync-hud-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sp-emerald-500);
  color: #042114;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(29, 184, 119, 0.4);
  transition: all var(--sp-transition-fast);
}

.sync-hud-play-btn:hover {
  transform: scale(1.08);
}

.sync-hud-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-navy-300);
}

/* Synchronized Paragraph Highlighting */
.sync-paragraph {
  padding: 8px 14px;
  margin-bottom: 1.25em;
  border-radius: var(--sp-radius-md);
  border-left: 3px solid transparent;
  transition: background-color var(--sp-transition-base), border-color var(--sp-transition-base), transform var(--sp-transition-fast);
  cursor: pointer;
}

.sync-paragraph:hover {
  background-color: var(--reader-surface);
}

.sync-paragraph.active-sync-node {
  background-color: var(--reader-highlight-bg, #DDF3E8);
  color: var(--reader-highlight-text, #08432A);
  border-left: 3px solid var(--reader-highlight-border, #0B5D3B);
  box-shadow: 0 2px 8px rgba(11, 93, 59, 0.08);
}

/* Urdu RTL Sync Paragraph Border */
[dir="rtl"] .sync-paragraph, .lang-ur .sync-paragraph {
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] .sync-paragraph.active-sync-node, .lang-ur .sync-paragraph.active-sync-node {
  border-left: none;
  border-right: 3px solid var(--reader-highlight-border, #0B5D3B);
}

/* Auto-scroll active indicator */
.sync-autoscroll-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sp-navy-300);
  cursor: pointer;
}