/* =========================================================
   KIARAHUB — AI VOICE EXAMINER
   A floating, glassy chat widget in the theme's own idiom:
   teal for "live" AI state (matches .kh-ai-chip elsewhere),
   gold for the primary call-to-action, IBM Plex Mono for
   every instrumentation-style label. Pure CSS + the browser's
   own SpeechRecognition/SpeechSynthesis — no external calls.
   ========================================================= */

#kh-voice-examiner{ position:fixed; right:20px; bottom:20px; z-index:9999; }

.kh-ve-toggle{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--kh-gradient-teal); color:#fff;
  box-shadow:var(--kh-shadow-lg);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:transform .18s var(--kh-ease);
}
.kh-ve-toggle:hover{ transform:translateY(-2px) scale(1.04); }
.kh-ve-toggle svg{ width:26px; height:26px; }
.kh-ve-toggle::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--kh-teal-bright); opacity:.5;
}
@media (prefers-reduced-motion: no-preference){
  .kh-ve-toggle::after{ animation:kh-ve-ring 2.4s ease-out infinite; }
}
@keyframes kh-ve-ring{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}

.kh-ve-panel{
  position:absolute; right:0; bottom:76px; width:min(360px, 90vw);
  max-height:min(560px, 75vh); display:flex; flex-direction:column;
  background:var(--kh-paper-raised); border:1px solid var(--kh-glass-border);
  border-radius:var(--kh-radius-lg); box-shadow:var(--kh-shadow-lg);
  overflow:hidden; opacity:0; transform:translateY(12px) scale(.97);
  pointer-events:none; transition:opacity .18s var(--kh-ease), transform .18s var(--kh-ease);
}
.kh-ve-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.kh-ve-head{
  background:var(--kh-gradient-navy); color:#fff; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; flex:none;
}
.kh-ve-head-title{ display:flex; flex-direction:column; gap:2px; }
.kh-ve-head-title strong{ font-family:var(--kh-font-display); font-size:1.02rem; }
.kh-ve-head-title span{
  font-family:var(--kh-font-mono); font-size:.66rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--kh-teal-bright);
}
.kh-ve-close{
  background:none; border:none; color:#fff; opacity:.75; cursor:pointer;
  font-size:1.1rem; line-height:1; padding:4px;
}
.kh-ve-close:hover{ opacity:1; }

.kh-ve-tabs{ display:flex; border-bottom:1px solid var(--kh-line); flex:none; }
.kh-ve-tab{
  flex:1; padding:10px; border:none; background:none; cursor:pointer;
  font-family:var(--kh-font-mono); font-size:.72rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--kh-ink-soft); border-bottom:2px solid transparent;
}
.kh-ve-tab.is-active{ color:var(--kh-teal); border-bottom-color:var(--kh-teal); }

.kh-ve-pane-practice{ display:flex; flex-direction:column; min-height:0; flex:1; }

.kh-ve-log{
  flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px;
  background:var(--kh-paper);
}
.kh-ve-bubble{
  max-width:88%; padding:.6em .85em; border-radius:var(--kh-radius-sm);
  font-size:.88rem; line-height:1.4; font-family:var(--kh-font-body);
}
.kh-ve-bubble--ai, .kh-ve-bubble--ai-options{
  align-self:flex-start; background:var(--kh-paper-raised); border:1px solid var(--kh-line); color:var(--kh-ink);
}
.kh-ve-bubble--ai-options{ font-family:var(--kh-font-mono); font-size:.78rem; color:var(--kh-ink-soft); }
.kh-ve-bubble--user{
  align-self:flex-end; background:var(--kh-teal); color:#fff;
}
.kh-ve-bubble--ai-correct{
  align-self:flex-start; background:var(--kh-teal-tint); border:1px solid var(--kh-teal-bright); color:var(--kh-teal); font-weight:700;
}
.kh-ve-bubble--ai-wrong{
  align-self:flex-start; background:var(--kh-coral-tint); border:1px solid var(--kh-coral); color:var(--kh-ink);
}

.kh-ve-controls{
  flex:none; padding:10px; border-top:1px solid var(--kh-line);
  display:flex; align-items:center; gap:8px; background:var(--kh-paper-raised);
}
.kh-ve-mic{
  flex:none; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--kh-teal);
  background:var(--kh-teal-tint); color:var(--kh-teal); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.kh-ve-mic svg{ width:18px; height:18px; }
.kh-ve-mic.is-listening{ background:var(--kh-teal); color:#fff; }
@media (prefers-reduced-motion: no-preference){
  .kh-ve-mic.is-listening{ animation:kh-ve-pulse 1s ease-in-out infinite; }
}
@keyframes kh-ve-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(31,111,107,.4); } 50%{ box-shadow:0 0 0 8px rgba(31,111,107,0); } }

.kh-ve-text-input{
  flex:1; min-width:0; padding:.6em .8em; border-radius:100px; border:1.5px solid var(--kh-line);
  font-family:var(--kh-font-body); font-size:.86rem; background:var(--kh-paper);
}
.kh-ve-text-input:focus{ outline:none; border-color:var(--kh-teal); }

.kh-ve-send, .kh-ve-next{
  flex:none; border:none; cursor:pointer; font-family:var(--kh-font-body); font-weight:600;
  border-radius:100px; padding:.6em 1em; font-size:.82rem;
}
.kh-ve-send{ background:var(--kh-gradient-teal); color:#fff; }
.kh-ve-next{ margin:0 10px 10px; background:var(--kh-gradient-gold); color:var(--kh-ink); }

.kh-ve-pane-contribute{ padding:14px 16px; overflow-y:auto; }
.kh-ve-pane-contribute p.kh-ve-hint{ font-size:.8rem; color:var(--kh-ink-soft); margin:0 0 .9em; }
.kh-ve-contribute-form label{
  display:block; font-family:var(--kh-font-mono); font-size:.68rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--kh-ink-soft); margin:.7em 0 .3em;
}
.kh-ve-contribute-form input[type="text"],
.kh-ve-contribute-form textarea,
.kh-ve-contribute-form select{
  width:100%; padding:.55em .7em; border-radius:var(--kh-radius-sm); border:1.5px solid var(--kh-line);
  font-family:var(--kh-font-body); font-size:.86rem; background:var(--kh-paper);
}
.kh-ve-opt-row{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; margin-bottom:6px; }
.kh-ve-contribute-form button[type="submit"]{
  margin-top:12px; width:100%; padding:.7em; border:none; border-radius:100px; cursor:pointer;
  background:var(--kh-gradient-gold); color:var(--kh-ink); font-weight:700; font-family:var(--kh-font-body);
}
.kh-ve-contribute-status{ margin-top:.6em; font-size:.82rem; color:var(--kh-teal); min-height:1.2em; }
.kh-ve-login-note{ font-size:.84rem; color:var(--kh-ink-soft); }
.kh-ve-login-note a{ color:var(--kh-teal); font-weight:600; }

@media (max-width:480px){
  #kh-voice-examiner{ right:14px; bottom:14px; }
  .kh-ve-panel{ width:92vw; right:-6px; }
}