/* =========================================================================
   Voyantis — Travel Customer Intelligence (UI MOCK)
   styles.css
   ========================================================================= */

:root {
  --bg:            #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #fafbfc;
  --surface-3:     #f0f2f5;
  --border:        #e3e6ea;
  --border-strong: #cdd3da;

  --ink:           #14181d;
  --ink-2:         #414b57;
  --ink-3:         #6b7684;
  --ink-4:         #98a2ae;

  --brand:         #0f5c56;
  --brand-2:       #157a71;
  --brand-soft:    #e6f2f0;
  --brand-ink:     #0a3f3b;

  --accent:        #b4551f;
  --accent-soft:   #fbf0e8;

  --gold:          #8a6a12;
  --gold-soft:     #fdf6e3;

  --ok:            #1a7f4b;
  --ok-soft:       #e8f6ee;
  --warn:          #a3690a;
  --warn-soft:     #fdf3e2;
  --danger:        #ad2f2f;
  --danger-soft:   #fbeaea;
  --info:          #2a5db0;
  --info-soft:     #eaf1fc;
  --violet:        #6b4bab;
  --violet-soft:   #f1ecfa;

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

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --shadow:    0 2px 4px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.07);
  --shadow-lg: 0 8px 20px rgba(16,24,40,.09), 0 24px 60px rgba(16,24,40,.13);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --nav-w: 236px;
  --topbar-h: 58px;
}

[data-theme="dark"] {
  --bg:            #0d1013;
  --surface:       #14181d;
  --surface-2:     #191e24;
  --surface-3:     #1f252c;
  --border:        #262d35;
  --border-strong: #38424d;

  --ink:           #eef1f4;
  --ink-2:         #b9c2cc;
  --ink-3:         #8b96a3;
  --ink-4:         #66707c;

  --brand:         #3fbfae;
  --brand-2:       #56d3c1;
  --brand-soft:    #12302d;
  --brand-ink:     #9fe8dc;

  --accent:        #e08e5a;
  --accent-soft:   #33231a;

  --gold:          #d9b656;
  --gold-soft:     #2e2716;

  --ok:            #4fc283;
  --ok-soft:       #12291d;
  --warn:          #d8a44f;
  --warn-soft:     #2d2415;
  --danger:        #e07272;
  --danger-soft:   #2e1a1a;
  --info:          #6fa0ea;
  --info-soft:     #16233a;
  --violet:        #a58ae0;
  --violet-soft:   #221c33;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 2px 6px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; border: 3px solid transparent; }

/* ============================ LAYOUT ============================ */
.app { display: grid; grid-template-columns: var(--nav-w) 1fr; height: 100vh; }

/* ---- sidebar ---- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.brand {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(140deg, var(--brand-2), var(--brand));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.brand-name { font-weight: 650; letter-spacing: -.2px; font-size: 14.5px; }
.brand-sub { font-size: 10px; color: var(--ink-4); letter-spacing: .5px; text-transform: uppercase; margin-top: -2px; }

.nav { flex: 1; overflow-y: auto; padding: 10px 8px 16px; }
.nav-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-4); font-weight: 600;
  padding: 12px 10px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer;
  font-size: 13.2px; font-weight: 480;
  border: none; background: none; width: 100%; text-align: left;
  transition: background .12s, color .12s;
  position: relative;
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
[data-theme="dark"] .nav-item.active { color: var(--brand-2); }
.nav-item .ni { width: 17px; text-align: center; font-size: 14px; opacity: .9; flex-shrink: 0; }
.nav-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 650;
  background: var(--accent); color: #fff;
  border-radius: 20px; padding: 1px 6px; min-width: 18px; text-align: center;
}
.nav-item.active .nav-badge { background: var(--brand); }
.nav-badge.muted { background: var(--surface-3); color: var(--ink-3); }

.sidebar-foot { padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0; }
.demo-note {
  font-size: 10.5px; color: var(--ink-4); line-height: 1.45;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 9px;
}

/* ---- main ---- */
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
}
.crumb { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.crumb b { color: var(--ink); font-weight: 620; }
.crumb .sep { color: var(--ink-4); }
.topbar-spacer { flex: 1; }

.search-wrap { position: relative; width: 300px; }
.search-wrap input {
  width: 100%; padding: 7px 11px 7px 31px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); outline: none; font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.search-wrap input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search-wrap .si { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-4); font-size: 12px; pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto; z-index: 90; padding: 5px;
}
.sr-item { padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; gap: 9px; }
.sr-item:hover { background: var(--surface-3); }
.sr-empty { padding: 14px; text-align: center; color: var(--ink-4); font-size: 12.5px; }

.content { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.page { padding: 22px 26px 60px; max-width: 1480px; margin: 0 auto; }
.page.narrow { max-width: 1100px; }

/* ============================ PRIMITIVES ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); font-weight: 550; font-size: 13px;
  cursor: pointer; transition: all .13s; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-3); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
[data-theme="dark"] .btn-primary { color: #06201d; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.08); }
.btn-danger { color: var(--danger); border-color: var(--border-strong); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn-lg { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 18px; }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.card-title { font-weight: 620; font-size: 14px; letter-spacing: -.15px; }
.card-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 660; letter-spacing: -.5px; margin: 0; }
.page-desc { color: var(--ink-3); font-size: 13.2px; margin: 4px 0 0; max-width: 720px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 620; letter-spacing: .1px;
  background: var(--surface-3); color: var(--ink-2);
  border: 1px solid transparent; white-space: nowrap;
}
.pill.ok      { background: var(--ok-soft); color: var(--ok); }
.pill.warn    { background: var(--warn-soft); color: var(--warn); }
.pill.danger  { background: var(--danger-soft); color: var(--danger); }
.pill.info    { background: var(--info-soft); color: var(--info); }
.pill.brand   { background: var(--brand-soft); color: var(--brand); }
.pill.violet  { background: var(--violet-soft); color: var(--violet); }
.pill.gold    { background: var(--gold-soft); color: var(--gold); }
.pill.outline { background: transparent; border-color: var(--border-strong); color: var(--ink-3); }

.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.tiny { font-size: 11.5px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 4px; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .g4, .g5 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2,1fr);} }

.sep { height: 1px; background: var(--border); margin: 14px 0; }
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}

/* ---- avatar ---- */
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 640; font-size: 12.5px; letter-spacing: .3px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--border);
}
.avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.a1{background:var(--info-soft);color:var(--info)}
.avatar.a2{background:var(--violet-soft);color:var(--violet)}
.avatar.a3{background:var(--accent-soft);color:var(--accent)}
.avatar.a4{background:var(--gold-soft);color:var(--gold)}
.avatar.a5{background:var(--ok-soft);color:var(--ok)}

/* ---- stat tiles ---- */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 15px 16px;
  position: relative; overflow: hidden;
}
.stat-label { font-size: 11.5px; color: var(--ink-3); font-weight: 550; letter-spacing: .1px; }
.stat-value { font-size: 25px; font-weight: 660; letter-spacing: -.9px; margin-top: 5px; line-height: 1.1; }
.stat-foot { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.stat-delta { font-weight: 640; }
.stat-delta.up { color: var(--ok); }
.stat-delta.down { color: var(--danger); }
.stat-spark { position: absolute; right: 0; bottom: 0; opacity: .13; pointer-events: none; }

/* ---- table ---- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left; padding: 9px 12px;
  font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-4); border-bottom: 1px solid var(--border);
  background: var(--surface-2); position: sticky; top: 0; z-index: 2;
  white-space: nowrap; user-select: none;
}
.tbl thead th.sortable { cursor: pointer; }
.tbl thead th.sortable:hover { color: var(--ink-2); }
.tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl tbody tr.selected { background: var(--brand-soft); }
[data-theme="dark"] .tbl tbody tr.selected { background: var(--brand-soft); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-empty { padding: 40px; text-align: center; color: var(--ink-4); }

/* ---- score bar ---- */
.score-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; min-width: 54px; }
.score-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.sf-hi { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.sf-mid { background: linear-gradient(90deg, var(--warn), #d9a44f); }
.sf-lo { background: var(--border-strong); }

.conf-wrap { display: flex; align-items: center; gap: 6px; }
.conf-dots { display: flex; gap: 2px; }
.conf-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }
.conf-dot.on { background: var(--brand); }

/* ---- inputs ---- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 11.5px; font-weight: 620; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.input, .textarea, .select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  outline: none; transition: border-color .15s, box-shadow .15s; font-size: 13px;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); }
.textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.select { cursor: pointer; }

.chip-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 9px; border-radius: 6px; font-size: 12.2px;
  background: var(--surface); border: 1px solid var(--border);
}
.chip .x { cursor: pointer; color: var(--ink-4); font-weight: 700; padding: 0 2px; border-radius: 3px; }
.chip .x:hover { color: var(--danger); background: var(--danger-soft); }
.chip.neg { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.chip.pos { background: var(--ok-soft); border-color: transparent; color: var(--ok); }

.toggle { display: inline-flex; background: var(--surface-3); border-radius: 8px; padding: 3px; gap: 2px; }
.toggle button {
  border: none; background: none; padding: 5px 11px; border-radius: 6px;
  font-size: 12.5px; font-weight: 550; color: var(--ink-3); cursor: pointer; transition: all .13s;
}
.toggle button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 620; }

.checkbox { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

/* ---- tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  padding: 9px 13px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 550; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 640; }
.tab .tcount { font-size: 10.5px; background: var(--surface-3); color: var(--ink-3); padding: 1px 5px; border-radius: 10px; margin-left: 5px; }

/* ============================ AGENT RUN PANEL ============================ */
.agent-run {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.agent-run-head {
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--brand-soft), transparent);
  border-bottom: 1px solid var(--border);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1.4s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.8)} }
.agent-steps { padding: 6px 0; max-height: 340px; overflow-y: auto; }
.agent-step {
  display: flex; gap: 10px; padding: 7px 16px; align-items: flex-start;
  opacity: 0; transform: translateY(4px);
  animation: stepIn .3s forwards;
}
@keyframes stepIn { to { opacity: 1; transform: none; } }
.agent-step .st-icon { width: 16px; flex-shrink: 0; text-align: center; margin-top: 1px; font-size: 12px; }
.agent-step .st-title { font-size: 12.8px; font-weight: 550; }
.agent-step .st-detail { font-size: 11.5px; color: var(--ink-4); }
.agent-step.done .st-icon { color: var(--ok); }
.agent-step.active .st-title { color: var(--brand); font-weight: 640; }

.spinner {
  width: 12px; height: 12px; border: 2px solid var(--border-strong);
  border-top-color: var(--brand); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 5px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 4px; transition: width .3s; }

.stream-cursor::after {
  content: '▌'; color: var(--brand); animation: blink .9s steps(2) infinite; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================ DNA ============================ */
.dna-hero {
  background: linear-gradient(135deg, var(--brand-soft), var(--surface) 60%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.dna-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 1050px) { .dna-grid { grid-template-columns: 1fr; } }
.trait {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 13px 15px;
  transition: box-shadow .15s, border-color .15s;
}
.trait:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.trait-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.trait-icon { font-size: 15px; }
.trait-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 660; color: var(--ink-4); }
.trait-value { font-weight: 600; font-size: 13.8px; letter-spacing: -.1px; }
.trait-detail { font-size: 12.6px; color: var(--ink-2); margin-top: 5px; line-height: 1.55; }
.trait-list { margin: 7px 0 0; padding: 0; list-style: none; }
.trait-list li { font-size: 12.5px; color: var(--ink-2); padding: 3px 0 3px 15px; position: relative; }
.trait-list li::before { content: '›'; position: absolute; left: 3px; color: var(--brand); font-weight: 700; }
.evidence-toggle {
  margin-top: 8px; font-size: 11.5px; color: var(--brand); cursor: pointer;
  font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0;
}
.evidence-toggle:hover { text-decoration: underline; }
.evidence-box {
  margin-top: 8px; border-left: 2px solid var(--brand);
  background: var(--surface-2); border-radius: 0 6px 6px 0; padding: 8px 11px;
}
.evidence-item { font-size: 12px; color: var(--ink-2); padding: 4px 0; }
.evidence-ref { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); display: block; margin-top: 2px; }

/* ============================ EMAIL / PROPOSAL ============================ */
.email-shell {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.email-bar {
  padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
}
.email-meta { padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 12.8px; }
.email-meta-row { display: flex; gap: 8px; padding: 2px 0; }
.email-meta-row .k { color: var(--ink-4); width: 52px; flex-shrink: 0; font-size: 12px; }
.email-subject { font-size: 16px; font-weight: 640; letter-spacing: -.25px; margin-top: 6px; }
.email-body {
  padding: 22px 26px; font-size: 14.2px; line-height: 1.72;
  font-family: var(--serif); color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word;
  max-height: 640px; overflow-y: auto;
}
.email-body strong { font-weight: 650; }
.tok {
  background: var(--gold-soft); border-bottom: 1.5px dotted var(--gold);
  padding: 1px 2px; border-radius: 3px; cursor: help; position: relative;
}
.tok:hover { background: var(--warn-soft); }
.tok-off .tok { background: transparent; border-bottom: none; }
.tok-pop {
  position: fixed; z-index: 300; max-width: 330px;
  background: var(--ink); color: #fff; padding: 9px 12px; border-radius: 8px;
  font-family: var(--sans); font-size: 12px; line-height: 1.5;
  box-shadow: var(--shadow-lg); pointer-events: none;
}
[data-theme="dark"] .tok-pop { background: var(--surface-3); border: 1px solid var(--border-strong); }
.tok-pop .tp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; opacity: .6; margin-bottom: 3px; }

.subject-opt {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: all .13s; background: var(--surface-2);
}
.subject-opt:hover { border-color: var(--border-strong); }
.subject-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.subject-opt input { margin-top: 3px; accent-color: var(--brand); }

/* ---- reply thread ---- */
.thread-msg { display: flex; gap: 11px; padding: 13px 0; }
.thread-bubble {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px 12px 12px 12px; padding: 11px 14px;
  font-size: 13.3px; line-height: 1.65; white-space: pre-wrap; flex: 1;
}
.thread-msg.out .thread-bubble { background: var(--brand-soft); border-color: transparent; border-radius: 12px 3px 12px 12px; }

/* ============================ KANBAN ============================ */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 11px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 200px; }
.kcol-head { padding: 9px 11px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.kcol-title { font-size: 11.5px; font-weight: 660; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); }
.kcol-count { margin-left: auto; font-size: 11px; font-weight: 640; color: var(--ink-4); background: var(--surface-3); border-radius: 10px; padding: 0 6px; }
.kcol-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 10px; cursor: pointer; transition: all .13s; box-shadow: var(--shadow-sm);
}
.kcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); border-color: var(--border-strong); }
.kcard-name { font-weight: 600; font-size: 12.8px; }
.kcard-meta { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.kcard-val { font-size: 12px; font-weight: 640; color: var(--brand); margin-top: 5px; }

/* ============================ FUNNEL / CHARTS ============================ */
.funnel-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.funnel-label { width: 150px; font-size: 12.5px; color: var(--ink-2); flex-shrink: 0; }
.funnel-track { flex: 1; height: 26px; background: var(--surface-3); border-radius: 6px; overflow: hidden; position: relative; }
.funnel-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 9px; color: #fff; font-size: 11.5px; font-weight: 640; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.funnel-num { width: 92px; text-align: right; font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius: 4px 4px 0 0; transition: height .6s cubic-bezier(.2,.8,.2,1); min-height: 2px; position: relative; }
.bar:hover { filter: brightness(1.12); }
.bar-label { font-size: 10.5px; color: var(--ink-4); }

.donut-wrap { display: flex; align-items: center; gap: 18px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.3px; padding: 3px 0; }
.legend-sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ============================ MODAL / DRAWER ============================ */
.overlay {
  position: fixed; inset: 0; background: rgba(12,16,20,.45);
  backdrop-filter: blur(2px); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fade .16s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 620px;
  max-height: 88vh; display: flex; flex-direction: column;
  animation: modalIn .2s cubic-bezier(.2,.8,.2,1); border: 1px solid var(--border);
}
.modal.wide { max-width: 900px; }
.modal.xwide { max-width: 1120px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal-head { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.x-btn { border: none; background: none; cursor: pointer; color: var(--ink-4); font-size: 17px; padding: 2px 6px; border-radius: 5px; line-height: 1; }
.x-btn:hover { background: var(--surface-3); color: var(--ink); }

/* ---- toast ---- */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #fff; padding: 11px 15px; border-radius: 9px;
  font-size: 13px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 9px;
  animation: toastIn .22s cubic-bezier(.2,.8,.2,1); max-width: 400px;
}
[data-theme="dark"] .toast { background: var(--surface-3); border: 1px solid var(--border-strong); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }
.toast.ok { background: var(--ok); }
.toast.warn { background: var(--warn); }
.toast.err { background: var(--danger); }

/* ---- timeline ---- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding: 8px 0; }
.tl-item::before {
  content: ''; position: absolute; left: -20px; top: 14px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
}
.tl-item.hi::before { border-color: var(--brand); background: var(--brand); }
.tl-date { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.tl-title { font-size: 13.2px; font-weight: 550; margin-top: 1px; }
.tl-desc { font-size: 12.3px; color: var(--ink-3); }

/* ---- dropzone ---- */
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 34px; text-align: center; background: var(--surface-2);
  transition: all .18s; cursor: pointer;
}
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); }

.file-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.file-icon {
  width: 30px; height: 30px; border-radius: 6px; background: var(--ok-soft); color: var(--ok);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ---- misc ---- */
.kbd {
  font-family: var(--mono); font-size: 10.5px; background: var(--surface-3);
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; color: var(--ink-3);
}
.callout {
  border-left: 3px solid var(--brand); background: var(--brand-soft);
  border-radius: 0 8px 8px 0; padding: 11px 14px; font-size: 12.8px; line-height: 1.6;
}
.callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.callout.danger { border-color: var(--danger); background: var(--danger-soft); }
.callout.info { border-color: var(--info); background: var(--info-soft); }

.empty-state { padding: 50px 20px; text-align: center; }
.empty-icon { font-size: 34px; opacity: .3; margin-bottom: 10px; }

.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shim 1.3s infinite; border-radius: 5px; }
@keyframes shim { to { background-position: -200% 0; } }

.fade-in { animation: fadeUp .3s cubic-bezier(.2,.8,.2,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }

.step-rail { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.srail-node { display: flex; align-items: center; gap: 7px; }
.srail-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--surface-3); color: var(--ink-4); border: 1px solid var(--border);
}
.srail-node.done .srail-dot { background: var(--ok); color: #fff; border-color: var(--ok); }
.srail-node.now .srail-dot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.srail-label { font-size: 11.5px; font-weight: 600; color: var(--ink-4); white-space: nowrap; }
.srail-node.done .srail-label, .srail-node.now .srail-label { color: var(--ink); }
.srail-line { flex: 1; height: 2px; background: var(--border); margin: 0 9px; min-width: 14px; }
.srail-line.done { background: var(--ok); }

.hl-add { background: var(--ok-soft); color: var(--ok); border-radius: 3px; padding: 0 2px; }
.hl-del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }

.locked { position: relative; }
.locked::after {
  content: ''; position: absolute; inset: 0; background: var(--surface);
  opacity: .55; border-radius: var(--radius-lg); pointer-events: none;
}

/* ---- accessibility ---- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-item:focus-visible, .tab:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* digits that sit in columns should line up */
.stat-value, .funnel-num, .kcard-val { font-variant-numeric: tabular-nums; }

/* ============================ GUIDED TOUR ============================ */
body.tour-on { overflow: hidden; }

/* Blocks the page so the only thing you can click is the tour card. */
#tour-block { position: fixed; inset: 0; z-index: 500; cursor: default; transition: background .25s; }
#tour-block.dim { background: rgba(9, 13, 17, .62); }
[data-theme="dark"] #tour-block.dim { background: rgba(0, 0, 0, .72); }

/* The spotlight: the dimming is this element's giant outer shadow, so the
   rectangle itself stays clear and the highlighted control shows through. */
#tour-hole {
  position: fixed; z-index: 501; pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(9, 13, 17, .62), 0 0 0 2px var(--brand), 0 0 22px 5px rgba(15, 92, 86, .3);
  transition: top .3s cubic-bezier(.2,.8,.2,1), left .3s cubic-bezier(.2,.8,.2,1),
              width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] #tour-hole { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72), 0 0 0 2px var(--brand), 0 0 22px 5px rgba(63, 191, 174, .25); }

#tour-card {
  position: fixed; z-index: 502; width: 390px; max-width: calc(100vw - 28px);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 15px 17px 13px;
  animation: tourIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes tourIn { from { opacity: 0; transform: translateY(5px); } }

.tour-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.tour-act {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft);
  padding: 3px 8px; border-radius: 20px;
}
.tour-x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: var(--ink-4); font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 5px;
}
.tour-x:hover { background: var(--surface-3); color: var(--ink); }

.tour-title { margin: 0 0 7px; font-size: 16.5px; font-weight: 650; letter-spacing: -.3px; text-wrap: balance; }
.tour-body { font-size: 13.2px; line-height: 1.62; color: var(--ink-2); }
.tour-body p { margin: 0 0 9px; }
.tour-body p:last-child { margin-bottom: 0; }
.tour-body b { color: var(--ink); font-weight: 640; }
.tour-ol { margin: 0 0 9px; padding-left: 17px; }
.tour-ol li { margin-bottom: 5px; }
.tour-note {
  background: var(--surface-2); border-left: 2px solid var(--border-strong);
  padding: 7px 10px; border-radius: 0 6px 6px 0; font-size: 12.3px; color: var(--ink-3);
}

.tour-foot { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.tour-btns { margin-left: auto; display: flex; gap: 6px; }
.tour-dots { display: flex; gap: 4px; flex-wrap: wrap; max-width: 160px; }
.tour-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong);
  cursor: pointer; transition: all .15s;
}
.tour-dot:hover { transform: scale(1.35); }
.tour-dot.past { background: var(--brand); opacity: .45; }
.tour-dot.on { background: var(--brand); width: 16px; border-radius: 4px; }
.tour-count { position: absolute; top: 17px; right: 40px; font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

/* ============================ ASK VOYANTIS (assistant) ============================ */
.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -14px 0 40px rgba(16, 24, 40, .13);
  display: flex; flex-direction: column; z-index: 450;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] .ai-panel { box-shadow: -14px 0 40px rgba(0,0,0,.5); }
.ai-panel.on { transform: none; }
/* The app stays usable while the panel is open — you watch it act on the dashboard.
   Pad the whole main column, so the top bar clears the panel too. */
body.ai-open .main { padding-right: 420px; }
@media (max-width: 900px) { body.ai-open .main { padding-right: 0; } }

.ai-head {
  display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--brand-soft), transparent);
  flex-shrink: 0;
}
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1.8s infinite; flex-shrink: 0; }
.ai-name { font-weight: 650; font-size: 14px; letter-spacing: -.2px; }
.ai-ctx { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.ai-icon {
  border: none; background: none; cursor: pointer; color: var(--ink-4);
  font-size: 14px; padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.ai-icon:hover { background: var(--surface-3); color: var(--ink); }

.ai-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; animation: fadeUp .22s cubic-bezier(.2,.8,.2,1); }
.ai-msg.user { align-items: flex-end; }
.ai-bubble {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px 12px 12px 12px; padding: 10px 13px;
  font-size: 13.2px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;
}
.ai-msg.user .ai-bubble {
  background: var(--brand); color: #fff; border-color: transparent;
  border-radius: 12px 3px 12px 12px; max-width: 85%;
}
[data-theme="dark"] .ai-msg.user .ai-bubble { color: #06201d; }
.ai-bubble strong { font-weight: 660; }
.ai-bullet { color: var(--brand); font-weight: 700; }
.ai-ref {
  display: inline-block; background: var(--brand-soft); color: var(--brand);
  font-size: 9.5px; font-weight: 700; border-radius: 3px;
  padding: 0 3px; margin-left: 2px; vertical-align: super; line-height: 1.5;
}

.ai-thinking {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-3); padding: 8px 12px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 10px;
}

.ai-cites { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ai-cites-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px;
  font-weight: 700; color: var(--ink-4); margin-right: 2px;
}
.ai-cite {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 9px 3px 4px;
  font-size: 11.3px; color: var(--ink-2); cursor: pointer; transition: all .13s;
  max-width: 100%; text-align: left;
}
.ai-cite:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ai-cite-n {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: #fff; font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
}
[data-theme="dark"] .ai-cite-n { color: #06201d; }

.ai-action {
  border: 1px solid var(--brand); border-radius: 10px;
  background: var(--brand-soft); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 9px;
}
.ai-action-top { display: flex; align-items: center; gap: 7px; }
.ai-action-icon { font-size: 13px; }
.ai-action-label { font-size: 12.8px; font-weight: 620; color: var(--brand-ink); }
[data-theme="dark"] .ai-action-label { color: var(--brand-2); }
.ai-action-btns { display: flex; gap: 6px; justify-content: flex-end; }
.ai-action-done { font-size: 12.5px; display: flex; align-items: center; gap: 7px; color: var(--ink-3); }
.ai-action-done.ok { color: var(--ok); font-weight: 620; }

.ai-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 10px; flex-shrink: 0; }
.ai-chip {
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: 20px; padding: 4px 10px; font-size: 11.8px;
  color: var(--ink-2); cursor: pointer; transition: all .13s;
}
.ai-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.ai-compose {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 11px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.ai-compose textarea {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--surface-2); outline: none;
  font-size: 13px; line-height: 1.5; min-height: 36px; max-height: 120px;
  overflow-y: auto;
  transition: border-color .15s, box-shadow .15s;
}
.ai-compose textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); }
.ai-send {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  border: none; background: var(--brand); color: #fff;
  font-size: 15px; cursor: pointer; transition: all .13s;
}
[data-theme="dark"] .ai-send { color: #06201d; }
.ai-send:hover { background: var(--brand-2); }
.ai-foot {
  padding: 0 14px 10px; font-size: 10px; color: var(--ink-4);
  text-align: center; flex-shrink: 0;
}

/* Persistent entry point in the top bar. */
.ai-launch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); font-size: 12.3px; font-weight: 620; white-space: nowrap;
  transition: all .13s;
}
.ai-launch:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ai-launch .kbd { font-size: 9.5px; padding: 0 4px; }

.tour-launch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand);
  font-size: 12.3px; font-weight: 620; white-space: nowrap;
  transition: all .13s;
}
.tour-launch:hover { background: var(--brand); color: #fff; }
[data-theme="dark"] .tour-launch:hover { color: #06201d; }