/* blocfone® web chat — Telegram-like, mobile-first. No frameworks. */
:root {
  --bg: #ffffff;
  --chat-bg: #f2f4f7;          /* Telegram-ish light canvas */
  --bot-bubble: #ffffff;
  --user-bubble: #ffd84d;      /* blocfone yellow */
  --user-text: #040039;      /* navy on yellow — the logo pairing */
  --text: #1a1a1a;
  --hint: #7a8087;
  --accent: #f5c400;           /* brand yellow (buttons) */
  --accent-press: #e0b400;
  --chip-bg: #ffffff;
  --chip-border: #d9dee4;
  --best: #1e8e3e;
  --navy: #040039;            /* logo navy — wordmark, links, on-yellow text */
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 16px/1.45 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--chat-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout: full-viewport chat, desktop gets a centered phone-width column ── */
#chat {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--chat-bg);
}

/* ── Flow mode (html.fit) ──
   Free-flowing document layout: the geo picker and every step sit in the page
   flow, the PAGE scrolls, no internal scrollbars anywhere. Applied in two
   contexts (widget.js): ?embed=fit (mobile hero — the parent iframe is sized
   to our content via postMessage) and TOP-LEVEL opens (/widget/ directly, the
   future blocfone.com sheet). Iframed without the param (hero desktop phone
   frame, og-card) stays viewport-bound with internal scrolling. */
html.fit, html.fit body { height: auto; }
html.fit #chat { height: auto; }
html.fit #messages { overflow-y: visible; }
html.fit #actionBar { max-height: none; overflow-y: visible; }
/* Top-level flow: keep the brand header (and the burger menu it anchors)
   pinned while the page scrolls. Inside the hero iframe sticky/fixed resolve
   against the iframe, which never scrolls internally — no behavior change. */
html.fit #chatHeader { position: sticky; top: 0; z-index: 30; }
/* Fixed = viewport-relative, but #chat is a CENTERED 430px column — anchor the
   menu to the column's right edge, not the window's (desktop top-level view).
   On narrow screens (100vw ≤ 430px) the max() falls back to the plain 8px. */
html.fit #menuPanel { position: fixed; right: max(8px, calc((100vw - 430px) / 2 + 8px)); }
html.fit #menuBackdrop { position: fixed; }

/* Legal line inside action-bar states (owner-placed, not a persistent
   footer). Full flex row, centered, comfortable spacing under the chips. */
.legalrow {
  flex-basis: 100%;
  text-align: center;
  font-size: 11.5px;
  color: var(--hint);
  margin-top: 12px;
  padding-bottom: 2px;
  line-height: 1.6;
}
.legalrow a { color: var(--hint); text-decoration: underline; }

#chatHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid #e6e9ed;
  flex: 0 0 auto;
}
#brandLogo {
  width: 38px; height: 38px;
  border-radius: 50%;    /* circular yellow mark (logo B) */
  display: block;
  cursor: pointer;       /* tap = new search (same as the menu action) */
}
#brandName { font-weight: 700; font-size: 16px; color: var(--navy); }
#brandSub  { font-size: 12px; color: var(--hint); }

/* ── Messages ── */
#messages {
  flex: 1 1 auto;
  min-height: 0;             /* proper flex scroll — the actionBar cap below reserves
                                the room the intro bubbles need */
  overflow-y: auto;
  padding: 12px 12px 14px;   /* bottom breathing room so the last bubble clears the action bar */
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
.msg {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: var(--radius);
  white-space: pre-line;
  overflow-wrap: break-word;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } }
.msg.bot  { align-self: flex-start; background: var(--bot-bubble); border-bottom-left-radius: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.msg.user { align-self: flex-end;   background: var(--user-bubble); color: var(--user-text); border-bottom-right-radius: 6px; }

/* typing indicator */
.typing { display: inline-flex; gap: 4px; padding: 13px 15px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #b9c0c7;
  animation: blink 1.1s infinite both;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Plan cards (inside chat) ── */
.plan {
  align-self: stretch;
  background: var(--bot-bubble);
  border: 1px solid var(--chip-border);
  border-radius: 14px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  animation: pop .18s ease-out;
}
.plan:active { background: #fdf6dc; }
.plan .flag { font-size: 26px; }
.plan .mid  { flex: 1 1 auto; min-width: 0; }
.plan .line1 { font-weight: 600; font-size: 15px; }
.plan .line2 { font-size: 12.5px; color: var(--hint); margin-top: 1px; }
.plan .price { text-align: right; }
.plan .usd   { font-weight: 700; font-size: 15px; }
.plan .local { font-size: 12px; color: var(--hint); }
.plan .badge {
  display: inline-block;
  font-size: 11px;
  color: var(--best);
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0 5px;
  margin-bottom: 2px;
}

/* ── Bottom action bar (Telegram reply-keyboard feel) ── */
#actionBar {
  flex: 0 1 auto;
  /* Adaptive cap: tall pickers scroll instead of crushing the chat. 250px =
     header + both EN intro bubbles — the picker takes everything else.
     (Mobile hero uses embed=fit and ignores this; it matters for the desktop
     phone frame, og-card, and standalone use. Re-measure if intro copy
     changes, then regenerate og-image.png.) */
  max-height: max(90px, calc(100% - 250px));
  overflow-y: auto;
  padding: 8px 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid #e6e9ed;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  min-height: 58px;
}
#actionBar:empty { display: none; }
.chip {
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 14px;         /* ≥44px touch target with line-height */
  font-size: 15px;
  cursor: pointer;
  flex: 1 1 calc(33% - 8px);
  min-width: 96px;
  max-width: 100%;
  text-align: center;
}
.chip:active { background: #f0f2f5; }
.chip.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; color: var(--navy); }
.chip.primary:active { background: var(--accent-press); }
.chip.wide { flex-basis: 100%; }

/* search input mode */
#searchWrap { display: flex; gap: 8px; width: 100%; }
#searchInput {
  flex: 1 1 auto;
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 16px;             /* 16px prevents iOS zoom-on-focus */
  outline: none;
  background: var(--chip-bg);
}
#searchInput:focus { border-color: var(--accent); }
#searchResults { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: 34dvh; overflow-y: auto; }
#searchResults .chip { text-align: left; flex-basis: 100%; }

/* ── Checkout: Solana Pay QR card ── */
.payqr {
  align-self: center;
  background: #fff;
  border: 1px solid var(--chip-border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  animation: pop .18s ease-out;
}
.payqr-code { display: inline-block; background: #fff; }
.payqr-code img, .payqr-code canvas { display: block; }
.payqr-cap { font-size: 12px; color: var(--hint); margin-top: 8px; }

/* ── eSIM delivery card ── */
.esim {
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--chip-border);
  border-radius: 14px;
  padding: 14px;
  animation: pop .18s ease-out;
}
.esim-qr { display: flex; justify-content: center; padding: 4px 0 10px; }
.esim-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid #eef1f4;
}
.esim-lbl { flex: 0 0 auto; font-size: 12px; color: var(--hint); min-width: 92px; }
.esim-val { flex: 1 1 auto; font-size: 13px; word-break: break-all; }
.esim-copy {
  flex: 0 0 auto; border: 1px solid var(--chip-border); background: var(--chip-bg);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.esim-note { font-size: 12px; color: var(--hint); margin-top: 10px; }

/* ── "Show all N plans" link (below the top 5) ── */
.showmore {
  align-self: center;
  background: none;
  border: none;
  color: var(--navy);          /* logo navy — reads as a brand link */
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  margin: 2px 0 4px;
  cursor: pointer;
}
.showmore:active { opacity: .6; }

/* Alternative badge (↓/↑) — muted so the ⭐ best still stands out */
.plan .badge.alt { color: #7a8087; }

/* Keep USDC prices on one line (longer than a $ figure) */
.plan .price { flex: 0 0 auto; white-space: nowrap; padding-left: 6px; }
.plan .usd, .plan .local { white-space: nowrap; }

/* Plan-list footer: guidance caption + Search-again (secondary) */
.plansfooter {
  align-self: center;
  max-width: 90%;
  text-align: center;
  font-size: 13px;
  color: var(--hint);
  margin: 6px 0 2px;
}
.showmore.secondary { color: var(--hint); font-weight: 500; }

/* Footer container — centres caption + buttons; re-rendered below the full list on expand */
.plansfoot { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* Country buttons (region 3-up grid): uniform size even when a long name wraps.
   Fixed height fits two lines; content is centred so single-line names match. */
.chip.country {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px 8px;
  font-size: 13.5px;
  line-height: 1.15;
}

/* Data-tier buttons: 2-up so 'Standard · 5 GB' etc. fit on one line (no wrap) */
.chip.tier { flex: 1 1 calc(50% - 8px); white-space: nowrap; }

/* Terms/Privacy consent line under the pay QR */
.consent { font-size: 11.5px; color: var(--hint); margin-top: 10px; line-height: 1.35; }
.consent a { color: var(--navy); text-decoration: underline; }

/* ── Header burger menu ── */
#chat { position: relative; }   /* anchor for the dropdown */
#menuBtn {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 6px 4px;
  width: 40px; height: 40px;
}
#menuBtn:active { opacity: .55; }

#menuBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  z-index: 40;
}
#menuBackdrop[hidden] { display: none; }

#menuPanel {
  position: absolute;
  top: calc(58px + env(safe-area-inset-top));
  right: 8px;
  min-width: 220px;
  max-width: 82%;
  background: var(--bg);
  border: 1px solid var(--chip-border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 41;
  overflow: hidden;
  animation: pop .16s ease-out;
}
#menuPanel[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-size: 15px;
  color: var(--text);
  padding: 13px 16px;
  cursor: pointer;
}
.menu-item + .menu-item { border-top: 1px solid #eef1f4; }
.menu-item:active { background: #f0f2f5; }
.menu-item .mi-ic { font-size: 17px; width: 22px; text-align: center; }
.menu-item.current { color: var(--best); font-weight: 600; }  /* selected language */
.menu-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-size: 13px; color: var(--hint);
  border-bottom: 1px solid #eef1f4; cursor: pointer;
}

/* Links inside chat bubbles (help / legal / support) */
.msg a { color: var(--navy); text-decoration: underline; }

/* Full "How it works" help bubble (verbatim Telegram content) */
.msg.help { max-width: 92%; }
.msg.help code { background: #eef1f4; border-radius: 4px; padding: 1px 5px; font-size: 13px; }
.msg.help strong { font-weight: 700; }

/* ⚠️ safety warning inside the pay QR card */
.payqr-warn { font-size: 11.5px; color: #b26a00; margin-top: 8px; line-height: 1.35; }
.payqr-warn strong { font-weight: 700; }

/* Compare-all divider: rule under the original 5-card window, label above the
   full lowest→highest price list (owner spec 2026-07-08). */
.plansdivider {
  border-top: 1px solid var(--chip-border);
  color: var(--hint);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .02em;
  margin: 14px 2px 4px;
  padding-top: 10px;
  align-self: stretch;
}

/* Compact select pill on plan cards (Mini App parity, chat-card height).
   Brand-primary styling matches .chip.primary — navy on yellow. */
.plansel {
  display: inline-block;
  margin-top: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--navy);
  font-weight: 600;
  font-size: 11.5px;
  border-radius: 8px;
  padding: 3px 9px;
  cursor: pointer;
}
.plansel:active { background: var(--accent-press); }