/* A247 PALETTE matched from screenshot:
     - Pastel gradient bg (pink → lavender → cream)
     - Deep navy ink #0d1238
     - Brand gradient: orange → pink → purple → blue
     v244.1 archive — light-mode colours (app is dark-only now; restore here if
     light mode is ever needed again):
       --bg-card:#ffffff; --bg-soft:#f4eef5; --bg-bubble:#eee4f0;
       --ink:#0d1238; --ink-2:#4a4f6e; --ink-3:#8a8ea8; --line:#e6dde8;
       --good:#16a34a; --good-soft:#e7f7ec; --warn:#c97a18; --warn-soft:#fbedd6;
       --bad:#c73a5e; --bad-soft:#fae0e7;
       --shadow-sm:0 1px 2px rgba(13,18,56,0.04);
       --shadow-md:0 6px 20px rgba(13,18,56,0.08),0 1px 3px rgba(13,18,56,0.04);
       --shadow-lg:0 20px 50px -10px rgba(13,18,56,0.18);
  */
  :root {
    --bg-card: #ffffff;
    --bg-soft: #f4eef5;
    --bg-bubble: #eee4f0;
    --ink: #0d1238;
    --ink-2: #4a4f6e;
    --ink-3: #8a8ea8;
    --line: #e6dde8;
    --accent: #d56fa8;
    --accent-orange: #f59e6b;
    --accent-purple: #7e6fd4;
    --accent-soft: #fae5ef;
    --grad-brand: linear-gradient(95deg, #f59e6b 0%, #e879a8 35%, #9d6dde 70%, #5b6fd4 100%);
    --grad-cta: linear-gradient(95deg, #f59e6b 0%, #d56fa8 50%, #7e6fd4 100%);
    --grad-logo: linear-gradient(135deg, #f59e6b 0%, #d56fa8 50%, #7e6fd4 100%);
    --good: #16a34a;
    --good-soft: #e7f7ec;
    --warn: #c97a18;
    --warn-soft: #fbedd6;
    --bad: #c73a5e;
    --bad-soft: #fae0e7;
    --shadow-sm: 0 1px 2px rgba(13,18,56,0.04);
    --shadow-md: 0 6px 20px rgba(13,18,56,0.08), 0 1px 3px rgba(13,18,56,0.04);
    --shadow-lg: 0 20px 50px -10px rgba(13,18,56,0.18);
    /* v229.39 — standard corner-radius scale (for a consistent "system" feel).
       Legacy ad-hoc radii are being migrated to these over time. */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-pill: 999px;
    --sans: 'Heebo', 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--sans);
    color: var(--ink);
    /* v226.9a — broken white (off-white). Less yellow than cream, more
       neutral. Should read as "almost white, just barely warm". */
    background: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* v229.39 — tabular (equal-width) digits app-wide. Numbers in a data app
       align cleanly in columns and totals — a subtle high-end polish. Only
       affects digit glyphs; Hebrew/Latin text is untouched. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    letter-spacing: -0.005em;
  }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input { font-family: inherit; }

  /* Accessibility (item 1) — a single visible keyboard-focus ring for every
     interactive control. Only shows for keyboard/AT users (:focus-visible), so
     mouse/touch taps stay clean. Was missing entirely before. */
  :focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; border-radius: 4px; }
  /* Accessibility (item 2) — honour the OS "reduce motion" setting (vestibular
     safety). Neutralises the looping animations (heartbeat FAB, bell nudge,
     bulb glow, halo ripples) and long transitions without changing layout. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .caption {
    font-size: 13px;
    color: var(--ink-2);
    letter-spacing: -0.01em;
  }
  .caption strong {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
  }

  /* iPhone frame */
  .iphone {
    width: 390px;
    height: 844px;
    background: #1d1d1f;
    border-radius: 60px;
    padding: 14px 14px 0 14px;
    position: relative;
    box-shadow:
      0 0 0 2px #2a2a2c,
      0 0 0 8px #404044,
      0 30px 60px -15px rgba(13,18,56,0.3),
      0 50px 100px -30px rgba(13,18,56,0.2);
  }
  .iphone-side { position: absolute; background: #404044; border-radius: 2px 0 0 2px; }
  .iphone-side.s1 { left: -10px; top: 110px; width: 4px; height: 30px; }
  .iphone-side.s2 { left: -10px; top: 165px; width: 4px; height: 60px; }
  .iphone-side.s3 { left: -10px; top: 245px; width: 4px; height: 60px; }
  .iphone-side.s4 { right: -10px; top: 200px; width: 4px; height: 100px; border-radius: 0 2px 2px 0; }

  .screen {
    width: 100%;
    height: 100%;
    /* v226.9a — broken white, same as body. */
    background: #FFFFFF;
    border-radius: 48px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .island {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 36px;
    background: #000;
    border-radius: 20px;
    z-index: 100;
  }

  .statusbar {
    height: 54px;
    padding: 14px 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
  }
  .statusbar .icons { display: flex; align-items: center; gap: 5px; }
  .statusbar svg { width: 16px; height: 12px; }
  .battery { width: 26px; height: 12px; border: 1px solid var(--ink); border-radius: 3px; position: relative; padding: 1px; }
  .battery::after { content:''; position:absolute; right:-3px; top:3px; width:2px; height:4px; background:var(--ink); border-radius:0 1px 1px 0; }
  .battery-fill { height: 100%; width: 80%; background: var(--ink); border-radius: 1px; }

  /* Header */
  .app-header {
    padding: 14px 16px 14px;
    flex-shrink: 0;
    /* v226.9a — same off-white as the composer bottom bar, slightly darker
       than the main bg so the header reads as a distinct strip without
       needing a 1px line. No border. */
    background: #FAF8F2;
    border-bottom: none;
    position: relative;
    z-index: 5;
    transition: padding 0.25s ease;
  }
  /* Compact state — applied once the chat scrolls down. The brand mark and
     headline shrink to leave more vertical space for content; the LIFT pill
     stays full-size so the active business is always visible. */
  .app-header.compact {
    padding: 6px 16px 8px;
  }
  .app-header.compact .brand-mark {
    width: 22px; height: 22px;
    border-radius: 7px;
  }
  .app-header.compact .brand-mark::before {
    font-size: 15px;
  }
  .app-header.compact .brand-mark::after {
    width: 5px; height: 5px;
    bottom: 2px; right: 2px;
  }
  .app-header.compact .header-title h1 {
    font-size: 14px;
  }
  .app-header.compact .header-title { gap: 6px; }
  .app-header.compact .brand-cluster { gap: 6px; }
  /* Smooth out the transition for the pieces that change size */
  .brand-mark,
  .brand-mark::before,
  .header-title h1,
  .header-title { transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease, gap 0.25s ease; }
  .biz-pill {
    display: flex; align-items: center; gap: 6px;
    padding: 0;
    border: none;
    background: none;
    flex-shrink: 0;
    pointer-events: none;
  }
  .biz-pill .biz-logo {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--grad-logo);
    color: white;
    display: grid; place-items: center;
    font-size: 9px; font-weight: 700;
  }
  /* The current business's logo/wordmark. NEUTRAL by default — 01-lift-data.js sets the
     per-tenant logo via /api/business-logo at load (LIFT via a server-side fallback), so the
     pill never flashes one tenant's brand to another. */
  .biz-pill .biz-logo-mark {
    display: inline-block;
    height: 26px;
    width: 80px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
  }
  .biz-pill .biz-name { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
  .biz-pill svg { width: 10px; height: 10px; color: var(--ink-3); transition: transform 0.2s ease; }

  /* Branch picker dropdown — positioned relative to its wrap, anchored to the
     pill's edge. Opens downward with a fade+slide animation. */
  .biz-pill-wrap {
    position: relative;
  }
  .biz-pill[aria-expanded="true"] .biz-chev {
    transform: rotate(180deg);
  }
  .biz-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: white;
    border: 1px solid rgba(13,18,56,0.08);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 20;
    animation: bizDropIn 0.18s cubic-bezier(0.34, 1.2, 0.64, 1);
    transform-origin: top center;
  }
  .biz-dropdown[hidden] { display: none; }
  @keyframes bizDropIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .biz-dropdown-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
  }
  .biz-dropdown-head .biz-count {
    background: rgba(13,18,56,0.06);
    color: var(--ink-2);
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .biz-divider {
    height: 1px;
    background: rgba(13,18,56,0.06);
    margin: 4px 6px;
  }
  .biz-branch {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    text-align: start;
    transition: background 0.12s;
  }
  .biz-branch:hover, .biz-branch:active {
    background: rgba(13,18,56,0.04);
  }
  .biz-branch.active {
    background: rgba(213,111,168,0.08);
  }
  .branch-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  .biz-branch.active .branch-dot {
    background: var(--grad-cta);
    box-shadow: 0 0 0 3px rgba(213,111,168,0.18);
  }
  .branch-name {
    flex: 1;
    font-weight: 500;
    color: var(--ink);
  }
  .biz-branch.active .branch-name {
    font-weight: 700;
  }
  .branch-meta {
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 500;
  }

  /* Subtle highlight that plays when a data point changes (e.g. when the
     user switches branches and numbers refresh). 0.6s, fades out — soft. */
  @keyframes valueFlash {
    0%   { background-color: rgba(245,158,107,0); }
    20%  { background-color: rgba(245,158,107,0.22); }
    100% { background-color: rgba(245,158,107,0); }
  }
  .value-flash {
    animation: valueFlash 0.7s ease-out;
    border-radius: 4px;
  }

  /* v229.3 — header is a 2-side layout: LIFT pill at one edge (right in
     RTL), hdr-buttons cluster at the other (left in RTL). The empty
     center space is fine. */
  .header-title { display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; }
  .header-title > .hdr-buttons { margin-inline-start: auto; }

  /* v229.5 — a247 Fusion footer "stamp". position: fixed so it anchors
     to the actual viewport bottom (the previous absolute relative to
     .screen wasn't reliably reaching the viewport edge on mobile).
     10px from the bottom. Height 12px (+10% from previous 11px). */
  .footer-logo {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0.55;
  }
  .footer-logo-img {
    height: 12px;
    width: auto;
    display: block;
  }
  html.theme-dark .footer-logo { opacity: 0.45; }
  .brand-cluster {
    /* v226.0e — gap 8 → 13 to give the bell breathing room from the
       (now larger, 28px) brand-mark. Bell sat too close before. */
    display: flex; align-items: center; gap: 13px;
    margin-inline-start: auto;
  }
  /* v111: header bell — re-enable push anytime */
  .hdr-bell {
    /* v226.0c — reduced 25% per user; was 36x36 / 11 radius / 19px icon. */
    width: 27px; height: 27px; border-radius: 8px;
    /* v113: bold gold bell so a not-subscribed user notices it */
    background: linear-gradient(135deg, #ffd24a, #f7a52b);
    border: none;
    display: grid; place-items: center;
    color: #5a3c00; position: relative; flex-shrink: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    /* Glow scaled with bell. */
    box-shadow: 0 3px 9px rgba(247,165,43,0.45);
    transition: transform 0.12s;
    animation: bellNudge 2.6s ease-in-out infinite;
  }
  @keyframes bellNudge {
    0%, 88%, 100% { transform: rotate(0); }
    91% { transform: rotate(-13deg); }
    94% { transform: rotate(10deg); }
    97% { transform: rotate(-5deg); }
  }
  .hdr-bell[hidden] { display: none; }
  .hdr-bell svg { width: 14px; height: 14px; }
  .hdr-bell:active { transform: scale(0.9); }
  /* Accessibility (item 4) — invisible hit-area so the small 27px bell still
     meets the ~44px tap-target minimum, without enlarging the visual. */
  .hdr-bell::before { content: ""; position: absolute; inset: -8px; }
  .hdr-bell .hdr-bell-dot {
    /* v226.0c — scaled to match smaller bell. */
    position: absolute; top: -2px; inset-inline-end: -2px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #e8344e;
    border: 1.5px solid #16161e;
  }
  .brand-mark {
    /* v229.2 — the white rounded-square card made the logo look like a
       clickable app icon (button). User asked for a flat logo. Card+bg
       removed; just the gradient "a" sits directly on the header. The
       small live dot stays for branding consistency. */
    width: 28px; height: 28px;
    border-radius: 0;
    background: transparent;
    display: grid; place-items: center;
    position: relative;
    flex-shrink: 0;
    box-shadow: none;
  }
  .brand-mark::before {
    content: 'a';
    font-size: 19px;
    font-weight: 800;
    background: var(--grad-logo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-top: -2px;
    letter-spacing: -0.04em;
  }
  /* v226.0c — orange "live" dot: the static ring now matches the header
     bg (dark) so it blends into the tile cleanly. Pulse animation keeps
     its outward orange glow but the inner static ring is dark.
     Slightly bigger (6→7) so it reads on the smaller bell next to it. */
  .brand-mark::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    background: var(--accent-orange);
    border-radius: 50%;
    bottom: 0; right: -1px;
    /* v229.2 — no more white outline around the dot (would look weird
       on transparent bg). Subtle outward pulse only. */
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,107,0.75); }
    70%  { box-shadow: 0 0 0 6px rgba(245,158,107,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,107,0); }
  }
  .header-title h1 {
    font-size: 17px; font-weight: 700;
    letter-spacing: -0.03em; line-height: 1;
    color: var(--ink);
    white-space: nowrap;
  }
  .header-title h1 .brand-grad {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Pulse strip */
  .pulse-strip {
    flex-shrink: 0;
    padding: 14px 18px 16px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(13,18,56,0.06);
    overflow: hidden;
    /* Smooth collapse when all signals have been dismissed */
    transition:
      max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.48s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.33s ease 0.05s,
      border-width 0.48s ease;
    max-height: 200px;
  }
  .pulse-strip.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-bottom-width: 0;
    pointer-events: none;
  }
  .strip-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--ink-2);
    font-weight: 700; margin-bottom: 11px;
  }
  .strip-label .heartbeat-dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }
  .strip-label .count {
    font-size: 10px;
    background: var(--grad-cta);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
  }

  .strip-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -18px;
    padding: 4px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Fade the leftmost ~30px so cards visibly disappear off the edge —
       a clear "there's more, scroll this way" hint. */
    -webkit-mask-image: linear-gradient(to left, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to left, black calc(100% - 32px), transparent 100%);
  }
  .strip-scroll::-webkit-scrollbar { display: none; }

  .strip-card {
    flex-shrink: 0;
    width: 220px;
    background: white;
    border: 1px solid rgba(13,18,56,0.06);
    border-radius: 14px;
    padding: 12px 13px;
    /* Per-card right margin replaces the parent's flex `gap` so the spacing
       can animate together with width/padding when the card collapses.
       Inline-end so it works correctly in RTL (visual left side of each card). */
    margin-inline-end: 10px;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* Transition the geometric properties so neighbouring cards slide rather
       than jump when one of them collapses. */
    transition:
      width 0.48s cubic-bezier(0.4, 0, 0.2, 1),
      margin 0.48s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.48s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.33s ease,
      transform 0.33s ease;
  }
  .strip-card:last-child { margin-inline-end: 0; }
  .strip-close {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--ink-3);
    font-size: 18px;
    line-height: 1;
    background: transparent;
    z-index: 2;
    transition: background 0.15s, color 0.15s;
  }
  .strip-close::before { content: ""; position: absolute; inset: -11px; }
  .strip-close:hover, .strip-close:active {
    background: rgba(13,18,56,0.06);
    color: var(--ink);
  }
  .strip-card.score .strip-close { color: var(--ink-2); }
  .strip-card.score .strip-close:hover, .strip-card.score .strip-close:active {
    background: rgba(13,18,56,0.08);
    color: var(--ink);
  }
  /* Dismissal: collapse width, padding, and the trailing margin all together,
     while fading and shrinking the card. The base transition (above) gives
     this a smooth interpolation; dropping pointer events lets the touch end
     immediately while the animation finishes. */
  .strip-card.dismissing {
    opacity: 0;
    transform: scale(0.88);
    width: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    margin-inline-end: 0;
    pointer-events: none;
  }
  .strip-card::before {
    content:''; position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
  }
  .strip-card.warn::before { background: var(--warn); }
  .strip-card.good::before { background: var(--good); }
  .strip-card.score {
    background: linear-gradient(135deg, rgba(245,158,107,0.10) 0%, rgba(213,111,168,0.10) 50%, rgba(126,111,212,0.10) 100%);
    color: var(--ink);
    border-color: rgba(213,111,168,0.18);
    width: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .strip-card.score::before { background: var(--grad-cta); }

  .strip-cat {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 5px;
  }
  .strip-card.warn .strip-cat { color: var(--warn); }
  .strip-card.good .strip-cat { color: var(--good); }
  .strip-card.score .strip-cat {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0;
    text-align: center;
  }

  .strip-title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
    color: var(--ink);
  }
  .strip-card.score .strip-title { color: var(--ink); }
  .strip-meta { font-size: 10.5px; color: var(--ink-3); }
  .strip-card.score .strip-meta { color: var(--ink-3); }

  .score-num {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
  }
  .score-num .score-pct {
    font-size: 22px;
    font-weight: 700;
    -webkit-text-fill-color: initial;
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-inline-start: 1px;
  }

  /* === Floating signals button + popup ===
     A circular FAB at the top-end of the chat area, like the unread-count
     badge in WhatsApp. Tapping it opens a modal cycling through pending
     signals. The button hides itself once all signals are dismissed. */
  /* v219: Header buttons absolute-centered on device viewport */
  .header-title { position: relative; }
  /* v229.3 — was absolutely-centered. Now a normal flex child anchored
     to the LEFT edge of the header (in RTL: end side). Settings is the
     LAST child in DOM, so it appears at the LEFT edge — signals-fab and
     lc-pill sit to its right (toward the LIFT pill). */
  .hdr-buttons {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 4;
  }
  /* v219: brand-mark (a-logo) and Pulse text stacked vertically
     v226.1a — the a-tile is now the centered element; the "Pulse" word
     is absolutely positioned below so it doesn't shift the visual
     center upward. Net result: the a-tile sits in the true vertical
     middle of the header, "Pulse" hangs as a label underneath. */
  .brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;     /* anchor for absolute h1 below */
  }
  .brand-stack .brand-mark {
    /* v226.4c — back to a card around the "a" + small dot, but flat. */
    width: 32px; height: 32px;
    border-radius: 10px;
    position: relative;
  }
  .brand-stack .brand-mark::before {
    font-size: 23px;
    line-height: 1;
    margin-top: -2px;
  }
  .brand-stack h1 {
    position: absolute;
    top: calc(100% + 2px);  /* hang just below the a-letter */
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  /* v226.4c — small flat dot in the corner of the a-card. No pulsing
     glow ring, no 3D shadow ring — just a clean colored dot. */
  .brand-stack .brand-mark::after {
    width: 6px; height: 6px;
    bottom: 2px; right: 2px;
    box-shadow: none;
    animation: none;
  }

  /* v214/v218: signals-fab is a LIGHTBULB. Glows yellow when there are unread
     insights; soft gray when nothing's pending. Now lives in header (no sticky). */
  .signals-fab {
    position: relative;          /* v218: no longer sticky */
    width: 34px; height: 34px;   /* v218: smaller for header */
    border-radius: 50%;
    background: #E8E8EC;
    color: #9CA0A6;
    display: grid; place-items: center;
    /* v228.10 — base shadow was `0 2px 6px` (offset 2px down), which
       created the "leaking" drop below the lightbulb that the user kept
       seeing. Centered now. */
    box-shadow: 0 0 6px rgba(13,18,56,0.10);
    z-index: 6;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, opacity 0.2s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }
  /* Lit state: when there ARE unread insights, fab gets the bright bulb look.
     We use absence of .empty as the signal — JS toggles .empty when queue is 0. */
  /* v228.8 — both shadows centered (0 0). The previous `0 4px 14px`
     created an offset that looked like a drop / "leak" below the bulb. */
  .signals-fab:not(.empty) {
    background: linear-gradient(135deg, #FFE082 0%, #FFC107 100%);
    color: #5D4037;
    box-shadow: 0 0 18px rgba(255,193,7,0.45), 0 0 14px rgba(255,193,7,0.40);
    animation: bulbGlow 2.6s ease-in-out infinite;
  }
  @keyframes bulbGlow {
    0%, 100% { box-shadow: 0 0 18px rgba(255,193,7,0.45), 0 0 14px rgba(255,193,7,0.40); }
    50%      { box-shadow: 0 0 26px rgba(255,193,7,0.65), 0 0 18px rgba(255,193,7,0.55); }
  }
  .signals-fab:hover, .signals-fab:active { transform: scale(1.05); }
  .signals-fab svg { width: 16px; height: 16px; }
  .signals-fab-badge {
    position: absolute;
    top: -4px; inset-inline-start: -4px;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 100px;
    background: var(--ink);
    color: white;
    font-size: 10.5px;
    font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(13,18,56,0.2);
  }
  .signals-fab-badge[hidden] { display: none; }
  .signals-fab[hidden] { display: none; }
  .signals-fab.popping {
    animation: fabPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes fabPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
  }
  .signals-fab.fading-out {
    transform: scale(0.5);
    opacity: 0;
    pointer-events: none;
  }

  /* v214: When .empty class is on (no unreads), use muted off-bulb look.
     Defined in the base .signals-fab rule above; this is just hover. */
  .signals-fab.empty:hover, .signals-fab.empty:active {
    background: #DFDFE4;
  }
  /* v226.8 — when there are no insights, hide the lightbulb entirely. */
  .signals-fab.empty { display: none !important; }
  /* v214: NEUTRALIZE the old "fab-centered" behavior. The FAB should always
     stay in its sticky top-right corner, not float center. The numbers are
     now the main attraction. */
  body.fab-centered .signals-fab {
    position: sticky !important;
    top: 8px !important;
    left: auto !important;
    transform: none !important;
    animation: none !important;
    margin-inline-start: -4px !important;
    margin-bottom: -32px !important;
  }
  body.fab-centered .signals-fab::before,
  body.fab-centered .signals-fab::after { display: none !important; }
  body.fab-centered.push-banner-on .signals-fab { top: 8px !important; }

  /* === Centered FAB (initial state) ===
     When body has .fab-centered, the insights button moves out of its
     sticky position and floats above the empty-state greeting. Slightly
     larger and gently pulsing so it's the obvious focal point. As soon
     as the user interacts (opens insights, sends a question, or empties
     the queue), .fab-centered is removed and the FAB transitions back
     to its normal sticky corner. */
  body.fab-centered .chat-area {
    position: relative;  /* anchor the absolute-positioned FAB */
  }
  body.fab-centered .signals-fab {
    position: absolute;
    top: 56px;
    left: 50%;                /* center horizontally regardless of RTL */
    inset-inline-start: auto;
    margin-inline-start: 0;
    margin-bottom: 0;
    transform: translateX(-50%) scale(1);
    transition:
      top 0.55s cubic-bezier(0.4, 0, 0.2, 1),
      left 0.55s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    /* The button itself has a heartbeat-style scale animation. The cubic-
       bezier shape mimics a real heartbeat — fast contraction, slower
       relaxation. Pause between beats keeps it from feeling frantic. */
    animation: fabHeartbeat 2s ease-in-out infinite;
  }
  /* v160 — when the push banner is visible, drop the centered FAB below it */
  body.fab-centered.push-banner-on .signals-fab { top: 150px; }
  body.fab-centered .signals-fab:hover,
  body.fab-centered .signals-fab:active {
    transform: translateX(-50%) scale(1.18);
    animation: none;  /* freeze the beat on touch */
  }
  /* LUB-DUB heartbeat: two close beats (lub, then a smaller dub right after),
     then a longer rest. Timing in % of a 2s cycle:
       0%   → at rest
       8%   → LUB peak (~160ms in: sharp contraction)
       16%  → relax briefly
       24%  → DUB peak (~480ms in: smaller contraction right after lub)
       32%  → relax fully
       100% → still at rest (~1.36s of pause) */
  @keyframes fabHeartbeat {
    0%   { transform: translateX(-50%) scale(1); }
    8%   { transform: translateX(-50%) scale(1.16); }
    16%  { transform: translateX(-50%) scale(1.0); }
    24%  { transform: translateX(-50%) scale(1.10); }
    32%  { transform: translateX(-50%) scale(1); }
    100% { transform: translateX(-50%) scale(1); }
  }

  /* Halo ripple — a glowing ring that grows out from the FAB and fades.
     Drawn as a pseudo-element so it doesn't interfere with the button's
     own scaling. Synced to the heartbeat cycle (2s) so each beat sends
     out its own ripple. */
  body.fab-centered .signals-fab::before,
  body.fab-centered .signals-fab::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(213, 111, 168, 0.55);
    pointer-events: none;
    animation: fabHaloRipple 2s ease-out infinite;
  }
  /* Second ring fires with the dub beat (~16% of cycle in) */
  body.fab-centered .signals-fab::after {
    animation-delay: 0.32s;
  }
  @keyframes fabHaloRipple {
    0%   { transform: scale(1);    opacity: 0.7; }
    50%  { opacity: 0; }
    100% { transform: scale(2);    opacity: 0; }
  }

  /* === Popup modal that shows one signal at a time === */
  .signal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13,18,56,0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: backdropIn 0.18s ease;
  }
  .signal-modal-backdrop[hidden] { display: none; }
  @keyframes backdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .signal-modal {
    background: white;
    border-radius: 18px;
    padding: 22px 20px 18px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 20px 60px rgba(13,18,56,0.25);
    position: relative;
    animation: modalIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
    /* Prevent text selection while swiping between insights */
    user-select: none;
    -webkit-user-select: none;
    /* Tell the browser this element is for horizontal panning, not vertical scroll */
    touch-action: pan-y;
    /* Clip the sliding content layer so it doesn't poke out of the rounded frame */
    overflow: hidden;
  }
  .signal-modal-content {
    /* This is the layer that slides on swipe — frame stays put around it.
       min-height keeps the modal a consistent size across insights so the
       frame doesn't shift when the user swipes. */
    will-change: transform, opacity;
    min-height: 230px;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }
  .signal-modal-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-2);
    font-size: 20px; line-height: 1;
    background: rgba(13,18,56,0.07);
    border: none;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    /* Prevent the swipe handler from misreading clicks that start exactly
       on the X glyph as a (very short) drag — and ensure the whole circle
       is clickable, not just the area around the glyph. */
    cursor: pointer;
    z-index: 2;
  }
  .signal-modal-close * { pointer-events: none; }
  .signal-modal-close::before { content: ""; position: absolute; inset: -7px; }
  .signal-modal-close:hover, .signal-modal-close:active {
    background: rgba(13,18,56,0.06);
    color: var(--ink);
  }
  .signal-modal-cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .signal-modal.score .signal-modal-cat,
  .signal-modal.brand .signal-modal-cat {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .signal-modal.warn .signal-modal-cat { color: var(--warn); }
  .signal-modal.good .signal-modal-cat { color: var(--good); }
  .signal-modal.bad .signal-modal-cat  { color: var(--bad); }
  .signal-modal-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }
  .signal-modal-meta {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .signal-modal-stat {
    margin: 14px 0 10px;
    padding: 16px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245,158,107,0.08), rgba(213,111,168,0.08), rgba(126,111,212,0.08));
    text-align: center;
  }
  .signal-modal-stat .stat-big {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .signal-modal-stat .stat-label {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-top: 4px;
  }
  .signal-modal-progress {
    display: flex;
    gap: 4px;
    margin-top: 16px;
  }
  .signal-modal-progress .dot {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(13,18,56,0.1);
    transition: background 0.2s;
    /* Reset button defaults so the dot keeps its previous appearance */
    border: none;
    padding: 0;
    cursor: pointer;
    /* Expand the tap target vertically without growing the visual stripe */
    position: relative;
  }
  .signal-modal-progress .dot::before {
    content: '';
    position: absolute;
    inset: -10px 0;  /* 10px bigger tap target above and below */
  }
  .signal-modal-progress .dot:hover {
    background: rgba(13,18,56,0.25);
  }
  .signal-modal-progress .dot.done {
    background: var(--ink-3);
  }
  .signal-modal-progress .dot.current {
    background: var(--accent);
  }
  /* v229.104 — "I have a question about this" CTA inside an insight card.
     Taps to close the card and open the chat pre-loaded with this insight. */
  .signal-modal-ask {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    background: var(--grad-cta);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 3px 12px rgba(126,111,212,0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  }
  .signal-modal-ask:hover { box-shadow: 0 5px 16px rgba(126,111,212,0.38); }
  .signal-modal-ask:active { transform: scale(0.97); opacity: 0.92; }

  /* === v197: Coffee Morning daily report modal === */
  .cm-modal {
    background: linear-gradient(180deg, #FFF1EB 0%, #FCE3DB 100%);
    border-radius: 20px;
    padding: 18px 18px 16px;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 4px 24px rgba(196,76,53,0.18);
    color: #4A2E2A;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    animation: cmIn 0.32s cubic-bezier(.2,.7,.2,1);
  }
  @keyframes cmIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .cm-modal.dismissing { animation: cmOut 0.3s ease forwards; }
  @keyframes cmOut {
    to { opacity: 0; transform: translateY(-8px) scale(0.97); }
  }
  .cm-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .cm-modal-head-left { display: flex; align-items: center; gap: 8px; }
  .cm-modal-head-icon {
    width: 22px; height: 22px; color: #E06A4F; flex-shrink: 0;
  }
  .cm-modal-head-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
  .cm-modal-title {
    background: linear-gradient(90deg, #E37489, #E06A4F);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-weight: 700; font-size: 16px; line-height: 1.2;
  }
  .cm-modal-sub {
    font-size: 11.5px; color: #8C4A45; opacity: 0.75; margin-top: 2px;
  }
  .cm-modal-close {
    background: transparent; border: none; padding: 4px; cursor: pointer;
    color: #8C4A45; line-height: 0;
  }
  .cm-modal-close svg { width: 18px; height: 18px; }
  .cm-modal-close:active { transform: scale(0.92); }
  /* v229.18 — honest staleness banner (shown when yesterday's data hasn't loaded yet) */
  .cm-stale-banner {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 2px 0 12px; padding: 10px 12px;
    background: rgba(199,112,38,0.10);
    border: 0.5px solid rgba(199,112,38,0.30);
    border-radius: 12px;
    font-size: 12.5px; line-height: 1.5; color: #8A4B12;
    text-align: right;
  }
  .cm-stale-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
  .cm-stale-icon svg { width: 15px; height: 15px; color: #C77026; }
  .cm-headline {
    text-align: center; padding: 6px 0 12px;
  }
  .cm-headline-label {
    font-size: 11px; color: #8C4A45; opacity: 0.7; margin-bottom: 4px;
  }
  .cm-headline-number {
    background: linear-gradient(90deg, #E37489, #E06A4F);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-weight: 700; font-size: 34px; line-height: 1.1;
    direction: ltr; display: inline-block;
  }
  .cm-headline-pill {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 6px; padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
  }
  .cm-headline-pill.pos { background: rgba(106,170,80,0.14); color: #3E7A24; }
  .cm-headline-pill.neg { background: rgba(199,112,38,0.14); color: #B05B0C; }
  .cm-headline-pill svg { width: 13px; height: 13px; }
  .cm-headline-sub {
    font-size: 12px; color: #8C4A45; opacity: 0.85; margin-top: 10px;
  }
  .cm-section {
    border-top: 0.5px solid rgba(224,106,79,0.18);
    padding-top: 12px; margin-top: 14px;
  }
  .cm-section-tag {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: 12px; font-weight: 700;
  }
  .cm-section-tag svg { width: 14px; height: 14px; }
  .cm-section-tag.highlight { color: #E06A4F; }
  .cm-section-tag.alert { color: #C77026; }
  .cm-section-tag.today { color: #6B4FAA; }
  .cm-section-body {
    font-size: 13px; color: #4A2E2A; line-height: 1.6;
  }
  .cm-section-body strong { color: #1F1F1F; font-weight: 700; }
  .cm-section-body .cm-row {
    margin-bottom: 2px;
  }
  .cm-section-empty {
    font-size: 12.5px; color: #8C4A45; opacity: 0.85;
    margin-top: 10px; padding: 8px 12px;
    background: rgba(255,255,255,0.4);
    border-radius: 10px;
    text-align: center;
  }
  .cm-ask-btn {
    margin-top: 18px; width: 100%;
    background: linear-gradient(90deg, #E37489, #E06A4F);
    border: none; color: #fff; font-weight: 700; font-size: 14px;
    padding: 12px; border-radius: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit;
  }
  .cm-ask-btn svg { width: 16px; height: 16px; }
  .cm-ask-btn:active { transform: scale(0.98); }
  /* Footer action pills — compact, side by side (like the reports-view footer). */
  .cm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .cm-pill {
    flex: 1 1 0; width: auto; min-width: 132px; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 14px; border-radius: 100px; border: none; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 13.5px; white-space: nowrap; color: #fff;
  }
  .cm-pill svg { width: 15px; height: 15px; }
  .cm-pill:active { transform: scale(0.98); }
  .cm-pill:disabled { opacity: 0.6; cursor: default; }
  .cm-pill.primary { background: linear-gradient(95deg, #e879a8 0%, #9d6dde 60%, #5b6fd4 100%); }
  .cm-pill.ask { background: linear-gradient(95deg, #f6b486 0%, #ef9a6b 100%); }
  .cm-pill.feat { background: linear-gradient(90deg, #E37489, #E06A4F); }
  .cm-sec-actions { display: flex; gap: 6px; margin-top: 10px; }
  .cm-sec-actions button {
    flex: 1; background: #fff;
    border: 0.5px solid rgba(224,106,79,0.25);
    color: #8C4A45; font-size: 12px; padding: 9px;
    border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-weight: 500; font-family: inherit;
  }
  .cm-sec-actions button:active { transform: scale(0.97); }
  .cm-sec-actions button svg { width: 14px; height: 14px; }
  .cm-sec-actions button .wa { color: #25D366; }
  .cm-toast {
    position: absolute; bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: #1F1F1F; color: #fff;
    padding: 8px 16px; border-radius: 999px;
    font-size: 12px; opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1;
  }
  .cm-toast.visible { opacity: 1; }

  /* v227.0 — Today's meetings / reminders / birthdays-by-branch */
  .cm-event-row {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px; line-height: 1.5;
  }
  .cm-event-time {
    flex-shrink: 0; font-weight: 700; color: #1F1F1F;
    font-size: 12.5px; direction: ltr;
  }
  .cm-event-title {
    flex: 1; min-width: 0; font-size: 13px; color: #4A2E2A;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cm-event-empty {
    font-size: 12.5px; color: #8C4A45; opacity: 0.75; font-style: italic;
  }
  .cm-bday-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 7px 14px;
    background: rgba(255,255,255,0.55);
    border: 0.5px solid rgba(224,106,79,0.28);
    border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: #8C4A45;
    cursor: pointer; font-family: inherit;
  }
  .cm-bday-btn:active { transform: scale(0.97); }
  .cm-bday-btn svg { width: 13px; height: 13px; }

  /* Birthday sub-overlay */
  .cm-bday-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
    animation: cmIn 0.2s ease;
  }
  .cm-bday-card {
    width: 100%; max-width: 480px;
    max-height: 85vh;
    background: #FFF8F0;
    border-radius: 22px 22px 0 0;
    padding: 20px 22px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .cm-bday-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .cm-bday-title {
    font-size: 16px; font-weight: 700; color: #1F1F1F;
  }
  .cm-bday-close {
    background: rgba(0,0,0,0.06); border: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .cm-bday-close svg { width: 14px; height: 14px; stroke: #4A2E2A; }
  .cm-bday-branch {
    margin-bottom: 14px;
  }
  .cm-bday-branch-name {
    font-size: 13px; font-weight: 700; color: #6B4FAA;
    margin-bottom: 6px; padding-bottom: 4px;
    border-bottom: 0.5px solid rgba(107,79,170,0.18);
  }
  .cm-bday-person {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0; font-size: 13px; color: #1F1F1F;
  }
  .cm-bday-person-name { font-weight: 600; }
  .cm-bday-person-meta { font-size: 11.5px; color: #8C4A45; opacity: 0.8; }
  .cm-bday-person.inactive .cm-bday-person-name {
    color: #8C4A45; opacity: 0.65;
  }
  .cm-bday-person.inactive::after {
    content: 'לא פעיל'; font-size: 10px; color: #8C4A45;
    background: rgba(140,74,69,0.1); padding: 1px 6px;
    border-radius: 6px; margin-right: auto;
  }
  .cm-bday-actions {
    display: flex; gap: 8px;
    position: sticky; bottom: 0;
    background: linear-gradient(180deg, rgba(255,248,240,0) 0%, #FFF8F0 30%);
    padding: 12px 0 4px;
    margin-top: 8px;
  }
  .cm-bday-actions button {
    flex: 1; background: #fff;
    border: 0.5px solid rgba(224,106,79,0.28);
    color: #8C4A45; font-size: 13px; padding: 10px;
    border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-weight: 600; font-family: inherit;
  }
  .cm-bday-actions button svg { width: 14px; height: 14px; }
  .cm-bday-actions button:active { transform: scale(0.97); }
  .cm-bday-empty {
    text-align: center; padding: 30px 10px;
    font-size: 13px; color: #8C4A45;
  }
  /* Dark theme */
  html.theme-dark .cm-bday-card { background: #1F1F22; }
  html.theme-dark .cm-bday-title { color: #F0EAE2; }
  html.theme-dark .cm-bday-close { background: rgba(255,255,255,0.08); }
  html.theme-dark .cm-bday-close svg { stroke: #E8E4DD; }
  html.theme-dark .cm-bday-branch-name { color: #B8A3F2; }
  html.theme-dark .cm-bday-person { color: #E8E4DD; }
  html.theme-dark .cm-bday-person-meta { color: #A89B8E; }
  html.theme-dark .cm-bday-actions {
    background: linear-gradient(180deg, rgba(31,31,34,0) 0%, #1F1F22 30%);
  }
  html.theme-dark .cm-bday-actions button {
    background: rgba(255,255,255,0.06); color: #E8E4DD;
    border-color: rgba(255,255,255,0.12);
  }

  /* Chat */
  .chat-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;   /* v31: prevent any child from creating horizontal scroll */
    padding: 16px 18px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .chat-area::-webkit-scrollbar { width: 0; }
  .conversation { display: flex; flex-direction: column; gap: 16px; min-height: 100%; }

  /* === Empty state ===
     The first-load greeting. The text sits in the upper-middle area (so
     it's the first thing the eye lands on), and Tzion stands at the
     bottom-end of the chat area, waving and looking around. */
  .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    /* v220: push whole block 80px down from top */
    padding: 80px 24px 0;
    position: relative;
    animation: emptyFadeIn 0.5s ease-out;
  }
  @keyframes emptyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .empty-state[hidden] { display: none; }

  /* v211/v214/v216 — Live counter floating numbers under the greeting */
  .lc-wrap {
    /* v216: pushed up close to greeting (was margin:auto auto centered). */
    margin: 36px auto auto;
    max-width: 340px;
    width: 100%;
    /* v228.1 — longer, more deliberate fold so the numbers visibly travel
       upward INTO the lc-pill in the header (instead of fading mid-air). */
    transition:
      opacity 0.55s cubic-bezier(.55,.04,.7,.4) 0.18s,
      transform 0.7s cubic-bezier(.55,.04,.7,.4),
      filter 0.6s cubic-bezier(.55,.04,.7,.4),
      max-height 0.5s cubic-bezier(.55,.04,.7,.4) 0.35s,
      margin 0.4s ease 0.35s;
    overflow: visible;  /* v226.6 — allow close-button to spill outside */
    max-height: 360px;
    text-align: center;
    transform-origin: top center;
    /* v226.6 — very subtle frame around the stats. */
    position: relative;
    border: 1px solid rgba(13, 18, 56, 0.10);
    border-radius: 20px;
    padding: 22px 16px 14px;
    background: rgba(255, 255, 255, 0.04);
  }
  html.theme-dark .lc-wrap {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.025);
  }
  /* v226.6 — close (×) button in the corner: small circle with dark icon. */
  .lc-close {
    position: absolute;
    top: -10px;
    inset-inline-end: -10px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(13, 18, 56, 0.08);
    color: var(--ink-2);
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(13, 18, 56, 0.10);
    transition: transform 0.12s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    z-index: 2;
  }
  .lc-close:hover { background: #fff; }
  .lc-close:active { transform: scale(0.9); }
  .lc-close svg { width: 13px; height: 13px; }
  html.theme-dark .lc-close {
    background: rgba(40, 40, 52, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.40);
  }
  html.theme-dark .lc-close:hover { background: rgba(52, 52, 68, 1); }
  /* v229.40 — numbers popup overlay. During a conversation, tapping the live
     pill opens the stats as a banner OVER the chat (nothing behind moves),
     instead of switching back to the home view. The live #lcWrap element is
     moved in here (keeps its live bindings + toggle), then restored on close. */
  /* v229.55 — STRONG blur backdrop so the chat behind doesn't distract. Light
     scrim in light mode / dark scrim in dark mode for text contrast. */
  .lc-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(245, 246, 250, 0.5);
    /* v229.56 — blur reduced 25% (18→13.5px). */
    -webkit-backdrop-filter: blur(13.5px) saturate(1.05); backdrop-filter: blur(13.5px) saturate(1.05);
    /* v229.56 — sit a bit ABOVE center (not high near the top). align center, then
       bias upward with extra bottom padding. */
    display: none; align-items: center; justify-content: center;
    padding: 16px 16px 16vh;
  }
  html.theme-dark .lc-overlay { background: rgba(6, 6, 9, 0.5); }
  .lc-overlay.open { display: flex; animation: lcOverlayIn 0.18s ease-out; }
  @keyframes lcOverlayIn { from { opacity: 0; } to { opacity: 1; } }
  /* v229.55 — the popup keeps the EXACT home-banner look (size / border / radius
     / padding from the base .lc-wrap). We only (a) force it visible (override the
     has-chat/collapsed hiding) and (b) give it a frosted, readable fill + a soft
     lift so it reads cleanly over the blurred backdrop. */
  .lc-overlay .lc-wrap,
  body.has-chat .lc-overlay .lc-wrap,
  body.lc-collapsed .lc-overlay .lc-wrap {
    max-height: none !important; opacity: 1 !important; transform: none !important;
    filter: none !important; margin: 0 auto !important; pointer-events: auto !important;
    animation: none !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 40px rgba(13, 18, 56, 0.18);
  }
  html.theme-dark .lc-overlay .lc-wrap,
  html.theme-dark body.has-chat .lc-overlay .lc-wrap,
  html.theme-dark body.lc-collapsed .lc-overlay .lc-wrap {
    background: rgba(26, 26, 33, 0.74) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
  /* v228.1 — collapsed state: stats visibly travel up and shrink INTO the
     lc-pill location at the top of the header. The opacity fade is delayed
     so the user sees the panel still solid while it's moving — only at the
     end does it dissolve into the pill. Combined transform = strong upward
     translateY (~ to header) + small scale + slight blur for "absorbed"
     feel. The transition above (in .lc-wrap) sets the curve and delays. */
  body.lc-collapsed .lc-wrap {
    opacity: 0;
    transform: scale(0.08) translateY(-72vh);
    filter: blur(2px);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0; padding-bottom: 0;
    border-color: transparent;
    pointer-events: none;
  }
  /* v228.1 — when the panel lands, the pill briefly "pops" to acknowledge
     the absorption. The pop is short and lands right when the panel has
     finished its travel. */
  @keyframes lcPillCatch {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    65%  { transform: scale(0.96); }
    100% { transform: scale(1); }
  }
  body.lc-collapsed .lc-pill {
    display: flex;
    opacity: 1;
    transform: scale(1);
    animation: lcPillCatch 0.48s ease-out 0.55s both;
  }
  /* v218 — When chat opens, wrap folds UPWARD to the header buttons location. */
  body.has-chat .lc-wrap {
    opacity: 0;
    transform: scale(0.15) translateY(-60vh);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
    transition:
      opacity 0.55s cubic-bezier(.4,.7,.2,1),
      transform 0.6s cubic-bezier(.4,.7,.2,1),
      max-height 0.5s cubic-bezier(.4,.7,.2,1) 0.4s,
      margin 0.5s ease 0.4s;
  }
  .lc-wrap.lc-collapsed { opacity: 0; max-height: 0; margin-top: 0; pointer-events: none; }
  .lc-cards {
    display: grid;
    /* v217: minmax(0, 1fr) clamps columns — wide content (e.g., breakdown
       row in 'today' mode) can't push the column wider, so labels stay put. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .lc-card {
    background: transparent;
    border: none;
    padding: 0 4px;
    text-align: center;
  }
  .lc-card-head {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; color: #8C4A45; font-weight: 500;
    margin-bottom: 4px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: visible;
  }
  .lc-card-head .lc-head-sub {
    font-size: 10px; opacity: 0.7; font-weight: 400; margin-inline-start: 4px;
  }
  .lc-card-head svg { color: #B0524A; }
  .lc-num {
    font-size: 24px;                       /* v215: smaller so 7-digit MTD fits */
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    direction: ltr;
    display: inline-block;
    text-align: center;
    letter-spacing: -0.01em;
    min-height: 28px;
    /* v214: tabular figures so digits have equal width — number doesn't
       shift horizontally as it changes from 1,234 to 12,345 etc. */
    font-variant-numeric: tabular-nums;
  }
  /* v216: Remove min-width — was causing horizontal overflow on narrow cards.
     The wrap is already display:flex justify-content:center via the v213 rule,
     so the number naturally centers inside the card column width (1fr ≈ 161px).
     Cards themselves stay at 1fr 1fr so labels don't shift. */
  .lc-num-wrap {
    width: 100%;
    text-align: center;
    overflow: visible;
  }
  /* v226.10 — revenue uses the same gray as entries.
     v226.11a — darkened ~30% (#9CA0A6 → #6D7074) for better readability
     in light mode. The previous tone read as "faded". */
  .lc-num.lc-rev { color: #6D7074; }
  .lc-num.lc-ent { color: #6D7074; }
  .lc-currency {
    display: inline-block;
    color: #B8BCC4;
    font-size: 14px;
    font-weight: 500;
    margin-inline-end: 3px;
    vertical-align: 4px;
  }
  .lc-num-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    direction: ltr;
    gap: 0;
  }
  /* v219: 3 mini-columns under entries — label on top, number below.
     Each stacked vertically, very subtle gray. */
  .lc-breakdown {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .lc-bd-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  .lc-bd-label {
    font-size: 9px;
    color: #B0A19C;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.85;
  }
  .lc-bd-val {
    font-size: 11px;
    color: #B0A19C;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    margin-top: 1px;
  }
  /* Row with toggle + dot side by side */
  .lc-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-top: 14px;
  }
  .lc-toggle {
    position: relative;
    display: inline-flex;
    background: rgba(255,255,255,0.5);
    border: 0.5px solid rgba(224,106,79,0.18);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
    overflow: hidden;
  }
  .lc-tog-opt {
    position: relative;
    z-index: 2;
    border: none;
    background: transparent;
    color: #8C4A45;
    font-size: 11px;          /* v218: smaller font */
    font-weight: 500;
    padding: 5px 11px;        /* v218: 40% narrower (was 6px 18px) */
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.25s ease;
  }
  .lc-tog-opt.is-on { color: #E06A4F; font-weight: 700; }
  .lc-tog-knob {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    width: calc(50% - 3px);
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(224,106,79,0.15);
    transition: transform 0.28s cubic-bezier(.4,.7,.2,1);
    /* In RTL the toggle's first child sits on the right. Knob starts there. */
    right: 3px;
  }
  .lc-toggle[data-period="month"] .lc-tog-knob {
    transform: translateX(calc(-100% + 0px));
  }
  /* v229.95/.98 — branch selector, styled to match the .lc-toggle pill:
     same fixed width, centered, sitting just above the toggle. */
  .lc-branch-sel {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #8C4A45;
    background: rgba(255,255,255,0.5);
    border: 0.5px solid rgba(224,106,79,0.18);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    text-align-last: center;
  }
  .lc-branch-sel.is-branch { color: #E06A4F; font-weight: 700; }

  /* v218: green dot removed visually (still in DOM but hidden) */
  .lc-dot {
    display: none;
  }
  @keyframes lcPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
  }
  /* v218: Live pill — lives in top header (.hdr-buttons), not sticky.
     Hidden until body.has-chat. */
  .lc-pill {
    position: relative;
    width: 34px; height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--grad-cta);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(213,111,168,0.30), 0 1px 2px rgba(13,18,56,0.06);
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.3);
    transition: transform 0.36s cubic-bezier(.4,.7,.2,1), opacity 0.36s cubic-bezier(.4,.7,.2,1);
  }
  body.has-chat .lc-pill {
    display: flex;
    opacity: 1;
    transform: scale(1);
  }
  .lc-pill:hover, .lc-pill:active { transform: scale(1.07); }
  .lc-pill svg { width: 14px; height: 14px; color: #fff; margin-top: -3px; }
  .lc-pill .lc-pill-text { display: none; }
  /* v226.11a — hide the revenue sum inside the collapsed pill. User prefers
     the icon-only look; the sum reads "noisy" at the small size. */
  .lc-pill-rev { display: none !important; }
  .lc-pill-rev-OLD {
    position: absolute;
    bottom: 3px; left: 0; right: 0;
    text-align: center;
    color: rgba(255,255,255,0.95);
    font-size: 7px;
    font-weight: 700;
    direction: ltr;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  /* Greeting text block — sits in upper part of empty-state */
  /* v229.7: switched to flexbox + gap layout. The old layout used a negative
     margin (-18px) on .empty-prompt to clamp it close to the greeting. With
     line-height: 0.95 on the greeting, the line box was shorter than the
     visible glyph extent, so the negative margin pulled the prompt's first
     line into the greeting's glyphs → visible overlap. Flex + gap gives a
     predictable, non-overlapping layout in both Tzion (no noa-line) and
     Maya (with noa-line) states. */
  .empty-text {
    margin-top: 4px; /* v215: pushed way up */
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .empty-greeting {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.05;        /* v229.7: was 0.95 — too tight, glyphs bled past line box */
    margin: 0;
    padding: 0;
  }
  .empty-prompt {
    font-size: 13.5px;
    color: var(--ink-3);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.3;
    /* v229.7: was -18px — caused overlap with greeting. Flex gap on parent
       now handles the spacing. */
    margin-top: 0;
    padding-top: 0;
  }
  .empty-prompt strong {
    color: var(--ink);
    font-weight: 700;
  }
  /* Noa's apology line — appears between greeting and prompt only on Noa days.
     Default it's empty/hidden; JS fills it with text and animates a typewriter
     effect. The blinking caret stays only while typing. */
  .empty-noa-line {
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 500;
    line-height: 1.55;
    margin-bottom: 0;
    min-height: 0;
    display: none;           /* v217: completely removed unless noa-day */
    transition: min-height 0.2s ease, margin-bottom 0.2s ease;
  }
  body.noa-day .empty-noa-line {
    display: block;          /* v217: shown only on noa days */
    min-height: 1.5em;
    margin-bottom: 10px;
  }
  .empty-noa-line .typer-caret {
    display: inline-block;
    width: 1px;
    background: var(--ink-2);
    margin-inline-start: 2px;
    animation: typerBlink 0.7s step-end infinite;
    vertical-align: text-top;
    height: 1em;
  }
  .empty-noa-line .typer-caret.done {
    display: none;
  }
  @keyframes typerBlink {
    50% { opacity: 0; }
  }


  /* Full standing Tzion — pinned to the bottom-end (right in RTL) of the
     empty area. He sways gently and looks around. */
  .tzion-full {
    width: 130px;
    height: 195px;
    position: absolute;
    /* v224.0b: was 151px (cleared the now-removed suggest-row chips).
       v224.0c: lifted from 110 → 122 — the previous overlap was a bit
       too aggressive. Feet now just kiss the top edge of the composer
       background tint.
       v229.14: +30px (122→152) so the character doesn't overlap the send
       button after we moved her to the left side. */
    bottom: 152px;
    /* v229.14 — moved from start-side (visual right in RTL) to end-side
       (visual left in RTL) to match the new WhatsApp-style chat layout
       where the assistant lives on the left. */
    inset-inline-start: auto;
    inset-inline-end: -35px;     /* peeks in from the visual-LEFT edge */
    pointer-events: none;
    z-index: 5;                  /* above .composer-wrap so feet don't get clipped behind it */
    transition: transform 0.32s cubic-bezier(0.22, 0.94, 0.36, 1.0), opacity 0.28s ease;
    /* v226.1a — radial halo removed. It was added in v226.0e to fight
       the PNG fringing of the old Maya asset. The new Maya PNG is clean,
       so the halo is no longer needed — and it was creating a faint
       rectangle visible against the slightly-different composer-wrap
       background at the bottom of the container. */
  }
  /* In chat mode the character is hidden by default — slid out toward the
     visual LEFT (v229.14: was right when she was anchored to the right).
     Now she's anchored to the visual left (inset-inline-end), so off-screen
     is to the LEFT → negative translateX physically. Tapping the analyst's
     avatar in a reply bubble adds .summoned which slides her back. */
  body.has-chat .tzion-full {
    opacity: 0;
    transform: translateX(-150%);
    pointer-events: none;
  }
  body.has-chat .tzion-full.summoned {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  /* Floating close button — appears only when the character is summoned.
     Positioned diagonally up-left (visual: top-end in RTL) of the figure. */
  .tzion-full .summon-close {
    position: absolute;
    top: -4px;
    inset-inline-end: -10px;     /* visual left side in RTL */
    width: 26px; height: 26px;
    border-radius: 50%;
    background: white;
    color: var(--ink);
    box-shadow: 0 2px 6px rgba(13, 18, 56, 0.18);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .tzion-full.summoned .summon-close {
    display: flex;
  }
  /* v226.10a — × removed from home screen per user (was redundant).
     But the figure now needs to receive touch events so swipe-right works. */
  body:not(.has-chat) .tzion-full {
    pointer-events: auto;
  }
  /* Dismissed state: slide off to the visual LEFT + fade out.
     v229.14: was right (+150%) before the sides swap. */
  .tzion-full.tzion-dismissed {
    transform: translateX(-150%) !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: transform 0.42s cubic-bezier(.4,.7,.2,1), opacity 0.32s ease;
  }
  .tzion-full .summon-close:active {
    transform: scale(0.9);
    background: rgba(13,18,56,0.06);
  }
  .tzion-full .summon-close svg {
    width: 14px; height: 14px;
  }

  /* Avatar in a reply bubble — when it has .summon-trigger, it acts as
     a clickable target that summons the full standing character. We add
     a subtle hover/active feedback so the user knows it's interactive,
     without changing the resting visual. */
  .msg.bot .msg-avatar.summon-trigger {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .msg.bot .msg-avatar.summon-trigger:hover {
    transform: scale(1.05);
  }
  .msg.bot .msg-avatar.summon-trigger:active {
    transform: scale(0.95);
  }
  .tzion-full .tz-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* Soft drop shadow gives Tzion a sense of standing on the surface */
    /* v226.1a — simplified to just the ground shadow now that the new
       Maya PNG is clean. The dark 1px halo from earlier versions was
       needed to mask PNG fringing; not needed anymore. */
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
    transform-origin: 50% 95%;
    /* Two layered animations running at different periods so the motion
       never has a synced "rest" point — feels organic and continuous.
       Linear timing avoids the start/stop feel that ease-in-out creates
       between keyframes. */
    animation:
      tzSway 6.4s linear infinite,
      tzBreath 3.7s linear infinite;
  }
  /* Noa is the substitute character for ~2 random days a week. Same
     animation and positioning as Tzion. Hidden by default, shown only
     when body has .noa-day class. */
  .tzion-full .noa-img {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: contain;
    position: absolute;
    inset: 0;
    /* v226.1a — simplified to just the ground shadow now that the new
       Maya PNG is clean. The dark 1px halo from earlier versions was
       needed to mask PNG fringing; not needed anymore. */
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
    transform-origin: 50% 95%;
    animation:
      tzSway 6.4s linear infinite,
      tzBreath 3.7s linear infinite;
  }
  /* Lia is the analyst character for Roni's view of the demo (URL ?u=roni).
     Same animation and positioning as the others. Hidden by default, shown
     only when body has the .lia-mode class. When .lia-mode is on, both the
     Tzion and Noa layers are hidden so Lia is the sole figure. */
  .tzion-full .lia-img {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: contain;
    position: absolute;
    inset: 0;
    /* v226.1a — simplified to just the ground shadow now that the new
       Maya PNG is clean. The dark 1px halo from earlier versions was
       needed to mask PNG fringing; not needed anymore. */
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
    transform-origin: 50% 95%;
    animation:
      tzSway 6.4s linear infinite,
      tzBreath 3.7s linear infinite;
  }
  /* v92: while onboarding is pending, hide the persona figure entirely
     so the user doesn't see the previous persona flash before picking. */
  html.onb-pending .tzion-full,
  body.onb-pending .tzion-full { visibility: hidden !important; }

    body.noa-day .tzion-full .tz-img { display: none; }
  body.noa-day .tzion-full .noa-img { display: block; }
  /* Lia is shown instead of Tzion/Maya when ?u=roni. We target either
     the html element (set synchronously, before paint) OR the body
     (set after DOMContentLoaded) so styling is applied as soon as the
     URL parameter is detected — preventing a brief flash of Tzion. */
  html.lia-mode .tzion-full .tz-img,
  body.lia-mode .tzion-full .tz-img { display: none; }
  html.lia-mode .tzion-full .noa-img,
  body.lia-mode .tzion-full .noa-img { display: none; }
  html.lia-mode .tzion-full .lia-img,
  body.lia-mode .tzion-full .lia-img { display: block; }
  /* Side-to-side sway with subtle rotation — sine-wave shaped for smooth flow */
  @keyframes tzSway {
    0%   { transform: translateX(0)     rotate(0deg); }
    12.5%{ transform: translateX(-1.2px) rotate(-0.4deg); }
    25%  { transform: translateX(-2px)   rotate(-0.7deg); }
    37.5%{ transform: translateX(-1.2px) rotate(-0.4deg); }
    50%  { transform: translateX(0)     rotate(0deg); }
    62.5%{ transform: translateX(1.2px)  rotate(0.4deg); }
    75%  { transform: translateX(2px)    rotate(0.7deg); }
    87.5%{ transform: translateX(1.2px)  rotate(0.4deg); }
    100% { transform: translateX(0)     rotate(0deg); }
  }
  /* Vertical breath — also sine-shaped */
  @keyframes tzBreath {
    0%   { translate: 0 0; }
    25%  { translate: 0 -1.4px; }
    50%  { translate: 0 -2px; }
    75%  { translate: 0 -1.4px; }
    100% { translate: 0 0; }
  }

  .day-divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-3);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin: 2px 0;
  }
  .day-divider::before, .day-divider::after {
    content:''; flex: 1; height: 1px;
    background: rgba(13,18,56,0.1);
  }

  /* v229.85 — max-width reverted to 92% (the narrower calc width caused number
     wrapping in monthly-summary cards). Refine the narrower look later. */
  .msg { display: flex; gap: 8px; max-width: 92%; min-width: 0; }
  .msg-avatar {
    /* v229.84 — shrunk 25% (35→26). Font scaled with it (12→9). */
    width: 26px; height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 9px;
    margin-top: 18px;
  }
  .msg.user .msg-avatar { cursor: pointer; }
  .msg.user .msg-avatar:active { transform: scale(0.92); }
  /* v229.10 — sides swapped to WhatsApp-style RTL:
       user  → anchored to start (visual right); avatar at far-right.
       bot   → pushed to end   (visual left ); avatar at far-left.
     The DOM order is <msg-avatar><msg-body>, so:
       - user with default flex-direction:row in RTL puts avatar at visual right.
       - bot with flex-direction:row-reverse in RTL puts avatar at visual left.
  */
  .msg.user { align-self: flex-start; }
  .msg.bot  { margin-inline-start: auto; flex-direction: row-reverse; }
  .msg.user .msg-avatar {
    background: var(--grad-cta);
    color: white;
  }
  .msg.bot .msg-avatar {
    background: linear-gradient(135deg, #fde6e0, #f5d4cc);
    border: 1px solid rgba(13,18,56,0.06);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 0;
    color: transparent;
  }
  .msg.bot .msg-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .msg.bot .msg-avatar .tz-avatar-img {
    width: 130%;          /* slightly oversize so the face fills the circle */
    height: 130%;
    object-fit: cover;
    object-position: center 25%;  /* favor the face area, crop a bit at top */
    display: block;
    margin: -15%;
  }
  /* Maya's avatar is pre-cropped with face centered, so it can use the
     standard positioning. The class is kept for any future per-character
     tuning. */
  .msg.bot .msg-avatar .maya-avatar-img {
    object-position: center center;
  }

  /* === Tzion portrait — animated character === */
  /* Used by both message avatars (small) and the empty-state hero (large) */
  .tzion-portrait {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #fde6e0, #f5d4cc);
  }
  .tzion-portrait svg { width: 100%; height: 100%; display: block; }

  /* Eyes blink. The animation runs all the time but only flashes shut
     for a tiny fraction of each cycle, so it looks like a natural blink
     every ~5 seconds. */
  .tzion-eye {
    animation: tzionBlink 5.2s infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  @keyframes tzionBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    94%, 96%      { transform: scaleY(0.1); }
  }

  /* When the avatar's container has .thinking, head nods gently.
     Used during the typing-dots phase. */
  .thinking .tzion-head {
    animation: tzionNod 1.3s ease-in-out infinite;
    transform-origin: 50% 70%;
    transform-box: fill-box;
  }
  @keyframes tzionNod {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
  }

  /* Slow breathing for the empty-state hero — chest rises and falls. */
  .breathing .tzion-body {
    animation: tzionBreathe 3.5s ease-in-out infinite;
    transform-origin: 50% 100%;
    transform-box: fill-box;
  }
  @keyframes tzionBreathe {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.025); }
  }

  .msg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
  .msg-meta { font-size: 10px; color: var(--ink-3); padding: 0 4px; }
  .msg-meta strong { color: var(--ink-2); font-weight: 600; }
  .msg.user .msg-meta { text-align: end; }

  .msg-bubble {
    /* v226.10b — match the header/composer bar tone (#FAF8F2) so Maya's
       bubble stands out from the pure-white main bg. */
    background: #FAF8F2;
    border-radius: 14px;
    /* v228.10 — tighter bottom padding so the in-bubble actions row sits
       close to the bottom edge (a few px breathing room, not touching). */
    padding: 11px 14px 5px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    /* v31: ensure long content (chip text, long Hebrew words) wraps and
       doesn't push the bubble wider than its column. */
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .msg.user .msg-bubble {
    /* v226.10c — was lavender (--bg-bubble #eee4f0). Now subtle warm
       light gray to match the rest of the cream/off-white palette. */
    /* v229.29 — back to the original warm gray (#ECEAE4), darkened 10%
       (each channel ×0.9) → #D4D3CD. ORIGINAL: #ECEAE4 */
    background: #d4d3cd;
    color: var(--ink);
    /* v229.26 — the base .msg-bubble uses asymmetric padding (11px top / 5px
       bottom) tuned for the assistant bubble's in-bubble actions row. The user
       bubble has no actions row — only text — so that asymmetry pushed the text
       visually downward. Balance it so single-line text is vertically centered. */
    padding: 8px 14px;
  }
  .msg-bubble p + p { margin-top: 7px; }
  .msg-bubble strong { font-weight: 600; }

  .data-card {
    margin-top: 9px;
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(13,18,56,0.05);
  }
  .data-card-title {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
  .bar { flex: 1; background: var(--ink); border-radius: 2px 2px 0 0; min-height: 3px; opacity: 0.55; }
  .bar.accent { background: var(--grad-cta); opacity: 1; }
  .bar-labels { display: flex; gap: 3px; margin-top: 5px; }
  .bar-labels span { flex: 1; text-align: center; font-size: 8.5px; color: var(--ink-3); font-family: var(--mono); }

  /* Pie chart layout: SVG on the right (RTL — visual-end), legend fills the rest */
  .pie-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }
  .pie-svg-wrap {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
  }
  .pie-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .pie-center-big {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1;
  }
  .pie-center-small {
    font-size: 9.5px;
    color: var(--ink-3);
    margin-top: 3px;
    text-align: center;
  }
  .pie-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .pie-legend-row {
    display: grid;
    grid-template-columns: 9px 1fr;
    align-items: start;
    gap: 7px;
    font-size: 11px;
    line-height: 1.35;
  }
  .pie-legend-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
  }
  .pie-legend-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .pie-legend-label {
    color: var(--ink);
    font-weight: 600;
    /* Allow wrapping for long labels like "גם לקוח שלך וגם פריפיט" */
    overflow-wrap: anywhere;
  }
  .pie-legend-value {
    color: var(--ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
  }
  .pie-legend-pct {
    color: var(--ink-3);
    font-weight: 500;
  }
  .pie-note {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--ink-3);
    line-height: 1.45;
  }

  /* Pyramid chart: each row is a centered horizontal bar that shrinks
     downward, forming an inverted pyramid (wide top → narrow bottom).
     The label sits to the right (RTL — visual end) and the value to
     the left (visual start), keeping the bar visually anchored. */
  .pyramid-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
  }
  .pyramid-row {
    display: grid;
    grid-template-columns: 88px 1fr 56px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
  }
  .pyramid-label {
    text-align: end;     /* RTL: aligns to the right (visual start of label) */
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pyramid-bar-wrap {
    display: flex;
    justify-content: center;
    height: 18px;
  }
  .pyramid-bar {
    height: 100%;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
    min-width: 18px;
  }
  .pyramid-pct {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .pyramid-value {
    text-align: start;   /* RTL: visual end */
    color: var(--ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
  }

  /* compareBar: paired horizontal bars per row.
     Layout: [label] [stacked bars + values] [result pill]
     Both bars share scale so comparison within row AND across rows is visual. */
  .cmp-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }
  .cmp-legend {
    display: flex;
    gap: 14px;
    font-size: 10.5px;
    color: var(--ink-3);
    margin-bottom: 4px;
  }
  .cmp-legend-item { display: flex; align-items: center; gap: 5px; }
  .cmp-legend-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
  }
  .cmp-row {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .cmp-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    text-align: end;  /* RTL natural */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cmp-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .cmp-bar-line {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cmp-bar {
    height: 11px;
    border-radius: 2px;
    min-width: 4px;
    transition: width 0.3s ease;
  }
  .cmp-val {
    font-size: 9.5px;
    color: var(--ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .cmp-result {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cmp-result.pill-good {
    background: rgba(72, 161, 116, 0.14);
    color: #2f7a55;
  }
  .cmp-result.pill-med {
    background: rgba(208, 132, 38, 0.14);
    color: #9c5e1a;
  }
  .cmp-result.pill-high {
    background: rgba(186, 67, 67, 0.14);
    color: #944040;
  }

  /* Funnel: rows that narrow downward (each width = % of first row).
     Centered visually so the trapezoid effect emerges. */
  .funnel-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }
  .funnel-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .funnel-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
  }
  .funnel-bar-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .funnel-bar {
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    transition: width 0.3s ease;
    min-width: 80px;
  }
  .funnel-value {
    font-size: 13px;
    font-weight: 700;
    color: white;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .funnel-pct {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
  }
  .funnel-step {
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 1px;
  }

  /* rankBar: ordered list of items with horizontal bars (left-anchored).
     Layout: [#] [label] [bar] [value] */
  .rank-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
  }
  .rank-row {
    display: grid;
    grid-template-columns: 18px 88px 1fr 56px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
  }
  .rank-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    text-align: center;
    background: var(--surface-soft, #f4eef0);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
  }
  .rank-label {
    font-weight: 600;
    color: var(--ink);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rank-bar-wrap {
    display: flex;
    height: 14px;
  }
  .rank-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
    min-width: 14px;
  }
  .rank-value {
    text-align: start;
    color: var(--ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Scatter chart: SVG fills the card, axis labels are sized for readability
     on mobile. The "wrap" centers the SVG and gives breathing room. */
  .scatter-wrap {
    margin-top: 6px;
    padding: 4px 0;
  }

  /* Treemap: SVG-based, RTL-friendly text inside cells. The wrap doesn't add
     padding because the cells already have a 1px white gap built in. */
  .treemap-wrap {
    margin-top: 6px;
    border-radius: 4px;
    overflow: hidden;
  }

  /* Radar/spider: SVG centered, optional legend below. */
  .radar-wrap {
    margin-top: 6px;
    padding: 6px 0;
  }
  .radar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--ink-2);
  }
  .radar-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .radar-legend-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
  }

  /* Animated counter: monospace tabular-nums so digits don't shift while
     counting. Slight glow on the brand color when used inline in headlines. */
  .anim-counter {
    font-variant-numeric: tabular-nums;
    display: inline-block;
  }

  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px dashed rgba(13,18,56,0.1);
    margin-top: 6px;
  }
  .stat-label { font-size: 11.5px; color: var(--ink-2); }
  .stat-value { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
  .stat-delta { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-inline-start: 6px; }
  .stat-delta.down { background: var(--bad-soft); color: var(--bad); }

  .member-list {
    display: flex; flex-direction: column; gap: 1px;
    background: rgba(13,18,56,0.06);
    border-radius: 9px;
    overflow: hidden;
    margin-top: 9px;
  }
  .member-row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: white; }
  .member-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: grid; place-items: center;
    font-size: 9px; font-weight: 700;
    color: var(--ink-2);
    flex-shrink: 0;
  }
  .member-info { flex: 1; min-width: 0; overflow: hidden; }
  .member-info > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .member-name { font-weight: 600; font-size: 12px; color: var(--ink); }
  .member-detail {
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 1px;
    /* Allow up to 2 lines instead of clipping with ellipsis after one. */
    white-space: normal;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .risk-pill { font-size: 9px; padding: 2px 7px; border-radius: 8px; font-weight: 700; flex-shrink: 0; }
  .risk-pill.high { background: var(--bad-soft); color: var(--bad); }
  .risk-pill.med { background: var(--warn-soft); color: var(--warn); }

  .mini-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 9px;
    padding: 10px 11px;
    background: white;
    border-radius: 9px;
    border: 1px solid rgba(13,18,56,0.05);
  }
  .mini-stat-label {
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .mini-stat-val {
    font-size: 18px; font-weight: 800;
    letter-spacing: -0.03em;
    margin-top: 2px; line-height: 1;
    color: var(--ink);
  }
  .mini-stat-val.bad { color: var(--bad); }
  .mini-stat-val.warn { color: var(--warn); }

  /* v229.10 — follow-up chips now feel attached to the reply:
       margin-top trimmed (9 → 3) so they sit just below the bubble,
       gap tightened, and justify-content:flex-start in RTL anchors
       them to the start side (visual right), matching the bubble's
       inner edge. Per-chip styling (smaller font, right-aligned text,
       reduced padding) lives in the .chip rule a few hundred lines
       below. */
  .action-chips {
    display: flex; flex-wrap: wrap;
    gap: 4px; margin-top: 3px;
    justify-content: flex-start;
  }

  /* === v228.5 + v228.9 — Actions row: ultra-compact, no separator.
     Pinned to the bubble's bottom edge with a generous gap above so
     the answer text and the actions feel like two distinct things. === */
  .msg-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;   /* v228.9 — was 2px; bigger gap = cleaner separation */
    padding-top: 0;
    gap: 0;
    opacity: 0.62;
    transition: opacity 0.2s;
  }
  .msg-bubble:hover .msg-actions { opacity: 1; }
  .msg-action-btn {
    display: inline-flex; align-items: center; gap: 3px;
    background: transparent; border: none;
    color: var(--ink-3);
    font-size: 9.5px;
    font-weight: 500;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
  }
  .msg-action-btn:hover {
    background: rgba(13,18,56,0.05);
    color: var(--ink-2);
  }
  .msg-action-btn:active { transform: scale(0.96); }
  .msg-action-btn svg { flex-shrink: 0; width: 11px; height: 11px; }
  .msg-action-btn span { font-size: 9.5px; }

  /* v228.5 + v228.11 — Star (favorite) toggle, icon-only.
     Off → outlined gray (DARKER stroke so it's visible against the cream
     bubble background, was var(--ink-3) — too faint).
     On → filled yellow with a quick scale-pop. */
  .msg-action-btn.reply-fav-btn { padding: 2px 4px; }
  .msg-action-btn.reply-fav-btn svg {
    width: 12px; height: 12px;
    transition: transform 0.18s cubic-bezier(.34,1.56,.64,1);
  }
  /* v229.82 — the OFF star relies on its INLINE svg attributes
     (fill="none" stroke="currentColor" stroke-width="2.2"), exactly like the
     working share icon. The v229.5 CSS `stroke: currentColor` override made the
     outline disappear (regression); we only keep non-paint props here so the
     inline stroke is what actually renders. */
  .msg-action-btn.reply-fav-btn.off svg {
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .msg-action-btn.reply-fav-btn.on svg {
    fill: #F5C842;
    stroke: #C49A26;
    transform: scale(1.05);
  }
  .msg-action-btn.reply-fav-btn:active svg { transform: scale(1.25); }
  /* dark mode: inline stroke="currentColor" inherits the button's --ink-3
     (already adjusted for dark), same as the share icon — no override needed. */
  html.theme-dark .msg-action-btn.reply-fav-btn.on svg {
    fill: #F5C842;
    stroke: #F5C842;
  }
  /* The wrapping container around the actual reply text — separates
     content from in-bubble actions for clean share/copy extraction. */
  .msg-bubble-text { display: block; }
  /* Dark theme: separator subtler */
  html.theme-dark .msg-actions {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  html.theme-dark .msg-action-btn:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  /* === v39: push notification opt-in banner === */
  .push-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fbeaf1 0%, #f0e6f8 100%);
    border: 1px solid rgba(124, 92, 255, 0.18);
    border-radius: 14px;
    padding: 12px 44px 12px 14px; /* extra inline-start padding leaves room for the close X */
    margin-bottom: 12px;
    font-size: 12.5px;
    line-height: 1.4;
    z-index: 2;
  }
  .push-banner-text {
    flex: 1;
    color: var(--ink);
    min-width: 0;
  }
  .push-banner-text strong { font-weight: 600; }
  .push-banner-text span   { color: var(--ink-2); font-size: 11.5px; }
  .push-banner-btn {
    background: linear-gradient(135deg, #7c5cff 0%, #d85a85 100%);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .push-banner-btn:hover { filter: brightness(1.05); }
  .push-banner-btn:active { transform: scale(0.97); }
  .push-banner-close {
    position: absolute;
    top: 50%;
    inset-inline-start: 6px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(13, 18, 56, 0.06);
    border: none;
    border-radius: 50%;
    color: var(--ink-2, #66677a);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .push-banner-close:hover { background: rgba(13, 18, 56, 0.12); }
  .push-banner-close:active { transform: translateY(-50%) scale(0.92); }
  /* v68: When the user has unread insights, the FAB is centered on top
     of where the banner would sit — that overlap made the banner
     unreachable. Hide the banner until insights are read, then it
     reappears. */
  /* v113: the push banner is no longer suppressed while insights are
     pending — push prompting must not depend on the insights state. */

  /* === v38: visual polish for LLM answers === */
  .msg-bubble .source-chip {
    display: inline-block;
    background: #f0eef9;
    color: #5b3fcc;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    margin: 0 3px;
    white-space: nowrap;
  }
  .msg-bubble .trend-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 9px;
    font-weight: 700;
    margin: 0 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .msg-bubble .trend-pill.trend-up   { background: #e8f5ee; color: #2e8b57; }
  .msg-bubble .trend-pill.trend-down { background: #fde9e9; color: #c44;    }

  /* v229.129 — wrap tables in a horizontal-scroll container so a wide table
     (many columns on a narrow phone) scrolls sideways instead of squishing each
     column to a few px and wrapping every word/letter vertically (unreadable). */
  .msg-bubble .llm-table-wrap {
    margin: 10px 0 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .msg-bubble .llm-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    background: #fafaf7;
    border-radius: 8px;
    overflow: hidden;
    direction: rtl;
  }
  .msg-bubble .llm-table th,
  .msg-bubble .llm-table td {
    padding: 6px 9px;
    text-align: right;
    border-bottom: 1px solid #ebe8e0;
    /* keep each cell on one line — the wrap container scrolls instead. */
    white-space: nowrap;
  }
  .msg-bubble .llm-table th {
    background: rgba(124,92,255,0.08);
    font-weight: 600;
  }
  .msg-bubble .llm-table tr:last-child td { border-bottom: none; }
  .msg-bubble .llm-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

  .msg-bubble .llm-list.bar-list { padding-inline-start: 0; }
  .msg-bubble .llm-list.bar-list li.bar-row {
    position: relative;
    padding: 5px 12px;
    margin: 4px 0;
    border-radius: 6px;
    background: linear-gradient(
      to left,
      rgba(124, 92, 255, 0.13) var(--bar-width, 0%),
      rgba(124, 92, 255, 0.00) var(--bar-width, 0%)
    );
  }
  .msg-bubble .llm-list.bar-list li.bar-row::before { display: none; }

  /* === v38: visual polish for LLM answers === */
  .msg-bubble .kpi-pill {
    display: inline-block;
    background: linear-gradient(135deg, #f6dde9 0%, #ebd8f1 100%);
    color: #5b3fcc;
    font-weight: 700;
    padding: 1px 9px;
    border-radius: 9px;
    margin: 0 2px;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 -1px 0 rgba(91,63,204,0.08);
    white-space: nowrap;
  }
  .msg-bubble .llm-list {
    margin: 6px 0 0;
    padding-inline-start: 0;
    list-style: none;
  }
  .msg-bubble .llm-list li {
    position: relative;
    padding-inline-start: 18px;
    margin: 4px 0;
    line-height: 1.5;
  }
  .msg-bubble .llm-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c98ef7 0%, #f49db8 100%);
  }
  .msg-bubble p { margin: 0 0 6px; }
  .msg-bubble p:last-child { margin-bottom: 0; }

  /* === v32: feedback (thumbs) on every bot answer. v228.5 tightened. === */
  .fb-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.55;
    transition: opacity .15s, background .15s, transform .12s;
    color: var(--ink-3);
  }
  .fb-btn:hover { opacity: 1; background: rgba(13,18,56,0.04); }
  .fb-btn:active { transform: scale(0.92); }
  .fb-btn.fb-active { opacity: 1; color: var(--ink-1); }

  /* === v65: onboarding wizard === */
  .onb-modal {
    position: fixed;
    inset: 0;
    background: rgba(13, 18, 56, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    direction: rtl;
  }
  .onb-modal.open { display: flex; animation: onb-fade-in 0.3s ease-out; }
  @keyframes onb-fade-in { from { opacity: 0; } to { opacity: 1; } }

  .onb-card {
    background: #fff;
    border-radius: 22px;
    max-width: 420px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    box-shadow: 0 40px 100px rgba(0,0,0,.32);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    direction: rtl;
    font-family: inherit;
    animation: onb-pop-in 0.32s cubic-bezier(0.32, 0.72, 0.4, 1.16);
  }
  @keyframes onb-pop-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }
  .onb-skip {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    background: rgba(13,18,56,0.05);
    color: var(--ink-3, #8a8a8a);
    border: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
  }
  .onb-skip:hover { background: rgba(13,18,56,0.10); }
  /* v225.4: large CTA button for Google/Push connect inside onboarding */
  .onb-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #7c5cff 0%, #d85a85 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(124, 92, 255, 0.28);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
  }
  .onb-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124, 92, 255, 0.36); }
  .onb-cta-btn:active { transform: scale(0.97); }
  .onb-cta-btn:disabled { opacity: 0.75; cursor: default; transform: none; box-shadow: none; }
  /* v246 — in-progress spinner shown on the push CTA while subscribing. */
  .onb-spin {
    display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
    margin-inline-end: 6px; border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff; border-radius: 50%; animation: onbSpin 0.7s linear infinite;
  }
  @keyframes onbSpin { to { transform: rotate(360deg); } }

  .onb-content { min-height: 280px; display: flex; flex-direction: column; gap: 10px; }
  .onb-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink, #1f1f1f);
    margin: 4px 0 2px;
    letter-spacing: -0.02em;
  }
  .onb-sub { color: var(--ink-2, #4a4a4a); font-size: 14px; line-height: 1.5; }

  /* Step 1: persona grid */
  .onb-personas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .onb-persona {
    flex: 1; min-width: 110px;
    background: #fafaf7;
    border: 2px solid rgba(13,18,56,0.08);
    border-radius: 16px;
    padding: 14px 8px 12px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    font-family: inherit;
  }
  .onb-persona:hover {
    transform: translateY(-3px);
    border-color: rgba(124,92,255,0.5);
    background: #fff;
    box-shadow: 0 6px 18px rgba(124,92,255,0.10);
  }
  .onb-persona.selected {
    border-color: var(--accent, #7c5cff);
    background: linear-gradient(135deg, rgba(124,92,255,0.06), rgba(216,90,133,0.04));
    box-shadow: 0 0 0 4px rgba(124,92,255,0.12);
  }
  .onb-persona .onb-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 8px;
    background: rgba(124,92,255,0.10);
    display: grid; place-items: center;
  }
  .onb-persona .onb-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .onb-persona .onb-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; color: var(--ink); }
  .onb-persona .onb-tag  { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

  /* Step 2: intro */
  .onb-intro {
    display: flex; gap: 14px; align-items: center;
    margin-bottom: 6px;
  }
  .onb-intro-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(124,92,255,0.10);
  }
  .onb-intro-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .onb-intro-bubble {
    background: #fafaf7;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    flex: 1;
    min-height: 80px;
  }
  .onb-rename-row {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 5px;
  }
  .onb-rename-row label {
    font-size: 12.5px;
    color: var(--ink-3);
  }
  .onb-rename-row input {
    padding: 9px 12px;
    border: 1px solid rgba(13,18,56,0.15);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    direction: rtl;
    background: #fafaf7;
  }
  .onb-rename-row input:focus {
    outline: none;
    border-color: var(--accent, #7c5cff);
    box-shadow: 0 0 0 3px rgba(124,92,255,0.12);
  }
  .onb-rename-hint { font-size: 11.5px; color: var(--ink-3); margin-top: -3px; }

  /* v75: gender pills in onboarding step 2 */
  .onb-gender-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .onb-gender-btn {
    flex: 1;
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid rgba(13,18,56,0.10);
    background: #fff;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink, #0d1238);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .onb-gender-btn:active { transform: scale(0.97); }
  .onb-gender-btn.selected {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.10), rgba(216, 90, 133, 0.08));
    border-color: rgba(124, 92, 255, 0.45);
    color: var(--accent-purple, #6b54d6);
    font-weight: 600;
  }

  /* Step 3: capabilities */
  .onb-caps { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .onb-cap {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fafaf7;
    border-radius: 10px;
    padding: 10px 12px;
  }
  .onb-cap-icon {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(216,90,133,0.12));
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: 15px;
    flex-shrink: 0;
  }
  .onb-cap-body { flex: 1; }
  .onb-cap-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
  .onb-cap-desc  { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
  .onb-tip {
    background: linear-gradient(135deg, rgba(245,207,100,0.18), rgba(232,176,64,0.10));
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #7c5e0d;
    line-height: 1.5;
    margin-top: 6px;
  }
  .onb-tip strong { color: #b88515; }

  /* Dark theme (item 5) — the onboarding modal was pure light (white card + light
     child surfaces) → a jarring white flash on first run over the dark app. Flip
     the card + its surfaces here; text colours follow from the scoped ink vars. */
  html.theme-dark .onb-card {
    --ink: #ECECF1; --ink-2: rgba(255,255,255,0.82); --ink-3: rgba(255,255,255,0.55);
    background: #1b1c24;
    box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  }
  html.theme-dark .onb-skip { background: rgba(255,255,255,0.08); }
  html.theme-dark .onb-skip:hover { background: rgba(255,255,255,0.14); }
  html.theme-dark .onb-persona { background: #23242e; border-color: rgba(255,255,255,0.10); }
  html.theme-dark .onb-persona:hover { background: #282a35; }
  html.theme-dark .onb-intro-bubble { background: #23242e; }
  html.theme-dark .onb-rename-row input { background: #23242e; border-color: rgba(255,255,255,0.14); color: #ECECF1; }
  html.theme-dark .onb-gender-btn { background: #23242e; border-color: rgba(255,255,255,0.12); color: #ECECF1; }
  html.theme-dark .onb-cap { background: #23242e; }

  /* Footer */
  .onb-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 6px; padding-top: 12px;
    border-top: 1px solid rgba(13,18,56,0.05);
  }
  .onb-dots { display: flex; gap: 6px; }
  .onb-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(13,18,56,0.12);
    transition: background 0.2s, transform 0.2s;
  }
  .onb-dot.active {
    background: linear-gradient(135deg, var(--accent, #7c5cff), #d85a85);
    transform: scale(1.25);
  }
  .onb-next {
    background: linear-gradient(135deg, var(--accent, #7c5cff), #d85a85);
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s, box-shadow 0.15s;
    box-shadow: 0 4px 12px rgba(124,92,255,0.2);
  }
  .onb-next:hover { box-shadow: 0 6px 16px rgba(124,92,255,0.32); }
  .onb-next:active { transform: scale(0.97); }
  .onb-next:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

  /* Typewriter cursor blink */
  .onb-cursor {
    display: inline-block;
    width: 2px; height: 1em;
    background: var(--accent);
    vertical-align: -2px;
    margin-inline-start: 1px;
    animation: onb-blink 0.9s steps(2) infinite;
  }
  @keyframes onb-blink { 50% { opacity: 0; } }

  /* The modal overlay */
  .fb-modal {
    position: fixed;
    inset: 0;
    background: rgba(13,18,56,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 18px;
    -webkit-tap-highlight-color: transparent;
  }
  .fb-modal.open { display: flex; }
  .fb-modal-card {
    background: #fff;
    border-radius: 18px;
    max-width: 360px;
    width: 100%;
    padding: 18px 18px 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    gap: 12px;
    direction: rtl;
    font-family: inherit;
  }
  .fb-modal h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
  }
  .fb-modal .fb-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .fb-tag {
    appearance: none;
    border: 1px solid rgba(13,18,56,0.15);
    background: #fafaf7;
    color: var(--ink-2);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
  }
  .fb-tag.active {
    background: var(--accent, #7c5cff);
    color: #fff;
    border-color: transparent;
  }
  .fb-modal textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid rgba(13,18,56,0.15);
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    direction: rtl;
    box-sizing: border-box;
  }
  .fb-modal .fb-row {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 4px;
  }
  .fb-modal button.fb-submit {
    background: var(--grad-cta, #7c5cff);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }
  .fb-modal button.fb-cancel {
    background: #eee;
    color: var(--ink-1);
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
  }
  /* === v51: upload data modal === */
  .up-modal {
    position: fixed;
    inset: 0;
    background: rgba(13, 18, 56, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 18px;
    -webkit-tap-highlight-color: transparent;
  }
  .up-modal.open { display: flex; }
  .up-modal-card {
    background: #fff;
    border-radius: 18px;
    max-width: 380px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 18px 18px 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
    direction: rtl;
    font-family: inherit;
    position: relative;
  }
  .up-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(13, 18, 56, 0.06);
    border: none;
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, transform 0.12s;
  }
  .up-close:hover { background: rgba(13, 18, 56, 0.12); }
  .up-close:active { transform: scale(0.92); }
  .up-modal h3 {
    font-size: 16px;
    margin: 0;
    padding-inline-end: 38px;
    color: var(--ink-1, #1f1f1f);
    font-weight: 700;
  }
  .up-explain {
    font-size: 12.5px;
    color: var(--ink-2, #4a4a4a);
    margin: 0 0 6px;
    line-height: 1.5;
  }
  .up-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
  }
  .up-tab {
    flex: 1;
    background: #fff;
    border: 1.5px solid rgba(13, 18, 56, 0.12);
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    color: var(--ink-2);
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
  }
  .up-tab:hover {
    border-color: rgba(13, 18, 56, 0.22);
    background: #fafafa;
  }
  .up-tab:active { transform: scale(0.98); }
  .up-tab.active {
    background: linear-gradient(135deg, rgba(45, 156, 219, 0.10), rgba(45, 156, 219, 0.04));
    border-color: rgba(45, 156, 219, 0.55);
    color: #185fa5;
    font-weight: 700;
  }
  .up-paths { display: flex; gap: 6px; margin: 0 0 12px; }
  .up-path-btn {
    flex: 1; background: #fff; border: 1.5px solid rgba(13, 18, 56, 0.12);
    padding: 11px 10px; border-radius: 11px; font-size: 13px; font-family: inherit;
    cursor: pointer; color: var(--ink-2); font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .up-path-btn.active {
    background: linear-gradient(135deg, rgba(45, 156, 219, 0.12), rgba(45, 156, 219, 0.05));
    border-color: rgba(45, 156, 219, 0.6); color: #185fa5; font-weight: 700;
  }
  .up-report-result { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
  .up-report-result a { color: #185fa5; font-weight: 700; }
  .up-report-share { background: rgba(45,156,219,0.06); border: 1px solid rgba(45,156,219,0.25); border-radius: 10px; padding: 10px; margin: 0 0 12px; }
  .up-report-share-t { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-bottom: 7px; }
  .up-report-email-row { display: flex; gap: 6px; align-items: center; }
  .up-report-email-row code { flex: 1; background: #fff; border: 1px solid rgba(13,18,56,0.14); border-radius: 7px; padding: 7px 8px; font-size: 11px; direction: ltr; text-align: left; overflow: auto; white-space: nowrap; }
  .up-copy-btn { background: #185fa5; color: #fff; border: 0; border-radius: 7px; padding: 7px 13px; font-size: 12px; font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .up-copy-btn:active { transform: scale(0.97); }
  .up-hidden { display: none; }
  .up-label {
    font-size: 11.5px;
    color: var(--ink-3);
    margin: 4px 0 -4px;
  }
  .up-input, .up-textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(13, 18, 56, 0.15);
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    background: #fafaf7;
    box-sizing: border-box;
  }
  .up-textarea {
    min-height: 56px;
    resize: vertical;
    direction: rtl;
  }
  /* v229.12 — overwrite warning for the upload modal */
  .up-existing-warn {
    margin-top: 6px;
    padding: 8px 11px;
    background: #fff7e6;
    border: 1px solid #f0c987;
    border-radius: 8px;
    color: #8a5a00;
    font-size: 12px;
    line-height: 1.4;
  }
  html.theme-dark .up-existing-warn {
    background: rgba(240, 201, 135, 0.12);
    border-color: rgba(240, 201, 135, 0.35);
    color: #f0c987;
  }
  /* Dark mode for the "מידע נוסף משלי" upload modal — the card + every control. */
  html.theme-dark .up-modal-card { background: #23242e; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
  html.theme-dark .up-modal h3 { color: #ECECF1; }
  html.theme-dark .up-explain,
  html.theme-dark .up-label,
  html.theme-dark .up-report-share-t,
  html.theme-dark .up-report-result { color: rgba(255,255,255,0.72); }
  html.theme-dark .up-close { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
  html.theme-dark .up-close:hover { background: rgba(255,255,255,0.14); }
  html.theme-dark .up-tab,
  html.theme-dark .up-path-btn { background: #2a2b36; border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.78); }
  html.theme-dark .up-tab:hover { background: #30313c; border-color: rgba(255,255,255,0.22); }
  html.theme-dark .up-tab.active,
  html.theme-dark .up-path-btn.active { background: linear-gradient(135deg, rgba(45,156,219,0.22), rgba(45,156,219,0.08)); border-color: rgba(45,156,219,0.6); color: #7cc4f0; }
  html.theme-dark .up-input,
  html.theme-dark .up-textarea { background: #2a2b36; border-color: rgba(255,255,255,0.14); color: #ECECF1; }
  html.theme-dark .up-report-share { background: rgba(45,156,219,0.1); border-color: rgba(45,156,219,0.3); }
  html.theme-dark .up-report-email-row code { background: #2a2b36; border-color: rgba(255,255,255,0.14); color: #ECECF1; }
  /* Dark mode for the "מועדפות" bottom-sheet popup. */
  html.theme-dark .fav-popup { background: linear-gradient(180deg, #23242e, #1d1e26); box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
  html.theme-dark .fav-popup-title { color: #ECECF1; }
  html.theme-dark .fav-popup-handle { background: rgba(255,255,255,0.24); }
  html.theme-dark .fav-popup-close { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
  html.theme-dark .fav-popup-close:active { background: rgba(255,255,255,0.14); }
  html.theme-dark .fav-cat-title,
  html.theme-dark .fav-q-text { color: #ECECF1; }
  html.theme-dark .fav-q-row { background: rgba(255,255,255,0.06); }
  html.theme-dark .fav-q-row:active { background: rgba(255,255,255,0.10); }
  html.theme-dark .fav-empty-title { color: #ECECF1; }
  html.theme-dark .fav-empty-text { color: rgba(255,255,255,0.58); }
  /* v62: free-text tab actions */
  .up-text-row { margin-bottom: 8px; }
  .up-text-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
  }
  /* v63: align with composer's mic button — purple/pink gradient default,
     red gradient + equalizer when recording, spinning when processing. */
  .up-mic-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 12px;
    border: 1px solid rgba(13,18,56,0.09);
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.06) 0%, rgba(216, 90, 133, 0.05) 100%);
    color: var(--accent-purple, #6b54d6);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .up-mic-btn:hover {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.12) 0%, rgba(216, 90, 133, 0.10) 100%);
  }
  .up-mic-btn:active { transform: scale(0.96); }
  .up-mic-btn svg { flex-shrink: 0; }

  .up-mic-btn.is-recording {
    background: linear-gradient(135deg, #e64759 0%, #b02838 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(216, 51, 68, 0.18);
    animation: mic-pulse-bg 1.1s ease-in-out infinite;
  }
  .up-mic-btn.is-recording svg.mic-icon { display: none; }
  .up-mic-btn .rec-eq { display: none; }
  .up-mic-btn.is-recording .rec-eq { display: inline-flex; }

  /* v122: feedback-comment mic button — was missing every CSS rule.
     Mirrors the .up-mic-btn family so it matches the rest of the app. */
  .fb-mic-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 12px;
    border: 1px solid rgba(13,18,56,0.09);
    background: linear-gradient(135deg, rgba(124,92,255,0.06) 0%, rgba(216,90,133,0.05) 100%);
    color: var(--accent-purple, #6b54d6);
    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 0.15s, transform 0.12s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .fb-mic-btn:hover {
    background: linear-gradient(135deg, rgba(124,92,255,0.12) 0%, rgba(216,90,133,0.10) 100%);
  }
  .fb-mic-btn:active { transform: scale(0.96); }
  .fb-mic-btn svg { flex-shrink: 0; }
  .fb-mic-btn.is-recording {
    background: linear-gradient(135deg, #e64759 0%, #b02838 100%);
    color: #fff; border-color: transparent;
    box-shadow: 0 0 0 4px rgba(216,51,68,0.18);
    animation: mic-pulse-bg 1.1s ease-in-out infinite;
  }
  .fb-mic-btn.is-recording svg.mic-icon { display: none; }
  .fb-mic-btn .rec-eq {
    display: none; align-items: flex-end; justify-content: center;
    gap: 2px; height: 14px; width: 16px;
  }
  .fb-mic-btn.is-recording .rec-eq { display: inline-flex; }
  .fb-mic-btn .rec-eq span {
    display: inline-block; width: 3px; border-radius: 2px;
    background: currentColor; transform-origin: center bottom;
    animation: rec-eq-bounce 0.9s ease-in-out infinite;
  }
  .fb-mic-btn .rec-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
  .fb-mic-btn .rec-eq span:nth-child(2) { height: 90%; animation-delay: 0.2s; }
  .fb-mic-btn .rec-eq span:nth-child(3) { height: 60%; animation-delay: 0.4s; }
  .fb-mic-btn .rec-eq span:nth-child(4) { height: 80%; animation-delay: 0.6s; }

  .up-mic-btn.is-processing {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.10) 0%, rgba(216, 90, 133, 0.08) 100%);
    color: var(--accent, #7c5cff);
    pointer-events: none;
    opacity: 0.85;
  }
  .up-mic-btn.is-processing svg.mic-icon {
    animation: mic-spin 1s linear infinite;
    transform-origin: center;
  }
  /* Hide the report_id + description fields when in text-mode */
  .up-modal.text-mode .up-hide-for-text { display: none !important; }
  .up-sa-box {
    background: #fff8e1;
    border: 1px solid #efd472;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 11.5px;
    color: #7c5e0d;
    line-height: 1.5;
  }
  .up-sa-box code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #444;
    word-break: break-all;
  }
  .up-status {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f0eef9;
    color: #5b3fcc;
    font-size: 12px;
  }
  .up-status.ok  { background: #e8f5ee; color: #2e8b57; }
  .up-status.err { background: #fde9e9; color: #c44; }
  .up-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .up-btn-cancel, .up-btn-submit {
    border: none;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .up-btn-cancel { background: #ececec; color: var(--ink-1, #1f1f1f); }
  .up-btn-submit { background: var(--accent, #7c5cff); color: #fff; }

  .fb-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20,24,60,0.94);
    color: #fff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 14px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    max-width: 84%;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
  }
  .fb-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }


  /* Favorite toggle inside a reply bubble. Star is filled gold when the
     question is in the user's favorites, outlined when it's not.
     Bouncing on tap matches the popup's behavior so the affordance feels
     consistent across both surfaces. */
  /* v229.4 — Legacy .reply-fav-btn rules removed. They competed with the
     newer .msg-action-btn.reply-fav-btn rules (used in the in-bubble
     actions row from v228.4+) and were styling the star with too-pale
     stroke. The bounce animation moved to the new selector. */
  .msg-action-btn.reply-fav-btn.bounce svg { transform: scale(1.4); }

  /* Toast that appears when share is pressed */
  .share-toast {
    position: fixed;
    bottom: 90px;          /* above the composer */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20, 24, 60, 0.94);
    color: white;
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(13,18,56,0.25);
    display: flex; align-items: center; gap: 7px;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 90%;
  }
  .share-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .share-toast svg {
    color: #6ee7a8;
    flex-shrink: 0;
  }

  .chip {
    /* v229.10 — more compact + right-aligned (RTL start) so multi-line
       chips read naturally in the conversation flow instead of looking
       centered/loose. */
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid rgba(13,18,56,0.12);
    background: white;
    font-size: 10.5px;
    color: var(--ink-2);
    font-weight: 500;
    /* v31: allow long chip text to wrap inside the chip so the chip never
       grows wider than the bubble (which used to push the layout sideways). */
    white-space: normal;
    line-height: 1.3;
    text-align: start;
    max-width: 100%;
    word-break: break-word;
  }
  .chip.primary {
    background: var(--grad-cta);
    color: white;
    border-color: transparent;
    font-weight: 600;
  }

  /* Insight cards (proactive) */
  .insight-card {
    background: white;
    border: 1px solid rgba(13,18,56,0.06);
    border-radius: 16px;
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    animation: cardIn 0.5s ease-out;
  }
  .insight-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--ink-2);
    font-size: 19px;
    line-height: 1;
    background: rgba(13,18,56,0.07);
    border: none;
    z-index: 2;
    transition: background 0.15s, color 0.15s, transform 0.12s;
    cursor: pointer;
  }
  .insight-close:active { transform: scale(0.92); }
  .insight-close:hover, .insight-close:active {
    background: rgba(13,18,56,0.06);
    color: var(--ink);
  }
  /* Dismissal animation — collapses the card vertically and fades out */
  .insight-card.dismissing {
    opacity: 0;
    transform: scale(0.96);
    max-height: 0 !important;
    margin-top: -16px !important; /* eat the conversation gap */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.3s ease 0.05s, margin 0.3s ease 0.05s, padding 0.3s ease 0.05s;
    pointer-events: none;
  }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .insight-card::before {
    content:''; position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grad-cta);
  }
  .insight-card.warn::before { background: var(--warn); }
  .insight-head {
    display: flex; align-items: center;
    gap: 8px; margin-bottom: 8px;
    padding-inline-end: 28px; /* leave room for the close X */
  }
  .insight-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent);
  }
  .insight-card.warn .insight-tag { color: var(--warn); background: var(--warn-soft); }
  .insight-tag svg { width: 9px; height: 9px; }
  .insight-time { font-size: 10px; color: var(--ink-3); margin-inline-start: auto; }
  .insight-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    margin-bottom: 7px;
    color: var(--ink);
  }
  .insight-title .grad {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .insight-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
  .insight-body strong { color: var(--ink); font-weight: 600; }
  .insight-actions {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed rgba(13,18,56,0.1);
    align-items: center;
  }
  .dismiss-btn {
    margin-inline-start: auto;
    color: var(--ink-3);
    font-size: 10px;
    padding: 4px 6px;
  }

  /* Composer */
  .composer-wrap {
    flex-shrink: 0;
    /* v104: carry the home-indicator safe-area at the bottom so the
       composer can sit flush against the phone edge.
       v224.0b: top padding bumped from 0 → 12px so the textarea doesn't
       feel jammed against the top edge of the composer background tint
       now that the suggest-row chips are gone. */
    padding: 12px 14px max(6px, env(safe-area-inset-bottom));
    /* v226.9a — same off-white as the top header. No border; the shade
       difference vs the main bg provides separation on its own. */
    background: #FAF8F2;
    border-top: none;
  }
  @media (display-mode: standalone) {
    .composer-wrap {
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
  }
  .suggest-row {
    display: flex; gap: 6px;
    overflow-x: auto;
    margin: 0 -14px 2px;
    padding: 0 14px 1px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .suggest-row::-webkit-scrollbar { display: none; }
  .suggest {
    flex-shrink: 0;
    font-size: 11px;
    padding: 6px 11px;
    border-radius: 14px;
    border: 1px dashed rgba(13,18,56,0.18);
    color: var(--ink-2);
    white-space: nowrap;
    background: rgba(255,255,255,0.5);
  }
  .suggest .ico {
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-inline-end: 4px;
    font-weight: 700;
  }

  .composer {
    background: white;
    border: 1px solid rgba(13,18,56,0.1);
    border-radius: 24px;
    padding: 4px;
    padding-inline-start: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: var(--shadow-sm);
  }
  .composer:focus-within {
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(126,111,212,0.1);
  }
  .composer input,
  .composer textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    /* iOS auto-zooms on focus when font-size < 16px. Keep at 16px to prevent it. */
    font-size: 16px;
    padding: 9px 0;
    color: var(--ink);
    min-width: 0;
  }

  .composer textarea {
    resize: none;
    overflow-y: auto;
    /* v229.2 — line-height 1.4 was making text sit visually below center;
       tighter line-height + symmetric padding centers text in the bubble. */
    min-height: 24px;
    max-height: 120px;
    line-height: 1.25;
    padding-top: 6px;
    padding-bottom: 6px;
    font-family: inherit;
  }
  .composer input::placeholder,
  .composer textarea::placeholder { color: var(--ink-3); }
  .composer .ico-mic {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: var(--ink-3);
    cursor: pointer;
    transition: color .15s, background .15s, transform .12s;
  }
  .composer .ico-mic:hover { background: rgba(13,18,56,0.05); }
  .composer .ico-mic:active { transform: scale(0.92); }
  .composer .ico-mic svg { width: 14px; height: 14px; transition: transform .2s; }

  /* v33: recording state — red, pulsing */
  .composer .ico-mic.is-recording {
    color: #d83344;
    background: rgba(216, 51, 68, 0.10);
  }
  .composer .ico-mic.is-recording svg {
    animation: mic-pulse 1.1s ease-in-out infinite;
  }
  @keyframes mic-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
  }
  /* v33: processing state — dimmed, no interaction */
  .composer .ico-mic.is-processing {
    color: var(--accent, #7c5cff);
    pointer-events: none;
  }
  .composer .ico-mic.is-processing svg {
    animation: mic-spin 1s linear infinite;
    transform-origin: center;
  }
  @keyframes mic-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* === v48: secondary action row below the composer (v49: tighter top margin) === */
  .composer-actions {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    padding: 0 2px;
    align-items: center;   /* v104: lets the mic button be taller than the rest */
  }
  .composer-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(13, 18, 56, 0.09);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-width: 0;
  }
  /* v224: 2-line labels for the three right-side buttons. Each label has a
     <br> inside, so we let it wrap naturally and center on both lines. */
  .composer-action-btn .ca-label {
    overflow: hidden;
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }
  .composer-action-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .composer-action-btn:active { transform: scale(0.96); }

  .composer-action-btn.mic-action {
    /* v226.9 — unified neutral bg. Only the icon keeps its accent color. */
    background: rgba(255, 255, 255, 0.90);
    color: var(--ink-2);
    border-color: rgba(13, 18, 56, 0.09);
    flex: 1.5;
    height: 52px;
    font-size: 13px;
    font-weight: 600;
  }
  .composer-action-btn.mic-action svg { color: #7c5cff; }
  /* v224: mic label is single-word "הקלטה", override wrap for cleaner look. */
  .composer-action-btn.mic-action .ca-label { white-space: nowrap; color: var(--ink-2); }
  .composer-action-btn.mic-action:hover {
    background: rgba(255, 255, 255, 1);
  }

  /* v226.11 — recording state. Red bg removed (was too aggressive on the
     new cream palette). Keep the icon pulse animation + a subtle red dot
     that signals "live recording" without overwhelming the whole button. */
  .composer-action-btn.mic-action.is-recording {
    background: rgba(255, 255, 255, 0.90);
    color: var(--ink-2);
    border-color: rgba(13, 18, 56, 0.09);
    /* Soft red halo pulse — gentle, not red bg */
    animation: mic-pulse-halo 1.1s ease-in-out infinite;
  }
  .composer-action-btn.mic-action.is-recording svg {
    color: #e64759;
    animation: mic-pulse-icon 1.1s ease-in-out infinite;
  }
  @keyframes mic-pulse-halo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216, 51, 68, 0.14); }
    50%      { box-shadow: 0 0 0 6px rgba(216, 51, 68, 0.04); }
  }
  @keyframes mic-pulse-icon {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
  }

  /* v50: live equalizer animation shown while recording */
  .composer-action-btn .rec-eq {
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 18px;
    width: 18px;
  }
  .composer-action-btn .rec-eq span {
    display: inline-block;
    width: 3px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center bottom;
    animation: rec-eq-bounce 0.9s ease-in-out infinite;
  }
  .composer-action-btn .rec-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
  .composer-action-btn .rec-eq span:nth-child(2) { height: 90%; animation-delay: 0.2s; }
  .composer-action-btn .rec-eq span:nth-child(3) { height: 60%; animation-delay: 0.4s; }
  .composer-action-btn .rec-eq span:nth-child(4) { height: 80%; animation-delay: 0.6s; }
  @keyframes rec-eq-bounce {
    0%, 100% { transform: scaleY(0.3); }
    50%      { transform: scaleY(1); }
  }
  /* When recording: hide the static mic icon, show the eq */
  .composer-action-btn.mic-action.is-recording .mic-icon { display: none; }
  .composer-action-btn.mic-action.is-recording .rec-eq { display: inline-flex; }

  /* v48: processing — spinning */
  .composer-action-btn.mic-action.is-processing {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.10) 0%, rgba(216, 90, 133, 0.08) 100%);
    color: var(--accent, #7c5cff);
    pointer-events: none;
    opacity: 0.85;
  }
  .composer-action-btn.mic-action.is-processing svg {
    animation: mic-spin 1s linear infinite;
    transform-origin: center;
  }
  /* v53: while the transcription is running, the typewriter is filling the
     textarea — hide the redundant "לחץ להקלטה" label so only the spinning
     icon is visible. Label returns automatically when processing ends. */
  .composer-action-btn.mic-action.is-processing .ca-label {
    display: none;
  }

  /* v226.9 — all 4 buttons share the same neutral white surface. Only the
     icon (svg) gets its accent color so the buttons feel cohesive and
     less "rainbow-ish". Labels are neutral dark gray. */
  .composer-action-btn.upload-action,
  .composer-action-btn.fav-action,
  .composer-action-btn.reports-action {
    background: rgba(255, 255, 255, 0.90);
    color: var(--ink-2);
    border-color: rgba(13, 18, 56, 0.09);
  }
  .composer-action-btn.upload-action:hover,
  .composer-action-btn.fav-action:hover,
  .composer-action-btn.reports-action:hover {
    background: rgba(255, 255, 255, 1);
  }
  .composer-action-btn.upload-action svg  { color: #2078b5; }
  .composer-action-btn.fav-action svg     { color: #F5C842; }
  .composer-action-btn.reports-action svg { color: #6b54d6; }

  /* Favorites star button — same shape as the mic, but with a warm gold
     gradient so it pops against the muted greys around it. The fill is
     SOLID (not outlined) because in this mockup all questions are favorited
     by default, and the button itself represents "open your favorites". */
  .composer .ico-fav {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: #c89327;
    background: linear-gradient(135deg, rgba(245, 207, 100, 0.18), rgba(232, 176, 64, 0.10));
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .composer .ico-fav svg {
    width: 15px; height: 15px;
    filter: drop-shadow(0 1px 1.5px rgba(200, 147, 39, 0.25));
  }
  .composer .ico-fav:active {
    transform: scale(0.92);
    background: linear-gradient(135deg, rgba(245, 207, 100, 0.32), rgba(232, 176, 64, 0.22));
  }

  /* === Favorites popup === */
  /* Translucent backdrop. Hidden by default, fades in when popup opens. */
  .fav-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 14, 30, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 60;
    border-radius: inherit;
  }
  .fav-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* The popup itself slides up from the bottom edge. It rises above the
     composer (z-index higher) and stops just below the top status bar so
     the user still sees the phone chrome. Max-height controls scroll
     behaviour for the long question list. */
  .fav-popup {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 75%;
    background: linear-gradient(180deg, #faf6f9, #f3eef1);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 24px rgba(80, 50, 95, 0.12);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.94, 0.36, 1.0);
    display: flex;
    flex-direction: column;
    z-index: 70;
    overflow: hidden;
  }
  .fav-popup.open {
    transform: translateY(0);
  }
  /* Drag handle visual cue at the top */
  .fav-popup-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(80, 50, 95, 0.22);
    margin: 8px auto 0;
    flex-shrink: 0;
  }
  .fav-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 8px;
    flex-shrink: 0;
  }
  .fav-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .fav-popup-close {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-2);
    background: rgba(80, 50, 95, 0.06);
    transition: background 0.15s ease;
  }
  .fav-popup-close:active { background: rgba(80, 50, 95, 0.12); }
  .fav-popup-body {
    overflow-y: auto;
    padding: 0 14px 18px;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* Each category is a soft tinted card. The tint subtly differs per
     category so the eye groups questions visually as it scrolls. The
     category emoji and title sit at the top, full-width, weight 700. */
  .fav-cat {
    margin: 12px 0;
    border-radius: 14px;
    padding: 12px 14px;
  }
  .fav-cat-money    { background: rgba(180, 145, 60, 0.10); }
  .fav-cat-people   { background: rgba(126, 111, 212, 0.10); }
  .fav-cat-risk     { background: rgba(201, 112, 112, 0.10); }
  .fav-cat-trial    { background: rgba(92, 184, 138, 0.10); }
  .fav-cat-activity { background: rgba(224, 139, 181, 0.10); }
  .fav-cat-ops      { background: rgba(94, 132, 175, 0.10); }

  .fav-cat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.005em;
  }
  .fav-cat-questions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Each row: clickable area on the right (visual order = label + ico),
     star button on the left. Tapping the row sends the question; tapping
     just the star toggles the favorite state with a small bounce. */
  .fav-q-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: background 0.15s ease;
  }
  .fav-q-row:active {
    background: rgba(255, 255, 255, 0.95);
  }
  .fav-q-text {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    text-align: start;
    line-height: 1.35;
    cursor: pointer;
  }
  .fav-q-star {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.18s cubic-bezier(0.4, 1.6, 0.6, 1);
  }
  .fav-q-star svg {
    width: 16px; height: 16px;
    transition: fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
  }
  /* Star FILLED state (favorite is on) — gold filled */
  .fav-q-star.on svg {
    fill: #f0b740;
    stroke: #c89327;
    stroke-width: 1.5;
  }
  /* Star EMPTY state (favorite removed) — outlined only */
  .fav-q-star.off svg {
    fill: transparent;
    stroke: var(--ink-3);
    stroke-width: 1.8;
  }
  /* Click bounce — applied transiently when the user taps the star */
  .fav-q-star.bounce {
    transform: scale(1.3);
  }

  /* v224: Monthly summary popup variant. Same panel shape, lavender header
     tint, and the rows have a small "📊" chip on the left instead of a star. */
  .monthly-popup {
    background: linear-gradient(180deg, #f7f4fb, #ece5f3);
  }
  .monthly-popup .fav-popup-title {
    color: #4a3b8a;
  }
  .monthly-popup .fav-popup-handle {
    background: rgba(74, 59, 138, 0.25);
  }
  .monthly-popup .fav-popup-close {
    color: #4a3b8a;
    background: rgba(74, 59, 138, 0.07);
  }
  .monthly-popup .fav-popup-close:active { background: rgba(74, 59, 138, 0.15); }
  /* Period sub-label shown under the title (e.g. "אפריל 2026 · חודש מלא אחרון") */
  .monthly-period-sub {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: 0.01em;
  }
  /* In the monthly popup, rows don't have a star button — just text + a
     subtle arrow on the start side so the user knows the row is tappable. */
  .monthly-popup .fav-q-row {
    cursor: pointer;
  }
  .monthly-popup .fav-q-row::after {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.4;
    /* RTL chevron pointing toward the inline-start (right in RTL) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23463a78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  }

  /* When the user removes a question from favorites, animate the row out
     before removing it from the DOM. Same for empty categories. */
  .fav-q-row.fading-out,
  .fav-cat.fading-out {
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
    opacity: 0;
    transform: translateX(-12px);  /* RTL: slides toward the start (visual right→left) */
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Empty state when nothing is favorited — friendly, not error-y. */
  .fav-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    color: var(--ink-2);
  }
  .fav-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.55;
  }
  .fav-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .fav-empty-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-3);
    max-width: 240px;
  }
  .send-btn {
    width: 36px; height: 36px;
    border-radius: 18px;
    background: var(--grad-cta);
    color: white;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(213,111,168,0.3);
  }
  .send-btn svg { width: 14px; height: 14px; }
  /* v229.130 — stop state (while generating): solid dark circle + white square. */
  .send-btn.is-stop { background: #3a3a44; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
  .send-btn.is-stop svg { width: 16px; height: 16px; }

  /* v229.131 — mic button living INSIDE the composer pill (icon only). Overrides
     the bottom-row .composer-action-btn base so it's a compact round icon next
     to the send button. State classes (.is-recording/.is-processing) still drive
     the equalizer + pulse animations. */
  .composer .composer-mic {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 17px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 0;
    place-items: center;
  }
  .composer .composer-mic:hover { background: rgba(13,18,56,0.06); }
  /* v239.4 — is-recording intentionally NOT overridden here: the white bg +
     pulsing halo from .composer-action-btn.mic-action.is-recording stays so
     the button remains visible and tappable during sticky recording.
     Keep the mic SVG icon visible (override the global hide-icon rule) and
     hide the eq bars — in a 34px compact button the icon is the clearest
     "tap me again to stop" signal. The icon already animates red + pulse. */
  .composer .composer-mic.is-recording .mic-icon { display: inline-block; }
  .composer .composer-mic.is-recording .rec-eq   { display: none; }
  .composer .composer-mic.is-processing { background: transparent; border: none; }
  .composer .composer-mic svg { width: 18px; height: 18px; }

  /* Tab bar */
  .tabbar {
    /* Tabs were removed for a cleaner mobile layout. We keep an empty
       spacer so the composer sits at roughly the same vertical position
       it had before, with Tzion's feet aligned to the chip bar. The
       background extends the chip-bar tint to the bottom edge of the screen. */
    flex-shrink: 0;
    height: 50px;
    background: rgba(250, 245, 234, 0.85);
    border: none;
    padding: 0;
  }
  .tabbar .tab { display: none; }
  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 500;
    position: relative;
  }
  .tab svg { width: 19px; height: 19px; }
  .tab.active { color: var(--ink); font-weight: 600; }
  .tab.active svg { stroke: url(#tabGrad); }
  .tab .tab-badge {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(14px);
    background: var(--grad-cta);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    border: 2px solid white;
  }

  .home-indicator {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 3px;
    background: var(--ink);
    border-radius: 2px;
    z-index: 10;
    opacity: 0.6;
  }

  /* === Tab views (Members, Reports) ===
     The chat view is composed of pulse-strip + chat-area + composer-wrap, all
     marked .view-chat-only. Members and Reports views are .view-tab containers
     that take over the chat-area's vertical space when their tab is active. */
  .view-chat-only[hidden],
  .view-tab[hidden] { display: none !important; }
  .view-tab {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .view-tab::-webkit-scrollbar { width: 0; }

  /* === Members view === */
  .mv-search {
    display: flex; align-items: center; gap: 8px;
    background: white;
    border: 1px solid rgba(13,18,56,0.08);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
  }
  .mv-search svg { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
  .mv-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 13px; color: var(--ink); min-width: 0;
    font-family: inherit;
  }
  .mv-search input::placeholder { color: var(--ink-3); }

  .mv-filters {
    display: flex; gap: 6px; overflow-x: auto;
    margin: 0 -16px; padding: 2px 16px;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  .mv-filters::-webkit-scrollbar { display: none; }
  .mv-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px;
    border-radius: 100px;
    background: white;
    border: 1px solid rgba(13,18,56,0.08);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .mv-chip span {
    font-size: 10px;
    color: var(--ink-3);
    background: rgba(13,18,56,0.05);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 700;
  }
  .mv-chip.active {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }
  .mv-chip.active span {
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
  }
  .mv-chip.risk span { background: var(--bad-soft); color: var(--bad); }

  .mv-list {
    display: flex; flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(13,18,56,0.05);
  }
  .mv-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(13,18,56,0.05);
  }
  .mv-row:last-child { border-bottom: none; }
  .mv-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--grad-logo);
    color: white;
    display: grid; place-items: center;
    font-weight: 700; font-size: 11.5px;
    flex-shrink: 0;
  }
  .mv-info { flex: 1; min-width: 0; }
  .mv-name {
    font-size: 13px; font-weight: 600;
    color: var(--ink);
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 2px;
    flex-wrap: wrap;
  }
  .mv-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(13,18,56,0.06);
    color: var(--ink-2);
  }
  .mv-tag.good { background: var(--good-soft); color: var(--good); }
  .mv-tag.warn { background: var(--warn-soft); color: var(--warn); }
  .mv-tag.risk { background: var(--bad-soft); color: var(--bad); }
  .mv-sub { font-size: 11px; color: var(--ink-3); }
  .mv-chev { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
  /* Flip the chevron in RTL so it points the natural "open this" direction */
  [dir="rtl"] .mv-chev { transform: scaleX(-1); }

  /* === Reports view === */
  .rv-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
  }
  .rv-title {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.1;
  }
  .rv-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
  /* Close button — same circular "×" pattern as the מועדפות / מידע-נוסף popups, so
     exiting the reports view feels consistent with the rest of the app. */
  .rv-back {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: none; border-radius: 50%;
    background: rgba(13,18,56,0.06);
    color: var(--ink-2); cursor: pointer;
    font-size: 19px; line-height: 1; padding: 0; font-family: inherit;
    transition: background 0.15s, transform 0.12s;
  }
  .rv-back:hover { background: rgba(13,18,56,0.12); }
  .rv-back:active { transform: scale(0.92); }
  .rv-new {
    background: rgba(13,18,56,0.05);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 100px;
    flex-shrink: 0;
  }
  .rv-new.dirty {
    background: var(--grad-cta);
    color: white;
    box-shadow: 0 2px 8px rgba(213,111,168,0.3);
  }

  .rv-section-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin-top: 6px;
    margin-bottom: -4px;
  }

  .rv-card {
    display: flex; align-items: center; gap: 11px;
    background: white;
    border: 1px solid rgba(13,18,56,0.06);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
  }
  .rv-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245,158,107,0.15), rgba(213,111,168,0.15));
    display: grid; place-items: center;
    color: var(--accent);
    flex-shrink: 0;
  }
  .rv-icon svg { width: 17px; height: 17px; }
  .rv-info { flex: 1; min-width: 0; }
  .rv-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
  .rv-meta { font-size: 10.5px; color: var(--ink-3); line-height: 1.4; }
  .rv-status {
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 100px;
    background: rgba(13,18,56,0.06);
    color: var(--ink-2);
    flex-shrink: 0;
  }
  .rv-status.sent { background: var(--good-soft); color: var(--good); }
  .rv-status.live {
    background: var(--warn-soft); color: var(--warn);
    position: relative; padding-inline-start: 16px;
  }
  .rv-status.live::before {
    content: '';
    position: absolute;
    inset-inline-start: 6px;
    top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--warn);
    animation: pulse 1.6s infinite;
  }

  /* === Weekly report card (live data) === */
  #rvSummary { display: flex; flex-direction: column; gap: 10px; }
  .rv-msg { font-size: 12px; color: var(--ink-3); padding: 14px 4px; text-align: center; line-height: 1.5; }
  .rv-msg.err { color: var(--bad); }
  /* Empty state (no report yet) — icon + headline + CTA, instead of bare grey text. */
  .rv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 16px 24px; }
  .rv-empty-ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(13,18,56,0.05); color: var(--ink-3); }
  html.theme-dark .rv-empty-ic { background: rgba(255,255,255,0.06); }
  .rv-empty-ic svg { width: 24px; height: 24px; }
  .rv-empty-ttl { font-size: 14px; font-weight: 800; color: var(--ink); }
  html.theme-dark .rv-empty-ttl { color: #ECECF1; }
  .rv-empty-sub { font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 260px; }
  .rv-empty-cta { margin-top: 6px; min-height: 44px; border: 0; border-radius: 12px; padding: 11px 20px; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #d56fa8, #7c5cff); cursor: pointer; }
  .rv-empty-cta:active { transform: scale(0.98); }
  .rv-report-card {
    background: white;
    border: 1px solid rgba(13,18,56,0.06);
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: 12px;
    scroll-margin-top: 10px;
  }
  .rv-personal { margin-top: 12px; gap: 8px; }
  /* Personal block rendered INSIDE the summary card, above the footer. */
  .rv-personal-inline { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(13,18,56,0.06); display: flex; flex-direction: column; gap: 8px; }
  html.theme-dark .rv-personal-inline { border-top-color: rgba(255,255,255,0.08); }
  .rv-cal-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
  .rv-personal-title { font-size: 14px; font-weight: 800; color: var(--ink); }
  .rv-bday-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: right; }
  .rv-bday-chev { display: inline-flex; color: var(--ink-3); transition: transform .2s ease; }
  .rv-list-del { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
  /* Invisible 44px hit area so the tap target meets the accessibility minimum. */
  .rv-list-del::before { content: ""; position: absolute; inset: -7px; }
  .rv-list-del svg { width: 14px; height: 14px; }
  .rv-list-del:hover, .rv-list-del:active { background: rgba(179,38,30,0.12); color: #b3261e; }
  /* Armed (first tap) — turns solid red so "tap again to remove" is unmistakable. */
  .rv-list-del.armed { background: #b3261e; color: #fff; }
  html.theme-dark .rv-list-del:hover, html.theme-dark .rv-list-del:active { background: rgba(244,135,128,0.16); color: #f48780; }
  html.theme-dark .rv-list-del.armed { background: #f48780; color: #1b1c22; }
  .rv-add-list { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px; margin-top: 2px; border: 1px dashed rgba(13,18,56,0.18); border-radius: 11px; background: none; color: var(--ink-3); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
  .rv-add-list svg { width: 15px; height: 15px; }
  .rv-add-list:hover, .rv-add-list:active { border-color: #d56fa8; color: #b5468a; background: rgba(213,111,168,0.05); }
  html.theme-dark .rv-add-list { border-color: rgba(255,255,255,0.16); }
  html.theme-dark .rv-add-list:hover, html.theme-dark .rv-add-list:active { border-color: #d56fa8; color: #e89cc6; background: rgba(213,111,168,0.08); }
  .rv-bday-chev svg { width: 18px; height: 18px; }
  .rv-bday-head.open .rv-bday-chev { transform: rotate(180deg); }
  .rv-bday-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .rv-bday-list[hidden] { display: none; }
  .rv-bday { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
  .rv-bday:not(:last-of-type) { border-bottom: 1px solid rgba(13,18,56,0.05); padding-bottom: 8px; }
  .rv-bday-namecol { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
  .rv-bday-name { color: var(--ink); font-weight: 600; min-width: 0; }
  .rv-bday-meta { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
  .rv-bday-tel { color: var(--accent, #5b4ba8); font-weight: 700; text-decoration: none; white-space: nowrap; }
  .rv-personal-note { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
  html.theme-dark .rv-bday-name, html.theme-dark .rv-personal-title { color: #ECECF1; }
  .rv-metric {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .rv-metric:not(:last-child) { border-bottom: 1px solid rgba(13,18,56,0.05); padding-bottom: 10px; }
  .rv-metric-main { min-width: 0; }
  .rv-metric-label { font-size: 12px; color: var(--ink-2); margin-bottom: 2px; white-space: nowrap; }
  .rv-metric-value { font-size: 23px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
  .rv-metric-context { font-size: 11px; color: var(--ink-3); margin-top: 1px; line-height: 1.3; }
  .rv-metric-unit { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-inline-start: 3px; }
  .rv-bench {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 100px;
    background: rgba(13,18,56,0.06); color: var(--ink-2);
    flex-shrink: 0; white-space: nowrap;
  }
  .rv-bench.green { background: var(--good-soft); color: var(--good); }
  .rv-bench.red { background: var(--bad-soft); color: var(--bad); }
  .rv-bench.gray { background: rgba(13,18,56,0.06); color: var(--ink-3); }
  /* Daily report: two stacked trend pills, each with a faint caption to its left.
     Small + thin + ~50%-transparent backgrounds; equal-width, centered pills so the
     captions to their left line up (right-aligned against the pills). */
  .rv-bench-col { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-start; }
  /* Daily card carries two-pill rows AND single 'ללא שינוי' rows — give the column a
     fixed width so every pill (and the single one) lines up at the same right edge. */
  .rv-daily-card .rv-bench-col { width: 168px; }
  .rv-bench-line { display: flex; align-items: center; gap: 7px; }
  .rv-bench-cap { font-size: 9.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; text-align: right; }
  .rv-bench-col .rv-bench {
    min-width: 50px; text-align: center; font-size: 9.5px; font-weight: 700;
    padding: 1px 8px; line-height: 1.55; border-radius: 100px;
  }
  .rv-bench-col .rv-bench.green { background: rgba(22,163,74,0.13); color: var(--good); }
  .rv-bench-col .rv-bench.red { background: rgba(199,58,94,0.13); color: var(--bad); }
  .rv-bench-col .rv-bench.gray { background: rgba(138,142,168,0.13); color: var(--ink-3); }
  html.theme-dark .rv-bench-col .rv-bench.green { background: rgba(38,200,120,0.15); color: #4ade80; }
  html.theme-dark .rv-bench-col .rv-bench.red { background: rgba(244,114,142,0.15); color: #f78ca0; }
  html.theme-dark .rv-bench-col .rv-bench.gray { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
  .rv-open-full {
    display: block; text-align: center;
    background: var(--grad-cta); color: white;
    font-size: 13px; font-weight: 700;
    padding: 11px; border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(213,111,168,0.3);
  }

  /* === Reports view: tabs + editing environment (v245) === */
  /* align-items:flex-start so the ✕ lines up with the TITLE line (not the centre of the
     title+subtitle block); a tiny negative margin centres the 30px circle on the title. */
  .rv-head { justify-content: flex-start; padding-top: 14px; align-items: flex-start; }
  .rv-back { margin-top: -3px; }
  .rv-head-titles { flex: 1; min-width: 0; }
  /* Sticky top bar — the header (title + ✕ close) AND the daily/weekly/monthly tabs pin
     together while scrolling, so the close button stays reachable. The reports view drops
     its top padding so the bar pins FLUSH (no gap for content to bleed through); the
     header carries that spacing. Full-bleed + opaque background. */
  .reports-view { padding-top: 0; }
  .rv-topbar { position: sticky; top: 0; z-index: 8; background: #fff; margin: 0 -16px; padding: 0 16px; }
  html.theme-dark .rv-topbar { background: #16161e; }
  .rv-tabs-bar { margin: 0; padding: 4px 0 8px; background: transparent; }
  .rv-tabs {
    display: flex; gap: 6px;
    background: rgba(13,18,56,0.04);
    border-radius: 100px; padding: 3px;
    margin: 0;
  }
  .rv-tab {
    flex: 1; border: none; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--ink-3);
    padding: 6px 6px; border-radius: 100px;
    transition: background .15s, color .15s;
  }
  .rv-tab.active { background: white; color: var(--ink); box-shadow: var(--shadow-sm); }
  .rv-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
  .rv-new { align-self: stretch; text-align: center; border: none; cursor: pointer; }
  .rv-new[hidden] { display: none; }
  .rv-env {
    display: flex; flex-direction: column; gap: 14px;
  }
  .rv-env-title { font-size: 15px; font-weight: 800; color: var(--ink); }
  .rv-env-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: -8px; }
  .rv-env-block { display: flex; flex-direction: column; gap: 8px; }
  .rv-env-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
  /* Customization accordion — subtle transparent sections, each opens on tap. */
  .rv-acc { display: flex; flex-direction: column; gap: 8px; }
  .rv-acc-item { border: 1px solid rgba(13,18,56,0.08); border-radius: 12px; overflow: hidden; background: rgba(13,18,56,0.015); }
  html.theme-dark .rv-acc-item { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
  .rv-acc-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: none; border: none; padding: 12px 14px; cursor: pointer; font-family: inherit; text-align: start;
  }
  .rv-acc-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
  html.theme-dark .rv-acc-title { color: #ECECF1; }
  .rv-acc-chev { width: 17px; height: 17px; color: var(--ink-3); flex-shrink: 0; transition: transform .2s ease; }
  .rv-acc-head[aria-expanded="true"] .rv-acc-chev { transform: rotate(180deg); }
  .rv-acc-head[aria-expanded="true"] .rv-acc-title { color: var(--accent, #d56fa8); }
  .rv-acc-body { padding: 2px 14px 14px; }
  .rv-acc-body[hidden] { display: none; }
  /* "+ הוסף יעד" + the metric picker. */
  .rv-add-target { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 12px; border: 1px dashed rgba(13,18,56,0.18); border-radius: 10px; background: none; color: var(--ink-3); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
  .rv-add-target svg { width: 14px; height: 14px; }
  .rv-add-target:hover, .rv-add-target:active { border-color: #d56fa8; color: #b5468a; }
  html.theme-dark .rv-add-target { border-color: rgba(255,255,255,0.16); }
  html.theme-dark .rv-add-target:hover, html.theme-dark .rv-add-target:active { border-color: #d56fa8; color: #e89cc6; }
  .rv-add-target-sel { display: block; margin-top: 8px; width: 100%; padding: 9px 10px; border: 1px solid rgba(13,18,56,0.15); border-radius: 10px; font-family: inherit; font-size: 13px; background: white; color: var(--ink); }
  html.theme-dark .rv-add-target-sel { background: #23242e; border-color: rgba(255,255,255,0.14); color: #ECECF1; }
  .rv-t-del { flex-shrink: 0; width: 26px; height: 26px; border: none; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; }
  .rv-t-del:hover, .rv-t-del:active { background: rgba(179,38,30,0.10); color: #b3261e; }
  html.theme-dark .rv-t-del:hover, html.theme-dark .rv-t-del:active { background: rgba(244,135,128,0.16); color: #f48780; }
  .rv-targets { display: flex; flex-direction: column; gap: 8px; }
  .rv-target-row {
    display: flex; align-items: center; gap: 10px;
    background: white; border: 1px solid rgba(13,18,56,0.06);
    border-radius: 10px; padding: 8px 12px;
  }
  .rv-target-row .rv-t-label { flex: 1; font-size: 13px; color: var(--ink); }
  .rv-target-row input {
    width: 60px; text-align: center;
    border: 1px solid rgba(13,18,56,0.12); border-radius: 8px;
    padding: 6px; font-size: 13px; font-weight: 700; color: var(--ink); background: white;
  }
  /* Fixed unit width so every input pill lines up (the right edges align regardless of
     whether the unit is "%" or the wider "מנויים"). */
  .rv-target-row .rv-t-unit { font-size: 12px; color: var(--ink-3); flex-shrink: 0; width: 56px; }
  .rv-agenda { display: flex; flex-direction: column; gap: 6px; }
  .rv-agenda-item {
    display: flex; align-items: flex-start; gap: 8px;
    background: white; border: 1px solid rgba(13,18,56,0.06);
    border-radius: 10px; padding: 9px 11px; font-size: 13px; color: var(--ink);
  }
  .rv-agenda-item .rv-a-text { flex: 1; line-height: 1.45; }
  .rv-agenda-item .rv-a-cat { font-size: 10px; font-weight: 700; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
  .rv-agenda-item .rv-a-del { border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 17px; line-height: 1; flex-shrink: 0; padding: 0 2px; }
  .rv-agenda-empty { font-size: 12px; color: var(--ink-3); padding: 4px 2px; line-height: 1.5; }
  .rv-enrich-btn {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: right;
    background: rgba(13,18,56,0.03); border: 1px solid rgba(13,18,56,0.08);
    border-radius: 14px; padding: 11px 12px; cursor: pointer; font-family: inherit;
  }
  .rv-enrich-btn:active { transform: scale(0.99); }
  /* Same upload glyph + blue as the main-screen 'מידע נוסף משלי' button (#2078b5). */
  .rv-enrich-icon {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(32,120,181,0.12); color: #2078b5;
  }
  .rv-enrich-icon svg { width: 18px; height: 18px; }
  html.theme-dark .rv-enrich-btn { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
  html.theme-dark .rv-enrich-icon { background: rgba(75,163,224,0.18); color: #6cb6e8; }
  .rv-enrich-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rv-enrich-text { font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .rv-enrich-sub { font-size: 10px; color: var(--ink-3); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.theme-dark .rv-enrich-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
  html.theme-dark .rv-enrich-text { color: #ECECF1; }
  /* Report composer — REPLICATES the main `.composer` look with INDEPENDENT classes so
     it doesn't collide with the main chat's querySelector('.send-btn') /
     querySelector('.composer textarea') (which would otherwise hijack these elements). */
  /* Suggestion chips — discover what the report can add; a tap prefills the composer. */
  .rv-suggest { margin: 2px 0 10px; }
  .rv-suggest-lead { font-size: 12px; color: var(--ink-3); margin: 0 2px 7px; }
  .rv-suggest-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .rv-suggest-chip {
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    background: rgba(13,18,56,0.04); border: 1px solid rgba(13,18,56,0.10);
    border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
  }
  .rv-suggest-chip:hover, .rv-suggest-chip:active { border-color: #d56fa8; color: #b5468a; background: rgba(213,111,168,0.06); }
  .rv-suggest-chip:active { transform: scale(0.97); }
  html.theme-dark .rv-suggest-chip { background: #23242e; border-color: rgba(255,255,255,0.10); color: #ECECF1; }
  html.theme-dark .rv-suggest-chip:hover, html.theme-dark .rv-suggest-chip:active { border-color: #d56fa8; color: #e89cc6; background: rgba(213,111,168,0.10); }
  .rv-env-composer {
    display: flex; align-items: center; gap: 4px;
    background: white; border: 1px solid rgba(13,18,56,0.1);
    border-radius: 24px; padding: 4px; padding-inline-start: 16px; box-shadow: var(--shadow-sm);
  }
  .rv-env-composer textarea {
    flex: 1; min-width: 0; border: none; outline: none; resize: none; background: transparent;
    font-family: inherit; font-size: 16px; line-height: 1.4; padding: 9px 0; color: var(--ink); max-height: 96px;
  }
  .rv-ec-mic, .rv-ec-send {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; font-family: inherit; padding: 0;
  }
  .rv-ec-mic { width: 34px; height: 34px; border-radius: 17px; background: transparent; position: relative; }
  .rv-ec-mic svg { width: 18px; height: 18px; color: #7c5cff; }
  .rv-ec-mic .rec-eq { display: none; }
  .rv-ec-mic.is-recording { background: rgba(124,92,255,0.12); }
  .rv-ec-mic.is-recording .mic-icon { display: none; }
  .rv-ec-mic.is-recording .rec-eq { display: flex; }
  .rv-ec-send { width: 36px; height: 36px; border-radius: 18px; background: var(--grad-cta); color: #fff; box-shadow: 0 4px 12px rgba(213,111,168,0.3); transition: opacity .15s; }
  .rv-ec-send svg { width: 14px; height: 14px; }
  /* Disabled / in-flight (item 8) — can't double-send while a request is pending. */
  .rv-ec-send:disabled, .rv-ec-send.busy { opacity: 0.5; cursor: default; box-shadow: none; }
  /* Report-assist conversation (the composer talks to /api/report/assist). */
  /* The conversation flows naturally in the page (the .view-tab is the ONLY scroller —
     no nested 240px scrollbox). New messages scroll into view via JS. */
  .rv-assist-log { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; scroll-margin-top: 12px; }
  .rv-assist-log[hidden] { display: none; }
  .rv-assist-msg { font-size: 13px; line-height: 1.5; padding: 8px 11px; border-radius: 13px; max-width: 90%; white-space: pre-wrap; animation: rvMsgIn .22s ease both; }
  .rv-assist-msg.user { align-self: flex-start; background: var(--grad-cta); color: #fff; }
  .rv-assist-msg.bot { align-self: flex-end; background: rgba(13,18,56,0.05); color: var(--ink); }
  html.theme-dark .rv-assist-msg.bot { background: rgba(255,255,255,0.07); color: #ECECF1; }
  @keyframes rvMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* "Lia is thinking" — three bouncing dots in a bot bubble. */
  .rv-typing { align-self: flex-end; display: inline-flex; gap: 4px; align-items: center; background: rgba(13,18,56,0.05); padding: 11px 13px; border-radius: 13px; animation: rvMsgIn .22s ease both; }
  html.theme-dark .rv-typing { background: rgba(255,255,255,0.07); }
  .rv-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: rvDot 1.1s ease-in-out infinite; }
  .rv-typing span:nth-child(2) { animation-delay: .18s; }
  .rv-typing span:nth-child(3) { animation-delay: .36s; }
  @keyframes rvDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
  /* Inline "generate now" CTA dropped into the conversation right after a change lands —
     so the owner doesn't have to hunt for the generate button up the page. */
  .rv-cta { align-self: stretch; display: flex; align-items: center; gap: 10px; background: rgba(239,154,107,0.12); border: 1px solid rgba(239,154,107,0.3); border-radius: 13px; padding: 10px 12px; animation: rvMsgIn .22s ease both; }
  .rv-cta-text { flex: 1; font-size: 12.5px; line-height: 1.45; color: #9a5621; }
  html.theme-dark .rv-cta-text { color: #f6b486; }
  .rv-cta-btn { flex-shrink: 0; background: var(--grad-cta); color: #fff; border: none; border-radius: 100px; padding: 7px 15px; font-weight: 700; font-size: 12.5px; font-family: inherit; cursor: pointer; }
  .rv-cta-btn:active { transform: scale(0.97); }
  /* Generate loading overlay — sits over the summary so the card stays in place
     (no layout collapse / no jump) while the new report builds. */
  .rv-body { position: relative; }
  .rv-gen-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(247,245,240,0.72); backdrop-filter: blur(3px); border-radius: 16px; z-index: 4; }
  html.theme-dark .rv-gen-overlay { background: rgba(24,25,33,0.72); }
  .rv-gen-overlay[hidden] { display: none; }
  .rv-gen-overlay-text { font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .rv-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(13,18,56,0.12); border-top-color: var(--accent, #d56fa8); animation: rvSpin .8s linear infinite; }
  html.theme-dark .rv-spinner { border-color: rgba(255,255,255,0.14); border-top-color: #d56fa8; }
  @keyframes rvSpin { to { transform: rotate(360deg); } }
  /* Brief highlight ring when a freshly generated report lands. */
  @keyframes rvJustUpdated { 0% { box-shadow: 0 0 0 0 rgba(213,111,168,0.45); } 100% { box-shadow: 0 0 0 14px rgba(213,111,168,0); } }
  .rv-report-card.rv-just-updated { animation: rvJustUpdated 1.1s ease-out 1; }
  .rv-updated-flag { display: flex; width: fit-content; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #1f9d63; background: rgba(31,157,99,0.12); border-radius: 100px; padding: 3px 11px; margin: 6px auto 0; animation: rvMsgIn .25s ease both; }
  .rv-assist-preview { align-self: flex-end; max-width: 92%; background: rgba(13,18,56,0.04); border: 1px solid rgba(13,18,56,0.1); border-radius: 13px; padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; }
  html.theme-dark .rv-assist-preview { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
  .rv-ap-title { font-size: 11px; font-weight: 700; color: var(--ink-3); }
  .rv-ap-val { font-size: 22px; font-weight: 800; color: var(--ink); }
  html.theme-dark .rv-ap-val { color: #ECECF1; }
  .rv-ap-def { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
  .rv-ap-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; padding-top: 6px; border-top: 1px solid rgba(13,18,56,0.08); }
  html.theme-dark .rv-ap-rows { border-top-color: rgba(255,255,255,0.1); }
  .rv-ap-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
  html.theme-dark .rv-ap-row { color: rgba(255,255,255,0.78); }
  .rv-ap-actions { display: flex; gap: 8px; margin-top: 4px; }
  .rv-ap-ok { background: var(--grad-cta); color: #fff; border: none; border-radius: 100px; padding: 6px 18px; font-weight: 700; font-family: inherit; cursor: pointer; }
  .rv-ap-no { background: rgba(13,18,56,0.06); color: var(--ink-2); border: none; border-radius: 100px; padding: 6px 16px; font-weight: 700; font-family: inherit; cursor: pointer; }
  html.theme-dark .rv-ap-no { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
  /* "הפק דוח חדש" — full-width below the summary; grey by default, gradient (dirty)
     only after the owner edits the report. */
  .rv-new { width: 100%; margin-top: 2px; padding: 12px; border-radius: 12px; text-align: center; color: var(--ink-3); cursor: default; }
  .rv-new.dirty { cursor: pointer; }
  .rv-gen-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 8px; padding: 0 2px; }
  /* "פתח את הדוח המלא" — a compact pill inside the summary card, pinned to the left,
     proportioned like the small benchmark chip. */
  .rv-card-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(13,18,56,0.06); }
  /* The two footer buttons share an equal width (centered) regardless of label length. */
  .rv-card-foot > .rv-customize, .rv-card-foot > .rv-open-full { flex: 1 1 0; max-width: 200px; }
  /* "i" badge on in-app summary metrics + the definition popover it opens. */
  .rv-metric-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-inline-start: 5px; vertical-align: middle;
    border-radius: 50%; border: 1px solid rgba(13,18,56,0.22); background: transparent;
    color: var(--ink-3); font-size: 9px; font-style: italic; font-weight: 700; line-height: 1;
    cursor: pointer; font-family: inherit; padding: 0;
  }
  html.theme-dark .rv-metric-i { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.6); }
  .rv-def-pop {
    display: none; position: fixed; left: 0; top: 0; z-index: 1000;
    width: 240px; max-width: 86vw; background: #1c1c1e; color: #fff;
    font-size: 12px; line-height: 1.5; text-align: right; direction: rtl;
    padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,0.32);
  }
  .rv-def-pop.show { display: block; }
  .rv-def-cta { margin-top: 6px; color: #c9b8f0; font-size: 11px; }
  .rv-open-full {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 13px; border-radius: 100px;
    background: var(--grad-cta); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1.6; text-decoration: none;
    box-shadow: 0 2px 6px rgba(213,111,168,0.3);
  }
  /* Peach "customize" toggle — same pill proportions as open-full, sits on the right. */
  .rv-customize {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 4px 13px; border-radius: 100px; border: none; cursor: pointer;
    background: linear-gradient(95deg, #f6b486 0%, #ef9a6b 100%); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1.6; font-family: inherit;
    box-shadow: 0 2px 6px rgba(239,154,107,0.32);
  }
  .rv-customize::before { content: '⚙'; font-size: 12px; }
  .rv-customize:active { transform: scale(0.97); }
  .rv-customize.open { background: rgba(239,154,107,0.16); color: #b5611f; box-shadow: none; }
  html.theme-dark .rv-customize.open { background: rgba(246,180,134,0.16); color: #f6b486; }
  /* once the owner edits, the existing full report is stale → grey it so they don't
     open the outdated one (regenerate first). */
  .rv-open-full.stale { background: rgba(13,18,56,0.05); color: var(--ink-2); box-shadow: none; }
  /* Collapsible "התאמת הדוח שלך". */
  .rv-env-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; cursor: pointer; padding: 4px 2px;
    font-size: 15px; font-weight: 800; color: var(--ink);
  }
  .rv-env-toggle .rv-env-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s ease; }
  .rv-env-toggle[aria-expanded="true"] .rv-env-chev { transform: rotate(180deg); }
  .rv-env-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
  .rv-env-body[hidden] { display: none; }

  /* Reports view — dark mode (the base CSS uses light --ink + white cards). */
  html.theme-dark .reports-view { --ink: #ECECF1; --ink-2: rgba(255,255,255,0.82); --ink-3: rgba(255,255,255,0.55); }
  html.theme-dark .rv-report-card,
  html.theme-dark .rv-target-row,
  html.theme-dark .rv-agenda-item,
  html.theme-dark .rv-env-composer { background: #23242e; border-color: rgba(255,255,255,0.08); }
  html.theme-dark .rv-target-row input { background: #2a2b36; border-color: rgba(255,255,255,0.14); color: #ECECF1; }
  html.theme-dark .rv-metric:not(:last-child) { border-bottom-color: rgba(255,255,255,0.08); }
  html.theme-dark .rv-tabs { background: rgba(255,255,255,0.06); }
  html.theme-dark .rv-tab.active { background: #4a4d63; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
  html.theme-dark .rv-new { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.42); }
  html.theme-dark .rv-new.dirty { color: #fff; }
  html.theme-dark .rv-env { border-top-color: rgba(255,255,255,0.1); }
  html.theme-dark .rv-bench.gray { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
  html.theme-dark .rv-back { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
  html.theme-dark .rv-new.dirty { background: var(--grad-cta); color: #fff; }
  html.theme-dark .rv-open-full.stale { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.85); }
  html.theme-dark .rv-card-foot { border-top-color: rgba(255,255,255,0.08); }
  html.theme-dark .rv-env-toggle { color: #ECECF1; }

  /* === History view === */
  .hv-head { flex-shrink: 0; }
  .hv-title {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1.1;
  }
  .hv-sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }

  .hv-list {
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .hv-section { display: flex; flex-direction: column; gap: 6px; }
  .hv-section-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    margin-bottom: 2px;
  }

  .hv-item {
    display: flex; align-items: flex-start; gap: 11px;
    background: white;
    border: 1px solid rgba(13,18,56,0.06);
    border-radius: 12px;
    padding: 11px 12px;
    box-shadow: var(--shadow-sm);
  }
  .hv-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .hv-icon svg { width: 14px; height: 14px; }
  .hv-icon.good { background: var(--good-soft); color: var(--good); }
  .hv-icon.dismissed { background: rgba(13,18,56,0.06); color: var(--ink-3); }
  .hv-icon.warn { background: var(--warn-soft); color: var(--warn); }
  .hv-icon.bad { background: var(--bad-soft); color: var(--bad); }

  .hv-info { flex: 1; min-width: 0; }
  .hv-name { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; line-height: 1.3; }
  .hv-meta { font-size: 10.5px; color: var(--ink-3); line-height: 1.45; }
  .hv-time {
    font-size: 10px; color: var(--ink-3);
    font-weight: 500;
    flex-shrink: 0;
    margin-top: 2px;
    font-family: var(--mono);
  }

  /* When new items get added at the top during the session, give them a subtle entry animation */
  .hv-section.session-new .hv-item {
    animation: hvIn 0.4s ease-out;
  }
  @keyframes hvIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .toast {
    position: absolute;
    top: 110px;
    left: 14px; right: 14px;
    background: var(--ink);
    color: white;
    padding: 11px 13px;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    z-index: 50;
    animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .toast-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-orange);
    flex-shrink: 0;
    animation: pulse 1.5s infinite;
  }
  .toast strong { font-weight: 600; }
  .toast button {
    margin-inline-start: auto;
    color: rgba(255,255,255,0.6);
    padding: 2px 4px;
    font-size: 16px;
    line-height: 1;
  }

  /* Typing dots — three dots that bounce gently in sequence,
     used while Pulse is "thinking" before showing the answer */
  .typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
  }
  .typing-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ink-3);
    opacity: 0.4;
    animation: dotBlink 1.2s infinite ease-in-out;
  }
  .typing-dots span:nth-child(1) { animation-delay: 0s; }
  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes dotBlink {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
  }

  /* Subtle blinking cursor for the typewriter effect */
  .composer input.is-typing,
  .composer textarea.is-typing {
    caret-color: var(--accent);
  }
  .composer input.is-typing::after,
  .composer textarea.is-typing::after {
    content: '';
  }

  /* ============================================================
     ON REAL PHONES: strip the iPhone frame and let the app fill
     the actual device. The frame stays visible on desktop where
     it serves as a mockup-style presentation.
     ============================================================ */
  @media (max-width: 480px), (display-mode: standalone) {
    body {
      padding: 0;
      /* v226.3 — light intrinsic; dark via html.theme-dark in main block. */
      background: var(--bg-card);
      align-items: stretch;
      justify-content: stretch;
      min-height: 100vh;
      min-height: 100dvh; /* iOS dynamic viewport — handles bottom URL bar */
    }
    .stage {
      gap: 0;
      width: 100%;
    }
    /* Hide the captions ("A247 Pulse — mobile mockup" etc.) on real phones */
    .stage > .caption { display: none; }

    .iphone {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: transparent;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
    }
    .iphone-side { display: none; }

    .screen {
      border-radius: 0;
      /* v226.9a — broken white on mobile too. */
      background: #FFFFFF;
    }

    /* The fake dynamic island + home indicator are part of the mockup chrome
       — the real device has its own. Hide them. */
    .island { display: none; }
    .home-indicator { display: none; }

    /* The fake status bar (9:41 + signal/wifi/battery) is also chrome —
       the real device shows its own status bar above the page. */
    .statusbar { display: none; }

    /* Give the header a little extra top padding to sit below the real
       device status bar (handles notch / dynamic island safe area). */
    .app-header {
      padding-top: calc(env(safe-area-inset-top, 12px) + 10px);
    }
    /* And honour the home-indicator safe area at the bottom of the tab bar. */
    /* v104: the tabbar was only an empty 50px spacer — removing it lets
       the composer area sit flush at the bottom of the phone. */
    .tabbar { display: none; }

    /* The toast was positioned for the mockup. On real phones, anchor it
       below the actual app header so it doesn't float behind the notch. */
    .toast {
      top: calc(env(safe-area-inset-top, 12px) + 76px);
    }
  }

  /* When the user has actually added it to the home screen as a PWA,
     the page runs in standalone mode and we always want the frameless
     experience regardless of viewport width. */
  @media (display-mode: standalone) {
    .stage > .caption { display: none !important; }
  }
  /* ============================================================
     Access gate — a soft password screen shown the first time the
     site is opened on a new device. Once the right code is entered,
     the gate hides itself and the user's success is remembered in
     localStorage. NOT a real security measure (the code is in plain
     text in this file) — just a friendly "wrong link" filter so the
     URL doesn't open into the dashboard for someone who got it by
     accident. Branded to match the LIFT marketing site (black bg,
     white title, hint of warmth). */
  .gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    font-family: var(--sans);
    animation: gateFadeIn 0.4s ease-out;
  }
  body.gate-passed .gate-overlay { display: none; }
  @keyframes gateFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .gate-logo {
    width: 64px;
    height: 42px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAAHF0lEQVR42tVYXWhU2xVea+19JmdONHNnmCTCjSHNtbbJNSPmxxAqGlOM3HBrMDAhtFB86cs8+FTBB2ESKK3Fp8LFon0SioEcyINIK4jUCRjzJ1hNIlJzjfGqMWM1EvM355y9+pBzwmTuTBLvTYUs2Myew9lr72+tb/3sA7C1grBdhZkJAGBqaqpqZGQk/Kn2pS06PLa3t+ONGzdCly5dujE3N7fDe74trH/kyBFJRNDS0vL3+vp6ZubQtgEQj8clAMDFixe/DoVCXFNT84GZi7cFgHg8TgAgmDlw6NChJwDADQ0NnxTAj40BIiLn1KlTf7x///4XAMBKKdoWvI9GowIAoLu7u7GsrIwBwAIArq+vX/iUHpAZdFgjXV1dDACcLesgIjLzjubm5suTk5NK0zS0LAuYV19H0zQpHo/zRofo7OzkFXWMnZ2dmwLtrflBqHt6egQAQCwW+3MgEGBEtKSUCgD44MGDC8y861MxQboW1fr6+na9fPkSdF0HAAC/3w9379593dXVlXIrLHueam9vdy5fvvyTeDz+u/fv3ztEJFbNjogAYD99+lQvLi4uevv27bpWCoVC8ObNm/nS0tK3/f39n1uWtakYKiwstCsrK195FPrphQsX/v3gwQOWUqJSyiEi0dLS0i2E+G1bWxuZpul4BYuZxYkTJ/4xPT0dJCKllFoF6M6t8+fP9/T3938FAMq2bVrB9T2xNU2Tu3fv/puUMnb27NnBFy9eFAOAypVgEFExMx0/fvw/zPylBwCfPXsmp6am0rMTKaW+QEQwTRMAABobG0UikbDPnTv3h76+vp8zs50eRy4ABgBtfn6+/OHDh3ITvZOYnZ0VRASPHz+Wr1+/lq4xcsUCAwA+f/5crkmjPp+PEVFJKZmIlBsgy+m8TyQS9uDgYO21a9d+71EnLWjXbEJEy0TEmqY5RMQ5htI0jf1+PwMA6LquiIiFEIqIGBHXDCJiKaUiIvb5fGpNFmJmZGZQSqE7x3QrmKYJzGy0t7d/MzY2loeIHnVyWlcp5WUrTNuHMzIaOI7DAAC2bYNSKmdn654PvHch0/25ZM+ePdI0zeUzZ878JpFI1CulbESUGzR47G3qiRAC/H4/pvFZk1JCQUGBj5lh586den5+PiKiWFxcXHNglyVQUFAgLMuCgoICfVMAEBGePHlij46O7mptbY3PzMw4tBK56y6TUuallWt2HAfLysqsY8eOfT08PJxkZvT5fKzrOpWUlCTv3bsHkUjkaCAQkE1NTfqtW7euDw0NfUZEq8mhubk5efLkyV/19vbakUhkWQjBnrW+rK6uZgDwuGcDAMdisX8xMwoh4PDhw90+n4+JyHbjY80gIq8OpJhZr6ys/IvL3dUaUVVVtczMYV3XwTAMIMqeMcPhMBw9enTG0+vp7ujo+C4cDm++F0JEiYgci8VaHz161JFKpZZddtgA4OSohAgAqfHx8QlEBGZmx3GQiGByclKrqqoaKy8vf753796XDQ0Nv45Go6KmpkZLK5AimUzutG37ezGglMJkMqlHo1HhFdN1KWTb9tL8/PznBw4cuJpMJoGI8tI5nSMDAQAgEeVlBuDc3ByOjo4Wec8Mw8i/c+eO4wVsNBpVrkfVOrqVaZpOT08PbggAEeeHh4fr6+rq+ioqKlJCCKGUAmYGwzBgYmLiyNDQ0I5snlBKcSZFiAiIyGFmm4ikruv2wsJCriTwcc1cNhFCfNbY2NgLAL2ZlTQQCEBHR8fY0NBQpQtgwyZMKQVKKQEAwnEcWFpaEv/X+wAzw+joqA8A8plZ90ZFRYXv3bt3YnFx8aMOkJ+fD5FI5L9VVVWvqqurk5FIZMG9kv74djqbGIaR2r9/fwoAUunPx8fHIRAIQFtb26b8jIislMLi4uLUzZs364uKil65HltGREgkEvaWAXAzBwEA3L59+2dlZWV/SqVStEJ/paSUVF5e/nBgYOCqbdub6hw9PjMzDAwMfGhtbV3Y8gtN+mZe6R8ZGSmVUp7NBKjr+j8B4OoPuXERkQQAjMfj2NXVpbYkBlKpVE7X22tlybIs27btWddTH71hXl4eAwB3dnbylnnA7UQZEcEbafcTmVncmDn9ArP6fvqciDBTX447Qc4WZjNrZdovulVzQz47jgOICLZtr/5PK37ofp1IZcaA10FuRrLpznY26WaDqWAw+G0wGCwXQqxHDSIiKCwsxOnpaQiFQlhUVLTy0N3A7VW02tra0omJCY+myMwQCoXIMIxNAQiHw1RYWAhCCPR0B4NBygaAEXH2+vXrv7hy5coOv9/PmqZl9ZdlWaxpGpaUlHwYHByEpqamX/r9fp/XFS4sLOC+ffsUANinT5/+xjTNvxqGwcvLy+B2o2xZ1owXX9lizp0uNjc315aWlgrDMFZ119XV2e7nm7Xrt81H2CzyP3bcsKoCkt+DAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    /* invert black logo to white */
    filter: invert(1) brightness(2);
    margin-bottom: 24px;
  }
  .gate-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    text-align: center;
  }
  .gate-sub {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 36px;
    text-align: center;
    line-height: 1.5;
    max-width: 280px;
  }
  .gate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
  }
  .gate-input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    font-family: var(--sans);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .gate-input::placeholder { color: rgba(255,255,255,0.35); }
  .gate-input:focus {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.12);
  }
  .gate-input.gate-error {
    border-color: #e85a7a;
    animation: gateShake 0.4s ease-in-out;
  }
  @keyframes gateShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
  }
  .gate-btn {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--sans);
    transition: opacity 0.2s ease;
  }
  .gate-btn:active { opacity: 0.7; }
  .gate-error-msg {
    color: #e85a7a;
    font-size: 13px;
    text-align: center;
    height: 18px;
    margin-top: -4px;
  }
  /* v101: email-OTP gate steps */
  .gate-step { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .gate-step[hidden] { display: none; }
  .gate-links { display: flex; gap: 18px; justify-content: center; margin-top: 10px; }
  .gate-link {
    background: none; border: none; color: rgba(255,255,255,0.55);
    font-size: 12.5px; cursor: pointer; font-family: var(--sans);
    text-decoration: underline; padding: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .gate-link:active { opacity: 0.6; }
  .gate-email-echo { color: #fff; font-weight: 600; direction: ltr; display: inline-block; }
  .gate-code-input { letter-spacing: 0.4em; font-size: 21px; direction: ltr; }
  .gate-logo { -webkit-tap-highlight-color: transparent; }