.ptva {
  --ptva-ink: var(--rs-ink, #2d2725);
  --ptva-muted: var(--rs-muted, #665f5b);
  --ptva-page: var(--rs-bg, #ffffff);
  --ptva-soft: var(--rs-soft, #f6f6f3);
  --ptva-warm: var(--rs-warm, #f1f0ec);
  --ptva-line: var(--rs-line, #e8e6e2);
  --ptva-action: #1f5fbf;
  --ptva-action-strong: #164a97;
  --ptva-glow: #22d3ee;
  --ptva-on-action: #ffffff;
  --ptva-font: var(--rs-body, "Hanken Grotesk", Arial, sans-serif);
  /* CONTRACT: the launcher is pinned to the right edge of the SITE CONTAINER,
     not the browser viewport. On wide monitors right:0 parked it out in the
     empty margin, visually detached from the page. --ptva-container is the
     content width to hug: 1180px on the designer export pages, 1240px on the
     older peo.css pages. The max() floor keeps the old flush behavior once the
     viewport is narrower than the container.
     transform is safe here: .ptva-panel is opened with showModal(), so it is
     promoted to the top layer and escapes this transformed ancestor. Do not
     switch it to show(), or the panel will center against this element. */
  --ptva-container: 1180px;
  position: fixed;
  top: 50%;
  right: max(0.75rem, calc((100vw - var(--ptva-container)) / 2 + 0.75rem));
  bottom: auto;
  transform: translateY(-50%);
  z-index: 1000;
  display: grid;
  width: auto;
  max-width: calc(100vw - 0.75rem);
  justify-items: end;
  margin: 0;
  color: var(--ptva-ink);
  font-family: var(--ptva-font);
}

.ptva *,
.ptva *::before,
.ptva *::after { box-sizing: border-box; }

.ptva-launcher {
  --ptva-state-glow: var(--ptva-glow);
  position: relative;
  isolation: isolate;
  display: block;
  width: 4rem;
  height: 11rem;
  padding: 0;
  border: 0;
  border-radius: 1.25rem 0 0 1.25rem;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  transition: filter 150ms ease, transform 150ms ease;
}

.ptva[data-voice-state="live"] .ptva-launcher { --ptva-state-glow: #35ff8d; }
.ptva-launcher:hover { filter: brightness(1.08); transform: scale(1.025); }

.ptva-launcher:focus-visible,
.ptva-action:focus-visible,
.ptva-x:focus-visible,
.ptva-nudge-close:focus-visible {
  outline: 0.1875rem solid color-mix(in srgb, var(--ptva-state-glow, var(--ptva-action)) 45%, transparent);
  outline-offset: 0.25rem;
}

.ptva-visual {
  display: grid;
  width: 100%;
  height: 100%;
  align-content: center;
  justify-items: center;
  gap: 0.375rem;
  overflow: hidden;
  padding: 0.625rem 0.375rem;
  border: 1px solid color-mix(in srgb, var(--ptva-state-glow) 82%, #ffffff);
  border-radius: inherit;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--ptva-state-glow) 22%, transparent), transparent 38%), linear-gradient(180deg, #073966, #031d43 72%);
  box-shadow: inset 0 0 1rem color-mix(in srgb, var(--ptva-state-glow) 20%, transparent), 0 0 0.375rem color-mix(in srgb, var(--ptva-state-glow) 34%, transparent), 0 10px 24px rgba(3, 29, 67, 0.24);
  transform-origin: center;
  animation: ptva-launcher-breathe 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ptva[data-voice-state="live"] .ptva-visual {
  background: radial-gradient(circle at 50% 42%, rgba(53, 255, 141, 0.28), transparent 42%), linear-gradient(180deg, #06483e, #022d32 72%);
}

.ptva-waveform {
  width: 2.75rem;
  overflow: visible;
  color: var(--ptva-state-glow);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 3;
}

.ptva-waveform line { transform-box: fill-box; transform-origin: center; animation: ptva-equalizer 900ms ease-in-out infinite alternate; }
.ptva-waveform line:nth-child(2n) { animation-delay: -180ms; }
.ptva-waveform line:nth-child(3n) { animation-delay: -360ms; }
.ptva-waveform line:nth-child(4n) { animation-delay: -540ms; }

.ptva-launcher-copy {
  display: grid;
  justify-items: center;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 0.9;
}

.ptva-launcher-copy strong { color: var(--ptva-state-glow); font-size: 1.625rem; line-height: 1; }

.ptva-launcher-mic {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--ptva-state-glow);
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--ptva-state-glow) 64%, transparent);
}

.ptva-launcher-mic .ptva-speaker { width: 1.375rem; height: 1.375rem; }

.ptva-launcher-state {
  color: var(--ptva-state-glow);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ptva-live-label { display: none; }
.ptva[data-voice-state="live"] .ptva-idle-label { display: none; }
.ptva[data-voice-state="live"] .ptva-live-label { display: inline; }

.ptva-nudge {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.625rem);
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  transform: translate(0.5rem, -50%);
  border: 1px solid color-mix(in srgb, var(--ptva-glow) 40%, transparent);
  border-radius: 0.75rem;
  background: #ffffff;
  color: #153a5b;
  box-shadow: 0 8px 20px rgba(3, 29, 67, 0.16);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.ptva-launcher:is(:hover, :focus-visible) + .ptva-nudge { transform: translate(0, -50%); opacity: 1; visibility: visible; }
.ptva-nudge-close { display: none; }
.ptva[data-nudge-dismissed="true"] .ptva-nudge { display: none; }

.ptva-speaker { width: 1.5em; height: 1.5em; }

.ptva-panel {
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(calc(100vw - 2rem), 22rem);
  max-height: min(32rem, calc(100dvh - 2rem));
  margin: 0;
  padding: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ptva-line);
  border-radius: 1.5rem;
  background: var(--ptva-page);
  color: var(--ptva-ink);
  box-shadow: 0 20px 48px rgba(45, 39, 37, 0.24);
}

.ptva-panel::backdrop { background: rgba(3, 29, 67, 0.42); backdrop-filter: blur(2px); }

.ptva-head {
  position: relative;
  padding: 0.875rem 3rem 0.875rem 1rem;
  border-bottom: 1px solid var(--ptva-line);
  background: var(--ptva-soft);
}

.ptva-head-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  color: var(--ptva-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.ptva-head-sub { margin: 0.5rem 0 0; color: var(--ptva-muted); font-size: 1rem; line-height: 1.5; }

.ptva-x {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ptva-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
}

.ptva-x:hover { background: var(--ptva-warm); color: var(--ptva-ink); }
.ptva-body { display: grid; gap: 0.75rem; padding: 1.125rem; text-align: center; }

.ptva-orb {
  position: relative;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--ptva-action) 42%, var(--ptva-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--ptva-action) 8%, var(--ptva-soft));
  color: var(--ptva-action);
}

.ptva-orb .ptva-speaker { width: 1.5rem; height: 1.5rem; }
.ptva-orb-dots,
.ptva-orb-error { display: none; }
.ptva-orb-dots { align-items: center; gap: 0.25rem; }
.ptva-orb-dots i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; animation: ptva-connecting-dot 900ms ease-in-out infinite alternate; }
.ptva-orb-dots i:nth-child(2) { animation-delay: -300ms; }
.ptva-orb-dots i:nth-child(3) { animation-delay: -600ms; }
.ptva[data-voice-state="connecting"] .ptva-orb .ptva-speaker,
.ptva[data-voice-state="error"] .ptva-orb .ptva-speaker { display: none; }
.ptva[data-voice-state="connecting"] .ptva-orb-dots { display: flex; }
.ptva[data-voice-state="live"] .ptva-orb { border-color: #1d9d61; background: #087549; color: #ffffff; box-shadow: 0 0 0 0.25rem rgba(53, 255, 141, 0.12); }
.ptva[data-voice-state="error"] .ptva-orb { border-color: #a8682a; background: #fff8ed; color: #8a4b16; }
.ptva[data-voice-state="error"] .ptva-orb-error { display: block; font-size: 1.5rem; font-weight: 700; }

.ptva-status { margin: 0; color: var(--ptva-ink); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.ptva-status:empty,
.ptva-hint:empty { display: none; }
.ptva-hint { margin: 0; color: var(--ptva-muted); font-size: 0.8125rem; line-height: 1.4; }
.ptva-disclaimer { margin: 0; color: var(--ptva-muted); font-size: clamp(0.625rem, 1vw, 0.6875rem); line-height: 1.25; white-space: nowrap; }
.ptva[data-voice-state="live"] .ptva-disclaimer { display: none; }

.ptva-action {
  display: inline-flex;
  width: 100%;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.25em;
  border: 1px solid var(--ptva-action);
  border-radius: 0.75rem;
  background: var(--ptva-action);
  color: var(--ptva-on-action);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.ptva-action:hover { border-color: var(--ptva-action-strong); background: var(--ptva-action-strong); transform: translateY(-0.0625rem); }
.ptva-action.is-stop { border: 2px solid var(--ptva-action); background: var(--ptva-page); color: var(--ptva-action-strong); }
.ptva-action:disabled { opacity: 0.72; cursor: wait; }

@keyframes ptva-connecting-dot {
  from { opacity: 0.35; transform: translateY(0.125rem); }
  to { opacity: 1; transform: translateY(-0.125rem); }
}

@keyframes ptva-launcher-breathe {
  0%, 14%, 100% { transform: scale(1); filter: brightness(1); }
  4% { transform: scale(1.035); filter: brightness(1.08); }
  8% { transform: scale(0.992); filter: brightness(1.02); }
  11% { transform: scale(1.018); filter: brightness(1.05); }
}

@keyframes ptva-equalizer {
  0% { transform: scaleY(0.45); opacity: 0.72; }
  100% { transform: scaleY(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ptva-launcher,
  .ptva-action { transition: none; }
  .ptva-visual,
  .ptva-waveform line,
  .ptva-orb-dots i { animation: none; filter: none; transform: none; }
  .ptva-launcher:hover,
  .ptva-action:hover { transform: none; }
}

@media (max-width: 40rem) {
  .ptva {
    top: auto;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 0.75rem);
    justify-items: end;
    margin: 0;
  }
  .ptva-launcher { width: 3.25rem; height: 3.25rem; border-radius: 50%; }
  .ptva-visual { gap: 0; padding: 0.5rem; }
  .ptva-waveform,
  .ptva-launcher-copy,
  .ptva-launcher-state { display: none; }
  .ptva-launcher-mic { width: 2rem; height: 2rem; }
  .ptva-launcher-mic .ptva-speaker { width: 1rem; height: 1rem; }
  .ptva-nudge { display: none; }
  .ptva-panel {
    inset: 50% 0.75rem auto 0.75rem;
    width: auto;
    max-height: min(28rem, calc(100dvh - 1.5rem));
    transform: translateY(-50%);
    border-radius: 1rem;
  }
  .ptva-head,
  .ptva-body { padding: 1rem; }
  .ptva-head { padding-right: 3rem; }
}