/* =================================================
   voice-range-test.css - 音域テスト専用スタイル
   ================================================= */

/* === 音域テストアイコン === */
.range-icon-img {
    width: 80px;
    height: 80px;
    display: block;
}

/* === 失敗時のバッジスタイル === */
.voice-note-badge.failure {
    background-color: #ef4444 !important;
    background: #ef4444 !important;
    border: none !important;
}

/* === 確定時のチェックマークアニメーション === */
.range-icon-confirmed {
    animation: check-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes check-bounce {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* === マイクボタン状態管理 === */
.mic-button {
    transition: all 0.3s ease;
}

.mic-button.mic-idle {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.mic-button.mic-permitted {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.mic-button.mic-active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    animation: modern-mic-active 1.8s ease-in-out infinite;
    border: 2px solid rgba(239, 68, 68, 0.8);
}

.mic-button.mic-active i {
    color: white !important;
}

@keyframes modern-mic-active {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        border: 2px solid rgba(239, 68, 68, 0.8);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2);
        border: 2px solid rgba(239, 68, 68, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        border: 2px solid rgba(239, 68, 68, 0.8);
    }
}


/* === マイクステータスコンテナ === */
.mic-status-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.mic-status-container.standby {
    background: rgba(96, 165, 250, 0.25) !important;
    color: #93c5fd !important;
    border: none !important;
    animation: none !important;
    box-shadow: none !important;
    /* iPad Safari対応 */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mic-status-container.recording {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    animation: modern-mic-active 1.8s ease-in-out infinite;
    border: 2px solid rgba(248, 113, 113, 0.8);
    /* Safari 18 backdrop-filterバグ回避 */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mic-status-container.recording i {
    color: #f87171 !important;
}

.mic-status-container.muted {
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
    border: none !important;
    animation: none !important;
    box-shadow: none !important;
    /* Safari 18 backdrop-filterバグ回避 */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mic-status-container.muted i {
    color: #6b7280 !important;
}

/* インターバル状態（低音と高音の間の待機時）= ミュート明示 */
.mic-status-container.interval {
    background: rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    border: none !important;
    animation: none !important;
    box-shadow: none !important;
    /* Safari 18 backdrop-filterバグ回避 */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.mic-status-container.interval i {
    color: #93c5fd !important;
}

@keyframes interval-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        border: 2px solid rgba(59, 130, 246, 0.8);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
        border: 2px solid rgba(59, 130, 246, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
        border: 2px solid rgba(59, 130, 246, 0.8);
    }
}

/* === フェーズタイトル（低音を測定 / 高音を測定） === */
.voice-range-phase-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 8px 0 4px;
    letter-spacing: 0.05em;
}

.voice-range-phase-title.phase-low {
    color: #60a5fa; /* blue-400 */
}

.voice-range-phase-title.phase-high {
    color: #f472b6; /* pink-400 */
}

.voice-range-phase-title.measuring {
    animation: phase-title-pulse 1.5s ease-in-out infinite;
}

@keyframes phase-title-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* === バッジ待機時（ボタン錯覚防止） === */
/* TODO: 透明度アプローチは暗くなりすぎるため保留。別手法を検討 */

/* === 音域テスト専用テキストスタイル === */

/* メインステータステキスト */
.voice-range-main-text {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 4px;
}

/* メインテキスト状態別バリエーション */
.voice-range-main-text.waiting {
    color: #bae6fd; /* text-blue-200 - 待機中 */
}

.voice-range-main-text.measuring {
    color: #fef08a; /* text-yellow-200 - 測定中 */
}

.voice-range-main-text.success {
    color: #bbf7d0; /* text-green-200 - 成功 */
}

.voice-range-main-text.error {
    color: #fecaca; /* text-red-200 - エラー */
}

/* サブテキスト */
.voice-range-sub-text {
    font-size: 1.125rem;
    line-height: 1.625rem;
    color: #93c5fd; /* text-blue-300に変更 */
    margin-top: 0;
    margin-bottom: 4px;
}

/* サブテキスト状態別バリエーション */
.voice-range-sub-text.error {
    color: #fca5a5; /* text-red-300 - 失敗・エラー時 */
    font-weight: 500;
}

/* 測定中アニメーション */
.voice-range-sub-text.measuring {
    animation: measuring-pulse 1.5s ease-in-out infinite;
}

@keyframes measuring-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* === ボタン表示制御クラス === */

/* === 1. 基本表示制御 === */
.btn-hidden {
    display: none !important;
}

.btn-visible-inline {
    display: inline-flex !important;
}

.btn-visible-block {
    display: inline-block !important;
}

/* === 2. 音域テスト操作ボタン（コア機能） === */
.voice-range-btn {
    /* 音域テスト専用ボタンの基本スタイル（将来的な拡張用） */
}

/* === 3. システム制御ボタン（補助機能） === */
.system-control-btn {
    /* システム制御用ボタンの基本スタイル（将来的な拡張用） */
}

/* === 音域アイコン測定中アニメーション === */
#range-icon.measuring {
    animation: range-icon-pulse 1.5s ease-in-out infinite;
}

/* 画像要素にもアニメーションを適用 */
#range-icon.measuring img {
    animation: range-icon-pulse 1.5s ease-in-out infinite;
}

/* 矢印アイコン専用のパルスアニメーション（マイクとは分離） */
@keyframes range-icon-pulse {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* 開始ボタン */
#begin-range-test-btn.btn-state-ready {
    /* 開始可能状態 */
}

#begin-range-test-btn.btn-state-disabled {
    /* 無効状態 */
}

/* 停止ボタン */
#stop-range-test-btn.btn-state-active {
    /* 測定中の表示状態 */
}

/* 再測定ボタン */
#retry-measurement-btn.btn-state-retry,
#remeasure-btn.btn-state-retry {
    /* リトライ可能状態 */
}

/* === 3. システム制御ボタン（補助機能） === */
.system-control-btn {
    /* システム制御用ボタンの基本スタイル */
}

/* マイク許可ボタン */
#request-mic-permission.mic-state-idle {
    /* マイク未許可状態 */
}

#request-mic-permission.mic-state-permitted {
    /* マイク許可済み状態 */
}

/* 検出停止ボタン */
#stop-detection-btn.btn-state-emergency {
    /* 緊急停止状態 */
}

/* === 4. デバッグ・テスト用ボタン（開発用） === */
.debug-btn {
    /* デバッグ専用ボタンの基本スタイル */
    border: 1px dashed rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.debug-btn::before {
    content: '🧪 ';
    opacity: 0.7;
}

/* デバッグ表示切り替え */
#toggle-debug-display.debug-visible {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

#toggle-debug-display.debug-hidden {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #9ca3af !important;
}

/* セクション表示制御 */
.section-visible {
    display: block !important;
}

.section-hidden {
    display: none !important;
}

/* === アイコン・UI要素表示制御 === */

/* アイコン表示 */
.icon-visible {
    display: block !important;
}

.icon-hidden {
    display: none !important;
}

/* 音域テストアイコン専用 */
.range-icon-visible {
    display: block !important;
}

.range-icon-hidden {
    display: none !important;
}

/* === ステータス色クラス === */

/* 成功色 (緑) */
.status-success {
    color: #10b981 !important;
}

/* エラー色 (赤) */
.status-error {
    color: #ef4444 !important;
}

/* 警告色 (オレンジ) */
.status-warning {
    color: #f59e0b !important;
}

/* 情報色 (青) */
.status-info {
    color: #3b82f6 !important;
}

/* === プログレスバーアニメーション制御 === */

/* プログレスサークルのアニメーション無効化 */
.progress-no-animation {
    transition: none !important;
}

/* プログレスサークルの線形アニメーション */
.progress-linear-animation {
    transition: stroke-dashoffset 0.1s linear !important;
}

/* プログレスサークルの滑らかなアニメーション */
.progress-smooth-animation {
    transition: stroke-dashoffset 0.3s ease !important;
}

/* ===================================================
   マイク+メーター統合レイアウト
   =================================================== */
.vr-meters-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vr-mic-icon {
    /* mic-status-containerのサイズ(44px)を上書き */
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    margin: 0 !important;
    margin-top: -2px !important;
    padding: 0 !important;
}

.vr-meters-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vr-meter-item {
    /* 独立 - 外部margin/paddingなし */
}