/* ============================================================================
   eSIM Go demo-app component library — components.css
   Reusable styles for in-page demo apps. NOT eSIM-branded (plain/neutral by
   design). Scoped under .app / .phone so it can't leak into page styles.
   ========================================================================== */

/* ---- 1. Neutral demo skin (white, near-black accent, grey tiles) ---- */
.app .av,.app .ahd .av{background:#111417 !important}
.app .sq{background:#f1f2f3 !important;color:#111417 !important;font-weight:700 !important}
.app .new{background:#eef0ef !important;color:#374039 !important}
.app .irow.hl{background:#f7f8f8 !important;animation:none !important}
.app .bbhero{background:#f4f5f6 !important;color:#111417 !important}
.app .bbhero .k,.app .bbhero .ms{opacity:.62}
.app .bbhero .meter{background:rgba(17,20,23,.12) !important}
.app .bbhero .meter i{background:#111417 !important}
.app .plan:not([data-plan]).sel{border-color:#111417 !important;background:#fff !important}
.app .plan:not([data-plan]) .ptag{background:#111417 !important;color:#fff !important}
.app .planscta{background:#111417 !important}
.app .tapchip{background:#111417 !important;color:#fff !important}

/* ---- 2. iOS structure (Dynamic Island phones) ---- */
.phone .screen{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif}
.phone .screen::after{content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:112px;height:4px;border-radius:3px;background:#0b0f0d;opacity:.3;z-index:60;pointer-events:none}
.app .tabbar{padding-bottom:20px !important}
.app .pg-plans{padding-bottom:16px !important}

/* ---- 3. WhatsApp chat — iOS chrome + WhatsApp DESIGN.md tokens ----
   Tokens from whatsapp_design.md: ink #1c1e21, ink-muted #5e5e5e, canvas #fcf5eb,
   surface-1 #fff, mint bubble #e6ffda, link blue #0373e9, weight 400 throughout,
   generous radii (marketing depiction of chat, per the spec's chat mockup).
   iOS chrome: light nav bar, blue accents — not the Android green bar. */
.app.chat{background:#fcf5eb !important}
.app.chat .sb{background:#f6f6f6 !important;color:#1c1e21 !important;border-bottom:0}
.app.chat .sb svg{fill:#1c1e21 !important}
.app.chat .sb svg rect{fill:#1c1e21 !important;stroke:#1c1e21 !important}
.app.chat .sb svg rect[fill="none"]{fill:none !important}
.app.chat .wa-hd{background:#f6f6f6 !important;color:#1c1e21 !important;border-bottom:1px solid rgba(28,30,33,.12);padding:6px 10px 8px}
.app.chat .wa-hd .bk{display:inline-flex;align-items:center;color:#0373e9}
.app.chat .wa-hd .bk svg{stroke:#0373e9 !important}
.app.chat .wa-hd .av{background:#e8e2d6 !important;color:#5e5e5e !important}
.app.chat .wa-hd .t{font-weight:400;font-size:14.5px;color:#1c1e21}
.app.chat .wa-hd .s{color:#5e5e5e;opacity:1}
.app.chat .wa-hd .s b{background:#25d366}
.app.chat .wa-hd .ico svg{fill:#0373e9 !important}
.app.chat .wa-body{background:#fcf5eb !important;background-image:none !important;padding:12px 10px}
.app.chat .wa-enc{background:#fdf3cf;color:#8a7a3e;box-shadow:none;border-radius:10px}
.app.chat .wa-sys{background:#eef3f8;color:#3b6ea5;border-radius:10px}
.app.chat .wa-day{background:#f1e9da;color:#5e5e5e;box-shadow:none;border-radius:10px}
.app.chat .wa-input{background:#f6f6f6 !important;border-top:1px solid rgba(28,30,33,.1);padding:8px 9px 16px !important}
.app.chat .wa-input .box{background:#fff;border:1px solid rgba(28,30,33,.14);box-shadow:none;color:#5e5e5e;border-radius:999px}
.app.chat .wa-input .emo,.app.chat .wa-input .clip{display:inline-flex;align-items:center;opacity:1}
.app.chat .wa-input .emo svg{fill:#0373e9 !important}
.app.chat .wa-input .clip svg{stroke:#0373e9 !important}
.app.chat .wa-input .snd{display:grid;place-items:center;background:#0373e9 !important}

/* Bubbles: marketing depiction (per DESIGN.md) — surface-1 in, mint out, ink text,
   generous radius, no tails. Product-true mechanics kept: grouping + bottom-right
   meta via inline spacer + SVG double-check ticks (in-chat tokens the spec
   doesn't capture). */
.msg{position:relative;width:fit-content;max-width:84%;font-size:11.8px;font-weight:400;line-height:1.45;color:#1c1e21;padding:6px 9px 8px 10px;border-radius:14px;box-shadow:none;margin-top:2px;opacity:0;transform:translateY(6px) scale(.98);transition:opacity .28s ease,transform .28s ease}
.msg.show{opacity:1;transform:none}
.msg.first{margin-top:10px}
.msg.inb{background:#ffffff;align-self:flex-start;border:1px solid rgba(28,30,33,.06)}
.msg.out{background:#e6ffda;align-self:flex-end}
.msg.first.inb{border-bottom-left-radius:5px}
.msg.first.out{border-bottom-right-radius:5px}
.msg .tail{display:none !important}
.msg .bd{white-space:pre-wrap}
.msg .meta-gap{display:inline-block;width:36px;height:1px;vertical-align:baseline}
.msg.out .meta-gap{width:52px}
.msg .meta{position:absolute;right:8px;bottom:5px;display:flex;align-items:center;gap:3px;font-size:8.8px;line-height:1;color:#5e5e5e;white-space:nowrap}
.msg .meta .ticks{display:inline-flex;color:#53bdeb}
.msg .meta .ticks svg{display:block}
/* Legacy selectors kept inert so old markup can't mis-render */
.msg .tm{display:none}
.msg.inb::before,.msg.out::before{display:none;content:none}