/* Audio Recorder Kernel — stylesheet v0.3.0
   All visual values flow through CSS custom properties defined on .ar-mount.
   Sites override tokens to apply their own theme. Light/dark theme is a second
   layer of token overrides via [data-ar-theme="light"] on the mount element.
   Load via <link rel="stylesheet"> to satisfy strict style-src 'self' CSP. */

/* ═══ Design tokens — THE central control surface ═══════════════════════════
   This single block is the ONE place that defines the recorder's look, shared
   by BOTH panels this kernel ships:
     • .ar-mount  → standalone audio recorder  (mountAudioRecorderPanel)
     • .vr-panel  → recorder + live transcription page

   A consuming site re-themes either/both by overriding these custom properties
   in ITS OWN stylesheet — never by editing values here:

       .ar-mount, .vr-panel {           // or any common ancestor
         --ar-accent: #ff6a00;
         --ar-mic-bg: linear-gradient(180deg, #7c3aed, #5b21b6);
         --ar-font:   "Inter", system-ui, sans-serif;
       }

   That is how 20 sites each pick their own colour/font/feel while running the
   exact same tool. Light theme is a second token layer applied via
   [data-ar-theme="light"] on the mount/panel element.                        */
.ar-mount, .vr-panel {
  /* Layout — FIXED height prevents any reflow (SEO requirement) */
  --ar-h:            330px;

  /* Brand accent colours */
  --ar-accent:       #00e5a0;
  --ar-accent-2:     #19c8ff;

  /* Panel background layers (dark theme) */
  --ar-bg:           linear-gradient(160deg, #0e1d44 0%, #102246 55%, #0a1530 100%);
  --ar-bg-glow:      radial-gradient(120% 80% at 78% 18%, rgba(35,72,150,.55) 0%, rgba(13,27,62,0) 60%);

  /* Text */
  --ar-fg:           #fff;
  --ar-fg-dim:       rgba(232,238,255,.50);
  --ar-fg-faint:     rgba(232,238,255,.28);

  /* Surfaces & borders */
  --ar-surface:      rgba(255,255,255,.07);
  --ar-border:       rgba(255,255,255,.09);
  --ar-glass:        rgba(10,18,42,.55);     /* frosted pill / control background */
  --ar-glass-border: rgba(255,255,255,.14);

  /* Action colours */
  --ar-save-bg:      #1aaa5f;
  --ar-save-fg:      #fff;
  --ar-danger-bg:    #c0392b;
  --ar-danger-fg:    #fff;
  --ar-mic-bg:       linear-gradient(180deg, #f1264a 0%, #d81b3c 100%);
  --ar-rec:          #ff334f;                /* live recording dot / indicator */

  /* Note title (editable heading inside the transcript document) */
  --ar-note-fg:      #9ec3ff;                /* readable blue heading on dark transcript */
  --ar-interim:      #ffd700;                /* live/temp caption under the mic */

  /* Focus ring (accessibility — keep visible against any theme) */
  --ar-focus:        rgba(120,170,255,.7);

  /* Shapes */
  --ar-radius-pill:  40px;
  --ar-radius-sel:   40px;   /* mic selector — pill to match button language  */
  --ar-radius-box:   12px;   /* modal, inner boxes                            */

  /* Typography */
  --ar-font:         system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ─── Light theme layer ─────────────────────────────────────────────────────
   Host page: <div class="ar-mount" data-ar-theme="light"> (or on .vr-panel)  */
.ar-mount[data-ar-theme="light"], .vr-panel[data-ar-theme="light"] {
  --ar-bg:          linear-gradient(160deg, #eef2ff 0%, #e8eeff 60%, #f0f4ff 100%);
  --ar-bg-glow:     radial-gradient(120% 80% at 78% 18%, rgba(120,150,255,.18) 0%, rgba(220,230,255,0) 60%);
  --ar-fg:          #1a1a3e;
  --ar-fg-dim:      rgba(30,30,80,.55);
  --ar-fg-faint:    rgba(30,30,80,.30);
  --ar-surface:     rgba(0,0,0,.05);
  --ar-border:      rgba(0,0,0,.08);
}

/* ─── Host mount — fixed height, never reflows ──────────────────────────────*/
.ar-mount { height: var(--ar-h); display: block; }

.ar, .ar * { box-sizing: border-box; margin: 0; padding: 0; }

.ar {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  color: var(--ar-fg);
  font-family: var(--ar-font);
  background: var(--ar-bg-glow), var(--ar-bg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Mic selector — ghost style, pill-shaped, super subtle ─────────────────*/
.ar-sel-wrap {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 3;
  max-width: 55%;
}
.ar.is-stopped .ar-sel-wrap { display: none; }

.ar-sel {
  max-width: 220px;
  font: 500 11.5px/1.2 var(--ar-font);
  color: var(--ar-fg-dim);
  background: transparent;
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-sel);
  padding: 5px 24px 5px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Custom caret — matches dimmed text */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='rgba(232,238,255,.4)'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color .18s ease, color .18s ease;
}
.ar-sel:focus {
  outline: none;
  border-color: rgba(255,255,255,.22);
  color: var(--ar-fg);
}
.ar-sel option { background: #0e1d44; color: #fff; }

/* ─── Modal ──────────────────────────────────────────────────────────────────*/
.ar-modal {
  position: absolute; inset: 0; z-index: 10;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,14,36,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ar-modal.ar-modal-open { display: flex; }
.ar-modal-box {
  background: linear-gradient(160deg, #16254e 0%, #0f1b3d 100%);
  border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-box);
  padding: 28px 30px 22px;
  max-width: 300px; width: calc(100% - 48px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.ar-modal-msg {
  font-size: 14.5px; line-height: 1.5;
  color: var(--ar-fg); margin-bottom: 20px; text-align: center;
}
.ar-modal-btns { display: flex; gap: 10px; justify-content: center; }
.ar-modal-ok, .ar-modal-cancel {
  flex: 1; padding: 10px 0; border: none;
  border-radius: var(--ar-radius-pill);
  font: 600 13.5px/1 var(--ar-font); cursor: pointer;
  -webkit-font-smoothing: antialiased;
  transition: opacity .14s ease;
}
.ar-modal-ok { background: var(--ar-save-bg); color: var(--ar-save-fg); }
.ar-modal-ok:hover { opacity: .88; }
.ar-modal-cancel {
  background: var(--ar-surface); color: var(--ar-fg-dim);
  border: 1px solid var(--ar-border);
}
.ar-modal-cancel:hover { background: rgba(255,255,255,.14); }
.ar-modal-ok:focus-visible,
.ar-modal-cancel:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }

/* ─── Stage ──────────────────────────────────────────────────────────────────*/
.ar-stage {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 24px; gap: 0; min-height: 0;
  overflow: hidden;
}

/* All swappable panels hidden by default */
.ar-hint, .ar-mic-wrap, .ar-wave, .ar-rbar,
.ar-err, .ar-retry, .ar-trim { display: none; }

/* ─── Idle / requesting / error ──────────────────────────────────────────────*/
.ar.is-idle    .ar-hint, .ar.is-req   .ar-hint,
.ar.is-error   .ar-hint { display: flex; }
.ar.is-idle    .ar-mic-wrap, .ar.is-req .ar-mic-wrap,
.ar.is-error   .ar-mic-wrap { display: flex; }

.ar-hint {
  align-items: center; font-size: 13px;
  letter-spacing: .01em; color: var(--ar-fg-dim);
  margin-top: 18px; text-align: center;
}
.ar.is-req .ar-hint { color: var(--ar-fg); }

.ar-mic-wrap {
  position: relative; align-items: center; justify-content: center;
  width: 64px; height: 64px;
}
.ar-aura {
  position: absolute; left: 50%; top: 50%;
  margin-left: -50px; margin-top: -50px;
  width: 100px; height: 100px;
  border-radius: 50%;
  pointer-events: none; transform: scale(0); opacity: 0;
  transition: transform .09s ease-out, opacity .12s ease-out;
}
.ar-a1 { background: rgba(224,31,61,.24); }
.ar-a2 { width: 132px; height: 132px; margin-left: -66px; margin-top: -66px; background: rgba(224,31,61,.12); }
.ar-a3 { width: 168px; height: 168px; margin-left: -84px; margin-top: -84px; background: rgba(224,31,61,.06); }

.ar-mic {
  position: relative; width: 64px; height: 64px;
  border: none; border-radius: 50%;
  background: var(--ar-mic-bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(224,31,61,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-font-smoothing: antialiased;
}
.ar-mic svg { width: 26px; height: 26px; fill: #fff; }
.ar-mic:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 8px 30px rgba(224,31,61,.65); }
.ar-mic:active:not(:disabled) { transform: scale(.95); }
.ar-mic:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 3px; }
.ar-mic:disabled { opacity: .55; cursor: default; }
.ar.is-idle .ar-mic { animation: ar-breathe 2.6s ease-in-out infinite; }
@keyframes ar-breathe {
  0%,100% { box-shadow: 0 6px 24px rgba(224,31,61,.5), inset 0 1px 0 rgba(255,255,255,.25); }
  50%      { box-shadow: 0 6px 34px rgba(224,31,61,.78), inset 0 1px 0 rgba(255,255,255,.25); }
}

/* ─── Recording / paused ─────────────────────────────────────────────────────*/
/* Wave canvas: absolute, fills entire stage so orb glow is never clipped */
.ar.is-rec .ar-wave, .ar.is-paused .ar-wave {
  display: block;
  position: absolute; inset: 0;
  z-index: 0;
}
/* Controls pinned to bottom of stage, always below the orb */
.ar.is-rec .ar-rbar, .ar.is-paused .ar-rbar {
  display: flex;
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  justify-content: center;
  z-index: 1;
}

.ar-wave { pointer-events: none; }
.ar-wave canvas { display: block; width: 100%; height: 100%; }

.ar-rbar {
  align-items: center; justify-content: center;
  gap: 14px; margin-top: 20px;
}
.ar-pill {
  display: flex; align-items: center; gap: 9px;
  background: var(--ar-glass);
  border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-radius-pill); padding: 8px 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ar-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--ar-rec); }
.ar.is-rec .ar-dot { animation: ar-blink 1.2s ease-in-out infinite; }
@keyframes ar-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.ar-timer {
  font-size: 15px; font-weight: 600; letter-spacing: .06em;
  min-width: 48px; font-variant-numeric: tabular-nums; color: var(--ar-fg);
}

.ar-ctrl {
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--ar-glass);
  border: 1px solid var(--ar-glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s ease, transform .12s ease;
  -webkit-font-smoothing: antialiased;
}
.ar-ctrl svg { width: 18px; height: 18px; fill: var(--ar-fg); }
.ar-ctrl:hover { background: rgba(255,255,255,.18); }
.ar-ctrl:active { transform: scale(.93); }
.ar-ctrl:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }
/* Done = same solid green as Save button */
.ar-done {
  background: var(--ar-save-bg);
  border-color: var(--ar-save-bg);
  box-shadow: 0 2px 10px rgba(26,170,95,.45);
}
.ar-done:hover { opacity: .88; }
.ar-done svg { fill: var(--ar-save-fg); }

/* Discard = same solid red as Start over button */
.ar-discard {
  background: var(--ar-danger-bg);
  border-color: var(--ar-danger-bg);
  box-shadow: 0 2px 10px rgba(192,57,43,.4);
}
.ar-discard:hover { opacity: .88; }
.ar-discard svg { fill: var(--ar-danger-fg); }

/* Zero-delay tooltips via data-tip attribute */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: rgba(8,14,36,.90);
  color: rgba(232,238,255,.92);
  font: 500 11px/1.3 var(--ar-font, system-ui);
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease 0s; /* 0s delay — immediate */
  z-index: 10;
}
[data-tip]:hover::after { opacity: 1; }

/* ─── Error ───────────────────────────────────────────────────────────────── */
.ar.is-error .ar-err   { display: block; }
.ar.is-error .ar-retry { display: inline-flex; }
.ar-err {
  margin-top: 18px; max-width: 320px; font-size: 13px; line-height: 1.5;
  color: #ff8a8a; text-align: center;
}
.ar-retry {
  margin-top: 12px; align-items: center; justify-content: center;
  padding: 8px 20px; border: none; border-radius: var(--ar-radius-pill);
  background: var(--ar-surface); color: var(--ar-fg); font-size: 13px; cursor: pointer;
  transition: background .14s ease;
}
.ar-retry:hover { background: rgba(255,255,255,.18); }
.ar-retry:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }

/* ─── Trim / save view — absolute overlay so panel height NEVER changes ──────*/
.ar.is-stopped .ar-trim { display: flex; }
.ar-trim {
  position: absolute; inset: 0;
  flex-direction: column; padding: 14px 18px 16px;
  background: var(--ar-bg-glow), var(--ar-bg);
}

.ar-x {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border: none; border-radius: 8px;
  background: none; color: var(--ar-fg-dim); font-size: 22px; line-height: 1;
  cursor: pointer; z-index: 3; transition: color .14s ease, background .14s ease;
}
.ar-x:hover { color: var(--ar-fg); background: var(--ar-surface); }
.ar-x:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 1px; }

.ar-ttimes {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ar-fg-dim); font-variant-numeric: tabular-nums;
  margin: 4px 4px 6px; padding-right: 32px;
}
.ar-play-pos {
  font-size: 12px; font-weight: 600; color: var(--ar-accent);
  min-width: 44px; text-align: center; font-variant-numeric: tabular-nums;
}

.ar-tl { position: relative; flex: 1; min-height: 80px; margin-bottom: 10px; }
.ar-tc { display: block; width: 100%; height: 100%; border-radius: 6px; cursor: crosshair; background: rgba(255,255,255,.02); }

.ar-h {
  position: absolute; top: -4px; bottom: -4px;
  width: 8px; margin-left: -4px;
  border-radius: 5px; background: var(--ar-accent-2);
  cursor: ew-resize; touch-action: none;
  box-shadow: 0 0 0 1px rgba(8,16,38,.5), 0 2px 8px rgba(0,0,0,.4);
}
.ar-h::after  { content: ""; position: absolute; width: 2px; height: 22px; left: 50%; top: 50%; margin: -11px 0 0 -1px; border-radius: 2px; background: rgba(8,16,38,.55); }
.ar-h::before { content: ""; position: absolute; inset: -6px -10px; }
.ar-h:focus-visible { outline: 3px solid rgba(120,170,255,.85); outline-offset: 2px; }

.ar-tbot { display: flex; align-items: center; justify-content: center; gap: 12px; }

.ar-play {
  flex-shrink: 0; width: 42px; height: 42px; border: none; border-radius: 50%;
  background: var(--ar-surface); border: 1px solid var(--ar-border);
  color: var(--ar-fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .14s ease, transform .12s ease;
}
.ar-play svg { width: 17px; height: 17px; fill: var(--ar-fg); }
.ar-play:hover { background: rgba(255,255,255,.14); }
.ar-play:active { transform: scale(.93); }
.ar-play:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }

.ar-fn {
  width: 30%; min-width: 120px; max-width: 260px; flex: none;
  font: 400 13px/1.2 var(--ar-font); color: var(--ar-fg);
  background: var(--ar-surface); border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-pill); padding: 10px 16px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.ar-fn::placeholder { color: var(--ar-fg-faint); }
.ar-fn:focus { outline: none; border-color: rgba(25,200,255,.55); background: rgba(255,255,255,.10); }

/* Save = green circle checkmark (identical to ar-done in recording) */
.ar-save {
  background: var(--ar-save-bg);
  border-color: var(--ar-save-bg);
  box-shadow: 0 2px 10px rgba(26,170,95,.45);
}
.ar-save:hover:not(:disabled) { opacity: .88; }
.ar-save:disabled { cursor: default; }
.ar-save svg { fill: var(--ar-save-fg); }
.ar-save:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }

/* Start over = red circle X (identical to ar-discard in recording) */
.ar-newrec {
  background: var(--ar-danger-bg);
  border-color: var(--ar-danger-bg);
  box-shadow: 0 2px 10px rgba(192,57,43,.4);
}
.ar-newrec:hover { opacity: .88; }
.ar-newrec svg { fill: var(--ar-danger-fg); }
.ar-newrec:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }

/* After confirmed save — save fades, restart turns green */
.ar.ar-did-save .ar-save {
  background: rgba(255,255,255,.10); box-shadow: none;
  border: 1px solid var(--ar-border);
}
.ar.ar-did-save .ar-save svg { fill: var(--ar-fg-dim); }
.ar.ar-did-save .ar-save:hover:not(:disabled) { background: rgba(255,255,255,.16); opacity: 1; }
.ar.ar-did-save .ar-newrec {
  background: var(--ar-save-bg);
  border-color: var(--ar-save-bg);
  box-shadow: 0 2px 10px rgba(26,170,95,.4);
}
.ar.ar-did-save .ar-newrec svg { fill: var(--ar-save-fg); }

/* ─── Responsive ─────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .ar-stage { padding: 16px 12px; }
  .ar-trim  { padding: 12px 14px 14px; }
  .ar-sel   { max-width: 140px; font-size: 11px; }
  .ar-tbot  { flex-wrap: wrap; }
  .ar-fn    { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-mic, .ar-aura, .ar-dot { animation: none !important; }
  .ar-ctrl, .ar-save, .ar-play, .ar-newrec, .ar-sel { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Voice Recorder + Transcription panel — uses same design tokens as .ar-mount
   Sites override tokens on .vr-panel { --ar-X: value } or on a parent element.
   ═══════════════════════════════════════════════════════════════════════════ */

.vr-panel {
  /* Tokens inherited from the unified contract block at the top of this file.
     Re-theme via .ar-mount, .vr-panel { --ar-*: … } in the site stylesheet. */
  position: relative;
  width: 100%; min-height: 480px;
  display: flex; flex-direction: column;
  background: var(--ar-bg-glow), var(--ar-bg);
  color: var(--ar-fg);
  font-family: var(--ar-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Top bar: badge (centre) + language dropdown (right) */
.vr-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px 8px; gap: 10px; flex-shrink: 0;
}
.vr-lang-badge {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ar-fg); min-height: 18px;
}
.vr-lang-vis { max-width: 200px; }

/* Body: two columns */
.vr-body {
  display: flex; flex: 1; gap: 12px;
  padding: 0 16px; min-height: 0; overflow: hidden;
}
.vr-col-a { display: flex; flex-direction: column; flex: 1.6; min-width: 0; }
.vr-col-b { display: flex; flex-direction: column; flex: 1; min-width: 170px; gap: 10px; overflow: hidden; }

/* Live status bar — minimal; labels hidden, only interim text shows during speech */
.vr-live-bar {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 10.5px; color: var(--ar-fg-dim); padding: 4px 0 2px;
  min-height: 18px; overflow: hidden;
}
.vr-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-fg-dim); flex-shrink: 0; }
.vr-live-dot.recording { background: var(--ar-rec); animation: ar-blink 1.2s ease-in-out infinite; }
/* Hide static state labels — only show interim speech text */
.vr-st { display: none; }
.vr-sep { display: none; }
.vr-interim { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ar-fg-dim); font-style: italic; }
/* Timer shown in export row instead */
.vr-timer-badge { font-size: 11px; font-weight: 600; color: var(--ar-fg-dim); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* Transcript textarea */
.vr-text {
  flex: 1; min-height: 0; resize: none;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ar-border);
  border-radius: 12px;
  color: var(--ar-fg);
  font: 400 13.5px/1.65 var(--ar-font);
  padding: 12px 14px;
  -webkit-font-smoothing: antialiased;
}
.vr-text::placeholder { color: var(--ar-fg-faint); }
.vr-text:focus { outline: none; border-color: rgba(0,201,255,.4); background: rgba(255,255,255,.06); }

/* Export row */
.vr-xrow {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 0 5px; flex-shrink: 0;
}
.vr-xbtn {
  padding: 5px 12px; cursor: pointer;
  background: var(--ar-surface); border: 1px solid var(--ar-border);
  border-radius: var(--ar-radius-pill);
  color: var(--ar-fg-dim); font: 500 11.5px/1 var(--ar-font);
  transition: background .13s ease;
  -webkit-font-smoothing: antialiased;
}
.vr-xbtn:hover { background: rgba(255,255,255,.14); color: var(--ar-fg); }
.vr-xnote { font-size: 10.5px; color: var(--ar-fg-faint); margin-left: auto; }

/* Recording card — glass */
.vr-rec-card {
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.vr-rec-orb {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--ar-mic-bg); border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(224,31,61,.4);
  transition: transform .12s ease; flex-shrink: 0;
}
.vr-rec-orb:hover { transform: scale(1.06); }
.vr-rec-state { font-size: 8.5px; color: rgba(255,255,255,.72); text-align: center; }
.vr-rec-dur { font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.vr-wav { display: flex; align-items: center; gap: 2px; height: 20px; }
.vr-wav span { width: 3px; border-radius: 2px; background: var(--ar-accent); opacity: .45; animation: vr-w 1.2s ease-in-out infinite; }
.vr-wav span:nth-child(1){height:7px}.vr-wav span:nth-child(2){height:13px;animation-delay:.15s}.vr-wav span:nth-child(3){height:19px;animation-delay:.3s}.vr-wav span:nth-child(4){height:13px;animation-delay:.45s}.vr-wav span:nth-child(5){height:7px;animation-delay:.6s}
@keyframes vr-w{0%,100%{opacity:.25}50%{opacity:1}}
.vr-rec-meta { font-size: 10.5px; color: var(--ar-fg-dim); text-align: center; }
.vr-rec-stop { padding: 5px 12px; background: rgba(224,31,61,.2); border: 1px solid rgba(224,31,61,.3); border-radius: var(--ar-radius-pill); color: var(--ar-fg); font-size: 11px; cursor: pointer; }
.vr-dl { font-size: 11px; color: var(--ar-accent-2); text-decoration: none; }
.vr-dl.disabled { color: var(--ar-fg-faint); pointer-events: none; }

/* Voice command tiles — glass */
.vr-cmds {
  flex: 1; min-height: 0; overflow: hidden;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--ar-glass-border);
  border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.vr-cmds-hd { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.vr-cmds-title { font-size: 11.5px; font-weight: 600; color: var(--ar-fg); }
/* Toggle switch */
.vr-cmds-tog { display: flex; align-items: center; cursor: pointer; }
.vr-cmds-tog input { display: none; }
.vr-tog-track {
  width: 28px; height: 16px; border-radius: 8px;
  background: var(--ar-surface); border: 1px solid var(--ar-border);
  position: relative; transition: background .2s ease;
}
.vr-cmds-tog input:checked ~ .vr-tog-track { background: var(--ar-save-bg); border-color: var(--ar-save-bg); }
.vr-tog-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.6);
  transition: transform .2s ease;
}
.vr-cmds-tog input:checked ~ .vr-tog-track .vr-tog-thumb { transform: translateX(12px); background: #fff; }

/* Tiles grid */
.vr-cmds-grid {
  display: flex; flex-wrap: wrap; gap: 5px;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.vr-tile {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--ar-radius-pill);
  cursor: pointer; font-family: var(--ar-font);
  -webkit-font-smoothing: antialiased;
  transition: background .13s ease, border-color .13s ease;
}
.vr-tile.on { background: rgba(0,229,160,.12); border-color: rgba(0,229,160,.25); }
.vr-tile:hover { background: rgba(255,255,255,.14); }
/* No per-tile indicator dot — state shown only by tile colour + header toggle */
.vr-tile-sym { font-size: 13px; min-width: 14px; text-align: center; color: var(--ar-fg); }
.vr-tile-say { font-size: 10px; color: var(--ar-fg-dim); white-space: nowrap; }

/* Controls + language — bottom of panel */
.vr-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 16px 14px; flex-shrink: 0; }
.vr-ctrls { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* Language row sits directly below controls */
.vr-lang-row { display: flex; justify-content: center; }
.vr-lang-row .ar-sel { max-width: 260px; text-align: center; }

/* VR circle button colours */
.vr-btn-restart { background: var(--ar-danger-bg); border-color: var(--ar-danger-bg); box-shadow: 0 2px 10px rgba(192,57,43,.4); }
.vr-btn-restart svg { fill: var(--ar-danger-fg); }
.vr-btn-restart:hover { opacity: .88; }

.vr-btn-both { background: #4c2df0; border-color: #4c2df0; box-shadow: 0 2px 12px rgba(76,45,240,.5); }
.vr-btn-both svg { fill: #fff; }
.vr-btn-both:hover { opacity: .88; }

.vr-btn-text, .vr-btn-rec {
  background: var(--ar-glass); border-color: var(--ar-glass-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vr-btn-text svg, .vr-btn-rec svg { fill: var(--ar-fg); }

.vr-btn-pause { background: rgba(255,200,0,.20); border-color: rgba(255,200,0,.35); }
.vr-btn-pause svg { fill: #ffd700; }

.vr-btn-stop { background: var(--ar-save-bg); border-color: var(--ar-save-bg); box-shadow: 0 2px 10px rgba(26,170,95,.4); }
.vr-btn-stop svg { fill: var(--ar-save-fg); }
.vr-btn-stop:hover { opacity: .88; }

/* app.js show/hide class overrides for vr-panel context */
.vr-panel .live-control { display: none; }
[data-tool-mode="record-transcribe"] .vr-panel .record-control,
[data-tool-mode="record-transcribe"] .vr-panel .transcribe-control,
[data-tool-mode="record-transcribe"] .vr-panel .combo-control { display: flex; }

/* Responsive */
@media (max-width: 640px) {
  .vr-body { flex-direction: column; }
  .vr-col-b { flex: none; max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .vr-wav span, .vr-tog-thumb, .vr-tog-track { animation: none !important; transition: none !important; }
}

/* ── Recorder pages: H1 fits on one line ─────────────────────────────────── */
.workspace h1#page-title {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── VR panel wave animation override (neutralise styles.css conflicts) ───── */
.vr-panel .wave.vr-wav {
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  height: 22px !important; gap: 3px !important;
  background: none !important; border-radius: 0 !important;
}
.vr-panel .wave.vr-wav span {
  width: 3px !important; border-radius: 2px !important;
  background: var(--ar-accent) !important;
  transform: none; animation: vr-w 1.2s ease-in-out infinite !important;
}
.vr-panel .wave.vr-wav span:nth-child(1){height:7px !important;animation-delay:0s !important}
.vr-panel .wave.vr-wav span:nth-child(2){height:13px !important;animation-delay:.15s !important}
.vr-panel .wave.vr-wav span:nth-child(3){height:19px !important;animation-delay:.3s !important}
.vr-panel .wave.vr-wav span:nth-child(4){height:13px !important;animation-delay:.45s !important}
.vr-panel .wave.vr-wav span:nth-child(5){height:7px !important;animation-delay:.6s !important}

/* ── Alignment: textarea and right cards start at same top ──────────────────*/
.vr-body { align-items: flex-start; }
.vr-col-a { display: flex; flex-direction: column; }
.vr-live-bar { min-height: 18px; }

/* ── Voice commands 2-col table (replaces pill tiles) ───────────────────── */
.vr-cmds-grid {
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.vr-ct-head {
  display: flex; justify-content: space-between;
  padding: 3px 6px 5px; border-bottom: 1px solid var(--ar-border);
  margin-bottom: 2px; flex-shrink: 0;
}
.vr-ct-head span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ar-fg-dim); }
.vr-ct-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  transition: background .12s ease; color: var(--ar-fg-dim);
}
.vr-ct-row:hover { background: rgba(255,255,255,.08); color: var(--ar-fg); }
.vr-ct-row.on { color: var(--ar-fg); }
.vr-ct-row.on:hover { background: rgba(0,229,160,.08); }
.vr-ct-say { font-size: 11px; }
.vr-ct-sym { font-size: 12px; font-weight: 600; color: var(--ar-accent); min-width: 24px; text-align: right; }
.vr-ct-row:not(.on) .vr-ct-sym { color: var(--ar-fg-dim); }

/* ── VR right column: no card boxes, Siri orb, bare wave ─────────────────── */

/* Recording section — transparent, just layout */
.vr-rec-section {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 10px 0; flex-shrink: 0;
}

/* Siri-style animated orb */
.vr-orb-el {
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
    rgba(225,255,248,.97) 0%, rgba(0,235,175,.91) 18%,
    rgba(0,155,215,.78) 48%, rgba(55,55,205,.62) 76%,
    rgba(80,10,145,.44) 100%);
  box-shadow: 0 6px 24px rgba(0,180,140,.35), 0 0 50px rgba(0,100,220,.2);
  animation: vr-orb-glow 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes vr-orb-glow {
  0%,100% { box-shadow: 0 6px 24px rgba(0,180,140,.30), 0 0 45px rgba(0,100,220,.15), 0 0 80px rgba(76,45,240,.08); transform: scale(1); }
  50%     { box-shadow: 0 6px 32px rgba(0,200,155,.50), 0 0 65px rgba(0,120,240,.28), 0 0 110px rgba(90,55,240,.18); transform: scale(1.04); }
}

/* Voice commands — no card, just centred layout */
.vr-cmds {
  background: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}
.vr-cmds-hd { justify-content: center !important; gap: 10px !important; }

/* Timer pill inside VR controls */
.vr-rpill {
  background: var(--ar-glass);
  border: 1px solid var(--ar-glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--ar-radius-pill);
  padding: 8px 16px; gap: 8px;
}
.vr-rpill .ar-dot { background: var(--ar-rec); animation: ar-blink 1.2s ease-in-out infinite; }

/* Show/hide overrides for vr-panel elements */
.vr-panel .live-control { display: none; }
.vr-panel .vr-rpill { display: none; }
[data-tool-mode="record-transcribe"] .vr-panel .record-control,
[data-tool-mode="record-transcribe"] .vr-panel .transcribe-control,
[data-tool-mode="record-transcribe"] .vr-panel .combo-control { display: flex; }

/* ═══ VR panel — final authoritative layout (v0.4) ═══════════════════════ */
.vr-panel { min-height: 460px; }
.vr-body {
  display: flex; flex: 1; gap: 18px;
  padding: 14px 18px 4px; min-height: 0;
  align-items: stretch;
}
.vr-col-a { display: flex; flex-direction: column; flex: 1.7; min-width: 0; }
.vr-col-b { display: flex; flex-direction: column; flex: 1; min-width: 200px; max-width: 360px; min-height: 0; }

.vr-text { flex: 1; min-height: 120px; }

/* Right column: compact recording header */
.vr-rec-section {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 4px 0 12px; flex-shrink: 0;
}
.vr-orb-el {
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    rgba(225,255,248,.97) 0%, rgba(0,235,175,.92) 18%,
    rgba(0,155,215,.80) 48%, rgba(55,55,205,.64) 76%, rgba(80,10,145,.46) 100%);
  animation: vr-orb-glow 2.6s ease-in-out infinite; flex-shrink: 0;
}
.vr-panel.is-recording .vr-orb-el { animation-duration: 1.1s; }
@keyframes vr-orb-glow {
  0%,100% { box-shadow: 0 6px 22px rgba(0,180,140,.30), 0 0 42px rgba(0,100,220,.15); transform: scale(1); }
  50%     { box-shadow: 0 6px 30px rgba(0,200,155,.48), 0 0 64px rgba(0,120,240,.26); transform: scale(1.04); }
}
.vr-rec-section .vr-lang-vis { max-width: 200px; text-align: center; }

/* Voice commands — no box, centred header, scrollable list */
.vr-cmds {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  background: none !important; border: none !important; padding: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.vr-cmds-hd { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; }
.vr-cmds-title { font-size: 12px; font-weight: 600; color: var(--ar-fg); }
.vr-cmds-grid {
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.vr-cmds-grid::-webkit-scrollbar { width: 5px; }
.vr-cmds-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.vr-ct-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; border-radius: 7px; cursor: pointer;
  color: var(--ar-fg-dim); transition: background .12s ease, color .12s ease;
}
.vr-ct-row:hover { background: rgba(255,255,255,.07); }
.vr-ct-row.on { color: var(--ar-fg); }
.vr-ct-row.on:hover { background: rgba(0,229,160,.10); }
.vr-ct-say { font-size: 11.5px; }
.vr-ct-sym { font-size: 12.5px; font-weight: 700; color: var(--ar-accent); min-width: 26px; text-align: right; }
.vr-ct-row:not(.on) .vr-ct-sym { color: var(--ar-fg-faint); }

/* Controls bottom bar */
.vr-bottom { display: flex; justify-content: center; padding: 6px 16px 16px; flex-shrink: 0; }
.vr-ctrls { display: flex; align-items: center; gap: 11px; }

/* Live controls (timer, pause, stop) appear only while recording */
.vr-rpill, #vr-pause, #vr-stop { display: none; }
.vr-panel.is-recording .vr-rpill { display: inline-flex; }
.vr-panel.is-recording #vr-pause,
.vr-panel.is-recording #vr-stop { display: inline-flex; }
.vr-rpill {
  align-items: center; gap: 8px; padding: 8px 16px;
  background: var(--ar-glass); border: 1px solid var(--ar-glass-border);
  border-radius: var(--ar-radius-pill);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.vr-rpill .ar-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ar-rec); animation: ar-blink 1.2s ease-in-out infinite; }
.vr-rpill #timerText { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ar-fg); }

/* Proxy button colours */
.vr-btn-restart { background: var(--ar-danger-bg); border-color: var(--ar-danger-bg); }
.vr-btn-restart svg { fill: #fff; }
.vr-btn-both { background: #4c2df0; border-color: #4c2df0; box-shadow: 0 2px 12px rgba(76,45,240,.5); }
.vr-btn-both svg { fill: #fff; }
.vr-btn-pause { background: rgba(255,200,0,.85); border-color: rgba(255,200,0,.6); }
.vr-btn-pause svg { fill: #1a1a00; }
.vr-btn-stop { background: var(--ar-save-bg); border-color: var(--ar-save-bg); box-shadow: 0 2px 10px rgba(26,170,95,.4); }
.vr-btn-stop svg { fill: #fff; }
.vr-btn-restart:hover, .vr-btn-both:hover, .vr-btn-pause:hover, .vr-btn-stop:hover { opacity: .88; }

/* Disabled proxy */
.ar-ctrl.vr-off { opacity: .35; pointer-events: none; }

/* Live bar: only show interim text, hide static labels */
.vr-st { display: none; }
.vr-live-bar { min-height: 16px; padding: 2px 0 6px; }
.vr-interim { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; color: var(--ar-fg-dim); font-size: 11px; }

@media (max-width: 700px) {
  .vr-body { flex-direction: column; }
  .vr-col-b { max-width: none; }
}

/* ═══ VR hero mic (mirrors voice-recorder mic UX) — v0.5 ═════════════════ */
/* Right column halved */
.vr-col-b { max-width: 200px !important; flex: 0 0 200px !important; }

.vr-rec-section { gap: 12px; padding: 6px 0 14px; }

/* Hero button: idle = red mic (breathing), recording = orb + pause, paused = play */
.vr-hero {
  position: relative;
  width: 78px; height: 78px; border-radius: 50%;
  border: none; cursor: pointer; flex-shrink: 0;
  background: var(--ar-mic-bg);
  box-shadow: 0 6px 24px rgba(224,31,61,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .25s ease, background .25s ease;
  animation: ar-breathe 2.6s ease-in-out infinite;
}
.vr-hero:hover { transform: scale(1.06); }
.vr-hero:active { transform: scale(.95); }
.vr-hero:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 3px; }
.vr-hero-ic { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.vr-hero-ic svg { width: 30px; height: 30px; fill: #fff; }
/* Default (idle): show mic */
.vr-ic-mic { display: flex; }
/* Recording: orb gradient + pause icon, faster glow */
.vr-panel.is-recording .vr-hero {
  background: radial-gradient(circle at 32% 30%,
    rgba(225,255,248,.97) 0%, rgba(0,235,175,.92) 18%,
    rgba(0,155,215,.80) 48%, rgba(55,55,205,.64) 76%, rgba(80,10,145,.46) 100%);
  box-shadow: 0 6px 30px rgba(0,200,155,.5), 0 0 60px rgba(0,120,240,.28);
  animation: vr-orb-glow 1.2s ease-in-out infinite;
}
.vr-panel.is-recording .vr-ic-mic { display: none; }
.vr-panel.is-recording .vr-ic-pause { display: flex; }
/* Paused: show mic (resume capture, matches the standalone recorder), dim glow.
   A play ▶ here reads as audio playback, which this control never does. */
.vr-panel.is-recording.is-paused .vr-hero { animation-duration: 2.6s; opacity: .9; }
.vr-panel.is-recording.is-paused .vr-ic-pause { display: none; }
.vr-panel.is-recording.is-paused .vr-ic-mic { display: flex; }

/* Language selector — yellow text for high visibility, same ghost-pill design */
.vr-lang-vis {
  max-width: 184px !important; text-align: center;
  color: #ffd700 !important; font-weight: 600 !important;
  border-color: rgba(255,215,0,.35) !important;
  /* Moderate rounded-rect, not an extreme pill: the OS-rendered option popup is
     always rectangular and unstylable, so a 12px control reads as one coherent
     dropdown with it instead of a pill clashing against a hard rectangle. */
  border-radius: 12px !important;
}
.vr-lang-vis:focus { border-color: rgba(255,215,0,.6) !important; }
.vr-lang-vis option { color: #ffd700; background: #0e1d44; }

/* Voice command symbol stays accent green; text dimmed off */
.vr-cmds-title { font-size: 11.5px; }

/* Stop button only visible while recording */
#vr-stop, .vr-rpill { display: none; }
.vr-panel.is-recording #vr-stop { display: inline-flex; }
.vr-panel.is-recording .vr-rpill { display: inline-flex; }

/* ═══ VR+T v0.8 — top-anchored controls (above the fold), language top-left ═══
   The action zone snaps to the TOP so first-time visitors see the mic + language
   immediately — no scroll, no "empty box, now what?" bounce. Language sits in the
   top-left corner level with the centred mic; the live interim caption appears
   directly below it. Below: transcript document (left) + commands card (right). */

/* Top control zone — column: [mic row] then the live caption below it.
   The language corner is absolutely pinned so the mic stays dead-centre. */
.vr-panel .vr-top {
  position: relative; flex-shrink: 0;
  padding: 16px 18px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

/* Language pinned top-left, vertically level with the mic row */
.vr-top-corner {
  position: absolute; left: 18px; top: 16px; z-index: 2;
  display: flex; align-items: center; height: 64px;   /* = mic height → level */
}
.vr-top-corner .vr-lang-vis { max-width: 190px !important; }

/* Live / temp caption — centred directly below the mic orb, themed colour,
   padded so it breathes between the orb and the transcript box */
.vr-panel .vr-live-bar {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 2px 18px 0; min-height: 22px; margin: 0; border: none;
}
.vr-panel .vr-live-dot { display: none; }   /* the recording dot lives in the timer pill */
.vr-panel .vr-interim {
  max-width: 90%; text-align: center;
  font-size: 13px; font-style: italic; font-weight: 500;
  color: var(--ar-interim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Control cluster: 3 equal zones → mic dead-centre in ALL states (idle red &
   recording blue share identical coordinates). Corner is out of flow, so the
   mic centres across the full panel width regardless of the language block. */
.vr-panel .vr-ctrls { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 520px; }
.vr-panel .vr-side { flex: 1 1 0; display: flex; align-items: center; gap: 12px; min-width: 0; }
.vr-panel .vr-side-l { justify-content: flex-end; padding-right: 14px; }
.vr-panel .vr-side-r { justify-content: flex-start; padding-left: 14px; }
.vr-panel .vr-hero { flex: 0 0 auto; display: block; width: 64px; height: 64px; margin: 0; }
.vr-panel .vr-hero-ic svg { width: 25px; height: 25px; }
.vr-panel .vr-btn-restart, .vr-panel #vr-stop, .vr-panel .vr-rpill { display: none; }
.vr-panel.is-recording .vr-btn-restart,
.vr-panel.is-recording #vr-stop,
.vr-panel.is-recording .vr-rpill { display: inline-flex; }

/* Paused → the mic turns RED again (like idle) and breathes, signalling
   "tap to resume". Overrides the blue recording gradient while paused. */
.vr-panel.is-recording.is-paused .vr-hero {
  background: var(--ar-mic-bg);
  box-shadow: 0 6px 24px rgba(224,31,61,.5), inset 0 1px 0 rgba(255,255,255,.25);
  animation: ar-breathe 2.6s ease-in-out infinite;
  opacity: 1;
}

/* Body: transcript card (left) + commands card (right), fills remaining height */
.vr-panel .vr-body { display: flex; align-items: stretch; gap: 18px; padding: 4px 18px 16px; min-height: 0; flex: 1; }
.vr-panel .vr-col-a {
  flex: 1.7; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ar-border); border-radius: 14px;
}
.vr-panel .vr-col-b { flex: 0 0 250px; max-width: 250px; display: flex; flex-direction: column; min-height: 0; }

/* Document header: centred editable title, underline beneath (no language here) */
.vr-doc-head {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-bottom: 1px solid var(--ar-border); flex-shrink: 0;
}
.vr-note-name {
  flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: center;
  background: transparent; border: none; outline: none;
  color: var(--ar-note-fg); font: 700 15px/1.2 var(--ar-font);
  letter-spacing: .01em; -webkit-font-smoothing: antialiased;
}
.vr-note-name::placeholder { color: var(--ar-fg-faint); }

/* Transcript textarea — borderless, fills the document card */
.vr-panel .vr-text {
  flex: 1; min-height: 0;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 12px 14px !important;
}

/* Voice commands — translucent framed card, larger text (+~15%) */
.vr-panel .vr-cmds {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  background: var(--ar-surface) !important;
  border: 1px solid var(--ar-border) !important;
  border-radius: 14px !important;
  padding: 12px 12px 6px !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
}
.vr-panel .vr-cmds-hd { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; }
.vr-panel .vr-cmds-title { font-size: 13px; }
.vr-panel .vr-ct-row { padding: 5px 9px; }
.vr-panel .vr-ct-say { font-size: 13.5px; }
.vr-panel .vr-ct-sym { font-size: 14.5px; }

@media (max-width: 700px) {
  .vr-panel .vr-top { flex-direction: column; gap: 8px; }
  .vr-top-corner { position: static; max-width: none; align-items: center; }
  .vr-panel .vr-interim { text-align: center; }
  .vr-panel .vr-body { flex-direction: column; }
  .vr-panel .vr-col-b { flex: none; max-width: none; min-height: 200px; }
}

/* ═══ VR+T v0.9 — matching language/timer boxes, restart in corner, no save
   circle, darker commands card, heading download + share actions ═══════════ */

/* Restart: small, pinned to the top-right corner of the control zone */
.vr-panel .vr-restart-corner {
  position: absolute; top: 12px; right: 14px; z-index: 3;
  width: 34px; height: 34px; display: inline-flex !important;
}
.vr-panel .vr-restart-corner svg { width: 15px; height: 15px; }

/* Language box (left) and timer box share ONE pill style (dark glass) */
.vr-top-corner .vr-lang-vis,
.vr-panel .vr-rpill {
  height: 40px; padding: 0 16px !important;
  display: inline-flex !important; align-items: center;
  background: var(--ar-glass) !important;
  border: 1px solid var(--ar-glass-border) !important;
  border-radius: var(--ar-radius-pill) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.vr-top-corner .vr-lang-vis { max-width: 190px !important; color: #ffd700 !important; font-weight: 600 !important; }
.vr-panel .vr-rpill { gap: 8px; }   /* timer box visible in every state */
.vr-panel .vr-rpill #timerText { color: var(--ar-fg); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.vr-panel .vr-rpill .ar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ar-rec); }

/* Voice commands card — darker than the transcript so it stops competing for the eye */
.vr-panel .vr-cmds {
  background: var(--ar-glass) !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* Heading actions: download menu + share icons, pinned to the right end */
.vr-doc-head { position: relative; }
.vr-doc-actions {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 2;
}
.vr-act {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--ar-surface); text-decoration: none;
  transition: background .14s ease, transform .12s ease;
}
.vr-act:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.vr-act svg { width: 16px; height: 16px; }
.vr-dl-btn { background: var(--ar-save-bg); }
.vr-dl-btn svg { fill: #fff; }
.vr-dl-btn:hover { background: var(--ar-save-bg); opacity: .9; }
.vr-sh-wa svg { fill: #25d366; }
.vr-sh-tg svg { fill: #29a9eb; }
.vr-sh-em svg { fill: #29a9eb; }   /* blue, matching the Telegram icon */

.vr-dl-wrap { position: relative; }
.vr-dl-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: flex; flex-direction: column; min-width: 152px;
  background: #11203f; border: 1px solid var(--ar-glass-border);
  border-radius: 10px; padding: 5px; box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.vr-dl-menu[hidden] { display: none; }
.vr-dl-menu button {
  text-align: left; padding: 8px 12px; border: none; background: none;
  color: var(--ar-fg); font: 500 12.5px var(--ar-font); border-radius: 7px; cursor: pointer;
}
.vr-dl-menu button:hover { background: rgba(255,255,255,.10); }

/* Keep the centred title clear of the actions on the right */
.vr-panel .vr-note-name { max-width: calc(100% - 320px); }

/* ═══ VR+T v1.0 — custom CURVED language dropdown beside the mic, equal to the
   timer box, white text. (Native <select> popups can't be rounded; this can.) ═ */
.vr-panel .vr-side-l { justify-content: flex-end; padding-right: 12px; }
.vr-panel .vr-side-r { justify-content: flex-start; padding-left: 12px; }
.vr-lang { position: relative; }

/* language button + timer = two equal 142×44 glass pills flanking the mic */
.vr-panel .vr-lang-btn,
.vr-panel .vr-rpill {
  box-sizing: border-box;
  width: 142px !important; min-width: 142px !important; max-width: 142px !important;
  height: 44px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--ar-glass) !important;
  border: 1px solid var(--ar-glass-border) !important;
  border-radius: var(--ar-radius-pill) !important;
  color: var(--ar-fg) !important; font-weight: 600 !important; font-size: 13px !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.vr-panel .vr-lang-btn { gap: 6px; cursor: pointer; padding: 0 12px !important; }
.vr-panel .vr-lang-btn:hover { background: rgba(255,255,255,.12) !important; }
.vr-panel .vr-lang-btn:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 2px; }
.vr-lang-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-lang-caret { width: 13px; height: 13px; fill: var(--ar-fg-dim); flex-shrink: 0; transition: transform .15s ease; }
.vr-lang-btn[aria-expanded="true"] .vr-lang-caret { transform: rotate(180deg); }

/* Curved dropdown menu */
.vr-lang-menu {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + 8px); z-index: 30;
  min-width: 190px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #11203f; border: 1px solid var(--ar-glass-border);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.vr-lang-menu[hidden] { display: none; }
.vr-lang-menu::-webkit-scrollbar { width: 6px; }
.vr-lang-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.vr-lang-opt {
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  color: var(--ar-fg); font-size: 13px; white-space: nowrap; transition: background .12s ease;
}
.vr-lang-opt:hover { background: rgba(255,255,255,.10); }
.vr-lang-opt.sel { background: rgba(0,201,255,.18); color: #fff; font-weight: 600; }

.vr-panel .vr-rpill { gap: 8px; padding: 0 14px !important; }
.vr-panel .vr-rpill #timerText { color: var(--ar-fg) !important; font-weight: 600; font-size: 14px; }

/* ═══ VR+T v1.1 — mic with equal padding, single full-width transcript, voice
   commands collapsed into a heading dropdown, floating bottom-centre actions ══ */

/* Top: just the control row; mic gets equal padding above & below */
.vr-panel .vr-top {
  display: flex; align-items: center; justify-content: center;
  padding: 18px; gap: 0; position: relative; flex-shrink: 0;
}

/* Body: ONE full-width transcript card that FILLS the panel height.
   vr-body must be a flex column so col-a can flex-grow (percentage heights don't
   resolve against a flex-derived 'auto' height — that left the box at 147px). */
.vr-panel .vr-body { display: flex; flex-direction: column; padding: 0 18px 18px; flex: 1; min-height: 0; }
.vr-panel .vr-col-a {
  flex: 1 1 auto !important; width: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: visible;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ar-border); border-radius: 14px;
}

/* Heading row: interim caption CENTRED; voice-commands button floated right */
.vr-panel .vr-doc-head {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--ar-border); flex-shrink: 0;
}
.vr-panel .vr-doc-head .vr-live-bar {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  gap: 6px; margin: 0; padding: 0 150px; border: none; min-height: 24px;
}
.vr-panel .vr-doc-head .vr-interim {
  flex: 0 1 auto; text-align: center; max-width: 100%;
  font-size: 13px; font-style: italic; font-weight: 500; color: var(--ar-interim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Voice-commands: top-level on/off switch + button (right) + dropdown panel */
.vr-cmds-toggle-wrap {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
/* the on/off switch is always visible in the heading (not buried in the dropdown) */
.vr-cmds-toggle-wrap .vr-cmds-tog { display: inline-flex; align-items: center; cursor: pointer; }
.vr-panel .vr-cmds-panel .vr-cmds-hd { justify-content: center; }
/* The pill IS the on/off toggle: click toggles, hover reveals the list.
   State shown by tint + a status dot (green glow = ON, grey = OFF). */
.vr-cmds-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  height: 32px; padding: 0 14px; border-radius: var(--ar-radius-pill);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  color: var(--ar-fg-dim); font: 600 12.5px var(--ar-font);
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.vr-cmds-btn:hover { background: rgba(255,255,255,.10); }
.vr-cmds-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--ar-fg-faint); transition: background .15s ease, box-shadow .15s ease;
}
/* ON */
.vr-cmds-btn[aria-pressed="true"] { background: rgba(0,229,160,.13); border-color: rgba(0,229,160,.32); color: var(--ar-fg); }
.vr-cmds-btn[aria-pressed="true"] .vr-cmds-dot { background: var(--ar-accent); box-shadow: 0 0 7px rgba(0,229,160,.6); }
/* OFF */
.vr-cmds-btn[aria-pressed="false"] { opacity: .9; }
.vr-cmds-btn[aria-pressed="false"] .vr-cmds-dot { background: var(--ar-fg-faint); box-shadow: none; }

.vr-panel .vr-cmds-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 25;
  width: 286px !important; max-height: none; overflow: visible; flex: none !important;
  /* lighter & translucent — blends into the panel instead of a hard solid box */
  background: rgba(16,30,62,.85) !important; border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important; padding: 7px 8px !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.42);
  backdrop-filter: blur(14px) saturate(1.2) !important; -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}
.vr-panel .vr-cmds-panel[hidden] { display: none; }
.vr-panel .vr-cmds-panel .vr-cmds-hd { justify-content: space-between; margin-bottom: 3px; padding: 0 4px; }
/* tight two-column grid so the whole list fits without scrolling */
.vr-panel .vr-cmds-panel .vr-cmds-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 6px; overflow: visible; }
.vr-panel .vr-cmds-panel .vr-ct-row { width: auto; box-sizing: border-box; padding: 3px 8px; border-radius: 6px; }
.vr-panel .vr-cmds-panel .vr-ct-say { font-size: 12px; }
.vr-panel .vr-cmds-panel .vr-ct-sym { font-size: 12.5px; min-width: 18px; }

/* Title moved into the text area — CENTRED heading line above the transcript */
.vr-title-row { padding: 10px 16px 0; flex-shrink: 0; }
.vr-panel .vr-note-name {
  width: 100%; max-width: 100%; text-align: center;
  background: transparent; border: none; outline: none;
  color: var(--ar-note-fg); font: 700 16px/1.2 var(--ar-font); -webkit-font-smoothing: antialiased;
}
.vr-panel .vr-note-name::placeholder { color: var(--ar-fg-faint); }
.vr-panel .vr-text { flex: 1; min-height: 0; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 6px 16px 14px !important; }

/* Floating translucent download/share pill — bottom-centre, hovers over the text.
   2x padding for a comfortable tap target + a defined, grounded border. */
.vr-float-actions {
  /* Compact + more transparent; 'bottom' is the real gap the user wanted —
     distance from the tray's bottom edge to the transcript card's bottom border. */
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: var(--ar-radius-pill);
  background: rgba(10,18,42,.38);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.vr-float-actions .vr-dl-menu { top: auto; bottom: calc(100% + 8px); right: 0; }

@media (max-width: 700px) {
  .vr-panel .vr-cmds-panel { width: 230px !important; }
  .vr-float-actions { bottom: 14px; }
}

/* ═══ VR+T — start-over confirmation modal (explicit, like the recorder page) ══ */
.vr-confirm {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,30,.66);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vr-confirm[hidden] { display: none; }
.vr-confirm-box {
  width: min(360px, 82%); padding: 22px 22px 18px; text-align: center;
  background: linear-gradient(160deg, #16254e 0%, #0f1b3d 100%);
  border: 1px solid var(--ar-glass-border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.vr-confirm-msg { color: var(--ar-fg); font-size: 14.5px; line-height: 1.5; margin-bottom: 18px; }
.vr-confirm-btns { display: flex; gap: 10px; justify-content: center; }
.vr-confirm-ok, .vr-confirm-cancel {
  flex: 1; padding: 10px 0; border: none; border-radius: var(--ar-radius-pill);
  font: 600 13.5px var(--ar-font); cursor: pointer;
}
.vr-confirm-ok { background: var(--ar-danger-bg); color: #fff; }
.vr-confirm-ok:hover { opacity: .9; }
.vr-confirm-cancel { background: var(--ar-surface); color: var(--ar-fg-dim); border: 1px solid var(--ar-border); }
.vr-confirm-cancel:hover { background: rgba(255,255,255,.14); color: var(--ar-fg); }

/* Command toggle disabled for languages without a command map */
.vr-cmds-off { opacity: .4; pointer-events: none; }

/* ═══ Text-to-speech panel — reuses the dark recorder design ════════════════ */
.vr-tts .vr-speak {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  border: none; cursor: pointer; flex: 0 0 auto; margin: 0; display: block;
  background: linear-gradient(180deg, #19c8ff 0%, #0a84d6 100%);
  box-shadow: 0 6px 22px rgba(25,160,255,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .25s ease;
  animation: ar-breathe-blue 2.6s ease-in-out infinite;
}
@keyframes ar-breathe-blue {
  0%,100% { box-shadow: 0 6px 22px rgba(25,160,255,.45), inset 0 1px 0 rgba(255,255,255,.25); }
  50%     { box-shadow: 0 6px 32px rgba(25,180,255,.70), inset 0 1px 0 rgba(255,255,255,.25); }
}
.vr-tts .vr-speak:hover { transform: scale(1.06); }
.vr-tts .vr-speak:active { transform: scale(.95); }
.vr-tts .vr-speak:focus-visible { outline: 3px solid var(--ar-focus); outline-offset: 3px; }
.vr-tts .vr-speak .vr-hero-ic { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.vr-tts .vr-speak .vr-hero-ic svg { width: 26px; height: 26px; fill: #fff; }
.vr-tts .vr-ic-play { display: flex !important; }
.vr-tts.is-speaking .vr-speak { animation: none; }
.vr-tts.is-speaking .vr-ic-play { display: none !important; }
.vr-tts.is-speaking .vr-ic-stopsq { display: flex !important; }

/* Import button (corner) — neutral glass, not the danger red */
.vr-tts .vr-import-btn { background: var(--ar-glass) !important; border-color: var(--ar-glass-border) !important; box-shadow: none !important; }
.vr-tts .vr-import-btn svg { fill: var(--ar-fg) !important; }

/* Status line in the top zone — subtle (not the yellow interim) */
.vr-tts .vr-live-bar { display: flex; justify-content: center; align-items: center; min-height: 18px; padding: 2px 16px 0; }
.vr-tts .vr-interim { color: var(--ar-fg-dim); font-style: normal; text-align: center; }

/* Heading: voice + rate controls (left-aligned) */
.vr-tts .vr-tts-head { justify-content: flex-start !important; gap: 22px; flex-wrap: wrap; padding: 10px 16px; }
.vr-tts .vr-ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vr-tts .vr-ctl-label { font-size: 11px; font-weight: 600; color: var(--ar-fg-dim); }
.vr-tts .vr-voice-sel {
  max-width: 260px; height: 34px; padding: 0 12px; cursor: pointer;
  background: var(--ar-glass); color: var(--ar-fg); font: 500 12.5px var(--ar-font);
  border: 1px solid var(--ar-glass-border); border-radius: 10px;
}
.vr-tts .vr-voice-sel option { background: #0e1d44; color: #fff; }
.vr-tts .vr-rate-ctl input[type=range] { width: 180px; accent-color: var(--ar-accent-2); }
.vr-tts .vr-rate-ctl output { color: var(--ar-accent-2); font-weight: 700; }