:root {
  --bg: #f5f3ee; --card: #ffffff; --ink: #1b1b1b; --muted: #5b5b5b; --brand: #2d3a8c; --sun: #ffd54a;
  --green: #1f9d55; --red: #d93025; --wa: #128c4b; --line: #e4e0d8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121317; --card: #1c1e24; --ink: #f1f1f1; --muted: #b5b5b5; --line: #2c2f37; --brand: #8f9bff; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", "Noto Sans Devanagari", sans-serif; }
[hidden] { display: none !important; }
.phone { max-width: 420px; min-height: 100vh; margin: 0 auto; padding: 24px 16px 16px; display: flex; flex-direction: column; }
@media (min-width: 700px) { .phone { margin: 32px auto; min-height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 32px 24px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.08); } }
.screen { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.caller { text-align: center; }
.avatar { width: 132px; height: 132px; }
h1 { margin: 8px 0 0; font-size: 30px; }
h2 { margin: 0; font-size: 24px; }
.sub { margin: 2px 0 0; color: var(--muted); }
.from { margin: 6px 0 0; font-weight: 600; }
[lang="en"] { color: var(--muted); font-size: .88em; display: block; }
.btn [lang="en"], .cta [lang="en"] { color: inherit; opacity: .85; display: inline; }
.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.call { background: var(--green); color: #fff; font-size: 18px; padding: 18px; }
.disclose { margin: 0; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 14px; }
.mic-note { margin: 0; color: var(--muted); font-size: 13px; }
.callbar { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--muted); }
.callbar .who { margin-left: auto; font-weight: 600; color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.bubble { background: var(--card); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; padding: 16px; font-size: 18px; min-height: 120px; }
.status { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.5em; }
.taps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tap-hint { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; }
.tap { background: var(--sun); color: #1b1b1b; padding: 14px 6px; }
.tap [lang="en"] { display: block; font-size: 12px; }
.hangup { background: var(--red); color: #fff; margin-top: auto; }
.cta { background: var(--brand); color: #fff; }
.share { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.share label { font-size: 14px; }
.share input { font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.wa { background: var(--wa); color: #fff; }
.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); }
.foot { margin-top: 18px; text-align: center; color: var(--muted); font-size: 12px; }