/* Clara S. — mission-control theme.
 *
 * Visual language: Apple-neutral simulator console. Layered monochrome
 * panels — near-black in dark mode, soft gray/white in light — with ink
 * itself as the action color and the Veeam mark as the page's only
 * brand color. Monospaced
 * accents for readouts, smooth micro-animations (fully disabled under
 * prefers-reduced-motion). Vanilla CSS, no framework, system fonts only.
 *
 * Rule of the file: every color is driven by a :root custom property;
 * derived tints and glows use color-mix() over those same variables.
 */

:root {
  color-scheme: dark;

  /* Surfaces, deep → raised — Apple-dark neutrals (2026-08-13 rebrand:
     monochrome chrome, the Veeam mark is the page's only brand color) */
  --bg: #0a0a0c;
  --bg-raise: #131316;
  --surface-1: #151518;
  --surface-2: #1c1c1f;
  --surface-3: #242428;

  /* Ink */
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #6e6e73;

  /* Signal — monochrome: primary actions are white-on-dark pills,
     live indicators read as bright neutral, never a vendor hue. */
  --accent: #f5f5f7;             /* near-white — live data + primary actions */
  --accent-ink: #0a0a0c;         /* text on solid accent */
  --accent-2: #86868b;           /* gray — badges, secondary signal */
  --ok: #30d158;
  --ok-ink: #04220f;
  --warn: #ffd60a;
  --danger: #ff453a;

  /* Roles mapped onto the palette */
  --card: color-mix(in srgb, var(--surface-2) 86%, transparent);
  --border: #2d2d30;
  --border-strong: #48484c;
  --hairline: color-mix(in srgb, var(--ink) 8%, transparent);
  --error-bg: color-mix(in srgb, var(--danger) 12%, var(--surface-1));
  --error-ink: #ff9f9a;
  --badge-bg: color-mix(in srgb, var(--accent-2) 16%, var(--surface-1));
  --badge-ink: #d1d1d6;
  --runnable: var(--ok);
  --incomplete: var(--warn);

  /* Depth + glow — quiet, monochrome; the old neon bloom reads
     off-brand against Apple-neutral surfaces. */
  --shadow-color: #000000;
  --shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent) inset,
            0 2px 6px color-mix(in srgb, var(--shadow-color) 45%, transparent),
            0 14px 36px color-mix(in srgb, var(--shadow-color) 40%, transparent);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
                 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);

  /* Type */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 150ms;
  --dur-2: 320ms;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  background-clip: padding-box;
  border: 3px solid transparent;
}
*::-webkit-scrollbar-track { background: transparent; }

/* Author-level [hidden] guard: several show/hide elements also carry
   display: flex/grid rules, which would otherwise beat the UA's plain
   [hidden] rule. app.js toggles visibility exclusively through the
   hidden property, so "hidden always wins" is always the intent. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Deep-space field: two soft signal glows over the base color. */
body {
  background:
    radial-gradient(1100px 700px at 82% -12%,
      color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    radial-gradient(900px 640px at -12% 108%,
      color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Faint engineering grid, masked toward the center of attention. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 1px,
      transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 1px,
      transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%,
    black, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%,
    black, transparent 78%);
}

::selection {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--ink);
}

/* Visible keyboard focus everywhere; mouse clicks stay clean. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- shared motion --------------------------------------------------- */

@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

main#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.step {
  display: none;
  width: 100%;
  max-width: 560px;
}
.step.active {
  display: block;
  animation: step-in var(--dur-2) var(--ease-out);
}
/* The 4-way conversation-mode picker needs a little more room. */
#step-scenario { max-width: 680px; }

#step-username header,
#step-mode header,
#step-ended header {
  text-align: center;
}

header h1 {
  font-size: 42px;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink);
}
/* Gradient wordmark where clip-to-text is available. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  header h1 {
    background: linear-gradient(160deg, var(--ink) 55%,
      color-mix(in srgb, var(--accent) 65%, var(--ink)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
header h2 {
  font-size: 23px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
header p.subhead {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}
/* The wordmark's tagline reads as a console boot line. */
#step-username header p.subhead {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--faint);
}
header p.welcome {
  margin: 0 0 6px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
#welcome-name { color: var(--accent); }

.card {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent),
      transparent 42%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Signal hairline along the top edge of glass cards. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 45%, transparent), transparent);
}

/* ---- forms ---------------------------------------------------------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raise);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
input::placeholder,
textarea::placeholder { color: var(--faint); }
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}

button {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 88%, var(--ink)), var(--accent));
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: 10px;
  transition: filter var(--dur-1) ease, box-shadow var(--dur-1) ease,
              transform var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, background-color var(--dur-1) ease;
}
button:hover {
  filter: brightness(1.06);
  box-shadow: var(--glow-accent);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled {
  background: var(--surface-3);
  color: var(--faint);
  border-color: var(--border);
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
  transform: none;
}

form button[type="submit"] {
  margin-top: 14px;
}
#username-form button[type="submit"] { width: 100%; }

.link-button {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 8px 0;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
}
.link-button:hover {
  color: var(--ink);
  filter: none;
  box-shadow: none;
}

/* ---- mode picker --------------------------------------------------- */

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}

.mode-card {
  position: relative;
  text-align: left;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent),
      transparent 45%),
    var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px;
  font-weight: 400;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--dur-1) ease,
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.mode-card:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow), var(--glow-accent);
  filter: none;
}
.mode-card:disabled {
  opacity: 0.55;
  background: var(--card);
  color: var(--ink);
}
.mode-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Signal chip per mode: run = cyan, build = violet. */
.mode-card h3::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mode-card[data-mode="build"] h3::before {
  background: var(--accent-2);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.mode-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---- scenario list ------------------------------------------------- */

.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.scenario-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: default;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease,
              box-shadow var(--dur-2) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.scenario-row.clickable { cursor: pointer; }
.scenario-row.clickable:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  box-shadow: var(--glow-accent);
}

.scenario-row .meta { flex: 1; min-width: 0; }
.scenario-row .name {
  font-weight: 500;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-row .path {
  font-size: 11.5px;
  color: var(--faint);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status pills: mono uppercase + a glowing state dot, instrument style. */
.scenario-row .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
  color: var(--muted);
}
.scenario-row .status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}
.scenario-row .status.runnable {
  color: var(--runnable);
  border-color: color-mix(in srgb, var(--runnable) 35%, transparent);
  background: color-mix(in srgb, var(--runnable) 8%, transparent);
}
.scenario-row .status.incomplete {
  color: var(--incomplete);
  border-color: color-mix(in srgb, var(--incomplete) 35%, transparent);
  background: color-mix(in srgb, var(--incomplete) 8%, transparent);
}
.scenario-row .status.error {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.scenario-row.disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* While a session is being created, freeze the whole picker — both the
   row clicks and the per-row pill buttons. Single click guarantees a
   single POST /api/sessions. */
#step-scenario.busy {
  pointer-events: none;
  cursor: progress;
}
#step-scenario.busy .scenario-row,
#step-scenario.busy .scenario-actions,
#step-scenario.busy .blank-card {
  opacity: 0.6;
}

.scenario-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scenario-rename,
.scenario-delete {
  background: transparent;
  color: var(--faint);
  border: 1px solid transparent;
  padding: 0;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease,
              background var(--dur-1) ease;
}

.scenario-rename {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.scenario-rename:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
  filter: none;
  box-shadow: none;
}

.scenario-delete {
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
}
.scenario-delete:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  filter: none;
  box-shadow: none;
}

.empty {
  color: var(--muted);
  font-size: 14px;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}

.browse-elsewhere {
  margin-top: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.browse-elsewhere label {
  margin-bottom: 6px;
}
.browse-elsewhere input {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 10px;
}

.error {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--error-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--error-ink);
  border-radius: 10px;
  font-size: 13px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid var(--hairline);
  padding: 1px 6px;
  border-radius: 5px;
  color: color-mix(in srgb, var(--accent) 55%, var(--ink));
}

/* ---- conversation step --------------------------------------------- */

main#app:has(.conversation-step.active) {
  align-items: stretch;
  max-width: none;
}

.conversation-step {
  width: 100%;
  max-width: 1280px;
  height: calc(100vh - 64px);
  display: none;
}
.conversation-step.active { display: block; }

.conv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  height: 100%;
  min-height: 0;
}

.conv-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* min-height: 0 lets the inner .transcript shrink + scroll instead
     of pushing the column past the grid height. */
  min-height: 0;
}

@media (max-width: 920px) {
  .conv-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .conv-right { display: none; }
}

.conv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.conv-header-text { min-width: 0; flex: 1; }
.conv-header h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.conv-header .subhead {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.conv-header .conv-persona {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.conv-header .conv-company {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
}
.end-button {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.end-button:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  filter: none;
  box-shadow: none;
}

.conv-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* While Pause is in flight (or any other "wait for the server to settle
   before letting the user act again" moment), gray the whole step out
   and block pointer events. setConvStatus continues to render the
   running explanation in the input row so the user knows it's working. */
.conversation-step.locked {
  pointer-events: none;
  cursor: progress;
  opacity: 0.7;
  filter: saturate(0.5);
}
.conversation-step.locked .conv-status {
  opacity: 1;
  color: var(--muted);
  font-style: italic;
}

.scenario-row.resumable {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(to right, var(--accent-soft), var(--card) 40%);
}

.scenario-actions .start-new-link {
  background: transparent;
  color: var(--faint);
  border: 1px solid transparent;
  padding: 0 10px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.scenario-actions .start-new-link:hover {
  color: var(--ink);
  border-color: var(--border);
  filter: none;
  box-shadow: none;
}

/* Primary "Resume" pill for paused scenarios — accented so it reads
   as the obvious next action. */
.scenario-actions .scenario-resume {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 88%, var(--ink)), var(--accent));
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  padding: 0 14px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.scenario-actions .scenario-resume:hover {
  filter: brightness(1.06);
}

.scenario-row .status.paused {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.transcript {
  flex: 1;
  overflow-y: auto;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 78%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bubble.customer {
  align-self: flex-start;
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.bubble.rep {
  align-self: flex-end;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 22%, var(--surface-2)),
    color-mix(in srgb, var(--accent) 13%, var(--surface-2)));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}

/* Bubble rows + attribution above customer bubbles ----------------- */
.bubble-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: rise-in var(--dur-2) var(--ease-out);
}
.bubble-row.customer-row { align-items: flex-start; }
.bubble-row.rep-row { align-items: flex-end; }
.bubble-row.system-row { align-items: center; }

.bubble-attribution {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  padding: 0 4px;
}
.bubble.system {
  align-self: center;
  background: transparent;
  color: var(--faint);
  font-size: 12px;
  font-style: italic;
  max-width: 90%;
  text-align: center;
  animation: fade-in var(--dur-2) var(--ease-out);
}

.bubble.acceptance {
  position: relative;
  align-self: center;
  background: var(--card);
  color: var(--ink);
  font-style: normal;
  font-size: 13px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 85%;
  box-shadow: var(--shadow), var(--glow-accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: rise-in var(--dur-2) var(--ease-out);
}
.bubble.acceptance .bubble-attr {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.bubble.acceptance .bubble-message {
  font-weight: 500;
  margin-bottom: 10px;
}
.bubble.acceptance .bubble-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.bubble.acceptance .bubble-actions button {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
}
.bubble.acceptance .bubble-actions .secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.bubble.acceptance .bubble-actions .secondary:hover {
  border-color: var(--border-strong);
  filter: none;
  box-shadow: none;
}
.bubble.acceptance.dismissed .bubble-actions { display: none; }
.bubble.acceptance.dismissed { opacity: 0.7; box-shadow: var(--shadow); }

/* Acceptance prompt bar — pinned between transcript and input (QA
   2026-07-21: as a transcript bubble it could slide out of view). */
.acceptance-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  margin: 4px 0;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  box-shadow: var(--shadow), var(--glow-accent);
  animation: rise-in var(--dur-2) var(--ease-out);
}
.acceptance-bar-attr {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.acceptance-bar-msg {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.acceptance-bar-actions {
  display: flex;
  gap: 8px;
}
.acceptance-bar-actions button {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
}
.acceptance-bar-actions .secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}
.acceptance-bar-actions .secondary:hover {
  border-color: var(--border-strong);
  filter: none;
  box-shadow: none;
}
.bubble.pending {
  opacity: 0.6;
  font-style: italic;
}

.conv-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.conv-input-row textarea {
  flex: 1;
  font: inherit;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  resize: vertical;
  min-height: 44px;
  max-height: 200px;
  outline: none;
  background: var(--bg-raise);
  color: var(--ink);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.conv-input-row textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.conv-input-row button {
  height: 44px;
  padding: 0 18px;
}
.conv-input-row button:disabled {
  background: var(--surface-3);
  color: var(--faint);
}

.conv-status {
  margin: 0;
  font-size: 12px;
  color: var(--error-ink);
}

/* Mic button (voice ears) ------------------------------------------- */

.conv-input-row .mic-button {
  flex: 0 0 auto;
  width: 44px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
}
.conv-input-row .mic-button:hover {
  filter: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.conv-input-row .mic-button.recording {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  color: var(--danger);
  animation: clara-mic-pulse 1.2s ease-in-out infinite;
}
.conv-input-row .mic-button.transcribing {
  background: var(--surface-3);
  color: var(--muted);
  cursor: progress;
}
.conv-input-row .mic-button:disabled {
  background: var(--surface-3);
  color: var(--faint);
  animation: none;
}

@keyframes clara-mic-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger) 0%, transparent);
  }
}

/* Live captions bar + live toggle (continuous listening) ------------ */

.voice-captions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-top: 6px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent),
      transparent 50%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  min-height: 40px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: rise-in var(--dur-2) var(--ease-out);
}
.voice-captions .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 80%, transparent);
  flex: 0 0 auto;
  align-self: center;
  animation: clara-mic-pulse 1.2s ease-in-out infinite;
}
.voice-captions .captions-text {
  flex: 1;
  min-width: 0;
}
/* A console caret marks where live speech is landing. */
.voice-captions .captions-text::after {
  content: "▍";
  color: var(--accent);
  margin-left: 2px;
  animation: caret-blink 1.1s steps(1) infinite;
}
#captions-confirmed { color: var(--ink); }
#captions-tentative { color: var(--muted); font-style: italic; }
.captions-hint {
  font-family: var(--font-mono);
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.end-button.live-toggle.live-on {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-2));
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

/* Persona voice state — the live signal pill that says who has the
   floor: green breathing dot (listening), amber pulse (thinking),
   cyan three-bar waveform (speaking). app.js swaps the state class. */

.persona-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ok);
  animation: rise-in var(--dur-2) var(--ease-out);
}
.persona-state .ps-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
  animation: clara-ps-breathe 2.4s ease-in-out infinite;
}
.persona-state.listening {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, var(--border));
}
.persona-state.thinking {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
}
.persona-state.thinking .ps-dot {
  animation: clara-ps-pulse 0.9s ease-in-out infinite;
}
.persona-state.speaking {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
/* Speaking: the dot becomes the middle bar of a tiny equalizer; its
   pseudo-elements are the flanking bars, phase-shifted. */
.persona-state.speaking .ps-dot {
  width: 3px;
  height: 11px;
  margin: 0 5px;
  border-radius: 2px;
  animation: clara-ps-eq 0.9s ease-in-out infinite;
}
.persona-state.speaking .ps-dot::before,
.persona-state.speaking .ps-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -3.5px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  animation: clara-ps-eq 0.9s ease-in-out infinite;
}
.persona-state.speaking .ps-dot::before { left: -5px; animation-delay: -0.3s; }
.persona-state.speaking .ps-dot::after  { left: 5px;  animation-delay: -0.6s; }

@keyframes clara-ps-breathe {
  0%, 100% { box-shadow: 0 0 3px currentColor; opacity: 0.75; }
  50%      { box-shadow: 0 0 10px currentColor; opacity: 1; }
}
@keyframes clara-ps-pulse {
  0%, 100% { opacity: 0.35; box-shadow: 0 0 2px currentColor; }
  50%      { opacity: 1; box-shadow: 0 0 9px currentColor; }
}
@keyframes clara-ps-eq {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.35); }
}

/* Conversation-mode picker (start screen, Run) ----------------------- */

.voice-mode-picker {
  margin-bottom: 18px;
}
.voice-mode-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.voice-mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.voice-mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 11px 13px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 400;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease,
              box-shadow var(--dur-2) var(--ease-out);
}
.voice-mode-option:hover {
  filter: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.voice-mode-option.selected {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 70%),
    var(--card);
  box-shadow: var(--glow-accent);
}
.voice-mode-option:disabled {
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
  color: var(--faint);
  cursor: not-allowed;
  border-color: var(--border);
  box-shadow: none;
}
.voice-mode-option .vm-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
}
/* Selection dot in front of the mode label. */
.voice-mode-option .vm-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
  transition: background var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.voice-mode-option.selected .vm-label { color: var(--accent); }
.voice-mode-option.selected .vm-label::before {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.voice-mode-option .vm-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.voice-mode-option:disabled .vm-desc { color: var(--faint); }

/* Voice settings (gear + dropdown panel) ----------------------------- */

.voice-settings-wrap {
  position: relative;
  display: inline-flex;
}
.voice-settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 330px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent),
      transparent 40%),
    var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-align: left;
  animation: pop-in var(--dur-1) var(--ease-out);
}
.voice-settings-panel .vs-title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.vs-group {
  border: none;
  margin: 0 0 12px;
  padding: 0;
}
.vs-group legend {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0;
  margin-bottom: 6px;
}
.vs-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 5px 0;
  cursor: pointer;
  color: var(--muted);
}
.vs-option strong { color: var(--ink); }
.vs-option input {
  margin-top: 2px;
  accent-color: var(--accent);
}

/* ✓ Done — manual end-of-turn button in the captions bar (inherits the
   solid-accent primary button treatment). While the commit is in
   flight the button becomes a disabled spinner (.busy) — the press is
   acknowledged instantly, further presses are dead. */
.voice-done {
  flex: 0 0 auto;
  position: relative;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  align-self: center;
}
.voice-done.busy {
  color: transparent;
  pointer-events: none;
}
.voice-done.busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bg) 45%, transparent);
  border-top-color: var(--bg);
  animation: clara-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .voice-done.busy::after {
    animation: none;
    border-top-color: transparent;
  }
}

/* Active-mode pill in the conversation header */
.voice-mode-pill {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Speaking-speed slider (voice settings pane) ------------------------ */

.vs-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vs-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.vs-slider-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vs-slider-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--faint);
}

/* Builder persona-voice picker --------------------------------------- */

.builder-voice-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
.builder-voice-select {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 9px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raise);
  color: var(--ink);
}
.builder-voice-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#ended-info {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

#ended-info .download-link {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 16px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 88%, var(--ink)), var(--accent));
  color: var(--accent-ink);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
  transition: filter var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
#ended-info .download-link:hover {
  filter: brightness(1.06);
  box-shadow: var(--glow-accent);
}

/* ---- usage widget (top of right pane) ------------------------------- */

.usage-widget {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  animation: fade-in var(--dur-2) var(--ease-out);
}
.usage-widget .usage-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.usage-widget .usage-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--accent) 60%, var(--ink));
  font-variant-numeric: tabular-nums;
}

/* ---- right pane: assessment panels (instrument cluster) ------------- */

.conv-right {
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Grid track gives this column its height; min-height: 0 keeps it
     from blowing past the grid and disabling its own scroll. */
  min-height: 0;
}

.panel {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent),
      transparent 36%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Instrument top hairline. */
.panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Per-instrument status dot in the header. */
.panel-title::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 70%, transparent);
}
.issue-panel .panel-title::before {
  background: var(--warn);
  box-shadow: 0 0 7px color-mix(in srgb, var(--warn) 70%, transparent);
}
.proximity-panel .panel-title::before {
  background: var(--ok);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ok) 70%, transparent);
}
.backchannel-panel .panel-title::before {
  background: var(--accent-2);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.panel-status {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--error-ink);
}
.panel-empty {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}

/* Issue tracker */

.issue-bucket + .issue-bucket {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.bucket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.dot {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block;
}
.dot-runnable {
  background: var(--runnable);
  box-shadow: 0 0 7px color-mix(in srgb, var(--runnable) 70%, transparent);
}
.dot-incomplete {
  background: var(--incomplete);
  box-shadow: 0 0 7px color-mix(in srgb, var(--incomplete) 70%, transparent);
}

.issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.issue-list li {
  font-size: 13px;
  line-height: 1.4;
  padding-left: 10px;
  border-left: 2px solid var(--hairline);
  animation: fade-in var(--dur-2) var(--ease-out);
}
#issues-addressed li:not(.issue-empty) {
  border-left-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
#issues-open li:not(.issue-empty) {
  border-left-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.issue-list .issue-label {
  font-weight: 500;
  color: var(--ink);
}
.issue-list .issue-clarifier {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 1px;
}
.issue-empty {
  color: var(--faint);
  font-style: italic;
  font-size: 13px;
}

/* Sentiment chart */

.sentiment-chart {
  width: 100%;
  min-height: 160px;
}
.sentiment-chart svg {
  width: 100%;
  height: 200px;
  display: block;
  animation: fade-in var(--dur-2) var(--ease-out);
}
.sentiment-chart .axis text {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--faint);
}
.sentiment-chart .grid line {
  stroke: var(--hairline);
  stroke-width: 1;
}
.sentiment-chart .series-area {
  fill: var(--accent);
  fill-opacity: 0.08;
}
.sentiment-chart .series-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));
}
.sentiment-chart .series-point {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 1;
}
.sentiment-chart .x-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--muted);
  text-anchor: middle;
}
.sentiment-chart .x-sublabel {
  font-size: 8.5px;
  fill: var(--faint);
  text-anchor: middle;
  font-style: italic;
}

/* Solution proximity */

.proximity-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.proximity-score {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.proximity-summary {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}

.proximity-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.proximity-areas h4 {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.proximity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proximity-list li {
  position: relative;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  padding-left: 11px;
}
.proximity-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--faint);
}
#proximity-touched li:not(.proximity-empty)::before {
  background: var(--ok);
  box-shadow: 0 0 5px color-mix(in srgb, var(--ok) 70%, transparent);
}
#proximity-open li:not(.proximity-empty)::before {
  background: var(--warn);
  box-shadow: 0 0 5px color-mix(in srgb, var(--warn) 70%, transparent);
}
.proximity-list li.proximity-empty {
  padding-left: 0;
}
.proximity-list li.proximity-empty::before { content: none; }
.proximity-empty {
  color: var(--faint);
  font-style: italic;
}

/* Backchannel */

.backchannel-log {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
  margin-bottom: 10px;
}

.backchannel-entry {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent);
  animation: rise-in var(--dur-2) var(--ease-out);
}
.backchannel-entry .question {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
  padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--accent-2) 55%, transparent);
}
.backchannel-entry .answer {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.backchannel-entry.pending .answer {
  color: var(--muted);
  font-style: italic;
}
.backchannel-entry.error {
  background: var(--error-bg);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.backchannel-entry.error .answer {
  color: var(--error-ink);
}

.backchannel-form {
  display: flex;
  gap: 6px;
}
.backchannel-form input {
  flex: 1;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raise);
  color: var(--ink);
  outline: none;
  font-size: 13px;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.backchannel-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.backchannel-form button {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}

/* ---- builder ------------------------------------------------------- */

.blank-card {
  width: 100%;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-1) ease,
              box-shadow var(--dur-2) var(--ease-out);
}
.blank-card:hover {
  filter: none;
  border-color: var(--accent);
  box-shadow: var(--shadow), var(--glow-accent);
}
.blank-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blank-card h3::before {
  content: "+";
  color: var(--accent);
  font-weight: 700;
}
.blank-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

main#app:has(.builder-step.active) {
  align-items: stretch;
  max-width: none;
}
.builder-step {
  width: 100%;
  /* Wider canvas than the runtime view — the preview pane benefits
     significantly from extra horizontal room. */
  max-width: 1480px;
  height: calc(100vh - 64px);
  display: none;
}
.builder-step.active { display: block; }

.builder-grid {
  display: grid;
  /* Chat is a fixed narrow column on the left; the scenario preview
     gets all remaining horizontal space because that's where the
     actual document lives. */
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 1000px) {
  .builder-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.builder-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* min-height: 0 lets #builder-chat (the .transcript area) actually
     scroll instead of stretching the column past the grid. */
  min-height: 0;
}

/* Inside the narrow chat column, bubbles fill more of the available
   width so a short customer line doesn't look stranded on the left. */
.builder-left .bubble {
  max-width: 94%;
  font-size: 14px;
}
.builder-left .bubble.system {
  max-width: 100%;
}

.builder-right {
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  /* Independent scroll of the right pane: grid track sets height,
     min-height: 0 lets overflow-y: auto kick in. */
  min-height: 0;
}

.builder-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.builder-header h2 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.builder-header .subhead {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.builder-path {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--faint);
  word-break: break-all;
}
.builder-runnable {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.builder-runnable.complete { color: var(--runnable); }
.builder-runnable.incomplete { color: var(--incomplete); }

.builder-rename-btn {
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--accent);
}
.builder-rename-btn:hover {
  color: var(--ink);
  filter: none;
  box-shadow: none;
}

.builder-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.builder-section-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.builder-section-list .section-name { flex: 1; color: var(--ink); }
.builder-section-list .section-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.builder-section-list .section-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
}
.builder-section-list .section-status.complete { color: var(--runnable); }
.builder-section-list .section-status.incomplete { color: var(--incomplete); }

.builder-preview-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.builder-preview {
  width: 100%;
  flex: 1;
  min-height: 520px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raise);
  color: var(--ink);
  resize: vertical;
  outline: none;
  /* Wrap long prose lines instead of horizontal scroll; soft tab stops
     keep nested lists readable. */
  white-space: pre-wrap;
  tab-size: 2;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.builder-preview:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.builder-preview[readonly] {
  background: var(--surface-1);
  color: var(--muted);
  cursor: progress;
}
.lock-pill {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--badge-bg);
  color: var(--badge-ink);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}

.saved-pill {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--runnable);
  color: var(--ok-ink);
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.saved-pill.fading { opacity: 0; }

/* Spinner + builder progress line ---------------------------------- */

@keyframes clara-spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: clara-spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}

/* Small inline spinner for the assessment-panel titles. */
.panel-spinner {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
  margin-left: 8px;
  margin-right: 0;
  vertical-align: -1px;
}

/* Customer-bubble "thinking" row: a smaller bubble containing just
   a spinner + label, replaced inline by the streaming bubble when
   the first delta arrives. */
.bubble.thinking-bubble {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bubble.thinking-bubble .spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
  margin: 0;
  vertical-align: middle;
}

.builder-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 8px 4px 0;
  font-size: 13px;
  color: var(--muted);
}
.builder-progress .progress-label {
  font-style: italic;
}

/* My sessions (step 2b) — per-user history lists. */
.mode-footer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.my-sessions-card {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.my-sessions-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.my-sessions-card h3 + .my-list { margin-bottom: 18px; }
.my-list { display: flex; flex-direction: column; gap: 8px; }
.my-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.my-row-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.my-row-meta strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-row-when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}
.my-download {
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
}
.my-download:hover { text-decoration: underline; }

/* Hosted mode: Cloudflare-verified identity replaces the name field. */
.signed-in-as {
  margin: 0 0 4px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Admin key field on the start screen — visually subordinate to the
   name input; the optional tag keeps normal users from stalling on it. */
.admin-key-label {
  margin-top: 0.85rem;
}
.admin-key-label .optional-tag {
  color: var(--faint);
  font-weight: normal;
  letter-spacing: normal;
  font-size: 0.85em;
}

/* Section pill when the file doesn't parse — nothing is trustworthy,
   so every section shows error state rather than stale COMPLETE. */
.builder-section-list .section-status.error {
  color: var(--danger);
  font-weight: 600;
}

/* Inline field error under the admin key input on the start screen. */
.field-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
}

/* Non-runnable rows in Run mode: visibly inert, not mysteriously
   unclickable — cursor + dimming + an inline hint say why. */
.scenario-row.unrunnable { cursor: not-allowed; opacity: 0.65; }
.scenario-row.unrunnable .unrunnable-hint { font-style: italic; }

/* ---- small screens --------------------------------------------------- */

@media (max-width: 560px) {
  .mode-grid { grid-template-columns: 1fr; }
  header h1 { font-size: 34px; }
}

/* ---- accessibility: reduced motion ----------------------------------- */

/* Kill every decorative animation and transition in one sweep — the
   breathing/waveform persona states, caption caret, pulsing dots,
   entry rise-ins and hover lifts all collapse to their resting frame.
   State remains fully legible through color + text alone. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Rendered markdown inside backchannel answers. */
.backchannel-entry .answer p { margin: 0.35rem 0; }
.backchannel-entry .answer p.md-heading {
  font-weight: 700;
  margin-top: 0.7rem;
  color: color-mix(in srgb, var(--accent-2) 40%, var(--ink));
}
.backchannel-entry .answer ul,
.backchannel-entry .answer ol { margin: 0.3rem 0 0.4rem; padding-left: 1.25rem; }
.backchannel-entry .answer li { margin: 0.15rem 0; }
.backchannel-entry .answer pre {
  overflow-x: auto;
  background: color-mix(in srgb, var(--shadow-color) 55%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  margin: 0.4rem 0;
  font-family: var(--font-mono);
}
.backchannel-entry .answer code { font-size: 0.85em; }

/* ===== Sprint C: chat & voice settings ===== */

/* Issue 6: the backchannel box is a textarea now (Enter sends,
   Shift+Enter breaks the line). Mirrors the old input treatment; the
   max-height caps the auto-grow at roughly five rows. */
.backchannel-form {
  align-items: flex-end;
}
.backchannel-form textarea {
  flex: 1;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-raise);
  color: var(--ink);
  outline: none;
  resize: none;
  min-height: 36px;
  max-height: 118px;
  overflow-y: auto;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.backchannel-form textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Issue 7: persona-voice picker in the ⚙ settings panel (same select
   treatment as the builder's picker, sized for the dropdown). */
.vs-voice-select {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 9px;
  margin: 2px 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raise);
  color: var(--ink);
}
.vs-voice-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Issue 8 + QA finding (2026-07-09): backchannel as a floating helper.
   The pane lives in a fixed slide-in drawer behind the FAB; ids and the
   app.js visibility contract are unchanged. The FAB itself is a
   chat-with-sparkle orb with a "Clara Assistant" caption underneath —
   it reads as the AI helper, not a generic "?" help button. */
.backchannel-fab {
  position: fixed;
  right: 22px;
  bottom: 16px;
  z-index: 60;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  box-shadow: none;
  color: color-mix(in srgb, var(--accent-2) 65%, var(--ink));
}
.backchannel-fab .fab-orb {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent),
      transparent 40%),
    var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.backchannel-fab .fab-orb svg {
  width: 26px;
  height: 26px;
}
.backchannel-fab .fab-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.backchannel-fab:hover {
  filter: none;
}
.backchannel-fab:hover .fab-orb {
  border-color: color-mix(in srgb, var(--accent-2) 55%, var(--border-strong));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.backchannel-fab:hover .fab-label {
  color: var(--ink);
}
.backchannel-fab-wrap.open .backchannel-fab {
  color: var(--accent-2);
}
.backchannel-fab-wrap.open .backchannel-fab .fab-orb {
  border-color: color-mix(in srgb, var(--accent-2) 65%, var(--border-strong));
}
.backchannel-fab-wrap.open .backchannel-fab .fab-label {
  color: var(--accent-2);
}
/* Unread cue: a reply arrived while the drawer was closed — pinned to
   the orb's top-right edge (the orb is centered in the button). */
.backchannel-unread {
  position: absolute;
  top: 2px;
  left: calc(50% + 15px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 80%, transparent);
}

.backchannel-drawer {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 59;
  width: min(400px, calc(100vw - 40px));
  transform: translateX(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out);
}
.backchannel-fab-wrap.open .backchannel-drawer {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
/* Inside the drawer the log may run taller than it could in the old
   right rail; the viewport-relative cap keeps the drawer clear of the
   conversation input row. */
.backchannel-drawer .backchannel-log {
  max-height: min(46vh, 440px);
}
/* Below the right-rail breakpoint the conversation input spans the
   full width — lift the helper clear of the Send button. */
@media (max-width: 920px) {
  .backchannel-fab { bottom: 112px; right: 14px; }
  .backchannel-drawer { bottom: 196px; right: 14px; }
}

/* ===== Sprint D: paced reveal ===== */
/* While a customer bubble is being revealed at voice pace it carries a
   trailing console caret — the same idiom as the live-captions caret,
   marking where the "transcription" of the persona is landing. The
   global reduced-motion sweep above already freezes the blink. */
.bubble.customer.revealing::after {
  content: "▍";
  color: var(--accent);
  margin-left: 2px;
  animation: caret-blink 1.1s steps(1) infinite;
}

/* ===== Sprint B: loading & indicator ===== */

/* Session-loading overlay -------------------------------------------- */
/* Full-screen wait state for session creation: POST /api/sessions runs
   a persona-extraction LLM call and can take several seconds, and the
   picker's .busy dimming alone reads as a freeze. Same glass-panel
   language as .card; the ring reuses the accent spinner idiom at
   console scale. Every animation here collapses under the global
   prefers-reduced-motion sweep above — the title + detail text keep
   the state fully legible on their own. */

.session-loading {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: progress;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: fade-in var(--dur-2) var(--ease-out);
}

.session-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  padding: 30px 40px 26px;
  text-align: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent),
      transparent 42%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow), var(--glow-accent);
  animation: pop-in var(--dur-2) var(--ease-out);
}

.session-loading-ring {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  color: var(--accent);
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  animation: clara-spin 0.9s linear infinite;
}
/* Center beacon inside the ring — while the rim spins, it breathes. */
.session-loading-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: clara-ps-breathe 2.4s ease-in-out infinite;
}

.session-loading-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.session-loading-detail {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Persona-state chip below the transcript ----------------------------- */
/* QA finding (2026-07-09): the chip lives in its own centered row
   directly BELOW #conv-transcript — bottom of the conversation column,
   above the captions bar and input — so it reads at a glance without
   ever covering the newest bubbles. Scaled up from the old header
   pill. The wrapper owns all positioning because app.js rewrites
   #persona-state's className wholesale on every state change
   (JS contract: ids + state classes unchanged). */

.persona-state-anchor {
  display: flex;
  justify-content: center;
  z-index: 5;
  /* .conv-left is a 14px-gap flex column; when the chip is hidden the
     anchor is zero-height but still costs one gap — cancel it so the
     layout is unchanged. Visible, the chip's own top margin re-opens
     a slim seam under the transcript. */
  margin-top: -14px;
  pointer-events: none;
}

.persona-state-anchor .persona-state {
  margin: 8px 0 0;
  pointer-events: none;
  /* Console scale — the header pill was 10px type on a hairline ring. */
  gap: 12px;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.16em;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent),
      transparent 42%),
    color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

/* State-tinted halo so the chip reads from across the room — SPEAKING
   especially gets the full accent glow treatment. */
.persona-state-anchor .persona-state.listening {
  box-shadow: var(--shadow),
    0 0 14px color-mix(in srgb, var(--ok) 22%, transparent);
}
.persona-state-anchor .persona-state.thinking {
  box-shadow: var(--shadow),
    0 0 14px color-mix(in srgb, var(--warn) 26%, transparent);
}
.persona-state-anchor .persona-state.speaking {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Scale the dot + three-bar waveform with the chip; the animations are
   the existing clara-ps-* keyframes, untouched. */
.persona-state-anchor .persona-state .ps-dot {
  width: 12px;
  height: 12px;
}
.persona-state-anchor .persona-state.speaking .ps-dot {
  width: 5px;
  height: 18px;
  margin: 0 9px;
}
.persona-state-anchor .persona-state.speaking .ps-dot::before,
.persona-state-anchor .persona-state.speaking .ps-dot::after {
  width: 5px;
  height: 11px;
  margin-top: -5.5px;
}
.persona-state-anchor .persona-state.speaking .ps-dot::before { left: -9px; }
.persona-state-anchor .persona-state.speaking .ps-dot::after  { left: 9px; }

/* ===== Pre-call briefing (step 3b + mid-call overlay) ===== */
/* The read happens BEFORE the call: company overview + the rep's own
   discovery notes, rendered instantly from the scenario file while
   session creation runs in the background. Token-driven throughout so
   it holds under both themes. */

#step-briefing { max-width: 720px; }

.briefing-card {
  position: relative;
  padding: 26px 30px 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent),
      transparent 42%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.briefing-kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.briefing-card h2 {
  margin: 0 0 18px;
  font-size: 20px;
  text-wrap: balance;
}

.briefing-section {
  margin-bottom: 20px;
}
.briefing-section h3 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.briefing-framing {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
}

.briefing-md {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.briefing-md p { margin: 0 0 10px; }
.briefing-md p:last-child { margin-bottom: 0; }
.briefing-md ul, .briefing-md ol { margin: 0 0 10px; padding-left: 22px; }
.briefing-md li { margin-bottom: 4px; }
.briefing-md h4, .briefing-md h5, .briefing-md h6 {
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--ink);
}
.briefing-md code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border-radius: 4px;
  padding: 1px 4px;
}

.briefing-how {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.briefing-how li { margin-bottom: 6px; }
.briefing-how strong { color: var(--ink); }

.briefing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}

.briefing-start {
  position: relative;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
}
.briefing-start.busy {
  opacity: 0.75;
  cursor: progress;
}

/* Mid-call overlay: same card, floated over the conversation. */
.briefing-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in var(--dur-2) var(--ease-out);
}
.briefing-card-modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.briefing-close {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 2px 9px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--muted);
  background: transparent;
  border: none;
  box-shadow: none;
}
.briefing-close:hover {
  color: var(--ink);
  filter: none;
  box-shadow: none;
}

/* ===== Sprint A: theming ===== */
/* Light mode. Same mission-control language — one restrained accent
 * reserved for signal, glassy layered panels, mono readouts — rendered
 * on a cool daylight field. Every token below shadows its :root twin;
 * derived roles (--card, --hairline, --error-bg, --badge-bg, the body
 * field + grid, ::selection, scrollbars) re-resolve automatically
 * because they are color-mix() recipes over these same variables.
 * Signal hues keep their identity but sink to contrast-safe depths
 * (~4.5:1+ against the raised surfaces for text roles). Toggled by
 * <html data-theme="light">: set pre-paint by the inline script in
 * index.html, from the ⚙ Appearance radios in app.js afterwards;
 * persisted under localStorage "clara_theme". */

:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces, deep → raised — Apple-light neutrals (soft gray field,
     white cards; 2026-08-13 rebrand) */
  --bg: #f5f5f7;
  --bg-raise: #ffffff;           /* input wells: crisp white on soft cards */
  --surface-1: #fafafc;
  --surface-2: #fdfdfe;
  --surface-3: #ffffff;

  /* Ink */
  --ink: #1d1d1f;
  --muted: #515154;
  --faint: #86868b;

  /* Signal — monochrome: primary actions are near-black pills on the
     light field; live indicators read as ink, never a vendor hue. */
  --accent: #1d1d1f;             /* graphite — live data + primary actions */
  --accent-ink: #f5f5f7;         /* text on solid accent */
  --accent-2: #6e6e73;           /* gray — badges, secondary signal */
  --ok: #1d8a3e;
  --ok-ink: #f0fdf4;
  --warn: #9a6700;
  --danger: #d70015;

  /* Roles mapped onto the palette */
  --border: #d2d2d7;
  --border-strong: #aeaeb2;
  --error-ink: #a3131f;
  --badge-ink: #515154;

  /* Depth + glow: daylight shadows are shallow and neutral, and any
     bloom is a whisper — a heavy glow on a light field reads as
     grime, not signal. */
  --shadow-color: #3a3a3c;
  --shadow: 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent) inset,
            0 2px 6px color-mix(in srgb, var(--shadow-color) 14%, transparent),
            0 14px 36px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
                 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Tiny status dots lose their halos in daylight (a bloom that wide
   reads as a smudge on white); the solid signal color carries alone. */
:root[data-theme="light"] .mode-card h3::before,
:root[data-theme="light"] .voice-mode-option.selected .vm-label::before,
:root[data-theme="light"] .panel-title::before,
:root[data-theme="light"] .dot-runnable,
:root[data-theme="light"] .dot-incomplete,
:root[data-theme="light"] #proximity-touched li:not(.proximity-empty)::before,
:root[data-theme="light"] #proximity-open li:not(.proximity-empty)::before {
  box-shadow: none;
}

/* Load-bearing glows soften instead of vanishing: the recording dot
   keeps a faint bloom (visible under prefers-reduced-motion, where its
   pulse ring is disabled), the instrument readouts drop to hints. */
:root[data-theme="light"] .voice-captions .live-dot {
  box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 40%, transparent);
}
:root[data-theme="light"] .sentiment-chart .series-line {
  filter: none;
}
:root[data-theme="light"] .proximity-score {
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The one dark-assuming recipe in the file: backchannel code blocks
   tint their background from --shadow-color, which stays near-black at
   55% and would swallow dark ink. Thin it to a light neutral wash. */
:root[data-theme="light"] .backchannel-entry .answer pre {
  background: color-mix(in srgb, var(--shadow-color) 8%, transparent);
}

/* One-tap mic activation (autoplay policy: a suspended AudioContext
   renders no frames — the button supplies the user gesture). */
.mic-activate {
  align-self: center;
  margin: 0 0 6px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  animation: clara-ps-breathe 2.4s ease-in-out infinite;
}

/* ===== Phase 3: tutorial coach ===== */
/* Three-up mode grid (Tutorial / Eval / Builder). */
.mode-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .mode-grid-3 { grid-template-columns: 1fr; } }

/* The coach card: same panel language as the assessments, with the
   accent reserved for the section labels — it should read as a quiet
   mentor, not another alarm surface. */
.coach-panel { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.coach-block { margin-bottom: 12px; }
.coach-block:last-child { margin-bottom: 0; }
.coach-block h4 {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.coach-block p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.coach-block ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }
.coach-block li { margin-bottom: 3px; }

/* ---- internal-only sign-in gate (2026-07-24) --------------------------- */
.otp-domains-note {
  font-size: 12.5px;
  color: var(--faint);
  margin: 2px 0 8px;
  line-height: 1.45;
}
.otp-domains-note strong { color: var(--ink); }

/* Access-denied overlay: deliberately loud, theme-independent — a
   warning screen should look like a warning screen. */
.access-denied-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 4, 6, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.access-denied-box {
  max-width: 560px;
  text-align: center;
  background: #140a0d;
  border: 1px solid #7a2a35;
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 0 0 1px rgba(224, 90, 90, 0.15), 0 24px 80px rgba(0, 0, 0, 0.6);
}
.access-denied-mark { font-size: 52px; margin-bottom: 12px; }
.access-denied-box h1 {
  font-size: 30px;
  letter-spacing: 0.02em;
  color: #f2848d;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.access-denied-note {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e0b455;
  margin: 0 0 18px;
}
.access-denied-body {
  font-size: 15px;
  line-height: 1.6;
  color: #e8dfe1;
  margin: 0 0 24px;
}
.access-denied-body strong { color: #fff; }
#access-denied-back {
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #7a2a35;
  background: transparent;
  color: #e8dfe1;
  cursor: pointer;
}
#access-denied-back:hover { border-color: #f2848d; color: #fff; }


/* ---- brand lockup (2026-08-13: Veeam mark + Sales Roleplay Simulator) -- */
.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 14px;
}
.veeam-mark {
  height: 20px;
  width: auto;
  display: block;
}
.brand-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  /* optical: tracking adds a trailing gap; nudge to re-center */
  margin-right: -0.34em;
  color: var(--ink);
}