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

:root {
  --bg-primary: #393D53;
  --bg-dark: #2d3141;
  --bg-card: #494d65;
  --bg-bubble-bot: #313649;
  --bg-input: #f5f6fa;
  --blue-primary: #2aa7ee;
  --blue-gradient: linear-gradient(94deg, #00f0ff 0%, #1da5f1 100%);
  --text-white: #fcfcfc;
  --text-muted: #8390b7;
  --text-dimmed: #b0b9d0;
  --radio-stroke: rgba(176, 185, 208, 0.35);  /* dark-theme: muted ring, delicate on #1e2330 (was #d4dae7 light) */
  --radio-stroke-hover: rgba(176, 185, 208, 0.6);  /* hover: ring brightens slightly */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 20px;
  --font: 'Montserrat', sans-serif;
  --input-h: 124px;   /* reserved height for the bottom chat-input-area — a bit
                         more breathing room above the pill than the bare 48px
                         pill + padding minimum (bumped for extra bottom air) */

  /* Category colors */
  --cat-accounts: #9E9CF5;
  --cat-revenue: #7FD282;
  --cat-costs: #FD5B6E;
  --cat-debts: #8390B7;
  --cat-mixed: #2196F3;
  --cat-cashflow: #C4ACA7;
}

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-white);
  overflow: hidden;
}

.hidden { display: none !important; }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 63px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 320px;
  z-index: 100;
  opacity: 0;
  /* Animate only `top` so the entry fadeIn animation (opacity/scale/blur) is
     untouched — the auto-hide on scroll slides the header up via `top`. */
  transition: top 0.3s ease;
}
/* Scroll-down auto-hide: header slides fully out of view (height = 63px). */
.header.header--hidden { top: -63px; }

.header.visible {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  height: 28px;
  width: auto;
}

.logo-text {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.405px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 9px;
}

.header-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 63px;
  padding: 0 12px;
}

.header-tab-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-white);
  white-space: nowrap;
}

.user-avatar-small {
  width: 28px;
  height: 28px;
  background: #4e5b76;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.user-avatar-small img {
  display: block;
}

.workspace-avatar-small {
  width: 28px;
  height: 28px;
  background: #4e5b76;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.workspace-avatar-symbol {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1;
}

@keyframes tabSlideIn {
  0% {
    opacity: 0;
    transform: translateX(20px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* ===== MANUAL FLOW PROGRESS BAR =====
 * Modern minimal: phase label + intra-step counter + continuous gradient fill.
 * Glass background (backdrop-filter) so content underneath gently shows through.
 * Compact 56px tall — minimal vertical footprint while still legible. */
.manual-flow-progress {
  position: fixed;
  top: 63px;
  left: 0;
  right: 0;
  /* Background tuned to the header (#393D53). Slight darkening + soft white
     overlay creates a subtle "sub-band" feel — visually connected to the
     header above but clearly demarcated from the content below.
     Layered backgrounds keep the band cohesive without going to harsh black. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%),
    var(--bg-primary, #393D53);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  padding: 12px 320px;
  z-index: 99;
  transition: opacity 0.35s ease, transform 0.35s ease;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.manual-flow-progress.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.mfp-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}

.mfp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 18px;
}

.mfp-current {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.mfp-current-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white, #fff);
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: color 0.3s ease;
}

.mfp-current-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, rgba(255,255,255,0.5));
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mfp-current-sub:empty {
  display: none;
}

.mfp-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, rgba(255,255,255,0.55));
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mfp-track {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  overflow: hidden;
}

.mfp-fill {
  position: absolute;
  inset: 0;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, #00f0ff 0%, #1da5f1 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

/* When the progress bar is visible, push main content down so chat doesn't slide underneath.
 * Progress bar = padding 12*2 + content ~26 + border ~1 ≈ 51-56px. Total offset 70+56 = 126. */
body.has-manual-progress .main {
  margin-top: 126px;
  height: calc(100vh - 126px);
  height: calc(100dvh - 126px);
}

/* ===== MAIN ===== */
.main {
  margin-top: 63px;
  height: calc(100vh - 63px);
  overflow: hidden;
  position: relative;
  /* When the header auto-hides, the content reclaims its 63px (fills the page). */
  transition: margin-top 0.3s ease, height 0.3s ease;
}
body.header-hidden .main {
  margin-top: 0;
  height: 100vh;
}

/* Gradient overlay — fades content under the header.
   Temporarily hidden via display:none to evaluate look without the fade. */
.gradient-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5%;
  background: linear-gradient(to bottom, #393d53 30%, transparent);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.gradient-overlay.visible {
  opacity: 1;
}

/* Single scroll container for welcome + chat */
.main-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* During chat: leave room for the full-width input ZONE at the bottom.
   The zone's height varies (pill + quick-pick chips; the categories panel
   lives at the TOP of the chat scroller) — JS mirrors its real height into
   --input-zone-h (syncInputZoneHeight in app.js); --input-h stays as the
   static fallback. */
.main.has-sidebar .main-scroll {
  height: calc(100% - var(--input-zone-h, var(--input-h)));
}

.main-scroll::-webkit-scrollbar {
  width: 6px;
}

.main-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.main-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* ===== ONBOARDING LEFT SIDEBAR ===== *
 * Appears after the workspace name is set. Persistent flow nav (dimmed
 * future steps). Slides in from the left; chat area shifts right to make room. */
/* Chat layout — sidebar (sticky, left) + chat column, in the same scroll container */
.chat-layout {
  display: flex;
  align-items: stretch;   /* sidebar + messages share the same height */
  gap: 16px;
  width: 100%;
  max-width: 1320px;      /* on wide screens cap sidebar+chat as one unit */
  margin-inline: auto;    /* centre the sidebar+chat unit on the screen */
  height: 100%;           /* fixed: fills from header down to the input bar */
  padding: 6px 16px 16px;
  overflow: hidden;       /* the layout itself never scrolls — only the bubbles do */
}

/* Chat messages — direct flex child of chat-layout, beside the sidebar.
   flex-grow + max-width + auto inline margins → bubbles stay centered.
   This is THE scroll area — only the bubbles scroll. */
.chat-layout > #chat-messages {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline: auto;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;          /* hide scrollbar (Firefox) — only bubbles scroll */
  -ms-overflow-style: none;
}

.chat-layout > #chat-messages::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.onb-sidebar {
  flex: 0 0 340px;
  width: 340px;
  background: #494d65;
  background-clip: border-box;     /* bg fills under the transparent border below */
  border-radius: 8px;
  /* Product: symmetric 16px horizontal insets on the menu. The right inset is
     split into 11px padding + a 5px TRANSPARENT border. The scrollbar renders at
     the padding-box edge, so the border pushes it 5px in from the visual edge in
     EVERY browser (incl. Firefox, which ignores ::-webkit-scrollbar). The bg
     fills under the transparent border, so the sidebar still looks full-width. */
  padding: 24px 11px 24px 16px;
  border-right: 5px solid transparent;
  z-index: 20;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateX(calc(-100% - 32px));
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

/* Custom scrollbar (Figma 4018:15576): 8px, fully-rounded, light channel with a
   darker thumb. */
/* Thin thumb, transparent track. The 5px transparent border-right on .onb-sidebar
   already pushes the scrollbar in from the visual edge (works in every browser),
   so here we just style it: a 6px rounded thumb, no track background. */
.onb-sidebar::-webkit-scrollbar { width: 6px; }
.onb-sidebar::-webkit-scrollbar-track { background: transparent; border: 0; }
.onb-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(176, 185, 208, 0.28);
  border-radius: 999px;
}
.onb-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(176, 185, 208, 0.45); }
.onb-sidebar { scrollbar-width: thin; scrollbar-color: rgba(176, 185, 208, 0.28) transparent; }

.onb-sidebar.visible {
  transform: translateX(0);
  opacity: 1;
}

/* Head — "Workspace" label + workspace name (Figma 3855:14033) */
.onb-sb-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  word-break: break-word;
}

.onb-sb-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #8390b7;
  white-space: nowrap;
}

.onb-sb-ws-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  color: var(--text-white);
  word-break: break-word;
}

.onb-sb-divider {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 0;
  width: 100%;
}

/* future-steps (Figma 3901:3) — now also acts as progress + nav */
.onb-sb-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.onb-sb-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 8px 12px;
  margin: 0;
  border-radius: 8px;
  word-break: break-word;
  transition: background 0.2s ease;
}

.onb-sb-step-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  opacity: 0.35;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.onb-sb-step-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #b0b9d0;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

/* Filled-in value (e.g. the entered workspace name) — reads as data, not a hint */
.onb-sb-step-sub.is-value {
  color: #fff;
  font-weight: 500;
  opacity: 0.9;
}

/* About + Priorities — the entered picks wrap and are clamped to 2 lines. The
   "+N" overflow is computed in JS (setSidebarStepListSub); max-height is the
   visual backstop. Plain block (not -webkit-box) so scrollHeight measures true
   content height. */
.onb-sb-step[data-step="2"] .onb-sb-step-sub,
.onb-sb-step[data-step="3"] .onb-sb-step-sub {
  white-space: normal;
  overflow: hidden;
  max-height: 3em;   /* 2 lines @ line-height 1.5 */
}

/* DONE — visited step, clickable to jump back into the dialog */
.onb-sb-step.is-done {
  cursor: pointer;
}
.onb-sb-step.is-done .onb-sb-step-title { opacity: 0.85; }
.onb-sb-step.is-done .onb-sb-step-sub { opacity: 0.5; }
.onb-sb-step.is-done:hover { background: rgba(255, 255, 255, 0.05); }
.onb-sb-step.is-done:hover .onb-sb-step-title { opacity: 1; }

/* Separator between every sidebar step */
.onb-sb-step + .onb-sb-step {
  border-top: 1px solid rgba(176, 185, 208, 0.1);
}

/* CURRENT — the step we're on right now */
.onb-sb-step.is-current {
  background: rgba(255, 255, 255, 0.09);
}
.onb-sb-step.is-current .onb-sb-step-title { opacity: 1; color: #fff; }
.onb-sb-step.is-current .onb-sb-step-sub { opacity: 0.7; }

/* ===== Filled-step nested content (Figma State=Full) ===== */
/* Nested data (categories, accounts, files, currencies) reads as real data, so
   it stays fully legible regardless of the step's done/current dim state. */
.onb-sb-cat-list,
.onb-sb-file-list,
.onb-sb-cur-list { opacity: 1 !important; }

/* Category list under a money-type step (Revenue / Costs / …) */
.onb-sb-cat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.onb-sb-cat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.onb-sb-cat-name {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.onb-sb-cat-name > svg { flex: 0 0 auto; }
.onb-sb-cat-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #b0b9d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.onb-sb-acc-list {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  width: 100%;
}
.onb-sb-acc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  width: 100%;
}
.onb-sb-acc-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #b0b9d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onb-sb-acc-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}
.onb-sb-acc-num,
.onb-sb-acc-cur {
  font-size: 12px;
  line-height: 1.5;
  color: #b0b9d0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.onb-sb-acc-num { font-weight: 500; }
.onb-sb-acc-cur { font-weight: 600; }

/* Data step — uploaded files / sources with a status check icon */
.onb-sb-file-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.onb-sb-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  width: 100%;
}
.onb-sb-file-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2aa7ee;
}
.onb-sb-file-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #b0b9d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Currency step — primary + secondary lines */
.onb-sb-cur-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 2px;
}
.onb-sb-cur-line {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #b0b9d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* The "other currencies" line may wrap up to 2 lines instead of truncating. */
.onb-sb-cur-line-others {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Uploaded files / connected sources preview inside the Data step */
.onb-sb-sublist {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
}
.onb-sb-subitem {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.onb-sb-subitem::before {
  content: "›";
  color: var(--blue-primary);
  margin-right: 5px;
  opacity: 0.8;
}

/* Chosen-data preview inside a completed step (e.g. picked avatar) */
.onb-sb-avatar-thumb {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: 6px;
  border-radius: 50%;
  overflow: hidden;
  background: #4e5b76;
}

/* Chat input area is full-width (background spans edge to edge); the pill and the
   skip link are centered horizontally on the page (max-width pill + margin auto). */

/* ===== WELCOME SCREEN ===== */

.welcome-screen {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.legal-links.welcome-legal {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Divider between welcome and chat */
.chat-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.08);
  border: none;
  margin: 0;
}

.welcome-content {
  text-align: center;
  width: 874px;
  max-width: 100%;
  padding: 44px;
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.welcome-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* --- Welcome intro elements: hidden by default, animated by JS --- */
.welcome-title,
.welcome-subtitle,
.welcome-tagline,
.welcome-promise {
  opacity: 0;
  filter: blur(16px);
  transform: scale(0.96);
}

.welcome-divider {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-muted), transparent);
  opacity: 0;
}

.welcome-divider.animate-in {
  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-plan-info,
.plan-stats,
.welcome-choice,
.btn-start,
.trial-disclosure,
.legal-links,
.welcome-lock {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.95);
}

.welcome-title.animate-in {
  animation: blurIn 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-subtitle.animate-in {
  animation: blurIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-tagline.animate-in {
  animation: blurIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-promise.animate-in {
  animation: blurIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-choice.animate-in {
  animation: fadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-plan-info.animate-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.plan-stats.animate-in {
  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.trial-disclosure.animate-in,
.legal-links.animate-in {
  animation: fadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.btn-start.animate-in {
  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-title {
  font-size: 177px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-white);
}

.welcome-dot {
  letter-spacing: -1.12px;
}

.welcome-subtitle {
  font-size: 28px;
  font-weight: 500;
  color: var(--text-white);
}

.welcome-tagline {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-white);
  max-width: 560px;
}

.welcome-promise {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dimmed);
  max-width: 560px;
  margin-top: 4px;
}

/* Choice buttons — Automatic / Manual */
@property --grad-angle {
  syntax: '<angle>';
  initial-value: 94deg;
  inherits: false;
}

@keyframes spin-main-gradient {
  from { --grad-angle: 94deg; }
  to   { --grad-angle: 454deg; }
}

.welcome-choice {
  display: flex;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
}

.choice-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 16px 20px;
  width: 320px;
  background: transparent;
  border: 1px solid var(--text-white);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font);
  min-width: 175px;
  text-align: left;
}

.choice-btn:hover {
  transform: scale(1.02);
}

.choice-btn.is-active {
  border-color: transparent;
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    linear-gradient(var(--grad-angle), #00f0ff 0%, #1da5f1 100%) border-box;
}

.choice-btn.is-active:hover {
  animation: spin-main-gradient 3s linear infinite;
}

.choice-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
  line-height: normal;
}

/* Small/Italic — UI Kit token (Montserrat 12/400 italic, 1.5) — hint/quote use-case */
.choice-tagline {
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-dimmed);
  line-height: 1.5;
  text-align: left;
  margin-bottom: 2px;
  white-space: nowrap;
}

.choice-desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dimmed);
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

/* Trial info — takes full viewport height and centers its content vertically,
   so the block reads as a standalone screen (no split attention with welcome above). */
.trial-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 24px;
  min-height: 100vh;
  min-height: 100dvh; /* better handling of mobile browser chrome */
  box-sizing: border-box;
}

/* Unlock lock — symbolic "Ultimate plan unlocked". Rendered as a Lottie animation
   (see assets/lock-animation.json, init in app.js). The container is a plain div;
   lottie-web injects its own <svg> inside. */
.welcome-lock {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto -8px;
  filter: drop-shadow(0 6px 20px rgba(0, 240, 255, 0.25));
}

.welcome-lock svg {
  display: block;
  width: 100%;
  height: 100%;
}

.welcome-lock.animate-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-plan-info {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-white);
  text-align: center;
  max-width: 520px;
}

.highlight-blue {
  color: var(--blue-primary);
  font-weight: 600;
}

.plan-stats {
  display: inline-flex;
  gap: 40px;
  justify-content: center;
  background: var(--bg-dark);
  border-radius: var(--radius-s);
  padding: 24px;
  width: fit-content;
}

/* Trial / Legal disclosure lines under trial-info */
.trial-disclosure {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dimmed);
  text-align: center;
  max-width: 560px;
  margin-top: 8px;
}

.legal-links {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

.legal-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(131, 144, 183, 0.5);
  transition: color 0.2s;
}

.legal-link:hover {
  color: var(--text-dimmed);
  text-decoration-color: var(--text-dimmed);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Pre-animation hidden state — each .stat fades in individually with a stagger */
  opacity: 0;
  transform: translateY(8px);
}

@keyframes statRiseIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
  60%  { opacity: 1; transform: translateY(0)   scale(1.03); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}

.stat.animate-in {
  animation: statRiseIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-white);
}

/* UI Kit primary button (gradient, medium) — Button/button-medium, ob-btn--primary */
.btn-start {
  appearance: none;
  border: 0;
  /* Solid primary colour (same as bubble primary buttons) — the old cyan→blue
     gradient washed out the white label. */
  background: var(--blue-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 30px;
  min-height: 40px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.15s ease, transform 0.08s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
}

.btn-start:hover {
  background: #1b96dd;
  filter: none;
}

.btn-start:active {
  background: #1786cc;
  transform: translateY(1px) scale(0.985);
  filter: none;
  transition: transform 0.04s ease, background 0.04s ease;
}

.btn-start:focus-visible {
  outline: 0;
  filter: drop-shadow(0 4px 7px #7FBDD9);
}

/* ===== CHAT MESSAGES ===== */
.chat-messages {
  max-width: 1040px;
  margin: 0 auto;
  padding: 4px 16px 12px;
}

.chat-messages.wide {
  max-width: 1320px;
}

/* ===== MESSAGES ===== */
.message {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  animation: messageIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.message.user {
  flex-direction: row-reverse;
  animation: userMessageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Undo button on user messages — sits left of bubble in flex flow */
.message.user .undo-btn {
  width: 17px;
  min-width: 17px;
  height: 14px;
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message.user .undo-btn svg {
  display: block;
}

.message.user:hover .undo-btn {
  opacity: 1;
}

.message.user .undo-btn:hover svg path {
  fill: var(--text-dimmed);
}

.bot-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 2px;
}

.bot-avatar img {
  width: 100%;
  height: 100%;
  display: block;
}

.user-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #4e5b76;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.bubble {
  background: var(--bg-bubble-bot);
  border-radius: 0 16px 16px 16px;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

.message.bot .bubble {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bubble heading — UI Kit Title/H3 (Montserrat 20px / 700 Bold / 1.4).
 * One-glance summary of what the user has to do on this step.
 * Use-case from spec: "Заголовок модалки, секції" — fits chat-bubble section. */
.bubble-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-white);
  margin: 0;
}

/* Bubble subtitle — UI Kit Subtitle/S Medium (Montserrat 16px / 500 Medium / 1.3).
 * Optional clarifier under .bubble-title. */
.bubble-subtitle {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-dimmed);
  margin: 0;
}

/* Tighter gap between title and subtitle (visually paired). */
.bubble-title + .bubble-subtitle {
  margin-top: -4px;
}

.message.user .bubble {
  background: #3f435b;
  border-radius: 16px 0 16px 16px;
  font-weight: 400;
  text-align: right;
}

/* ===== CLICKABLE EXAMPLES ===== */
.example-link {
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s;
}

.example-link:hover {
  color: var(--blue-primary);
}

/* ===== TYPING INDICATOR ===== */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typingDot 1.4s infinite;
}

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

/* ===== ACTION BUTTONS ===== */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.action-btn {
  background: rgba(42, 167, 238, 0.1);
  border: 1px solid var(--blue-primary);
  color: var(--blue-primary);
  padding: 10px 20px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn:hover {
  background: var(--blue-primary);
  color: white;
  transform: translateY(-1px);
}

.action-btn.primary {
  background: var(--blue-primary);
  color: white;
}

.action-btn.primary:hover {
  background: #1b96dd;
}

/* Disabled primary CTA — used by the Empty-state "Pick a currency to continue"
   button before the user has chosen anything. */
.action-btn.primary.action-btn-disabled,
.action-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-btn.primary.action-btn-disabled:hover,
.action-btn.primary:disabled:hover {
  background: var(--blue-primary);
  transform: none;
}

.action-btn.secondary {
  background: rgba(255,255,255,0.05);
  border-color: var(--text-muted);
  color: var(--text-dimmed);
}

.action-btn.secondary:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

/* ===== CHAT BUTTONS (Figma style) ===== */
.chat-buttons {
  display: flex;
  gap: 10px;
  padding-top: 16px;
}

.chat-btn {
  background: #494d65;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: #f5f6fa;
  cursor: pointer;
  transition: background 0.2s;
}

.chat-btn:hover {
  background: #565b78;
}

/* ===== AVATAR CHOOSER ===== */
.upload-link {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 10px;
}

.upload-icon {
  display: inline-block;
  vertical-align: middle;
}

.link-blue {
  color: var(--blue-primary);
  font-weight: 600;
  cursor: pointer;
}

.link-blue:hover {
  text-decoration: underline;
}

.avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin-top: 4px;
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #4e5b76;
}

.avatar-circle:hover {
  transform: scale(1.15);
}

.avatar-circle.selected {
  border: 1px solid rgba(255, 255, 255, 0.5);
  transform: scale(1.15);
}

.skip-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  /* Sits between the bubble content and the Skip/Continue row. With the flex
     column gap (10px) above and below, this centres it vertically in that space
     (matches the 10px on .about-actions below). */
  margin-top: 10px;
}

.skip-link {
  color: var(--blue-primary);
  cursor: pointer;
}

.skip-link:hover {
  text-decoration: underline;
}

/* In-text "skip"/"skip this" inside the skip-text line reads as plain copy, not
   a blue link — it takes the colour of the sentence around it and isn't a button
   (the real action is the Skip button in .about-actions). */
.skip-text .skip-link {
  color: inherit;
  cursor: default;
}
.skip-text .skip-link:hover {
  text-decoration: none;
}

.selected-avatar {
  width: 32px;
  height: 32px;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  background: #4e5b76;
}

/* ===== DROP ZONE ===== */
/* ===== DATA STEP — two columns: text left, upload/connect right ===== */
.data-step-cols {
  display: flex;
  gap: 28px;
  align-items: stretch;
}

.data-step-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.data-step-actions {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The whole drop-zone box stretches to the full bubble height */
.data-step-actions .data-dropbox {
  flex: 1 1 auto;
}

/* Upload sub-area fills the space above the "or" divider + chips */
.data-step-actions .drop-zone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}


/* Privacy reassurance — plain points with a blue icon, no tinted box */
.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
}
.privacy-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}
.privacy-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-dimmed);
}
.privacy-lead svg,
.privacy-point svg {
  flex: 0 0 auto;
  color: var(--blue-primary);
}
.privacy-point svg { margin-top: 1px; }
.privacy-list .privacy-link { font-size: 12.5px; margin-top: 2px; }

/* ===== UPLOAD INTRO — explainer bubble shown before the upload bubble =====
   Chaos -> AI -> Order illustration assembled from pre-exported SVG parts
   (assets/upload-illo/*). Each part is an absolutely-positioned, individually
   addressable element (class .illo-<name>) so it can be animated later.
   Container keeps the 1480x513 aspect so it scales with the bubble width. */
.upload-intro-illo {
  position: relative;
  /* Full-bleed: stretch edge-to-edge past the .bubble's 24px horizontal padding. */
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
  aspect-ratio: 1480 / 513;
  margin-top: 12px;
  /* Transparent at the top so the illustration blends into the bubble bg,
     fading down to the illustration's own dark panel colour at the bottom. */
  background: linear-gradient(180deg, transparent 0%, #2D3141 100%);
  border-radius: 0;
  overflow: hidden;               /* clips order-folders bleeding off the right/bottom */
}
.upload-intro-illo .illo-part { position: absolute; display: block; }
/* Positions as % of the 1480x513 frame (origin = frame top-left). */
.illo-chaos-csv-1          { left: 3.19611%;  top: 2.58589%;  width: 17.09459%; height: 27.87524%; }
.illo-chaos-csv-2          { left: 10.39203%; top: 74.41832%; width: 17.09459%; height: 25.73099%; }
.illo-chaos-folder-unsorted{ left: 20.03378%; top: 4.19103%;  width: 5.87838%;  height: 11.69591%; }
.illo-chaos-spreadsheet    { left: 0%;         top: 11.74411%; width: 30.47297%; height: 85.57505%; }
.illo-ai-robot             { left: 39.83108%; top: 22.12476%; width: 20.27027%; height: 58.47953%; }
.illo-line-1               { left: 21.99324%; top: 49.45926%; width: 17.70270%; height: 2.33918%; }
.illo-line-2               { left: 50.77703%; top: 49.45926%; width: 17.70270%; height: 2.33918%; }
.illo-order-folders        { left: 72.09662%; top: 3.89864%;  width: 27.90541%; height: 96.10136%; }
.illo-chaos-folder-2025    { left: 4.66989%;  top: 85.38928%; width: 5.81081%;  height: 11.50097%; }

/* One-line security reassurance under the illustration copy. */
.upload-intro-secure {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.upload-intro-secure svg { flex: 0 0 auto; color: var(--blue-primary); margin-top: 1px; }

@media (max-width: 900px) {
  .data-step-cols { flex-direction: column; gap: 18px; }
  .data-step-actions { flex-basis: auto; }
}

/* ===== ABOUT STEP (what you do + money problems) ===== */
.about-body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 8px;
}

/* Quick-tap business profile chips — single-select per group, each group
   optional. Visual mirrors the manual currency chips (flat pill) so the
   prototype keeps one selectable language. Active state via .is-active. */
.about-chip-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.about-chip-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.about-chip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about-chip {
  background: #42485d;
  border: 1px solid transparent;
  color: var(--text-white);
  height: 32px;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.about-chip:hover { background: #4d536a; }
.about-chip.is-active {
  background: #304762;
  border-color: var(--blue-primary);
  color: var(--text-white);
}

.about-helper {
  font-size: 13px;
  color: var(--text-dimmed);
  margin-top: 16px;
}

/* Concerns — multi-select checkboxes (a user often has several problems) */
.about-pains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 20px;
  margin-top: 12px;
}

.about-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dimmed);
  user-select: none;
}

/* Native input is visually hidden; .ob-checkbox is the UI-Kit control */
.about-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* UI Kit Checkbox (Figma 76:2187): white bg, thin gray border, dark-gray glyph */
.about-check .ob-checkbox {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D4DAE7;
  border-radius: 4px;
  background: #FCFCFC;
  color: #4E5B76;
  transition: border-color 0.15s;
}
.about-check .ob-checkbox svg { width: 12px; height: 12px; display: none; }
.about-check .ob-checkbox[data-state="checked"] svg.check { display: block; }
.about-check:hover .ob-checkbox { border-color: #8390B7; }
.about-check input:focus-visible + .ob-checkbox {
  box-shadow: 0 0 0 3px rgba(42, 167, 238, 0.3);
}
.about-check input:checked ~ .about-check-label { color: var(--text-white); }
.about-check input:disabled ~ * { opacity: 0.6; }

.about-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 10px;
}
/* Action-row Skip (next to a primary button) is grey, so only the primary
   stays blue. In-text "skip" links (e.g. .skip-text .skip-link) keep their colour. */
.about-actions .skip-link {
  color: var(--text-muted);
}
.about-actions .skip-link:hover {
  color: var(--text-dimmed);
  text-decoration: none;
}

@media (max-width: 560px) {
  .about-pains { grid-template-columns: 1fr; }
}

/* ===== PRIVACY REASSURANCE BLOCK ===== */
.privacy-block {
  border: 1px solid rgba(42, 167, 238, 0.18);
  background: rgba(42, 167, 238, 0.05);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.privacy-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
  display: flex;
  align-items: center;
}

.privacy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.privacy-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dimmed);
}

.privacy-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 11px;
  height: 7px;
  border-left: 1.6px solid var(--blue-primary);
  border-bottom: 1.6px solid var(--blue-primary);
  transform: rotate(-45deg);
}

.privacy-link {
  align-self: flex-end;
  font-size: 13px;
}

/* Compact one-line variant — lock + single sentence + inline link */
.privacy-block.privacy-compact {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
}

.privacy-block.privacy-compact span {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dimmed);
}

.privacy-block.privacy-compact .privacy-link {
  align-self: auto;
  white-space: nowrap;
}

/* Outer box now holds BOTH upload + connect — one drop-zone container */
.data-dropbox {
  border: 1.5px dashed rgba(131, 144, 183, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.data-dropbox:not(:has(.drop-zone.uploading)):not(:has(.drop-zone.uploaded)):not(:has(.drop-zone.drag-hover)):not(:has(.drop-zone.file-error)):hover {
  border-color: rgba(42, 167, 238, 0.5);
  background: rgba(255, 255, 255, 0.035);
}
.data-dropbox:has(.drop-zone.drag-hover) {
  border-color: var(--blue-primary);
  background: rgba(42, 167, 238, 0.05);
}

/* Upload sub-area inside the box (clickable). No own border — parent handles it. */
.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 24px 14px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: none;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  background: transparent;
}

/* "or" divider between the upload area and the connect chips */
.data-dropbox-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.data-dropbox-or::before,
.data-dropbox-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* ===== Split drop-zone: upload | (vertical "or") | connect — one big box ===== */
.data-step-body { margin-top: 8px; }
.privacy-list { margin-top: 12px; }

.data-dropbox-split {
  margin-top: 16px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 16px;
}
.data-dropbox-split .drop-zone {
  padding: 20px 24px 14px;
  min-height: unset;
}
/* Upload частина дропзони */
.drop-zone-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
}

/* Розділювач з "or" */
.drop-zone-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}
.drop-zone-or {
  font-family: var(--font);
  font-size: 13px;
  color: #8390b7;
  flex-shrink: 0;
}

/* Кнопка Connect всередині дропзони */
.connect-direct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 4px 12px;
  border: 0;
  border-radius: 8px;
  background: #494d65;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: #fcfcfc;
  transition: background-color 0.15s ease;
}
.connect-direct-btn:hover {
  background: #545a78;
}
.connect-direct-btn:active {
  background: #41465c;
}

.drop-zone-icon {
  display: flex;
  justify-content: center;
  color: var(--blue-primary);
  margin-bottom: 10px;
  opacity: 0.9;
}

/* ===== CONNECT SECTION ===== */
.connect-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
}


/* ===== FILE CHIPS ===== */
.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-dark);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
}

.file-chip .file-icon {
  font-size: 14px;
}

.file-chip .file-status {
  color: #34d399;
}

/* ===== PROCESSING LIST ===== */
.processing-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.process-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-dark);
  border-radius: var(--radius-s);
  font-size: 13px;
}

.process-item .status-icon {
  font-size: 16px;
  min-width: 20px;
  text-align: center;
}

.process-item .process-name {
  flex: 1;
  font-weight: 500;
}

.process-item .process-detail {
  font-size: 11px;
  color: var(--text-muted);
}

.process-item.done .status-icon { color: #34d399; }
.process-item.loading .status-icon { animation: spin 1s linear infinite; }
.process-item.pending .status-icon { color: var(--text-muted); }

/* Stats Dashboard */
.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.stat-card {
  text-align: center;
}

.stat-card .stat-number {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue-primary);
}

.stat-card .stat-name {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ===== SOURCE SUGGESTIONS ===== */
.ss-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ss-text {
  font-size: 14px;
  font-weight: 400;
  color: white;
  line-height: 1.4;
}

.ss-text strong {
  font-weight: 700;
}

.ss-source-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-source-row {
  background: #2e3243;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ss-source-header {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}

.ss-source-name {
  font-size: 14px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.ss-source-badge {
  background: #3b3f50;
  border-radius: 4px;
  padding: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #b0b9d0;
  line-height: 1.5;
  white-space: nowrap;
}

.ss-source-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ss-action-btn {
  background: #494d65;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  height: 28px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: #f5f6fa;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.2s;
}

.ss-action-btn:hover {
  background: #565b78;
}

.ss-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ss-action-icon svg {
  width: 100%;
  height: 100%;
}

.ss-divider {
  height: 1px;
  background: rgba(131, 144, 183, 0.2);
}

.ss-hint {
  font-size: 12px;
  font-weight: 400;
  color: #8390b7;
  line-height: 1.5;
}

.ss-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}

.ss-skip {
  font-size: 13px;
  font-weight: 400;
  color: #8390b7;
  cursor: pointer;
  line-height: 1.4;
}

.ss-skip:hover {
  color: var(--text-white);
}

.ss-upload-btn {
  background: #2aa7ee;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  min-height: 40px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.ss-upload-btn:hover {
  background: #1b96dd;
}

/* ===== CURRENCY SETUP ===== */
.currency-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.currency-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.currency-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white);
  line-height: 1.4;
}
/* Muted inline suffix on the secondary-block label — "(detected in your files)". */
.currency-section-label-suffix {
  font-weight: 400;
  font-size: 11px;
  color: #8390b7;
}
/* Muted explanation under "Other currencies detected:" (secondary block). */
.cur2-sec-explain {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 2px;
  margin-bottom: 8px;
}

/* Primary currency — chip style */
.currency-primary-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #42485d;
  padding: 5px 8px;
  width: fit-content;
}

.currency-chip-code {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
  line-height: 1.4;
  white-space: nowrap;
}

.currency-chip-fullname {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
}

.currency-change {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-primary);
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}

/* Other currencies — small chips */
.currency-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.currency-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #42485d;
  border-radius: 4px;
  padding: 5px 8px;
}

.currency-chip-remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #8390b7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  opacity: 0.5;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.currency-chip-remove:hover {
  opacity: 1;
}

.currency-add {
  display: flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
  /* Align left edge with the radio-row options (.cur2-row-opt has padding:8px),
     so the link starts from the same vertical line as the radio icons. */
  padding-left: 8px;
}

.currency-add span {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-primary);
  line-height: 1.4;
  white-space: nowrap;
}

.currency-footer {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-white);
  line-height: 1.5;
}

.currency-explain {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-white);
  line-height: 1.5;
}

.currency-disclaimer {
  font-size: 12px;
  font-weight: 400;
  color: #8390b7;
  line-height: 1.5;
}

.currency-actions {
  padding-top: 0;
  /* Whole-bubble CTA sits on the right, like the other bubbles. */
  display: flex;
  justify-content: flex-end;
}

/* ===== CURRENCY (Figma 3989:13042 — primary currency picker) ===== */
.cur2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.cur2-tc {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cur2-body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-white);
}
.cur2-detected {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cur2-detected-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-white);
}
.cur2-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.cur2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.cur2-row:hover {
  background: transparent;
}
.cur2-row.selected {
  background: transparent;
}
.cur2-row.selected:hover {
  background: transparent;
}
/* Radio — canonical UI Kit component (.ob-radio, design.corp.orbuculum.app
   #uikit › Controls). Frame 20×20, box-sizing border-box, 1px ring
   #d4dae7 (gray-200), bg #fcfcfc (white-200), radius-full 999px. Dot 7×7
   #8390b7 (gray-400). Hover (unchecked): ring → #8390b7. */
.cur2-radio {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 218, 231, 0.42);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.cur2-radio::after {
  content: "";
  width: 0;
  height: 0;
  border-radius: 999px;
  background: #8390b7;
  transition: width 0.15s ease, height 0.15s ease;
}
.cur2-row:not(.selected):hover .cur2-radio,
.cur2-row-opt:not(.selected):hover .cur2-radio,
.cur2-other-row:not(.selected):hover .cur2-radio {
  border-color: rgba(212, 218, 231, 0.62);
}
.cur2-row.selected .cur2-radio {
  border-color: rgba(212, 218, 231, 0.62);
}
.cur2-row.selected .cur2-radio::after {
  width: 6px;
  height: 6px;
}
.cur2-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.cur2-row-l1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.cur2-code {
  font-weight: 600;
  color: var(--text-white);
}
.cur2-sym {
  font-weight: 400;
  color: var(--text-dimmed);
}
.cur2-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.cur2-div {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}
/* Currency primary picker — natural vertical list of radio options
   (not a table: no fixed columns, no right-aligned percentage). */
.cur2-list-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.cur2-list-options .cur2-row-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: background 0.15s ease;
}
.cur2-list-options .cur2-row-opt:hover {
  background: transparent;
}
.cur2-list-options .cur2-row-opt.selected {
  background: transparent;
}
.cur2-list-options .cur2-row-opt.selected:hover {
  background: transparent;
}
.cur2-list-options .cur2-row-opt.selected .cur2-radio {
  border-color: rgba(212, 218, 231, 0.62);
}
.cur2-list-options .cur2-row-opt.selected .cur2-radio::after {
  width: 6px;
  height: 6px;
}
/* Text flows naturally: a first line (code — name  pct  [Recommended]) plus an
   optional explanation line beneath it (only on the recommended row). */
.cur2-row-opt-text {
  flex: 1;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cur2-row-opt-l1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cur2-row-opt-code {
  font-weight: 600;
  color: var(--text-white);
}
.cur2-row-opt-name {
  color: var(--text-dimmed);
}
.cur2-row-opt-pct {
  color: var(--text-muted);
  font-size: 12px;
}
.cur2-subtitle {
  color: var(--text-dimmed);
}
/* Explanation paragraph under the title (primary currency rationale). */
.cur2-explain {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== CURRENCY · recommendation source + highlight ==================
   A marker above the list says where the suggestion came from (Robot +
   "AI suggestion" / pin + "By region"), the recommended row is highlighted,
   and a small line under it explains why. The highlight + pill + explanation
   stay put on the RECOMMENDED currency even after the user picks another, so
   "recommended" and "selected" never get confused. */
.cur2-source {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.cur2-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
}
.cur2-source-badge svg {
  display: block;
  flex: 0 0 auto;
}
/* Recommended row — no whole-row box/fill anymore; only the inline "Recommended"
   pill marks it. Kept as a hook in case the highlight is ever reinstated. */
.cur2-row-rec {
  border-radius: 8px;
}
/* "Recommended" pill — sits inline after the currency name. */
.cur2-rec-pill {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--blue-primary, #2aa7ee);
  background: rgba(42, 167, 238, 0.14);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.4;
}
/* "Why recommended" line under the recommended row. */
.cur2-rec-explain {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
/* Honest reassurance that the choice isn't permanent. */
.cur2-change-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
/* Empty primary-currency bubble (data skipped) — full-width search + a spaced
   "Common" chip group, matching Figma 3974-16468. */
.cur2-empty-search.manual-currency-dropdown {
  width: 100%;
  max-width: 100%;
}
.cur2-empty .manual-currency-suggested {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Secondary currencies block — embedded in the prefilled cur2 bubble.
   Matches the live prototype: "Other currencies detected:" label, a wrap of
   removable currency chips, then a "+ Add more currencies" link that reveals
   the (initially hidden) search input on click. */
.cur2-secondary-block {
  padding-top: 16px;
  border-top: 1px solid rgba(176, 185, 208, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cur2-sec-search-wrap.manual-currency-dropdown {
  width: 100%;
  max-width: 100%;
}

/* ===== CURRENCY · "Other" long-tail picker =====================
   A delicate text link below the top radio rows opens a searchable,
   scrollable dropdown with every currency not in the top list. Picking
   one makes it primary (its own selected radio-style row appears). */
.cur2-other-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Selected Other currency rendered as a radio-style row (reuses .cur2-radio).
   Hidden until the user picks something from the dropdown. */
.cur2-other-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: background 0.15s ease;
}
.cur2-other-row.cur2-other-row-hidden {
  display: none;
}
.cur2-other-row.selected .cur2-radio {
  border-color: rgba(212, 218, 231, 0.62);
}
.cur2-other-row.selected .cur2-radio::after {
  width: 6px;
  height: 6px;
}
/* The "Other" link — a delicate secondary-text link, not a button.
   8px left pad aligns its left edge with the radio icons (.cur2-row-opt /
   .cur2-other-row both use padding:8px), same as "+ Add currency". */
.cur2-other-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
  transition: color 0.15s ease;
}
.cur2-other-link:hover {
  color: var(--blue-primary, #2aa7ee);
}
.cur2-other-link-active {
  color: var(--blue-primary, #2aa7ee);
}
/* The Other dropdown reuses .manual-currency-dropdown styling; here we strip the
   dark "підкладка" panel so the search field and the scrollable list sit cleanly
   on the bubble background, and cap the list height so it scrolls. */
.cur2-other-search-wrap.manual-currency-dropdown {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.cur2-other-search-wrap.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])),
.cur2-other-search-wrap.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) {
  background: transparent;
}
.cur2-other-search-wrap.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-dropdown-search,
.cur2-other-search-wrap.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-dropdown-search {
  padding: 0 0 8px;
}
.cur2-other-search-wrap .manual-currency-dropdown-options {
  max-height: 220px;
  overflow-y: auto;
}
.cur2-other-search-wrap .manual-currency-option {
  padding: 8px 12px;
  border-radius: 6px;
}

/* ===== CURRENCY · "Other" inline custom-currency input ===============
   The 4th radio ("Other") reveals this inline autocomplete field right
   under the list. Reuses the .manual-currency-dropdown search + options
   styling (active-state backdrop, focus, hover); here we only size it to
   the bubble, strip the dark container padding and cap the list height. */
.cur2-other-input-wrap.manual-currency-dropdown {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-top: 6px;
}
.cur2-other-input-wrap.manual-currency-dropdown[hidden] {
  display: none;
}
.cur2-other-input-wrap.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])),
.cur2-other-input-wrap.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) {
  background: transparent;
}
.cur2-other-input-wrap.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-dropdown-search,
.cur2-other-input-wrap.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-dropdown-search {
  padding: 0 0 6px;
}
.cur2-other-input-wrap .manual-currency-dropdown-options {
  max-height: 220px;
  overflow-y: auto;
}
.cur2-other-input-wrap .manual-currency-option {
  padding: 8px 12px;
  border-radius: 6px;
}

/* ===== ADD ACCOUNTS (manual-style adder, pre-filled by category) ===== */
.acc-prefill .acc-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.acc-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acc-row-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}
.acc-row-count {
  color: var(--text-muted);
  font-weight: 500;
}
.acc-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ===== CATEGORIES ===== */
.cat-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cat-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-white);
  line-height: 1.5;
}

/* --- Icons --- */
.cat-icon-big {
  width: 17px;
  height: 13px;
  flex-shrink: 0;
}

.cat-icon-sm {
  width: 13px;
  height: 10px;
  flex-shrink: 0;
}

/* --- Grid --- */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px 24px;
}

.cat-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-white);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat-title-name {
  line-height: 1.2;
}

/* ⓘ icon + tooltip (UI Kit: Dark, 12/150%, #393D53 bg, radius 5, padding 8/12) */
.cat-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  cursor: help;
  outline: none;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.cat-info:hover,
.cat-info:focus-visible {
  opacity: 1;
}

.cat-info::before,
.cat-info::after {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

/* tooltip body — appears below the icon */
.cat-info::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #393D53;
  color: #FCFCFC;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 5px;
  width: max-content;
  max-width: 240px;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* tooltip arrow — points up to the icon */
.cat-info::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #393D53;
}

.cat-info:hover::before,
.cat-info:hover::after,
.cat-info:focus-visible::before,
.cat-info:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.cat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-account-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-account-name {
  font-size: 13px;
  font-weight: 600;
  color: #b0b9d0;
  line-height: 1;
}

/* --- Divider --- */
.cat-divider {
  width: 100%;
  height: 1px;
  background: #8390b7;
}

/* --- Uncategorized text --- */
.cat-uncategorized-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-white);
}

/* --- Done cards --- */
#cat-done-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-done-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2d3141;
  border-radius: 12px;
  padding: 14px 24px;
  opacity: 0.7;
}

.cat-done-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-done-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
}

.cat-done-card-num {
  font-size: 12px;
  font-weight: 400;
  color: #4e5b76;
}

.cat-done-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cat-done-label {
  font-size: 12px;
  font-weight: 500;
  color: #8390b7;
}

/* --- Active card --- */
.cat-active-card {
  background: #2d3141;
  border-radius: 16px;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cat-active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 12px;
}

.cat-active-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-active-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-white);
}

.cat-active-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-active-cardnum {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}

/* --- Transactions --- */
.cat-active-txns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 24px;
}

.cat-txn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.cat-txn-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-txn-date {
  font-size: 11px;
  font-weight: 400;
  color: #b0b9d0;
  width: 70px;
  flex-shrink: 0;
}

.cat-txn-badge {
  font-size: 10px;
  font-weight: 500;
  color: #b0b9d0;
  background: rgba(89, 97, 115, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

.cat-txn-merchant {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white);
  white-space: nowrap;
}

.cat-txn-card {
  font-size: 10px;
  font-weight: 400;
  color: #4e5b76;
  white-space: nowrap;
}

.cat-txn-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cat-txn-foreign {
  font-size: 10px;
  font-weight: 400;
  color: #4e5b76;
  white-space: nowrap;
}

.cat-txn-amount {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-white);
  white-space: nowrap;
}

/* --- Question --- */
.cat-active-question {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dimmed);
  padding: 12px 24px 0;
}

/* --- Category buttons --- */
.cat-active-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 8px 24px 0;
  justify-content: space-between;
}

.cat-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #373b4d;
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
}

.cat-btn span {
  font-size: 11px;
  font-weight: 600;
  color: #f5f6fa;
  font-family: Montserrat, sans-serif;
  white-space: nowrap;
}

.cat-btn.selected {
  background: var(--blue-primary);
  outline: 2px solid rgba(42, 167, 238, 0.4);
}

/* --- Inline name edit --- */
.cat-active-name {
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
}

.cat-active-name.cat-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.cat-name-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--blue-primary);
  color: var(--text-white);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 0 0 2px;
  outline: none;
  width: 140px;
}

.cat-edit-icon {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.cat-active-header-left:hover .cat-edit-icon {
  opacity: 1;
}

/* Done card entry animation */
@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.97); }
  100% { opacity: 0.7; transform: translateY(0) scale(1); }
}

/* --- Actions --- */
.cat-active-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px 0;
}

.cat-skip {
  font-size: 13px;
  font-weight: 400;
  color: #8390b7;
  cursor: pointer;
}

.cat-confirm-btn {
  background: #2196f3;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
  font-family: Montserrat, sans-serif;
  cursor: pointer;
}

.cat-confirm-btn:hover {
  background: #1e88e5;
}

/* --- Progress --- */
.cat-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #2d3141;
  border-radius: 12px;
  padding: 14px 24px;
}

.cat-progress-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}

.cat-progress-label {
  font-size: 13px;
  font-weight: 400;
  color: #8390b7;
}

/* Done state — keeps the neutral pill, only the check stays green */
.cat-progress-done {
  gap: 8px;
}

.cat-progress-done-icon {
  flex: 0 0 auto;
}

.cat-progress-done-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
  letter-spacing: 0.1px;
}

/* ===== WORKSPACE READY (full-width dashboard) ===== */

/* Dashboard container — sits outside bubble, full width */
.ws-dashboard {
  /* Live inside the (now centered) chat-messages column instead of breaking out
   * to the right. The whole sidebar+chat unit is centered via .chat-layout
   * margin-inline:auto, so the dashboard just fills its column and stays
   * aligned with the bubbles. Cards inside are capped at 912px. */
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin: 0 0 20px;
  position: relative;
  left: 0;
  transform: none;
  scroll-margin-top: 20px;
  animation: dashboardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dashboardIn {
  0% { opacity: 0; filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); }
}

/* Reveal block — hidden until user clicks Confirm, then fades in */
.ws-reveal {
  display: none;
  flex-direction: column;
  gap: 36px;
}

.ws-reveal.is-visible {
  display: flex;
  animation: dashboardIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 1. Heading */
.ws-heading {
  text-align: left;
}

.ws-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.ws-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #b0b9d0;
}

/* Shared card style */
.ws-card {
  background: #3d4157;
  border-radius: 8px;
  padding: 24px;
}

.ws-card-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

/* 2. Two cards side by side */
.ws-two-cards {
  display: flex;
  gap: 36px;
}

.ws-two-cards > .ws-card {
  flex: 1;
  min-width: 0;
}

/* Overview card */
.ws-workspace-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ws-workspace-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: #4e5b76;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.ws-workspace-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-workspace-label {
  font-size: 13px;
  color: #b0b9d0;
}

.ws-workspace-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-badge {
  background: #2aa7ee;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ws-overview-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ws-overview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ws-overview-label {
  font-size: 13px;
  font-weight: 500;
  color: #b0b9d0;
}

.ws-overview-value {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.ws-overview-value.ws-bold {
  font-weight: 700;
}

.ws-overview-total {
  border-top: 1px dashed #b0b9d0;
  padding-top: 24px;
}

/* Currency card */
.ws-currency-desc {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 16px;
}

.ws-currency-group {
  margin-bottom: 12px;
}

.ws-currency-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: block;
  margin-bottom: 6px;
}

.ws-currency-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-currency-tag {
  background: #42485d;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ws-tag-x {
  color: #8390b7;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.ws-currency-skip {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 16px 0;
}

.ws-link {
  color: #2aa7ee;
  cursor: pointer;
}

.ws-btn-secondary {
  background: #42485d;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #f5f6fa;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s;
}

.ws-btn-secondary:hover {
  background: #4e5570;
}

/* 3. Created Accounts */
.ws-accounts-subtitle {
  font-size: 13px;
  color: #b0b9d0;
  margin-bottom: 20px;
  margin-top: -8px;
  line-height: 1.4;
}

/* The Review "Created Accounts" bubble is a fixed 912px wide (unlike the rest
   of the dashboard, which breaks out wider). With border-box + the inherited
   24px card padding, that leaves exactly 864px of content — the width a row of
   three category columns must fit into. Without this cap the card stretched to
   the full dashboard width (~1280px), so the 3 columns rendered ~400px each and
   the third one ran off the visible edge. */
.ws-accounts-card {
  width: 100%;
  max-width: 912px;
}

.ws-accounts-summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Created Accounts — categories grouped under the 5 types, using the same
   category-card style as the manual "Add account" step (icon + name + rows). */
.ws-cat-sections { gap: 28px; }
.ws-cat-section { display: flex; flex-direction: column; gap: 12px; }
.ws-cat-section-head { display: flex; align-items: center; gap: 8px; }
.ws-cat-section-head > svg { flex: 0 0 auto; }
.ws-cat-section-title { font-size: 14px; font-weight: 800; color: #fff; }
.ws-cat-section-count { font-size: 12px; font-weight: 500; color: #8390b7; margin-left: 4px; }
.ws-cat-grid {
  display: grid;
  /* Exactly 3 columns per row. minmax(0,1fr) makes 3 cards fill the full width
     (no stray gap on the right), while a row of 1–2 cards keeps its 1/3-width
     tracks and leaves the empty slot blank instead of stretching. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  /* stretch (default) → every card in a row matches the tallest card in that row. */
  align-items: stretch;
}
/* Columns here are grid items (not flex), so neutralise the flex-row min-width
   to keep all three tracks exactly equal even with long category names. */
.ws-cat-grid .manual-group-col { min-width: 0; }
.ws-accounts-empty {
  font-size: 13px;
  color: #8390b7;
}
@media (max-width: 760px) {
  .ws-cat-grid { grid-template-columns: 1fr; }
}


.ws-accounts-footer {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ws-accounts-note {
  font-size: 12px;
  color: #8390b7;
  white-space: nowrap;
}

/* 4. Bar Chart */
.ws-chart {
  background: transparent;
  border-radius: 14px;
  padding: 30px 0;
}

.ws-chart-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 24px;
}

.ws-chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ws-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #b0b9d0;
}

.ws-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ws-chart-dropdown {
  font-size: 13px;
  font-weight: 600;
  color: #8390b7;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ws-chart-area {
  position: relative;
  height: 230px;
  padding: 0;
}

.ws-chart-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 210px;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

.ws-chart-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 210px;
  z-index: 4;
  pointer-events: none;
}

.ws-dot-hit {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-dot-point {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #FF76F1;
  box-shadow: 0 0 6px rgba(255, 118, 241, 0.6);
  transition: all 0.2s ease;
}

.ws-dot-hit:hover .ws-dot-point {
  width: 8px;
  height: 8px;
}

.ws-dot-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: #2d3141;
  border: 1px solid rgba(255, 118, 241, 0.3);
  color: #fcfcfc;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.ws-dot-hit:hover .ws-dot-tooltip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.ws-bar-guideline {
  position: absolute;
  top: 0;
  bottom: 20px;
  width: 1px;
  border-left: 1px dashed rgba(255,255,255,0.08);
  pointer-events: none;
}

.ws-legend-chevron {
  margin-left: 2px;
  flex-shrink: 0;
  vertical-align: middle;
}

.ws-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 2;
}

.ws-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.ws-bar-wrapper {
  display: flex;
  align-items: flex-end;
}

.ws-bar {
  width: 12px;
  border-radius: 17px;
  background: linear-gradient(180deg, #00f0ff 0%, #1da5f1 50%, #0f8acf 50%);
  transition: height 1s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ws-bar-dark {
  width: 100%;
  background: #0f8acf;
  border-radius: 0 0 17px 17px;
}

.ws-bar-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-transform: lowercase;
}

/* 5. Summary Stats */
/* Short disclaimer above the summary stat cards: these are AI estimates from the
   uploaded data, not exact financials. One line, styled like the Key Insights title. */
.ws-stats-note {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
  margin-bottom: 16px;
}

.ws-stats {
  display: flex;
  gap: 25px;
}

.ws-stat-card {
  flex: 1;
  background: #313649;
  border-radius: 8px;
  padding: 17px 17px 1px;
}

.ws-stat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ws-stat-label {
  font-size: 16px;
  font-weight: 400;
  color: #8390b7;
}

.ws-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 30px;
  padding-bottom: 16px;
}

/* 6. Key Insights */
.ws-insights {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: -20px;
}

.ws-insights-title {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
}

.ws-insights-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-insight-card {
  background: #313649;
  border-radius: 8px;
  padding: 17px 17px 1px;
  min-height: 86px;
  position: relative;
}

.ws-insight-icon {
  position: absolute;
  left: 17px;
  top: 19px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ws-insight-body {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-insight-heading {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
}

.ws-insight-desc {
  font-size: 16px;
  font-weight: 400;
  color: #8390b7;
  line-height: 24px;
}

/* 7. Final CTA Block */
.ws-cta {
  background: #292c39;
  border-radius: 16px;
  padding: 24px;
}

/* Confirm variant: single primary button, subtitle inline */
.ws-cta-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  /* Match the Review "Created Accounts" bubble width (912px) so the block
     doesn't stretch to the full dashboard width and run its right corners off
     the visible edge — keeps all four corners rounded and equal. */
  width: 100%;
  max-width: 912px;
}
.ws-cta-confirm .ws-cta-subtitle {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 240px;
}
.ws-cta-confirm .ws-cta-buttons {
  flex: 0 0 auto;
}
.ws-cta-confirm .ws-cta-btn {
  padding: 12px 28px;
}

.ws-cta-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.ws-cta-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #8390b7;
  margin-bottom: 20px;
}

.ws-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ws-cta-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
}

.ws-cta-btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.ws-btn-primary {
  background: #2ba7ee;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.2s;
}

.ws-btn-primary:hover {
  background: #1d96d8;
}

/* ===== FINAL SCREEN ===== */
/* No own background/box — the bubble itself provides the single fill + padding,
   so this matches every other bot bubble (was a nested darker box → two colours). */
.final-section {
  text-align: center;
}

.final-section h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.final-section p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.final-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.final-btn {
  padding: 14px 28px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.final-btn.primary {
  background: var(--blue-primary);
  color: white;
}

.final-btn.outline {
  background: none;
  border: 1px solid var(--text-muted);
  color: var(--text-dimmed);
}

.final-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ===== CHAT INPUT ===== */
.chat-input-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px 12px;
  background: linear-gradient(to bottom, transparent, #393d53 30%);
  z-index: 15;
}

.chat-input-pill {
  display: flex;
  align-items: center;
  background: #222531;
  border-radius: 24px;
  padding: 8px 8px 8px 24px;
  height: 48px;
  max-width: 800px;   /* pill keeps its old width; the area around it is full-width */
  margin: 0 auto;
}

.chat-input {
  flex: 1;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-white);
  outline: none;
  min-width: 0;
}

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

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 12px;
}

.chat-attach,
.chat-mic {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.8;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.chat-attach:hover,
.chat-mic:hover {
  opacity: 1;
  transform: scale(1.1);
}

.chat-attach:active,
.chat-mic:active {
  transform: scale(0.92);
  transition-duration: 0.08s;
}

.chat-send {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: var(--blue-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.chat-send:hover {
  background: #1b96dd;
  transform: scale(1.08);
  box-shadow: 0 2px 10px rgba(42, 167, 238, 0.35);
}

.chat-send:active {
  transform: scale(0.92);
  transition-duration: 0.08s;
}

.btn-skip {
  display: block;
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  opacity: 0.6;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: opacity 0.2s, color 0.2s;
}

.btn-skip:hover {
  color: var(--text-dimmed);
  opacity: 1;
}

/* ===== FILE UPLOAD STATES ===== */

.drop-zone-label {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-white);
  margin-bottom: 6px;
}

.drop-zone-formats {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* Softer body paragraph + the "send a link" hint in the Data step */
.data-step-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dimmed);
}


.drop-zone.drag-hover {
  background: #2e3d52;
  border-style: solid;
  border-color: var(--blue-primary);
}

.drop-zone.uploading,
.drop-zone.uploaded {
  text-align: left;
  cursor: default;
  border: none;
  padding: 0;
}
/* In the split box the drop-zone is a centered flex column; once files are in
   it must read as a top-left list (otherwise the file rows + "Add more files"
   float in the middle and the two halves look broken). */
.data-dropbox-split .drop-zone.uploaded {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 18px;
  min-height: 0;
}

.drop-zone.file-error {
  border-color: #fd5b6e;
  border-style: solid;
}

.drop-zone-error-text {
  color: #fd5b6e;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}

/* File upload list */
.file-upload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-upload-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.file-loader {
  width: 12px;
  height: 12px;
  border: 2px solid #2aa7ee;
  border-bottom-color: rgba(42, 167, 238, 0.2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.file-check {
  flex-shrink: 0;
}

.upload-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 12px;
}

.upload-complete-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.add-more-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-primary);
  cursor: pointer;
}

.add-more-link:hover {
  text-decoration: underline;
}

.upload-complete-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Mini-analyzing indicator embedded in dropzone after upload */
.mini-analyzing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font);
  font-size: 12px;
  color: #8390b7;
}
.mini-analyzing-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(42, 167, 238, 0.3);
  border-top-color: #2aa7ee;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.mini-analyzing.done .mini-analyzing-text {
  color: #8390b7;
}


/* ===== REVIEW SOURCES BUBBLE ===== */
.review-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.review-file-item.review-app .review-file-name {
  color: #4cc776;
}

.review-file-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.review-file-remove:hover {
  color: #fd5b6e;
}

.review-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.review-sources-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-action-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-primary);
  cursor: pointer;
}

.review-action-link:hover {
  text-decoration: underline;
}

.review-subtitle {
  line-height: 1.5;
}

.review-ready-text {
  line-height: 1.5;
}

.review-button-wrap {
  padding-top: 8px;
  display: flex;
  align-items: flex-start;
}

.btn-analyze {
  background: var(--blue-primary);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-analyze:hover {
  background: #1b96dd;
  transform: translateY(-1px);
}

/* ===== ANALYZE DATA BUBBLE ===== */
.analyze-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.analyze-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analyze-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analyze-item.pending .analyze-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.analyze-item.loading .analyze-name,
.analyze-item.done .analyze-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-white);
}

.analyze-details {
  padding-left: 24px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.detail-highlight {
  font-weight: 600;
  color: var(--blue-primary);
}

.analyze-divider {
  width: 100%;
  height: 1px;
  background: rgba(131, 144, 183, 0.3);
  position: relative;
  overflow: hidden;
}

.analyze-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--blue-primary);
}

.analyze-stats {
  display: flex;
  gap: 24px;
  align-items: baseline;
  flex-wrap: wrap;
  padding-top: 14px;
}

.analyze-stat {
  display: flex;
  gap: 4px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

.analyze-stat-num {
  font-weight: 600;
  color: var(--text-white);
  font-variant-numeric: tabular-nums;
}

/* Only transactions counter needs wide min-width (0→1433) */
#stat-txn {
  display: inline-block;
  min-width: 3.5ch;
  text-align: right;
}

.analyze-stat-num.highlight {
  color: var(--blue-primary);
}

.analyze-stat-label {
  font-weight: 400;
  color: var(--text-muted);
}

.status-pending {
  flex-shrink: 0;
}

/* Insight icon (sparkle) */
.insight-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: insightPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.insight-icon-footer {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  margin-right: 1px;
}

.insight-icon-footer.visible {
  opacity: 1;
  transform: scale(1);
  animation: insightPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes insightPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== ANIMATIONS ===== */

/* Dramatic blur dissolve — hero titles, subtitles */
@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
  }
}

/* Universal element entrance — blur + scale + overshoot */
@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
  }
}

/* Chat exit — welcome screen fades out beautifully */
@keyframes welcomeOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
    filter: blur(10px);
  }
}

/* Chat messages */
@keyframes messageIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* User message slides from right */
@keyframes userMessageIn {
  0% {
    opacity: 0;
    transform: translateX(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

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

@keyframes progressBar {
  from { width: 0; }
  to { width: 100%; }
}

/* Chat container fade in */
@keyframes chatIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== DEBUG STEP SWITCHER ===== */
#debug-stepper {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 8px;
  padding: 5px 8px;
  font-family: var(--font);
  font-size: 14px;
  color: white;
  backdrop-filter: blur(10px);
  user-select: none;
}

#debug-stepper button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

#debug-stepper button:hover {
  background: rgba(255, 255, 255, 0.25);
}

#debug-step-num {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
}

/* Combined jump button (number + flow tag + caret) */
#debug-jump {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto !important;
  padding: 0 8px;
  font-size: 13px;
}
#debug-flow-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(42, 167, 238, 0.25);
  color: #2aa7ee;
  letter-spacing: 0.04em;
}
.debug-caret {
  font-size: 9px;
  opacity: 0.6;
}

/* Jump-to-any-bubble panel */
#debug-jump-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-width: 340px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 10px;
  padding: 8px;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform-origin: bottom left;
  animation: debugJumpOpen 0.18s ease-out;
}
/* The HTML `hidden` attribute is overridden by `display: flex` above —
 * force-hide so toggling `panel.hidden = true` actually collapses the panel. */
#debug-jump-panel[hidden] { display: none; }
@keyframes debugJumpOpen {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.debug-jump-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px;
  border-radius: 8px;
}
.debug-jump-tab {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 6px 10px !important;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  width: auto !important;
  height: auto !important;
  transition: background 0.15s, color 0.15s;
}
.debug-jump-tab:hover { color: rgba(255, 255, 255, 0.9); }
.debug-jump-tab.is-active {
  background: rgba(42, 167, 238, 0.2);
  color: #2aa7ee;
}
.debug-jump-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 340px;
  overflow-y: auto;
}
.debug-jump-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 10px !important;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  width: 100% !important;
  height: auto !important;
  transition: background 0.12s;
}
.debug-jump-row:hover { background: rgba(255, 255, 255, 0.08); }
.debug-jump-row.is-active {
  background: rgba(42, 167, 238, 0.18);
  color: #fff;
}
.debug-jump-row-num {
  flex: 0 0 18px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 0;
  border-radius: 4px;
  line-height: 1.4;
}
.debug-jump-row.is-active .debug-jump-row-num {
  background: rgba(42, 167, 238, 0.35);
  color: #fff;
}
.debug-jump-row-label {
  flex: 1 1 auto;
  font-weight: 500;
}
/* Variant tag on file-dependent steps (Currency / Accounts) — "with files" / "no files" */
.debug-jump-row-variant-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.debug-jump-row.is-active .debug-jump-row-variant-tag {
  color: #2aa7ee;
  background: rgba(42, 167, 238, 0.18);
}
/* ===== Inline bubble form ===== */
/* Used in manual flow where there's no bottom chat input — the prompt embeds
 * its own input + Continue button right inside the bubble. */
.bubble-inline-form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: stretch;
}
.bubble-inline-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-white);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bubble-inline-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.bubble-inline-input:focus {
  border-color: rgba(42, 167, 238, 0.55);
  background: rgba(255, 255, 255, 0.09);
}
.bubble-inline-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bubble-inline-submit {
  flex: 0 0 auto;
  white-space: nowrap;
}
.bubble-inline-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 540px) {
  .bubble-inline-form { flex-direction: column; }
}

/* Section header inside the jump list — separates Welcome from chat steps. */
.debug-jump-section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  padding: 6px 10px 2px;
  margin-top: 2px;
}
.debug-jump-section-label:first-child { margin-top: 0; }
/* Welcome rows use the wider "W0/W1/W2" badge — give it a touch more room. */
.debug-jump-row[data-welcome] .debug-jump-row-num {
  flex-basis: 24px;
  background: rgba(127, 210, 130, 0.18);
  color: rgba(255, 255, 255, 0.7);
}
.debug-jump-row[data-welcome].is-active .debug-jump-row-num {
  background: rgba(127, 210, 130, 0.45);
  color: #fff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1600px) {
  .header { padding: 0 160px; }
  .manual-flow-progress { padding: 12px 160px; }
}

@media (max-width: 1200px) {
  .header { padding: 0 40px; }
  .manual-flow-progress { padding: 12px 40px; }
  .welcome-title { font-size: 120px; }
}

@media (max-width: 768px) {
  .header { padding: 0 16px; }
  .manual-flow-progress { padding: 10px 16px; }
  body.has-manual-progress .main {
    margin-top: 122px;
    height: calc(100vh - 122px);
    height: calc(100dvh - 122px);
  }
  .welcome-title { font-size: 72px; }
  .welcome-content { padding: 24px; }
  .welcome-choice { flex-direction: column; align-items: stretch; }
  .choice-btn { width: 100%; }
  .plan-stats { flex-direction: column; gap: 16px; padding: 20px; }
  .chat-messages { padding-left: 12px; padding-right: 12px; }
  .categories-grid { grid-template-columns: 1fr; }
  .avatar-grid { grid-template-columns: repeat(4, 48px); }
  /* Workspace dashboard responsive */
  .ws-two-cards { flex-direction: column; gap: 20px; }
  .ws-stats { flex-wrap: wrap; }
  .ws-stat-card { flex: 1 1 calc(50% - 13px); }
  .ws-bars { gap: 4px; }
  .ws-bar-label { font-size: 11px; }
}

/* =====================================================================
   MANUAL FLOW — components for the Manual onboarding variant.
   All classes are .m-* prefixed to namespace them off the Auto flow.
   ===================================================================== */

/* Shared layout ------------------------------------------------------- */
.m-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.m-section-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}
.m-section-hint {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  padding: 4px 2px;
}

/* M-Step 2 — Currency picker ------------------------------------------ */
.m-currency-step { display: flex; flex-direction: column; gap: 12px; }

.m-info-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(33, 150, 243, 0.10);
  border-left: 3px solid var(--cat-mixed);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-dimmed);
  line-height: 1.5;
}
.m-info-tip-bulb {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}

.m-currency-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.m-currency-chip {
  background: var(--bg-card);
  border: 1px solid transparent;
  color: var(--text-white);
  padding: 8px 14px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-currency-chip:hover {
  background: #555a73;
  transform: translateY(-1px);
}
.m-currency-chip.selected {
  background: rgba(42, 167, 238, 0.18);
  border-color: var(--blue-primary);
  color: var(--blue-primary);
}
.m-cur-code { font-weight: 700; }
.m-cur-symbol { color: var(--text-muted); font-size: 12px; }
.m-currency-chip.selected .m-cur-symbol { color: var(--blue-primary); opacity: 0.85; }

.m-search-wrap { margin-top: 4px; }
.m-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid transparent;
  color: var(--text-white);
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.m-search-input::placeholder { color: var(--text-muted); }
.m-search-input:focus { border-color: var(--blue-primary); }

.m-currency-footer {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* M-Step 3 — Categories intro pills ----------------------------------- */
.m-cat-intro { display: flex; flex-direction: column; gap: 12px; }

.m-cat-types-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.m-cat-type-pill {
  background: var(--bg-card);
  color: var(--text-white);
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* M-Step 4 — Type walkthrough ----------------------------------------- */
.m-type-bubble,
.m-acc-bubble {
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-m);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.m-type-header {
  display: flex;
  gap: 12px;
  align-items: center;
}
.m-type-icon-wrap { display: inline-flex; flex-shrink: 0; }
.m-type-title-block { display: flex; flex-direction: column; gap: 2px; }
.m-type-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.2;
}
.m-type-progress {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.m-type-intro {
  font-size: 14px;
  color: var(--text-dimmed);
  line-height: 1.55;
}

.m-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-cat-chip {
  background: var(--bg-card);
  border: 1px solid transparent;
  color: var(--text-white);
  padding: 7px 12px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-cat-chip:hover {
  background: #555a73;
  transform: translateY(-1px);
}
.m-cat-chip.selected {
  background: rgba(42, 167, 238, 0.18);
  border-color: var(--blue-primary);
  color: var(--blue-primary);
}
.m-cat-chip-x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  margin-left: 2px;
}
.m-cat-chip.selected .m-cat-chip-x { opacity: 1; }

.m-custom-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 2px;
}
.m-custom-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid transparent;
  color: var(--text-white);
  padding: 9px 14px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.m-custom-input::placeholder { color: var(--text-muted); }
.m-custom-input:focus { border-color: var(--blue-primary); }
.m-custom-add {
  background: var(--blue-primary);
  border: none;
  color: white;
  width: 36px;
  border-radius: var(--radius-s);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.m-custom-add:hover { background: #1b96dd; transform: translateY(-1px); }
.m-custom-add svg { width: 16px; height: 16px; }

.m-warn-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #3a3949;
  border-left: 3px solid #fd5b6e;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-dimmed);
  line-height: 1.5;
}
.m-warn-icon {
  color: #fd5b6e;
  font-size: 14px;
  line-height: 1.5;
  flex-shrink: 0;
  font-weight: 700;
}

.m-type-actions {
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.m-skip-btn {
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  padding: 9px 16px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.m-skip-btn:hover {
  border-color: var(--text-dimmed);
  color: var(--text-dimmed);
  background: rgba(255,255,255,0.04);
}

/* M-Step 5 — Category map summary ------------------------------------- */
.m-map { display: flex; flex-direction: column; gap: 12px; }
.m-map-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-white);
}
.m-map-subtitle {
  font-size: 13.5px;
  color: var(--text-dimmed);
  line-height: 1.55;
}
.m-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.m-map-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-map-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}
.m-map-card-name { flex: 1; }
.m-map-card-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.m-map-card-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.m-map-pill {
  background: rgba(255,255,255,0.06);
  color: var(--text-dimmed);
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.m-map-pill-more {
  background: rgba(42,167,238,0.15);
  color: var(--blue-primary);
  font-weight: 600;
}
.m-map-empty {
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: italic;
  padding: 2px 0;
}

/* M-Step 6 — Accounts model bridge bubble ----------------------------- */
.m-accmodel { display: flex; flex-direction: column; gap: 12px; }
.m-accmodel-example {
  font-size: 14px;
  color: var(--text-dimmed);
  line-height: 1.55;
}
.m-accmodel-tree {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-tree-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-white);
}
.m-tree-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  min-width: 110px;
}
.m-tree-arrow {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}
.m-tree-arrow svg { width: 12px; height: 12px; }
.m-tree-cat {
  color: var(--text-dimmed);
  font-style: italic;
  min-width: 100px;
}
.m-tree-accs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}
.m-tree-acc {
  background: rgba(42,167,238,0.13);
  color: var(--blue-primary);
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 500;
}
.m-accmodel-note {
  font-size: 13px;
  color: var(--text-dimmed);
}

/* M-Step 7 — Accounts walkthrough ------------------------------------- */
.m-acc-intro {
  font-size: 14px;
  color: var(--text-dimmed);
  line-height: 1.55;
}
.m-acc-cat-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m-acc-cat-chip {
  background: var(--bg-card);
  border: 1px solid transparent;
  color: var(--text-dimmed);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.m-acc-cat-chip:hover { background: #555a73; color: var(--text-white); }
.m-acc-cat-chip.is-active {
  background: var(--blue-primary);
  color: white;
  border-color: var(--blue-primary);
}
.m-acc-current {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}
.m-acc-current strong {
  color: var(--text-white);
  font-style: normal;
  font-weight: 600;
}
.m-acc-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m-acc-suggest-chip {
  background: var(--bg-card);
  border: 1px dashed rgba(255,255,255,0.15);
  color: var(--text-white);
  padding: 7px 12px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.m-acc-suggest-chip:hover { background: #555a73; border-style: solid; }
.m-acc-suggest-chip.added {
  background: rgba(127, 210, 130, 0.15);
  border: 1px solid var(--cat-revenue);
  color: var(--cat-revenue);
  cursor: default;
}

.m-acc-status {
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-acc-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.m-acc-status-cat {
  font-weight: 600;
  color: var(--text-white);
  min-width: 100px;
}
.m-acc-status-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}
.m-acc-status-arrow svg { width: 12px; height: 12px; }
.m-acc-status-accs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}
.m-acc-status-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11.5px;
}

/* M-Step 8 — Final summary -------------------------------------------- */
.m-summary { display: flex; flex-direction: column; gap: 14px; }
.m-summary-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-white);
}
.m-summary-sub {
  font-size: 13.5px;
  color: var(--text-dimmed);
  line-height: 1.55;
}
.m-summary-sub em {
  color: var(--text-muted);
  font-style: italic;
}
.m-summary-stats {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.m-sum-stat {
  flex: 1;
  background: rgba(42,167,238,0.10);
  border: 1px solid rgba(42,167,238,0.25);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.m-sum-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-primary);
  line-height: 1.1;
}
.m-sum-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.m-sum-currency {
  font-size: 13px;
  color: var(--text-dimmed);
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.m-sum-currency strong { color: var(--text-white); }

.m-summary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-sum-type-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-sum-type-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}
.m-sum-type-name { flex: 1; }
.m-sum-type-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.m-sum-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 4px 0 4px 4px;
  border-left: 2px solid rgba(255,255,255,0.08);
  padding-left: 10px;
  font-size: 12.5px;
}
.m-sum-cat-name {
  color: var(--text-dimmed);
  font-weight: 500;
  min-width: 100px;
}
.m-sum-cat-accs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

.m-enter-btn {
  font-size: 14px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .m-map-grid { grid-template-columns: 1fr; }
  .m-summary-stats { flex-direction: column; }
  .m-tree-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .m-tree-arrow { display: none; }
  .m-tree-type, .m-tree-cat { min-width: 0; }
  .m-acc-status-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .m-acc-status-arrow { display: none; }
  .m-acc-status-cat { min-width: 0; }
  .m-sum-cat-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .m-sum-cat-name { min-width: 0; }
  .m-type-actions { flex-direction: column; align-items: stretch; }
  .m-type-actions .m-skip-btn,
  .m-type-actions .action-btn { width: 100%; }
}

/* =====================================================================
   MANUAL FLOW V2 — pixel-matched to Figma frame 25615:52513.
   All classes are .manual-* prefixed. These supersede the .m-* legacy
   classes above for the Manual onboarding bubbles.
   Tokens (from Figma variable defs):
     bot-bubble-bg #313649 (already --bg-bubble-bot)
     tip-info-bg #303f56, tip-info-text #bfe5fa
     tip-warning-bg #3a3949, tip-warning-border #fd5b6e, tip-warning-text #fbbcc2 (synced with Figma UI Kit 2026-05-18; bg is neutral dark — only border+text carry the red accent)
     btn-primary-bg #2aa7ee (already --blue-primary)
     catbtn-bg (example chip default) #494d65 (already --bg-card)
     cat-chip-bg-active (selected pill bg) #2d3141 (already --bg-dark)
     cat-chip-border-active #2aa7ee
     currency-chip-bg #42485d, chip-selected-bg #304762
     progress-track-bg #4e5b76, progress-track-fill #2aa7ee
     accmodel/sum-bg #2d3141 (already --bg-dark)
   ===================================================================== */

/* Bubble shell -------------------------------------------------------- */
.manual-bubble {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font);
  color: var(--text-white);
}
.manual-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Manual flow step heading — matches .bubble-title (UI Kit Title/H3: Montserrat 20/700/1.4).
 * Kept as .manual-title because markup often includes inline category icons + spans. */
.manual-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.manual-title svg { display: inline-block; vertical-align: middle; }
.manual-body {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-white);
  line-height: 1.4;
}
.manual-body-italic {
  color: var(--text-muted);
  font-style: italic;
}
.manual-body-soft {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
  opacity: 0.95;
}
.manual-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
  line-height: 1.4;
}
/* Section labels — Figma uses bot-bubble-text-secondary (#8390b7), NOT accent blue.
   Class name kept for compat; only the color was wrong. */
.manual-section-label-blue { color: var(--text-muted); }
.manual-footer-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.manual-empty-note {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

/* Type chip — icon + label, used in two contexts:
   1) `.manual-type-chips-row` — the legend below the Sankey in M-STEP 3,
      showing all 6 types the walkthrough will cover.
   2) `.manual-type-chip-inline` — inline beside a step headline in M-STEP 4,
      telling the user which of the 6 types they're currently filling. */
.manual-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  padding: 5px 10px 5px 8px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.manual-type-chip svg {
  display: inline-block;
  flex: 0 0 auto;
  /* SVG viewBox is 17×13 (aspect 1.31:1) — let width drive and keep height
     auto so the rounded-rect outline doesn't squish. */
  width: 14px;
  height: auto;
  vertical-align: middle;
}
.manual-type-chip-inline {
  /* Slightly looser than legend chips so it sits nicely beside the 20/700
     headline without looking cramped. */
  padding: 6px 12px 6px 10px;
  font-size: 13px;
}
.manual-type-chip-inline svg { width: 17px; }

/* Legend row of all 6 type chips, sitting between the Sankey and the
   "we'll walk through all 6" body copy in M-STEP 3. */
.manual-type-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Split title — headline on the left, inline type chip on the right.
   Falls back to wrapping on narrow widths so the chip drops below cleanly. */
.manual-title-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.manual-title-split .manual-title-headline {
  /* Inherits the 20/700/1.4 from .manual-title — just makes sure flexbox
     doesn't squeeze the headline into a single-character column. */
  flex: 1 1 auto;
  min-width: 0;
}
.manual-title-split .manual-type-chip-inline {
  flex: 0 0 auto;
}

/* Inline type word — icon + colored label, sits INSIDE the headline as part
   of the same sentence (e.g. "Let's start with income · [icon] Revenue").
   No background / no border — reads as plain typography. Word inherits the
   type's accent color so it's visually anchored to the diagram above. */
.manual-type-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-weight: 700;
  /* Match the headline's font size — no shrink. */
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  margin-left: 4px;
}
.manual-type-inline svg {
  width: 18px;
  height: auto;
  /* Pull icon up a touch so its center aligns with the cap-height of the word
     rather than the text baseline. */
  transform: translateY(2px);
  flex: 0 0 auto;
}
/* Type label — always white. Only the icon carries the per-type accent
   color (matches the rest of the prototype's type-label treatment). */
.manual-type-inline > span { color: #ffffff; }

/* ------------------------------------------------------------------------
   "Here's how we'd group them" bubble — Figma node 3698:14691, adapted per
   type. Three dashed columns (Category Type Groups), each with:
     • header: type icon + bold group name + (first col only) edit pencil
     • rows: 6-dot drag handle + account name
     • inline "+ Add account" link in blue
   Bottom: primary Confirm button + "+ Add category" link.
   ------------------------------------------------------------------------ */
.manual-group-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.manual-group-col {
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 16px;
  border: 1px dashed #555a74;
  border-radius: 6px;
  background: transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
/* Active drop target — solid blue border + subtle tint so the user sees
   exactly which column will receive the dragged account on release. */
.manual-group-col.is-drop-target {
  border-style: solid;
  border-color: #2aa7ee;
  background: rgba(42, 167, 238, 0.06);
}
/* Freshly-added column in "naming" state — same blue accent but lighter
   tint so it reads as "being created" rather than "ready to receive". */
.manual-group-col.is-editing-name {
  border-style: solid;
  border-color: #2aa7ee;
  background: rgba(42, 167, 238, 0.03);
}
/* Validation: a category the user left empty when trying to continue. Red border
   + an inline "add an account" prompt so they see a category needs accounts. */
.manual-group-col.is-empty-error {
  border-style: solid;
  border-color: #e5484d;
  background: rgba(229, 72, 77, 0.06);
}
.manual-group-col.is-empty-error .manual-group-col-name {
  color: #ff7a7a;
}
.manual-group-col.is-empty-error .manual-group-col-rows::after {
  content: "Empty — add an account";
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #ff7a7a;
}

/* Inline category-name input — borderless typography, blue underline so the
   field reads as the column header in edit-state (no boxy form vibes). */
.manual-group-col-name-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #2aa7ee;
  outline: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  padding: 0 0 2px;
  caret-color: #2aa7ee;
}
.manual-group-col-name-input::placeholder {
  color: #555a74;
  font-weight: 600;
}
/* Duplicate-name shake — red underline + horizontal shake animation. */
.manual-group-col-name-input.is-error {
  border-bottom-color: #FD5B6E;
  animation: groupNameShake 0.34s ease-in-out;
}
@keyframes groupNameShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

/* "Drop accounts here" hint — appears only in just-added empty columns;
   killed by JS on first successful drop into that column. */
.manual-group-empty-hint {
  margin: 0;
  padding: 6px 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: #555a74;
  line-height: 1.4;
  pointer-events: none;
}
.manual-group-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.manual-group-col-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.manual-group-col-type svg { flex: 0 0 auto; }
.manual-group-col-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Allow long category names to ellipsis instead of widening the column. */
  flex: 0 1 auto;
  min-width: 0;
}
.manual-group-col-edit {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8390b7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease-out, color 120ms ease;
}
.manual-group-col-edit svg { width: 13.6px; height: 13.6px; }
.manual-group-col-edit:hover { color: #d4dae7; }
/* Reveal pencil on column hover OR when focused via keyboard. The cancel-X
   variant inside is-editing-name columns stays visible to allow dismiss. */
.manual-group-col:hover .manual-group-col-edit,
.manual-group-col:focus-within .manual-group-col-edit,
.manual-group-col.is-editing-name .manual-group-col-edit {
  opacity: 1;
}

/* Delete × — UI Kit `Close — Small` (Figma node 76:2136). Always visible in the
 * head's right slot, ghost button. On hover the icon scales to 1.05× and the
 * fill lightens from UI Kit dark-200 (#4E5B76) to a lighter neutral over 0.2s
 * — replaces the previous red destructive hover for a softer interaction. */
.manual-group-col-delete {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4E5B76;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.manual-group-col-delete svg {
  width: 10px;
  height: 10px;
  display: block;
  /* Scale the icon, not the button — keeps the click target stable. */
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.manual-group-col-delete:hover {
  color: #b8c0d5; /* lighter neutral — "трохи світлішає" */
}
.manual-group-col-delete:hover svg {
  transform: scale(1.05);
}
.manual-group-col-delete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.manual-group-col-delete:disabled:hover {
  color: #4E5B76;
}
.manual-group-col-delete:disabled:hover svg {
  transform: none;
}

/* Cancel-new (× shown while typing a new category name) — same UI Kit Close
 * small icon + same scale/lighten interaction as the delete ×. */
.manual-group-col-edit[data-action="cancel-new"] {
  color: #4E5B76;
  transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 120ms ease-out;
}
.manual-group-col-edit[data-action="cancel-new"] svg {
  width: 10px;
  height: 10px;
  display: block;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.manual-group-col-edit[data-action="cancel-new"]:hover {
  color: #b8c0d5;
}
.manual-group-col-edit[data-action="cancel-new"]:hover svg {
  transform: scale(1.05);
}

/* Column exit/enter animation for delete + undo */
.manual-group-col {
  transform-origin: center top;
}
.manual-group-col.is-removing {
  animation: groupColOut 200ms ease-in forwards;
  pointer-events: none;
}
@keyframes groupColOut {
  to { opacity: 0; transform: scale(0.96) translateY(-4px); }
}

/* Briefly highlight an account row that just landed in a new column after
   a category was deleted — pulses the row background so the user sees
   where their accounts went. */
.manual-group-acc-row.is-just-moved {
  animation: accRowLanded 1.2s ease-out;
}
@keyframes accRowLanded {
  0%   { background: rgba(42, 167, 238, 0.18); }
  100% { background: transparent; }
}

.manual-group-col-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
/* Per-category add slot — always reserves one empty row at the bottom; the
   "+ Add account" affordance only fades in while the category is hovered. */
.manual-group-col-add {
  width: 100%;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font);
  /* Match the added-account rows in size/weight, but render in a muted,
     secondary grey so the slot reads as a quiet affordance, not a CTA. */
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #6b7491;
  /* Always visible (was hover-only opacity:0) so the affordance is discoverable
     without hovering each card. */
  opacity: 1;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}
.manual-group-col:hover .manual-group-col-add,
.manual-group-col:focus-within .manual-group-col-add { opacity: 1; }
.manual-group-col-add:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #8e98ba;
}
.manual-group-col-add svg { display: block; flex: 0 0 auto; color: inherit; }
/* Inline per-card add — the "+ Add account" slot swaps to this compact
   name field + "+" confirm (no modal). Sized to read as one of the card's
   rows; input styling matches the acc-row edit form fields. */
.manual-col-inline-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0;
}
.manual-col-inline-add-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #494d65;
  background: #2d3141;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  outline: none;
  transition: border-color 0.16s ease;
}
.manual-col-inline-add-name::placeholder { color: #8390b7; }
.manual-col-inline-add-name:hover { border-color: #555a74; }
.manual-col-inline-add-name:focus { border-color: #2aa7ee; }
.manual-col-inline-add-name.is-error {
  border-color: #FD5B6E;
  animation: combinedShake 0.4s;
}
.manual-col-inline-add-confirm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #494d65;
  background: #2d3141;
  color: #8e98ba;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.manual-col-inline-add-confirm:hover {
  background: #363b4f;
  border-color: #555a74;
  color: #ffffff;
}
.manual-col-inline-add-confirm svg { display: block; }
.manual-group-acc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 4px;
  /* Whole row is draggable — the dots are the visual affordance, but mouse
     can grab anywhere on the row. */
  cursor: grab;
  transition: background-color 120ms ease, opacity 120ms ease;
  user-select: none;
}
.manual-group-acc-row:hover { background: rgba(255, 255, 255, 0.04); }
.manual-group-acc-row:active { cursor: grabbing; }
.manual-group-acc-row.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.manual-group-drag {
  display: inline-flex;
  width: 8px;
  height: 14px;
  color: #555a74;
  flex: 0 0 auto;
  transition: color 120ms ease;
}
.manual-group-acc-row:hover .manual-group-drag { color: #8390b7; }
.manual-group-acc-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #d4dae7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Don't grow (so the ✎ pencil sits right next to the name, like the category
     head — not floating in the middle of the row), but allow shrink below the
     text width so a long name ellipsises instead of widening the column. */
  flex: 0 1 auto;
  min-width: 0;
}
.manual-group-add-acc,
.manual-group-add-cat {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  color: #2aa7ee;
  cursor: pointer;
  text-align: left;
  transition: color 120ms ease;
}
.manual-group-add-cat { font-size: 13px; }
.manual-group-add-acc:hover,
.manual-group-add-cat:hover { color: #5cbef3; }

.manual-group-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 8px;
}
.manual-group-footer .manual-btn-primary { flex: 0 0 auto; }

/* Narrow widths — columns stack vertically, but keep dashed border + spacing. */
@media (max-width: 600px) {
  .manual-group-cols { flex-direction: column; }
  .manual-group-col { min-width: 0; }
}

/* M-STEP 4.5 — Categories overview ------------------------------------------
   Re-uses auto STEP 6's cat-grid / cat-col / cat-list shell. Adds an extra
   hierarchy level inside each type-column: GROUP sub-headers followed by an
   indented list of their accounts. Types without grouping (e.g. accounts,
   mixed) skip the sub-header and render a flat cat-list. */
.manual-overview-grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.manual-overview-col {
  gap: 14px;
}
.manual-overview-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
}
.manual-overview-group + .manual-overview-group {
  border-top: 1px dashed #2d3349;
  padding-top: 10px;
}
.manual-overview-group-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #d4dae7;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.manual-overview-group-count {
  font-size: 11px;
  font-weight: 600;
  color: #8390b7;
  background: rgba(131, 144, 183, 0.12);
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.4;
}
.manual-overview-empty {
  font-size: 12px;
  color: #555a74;
  font-style: italic;
  padding: 2px 0 2px 6px;
}
.manual-overview-row {
  padding-left: 6px;
}
.manual-overview-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.manual-overview-footer .manual-btn-primary { flex: 0 0 auto; }

@media (max-width: 720px) {
  .manual-overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .manual-overview-grid { grid-template-columns: 1fr; }
}



/* Tip callouts (info + warning) -------------------------------------- */
.manual-tip {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.4;
  align-items: flex-start;
}
.manual-tip-info {
  background: #303f56;
  color: #bfe5fa;
  border-left: 3px solid #2aa7ee;
}
.manual-tip-warning {
  background: #3a3949;
  color: #fbbcc2;
  border-left: 3px solid #fd5b6e;
}
.manual-tip-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-top: 2px;
}
.manual-tip-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.manual-tip-title { font-weight: 600; font-size: 13px; }
.manual-tip-info .manual-tip-title { color: #bfe5fa; }
.manual-tip-title-warn { color: #fbbcc2; }
.manual-tip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 400;
}
.manual-tip-list li {
  position: relative;
  padding-left: 12px;
}
.manual-tip-list li::before {
  content: "·";
  position: absolute;
  left: 2px;
  top: -2px;
  font-size: 18px;
  line-height: 1;
}
/* Paragraph variant of tip body — used when the callout is a sentence
   instead of a bulleted list (e.g. the "Crypto, stablecoins or a custom
   asset?" tip under the currency search). */
.manual-tip-text {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
.manual-tip-text strong { font-weight: 600; }

/* Collapsible warning (types 3-6 — progressive disclosure, Nielsen 2006) */
.manual-tip-collapsible {
  display: block; /* override the .manual-tip flex so <summary> can lay out cleanly */
  padding: 0;
  cursor: pointer;
}
.manual-tip-collapsible[open] {
  padding-bottom: 12px;
}
.manual-tip-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-s);
  transition: background 0.15s ease;
}
.manual-tip-summary::-webkit-details-marker {
  display: none;
}
.manual-tip-summary:hover {
  background: rgba(253, 91, 110, 0.06);
}
.manual-tip-summary .manual-tip-icon {
  padding-top: 0;
}
.manual-tip-summary .manual-tip-title-warn {
  flex: 1;
}
.manual-tip-caret {
  font-size: 12px;
  color: #fbbcc2;
  opacity: 0.7;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.manual-tip-collapsible[open] .manual-tip-caret {
  transform: rotate(180deg);
}
.manual-tip-body-collapsed {
  padding: 4px 16px 0 44px;
  animation: tipBodyReveal 0.2s ease;
}
@keyframes tipBodyReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inputs -------------------------------------------------------------- */
.manual-input-wrap {
  position: relative;
}
.manual-input {
  width: 100%;
  background: #2d3141;
  border: 1px solid #494d65;
  color: var(--text-white);
  padding: 10px 20px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.manual-input::placeholder { color: var(--text-muted); }
.manual-input:focus { border-color: var(--blue-primary); }
.manual-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
}
.manual-input-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.manual-input-row .manual-input { flex: 1; }

/* Buttons ------------------------------------------------------------- */
.manual-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  flex-wrap: wrap;
}
.manual-actions-left { justify-content: flex-start; }
.manual-actions-right { justify-content: flex-end; align-items: center; gap: 16px; }
.manual-actions-split { justify-content: space-between; align-items: center; }
.manual-actions-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.manual-actions-stack .manual-btn { width: auto; align-self: flex-start; }

.manual-btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.manual-btn-ghost:hover {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.04);
}

.manual-btn-meta {
  font-weight: 400;
  opacity: 0.75;
  margin-left: 2px;
}

.manual-accmodel-skip-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding-top: 4px;
  opacity: 0.75;
}

.manual-btn {
  background: transparent;
  border: 1px solid var(--blue-primary);
  color: var(--blue-primary);
  padding: 8px 20px;
  border-radius: var(--radius-s);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}
.manual-btn:hover { background: rgba(42,167,238,0.12); }
.manual-btn-primary {
  background: var(--blue-primary);
  color: #fff;
  border-color: var(--blue-primary);
}
.manual-btn-primary:hover { background: #1b96dd; border-color: #1b96dd; }
/* Secondary action button — solid neutral fill, white text. Mirrors Figma
   Chat Button Secondary variant (3377:804): bg btn-secondary-bg (#494d65),
   text btn-secondary-text (#f5f6fa), NO border, 8px radius. Used for low-
   intent actions like "Cancel" in Category Map editing. */
.manual-btn-secondary {
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  border-radius: 8px;
}
.manual-btn-secondary:hover {
  background: #565b78;
}
.manual-btn-primary:disabled,
.manual-btn:disabled,
.manual-btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.manual-btn-skip {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.manual-btn-skip:hover { color: var(--text-dimmed); }
/* "Tired of typing? Upload files" — same text style as Skip, pinned to the far
   left of the footer. "Tired of typing?" is muted grey (no underline); only
   "Upload files" is accent blue and underlines on hover. */
.manual-btn-upload {
  margin-right: auto;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 4px;
  cursor: pointer;
}
.manual-btn-upload .mbu-muted { color: var(--text-muted); }
.manual-btn-upload .mbu-link { color: #2AA7EE; }
.manual-btn-upload:hover .mbu-link { text-decoration: underline; }
.manual-add-btn { padding: 8px 20px; }

/* Currency chips ----------------------------------------------------- */
.manual-currency-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.manual-currency-chip {
  background: #42485d;
  border: 1px solid transparent;
  color: var(--text-white);
  height: 32px;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.manual-currency-chip:hover { background: #4d536a; }
.manual-currency-chip.selected {
  background: #304762;
  border-color: var(--blue-primary);
  color: var(--text-white);
}
.manual-currency-chip[hidden] { display: none; }

/* Currency dropdown — mirrors UI Kit "Currency Dropdown" component (node 3377:1034).
   States: input alone (transparent outer) → no-results (outer wraps input + message in #3f435b box). */
.manual-currency-dropdown {
  width: 320px;
  max-width: 100%;
  padding: 8px 0;
  background: transparent;
  border-radius: var(--radius-s);
  box-sizing: border-box;
  transition: background 0.15s;
}
/* "Active" state = dropdown options visible OR empty-state message visible.
   In active state: outer container shows the #3f435b "підкладка", input wrapper goes darker (#313649). */
.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])),
.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) {
  background: #3f435b;
}
.manual-currency-dropdown-search {
  padding: 0;
  transition: padding 0.15s;
}
.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-dropdown-search,
.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-dropdown-search {
  padding: 0 12px 8px; /* px-12 pb-8 per Figma 3377:1063 */
}
.manual-currency-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 8px 20px;
  background: #3f435b; /* default (alone): onboarding/currency-dropdown/dropdown-bg */
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  box-sizing: border-box;
  transition: background 0.15s;
}
/* In active state, the input itself becomes DARKER (#313649) per Figma 3377:1064 */
.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-search-wrap,
.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-search-wrap {
  background: #313649;
}
.manual-currency-search-wrap:hover {
  background: #454966;
}
.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-search-wrap:hover,
.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-search-wrap:hover {
  background: #3a3f56;
}
/* Figma's active/focused state has NO border change — only the text inside changes.
   Keep wrapper identical to default; rely on the native caret + filled text for affordance. */
.manual-currency-search-wrap.is-focus,
.manual-currency-search-wrap:focus-within {
  background: #3f435b;
}
.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-search-wrap.is-focus,
.manual-currency-dropdown:has(.manual-currency-empty:not([hidden])) .manual-currency-search-wrap:focus-within,
.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-search-wrap.is-focus,
.manual-currency-dropdown:has(.manual-currency-dropdown-options:not([hidden])) .manual-currency-search-wrap:focus-within {
  background: #313649;
}
.manual-currency-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 0;
}
.manual-currency-search::placeholder {
  color: var(--text-muted); /* #8390b7 */
  font-weight: 500;
}
.manual-currency-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.9;
}
/* Empty state — when the search returns no matches. Simple inline note;
   the dedicated "Crypto, stablecoins or a custom asset?" tip lives below
   the search and tells the user where to add unsupported currencies. */
.manual-currency-empty {
  padding: 12px 20px 16px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
/* Options panel — list of currency rows below the input.
   Padding px-32 py-8, code white SemiBold 13px, name muted Regular 12px.
   Hover: bg #2d3141 (dropdown-bg-hover), code color #2aa7ee (dropdown-text-active). */
.manual-currency-dropdown-options {
  display: flex;
  flex-direction: column;
}
.manual-currency-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 32px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.manual-currency-option-code {
  color: var(--text-white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.12s;
}
.manual-currency-option-name {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.manual-currency-option:hover,
.manual-currency-option.is-active,
.manual-currency-option[aria-selected="true"] {
  background: #2d3141; /* onboarding/currency-dropdown/dropdown-bg-hover */
}
.manual-currency-option:hover .manual-currency-option-code,
.manual-currency-option.is-active .manual-currency-option-code,
.manual-currency-option[aria-selected="true"] .manual-currency-option-code {
  color: #2aa7ee; /* onboarding/currency-dropdown/dropdown-text-active */
}

/* === Currency v2 — layout-only wrapper ==============================
   Bubble-level spacing only. All inner elements (chips, search, options,
   labels) inherit the design-system styles defined further up:
     - .manual-currency-chip        flat pill (#42485d, 32px, font 14/600)
     - .manual-currency-dropdown    container (transparent → #3f435b active)
     - .manual-currency-search-wrap 40px row, #3f435b → #313649 on active
     - .manual-currency-option      result row (px-32 py-8, hover #2d3141)
     - .manual-section-label        section heading (13px / 600 / white)
   The dynamic confirm-button label is the only v2-specific behavior; its
   visual treatment uses the existing .manual-btn / .manual-btn-primary
   classes from the design system. */

.manual-bubble.manual-currency-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.manual-currency-v2 .manual-text-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.manual-currency-v2 .manual-body-soft {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* Search dropdown — у v2-баблі розтягуємо на всю ширину контейнера
   (поза баблем design-system дефолт залишається 320px). */
.manual-currency-v2 .manual-currency-dropdown {
  width: 100%;
  max-width: 100%;
}

/* "Suggested for you" — заголовок + чіпси розділені 16px gap'ом
   (просили в чорновику 2026-05-21). */
.manual-currency-v2 .manual-currency-suggested {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Custom-currency row inside the dropdown options list — visually a
   normal result row, but with subtle hint styling so the user can tell
   it's an "add new" action rather than an existing currency match.
   The .manual-currency-option base styles (px-32 py-8, hover #2d3141,
   active blue text) are inherited from the design system. */
.manual-currency-option-custom .manual-currency-option-name {
  font-style: italic;
  opacity: 0.85;
}
.manual-currency-option-custom .manual-currency-option-code::before {
  content: '+ ';
  color: var(--blue-primary, #2aa7ee);
  font-weight: 700;
  opacity: 0.85;
}

/* Confirm button — keep the design-system primary look, only constrain
   width so the dynamic label "Confirm UAH (₴)" doesn't shrink to fit. */
.manual-currency-v2 .manual-currency-confirm {
  min-width: 200px;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.manual-currency-v2 .manual-currency-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.m-cur-confirm-text {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .manual-currency-v2 .manual-actions { display: flex; }
  .manual-currency-v2 .manual-currency-confirm { width: 100%; min-width: 0; }
}

/* Type info tags (intro row) — purely informational, NOT interactive ---
   Used in the categories-intro bubble to illustrate the 6 type icons that
   accompany the body text. No chip / button affordance: no background,
   no pill shape, no padding — just icon + label inline like glossary items. */
.manual-type-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 2px 0 4px;
}
.manual-type-info {
  background: transparent;
  color: #f5f6fa;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  user-select: none;
}
.manual-type-info > svg { flex-shrink: 0; }


/* Example chips (CatButton) ------------------------------------------ */
/* Wrapper around label + chips + empty-state. When `.is-empty` is on (all
   examples have been picked), the label + chip grid swap out for a single
   muted note that nudges the user to the input below. */
.manual-examples-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-examples-section .manual-examples-empty-note { display: none; }
.manual-examples-section.is-empty .manual-examples-label,
.manual-examples-section.is-empty .manual-example-chips { display: none; }
.manual-examples-section.is-empty .manual-examples-empty-note { display: block; }
.manual-examples-empty-note {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
}
.manual-example-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.manual-example-chip {
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Override the inline-flex default when the chip is marked hidden — without this
   rule the HTML5 [hidden] attribute is suppressed by the .manual-example-chip
   display rule above, so chips appeared to "all disappear together" only when
   the parent container went display:none via .is-empty. */
.manual-example-chip[hidden] { display: none; }
.manual-example-chip:hover { background: #555a73; }
/* `.selected` retained as a no-op hook: Category Chip component now has only 3
   states (Default / Hover / Selected) and example chips never enter the Selected
   look in any bubble — picked items are hidden in Categories Bubble, and in
   Accounts Bubble they remain visually Default and re-clickable. */
.manual-example-chip.selected {
  background: #494d65;
  border-color: transparent;
  color: #f5f6fa;
}

/* Selected pill chips (with × remove) -------------------------------- */
.manual-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
  align-items: center;
}
/* Picked categories / accounts in "Your … so far" lists — Default chip per
   Figma Category Chip 3-state component (3377:1191):
   bg cat-chip-bg (#494d65), no border, text catbtn-text (#f5f6fa). */
.manual-pill-chip {
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.manual-pill-chip:hover { background: #565b78; }

/* Pre-filled default suggestion — subtle visual cue (dashed border + italic)
   so the user knows it's a starter pick they can keep or remove. Loses badge
   on any state-change (re-render via switchCat/refreshStatus rebuilds chips). */
.manual-pill-chip.is-default-suggestion {
  background: rgba(73, 77, 101, 0.55);
  border: 1px dashed rgba(0, 240, 255, 0.35);
  font-style: italic;
  font-weight: 500;
}
.manual-pill-chip.is-default-suggestion:hover {
  background: #565b78;
  border-color: rgba(0, 240, 255, 0.5);
}

/* Prefill explanatory note — shown above status table only when defaults seeded. */
.manual-prefill-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0 6px;
  line-height: 1.4;
  opacity: 0.85;
}

.manual-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  line-height: 1;
  color: #8390b7;
  flex-shrink: 0;
}
.manual-pill-x svg { width: 12px; height: 12px; display: block; }
.manual-pill-chip:hover .manual-pill-x { color: #bfc8e0; }

/* Map (step 5) -------------------------------------------------------- */
.manual-map-rows {
  display: flex;
  flex-direction: column;
}
.manual-map-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #494d65;
  position: relative;
}
.manual-map-row:last-child { border-bottom: none; }
.manual-map-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
}
.manual-map-row-name { flex: 0 0 auto; }
.manual-map-row-count {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.manual-map-row-pencil {
  /* Edit component — Default / Hover states from Figma `Edit` (3499:7974).
     32×32 hitbox, 20×20 pen icon centered, radius 4. Hover bg matches the
     `--onboarding-color/background/ob-bg-chip` token (#304762). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: none;
  background: transparent;
  color: #8390b7;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.manual-map-row-pencil:hover {
  background: #304762;
}
.manual-map-row-pencil:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 1px;
}
.manual-map-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Cat pill — used in Category Map view + Summary. Default chip per Figma
   Category Chip 3-state component (3377:1191): bg cat-chip-bg (#494d65),
   no border, text catbtn-text (#f5f6fa). */
.manual-cat-pill {
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}

/* ----- Inline edit affordance for the Category Map -------------------- */
.manual-inline-pen {
  display: inline-flex;
  vertical-align: middle;
  color: #8390b7;
  width: 16px;
  height: 16px;
  margin: 0 1px;
}
.manual-inline-pen svg { width: 16px; height: 16px; }

.manual-map-row-editing {
  background: rgba(42,167,238,0.04);
  border: 1px solid rgba(42,167,238,0.25);
  border-radius: 8px;
  padding: 12px;
  margin: -1px -12px;     /* visually absorb the row's bottom-border ghost edge */
}
.manual-map-row-edit-label {
  /* Edit component — Active state from Figma `Edit` (3499:7974).
     Replaces the pen icon when a row is being edited. Color matches the
     `--onboarding/category-type-group/type-text-secondary` token (#8390b7). */
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #8390b7;
  letter-spacing: 0;
}
/* Editable chip — mirrors Figma Category Chip 3377:1191:
     • Default: #494d65 fill, no border, white text
     • Hover:   #565b78 fill (the WHOLE chip tints — there is NO separate
                hover affordance on the × icon)
   Built as <span> not <button> so the inner delete button stays a real button
   for accessibility, but the hover background is owned by the chip wrapper. */
.manual-cat-chip-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  padding: 3px 4px 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background 0.12s;
}
.manual-cat-chip-edit:hover { background: #565b78; }
/* Chip name is a static label — chips in editing mode are read-only,
   delete-only (no inline rename per Figma Category Chip 3-state spec). */
.manual-cat-chip-edit-name {
  color: inherit;
  font: inherit;
  cursor: default;
}
/* × icon inside the chip — quiet affordance with NO own hover state. The
   whole chip tints on hover (handled by `.manual-cat-chip-edit:hover`); the
   icon itself stays the same color/background regardless of pointer position. */
.manual-cat-chip-edit-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: #8390b7;
  cursor: pointer;
  border-radius: 4px;
}
/* AddChip — interactive 4-state add-category control.
   Mirrors the updated Figma `Add Chip` component (3500:9000) with states:
     • Default: dashed #8390b7 border, plus icon + "Add category" placeholder
                (text + icon color #8390b7)
     • Hover:   dashed #b0b9d0 border (lighter), same content tinted #b0b9d0
     • Focus:   solid #2aa7ee border, NO plus icon, just cursor + placeholder
     • Filled:  NO border, solid #494d65 fill, white text, × clear button
   State is toggled via a `data-filled` attribute on the wrapper (set by JS on input)
   plus :focus-within / :hover CSS selectors. */
.manual-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed #8390b7;
  background: transparent;
  transition: background 0.12s, border-color 0.12s, border-style 0.12s;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
/* Hover (only when not focused and not filled) — lighter dashed gray border;
   text + plus icon brighten in sync. */
.manual-add-chip[data-filled="false"]:hover {
  border-color: #b0b9d0;
}
.manual-add-chip[data-filled="false"]:hover .manual-add-chip-plus {
  color: #b0b9d0;
}
.manual-add-chip[data-filled="false"]:hover .manual-add-chip-input,
.manual-add-chip[data-filled="false"]:hover .manual-add-chip-input::placeholder {
  color: #b0b9d0;
}
/* Focus — solid blue border, no plus icon (placeholder shows just text + cursor).
   Override hover tint so the focus state always wins visually. */
.manual-add-chip[data-filled="false"]:focus-within {
  border-style: solid;
  border-color: var(--blue-primary);
}
.manual-add-chip[data-filled="false"]:focus-within .manual-add-chip-plus {
  display: none;
}
.manual-add-chip[data-filled="false"]:focus-within .manual-add-chip-input {
  color: #f5f6fa;
}
.manual-add-chip[data-filled="false"]:focus-within .manual-add-chip-input::placeholder {
  color: #8390b7;
}
/* Filled — NO border, solid neutral fill, white text, × visible */
.manual-add-chip[data-filled="true"] {
  border-color: transparent;
  border-style: solid;
  background: #494d65;
}
.manual-add-chip[data-filled="true"] .manual-add-chip-plus { display: none; }
.manual-add-chip[data-filled="true"] .manual-add-chip-input { color: #f5f6fa; }

.manual-add-chip-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: #8390b7;
  flex-shrink: 0;
  transition: color 0.12s;
}
.manual-add-chip-input {
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #8390b7;
  padding: 0;
  width: 100px;
  min-width: 80px;
  max-width: 160px;
  transition: color 0.12s;
}
.manual-add-chip-input::placeholder {
  color: #8390b7;
  opacity: 1;
}

.manual-map-row-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.manual-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

/* Account Map recap (step 7.5) — Figma node 25711:49339 ---------------
   Mirrors Category Map (step 5) layout but with a two-level structure:
   parent groups by Type, child rows are categories with attached account
   chips. Edit mode is scoped to a whole Type group at once. */
.manual-accmap-groups {
  display: flex;
  flex-direction: column;
}
.manual-accmap-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #494d65;
  position: relative;
}
.manual-accmap-group:last-child { border-bottom: none; }
.manual-accmap-group-head {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
.manual-accmap-group-label {
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.4;
}
.manual-accmap-group-count {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  flex: 1;
}
.manual-accmap-group-pencil {
  /* Same hit-target as the Category Map pencil — 32x32 with 20x20 icon. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: none;
  background: transparent;
  color: #8390b7;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.manual-accmap-group-pencil:hover { background: #304762; }
.manual-accmap-group-pencil:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 1px;
}
.manual-accmap-group-edit-label {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #8390b7;
}
.manual-accmap-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.manual-accmap-row {
  /* Category row inside a Type group: type icon + name → arrow → chips.
     `flex-wrap` so long chip lists wrap below the label on narrow widths. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.manual-accmap-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white);
  line-height: 1.5;
  white-space: nowrap;
}
.manual-accmap-arrow {
  display: inline-flex;
  align-items: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.manual-accmap-arrow svg { width: 12px; height: 10px; }
.manual-accmap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
/* Account chip — same visual as Category Chip (#494d65 bg, white text).
   Used in default (read-only) state of the recap. */
.manual-accmap-chip {
  background: #494d65;
  color: #f5f6fa;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.manual-accmap-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}
.manual-accmap-group-editing {
  background: rgba(42,167,238,0.04);
  border: 1px solid rgba(42,167,238,0.25);
  border-radius: 8px;
  padding: 12px;
  margin: -1px -12px;
}
.manual-accmap-group-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* Accounts model (step 6) -------------------------------------------- */
.manual-card-dark {
  background: #2d3141;
  border-radius: var(--radius-s);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.manual-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
}
.manual-card-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}
.manual-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-tree-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-white);
}
.manual-tree-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  /* No min-width: rows must hug content, not align under invisible columns */
}
.manual-tree-arrow {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}
.manual-tree-arrow svg { width: 12px; height: 10px; }
.manual-tree-cat {
  color: var(--text-white);
  font-weight: 700;
  /* No min-width: hug content */
}
.manual-tree-accs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.manual-tree-acc {
  color: var(--blue-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.manual-tree-dot {
  color: var(--text-muted);
  font-weight: 700;
}

/* Accounts walkthrough (step 7) -------------------------------------- */
/* Category selector — single-select TABS (not chips). Underline pattern
   so it's obvious only one is active and accounts go to that one.
   When tabs don't fit, the strip scrolls horizontally (Linear / Vercel /
   Material 3 pattern) with edge fades hinting at off-screen content.
   Tabs never wrap to a second row. */
.manual-cat-switcher-wrap {
  position: relative;
  box-shadow: inset 0 -1px 0 #3a3e54; /* baseline that survives scroll */
  margin-bottom: 4px;
}
.manual-cat-switcher {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Hide scrollbar across browsers — overflow is hinted by edge fades */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.manual-cat-switcher::-webkit-scrollbar { display: none; }
/* Edge fade gradients — toggled by JS based on actual scroll position so
   they only appear when there's hidden content to scroll towards. Fade
   color matches the bot bubble bg (#313649) so tabs cleanly dissolve. */
.manual-cat-switcher-wrap::before,
.manual-cat-switcher-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1px; /* sit above the baseline shadow */
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 2;
}
.manual-cat-switcher-wrap::before {
  left: 0;
  background: linear-gradient(to right, #313649 35%, rgba(49, 54, 73, 0));
}
.manual-cat-switcher-wrap::after {
  right: 0;
  background: linear-gradient(to left, #313649 35%, rgba(49, 54, 73, 0));
}
.manual-cat-switcher-wrap.has-overflow-left::before { opacity: 1; }
.manual-cat-switcher-wrap.has-overflow-right::after { opacity: 1; }
.manual-cat-switch-tab {
  flex-shrink: 0;
  scroll-snap-align: start;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8390b7;
  padding: 8px 10px;
  margin-bottom: -1px; /* overlap baseline so active border sits flush */
  border-radius: 0;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.manual-cat-switch-tab:hover { color: #f5f6fa; }
.manual-cat-switch-tab.is-active {
  color: #f5f6fa;
  border-bottom-color: var(--blue-primary);
  font-weight: 600;
}
.manual-current-note {
  font-size: 13px;
  color: var(--blue-primary);
  font-style: italic;
}
/* Inline hint shown when user clicks Next after filling only one of several
   tab-categories — nudges them to notice the rest. */
.manual-tab-hint {
  background: #3a3949;
  color: #fbbcc2;
  border-left: 3px solid #fd5b6e;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}
.manual-tab-hint strong { color: #fbbcc2; font-weight: 600; }
.manual-tab-hint em { color: #fbbcc2; font-style: italic; font-weight: 500; }
.manual-current-note em {
  color: var(--blue-primary);
  font-style: italic;
  font-weight: 500;
}
.manual-acc-status {
  background: #2d3141;
  border-radius: var(--radius-s);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.manual-acc-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.manual-acc-status-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--text-white);
  min-width: 120px;
}
.manual-acc-status-accs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex: 1;
}

/* === Accounts v2 — simplified bridge + walkthrough =================== */

/* M-STEP 6 — accmodel bridge v2.
   Single example row instead of full 3-row table. Compact, focused. */
.manual-bubble.manual-accmodel-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 20px;
}
.manual-accmodel-v2 .manual-body-soft {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.manual-accmodel-example {
  background: #2d3141;
  border-radius: 10px;
  padding: 14px 16px;
}
.manual-accmodel-example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.manual-accmodel-example-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-white);
  font-weight: 600;
}
.manual-accmodel-example-arrow {
  display: inline-flex;
  opacity: 0.6;
}
.manual-accmodel-example-accs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.manual-accmodel-example-accs .manual-tree-acc {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 3px 9px;
  font-weight: 500;
  color: var(--text-white);
  font-size: 12px;
}
.manual-accmodel-v2 .manual-actions {
  gap: 8px;
  align-items: center;
}

/* === M-STEP 6 accmodel v3 — verbose "wire up your accounts" bridge ===
   Restored multi-row model card. Three rows show Type → Subcategory →
   Account examples, separated by middle-dots. Italic example body
   between title and card explains the binding semantics.
   Buttons stay primary + ghost-skip (inherited from .manual-actions). */
.manual-bubble.manual-accmodel-v3 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 20px;
}
.manual-accmodel-v3 .manual-text-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manual-accmodel-v3 .manual-body {
  color: var(--text-white);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.manual-accmodel-v3 .manual-body-italic {
  color: var(--text-muted);
  font-style: italic;
}

/* Model card — dark inner panel with 3 example rows + footer hint. */
.manual-accmodel-card {
  background: #2d3141;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.manual-accmodel-card-title {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}
.manual-accmodel-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.manual-accmodel-card-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 500;
}
.manual-accmodel-card-arrow {
  display: inline-flex;
  opacity: 0.55;
}
.manual-accmodel-card-sub {
  color: var(--text-white);
  font-weight: 700;
}
.manual-accmodel-card-accs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.manual-accmodel-card-acc {
  color: var(--blue-primary, #2aa7ee);
  font-weight: 500;
}
.manual-accmodel-card-dot {
  color: var(--text-muted);
  opacity: 0.6;
}
.manual-accmodel-card-footer {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}
.manual-accmodel-v3 .manual-actions {
  gap: 8px;
  align-items: center;
}

/* M-STEP 7 — accounts walkthrough v2.
   Per-tab focused panel: head row (active cat label + optional pre-fill hint),
   inline chips of already-added accounts, single input row, suggestion chips,
   collapsible warning. */
.manual-bubble.manual-acc-bubble-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 18px;
}
.manual-acc-bubble-v2 .manual-body-soft {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.manual-acc-focus {
  background: #2d3141;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.manual-acc-focus-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.manual-acc-focus-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
}
.manual-acc-focus-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.85;
}
.manual-acc-focus-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.8;
}
.manual-acc-focus-sub em {
  color: var(--text-white);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12px;
}
/* In v2 the focused area aggregates accounts for ALL categories in this type
   in a single visual list (so user can see everything in one glance), but the
   active-tab category is highlighted with a left bar. */
.manual-acc-focus-chips .manual-acc-status-row {
  background: transparent;
  padding: 6px 0;
  border-radius: 0;
  gap: 8px;
}
.manual-acc-focus-chips .manual-acc-status-cat {
  font-size: 12px;
  font-weight: 600;
  min-width: 100px;
  color: var(--text-muted);
}
.manual-acc-focus-chips .manual-acc-status-row + .manual-acc-status-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.manual-acc-bubble-v2 .manual-input-row {
  margin-top: 2px;
}
.manual-acc-bubble-v2 .manual-examples-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manual-acc-bubble-v2 .manual-examples-section.is-empty .manual-example-chips,
.manual-acc-bubble-v2 .manual-examples-section.is-empty .manual-acc-focus-sub {
  display: none;
}

@media (max-width: 720px) {
  .manual-bubble.manual-accmodel-v2,
  .manual-bubble.manual-acc-bubble-v2 { padding: 18px 18px 16px; }
  .manual-acc-focus { padding: 14px; }
  .manual-acc-focus-chips .manual-acc-status-row { flex-direction: column; align-items: flex-start; }
  .manual-acc-focus-chips .manual-acc-status-cat { min-width: 0; }
}

/* Summary (step 8) ---------------------------------------------------- */
.manual-summary { gap: 16px; }
.manual-sum-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 8px;
}
.manual-sum-ws-card {
  background: #2d3141;
  border-radius: var(--radius-s);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.manual-sum-ws-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #4e5b76;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.manual-sum-ws-avatar img { width: 100%; height: auto; }
.manual-ws-letter {
  color: var(--text-white);
  font-size: 24px;
  font-weight: 700;
}
.manual-sum-ws-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.manual-sum-ws-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.4;
}
.manual-sum-ws-currency {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.3;
}
.manual-sum-ws-pencil {
  display: inline-flex;
  cursor: pointer;
  opacity: 0.7;
  align-self: flex-start;
}
.manual-sum-ws-pencil:hover { opacity: 1; }

.manual-sum-cat-block {
  background: #2d3141;
  border-radius: var(--radius-s);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
}
.manual-sum-cat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #494d65;
}
.manual-sum-cat-row:last-child { border-bottom: none; }
.manual-sum-cat-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
}
.manual-sum-cat-row-count {
  color: var(--text-muted);
  font-weight: 500;
}
.manual-sum-cat-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.manual-sum-cat-row-pencil {
  display: inline-flex;
  cursor: pointer;
  opacity: 0.7;
  flex-shrink: 0;
}
.manual-sum-cat-row-pencil:hover { opacity: 1; }

.manual-sum-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.manual-sum-acc-card {
  background: #2d3141;
  border: 1px solid #393d53;
  border-radius: var(--radius-s);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}
.manual-sum-acc-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.manual-sum-acc-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
  flex: 1;
}
.manual-sum-acc-card-pencil {
  display: inline-flex;
  cursor: pointer;
  opacity: 0.7;
}
.manual-sum-acc-card-pencil:hover { opacity: 1; }
.manual-sum-acc-card-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manual-sum-acc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #b0b9d0;
  font-weight: 500;
}
.manual-enter-btn {
  font-weight: 600;
  padding: 10px 24px;
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .manual-sum-acc-grid { grid-template-columns: 1fr; }
  .manual-sum-cat-row { flex-direction: column; align-items: flex-start; }
  .manual-sum-cat-row-pills { justify-content: flex-start; }
  .manual-tree-row { flex-direction: column; align-items: flex-start; }
  .manual-tree-arrow { display: none; }
  .manual-acc-status-row { flex-direction: column; align-items: flex-start; }
  .manual-acc-status-cat { min-width: 0; }
  .manual-actions-split { flex-direction: column; align-items: stretch; }
  .manual-actions-split .manual-btn { width: 100%; }
}

/* ============================================================
   Combined per-type bubble (Revenue / Costs / Debts / Cash-Flow)
   Figma: UI Kit » Onboarding » Bot Message / Revenue (3989:13355).
   ------------------------------------------------------------
   Two states, driven by `.has-categories` on `.manual-combined-bubble`:

     • Empty — no accounts yet (and no detected pre-fill). Single column,
       no divider, no right column, no Continue button. The only action
       at the bottom is "Skip <Type>". Figma node 3989:13392.

     • With Categories — first account added (or pre-filled from upload).
       Two equal columns separated by a vertical 1px divider:
         LEFT  = quick-picks + custom add-account form (same as Empty).
         RIGHT = "Suggested categories" cards with accounts already
                 dropped in + "+ Add category" tertiary link.
       Skip stays bottom-left, Continue appears bottom-right.
       Figma node 3996:13772.

   The bubble lives inside the regular chat column — it does NOT break
   out to viewport width. Width grows naturally inside the chat layout
   container; the left edge aligns with every other bot bubble.

   Design tokens lifted from Figma (UI Kit » Onboarding):
     • Bot bubble: bg #313649 / radius 16 / padding 24 / gap 16.
     • Title-Body gap: 4. Section gap (label → content): 12.
     • Section label: SemiBold 13 / 1.4 / color #8390b7 (text-secondary).
     • Quick-pick chip: bg #494d65 / h28 / px8 py4 / radius 6 /
       SemiBold 11 / color #f5f6fa / chips-gap 12.
     • Input: bg #2d3141 / border #494d65 / h40 / px20 py8 / radius 8 /
       Medium 13 / placeholder color #8390b7.
     • Primary button (Add account / Continue): bg #2aa7ee / h40 /
       px20 py8 / radius 8 / SemiBold 13 / color white.
     • Vertical divider: 1px / color #8390b7 / full column height.
     • Card (group col): dashed #555a74 / radius 6 / padding 14/14/16 /
       gap 14 — already styled in `.manual-group-col`.
     • Account row: gap 8 / py 2 / name Medium 13/18 color #d4dae7.
     • "+ Add category" tertiary: SemiBold 12 / color #2aa7ee / + icon.
     • Skip button: Regular 13 / color #8390b7.
   ============================================================ */

/* Bubble alignment — keep this composite IN the regular chat column so its
   left edge aligns with every other bot bubble (Currency, Avatar, About…).
   No viewport breakout, no horizontal centering. */
.message.bot:has(.manual-combined-bubble) {
  position: relative;
  width: 100%;
  left: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  box-sizing: border-box;
}
.message.bot:has(.manual-combined-bubble) .bot-avatar {
  opacity: 1;
  overflow: hidden;
}
.message.bot:has(.manual-combined-bubble) .bubble {
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* Bot-bubble corners — square at the avatar (top-left), rounded elsewhere. */
  border-radius: 0 16px 16px 16px;
}

/* Bubble container — Figma `bot-bubble-gap` = 16. */
.manual-combined-bubble {
  gap: 16px;
}
/* Tighten the title-body gap from the default 8 → 4 (Figma `bubble-content-gap`). */
.manual-combined-bubble .manual-text-block { gap: 4px; }
/* Title gap — "Money coming in —" + inline type icon (Figma `text-title-gap` = 4). */
.manual-combined-bubble .manual-title { gap: 4px; }
.manual-combined-bubble .manual-type-inline {
  gap: 4px;
  margin-left: 0;
}
.manual-combined-bubble .manual-type-inline svg {
  width: 17px;
  transform: translateY(1px);
}

/* Body has two variants — only one is shown at a time, switched via the
   `.has-categories` class on the bubble. Default = Empty. */
.manual-combined-bubble .manual-body-empty { display: inline; }
.manual-combined-bubble .manual-body-cats  { display: none; }
.manual-combined-bubble.has-categories .manual-body-empty { display: none; }
.manual-combined-bubble.has-categories .manual-body-cats  { display: inline; }

/* All section labels in this bubble (Quick picks / Or add your own /
   Suggested categories) use bot-bubble-text-secondary, not white. */
.manual-combined-bubble .manual-section-label {
  color: #8390b7;
}

/* Grid layout — flex row with LEFT column + DIVIDER + RIGHT column. */
.manual-combined-grid {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}
.manual-combined-left,
.manual-combined-right {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.manual-combined-left  { gap: 16px; flex-grow: 40; }
.manual-combined-right { gap: 12px; flex-grow: 60; }

/* Vertical divider between the two columns — 1px line, full column height. */
.manual-combined-divider {
  flex: 0 0 1px;
  background: #8390b7;
  align-self: stretch;
}

/* EMPTY state — hide the divider and the right column. The user sees a
   single, unintimidating left column with only "Skip" at the bottom
   (Figma node 3989:13392). */
.manual-combined-bubble:not(.has-categories) .manual-combined-right,
.manual-combined-bubble:not(.has-categories) .manual-combined-divider {
  display: none;
}

/* The bubble's action row now holds ONLY the empty-state Skip link (the old
   inline Continue moved to the sticky panel header as "Done with {Type} →").
   Once accounts exist (has-categories, panel visible) continuing = the panel
   Done button or an empty send — hide the whole row. */
.manual-combined-bubble.has-categories .manual-actions.onb-inline-actions {
  display: none;
}

/* Each section inside the LEFT column (Quick picks / Or add your own).
   Figma `bot-bubble-section-gap` = 12. */
.manual-combined-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Quick-pick chips — Figma Category Chip (3992:14060). */
.manual-combined-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.manual-combined-chips .manual-example-chip {
  background: #494d65;
  border: 1px solid transparent;
  color: #f5f6fa;
  height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.manual-combined-chips .manual-example-chip:hover { background: #555a73; }
.manual-combined-chips .manual-example-chip[hidden] { display: none; }

/* "Or add your own" — vertical input stack (Figma gap 8). */
.manual-combined-input-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Inputs — Figma Input/Dark default (3992:14198 / 14165 / 14203).
   bg #2d3141, border 1px #494d65, h40, px20 py8, radius 8.
   Text Medium 13/1.4, placeholder color #8390b7. */
.manual-combined-name-input,
.manual-combined-balance-input,
.manual-combined-currency-select {
  width: 100%;
  height: 40px;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid #494d65;
  background: #2d3141;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.manual-combined-name-input::placeholder,
.manual-combined-balance-input::placeholder { color: #8390b7; }
.manual-combined-name-input:hover,
.manual-combined-balance-input:hover,
.manual-combined-currency-select:hover { border-color: #555a74; }
.manual-combined-name-input:focus,
.manual-combined-balance-input:focus,
.manual-combined-currency-select:focus { border-color: #2aa7ee; }
.manual-combined-name-input:disabled { opacity: 0.5; cursor: not-allowed; }
.manual-combined-name-input.is-error {
  border-color: #FD5B6E;
  animation: combinedShake 0.4s;
}
@keyframes combinedShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
/* Strip native number-spinner from balance input. */
.manual-combined-balance-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.manual-combined-balance-input::-webkit-outer-spin-button,
.manual-combined-balance-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Balance + currency on one row (Figma flex gap 8). */
.manual-combined-balance-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.manual-combined-balance-input { flex: 1 1 auto; min-width: 0; }
.manual-combined-currency-select {
  width: auto;
  flex: 0 0 auto;
  padding-right: 28px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%238390b7' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.manual-combined-currency-select option {
  background: #1d2030;
  color: #ffffff;
}

/* + Add account button — Figma chat-button Primary (3992:14345).
   Also re-used for the bottom Continue button. */
.manual-combined-add-btn,
.manual-combined-next-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid #2aa7ee;
  background: #2aa7ee;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}
.manual-combined-add-btn:hover,
.manual-combined-next-btn:hover { background: #1b96dd; border-color: #1b96dd; }
.manual-combined-add-btn:active,
.manual-combined-next-btn:active { transform: scale(0.98); }
.manual-combined-add-btn:disabled,
.manual-combined-next-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* "+ Add new" inline currency input — Search-Dark token, used when the user
   types a custom 2-5 letter code in place of the dropdown. Two size variants:
   default (bottom add-account row) + .is-inline (edit-acc row). */
.manual-cur-add-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
}
.manual-cur-add-wrap.is-inline {
  grid-area: cur;
  width: auto;
}
.manual-cur-add-input {
  display: block;
  width: 100%;
  padding: 8px 32px 8px 20px;
  border-radius: 8px;
  border: 1px solid #2aa7ee;
  background: #2d3141;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.manual-cur-add-input::placeholder {
  color: #8390b7;
  font-weight: 500;
  letter-spacing: normal;
}
.manual-cur-add-input.is-error {
  border-color: #FD5B6E;
  animation: combinedShake 0.4s;
}
.manual-cur-add-input.is-inline {
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.manual-cur-add-confirm {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2aa7ee;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease;
}
.manual-cur-add-confirm svg { display: block; transition: transform 0.2s ease; }
.manual-cur-add-confirm:hover { color: #59baf3; }
.manual-cur-add-confirm:hover svg { transform: scale(1.05); }
.manual-cur-add-wrap.is-inline .manual-cur-add-confirm {
  right: 4px;
  width: 18px;
  height: 18px;
}

/* RIGHT column — Suggested categories cards. Two equal-width columns,
   gap 16 (Figma `spacing-base`). Card chrome (dashed border, padding,
   inner gap) is already defined in `.manual-group-col`. */
.manual-combined-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.manual-combined-cols .manual-group-col {
  min-width: 0;
  flex: initial;
}

/* Balance label — used in the workspace REVIEW bubble (M-STEP 4.5),
   not in the per-type bubbles below. Kept here so the class still has
   styling; the Figma per-type design has no balance label on the row. */
.manual-combined-acc-bal {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Never shrink the balance — the name absorbs all the row's shrink instead. */
  flex: 0 0 auto;
}

/* Account row inside a card. The shell comes from `.manual-group-acc-row`
   (drag handle + name, dashed background on hover). On top of that we add
   the row × delete button (hover-only). */
.manual-combined-acc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  margin: 0 -4px;
}
.manual-acc-row-del {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4E5B76;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.manual-acc-row-del svg { width: 10px; height: 10px; display: block; }
.manual-combined-acc-row:hover .manual-acc-row-del,
.manual-combined-acc-row:focus-within .manual-acc-row-del { opacity: 1; }
.manual-acc-row-del:hover { color: #fd5b6e; }

/* Edit pencil — appears on row hover/focus. */
.manual-acc-row-edit {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  /* Same colours as the category-head pencil (.manual-group-col-edit):
     #8390b7 when revealed on row hover, #d4dae7 on direct icon hover. */
  color: #8390b7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.manual-acc-row-edit svg {
  width: 12px;
  height: 12px;
  display: block;
  transition: transform 0.2s ease;
}
.manual-combined-acc-row:hover .manual-acc-row-edit,
.manual-combined-acc-row:focus-within .manual-acc-row-edit { opacity: 1; }
.manual-acc-row-edit:hover { color: #d4dae7; }
.manual-acc-row-edit:hover svg { transform: scale(1.05); }

/* Inline edit-account form (pencil click) — compact grid sitting in place
   of the read-only row. Uses the same Input-Dark tokens as the bottom
   custom-add form, just at 32h. */
.manual-combined-acc-row.is-editing-acc {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 6px 8px;
  align-items: flex-start;
}
.manual-combined-acc-row.is-editing-acc .manual-group-drag {
  margin-top: 5px;
}
.manual-acc-edit-form {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name    name"
    "bal     cur"
    "actions actions";
  gap: 6px;
  align-items: center;
}
.manual-acc-edit-name { grid-area: name; }
.manual-acc-edit-bal  { grid-area: bal; }
.manual-acc-edit-cur  { grid-area: cur; }
.manual-acc-edit-actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.manual-acc-edit-name,
.manual-acc-edit-bal {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #494d65;
  background: #2d3141;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.16s ease;
}
.manual-acc-edit-bal {
  -moz-appearance: textfield;
  appearance: textfield;
}
.manual-acc-edit-bal::-webkit-outer-spin-button,
.manual-acc-edit-bal::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.manual-acc-edit-name::placeholder,
.manual-acc-edit-bal::placeholder { color: #8390b7; }
.manual-acc-edit-name:hover,
.manual-acc-edit-bal:hover { border-color: #555a74; }
.manual-acc-edit-name:focus,
.manual-acc-edit-bal:focus { border-color: #2aa7ee; }
.manual-acc-edit-name.is-error {
  animation: combinedShake 0.4s;
  border-color: #FD5B6E;
}
.manual-acc-edit-cur {
  padding: 6px 22px 6px 10px;
  border-radius: 6px;
  border: 1px solid #494d65;
  background-color: #2d3141;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 10 6'><path fill='none' stroke='%238390b7' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  transition: border-color 0.16s ease;
}
.manual-acc-edit-cur:hover { border-color: #555a74; }
.manual-acc-edit-cur:focus { border-color: #2aa7ee; }
.manual-acc-edit-cur option { background: #1d2030; color: #fff; }
/* OK / Cancel — UI Kit Button — Small (Figma `972:351` / `1524:1524`). */
.manual-acc-edit-save,
.manual-acc-edit-cancel {
  height: 32px;
  padding: 4px 12px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    background-image 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease;
}
.manual-acc-edit-cancel {
  /* Secondary: filled subtle, no outline, readable text (matches bubble buttons) */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  color: #d4dae7;
}
.manual-acc-edit-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.manual-acc-edit-cancel:active { transform: scale(0.98); }
.manual-acc-edit-save {
  /* Primary: solid blue, white text, no outline (was cyan→blue gradient) */
  background: var(--blue-primary);
  border: 1px solid transparent;
  color: #ffffff;
}
.manual-acc-edit-save:hover {
  background: #1b96dd;
  box-shadow: 0 4px 7px rgba(127, 189, 217, 0.35);
}
.manual-acc-edit-save:active { transform: scale(0.98); }

/* Right column footer — "+ Add category" tertiary link.
   Figma: gap 4 / SemiBold 12 / 1.5 / color #2aa7ee / with + icon. */
.manual-combined-right-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Menu Button — Small (UI Kit node 1729:6271): slate pill, gradient "+" circle,
   12/600 light label. Used as the primary "Add account" action under the
   suggested categories. */
.manual-menu-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 4px 12px;
  border: 0;
  border-radius: 8px;
  background: #494d65;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  color: #fcfcfc;
  transition: background-color 0.15s ease;
}
.manual-menu-btn-sm:hover { background: #545a78; }
.manual-menu-btn-sm:active { background: #41465c; }
.manual-menu-btn-sm-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #6b7491;
}
.manual-menu-btn-sm-icon svg { display: block; }

/* "Add category" placeholder — another dashed category card (inherits the
   .manual-group-col dashed border) but with centered "+" and label instead of
   account rows. order:1 keeps it last even when new account columns are
   appended to the grid at runtime. */
.manual-cat-add-tile {
  order: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: #8390b7;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}
.manual-cat-add-tile:hover {
  border-color: #8390b7;
  color: #b0b9d0;
  background: rgba(255, 255, 255, 0.03);
}
.manual-cat-add-tile-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.manual-cat-add-tile-plus svg { display: block; }
.manual-cat-add-tile-label { line-height: 1.2; }

/* Bottom action row — Figma Buttons Container (3996:14034 / 3989:13447).
   Always justify-between so Skip clings to the left edge regardless of
   whether Continue (right-side primary) is shown. */
.manual-combined-bubble .manual-actions {
  padding-top: 8px;
}
.manual-combined-bubble .manual-btn-skip {
  font-weight: 400;
  color: #8390b7;
  padding: 8px 0;
}
.manual-combined-bubble .manual-btn-skip:hover { color: #b8c0d5; }

/* ---------- Responsive --------------------------------------------------
   Below ~720px the two-column grid collapses to a single stack.
   The divider becomes a horizontal 1px line between the two stacks
   (it's a flex item, so `align-self: stretch` widens it to full width
   automatically — the `flex: 0 0 1px` becomes a 1px-tall row).
   In Empty state nothing changes (right column + divider remain hidden). */
@media (max-width: 720px) {
  .manual-combined-grid {
    flex-direction: column;
    gap: 16px;
  }
  .manual-combined-cols {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   STEP 7 per-type bubble — WITH-FILES variant.
   Full-width "Suggested categories" board, Quick picks beneath,
   "+ Add account" trigger, and a centred light Create-account modal.
   Figma modal: 6R2xRAZD91DiKXVLUnNVCG node 13517:48680.
   ============================================================ */
.manual-combined-bubble.is-withfiles { gap: 18px; }

/* Full-width categories board (replaces the right column in this variant). */
.manual-combined-cats-full {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
/* Heading row: section label on the left, subtle "Add more data" on the right. */
.manual-combined-cats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.manual-combined-cats-head .manual-combined-groups-label { margin: 0; }
/* Label + AI-suggestion chip sit together on the left; the chip is 4px to the
   right of the text. Takes the flexible space so "Add more data" stays far right. */
.manual-combined-groups-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.manual-combined-groups-left .manual-combined-ai { flex: 0 0 auto; }

/* "AI suggestion" source marker above the board — reuses `.ss-source-badge`
   (the same robot badge as the currency step) with a muted reassurance line
   beneath it. Shown in both the with-files and the manual (no-files) layout. */
.manual-combined-ai {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manual-combined-ai-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  padding: 4px 8px;
}
.manual-combined-ai-badge svg { display: block; flex: 0 0 auto; }
.manual-combined-ai-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Muted helper under the board explaining that groups are just folders. */
.manual-combined-groups-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
/* Deliberately understated text button — muted, small, low emphasis. */
.manual-add-more-data {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: #7b84a0;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  opacity: 0.75;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.manual-add-more-data svg { display: block; opacity: 0.8; }
.manual-add-more-data:hover { color: #aab2c8; opacity: 1; }
.manual-combined-bubble.is-withfiles .manual-combined-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* (Inline bubble Continue removed — the step advances from the sticky
   panel's "Done with {Type} →" or an empty send.) */

/* ============================================================
   STEP 7 per-type bubble — NO-FILES CARD variant (`.is-cards`).
   Same full-width folder board as with-files, but it starts EMPTY:
   the step opens on just its title + intro text + an inline
   "Add your first account" field. Entering the first account creates
   the first category card and reveals the board; from there it behaves
   exactly like the card layout (per-card "+ Add account" modal,
   "+ Add category" tile, drag / rename / delete).
   ============================================================ */
.manual-combined-bubble.is-cards { gap: 18px; }
/* 3-up folder grid, matching the with-files board. */
.manual-combined-bubble.is-cards .manual-combined-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* EMPTY state: hide the whole categories board until the first account
   exists (applies to any variant — with-files always has `.has-categories`
   so it's never hidden there). */
.manual-combined-bubble:not(.has-categories) .manual-combined-cats-full {
  display: none;
}
/* Once cards are revealed, the inline "Add your first account" field steps
   aside — further accounts are added through the per-card modal. */
.manual-combined-bubble.has-categories .manual-combined-firstacc { display: none; }

/* Inline "Add your first account" entry (empty state only). */
.manual-combined-firstacc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.manual-combined-firstacc-row {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
}
/* Inputs mirror .manual-combined-name-input (Input/Dark: bg #2d3141,
   border #494d65, h40, radius 8, Medium 13). Distinct class names so the
   modal's own inputs stay the ones the add/edit logic queries. */
.manual-firstacc-name,
.manual-firstacc-bal {
  height: 40px;
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid #494d65;
  background: #2d3141;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  min-width: 0;
}
.manual-firstacc-name { flex: 1 1 260px; }
.manual-firstacc-bal {
  flex: 0 1 190px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.manual-firstacc-bal::-webkit-outer-spin-button,
.manual-firstacc-bal::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.manual-firstacc-name::placeholder,
.manual-firstacc-bal::placeholder { color: #8390b7; }
.manual-firstacc-name:hover,
.manual-firstacc-bal:hover { border-color: #555a74; }
.manual-firstacc-name:focus,
.manual-firstacc-bal:focus { border-color: #2aa7ee; }
.manual-firstacc-name.is-error { border-color: #FD5B6E; animation: combinedShake 0.4s; }
.manual-firstacc-add {
  flex: 0 0 auto;
  height: 40px;
  align-self: stretch;
  white-space: nowrap;
}

/* "+ Add account" — Text Button + Outlined/Plus, identical to the existing
   "+ Add category" (.manual-combined-add-cat). Per UI Kit decisions.md an
   inline add-action is a Text Button, not a pill/outlined button. Sits at the
   end of the quick-picks row and opens the Create-account modal. */
.manual-combined-addaccount-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: #2aa7ee;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  transition: color 0.15s ease;
}
.manual-combined-addaccount-trigger svg { display: block; }
.manual-combined-addaccount-trigger:hover { color: #59baf3; }

/* ---------- Create-account modal (light) ---------- */
.acc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 11, 26, 0.62);
  backdrop-filter: blur(2px);
  animation: accModalFade .16s ease-out;
}
.acc-modal-overlay[hidden] { display: none; }
@keyframes accModalFade { from { opacity: 0; } to { opacity: 1; } }

.acc-modal {
  position: relative;
  width: 455px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #ffffff;
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 4px 37px rgba(12, 24, 88, 0.18);
  animation: accModalPop .18s ease-out;
  font-family: 'Montserrat', var(--font);
}
/* × close — top-right corner of the dialog. */
.acc-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #9aa0b0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.acc-modal-close:hover { background: #f0f1f5; color: #0a0c14; }
@keyframes accModalPop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.acc-modal-title {
  font-family: 'Montserrat', var(--font);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  color: #0a0c14;
}
.acc-modal-field { display: flex; flex-direction: column; gap: 10px; }
.acc-modal-label {
  font-family: 'Montserrat', var(--font);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #1a1d29;
}

/* Light inputs — override the dark .manual-combined-*-input rules inside the modal. */
.acc-modal .manual-combined-name-input,
.acc-modal .manual-combined-balance-input {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f5f6fd;
  color: #2d3141;
  font-family: 'Montserrat', var(--font);
  font-size: 14px;
  letter-spacing: 0.23px;
}
.acc-modal .manual-combined-name-input::placeholder,
.acc-modal .manual-combined-balance-input::placeholder { color: #b9b9b9; }
.acc-modal .manual-combined-name-input:hover,
.acc-modal .manual-combined-balance-input:hover { border-color: #d4dae7; }
.acc-modal .manual-combined-name-input:focus,
.acc-modal .manual-combined-balance-input:focus { border-color: #1da5f1; background: #fff; }
.acc-modal .manual-combined-name-input.is-error { border-color: #e5484d; }

/* Currency chips — selected gets the brand gradient (Figma). */
.acc-modal-currency { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.acc-modal-cur-chip {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Montserrat', var(--font);
  font-weight: 600;
  font-size: 13px;
  color: #b0b9d0;
  transition: color .15s;
}
.acc-modal-cur-chip:hover { color: #68798a; }
.acc-modal-cur-chip.is-active {
  background-image: linear-gradient(96.9deg, #00f0ff, #1da5f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Done button — gradient + circular check (Figma). */
.acc-modal .acc-modal-done {
  align-self: stretch;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px solid #00e0ff;
  border-radius: 9px;
  background: linear-gradient(105.7deg, #00e0ff 24%, #1da5f1 102%);
  color: #fcfcfc;
  font-family: 'Montserrat', var(--font);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.acc-modal .acc-modal-done:hover { filter: brightness(1.05); }
.acc-modal .acc-modal-done:active { transform: scale(.99); }
.acc-modal-done-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fcfcfc;
  color: #1da5f1;
}
.acc-modal-done-check svg { width: 12px; height: 10px; }

@media (max-width: 640px) {
  .manual-combined-bubble.is-withfiles .manual-combined-cols,
  .manual-combined-bubble.is-cards .manual-combined-cols { grid-template-columns: 1fr; }
  .manual-combined-firstacc-row { flex-direction: column; }
  .manual-firstacc-add { align-self: flex-start; }
  .acc-modal { padding: 22px; gap: 16px; }
  .acc-modal-title { font-size: 24px; }
}

/* ===== Sidebar account list — exact product left-menu styling =====
   Values lifted from the product export (_category_group.css): Montserrat,
   category name #fcfcfc/600/13, accounts #b0b9d0/12 (name 500, balance 600),
   subtotal short line border-top #B0B9D0 + #fcfcfc value, group gap 18px.
   Expanded by default; chevron points down, rotates to › when collapsed. */
.onb-sb-cat-list { gap: 10px; }

/* Money-type tabs (Revenue / Costs / Accounts / …) use the same uniform 8px gap
   as every other tab — no extra top margin/padding. */

/* Display-only category header (not a button) — the whole tab handles clicks,
   this just shows the category name, so it carries no separate affordance. */
.onb-sb-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 26px;
  color: #b0b9d0;
  cursor: inherit;
}
.onb-sb-cat-head .onb-sb-cat-name { flex: 1 1 0; width: auto; min-width: 0; gap: 8px; }
.onb-sb-cat-label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #fcfcfc;
  letter-spacing: normal;
}
/* Decorative only — no rotation, no collapse, not interactive. */
.onb-sb-cat-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: #b0b9d0;
  pointer-events: none;
}

/* Accounts — same left edge as the category header (product padding 16px) */
.onb-sb-acc-list { padding-left: 0; padding-top: 0; gap: 0; }
.onb-sb-acc-row { height: auto; gap: 15px; padding: 2px 0; align-items: center; justify-content: space-between; }
.onb-sb-acc-name {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: #b0b9d0;
  letter-spacing: normal;
  max-width: 55%;
}
.onb-sb-acc-num,
.onb-sb-acc-cur {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: #b0b9d0;          /* muted like the account name (Figma) — not bright white */
  letter-spacing: normal;
}

/* ===== DATA SUGGESTIONS CHIPS (step 3 post-analysis) ===== */
.data-suggestions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.data-suggestions-label {
  font-family: var(--font);
  font-size: 12px;
  color: #8390b7;
}
.data-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.data-sug-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(176, 185, 208, 0.2);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: #b0b9d0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.data-sug-chip:hover {
  border-color: rgba(176, 185, 208, 0.4);
  background: rgba(255, 255, 255, 0.07);
  color: #d0d6e8;
}
.data-sug-chip.active {
  border-color: rgba(42, 167, 238, 0.5);
  background: rgba(42, 167, 238, 0.08);
  color: #2aa7ee;
}
.data-sug-more {
  border-style: dashed;
}

/* ===== ORG BUBBLE — "Let's organize your finances" transition step ===== */
/* Now uses manual-bubble + mDataFlowSVG (ported from onboarding-normal).
   Legacy .org-* classes kept for backward compat in case referenced elsewhere. */
.org-bubble { display: flex; flex-direction: column; gap: 16px; }
.org-go-btn { align-self: flex-start; }

/* "How it's organized" infographic — PNG exported from Figma (UI Kit 4140:14255),
   replacing the old mDataFlowSVG() Sankey. Fills the bubble width; the parent
   .manual-bubble already provides 16px flex gap, so only a small extra margin. */
.manual-cat-infographic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 4px 0;
}

/* Animated Sankey (manual-flow-sankey-wrap / manual-flow-sankey) */
.manual-flow-sankey-wrap {
  width: 100%;
  padding: 8px 0 4px;
}
.manual-flow-sankey {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
/* Ribbon reveal — each <g class="sk-flow"> clips from right to left on entry */
.manual-flow-sankey .sk-flow {
  clip-path: inset(0 100% 0 0);
  animation: skFlow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.12s * var(--i, 0));
  will-change: clip-path;
}
@keyframes skFlow {
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .manual-flow-sankey .sk-flow {
    clip-path: inset(0 0 0 0);
    animation: none;
  }
}
/* Top column labels */
.manual-flow-sankey .sk-col-title {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  fill: #8390b7;
  dominant-baseline: alphabetic;
}
/* Vertical bar labels */
.manual-flow-sankey .sk-bar-label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  fill: #ffffff;
  dominant-baseline: middle;
}
@media (max-width: 540px) {
  .manual-flow-sankey .sk-col-title { font-size: 12px; }
  .manual-flow-sankey .sk-bar-label { font-size: 13px; }
}

/* 5-column legend row beneath the Sankey */
.manual-flow-col-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 2px;
}
.manual-flow-col-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #f5f6fa;
  white-space: nowrap;
}
.manual-flow-col-item svg {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: auto;
  vertical-align: middle;
}
@media (max-width: 540px) {
  .manual-flow-col-item { font-size: 12px; }
}


/* ========================================================================
   GUIDE TOUR — pre-onboarding slides overlay
   Welcome screen + 5 slides shown ON TOP of the onboarding, which is
   blurred behind. "Let's go" dismisses the tour into the onboarding.
   ======================================================================== */

/* Blur + freeze the onboarding while the tour is up */
body.tour-active .header,
body.tour-active .main {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
/* .header.visible runs `animation: fadeIn ... forwards`, whose 100% keyframe
   holds filter:blur(0). A normal author filter (above) loses to a running/held
   animation in the cascade, so the header stayed crisp. An !important author
   declaration outranks animations → blur sticks during the tour, and lifts the
   moment body loses .tour-active. */
body.tour-active .header {
  filter: blur(8px) !important;
}

.guide-tour {
  position: fixed;
  inset: 0;
  z-index: 500;                       /* above header (100), below debug tools */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 29, 40, 0.55);
  font-family: var(--font);
  opacity: 1;
  transition: opacity 0.45s ease;

  /* Height-driven sizing: the whole tour targets ~95% of the viewport height
     and scales the slide screenshot from that, keeping its native aspect. */
  --gt-h: 95vh;                 /* total vertical budget for the tour          */
  --gt-chrome: 320px;           /* head(H1 32 + sub 20) + caption(2-line) + dots + button — measured worst case ≈313 + safety */
  --gt-wmax: 1080px;            /* absolute horizontal cap on the slide card   */
  --gt-arrow-room: 190px;       /* viewport width reserved for the side arrows */
  --gt-gap: clamp(12px, 2.2vh, 28px);  /* vertical rhythm between blocks       */
}
.guide-tour.gt-dismissed {
  opacity: 0;
  pointer-events: none;
}

/* ---- Welcome ---- */
.gt-welcome {
  max-height: var(--gt-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  animation: gtFadeIn 0.6s ease forwards;
}
.gt-welcome.gt-fade-out { animation: gtFadeOut 0.4s ease forwards; }
.gt-hello {
  /* Big, height-aware: grows with viewport height, capped so it never
     gets absurd on ultra-tall screens; falls back to vw on short/narrow.
     Bumped ~+20% over the previous min(22vh, clamp(72,11vw,150)). */
  font-size: min(26vh, clamp(86px, 13.2vw, 180px));
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.gt-welcome-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* gap under Hello scaled ~+20% along with the headline */
  margin: clamp(14px, 2.9vh, 28px) 0 0;
  font-size: clamp(19px, 2.9vh, 26px);
  font-weight: 500;
  color: var(--text-dimmed);
}
.gt-welcome-sub .gt-welcome-logo { margin-left: 2px; opacity: 0.95; }
.gt-welcome-sub span { color: var(--text-white); font-weight: 600; }

/* ---- Slides ---- */
.gt-slides {
  width: auto;
  max-width: 96vw;
  max-height: var(--gt-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: gtFadeIn 0.5s ease forwards;
}
.gt-head {
  flex: 0 0 auto;
  text-align: center;
  margin: 0 0 var(--gt-gap);
}
.gt-title {
  /* Title / H1 — design-system scale (toned down 32→28) */
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-white);
}
.gt-subtitle {
  /* Subtitle / M Medium — design-system scale (toned down 20→18) */
  margin: clamp(8px, 1.2vh, 12px) 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
}

.gt-stage {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gt-card {
  /* Height-driven: the slide screenshot (920x414) is sized from the height
     left over after the chrome, then the width follows its aspect ratio.
     Two horizontal caps keep it from overflowing wide-but-short screens and
     guarantee clearance for the side arrows. The smallest of the three wins. */
  width: min(
    var(--gt-wmax),
    calc(100vw - var(--gt-arrow-room)),
    calc((var(--gt-h) - var(--gt-chrome)) * 920 / 414)
  );
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: var(--bg-dark);
}
.gt-card-img { display: block; line-height: 0; }
/* width:100% + native aspect-ratio keeps the image undistorted AND reserves its
   height before the bitmap loads — so swapping slides never collapses/expands the
   card (no vertical jump on first navigation to an un-cached slide). */
.gt-card-img img { width: 100%; height: auto; display: block; object-fit: contain; aspect-ratio: 920 / 479; }
.gt-card-caption {
  padding: clamp(16px, 2.2vh, 24px) clamp(22px, 2.4vw, 32px) clamp(18px, 2.4vh, 28px);
  background: var(--bg-dark);
  text-align: left;
}
.gt-caption-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-white);
  margin-bottom: clamp(6px, 1vh, 10px);
}
.gt-caption-desc {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dimmed);
  /* Reserve two lines so a shorter description (e.g. the Total slide) keeps the
     caption — and therefore the whole card — exactly the same height as the rest.
     Prevents both the uneven-caption issue and the centred-layout vertical jump. */
  min-height: calc(15px * 1.5 * 2);
}

/* Side arrows */
.gt-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-white);
  display: none; /* side arrows removed — Skip/Next buttons + dots navigate the tour */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.gt-arrow:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}
.gt-arrow-prev { left: -72px; }
.gt-arrow-next { right: -72px; }
.gt-arrow.gt-arrow-hidden { opacity: 0; pointer-events: none; }
/* Optical centering — chevrons read off-centre when geometrically centred */
.gt-arrow-prev svg { transform: translateX(-2px); }
.gt-arrow-next svg { transform: translateX(2px); }

/* Progress dots */
.gt-progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: var(--gt-gap);
  /* Fixed height = the active dot's size. Without this the row height is driven
     by the tallest child, which dips below 12px mid-transition (old dot shrinking
     12→8 while the new one grows 8→12) — causing the centred layout to micro-jump. */
  height: 12px;
}
.gt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #606b96;          /* Figma inactive dot */
  cursor: pointer;
  transition: all 0.25s ease;
}
.gt-dot.is-active {
  width: 12px;
  height: 12px;
  background: #93a2d9;          /* Figma active dot — grey, not blue */
}

/* Let's go */
/* Slides 1–4 footer: Skip (secondary) + Next (primary), 16px apart. Same
   top offset AND the same fixed height as the Let's go button, so swapping
   footers between slide 4 → 5 doesn't shift the whole screen. */
.gt-actions {
  flex: 0 0 auto;
  height: 46px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(16px, 2.2vh, 26px);
}
.gt-actions .action-btn {
  height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

.gt-letsgo {
  flex: 0 0 auto;
  height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(16px, 2.2vh, 26px);
  padding: 0 34px;
  border: none;
  border-radius: 8px;
  background: var(--blue-primary);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.gt-letsgo:hover { filter: brightness(1.08); }

@keyframes gtFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes gtFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Narrow screens: arrows move inside the card edges so they don't clip, and
   the card is capped by width (90vw) instead of needing arrow gutters. Still
   height-driven — whichever of the two is smaller wins — with a bit more
   chrome budget since captions wrap onto more lines at narrow widths. */
@media (max-width: 900px) {
  .guide-tour { --gt-chrome: 400px; }
  .gt-card {
    width: min(90vw, calc((var(--gt-h) - var(--gt-chrome)) * 920 / 414));
  }
  .gt-arrow-prev { left: 10px; }
  .gt-arrow-next { right: 10px; }
}

/* =====================================================================
   v5 REDESIGN — "Onboarding / Chat — Closed sidebar" (Figma 4442:14527)
   Layout-only overrides appended last so they win over the base rules.
   ===================================================================== */

/* (1) Top header removed — logo now lives in the left rail. Node kept in the
   DOM so the Guide-Tour / scroll JS refs stay valid; just hidden visually. */
.header { display: none !important; }

/* Main fills the viewport now that the 63px header is gone. */
.main {
  margin-top: 0;
  height: 100vh;
  height: 100dvh;
}

/* (2) Left sidebar — Figma "Side Bar" (node 4451:185328). Open (300px, labels)
   and Closed (80px, icon rail) states, toggled by the header button. Fixed to the
   left edge (24px insets, full viewport height, out of flow) so the chat column
   stays centred in the full viewport and is never shifted by the sidebar. */
.onb-sidebar {
  position: fixed;
  left: 24px;
  top: 24px;
  bottom: 24px;
  height: auto;
  flex: 0 0 auto;
  width: 300px;
  background: #313649;             /* ob-bg-bubble-bot */
  border: 0;
  border-radius: 12px;
  padding: 20px;
  gap: 0;
  overflow: hidden;               /* the steps list gets its own scroll */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  z-index: 20;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease,
              width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.26s ease;
}
/* Collapsed = icon rail. Transparent panel (Figma Side Bar / Type=Closed) — only
   the icons (and any hover/selected tab chips) float over the page. */
.onb-sidebar.is-collapsed { width: 80px; background: transparent; }

/* Top group: header + tabs (scrolls as one). */
.onb-sb-rail-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ---- Header: logo + wordmark (left) + toggle (right) ---- */
.onb-sb-header {
  position: relative;             /* anchors the collapsed toggle overlay */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 40px;
  flex: 0 0 auto;
  overflow: hidden;               /* clips the wordmark as the rail narrows */
}
.onb-sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  min-width: 0;
  overflow: hidden;
}
.onb-sb-brand-logo { display: block; width: 21px; height: 27px; flex: 0 0 auto; }
.onb-sb-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.4px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.onb-sb-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b0b9d0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.onb-sb-toggle:hover { background: #393d53; color: #d4dae7; }
.onb-sb-toggle svg { display: block; width: 20px; height: 20px; }

/* ---- Tabs ---- */
.onb-sb-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.onb-sb-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
  cursor: default;
  transition: background 0.15s ease;
}
.onb-sb-step + .onb-sb-step { border-top: 0; }

/* Icon chip (24px) */
.onb-sb-tab-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  overflow: hidden;
}
.onb-sb-tab-icon > img,
.onb-sb-tab-icon > svg { display: block; width: 24px; height: 24px; }
/* Letter / currency glyph chips sit on a filled circle */
.onb-sb-tab-icon.onb-ic-glyph {
  background: transparent;          /* no round background until the tab is filled */
  color: rgba(131, 144, 183, 0.4);  /* #8390B7 @ 40% — same tint as every other unfilled icon */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;                 /* SemiBold */
  font-size: 15px;
  line-height: 1;
}
/* Once the tab is filled (data entered, or skipped) the filled circle appears. */
.onb-sb-step.is-done .onb-sb-tab-icon.onb-ic-glyph {
  background: #4e5b76;
  color: #b0b9d0;
}
/* Selected (current) tab: glyph goes to the saturated filled colour too, but stays
   without the round background (that appears only once the tab is done). */
.onb-sb-step.is-current .onb-sb-tab-icon.onb-ic-glyph { color: #b0b9d0; }
.onb-sb-tab-icon.onb-ic-cur { font-weight: 600; font-size: 16px; }  /* Currency $ — 16 SemiBold */
/* Manual optical nudges inside the 24px circle (border-box keeps the circle 24×24;
   the glyph shifts by half the padding). */
.onb-sb-tab-icon.onb-ic-name { padding-bottom: 2px; }  /* Name letter — up 1px */
/* Only nudge the "$" symbol (shown when filled); in default/selected the icon fills
   the whole 24px box via ::before, which padding must not shift. */
.onb-sb-step.is-done .onb-sb-tab-icon.onb-ic-cur { padding-top: 2px; }  /* Currency $ — down 1px */
/* Icon tab: empty #4E5B76 circle until a workspace icon is picked; the chosen
   sprite avatar drops in via setSidebarStepAvatar (inline % crop fits any box). */
.onb-sb-tab-icon.onb-ic-avatar { background: transparent; position: relative; }
/* Circle backing ONLY when an actual image is chosen (it sits behind that <img>).
   A skipped Icon tab (done, no image) keeps the bare placeholder with NO circle. */
.onb-sb-tab-icon.onb-ic-avatar:has(img) { background: #4e5b76; }
/* Empty-picture placeholder. Unfilled: same #8390B7 @ 40% tint as the other unfilled
   icons, drawn at the money-icon scale (24px mask / ~18px content wide). Once the tab
   is filled/skipped it turns #B0B9D0 to match the filled circle. The chosen avatar
   <img> is absolutely positioned and covers this pseudo-element. */
.onb-sb-tab-icon.onb-ic-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(131, 144, 183, 0.4);
  -webkit-mask: url("assets/icons/img-placeholder.svg") center / 24px 24px no-repeat;
  mask: url("assets/icons/img-placeholder.svg") center / 24px 24px no-repeat;
}
/* Skipped Icon tab (done, no image) shows the placeholder in #8390B7. (When an image
   is chosen the placeholder is removed via :has(img), so this only affects skip.) */
.onb-sb-step.is-done .onb-sb-tab-icon.onb-ic-avatar::before { background-color: #8390b7; }
/* Selected (current) tab: placeholder goes saturated too (no circle yet — see above). */
.onb-sb-step.is-current .onb-sb-tab-icon.onb-ic-avatar::before { background-color: #b0b9d0; }
/* Once an image is chosen the <img> may not fully cover the circle, so drop the
   placeholder entirely rather than let it peek out from behind. */
.onb-sb-tab-icon.onb-ic-avatar:has(img)::before { content: none; }

/* Currency chip: the banknote ICON shows in default/selected; the chosen currency
   SYMBOL glyph (in the filled circle) appears only once the tab is filled. Mirrors
   the Icon-tab placeholder — a masked ::before for the icon, the "$" text hidden
   until is-done. */
.onb-sb-tab-icon.onb-ic-cur { position: relative; color: transparent; }
.onb-sb-step.is-current .onb-sb-tab-icon.onb-ic-cur { color: transparent; }  /* selected still shows the icon */
.onb-sb-step.is-done .onb-sb-tab-icon.onb-ic-cur { color: #b0b9d0; }          /* filled → symbol glyph */
.onb-sb-tab-icon.onb-ic-cur::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(131, 144, 183, 0.4);            /* default tint — like every unfilled icon */
  -webkit-mask: url("assets/icons/tab-currency.svg") center / 24px 24px no-repeat;
  mask: url("assets/icons/tab-currency.svg") center / 24px 24px no-repeat;
}
.onb-sb-step.is-current .onb-sb-tab-icon.onb-ic-cur::before { background-color: #b0b9d0; }  /* selected — same as Icon selected */
.onb-sb-step.is-done .onb-sb-tab-icon.onb-ic-cur::before { content: none; }                 /* filled → drop icon, show symbol */

/* Label */
.onb-sb-step-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;               /* one step thinner (was 600) */
  font-size: 15px;
  line-height: 1.4;
  color: #d4dae7;                 /* text-on-dark-primary */
  position: relative;
  top: -1px;                      /* nudge label up 1px; icon stays put */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
}

/* Hide every leftover preview/text from the old expanded sidebar. */
.onb-sb-step-sub,
.onb-sb-cat-list,
.onb-sb-file-list,
.onb-sb-cur-list,
.onb-sb-avatar-thumb,
.onb-sb-head,
.onb-sb-divider,
.onb-sb-logo { display: none !important; }

/* ---- States ---- */
/* Upcoming (not yet visited) → disabled: not clickable; label + glyph chips read
   dim. (No whole-row opacity, so the icon tint below stays exactly #8390B7 @ 40%.) */
.onb-sb-step:not(.is-done):not(.is-current) { pointer-events: none; }
.onb-sb-step:not(.is-done):not(.is-current) .onb-sb-step-title { opacity: 0.45; }
/* Glyph/avatar tabs carry the exact #8390B7 @ 40% tint in their unfilled state, so no
   extra opacity dimming here (that would darken them to 0.2 and mismatch other icons). */
/* Visited → clickable and FILLED. Open panel is #313649, so a completed tab is a
   shade darker (#2a2e3e). (Collapsed rail fills with the open-panel colour — see the
   collapsed section.) Hover keeps its lighter highlight. Current tab is excluded so
   it keeps its own selected colour. */
.onb-sb-step.is-done { cursor: pointer; }
.onb-sb-step.is-done:not(.is-current) { background: #2d3244; }  /* just slightly darker than panel #313649 */
.onb-sb-step.is-done:hover { background: #393d53; }   /* ob-bg-page */
/* Current → selected. */
.onb-sb-step.is-current {
  background: #3f435b;                                /* ob-bg-bubble-user */
  cursor: pointer;
}
.onb-sb-step.is-current .onb-sb-step-title { color: #fff; }

/* Unvisited money-type / Review icons are single-colour silhouettes — grayscale()
   maps each source colour to a DIFFERENT grey. Instead we mask a flat #8390B7 @ 40%
   with the icon's own shape, so EVERY unvisited icon is the exact same tint. Once
   the step is done/current the real coloured SVG shows again. */
.onb-sb-step[data-substep="revenue"]  { --tab-mask: url("assets/icons/tab-revenue.svg"); }
.onb-sb-step[data-substep="costs"]    { --tab-mask: url("assets/icons/tab-costs.svg"); }
.onb-sb-step[data-substep="accounts"] { --tab-mask: url("assets/icons/tab-accounts.svg"); }
.onb-sb-step[data-substep="debts"]    { --tab-mask: url("assets/icons/tab-debts.svg"); }
.onb-sb-step[data-substep="cashflow"] { --tab-mask: url("assets/icons/tab-cash.svg"); }
.onb-sb-step[data-step="10"]          { --tab-mask: url("assets/icons/tab-review.svg"); }

.onb-sb-step:not(.is-done):not(.is-current) .onb-sb-tab-icon:not(.onb-ic-glyph):not(.onb-ic-avatar):not(.onb-ic-user) {
  position: relative;
}
.onb-sb-step:not(.is-done):not(.is-current) .onb-sb-tab-icon:not(.onb-ic-glyph):not(.onb-ic-avatar):not(.onb-ic-user) > img {
  visibility: hidden;
}
.onb-sb-step:not(.is-done):not(.is-current) .onb-sb-tab-icon:not(.onb-ic-glyph):not(.onb-ic-avatar):not(.onb-ic-user)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(131, 144, 183, 0.4);          /* #8390B7 @ 40% */
  -webkit-mask: var(--tab-mask) center / 24px 24px no-repeat;
  mask: var(--tab-mask) center / 24px 24px no-repeat;
}

/* (Completed tabs used to carry a muted brand-colour outline here; replaced with a
   background fill — see the .is-done rules above and the collapsed section below.) */

/* ---- Tab tooltip — hovering a filled tab previews the data the user entered,
   reusing the (hidden) v4 preview blocks. Panel is darker than the page/rail,
   no line cap. Positioned to the right of the rail by JS. ---- */
.onb-sb-tooltip {
  position: fixed;
  z-index: 200;
  display: none;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #212430;                       /* darker than page #393D53 / rail #313649 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  color: #d4dae7;
  font-family: 'Montserrat', sans-serif;
  pointer-events: none;
}
.onb-sb-tooltip.visible { display: block; }
.onb-sb-tt-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.onb-sb-tt-value { font-size: 13px; font-weight: 500; line-height: 1.5; color: #d4dae7; }
/* Re-enable the cloned preview blocks (globally display:none) and let their text
   wrap fully — the tooltip has no line limit. */
.onb-sb-tooltip .onb-sb-cur-list,
.onb-sb-tooltip .onb-sb-cat-list,
.onb-sb-tooltip .onb-sb-file-list { display: flex !important; margin-top: 0; }
.onb-sb-tooltip .onb-sb-avatar-thumb { display: inline-block !important; margin-top: 0; }
.onb-sb-tooltip .onb-sb-cat-label,
.onb-sb-tooltip .onb-sb-acc-name,
.onb-sb-tooltip .onb-sb-cur-line,
.onb-sb-tooltip .onb-sb-cur-line-others,
.onb-sb-tooltip .onb-sb-file-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  -webkit-line-clamp: none;
}

/* ---- Footer user tab ---- */
.onb-sb-footer { flex: 0 0 auto; padding-top: 8px; }
.onb-sb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 4px 8px;
  margin: 0;
  background: transparent;
  border-radius: 4px;
  overflow: visible;
  box-sizing: border-box;
}
.onb-sb-tab-icon.onb-ic-user { background: #4e5b76; }
.onb-sb-tab-icon.onb-ic-user > img { width: 17px; height: 17px; }
/* Email label — Figma "Subtitle/S Medium": Montserrat Medium 16 / line-height 1.3. */
.onb-sb-user-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: #d4dae7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===================== Collapsed (icon rail) =====================
   Icons never move: every row keeps its left padding in BOTH states, so a tab
   icon sits at the same viewport x whether open (300px) or collapsed (80px).
   Only the panel width animates and the text labels fade + clip in place. */
.onb-sb-brand-name,
.onb-sb-step-title,
.onb-sb-user-label { transition: opacity 0.16s ease; }

.onb-sidebar.is-collapsed .onb-sb-brand-name,
.onb-sidebar.is-collapsed .onb-sb-step-title,
.onb-sidebar.is-collapsed .onb-sb-user-label { opacity: 0; }

/* Toggle overlays the logo and reveals on hover (Figma header Default→Hover). */
.onb-sidebar.is-collapsed .onb-sb-toggle {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  opacity: 0;
  background: #3f435b;
}
.onb-sidebar.is-collapsed .onb-sb-header:hover .onb-sb-toggle { opacity: 1; }
/* Right after a click-to-collapse the cursor is still where the Close-panel icon
   was, so the hover-reveal would flash the expand icon over the logo mid-animation.
   Suppress the reveal until the pointer actually leaves the rail (see JS). */
.onb-sidebar.is-collapsed.is-suppress-toggle .onb-sb-header:hover .onb-sb-toggle { opacity: 0; }

/* Closed tab states. The rail is transparent over the darker app bg, so a completed
   (filled) tab is painted with the OPEN-panel colour #313649 — it reads as a solid
   chip on the transparent rail. Hover/selected stay a step lighter (#3F435B / #494D65)
   so they don't vanish into the page (whose bg is #393D53). Unvisited stay transparent
   (icon only); the current tab keeps its own selected colour. */
.onb-sidebar.is-collapsed .onb-sb-step.is-done:not(.is-current) { background: #313649; }
.onb-sidebar.is-collapsed .onb-sb-step.is-done:hover { background: #3f435b; }
.onb-sidebar.is-collapsed .onb-sb-step.is-current { background: #494d65; }

/* (3) Assistant (bot) messages — drop the avatar and the bubble box; keep
   just the text (title / body / examples), left-aligned. */
.message.bot .bot-avatar { display: none; }
.message.bot .bubble {
  background: none;
  padding: 0;
  border-radius: 0;
  gap: 12px;
}

/* (4) Chat column → centred 800px column in the viewport; bot text left-aligned. */
.chat-messages { max-width: 800px; }
.chat-layout > #chat-messages { max-width: 800px; }

/* (5) Chat input → full-width 800 pill, 64px tall, bigger placeholder. */
.chat-input-pill {
  height: 64px;
  border-radius: 999px;
  padding: 8px 16px 8px 24px;
  background: var(--bg-dark);
  max-width: 800px;
}
.chat-input { font-size: 16px; }
.chat-input::placeholder { color: var(--text-dimmed); }
.chat-input-actions { gap: 16px; margin-left: 16px; }

/* =====================================================================
   v5 — STATE B spacing (normal chat) + STATE A landing (Gemini/ChatGPT).
   Appended last so it wins over the base + redesign rules above.
   ===================================================================== */

/* (B) Normal chat: air at the top from the viewport edge, and a touch more
   breathing room at the bottom (between the last bubble and the input, and
   under the input itself). */
.chat-layout > #chat-messages {
  padding-top: 56px;      /* top air from the edge (was ~4px, felt glued) */
  padding-bottom: 28px;   /* last bubble not glued to the input band */
}
.chat-input-area {
  padding: 18px 20px 22px; /* a little more air under the pill / skip link */
}

/* (A) LANDING — first (Name) step only, before the first answer.
   The question bubble + the chat input are pulled into normal flow and the
   whole group is vertically centred in the viewport (Gemini / ChatGPT style).
   The fixed left rail is untouched. Removed for good on the first answer. */
body.onb-landing .main {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centre the [message + input] group vertically */
  align-items: stretch;
}
/* main-scroll shrinks to its content so the group can centre (not fill). */
body.onb-landing .main-scroll,
body.onb-landing .main.has-sidebar .main-scroll {
  height: auto;
  flex: 0 0 auto;
}
body.onb-landing .chat-layout {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}
body.onb-landing .chat-layout > #chat-messages {
  height: auto;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
}
/* Input leaves its fixed bottom anchor and sits right under the question. */
body.onb-landing .chat-input-area {
  position: static;
  background: none;          /* no bottom gradient mid-screen */
  padding: 20px 20px 0;      /* small gap above the pill, none below */
}
/* Landing only — the assistant text (AI-assistant line, title, workspace line,
   examples) is centred to match the ChatGPT/Gemini-style centred group. In the
   normal chat (state B, class removed) the bot text stays left-aligned. */
body.onb-landing .message.bot .bubble { text-align: center; }

/* ===== Skip link ("Jump straight in") — gated on the Currency step =====
   Hidden on landing + Name/Icon/Data/Currency; revealed only after the base
   currency is confirmed (JS adds body.onb-skip-visible) and stays visible after.
   #btn-skip beats the base .btn-skip{display:block} on specificity. */
#btn-skip { display: none; }
body.onb-skip-visible #btn-skip { display: block; }

/* =====================================================================
   Name-landing rework — assistant pill, "Let's start" eyebrow,
   Examples pinned under the input. Landing state (body.onb-landing) +
   consistent structure in the steps[0] re-entry render.
   ===================================================================== */

/* (3) Assistant "meta" line as a subtle pill, set apart from the question block.
   Slightly darker than the bot bubble (#313649) so it reads as its own chip. */
.assistant-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-dark);
  border-radius: var(--radius-l);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dimmed);
  text-align: left;
  align-self: flex-start;   /* hug content inside the flex-column bubble */
  margin-bottom: 16px;      /* + the bubble's 10px flex gap ≈ 26px to the eyebrow */
}
.assistant-pill-icon {
  flex: 0 0 auto;
  color: var(--blue-primary);   /* small sparkle accent */
}
/* Landing centres the bubble content — centre the hugging pill too. */
body.onb-landing .message.bot .assistant-pill { align-self: center; }

/* (2) "Let's start" kicker/eyebrow above the title — signals the first step. */
.bubble-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-primary);   /* subtle accent */
}

/* Examples inside the bubble (steps[0] re-entry only). */
.bubble-examples {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 12px;
}

/* (1) Examples pinned UNDER the input, landing only. Rendered as a direct child
   of .main after #chat-input-area, so it joins the vertically-centred group.
   Hidden the moment the landing collapses into the normal chat (state B). */
#landing-examples-bar {
  display: none;
}
body.onb-landing #landing-examples-bar {
  display: block;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  padding: 14px 20px 0;
}

/* =====================================================================
   CHAT STAYS CENTRED — the rail is position:fixed (out of flow), so the chat
   column and input pill remain centred in the FULL viewport whether the rail is
   collapsed (80px) or expanded on hover (300px). The rail simply floats over the
   left edge and never shifts the content. (The old body.menu-expanded re-centre
   was removed on request.)
   ===================================================================== */

/* =====================================================================
   NEW PROGRESSION MODEL — inline Continue + in-text Skip links.
   Replaces the removed bottom-right "Skip … / Continue →" pair on the
   Icon, Currency and category (Revenue/Costs/Accounts/Debts) bubbles.
   Advancement now happens three ways at once: (1) clicking an option,
   (2) the chat send-arrow / Enter, and (3) this inline Continue button.
   Self-contained block; reuses existing button/colour tokens only.
   ===================================================================== */

/* Inline action row — lives inside the bubble body, left-aligned (never
   bottom-right). Placed last in the file so it overrides the flex-end /
   space-between alignment of .about-actions / .currency-actions /
   .manual-actions-right when combined on the same element. */
.onb-inline-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* The inline Continue keeps the primary look of its base class
   (.action-btn.primary or .manual-combined-next-btn); just pin it left. */
.onb-inline-continue {
  align-self: flex-start;
}

/* In-text Skip link — reads as a link, not a button, wherever it sits. */
.onb-skip-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blue-primary);
  cursor: pointer;
  text-decoration: none;
}
.onb-skip-inline:hover { text-decoration: underline; }

/* Icon step: the "skip" word inside "Feel free to skip…". The base
   .skip-text .skip-link rule mutes it to plain copy — re-enable the link. */
.skip-text .onb-skip-inline {
  color: var(--blue-primary);
  cursor: pointer;
}
.skip-text .onb-skip-inline:hover { text-decoration: underline; }

/* Category bubbles: "Nothing here? Skip Revenue" — muted lead + link,
   matching the previous grey Skip treatment (#8390b7 / #b8c0d5). */
.onb-skip-note {
  font-size: 13px;
  color: var(--text-muted);
}
.onb-skip-note .onb-skip-inline {
  padding: 0;
  color: #8390b7;
  font-weight: 400;
}
.onb-skip-note .onb-skip-inline:hover { color: #b8c0d5; text-decoration: underline; }

/* Skip folded into the category intro copy — reads as a plain in-text link
   ("… Nothing to add here? Skip this step."), not a padded button. */
.manual-body .manual-btn-skip {
  padding: 0;
  font: inherit;
  color: var(--blue-primary);
}
.manual-body .manual-btn-skip:hover { color: var(--blue-primary); text-decoration: underline; }

/* =====================================================================
   STEP 6 — QUICK-PICK CHIPS INSIDE THE CHAT PILL (category steps only).
   The in-bubble "Add your first account" field is gone: accounts are typed
   into the bottom chat input (text = add, empty send = continue), and this
   bar offers one-tap source prefills from the current type's quickPicks.
   The bar is the SECOND ROW of .chat-input-pill: row 1 = input + icons
   (unchanged), row 2 = chips, all inside the same rounded container.
   `.has-catbar` on the pill switches it to the wrapped two-row layout;
   without it (bar hidden / non-category steps / Name landing) the pill is
   its normal single 64px row. Used chips dim in place (no reflow) and
   re-light if the account is removed.
   ===================================================================== */
.chat-input-pill.has-catbar {
  flex-wrap: wrap;
  height: auto;
  border-radius: 28px;          /* 999px stadium would over-round a 2-row box */
  padding-bottom: 12px;
}
/* Keep row 1 at its usual 64px optical height (48px line inside 8px pads). */
.chat-input-pill.has-catbar .chat-input { height: 48px; }
#cat-quickpicks-bar {
  flex: 1 0 100%;               /* force onto its own (second) flex line */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 2px;
  padding: 10px 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);   /* delicate divider */
}
#cat-quickpicks-bar[hidden] { display: none; }
.cat-quickpick-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-dimmed);
  padding: 5px 12px;
  border-radius: 999px;   /* pill chips echo the rounded container */
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.2s ease;
}
.cat-quickpick-chip:hover { background: rgba(255, 255, 255, 0.13); color: #f5f6fa; }
.cat-quickpick-chip.is-used,
.cat-quickpick-chip:disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
/* Taller two-row pill → reserve more room under the scroll area so the last
   bubble never slides beneath the input band. */
body.catbar-on { --input-h: 190px; }

/* Category bubble title as a QUESTION — small type badge (icon + label)
   sits as an eyebrow ABOVE the question headline instead of inline after
   an em-dash. Sidebar labels are untouched. */
.manual-combined-bubble .manual-title-question {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.manual-title-question .manual-type-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  align-items: center;
  margin-left: 0;
}
.manual-combined-bubble .manual-title-question .manual-type-eyebrow svg {
  width: 15px;
  transform: none;
}

/* Duplicate-name feedback when the chat input adds accounts on STEP 6 —
   same shake the old inline field used. */
.chat-input.is-error { animation: combinedShake 0.4s; }

/* ===== Add-account chat reply + Revenue "owes you" chat question (STEP 6)
   Adding an account is a SHORT chat exchange: the user's message echoes
   the name (chat-originated adds) and the assistant confirms with a
   one-liner. For Revenue the confirm ASKS right in the reply — «"{name}"
   added — want to track how much it owes you?» with Yes / Not now pills
   underneath (.owes-chat-area). Yes swaps the pills (.is-form) for a
   currency + amount mini-form in the same reply; Save / Not now collapse
   the reply into a normal-colour resolution line. An unanswered question
   overtaken by a newer add / Done / Skip / empty-send / nav-away / row
   delete greys out (.is-muted) and goes inert — it stays in the history,
   never blocking anything. */
.owes-chat-msg .owes-chat-line b { color: #f5f6fa; font-weight: 600; }

/* ONE line: question text on the LEFT, Yes / Not now (and the mini-form
   after Yes) flushed to the RIGHT of the same row — like the original
   full-width strip. Selector carries .message.bot so it outweighs the
   base bubble rule. Wraps gracefully on narrow widths. */
.message.bot.owes-chat-msg .bubble {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  max-width: none;
}
.message.bot.owes-chat-msg .owes-chat-line { flex: 0 1 auto; min-width: 0; }

/* Pills / mini-form — pushed to the right edge of the row. */
.owes-chat-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.owes-chat-area .owes-amt-input { width: 120px; }

/* Muted (unanswered, overtaken) question — grey text, inert controls;
   it stays in the history as a skipped beat. */
.owes-chat-msg.is-muted .bubble,
.owes-chat-msg.is-muted .owes-chat-line b { color: var(--text-muted); }
.owes-chat-msg.is-muted .owes-chip,
.owes-chat-msg.is-muted .owes-cur-input,
.owes-chat-msg.is-muted .owes-amt-input {
  opacity: 0.5;
  pointer-events: none;
}
.owes-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-dimmed);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.owes-chip:hover { background: rgba(255, 255, 255, 0.13); color: #f5f6fa; }
.owes-chip-yes { border-color: rgba(42, 167, 238, 0.55); color: #7cc7f2; }
.owes-chip-yes:hover { background: rgba(42, 167, 238, 0.15); color: #a8dcfa; }
.owes-cur-input,
.owes-amt-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f5f6fa;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 5px 9px;
  outline: none;
  transition: border-color 0.15s ease;
}
.owes-cur-input::placeholder,
.owes-amt-input::placeholder { color: #8390b7; }
.owes-cur-input { width: 64px; text-transform: uppercase; }
.owes-amt-input { width: 110px; -moz-appearance: textfield; appearance: textfield; }
.owes-amt-input::-webkit-outer-spin-button,
.owes-amt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.owes-cur-input:focus,
.owes-amt-input:focus { border-color: #2aa7ee; }
.owes-cur-input.is-error,
.owes-amt-input.is-error { border-color: #FD5B6E; animation: combinedShake 0.4s; }

/* Currency COMBOBOX in the chat-reply mini-form. The options panel does
   NOT float inside the bubble: JS appends it to <body> (.is-fixed,
   position:fixed) and anchors it to the input's rect — flipping UPWARD
   when the space below runs out (usual: the reply sits near the bottom of
   the chat, above the input pill). Tokens mirror the Currency-step
   dropdown (UI Kit node 3377:1034): panel #3f435b, row hover #2d3141,
   active code #2aa7ee. */
.owes-cur-combo { position: relative; display: inline-flex; }
/* Caret — signals the currency field is a dropdown. pointer-events:none
   lets the click fall through to the input, which opens the list. */
.owes-cur-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--text-muted);
  pointer-events: none;
}
.owes-cur-combo .owes-cur-input { width: 82px; padding-right: 24px; }
.owes-cur-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 216px;
  max-height: 240px;           /* long catalogue → inner scroll */
  overflow-y: auto;
  padding: 6px 0;
  background: #3f435b;         /* onboarding/currency-dropdown/dropdown-bg */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-s);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.owes-cur-dropdown[hidden] { display: none; }
/* Body-level variant — escapes the board's overflow clipping; top/bottom/
   left/max-height are set inline by placeDd() from the input's rect. */
.owes-cur-dropdown.is-fixed { position: fixed; z-index: 300; }
.owes-cur-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.owes-cur-opt:hover,
.owes-cur-opt.is-active { background: #2d3141; }
.owes-cur-opt:hover .owes-cur-opt-code,
.owes-cur-opt.is-active .owes-cur-opt-code { color: #2aa7ee; }
.owes-cur-opt-code {
  color: var(--text-white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.12s;
}
.owes-cur-opt-name {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Custom `Use "XXX"` row — tinted like the Yes-chip so it reads as an action. */
.owes-cur-opt-custom .owes-cur-opt-code { color: #7cc7f2; }

/* =====================================================================
   v5.2 — STEP 6 CATEGORIES PANEL (#cat-top-panel) — PINNED AT THE TOP
   The per-type category board lives in its own block stuck to the TOP
   edge of the chat zone: the FIRST child of #chat-messages (the chat
   scroller), position:sticky — the conversation scrolls UNDERNEATH it
   (same centred 800px column as the bubbles — the left rail is never
   touched). While the panel is visible the scroller drops its 56px top
   air via .has-cat-panel (below) so the panel hugs the top edge. JS
   shows the panel with the first account of the current type and hides
   it between types (see ensureCatTopPanel / mountCatTopPanelBoard).
   ===================================================================== */
.cat-top-panel {
  position: sticky;
  top: 0;
  z-index: 20;                        /* over the bubbles scrolling under it */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 800px;                   /* match the chat column */
  margin: 0 auto;
  padding: 20px 18px 22px;
  background: var(--bg-bubble-bot);   /* the raised panel tone the board was designed on */
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0 0 16px 16px;       /* rounded bottom; the top edge hugs the viewport */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);   /* soft wide glow cast DOWNWARD */
  /* Slide-down reveal — drops in from the top edge (paired with .is-open
     below; display gated by [hidden]). */
  opacity: 0;
  transform: translateY(-14px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.cat-top-panel.is-open { opacity: 1; transform: translateY(0); }
/* `display:flex` above would defeat the UA [hidden] rule — re-assert it. */
.cat-top-panel[hidden] { display: none !important; }
/* While the panel is up, the scroller's 56px top air would hold it away from
   the edge — drop it (JS toggles the class together with the panel). */
.chat-layout > #chat-messages.has-cat-panel { padding-top: 0; }

/* Head — "Categories" title + one-line muted explainer on the left, "?"
   helper on the right. One flex row: the note flexes and ellipsizes, so
   narrow widths squeeze it instead of wrapping the helper away. (The
   "Done with {Type} →" button lives in the FOOT row below the board.) */
.cat-top-panel-head {
  position: relative;                 /* anchors the help popover */
  display: flex;
  align-items: center;
  gap: 10px;
}
.cat-top-panel-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-white);
}
.cat-top-panel-title svg,
.cat-top-panel-title img { flex: 0 0 auto; display: block; }
.cat-top-panel-note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Foot — bottom row of the panel, under the board: the "Done with {Type} →"
   continue pinned to the RIGHT edge. */
.cat-top-panel-foot {
  display: flex;
  justify-content: flex-end;
}
/* Panel continue — compact primary (same family as .manual-combined-next-btn,
   34px). Advances the CURRENT type via attemptContinue. */
.cat-top-panel-done {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #2aa7ee;
  background: #2aa7ee;
  color: #ffffff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}
.cat-top-panel-done:hover { background: #1b96dd; border-color: #1b96dd; }
.cat-top-panel-done:active { transform: scale(0.98); }
.cat-top-panel-help {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(176, 185, 208, 0.4);
  background: transparent;
  color: var(--text-dimmed);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.cat-top-panel-help:hover,
.cat-top-panel-help[aria-expanded="true"] {
  color: var(--text-white);
  border-color: rgba(176, 185, 208, 0.7);
  background: rgba(176, 185, 208, 0.1);
}

/* "?" popover — prototype help stub. The panel is pinned at the TOP of the
   screen, so the popover opens DOWNWARD — floats under the head (over the
   board rows), right-aligned; any click outside closes it (wired in
   ensureCatTopPanel). */
.cat-top-panel-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;                        /* over the board rows below (incl. their tooltips) */
  width: 320px;
  max-width: 90%;
  padding: 12px 14px;
  background: #3f435b;                /* same floating-panel tone as the currency dropdown */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-s);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dimmed);
}
.cat-top-panel-popover[hidden] { display: none; }

/* Board slot — a tall board scrolls INSIDE the panel, so panel + pill never
   swallow the viewport and the conversation above stays usable. */
.cat-top-panel-board {
  max-height: min(44vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 185, 208, 0.28) transparent;
}
.cat-top-panel-board::-webkit-scrollbar { width: 6px; }
.cat-top-panel-board::-webkit-scrollbar-track { background: transparent; }
.cat-top-panel-board::-webkit-scrollbar-thumb {
  background: rgba(176, 185, 208, 0.28);
  border-radius: 999px;
}

/* The 3-up folder grid was scoped to the bubble variants
   (.manual-combined-bubble.is-cards/.is-withfiles) — re-pin it for the board's
   new home. Base .manual-combined-cols (2-up) still supplies display:grid. */
.cat-top-panel .manual-combined-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .cat-top-panel .manual-combined-cols { grid-template-columns: 1fr; }
}

/* =====================================================================
   Add-attention: a freshly USER-added account row slides in, and its
   category card pulses once — the eye lands on WHERE the account went.
   (Restore/prefill adds don't animate — addRow gets no `animate` flag.)
   Typed / chip adds are preceded by the GHOST FLIGHT below: a small pill
   carries the name from the chat input area up into the card, then this
   same landing runs on arrival.
   ===================================================================== */
/* Ghost flight pill (flyAccountGhost in app.js positions + animates it via
   WAAPI). Fixed and above everything; pointer-events none so typing the
   next name is never blocked while a ghost is in the air. */
.acc-fly-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  max-width: 240px;
  padding: 5px 12px;
  border-radius: 999px;        /* pill — echoes the quick-pick chips */
  background: #3d4356;         /* chip tone, solid so it reads over the chat */
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f5f6fa;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
}
/* The real row stays invisible while its ghost is in the air; landRow()
   drops the class the moment the ghost arrives and .is-landing takes over. */
.manual-group-acc-row.is-incoming { opacity: 0; }

.manual-group-acc-row.is-landing {
  animation: accRowLand 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes accRowLand {
  0%   { opacity: 0; transform: translateY(-6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
.manual-group-col.is-receiving {
  animation: catColPulse 0.9s ease-out;
}
@keyframes catColPulse {
  0%   { box-shadow: inset 0 0 0 1px rgba(42, 167, 238, 0.4), 0 0 0 3px rgba(42, 167, 238, 0.1); }
  100% { box-shadow: inset 0 0 0 1px rgba(42, 167, 238, 0), 0 0 0 0 rgba(42, 167, 238, 0); }
}