.push-pre {
    position: fixed; inset: 0; z-index: 100050;
    display: none; align-items: center; justify-content: center;
    background: rgba(13,18,56,0.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 22px; direction: rtl;
  }
  .push-pre.open { display: flex; animation: pushPreFade 0.22s ease-out; }
  @keyframes pushPreFade { from { opacity: 0; } to { opacity: 1; } }
  .push-pre-card {
    background: #fff; border-radius: 22px; max-width: 360px; width: 100%;
    padding: 26px 24px 20px; text-align: center;
    box-shadow: 0 30px 80px rgba(13,18,56,0.32);
    font-family: var(--sans, -apple-system, sans-serif);
    animation: pushPreRise 0.26s cubic-bezier(0.3,1,0.4,1);
  }
  @keyframes pushPreRise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .push-pre-bell {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
    background: linear-gradient(135deg, #ffd24a, #f7a52b);
    display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(247,165,43,0.45);
  }
  .push-pre-bell svg { width: 28px; height: 28px; }
  .push-pre-card h3 { font-size: 18px; font-weight: 800; color: #1a1430; margin-bottom: 8px; }
  .push-pre-card p { font-size: 14px; line-height: 1.55; color: #56506b; margin-bottom: 8px; }
  .push-pre-card .pp-eg {
    background: #f4f1fc; border-radius: 12px; padding: 9px 12px;
    font-size: 12.5px; color: #6a5b9a; margin: 12px 0 16px; text-align: start;
    line-height: 1.7;
  }
  .push-pre-card .pp-enable {
    width: 100%; background: linear-gradient(135deg, #7c5cff, #d85a85);
    color: #fff; border: none; border-radius: 100px; padding: 13px;
    font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .push-pre-card .pp-enable:active { opacity: 0.85; }
  .push-pre-card .pp-later {
    background: none; border: none; color: #918aa6; font-size: 13px;
    cursor: pointer; font-family: inherit; margin-top: 10px; padding: 4px;
  }
  .push-pre-hint { font-size: 11.5px; color: #a39cb8; margin-top: 8px; }

  /* Dark theme (item 5) — the push pre-prompt was a pure-white card → white flash
     on the dark app. Flip the surface + text; the gradient enable button stays. */
  html.theme-dark .push-pre-card { background: #1b1c24; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
  html.theme-dark .push-pre-card h3 { color: #ECECF1; }
  html.theme-dark .push-pre-card p { color: rgba(255,255,255,0.72); }
  html.theme-dark .push-pre-card .pp-eg { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.66); }
  html.theme-dark .push-pre-card .pp-later { color: rgba(255,255,255,0.5); }
  html.theme-dark .push-pre-hint { color: rgba(255,255,255,0.42); }

  /* =====================================================================
     v226.0 — DARK THEME (mobile home screen)
     Targeted overrides only for the home/empty-state. Chat bubbles, popups,
     admin panels, and modals keep their light styling for now. Per user:
     keep it simple, more professional, subtle color stays.
     ===================================================================== */
  html.theme-dark {
    background:
      radial-gradient(900px 600px at 80% 20%, #1a1a22, transparent 65%),
      radial-gradient(800px 600px at 20% 80%, #15151c, transparent 65%),
      #08080a;
  }
  html.theme-dark .screen {
    background:
      radial-gradient(600px 400px at 100% 0%, #16161e, transparent 60%),
      radial-gradient(500px 400px at 0% 100%, #121218, transparent 60%),
      #0b0b0f;
  }
  /* Top header — dark gray translucent */
  html.theme-dark .app-header {
    background: rgba(22, 22, 28, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* Status bar (clock, signal, battery) — light glyphs on dark */
  html.theme-dark .statusbar { color: #f4f4f6; }
  html.theme-dark .battery { border-color: #f4f4f6; }
  html.theme-dark .battery::after { background: #f4f4f6; }
  html.theme-dark .battery-fill { background: #f4f4f6; }
  html.theme-dark .statusbar svg { color: #f4f4f6; }

  /* Composer wrap (bottom bar background) — same family as top */
  html.theme-dark .composer-wrap {
    background: rgba(22, 22, 28, 0.88);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  /* v226.0a — composer (input pill) stays WHITE per user (Google's mockup
     had it dark gray but the real preference is to keep it light so the
     typing field is high-contrast). No overrides needed for the pill itself,
     its border, or the text/placeholder color. */

  /* Empty-state body text */
  html.theme-dark .empty-prompt {
    color: rgba(255, 255, 255, 0.72);
  }
  html.theme-dark .empty-prompt strong {
    color: #ffffff;
  }
  html.theme-dark .empty-noa-line {
    color: rgba(255, 255, 255, 0.80);
  }
  html.theme-dark .empty-noa-line .typer-caret {
    background: rgba(255, 255, 255, 0.80);
  }

  /* Live counters — labels read on dark */
  html.theme-dark .lc-card-head {
    color: rgba(255, 255, 255, 0.55);
  }
  html.theme-dark .lc-card-head svg { color: rgba(255, 255, 255, 0.45); }
  html.theme-dark .lc-bd-label,
  html.theme-dark .lc-bd-val {
    color: rgba(255, 255, 255, 0.50);
  }
  html.theme-dark .lc-currency {
    color: rgba(255, 255, 255, 0.45);
  }
  /* Numbers already use lighter palette — explicit so dark mode is stable. */
  /* v226.10 — both use the same lighter gray in dark mode. */
  html.theme-dark .lc-num.lc-rev { color: #C9CDD4; }
  html.theme-dark .lc-num.lc-ent { color: #C9CDD4; }

  /* v229.96 — dark-mode chat bubbles: DARK with light text (previously the
     analyst kept cream #FAF8F2 and the user was light gray — both looked wrong
     on the dark UI). Analyst bubble takes the numbers-popup slate tone
     (rgb 26,26,33); the user bubble is a slightly purple-tinted dark so the two
     speakers stay distinguishable. */
  html.theme-dark .msg-bubble {
    background: #23242E;
    color: #ECECF1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  }
  html.theme-dark .msg.user .msg-bubble {
    background: #2F2A40;
    color: #EFECF7;
  }
  /* keep secondary/ink-muted text legible inside the dark bubbles */
  html.theme-dark .msg-bubble .msg-bubble-text { color: #ECECF1; }

  /* v229.101 — dark mode for the rich data-cards inside monthly-summary answers.
     The base CSS uses light --ink/--ink-2/--ink-3/--bg-soft and a few hardcoded
     white backgrounds. Redefining those vars on the bubble + card containers
     flips ALL descendant text/bars/labels to light automatically; then we just
     dark-ify the hardcoded light backgrounds and the dark hairline borders. */
  html.theme-dark .msg-bubble,
  html.theme-dark .data-card,
  html.theme-dark .member-list,
  html.theme-dark .mini-stat-row {
    --ink: #ECECF1;
    --ink-2: rgba(255,255,255,0.80);
    --ink-3: rgba(255,255,255,0.55);
    --bg-soft: #2a2b36;
  }
  html.theme-dark .data-card { border-color: rgba(255,255,255,0.08); }
  html.theme-dark .member-list { background: rgba(255,255,255,0.08); }
  html.theme-dark .member-row { background: #2a2b36; }
  html.theme-dark .mini-stat-row { background: #2a2b36; border-color: rgba(255,255,255,0.08); }
  html.theme-dark .stat-row { border-top-color: rgba(255,255,255,0.12); }

  /* v229.109 — dark mode for LLM-generated tables in chat replies (e.g. the
     salary report). The base .llm-table hardcodes a near-white background and
     light hairlines, which made light text unreadable on dark. */
  html.theme-dark .msg-bubble .llm-table {
    background: #2a2b36;
    color: #ECECF1;
  }
  html.theme-dark .msg-bubble .llm-table th {
    background: rgba(124,92,255,0.22);
    color: #ECECF1;
  }
  html.theme-dark .msg-bubble .llm-table th,
  html.theme-dark .msg-bubble .llm-table td {
    border-bottom-color: rgba(255,255,255,0.10);
  }
  html.theme-dark .msg-bubble .llm-table tr:nth-child(even) td { background: rgba(255,255,255,0.04); }

  /* v229.122 — follow-up question chips in dark mode: the base .chip is a white
     pill with dark text (unreadable on dark). Make non-primary chips transparent
     with light text + a subtle light border. The gradient .chip.primary is left
     untouched (the :not(.primary) guard). */
  html.theme-dark .chip:not(.primary) {
    background: transparent;
    color: #ECECF1;
    border-color: rgba(255,255,255,0.22);
  }
  html.theme-dark .chip:not(.primary):hover { background: rgba(255,255,255,0.06); }

  /* Toggle pill (היום / החודש) — visible on dark, white knob */
  html.theme-dark .lc-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
  }
  html.theme-dark .lc-tog-opt {
    color: rgba(255, 255, 255, 0.60);
  }
  html.theme-dark .lc-tog-opt.is-on {
    color: #1a1a22;
  }
  html.theme-dark .lc-tog-knob {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  html.theme-dark .lc-branch-sel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
  }
  html.theme-dark .lc-branch-sel.is-branch { color: #ff9b86; }

  /* Bottom action buttons (סיכום / מועדפות / דאטא / הקלטה).
     v226.9 — same unification as light: identical neutral dark bg for all
     4. Only the SVG icon inside gets the accent hue. */
  html.theme-dark .composer-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.78);
  }
  html.theme-dark .composer-action-btn.reports-action,
  html.theme-dark .composer-action-btn.fav-action,
  html.theme-dark .composer-action-btn.upload-action,
  html.theme-dark .composer-action-btn.mic-action {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.09);
  }
  html.theme-dark .composer-action-btn.reports-action:hover,
  html.theme-dark .composer-action-btn.fav-action:hover,
  html.theme-dark .composer-action-btn.upload-action:hover,
  html.theme-dark .composer-action-btn.mic-action:hover {
    background: rgba(255, 255, 255, 0.10);
  }
  html.theme-dark .composer-action-btn.reports-action svg { color: #9d8eea; }
  html.theme-dark .composer-action-btn.fav-action svg     { color: #f0d570; }
  html.theme-dark .composer-action-btn.upload-action svg  { color: #7cc6ee; }
  html.theme-dark .composer-action-btn.mic-action svg     { color: #c4b3ff; }

  /* Send button keeps its gradient, but ensure the surrounding pill blends */

  /* Push banner (the rectangle that nudges to enable notifications) — keep
     visible on dark. Soft white card so it still grabs attention. */
  html.theme-dark .push-banner {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f4f4f6;
  }
  html.theme-dark .push-banner-close {
    color: rgba(255, 255, 255, 0.6);
  }
  /* v241.1 — push banner text was dark-on-dark: var(--ink) / var(--ink-2) are
     not overridden globally in dark mode, so the child selectors in
     .push-banner-text kept the default #0d1238 even though the banner itself
     got color:#f4f4f6. Explicitly set light values here. */
  html.theme-dark .push-banner-text { color: #ECECF1; }
  html.theme-dark .push-banner-text span { color: rgba(255,255,255,0.70); }

  /* Signals FAB (the lightbulb at the top center). Empty state was a light
     grey on white; on dark we want soft white-on-translucent. The lit state
     (yellow glow) already looks great on dark — leave it. */
  html.theme-dark .signals-fab {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
  html.theme-dark .signals-fab-badge {
    background: #ffffff;
    color: #1a1a22;
    border-color: rgba(22, 22, 28, 0.6);
  }

  /* Brand-mark "a" tile sits on dark header. The white card with gradient
     letter still pops, but soften its drop-shadow to match dark surfaces. */
  html.theme-dark .brand-mark {
    box-shadow: none;
  }
  /* The h1 "Pulse" text uses ink for non-gradient parts — but it's wrapped
     in .brand-grad gradient already. Leave it. */

  /* ============================================================
     v226.3 — Settings gear + modal. Light styles intrinsic.
     ============================================================ */
  .hdr-settings {
    /* v226.4 — slightly larger to match lc-pill/signalsFab sizing. */
    position: relative;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(13, 18, 56, 0.06);
    border: none;
    display: grid; place-items: center;
    color: var(--ink-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.12s ease;
    flex-shrink: 0;
    padding: 0;
  }
  .hdr-settings:hover { background: rgba(13, 18, 56, 0.10); }
  .hdr-settings:active { transform: scale(0.92); }
  .hdr-settings svg { width: 17px; height: 17px; }
  html.theme-dark .hdr-settings {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
  }
  html.theme-dark .hdr-settings:hover { background: rgba(255, 255, 255, 0.14); }

  /* v226.4 — red dot on the settings gear when something needs attention
     (push not enabled or Google not connected). Gently pulses. */
  .hdr-settings-dot {
    position: absolute;
    top: 2px; right: 2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #e8344e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    animation: dotPulse 2.2s ease-in-out infinite;
    pointer-events: none;
  }
  html.theme-dark .hdr-settings-dot {
    box-shadow: 0 0 0 2px #16161e;
  }
  .hdr-settings-dot[hidden] { display: none; }
  @keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.78; }
  }

  /* v226.4 — same red dot inline in the settings modal next to a row
     that needs the user's attention (push off / google not connected). */
  .settings-row-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #e8344e;
    margin-inline-end: 6px;
    vertical-align: middle;
    animation: dotPulse 2.2s ease-in-out infinite;
  }
  .settings-row-dot[hidden] { display: none; }

  /* v226.4 — flat a247 logo on the visual left of the header.
     Sized to feel "in the banner", not a card. No background, no shadow. */
  .a247-logo-img {
    height: 32px;
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
  }
  /* Hide briefly until JS sets src — avoids the broken-image icon flash. */
  .a247-logo-img:not([src]),
  .a247-logo-img[src=""] { visibility: hidden; }
  html.theme-dark .a247-logo-img {
    /* Slight glow so it doesn't get lost against the dark header bg. */
    filter: drop-shadow(0 0 6px rgba(216, 80, 165, 0.18));
  }

  /* v226.4a — avatar picker inside Settings */
  .avatar-current {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .avatar-current-bubble {
    /* v228.9 — was 44 → 62 → now 80px (truly +40% over the ~58px grid
       tiles in 5-column layout). The previous 62 was too close in size
       to the picker tiles to feel like a clear hierarchy. */
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e6b 0%, #d56fa8 50%, #7e6fd4 100%);
    color: #fff;
    display: grid; place-items: center;
    font-size: 28px; font-weight: 700; line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(213, 111, 168, 0.32);
    overflow: hidden;
  }
  /* v226.5 — when the user picked an image avatar, drop the gradient bg
     and let the image fill the bubble. */
  .avatar-current-bubble.has-img {
    background: transparent;
    box-shadow: none;
  }
  /* v226.7c → v226.8a — face avatars already have their own blue circle
     baked into the PNG. Adding an extra frame around them looks redundant
     and weird. Only object avatars (dumbbell, kettlebell, etc.) need the
     peach frame to feel grounded — and the peach matches Maya's bubble bg
     for visual cohesion. */
  .msg.user .msg-avatar.has-img {
    color: inherit;
    overflow: hidden;
    /* default for any image: clean, no extra frame */
    background: transparent;
    border: none;
    box-shadow: none;
  }
  /* Face avatars: just the built-in PNG, no wrapper styling. */
  .msg.user .msg-avatar.avatar-face { }
  /* Object avatars: Maya-style peach gradient + subtle frame. */
  .msg.user .msg-avatar.avatar-object {
    background: linear-gradient(135deg, #fde6e0, #f5d4cc);
    border: 1px solid rgba(13, 18, 56, 0.06);
    box-shadow: var(--shadow-sm);
  }
  /* Object images: pull in a little so the peach ring shows around them. */
  .msg.user .msg-avatar.avatar-object .avatar-img {
    width: 78%;
    height: 78%;
  }
  html.theme-dark .msg.user .msg-avatar.avatar-object {
    background: linear-gradient(135deg, rgba(253, 230, 224, 0.18), rgba(245, 212, 204, 0.12));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  /* v226.5a — full-screen avatar zoom overlay. Tap anywhere to dismiss.
     v226.6a — backdrop-filter removed: on iOS it creates an edge halo
     around the rounded avatar inside (the "second circle" artifact) AND
     softens the avatar's rendering. Solid translucent dark bg works
     cleanly without artifacts. */
  .avatar-zoom-overlay {
    position: fixed; inset: 0;
    z-index: 100100;
    background: rgba(13, 18, 56, 0.78);
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer;
    padding: 24px;
  }
  html.theme-dark .avatar-zoom-overlay { background: rgba(0, 0, 0, 0.85); }
  .avatar-zoom-overlay.open {
    display: flex;
    animation: pushPreFade 0.22s ease-out;
  }
  .avatar-zoom-circle {
    /* v226.5b — was 260×260 with strong shadow → user saw a "second circle"
       halo from the shadow + soft edge. Reduced to 180×180 (30% smaller)
       which is sharper at the avatar's native 128px resolution, and the
       shadow is removed for a clean look. The backdrop blur stays. */
    width: 180px; height: 180px;
    max-width: 60vmin; max-height: 60vmin;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f59e6b 0%, #d56fa8 50%, #7e6fd4 100%);
    display: grid; place-items: center;
    color: #fff;
    font-size: 64px;
    font-weight: 800;
    box-shadow: none;
    animation: avatarZoomIn 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .avatar-zoom-circle.has-img {
    background: transparent;
    box-shadow: none;
  }
  .avatar-zoom-circle img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* v226.6a — force crisp scaling. */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  @keyframes avatarZoomIn {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
  .avatar-current-label {
    font-size: 12px; color: #8a8ea8;
  }
  html.theme-dark .avatar-current-label { color: rgba(255,255,255,0.55); }
  .avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .avatar-opt {
    width: 100%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(13, 18, 56, 0.08);
    background: rgba(13, 18, 56, 0.03);
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    display: grid; place-items: center;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    overflow: hidden;
  }
  /* v226.5 — image-based avatar buttons */
  .avatar-opt.avatar-opt-img {
    padding: 0;
    background: transparent;
  }
  .avatar-opt .avatar-img,
  .avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
  }
  /* The "default initials" tile keeps the rounded-square look */
  .avatar-opt.is-default {
    border-radius: 12px;
  }
  html.theme-dark .avatar-opt {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .avatar-opt:hover {
    background: rgba(13, 18, 56, 0.07);
    transform: translateY(-1px);
  }
  html.theme-dark .avatar-opt:hover { background: rgba(255, 255, 255, 0.10); }
  .avatar-opt:active { transform: scale(0.92); }
  /* v228.8 — no more selection ring around the picked avatar. The
     bubble at the top of the modal already shows what's selected, and
     the previous ring was off-center on round PNGs (looked sloppy). */
  .avatar-opt.is-on { border-color: transparent; background: transparent; }
  html.theme-dark .avatar-opt.is-on { border-color: transparent; background: transparent; }

  /* v228.8 — "more" button at the end of the collapsed picker.
     Shown only when the grid is collapsed to 12 items. */
  .avatar-more-btn {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px dashed rgba(13, 18, 56, 0.25);
    background: rgba(13, 18, 56, 0.03);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    display: grid; place-items: center;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .avatar-more-btn:hover {
    background: rgba(13, 18, 56, 0.07);
    border-color: var(--accent-purple);
    color: var(--accent-purple);
  }
  .avatar-more-btn:active { transform: scale(0.92); }
  html.theme-dark .avatar-more-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.78);
  }
  /* Hide the rest by default; .avatar-grid.expanded shows everything. */
  .avatar-grid.collapsed .avatar-opt.av-hidden { display: none; }
  .avatar-grid:not(.collapsed) .avatar-more-btn { display: none; }
  .avatar-opt-default {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-2);
  }
  html.theme-dark .avatar-opt-default { color: rgba(255, 255, 255, 0.78); }

  /* v226.4 — L4FT logo with Pulse wordmark below */
  .biz-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .biz-pulse-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-align: center;
  }
  html.theme-dark .biz-pulse-label { color: #f4f4f6; }

  /* Settings modal — reuses the push-pre overlay/blur pattern. */
  .settings-modal {
    position: fixed; inset: 0; z-index: 100070;
    display: none; align-items: center; justify-content: center;
    background: rgba(13, 18, 56, 0.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 22px; direction: rtl;
  }
  .settings-modal.open { display: flex; animation: pushPreFade 0.22s ease-out; }
  .settings-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 24px 22px 20px;
    max-width: 380px; width: 100%;
    box-shadow: 0 30px 80px rgba(13, 18, 56, 0.25);
    text-align: center;
    direction: rtl;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* v226.9a — relative to anchor the sticky × and the bottom fade. */
    position: relative;
  }
  /* v226.9a — × close in top-right corner of the card. position:sticky
     keeps it visible while the card scrolls. */
  .settings-close-x {
    position: sticky;
    top: -10px;
    inset-inline-start: 100%;
    margin-inline-start: -32px;
    margin-top: -8px;
    margin-bottom: -28px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(13, 18, 56, 0.06);
    border: none;
    color: var(--ink-2);
    display: grid; place-items: center;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    z-index: 3;
    transition: background 0.15s, transform 0.12s;
    flex-shrink: 0;
  }
  .settings-close-x:hover { background: rgba(13, 18, 56, 0.10); }
  .settings-close-x:active { transform: scale(0.92); }
  .settings-close-x svg { width: 15px; height: 15px; }
  html.theme-dark .settings-close-x {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
  }
  html.theme-dark .settings-close-x:hover { background: rgba(255, 255, 255, 0.16); }
  /* v226.9a — fade gradient at the bottom of the scroll area. Hints
     scrollability and softens the visual edge. Sticky so it follows
     the bottom of the viewport as the card scrolls. */
  .settings-card::after {
    content: '';
    position: sticky;
    bottom: -20px;
    left: 0; right: 0;
    display: block;
    height: 40px;
    margin-top: -40px;
    margin-bottom: 0;
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
  }
  html.theme-dark .settings-card::after {
    background: linear-gradient(to top, #1a1a22 0%, rgba(26, 26, 34, 0) 100%);
  }
  html.theme-dark .settings-card {
    background: #1a1a22;
    color: #f4f4f6;
  }
  .settings-card h3 {
    font-size: 18px; font-weight: 800; color: #1a1430; margin: 0 0 18px;
    text-align: center;
  }
  html.theme-dark .settings-card h3 { color: #f4f4f6; }
  .settings-section {
    text-align: right;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(13, 18, 56, 0.08);
  }
  html.theme-dark .settings-section { border-color: rgba(255, 255, 255, 0.08); }
  .settings-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }
  .settings-section-label {
    font-size: 12px; font-weight: 600;
    color: #8a8ea8;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
  }
  html.theme-dark .settings-section-label { color: rgba(255, 255, 255, 0.50); }

  /* v240.x — admin "view as business" select (matches the modal's RTL tone) */
  .view-as-select {
    width: 100%;
    direction: rtl;
    text-align: right;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0d1238);
    background: rgba(13, 18, 56, 0.05);
    border: 1px solid rgba(13, 18, 56, 0.10);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  html.theme-dark .view-as-select {
    color: #f4f4f6;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* 3-segment theme picker */
  .theme-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(13, 18, 56, 0.05);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
  }
  html.theme-dark .theme-seg { background: rgba(255, 255, 255, 0.07); }
  .theme-seg-btn {
    border: none;
    background: transparent;
    padding: 9px 8px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #56506b;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, color 0.18s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  html.theme-dark .theme-seg-btn { color: rgba(255, 255, 255, 0.65); }
  .theme-seg-btn.is-on {
    background: #ffffff;
    color: #1a1430;
    box-shadow: 0 1px 4px rgba(13, 18, 56, 0.10);
  }
  html.theme-dark .theme-seg-btn.is-on {
    background: #2a2a32;
    color: #f4f4f6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  .theme-seg-btn .seg-ico { width: 15px; height: 15px; object-fit: contain; vertical-align: -2px; display: inline-block; }

  /* v229.9 — round persona avatars inside the segmented picker.
     Same portraits the personas use in chat reply bubbles, but
     shrunk to fit on the segmented control's row. */
  .theme-seg-persona .theme-seg-btn { gap: 8px; padding: 7px 6px; }
  .persona-seg-avatar {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f0eef5;
    box-shadow: 0 1px 3px rgba(13, 18, 56, 0.12);
  }
  html.theme-dark .persona-seg-avatar {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  .persona-seg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* List-row style sections for the rest (push, google, etc.) */
  .settings-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
  }
  .settings-row + .settings-row { border-top: 1px solid rgba(13, 18, 56, 0.06); }
  html.theme-dark .settings-row + .settings-row { border-top-color: rgba(255, 255, 255, 0.07); }
  .settings-row-label {
    font-size: 14px; font-weight: 600; color: #1a1430;
  }
  html.theme-dark .settings-row-label { color: #f4f4f6; }
  .settings-row-sub {
    font-size: 11.5px; color: #8a8ea8; margin-top: 2px; line-height: 1.4;
  }
  html.theme-dark .settings-row-sub { color: rgba(255, 255, 255, 0.50); }
  .settings-row-action {
    background: none;
    border: 1px solid rgba(13, 18, 56, 0.18);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
  }
  html.theme-dark .settings-row-action {
    border-color: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.75);
  }
  .settings-row-action:active { transform: scale(0.96); }
  .settings-row-action.danger { color: #c44; border-color: rgba(196, 68, 68, 0.35); }
  html.theme-dark .settings-row-action.danger { color: #ff6e7a; border-color: rgba(255, 110, 122, 0.40); }
  .settings-row-action.connected {
    color: #2e8b57; border-color: rgba(46, 139, 87, 0.35);
  }
  html.theme-dark .settings-row-action.connected { color: #6dd6a0; border-color: rgba(109, 214, 160, 0.40); }
  /* v243.5 — logout button */
  .settings-logout-btn {
    width: 100%; background: none; border: 1.5px solid rgba(196, 68, 68, 0.40);
    color: #c44; font-size: 13px; font-weight: 600; border-radius: 8px;
    padding: 8px 0; cursor: pointer; font-family: inherit; transition: background 0.15s;
  }
  .settings-logout-btn:hover { background: rgba(196, 68, 68, 0.07); }
  .settings-logout-btn:active { transform: scale(0.97); }
  html.theme-dark .settings-logout-btn { color: #ff6e7a; border-color: rgba(255, 110, 122, 0.40); }
  html.theme-dark .settings-logout-btn:hover { background: rgba(255, 110, 122, 0.10); }
  .settings-section-logout { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
  .settings-close {
    background: none; border: none;
    color: #8a8ea8;
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    margin-top: 4px;
    padding: 6px 12px;
  }
  html.theme-dark .settings-close { color: rgba(255, 255, 255, 0.55); }