/* ===========================================
   StemScribe - New Features CSS
   (Waveform, Speed, A-B Loop, Light Mode)
   =========================================== */

/* ---- Master Waveform ---- */
.master-waveform-container {
    background: rgba(26, 26, 36, 0.8);
    border: 1px solid rgba(97, 175, 239, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.master-waveform-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--psych-blue), transparent);
    opacity: 0.5;
}

#masterWaveform {
    border-radius: 8px;
    overflow: hidden;
}

/* ---- Per-Stem Waveforms ---- */
.stem-waveform {
    width: calc(100% - 8px);
    height: 40px;
    margin: 0 auto 0.5rem;
    background: linear-gradient(180deg, #1a1816 0%, #0d0c0a 100%);
    border-radius: 4px;
    border: 1px solid #3d352d;
    overflow: hidden;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
}

.stem-card.muted .stem-waveform {
    opacity: 0.3;
}

body.light-mode .stem-waveform {
    background: linear-gradient(180deg, #e8e4dc 0%, #d8d4cc 100%);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* ---- Speed Control ---- */
.speed-control {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0.25rem;
}

.speed-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Space Grotesk', monospace;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    min-width: 36px;
    text-align: center;
}

.speed-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--psych-blue);
}

.speed-btn.modified {
    background: rgba(97, 175, 239, 0.2);
    border-color: var(--psych-blue);
    color: var(--psych-blue);
}

.speed-slider {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    margin-top: 8px;
    z-index: 10;
    accent-color: var(--psych-blue);
    background: rgba(26, 26, 36, 0.95);
    padding: 4px;
    border-radius: 4px;
}

/* ---- A-B Loop Control ---- */
.loop-control {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0.25rem;
}

.loop-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-family: 'Space Grotesk', monospace;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 32px;
    text-align: center;
}

.loop-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--psych-pink);
}

.loop-btn.setting {
    background: rgba(255, 107, 157, 0.3);
    border-color: var(--psych-pink);
    color: var(--psych-pink);
    animation: pulse-loop 1s infinite;
}

.loop-btn.active {
    background: rgba(255, 107, 157, 0.25);
    border-color: var(--psych-pink);
    color: var(--psych-pink);
}

.loop-clear-btn {
    background: rgba(255, 107, 157, 0.15);
    border: 1px solid rgba(255, 107, 157, 0.3);
    color: var(--psych-pink);
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
}

.loop-clear-btn:hover {
    background: rgba(255, 107, 157, 0.35);
}

@keyframes pulse-loop {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ---- Theme Toggle ---- */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--psych-yellow);
}

/* ===========================================
   LIGHT MODE
   =========================================== */
body.light-mode {
    --bg-deep: #f0ece4;
    --bg-dark: #e8e4dc;
    --bg-card: #ffffff;
    --text: #1a1a24;
    --text-dim: #6b6b78;
    --text-main: #1a1a24;
    background: var(--bg-deep);
    color: var(--text);
}

body.light-mode .psych-bg {
    opacity: 0.15;
}

body.light-mode .header {
    background: rgba(240, 236, 228, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light-mode .logo-text {
    color: #1a1a24;
}

body.light-mode .nav-links a,
body.light-mode .nav-links button {
    color: #3a3a48;
}

body.light-mode .drop-zone {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-mode .drop-zone:hover,
body.light-mode .drop-zone.dragover {
    border-color: var(--psych-blue);
    background: rgba(97, 175, 239, 0.05);
}

body.light-mode .drop-title,
body.light-mode .drop-subtitle {
    color: #3a3a48;
}

body.light-mode .mode-btn {
    background: rgba(0, 0, 0, 0.04);
    color: #3a3a48;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .mode-btn.active {
    background: var(--psych-blue);
    color: white;
}

body.light-mode .master-transport {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .stem-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .neve-console {
    background: linear-gradient(180deg, #d4cfc7 0%, #c8c3bb 50%, #b8b3ab 100%);
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-mode .vu-meter .vu-face {
    background: linear-gradient(180deg, #f5f0e8, #e8e3db);
}

body.light-mode .settings-panel,
body.light-mode .library-panel {
    background: rgba(255, 255, 255, 0.98);
    color: #1a1a24;
}

body.light-mode .settings-section h4,
body.light-mode .library-header h3 {
    color: #1a1a24;
}

body.light-mode .status-card {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .master-waveform-container {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .speed-btn,
body.light-mode .loop-btn,
body.light-mode .loop-clear-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #3a3a48;
}

body.light-mode .song-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .track-info-panel {
    background: rgba(255, 255, 255, 0.98);
    color: #1a1a24;
}

body.light-mode .url-input {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a24;
    border-color: rgba(0, 0, 0, 0.15);
}

body.light-mode .archive-section {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .archive-show-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .footer {
    background: rgba(0, 0, 0, 0.03);
    color: #6b6b78;
}

body.light-mode .toast {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a24;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .submit-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .timeline {
    background: rgba(0, 0, 0, 0.08);
}

body.light-mode .library-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #3a3a48;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
    color: #1a1a24;
}

body.light-mode .highlight {
    color: var(--psych-blue);
}