/* Any K-i? Voice menu: compact, Claude/ChatGPT-scale controls in the app's cyan and violet. */
.vm {
  --vm-text: var(--sp-text, var(--ps-text, #e7eaf1)); --vm-muted: var(--sp-muted, var(--ps-muted, #8e98ac));
  --vm-card: var(--sp-card, rgba(255,255,255,.04)); --vm-line: var(--sp-line, rgba(255,255,255,.13));
  --vm-cyan: #7de9df; --vm-cyan-ink: #062321; --vm-violet: #bc9cf7; --vm-ok: #6fd6a0; --vm-bad: #ff8a80; --vm-warn: #f2c66d;
  --vm-hover: rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 12px; color: var(--vm-text); font: 13px/1.45 var(--sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left;
}
html[data-theme="light"] .vm { --vm-cyan: #0f766e; --vm-cyan-ink: #fff; --vm-violet: #6d4fc2; --vm-ok: #1b7a4b; --vm-bad: #b3261e; --vm-warn: #8a5a00; --vm-hover: rgba(0,0,0,.05); --vm-line: var(--sp-line, rgba(0,0,0,.14)); --vm-card: var(--sp-card, rgba(0,0,0,.03)); }
.vm *, .vm *::before, .vm *::after { box-sizing: border-box; }
.vm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vm-title { margin: 0; font-size: 15px; font-weight: 650; }
.vm-note, .vm-hint { margin: 0; color: var(--vm-muted); font-size: 12px; }
.vm-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vm-h { margin: 0; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--vm-muted); }

.vm-btn { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: 1px solid var(--vm-line); border-radius: 7px; background: transparent; color: var(--vm-text); font: inherit; font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.vm-btn:hover:not(:disabled) { background: var(--vm-hover); }
.vm-btn:disabled { opacity: .42; cursor: not-allowed; }
.vm-btn:focus-visible, .vm-chip:focus-visible, .vm-seg-btn:focus-visible, .vm select:focus-visible { outline: 2px solid var(--vm-cyan); outline-offset: 1px; }
.vm-primary { background: var(--vm-cyan); border-color: var(--vm-cyan); color: var(--vm-cyan-ink); font-weight: 600; }
.vm-primary:hover:not(:disabled) { background: var(--vm-cyan); filter: brightness(1.07); }
.vm-primary:disabled { background: transparent; color: var(--vm-muted); border-color: var(--vm-line); }
.vm-ghost { border-color: transparent; color: var(--vm-muted); }
.vm-btn.is-live { border-color: var(--vm-violet); color: var(--vm-violet); }

.vm-engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vm-engine { border: 1px solid var(--vm-line); border-radius: 10px; background: var(--vm-card); padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vm-engine.is-ready { border-color: color-mix(in srgb, var(--vm-cyan) 55%, transparent); }
.vm-engine-top { display: flex; align-items: center; gap: 6px; }
.vm-engine-top strong { font-size: 13px; font-weight: 650; }
.vm-rank { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--vm-violet); color: #1b1230; font-size: 10px; font-weight: 700; flex: none; }
.vm-pill { margin-left: auto; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--vm-cyan); color: var(--vm-cyan); font-size: 10px; }
.vm-engine-sum { margin: 0; font-size: 11.5px; color: var(--vm-muted); }
.vm-engine-status { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; overflow-wrap: anywhere; }
.vm-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--vm-warn); flex: none; }
.vm-dot.ok { background: var(--vm-ok); }

.vm-msg { margin: 0; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--vm-line); background: var(--vm-card); font-size: 12px; overflow-wrap: anywhere; }
.vm-msg[hidden] { display: none; }
.vm-msg.is-ok { border-color: color-mix(in srgb, var(--vm-ok) 60%, transparent); }
.vm-msg.is-warn { border-color: color-mix(in srgb, var(--vm-warn) 70%, transparent); }
.vm-msg.is-bad { border-color: color-mix(in srgb, var(--vm-bad) 70%, transparent); color: var(--vm-bad); }

.vm-switch { display: flex; flex-direction: column; gap: 8px; }
.vm-seg { display: inline-flex; align-self: flex-start; max-width: 100%; padding: 2px; border: 1px solid var(--vm-line); border-radius: 9px; background: var(--vm-card); gap: 2px; flex-wrap: wrap; }
.vm-seg-btn { height: 24px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--vm-muted); font: inherit; font-size: 12px; cursor: pointer; }
.vm-seg-btn:hover { color: var(--vm-text); }
.vm-seg-btn[aria-selected="true"], .vm-seg-btn[aria-pressed="true"] { background: var(--vm-violet); color: #1b1230; font-weight: 600; }
.vm-seg-sm .vm-seg-btn[aria-pressed="true"] { background: var(--vm-cyan); color: var(--vm-cyan-ink); }
.vm-current { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1px 10px; padding: 6px 9px; border: 1px solid var(--vm-line); border-radius: 8px; }
.vm-current.is-target { border-color: var(--vm-cyan); }
.vm-current-label { grid-row: span 2; color: var(--vm-muted); font-size: 12px; align-self: center; }
.vm-current-name { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.vm-current-note { color: var(--vm-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.vm-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.vm-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.vm-chip { height: 22px; padding: 0 9px; border: 1px solid var(--vm-line); border-radius: 99px; background: transparent; color: var(--vm-muted); font: inherit; font-size: 11.5px; cursor: pointer; }
.vm-chip[aria-pressed="true"] { border-color: var(--vm-cyan); color: var(--vm-cyan); background: color-mix(in srgb, var(--vm-cyan) 12%, transparent); }
.vm-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.vm-group { position: sticky; top: 0; z-index: 1; padding: 5px 2px 3px; background: var(--sp-bg, var(--ps-bg, #14181f)); color: var(--vm-muted); font-size: 11px; font-weight: 600; }
.vm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--vm-line); border-radius: 8px; background: var(--vm-card); }
.vm-row.is-off { background: transparent; }
.vm-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vm-row-name strong { font-size: 13px; font-weight: 600; }
.vm-row-status { font-size: 11.5px; color: var(--vm-muted); overflow-wrap: anywhere; }
.vm-row-status.ok { color: color-mix(in srgb, var(--vm-ok) 85%, var(--vm-text)); }
.vm-row-status.bad { color: var(--vm-warn); }
.vm-row-act { display: flex; gap: 5px; }
.vm-tag { padding: 0 6px; border-radius: 99px; border: 1px solid var(--vm-line); color: var(--vm-muted); font-size: 10px; line-height: 16px; }
.vm-tag-piper { color: var(--vm-cyan); border-color: color-mix(in srgb, var(--vm-cyan) 50%, transparent); }
.vm-tag-kokoro { color: var(--vm-violet); border-color: color-mix(in srgb, var(--vm-violet) 55%, transparent); }
.vm-tag-use { background: var(--vm-violet); color: #1b1230; border-color: var(--vm-violet); font-weight: 600; }
.vm-empty { margin: 4px 0; color: var(--vm-muted); font-size: 12px; }

.vm-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 10px; border: 1px dashed var(--vm-line); border-radius: 10px; cursor: pointer; }
.vm-drop > strong { font-size: 12.5px; flex: 1 1 100%; }
.vm-drop > .vm-hint { flex: 1 1 200px; }
.vm-drop.is-over, .vm-drop:focus-within { border-color: var(--vm-cyan); background: color-mix(in srgb, var(--vm-cyan) 8%, transparent); }
.vm-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.vm-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vm-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 4px 9px; border: 1px solid var(--vm-line); border-radius: 8px; }
.vm-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.vm-file-meta { color: var(--vm-muted); font-size: 11.5px; }

.vm-reply { display: flex; flex-direction: column; gap: 8px; }
.vm-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--vm-muted); }
.vm select { height: 28px; max-width: 100%; padding: 0 8px; border: 1px solid var(--vm-line); border-radius: 7px; background: var(--vm-card); color: var(--vm-text); font: inherit; font-size: 12.5px; }
.vm-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.vm-check input { width: 14px; height: 14px; accent-color: var(--vm-cyan); margin: 0; }

@media (max-width: 640px) {
  .vm-engines { grid-template-columns: 1fr; }
  .vm select { font-size: 16px; height: 34px; }
  .vm-btn { height: 30px; }
  .vm-list { max-height: 52vh; }
  .vm-row { grid-template-columns: 1fr; }
  .vm-row-act { justify-content: flex-end; }
  .vm-current { grid-template-columns: 1fr; }
  .vm-current-label { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .vm-btn { transition: none; } }

/* inside the phone shell (body.ps) */
body.ps .vm { font-size: 14px; }
body.ps .vm-btn { font-size: 13px; }
.ps-voicemenu { margin: 0 0 12px; }
details.ps-voicetrain { margin: 8px 0 24px; }
details.ps-voicetrain > summary { cursor: pointer; padding: 6px 4px; color: var(--ps-dim, #8fa1b6); font-size: 13px; }