/* Design tokens mirror the Griffain dashboard: same dark neutrals, same card and
   sidebar structure. The accent is cyan rather than purple so it is obvious at a
   glance which tool you are looking at. */

:root {
  --radius: 0.5rem;

  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.175 0 0);
  --card-hover: oklch(0.205 0 0);
  --popover: oklch(0.19 0 0);
  --primary: oklch(0.72 0.13 195);
  --primary-foreground: oklch(0.16 0 0);
  --secondary: oklch(0.25 0 0);
  --muted: oklch(0.25 0 0);
  --muted-foreground: oklch(0.66 0 0);
  --accent: oklch(0.25 0 0);
  --destructive: oklch(0.58 0.2 25);
  --border: oklch(0.3 0 0);
  --border-strong: oklch(0.38 0 0);
  --input: oklch(0.22 0 0);
  --ring: oklch(0.72 0.13 195);

  --sidebar: oklch(0.12 0 0);
  --sidebar-border: oklch(0.25 0 0);
  --sidebar-accent: oklch(0.2 0 0);

  --success: oklch(0.68 0.18 150);
  --warning: oklch(0.78 0.16 85);
  --info: oklch(0.66 0.16 230);

  /* Verdict scale, worst to best */
  --v-unacceptable: oklch(0.58 0.22 22);
  --v-bad: oklch(0.66 0.19 45);
  --v-minor_problems: oklch(0.78 0.16 85);
  --v-good: oklch(0.68 0.17 150);
  --v-critically_good: oklch(0.74 0.16 175);

  /* Moment colours for the timeline */
  --m-connection_building: oklch(0.66 0.15 235);
  --m-value_anchoring: oklch(0.78 0.16 85);
  --m-girlfriend_connection: oklch(0.65 0.18 300);
  --m-easy_transition: oklch(0.72 0.19 55);
  --m-spice: oklch(0.64 0.2 15);
  --m-aftercare: oklch(0.6 0.1 265);

  --sidebar-width: 15rem;
  --header-height: 3.75rem;
}

* {
  box-sizing: border-box;
  border-color: var(--border);
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

code, .mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: oklch(0.32 0 0);
  border-radius: 6px;
  border: 2px solid var(--background);
}
::-webkit-scrollbar-thumb:hover { background: oklch(0.42 0 0); }

/* ------------------------------------------------------------------ layout */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: none;
}

.shell.report-open {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) minmax(22rem, 34vw);
}

/* Full-screen live chat — hide chrome so the thread owns the viewport */
.shell.live-focus {
  grid-template-columns: minmax(0, 1fr);
}
.shell.live-focus .sidebar,
.shell.live-focus .header,
.shell.live-focus .job-banner-host {
  display: none;
}
.shell.live-focus .main {
  min-height: 100vh;
  height: 100vh;
}
.shell.live-focus .content {
  padding: 0;
  max-width: none;
  height: 100%;
  overflow: hidden;
}

.live-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 55%),
    var(--background);
}
.live-page-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  flex: 0 0 auto;
}
.live-page-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.live-page-meta strong {
  font-size: 0.92rem;
  line-height: 1.2;
}
.live-page-meta span {
  font-size: 0.72rem;
}
.live-page-actions {
  flex: 0 0 auto;
}
.live-page-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex: 0 0 auto;
  background: color-mix(in oklab, var(--card) 94%, transparent);
}
.live-users-label {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding-right: 0.35rem;
  margin-right: 0.15rem;
  border-right: 1px solid var(--border);
}
.live-page-tabs.single {
  padding-block: 0.35rem;
}
.live-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 70%, var(--card));
  color: var(--muted-foreground);
  border-radius: 0.45rem;
  padding: 0.35rem 0.55rem;
  display: grid;
  gap: 0.05rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  min-width: 7.5rem;
}
.live-page-tabs.single .live-tab {
  cursor: default;
}
.live-tab strong {
  font-size: 0.78rem;
  color: inherit;
  font-weight: 600;
}
.live-tab span {
  font-size: 0.65rem;
  text-transform: capitalize;
}
.live-tab em {
  font-style: normal;
  font-size: 0.6rem;
  color: color-mix(in oklab, var(--muted-foreground) 90%, transparent);
}
.live-tab:hover {
  background: color-mix(in oklab, var(--muted) 55%, transparent);
  color: var(--foreground);
}
.live-tab.active {
  background: color-mix(in oklab, var(--card) 80%, var(--input));
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent);
}
.live-page-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.65rem 0.75rem 0.75rem;
  display: flex;
}
.live-page-body .live-chat-pane {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  height: 100%;
  border-radius: 0.75rem;
}
.live-page .live-chat-main {
  grid-template-columns: 7.75rem minmax(0, 1fr);
}
.live-page .stage-rail {
  padding: 0.55rem 0.4rem 0.7rem;
  background: color-mix(in oklab, var(--background) 55%, var(--card));
}
.live-page .stage-rail-label {
  font-size: 0.58rem;
  margin-bottom: 0.35rem;
}
.live-page .stage-current-chip {
  font-size: 0.65rem;
  margin-bottom: 0.45rem;
}
.live-page .stage-step {
  font-size: 0.65rem;
  gap: 0.28rem;
}
@media (max-width: 720px) {
  .live-page .live-chat-main {
    grid-template-columns: 1fr;
  }
  .live-page .stage-rail {
    max-height: 7.5rem;
  }
}

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  display: grid;
  place-items: center;
}

.brand-text { display: grid; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: 0.875rem; font-weight: 600; }
.brand-text span { font-size: 0.72rem; color: var(--muted-foreground); }

.nav-group { padding: 0.75rem 0.5rem 0.25rem; }
.nav-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  padding: 0 0.5rem 0.375rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: var(--radius);
  color: oklch(0.8 0 0);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.nav-item:hover { background: var(--sidebar-accent); color: var(--foreground); }
.nav-item.active {
  background: var(--sidebar-accent);
  color: var(--foreground);
  font-weight: 500;
}
.nav-item .icon { opacity: 0.85; flex: 0 0 auto; }
.nav-item .count {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid var(--sidebar-border);
  display: grid;
  gap: 0.5rem;
}

.reviewer-field { display: grid; gap: 0.25rem; }
.reviewer-field label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}

.mode-chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.main { display: flex; flex-direction: column; min-width: 0; }

.header {
  height: var(--header-height);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  z-index: 20;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  min-width: 0;
}
.crumbs .sep { opacity: 0.5; }
.crumbs .current { color: var(--foreground); font-weight: 500; }
.crumbs a:hover { color: var(--foreground); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }

.content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1500px;
  width: 100%;
}

.job-banner-host {
  padding: 1rem 1.5rem 0;
  max-width: 1500px;
  width: 100%;
}
.job-banner-host:empty {
  display: none;
  padding: 0;
}
.job-banner-host .live-job {
  margin: 0;
}

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.page-head h2 { font-size: 1.375rem; }
.page-head p { margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
}

.card-head {
  padding: 1rem 1.125rem 0.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-head h3 { font-size: 0.9375rem; }
.card-head p { margin: 0.1875rem 0 0; font-size: 0.78rem; color: var(--muted-foreground); }
.card-body { padding: 0 1.125rem 1.125rem; }
.card-body.tight { padding-top: 0.25rem; }
.card-foot {
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.detail { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1180px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.detail, .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .shell.report-open {
    grid-template-columns: 1fr;
  }
  .shell.report-open .main { display: none; }
  .shell.report-open .report-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    z-index: 40;
  }
  .grid.cols-2, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.metric { display: grid; gap: 0.375rem; }
.metric .label {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric .value { font-size: 1.75rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric .hint { font-size: 0.72rem; color: var(--muted-foreground); }
.metric-icon {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  color: var(--primary);
  display: grid;
  place-items: center;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
}
.btn:hover { background: var(--card-hover); border-color: var(--border-strong); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.btn.primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-foreground);
  font-weight: 600;
}
.btn.primary:hover { background: color-mix(in oklab, var(--primary) 88%, white); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.btn.ghost:hover { background: var(--accent); color: var(--foreground); }

.btn.outline { background: transparent; }
.btn.danger { background: transparent; border-color: color-mix(in oklab, var(--destructive) 50%, transparent); color: var(--destructive); }
.btn.danger:hover { background: color-mix(in oklab, var(--destructive) 14%, transparent); }
.btn.sm { height: 1.75rem; padding: 0 0.5625rem; font-size: 0.75rem; }
.btn.block { width: 100%; }

/* ------------------------------------------------------------------ inputs */

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.625rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
}
textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
select { cursor: pointer; appearance: none; padding-right: 1.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
                    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
::placeholder { color: oklch(0.5 0 0); }

.field { display: grid; gap: 0.3125rem; }
.field > label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.field .help { font-size: 0.72rem; color: var(--muted-foreground); }

.filters {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 7rem 7rem auto;
  gap: 0.75rem;
  align-items: end;
}
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.outline { background: transparent; border-color: var(--border-strong); color: var(--muted-foreground); font-weight: 500; }
.badge.muted { background: var(--secondary); color: var(--muted-foreground); font-weight: 500; }
.badge.dot::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.verdict {
  --vc: var(--muted-foreground);
  background: color-mix(in oklab, var(--vc) 18%, transparent);
  color: var(--vc);
  border-color: color-mix(in oklab, var(--vc) 35%, transparent);
}
.verdict.critically_good { --vc: var(--v-critically_good); }
.verdict.good { --vc: var(--v-good); }
.verdict.minor_problems { --vc: var(--v-minor_problems); }
.verdict.bad { --vc: var(--v-bad); }
.verdict.unacceptable { --vc: var(--v-unacceptable); }
.verdict.solid { background: var(--vc); color: oklch(0.14 0 0); border-color: transparent; }
.verdict.lg { font-size: 0.8125rem; padding: 0.25rem 0.625rem; }

.sev-critical { color: var(--v-unacceptable); }
.sev-major { color: var(--v-bad); }
.sev-minor { color: var(--v-minor_problems); }

.moment-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}

/* ------------------------------------------------------------------ tables */

.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
thead th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  background: oklch(0.19 0 0);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 0.5625rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: color-mix(in oklab, var(--accent) 55%, transparent); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- timeline */

.timeline {
  display: flex;
  gap: 2px;
  height: 2.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--input);
}
.timeline-seg {
  --sc: var(--muted-foreground);
  position: relative;
  min-width: 8px;
  background: color-mix(in oklab, var(--sc) 30%, transparent);
  border-bottom: 3px solid var(--sc);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background 0.12s;
}
.timeline-seg:hover { background: color-mix(in oklab, var(--sc) 48%, transparent); }
.timeline-seg.selected { background: color-mix(in oklab, var(--sc) 60%, transparent); }
.timeline-seg span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--foreground);
  padding: 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.625rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.timeline-legend span { display: inline-flex; align-items: center; gap: 0.3125rem; }

/* ----------------------------------------------------------------- moments */

.moment {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: oklch(0.165 0 0);
  overflow: hidden;
}
.moment + .moment { margin-top: 0.75rem; }
.moment.selected { border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.moment.failing { border-left: 3px solid var(--v-bad); }

.moment-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  cursor: pointer;
  flex-wrap: wrap;
}
.moment-head:hover { background: color-mix(in oklab, var(--accent) 40%, transparent); }
.moment-head .title { font-weight: 600; font-size: 0.8438rem; }
.moment-head .turns { font-size: 0.72rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.moment-head .spacer { flex: 1 1 auto; }

.moment-body { padding: 0 0.875rem 0.875rem; display: grid; gap: 0.875rem; }
.moment-section { display: grid; gap: 0.4375rem; }
.moment-section > .heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.reasoning { font-size: 0.8125rem; color: oklch(0.82 0 0); }

.criteria { display: grid; gap: 0.375rem; }
.criterion { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr 2.5rem; gap: 0.625rem; align-items: center; font-size: 0.75rem; }
.criterion .name { color: var(--muted-foreground); }
.criterion .bar { height: 0.375rem; border-radius: 999px; background: var(--input); overflow: hidden; }
.criterion .bar i { display: block; height: 100%; border-radius: 999px; background: var(--vc, var(--primary)); }
.criterion .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }

.issue {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.5625rem;
  border-radius: var(--radius);
  background: oklch(0.2 0 0);
  border-left: 2px solid currentColor;
}
.issue .detail { color: oklch(0.85 0 0); }
.issue .meta { font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.125rem; }

.quote {
  border-left: 2px solid var(--border-strong);
  padding: 0.3125rem 0 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  display: grid;
  gap: 0.1875rem;
}
.quote .who { font-size: 0.7rem; color: var(--muted-foreground); display: flex; gap: 0.375rem; align-items: center; }
.quote .who button { font-size: 0.68rem; }
.quote blockquote { margin: 0; color: oklch(0.88 0 0); font-style: italic; }
.quote .why { font-size: 0.72rem; color: var(--muted-foreground); }

.strengths { margin: 0; padding-left: 1.125rem; font-size: 0.8125rem; color: oklch(0.82 0 0); }
.strengths li { margin-bottom: 0.1875rem; }

.moment-actions {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  display: grid;
  gap: 0.625rem;
}
.action-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: end; }
.action-row.triple { grid-template-columns: 8rem 1fr auto; }
.action-row.quad { grid-template-columns: 5rem 5rem 1fr auto; }

/* -------------------------------------------------------------- transcript */

.transcript {
  max-height: 40rem;
  overflow-y: auto;
  display: grid;
  gap: 0.375rem;
  padding-right: 0.25rem;
}
.turn {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  border: 1px solid transparent;
}
.turn .idx { color: oklch(0.45 0 0); font-variant-numeric: tabular-nums; font-size: 0.7rem; padding-top: 0.125rem; text-align: right; }
.turn .who { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.125rem; }
.turn.user { background: oklch(0.19 0 0); }
.turn.persona { background: color-mix(in oklab, var(--primary) 8%, oklch(0.185 0 0)); }
.turn.dim { opacity: 0.4; }
.turn.in-moment { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.turn.flash { border-color: var(--warning); background: color-mix(in oklab, var(--warning) 14%, oklch(0.19 0 0)); }
.turn .body { white-space: pre-wrap; word-break: break-word; color: oklch(0.88 0 0); }
.turn .tag { font-size: 0.68rem; color: var(--warning); margin-top: 0.1875rem; }

/* ------------------------------------------------------------------- misc */

.empty {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
}
.empty .icon { opacity: 0.4; }
.empty strong { color: var(--foreground); font-size: 0.9375rem; font-weight: 500; }
.empty p { margin: 0; font-size: 0.8125rem; max-width: 30rem; }

.skeleton {
  background: linear-gradient(90deg, var(--muted) 25%, oklch(0.3 0 0) 50%, var(--muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.progress { height: 0.375rem; border-radius: 999px; background: var(--input); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.25s; }

.spinner {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.joblog {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  max-height: 7rem;
  overflow-y: auto;
  display: grid;
  gap: 0.125rem;
}

.live-job .card-body.tight { display: grid; gap: 0.75rem; }

.batch-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 0.5rem; }
.batch-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.batch-table th, .batch-table td { padding: 0.45rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.batch-table th { color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--card) 88%, var(--input)); }
.batch-table tr:last-child td { border-bottom: 0; }
.sim-board-wrap { margin-top: 0.75rem; }
.sim-board-row { cursor: pointer; }
.sim-board-row:hover td {
  background: color-mix(in oklab, var(--muted) 40%, transparent);
}
.sim-board-row.selected td {
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
.sim-board-open .btn {
  pointer-events: none;
}
.batch-row { cursor: pointer; transition: background 0.12s ease; }
.batch-row:hover td { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.batch-row.selected td { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.batch-row.status-cancelled td { opacity: 0.65; }
.batch-row.status-error td { color: var(--danger, #b42318); }
.batch-row.status-done td { color: inherit; }
.batch-hint { margin: 0.5rem 0.6rem 0.65rem; font-size: 0.75rem; }

.live-job-split {
  margin-top: 0.75rem;
  display: grid;
  gap: 1rem;
  align-items: start;
}
.live-job-split.with-chat {
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
}
@media (max-width: 960px) {
  .live-job-split.with-chat {
    grid-template-columns: 1fr;
  }
}

/* WhatsApp-style live chat inside the Full journey / simulate job card */
.live-chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  max-height: min(70vh, 36rem);
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: color-mix(in oklab, var(--card) 92%, var(--input));
  overflow: hidden;
}
.live-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 80%, var(--input));
  flex: 0 0 auto;
}
.live-chat-head strong {
  display: block;
  font-size: 0.92rem;
  color: var(--foreground);
}
.live-chat-head span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-transform: capitalize;
}
.live-chat-main {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}
.live-chat-body {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.stage-rail {
  border-right: 1px solid var(--border);
  padding: 0.7rem 0.55rem 0.85rem;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  overflow-y: auto;
  min-height: 0;
}
.stage-rail-label {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.45rem;
}
.stage-current-chip {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin-bottom: 0.65rem;
  line-height: 1.35;
}
.stage-rail-empty {
  font-size: 0.72rem;
  margin: 0;
  line-height: 1.35;
}
.stage-trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.stage-step {
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: start;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted-foreground);
}
.stage-step.passed {
  color: color-mix(in oklab, var(--muted-foreground) 85%, var(--foreground));
}
.stage-step.current {
  color: var(--foreground);
  font-weight: 600;
}
.stage-step.upcoming {
  opacity: 0.55;
}
.stage-step.nested {
  padding-left: 0.55rem;
  font-weight: 500;
}
.stage-step.nested.current {
  font-weight: 650;
}
.stage-mark {
  font-size: 0.68rem;
  line-height: 1.35;
}
.stage-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.stage-name {
  overflow-wrap: anywhere;
}
.stage-sub {
  font-style: normal;
  font-weight: 500;
  font-size: 0.65rem;
  color: var(--muted-foreground);
}
.quick-thread-layout {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.quick-thread-layout .stage-rail {
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  max-height: min(70vh, 36rem);
}
@media (max-width: 720px) {
  .live-chat-main,
  .quick-thread-layout {
    grid-template-columns: 1fr;
  }
  .stage-rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 9rem;
  }
  .quick-thread-layout .stage-rail {
    border-bottom: 1px solid var(--border);
  }
}
.live-chat-thread {
  position: absolute;
  inset: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0.85rem 0.65rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--primary) 55%, oklch(0.45 0 0))
    color-mix(in oklab, var(--muted) 40%, transparent);
}
.live-chat-thread::-webkit-scrollbar {
  width: 8px;
}
.live-chat-thread::-webkit-scrollbar-track {
  background: color-mix(in oklab, var(--muted) 35%, transparent);
  border-radius: 999px;
  margin: 0.5rem 0;
}
.live-chat-thread::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--primary) 45%, oklch(0.42 0 0));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.live-chat-thread::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--primary) 70%, oklch(0.38 0 0));
  background-clip: padding-box;
  border: 2px solid transparent;
}
.chat-jump-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.chat-jump-count[hidden] {
  display: none !important;
}

/* Simple scrollable chat preview (right side) */
.sim-phone-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(28rem, 100vw);
  z-index: 45;
  box-sizing: border-box;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
}
.shell.phone-open .sim-phone-panel {
  display: flex;
  flex-direction: column;
}
.chat-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
}
.chat-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 88%, var(--input));
  flex: 0 0 auto;
}
.chat-preview-titles {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.chat-preview-titles strong {
  font-size: 0.95rem;
  color: var(--foreground);
}
.chat-preview-titles span {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  text-transform: capitalize;
}
.chat-preview-thread {
  position: absolute;
  inset: 0;
  overflow-y: scroll; /* always reserve chat's own scrollbar track */
  overflow-x: hidden;
  padding: 1rem 0.65rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* don't chain-scroll the main page */
  scrollbar-gutter: stable;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: color-mix(in oklab, var(--primary) 55%, oklch(0.45 0 0))
    color-mix(in oklab, var(--muted) 40%, transparent);
}
/* Dedicated chat scrollbar (separate from the main page scroller) */
.chat-preview-thread::-webkit-scrollbar {
  width: 8px;
}
.chat-preview-thread::-webkit-scrollbar-track {
  background: color-mix(in oklab, var(--muted) 35%, transparent);
  border-radius: 999px;
  margin: 0.5rem 0;
}
.chat-preview-thread::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--primary) 45%, oklch(0.42 0 0));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.chat-preview-thread::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--primary) 70%, oklch(0.38 0 0));
  background-clip: padding-box;
  border: 2px solid transparent;
}
.chat-preview-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.chat-jump-new {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 88%, var(--primary));
  color: var(--foreground);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.chat-jump-new[hidden] {
  display: none !important;
}
.chat-jump-new:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}
.chat-empty {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  padding: 2rem 1rem;
}
.chat-msg {
  max-width: 92%;
  padding: 0.65rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}
.chat-msg.in {
  align-self: flex-start;
  background: color-mix(in oklab, var(--muted) 55%, transparent);
}
.chat-msg.out {
  align-self: flex-end;
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
}
.chat-who {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}
.chat-text {
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--foreground);
}
.chat-typing {
  font-size: 0.8125rem;
  padding: 0.25rem 0.15rem;
}

.live-duel {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: oklch(0.14 0.01 200);
  overflow: hidden;
}
.live-duel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: oklch(0.17 0.015 200);
}
.live-duel-head > div:first-child,
.live-duel-head > div:last-child {
  display: grid;
  gap: 0.125rem;
}
.live-duel-head > div:last-child { text-align: right; }
.live-duel-head strong { font-size: 0.875rem; }
.live-duel-vs {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--primary) 22%, transparent);
  color: var(--primary);
  font-weight: 700;
}
.live-thread {
  max-height: 22rem;
  overflow-y: auto;
  padding: 1rem;
  display: grid;
  gap: 0.625rem;
}
.live-empty { text-align: center; padding: 1.5rem 0.5rem; font-size: 0.8125rem; }
.live-bubble {
  max-width: min(78%, 28rem);
  padding: 0.625rem 0.8125rem;
  border-radius: 0.875rem;
  display: grid;
  gap: 0.25rem;
}
.live-bubble.sim {
  justify-self: start;
  background: oklch(0.22 0.02 230);
  border: 1px solid color-mix(in oklab, oklch(0.65 0.08 230) 35%, transparent);
  border-bottom-left-radius: 0.25rem;
}
.live-bubble.bot {
  justify-self: end;
  background: color-mix(in oklab, var(--primary) 18%, oklch(0.18 0 0));
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-bottom-right-radius: 0.25rem;
  text-align: left;
}
.live-who {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  font-weight: 600;
}
.live-body { font-size: 0.875rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.live-bubble.typing .live-body { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.typing-dots { display: inline-flex; gap: 0.2rem; align-items: center; }
.typing-dots i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation: typingPulse 1s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingPulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.875rem; font-size: 0.8125rem; align-items: baseline; }
.kv dt { color: var(--muted-foreground); white-space: nowrap; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.dist { display: grid; gap: 0.4375rem; }
.dist-row { display: grid; grid-template-columns: 8.5rem 1fr 2rem; gap: 0.625rem; align-items: center; font-size: 0.78rem; }
.dist-row .bar { height: 0.5rem; border-radius: 999px; background: var(--input); overflow: hidden; }
.dist-row .bar i { display: block; height: 100%; background: var(--vc); border-radius: 999px; }
.dist-row .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }

.notice {
  display: flex;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  border: 1px solid;
  align-items: flex-start;
}
.notice.info { background: color-mix(in oklab, var(--info) 12%, transparent); border-color: color-mix(in oklab, var(--info) 32%, transparent); }
.notice.warn { background: color-mix(in oklab, var(--warning) 12%, transparent); border-color: color-mix(in oklab, var(--warning) 32%, transparent); }
.notice.bad { background: color-mix(in oklab, var(--destructive) 12%, transparent); border-color: color-mix(in oklab, var(--destructive) 32%, transparent); }
.notice.muted { background: color-mix(in oklab, var(--muted) 55%, transparent); border-color: var(--border); }
.notice .icon { flex: 0 0 auto; margin-top: 0.0625rem; }
.notice p { margin: 0; }
.notice strong { display: block; margin-bottom: 0.125rem; }

.toasts {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: grid;
  gap: 0.5rem;
  z-index: 100;
  max-width: 24rem;
}
.toast {
  background: var(--popover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.45);
  animation: slide-in 0.18s ease-out;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.toast.error { border-color: color-mix(in oklab, var(--destructive) 55%, transparent); }
.toast.success { border-color: color-mix(in oklab, var(--success) 45%, transparent); }
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.audit { display: grid; gap: 0.3125rem; font-size: 0.78rem; max-height: 18rem; overflow-y: auto; }
.audit-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.625rem; }
.audit-row .when { color: oklch(0.5 0 0); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
.audit-row .what strong { font-weight: 600; }
.audit-row .what .detail { color: var(--muted-foreground); }

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1875rem 0.5rem;
  font-size: 0.72rem;
}
.chip button { background: none; border: none; color: var(--muted-foreground); cursor: pointer; padding: 0; font-size: 0.85rem; line-height: 1; }
.chip button:hover { color: var(--destructive); }

.instruction {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.625rem;
  background: oklch(0.2 0 0);
  border-radius: var(--radius);
  border-left: 2px solid var(--primary);
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.instruction .meta { font-size: 0.7rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.instruction .spacer { flex: 1; }

.scenario-objectives { margin: 0.375rem 0 0; padding-left: 1.125rem; font-size: 0.78rem; color: var(--muted-foreground); }

details.rubric { border: 1px solid var(--border); border-radius: var(--radius); background: oklch(0.165 0 0); }
details.rubric + details.rubric { margin-top: 0.625rem; }
details.rubric > summary {
  cursor: pointer;
  padding: 0.6875rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8438rem;
  list-style: none;
}
details.rubric > summary::-webkit-details-marker { display: none; }
details.rubric > summary:hover { background: color-mix(in oklab, var(--accent) 40%, transparent); }
details.rubric .rubric-body { padding: 0 0.875rem 0.875rem; display: grid; gap: 0.75rem; }

.hidden { display: none !important; }
.muted { color: var(--muted-foreground); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.col { display: grid; gap: 0.75rem; }
.gap-sm { gap: 0.375rem; }
.mono-sm { font-size: 0.72rem; color: var(--muted-foreground); }

/* ------------------------------------------------------------------ live report panel (Claude-style artifact) */

.report-panel {
  display: none;
  border-left: 1px solid var(--border);
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 55%),
    oklch(0.155 0.01 200);
  min-width: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.shell.report-open .report-panel {
  display: flex;
  flex-direction: column;
}

/* Float mode: analysis opens over the right side without resizing the page */
.report-panel.report-float {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(34rem, 42vw);
  z-index: 46;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}
.report-panel.report-float[aria-hidden="false"],
.report-panel.report-float:not([hidden]) {
  display: flex;
  flex-direction: column;
}

@keyframes reportSlideIn {
  from { opacity: 0; transform: translateX(1.5rem); }
  to { opacity: 1; transform: translateX(0); }
}

.report-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.report-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(8px);
}

.report-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  font-weight: 700;
}

.report-panel-titles h2 {
  font-size: 1.05rem;
  margin-top: 0.2rem;
  letter-spacing: -0.02em;
}

.report-panel-titles p {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
}

.report-freshness {
  font-size: 0.68rem;
  color: var(--primary);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  animation: freshnessPulse 1.2s ease;
}

@keyframes freshnessPulse {
  0% { transform: scale(0.92); opacity: 0; }
  40% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.report-doc-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 1.125rem 2rem;
}

.report-doc {
  background: oklch(0.985 0.005 95);
  color: oklch(0.22 0.02 60);
  border-radius: 1rem;
  padding: 1.5rem 1.35rem 2rem;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 8%, transparent),
    0 18px 40px -24px oklch(0 0 0 / 0.65);
  animation: reportDocReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

.report-doc.updating {
  animation: reportDocPulse 0.9s ease;
}

@keyframes reportDocReveal {
  from { opacity: 0; transform: translateY(1.25rem) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reportDocPulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

.report-doc .doc-hero {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(0.88 0.01 80);
}

.report-doc .doc-hero h1 {
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: oklch(0.18 0.02 60);
}

.report-doc .doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.report-doc .doc-chip {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: oklch(0.94 0.01 80);
  color: oklch(0.35 0.02 60);
  border: 1px solid oklch(0.88 0.01 80);
}

.report-doc .doc-chip.verdict {
  font-weight: 700;
  border-color: transparent;
}

.report-doc .md-body {
  font-size: 0.9rem;
  line-height: 1.55;
}

.report-doc .md-body h1,
.report-doc .md-body h2,
.report-doc .md-body h3 {
  color: oklch(0.2 0.02 60);
  margin: 1.25rem 0 0.5rem;
  letter-spacing: -0.02em;
}

.report-doc .md-body h1 { font-size: 1.2rem; }
.report-doc .md-body h2 { font-size: 1.05rem; }
.report-doc .md-body h3 { font-size: 0.95rem; }

.report-doc .md-body p { margin: 0.5rem 0; }
.report-doc .md-body ul,
.report-doc .md-body ol { margin: 0.4rem 0 0.6rem; padding-left: 1.2rem; }
.report-doc .md-body li { margin: 0.2rem 0; }

.report-doc .md-body blockquote {
  margin: 0.6rem 0;
  padding: 0.4rem 0.75rem;
  border-left: 3px solid var(--primary);
  background: oklch(0.96 0.01 195);
  color: oklch(0.32 0.02 60);
  border-radius: 0 0.4rem 0.4rem 0;
}

.report-doc .md-body code {
  background: oklch(0.94 0.01 80);
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.82em;
}

.report-doc .md-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.8rem;
}

.report-doc .md-body th,
.report-doc .md-body td {
  border: 1px solid oklch(0.88 0.01 80);
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.report-doc .md-body th {
  background: oklch(0.95 0.01 80);
  font-weight: 600;
}

.report-doc .md-body strong { font-weight: 700; }

.report-doc.loading {
  min-height: 16rem;
  display: grid;
  place-items: center;
  color: oklch(0.45 0.02 60);
}

.report-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------- quick review */

.quick-list {
  display: grid;
  gap: 0.375rem;
}
.quick-chat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: oklch(0.185 0 0);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.quick-chat-row:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  background: color-mix(in oklab, var(--primary) 6%, oklch(0.185 0 0));
}
.quick-chat-row strong {
  font-weight: 550;
  font-size: 0.9rem;
}
.quick-thread-card .card-body {
  padding-top: 0.5rem;
}
.quick-transcript {
  max-height: calc(100vh - 12rem);
}
.turn-main { min-width: 0; }
.turn-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.turn-menu { opacity: 0.35; }
.turn:hover .turn-menu,
.turn.flagged .turn-menu { opacity: 1; }
.btn.icon-only {
  padding: 0.2rem 0.35rem;
  min-width: 0;
}
.turn.flagged {
  border-color: color-mix(in oklab, var(--warning) 55%, transparent);
  background: color-mix(in oklab, var(--warning) 10%, oklch(0.185 0 0));
}
.flag-chip {
  margin-top: 0.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--warning) 16%, oklch(0.17 0 0));
  border: 1px solid color-mix(in oklab, var(--warning) 35%, transparent);
  font-size: 0.75rem;
  color: oklch(0.9 0.04 85);
}
.flag-chip span {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  line-height: 1.35;
}
.flag-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.flag-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: oklch(0.08 0 0 / 0.72);
  cursor: pointer;
}
.flag-modal {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  background: var(--popover);
  box-shadow: 0 18px 50px oklch(0 0 0 / 0.45);
}
.flag-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.flag-quote {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}
.flag-modal label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.flag-modal textarea {
  width: 100%;
  resize: vertical;
  min-height: 5.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: oklch(0.16 0 0);
  color: var(--foreground);
  font: inherit;
}
.flag-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Testing-mode switch (topbar) */

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.625rem 0.3125rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.switch:hover:not(:disabled) { border-color: var(--border-strong); background: var(--card-hover); }
.switch:disabled { opacity: 0.6; cursor: progress; }

.switch-track {
  position: relative;
  width: 1.875rem;
  height: 1.0625rem;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--border-strong);
  flex: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch-thumb {
  position: absolute;
  top: 50%;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--muted-foreground);
  transform: translateY(-50%);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch-label { display: flex; align-items: baseline; gap: 0.375rem; white-space: nowrap; }
.switch-label em { font-style: normal; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.6875rem; }

.switch.on {
  color: var(--foreground);
  border-color: color-mix(in oklab, var(--success) 45%, transparent);
  background: color-mix(in oklab, var(--success) 12%, var(--card));
}

.switch.on .switch-track { background: color-mix(in oklab, var(--success) 70%, transparent); border-color: color-mix(in oklab, var(--success) 60%, transparent); }
.switch.on .switch-thumb { transform: translate(0.8125rem, -50%); background: oklch(0.99 0 0); }
.switch.on .switch-label em { color: var(--success); }

.switch.warn { border-color: color-mix(in oklab, var(--warning) 55%, transparent); }
.switch.warn .switch-label em { color: var(--warning); }

/* ------------------------------------------------------------------ persona form (Griffain-aligned) */

.persona-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--card) 80%, transparent);
}

.persona-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.35rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

.persona-tab:hover { color: var(--foreground); background: color-mix(in oklab, var(--accent) 35%, transparent); }
.persona-tab.active {
  color: var(--foreground);
  background: color-mix(in oklab, var(--primary) 18%, var(--card));
}

.persona-panel { display: grid; gap: 0.75rem; }

.tag-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: color-mix(in oklab, var(--background) 70%, transparent);
}

.tag-box.static { border-style: dashed; background: transparent; }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  color: var(--foreground);
}

.tag-chip.outline {
  background: transparent;
  border: 1px solid var(--border);
}

.tag-chip-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

.tag-chip-x:hover { color: var(--foreground); }

.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.tag-suggestion {
  appearance: none;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
}

.tag-suggestion:hover {
  color: var(--foreground);
  border-style: solid;
  background: color-mix(in oklab, var(--accent) 30%, transparent);
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
}

@media (max-width: 720px) {
  .persona-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inspect drawer */
.inspect-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(32rem, 100vw);
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 80;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px color-mix(in oklab, black 25%, transparent);
}
.inspect-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.inspect-drawer-body {
  overflow: auto;
  padding: 0.85rem 1rem 1.5rem;
  flex: 1;
}
.inspect-sections {
  display: grid;
  gap: 0.85rem;
}
.inspect-sections h4 {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}
.inspect-sections pre {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.45rem;
  background: color-mix(in oklab, var(--background) 80%, var(--input));
  border: 1px solid var(--border);
  font-size: 0.72rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 14rem;
  overflow: auto;
}

/* Prompt lab */
.prompt-lab-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 0.85rem;
  min-height: 70vh;
}
.prompt-lab-keys {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.45rem;
  background: var(--card);
  overflow: auto;
  max-height: 75vh;
}
.prompt-key {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.prompt-key:hover { background: color-mix(in oklab, var(--muted) 45%, transparent); color: var(--foreground); }
.prompt-key.active {
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color: var(--foreground);
}
.prompt-lab-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  min-width: 0;
}
.prompt-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--card);
  min-height: 0;
}
.prompt-pane header {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.prompt-pane textarea {
  flex: 1;
  min-height: 28rem;
  border: 0;
  resize: vertical;
  padding: 0.75rem;
  background: transparent;
  color: var(--foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
}
@media (max-width: 960px) {
  .prompt-lab-layout, .prompt-lab-panes { grid-template-columns: 1fr; }
}

/* A/B side-by-side */
.ab-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ab-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem 0.75rem;
}
.ab-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  overflow: hidden;
  background: color-mix(in oklab, var(--card) 92%, var(--input));
}
.ab-pane-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.ab-pane-body {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
@media (max-width: 960px) {
  .ab-split { grid-template-columns: 1fr; }
  .ab-pane-body { grid-template-columns: 1fr; }
}