/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — HUB GROUP BRAND
   Frost #ffffff · Fog #edf1f3 · Coal #231f20 · Pine #003831
   Forest #00503a · Evergreen #028353 · Mint #bfffbf

   Layer 1  raw brand literals (never used directly by components)
   Layer 2  roles — accent / surface / ink / border
   Layer 3  semantics — pos / neg / warn / note (state only)
   Layer 4  categorical — cat-1..10 for badges that must stay apart
   Layer 5  back-compat aliases so no other stylesheet needs editing

   Green is the brand AND the "positive number" hue, so they are
   separated by DEPTH: Pine/Forest carry chrome, Evergreen carries
   data. Every delta also keeps its sign, so nothing depends on
   colour alone.
   ══════════════════════════════════════════════════════════════════ */
:root,
html[data-theme='light'] {
  /* ── layer 1: raw brand ─────────────────────────────────────── */
  --frost: #ffffff;
  --fog: #edf1f3;
  --coal: #231f20;
  --pine: #003831;
  --forest: #00503a;
  --evergreen: #028353;
  --mint: #bfffbf;

  /* ── layer 2: roles ───────────────────────────────────────────
     WHY FOREST AND NOT EVERGREEN CARRIES THE ACCENT
     Evergreen measures 4.21 against --accent-soft, which is under
     WCAG AA. That pairing — accent text on its own tint — is the
     single most repeated pattern in this app: every chip, the Live
     badge, the quote rung. Forest clears it at 8.34, and clears
     white at 9.51 and the Fog canvas at 8.37, so the accent is safe
     in every role it actually takes.

     Evergreen is not lost. It stays the brighter data green below
     (--accent-bright and --pos), which is also what keeps brand
     chrome and "positive number" readable as different things.
     To go back to Evergreen as the accent, swap the next two lines
     for `--accent: var(--evergreen); --accent-hover: var(--forest);`
     — nothing else needs touching.
     ──────────────────────────────────────────────────────────── */
  --accent: var(--forest);
  --accent-hover: var(--pine);
  /* FILLS AND GRAPHICS ONLY — 4.22 on the Fog canvas, so it must not
     carry text. Use it for bars, gradients, chart strokes and the
     mint gradient; use --accent for anything readable. */
  --accent-bright: var(--evergreen);
  --accent-deep: var(--pine);
  --accent-soft: #e6f3ee;
  --accent-tint: #dceee7;
  --accent-border: #8dc7b2;
  --accent-mint: var(--mint);
  --on-accent: #ffffff;

  --canvas: var(--fog);
  --surface: var(--frost);
  --surface-1: #f7f9fa;
  --surface-2: #eef2f4;
  --surface-3: #e3e9ec;

  --ink: var(--coal);
  --ink-2: #565455;
  --ink-3: #6a686a;

  --border: #dfe5e8;
  --border-strong: #c7d1d5;

  /* ── layer 3: semantics — state only, never chrome ──────────── */
  /* Evergreen exactly (#028353) measures 4.22 on the Fog canvas and
     4.21 on its own tint — under AA in both cases, and deltas are
     read on both. --pos sits in the semantics layer, not the brand
     layer, so it is Evergreen darkened one step to clear AA
     everywhere (4.87 on Fog, 5.21 on its tint) while staying
     visibly the brighter data green next to Forest chrome. */
  --pos: #02784c;
  --pos-soft: #f2faf6;
  --pos-border: #8dc7b2;
  --neg: #b3261e;
  --neg-soft: #fbeae8;
  --neg-border: #e8a49d;
  --warn: #8f5c0d;
  --warn-soft: #fcf2e0;
  --warn-border: #e0bd7e;
  --note: #2563a6;
  --note-soft: #e8f0f8;
  --note-border: #9dbfdf;

  /* ── layer 4: categorical ───────────────────────────────────────
     Rule-type badges and client badges must stay distinguishable, so
     they cannot all collapse to the accent. This is a muted,
     brand-adjacent ramp anchored on Evergreen; every value clears
     WCAG AA on both --surface and --canvas.
     ──────────────────────────────────────────────────────────── */
  --cat-1: #00503a;  --cat-1-soft: #e6f3ee;  --cat-1-border: #a3d4be;
  --cat-2: #0d6e75;  --cat-2-soft: #e4f1f2;  --cat-2-border: #a2cdd1;
  --cat-3: #1f5fa8;  --cat-3-soft: #e7eef7;  --cat-3-border: #a8c3e0;
  --cat-4: #4f46a8;  --cat-4-soft: #ecebf6;  --cat-4-border: #b9b5e0;
  --cat-5: #7a3d8f;  --cat-5-soft: #f2eaf4;  --cat-5-border: #cdaed6;
  --cat-6: #a3266b;  --cat-6-soft: #f8e8f0;  --cat-6-border: #dfa5c3;
  --cat-7: #b3402a;  --cat-7-soft: #f9ebe8;  --cat-7-border: #e3aea1;
  --cat-8: #8a5a0c;  --cat-8-soft: #f6efe1;  --cat-8-border: #d9bd8a;
  --cat-9: #5b6b12;  --cat-9-soft: #eff2e2;  --cat-9-border: #bcc78d;
  --cat-10: #4a5a63; --cat-10-soft: #ecf0f2; --cat-10-border: #b3c0c6;

  /* ── type ───────────────────────────────────────────────────────
     Good Headline Pro is a licensed face and cannot be fetched from
     a CDN. Drop the .woff2 files into static_nlp/fonts/ and the
     @font-face block below picks them up with no further changes.
     Until then headlines fall back to Franklin Gothic Demi, which is
     the substitute named in the brand guidelines.
     ──────────────────────────────────────────────────────────── */
  --font-display: 'Good Headline Pro', 'FF Good Headline Pro',
    'Franklin Gothic Demi', 'Franklin Gothic Medium', 'Arial Narrow',
    Arial, sans-serif;
  --font-sans: 'IBM Plex Sans', Verdana, Geneva, Tahoma, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow: 0 1px 3px rgba(35, 31, 32, 0.06), 0 8px 24px rgba(35, 31, 32, 0.06);
  --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.05), 0 4px 12px rgba(35, 31, 32, 0.04);
  --shadow-lg: 0 4px 8px rgba(35, 31, 32, 0.05), 0 16px 44px rgba(35, 31, 32, 0.10);

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── layer 5: back-compat aliases ───────────────────────────────
     344 references across the app point at these names. Keeping them
     as aliases means conflicts.css, unified.css, input-ui.css,
     shippers.css, fuel-admin.css and the load-monitor modules need
     no edits at all.
     ──────────────────────────────────────────────────────────── */
  --navy: var(--ink);
  --navy-800: var(--surface-1);
  --navy-700: var(--surface-2);
  --navy-600: var(--border);
  --navy-500: var(--ink-3);

  --amber: var(--accent);
  --amber-light: var(--accent-border);
  --amber-dark: var(--accent-hover);
  --amber-glow: var(--accent-soft);
  --border-amber: var(--accent-border);
  --accent-primary: var(--accent);

  --emerald: var(--accent);
  --white: #ffffff;

  --text: var(--ink);
  --text-primary: var(--ink);
  --text-pri: var(--ink);
  --text-sec: var(--ink-2);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);

  --success: var(--pos);
  --danger: var(--neg);
  --error: var(--neg);
  --warning: var(--warn);
  --info: var(--note);

  /* local token families defined inside other files, repointed here
     so they follow the theme instead of shadowing it */
  --lc-bg: var(--surface);
  --lc-border: var(--border);
  --lc-text: var(--ink);
  --lc-muted: var(--ink-3);
  --lc-accent: var(--accent);
  --lc-btn-hover: var(--surface-2);
  --lgc-bg: var(--surface);
  --lgc-text: var(--ink);
  --lgc-border: var(--border);
  --lgc-muted: var(--ink-3);
  --lgc-stat-accent: var(--accent);
}

html[data-theme='dark'] {
  /* The brand sheet specifies no dark values. This ramp is derived
     from Pine — the surfaces are green-black rather than neutral so
     dark mode still reads as the same brand. */
  --accent: #46c98c;
  --accent-hover: #7fe0b0;
  --accent-bright: #7fe0b0;
  --accent-deep: #bfffbf;
  --accent-soft: #12291f;
  --accent-tint: #173326;
  --accent-border: #028353;
  --accent-mint: #bfffbf;
  --on-accent: #04120c;

  --canvas: #0a1310;
  --surface: #0f1a16;
  --surface-1: #13201b;
  --surface-2: #182720;
  --surface-3: #21332a;

  --ink: #eef3f0;
  --ink-2: #a3b3ac;
  --ink-3: #93a39c;

  --border: #1d2b25;
  --border-strong: #2e453b;

  --pos: #46c98c;
  --pos-soft: #12291f;
  --pos-border: #028353;
  --neg: #f87171;
  --neg-soft: #2c1717;
  --neg-border: #7a3230;
  --warn: #fbbf24;
  --warn-soft: #2b2210;
  --warn-border: #7a5c14;
  --note: #7daee0;
  --note-soft: #142333;
  --note-border: #2f5478;

  --cat-1: #46c98c;  --cat-1-soft: #12291f;  --cat-1-border: #1f5a41;
  --cat-2: #3fb8c0;  --cat-2-soft: #10262a;  --cat-2-border: #1d5158;
  --cat-3: #6ba6e8;  --cat-3-soft: #12212f;  --cat-3-border: #274a6b;
  --cat-4: #9a90ee;  --cat-4-soft: #1a1a30;  --cat-4-border: #3b3873;
  --cat-5: #c58ad6;  --cat-5-soft: #24182a;  --cat-5-border: #543463;
  --cat-6: #ef7fb0;  --cat-6-soft: #2b1521;  --cat-6-border: #6b304b;
  --cat-7: #ee8a72;  --cat-7-soft: #2b1813;  --cat-7-border: #6b3730;
  --cat-8: #dda63a;  --cat-8-soft: #281e0c;  --cat-8-border: #63481a;
  --cat-9: #a8bf3e;  --cat-9-soft: #1e230d;  --cat-9-border: #4b551c;
  --cat-10: #93a8b3; --cat-10-soft: #161e21;  --cat-10-border: #3b4a51;

  --shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 22px 60px rgba(0, 0, 0, 0.45);

  /* back-compat aliases */
  --navy: var(--canvas);
  --navy-800: var(--surface);
  --navy-700: var(--surface-2);
  --navy-600: var(--surface-3);
  --navy-500: var(--ink-3);

  --amber: var(--accent);
  --amber-light: var(--accent-hover);
  --amber-dark: var(--accent-border);
  --amber-glow: var(--accent-soft);
  --border-amber: var(--accent-border);
  --accent-primary: var(--accent);

  --emerald: var(--accent);
  --white: var(--ink);

  --text: var(--ink);
  --text-primary: var(--ink);
  --text-pri: var(--ink);
  --text-sec: var(--ink-2);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);

  --success: var(--pos);
  --danger: var(--neg);
  --error: var(--neg);
  --warning: var(--warn);
  --info: var(--note);

  --lc-bg: var(--surface);
  --lc-border: var(--border);
  --lc-text: var(--ink);
  --lc-muted: var(--ink-3);
  --lc-accent: var(--accent);
  --lc-btn-hover: var(--surface-2);
  --lgc-bg: var(--surface);
  --lgc-text: var(--ink);
  --lgc-border: var(--border);
  --lgc-muted: var(--ink-3);
  --lgc-stat-accent: var(--accent);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Condition fields section */
.synthetic-condition-fields {
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.synthetic-field-pill.pill-condition {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

.synthetic-field-pill.pill-condition .field-name {
  color: var(--accent);
}

.synthetic-field-pill.pill-missing {
  background: var(--warn-soft);
  border-color: var(--warn-border);
  color: var(--warn);
  font-style: italic;
}

.synthetic-field-pill.pill-missing .field-name {
  color: var(--warn);
}

/* ═══════════════════════════════════════════════════════════
   SYNTHETIC LOAD CARDS
   ═══════════════════════════════════════════════════════════ */
.synthetic-load-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.synthetic-load-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.synthetic-load-card.card-match {
  border-left: 3px solid var(--success);
}

.synthetic-load-card.card-no-match {
  border-left: 3px solid var(--danger);
}

.synthetic-load-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.synthetic-load-id {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.synthetic-load-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  flex-wrap: wrap;
}

.route-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.route-city {
  color: var(--text-primary);
}

.synthetic-load-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.synthetic-field-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.78rem;
  color: var(--text-sec);
  line-height: 1.4;
}

.synthetic-field-pill .field-name {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.synthetic-nested-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.synthetic-nested-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  flex-wrap: wrap;
}

.synthetic-nested-row .field-name {
  color: var(--text-muted);
  font-size: 0.74rem;
  min-width: 120px;
  flex-shrink: 0;
}

.synthetic-nested-value {
  color: var(--text-sec);
  word-break: break-word;
}

.synthetic-match-badge {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.synthetic-match-badge.match {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.synthetic-match-badge.no-match {
  background: var(--neg-soft);
  color: var(--neg);
  border: 1px solid var(--neg-border);
}

.synthetic-pricing-impact {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--success);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 6px 12px;
}

.synthetic-failure-reason {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--danger);
  background: var(--neg-soft);
  border: 1px solid var(--neg-border);
  border-radius: 8px;
  padding: 6px 12px;
}

.synthetic-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .synthetic-columns {
    grid-template-columns: 1fr;
  }
}

.synthetic-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.synthetic-column-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.01em;
}

.synthetic-column-title.match-title {
  color: var(--success);
}

.synthetic-column-title.no-match-title {
  color: var(--danger);
}

.synthetic-branch-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  /* Fog is the brand's page canvas. This was var(--navy-800), an alias
     that resolves to --surface-1, so the page sat on an off-white a
     shade lighter than the cards rather than behind them. */
  background: var(--canvas);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme='dark'] body {
  background: var(--ink);
}

/* Focus rings */
*:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--navy-600);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--navy-500);
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--navy-600);
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: var(--navy-500);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.app-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
}

html[data-theme='dark'] .app-header {
  background: rgba(12, 10, 9, 0.80);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  height: 50px !important;
  max-height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.95 !important;
  transition: opacity 0.2s var(--ease-out-expo) !important;
}

.header-logo:hover {
  opacity: 1 !important;
}

.header-brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════════════
   TAB NAVIGATION
   ══════════════════════════════════════════════ */
.tab-nav {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: var(--surface-3);
}

.tab-btn.active {
  background: var(--amber);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--amber-glow);
}

.tab-btn.active svg {
  stroke: #ffffff;
}

.conflict-badge {
  background: var(--danger);
  color: white;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 30px;
  margin-left: 4px;
  border: 2px solid var(--surface-2);
}

.tab-btn.active .conflict-badge {
  background: #ffffff;
  color: var(--danger);
  border-color: var(--amber);
}

/* ══════════════════════════════════════════════
   RULE BUILDER LAYOUT
   ══════════════════════════════════════════════ */
.builder-layout {
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 28px;
  height: calc(100vh - 68px);
}

.chat-panel,
#panel-builder .chat-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow);
}

.preview-panel,
#panel-builder .preview-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: var(--shadow);
}

.chat-panel:hover,
.preview-panel:hover,
#panel-builder .chat-panel:hover,
#panel-builder .preview-panel:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════
   CHAT INTERFACE
   ══════════════════════════════════════════════ */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.welcome-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: auto;
  padding: 48px 24px;
  gap: 14px;
}

.welcome-icon {
  width: 64px;
  height: 64px;
  background: var(--surface-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  margin-bottom: 4px;
  box-shadow: var(--shadow-sm);
}

.welcome-msg h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.welcome-msg p {
  color: var(--text-sec);
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 340px;
}

.welcome-msg em {
  color: var(--amber-light);
  font-style: normal;
}

/* Message bubbles */
.msg {
  display: flex;
  gap: 10px;
  animation: msgIn 0.25s ease;
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.msg-user {
  justify-content: flex-end;
}

.msg-ai {
  justify-content: flex-start;
}

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.msg-ai .msg-avatar {
  background: var(--amber-glow);
  color: var(--amber);
  border: 1px solid var(--border-amber);
}

.msg-user .msg-avatar {
  background: var(--navy-600);
  color: var(--text-sec);
}

.msg-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.55;
}

.msg-ai .msg-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top-left-radius: 4px;
  color: var(--text-primary);
}

.msg-user .msg-bubble {
  background: linear-gradient(135deg, var(--navy-500), var(--ink-2));
  border: 1px solid var(--border);
  border-top-right-radius: 4px;
  color: #ffffff;
}

.msg-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 4px 0;
}

.msg-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  animation: bounce 1.2s infinite;
}

.msg-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.msg-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Input area */
.chat-input-area {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.input-wrapper {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.input-wrapper textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 12px 16px;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.5;
}

.input-wrapper textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.input-wrapper textarea::placeholder {
  color: var(--text-muted);
}

.btn-send {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--amber);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: var(--transition);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.btn-send:hover:not(:disabled) {
  background: var(--amber-light);
  box-shadow: 0 0 16px var(--amber-glow);
  transform: translateY(-1px);
}

.btn-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.input-hint {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ══════════════════════════════════════════════
   PREVIEW PANEL
   ══════════════════════════════════════════════ */
.rule-type-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--amber-glow);
  color: var(--amber);
  border: 1px solid var(--border-amber);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Progress */
.progress-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 0.75rem;
  color: var(--text-sec);
  font-weight: 600;
}

.progress-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber);
}

.progress-bar-track {
  height: 6px;
  background: var(--navy-600);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--amber-dark), var(--amber-light));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px var(--amber-glow);
}

.progress-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.field-chip {
  font-size: 0.68rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.field-chip.present {
  background: var(--accent-soft);
  color: var(--success);
  border: 1px solid var(--accent-border);
}

.field-chip.missing {
  background: var(--navy-600);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Preview card */
.rule-preview-card {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: 16px;
  color: var(--text-muted);
}

.preview-empty svg {
  opacity: 0.25;
}

.preview-empty p {
  font-size: 0.85rem;
  max-width: 240px;
  line-height: 1.6;
}

.summary-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.rule-summary-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.json-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.json-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.json-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  font-family: var(--font-mono);
  color: var(--text-primary);
  white-space: pre;
  max-height: 400px;
  overflow-y: auto;
}

/* Validation */
#validation-messages {
  padding: 0 24px 8px;
  flex-shrink: 0;
}

.val-error {
  background: var(--neg-soft);
  border: 1px solid var(--neg-border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--danger);
  margin-bottom: 6px;
}

.val-warning {
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--warning);
  margin-bottom: 6px;
}

/* Action buttons */
.preview-actions {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.btn-save {
  flex: 1;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--amber-dark), var(--amber));
  border: none;
  border-radius: var(--radius);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  transition: var(--transition);
  animation: pulseIn 0.4s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

@keyframes pulseIn {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.btn-save:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px var(--amber-glow);
  transform: translateY(-1px);
}

.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.3);
  box-shadow: none;
}

/* ══════════════════════════════════════════════
   RULES DATABASE
   ══════════════════════════════════════════════ */
.db-layout {
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px;
}

.db-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.db-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.db-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 10px 18px;
  font-family: inherit;
  min-width: 280px;
  flex: 1;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

#sug-form .db-search {
  min-width: 0 !important;
}

.db-search:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.db-select {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 5px 8px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
  box-sizing: border-box;
}

.db-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber-glow);
}

.db-select option {
  background: var(--surface-2);
  color: var(--text-primary);
}

.table-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  box-shadow: var(--shadow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.table-wrapper:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.table-container {
  max-height: 550px;
  overflow-y: auto;
  position: relative;
}

.rules-table,
.rpa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}

.rules-table thead th,
.rpa-table thead th {
  background: var(--surface-2);
  padding: 14px 20px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  z-index: 10;
}

.rules-table tbody tr,
.rpa-table tbody tr {
  transition: var(--transition);
}

.rules-table tbody tr:hover,
.rpa-table tbody tr:hover {
  background: var(--surface-2);
}

.rules-table td,
.rpa-table td {
  padding: 14px 20px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.25s ease;
}

.rules-table tbody tr:hover td,
.rpa-table tbody tr:hover td {
  border-bottom-color: var(--border-strong);
}

.table-empty {
  text-align: center;
  padding: 80px !important;
  color: var(--text-muted);
  font-size: 1rem;
}

/* Rule type badge in table */
.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-linehaul {
  background: var(--cat-3-soft);
  color: var(--cat-3);
  border: 1px solid var(--cat-3-border);
}

.badge-fuel {
  background: var(--cat-8-soft);
  color: var(--cat-8);
  border: 1px solid var(--cat-8-border);
}

.badge-detention {
  background: var(--cat-7-soft);
  color: var(--cat-7);
  border: 1px solid var(--cat-7-border);
}

.badge-stop {
  background: var(--cat-4-soft);
  color: var(--cat-4);
  border: 1px solid var(--cat-4-border);
}

.badge-layover {
  background: var(--cat-6-soft);
  color: var(--cat-6);
  border: 1px solid var(--cat-6-border);
}

.badge-driver {
  background: var(--cat-1-soft);
  color: var(--cat-1);
  border: 1px solid var(--cat-1-border);
}

.badge-weight {
  background: var(--cat-10-soft);
  color: var(--cat-10);
  border: 1px solid var(--cat-10-border);
}

.badge-commodity {
  background: var(--cat-9-soft);
  color: var(--cat-9);
  border: 1px solid var(--cat-9-border);
}

.badge-lane {
  background: var(--cat-2-soft);
  color: var(--cat-2);
  border: 1px solid var(--cat-2-border);
}

.badge-equipment {
  background: var(--cat-5-soft);
  color: var(--cat-5);
  border: 1px solid var(--cat-5-border);
}

.badge-operational {
  background: var(--cat-1-soft);
  color: var(--cat-1);
  border: 1px solid var(--cat-1-border);
}

.badge-customer {
  background: var(--neg-soft);
  color: var(--neg);
  border: 1px solid var(--neg-border);
}

.badge-margin {
  background: var(--neg-soft);
  color: var(--neg);
  border: 1px solid var(--neg-border);
  font-weight: 800;
}

.badge-seasonal {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--navy-600);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.toggle input:checked + .toggle-slider {
  background: var(--amber);
  border-color: var(--amber);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: white;
}

/* Premium Toggle Control Card */
.toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.toggle-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.toggle-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toggle-card-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* Table action buttons */
.btn-icon {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sec);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: 0;
}

.btn-icon:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--amber);
}

.btn-icon.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.theme-toggle-btn:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.conflict-icon {
  color: var(--danger);
}

/* ══════════════════════════════════════════════
   CONFLICTS TAB
   ══════════════════════════════════════════════ */
.conflicts-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px;
}

.conflicts-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.conflicts-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.conflicts-sub {
  font-size: 0.83rem;
  color: var(--text-sec);
  margin-top: 4px;
}

.conflicts-actions-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

.conflicts-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state svg {
  opacity: 0.25;
}

/* Conflict card */
.conflict-card {
  background: var(--surface);
  border: 1px solid var(--neg-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: slideIn 0.3s ease;
}

.conflict-card.resolved {
  border-color: var(--accent-border);
  opacity: 0.8;
  box-shadow: none;
}

.conflict-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--neg-soft);
  border-bottom: 1px solid var(--border);
}

.conflict-card.resolved .conflict-card-header {
  background: var(--accent-soft);
}

.conflict-card-header h4 {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.overlap-reason {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.overlap-chip {
  font-size: 0.68rem;
  padding: 2px 9px;
  border-radius: 20px;
  font-weight: 500;
  background: var(--neg-soft);
  color: var(--neg);
  border: 1px solid var(--neg-border);
}

.conflict-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.conflict-rule-side {
  background: var(--surface);
  padding: 18px 20px;
}

.conflict-rule-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-sec);
  margin-bottom: 8px;
}

.conflict-rule-input {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.conflict-rule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-chip {
  font-size: 0.7rem;
  padding: 2px 8px;
  background: var(--navy-600);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-sec);
}

.conflict-resolution {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.btn-resolve {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  transition: var(--transition);
}

.btn-resolve:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-glow);
}

.btn-resolve.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--neg-soft);
}

.resolved-badge {
  padding: 4px 14px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--success);
  border: 1px solid var(--accent-border);
  font-size: 0.78rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   SHARED BUTTONS
   ══════════════════════════════════════════════ */
.btn-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--amber);
  border: none;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s var(--ease-out-expo);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px var(--amber-glow);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  transition: all 0.2s var(--ease-out-expo);
}

.btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-glow);
  transform: translateY(-1px);
}

.btn-ghost:active {
  transform: translateY(0) scale(0.98);
}

.btn-copy {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: inherit;
  transition: var(--transition);
}

.btn-copy:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-glow);
}

/* ══════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(12, 10, 9, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-box {
  background: var(--surface);
  backdrop-filter: blur(25px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(90vw, 860px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
  from {
    transform: scale(0.95) translateY(16px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.modal-body {
  padding: 32px;
  overflow-y: auto;
}

.modal-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-json {
  max-height: calc(90vh - 120px);
  border: none;
}

/* ══════════════════════════════════════════════
   GEO DILEMMA v2 — Conversational multi-question modal
   ══════════════════════════════════════════════ */

/* Transitions */
.geo-dilemma-body {
  position: relative;
  overflow: hidden;
}
.geo-dilemma-content {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.geo-dilemma-fade-out {
  opacity: 0;
  transform: translateX(-16px);
  pointer-events: none;
}
.geo-dilemma-fade-in {
  opacity: 0;
  transform: translateX(16px);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Progress text */
.geo-dilemma-progress {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Title & subcopy */
.geo-dilemma-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 2px;
  line-height: 1.3;
}
.geo-dilemma-subcopy {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Option list */
.geo-dilemma-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Option row */
.geo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.geo-opt:hover {
  border-color: var(--accent-border);
}
.geo-opt.selected {
  border-color: var(--amber);
  background: var(--warn-soft);
}
.geo-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* Icon pill */
.geo-opt-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.geo-opt-icon.city {
  background: var(--accent-soft);
  color: var(--accent);
}
.geo-opt-icon.state {
  background: var(--accent-soft);
  color: var(--accent);
}
.geo-opt-icon.market {
  background: var(--warn-soft);
  color: var(--amber);
}

/* Text block */
.geo-opt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.geo-opt-title {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.3;
}
.geo-opt-title .geo-term {
  font-weight: 600;
  color: var(--amber);
}
.geo-opt-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Confirm button disabled state */
#geo-dilemma-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Hard ceiling: no batch of toasts can ever cover the page. JS caps the
     count at TOAST_MAX; this is the belt-and-braces for an expanded group. */
  max-height: min(60vh, 520px);
  max-width: min(440px, calc(100vw - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  pointer-events: none;
}

#toast-container > * {
  pointer-events: auto;
}

.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  min-width: 320px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: var(--surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-left: 4px solid;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.toast.success {
  border-color: var(--success);
}

.toast.error {
  border-color: var(--danger);
}

.toast.warning {
  border-color: var(--warning);
}

.toast.info {
  border-color: var(--info);
}

.toast-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.toast.success .toast-icon {
  color: var(--success);
}

.toast.error .toast-icon {
  color: var(--danger);
}

.toast.warning .toast-icon {
  color: var(--warning);
}

.toast.info .toast-icon {
  color: var(--info);
}

/* ── toast: message, count badge, close ─────────────────────────── */
.toast-msg {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Repeat suppression: an identical toast bumps this instead of stacking. */
.toast-count,
.toast-count-inline {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-sec);
  border: 1px solid var(--border);
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 4px;
  margin: -2px -6px -2px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: color var(--t-fast, 120ms) ease, background var(--t-fast, 120ms) ease;
}

.toast-close:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

/* ── grouped toast: one card for a batch of outcomes ─────────────── */
.toast.toast-group {
  align-items: flex-start;
}

.toast-group .toast-icon,
.toast-group .toast-close {
  margin-top: 1px;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.toast-details > summary::-webkit-details-marker {
  display: none;
}

.toast-details > summary::after {
  content: '›';
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-muted);
  transform: rotate(90deg);
  transition: transform var(--t-fast, 120ms) ease;
}

.toast-details[open] > summary::after {
  transform: rotate(-90deg);
}

.toast-list {
  margin: 10px 0 0;
  padding: 10px 0 0 18px;
  border-top: 1px solid var(--border);
  max-height: 240px;
  overflow-y: auto;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-sec);
}

.toast-list li + li {
  margin-top: 6px;
}

.toast-fadeout {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* Tab panels */
.tab-panel {
  flex: 1;
}

/* ══════════════════════════════════════════════
   PANEL RESIZE HANDLE
   ══════════════════════════════════════════════ */
.panel-resize-handle {
  width: 8px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 4px;
  transition: background 0.15s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 40px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background 0.15s ease, height 0.15s ease;
}

.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  background: var(--amber);
  height: 64px;
}

.panel-resize-handle.dragging {
  background: var(--amber-glow);
}

/* Narrow preview panel: stack branch condition row columns */
.preview-narrow .branch-criterion-row {
  grid-template-columns: 1fr 1fr !important;
  row-gap: 4px;
}

.preview-narrow .branch-criterion-row > *:last-child {
  grid-column: 1 / -1;
  justify-self: start;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .builder-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .chat-panel {
    min-height: 60vh;
  }
  .preview-panel {
    min-height: 500px;
  }
  /* Hide resize handle — layout stacks vertically */
  .panel-resize-handle {
    display: none;
  }
}

@media (max-width: 768px) {
  .header-inner {
    padding: 0 16px;
    height: 56px;
    flex-wrap: wrap;
  }
  .brand-sub {
    display: none;
  }
  .tab-btn {
    padding: 6px 10px;
    font-size: 0.76rem;
  }
  .builder-layout {
    padding: 16px;
    gap: 16px;
  }
  .db-layout,
  .conflicts-layout {
    padding: 16px;
  }
  .db-filters {
    flex-direction: column;
  }
  .conflict-rules-grid {
    grid-template-columns: 1fr;
  }
  .db-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  #toast-container {
    bottom: 12px;
    right: 12px;
    left: 12px;
  }
  .toast {
    min-width: unset;
  }
}

/* ══════════════════════════════════════════════
   DARK THEME COMPONENT OVERRIDES
   ══════════════════════════════════════════════ */
html[data-theme='dark'] .json-block {
  background: var(--canvas);
  color: var(--accent);
}

html[data-theme='dark'] .detail-row td {
  background: rgba(41, 37, 36, 0.3) !important;
}

html[data-theme='dark'] .override-rule-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinning {
  animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════
   MAJOR UI: APP LAYOUT — Sidebar + Main
   ══════════════════════════════════════════════ */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--navy-800);
}

/* ── Sidebar (Dark Forest Green Theme & Expand On Hover) ── */
.sidebar {
  width: 68px;
  flex-shrink: 0;
  background: #091710;
  border-right: 1px solid #142a1f;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 200;
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  overflow: hidden;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
}

.sidebar:hover {
  width: 240px;
  box-shadow: 8px 0 35px rgba(0, 0, 0, 0.3);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  height: 64px;
  box-sizing: border-box;
  border-bottom: 1px solid #142a1f;
  overflow: hidden;
}

.sidebar-logo-full {
  height: 52px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: none !important;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-logo-icon {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  object-position: left center !important;
  flex-shrink: 0 !important;
  display: block !important;
  opacity: 1;
  border-radius: 8px !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar:hover .sidebar-logo-full,
.app-layout:not(.sidebar-collapsed) .sidebar-logo-full {
  display: block !important;
  opacity: 1 !important;
}

.sidebar:hover .sidebar-logo-icon,
.app-layout:not(.sidebar-collapsed) .sidebar-logo-icon {
  display: none !important;
  opacity: 0 !important;
}

.brand-word-hub,
.brand-word-group {
  margin: 0;
  padding: 0;
  text-align: center;
  display: block;
}

.brand-word-hub {
  font-weight: 800;
  font-size: 0.98rem;
  color: #ffffff;
}

.brand-word-group {
  font-weight: 800;
  font-size: 0.92rem;
  color: #ffffff;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav .tab-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #9ab0a5;
  font-size: 0.86rem;
  font-weight: 600;
  position: relative;
  gap: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sidebar-nav .tab-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: #9ab0a5;
  transition: stroke 0.2s ease, transform 0.2s ease;
}

.sidebar-nav .tab-btn:hover {
  background: rgba(70, 201, 140, 0.08);
  color: #ffffff;
}

.sidebar-nav .tab-btn:hover svg {
  stroke: #ffffff;
  transform: scale(1.1);
}

.sidebar-nav .tab-btn.active {
  background: #143527;
  color: #46c98c;
  border: 1px solid rgba(70, 201, 140, 0.3);
  box-shadow: 0 4px 14px rgba(70, 201, 140, 0.15);
}

.sidebar-nav .tab-btn.active svg {
  stroke: #46c98c;
}

.sidebar .tab-label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
  transform: translateX(-6px);
  pointer-events: none;
}

.sidebar:hover .tab-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid #142a1f;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sidebar-footer .theme-toggle-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  color: #9ab0a5;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  width: 100%;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-footer .theme-toggle-btn:hover {
  background: rgba(70, 201, 140, 0.08);
  color: #ffffff;
}

/* ── Main Content ────────────────────────────── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.panels-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* ── Glass Header ────────────────────────────── */
.glass-header {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 68px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

html[data-theme='dark'] .glass-header {
  background: rgba(28, 25, 23, 0.92) !important;
  border-bottom-color: rgba(68, 64, 60, 0.5) !important;
}

.mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-sec);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

.mobile-menu-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.header-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

.page-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  font-weight: 500;
}

/* ── Panel Transitions ───────────────────────── */
.tab-panel {
  animation: panelFadeIn 0.4s var(--ease-out-expo);
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ══════════════════════════════════════════════
   MAJOR UI: LOAD CARD VIEW
   ══════════════════════════════════════════════ */
.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.view-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.view-btn:hover {
  color: var(--text-primary);
  background: var(--surface-3);
}

.view-btn.active {
  background: var(--surface);
  color: var(--amber);
  box-shadow: var(--shadow-sm);
}

.card-view {
  animation: panelFadeIn 0.3s ease;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.load-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.load-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.load-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.load-card-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.load-card-status {
  font-size: 0.7rem;
}

.load-card-route {
  font-size: 0.82rem;
  color: var(--text-sec);
  margin-bottom: 12px;
  line-height: 1.4;
}

.load-card-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  gap: 8px;
}

.load-card-shipper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.load-card-truck {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2, rgba(148, 163, 184, 0.14));
  color: var(--text-sec);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.load-card-price {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Sidebar
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: inline-flex;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 300;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .app-layout.sidebar-collapsed .sidebar {
    width: 260px;
    transform: translateX(-100%);
  }
}

/* ══════════════════════════════════════════════
   SUB-RULE PA RANGE — Conditional enable/disable
   ══════════════════════════════════════════════ */
.subrule-range-hint {
  display: none;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

.subrule-range-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.subrule-range-disabled input {
  background: var(--surface-3) !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════════════════
   WIZARD STEP INDICATOR STYLES (Details -> Logic -> Review)
   ══════════════════════════════════════════════════════════════════ */
.wizard-step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 6px 16px;
  box-shadow: var(--shadow-sm);
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.wizard-step.step-completed {
  color: var(--accent);
}

.wizard-step.step-active {
  color: var(--text-primary);
}

.wizard-step.step-upcoming {
  color: var(--text-muted);
}

.step-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  transition: var(--transition);
}

.step-completed .step-num-badge {
  background: var(--accent);
  color: #ffffff;
}

.step-active .step-num-badge {
  background: var(--ink);
  color: var(--surface);
}

.step-upcoming .step-num-badge {
  background: var(--surface-3);
  color: var(--text-muted);
}

.step-connector {
  width: 28px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  transition: background 0.25s ease;
}

.step-connector.active-connector {
  background: var(--accent);
}
  background: var(--surface-3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}