/* Sandbox Copilot rehearsal: the ink "live" panel. Paper text on ink, a
   consent switch that turns volt when on, a decorative waveform that moves
   only while the fictional stream runs, and the coaching cue in volt. */
.synthetic-copilot {
  --sc-paper: var(--ink-panel-text, #F1EEE7);
  --sc-muted: var(--ink-panel-muted, rgba(241, 238, 231, .66));
  --sc-faint: rgba(241, 238, 231, .1);
  --sc-line: rgba(241, 238, 231, .12);
  --sc-volt: var(--volt, #CFF465);
  --sc-volt-ink: var(--volt-ink, #1F2A00);
  --sc-coral: var(--coral, #FF6B5E);
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--sc-line);
  border-radius: var(--r-card, 16px);
  background: var(--ink-panel, #0B0D12);
  color: var(--sc-paper);
  box-shadow: var(--shadow-ink, 0 30px 60px -20px rgba(0, 0, 0, .45));
  overflow: hidden;
}

.synthetic-copilot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.synthetic-copilot-head > div { display: grid; gap: 3px; }
.synthetic-copilot-head .kicker { color: var(--ink-panel-muted, rgba(241, 238, 231, .66)); }
.synthetic-copilot-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 650; color: var(--sc-paper); }
.synthetic-copilot-head p {
  max-width: 72ch;
  margin: 0;
  color: var(--sc-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.synthetic-copilot-head .badge {
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn-bg) 16%, transparent);
  color: var(--sc-paper);
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

/* Decorative waveform: bar heights are fixed in markup; nothing here is audio. */
.synthetic-copilot-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 56px;
  padding: 0 2px;
}
.synthetic-copilot-wave span {
  flex: 1 1 0;
  min-width: 2px;
  height: var(--h, 40%);
  border-radius: 999px;
  background: var(--sc-volt);
  opacity: .28;
  transform-origin: center;
  transition: opacity var(--dur-3, 420ms) var(--ease-out, ease);
}
.synthetic-copilot[data-live="true"] .synthetic-copilot-wave span {
  opacity: .95;
  animation: synthetic-copilot-wave 1.2s var(--ease-in-out, ease-in-out) infinite alternate;
  animation-delay: calc(var(--i, 0) * -130ms);
}
@keyframes synthetic-copilot-wave {
  from { transform: scaleY(.45); }
  to { transform: scaleY(1); }
}

.synthetic-copilot-consent {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 6%, transparent);
}

.synthetic-copilot-booking-consent {
  align-items: flex-start;
  background: color-mix(in srgb, var(--ok-bg) 12%, transparent);
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  padding: 12px var(--sp-4);
}
.synthetic-copilot-booking-consent[hidden] { display: none; }
.synthetic-copilot-booking-consent .badge {
  border-radius: 999px;
  background: var(--sc-volt);
  color: var(--sc-volt-ink);
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.synthetic-copilot-booking-consent > span:last-child {
  display: grid;
  gap: 3px;
}

.synthetic-copilot-booking-consent small {
  color: var(--sc-muted);
  line-height: 1.45;
}

.synthetic-copilot-consent label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: flex-start;
  min-height: 44px;
  padding: var(--sp-1) 0;
  cursor: pointer;
}

/* The consent switch is the shared .toggle (volt when on), set on ink. */
.synthetic-copilot-consent .toggle { margin-top: 1px; min-height: 22px; }
.synthetic-copilot-consent .toggle-track { background: rgba(241, 238, 231, .18); box-shadow: inset 0 0 0 1px rgba(241, 238, 231, .22); }
.synthetic-copilot-consent .toggle-track::after { background: var(--sc-paper); }
.synthetic-copilot-consent .toggle input:checked + .toggle-track { background: var(--sc-volt); box-shadow: none; }
.synthetic-copilot-consent .toggle input:checked + .toggle-track::after { background: var(--sc-volt-ink); }
.synthetic-copilot-consent .toggle input:focus-visible + .toggle-track { outline: 2px solid var(--sc-volt); outline-offset: 3px; }
.synthetic-copilot-consent label > span { display: grid; gap: 2px; }
.synthetic-copilot-consent strong { font-size: var(--fs-sm); color: var(--sc-paper); }
.synthetic-copilot-consent small {
  color: var(--sc-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.synthetic-copilot-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.synthetic-copilot-actions .btn { min-height: 38px; border-radius: 999px; }
.synthetic-copilot-actions .btn--volt,
.synthetic-copilot-actions .btn.btn-primary { background: var(--sc-volt); color: var(--sc-volt-ink); border-color: transparent; }
.synthetic-copilot-actions .btn--danger { background: transparent; color: var(--sc-paper); border: 1px solid color-mix(in srgb, var(--sc-coral) 70%, transparent); }
.synthetic-copilot-actions .btn--danger:not(:disabled):hover { background: color-mix(in srgb, var(--sc-coral) 22%, transparent); }
.synthetic-copilot-actions .btn:disabled { opacity: .45; }
.synthetic-copilot .btn:focus-visible,
.synthetic-copilot summary:focus-visible { outline: 2px solid var(--sc-volt); outline-offset: 2px; }

.synthetic-copilot-status {
  flex: 1 1 220px;
  color: var(--sc-muted);
  font-size: var(--fs-xs);
}

.synthetic-copilot-status.is-error { color: var(--sc-coral); }

.synthetic-copilot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-4);
}

.synthetic-copilot-grid > section {
  min-width: 0;
  padding: 0;
}

.synthetic-copilot-grid > section + section {
  padding: 0 0 0 var(--sp-4);
  border-left: 1px solid var(--sc-line);
}

.synthetic-copilot-grid h4 {
  margin: 0 0 var(--sp-3);
  color: var(--sc-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.synthetic-copilot-empty {
  margin: 0;
  color: var(--sc-muted);
  font-size: var(--fs-xs);
}

.synthetic-copilot-transcript {
  display: grid;
  gap: var(--sp-2);
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.synthetic-copilot-transcript li {
  display: grid;
  gap: 2px;
  justify-self: start;
  max-width: 88%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 12px 12px 12px 4px;
  background: color-mix(in srgb, var(--surface-2) 10%, transparent);
}

.synthetic-copilot-transcript li.is-consultant {
  justify-self: end;
  border-radius: 12px 12px 4px 12px;
  background: var(--sc-volt);
  color: var(--sc-volt-ink);
}
.synthetic-copilot-transcript span {
  color: var(--sc-muted);
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.synthetic-copilot-transcript li.is-consultant span { color: var(--sc-volt-ink); opacity: .75; }

.synthetic-copilot-transcript p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* The coaching cue is the volt card, as the reel's "Coaching tip". */
.synthetic-copilot-cue {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 0;
  border-radius: 14px;
  background: var(--sc-volt);
  color: var(--sc-volt-ink);
}

.synthetic-copilot-cue.is-guardrail {
  border: 1px solid color-mix(in srgb, var(--sc-coral) 70%, transparent);
  background: color-mix(in srgb, var(--warn-bg) 14%, transparent);
  color: var(--sc-paper);
}

.synthetic-copilot-cue-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.synthetic-copilot-cue-head .badge {
  border-radius: 999px;
  background: var(--sc-volt-ink);
  color: var(--sc-volt);
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.synthetic-copilot-cue.is-guardrail .synthetic-copilot-cue-head .badge { background: var(--sc-coral); color: #1A0503; }

.synthetic-copilot-cue-head strong { font-size: var(--fs-sm); }
.synthetic-copilot-cue p { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-body); }
.synthetic-copilot-cue p > span {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  opacity: .72;
}

.synthetic-copilot-avoid { opacity: .85; }
.synthetic-copilot-audit {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sc-line);
}

.synthetic-copilot-audit summary {
  cursor: pointer;
  min-height: 24px;
  color: var(--sc-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.synthetic-copilot-audit summary:hover { color: var(--sc-paper); background: color-mix(in srgb, var(--accent-bg) 6%, transparent); }

.synthetic-copilot-audit > p {
  margin: var(--sp-2) 0;
  color: var(--sc-muted);
  font-size: var(--fs-2xs);
}

.synthetic-copilot-audit ol {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.synthetic-copilot-audit li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-2);
  color: var(--sc-muted);
  font-size: var(--fs-2xs);
}

.synthetic-copilot-audit time { color: var(--sc-muted); font-variant-numeric: tabular-nums; }
.synthetic-copilot-audit li > span { display: grid; }
.synthetic-copilot-audit strong { color: var(--sc-paper); font-weight: 500; }
.synthetic-copilot-audit small { color: var(--sc-muted); }

@media (prefers-reduced-motion: reduce) {
  .synthetic-copilot[data-live="true"] .synthetic-copilot-wave span { animation: none; }
  .synthetic-copilot-consent .toggle-track,
  .synthetic-copilot-consent .toggle-track::after { transition: none; }
}

@media (max-width: 760px) {
  .synthetic-copilot { padding: var(--sp-4); }
  .synthetic-copilot-head,
  .synthetic-copilot-actions { align-items: stretch; flex-direction: column; }
  .synthetic-copilot-head .badge { align-self: flex-start; }
  .synthetic-copilot-actions .btn { width: 100%; min-height: 44px; }
  .synthetic-copilot-status { flex-basis: auto; }
  .synthetic-copilot-wave { height: 40px; gap: 2px; }
  .synthetic-copilot-grid { grid-template-columns: minmax(0, 1fr); }
  .synthetic-copilot-grid > section,
  .synthetic-copilot-grid > section + section { padding: 0; border-left: 0; }
  .synthetic-copilot-grid > section + section {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--sc-line);
  }
}