:root {
  color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5;
  --success-text: #14532d; --success-bg: #dcfce7; --success-border: #15803d;
  --failure-text: #7f1d1d; --failure-bg: #fee2e2; --failure-border: #b91c1c;
  --warning-text: #713f12; --warning-bg: #fef9c3; --warning-border: #a16207;
  --info-text: #5b21b6; --info-bg: #f3e8ff; --info-border: #7e22ce;
}
@media (prefers-color-scheme: dark) {
  :root {
    --success-text: #bbf7d0; --success-bg: #11351f; --success-border: #4ade80;
    --failure-text: #fecaca; --failure-bg: #411a1a; --failure-border: #f87171;
    --warning-text: #fef08a; --warning-bg: #3b2f0b; --warning-border: #facc15;
    --info-text: #e9d5ff; --info-bg: #2e1747; --info-border: #c084fc;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: Canvas; color: CanvasText; }
main { max-width: 48rem; margin: 0 auto; padding: 2rem 1.25rem; }
h1 { margin: .25rem 0; font-size: 2rem; }
h2 { font-size: 1.15rem; margin-top: 0; }
.eyebrow, .hint, footer { font-size: .9rem; }
.eyebrow { letter-spacing: .08em; text-transform: uppercase; }
section { border: 1px solid GrayText; border-radius: .5rem; padding: 1.25rem; margin: 1.25rem 0; }
.status {
  --status-text: var(--info-text); --status-bg: var(--info-bg); --status-border: var(--info-border);
  padding: 1rem; border-left: .3rem solid var(--status-border);
  color: var(--status-text); background: var(--status-bg); overflow-wrap: anywhere;
}
.status[data-state="success"] { --status-text: var(--success-text); --status-bg: var(--success-bg); --status-border: var(--success-border); }
.status[data-state="failure"] { --status-text: var(--failure-text); --status-bg: var(--failure-bg); --status-border: var(--failure-border); }
.status[data-state="warning"] { --status-text: var(--warning-text); --status-bg: var(--warning-bg); --status-border: var(--warning-border); }
@media (forced-colors: active) { .status { color: CanvasText; background: Canvas; border-color: CanvasText; } }
label { display: block; margin-bottom: .35rem; }
input, select, textarea { width: 100%; max-width: 24rem; padding: .7rem; font: inherit; border: 1px solid GrayText; border-radius: .25rem; }
textarea { max-width: none; resize: vertical; }
audio { width: 100%; }
input[type="checkbox"] { width: auto; padding: 0; margin: .75rem .35rem .75rem 0; }
.transcript { max-height: 28rem; overflow: auto; text-align: left; }
.transcript article { padding: .75rem 0; border-bottom: 1px solid GrayText; }
.transcript p, .live-response { white-space: pre-wrap; overflow-wrap: anywhere; }
details { margin-top: 1rem; }
summary { cursor: pointer; }
form label:not(:first-child) { margin-top: .75rem; }
.pending-list { padding-left: 1.25rem; }
.pending-list li { padding-bottom: .75rem; }
.pending-list p, #approval-selection, #conversation-selection { overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
button { padding: .7rem 1rem; font: inherit; cursor: pointer; border: 1px solid GrayText; border-radius: .3rem; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: .2rem solid Highlight; outline-offset: .2rem; }
footer { margin-top: 2rem; }
@media (max-width: 30rem) { main { padding: 1rem; } .actions button { width: 100%; } }