:root {
      --green:        #2563eb;
      --green-mid:    #3b82f6;
      --green-light:  #bfdbfe;
      --green-bg:     #eff6ff;
      --green-dark:   #1e3a5f;
      --surface:      #ffffff;
      --surface-2:    #f8fafc;
      --surface-3:    #f1f5f9;
      --border:       #e2e8f0;
      --border-mid:   #cbd5e1;
      --text:         #0f172a;
      --text-mid:     #334155;
      --text-soft:    #64748b;
      --text-pale:    #94a3b8;
      --gold:         #f59e0b;
      --gold-bg:      #fefce8;
      --gold-border:  #fde68a;
      --red:          #ef4444;
      --red-bg:       #fef2f2;
      --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
      --shadow-sm:    0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
      --shadow-md:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
      --shadow-lg:    0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
      --r-sm:         8px;
      --r-md:         14px;
      --r-lg:         20px;
      --r-xl:         24px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #0f172a 0%, #1e3a2f 50%, #0f172a 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    /* ── Shell ── */
    .shell {
      width: 100%;
      max-width: 100%;
      height: 100vh;
      max-height: 100vh;
      background: var(--surface);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      /* Makes .shell a query container so descendants can use @container
      (max-width: ...) instead of @media (max-width: ...) — see the
      welcome-action-grid / location-options-row rules below. .shell no
      longer caps its own width at all (see the removed 480px cap below),
      but @container is still the more correct tool here: it reacts to
      .shell's actual rendered width specifically, rather than assuming
      .shell always equals the page viewport — true today, but not a safe
      assumption to build every internal breakpoint on. */
      container-type: inline-size;
    }

    @media (min-height: 700px) {
      .shell {
        height: 92vh;
        max-height: 860px;
        border-radius: var(--r-xl);
        box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
      }
    }

    /* No width breakpoint here on purpose — .shell is ALWAYS width:100% of
    its container (iframe on Swap's site, or the raw browser window when
    testing standalone), at every size, full stop. Sizing the widget is
    entirely the embedding container's job; we just fill 100% of whatever
    that container is, no matter how small or large.

    This used to cap at max-width:480px below a 900px viewport (a
    "mobile card, centered with background showing" look), with a
    min-width:900px media query removing the cap above that. The gap
    between those two rules is exactly the bug: any container between
    ~480–900px wide (a resized desktop window, a docked side panel while
    testing — not a real phone, which is always under 480px anyway) hit
    the 480px cap and sat centered with visible blank page background on
    both sides, NOT shrinking further as the window kept shrinking. Removed
    the cap entirely instead of trying to tune the breakpoint — .shell now
    tracks its container continuously at every width, so there's no zone
    left where it can go stale relative to the window/iframe size. */

    /* ── Header ── */
    .header {
      background: linear-gradient(135deg, #1e3a6e 0%, #2563eb 100%);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .avatar {
      width: 42px; height: 42px;
      background: rgba(255,255,255,0.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      border: 2px solid rgba(255,255,255,0.25);
    }

    .header-info { flex: 1; min-width: 0; }
    .header-name {
      font-size: 15px; font-weight: 700;
      color: #fff; line-height: 1.2;
    }
    /* Two-tone brand name (matches the same "Any" accent / "Card" plain
    treatment the welcome heading already uses) — "Buddy" picks up the gold
    accent against the header's blue gradient for a bit of pop. */
    .brand-buddy { color: var(--gold); }
    .header-status {
      font-size: 11px; color: rgba(255,255,255,0.75);
      display: flex; align-items: center; gap: 5px;
      margin-top: 2px;
    }
    .dot-live {
      width: 6px; height: 6px;
      background: #86efac;
      border-radius: 50%;
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(0.85); }
    }

    .user-pill-wrap {
      position: relative;
      flex-shrink: 0;
      padding-top: 16px;
    }
    .app-version {
      position: absolute;
      top: 0;
      right: 11px;
      font-size: 10px;
      font-weight: 700;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .user-pill {
      display: flex; align-items: center; gap: 5px;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 20px;
      padding: 6px 11px 6px 9px;
      cursor: text;
      transition: background 0.15s, border-color 0.15s;
    }
    .user-pill:hover { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.35); }
    .user-pill-icon { font-size: 13px; opacity: 0.85; }
    .user-pill-label {
      font-size: 11px; font-weight: 500;
      color: rgba(255,255,255,0.6);
      letter-spacing: 0.3px;
    }
    .user-pill input {
      width: 44px; border: none; background: transparent; outline: none;
      font-size: 13px; font-weight: 700; color: #fff;
      font-family: 'Inter', sans-serif;
      text-align: left;
    }
    .user-pill input::-webkit-inner-spin-button { -webkit-appearance: none; }
    .user-pill-edit { font-size: 11px; opacity: 0.55; }

    /* ── Messages ── */
    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 18px 14px 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--surface-2);
    }
    .messages::-webkit-scrollbar { width: 3px; }
    .messages::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 4px; }

    /* ── Date divider ── */
    .date-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 8px 0;
      font-size: 11px; font-weight: 500; color: var(--text-pale);
    }
    .date-divider::before, .date-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }

    /* ── Rows ── */
    .row { display: flex; gap: 8px; max-width: 86%; animation: fadeUp 0.22s ease; }
    .row.has-card { max-width: 92%; align-self: center; width: 100%; }
    .row.bot { align-self: flex-start; }
    .row.user { align-self: flex-end; flex-direction: row-reverse; margin-top: 2px; }
    /* .row.bot/.row.user have equal specificity to .row.has-card and are declared
       after it, so source order made align-self:flex-start win over center for
       any card row (which is always also .bot). Higher-specificity override
       (3 classes) restores the intended centering regardless of declaration order. */
    .row.bot.has-card, .row.user.has-card { align-self: center; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .row-icon {
      width: 30px; height: 30px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; flex-shrink: 0; margin-top: 2px;
    }
    .bot .row-icon  { background: linear-gradient(135deg, #1e3a6e, #3b82f6); }
    .user .row-icon { background: var(--surface-3); }

    /* ── Bubbles ── */
    .bubble {
      padding: 10px 14px;
      font-size: 13.5px; line-height: 1.6;
      border-radius: var(--r-md);
      max-width: 100%;
    }
    .bot .bubble {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      border-bottom-left-radius: 4px;
      box-shadow: var(--shadow-xs);
    }
    .user .bubble {
      background: linear-gradient(135deg, #1e3a6e, #2563eb);
      color: #fff;
      border-bottom-right-radius: 4px;
      font-weight: 500;
      box-shadow: var(--shadow-sm);
    }

    /* ── Suggestion chips (inside messages) ── */
    .chips-row {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 4px 0 8px 38px;
      animation: fadeUp 0.25s ease;
    }
    .chip-btn {
      padding: 6px 13px;
      border-radius: 20px;
      border: 1.5px solid var(--green);
      background: var(--surface);
      color: var(--green);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 0.13s;
      white-space: nowrap;
      line-height: 1.3;
    }
    .chip-btn:hover {
      background: var(--green-bg);
      border-color: var(--green);
      transform: translateY(-1px);
      box-shadow: var(--shadow-xs);
    }
    .chip-btn.other {
      border-style: dashed;
      border-color: var(--border-mid);
      color: var(--text-soft);
    }
    .chip-btn.other:hover {
      border-color: var(--green);
      color: var(--green);
      background: var(--green-bg);
    }

    /* ── Recommendation Card ── */
    .rec-wrap { max-width: 460px; width: 100%; }

    /* Wide layout override — must come AFTER the base .rec-wrap rule above
    (same selector specificity, so source order decides the winner; putting
    this earlier in the file had no effect even when the media query
    matched). Grows the results card alongside the wide .shell, filling the
    available width (not a vw-based fraction — that compounds with the
    shell's own container-fill above and shrinks it again). Capped at 900px
    so text/cards don't stretch too wide to read comfortably.

    Keyed on width alone (matches the .shell rule above) — a wide-but-short
    window should still get the wide results card, independent of height. */
    @media (min-width: 900px) {
      .rec-wrap {
        max-width: 900px;
      }
    }

    /* ── Zero-balance notice card ─────────────────────── */
    .zb-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-sm);
      padding: 12px;
      width: 100%;
      max-width: 320px;
    }

    .zb-head { display: flex; align-items: center; gap: 9px; }

    .zb-gift {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--green-bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; flex-shrink: 0;
    }

    .zb-title { font-weight: 700; font-size: 13px; color: var(--text); line-height: 1.3; }

    .zb-divider { border-top: 1px dotted var(--border-mid); margin: 9px 0 6px; }

    .zb-row {
      display: flex; align-items: center; gap: 8px;
      margin: 6px 0;
      font-size: 12px; color: var(--text-mid); line-height: 1.4;
    }

    .zb-ico {
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--green-bg);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; flex-shrink: 0;
    }

    .zb-row a { color: var(--green); font-weight: 600; text-decoration: none; }
    .zb-row a:hover { text-decoration: underline; }

    .zb-continue {
      margin-top: 9px; width: 100%;
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      background: var(--green); color: #fff;
      border: none; border-radius: 10px;
      padding: 9px 13px;
      font-family: inherit; font-size: 13px; font-weight: 600;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: background .15s, transform .1s;
    }
    .zb-continue:hover { background: var(--green-mid); }
    .zb-continue:active { transform: scale(0.99); }
    .zb-continue:disabled { opacity: .6; cursor: default; }

    .zb-chev { font-size: 16px; line-height: 1; }

    .rec-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }

    .rec-header {
      background: linear-gradient(135deg, #1e3a6e, #2563eb);
      padding: 14px;
      display: flex; align-items: center; gap: 10px;
      position: relative;
      overflow: hidden;
    }
    .rec-header-icon-badge {
      width: 36px; height: 36px; flex-shrink: 0;
      background: rgba(255,255,255,0.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px;
    }
    .rec-header-icon { font-size: 16px; }
    .rec-header-titles { flex: 1; min-width: 0; }
    .rec-header-text {
      font-size: 15px; font-weight: 700;
      color: #fff;
      line-height: 1.25;
    }
    .rec-header-sub {
      font-size: 11.5px; font-weight: 500;
      color: rgba(255,255,255,0.8);
      margin-top: 1px;
    }
    .rec-header-sub b { color: #fcd34d; font-weight: 700; }
    .rec-header-badge {
      font-size: 10px; font-weight: 700; color: var(--text);
      background: #fff; border-radius: 6px; padding: 3px 10px;
      white-space: nowrap;
      align-self: flex-start;
    }

    .rec-label {
      padding: 10px 14px 4px;
      font-size: 12px; font-weight: 600; color: var(--text-soft);
    }
    .rec-filter-bar {
      padding: 6px 14px 8px;
      display: flex; gap: 8px;
      border-bottom: 1px solid var(--border);
    }
    .rec-filter-btn {
      font-size: 11px; font-weight: 600;
      color: var(--text-soft);
      background: var(--surface-2);
      border: 1.5px solid var(--border);
      border-radius: 20px;
      padding: 4px 12px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .rec-filter-btn:hover { border-color: var(--green); color: var(--green); }
    .rec-filter-btn.active {
      background: var(--green-bg);
      border-color: var(--green);
      color: var(--green);
    }

    .brand-row {
      display: flex; align-items: flex-start;
      padding: 14px 14px;
      border-top: 1px solid var(--border);
      gap: 9px;
      transition: background 0.12s;
    }
    .brand-row:hover { background: var(--surface-2); }

    .brand-rank {
      width: 28px; height: 28px;
      background: #fef9c3;
      border: 1.5px solid #fde68a;
      border-radius: 50%;
      font-size: 12px; font-weight: 700; color: #b45309;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .brand-rank.top { background: #fef9c3; border-color: #fde68a; color: #b45309; }

    .brand-logo {
      width: 34px; height: 34px;
      border-radius: 50%;
      border: 1px solid var(--border);
      object-fit: contain;
      padding: 4px;
      box-sizing: border-box;
      flex-shrink: 0;
      margin-top: 2px;
      background: #fff;
    }

    .brand-info { flex: 1; min-width: 0; }
    .brand-name {
      font-size: 14px; font-weight: 700; color: var(--text);
      margin-bottom: 3px;
      line-height: 1.25;
    }
    .brand-right {
      display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    }
    .brand-price-wrap { text-align: right; }
    .brand-price {
      font-size: 14px; font-weight: 700;
      color: #2563eb;
      white-space: nowrap;
    }
    .brand-price-label {
      font-size: 10px; font-weight: 500;
      color: var(--text-pale);
      white-space: nowrap;
      margin-top: 1px;
    }

    .brand-discount-badge {
      font-size: 11px; font-weight: 700;
      color: var(--green-dark);
      background: var(--green-light);
      border: 1.5px solid var(--green-mid);
      border-radius: 8px;
      padding: 3px 9px;
      display: inline-block;
      white-space: nowrap;
      margin-top: 4px;
    }
    .brand-arrow {
      width: 26px; height: 26px;
      border: 1.5px solid var(--border-mid);
      border-radius: 50%;
      font-size: 16px; color: #2563eb; font-weight: 400;
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .brand-location-info {
      display: flex; align-items: baseline; gap: 8px;
      font-size: 12px; color: var(--text-mid); margin-top: 5px;
      text-decoration: none;
    }
    a.brand-location-info { cursor: pointer; }
    a.brand-location-info:hover .loc-addr { text-decoration: underline; }
    .brand-location-info .loc-pin { font-size: 11px; }
    .brand-location-info .loc-dist-wrap {
      color: #2563eb; font-weight: 600; white-space: nowrap; flex: none;
    }
    .brand-location-info .loc-addr {
      color: var(--text-strong, #1f2937);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .brand-location-more {
      color: #2563eb; font-weight: 600; cursor: pointer; margin-top: 6px;
    }
    .brand-location-more:hover { text-decoration: underline; }
    .brand-location-hidden > .brand-location-info { margin-top: 5px; }
    .brand-anywhere-badge {
      display: inline-block;
      font-size: 10px; font-weight: 600;
      color: #0369a1; background: #e0f2fe;
      border-radius: 6px; padding: 2px 7px; margin-top: 4px;
    }
    .brand-themes {
      display: flex; flex-wrap: wrap; gap: 4px;
      margin-top: 4px;
    }
    .brand-themes-label {
      font-size: 10px; font-weight: 500;
      color: var(--text-pale);
      white-space: nowrap;
    }
    .brand-theme-tag {
      font-size: 10px; font-weight: 500;
      color: var(--text-soft);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 2px 7px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    .brand-theme-tag.more-toggle {
      cursor: pointer;
      color: var(--green);
      background: var(--green-bg);
      border-color: var(--green-light);
      font-weight: 600;
    }
    .brand-theme-tag.more-toggle:hover { background: var(--green-light); }
    /* Color-coded theme pills */
    .brand-theme-tag[data-theme*="Ultimate"] { background: #fef9c3; border-color: #fde68a; color: #b45309; }
    .brand-theme-tag[data-theme*="Shop"]     { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
    .brand-theme-tag[data-theme*="Dine"]     { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
    .brand-theme-tag[data-theme*="Eatz"]     { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
    .brand-theme-tag[data-theme*="Birthday"] { background: #fed7aa; border-color: #fdba74; color: #c2410c; }
    .brand-theme-tag[data-theme*="Play"]     { background: #e0e7ff; border-color: #c7d2fe; color: #4338ca; }
    .brand-theme-tag[data-theme*="Gaming"]   { background: #e0e7ff; border-color: #c7d2fe; color: #4338ca; }
    .brand-theme-tag[data-theme*="Celebrate"]{ background: #d1fae5; border-color: #a7f3d0; color: #059669; }
    .brand-theme-tag[data-theme*="Travel"]   { background: #cffafe; border-color: #a5f3fc; color: #0e7490; }
    .brand-theme-tag[data-theme*="Riviera"]  { background: #cffafe; border-color: #a5f3fc; color: #0e7490; }
    .brand-theme-tag[data-theme*="Fashion"]  { background: #fce7f3; border-color: #fbcfe8; color: #be185d; }
    .brand-theme-tag[data-theme*="Beauty"]   { background: #ffe4e6; border-color: #fecdd3; color: #be123c; }
    .brand-theme-tag[data-theme*="Fitness"]  { background: #ecfccb; border-color: #d9f99d; color: #4d7c0f; }
    .brand-theme-tag[data-theme*="Relax"]    { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; }
    .brand-theme-tag[data-theme*="Explore"]  { background: #e0f2fe; border-color: #bae6fd; color: #0369a1; }
    .brand-theme-tag[data-theme*="Lifestyle"]{ background: #f3e8ff; border-color: #e9d5ff; color: #7e22ce; }

    /* Theme divider inside card */
    .theme-divider {
      padding: 7px 14px 5px;
      background: var(--surface-3);
      border-top: 1px solid var(--border);
      font-size: 10.5px; font-weight: 700;
      color: var(--text-soft); letter-spacing: 0.6px;
      text-transform: uppercase;
      display: flex; align-items: center; gap: 5px;
    }

    /* No-match info row */
    .no-match-row {
      padding: 8px 14px;
      border-top: 1px solid var(--border);
      font-size: 11.5px; color: var(--text-soft);
      background: var(--surface-2);
    }

    /* Also Explore section */
    .explore-section {
      padding: 10px 14px 12px;
      border-top: 2px solid var(--green-light);
      background: var(--green-bg);
    }
    .explore-header {
      font-size: 11px; font-weight: 700; color: var(--green);
      letter-spacing: 0.5px; text-transform: uppercase;
      margin-bottom: 2px;
    }
    .explore-subtitle {
      font-size: 11.5px; font-weight: 500; color: var(--text-mid);
      margin-bottom: 8px;
    }
    .explore-theme-row {
      display: flex; align-items: flex-start; gap: 8px;
      margin-bottom: 6px;
    }
    .explore-theme-row:last-child { margin-bottom: 0; }
    .explore-theme-name {
      font-size: 11px; font-weight: 700; color: var(--green-dark);
      white-space: nowrap; min-width: 64px; padding-top: 3px;
    }
    .explore-brands { display: flex; flex-wrap: wrap; gap: 4px; }
    .explore-brand-chip {
      font-size: 11px; font-weight: 500;
      background: var(--surface); color: var(--text-mid);
      border: 1px solid var(--green-light);
      border-radius: 10px; padding: 2px 8px;
    }

    .show-more {
      width: 100%; padding: 10px;
      border: none; border-top: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--green);
      font-size: 12px; font-weight: 600;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: background 0.12s;
      display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .show-more:hover { background: var(--green-bg); }
    .pagination-bar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 14px;
      border-top: 1px solid var(--border);
      background: var(--surface-2);
    }
    .pagination-bar button {
      border: 1.5px solid var(--green);
      background: var(--surface);
      color: var(--green);
      font-size: 12px; font-weight: 600;
      padding: 6px 16px;
      border-radius: 20px;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
    }
    .pagination-bar button:hover { background: var(--green-bg); }
    .pagination-bar button:disabled { opacity: 0.3; cursor: default; }
    .pagination-bar span {
      font-size: 11px; color: var(--text-soft); font-weight: 600;
    }

    /* ── Typing ── */
    .typing-bubble {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      border-bottom-left-radius: 4px;
      padding: 11px 14px;
      display: flex; gap: 4px; align-items: center;
      box-shadow: var(--shadow-xs);
    }
    .typing-bubble span {
      width: 6px; height: 6px;
      background: var(--green-mid);
      border-radius: 50%;
      animation: bounce 1.1s infinite;
    }
    .typing-bubble span:nth-child(2) { animation-delay: 0.17s; }
    .typing-bubble span:nth-child(3) { animation-delay: 0.34s; }
    @keyframes bounce {
      0%,60%,100% { transform: translateY(0); opacity: 0.4; }
      30%          { transform: translateY(-5px); opacity: 1; }
    }

    /* ── Bottom bar ── */
    /* Background matches .messages (not .surface) and the old border-top
    line is gone — the seam between the scroll area and this zone disappears,
    so the input pill below reads as floating in open space instead of
    sitting on a docked footer bar. */
    .bottom {
      flex-shrink: 0;
      background: var(--surface-2);
      padding-top: 6px;
    }

    .input-row {
      display: flex; align-items: flex-end; gap: 8px;
      padding: 10px 14px;
    }

    /* The pill itself: full rounding + shadow + margin from the row's own
    padding is what makes it read as "floating" rather than a flush docked
    bar — was a plain bordered box directly inside a full-width footer. */
    .input-wrap {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 10px 18px;
      box-shadow: var(--shadow-lg);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .input-wrap:focus-within {
      border-color: var(--green);
      box-shadow: var(--shadow-lg), 0 0 0 3px rgba(22,163,74,0.12);
    }

    .input-wrap textarea {
      width: 100%; border: none; background: transparent; outline: none;
      font-size: 13.5px; font-family: 'Inter', sans-serif;
      color: var(--text); resize: none; max-height: 80px;
      line-height: 1.5;
    }
    .input-wrap textarea::placeholder { color: var(--text-pale); }

    .send-btn {
      width: 40px; height: 40px;
      background: linear-gradient(135deg, #1e3a6e, #2563eb);
      border: none; border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform 0.13s, box-shadow 0.13s, opacity 0.13s;
      box-shadow: var(--shadow-sm);
    }
    .send-btn:hover:not(:disabled) {
      transform: scale(1.07);
      box-shadow: var(--shadow-md);
    }
    .send-btn:active:not(:disabled) { transform: scale(0.95); }
    .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .send-btn svg { width: 16px; height: 16px; fill: white; }

    /* ── Quick starters bar ── */
    /* ── Welcome Card ── */
    .welcome-bubble-wide { max-width: 95% !important; width: 95%; padding: 14px 16px !important; }
    .welcome-card { padding: 0; }
    .welcome-top {
      display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
    }
    .welcome-text { flex: 1; }
    .welcome-hi {
      font-size: 0.92rem; color: var(--text-mid); margin-bottom: 2px;
    }
    .welcome-heading {
      font-size: 1.35rem; font-weight: 800; color: var(--text);
      line-height: 1.2; margin-bottom: 6px;
    }
    .welcome-heading strong { color: var(--green); }
    .welcome-desc {
      font-size: 0.75rem; color: var(--text-soft); line-height: 1.5;
    }
    .welcome-illustration {
      flex-shrink: 0; width: 120px; height: 95px; position: relative;
    }
    .welcome-card-img { position: relative; width: 100%; height: 100%; }
    .wc-card {
      position: absolute; top: 10px; left: 0;
      width: 85px; height: 55px; border-radius: 8px;
      background: linear-gradient(135deg, #4f7cdb, #1e3a6e);
      color: white; font-size: 0.65rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 20px rgba(30,58,110,0.3); transform: rotate(-6deg);
      letter-spacing: 1.2px;
    }
    .wc-gift {
      position: absolute; bottom: -5px; right: 10px; font-size: 2rem;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
    }
    .wc-bag {
      position: absolute; bottom: 0; right: -8px; font-size: 1.5rem;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }
    .wc-star1 { position: absolute; top: 0; right: 30px; font-size: 0.9rem; color: #f59e0b; }
    .wc-star2 { position: absolute; bottom: 20px; left: -5px; font-size: 0.7rem; color: #f59e0b; }
    .wc-heart { position: absolute; top: 30px; left: -10px; font-size: 0.75rem; color: #f472b6; }
    .wc-dot1 { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; }
    .wc-dot2 { position: absolute; bottom: 30px; right: 0; width: 5px; height: 5px; border-radius: 50%; background: #3b82f6; opacity: 0.5; }

    .welcome-features {
      display: flex; gap: 8px; margin-bottom: 16px;
    }
    .welcome-feat {
      flex: 1; padding: 12px 8px; border-radius: var(--r-md);
      text-align: center; font-size: 0.72rem; line-height: 1.4;
    }
    .welcome-feat.feat-blue { background: #eff6ff; border: 1px solid #dbeafe; }
    .welcome-feat.feat-pink { background: #fdf2f8; border: 1px solid #fce7f3; }
    .welcome-feat.feat-green { background: #f0fdf4; border: 1px solid #dcfce7; }
    .wf-icon {
      display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 6px;
      font-size: 1rem;
    }
    .feat-blue .wf-icon { background: #dbeafe; }
    .feat-pink .wf-icon { background: #fce7f3; }
    .feat-green .wf-icon { background: #dcfce7; }
    .wf-title { font-weight: 600; font-size: 0.75rem; color: var(--text); margin-bottom: 2px; }
    .wf-sub { color: var(--text-pale); font-size: 0.68rem; }

    .welcome-chips {
      display: flex; flex-direction: column; gap: 6px;
    }

    /* Invisible stand-in for .row-icon in the action-cards' wrapper row (see
    welcomeChipsHtml in app.js) — same width, no visible circle/emoji. Its
    only job is to consume the same 30px + flex gap that the welcome
    bubble's real avatar icon consumes above it, so the content next to it
    lines up without hand-copied margin numbers. */
    .row-icon-spacer { width: 30px; flex-shrink: 0; }

    /* ── Welcome action cards (Suggest a Brand / Discover Nearby) ──
    Side by side, equal width (1fr 1fr — the grid gives both columns the
    exact same width regardless of their content length), each its own
    bordered box (icon + title + one-line description + chevron), distinct
    from .welcome-chip's plain single-line pill look above, and from the
    .welcome-card they sit outside of. width/max-width: 95% mirrors
    .welcome-bubble-wide exactly (same row-icon-spacer parent as the real
    .row-icon above it) so the WHOLE grid's edges line up with the welcome
    card at any screen size — it never runs past the welcome card's own
    right corner. */
    .welcome-action-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      width: 95%; max-width: 95%;
    }
    /* Narrow phones/embeds: two equal-width columns get too cramped for the
    title+description text, so fall back to one column stacked instead.
    @container, not @media — see the container-type comment on .shell for
    why: a viewport media query missed the exact 480–900px zone where this
    card is most likely to actually BE ~480px wide.

    600px, not 480px: the longest real title ("Discover Nearby Brands", 23
    chars) needs roughly icon(40) + gap(10) + padding(44) + text(~180 at
    0.82rem bold) ≈ 275px per column just to fit on one line, so two columns
    need ~560px+ combined before they're actually comfortable — at 480px
    each column is only ~236px, well short of that, so titles were wrapping
    ("Suggest me a / Brand") even though the grid had technically "room" for
    two columns. 600px gives both columns real breathing room instead of
    switching at the point they merely fit without overlapping. */
    @container (max-width: 600px) {
      .welcome-action-grid { grid-template-columns: 1fr; }
    }
    .welcome-action-card {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 14px 30px 14px 14px; border-radius: var(--r-md);
      border: 1px solid var(--border); background: var(--surface);
      box-shadow: var(--shadow-xs); cursor: pointer; text-align: left;
      font-family: inherit; position: relative; transition: all 0.2s;
    }
    .welcome-action-card:hover {
      border-color: var(--green); box-shadow: var(--shadow-sm);
    }
    .welcome-action-card::after {
      content: '›'; position: absolute; right: 12px; top: 50%;
      transform: translateY(-50%);
      font-size: 1.2rem; color: var(--text-pale); font-weight: 400;
    }
    .wa-icon {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
    }
    .wa-icon-yellow { background: #fef3c7; }
    .wa-icon-pink { background: #fce7f3; }
    .wa-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .wa-title { font-weight: 700; font-size: 0.82rem; color: var(--text); }
    .wa-sub { font-size: 0.7rem; color: var(--text-soft); line-height: 1.4; }

    /* ── Your Themes & Balance section ── Nested INSIDE .welcome-card
    (unlike the action buttons below, which sit outside it) — it inherits
    the card's own width for free, so it needs no separate width/edge-
    matching chain the way a standalone sibling card would. A dashed divider
    separates it from the description text above. */
    .themes-section {
      margin-top: 14px; padding-top: 14px;
      border-top: 1px dashed var(--border-mid);
    }
    .themes-header {
      display: flex; align-items: center; gap: 8px;
      font-weight: 700; font-size: 0.85rem; color: var(--text);
      margin-bottom: 12px;
    }
    /* Flex, not CSS grid auto-fit — auto-fit/auto-fill need a DEFINITE
    container width to compute how many tracks fit, which caused problems
    when this used to be a separate card with an indirect width chain. No
    longer an issue now that it's nested in .welcome-card directly, but flex
    is still simpler/more predictable for "N equal-ish tiles, wrap on
    narrow screens" than grid auto-fit.

    Plain flex-start everywhere (no space-between/stretching): the collapsed
    row used to force a fixed 5-tiles-+-More count and stretch it to fill the
    row, which put tiles at a different, airier density than the naturally-
    packed expanded rows — clicking More visibly changed how "big" everything
    looked. Now the JS-side fitThemesRow() (app.js) decides how many tiles to
    show based on the row's real measured width — "exactly as many as fit at
    natural size" — same density in every state, and the row still reaches
    the true right edge because the count IS "as many as fit," not a guess
    that then needs stretching to look right. */
    .themes-grid {
      display: flex; flex-wrap: wrap; gap: 10px 14px;
    }
    .theme-tile {
      display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
      /* flex-shrink:0 too (was 0 1 80px) — a tile shrinking below its 80px
      basis is what made everything look smaller right after expanding: with
      shrink allowed, a wider expanded row (7+ tiles) could still end up
      packed onto one line by compressing every tile a few px below 80px
      instead of wrapping. Locking both grow and shrink to 0 makes tile size
      identical in every state — collapsed, expanded, any row. */
      flex: 0 0 80px; min-width: 0;
    }
    .theme-icon {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.95rem; flex-shrink: 0;
    }
    .theme-icon-more { background: var(--surface-3); color: var(--text-soft); }
    /* Tiles past however many fitThemesRow() (app.js) decided fit the row
    are marked .theme-tile-extra and start hidden; clicking "More" adds
    .expanded to .themes-grid, which reveals them and hides the More tile
    itself — see toggleMoreThemes() in app.js. */
    .themes-grid:not(.expanded) .theme-tile-extra { display: none; }
    .themes-grid.expanded .theme-tile-more { display: none; }
    /* padding + matching negative margin: the hover background gets some
    breathing room around the icon/text instead of hugging their bounding
    box pixel-for-pixel, WITHOUT pushing neighboring tiles apart (the
    negative margin cancels the padding's effect on the tile's own layout
    size, so gap/space-between math elsewhere is unaffected). */
    .theme-tile-more {
      cursor: pointer; border-radius: var(--r-md); transition: background 0.15s;
      padding: 6px 8px; margin: -6px -8px;
    }
    .theme-tile-more:hover { background: var(--surface-2); }
    .theme-tile-more:hover .theme-icon-more { background: var(--border-mid); color: var(--text); }
    .theme-tile-more:hover .theme-name { color: var(--green); }
    .theme-name {
      font-weight: 600; font-size: 0.76rem; line-height: 1.25; color: var(--text);
      /* Wrap instead of ellipsis-truncating — a theme name like "Rank Really
      High Roller" was getting cut to "Rank Really…" in the fixed 80px tile.
      min-height reserves 2 lines' worth of space for EVERY tile, whether its
      name actually wraps or not — otherwise a short name (1 line) sits right
      above its balance while a long/wrapped name (2 lines) pushes its balance
      down, and the balances across a row look raggedly misaligned. Reserving
      the same space keeps every tile's balance at the same vertical position. */
      overflow-wrap: break-word;
      max-width: 100%;
      min-height: 1.9rem;
    }
    .theme-balance { font-weight: 600; font-size: 0.76rem; }
    .theme-balance-muted { color: var(--text-pale); font-weight: 500; }
    .welcome-chips-row {
      display: flex; gap: 6px;
    }
    .welcome-chip {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 9px 12px; border-radius: var(--r-md);
      border: 1px solid var(--border); background: var(--surface-2);
      color: var(--text); font-size: 0.8rem; font-weight: 600;
      cursor: pointer; transition: all 0.2s; font-family: inherit;
      position: relative;
    }
    .welcome-chip:hover {
      border-color: var(--green); background: var(--green-bg);
      box-shadow: var(--shadow-sm);
    }
    .welcome-chip::after {
      content: '›'; position: absolute; right: 14px;
      font-size: 1.2rem; color: var(--text-pale); font-weight: 400;
    }
    .wc-icon {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; flex-shrink: 0;
    }
    .wc-icon-yellow { background: #fef3c7; }
    .wc-icon-pink { background: #fce7f3; }
    .wc-icon-purple { background: #ede9fe; }
    .wc-icon-teal { background: #ccfbf1; }
    .wc-icon-orange { background: #ffedd5; }
    .wc-icon-red { background: #ffe4e6; }

    .starters {
      display: flex; gap: 6px; overflow-x: auto;
      padding: 0 12px 10px;
      scrollbar-width: none;
    }
    .starters::-webkit-scrollbar { display: none; }
    .starter-chip {
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--border-mid);
      background: var(--surface);
      color: var(--text-mid);
      font-size: 11.5px; font-weight: 500;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      white-space: nowrap;
      transition: all 0.12s;
      flex-shrink: 0;
    }
    .starter-chip:hover {
      border-color: var(--green);
      color: var(--green);
      background: var(--green-bg);
    }
    .starter-chip.neighborhood {
      border-color: var(--green);
      color: var(--green);
      background: var(--green-bg);
    }
    .starter-chip.neighborhood:hover {
      background: var(--green-light);
      border-color: var(--green);
    }

    .location-options-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 3px 0 8px 38px;
      width: min(100%, 430px);
      animation: fadeUp 0.25s ease;
    }
    .location-options-row.three {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .location-option-card {
      min-height: 68px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 11px;
      border: 1px solid #d8e4f5;
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      text-align: left;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
    }
    .location-option-card:hover {
      border-color: var(--green-mid);
      background: #f8fbff;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.10);
      transform: translateY(-1px);
    }
    .location-option-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--green-bg);
      color: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .location-option-title {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--text-mid);
      line-height: 1.25;
      margin-bottom: 2px;
    }
    .location-option-sub {
      display: block;
      font-size: 10.5px;
      font-weight: 500;
      color: var(--text-soft);
      line-height: 1.35;
    }
    /* @container, not @media — same reasoning as .welcome-action-grid above:
    reacts to .shell's real rendered width, not the browser viewport. */
    @container (max-width: 430px) {
      .location-options-row,
      .location-options-row.three {
        grid-template-columns: 1fr;
      }
      .location-option-card {
        min-height: 62px;
      }
    }

    /* ── Neighborhood brand card ── */
    .nbhd-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .nbhd-header {
      background: linear-gradient(135deg, #1e3a6e, #2563eb);
      padding: 10px 14px;
      display: flex; align-items: center; gap: 8px;
    }
    .nbhd-header-icon { font-size: 16px; }
    .nbhd-header-text {
      font-size: 11.5px; font-weight: 700;
      color: #fff; letter-spacing: 0.5px; text-transform: uppercase;
    }
    .nbhd-brand-row {
      display: flex; align-items: center;
      padding: 14px 16px;
      border-top: 1px solid var(--border);
      gap: 12px;
      transition: background 0.12s;
      cursor: pointer;
    }
    .nbhd-brand-row:hover { background: var(--surface-2); }
    .nbhd-rank {
      width: 28px; height: 28px;
      background: var(--green-bg);
      border: 1.5px solid var(--green-light);
      border-radius: 50%;
      font-size: 11px; font-weight: 700; color: var(--green);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .nbhd-brand-name {
      font-size: 14px; font-weight: 600; color: var(--text);
    }
    .nbhd-brand-info {
      flex: 1;
      display: flex; flex-direction: column; gap: 3px;
      min-width: 0;
    }
    .nbhd-arrow { font-size: 20px; color: var(--text-pale); font-weight: 300; flex-shrink: 0; }
    .nbhd-address {
      font-size: 11px; color: var(--text-soft); margin-top: 2px;
    }
    .nbhd-address a { color: var(--green); text-decoration: none; }
    .nbhd-address a:hover { text-decoration: underline; }
    .nbhd-phone {
      font-size: 11px; color: var(--text-soft); margin-top: 1px;
    }
    .nbhd-phone a { color: var(--text-soft); text-decoration: none; }
    .nbhd-phone a:hover { color: var(--green); }

    /* ── Rating/feedback modal (shown before a brand redirect) ──
    Positioned relative to .shell (not the page), so it stays inside the
    widget's own bounds when embedded — .shell already has position:relative
    + overflow:hidden. */
    .rating-overlay {
      position: absolute; inset: 0;
      background: rgba(15, 23, 42, 0.45);
      display: flex; align-items: center; justify-content: center;
      z-index: 50; padding: 20px;
    }
    .rating-modal {
      background: var(--surface); border-radius: var(--r-lg);
      box-shadow: var(--shadow-lg);
      padding: 22px; width: 100%; max-width: 300px; text-align: center;
    }
    .rating-modal-title { font-weight: 700; font-size: 0.95rem; color: var(--text); margin-bottom: 3px; }
    .rating-modal-sub { font-size: 0.75rem; color: var(--text-soft); margin-bottom: 16px; }
    .rating-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
    .rating-star {
      cursor: pointer; font-size: 1.9rem; line-height: 1; color: var(--border-mid);
      transition: color 0.1s, transform 0.1s;
    }
    .rating-star:hover { transform: scale(1.15); }
    .rating-star.active { color: var(--gold); }
    .rating-feedback-input {
      width: 100%; min-height: 56px; border: 1px solid var(--border);
      border-radius: var(--r-md); padding: 8px 10px; font-family: inherit;
      font-size: 0.78rem; resize: vertical; margin-bottom: 14px; color: var(--text);
    }
    .rating-feedback-input:focus { outline: none; border-color: var(--green); }
    .rating-actions { display: flex; gap: 8px; }
    .rating-submit-btn {
      flex: 1; border-radius: var(--r-md); padding: 10px; font-weight: 600;
      font-size: 0.8rem; font-family: inherit; cursor: pointer; transition: opacity 0.15s;
      background: linear-gradient(135deg, #1e3a6e, #2563eb); color: #fff; border: none;
    }
    .rating-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }