/* Live Voice — styles for the Live Voice pane only.
   Reads the app's existing colour tokens; overrides nothing. */

.lv-stage{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:10px 0 18px;
}

.lv-button{
  width:180px;height:180px;padding:0;border:0;border-radius:50%;
  background:transparent;display:block;line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.lv-button:focus-visible{outline:2px solid var(--moss-deep);outline-offset:4px;}
.lv-button canvas{width:180px;height:180px;display:block;}

.lv-status{
  min-height:20px;font-size:.8125rem;color:var(--ink-soft);text-align:center;
  max-width:34em;
}
/* a failure stays on screen until she does something else, so it reads as a
   problem rather than as passing status */
.lv-status.lv-failed{color:var(--amber);}

.lv-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:center;}
.lv-controls button{
  padding:8px 15px;border-radius:9px;border:1px solid var(--line);
  background:var(--paper-raised);color:var(--ink);font:inherit;font-size:.78125rem;
}
.lv-controls button.stop{border-color:var(--plum);color:var(--plum);}
.lv-controls button.end{border-color:var(--plum);background:var(--plum);color:#fff;}
.lv-controls button[hidden]{display:none;}

/* thresholds are tuned by feel, so they live next to the button */
.lv-settings{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:30em;margin-top:4px;
  padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper-raised);
}
.lv-toggle{display:flex;gap:9px;align-items:flex-start;font-size:.78125rem;color:var(--ink);}
.lv-toggle input{margin:2px 0 0;flex:none;}
.lv-range{display:flex;flex-direction:column;gap:5px;font-size:.71875rem;color:var(--ink-soft);}
.lv-range b{color:var(--ink);font-weight:500;font-family:'IBM Plex Mono',monospace;}
.lv-range input[type=range]{width:100%;accent-color:var(--moss-deep);}
.lv-settings[hidden]{display:none;}

.lv-meter{
  position:relative;height:8px;border-radius:4px;
  background:var(--paper);border:1px solid var(--line);overflow:hidden;
}
.lv-meter-fill{
  display:block;height:100%;width:0;background:var(--ink-soft);opacity:.5;
  transition:width .05s linear;
}
.lv-meter-fill.over{background:var(--plum);opacity:1;}
.lv-meter-mark{
  position:absolute;top:-2px;bottom:-2px;left:50%;width:2px;
  background:var(--amber);
}
.lv-hint{margin:0;font-size:.6875rem;color:var(--ink-soft);line-height:1.45;}

/* where the wait actually goes, without opening DevTools */
.lv-timing{
  display:flex;flex-direction:column;gap:3px;
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);
  font-family:'IBM Plex Mono',monospace;font-size:.6875rem;color:var(--ink-soft);
}
.lv-timing[hidden]{display:none;}
.lv-timing-row{display:flex;justify-content:space-between;gap:12px;}
.lv-timing-row b{color:var(--ink);font-weight:500;}
.lv-timing-row.total{
  margin-top:3px;padding-top:5px;border-top:1px solid var(--line);
}
.lv-timing-row.total b{color:var(--moss-deep);}
.lv-timing-empty{opacity:.75;}

.lv-transcript{
  display:flex;flex-direction:column;gap:13px;
  max-height:46vh;overflow-y:auto;padding:2px;
}
.lv-turn{max-width:88%;}
.lv-turn.her{align-self:flex-end;text-align:right;}
.lv-turn.wonder{align-self:flex-start;}
.lv-who{
  font-size:.65625rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:4px;
}
.lv-text{
  padding:11px 15px;border-radius:11px;font-size:.875rem;line-height:1.55;
  background:var(--paper-raised);border:1px solid var(--line);color:var(--ink);
  white-space:pre-wrap;text-align:left;
}
.lv-turn.her .lv-text{
  background:var(--plum-raised);border-color:var(--plum-soft);
  border-bottom-right-radius:3px;
}
.lv-turn.wonder .lv-text{border-bottom-left-radius:3px;}
.lv-text:empty{display:none;}
.lv-cutoff{margin-top:5px;font-size:.6875rem;color:var(--amber);}

@media (max-width:700px){
  .lv-button,.lv-button canvas{width:158px;height:158px;}
  .lv-transcript{max-height:40vh;}
}