/* tts-compare-results.css — Kokoro TTSテストページ スタイル Part 2: 結果・グラフ */

.tts-result { min-height: 56px; background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; }
.tts-result-empty { font-size: 12px; color: var(--text-dim); text-align: center; padding: 8px 0; }
.tts-result-data { display: none; flex-direction: column; gap: 8px; }
.tts-result-data.visible { display: flex; }
.tts-timing-row { display: flex; gap: 8px; }
.tts-timing-item { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; text-align: center; }
.tts-timing-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.tts-timing-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kokoro-hl { color: var(--kokoro); }
.play-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 20px; color: var(--text); font-size: 12px; cursor: pointer; transition: all 0.2s; font-family: inherit; width: fit-content; min-height: 36px; }
.play-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--text-muted); }
.play-btn.playing { animation: play-pulse 1s infinite; }
@keyframes play-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.playing-indicator { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--green); margin-top: 4px; }
.playing-indicator.active { display: flex; }
.playing-waves { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.playing-waves span { display: block; width: 3px; background: var(--green); border-radius: 2px; animation: wave 0.8s ease-in-out infinite; }
.playing-waves span:nth-child(1) { height: 6px; animation-delay: 0s; }
.playing-waves span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.playing-waves span:nth-child(3) { height: 8px; animation-delay: 0.3s; }
.playing-waves span:nth-child(4) { height: 14px; animation-delay: 0.1s; }
@keyframes wave { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.error-msg { font-size: 12px; color: var(--red); padding: 6px 10px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; }
.bulk-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bulk-section-text { flex: 1; }
.bulk-section-text h3 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.bulk-section-text p { font-size: 12px; color: var(--text-muted); }
.compare-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; }
.compare-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.compare-empty { text-align: center; padding: 32px 0; color: var(--text-dim); font-size: 13px; }
.compare-table { width: 100%; border-collapse: collapse; display: none; }
.compare-table.visible { display: table; }
.compare-table th { text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.compare-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid rgba(42,45,78,0.5); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .backend-name { font-weight: 700; }
.compare-table .time-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-chart { display: none; flex-direction: column; gap: 10px; margin-top: 20px; }
.bar-chart.visible { display: flex; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { width: 90px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.bar-track { flex: 1; height: 24px; background: var(--card2); border-radius: 6px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; width: 0%; display: flex; align-items: center; padding-left: 10px; }
.bar-fill-kokoro { background: linear-gradient(90deg, var(--kokoro), rgba(168,85,247,0.6)); }
.bar-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.footer-space { height: 40px; }