/* ───────────────────────────────────────────────────────────
   Pre-Visit Assistant — RS Telogorejo demo prototype
   Aesthetic: clinical & calm. Warm off-white, deep ink, deep
   teal primary, coral only for emergency. Editorial annotations
   in mono make the agent's reasoning visible.
   ─────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg:           oklch(98.2% 0.005 85);
  --bg-2:         oklch(96.5% 0.006 85);
  --bg-3:         oklch(94% 0.007 85);
  --paper:        #ffffff;
  --line:         oklch(88% 0.008 85);
  --line-2:       oklch(92% 0.006 85);

  /* Ink */
  --ink:          oklch(22% 0.015 250);
  --ink-2:        oklch(38% 0.012 250);
  --ink-3:        oklch(55% 0.01 250);
  --ink-4:        oklch(70% 0.008 250);

  /* Primary — deep teal */
  --teal:         oklch(42% 0.07 200);
  --teal-2:       oklch(52% 0.08 200);
  --teal-soft:    oklch(94% 0.025 200);
  --teal-ink:     oklch(28% 0.05 200);

  /* Agent / patient bubble */
  --bubble-agent: #ffffff;
  --bubble-patient: oklch(52% 0.075 200);

  /* Accents (semantic only) */
  --coral:        oklch(62% 0.18 25);
  --coral-soft:   oklch(94% 0.04 25);
  --amber:        oklch(72% 0.14 75);
  --amber-soft:   oklch(95% 0.04 75);
  --moss:         oklch(55% 0.09 145);
  --moss-soft:    oklch(94% 0.03 145);

  /* Type */
  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Newsreader', Georgia, serif;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }

/* ─── App shell ─── */

.app {
  min-height: 100vh;
  min-width: 1400px;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--teal);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 6px 20px -10px rgba(0,0,0,0.1);
}
.step-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease;
}
.step-btn:hover { background: var(--bg-2); color: var(--ink); }
.step-btn:disabled { opacity: 0.3; cursor: default; }
.step-counter {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  min-width: 120px;
  text-align: center;
}
.step-counter b { color: var(--ink); font-weight: 600; }

.scenario-toggle {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.scenario-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.scenario-toggle button.active.routine {
  background: var(--teal-soft);
  color: var(--teal-ink);
}
.scenario-toggle button.active.emergency {
  background: var(--coral-soft);
  color: var(--coral);
}
.scenario-toggle .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* ─── Stage ─── */

.stage {
  display: grid;
  grid-template-columns: minmax(440px, 480px) 1fr;
  gap: 0;
  min-height: calc(100vh - 67px);
}

.phone-pane {
  border-right: 1px solid var(--line);
  background:
    radial-gradient(1200px 600px at 50% -10%, oklch(94% 0.02 200), transparent 60%),
    var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 24px 40px;
  gap: 20px;
  position: relative;
}

.phone-meta {
  width: 100%;
  max-width: 360px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.phone-meta .label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.phone-meta .channel {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.phone-meta .channel .live {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--moss);
  box-shadow: 0 0 0 3px oklch(55% 0.09 145 / 0.18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Chat UI inside phone ─── */

.chat-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-2);
}

.chat-header {
  padding: 56px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
  position: relative;
}
.chat-header .avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--teal);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  position: relative;
}
.chat-header .avatar::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 11px; height: 11px;
  border-radius: 999px;
  background: var(--moss);
  border: 2px solid #fff;
}
.chat-header .name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.1;
}
.chat-header .status {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}
.chat-header .back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--teal);
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}

.msg-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  animation: fadeUp .35s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg-group.agent { align-items: flex-start; }
.msg-group.patient { align-items: flex-end; }
.msg-group.system { align-items: center; }

.bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.38;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative;
  letter-spacing: -0.005em;
}
.agent .bubble {
  background: var(--bubble-agent);
  color: var(--ink);
  border: 0.5px solid rgba(0,0,0,0.05);
  box-shadow: 0 1px 1px rgba(0,0,0,0.03);
  border-bottom-left-radius: 6px;
}
.agent .bubble + .bubble { border-bottom-left-radius: 6px; border-top-left-radius: 6px; }
.agent .bubble:last-child { border-bottom-left-radius: 18px; }
.agent .msg-group .bubble:first-child:not(:last-child) { border-bottom-left-radius: 6px; }

.patient .bubble {
  background: var(--bubble-patient);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.bubble .time {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
  display: block;
}
.patient .bubble .time { color: rgba(255,255,255,0.7); }

.msg-meta {
  font-size: 10px;
  color: var(--ink-3);
  margin: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.msg-meta .check { color: var(--teal-2); }

.system-msg {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 4px 10px;
  background: rgba(0,0,0,0.03);
  border-radius: 999px;
  margin: 4px 0;
}

/* Quick reply chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  max-width: 92%;
}
.chip {
  background: var(--paper);
  border: 1px solid var(--teal);
  color: var(--teal-ink);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { background: var(--teal-soft); }
.chip.selected { background: var(--teal); color: #fff; }

/* Doctor card inside chat */
.doc-card {
  background: var(--paper);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px;
  margin: 4px 0;
  width: 88%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--bg-3);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-2);
  flex: none;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.doc-spec { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.doc-price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
}
.doc-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.slot {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 11px;
  background: var(--bg-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  transition: all .15s;
}
.slot:hover { border-color: var(--teal); background: var(--teal-soft); }
.slot.selected { background: var(--teal); color: #fff; border-color: var(--teal); }
.slot.selected .slot-day { color: rgba(255,255,255,0.7); }
.slot-day { font-family: var(--mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.slot-time { font-weight: 600; font-size: 12px; }

/* Confirmation card */
.confirm-card {
  background: var(--paper);
  border: 0.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 4px 0;
  width: 88%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirm-card .ribbon {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 6px;
}
.confirm-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  gap: 10px;
}
.confirm-line .k { color: var(--ink-3); }
.confirm-line .v { color: var(--ink); font-weight: 500; text-align: right; }
.confirm-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.btn-confirm {
  flex: 1;
  background: var(--teal);
  color: #fff;
  border: 0;
  padding: 9px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}
.btn-confirm:hover { background: var(--teal-2); }
.btn-edit {
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
}

/* Emergency banner */
.emergency-card {
  background: var(--coral-soft);
  border: 1px solid var(--coral);
  border-radius: 16px;
  padding: 14px;
  margin: 4px 0;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pulseRed 2s ease-in-out infinite;
}
@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 0 0 oklch(62% 0.18 25 / 0.0); }
  50% { box-shadow: 0 0 0 6px oklch(62% 0.18 25 / 0.12); }
}
.emergency-card .head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--coral);
}
.emergency-card .body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.emergency-card .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emergency-call {
  background: var(--coral);
  color: #fff;
  border: 0;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Reminder card */
.reminder-card {
  background: var(--paper);
  border: 0.5px solid var(--teal);
  border-left: 3px solid var(--teal);
  border-radius: 14px;
  padding: 12px 14px;
  width: 88%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reminder-card .ribbon {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.reminder-card .title { font-weight: 600; font-size: 13px; }
.reminder-card ul {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Composer */
.composer {
  padding: 8px 10px 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.composer .input {
  flex: 1;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 18px;
  background: var(--paper);
  border: 0.5px solid rgba(0,0,0,0.12);
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.composer .input.placeholder { color: var(--ink-4); }
.composer .input .caret {
  width: 1.5px;
  height: 16px;
  background: var(--teal);
  margin-left: 1px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.composer .send {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  flex: none;
}

/* Typing indicator */
.typing {
  background: var(--bubble-agent);
  border: 0.5px solid rgba(0,0,0,0.05);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  padding: 11px 14px;
  display: inline-flex;
  gap: 4px;
}
.typing span {
  width: 6px;
  height: 6px;
  background: var(--ink-4);
  border-radius: 999px;
  animation: bounce 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Supervisor dashboard ─── */

.dashboard {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto 1fr;
  gap: 0;
  background: var(--bg);
  overflow: hidden;
}

.dash-header {
  grid-column: 1 / -1;
  padding: 18px 28px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
}
.dash-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.dash-title h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0;
}
.dash-title .sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.dash-clock {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* KPI strip */
.kpi-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.kpi {
  padding: 16px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpi .v {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.kpi .target {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}
.kpi .delta {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--moss);
  margin-top: 2px;
}
.kpi .delta.warn { color: var(--coral); }
.kpi.live .v::after {
  content: '';
  width: 6px; height: 6px;
  background: var(--moss);
  display: inline-block;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  margin-bottom: 4px;
  animation: pulse 2s infinite;
}

/* Main panel */
.dash-main {
  padding: 22px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-head .pill {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--teal-soft);
  color: var(--teal-ink);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.panel-head .pill.coral { background: var(--coral-soft); color: var(--coral); }
.panel-head .pill.amber { background: var(--amber-soft); color: oklch(45% 0.1 75); }
.panel-head .pill.moss { background: var(--moss-soft); color: oklch(40% 0.08 145); }

@keyframes iosNotifSlide {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* AI-first softened kicker — surface the AI dimension without engineer-y jargon */
.ai-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.5px 5px 1px;
  border-radius: 3px;
  background: oklch(94% 0.04 250);
  color: oklch(40% 0.12 250);
  margin-right: 6px;
  vertical-align: 0.5px;
  font-weight: 500;
}
.panel-head .pill .ai-tag {
  background: oklch(100% 0 0 / 0.6);
  color: inherit;
  font-size: 8px;
  padding: 1px 4px 0.5px;
  vertical-align: 1px;
}
.k-hint {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-left: 4px;
}

.panel-body { padding: 16px; }
.panel-body.tight { padding: 0; }

/* Live agent state — the prominent block */
.agent-state {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}
.agent-state .top {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  border-bottom: 1px solid var(--line-2);
}
.agent-state .convo-id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agent-state .patient-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.agent-state .pt-avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--bg-3);
  display: grid; place-items: center;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 16px;
}
.agent-state .pt-name { font-weight: 600; font-size: 14px; }
.agent-state .pt-meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.agent-state .channel-tag {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  height: fit-content;
  align-self: start;
}

.agent-state .reasoning {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.reasoning .cell {
  padding: 0 16px;
  border-right: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reasoning .cell:first-child { padding-left: 0; }
.reasoning .cell:last-child { border-right: 0; padding-right: 0; }
.reasoning .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.reasoning .v {
  font-size: 13px;
  font-weight: 500;
}
.reasoning .v.mono { font-family: var(--mono); font-size: 12px; }

/* Confidence bar */
.confidence {
  height: 4px;
  background: var(--bg-3);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
  position: relative;
}
.confidence .fill {
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.confidence.warn .fill { background: var(--amber); }
.confidence.low .fill { background: var(--coral); }
.confidence .floor {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1.5px;
  background: var(--ink);
  opacity: 0.4;
}

/* Work primitive chip */
.primitive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  width: fit-content;
}
.primitive::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 2px;
}
.primitive.emergency { border-color: var(--coral); background: var(--coral-soft); color: var(--coral); }
.primitive.emergency::before { background: var(--coral); }

/* Permission ladder */
.ladder {
  display: flex;
  gap: 4px;
  width: 100%;
}
.rung {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink-3);
  position: relative;
}
.rung.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.rung.active.coral { background: var(--coral); border-color: var(--coral); }
.rung.passed {
  background: var(--teal-soft);
  color: var(--teal-ink);
  border-color: var(--teal-soft);
}

/* Action log */
.action-log {
  display: flex;
  flex-direction: column;
}
.log-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
  animation: slideIn .35s ease both;
}
.log-row:last-child { border-bottom: 0; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
.log-row .ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}
.log-row .action {
  color: var(--ink);
}
.log-row .action b { font-weight: 600; }
.log-row .reason {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  display: block;
  margin-top: 2px;
}
.log-row .badge {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.log-row .badge.auto { background: var(--teal-soft); color: var(--teal-ink); }
.log-row .badge.confirm { background: var(--amber-soft); color: oklch(45% 0.1 75); }
.log-row .badge.suggest { background: var(--bg-2); color: var(--ink-2); }
.log-row .badge.escalate { background: var(--coral-soft); color: var(--coral); }

/* Right rail */
.dash-rail {
  border-left: 1px solid var(--line);
  background: var(--bg);
  overflow-y: auto;
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rail-h {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rail-h .count {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  padding: 1px 7px;
  letter-spacing: 0;
}

.queue-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  transition: all .15s;
  cursor: pointer;
}
.queue-item:hover { border-color: var(--teal); }
.queue-item.urgent {
  border-color: var(--coral);
  background: var(--coral-soft);
}
.queue-item .row1 {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 12px;
}
.queue-item .row2 {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
}
.queue-item .row3 {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.35;
}
.queue-item .tag {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--ink-3);
}
.queue-item.urgent .tag {
  background: var(--coral);
  color: #fff;
}

/* Emergency state — dashboard takeover */
.emergency-alert {
  background: linear-gradient(180deg, oklch(96% 0.04 25), var(--coral-soft));
  border: 1px solid var(--coral);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: pulseRed 1.6s ease-in-out infinite;
}
.emergency-alert .head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--coral);
  font-size: 14px;
}
.emergency-alert .head .siren {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  display: grid; place-items: center;
  font-size: 14px;
}
.emergency-alert .ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--coral);
  letter-spacing: 0.05em;
}
.emergency-alert .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  padding: 10px 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  line-height: 1.35;
}
.emergency-alert .actions {
  display: flex;
  gap: 8px;
}
.emergency-alert button {
  flex: 1;
  background: var(--coral);
  color: #fff;
  border: 0;
  padding: 9px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--sans);
}
.emergency-alert button.secondary {
  background: rgba(255,255,255,0.7);
  color: var(--coral);
  border: 1px solid var(--coral);
}

/* Annotations — editorial layer */
.annotation {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border: 0.5px solid var(--line);
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 220px;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.08);
}
.annotation::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 1px;
  background: var(--ink-3);
}

.phone-annotation {
  position: absolute;
  right: 24px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  max-width: 180px;
  line-height: 1.4;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.phone-annotation .num {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  width: 16px; height: 16px;
  border-radius: 999px;
  text-align: center;
  line-height: 16px;
  font-size: 9px;
  margin-right: 6px;
}

/* Knowledge / footnote strip below dashboard */
.footnote-strip {
  grid-column: 1 / -1;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Tweak overrides */
.tweaks-anchor { position: fixed; right: 18px; bottom: 18px; z-index: 99; }