/* ==========================================================================
WAIVY UI KIT — the waivy.chat look, portable.
iMessage-style chat surface: sand/ink palette, glass bubbles, a blue "comet"
glow that sweeps the input on send, animated typing dots, a Google-AI-Mode
composer that springs open on focus, and a query that floats up on the right.
Drop-in: + waivy-ui.js.
Everything is namespaced `wv-` / `lp-`. Theme via .
========================================================================== */
/* ── Design tokens (light = default; dark overrides below) ───────────────── */
:root {
--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif;
--font-serif: Georgia, "Iowan Old Style", "Apple Garamond", serif;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
/* Palette — sand & ink (the canon Waivy look) */
--bg-app: #f1ece1;
--bg-app-gradient: radial-gradient(ellipse at top, #e6f1f6 0%, #f1ece1 60%, #ecd9c5 100%);
--color-ink: #1a2730;
--color-sand: #f7f3ec;
--text-primary: #1a2730;
--text-secondary: #4a5560;
--text-tertiary: #8e9aa8;
--text-inverse: #f7f3ec;
--accent-color: #1a2730;
--border-color: rgba(26, 39, 48, 0.1);
--divider: rgba(26, 39, 48, 0.1);
/* Bubbles */
--bg-bubble-user: #1a2730; /* outbound (right) — ink on sand */
--bg-bubble-user-text: #f7f3ec;
--imsg-bubble-radius: 18px;
--imsg-bubble-grey: #e9e5dc; /* inbound (left) — glass cream */
--imsg-bubble-grey-text: #1a2730;
/* Logo tint */
--waivy-slate-dark: #3d4458;
--waivy-slate-soft: #989aae;
/* Composer surface (opaque so the glow only shows at the 2px overhang) */
--lp-composer-bg: #fbfaf7;
--hdr-clearance: calc(58px + env(safe-area-inset-top));
--dock-clearance: calc(118px + env(safe-area-inset-bottom));
}
[data-theme="dark"] {
--bg-app: #0f1a26;
--bg-app-gradient: radial-gradient(ellipse at top, #1a2738 0%, #0f1a26 55%, #060c14 100%);
--color-ink: #e8edf3;
--color-sand: #0e1822;
--text-primary: #e8edf3;
--text-secondary: #8e9aa8;
--text-tertiary: #5d6776;
--text-inverse: #0e1822;
--accent-color: #e8edf3;
--border-color: rgba(255, 255, 255, 0.08);
--divider: rgba(255, 255, 255, 0.1);
--bg-bubble-user: #e8edf3; /* dark: user bubble inverts to warm light */
--bg-bubble-user-text: #0e1822;
--imsg-bubble-grey: #2a3340;
--imsg-bubble-grey-text: #e8edf3;
--waivy-slate-dark: #989aae;
--lp-composer-bg: #1c2733;
}
/* ── App shell — the DOCUMENT scrolls (google.com-style); header + dock fixed ── */
html { height: auto; min-height: 100%; overflow: visible; overscroll-behavior-y: contain; }
body {
height: auto; min-height: 100%; overflow: visible; max-width: 100%;
margin: 0; padding: 0; display: block;
/* Solid background (iMessage-authentic) so the bubble-tail cutout blends everywhere.
A gradient made the small tail cutout sample its bright center → a grey blob. */
background: var(--bg-app);
font-family: var(--font-system); color: var(--text-primary);
-webkit-font-smoothing: antialiased;
}
.wv-app { min-height: 100dvh; overflow-x: clip; } /* bubble tails poke past the edge */
/* ── Header — frosted, fixed over the scrolling thread ───────────────────── */
.lp-hdr {
position: fixed; top: 0; left: 0; right: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between;
padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
background: var(--bg-app);
-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
border-bottom: 1px solid color-mix(in srgb, var(--divider) 60%, transparent);
}
.lp-mark { height: 20px; width: auto; color: var(--waivy-slate-dark); }
.lp-hdr-actions {
display: inline-flex; align-items: center; gap: 14px;
transition: opacity 0.25s ease, transform 0.25s ease;
}
body.hdr-hidden .lp-hdr-actions { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.lp-getstarted {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-system); font-size: 0.86rem; font-weight: 600;
color: var(--color-sand); background: var(--color-ink);
border: none; border-radius: 999px; padding: 7px 14px;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.lp-getstarted:hover { opacity: 0.92; }
.lp-getstarted:active { transform: scale(0.97); }
.lp-gs-label { display: inline-flex; align-items: center; }
.lp-gs-logos { display: inline-flex; align-items: center; gap: 5px; }
.lp-gs-logo { width: 16px; height: 16px; display: block; }
/* ── Thread ───────────────────────────────────────────────────────────────── */
.lp-scroll { padding: var(--hdr-clearance) 14px var(--dock-clearance); font-family: var(--font-system); }
.lp-thread { max-width: 740px; margin: 0 auto; }
/* ── Bubble rows — iMessage geometry ─────────────────────────────────────── */
.lp-turn { padding-top: 8px; } /* breathing room above each turn's question (hides the prior turn behind the header when pinned) */
/* A small gap AFTER each finished conversation so the previous turn's last bubble tucks fully
behind the header instead of peeking under it. Only non-last turns get it (renders after the
restore, and the restore's height math accounts for it, so the current question doesn't move). */
.lp-turn:not(:last-child) { margin-bottom: 40px; }
.lp-row { display: flex; padding: 0 4px; margin: 1px 0; }
.lp-row.user { justify-content: flex-end; }
.lp-row.waivy { justify-content: flex-start; }
.lp-row + .lp-row.user, .lp-row + .lp-row.waivy { margin-top: 5px; } /* between a reply's own stacked bubbles */
.lp-row.user + .lp-row.waivy, .lp-row.waivy + .lp-row.user { margin-top: 16px; } /* between query ↔ reply */
.lp-fly { position: fixed; z-index: 30; margin: 0; padding: 0; pointer-events: none; will-change: transform; }
.lp-bubble {
max-width: 78%; padding: 8px 12px;
font-size: 0.95rem; line-height: 1.28; letter-spacing: -0.002em;
white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
animation: chat-fade-in 0.5s cubic-bezier(0.34, 1.28, 0.64, 1) both;
animation-delay: calc(var(--stagger, 0) * 60ms);
position: relative; border-radius: var(--imsg-bubble-radius);
isolation: isolate; /* own stacking context so the z-index:-1 tail nub sits behind the bubble but above the page */
}
.lp-bubble a, .lp-link { color: #0a7cff; text-decoration: none; font-weight: 600; word-break: break-word; }
.lp-bubble a:active { opacity: 0.6; }
/* Full-width card divider (from a ━/─ rule line) — adapts to the bubble, never overflows. */
.lp-rule { display: block; height: 0; border-top: 1.5px solid currentColor; opacity: 0.18; margin: 7px 0; }
.lp-rule-heavy { border-top-width: 2px; opacity: 0.32; }
.lp-row.user .lp-bubble { background: var(--bg-bubble-user); color: var(--bg-bubble-user-text); }
.lp-row.waivy .lp-bubble { background: var(--imsg-bubble-grey); color: var(--imsg-bubble-grey-text); }
.lp-bubble-img { max-width: 200px; border-radius: 12px; display: block; }
/* Channel-handoff action buttons — deep links (Open iMessage / Open WhatsApp) under a bubble.
Selectors are scoped under .lp-actions (0,2,0) so they beat `.lp-bubble a` (0,1,1) — otherwise
the link color would override the white button text. */
.lp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.lp-actions .lp-action {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-system); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em;
color: #fff; background: #0a7cff; border-radius: 999px; padding: 8px 15px;
text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
transition: transform 0.12s ease, filter 0.12s ease;
}
.lp-actions .lp-action:active { transform: scale(0.95); filter: brightness(0.92); }
.lp-actions .lp-action-wa { background: #25d366; color: #fff; } /* WhatsApp green */
.lp-actions .lp-action-ghost { background: transparent; color: #0a7cff; box-shadow: inset 0 0 0 1.5px currentColor; }
.lp-actions .lp-action-ic { font-size: 1.05em; line-height: 1; }
/* Structured "mono card" bubbles (box-drawing panels, tables, charts, sparklines):
monospace + preserved whitespace so columns stay aligned; scrolls if too wide. */
.lp-bubble.lp-mono {
max-width: 94%;
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11.5px; line-height: 1.35; letter-spacing: 0;
white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 10px 12px; tab-size: 2;
}
.lp-bubble.lp-mono::-webkit-scrollbar { height: 6px; }
.lp-bubble.lp-mono::-webkit-scrollbar-thumb { background: rgba(128,128,128,.32); border-radius: 4px; }
/* Wrapping mono card (news/feed): monospace + box-drawing rules, but long headlines wrap. */
.lp-bubble.lp-mono.lp-wrap { white-space: pre-wrap; overflow-x: visible; word-break: break-word; font-size: 12.5px; line-height: 1.42; }
.lp-bubble.lp-mono.lp-wrap b { font-weight: 700; }
/* iMessage tails removed for now — plain rounded bubbles. */
.lp-row .lp-bubble::before, .lp-row .lp-bubble::after { display: none !important; }
/* ── Typing dots — a tailless bubble ringed by the SAME blue comet ───────── */
.lp-typing-wrap { position: relative; display: inline-block; border-radius: var(--imsg-bubble-radius); isolation: isolate; }
.lp-typing-wrap::before {
content: ""; position: absolute; inset: -2px; z-index: -1;
border-radius: calc(var(--imsg-bubble-radius) + 2px);
background: conic-gradient(from calc(180deg + var(--lp-a)),
#6ea2f0 0deg, #4079e0 12deg, #2f5fc4 26deg, #274fa8 44deg,
rgba(39, 79, 168, 0) 84deg, rgba(39, 79, 168, 0) 360deg);
/* Hidden during the ~0.5s rise, then the glow kicks in ONCE the dots have LANDED (the delay). */
opacity: 0; animation: lp-comet-spin 1.5s linear 0.5s infinite; pointer-events: none;
}
@keyframes lp-comet-spin {
0% { --lp-a: 0deg; opacity: 1; } 50% { --lp-a: 360deg; opacity: 1; }
56% { --lp-a: 360deg; opacity: 0; } 100% { --lp-a: 360deg; opacity: 0; }
}
.lp-typing {
display: inline-grid; place-items: center start; overflow: hidden;
background: var(--imsg-bubble-grey); border-radius: var(--imsg-bubble-radius);
height: 31px; box-sizing: border-box; padding: 0 14px; position: relative;
animation: chat-fade-in 0.2s ease-out both;
width: auto; transition: width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Dots and label share ONE grid cell so the pill never collapses to a sliver
between them: its width eases from one to the next while the comet ring keeps
its shape — the glow rides straight through the swap, never cut in half. */
.lp-status-dots, .lp-status-text { grid-area: 1 / 1; }
.lp-status-text { opacity: 0; transition: opacity 0.18s ease; font-size: 0.95rem; color: var(--imsg-bubble-grey-text); white-space: nowrap; }
.lp-status-dots { display: inline-flex; gap: 5px; align-items: center; transition: opacity 0.18s ease; }
.lp-typing.has-label .lp-status-dots { opacity: 0; }
.lp-status-dots span {
display: inline-block; width: 7px; height: 7px; border-radius: 999px;
background: #98998c; opacity: 0.6; animation: lp-typing-pulse 1.2s ease-in-out infinite;
}
[data-theme="dark"] .lp-status-dots span { background: #8e9aa8; }
.lp-status-dots span:nth-child(2) { animation-delay: 0.15s; }
.lp-status-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lp-typing-pulse { 0%, 60%, 100% { opacity: 0.4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes chat-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* The SEND entrance: the question (every user bubble is a sent query) and the "..." dots start
LOWER and rise UP into place, landing (ease-out) right as the keyboard / Safari URL bar finishes
its ~450ms dismiss animation. Reply bubbles keep the subtler chat-fade-in above. */
@keyframes lp-rise-in { from { opacity: 0; transform: translateY(var(--rise-from, 30px)); } to { opacity: 1; transform: translateY(0); } }
.lp-row.user .lp-bubble,
.lp-typing { animation: lp-rise-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes chat-pop-in { from { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
/* ── Composer dock — always visible, floats over the thread ──────────────── */
.lp-dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
padding: 4px 14px calc(8px + env(safe-area-inset-bottom)); pointer-events: none;
transition: none;
}
body.state-anim .lp-dock { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
body.kb-room .lp-scroll { padding-bottom: calc(var(--dock-clearance) + 48vh); }
.lp-dock > * { pointer-events: auto; }
.lp-dock::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -48px;
background: linear-gradient(to bottom, transparent, var(--bg-app) 44%);
z-index: -1; pointer-events: none; transition: opacity 0.3s ease;
}
.lp-dock-inner { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; transition: gap 0.35s ease; }
body[data-state="chat"] .lp-dock-inner { gap: 0; }
body[data-state="empty"] .lp-dock { transform: translateY(calc(-0.5 * var(--app-h, 100dvh) + 50% + 40px)); }
body[data-state="empty"] .lp-dock::before { opacity: 0; }
/* Greeting + suggestion chips (empty state) */
.lp-hero { text-align: center; overflow: hidden; max-height: 120px; transition: opacity 0.25s ease, max-height 0.35s ease, margin 0.35s ease; }
.lp-hero h1 { font-family: var(--font-serif); font-size: clamp(24px, 6vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 6px; }
.lp-dock-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; overflow: hidden; max-height: 120px; transition: opacity 0.25s ease, max-height 0.35s ease, margin 0.35s ease; }
.lp-chip {
font-family: var(--font-system); font-size: 0.86rem; color: var(--text-secondary);
background: color-mix(in srgb, var(--bg-app) 62%, #fff); border: 1px solid var(--border-color);
border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.lp-chip.filled { background: var(--color-ink); color: var(--color-sand); border-color: transparent; }
body[data-state="chat"] .lp-hero, body[data-state="chat"] .lp-dock-chips { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
/* ── Live composer — Google-AI-Mode focus expansion + the blue comet trace ── */
@property --lp-a { syntax: ''; inherits: false; initial-value: 0deg; }
.lp-composer-wrap { position: relative; border-radius: 28px; isolation: isolate; }
.lp-composer-wrap::before {
content: ""; position: absolute; inset: -2.5px; z-index: -1; border-radius: 31px;
background: conic-gradient(from calc(180deg + var(--lp-a)),
#6ea2f0 0deg, #4079e0 12deg, #2f5fc4 26deg, #274fa8 44deg,
rgba(39, 79, 168, 0) 84deg, rgba(39, 79, 168, 0) 360deg);
opacity: 0; pointer-events: none;
}
.lp-composer-wrap.tracing::before { animation: lp-trace 0.72s cubic-bezier(0.4, 0, 0.25, 1) forwards; }
@keyframes lp-trace { 0% { opacity: 1; --lp-a: 0deg; } 82% { opacity: 1; } 100% { opacity: 0; --lp-a: 360deg; } }
.lp-composer {
display: block; overflow: hidden; position: relative; z-index: 1;
height: var(--comp-h, 54px);
background: var(--lp-composer-bg); border: 1px solid var(--border-color); border-radius: 28px;
box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.3); cursor: text;
transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}
/* The real Google-AI-Mode spring — a sampled linear() curve captured from their
composer. Progressive-enhancement: browsers without linear() keep the
cubic-bezier fallback above. This is the exact expand/collapse feel. */
@supports (transition-timing-function: linear(0, 1)) {
.lp-composer {
transition-duration: 0.6s;
transition-timing-function: linear(0 0%, 0.00245 1.753%, 0.00994 3.55%, 0.03415 6.402%, 0.07441 9.061%, 0.12808 11.414%, 0.19399 13.366%, 0.27138 14.974%, 0.34474 16.052%, 0.47679 17.475%, 0.60689 19.389%, 0.68967 21.461%, 0.74193 23.444%, 0.78755 25.874%, 0.82719 28.791%, 0.86492 32.632%, 0.88332 35.056%, 0.9039 38.373%, 0.9295 43.795%, 0.95333 50.97%, 0.97199 59.335%, 0.9858 69.036%, 0.99492 80.205%, 1 100%);
}
}
[data-theme="dark"] .lp-composer { box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.6); }
.lp-composer-wrap:focus-within .lp-composer { border-color: transparent; }
body.kb-room .lp-composer { box-shadow: none; }
.lp-composer-row1 { display: flex; align-items: center; min-height: 54px; padding: 0 14px 0 16px; }
.lp-composer-pill { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-family: var(--font-system); }
.lp-composer-input {
flex: 1 1 auto; min-width: 0; border: none; background: transparent; outline: none; resize: none; display: block;
font-family: var(--font-system); font-size: 16px; line-height: 22px; color: var(--text-primary);
max-height: 96px; padding: 0;
}
.lp-composer-input::placeholder { color: var(--text-tertiary); }
.lp-composer-tools { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 10px 12px; opacity: 0; transition: opacity 0.25s ease 0.08s; }
.lp-composer.expanded .lp-composer-tools { opacity: 1; }
.lp-tools-left { display: inline-flex; align-items: center; gap: 8px; }
.lp-composer-plus {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary);
display: flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer;
}
/* Respect [hidden] — the display:flex above was overriding it, so the phone-mode Cancel "×"
leaked into the chat composer. Now it only appears during phone signup. */
.lp-composer-plus[hidden] { display: none !important; }
.lp-send {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: none;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-bubble-user); color: var(--bg-bubble-user-text); cursor: pointer; font-size: 0.85rem;
transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.lp-send:disabled { opacity: 0.35; pointer-events: none; }
.lp-send:active { transform: scale(0.9); }
/* Mic in the tools row — pulses red while dictating. */
.lp-dictate.recording { color: #d8463a; border-color: #d8463a; animation: lp-rec-pulse 1.4s ease-in-out infinite; }
@keyframes lp-rec-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(216, 70, 58, 0.35); }
50% { box-shadow: 0 0 0 6px rgba(216, 70, 58, 0); }
}
/* Attached-image preview row (top of the expanded composer). */
.lp-attach { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0 16px; }
.lp-attach[hidden] { display: none; }
.lp-attach-thumb { height: 52px; width: auto; max-width: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color); }
.lp-attach-x {
width: 22px; height: 22px; border-radius: 50%; border: none;
background: color-mix(in srgb, var(--text-primary) 10%, transparent); color: var(--text-secondary);
font-size: 0.7rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
/* A sent image inside a user bubble. */
.lp-bubble .lp-bubble-img { display: block; max-width: 200px; border-radius: 12px; margin: 2px 0 6px; }
/* A generated/edited OR sent image renders larger than an upload thumbnail, and BARE (no box). */
.lp-bubble-img-gen { max-width: min(300px, 78vw); width: 100%; border-radius: 16px; margin: 0; display: block; }
/* An image with no caption drops the bubble box entirely — just the image floats. */
.lp-bubble.lp-img-only { background: transparent; padding: 0; box-shadow: none; border: none; max-width: 78%; }
/* A SENT image (user) — bare image, right-aligned, with any caption bubble stacked beneath it. */
.lp-sent { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 78%; }
.lp-bubble-img { cursor: pointer; } /* tap to open fullscreen */
/* ── Fullscreen image viewer (lightbox) ─────────────────────────────────────── */
.lp-lightbox {
position: fixed; inset: 0; z-index: 100; padding: 24px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
background: rgba(8, 10, 14, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
animation: chat-fade-in 0.16s ease-out both;
}
.lp-lightbox[hidden] { display: none; }
.lp-lightbox-img { max-width: 92vw; max-height: 72vh; border-radius: 14px; object-fit: contain; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.lp-lightbox-bar { display: flex; gap: 12px; }
.lp-lightbox-btn { padding: 11px 26px; border-radius: 999px; border: none; background: rgba(255, 255, 255, 0.16); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.lp-lightbox-btn:active { background: rgba(255, 255, 255, 0.3); }
.lp-lightbox-close {
position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 18px; width: 40px; height: 40px;
border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.16); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
body.lp-lightbox-open { overflow: hidden; }
/* Content wash while the composer is focused (Google's ~60% scrim). Extends
well past the viewport bottom so the keyboard pan never exposes a hard edge. */
.lp-dim {
position: fixed; top: 0; left: 0; right: 0; bottom: -45vh; z-index: 5;
background: color-mix(in srgb, var(--bg-app) 62%, transparent);
opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
body.composer-dim .lp-dim { opacity: 1; pointer-events: auto; }
/* ── Phone / signup mode — the composer BECOMES the phone field ──────────────
The Get-started CTA (or typing a number) flips the composer into phone mode:
a tappable country-code prefix + the iMessage/WhatsApp value-prop, riding the
keyboard natively. The country menu opens UPWARD, above the keyboard. */
.lp-composer.pm { overflow: visible; } /* let the upward country menu escape */
.lp-composer.pm .lp-tools-left #wv-attach-btn,
.lp-composer.pm .lp-tools-left #wv-mic { display: none; } /* image/mic swap out for the country prefix */
.lp-phone-cc { position: relative; display: inline-flex; }
.lp-phone-cc[hidden] { display: none; }
.lp-pm-prefix {
display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
border-radius: 999px; border: 1px solid var(--border-color); background: transparent; cursor: pointer;
font-family: var(--font-system); font-size: 0.95rem; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.lp-pm-prefix .flag { font-size: 1.05rem; line-height: 1; }
.lp-pm-prefix .lp-chev { width: 9px; height: 9px; color: var(--text-tertiary); }
/* Value-prop hint riding the tools row: "Ask in 💬 💚". */
.lp-pm-hint {
display: none; align-items: center; gap: 6px; min-width: 0; overflow: hidden;
font-family: var(--font-system); font-size: 0.85rem; line-height: 1; color: var(--text-tertiary);
white-space: nowrap; pointer-events: none; user-select: none;
}
.lp-pm-hint-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-pm-logo { flex: 0 0 auto; width: 17px; height: 17px; display: block; }
/* In signup mode the greeting + suggestion chips fold away (it's a form now). */
body.pm-signup .lp-dock-chips, body.pm-signup .lp-hero { opacity: 0 !important; pointer-events: none !important; }
/* ── Country-code menu (searchable, opens upward from the prefix) ──────────── */
.lp-cc-menu {
position: absolute; z-index: 40; top: auto; bottom: calc(100% + 10px); left: 0; right: auto;
width: min(320px, calc(100vw - 56px));
background: var(--bg-app); border: 1.5px solid var(--border-color); border-radius: 14px;
box-shadow: 0 22px 55px -22px rgba(0, 0, 0, 0.5); overflow: hidden; display: none;
}
.lp-cc-menu.open { display: block; animation: chat-fade-in 0.16s ease-out both; }
.lp-cc-search {
width: 100%; border: none; border-bottom: 1px solid var(--border-color);
padding: 13px 16px; font-size: 16px; background: transparent; color: var(--text-primary);
font-family: var(--font-system); outline: none; box-sizing: border-box;
}
.lp-cc-list { max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lp-cc-opt {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px;
border: none; background: none; cursor: pointer;
font-family: var(--font-system); font-size: 0.95rem; color: var(--text-primary); text-align: left;
}
.lp-cc-opt:hover { background: color-mix(in srgb, var(--bg-bubble-user) 10%, transparent); }
.lp-cc-opt .flag { font-size: 1.15rem; line-height: 1; }
.lp-cc-opt .name { flex: 1; }
.lp-cc-opt .dial { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lp-cc-empty { padding: 16px; text-align: center; color: var(--text-tertiary); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
.lp-typing-wrap::before, .lp-composer-wrap.tracing::before { animation: none; opacity: 0; }
.lp-bubble, .lp-typing, .lp-dock, .lp-hero, .lp-dock-chips { animation: none !important; transition: none !important; }
}