/* ========================================================================
   assistant.css, Wonderful Assistant rep console (DARK)
   3 columns: Customer | Live call + transcript | Co-pilot recommendations
   ======================================================================== */

.assistant-canvas {
  position: absolute; inset: 0;
  background: var(--d-bg);
  color: var(--ink-on-d);
  display: flex; flex-direction: column;
  font-feature-settings: "ss01";
}

/* Top app bar */
.app-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background: var(--d-bg-2);
  border-bottom: 1px solid var(--d-line);
  height: 56px;
  flex-shrink: 0;
}
.app-topbar .brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: 14px;
  border-right: 1px solid var(--d-line);
  margin-right: 4px;
}
.app-topbar .brand .name {
  font-size: 13px; font-weight: 600; color: white;
}
.app-topbar .brand .sub {
  font-size: 11px; color: var(--ink-on-d-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.app-topbar .nav { display: flex; gap: 4px; }
.app-topbar .nav-item {
  padding: 7px 11px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-on-d-2);
  border-radius: 6px;
  cursor: pointer;
}
.app-topbar .nav-item.active {
  background: var(--d-bg-3);
  color: white;
}

.app-topbar .case-id {
  margin-left: auto;
  display: flex; align-items: center; gap: 16px;
  font-size: 12px;
  color: var(--ink-on-d-2);
}
.app-topbar .case-id .pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(192,57,43,0.15);
  border: 1px solid rgba(192,57,43,0.4);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: #FF8E80;
  letter-spacing: 0.05em;
}
.app-topbar .case-id .pill-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: #FF6B5C;
  animation: blink 1.4s infinite;
}
.app-topbar .rep-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  background: var(--d-bg-3);
  border: 1px solid var(--d-line);
  border-radius: 999px;
}
.app-topbar .rep-chip .av {
  width: 24px; height: 24px; border-radius: 999px;
  overflow: hidden; flex-shrink: 0;
}
.app-topbar .rep-chip .av img { width: 100%; height: 100%; object-fit: cover; }
.app-topbar .rep-chip .name { font-size: 12px; color: white; font-weight: 500; }

/* 3-col layout */
.assistant-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr 400px;
  gap: 0;
  min-height: 0;
}

/* Generic dark column */
.col-pane {
  display: flex; flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--d-bg);
}
.col-pane::-webkit-scrollbar { width: 8px; }
.col-pane::-webkit-scrollbar-thumb { background: #D4D6DA; border-radius: 4px; }
.col-pane::-webkit-scrollbar-track { background: transparent; }
.col-pane + .col-pane {
  border-left: 1px solid var(--d-line);
}

/* Section header inside a column */
.sec-head {
  padding: 14px 18px 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-on-d-3);
  display: flex; justify-content: space-between; align-items: center;
}
.sec-head .badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--d-bg-3);
  color: var(--ink-on-d-2);
  letter-spacing: 0.04em;
}

/* Customer DNA card */
.dna-card {
  margin: 0 16px 14px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 12px;
  padding: 18px;
}
.dna-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.dna-head .av {
  width: 56px; height: 56px; border-radius: 999px;
  overflow: hidden;
  background: var(--ek-red);
  flex-shrink: 0;
  border: 2px solid var(--w-blue);
}
.dna-head .av img { width: 100%; height: 100%; object-fit: cover; }
.dna-head .av span {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 20px; letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, #4a6fe3 0%, #2d4ba8 100%);
}
.dna-head .who { flex: 1; min-width: 0; }
.dna-head .who .name {
  font-size: 16px; font-weight: 600; color: white;
}
.dna-head .who .meta {
  font-size: 11.5px; color: var(--ink-on-d-3); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.dna-head .who .meta .silver {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1.5px 6px;
  background: rgba(200,165,91,0.18);
  border: 1px solid rgba(200,165,91,0.4);
  color: #E0C788;
  border-radius: 4px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
}

.dna-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 14px;
}
.dna-stat {
  background: var(--d-bg-3);
  border-radius: 8px;
  padding: 10px 10px;
}
.dna-stat .num {
  font-size: 17px; font-weight: 500; color: white; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dna-stat .num-sub {
  font-size: 11px; font-weight: 500;
  color: var(--ink-on-d-3);
  margin-left: 1px;
}
.dna-stat .lbl {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-on-d-3);
  margin-top: 2px;
}

/* Top-route strip, visual instead of text-only */
.dna-route {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--d-bg-3);
  border-radius: 8px;
  color: var(--ink-on-d);
}
.dna-iata {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  color: var(--ink-on-d);
}
.dna-route-line {
  display: inline-flex; align-items: center;
  color: var(--ink-on-d-3);
  flex-shrink: 0;
}
.dna-trips {
  margin-left: auto;
  font-size: 10.5px; color: var(--ink-on-d-3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Sectioned attribute lists */
.dna-section + .dna-section { margin-top: 12px; }
.dna-section-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-on-d-3);
  margin-bottom: 8px;
}

.dna-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.dna-row {
  display: grid;
  grid-template-columns: 18px 78px 1fr;
  gap: 10px;
  font-size: 12px;
  align-items: center;
}
.dna-row .dna-ico {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  color: var(--ink-on-d-3);
  flex-shrink: 0;
}
.dna-row .k {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-on-d-3);
}
.dna-row .v { color: var(--ink-on-d); font-size: 12.5px; }
.dna-row .v.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Booking summary */
.booking-card {
  margin: 0 16px 14px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 12px;
  overflow: hidden;
}
.booking-card .row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--d-line-soft);
}
.booking-card .row:last-child { border: 0; }
.booking-card .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-d-3); }
.booking-card .val { font-size: 13px; color: white; margin-top: 3px; }
.booking-card .row.was { background: rgba(192,57,43,0.05); }
.booking-card .row.was .val { color: var(--ink-on-d-2); text-decoration: line-through; }
.booking-card .row.now { background: rgba(74,111,227,0.06); border-left: 3px solid var(--w-blue); }

/* === MIDDLE COLUMN === */

.live-call-bar {
  margin: 16px 18px 0;
  padding: 14px 16px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 12px;
  display: flex; align-items: center; gap: 14px;
}
.live-call-bar .av {
  width: 44px; height: 44px; border-radius: 999px;
  overflow: hidden; flex-shrink: 0;
}
.live-call-bar .av img { width: 100%; height: 100%; object-fit: cover; }
.live-call-bar .who .name { font-size: 14px; font-weight: 600; color: white; }
.live-call-bar .who .role { font-size: 11.5px; color: var(--ink-on-d-3); margin-top: 1px; }
.live-call-bar .meta {
  margin-left: auto;
  display: flex; gap: 16px; align-items: center;
}
.live-call-bar .meta .item {
  display: flex; flex-direction: column; align-items: flex-end;
}
.live-call-bar .meta .item .k {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-on-d-3);
}
.live-call-bar .meta .item .v {
  font-size: 12.5px; color: white; font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.live-call-bar .listening {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(74,111,227,0.12);
  border: 1px solid rgba(74,111,227,0.3);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: #B6C5F5;
  letter-spacing: 0.04em;
}

/* Listening waveform */
.waveform {
  display: flex; align-items: center; gap: 2px;
  height: 14px;
}
.waveform span {
  display: block;
  width: 2px;
  background: #B6C5F5;
  border-radius: 1px;
  animation: wf 1.2s infinite ease-in-out;
}
.waveform span:nth-child(1) { animation-delay: 0s;    height: 6px; }
.waveform span:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.waveform span:nth-child(3) { animation-delay: 0.3s;  height: 8px; }
.waveform span:nth-child(4) { animation-delay: 0.45s; height: 14px; }
.waveform span:nth-child(5) { animation-delay: 0.6s;  height: 6px; }
@keyframes wf {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Transcript */
.transcript {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.transcript::-webkit-scrollbar { width: 6px; }
.transcript::-webkit-scrollbar-thumb { background: var(--d-bg-3); border-radius: 3px; }

.t-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  animation: bubbleIn 0.35s ease both;
}
.t-row .meta {
  display: flex; flex-direction: column;
  align-items: flex-end;
  font-size: 10.5px;
  color: var(--ink-on-d-3);
  letter-spacing: 0.04em;
}
.t-row .meta .who {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t-row .meta .t { font-family: var(--font-mono); margin-top: 2px; }
.t-row.who-rep   .meta .who { color: #B6C5F5; }
.t-row.who-sarah .meta .who { color: #F5C5C8; }
.t-row.who-system .meta .who { color: var(--ink-on-d-3); }
.t-row .body {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-on-d);
  padding: 10px 14px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 10px;
  border-top-left-radius: 3px;
}
.t-row.who-rep .body { border-left: 2px solid var(--w-blue); }
.t-row.who-sarah .body { border-left: 2px solid var(--ek-red); }
.t-row.who-system {
  grid-template-columns: 1fr;
}
.t-row.who-system .body {
  background: rgba(74,111,227,0.06);
  border: 1px dashed rgba(74,111,227,0.3);
  font-size: 12px;
  color: var(--ink-on-d-2);
  padding: 8px 12px;
}
.t-row.who-system .body::before {
  content: "✦ ";
  color: var(--w-blue);
  font-weight: 700;
}

/* Typing indicator in transcript */
.t-row .body.is-typing { color: var(--ink-on-d-3); }

/* === RIGHT COLUMN, Co-pilot === */

.copilot-pane {
  display: flex; flex-direction: column;
  min-height: 0;
}

.copilot-status {
  margin: 16px 18px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(74,111,227,0.08), rgba(123,111,227,0.08));
  border: 1px solid rgba(74,111,227,0.25);
  border-radius: 12px;
}
.copilot-status .head {
  display: flex; align-items: center; gap: 10px;
}
.copilot-status .head .ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--w-blue), var(--w-purple));
  display: grid; place-items: center;
  flex-shrink: 0;
}
.copilot-status .head .ttl { font-size: 13px; font-weight: 600; color: white; }
.copilot-status .head .sub { font-size: 11px; color: var(--ink-on-d-3); margin-top: 1px; }
.copilot-status .listening-row {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(74,111,227,0.12);
  border-radius: 8px;
  font-size: 11.5px;
  color: #B6C5F5;
  font-weight: 500;
}

/* Co-pilot scroll area */
.copilot-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 18px;
}
.copilot-scroll::-webkit-scrollbar { width: 6px; }
.copilot-scroll::-webkit-scrollbar-thumb { background: var(--d-bg-3); border-radius: 3px; }

/* A "card" is one suggestion from the assistant */
.cp-card {
  margin: 18px 18px 0;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 12px;
  padding: 14px 16px;
  animation: bubbleIn 0.4s ease both;
}
.cp-card.is-new {
  border-color: rgba(74,111,227,0.45);
  box-shadow: 0 0 0 3px rgba(74,111,227,0.1);
}
.cp-card .head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.cp-card .head .typ {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
.cp-card .head .typ.recommend { background: rgba(74,111,227,0.18); color: #B6C5F5; }
.cp-card .head .typ.context   { background: rgba(45,166,124,0.18); color: #6EE2A8; }
.cp-card .head .typ.action    { background: rgba(200,165,91,0.18); color: #E0C788; }
.cp-card .head .typ.alert     { background: rgba(192,57,43,0.18); color: #FF8E80; }
.cp-card .head .typ.guard     { background: rgba(123,111,227,0.18); color: #C4BCFC; }
.cp-card .head .src {
  margin-left: auto;
  font-size: 10px; color: var(--ink-on-d-3);
}
.cp-card .ttl {
  font-size: 13.5px; font-weight: 600; color: white; line-height: 1.35;
}
.cp-card .body {
  margin-top: 6px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-on-d-2);
}
.cp-card .body strong { color: white; font-weight: 600; }

/* Inline source pills */
.src-pills {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.src-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--d-bg-3);
  border: 1px solid var(--d-line);
  color: var(--ink-on-d-2);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Card actions */
.cp-actions {
  display: flex; gap: 6px;
  margin-top: 12px;
}
.cp-act {
  flex: 1;
  padding: 7px 10px;
  font-size: 11.5px; font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
}
.cp-act.primary {
  background: linear-gradient(135deg, var(--w-blue), var(--w-purple));
  color: white;
  border: 0;
}
.cp-act.ghost {
  background: transparent;
  color: var(--ink-on-d-2);
  border: 1px solid var(--d-line);
}

/* Genesys card */
.cp-card.genesys {
  background: var(--d-bg-2);
  border-left: 3px solid #FF6B00;
}
.cp-card.genesys .src-pill {
  border-color: rgba(255,107,0,0.35);
  background: rgba(255,107,0,0.1);
  color: #FFB280;
}

/* Guardrail */
.cp-card.guardrail {
  background: rgba(123,111,227,0.05);
  border-color: rgba(123,111,227,0.3);
}

/* Ancillary recommendation */
.cp-anc {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  background: var(--d-bg-3);
  border-radius: 8px;
  align-items: center;
}
.cp-anc .img {
  width: 60px; height: 50px; border-radius: 6px;
  background: linear-gradient(135deg, #4d89ff 0%, #c8a55b 100%);
  display: grid; place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.cp-anc .body .ttl { font-size: 12px; font-weight: 600; color: white; }
.cp-anc .body .sub { font-size: 11px; color: var(--ink-on-d-3); margin-top: 2px; }
.cp-anc .body .price { font-size: 11px; color: var(--w-aqua); margin-top: 2px; font-weight: 600; }

/* Genesys execution row */
.gen-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 12px;
}
.gen-row .ix {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255,107,0,0.15);
  border: 1px solid rgba(255,107,0,0.4);
  color: #FFB280;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.gen-row .body { flex: 1; min-width: 0; }
.gen-row .body .l1 { color: white; font-weight: 500; }
.gen-row .body .l2 { color: var(--ink-on-d-3); font-size: 11px; }
.gen-row .ok { color: var(--good); font-size: 14px; }

/* Bottom assistant input */
.assistant-input {
  margin: 0 18px 16px;
  padding: 10px 12px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
}
.assistant-input .ico { color: var(--ink-on-d-3); font-size: 14px; }
.assistant-input .placeholder {
  flex: 1;
  font-size: 12px; color: var(--ink-on-d-3);
}
.assistant-input .keys {
  display: flex; gap: 4px;
}
.assistant-input .keys kbd {
  font-size: 10px; font-family: var(--font-mono);
  padding: 2px 6px;
  background: var(--d-bg-3);
  border: 1px solid var(--d-line);
  border-radius: 4px;
  color: var(--ink-on-d-2);
}

/* ====================================================================
   LIGHT THEME OVERRIDE, Marcus copilot console
   Scoped to .assistant-canvas so the director (right panel) stays dark.
   Re-aliases the dark surface/ink vars to light values, then patches
   hardcoded white text + tints tuned for dark backgrounds.
   ==================================================================== */

.assistant-canvas {
  --d-bg:        #F4F5F8;
  --d-bg-2:      #FFFFFF;
  --d-bg-3:      #ECEEF2;
  --d-line:      #E4E6EA;
  --d-line-soft: #EFF1F4;
  --ink-on-d:    #14161B;
  --ink-on-d-2:  #4A4F57;
  --ink-on-d-3:  #6B6F76;
}

/* Top-bar chrome */
.assistant-canvas .app-topbar { background: #FFFFFF; }
.assistant-canvas .app-topbar .brand .name,
.assistant-canvas .app-topbar .nav-item.active,
.assistant-canvas .app-topbar .rep-chip .name {
  color: #14161B;
}

/* Cards, headings, names, flip white -> ink */
.assistant-canvas .dna-head .who .name,
.assistant-canvas .dna-stat .num,
.assistant-canvas .booking-card .val,
.assistant-canvas .live-call-bar .who .name,
.assistant-canvas .live-call-bar .meta .item .v,
.assistant-canvas .copilot-status .head .ttl,
.assistant-canvas .cp-card .ttl,
.assistant-canvas .cp-card .body strong,
.assistant-canvas .cp-anc .body .ttl,
.assistant-canvas .gen-row .body .l1,
.assistant-canvas .t-row.who-rep .body,
.assistant-canvas .t-row.who-sarah .body {
  color: #14161B;
}

/* Soft surfaces sit on the new paper bg */
.assistant-canvas .dna-card,
.assistant-canvas .booking-card,
.assistant-canvas .live-call-bar,
.assistant-canvas .cp-card,
.assistant-canvas .t-row .body,
.assistant-canvas .assistant-input {
  box-shadow: 0 1px 2px rgba(20,22,27,0.04);
}

/* Genesys (orange-accent) card */
.assistant-canvas .cp-card.genesys { background: #FFFFFF; }

/* Guardrail card */
.assistant-canvas .cp-card.guardrail {
  background: rgba(123,111,227,0.06);
  border-color: rgba(123,111,227,0.28);
}

/* Tint chips were tuned for dark; redo for light */
.assistant-canvas .cp-card .head .typ.recommend { background: rgba(74,111,227,0.12);  color: #2A4FBF; }
.assistant-canvas .cp-card .head .typ.context   { background: rgba(45,166,124,0.14);  color: #1B7A4E; }
.assistant-canvas .cp-card .head .typ.action    { background: rgba(200,165,91,0.18);  color: #8A6A1F; }
.assistant-canvas .cp-card .head .typ.alert     { background: rgba(192,57,43,0.10);   color: #B71019; }
.assistant-canvas .cp-card .head .typ.guard     { background: rgba(123,111,227,0.14); color: #4B3DBF; }

/* Transcript "who" labels need darker tints on light */
.assistant-canvas .t-row.who-rep   .meta .who { color: #2A4FBF; }
.assistant-canvas .t-row.who-sarah .meta .who { color: #B71019; }

/* System-event row in transcript */
.assistant-canvas .t-row.who-system .body {
  background: rgba(74,111,227,0.06);
  border: 1px dashed rgba(74,111,227,0.32);
  color: #2A4FBF;
}

/* Listening row (live-call bar) */
.assistant-canvas .live-call-bar .listening,
.assistant-canvas .copilot-status .listening-row {
  background: rgba(74,111,227,0.10);
  border-color: rgba(74,111,227,0.28);
  color: #2A4FBF;
}
.assistant-canvas .live-call-bar .listening span { color: #2A4FBF; }

/* Live-call bar surface */
.assistant-canvas .live-call-bar { background: #FFFFFF; }

/* Copilot status panel */
.assistant-canvas .copilot-status {
  background: linear-gradient(135deg, rgba(74,111,227,0.06), rgba(123,111,227,0.06));
  border-color: rgba(74,111,227,0.22);
}

/* Anchor-card image swatch */
.assistant-canvas .cp-anc .body .ttl { color: #14161B; }

/* Genesys row label */
.assistant-canvas .gen-row .body .l1 { color: #14161B; }

/* Booking diff strikethrough, keep readable */
.assistant-canvas .booking-card .row.was { background: rgba(192,57,43,0.04); }
.assistant-canvas .booking-card .row.now { background: rgba(74,111,227,0.05); }

/* Live pill (top-bar) */
.assistant-canvas .app-topbar .case-id .pill-live {
  background: rgba(215,25,33,0.08);
  border-color: rgba(215,25,33,0.30);
  color: #B71019;
}
.assistant-canvas .app-topbar .case-id .pill-live::before { background: #D71921; }

/* Avatar ring on DNA card, tone down on white */
.assistant-canvas .dna-head .av { border-color: rgba(74,111,227,0.55); }

/* Status-tier chip (gold) */
.assistant-canvas .dna-head .who .meta .tier {
  background: rgba(200,165,91,0.18);
  border-color: rgba(200,165,91,0.45);
  color: #8A6A1F;
}

/* Scrollbars, neutral on light */
.assistant-canvas .transcript::-webkit-scrollbar-thumb,
.assistant-canvas .copilot-scroll::-webkit-scrollbar-thumb {
  background: #D4D6DA;
}

/* ====================================================================
   BOOKING CARD v2, flight-strip diff
   ==================================================================== */
.booking-card.v2 {
  margin: 0 16px 14px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 14px;
  overflow: visible;
  padding: 0;
  flex-shrink: 0;
}
.booking-card.v2 .bk-row {
  padding: 14px 16px 16px;
  position: relative;
  flex-shrink: 0;
}
.booking-card.v2 .bk-row + .bk-row {
  border-top: 1px dashed var(--d-line);
}
.booking-card.v2 .bk-row.was { background: transparent; }
.booking-card.v2 .bk-row.now {
  background: rgba(74,111,227,0.04);
}
.booking-card.v2 .bk-row.now::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--w-blue);
}

.booking-card.v2 .bk-status {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.booking-card.v2 .bk-dot {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #C0392B;
}
.booking-card.v2 .bk-dot.ok { background: transparent; color: #2EA06C; }
.booking-card.v2 .bk-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-on-d);
}
.booking-card.v2 .bk-row.was .bk-label { color: #C0392B; }
.booking-card.v2 .bk-row.now .bk-label { color: var(--w-blue); }
.booking-card.v2 .bk-when {
  margin-left: auto;
  font-size: 11px; color: var(--ink-on-d-3);
  font-family: var(--font-mono);
}

.booking-card.v2 .bk-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.booking-card.v2 .bk-end {
  text-align: left;
  min-width: 44px;
  white-space: nowrap;
}
.booking-card.v2 .bk-end.r { text-align: right; }
.booking-card.v2 .bk-time {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 600;
  color: var(--ink-on-d);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.booking-card.v2 .bk-row.was .bk-time {
  color: var(--ink-on-d-2);
  text-decoration: line-through;
  text-decoration-color: rgba(192,57,43,0.5);
}
.booking-card.v2 .bk-sup {
  font-size: 9px; font-weight: 600;
  color: var(--w-blue);
  margin-left: 2px;
  vertical-align: super;
}
.booking-card.v2 .bk-iata {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-on-d-3);
  margin-top: 4px;
}

.booking-card.v2 .bk-line {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 0 4px;
  min-width: 0;
  width: 100%;
}
.booking-card.v2 .bk-flight {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  color: var(--ink-on-d-2);
  letter-spacing: 0.06em;
}
.booking-card.v2 .bk-track {
  position: relative;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--ink-on-d-3) 0 4px, transparent 4px 8px);
  opacity: 0.55;
}
.booking-card.v2 .bk-row.now .bk-track {
  background: var(--w-blue);
  opacity: 0.5;
  height: 1.5px;
}
.booking-card.v2 .bk-track-x,
.booking-card.v2 .bk-track-plane {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--d-bg-2);
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
}
.booking-card.v2 .bk-row.was .bk-track-x::before {
  content: "✕"; color: #C0392B; font-weight: 700; font-size: 10px;
}
.booking-card.v2 .bk-track-plane { color: var(--w-blue); }
.booking-card.v2 .bk-duration {
  font-size: 10px;
  color: var(--ink-on-d-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.booking-card.v2 .bk-row.was .bk-duration { color: #C0392B; }

.booking-card.v2 .bk-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--d-line-soft);
}
.booking-card.v2 .bk-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--ink-on-d-2);
  font-weight: 500;
  line-height: 1.2;
}
.booking-card.v2 .bk-tag svg { color: var(--ink-on-d-3); flex-shrink: 0; }

/* ====================================================================
   BRIEF CARD, what Sarah told Hala
   ==================================================================== */
.brief-card {
  margin: 0 16px 14px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 14px;
}
.brief-card .brief-quote {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--d-bg);
  border-bottom: 1px solid var(--d-line-soft);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-d-3);
}
.brief-card .brief-quote-mark { color: var(--w-blue); opacity: 0.75; }
.brief-card .brief-list {
  list-style: none;
  margin: 0; padding: 4px 0;
}
.brief-card .brief-list li {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  padding: 10px 14px;
  align-items: start;
}
.brief-card .brief-list li + li { border-top: 1px solid var(--d-line-soft); }
.brief-card .brief-k {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-d-3);
}
.brief-card .brief-v {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-on-d-2);
}
.brief-card .brief-v strong {
  color: var(--ink-on-d);
  font-weight: 600;
}

/* ============================================================
   APPROVAL QUEUE (middle column, replaces the live transcript)
   ============================================================ */

.assistant-canvas .app-topbar .case-id .pill-queue {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(110,226,168,0.10);
  border: 1px solid rgba(110,226,168,0.30);
  color: #4FB587;
}
.assistant-canvas .app-topbar .case-id .pill-queue-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #4FB587;
  box-shadow: 0 0 0 3px rgba(79,181,135,0.18);
  animation: blink 1.6s infinite;
}

/* Header above the approval card */
.aq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--d-line);
}
.aq-h-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-on-d-3);
}
.aq-h-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-on-d);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.aq-h-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-on-d-2);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.aq-h-tag {
  background: rgba(200,165,91,0.14);
  color: #C8A55B;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
}
.aq-sep { color: var(--ink-on-d-3); }
.aq-h-sla {
  font-family: var(--font-mono);
  color: var(--ink-on-d-2);
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}

/* Mini queue list */
.aq-mini {
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 260px;
}
.aq-mini-row {
  display: grid;
  grid-template-columns: 14px 36px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  padding: 3px 0;
  color: var(--ink-on-d-2);
}
.aq-mini-row + .aq-mini-row {
  border-top: 1px solid var(--d-line-soft);
  margin-top: 1px;
  padding-top: 5px;
}
.aq-mini-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--ink-on-d-3);
  justify-self: center;
}
.aq-mini-dot.live {
  background: #6EE2A8;
  box-shadow: 0 0 0 3px rgba(110,226,168,0.18);
}
.aq-mini-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-on-d-3);
}
.aq-mini-c {
  color: var(--ink-on-d);
}

/* The big approval card itself */
.aq-card {
  margin: 14px 18px 18px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  position: relative;
}
.aq-card.is-pre {
  opacity: 0.55;
}
.aq-card.is-in {
  animation: aq-slide-in 0.45s ease-out both;
}
@keyframes aq-slide-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.aq-card.is-done {
  border-color: rgba(110,226,168,0.40);
  box-shadow: 0 0 0 1px rgba(110,226,168,0.25), 0 6px 18px rgba(0,0,0,0.20);
}

.aq-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--d-line-soft);
}
.aq-from {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aq-from-av {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(200,165,91,0.18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(200,165,91,0.40);
}
.aq-from-av img { width: 22px; height: 22px; object-fit: contain; }
.aq-from-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-on-d);
}
.aq-from-sub {
  font-size: 11px;
  color: var(--ink-on-d-3);
  font-family: var(--font-mono);
}
.aq-priority {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #FF8A80;
  background: rgba(255,138,128,0.10);
  border: 1px solid rgba(255,138,128,0.30);
  padding: 4px 10px;
  border-radius: 999px;
}
.aq-priority.neutral {
  color: #6EE2A8;
  background: rgba(110,226,168,0.10);
  border-color: rgba(110,226,168,0.30);
}
.aq-prio-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #FF6B5C;
  animation: blink 1.4s infinite;
}
.aq-prio-dot.ok {
  background: #6EE2A8;
  box-shadow: 0 0 0 3px rgba(110,226,168,0.18);
  animation: none;
}

/* Sections inside the card */
.aq-section {
  margin-top: 14px;
}
.aq-sec-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-d-3);
  margin-bottom: 8px;
}
.aq-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-on-d-2);
  margin: 0 0 8px 0;
  text-wrap: pretty;
}
.aq-summary strong {
  color: var(--ink-on-d);
  font-weight: 600;
}
.aq-summary .mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Action rows (auto + ask) */
.aq-action {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--d-line);
  background: var(--d-bg-1);
}
.aq-action.auto { border-color: rgba(110,226,168,0.30); }
.aq-action.ask {
  border-color: rgba(200,165,91,0.45);
  background: rgba(200,165,91,0.06);
}
.aq-act-ico {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.aq-act-ico.ok { background: rgba(110,226,168,0.18); color: #6EE2A8; }
.aq-act-ico.ask { background: rgba(200,165,91,0.22); color: #C8A55B; }
.aq-act-ttl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-on-d);
  letter-spacing: -0.005em;
}
.aq-act-sub {
  font-size: 11.5px;
  color: var(--ink-on-d-3);
  margin-top: 2px;
}
.aq-act-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6EE2A8;
  background: rgba(110,226,168,0.12);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.aq-act-tag.warn {
  color: #C8A55B;
  background: rgba(200,165,91,0.16);
}

/* Marcus thinking-out-loud */
.aq-thinking {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid rgba(200,165,91,0.50);
  background: rgba(200,165,91,0.04);
  border-radius: 0 8px 8px 0;
}
.aq-thinking-av {
  width: 30px; height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--d-line);
}
.aq-thinking-av img { width: 100%; height: 100%; object-fit: cover; }
.aq-thinking-who {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-on-d-3);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.aq-thinking-line {
  font-size: 12.5px;
  color: var(--ink-on-d-2);
  line-height: 1.5;
}
.aq-thinking-line.emph {
  color: var(--ink-on-d);
  font-weight: 500;
  margin-top: 4px;
}

/* Action bar at the bottom of the card */
.aq-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--d-line-soft);
}
.aq-actions-spacer { flex: 1; }
.aq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--d-line);
  background: var(--d-bg-1);
  color: var(--ink-on-d);
  cursor: pointer;
  transition: all 0.15s ease;
}
.aq-btn:hover { border-color: rgba(255,255,255,0.30); }
.aq-btn.primary {
  background: #1B7A4A;
  border-color: #1B7A4A;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 2px 6px rgba(27,122,74,0.30);
}
.aq-btn.primary:hover { background: #229155; border-color: #229155; }
.aq-btn.danger {
  color: #FF8A80;
  border-color: rgba(255,138,128,0.30);
}
.aq-btn.ghost { color: var(--ink-on-d-2); }
.aq-btn.link {
  background: transparent;
  border-color: transparent;
  color: var(--ink-on-d-3);
  font-weight: 500;
  font-size: 11.5px;
}
.aq-btn.link:hover { color: var(--ink-on-d); }
.aq-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70);
  margin-left: 2px;
}
.aq-btn.primary .aq-kbd {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.90);
}

/* Decided state */
.aq-decided {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.aq-decided-ico {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(110,226,168,0.18);
  color: #6EE2A8;
}
.aq-decided.is-firing .aq-decided-ico {
  animation: aq-pulse-ok 1.4s ease-out;
}
@keyframes aq-pulse-ok {
  0% { box-shadow: 0 0 0 0 rgba(110,226,168,0.50); }
  100% { box-shadow: 0 0 0 14px rgba(110,226,168,0.00); }
}
.aq-decided-ttl {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-on-d);
}
.aq-decided-sub {
  font-size: 11.5px;
  color: var(--ink-on-d-3);
  margin-top: 1px;
}

/* ===== Right column extras: policy envelope, history, peer ===== */
.env-row {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--ink-on-d-3);
  padding: 4px 0;
}
.env-row.is-active {
  color: var(--ink-on-d);
}
.env-row.is-active .env-fill {
  background: linear-gradient(90deg, #C8A55B, #E5C57A);
}
.env-bar {
  height: 5px;
  background: var(--d-bg-1);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--d-line-soft);
}
.env-fill {
  display: block;
  height: 100%;
  background: rgba(200,165,91,0.40);
  border-radius: 999px;
}
.env-row .env-r { text-align: right; font-family: var(--font-mono); font-size: 10.5px; }

.hist-list { list-style: none; margin: 0; padding: 0; }
.hist-list li {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--ink-on-d-2);
  border-top: 1px solid var(--d-line-soft);
}
.hist-list li:first-child { border-top: none; }
.hist-list li.is-now {
  color: var(--ink-on-d);
  font-weight: 500;
}
.hist-list li.is-now .hist-d {
  color: #C8A55B;
  font-weight: 600;
}
.hist-d {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-on-d-3);
}
.hist-g {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-on-d-3);
}

.peer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.peer-cell {
  background: var(--d-bg-1);
  border: 1px solid var(--d-line-soft);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.peer-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-on-d);
  letter-spacing: -0.02em;
}
.peer-cell:first-child .peer-num { color: #6EE2A8; }
.peer-lbl {
  font-size: 10.5px;
  color: var(--ink-on-d-3);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ====================================================================
   AQ-CHECKS, pre-commit micro-facts under the "needs approval" action
   ==================================================================== */
.aq-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.aq-check {
  background: var(--d-bg-1);
  border: 1px solid var(--d-line-soft);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.aq-chk-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-d-3);
}
.aq-chk-v {
  font-size: 11.5px;
  color: var(--ink-on-d-2);
  line-height: 1.35;
}
.aq-chk-v strong {
  color: #C8A55B;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ====================================================================
   QA BLOCK, Sarah's policy questions, Hala's grounded answers
   ==================================================================== */
.qa-block {
  border-top: 1px solid var(--d-line-soft);
  padding: 10px 0;
}
.qa-block:first-of-type { border-top: none; padding-top: 6px; }
.qa-block:last-of-type { padding-bottom: 0; }
.qa-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-on-d);
  line-height: 1.45;
  margin-bottom: 4px;
  font-style: italic;
}
.qa-q::before {
  content: "Q. ";
  color: var(--w-blue);
  font-style: normal;
  font-weight: 700;
}
.qa-a {
  font-size: 11.5px;
  color: var(--ink-on-d-2);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.qa-a::before {
  content: "A.";
  position: absolute;
  left: 0;
  color: #6EE2A8;
  font-weight: 700;
}
.qa-src {
  margin-top: 4px;
  padding-left: 14px;
  font-size: 10px;
  color: var(--ink-on-d-3);
  letter-spacing: 0.02em;
}