:root { --bg: #f3f6f4; --surface: #ffffff; --surface-2: #e8eeea; --text: #0e1a14; --muted: #5d6d64; --line: #dbe3de; --accent: #1a9e55; --accent-press: #15864a; --accent-soft: #d7f2e2; --on-accent: #ffffff; --danger: #c63d3d; --shadow: 0 1px 2px rgb(14 26 20 / 6%), 0 8px 24px rgb(14 26 20 / 6%); --radius: 22px; --key: clamp(56px, min(19vw, 9.4dvh), 76px); color-scheme: light; } /* Dark theme: follows the system unless the user picked Light or Dark (data-theme on ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c1411; --surface: #15201b; --surface-2: #1d2a24; --text: #e9f1ec; --muted: #93a59b; --line: #25342d; --accent: #25b765; --accent-press: #1f9d57; --accent-soft: #173a27; --on-accent: #04130b; --danger: #ef7070; --shadow: none; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0c1411; --surface: #15201b; --surface-2: #1d2a24; --text: #e9f1ec; --muted: #93a59b; --line: #25342d; --accent: #25b765; --accent-press: #1f9d57; --accent-soft: #173a27; --on-accent: #04130b; --danger: #ef7070; --shadow: none; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; touch-action: manipulation; } button:disabled { cursor: default; } svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } [hidden] { display: none !important; } :focus { outline: none; } /* Focus rings only for keyboard users. Taps never show them, including when a closing sheet hands focus back to the button that opened it. */ html.kbd :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a { color: inherit; text-decoration: none; } /* iOS turns phone numbers into underlined call links; keep our styling. */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; pointer-events: none; } /* ---------- Layout ---------- */ .app { display: flex; flex-direction: column; min-height: 100dvh; max-width: 460px; margin: 0 auto; padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .topbar { display: flex; align-items: center; justify-content: space-between; height: 56px; flex: none; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 18px; letter-spacing: -0.01em; } .brand img { border-radius: 8px; flex: none; } .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand { min-width: 0; } .topbar-actions { display: flex; gap: 4px; } .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); } .icon-btn:active { background: var(--surface-2); } .theme-btn .i { display: none; } .theme-btn[data-mode="system"] .i-system, .theme-btn[data-mode="light"] .i-light, .theme-btn[data-mode="dark"] .i-dark { display: block; } .dialer { flex: 1; display: flex; flex-direction: column; gap: 12px; } /* ---------- Number display ---------- */ .display { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; min-height: 150px; padding: 8px 0; text-align: center; } .country-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-weight: 600; } .country-btn .flag { font-size: 20px; line-height: 1; } .country-btn .chev { width: 18px; height: 18px; color: var(--muted); } .country-btn:active { background: var(--surface-2); } .number { width: 100%; border: 0; background: transparent; outline: none; text-align: center; font-size: clamp(30px, 9vw, 40px); font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; caret-color: var(--accent); padding: 4px 0; } .number::placeholder { color: var(--muted); opacity: 0.55; font-weight: 400; } .preview { margin: 0; min-height: 1.4em; color: var(--muted); font-size: 14px; } .preview.ok { color: var(--accent); font-weight: 550; } .preview.error { color: var(--danger); } /* Hint or paste chip under the number; fixed height so nothing jumps. */ .status { display: flex; align-items: center; justify-content: center; min-height: 34px; } .paste-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; animation: chip-in 0.18s ease-out; } .paste-chip svg { flex: none; width: 18px; height: 18px; stroke-width: 2; } .paste-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paste-chip:active { filter: brightness(0.95); transform: scale(0.97); } @keyframes chip-in { from { opacity: 0; transform: translateY(4px); } } /* ---------- Message ---------- */ .message { flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); } .message summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; list-style: none; cursor: pointer; color: var(--muted); font-size: 15px; } .message summary::-webkit-details-marker { display: none; } .message summary svg { width: 20px; height: 20px; } .message .optional { margin-left: auto; font-size: 12px; opacity: 0.8; } .message[open] summary { padding-bottom: 4px; } .message textarea { display: block; width: 100%; border: 0; outline: none; resize: none; background: transparent; padding: 4px 14px 12px; font-size: 16px; /* 16px stops iOS zooming on focus */ } /* ---------- Keypad ---------- */ .keypad { flex: none; display: grid; grid-template-columns: repeat(3, var(--key)); justify-content: space-evenly; row-gap: clamp(6px, 1.4dvh, 14px); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .key { display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--key); height: var(--key); border: 0; border-radius: 50%; background: var(--surface-2); transition: background-color 0.12s, transform 0.08s; } .key b { font-size: calc(var(--key) * 0.42); font-weight: 450; line-height: 1; } /* The 0 key's small "+" hangs below, so 0 stays aligned with 1–9. */ .key { position: relative; } .key small { position: absolute; left: 0; right: 0; bottom: 13%; font-size: 13px; line-height: 1; color: var(--muted); font-weight: 600; } .key:active, .key.pressed { background: var(--line); transform: scale(0.96); } .key-fn { background: transparent; color: var(--muted); } .key-spacer { width: var(--key); height: var(--key); } .key-fn svg { width: 28px; height: 28px; } /* ---------- Actions ---------- */ .actions { flex: none; display: grid; grid-template-columns: var(--key) 1fr var(--key); align-items: center; gap: 14px; padding: 4px calc((100% - 3 * var(--key)) / 6) 0; } .round-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 0; } .round-btn svg { width: 26px; height: 26px; } .round-btn:active { color: var(--text); } .round-btn:disabled { opacity: 0.4; } .chat-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 18px; font-weight: 650; box-shadow: 0 6px 18px rgb(26 158 85 / 30%); transition: background-color 0.15s, opacity 0.15s, transform 0.08s; } .chat-btn svg { width: 24px; height: 24px; stroke-width: 2; } .chat-btn { text-decoration: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .chat-btn:active:not([aria-disabled="true"]) { background: var(--accent-press); transform: scale(0.98); } .chat-btn[aria-disabled="true"] { opacity: 0.45; box-shadow: none; cursor: default; } /* WhatsApp / Business choice */ .app-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); } .app-switch button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; } .app-switch .app-ico { width: 18px; height: 18px; stroke: none; filter: grayscale(1); opacity: 0.55; transition: filter 0.15s, opacity 0.15s; } .app-switch button[aria-checked="true"] .app-ico { filter: none; opacity: 1; } .app-switch button[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); } .text-link { align-self: center; text-decoration: none; border: 0; background: none; color: var(--accent); font-size: 13px; padding: 4px 8px; } /* ---------- Sheets ---------- */ .sheet { width: 100%; max-width: 460px; max-height: 88dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); color: var(--text); box-shadow: 0 -8px 32px rgb(0 0 0 / 12%); } .sheet::backdrop { background: rgb(6 14 10 / 45%); } .sheet[open] { animation: slide-up 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes slide-up { from { transform: translateY(48px); opacity: 0; } } .sheet-panel { display: flex; flex-direction: column; max-height: 88dvh; padding: 0 16px max(16px, env(safe-area-inset-bottom)); } /* Grab handle */ .sheet-panel::before { content: ""; align-self: center; flex: none; width: 36px; height: 5px; margin: 8px 0 4px; border-radius: 3px; background: var(--line); } .sheet-head { display: flex; align-items: center; gap: 4px; min-height: 52px; flex: none; } .sheet-head h2 { margin: 0 auto 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .sheet-head .icon-btn { background: var(--surface-2); width: 32px; height: 32px; } .sheet-head .icon-btn svg { width: 18px; height: 18px; stroke-width: 2.2; } .text-btn { border: 0; background: none; color: var(--danger); font-size: 15px; font-weight: 600; padding: 8px 12px; border-radius: 999px; } .text-btn:active { background: var(--surface-2); } .search-field { position: relative; display: block; flex: none; margin: 4px 0 8px; } .search-field svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search { display: block; width: 100%; height: 48px; padding: 0 14px 0 44px; border: 1.5px solid transparent; border-radius: 14px; background: var(--surface-2); outline: none; font-size: 17px; /* ≥16px so iOS doesn't zoom in on focus */ line-height: 48px; -webkit-appearance: none; appearance: none; transition: border-color 0.15s, background-color 0.15s; } .search::placeholder { color: var(--muted); opacity: 0.85; } .search:focus { border-color: var(--accent); background: var(--surface); } .search::-webkit-search-decoration, .search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .search { padding-right: 44px; } .search-field .search-clear { position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: var(--muted); } .search-field .search-clear svg { position: static; width: 20px; height: 20px; padding: 3px; transform: none; border-radius: 50%; background: var(--line); color: var(--text); stroke-width: 2.4; pointer-events: none; } .list { list-style: none; margin: 0 -16px; padding: 0 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .list li { position: relative; } /* Inset dividers that start after the flag, like native lists */ .list li + li::before { content: ""; position: absolute; top: 0; left: 46px; right: 0; height: 1px; background: var(--line); } .row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 4px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 16px; } .row:active { background: var(--surface-2); } .row .flag { flex: none; width: 28px; font-size: 24px; line-height: 1; text-align: center; } .row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .name small { display: block; margin-top: 1px; color: var(--muted); font-size: 13px; } .row .dial { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; } .row .check { flex: none; width: 20px; height: 20px; color: var(--accent); stroke-width: 2.4; visibility: hidden; } .row[aria-selected="true"] .name { font-weight: 600; } .row[aria-selected="true"] .dial { color: var(--accent); font-weight: 600; } .row[aria-selected="true"] .check { visibility: visible; } .recent { display: flex; align-items: center; gap: 4px; } .recent .row { flex: 1; min-width: 0; } .recent .name { font-variant-numeric: tabular-nums; } .recent-chat { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 10px rgb(26 158 85 / 25%); } .recent-chat svg { width: 20px; height: 20px; stroke-width: 2; } .recent-chat:active { background: var(--accent-press); transform: scale(0.94); } .empty { color: var(--muted); text-align: center; padding: 28px 16px 20px; margin: 0; font-size: 15px; line-height: 1.5; } .steps { margin: 0; padding: 4px 0 8px 22px; font-size: 16px; line-height: 1.55; } .steps li { margin-bottom: 10px; } .steps .inline { width: 18px; height: 18px; vertical-align: -3px; color: #0a84ff; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .toast.show { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Keep the sheet steady while the search filters the list. */ #countrySheet .sheet-panel { height: 80dvh; } /* Short screens (iPhone SE and similar): tighten everything so it fits without scrolling. */ @media (max-height: 700px) { :root { --key: clamp(50px, min(18vw, 9dvh), 64px); } .topbar { height: 48px; } .dialer { gap: 8px; } .display { min-height: 96px; gap: 6px; padding: 0; } .number { font-size: clamp(26px, 8vw, 34px); } .message summary { padding: 8px 14px; } .chat-btn { height: 52px; } } /* Narrow phones: keep the name and three top-bar buttons on one line. */ @media (max-width: 374px) { .brand { font-size: 15px; gap: 8px; } .brand img { width: 24px; height: 24px; } .icon-btn { width: 38px; height: 38px; } .brand span { letter-spacing: -0.02em; } .topbar-actions { gap: 0; } } /* Very short screens (1st-gen iPhone SE): trim a little more. */ @media (max-height: 600px) { :root { --key: clamp(46px, min(18vw, 8.4dvh), 60px); } .display { gap: 4px; } .app-switch button { height: 28px; } .message summary { padding: 7px 14px; } }