/**
 * ★★★ mixer.css - ミキサー専用スタイル ★★★
 * 
 * MixerModule.js と連携するUI専用スタイルシート。
 * チャンネルストリップ、ノブ、メーター、FXセクションを定義。
 * 
 * @version 1.0.0
 * @date 2026-02-07
 */

/* =============================================================================
   1. 変数定義
   ============================================================================= */
:root {
    /* ミキサーカラー */
    --mixer-bg: #1a1a2e;
    --mixer-strip-bg: #16213e;
    --mixer-strip-border: #0f3460;
    --mixer-accent: #e94560;
    --mixer-accent-hover: #ff6b6b;

    /* メーターカラー */
    --meter-green: #4ade80;
    --meter-yellow: #fbbf24;
    --meter-red: #ef4444;
    --meter-bg: #1f2937;

    /* ノブカラー */
    --knob-bg: #374151;
    --knob-indicator: var(--mixer-accent);

    /* FXセクション */
    --fx-section-bg: rgba(22, 33, 62, 0.8);
}

/* =============================================================================
   2. チャンネルストリップ
   ============================================================================= */
.console-strip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: var(--mixer-strip-bg);
    border: 1px solid var(--mixer-strip-border);
    border-radius: 8px;
    min-width: 60px;
}

.console-strip.master-strip {
    background: linear-gradient(145deg, #1e3a5f, #16213e);
    border-color: var(--mixer-accent);
}

.strip-name {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.5px;
}

/* =============================================================================
   3. レベルメーター
   ============================================================================= */
.meter-container {
    position: relative;
    width: 8px;
    height: 100px;
    background: var(--meter-bg);
    border-radius: 4px;
    overflow: hidden;
    margin: 4px 0;
}

.meter-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--meter-green);
    border-radius: 0 0 4px 4px;
    transition: height 60ms linear, background 100ms;
}

.meter-bar.hot {
    background: var(--meter-yellow);
}

.meter-bar.clip {
    background: var(--meter-red);
    animation: clip-flash 200ms ease-out;
}

@keyframes clip-flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* ステレオメーター（L/R） */
.meter-stereo {
    display: flex;
    gap: 2px;
}

.meter-stereo .meter-container {
    width: 4px;
}

/* =============================================================================
   4. フェーダー
   ============================================================================= */
.strip-fader {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.v-fader {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 14px;
    height: 100px;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    padding: 0;
}

.v-fader::-webkit-slider-runnable-track {
    width: 8px;
    border-radius: 3px;
    background: linear-gradient(180deg, #374151, #4b5563);
}

.v-fader::-moz-range-track {
    width: 8px;
    border-radius: 3px;
    background: linear-gradient(180deg, #374151, #4b5563);
}

.v-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 24px;
    background: linear-gradient(145deg, #60a5fa, #3b82f6);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.v-fader::-moz-range-thumb {
    width: 14px;
    height: 24px;
    background: linear-gradient(145deg, #60a5fa, #3b82f6);
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.master-vol-fader::-webkit-slider-thumb {
    background: linear-gradient(145deg, var(--mixer-accent), #c9304a);
}

/* =============================================================================
   5. ボタン（Solo/Mute/Send）
   ============================================================================= */
.strip-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-solo,
.btn-mute,
.btn-send {
    width: 24px;
    height: 20px;
    font-size: 9px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-solo {
    background: #374151;
    color: #9ca3af;
}

.btn-solo.active {
    background: #fbbf24;
    color: #1a1a2e;
}

.btn-mute {
    background: #374151;
    color: #9ca3af;
}

.btn-mute.active {
    background: #ef4444;
    color: white;
}

.btn-send {
    background: #374151;
    color: #9ca3af;
}

.btn-send.active {
    background: #10b981;
    color: white;
}

.btn-send.off {
    opacity: 0.6;
}

/* =============================================================================
   6. センドスライダー
   ============================================================================= */
.send-slider-area {
    width: 100%;
    padding: 4px 2px;
}

.send-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: #374151;
    border-radius: 2px;
    outline: none;
}

.send-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    cursor: pointer;
}

/* =============================================================================
   7. PANポット
   ============================================================================= */
.pan-pot-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pan-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6 0%, #6b7280 50%, #ef4444 100%);
    border-radius: 2px;
    outline: none;
}

.pan-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 14px;
    background: white;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.pan-value-disp {
    font-size: 8px;
    color: #6b7280;
}

/* =============================================================================
   8. ノブ（FX用）
   ============================================================================= */
.knob {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    user-select: none;
}

.knob-body {
    width: 100%;
    height: 100%;
    background: var(--knob-bg);
    border-radius: 50%;
    position: relative;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
}

.knob-indicator {
    position: absolute;
    width: 4px;
    height: 12px;
    background: var(--knob-indicator);
    border-radius: 2px;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.knob-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: #9ca3af;
    white-space: nowrap;
}

/* =============================================================================
   9. FXセクション
   ============================================================================= */
.fx-section {
    background: var(--fx-section-bg);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.fx-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mixer-accent);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fx-section-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 12px;
    background: var(--mixer-accent);
    border-radius: 2px;
}

.fx-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.fx-control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fx-control-label {
    font-size: 9px;
    color: #6b7280;
    text-transform: uppercase;
}

/* =============================================================================
   10. EQ セクション（4バンド）
   ============================================================================= */
.eq-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.eq-band-label {
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
}

.eq-band-freq {
    font-size: 8px;
    color: #6b7280;
}

/* =============================================================================
   11. Pulse11 専用スタイル
   ============================================================================= */
.console-strip[data-channel="pulse11"] {
    background: linear-gradient(145deg, #2d1b4e, #1a1035);
    border-color: #8b5cf6;
}

.console-strip[data-channel="pulse11"] .strip-name {
    color: #a78bfa;
}

.console-strip[data-channel="pulse11"] .btn-send.active {
    background: #8b5cf6;
}

/* =============================================================================
   12. レスポンシブ
   ============================================================================= */
@media (max-width: 768px) {
    .console-strip {
        min-width: 50px;
        padding: 8px 4px;
    }

    .v-fader {
        height: 80px;
    }

    .eq-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   13. トランジション/アニメーション
   ============================================================================= */
.btn-solo,
.btn-mute,
.btn-send,
.knob,
.v-fader,
.send-slider {
    transition: transform 0.1s, box-shadow 0.15s;
}

.btn-solo:hover,
.btn-mute:hover,
.btn-send:hover {
    transform: scale(1.05);
}

.knob:active {
    transform: scale(0.95);
}

/* =============================================================================
   14. ★NEW: スペクトラム & VUメーター
   ============================================================================= */
.spectrum-area {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.spectrum-area canvas {
    border-radius: 3px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.vu-meter-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.vu-meter-area canvas {
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2);
}

.vu-labels {
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: 8px;
    color: #888;
}

/* MASTERストリップ拡張 */
.master-strip {
    min-width: 90px;
    max-width: 100px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-color: var(--mixer-accent);
    overflow: hidden;
}

.master-strip .spectrum-area {
    width: 100%;
    max-width: 90px;
    margin: 4px auto;
    padding: 2px;
}

.master-strip .spectrum-area canvas {
    width: 100%;
    height: 50px;
    box-shadow: 0 0 8px rgba(233, 69, 96, 0.3);
}

.master-strip .vu-meter-area {
    position: absolute;
    right: 4px;
    top: 60px;
    width: 24px;
}

.master-strip .vu-meter-area canvas {
    width: 24px;
    height: 80px;
}

/* =============================================================================
   15. ★NEW: チャンネル別VUメーター
   ============================================================================= */
.channel-meter {
    position: relative;
    z-index: 2;
    flex: 0 0 8px;
    width: 8px;
    /* 少し細くスマートに */
    height: 120px;
    /* フェーダーの高さ(120px)に合わせる */
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    margin-left: 2px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fader-groove-lane {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(9, 14, 24, 0.88), rgba(22, 30, 46, 0.98) 48%, rgba(9, 14, 24, 0.88));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 10px rgba(0, 0, 0, 0.55);
}

.fader-groove-track {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(to bottom, #0f172a, #2b3648 20%, #111827 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 8px rgba(0, 0, 0, 0.55);
}

.fader-groove-notch {
    position: absolute;
    left: 50%;
    width: 14px;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.24);
}

.fader-groove-notch-0 { top: 0%; }
.fader-groove-notch-1 { top: 25%; }
.fader-groove-notch-2 { top: 50%; }
.fader-groove-notch-3 { top: 75%; }
.fader-groove-notch-4 { top: 100%; }

.strip-fader {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 130px;
}

.strip-fader > input[type="range"] {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.meter-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: #00ff00;
    border-radius: 2px;
    transition: height 0s;
    /* JSスムージング制御 */
    box-shadow: 0 0 4px rgba(0, 255, 0, 0.5);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .channel-meter {
        height: 80px;
    }

    .strip-fader {
        height: 90px;
    }

    .fader-groove-lane {
        flex-basis: 18px;
        width: 18px;
    }

    .fader-groove-track {
        top: 5px;
        bottom: 5px;
    }

    .fader-groove-notch {
        width: 12px;
    }
}

/* =============================================================================
   16. ★NEW: FX Unit & Piano Mode Styles
   ============================================================================= */

/* FX Rack Item */
.fx-unit {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    backdrop-filter: blur(4px);
}

.fx-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #334155;
    padding-bottom: 5px;
}

.fx-title {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    flex-grow: 1;
    letter-spacing: 0.5px;
}

.fx-controls {
    display: flex;
    justify-content: space-around;
    gap: 5px;
}

.knob-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.knob-group label {
    font-size: 8px;
    color: #cbd5e1;
}

.retro-knob {
    width: 36px;
    height: 36px;
    position: relative;
    cursor: pointer;
}

.knob-body {
    width: 100%;
    height: 100%;
    background: #475569;
    border-radius: 50%;
    border: 2px solid #1e293b;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s linear;
    /* Smooth rotation */
}

/* Indicator line inside knob body */
.knob-indicator {
    width: 3px;
    height: 12px;
    background: #f8fafc;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
}

/* Delay Specifics */
.stereo-delay {
    border-color: #0ea5e9;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.1);
}

.stereo-delay .fx-title {
    color: #38bdf8;
    text-shadow: 0 0 5px rgba(56, 189, 248, 0.5);
}

.stereo-delay .knob-body {
    background: linear-gradient(145deg, #0f172a, #334155);
}

.stereo-delay .knob-indicator {
    background: #38bdf8;
    box-shadow: 0 0 4px #38bdf8;
}

/* Piano Mode Button */
.btn-mode {
    width: 24px;
    height: 20px;
    font-size: 12px;
    border: 1px solid #4b5563;
    background: #1f2937;
    color: #9ca3af;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-mode:hover {
    background: #374151;
    color: #f3f4f6;
    transform: scale(1.05);
}

.btn-mode.active {
    background: #7c3aed;
    /* Violet */
    color: #fff;
    border-color: #8b5cf6;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.6);
    animation: pulse-violet 2s infinite;
}

@keyframes pulse-violet {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(139, 92, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    }
}