/* ============================================================
   ASR — 语音识别页面样式
   ============================================================ */

.asr-main {
  padding:0 !important; display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
  max-width:none !important;
}

/* --- 顶栏 --- */
.asr-topbar {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:var(--bg-card);
}
.asr-back-btn {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  color:var(--text-3); text-decoration:none;
  transition:all 0.12s;
}
.asr-back-btn:hover { background:var(--bg-hover); color:var(--text-1); }
.asr-topbar-title { font-size:15px; font-weight:700; color:var(--text-1); }
.asr-topbar-hint { font-size:12px; color:var(--text-3); }

/* --- Landing 页面 --- */
.asr-landing {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 20px;
  background:var(--bg-card);
}
.asr-task-cards {
  display:flex; flex-direction:column; gap:16px;
  width:100%; max-width:560px;
}
.asr-task-card {
  display:flex; align-items:center; gap:16px;
  padding:24px; border-radius:12px;
  background:var(--bg-input);
  border:1px solid var(--border);
  text-decoration:none; color:inherit;
  transition:all 0.2s;
}
.asr-task-card:hover {
  border-color:var(--primary);
  box-shadow:0 4px 20px rgba(99,102,241,0.1);
  transform:translateY(-2px);
}
.asr-task-icon {
  width:56px; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:var(--primary-bg);
  color:var(--primary);
}
.asr-task-icon svg { width:28px; height:28px; }
.asr-task-content { flex:1; min-width:0; }
.asr-task-title {
  font-size:16px; font-weight:600; color:var(--text-1);
  margin:0 0 6px;
}
.asr-task-desc {
  font-size:13px; color:var(--text-3); line-height:1.5;
  margin:0 0 10px;
}
.asr-task-features {
  display:flex; flex-wrap:wrap; gap:6px;
}
.asr-feature-tag {
  font-size:11px; color:var(--primary);
  background:var(--primary-bg);
  padding:3px 8px; border-radius:4px;
}
.asr-task-arrow {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3);
  transition:all 0.2s;
}
.asr-task-card:hover .asr-task-arrow {
  color:var(--primary);
  transform:translateX(4px);
}
.asr-landing-hint {
  margin-top:32px;
  font-size:13px; color:var(--text-3);
  text-align:center;
}

/* --- 工作区 --- */
.asr-workspace {
  flex:1; display:flex; min-height:0;
  background:var(--bg-card);
}

/* --- 通用标题 --- */
.asr-section-title {
  font-size:12px; font-weight:600; color:var(--text-3);
  letter-spacing:0.3px;
}

/* --- 左侧：识别结果 --- */
.asr-result-panel {
  flex:1; display:flex; flex-direction:column; min-width:0;
  position:relative;
}

.asr-result-body {
  flex:1; overflow-y:auto; padding:16px 20px;
  font-size:15px; line-height:1.8; color:var(--text-1);
  position:relative;
}
.asr-text { white-space:pre-wrap; word-break:break-word; }
.asr-partial { color:var(--text-3); font-style:italic; }

/* --- 空状态引导 --- */
.asr-empty-state {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:12px; padding:40px 20px;
}
.asr-empty-icon {
  width:80px; height:80px; border-radius:50%;
  background:var(--primary-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); opacity:0.7;
  margin-bottom:4px;
}
.asr-empty-title {
  font-size:16px; font-weight:600; color:var(--text-1);
}
.asr-empty-desc {
  font-size:13px; color:var(--text-3); text-align:center; max-width:320px;
  line-height:1.5;
}
.asr-empty-upload-btn {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:10px 24px;
  border-radius:10px; border:2px dashed var(--border);
  background:var(--bg-input); color:var(--text-2);
  font-size:14px; font-weight:500; font-family:inherit;
  cursor:pointer; transition:all 0.2s;
}
.asr-empty-upload-btn:hover {
  border-color:var(--primary); color:var(--primary);
  background:var(--primary-bg);
}

/* --- 播放器浮动栏（结果区底部） --- */
.asr-player-bar {
  flex-shrink:0; padding:10px 16px;
  background:var(--bg-card);
}

/* --- 音频源选择 --- */
.asr-audio-source {
  display:flex; gap:8px;
}
.asr-source-btn {
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-input);
  cursor:pointer; color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.12s;
}
.asr-source-btn:hover { border-color:var(--primary); color:var(--primary); }
.asr-source-btn.active {
  border-color:var(--primary);
  background:var(--primary-bg);
  color:var(--primary);
}

/* --- 麦克风栏 --- */
.asr-mic-bar {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:16px;
  flex-shrink:0;
}
.asr-mic-btn {
  width:64px; height:64px; border-radius:50%;
  border:none; cursor:pointer;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
  box-shadow:0 2px 12px rgba(99,102,241,0.3);
}
.asr-mic-btn:hover { transform:scale(1.05); box-shadow:0 4px 20px rgba(99,102,241,0.4); }
.asr-mic-btn .stop-icon { display:none; }
.asr-mic-btn.recording { background:#ef4444; box-shadow:0 2px 12px rgba(239,68,68,0.35); animation:asr-pulse 1.5s ease-in-out infinite; }
.asr-mic-btn.recording .mic-icon { display:none; }
.asr-mic-btn.recording .stop-icon { display:block; }
.asr-mic-label { font-size:12px; color:var(--text-3); }

@keyframes asr-pulse {
  0%, 100% { box-shadow:0 2px 12px rgba(239,68,68,0.35); }
  50% { box-shadow:0 2px 28px rgba(239,68,68,0.55); }
}

/* --- 音频播放器 --- */
.asr-player-controls {
  display:flex; align-items:center; gap:10px;
}
.asr-player-btn {
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0;
  transition:all 0.15s;
}
.asr-player-btn:hover { transform:scale(1.08); }
.asr-player-time {
  font-size:11px; color:var(--text-3);
  font-family:'SF Mono','Menlo','Consolas','Liberation Mono',monospace;
  flex-shrink:0; min-width:36px; text-align:center;
}
.asr-player-seekbar {
  flex:1; height:6px; border-radius:3px;
  background:var(--bg-input);
  cursor:pointer; position:relative;
}
.asr-player-seekbar-fill {
  height:100%; border-radius:3px;
  background:var(--primary);
  width:0; transition:width 0.05s linear;
}
.asr-player-seekbar-handle {
  position:absolute; top:50%; left:0;
  width:12px; height:12px; border-radius:50%;
  background:var(--primary); border:2px solid #fff;
  box-shadow:0 0 4px rgba(0,0,0,0.15);
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:left 0.05s linear;
}
.asr-player-seekbar:hover .asr-player-seekbar-handle {
  width:14px; height:14px;
}
.asr-player-filename {
  font-size:12px; color:var(--text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:120px; flex-shrink:1;
}

/* --- 可点击的字 --- */
.asr-word {
  cursor:pointer; transition:all 0.1s;
  border-radius:2px; padding:0 1px;
}
.asr-word:hover {
  background:var(--primary-bg); color:var(--primary);
}
.asr-word-active {
  background:var(--primary); color:#fff !important;
  border-radius:3px; padding:0 2px;
}

/* --- 右侧：配置面板 --- */
.asr-config-panel {
  width:300px; flex-shrink:0; display:flex; flex-direction:column;
  border-left:1px solid var(--border);
  background:var(--bg-card);
}
.asr-config-scroll {
  flex:1; overflow-y:auto;
  padding:16px 0 8px;
}
.asr-config-section {
  padding:0 16px 18px;
}
.asr-config-header {
  padding:0 0 8px;
}
.asr-config-body {
  padding:0;
}
.asr-config-desc {
  font-size:11px; color:var(--text-3); line-height:1.5;
  margin:0 0 10px;
}

/* --- 右侧底部悬浮操作区 --- */
.asr-config-actions {
  flex-shrink:0; display:flex; flex-direction:column; gap:8px;
  padding:16px;
  background:var(--bg-card);
}
.asr-action-btn {
  width:100%; justify-content:center;
  display:inline-flex; align-items:center; gap:6px;
}
.asr-action-btn svg { flex-shrink:0; }

/* --- 表单控件 --- */
.asr-select {
  width:100%; padding:9px 12px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--bg-page); color:var(--text-1);
  font-size:13px; font-family:inherit;
  outline:none; cursor:pointer;
  transition:border-color 0.15s;
}
.asr-select:focus { border-color:var(--primary); }

.asr-context-input {
  width:100%; box-sizing:border-box;
  min-height:120px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--bg-page); color:var(--text-1);
  font-size:13px; font-family:inherit; line-height:1.6;
  resize:vertical; outline:none;
  transition:border-color 0.15s;
}
.asr-context-input:focus { border-color:var(--primary); }

/* --- 单选组 --- */
.asr-radio-group {
  display:flex; flex-direction:column; gap:8px;
}
.asr-radio-label {
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-page);
  cursor:pointer; transition:all 0.15s;
}
.asr-radio-label:hover { border-color:var(--primary); background:var(--primary-bg); }
.asr-radio-label input[type="radio"] {
  margin-top:2px; accent-color:var(--primary);
}
.asr-radio-text {
  font-size:13px; font-weight:500; color:var(--text-1);
}
.asr-radio-hint {
  font-size:11px; color:var(--text-3);
  display:block; margin-top:2px;
}

/* --- 识别结果带时间戳 --- */
.asr-segment {
  margin-bottom:12px; padding-bottom:12px;
  border-bottom:1px dashed var(--border);
}
.asr-segment:last-child { border-bottom:none; }
.asr-segment-time {
  font-size:11px; color:var(--primary);
  font-family:'SF Mono','Menlo','Consolas','Liberation Mono',monospace;
  margin-bottom:4px;
}
.asr-segment-text {
  font-size:14px; line-height:1.7;
  color:var(--text-1);
}

/* --- 进度条 --- */
.asr-progress-wrap {
  width:100%; height:4px; border-radius:2px;
  background:var(--bg-input); overflow:hidden;
  margin-top:8px;
}
.asr-progress-bar {
  height:100%; border-radius:2px;
  background:var(--primary);
  transition:width 0.3s;
}

/* --- 识别进度提示 --- */
.asr-progress {
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:40px 20px;
  color:var(--text-3); font-size:14px;
}
.asr-spinner {
  width:20px; height:20px;
  border:2px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:asr-spin 0.8s linear infinite;
}
@keyframes asr-spin {
  to { transform:rotate(360deg); }
}

/* --- Toggle 开关 --- */
.asr-toggle {
  position:relative; display:inline-block; width:40px; height:22px;
}
.asr-toggle input { opacity:0; width:0; height:0; }
.asr-toggle-slider {
  position:absolute; inset:0; cursor:pointer;
  background:var(--border); border-radius:22px;
  transition:all 0.2s;
}
.asr-toggle-slider::before {
  content:''; position:absolute; height:16px; width:16px;
  left:3px; bottom:3px; background:#fff; border-radius:50%;
  transition:all 0.2s;
}
.asr-toggle input:checked + .asr-toggle-slider { background:var(--primary); }
.asr-toggle input:checked + .asr-toggle-slider::before { transform:translateX(18px); }

/* --- Speaker / Channel 标签 --- */
.asr-speaker-tag {
  display:inline-block; font-size:10px; font-weight:600;
  padding:1px 6px; border-radius:4px; margin-right:6px;
  vertical-align:middle;
}
.asr-speaker-tag--speaker {
  background:var(--primary-bg); color:var(--primary);
}
.asr-speaker-tag--channel {
  background:rgba(245,158,11,0.12); color:#d97706;
}
[data-theme="dark"] .asr-speaker-tag--channel {
  background:rgba(245,158,11,0.18); color:#fbbf24;
}

/* --- 响应式 --- */
@media (max-width:768px) {
  .asr-workspace { flex-direction:column; }
  .asr-config-panel { width:100%; max-height:200px; border-left:none; border-top:1px solid var(--border); }
  .asr-task-cards { max-width:100%; }
}

/* --- ASR 日志面板（固定在左侧结果区底部） --- */
.asr-log-panel {
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--bg-card);
}
.asr-log-title {
  padding:6px 16px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; font-size:12px; color:var(--text-3); font-weight:500;
  user-select:none;
}
.asr-log-title svg { width:14px; height:14px; transition:transform 0.15s; }
.asr-log-title.open svg { transform:rotate(180deg); }
.asr-log-content {
  display:none;
  height:72px;          /* 固定 3-4 行高度 */
  overflow-y:auto;
  padding:0 16px 6px;
  font-family:'SF Mono','Menlo','Consolas','Liberation Mono',monospace;
  font-size:11px; line-height:1.7; color:var(--text-2);
  background:var(--bg-card);
}
.asr-log-content.open { display:block; }
.asr-log-content .log-line { white-space:pre-wrap; word-break:break-all; }
.asr-log-content .log-line.error { color:var(--error); }
.asr-log-content .log-line.success { color:var(--success); }
.asr-log-content .log-line.warn { color:#d97706; }