:root {
  --purple-700: #7e22ce;
  --purple-600: #9333ea;
  --purple-500: #a855f7;
  --purple-050: #faf5ff;
  --violet: #8600ff;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --ink: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --wash: #f8fafc;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(76, 29, 149, 0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 82% -8%, #f3e8ff 0%, rgba(243,232,255,0) 60%),
    radial-gradient(900px 460px at 5% 8%, #eef2ff 0%, rgba(238,242,255,0) 55%),
    var(--wash);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Top bar (logo only + provider switch) ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--slate-200);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 30px; width: auto; display: block; }
.brand .divider { width: 1px; height: 22px; background: var(--slate-200); }
.brand .tag {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--purple-700); background: var(--purple-050);
  padding: 4px 10px; border-radius: 999px; border: 1px solid #eaddff;
}
.provider-switch { display: flex; align-items: center; gap: 10px; }
.model-chip {
  font-size: 12px; color: var(--slate-500); background: #fff;
  border: 1px solid var(--slate-200); padding: 5px 11px; border-radius: 999px;
  font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seg { display: inline-flex; background: var(--slate-100); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 700;
  font-size: 13px; color: var(--slate-500); padding: 6px 14px; border-radius: 999px;
}
.seg button.active { background: var(--purple-600); color: #fff; box-shadow: 0 4px 12px rgba(147,51,234,.35); }
.seg button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Layout ── */
.page { max-width: 980px; margin: 0 auto; padding: 10px 22px 10px; }
.page.wide { max-width: 1420px; padding-left: 28px; padding-right: 28px; }
.hero { text-align: center; margin-bottom: 26px; }
.hero-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--purple-700); background: var(--purple-050); border: 1px solid #eaddff; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.hero h1 { font-size: 32px; margin: 0 0 8px; letter-spacing: -.02em; }
.hero p { color: var(--slate-500); margin: 0 auto; font-size: 15px; max-width: 640px; }
.cap-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 26px; }
.cap { font-size: 12px; font-weight: 600; color: var(--slate-700); background: #fff; border: 1px solid var(--slate-200); padding: 6px 12px; border-radius: 999px; }
.cap::before { content: "✓ "; color: var(--green); font-weight: 800; }

/* ── Reopen / recent saved reports ── */
.reopen-panel { max-width: 720px; margin: 30px auto 0; }
.reopen-row { display: flex; gap: 10px; }
.reopen-row input { flex: 1; font: inherit; font-size: 14px; padding: 11px 14px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; }
.reopen-row input:focus { outline: 2px solid var(--purple-500); border-color: transparent; }
.reopen-err { color: #b91c1c; font-size: 13px; margin-top: 8px; font-weight: 600; }
.recent { margin-top: 18px; }
.recent-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); margin-bottom: 10px; }
.recent-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recent-item { display: flex; align-items: stretch; gap: 4px; border: 1px solid var(--slate-200); background: #fff; border-radius: 12px; overflow: hidden; }
.recent-item:hover { border-color: var(--purple-500); box-shadow: var(--shadow); }
.ri-open { flex: 1; min-width: 0; text-align: left; cursor: pointer; background: none; border: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.ri-title { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-meta { font-size: 12px; color: var(--slate-500); }
.ri-del { flex: 0 0 auto; background: none; border: 0; border-left: 1px solid var(--slate-100); color: var(--slate-400); font-size: 14px; cursor: pointer; padding: 0 14px; }
.ri-del:hover { color: var(--red); background: #fef2f2; }
.saved-bar-actions { display: flex; gap: 10px; }
.btn.danger { background: #fff; color: var(--red); border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; }
.btn.danger-solid { background: var(--red); color: #fff; border-color: transparent; }
.btn.danger-solid:hover { background: #dc2626; }

/* ── Confirm modal ── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px; animation: fade .12s ease; }
.modal { background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--slate-200); max-width: 420px; width: 100%; padding: 22px 22px 18px; animation: pop .14s ease; }
.modal h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.modal p { margin: 0; font-size: 14px; color: var(--slate-500); line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

.pdf-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
@media (max-width: 620px) { .recent-list { grid-template-columns: 1fr; } }

/* ── Saved report banner + view ── */
.saved-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #047857; font-weight: 600; }
.saved-note a { color: #047857; font-weight: 700; }
.saved-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.saved-chat { max-height: 46vh; overflow-y: auto; }

/* ── Journey picker ── */
.journey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.journey-card {
  text-align: left; cursor: pointer; border: 1px solid var(--slate-200);
  background: #fff; border-radius: var(--radius); padding: 24px; transition: .18s;
  box-shadow: var(--shadow);
}
.journey-card:hover { transform: translateY(-3px); border-color: var(--purple-500); box-shadow: var(--shadow-lg); }
.journey-card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  font-size: 22px; margin-bottom: 14px; color: #fff;
}
.journey-card.org .icon { background: linear-gradient(135deg, var(--blue-600), var(--blue-500)); }
.journey-card.ind .icon { background: linear-gradient(135deg, var(--purple-700), var(--purple-500)); }
.journey-card h3 { margin: 0 0 6px; font-size: 18px; }
.journey-card p { margin: 0; color: var(--slate-500); font-size: 14px; line-height: 1.5; }
.journey-card .go { margin-top: 16px; color: var(--purple-700); font-weight: 700; font-size: 14px; }

/* ── Advisor widget ── */
.widget {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--slate-200);
  display: flex; flex-direction: column; height: calc(105vh - 128px); min-height: 560px;
}
.widget-head {
  background: linear-gradient(135deg, #081030, #3b83f6 58%, #9333ea);
  color: #fff; padding: 14px 22px 16px; flex: 0 0 auto;
}
.wh-top { display: flex; align-items: center; gap: 12px; }
.wh-back { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; }
.wh-back:hover { background: rgba(255,255,255,.25); }
.widget-head .row1 { display: flex; align-items: center; gap: 12px; flex: 1; }
.widget-head img { height: 26px; filter: brightness(0) invert(1); }
.widget-head .title strong { display: block; font-size: 16px; }
.widget-head .title span { font-size: 12.5px; opacity: .85; }
.wh-provider { flex: 0 0 auto; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 5px 11px; border-radius: 999px; }
.progress { margin-top: 12px; }
.progress .labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; opacity: .95; }
.progress .bar { height: 6px; background: rgba(255,255,255,.28); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: #fff; border-radius: 999px; transition: width .4s ease; }

.widget-body { padding: 20px 24px; flex: 1 1 auto; overflow-y: auto; background: linear-gradient(#fff, var(--wash)); position: relative; }
.scroll-anchor { height: 0; }

/* chat */
.chat-row { display: flex; gap: 10px; margin: 12px 0; align-items: flex-start; }
.chat-row.user { flex-direction: row-reverse; }
.avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--purple-600);
}
.chat-row.user .avatar { background: var(--slate-700); }
.msg {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 14px; padding: 11px 14px;
  font-size: 14px; line-height: 1.55; max-width: 78%; box-shadow: var(--shadow);
}
.chat-row.user .msg { background: var(--purple-600); color: #fff; border-color: transparent; }
.msg-title { font-weight: 800; font-size: 12.5px; letter-spacing: .01em; opacity: .95; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.22); }
.chat-row:not(.user) .msg-title { border-bottom-color: var(--slate-200); }
.msg-p { margin: 0 0 8px; }
.msg-p:last-child { margin-bottom: 0; }
.msg-fields { display: grid; gap: 4px; }
.mf { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; }
.mf-k { flex: 0 0 42%; max-width: 190px; font-weight: 700; opacity: .82; }
.mf-v { flex: 1; }
@media (max-width: 560px) { .mf { flex-direction: column; gap: 1px; } .mf-k { max-width: none; } }
.msg.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--slate-400); margin: 0 2px; animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2){ animation-delay:.2s } .msg.typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }

/* rich cards / forms */
.card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 18px; margin: 14px 0; box-shadow: var(--shadow); }
.card .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card h2 { font-size: 16px; margin: 0 0 4px; }
.card .micro { font-size: 12.5px; color: var(--slate-500); margin: 0; line-height: 1.5; }
.chip { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.chip.purple { background: var(--purple-050); color: var(--purple-700); }
.chip.blue { background: #eff6ff; color: var(--blue-600); }
.chip.green { background: #ecfdf5; color: #047857; }
.chip.amber { background: #fffbeb; color: #b45309; }
.chip.cyan { background: #ecfeff; color: #0e7490; }
.chip.red { background: #fef2f2; color: #b91c1c; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--slate-700); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--slate-200);
  border-radius: 10px; background: #fff; color: var(--ink); width: 100%;
}
.field textarea { min-height: 64px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--purple-500); border-color: transparent; }
.field input.invalid { border-color: #ef4444; background: #fef2f2; }
.field input.invalid:focus { outline-color: #ef4444; }
.field-err { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #b91c1c; }
.uen-note { margin-top: -4px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.uen-note.looking { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.uen-note.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.uen-note.miss { background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; }

/* company-name autocomplete */
.field.autocomplete { position: relative; }
.ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 3000; margin-top: 4px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: 4px; }
.ac-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; }
.ac-item:hover, .ac-item.hi { background: #f5f3ff; }
.ac-name { font-size: 13.5px; font-weight: 700; color: #1f2937; line-height: 1.2; }
.ac-uen { font-size: 11.5px; font-weight: 600; color: #7c3aed; letter-spacing: .02em; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tile {
  text-align: left; cursor: pointer; border: 1px solid var(--slate-200); background: #fff;
  border-radius: 12px; padding: 12px 14px; transition: .15s;
}
.tile:hover { border-color: var(--purple-500); }
.tile.sel { border-color: var(--purple-600); background: var(--purple-050); box-shadow: inset 0 0 0 1px var(--purple-500); }
.tile strong { display: block; font-size: 14px; }
.tile span { font-size: 12px; color: var(--slate-500); }

.rt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.rt .t { border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px; background: var(--wash); }
.rt .t strong { display: block; font-size: 13.5px; margin: 8px 0 4px; }
.rt .t .micro { font-size: 11.5px; }

.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.btn { font: inherit; font-weight: 700; font-size: 14px; border-radius: 10px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; }
.btn.primary { background: var(--purple-600); color: #fff; box-shadow: 0 6px 16px rgba(147,51,234,.32); }
.btn.primary:hover { background: var(--purple-700); }
.btn.ghost { background: #fff; color: var(--slate-700); border-color: var(--slate-200); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.step-error { flex: 0 0 auto; margin: 0 18px; padding: 10px 14px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; font-size: 13px; font-weight: 600; }
.input-bar { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--slate-200); background: #fff; flex: 0 0 auto; }
.input-bar input { flex: 1; font: inherit; font-size: 14px; padding: 11px 14px; border: 1px solid var(--slate-200); border-radius: 12px; }
.input-bar input:focus { outline: 2px solid var(--purple-500); border-color: transparent; }
.mic-btn { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--slate-200); background: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.mic-btn:hover { border-color: var(--purple-500); background: var(--purple-050); }
.mic-btn.on { background: var(--red); border-color: transparent; color: #fff; font-size: 14px; animation: micpulse 1.4s ease-in-out infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.voice-status { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 0 18px 4px; padding: 9px 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 12px; font-size: 12.5px; font-weight: 600; }
.voice-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(239,68,68,.5); animation: micpulse 1.4s infinite; flex: 0 0 auto; }
.voice-label { font-weight: 800; letter-spacing: .01em; }
.voice-hint { font-weight: 500; opacity: .7; }
.voice-actions { margin-left: auto; display: flex; gap: 8px; }
.voice-mini { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(4,120,87,.35); background: #fff; color: #047857; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.voice-mini:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.voice-mini:active { transform: translateY(0); }
.voice-mini.go { color: #b45309; border-color: rgba(180,83,9,.4); animation: btnpulse 1.6s infinite; }
.voice-mini.end { color: #b91c1c; border-color: rgba(185,28,28,.35); }
.voice-status.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.voice-status.paused { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.voice-status.paused .voice-dot { background: #f59e0b; box-shadow: none; animation: none; }
@keyframes btnpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } }

/* voice listening placeholder (form hidden while conversing) */
.voice-listening { display: flex; align-items: center; gap: 16px; }
.voice-listening strong { font-size: 15px; }
.voice-listening .micro { margin: 4px 0 0; }
.vl-mic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #a78bfa, #7c3aed); position: relative; box-shadow: 0 0 0 0 rgba(124,58,237,.45); animation: vlpulse 1.6s infinite; }
.vl-mic::after { content: "🎙"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; }
@keyframes vlpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,.45); } 50% { box-shadow: 0 0 0 12px rgba(124,58,237,0); } }

/* review-before-submit banner */
.review-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 14px; background: #f5f3ff; border: 1px solid #ddd6fe; color: #5b21b6; border-radius: 12px; font-weight: 700; font-size: 13.5px; }
.review-banner .rb-actions { margin-left: auto; display: flex; gap: 8px; }
.btn.sm { padding: 7px 14px; font-size: 13px; }
.btn.ghost { background: #fff; color: #5b21b6; border: 1px solid #ddd6fe; }
.btn.ghost:hover { background: #f5f3ff; }

/* report */
.report { }
/* Branded header band (also the PDF cover header) */
.report-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; margin-bottom: 14px; border-radius: 12px; border: 1px solid var(--slate-200);
  background: #fff; }
.rb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rb-logo { height: 30px; width: auto; display: block; }
.rb-name { font-weight: 800; font-size: 17px; color: var(--purple-700); letter-spacing: -.01em; }
.rb-sub { font-size: 12px; color: var(--slate-500); border-left: 1px solid var(--slate-200); padding-left: 12px; }
.rb-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rb-date { font-size: 12px; color: var(--slate-500); font-weight: 600; }
.rb-dl { padding: 8px 14px; font-size: 13px; }
@media (max-width: 620px) { .rb-sub { display: none; } }

/* ── Native print-to-PDF: isolate the report, print the real CSS exactly ── */
@media print {
  @page { size: A4 portrait; margin: 11mm; }
  html, body { background: #fff !important; }

  /* hide everything that isn't the report */
  .topbar, .widget-head, .input-bar, .saved-bar, .chat-row, .center-load,
  .saved-note, .saved-chat, .rb-dl, .card.survey, .reopen-panel,
  .hero, .journey-grid, .cap-row { display: none !important; }

  /* neutralise the app chrome so the report flows down full pages */
  .page, .page.wide { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
  .widget { height: auto !important; min-height: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
  .widget-body { height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; background: #fff !important; }

  /* force branded colours (chips, charts) to actually print where supported */
  .report, .report * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  .report { width: 100% !important; }

  /* Light hero for print so it's readable even without "Background graphics" on.
     Force the ring to the right (the narrow print page would otherwise trigger the
     mobile stack and drop it below the text with lots of wasted space). */
  .r-hero { background: #fff !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important;
            grid-template-columns: minmax(0, 1fr) 132px !important; align-items: flex-start !important; gap: 14px !important; }
  .r-hero h2 { color: #0f172a !important; }
  .r-hero p { color: #334155 !important; }
  .r-prepared { color: #64748b !important; }
  .sample-chip { color: #7e22ce !important; background: #faf5ff !important; border: 1px solid #eaddff !important; }
  .readiness-ring { width: 126px !important; height: 126px !important; }
  .readiness-ring text { fill: #0f172a !important; }
  .readiness-ring circle:first-of-type { stroke: #e5e7eb !important; }

  .charts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-row { grid-template-columns: repeat(5, 1fr) !important; }
  .chart-wrap { height: 190px; }

  /* keep small atomic blocks intact, but let big cards flow across pages so they
     don't get bumped whole to the next page and leave half-empty pages */
  .chart-card, .kpi, .matrix-card, .tl-node, .rd, .p, .r-hero,
  table.grid tr { break-inside: avoid; page-break-inside: avoid; }
}
.report .r-hero {
  border-radius: var(--radius); padding: 24px; color: #fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(147, 51, 234, 0.55), transparent 32%),
    linear-gradient(135deg, #081030, #060620);
  display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 18px; align-items: center;
}
.report .r-hero .r-hero-main { min-width: 0; }
.report .r-hero h2 { margin: 0 0 8px; font-size: 23px; color: #fff; letter-spacing: -.02em; }
.report .r-hero p { margin: 0; color: #dbe7f3; font-size: 14px; line-height: 1.6; }
.report .r-hero .r-prepared { margin-top: 12px; font-size: 12px; color: #9fb3cc; }
.report .sample-chip { display: inline-block; font-size: 11px; font-weight: 800; color: #cbd5e1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; letter-spacing: .04em; }
.readiness-ring { width: 150px; height: 150px; margin: 0 auto; display: block; }
@media (max-width: 720px) { .report .r-hero { grid-template-columns: 1fr; } }
table.grid { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
table.grid th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); padding: 8px 10px; border-bottom: 1px solid var(--slate-200); }
table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--slate-100); vertical-align: top; }
.pill { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.pill.High { background: #fef2f2; color: #b91c1c; } .pill.Medium { background: #fffbeb; color: #b45309; } .pill.Low { background: #ecfdf5; color: #047857; }
.pill.Transform { background: #eff6ff; color: var(--blue-600); } .pill.Add { background: #ecfdf5; color: #047857; }
.pill.Reduce, .pill.Eliminate { background: #fffbeb; color: #b45309; } .pill.Retain { background: var(--purple-050); color: var(--purple-700); }
.path { display: grid; gap: 10px; margin-top: 6px; }
.path .p { border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px 14px; }
.path .p strong { font-size: 14px; } .path .p .micro { margin-top: 3px; }
.path .p .meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* ── Roadmap timeline ── */
.timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; margin-top: 22px; }
.timeline::before { content: ""; position: absolute; top: 6px; left: 7px; right: 7px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #10b981, #0e7490, #f59e0b); }
.tl-node { position: relative; padding-top: 24px; min-width: 0; }
/* Dot centred on the line: line centre is at 7.5px (top 6 + height 3/2); the dot's
   vertical centre is placed there via translateY(-50%) so borders don't shift it. */
.tl-node::before { content: ""; position: absolute; top: 7.5px; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--slate-400); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--slate-200); transform: translateY(-50%); }
.tl-node.blue::before { background: var(--blue-600); }
.tl-node.green::before { background: var(--green); }
.tl-node.cyan::before { background: #0e7490; }
.tl-node.amber::before { background: var(--amber); }
.tl-node.purple::before { background: var(--purple-600); }
.tl-node .chip { background: var(--slate-100); color: var(--slate-700); font-size: 11px; }
.tl-node ul { margin: 8px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--slate-700); }
.tl-node li { margin: 4px 0; }
@media (max-width: 720px) { .timeline { grid-auto-flow: row; gap: 20px; } .timeline::before { display: none; } }

.road { display: grid; gap: 10px; margin-top: 6px; }
.road .phase { border-left: 3px solid var(--purple-500); padding: 4px 0 4px 14px; }
.road .phase strong { font-size: 13.5px; color: var(--purple-700); }
.road .phase ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--slate-700); }
.road .phase li { margin: 3px 0; }

/* ── Feedback survey (separate from the report) ── */
.feedback-sep { display: flex; align-items: center; gap: 12px; margin: 26px 2px 4px; color: var(--slate-400); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.feedback-sep::before, .feedback-sep::after { content: ""; height: 1px; background: var(--slate-200); flex: 1; }
.card.survey .survey-q { margin-top: 16px; }
.sq-text { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.sq-text .opt { color: var(--slate-400); font-weight: 500; }
.sq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-opt { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--slate-200); background: #fff; color: var(--slate-700); cursor: pointer; }
.sq-opt:hover { border-color: var(--purple-500); }
.sq-opt.sel { background: var(--purple-600); color: #fff; border-color: transparent; }
.sq-stars { display: flex; gap: 4px; }
.sq-star { font-size: 28px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--slate-200); padding: 0; }
.sq-star.on { color: #f59e0b; }
.card.survey textarea { width: 100%; min-height: 62px; font: inherit; font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--slate-200); border-radius: 10px; resize: vertical; }
.survey-done { padding: 16px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; color: #047857; font-weight: 700; font-size: 14px; }

.refs { background: linear-gradient(#fff, var(--purple-050)); }
.topic-chips { display: flex; gap: 6px; }
.ref-list { margin: 10px 0 0; padding-left: 18px; }
.ref-list li { margin: 6px 0; font-size: 13px; }
.ref-list a { color: var(--purple-700); text-decoration: none; font-weight: 600; }
.ref-list a:hover { text-decoration: underline; }

.back { background: none; border: 0; color: var(--slate-500); font: inherit; font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 14px; }
.back:hover { color: var(--purple-700); }
.center-load { display: grid; place-items: center; padding: 40px; gap: 14px; color: var(--slate-500); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--slate-200); border-top-color: var(--purple-600); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Upload dropzone ── */
.dropzone { border: 1.5px dashed var(--slate-300, #cbd5e1); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--wash); transition: .15s; text-align: center; }
.dropzone:hover { border-color: var(--purple-500); background: var(--purple-050); }
.dropzone.has-file { border-style: solid; border-color: var(--purple-500); background: #fff; text-align: left; }
.dz-hint { font-size: 13px; color: var(--slate-500); }
.dz-file { font-size: 13.5px; color: var(--ink); }
.dz-file em { font-style: normal; color: var(--slate-500); }
.dz-file em.ok { color: #047857; } .dz-file em.err { color: #b91c1c; }

/* ── Consent ── */
.field.consent { flex-direction: row; align-items: flex-start; gap: 10px; background: var(--purple-050); border: 1px solid #eaddff; border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.field.consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--purple-600); }
.field.consent span { font-size: 12.5px; color: var(--slate-700); line-height: 1.45; }

/* ── Report KPI tiles ── */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.kpi { background: rgba(255,255,255,.75); border: 1px solid #eaddff; border-radius: 12px; padding: 12px 10px; text-align: center; }
.kpi strong { display: block; font-size: 22px; color: var(--purple-700); letter-spacing: -.02em; }
.kpi span { font-size: 11px; color: var(--slate-500); font-weight: 600; }

/* ── Charts ── */
.charts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
.chart-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 14px 16px 10px; box-shadow: var(--shadow); }
.chart-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.chart-title span { font-size: 11px; font-weight: 500; color: var(--slate-400); }
.chart-wrap { position: relative; height: 190px; }
.chart-card.gauge { display: flex; flex-direction: column; }
.gauge-wrap { display: flex; align-items: center; justify-content: center; }
.gauge-center { position: absolute; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.gauge-center small { font-size: 14px; color: var(--slate-400); font-weight: 600; }
.gauge-note { text-align: center; margin: 4px 0 2px; }
.charts-grid .chart-card:first-child { grid-column: span 1; }

/* ── Job redesign ── */
.redesign { display: grid; gap: 12px; margin-top: 6px; }
.rd { border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px 14px; }
.rd > strong { font-size: 14px; }
.rd-flow { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.rd-from { font-size: 12.5px; color: var(--slate-500); background: var(--slate-100); padding: 6px 10px; border-radius: 8px; flex: 1; min-width: 180px; }
.rd-to { font-size: 12.5px; color: var(--ink); background: var(--purple-050); border: 1px solid #eaddff; padding: 6px 10px; border-radius: 8px; flex: 1; min-width: 180px; }
.rd-arrow { color: var(--purple-500); font-weight: 800; }

/* ── Domain tags ── */
.dtag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.dtag.TII { background: #eff6ff; color: var(--blue-600); }
.dtag.Green { background: #ecfdf5; color: #047857; }
.dtag.Digital { background: var(--purple-050); color: var(--purple-700); }

/* ── Pathway numbering ── */
.path .p { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px 14px; }
.p-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--purple-600); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.p-body { flex: 1; }
.p-body .how { font-size: 12.5px; color: var(--blue-600); margin-top: 5px; font-weight: 600; }
.p-body .closes { font-size: 12.5px; color: var(--slate-700); margin: 4px 0 2px; }
.p-body .closes .chip { margin-right: 6px; }
.p-body .meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.course-link { font-size: 12px; font-weight: 700; color: var(--blue-600); text-decoration: none; background: #eff6ff; border: 1px solid #bfdbfe; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.course-link:hover { background: #dbeafe; text-decoration: underline; }

/* ── Upload source cards ── */
.sources { display: grid; gap: 10px; margin-top: 14px; }
.source-card { display: flex; align-items: center; gap: 14px; border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px 14px; transition: .15s; background: #fff; }
.source-card:hover { border-color: var(--purple-500); box-shadow: var(--shadow); }
.source-card.has { border-color: var(--purple-500); background: var(--purple-050); }
.src-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--purple-700), var(--purple-500)); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; cursor: pointer; }
.src-body { flex: 1; }
.src-name { font-size: 14.5px; font-weight: 700; }
.src-file { font-size: 12px; color: #047857; margin-top: 4px; font-weight: 600; }
.src-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.src-actions button { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--purple-700); background: none; border: 0; padding: 0; cursor: pointer; }
.src-actions button:hover { text-decoration: underline; }
.src-actions span { color: var(--slate-400); font-size: 12px; }
.src-actions .src-hint { color: var(--slate-400); font-weight: 500; }

/* Keep in-conversation cards (forms, uploads, analysis) aligned to the chat column
   width instead of stretching across the widened widget. The report stays full-width. */
.widget-body > .card { max-width: 900px; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 340px; }
.skill-chips .chip { white-space: normal; }

/* ── Analysis output ── */
.card.analysis { border-color: #c7f0dd; }
.an-sub { font-size: 13px; margin: 16px 0 4px; color: var(--slate-700); }
.an-summary { font-size: 13.5px; color: var(--slate-700); background: var(--wash); border-left: 3px solid var(--purple-500); padding: 10px 14px; border-radius: 0 8px 8px 0; margin-top: 14px; }
.refine-box { margin-top: 16px; border: 1px dashed var(--slate-300, #cbd5e1); border-radius: 12px; padding: 12px 14px; background: var(--purple-050); }
.refine-box label { display: block; font-size: 12.5px; font-weight: 700; color: var(--slate-700); margin-bottom: 8px; }
.refine-row { display: flex; gap: 10px; }
.refine-row input { flex: 1; font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; }
.refine-row input:focus { outline: 2px solid var(--purple-500); border-color: transparent; }
.refine-row .btn { white-space: nowrap; }
.matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.matrix-card { border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px 14px; background: var(--wash); border-top: 3px solid var(--slate-300); }
.matrix-card.blue { border-top-color: var(--blue-600); } .matrix-card.green { border-top-color: var(--green); }
.matrix-card.amber { border-top-color: var(--amber); } .matrix-card.purple { border-top-color: var(--purple-600); }
.matrix-card.red { border-top-color: var(--red); } .matrix-card.cyan { border-top-color: #0e7490; }
.matrix-card strong { display: block; font-size: 14px; margin: 8px 0 4px; }
.matrix-card .micro { font-size: 12px; }

@media (max-width: 900px) {
  .charts-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .matrix { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .journey-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .rt { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .msg { max-width: 88%; }
  .charts-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .widget { height: auto; min-height: 70vh; }
}