/* Sprechen tab (voice.js): orb, live captions, controls. Dark only, tokens from style.css. */

.k-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--tabbar-h) - env(safe-area-inset-bottom) - 120px);
  min-height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom) - 120px);
  padding: 8px 0 4px;
}

.k-voice-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 4vh;
}

/* The orb grows with the audio level (--lvl 0..1 set per frame) */
.k-orb {
  --lvl: 0;
  position: relative;
  width: 180px;
  height: 180px;
  border: none;
  border-radius: 50%;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.k-orb-core,
.k-orb-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.k-orb-core {
  background: radial-gradient(circle at 35% 30%, #a5b4fc 0%, var(--accent) 45%, #312e81 100%);
  transform: scale(calc(0.86 + var(--lvl) * 0.22));
  transition: transform 80ms linear, filter 300ms, opacity 300ms;
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.35);
}
.k-orb-glow {
  background: radial-gradient(circle, rgba(129, 140, 248, 0.45) 0%, rgba(129, 140, 248, 0) 70%);
  transform: scale(calc(1.05 + var(--lvl) * 0.5));
  transition: transform 120ms linear, opacity 300ms;
  opacity: 0.6;
}

.k-orb[data-state="idle"] .k-orb-core,
.k-orb[data-state="ended"] .k-orb-core { animation: k-orb-breathe 4s ease-in-out infinite; }
.k-orb[data-state="idle"] .k-orb-glow,
.k-orb[data-state="ended"] .k-orb-glow { opacity: 0.25; }
.k-orb[data-state="connecting"] .k-orb-core { animation: k-orb-breathe 1.2s ease-in-out infinite; filter: saturate(0.6); }
.k-orb[data-state="thinking"] .k-orb-core {
  background: conic-gradient(from 0deg, #818cf8, #22d3ee, #a78bfa, #818cf8);
  animation: k-orb-spin 2.4s linear infinite;
}
.k-orb[data-state="speaking"] .k-orb-glow { opacity: 0.9; }
.k-orb[data-state="hearing"] .k-orb-core,
.k-orb[data-state="pressing"] .k-orb-core {
  background: radial-gradient(circle at 35% 30%, #e0e7ff 0%, #818cf8 45%, #3730a3 100%);
}
.k-orb[data-state="muted"] .k-orb-core,
.k-orb[data-state="held"] .k-orb-core { filter: grayscale(0.85) brightness(0.7); }
.k-orb[data-state="muted"] .k-orb-glow,
.k-orb[data-state="held"] .k-orb-glow { opacity: 0.15; }

@keyframes k-orb-breathe {
  0%, 100% { transform: scale(0.86); }
  50% { transform: scale(0.93); }
}
@keyframes k-orb-spin {
  from { transform: scale(calc(0.88 + var(--lvl) * 0.2)) rotate(0deg); }
  to { transform: scale(calc(0.88 + var(--lvl) * 0.2)) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .k-orb-core, .k-orb-glow { animation: none !important; transition: none; }
}

.k-voice-state {
  min-height: 22px;
  font-size: 16px;
  color: var(--text);
  text-align: center;
}
.k-voice-sub {
  min-height: 16px;
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Live captions */
.k-voice-captions {
  width: 100%;
  flex: 1;
  min-height: 80px;
  max-height: 34vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 2px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}
.k-voice-line {
  max-width: 86%;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.k-voice-me { align-self: flex-end; color: var(--text-dim); text-align: right; }
.k-voice-ai { align-self: flex-start; color: var(--text); }

.k-voice-card,
.k-voice-after {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin: 6px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 14px;
}
.k-voice-card { border-color: var(--accent); }

/* Controls: mute · start/end · captions */
.k-voice-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 12px 0 6px;
}
.k-voice-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-voice-btn:disabled { opacity: 0.35; }
.k-voice-btn.active { background: var(--text); color: var(--bg); }
.k-voice-main {
  min-width: 150px;
  height: 52px;
  border-radius: 26px;
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 0 22px;
}
.k-voice-main.k-voice-end { background: var(--danger); }

.k-voice-opts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-dim);
}
.k-voice-opts select {
  margin-left: 4px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font: inherit;
}
.k-voice-hint { text-align: center; max-width: 340px; margin: 10px auto 0; font-size: 12px; }

/* Six tabs on a phone: smaller labels, never wider than the slot */
.k-tab { min-width: 0; }
.k-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-bar:has(.k-tab:nth-child(6)) .k-tab { font-size: 10px; }