/* ============================================================================
   Verba 实时高精语音识别与声波微动效样式 (public/speech.css)
   职责：持续听写开关、声波脉冲、实时听写浮动气泡与屏幕常亮状态反馈
   ============================================================================ */

/* 1. 持续听写切换按钮 (Speech Toggle Button) */
.btn-speech-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: var(--bg-surface, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  position: relative;
  outline: none;
}

.btn-speech-toggle:hover {
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #f8fafc);
  border-color: var(--border-color-hover, rgba(255, 255, 255, 0.2));
}

.speech-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 16px;
  height: 16px;
}

.speech-wave-bars {
  display: none;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.speech-wave-bars .bar {
  width: 2.5px;
  background-color: #ef4444;
  border-radius: 2px;
  animation: waveBar 0.9s infinite ease-in-out alternate;
}

.speech-wave-bars .bar-1 { height: 6px; animation-delay: 0.1s; }
.speech-wave-bars .bar-2 { height: 13px; animation-delay: 0.3s; }
.speech-wave-bars .bar-3 { height: 8px; animation-delay: 0.2s; }

@keyframes waveBar {
  0% { transform: scaleY(0.4); opacity: 0.5; }
  100% { transform: scaleY(1.2); opacity: 1; }
}

/* 监听激活状态 (Listening Active State) */
.btn-speech-toggle.listening {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}

.btn-speech-toggle.listening .icon-mic {
  display: none;
}

.btn-speech-toggle.listening .speech-wave-bars {
  display: inline-flex;
}

.btn-speech-toggle.listening:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.6);
}

/* 不支持/未授权警示状态 */
.btn-speech-toggle.unsupported {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 2. 实时未定型听写浮动气泡 (Interim Live Bubble) */
.speech-interim-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-size: 13px;
  line-height: 1.4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: bubbleFadeIn 0.2s ease-out;
}

@keyframes bubbleFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.bubble-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulseDot 1.2s infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.bubble-title {
  color: #f87171;
  font-weight: 600;
  flex-shrink: 0;
}

.bubble-text {
  color: var(--text-primary, #f8fafc);
  font-style: italic;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3. 手机端适配 (Mobile Responsive) */
@media (max-width: 640px) {
  .btn-speech-toggle {
    padding: 6px 10px;
    font-size: 12px;
  }
  .bubble-text {
    max-width: 200px;
  }
}

/* 4. 麦克风双层安全门禁指引弹窗与实时诊断 (Microphone Permission Modal) */
.mic-diag-card {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.mic-diag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.mic-diag-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mic-diag-badge {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
  white-space: nowrap;
}
.mic-diag-badge.granted {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}
.mic-diag-badge.prompt {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}
.mic-diag-desc {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.5;
}

.mic-tabs-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  -webkit-overflow-scrolling: touch;
}
.mic-tab-pill {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--bg-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.mic-tab-pill:hover {
  color: var(--text-primary, #f8fafc);
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
}
.mic-tab-pill.active {
  color: #2dd4bf;
  border-color: #2dd4bf;
  background: rgba(45, 212, 191, 0.1);
  font-weight: 600;
}

.mic-guide-panel {
  display: none;
  background: var(--bg-surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary, #94a3b8);
}
.mic-guide-panel.active {
  display: block;
}
.mic-guide-panel strong {
  color: var(--text-primary, #f8fafc);
}
.mic-step-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.mic-step-list li {
  margin-bottom: 6px;
}
.mic-step-list li:last-child {
  margin-bottom: 0;
}
.mic-highlight-box {
  background: rgba(45, 212, 191, 0.08);
  border-left: 3px solid #2dd4bf;
  padding: 6px 10px;
  margin: 8px 0;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: #2dd4bf;
}