@oshara/voice-sdk 0.1.0

package/dist/styles.css

@@ -0,0 +1,1838 @@
+:host {
+  all: initial;
+
+  /* Defaults are overwritten at runtime by applyAppearance(). */
+  --va-primary: #6366f1;
+  --va-primary-text: #ffffff;
+  --va-accent: #22d3ee;
+  --va-accent-text: #0b1020;
+  --va-background: #ffffff;
+  --va-surface: #f6f7fb;
+  --va-text: #0f172a;
+  --va-text-muted: #64748b;
+  --va-user-bubble: #6366f1;
+  --va-user-bubble-text: #ffffff;
+  --va-agent-bubble: #f1f5f9;
+  --va-agent-bubble-text: #0f172a;
+
+  --va-fab-size: 64px;
+  --va-panel-width: 380px;
+  --va-panel-height: 620px;
+  --va-border-radius: 24px;
+
+  --va-edge-offset: 24px;
+  --va-panel-offset: calc(var(--va-fab-size) + 20px);
+  --va-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
+
+  font-family: var(--va-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+/* ───────── Floating action button ───────── */
+
+.fab {
+  position: fixed;
+  width: var(--va-fab-size);
+  height: var(--va-fab-size);
+  border-radius: 999px;
+  background: var(--va-primary);
+  background-image: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  color: var(--va-primary-text);
+  border: none;
+  cursor: pointer;
+  box-shadow:
+    0 12px 30px -8px color-mix(in srgb, var(--va-primary) 55%, transparent),
+    0 4px 12px rgba(0, 0, 0, 0.16);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2147483646;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, padding 0.2s ease;
+  overflow: hidden;
+  padding: 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  line-height: 1;
+  white-space: nowrap;
+}
+.fab::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.32), transparent 55%);
+  pointer-events: none;
+}
+.fab:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 18px 40px -10px color-mix(in srgb, var(--va-primary) 70%, transparent),
+    0 6px 16px rgba(0, 0, 0, 0.2);
+}
+.fab:active { transform: translateY(0); }
+.fab .fab-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--va-fab-size) * 0.42);
+  height: calc(var(--va-fab-size) * 0.42);
+  flex-shrink: 0;
+}
+.fab .fab-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.fab .fab-text {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  line-height: 1;
+  text-align: left;
+}
+.fab .fab-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  line-height: 1.1;
+}
+.fab .fab-sublabel {
+  display: none;
+  margin-top: 3px;
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  line-height: 1.1;
+  opacity: 0.82;
+}
+.fab.has-sublabel .fab-sublabel {
+  display: block;
+}
+.fab.has-label {
+  width: auto;
+  height: auto;
+  min-height: calc(var(--va-fab-size) * 0.82);
+  padding: 8px 22px 8px 16px;
+  gap: 12px;
+}
+.fab.has-sublabel {
+  min-height: calc(var(--va-fab-size) * 0.95);
+  padding: 10px 22px 10px 16px;
+}
+.fab.has-label .fab-icon {
+  width: calc(var(--va-fab-size) * 0.58);
+  height: calc(var(--va-fab-size) * 0.58);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.28),
+    0 4px 10px -4px rgba(0, 0, 0, 0.25);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  overflow: hidden;
+}
+.fab.has-label .fab-icon svg {
+  width: 56%;
+  height: 56%;
+}
+.fab.has-label .fab-logo {
+  border-radius: 50%;
+}
+.fab .fab-logo,
+.fab img.fab-logo {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+/* ───────── Panel container ───────── */
+
+.panel {
+  position: fixed;
+  /* Never wider than the viewport (minus the edge gaps on both sides), so the
+     panel stays fully on-screen on narrow phones instead of clipping right. */
+  width: min(var(--va-panel-width), calc(100vw - 2 * var(--va-edge-offset)));
+  height: var(--va-panel-height);
+  /* The panel is anchored `bottom`/`top: var(--va-panel-offset)` next to the
+     FAB, so the room it has to grow into is the viewport minus that offset and
+     a matching gap at the far edge — otherwise a tall panel runs off the top.
+     dvh tracks the visible area when mobile browser chrome shows/hides. */
+  max-height: calc(100vh - var(--va-panel-offset) - var(--va-edge-offset));
+  max-height: calc(100dvh - var(--va-panel-offset) - var(--va-edge-offset));
+  background: var(--va-background);
+  color: var(--va-text);
+  border-radius: var(--va-border-radius);
+  box-shadow:
+    0 30px 70px -16px rgba(15, 23, 42, 0.32),
+    0 10px 24px -10px rgba(15, 23, 42, 0.18);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 2147483647;
+  border: 1px solid color-mix(in srgb, var(--va-text) 7%, transparent);
+  animation: va-panel-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform 0.24s ease, opacity 0.24s ease, height 0.3s ease;
+}
+
+.panel[data-screen="call"]:not(.with-transcript) {
+  height: auto;
+}
+
+@keyframes va-panel-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Position anchors */
+:host([data-position="bottom-right"]) .fab,
+:host(:not([data-position])) .fab {
+  right: var(--va-edge-offset);
+  bottom: var(--va-edge-offset);
+}
+:host([data-position="bottom-right"]) .panel,
+:host(:not([data-position])) .panel {
+  right: var(--va-edge-offset);
+  bottom: var(--va-panel-offset);
+}
+:host([data-position="bottom-left"]) .fab {
+  left: var(--va-edge-offset);
+  bottom: var(--va-edge-offset);
+}
+:host([data-position="bottom-left"]) .panel {
+  left: var(--va-edge-offset);
+  bottom: var(--va-panel-offset);
+}
+:host([data-position="top-right"]) .fab {
+  right: var(--va-edge-offset);
+  top: var(--va-edge-offset);
+}
+:host([data-position="top-right"]) .panel {
+  right: var(--va-edge-offset);
+  top: var(--va-panel-offset);
+}
+:host([data-position="top-left"]) .fab {
+  left: var(--va-edge-offset);
+  top: var(--va-edge-offset);
+}
+:host([data-position="top-left"]) .panel {
+  left: var(--va-edge-offset);
+  top: var(--va-panel-offset);
+}
+
+/* ───────── Small-screen adaptation ─────────
+   On phones, shrink the edge gaps so the (viewport-capped) panel uses more of
+   the screen and sits closer to the FAB. Width/height already clamp to the
+   viewport via min()/max-height above; this just tightens the margins. Scoped
+   to floating mode — inline embeds fill their own container. */
+@media (max-width: 460px) {
+  :host(:not([data-inline])) {
+    --va-edge-offset: 12px;
+    --va-panel-offset: calc(var(--va-fab-size) + 12px);
+  }
+  /* Pin both edges to the same gap (and let width fill between them) so the
+     left and right margins are always symmetrical, whichever corner the FAB
+     is anchored to. Overrides the single-side corner anchors above. */
+  :host(:not([data-inline])) .panel {
+    left: var(--va-edge-offset);
+    right: var(--va-edge-offset);
+    width: auto;
+  }
+}
+
+/* ───────── Inline / embedded mode ─────────
+   Placed after the corner anchors so its `inset` overrides them. */
+:host([data-inline]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+:host([data-inline]) .fab { display: none; }
+:host([data-inline]) .panel {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  animation: none;
+}
+
+/* ───────── Close button ───────── */
+
+.close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--va-text) 6%, transparent);
+  border: none;
+  color: var(--va-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  z-index: 5;
+  transition: background 0.15s ease, transform 0.15s ease;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+.close:hover {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  transform: scale(1.06);
+}
+.close svg { width: 16px; height: 16px; }
+:host([data-close-button-hide]) .close { display: none; }
+
+/* ───────── Screen base ───────── */
+
+.screen {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  animation: va-screen-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes va-screen-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ───────── Welcome screen ───────── */
+
+.screen-welcome {
+  background:
+    radial-gradient(95% 70% at 50% -10%, color-mix(in srgb, var(--va-primary) 14%, transparent), transparent 65%),
+    radial-gradient(75% 55% at 105% 115%, color-mix(in srgb, var(--va-accent) 14%, transparent), transparent 65%),
+    var(--va-background);
+  align-items: stretch;
+  justify-content: space-between;
+  padding: 56px 28px 18px;
+  text-align: center;
+  position: relative;
+}
+.welcome-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  max-width: 100%;
+  margin: auto 0;
+}
+
+.welcome-logo {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--va-primary-text);
+  box-shadow:
+    0 18px 44px -16px color-mix(in srgb, var(--va-primary) 55%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+}
+.welcome-logo::before {
+  content: "";
+  position: absolute;
+  inset: -10px;
+  border-radius: 50%;
+  background: radial-gradient(circle at center, color-mix(in srgb, var(--va-primary) 22%, transparent), transparent 70%);
+  z-index: -1;
+  filter: blur(6px);
+}
+.welcome-logo::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.42), transparent 55%);
+  pointer-events: none;
+}
+.welcome-logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  position: relative;
+}
+.welcome-logo-fallback {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48%;
+  height: 48%;
+  color: var(--va-primary-text);
+}
+.welcome-logo-fallback svg { width: 100%; height: 100%; }
+
+.welcome-status {
+  margin-top: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 11px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--va-text) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--va-text) 7%, transparent);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--va-text-muted);
+  text-transform: uppercase;
+}
+.welcome-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
+  animation: va-pulse-status 1.8s ease-out infinite;
+}
+@keyframes va-pulse-status {
+  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
+  70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+}
+
+.welcome-name {
+  margin: 14px 0 6px;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.022em;
+  color: var(--va-text);
+  line-height: 1.2;
+}
+.welcome-desc {
+  margin: 0 0 18px;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--va-text-muted);
+  max-width: 260px;
+  font-weight: 400;
+}
+
+/* ───────── Language picker (welcome) ───────── */
+
+.lang-picker {
+  position: relative;
+  margin: 0 0 16px;
+  width: 100%;
+  max-width: 260px;
+  display: flex;
+  justify-content: center;
+}
+
+.lang-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px 8px 14px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--va-text) 10%, transparent);
+  background: color-mix(in srgb, var(--va-background) 92%, var(--va-text) 8%);
+  color: var(--va-text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.005em;
+  transition: border-color 0.15s ease, background 0.15s ease,
+    box-shadow 0.15s ease, transform 0.15s ease;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+}
+.lang-trigger:hover {
+  border-color: color-mix(in srgb, var(--va-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--va-primary) 7%, var(--va-background));
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--va-primary) 40%, transparent);
+}
+.lang-trigger:focus-visible {
+  outline: none;
+  border-color: var(--va-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--va-primary) 22%, transparent);
+}
+
+.lang-trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--va-primary);
+  opacity: 0.9;
+  flex-shrink: 0;
+}
+.lang-trigger-icon svg { width: 100%; height: 100%; }
+
+.lang-trigger-text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1;
+  gap: 3px;
+  min-width: 0;
+}
+.lang-trigger-eyebrow {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--va-text-muted);
+  opacity: 0.8;
+}
+.lang-trigger-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--va-text);
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+}
+
+.lang-trigger-code {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  color: var(--va-primary-text);
+  line-height: 1;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+.lang-trigger-chev {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  color: var(--va-text-muted);
+  transition: transform 0.18s ease, color 0.18s ease;
+}
+.lang-trigger-chev svg { width: 100%; height: 100%; }
+.lang-picker[data-open="true"] .lang-trigger-chev {
+  transform: rotate(180deg);
+  color: var(--va-primary);
+}
+.lang-picker[data-open="true"] .lang-trigger {
+  border-color: color-mix(in srgb, var(--va-primary) 45%, transparent);
+  background: color-mix(in srgb, var(--va-primary) 6%, var(--va-background));
+}
+
+.lang-menu {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translateX(-50%);
+  min-width: min(220px, calc(100vw - 2 * var(--va-edge-offset) - 24px));
+  max-width: min(280px, calc(100vw - 2 * var(--va-edge-offset) - 24px));
+  background: var(--va-background);
+  border: 1px solid color-mix(in srgb, var(--va-text) 10%, transparent);
+  border-radius: 16px;
+  padding: 6px;
+  z-index: 4;
+  box-shadow:
+    0 18px 40px -14px rgba(15, 23, 42, 0.32),
+    0 6px 16px -8px rgba(15, 23, 42, 0.16);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: va-lang-menu-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.lang-menu[hidden] { display: none; }
+@keyframes va-lang-menu-in {
+  from { opacity: 0; transform: translate(-50%, 6px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
+}
+
+.lang-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px 9px 12px;
+  border: none;
+  background: transparent;
+  border-radius: 11px;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  color: var(--va-text);
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.lang-option:hover {
+  background: color-mix(in srgb, var(--va-text) 6%, transparent);
+}
+.lang-option-text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+}
+.lang-option-native {
+  font-size: 13.5px;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -0.005em;
+  color: var(--va-text);
+}
+.lang-option-label {
+  font-size: 11px;
+  line-height: 1.1;
+  color: var(--va-text-muted);
+  letter-spacing: 0.01em;
+}
+.lang-option-code {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--va-text) 8%, transparent);
+  color: var(--va-text-muted);
+  line-height: 1;
+}
+.lang-option-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--va-primary);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+.lang-option-check svg { width: 100%; height: 100%; }
+.lang-option.is-active {
+  background: color-mix(in srgb, var(--va-primary) 10%, transparent);
+}
+.lang-option.is-active .lang-option-code {
+  background: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  color: var(--va-primary-text);
+}
+.lang-option.is-active .lang-option-check {
+  opacity: 1;
+  transform: scale(1);
+}
+.start-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 26px;
+  border: none;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  color: var(--va-primary-text);
+  font-family: inherit;
+  font-size: 14.5px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  cursor: pointer;
+  box-shadow:
+    0 14px 30px -12px color-mix(in srgb, var(--va-primary) 60%, transparent),
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
+  overflow: hidden;
+}
+.start-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%);
+  pointer-events: none;
+}
+.start-btn:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 18px 36px -12px color-mix(in srgb, var(--va-primary) 70%, transparent),
+    0 4px 12px rgba(0, 0, 0, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  filter: brightness(1.04);
+}
+.start-btn:active { transform: translateY(0); filter: brightness(0.96); }
+.start-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+.start-btn-icon { display: inline-flex; position: relative; }
+.start-btn-icon svg { width: 17px; height: 17px; }
+.start-btn-label { position: relative; }
+
+.consent {
+  margin: 12px auto 0;
+  max-width: 280px;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--va-text-muted);
+  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+.consent[hidden] { display: none; }
+.consent-text { opacity: 0.85; }
+.consent-link {
+  color: var(--va-primary);
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--va-primary) 35%, transparent);
+  text-underline-offset: 2px;
+  transition: text-decoration-color 0.15s ease, color 0.15s ease;
+}
+.consent-link:hover {
+  text-decoration-color: var(--va-primary);
+}
+.consent-link:focus-visible {
+  outline: none;
+  border-radius: 4px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--va-primary) 22%, transparent);
+}
+.welcome-foot {
+  display: block;
+  font-size: 10.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--va-text-muted);
+  opacity: 0.55;
+  text-decoration: none;
+  font-weight: 500;
+  padding-top: 14px;
+  margin-top: 14px;
+  border-top: 1px solid color-mix(in srgb, var(--va-text) 6%, transparent);
+  transition: opacity 0.15s ease;
+}
+.welcome-foot.is-link { cursor: pointer; }
+.welcome-foot.is-link:hover { opacity: 0.9; }
+
+/* ───────── Call screen ───────── */
+
+.screen-call {
+  position: relative;
+  background:
+    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--va-primary) 13%, transparent), transparent 70%),
+    radial-gradient(80% 50% at 100% 110%, color-mix(in srgb, var(--va-accent) 10%, transparent), transparent 70%),
+    var(--va-background);
+}
+
+.call-header {
+  padding: 20px 56px 8px 22px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.call-timer {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--va-text) 6%, transparent);
+  border: 1px solid color-mix(in srgb, var(--va-text) 10%, transparent);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--va-text-muted);
+  letter-spacing: 0.02em;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+.call-timer[hidden] { display: none; }
+.call-timer.warning {
+  background: color-mix(in srgb, #ef4444 14%, transparent);
+  border-color: color-mix(in srgb, #ef4444 35%, transparent);
+  color: #ef4444;
+  animation: va-timer-pulse 1s ease-in-out infinite;
+}
+@keyframes va-timer-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.65; }
+}
+.call-id {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.call-logo {
+  position: relative;
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--va-primary-text);
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+}
+.call-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.call-logo-fallback { width: 55%; height: 55%; display: flex; align-items: center; justify-content: center; }
+.call-logo-fallback svg { width: 100%; height: 100%; }
+.call-id-text { min-width: 0; }
+.call-name {
+  font-size: 14.5px;
+  font-weight: 600;
+  color: var(--va-text);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.call-status {
+  font-size: 12px;
+  color: var(--va-text-muted);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+.call-status::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--va-accent);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--va-accent) 60%, transparent);
+  animation: va-pulse-dot 1.6s ease-out infinite;
+  flex-shrink: 0;
+}
+@keyframes va-pulse-dot {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--va-accent) 50%, transparent); }
+  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--va-accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--va-accent) 0%, transparent); }
+}
+
+/* ───────── Orb stage ───────── */
+
+.call-stage {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  padding: 18px 16px 12px;
+}
+.orb {
+  position: relative;
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.orb-core {
+  position: relative;
+  width: 76px;
+  height: 76px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 30% 28%,
+    color-mix(in srgb, var(--va-primary) 25%, white) 0%,
+    var(--va-primary) 55%,
+    color-mix(in srgb, var(--va-primary) 70%, black) 100%
+  );
+  box-shadow:
+    inset 0 -12px 22px rgba(0, 0, 0, 0.22),
+    inset 0 5px 10px rgba(255, 255, 255, 0.28),
+    0 12px 32px -8px color-mix(in srgb, var(--va-primary) 55%, transparent);
+  transition: transform 0.3s ease;
+}
+.orb-core::before {
+  content: "";
+  position: absolute;
+  inset: 12% 28% 50% 16%;
+  border-radius: 50%;
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), transparent 70%);
+  filter: blur(2px);
+  pointer-events: none;
+}
+.orb-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--va-primary) 35%, transparent);
+  opacity: 0;
+  inset: 0;
+}
+.orb-ring-1 { animation: va-ring 2.6s ease-out infinite; }
+.orb-ring-2 { animation: va-ring 2.6s ease-out 0.65s infinite; }
+.orb-ring-3 { animation: va-ring 2.6s ease-out 1.3s infinite; }
+@keyframes va-ring {
+  0%   { transform: scale(0.55); opacity: 0; }
+  20%  { opacity: 0.7; }
+  100% { transform: scale(1); opacity: 0; }
+}
+.orb:not(.listening):not(.speaking):not(.connecting) .orb-ring {
+  animation-play-state: paused;
+  opacity: 0;
+}
+.orb.connecting .orb-ring {
+  border-color: color-mix(in srgb, var(--va-text-muted) 40%, transparent);
+}
+
+.orb.listening .orb-ring { border-color: color-mix(in srgb, var(--va-accent) 55%, transparent); }
+.orb.speaking .orb-core { animation: va-orb-pulse 1.1s ease-in-out infinite; }
+.orb.speaking .orb-ring { border-color: color-mix(in srgb, var(--va-primary) 60%, transparent); }
+@keyframes va-orb-pulse {
+  0%, 100% { transform: scale(1); }
+  50%      { transform: scale(1.09); }
+}
+
+/* Thinking: a slow rotating accent ring + gentle breathing core, distinct
+   from listening (idle rings), speaking (fast pulse) and connecting. Reads
+   as "working on it" rather than "talking". */
+.orb.thinking .orb-ring {
+  animation-play-state: running;
+  border-color: color-mix(in srgb, var(--va-accent) 50%, transparent);
+}
+.orb.thinking .orb-core {
+  animation: va-orb-think 2.4s ease-in-out infinite;
+}
+.orb.thinking::after {
+  content: "";
+  position: absolute;
+  inset: 6px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  border-top-color: color-mix(in srgb, var(--va-accent) 70%, transparent);
+  border-right-color: color-mix(in srgb, var(--va-primary) 45%, transparent);
+  animation: va-orb-spin 1.6s linear infinite;
+  pointer-events: none;
+}
+@keyframes va-orb-think {
+  0%, 100% { transform: scale(0.96); opacity: 0.85; }
+  50%      { transform: scale(1.04); opacity: 1; }
+}
+@keyframes va-orb-spin {
+  to { transform: rotate(360deg); }
+}
+
+.orb-label {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--va-text-muted);
+  font-weight: 600;
+}
+
+/* Contextual processing line under the orb ("Searching the knowledge base…").
+   Subtle, muted, fades in. */
+.agent-status-line {
+  margin-top: 2px;
+  max-width: 86%;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--va-text-muted);
+  opacity: 0.9;
+  animation: va-status-fade 0.18s ease-out;
+}
+.agent-status-line[hidden] {
+  display: none;
+}
+@keyframes va-status-fade {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 0.9; transform: translateY(0); }
+}
+
+/* ───────── Transcript ───────── */
+
+.transcript {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 18px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  scroll-behavior: smooth;
+  mask-image: linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
+}
+.transcript::-webkit-scrollbar { width: 6px; }
+.transcript::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  border-radius: 999px;
+}
+.transcript:empty::before {
+  content: attr(data-placeholder);
+  display: block;
+  font-size: 12px;
+  color: var(--va-text-muted);
+  text-align: center;
+  padding-top: 22px;
+  opacity: 0.7;
+}
+.transcript-msg {
+  max-width: 86%;
+  padding: 9px 13px;
+  border-radius: 16px;
+  font-size: 13.5px;
+  line-height: 1.45;
+  white-space: normal;
+  word-wrap: break-word;
+  animation: va-msg-in 0.2s ease-out;
+}
+.transcript-msg p { margin: 0 0 0.4em; }
+.transcript-msg p:last-child { margin-bottom: 0; }
+.transcript-msg strong { font-weight: 700; }
+.transcript-msg em { font-style: italic; }
+.transcript-msg code {
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  font-size: 0.88em;
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+.transcript-msg.user code { background: rgba(255, 255, 255, 0.2); }
+.transcript-msg pre {
+  margin: 0.4em 0;
+  padding: 0.5em 0.7em;
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 6px;
+  overflow-x: auto;
+  white-space: pre;
+  font-size: 0.88em;
+}
+.transcript-msg.user pre { background: rgba(255, 255, 255, 0.15); }
+.transcript-msg pre code { background: none; padding: 0; }
+.transcript-msg ul, .transcript-msg ol { margin: 0.3em 0; padding-left: 1.4em; }
+.transcript-msg li { margin: 0.15em 0; }
+.transcript-msg h1, .transcript-msg h2, .transcript-msg h3 { margin: 0.3em 0 0.2em; font-weight: 700; line-height: 1.2; }
+.transcript-msg h1 { font-size: 1.1em; }
+.transcript-msg h2 { font-size: 1.05em; }
+.transcript-msg h3 { font-size: 1em; }
+.transcript-msg a { color: inherit; text-decoration: underline; opacity: 0.85; }
+@keyframes va-msg-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.transcript-msg.user {
+  align-self: flex-end;
+  background: var(--va-user-bubble);
+  color: var(--va-user-bubble-text);
+  border-bottom-right-radius: 6px;
+  box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--va-user-bubble) 60%, transparent);
+}
+.transcript-msg.agent {
+  align-self: flex-start;
+  background: var(--va-agent-bubble);
+  color: var(--va-agent-bubble-text);
+  border-bottom-left-radius: 6px;
+  box-shadow: 0 2px 8px -6px rgba(15, 23, 42, 0.18);
+}
+.transcript-msg.system {
+  align-self: center;
+  background: transparent;
+  color: var(--va-agent-bubble-text);
+  opacity: 0.7;
+  font-size: 0.85em;
+  font-style: italic;
+  box-shadow: none;
+  text-align: center;
+}
+.transcript-msg.interim { opacity: 0.78; }
+.transcript-msg.interim::after {
+  content: "▍";
+  display: inline-block;
+  margin-left: 2px;
+  font-style: normal;
+  animation: va-caret 1s steps(2, end) infinite;
+}
+@keyframes va-caret {
+  0%, 60% { opacity: 1; }
+  61%, 100% { opacity: 0; }
+}
+
+/* ───────── Text input row ───────── */
+
+.text-input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 8px 14px 4px;
+  border-top: 1px solid color-mix(in srgb, var(--va-text) 8%, transparent);
+}
+.text-input-row[hidden] { display: none; }
+.text-input {
+  flex: 1;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.45;
+  padding: 9px 12px;
+  border-radius: 18px;
+  border: 1px solid color-mix(in srgb, var(--va-text) 14%, transparent);
+  background: color-mix(in srgb, var(--va-text) 5%, var(--va-background));
+  color: var(--va-text);
+  resize: none;
+  overflow-y: hidden;
+  max-height: 96px;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.text-input::placeholder { color: var(--va-text-muted); opacity: 0.7; }
+.text-input:focus {
+  border-color: var(--va-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--va-primary) 20%, transparent);
+}
+.text-send-btn {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--va-primary);
+  color: var(--va-primary-text);
+  padding: 0;
+  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
+}
+.text-send-btn svg { width: 15px; height: 15px; }
+.text-send-btn:hover { transform: scale(1.08); }
+.text-send-btn:active { transform: scale(0.96); }
+.text-send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+
+/* ───────── Call control bar ───────── */
+
+.call-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 22px;
+  padding: 16px 18px 24px;
+}
+.ctl-btn {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--va-text);
+  background: color-mix(in srgb, var(--va-text) 8%, transparent);
+  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
+  padding: 0;
+}
+.ctl-btn svg { width: 22px; height: 22px; }
+.ctl-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  transform: translateY(-1px);
+}
+.ctl-btn:active:not(:disabled) { transform: translateY(0); }
+.ctl-btn:disabled { opacity: 0.38; cursor: not-allowed; }
+
+.ctl-mute.is-active {
+  background: var(--va-text);
+  color: var(--va-background);
+  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--va-text) 70%, transparent);
+}
+
+.ctl-end {
+  background: #ef4444;
+  color: #ffffff;
+  box-shadow: 0 12px 26px -10px rgba(239, 68, 68, 0.65);
+}
+.ctl-end:hover:not(:disabled) {
+  background: #dc2626;
+  box-shadow: 0 16px 32px -10px rgba(239, 68, 68, 0.75);
+}
+.ctl-end:disabled { background: color-mix(in srgb, #ef4444 50%, transparent); }
+
+/* ───────── Form screen ───────── */
+
+.screen-form {
+  background:
+    radial-gradient(110% 65% at 50% -10%, color-mix(in srgb, var(--va-primary) 12%, transparent), transparent 70%),
+    var(--va-background);
+  flex-direction: column;
+}
+
+.form-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 18px 96px 8px 14px;
+}
+.form-header-text {
+  flex: 1 1 auto;
+}
+.form-call-controls {
+  position: absolute;
+  top: 14px;
+  right: 56px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  z-index: 4;
+}
+.form-call-controls[hidden] { display: none; }
+.form-call-controls button {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--va-text);
+  background: color-mix(in srgb, var(--va-text) 6%, transparent);
+  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+.form-call-controls button svg {
+  width: 15px;
+  height: 15px;
+}
+.form-call-controls button:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  transform: translateY(-1px);
+}
+.form-call-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
+.form-call-controls .form-mute.is-active {
+  background: var(--va-text);
+  color: var(--va-background);
+}
+.form-call-controls .form-end {
+  background: #ef4444;
+  color: #ffffff;
+  box-shadow: 0 6px 14px -6px rgba(239, 68, 68, 0.55);
+}
+.form-call-controls .form-end:hover:not(:disabled) {
+  background: #dc2626;
+  box-shadow: 0 10px 18px -8px rgba(239, 68, 68, 0.7);
+}
+.form-transcript {
+  max-height: 130px;
+  flex-shrink: 0;
+  overflow-y: auto;
+  padding: 6px 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-bottom: 1px solid color-mix(in srgb, var(--va-text) 8%, transparent);
+  background: color-mix(in srgb, var(--va-text) 3%, var(--va-background));
+  scroll-behavior: smooth;
+  mask-image: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
+}
+.form-transcript[hidden] { display: none; }
+.form-transcript::-webkit-scrollbar { width: 4px; }
+.form-transcript::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  border-radius: 999px;
+}
+
+.form-back {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: color-mix(in srgb, var(--va-text) 6%, transparent);
+  color: var(--va-text);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.15s ease, transform 0.15s ease;
+}
+.form-back svg {
+  width: 16px;
+  height: 16px;
+  transform: rotate(90deg);
+}
+.form-back:hover {
+  background: color-mix(in srgb, var(--va-text) 12%, transparent);
+  transform: translateY(-1px);
+}
+.form-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.form-eyebrow {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--va-primary);
+  opacity: 0.85;
+}
+.form-title {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--va-text);
+}
+
+.form-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 18px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.form-body::-webkit-scrollbar { width: 6px; }
+.form-body::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  border-radius: 999px;
+}
+.form-subtitle {
+  margin: 0 0 4px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--va-text-muted);
+}
+.form-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.form-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--va-text);
+  opacity: 0.85;
+}
+.form-input {
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.4;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--va-text) 14%, transparent);
+  background: var(--va-background);
+  color: var(--va-text);
+  width: 100%;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+}
+.form-input::placeholder { color: var(--va-text-muted); opacity: 0.7; }
+.form-input:focus {
+  border-color: var(--va-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--va-primary) 22%, transparent);
+}
+.form-input:disabled { opacity: 0.55; cursor: not-allowed; }
+.form-textarea { resize: vertical; min-height: 76px; }
+.form-select { appearance: none; padding-right: 32px; cursor: pointer; }
+
+.form-error,
+.form-success {
+  font-size: 12.5px;
+  line-height: 1.45;
+  padding: 9px 12px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+}
+.form-error {
+  background: color-mix(in srgb, #ef4444 10%, transparent);
+  border-color: color-mix(in srgb, #ef4444 30%, transparent);
+  color: #b91c1c;
+}
+.form-success {
+  background: color-mix(in srgb, #10b981 10%, transparent);
+  border-color: color-mix(in srgb, #10b981 28%, transparent);
+  color: #047857;
+}
+
+.form-actions {
+  display: flex;
+  gap: 10px;
+  padding: 12px 18px 18px;
+  border-top: 1px solid color-mix(in srgb, var(--va-text) 6%, transparent);
+}
+.form-cancel,
+.form-submit {
+  flex: 1;
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+  padding: 11px 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  border: none;
+  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+.form-cancel {
+  background: color-mix(in srgb, var(--va-text) 8%, transparent);
+  color: var(--va-text);
+}
+.form-cancel:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+}
+.form-submit {
+  background: linear-gradient(135deg, var(--va-primary), var(--va-accent));
+  color: var(--va-primary-text);
+  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--va-primary) 60%, transparent);
+}
+.form-submit:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: brightness(1.04);
+}
+.form-submit:disabled,
+.form-cancel:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
+.form-submit.is-busy .form-submit-label::after {
+  content: "…";
+  margin-left: 2px;
+}
+
+/* ---- Stepper indicator ---- */
+.form-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 4px 18px 0;
+}
+.form-stepper[hidden] { display: none; }
+.form-stepper-dot {
+  width: 22px;
+  height: 4px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+.form-stepper-dot.is-done {
+  background: color-mix(in srgb, var(--va-primary) 60%, transparent);
+}
+.form-stepper-dot.is-active {
+  background: linear-gradient(90deg, var(--va-primary), var(--va-accent));
+  transform: scaleY(1.4);
+}
+
+/* ---- Grid layout ---- */
+.form-fields.is-grid {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.form-fields.is-grid > .form-field {
+  flex: 1 1 100%;
+  min-width: 0;
+}
+.form-fields.is-grid > .form-field.is-half {
+  flex: 1 1 calc(50% - 6px);
+}
+
+/* ---- Compact density ---- */
+.form-fields.is-compact { gap: 8px; }
+.form-fields.is-compact .form-field { gap: 4px; }
+.form-fields.is-compact .form-input { padding: 8px 11px; font-size: 12.5px; }
+
+/* ---- Inline labels (label sits in front of the input) ---- */
+.form-fields.is-inline-labels .form-field {
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+.form-fields.is-inline-labels .form-label {
+  flex: 0 0 38%;
+  margin: 0;
+}
+.form-fields.is-inline-labels .form-input,
+.form-fields.is-inline-labels .form-choice-group {
+  flex: 1 1 auto;
+}
+
+/* ---- Helper text ---- */
+.form-help {
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: var(--va-text-muted);
+}
+
+/* ---- Inline per-field validation errors ---- */
+.form-field-error {
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: #b91c1c;
+}
+.form-field.is-invalid .form-input,
+.form-field.is-invalid .form-textarea,
+.form-field.is-invalid .form-select {
+  border-color: #ef4444;
+}
+.form-field.is-invalid .form-input:focus,
+.form-field.is-invalid .form-textarea:focus,
+.form-field.is-invalid .form-select:focus {
+  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent);
+}
+
+/* ---- Display blocks (read-only heading/description rows) ---- */
+.form-display {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--va-primary) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--va-primary) 14%, transparent);
+}
+.form-display-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--va-text);
+}
+.form-display-body {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--va-text-muted);
+}
+
+/* ---- Radio / checkbox groups ---- */
+.form-choice-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.form-choice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--va-text);
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--va-text) 10%, transparent);
+  background: color-mix(in srgb, var(--va-background) 92%, var(--va-text) 8%);
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.form-choice:hover {
+  border-color: color-mix(in srgb, var(--va-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--va-primary) 6%, var(--va-background));
+}
+.form-choice input[type="radio"],
+.form-choice input[type="checkbox"] {
+  accent-color: var(--va-primary);
+  margin: 0;
+}
+.form-field.is-inline-bool {
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+.form-field.is-inline-bool .form-label {
+  order: 2;
+  flex: 1 1 auto;
+}
+.form-field.is-inline-bool .form-checkbox {
+  order: 1;
+  accent-color: var(--va-primary);
+  width: 18px;
+  height: 18px;
+  margin: 0;
+}
+
+/* ---- Step-back button (sits beside cancel on stepper forms) ---- */
+.form-step-back {
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  padding: 11px 14px;
+  border-radius: 999px;
+  border: none;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--va-text) 8%, transparent);
+  color: var(--va-text);
+  transition: background 0.15s ease;
+}
+.form-step-back:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--va-text) 14%, transparent);
+}
+.form-step-back:disabled { opacity: 0.55; cursor: not-allowed; }
+.form-step-back[hidden] { display: none; }
+
+/* ───────── Audio settings drawer ───────── */
+
+.ctl-settings.is-active {
+  background: color-mix(in srgb, var(--va-primary) 22%, transparent);
+  color: var(--va-primary);
+}
+.ctl-settings[hidden] { display: none; }
+
+.audio-drawer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 80%;
+  background: var(--va-background);
+  border-top: 1px solid color-mix(in srgb, var(--va-text) 8%, transparent);
+  box-shadow: 0 -16px 32px -16px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+  z-index: 6;
+  transform: translateY(8px);
+  opacity: 0;
+  transition: transform 0.18s ease, opacity 0.18s ease;
+  pointer-events: none;
+}
+.audio-drawer.is-open {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+.audio-drawer[hidden] { display: none; }
+
+.audio-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--va-text) 6%, transparent);
+}
+.audio-drawer-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--va-text);
+}
+.audio-drawer-close {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--va-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.audio-drawer-close svg { width: 16px; height: 16px; }
+.audio-drawer-close:hover {
+  background: color-mix(in srgb, var(--va-text) 8%, transparent);
+  color: var(--va-text);
+}
+
+.audio-drawer-body {
+  padding: 12px 16px 18px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.audio-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.audio-row-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--va-text-muted);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.audio-volume-value {
+  font-variant-numeric: tabular-nums;
+  color: var(--va-text);
+  font-size: 12px;
+}
+.audio-row-meter .audio-meter {
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--va-text) 10%, transparent);
+  overflow: hidden;
+}
+.audio-meter-bar {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--va-primary), var(--va-accent));
+  transition: width 0.08s linear;
+}
+
+.audio-row-select select,
+.audio-row-slider input[type="range"] {
+  width: 100%;
+  font-family: inherit;
+}
+.audio-row-select select {
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--va-text) 14%, transparent);
+  background: var(--va-surface);
+  color: var(--va-text);
+  font-size: 13px;
+}
+.audio-row-select select:focus {
+  outline: 2px solid color-mix(in srgb, var(--va-primary) 35%, transparent);
+  outline-offset: 1px;
+}
+.audio-row-slider input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: color-mix(in srgb, var(--va-text) 12%, transparent);
+  border-radius: 999px;
+}
+.audio-row-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--va-primary);
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+}
+.audio-row-slider input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--va-primary);
+  border: none;
+  cursor: pointer;
+}
+
+.audio-toggles {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
+}
+.audio-toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--va-text) 6%, transparent);
+}
+.audio-toggle:last-child { border-bottom: none; }
+.audio-toggle-text {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.audio-toggle-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--va-text);
+}
+.audio-toggle-hint {
+  font-size: 11.5px;
+  color: var(--va-text-muted);
+}
+.audio-toggle input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--va-text) 18%, transparent);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  flex-shrink: 0;
+  margin: 0;
+}
+.audio-toggle input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ffffff;
+  top: 2px;
+  left: 2px;
+  transition: left 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+.audio-toggle input[type="checkbox"]:checked {
+  background: var(--va-primary);
+}
+.audio-toggle input[type="checkbox"]:checked::after {
+  left: 18px;
+}
+.audio-toggle input[type="checkbox"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.audio-diag {
+  margin-top: 4px;
+  border-top: 1px solid color-mix(in srgb, var(--va-text) 6%, transparent);
+  padding-top: 8px;
+}
+.audio-diag summary {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--va-text-muted);
+  cursor: pointer;
+  user-select: none;
+  padding: 4px 0;
+}
+.audio-diag summary::marker { color: var(--va-text-muted); }
+.audio-diag-list {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 4px 12px;
+  margin: 8px 0 0;
+  font-size: 11.5px;
+}
+.audio-diag-list dt {
+  color: var(--va-text-muted);
+}
+.audio-diag-list dd {
+  color: var(--va-text);
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}