/* Voodoo, the personal assistant app. Light by default; soft gray and white, gray line-art scenes, Voodoo violet as the one
   accent, serif titles, springy motion. Themes: light (default), dark, or follow the phone. Text size: data-size. */
@font-face { font-family: "Pretendard"; src: url("/static/fonts/Pretendard-latin.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; unicode-range: U+0000-024F, U+0300-052F, U+1E00-1EFF, U+2000-2BFF; }
@font-face { font-family: "Pretendard"; src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; unicode-range: U+1100-11FF, U+3000-9FFF, U+A960-D7FF, U+E000-FFFF; }
@font-face { font-family: "Pretendard"; src: url("/static/fonts/Pretendard-ko.woff2") format("woff2-variations"); font-weight: 45 920; font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF00-FFEF; }
@font-face { font-family: "Fraunces"; src: url("/static/fonts/Fraunces-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #F4F4F7; --surface: #FFFFFF; --ink: #1F1D2B; --ink-2: #4A4858; --muted: #8C8A9B; --line: #E7E6EE; --art: #A9A7BA; --art-fill: #ECEBF2; --glass: rgba(244, 244, 247, .86); --sky-day: #DCEBFF; --sky-dawn: #FCD9CC; --sky-golden: #FFDFAE; --sky-dusk: #A99BDA; --sky-night: #1A2150; --sky-night2: #39407A; --sky-grey: #D5D9E3; --sky-storm: #8E95AE; --night-ground: #262C55; --night-art: #8D95C6; --cloud-dark: #D2D5E0;
  --accent: #EA580C; --accent-ink: #FFFFFF; --accent-text: #C2410C; --accent-2: #FFEDD5; --sun: #FFB547; --dark: #24222F; --dark-ink: #F4F3F9;
  --ok: #12A574; --ok-2: #DDF5EB; --warn: #B86E00; --warn-2: #FFF1DA; --bad: #E5403D; --bad-2: #FDE6E5;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  --r-xl: 28px; --r-lg: 20px; --r-md: 16px; --r-sm: 12px;
  --shadow: 0 1px 2px rgba(31, 29, 43, .05), 0 10px 26px -18px rgba(31, 29, 43, .28);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --gut-l: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121118; --surface: #1C1B25; --ink: #F2F1F7; --ink-2: #CFCDDB; --muted: #9B99AC; --line: #2B2A37; --art: #6F6D84; --art-fill: #24232F; --glass: rgba(18, 17, 24, .86); --sky-day: #1C2740; --sky-dawn: #3A2633; --sky-golden: #3B2C1A; --sky-dusk: #2C2548; --sky-night: #0A0E26; --sky-night2: #171C40; --sky-grey: #23252F; --sky-storm: #1B1D27; --night-ground: #131630; --night-art: #5D648F; --cloud-dark: #2E3040;
    --accent: #FF8A3D; --accent-ink: #1A1208; --accent-text: #FF9F5C; --accent-2: #3B2414; --dark: #2A2838; --dark-ink: #F4F3F9;
    --ok: #4FD6A4; --ok-2: #163329; --warn: #FFC56E; --warn-2: #3A2E1A; --bad: #FF7D7A; --bad-2: #3D1D22;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -18px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121118; --surface: #1C1B25; --ink: #F2F1F7; --ink-2: #CFCDDB; --muted: #9B99AC; --line: #2B2A37; --art: #6F6D84; --art-fill: #24232F; --glass: rgba(18, 17, 24, .86); --sky-day: #1C2740; --sky-dawn: #3A2633; --sky-golden: #3B2C1A; --sky-dusk: #2C2548; --sky-night: #0A0E26; --sky-night2: #171C40; --sky-grey: #23252F; --sky-storm: #1B1D27; --night-ground: #131630; --night-art: #5D648F; --cloud-dark: #2E3040;
  --accent: #FF8A3D; --accent-ink: #1A1208; --accent-text: #FF9F5C; --accent-2: #3B2414; --dark: #2A2838; --dark-ink: #F4F3F9;
  --ok: #4FD6A4; --ok-2: #163329; --warn: #FFC56E; --warn-2: #3A2E1A; --bad: #FF7D7A; --bad-2: #3D1D22;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 28px -18px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none; word-break: keep-all; transition: background-color .4s ease, color .4s ease; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
svg { display: block; flex-shrink: 0; }
#app { max-width: 600px; margin: 0 auto; position: relative; overflow-x: hidden; overflow-x: clip; min-height: 100dvh; }

/* Screens + motion */
.screen { min-height: 100dvh; padding: calc(var(--safe-t) + 10px) var(--gut-r) calc(190px + var(--safe-b)) var(--gut-l); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
.fwd { animation: fwd .3s var(--ease) both; }
.back { animation: back .3s var(--ease) both; }
.fade { animation: fade .4s ease both; }
.quick { animation: fade .16s ease both; }
.quick .stagger > *, .still .stagger > * { animation: none; }
.up { animation: up .38s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes fwd { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes back { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 65% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: -360px 0; } to { background-position: 360px 0; } }
@keyframes sheetUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sunUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes drift { 0% { transform: translateX(-16px); } 50% { transform: translateX(16px); } 100% { transform: translateX(-16px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes puff { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-22px) scale(1.2); opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 64, 61, .5); } 100% { box-shadow: 0 0 0 12px rgba(229, 64, 61, 0); } }
.stagger > * { animation: rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms + 20ms); }
.press { transition: transform .16s var(--ease), box-shadow .25s, background-color .25s, opacity .25s; }
.press:active { transform: scale(.965); }

/* Type */
.eyebrow, .label { font-size: 12px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.title { font-family: var(--serif); font-weight: 420; font-size: 34px; line-height: 1.12; letter-spacing: -.5px; text-align: center; text-wrap: balance; }
.title-left { text-align: left; }
h2 { font-family: var(--serif); font-weight: 450; font-size: 23px; line-height: 1.2; letter-spacing: -.2px; }
h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.ko { color: var(--muted); font-weight: 500; }
.section-t { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 2px -4px; }
.section-t a, .section-t button { color: var(--accent-text); font-weight: 750; font-size: 14px; }

/* Top bar (round outline buttons left and right, title in the middle) */
.top { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 10px; min-height: 52px; }
.top .title { font-size: 26px; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.6px solid var(--ink-2); color: var(--ink-2); background: transparent; }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.solid { border: 0; background: var(--surface); box-shadow: var(--shadow); }
.spacer { width: 44px; height: 44px; }

/* Line-art scenes */
.scene { width: 100%; height: auto; overflow: visible; }
.scene .ln { fill: none; stroke: var(--art); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene .fill { fill: var(--art-fill); }
.scene .hill { fill: var(--bg); }
.banner .scene .hill, .card .scene .hill, .sheet .scene .hill { fill: var(--surface); }
.scene .sunball { fill: var(--sun); transform-box: fill-box; transform-origin: center; animation: sunUp 1.6s var(--ease) both; }
.scene .rays { transform-box: fill-box; transform-origin: center; animation: rays 30s linear infinite; }
.scene .rays line { stroke: var(--sun); stroke-width: 2.2; stroke-linecap: round; }
.scene .cloud { animation: drift 10s ease-in-out infinite; }
.scene .cloud2 { animation: drift 14s ease-in-out infinite reverse; }
.scene .bird { animation: bob 2.6s ease-in-out infinite; }
.scene .smoke { fill: var(--art-fill); stroke: var(--art); stroke-width: 1.6; animation: puff 3.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.scene .smoke.s2 { animation-delay: 1.6s; }
.scene.draw .ln { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 2.2s var(--ease) forwards; }
.scene-wrap { margin: -6px calc(-1 * var(--gut-l)) 0 calc(-1 * var(--gut-r)); }

/* Cards */
.card { background: var(--surface); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; border: 1px solid var(--line); background: transparent; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; padding: 5px 11px; border-radius: 999px;
  background: var(--accent-2); color: var(--accent-text); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-2); color: var(--ok); } .chip.warn { background: var(--warn-2); color: var(--warn); }
.chip.bad { background: var(--bad-2); color: var(--bad); } .chip.gray { background: var(--bg); color: var(--muted); }

/* Today card */
.today { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ring { width: 76px; height: 76px; position: relative; }
.ring svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.ring .trk { stroke: var(--line); }
.ring .bar { stroke: var(--accent-text); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 800; }
.today h2 { font-size: 21px; }
.today p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.today .chip { margin-top: 8px; }

/* Quick actions: one card, three columns with dividers, circle icons, uppercase labels */
.qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.qa > * { display: grid; justify-items: center; align-content: center; gap: 10px; padding: 18px 6px 16px; min-height: 120px; text-align: center;
  font-size: 11.5px; font-weight: 750; letter-spacing: .9px; text-transform: uppercase; color: var(--ink-2); line-height: 1.25;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qa > *:nth-child(3n) { border-right: 0; }
.qa > *:nth-last-child(-n+3) { border-bottom: 0; }
.circ { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); }
.circ svg { width: 26px; height: 26px; stroke: var(--ink-2); }

/* Needs you: a dark card with one accent action */
.notice { background: var(--dark); color: var(--dark-ink); border-radius: var(--r-lg); padding: 6px 18px; box-shadow: var(--shadow); }
.notice-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.notice-row:last-child { border-bottom: 0; }
.notice-row h3 { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-row p { color: rgba(255, 255, 255, .62); font-size: 13.5px; }
.notice-row .t { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.notice-row .t > div { min-width: 0; }
.notice-row .dot-live { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: pulse 1.6s ease-out infinite; }
.pill-btn { padding: 9px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 13.5px; white-space: nowrap; }

/* Timeline */
.timeline { display: grid; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.tl { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tl:last-child { border-bottom: 0; }
.tl .d { text-align: center; line-height: 1.05; }
.tl .d b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 450; }
.tl .d small { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tl.lvl-due .d b { color: var(--bad); }
.tl .t { min-width: 0; }
.tl .t h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .t p { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { width: 18px; height: 18px; stroke: var(--muted); }

/* Feature banner */
.banner { display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: center; text-align: center; padding: 22px 18px 20px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.banner .scene { max-width: 240px; }
.banner p { color: var(--muted); font-size: 14.5px; max-width: 32ch; }
.checks { display: grid; gap: 6px; justify-items: start; }
.checks span { display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--ink-2); }
.checks svg { width: 18px; height: 18px; stroke: var(--accent-ink); background: var(--accent); border-radius: 50%; padding: 3px; }

/* Sections grid */
.sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sec { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 20px 12px 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); position: relative; }
.sec h3 { font-size: 15px; }
.sec .ko { font-size: 12.5px; display: block; margin-top: -6px; }
.sec .count { position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Lists */
.search { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 50px; background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); }
.search svg { width: 19px; height: 19px; stroke: var(--muted); }
.search input { flex: 1; border: 0; background: transparent; font-size: 16px; min-width: 0; outline: none; }
.list { display: grid; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .circ { width: 42px; height: 42px; } .row .circ svg { width: 20px; height: 20px; }
.row .t { min-width: 0; text-align: left; }
.row .t h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t p { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.alert .circ { background: var(--bad-2); } .row.alert .circ svg { stroke: var(--bad); }
.empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 16px; color: var(--muted); }
.empty .scene { max-width: 200px; }

/* Tabs (underline) */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); }
.seg button { position: relative; z-index: 1; min-height: 46px; font-weight: 750; font-size: 14px; letter-spacing: .4px; color: var(--muted); transition: color .25s; }
.seg button[aria-selected="true"] { color: var(--ink); }
.seg .ind { position: absolute; bottom: -1px; left: 0; height: 3px; border-radius: 3px; background: var(--accent); transition: transform .42s var(--spring), width .3s var(--ease); }

/* Detail */
.detail-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.detail-head .circ { width: 64px; height: 64px; background: var(--surface); box-shadow: var(--shadow); }
.detail-head .circ svg { width: 30px; height: 30px; }
.kv { display: grid; }
.kv > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-weight: 700; color: var(--ink-2); }
.kv dt .ko { display: block; font-size: 12px; }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; white-space: pre-line; }
.kv dd a { color: var(--accent-text); font-weight: 700; }
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.file { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.file img { width: 100%; height: 100%; object-fit: cover; }
.file .nm { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .9); color: #1F1D2B;
  border-radius: 8px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file svg { width: 28px; height: 28px; stroke: var(--art); }
.voice-card { grid-column: 1 / -1; display: grid; gap: 8px; }
audio { width: 100%; }
.hist { display: grid; gap: 12px; padding: 0; }
.hist li { list-style: none; display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.hist .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 7px; box-shadow: 0 0 0 4px var(--accent-2); }
.hist ul { padding: 0; display: grid; gap: 4px; margin-top: 6px; }
.hist .chg { font-size: 14px; color: var(--muted); list-style: none; }
.hist .chg s { color: var(--bad); } .hist .chg ins { color: var(--ok); text-decoration: none; font-weight: 700; }

/* Messages (family view) */
.thread { display: grid; gap: 10px; }
.bub { max-width: 84%; padding: 11px 15px; border-radius: 20px; display: grid; gap: 3px; animation: rise .35s var(--ease) both; }
.bub p { white-space: pre-wrap; }
.bub.me { justify-self: start; background: var(--surface); box-shadow: var(--shadow); border-bottom-left-radius: 6px; }
.bub.ai { justify-self: start; background: var(--accent-2); border-bottom-left-radius: 6px; }
.bub.fam { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.bub-who { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .7; }
.bub-t { font-size: 12px; opacity: .6; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px; border-radius: 999px;
  font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 12px 24px -14px rgba(234, 88, 12, .45); }
.btn svg { width: 19px; height: 19px; stroke: currentColor; }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.btn.outline { background: transparent; color: var(--ink); border: 1.6px solid var(--ink-2); box-shadow: none; }
.btn.danger { background: transparent; color: var(--bad); box-shadow: none; min-height: 44px; }
.btn.short { width: auto; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spinner { width: 20px; height: 20px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.fab { position: fixed; right: max(20px, calc(50% - 280px)); bottom: calc(108px + var(--safe-b)); z-index: 6; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); box-shadow: 0 16px 30px -12px rgba(234, 88, 12, .45); animation: pop .5s var(--spring) .2s both; }
.fab svg { width: 26px; height: 26px; stroke: var(--accent-ink); }

/* Tab bar: floating pill, icon circles, accent underline under the active one */
.tabbar { position: fixed; z-index: 9; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); margin: 0 auto; width: min(420px, calc(100% - 40px));
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 10px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 16px 40px -16px rgba(31, 29, 43, .45); animation: rise .5s var(--ease) both; }
.tabbar a { position: relative; z-index: 1; display: grid; justify-items: center; color: var(--muted); }
.tabbar .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); transition: background-color .3s, transform .35s var(--spring); }
.tabbar svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a[aria-current="page"] .ic { transform: translateY(-2px); }
.tabbar .ind { position: absolute; z-index: 0; bottom: 5px; left: 10px; width: calc((100% - 20px) / 4); display: grid; place-items: center; transition: transform .45s var(--spring); }
.tabbar .ind::after { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--accent); }
.tabbar .badge { position: absolute; top: -2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad);
  color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; animation: pop .45s var(--spring) both; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Sheets + forms */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(18, 17, 24, .45); animation: fade .25s ease both; }
.sheet { position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 600px; max-height: 92dvh; overflow-y: auto; background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px var(--gut-r) calc(24px + var(--safe-b)) var(--gut-l); display: grid; gap: 14px;
  animation: sheetUp .42s var(--ease) both; box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .5); }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; margin-bottom: 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -10px; background: var(--bg); padding: 6px 0; z-index: 2; }
.fields { display: grid; gap: 12px; }
.fld { display: grid; gap: 6px; }
.fld > span { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.fld > span .ko { font-size: 12px; margin-left: 4px; }
.fld .help { font-size: 12.5px; color: var(--muted); }
.inp { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.6px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; }
textarea.inp { min-height: 96px; resize: vertical; }
.inp:focus { outline: none; border-color: var(--accent-text); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border-radius: var(--r-sm); border: 1.6px solid var(--line); }
.switch input { appearance: none; width: 50px; height: 30px; border-radius: 15px; background: var(--line); position: relative; transition: background .25s; flex-shrink: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--spring); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(20px); }
.code-big { font-family: var(--serif); font-size: 50px; font-weight: 420; letter-spacing: 8px; text-align: center; color: var(--accent-text); font-variant-numeric: tabular-nums; animation: pop .5s var(--spring) both; }
.steps { padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }

/* Onboarding */
.wordmark { font-family: var(--serif); font-weight: 480; font-size: clamp(38px, 13vw, 60px); white-space: nowrap; letter-spacing: -1.5px; text-align: center; color: var(--ink); animation: rise .8s var(--ease) 1.4s both; }
.wordmark i { color: var(--accent-text); font-style: normal; }
.ob-intro .lead { animation: rise .8s var(--ease) 1.7s both; }
.ob-intro .ob-foot { animation: rise .8s var(--ease) 2s both; }
.opt { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow);
  text-align: left; font-weight: 700; border: 2px solid transparent; }
.opt[aria-pressed="true"] { border-color: var(--accent-text); }
.opt .circ { width: 44px; height: 44px; font-size: 20px; }
.opt .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.opt[aria-pressed="true"] .tick { background: var(--accent); border-color: var(--accent-text); }
.opt .tick svg { width: 14px; height: 14px; stroke: #fff; opacity: 0; }
.opt[aria-pressed="true"] .tick svg { opacity: 1; animation: pop .35s var(--spring); }
.opt small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip-btn { padding: 10px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-weight: 700; border: 2px solid transparent; }
.chip-btn[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); }
.theme-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tp { display: grid; gap: 8px; justify-items: center; padding: 12px 8px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); border: 2px solid transparent; font-weight: 700; font-size: 14px; }
.tp[aria-pressed="true"] { border-color: var(--accent-text); }
.tp .mini { width: 100%; aspect-ratio: .7; border-radius: 10px; display: grid; align-content: start; gap: 5px; padding: 8px; }
.tp .mini i { height: 7px; border-radius: 4px; display: block; }
.tp .mini.l { background: #F4F4F7; } .tp .mini.l i { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .tp .mini.l i:first-child { background: #FF7A1A; width: 50%; }
.tp .mini.d { background: #121118; } .tp .mini.d i { background: #24232F; } .tp .mini.d i:first-child { background: #FF8A3D; width: 50%; }
.tp .mini.a { background: linear-gradient(135deg, #F4F4F7 50%, #121118 50%); }
.tp .mini.a i { background: rgba(127, 127, 140, .45); } .tp .mini.a i:first-child { background: #FF7A1A; width: 50%; }

/* Skeleton + toast */
.skel { border-radius: var(--r-lg); background: linear-gradient(90deg, var(--line) 0, var(--surface) 40%, var(--line) 80%) 0 0 / 720px 100%; animation: shimmer 1.2s linear infinite; }
.sk-1 { height: 52px; } .sk-2 { height: 170px; } .sk-3 { height: 72px; }
#toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 40px); bottom: calc(108px + var(--safe-b)); z-index: 30;
  display: flex; align-items: center; gap: 10px; background: var(--dark); color: var(--dark-ink); padding: 13px 20px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5); animation: rise .35s var(--spring) both; }
#toast svg { width: 20px; height: 20px; stroke: var(--ok); }
#toast svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .4s .1s var(--ease) forwards; }

/* Sign-in page */
.login-screen { padding-bottom: calc(40px + var(--safe-b)); }
.login-err { color: var(--bad); background: var(--bad-2); border: 0; font-weight: 700; }

@media (max-width: 370px) { .title { font-size: 30px; } .qa > * { font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .scene.draw .ln { stroke-dashoffset: 0; }
}

/* Emergency banner */
.sos-banner { background: var(--bad); color: #fff; border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; box-shadow: 0 18px 36px -18px rgba(229, 64, 61, .9);
  animation: rise .4s var(--spring) both; }
.sos-banner h2 { color: #fff; }
.sos-banner .label { color: rgba(255, 255, 255, .85); }
.sos-banner a { color: #fff; font-weight: 700; }
.sos-banner .btn { background: #fff; color: var(--bad); box-shadow: none; }
.sos-banner .btn.outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ── assistant app additions ───────────────────────────────────────── */
html[dir="rtl"] .chev, html[dir="rtl"] .iconbtn[data-act="back"] svg { transform: scaleX(-1); }
html[data-size="l"] #app { zoom: 1.12; }
html[data-size="xl"] #app { zoom: 1.25; }

/* Welcome + auth */
.welcome { min-height: 100dvh; padding: calc(var(--safe-t) + 14px) var(--gut-r) calc(26px + var(--safe-b)) var(--gut-l); display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
.welcome .lang-btn { justify-self: end; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1.6px solid var(--line); font-weight: 700; font-size: 14px; }
.welcome .lang-btn svg { width: 18px; height: 18px; }
.welcome-body { display: grid; align-content: center; gap: 16px; text-align: center; }
.welcome-body .lead { color: var(--muted); font-size: 17px; max-width: 34ch; justify-self: center; animation: rise .8s var(--ease) 1.7s both; }
.tagline { font-family: var(--serif); font-size: 26px; font-weight: 420; animation: rise .8s var(--ease) 1.55s both; }
.welcome-foot { display: grid; gap: 10px; animation: rise .8s var(--ease) 1.9s both; }
.auth { display: grid; gap: 14px; }
.pw-row { position: relative; }
.pw-row button { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--accent-text); font-size: 14px; padding: 6px 8px; }
.err-line { color: var(--bad); font-weight: 700; text-align: center; }
.fine { text-align: center; color: var(--muted); font-size: 13px; }

/* Option lists */
.langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lang { padding: 13px 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); text-align: start; font-weight: 700; border: 2px solid transparent; display: grid; gap: 2px; }
.lang small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.lang[aria-pressed="true"] { border-color: var(--accent-text); }
.voices { display: grid; gap: 10px; }

/* Home */
.home-top { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; min-height: 52px; }
.home-top .title { font-size: 24px; }
.sos-pill { padding: 10px 16px; border-radius: 999px; background: var(--bad); color: #fff; font-weight: 900; letter-spacing: 1px; font-size: 15px; box-shadow: 0 10px 22px -12px rgba(229, 64, 61, .9); }
.greet { text-align: center; display: grid; gap: 2px; }
.greet h1 { font-family: var(--serif); font-weight: 420; font-size: 32px; letter-spacing: -.5px; }
.greet p { color: var(--muted); }
.talk-cta { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; text-align: start; padding: 18px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); }
.talk-cta b { display: block; font-size: 19px; }
.talk-cta small { color: var(--muted); }
.mini-orb { width: 62px; height: 62px; border-radius: 50%; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFE3CC 0%, #FF7A1A 45%, #B33E00 100%);
  box-shadow: 0 12px 26px -12px rgba(234, 88, 12, .45); }
.talk-cta:not(.cam-cta) .mini-orb { background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%), conic-gradient(from 200deg, #3B82F6, #8B5CF6, #EC4899, #22D3EE, #3B82F6); box-shadow: 0 8px 22px -8px rgba(139, 92, 246, .6); }
.talk-cta:not(.cam-cta) .mini-orb::before, .talk-cta:not(.cam-cta) .mini-orb::after { border-color: rgba(139, 92, 246, .35); }
.mini-orb::before, .mini-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(234, 88, 12, .35); animation: ringOut 2.6s ease-out infinite; }
.mini-orb::after { animation-delay: 1.3s; }
.mini-orb svg { width: 26px; height: 26px; stroke: #fff; }
@keyframes ringOut { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.type-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.type-row .inp { border-radius: 999px; min-height: 52px; padding-inline: 18px; }
.send { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.send svg { width: 22px; height: 22px; stroke: var(--accent-ink); }
.slot { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.slot:last-child { border-bottom: 0; }
.slot b { display: block; }
.slot small { color: var(--muted); }
.take { padding: 9px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--accent-2); color: var(--accent-text); }
.take.done { background: var(--ok-2); color: var(--ok); }

/* Talk */
.talk { min-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 40px); display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 14px; }
.orb-wrap { display: grid; place-items: center; min-height: 300px; }
.orb { --lvl: 0; position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.orb .core { width: 158px; height: 158px; border-radius: 50%; transform: scale(calc(1 + var(--lvl) * .35)); transition: transform .08s linear;
  position: relative; overflow: hidden; isolation: isolate; background: #7C6CF6; box-shadow: 0 0 60px -8px rgba(139, 92, 246, .55), 0 0 90px -12px rgba(34, 211, 238, .4); }
.orb .core::before { content: ""; position: absolute; inset: -25%; background: conic-gradient(from 0deg, #3B82F6, #8B5CF6, #EC4899, #22D3EE, #3B82F6); filter: blur(12px); will-change: transform; animation: spin 8s linear infinite; }
.orb .core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; will-change: transform; animation: spin 5s linear infinite reverse;
  background: radial-gradient(circle at 50% 50%, #fff 0%, rgba(255, 255, 255, .9) 20%, rgba(255, 255, 255, 0) 56%), conic-gradient(from 90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, .55), rgba(236, 72, 153, 0) 40%, rgba(236, 72, 153, .5) 70%, rgba(34, 211, 238, 0)); }
.orb.mini .core::before { filter: blur(5px); }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(139, 92, 246, .3); transform: scale(calc(.85 + var(--lvl) * .6)); transition: transform .12s linear; }
.orb .r2 { inset: -26px; border-color: rgba(34, 211, 238, .18); transform: scale(calc(.9 + var(--lvl) * .9)); }
.orb[data-state="connecting"] .core, .orb[data-state="listening"] .core { animation: breathe 3s ease-in-out infinite; }
.orb[data-state="thinking"] .core::before { animation-duration: 1.8s; } .orb[data-state="thinking"] .core::after { animation-duration: 1.4s; }
.orb[data-state="speaking"] .core { filter: brightness(1.12) saturate(1.3); } .orb[data-state="speaking"] .core::before { animation-duration: 4s; }
.orb[data-state="ended"] .core { filter: grayscale(.8); opacity: .55; }
@keyframes breathe { 0%, 100% { transform: scale(calc(.96 + var(--lvl) * .35)); } 50% { transform: scale(calc(1.04 + var(--lvl) * .35)); } }
.talk-state { text-align: center; font-family: var(--serif); font-size: 26px; color: var(--accent-text); min-height: 34px; }
.captions { display: grid; gap: 8px; min-height: 100px; align-content: start; text-align: center; }
.cap-ai { font-size: 19px; font-weight: 600; }
.cap-you { color: var(--muted); }

/* Chat */
.thread { display: grid; gap: 10px; align-content: start; }
.bub.me { justify-self: end; background: var(--accent); color: var(--accent-ink); box-shadow: none; border-radius: 20px; border-bottom-right-radius: 6px; }
.bub.ai { justify-self: start; background: var(--surface); box-shadow: var(--shadow); border-bottom-left-radius: 6px; }
.bub.fam { justify-self: start; background: var(--warn-2); }
.bub.typing { display: flex; gap: 6px; padding: 16px; }
.bub.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: dot 1.2s ease-in-out infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.composer { position: sticky; bottom: calc(96px + var(--safe-b)); background: var(--bg); padding-top: 6px; }
.composer .inp { min-height: 52px; max-height: 140px; resize: none; border-radius: 26px; padding-inline: 18px; }

/* Photo choices */
.choices { display: grid; gap: 10px; }
.choice { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); text-align: start; font-weight: 700; }
.preview { width: 100%; max-height: 50vh; object-fit: contain; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }

/* SOS */
.sos { display: grid; gap: 14px; }
.sos-count { min-height: 78dvh; align-content: center; justify-items: center; text-align: center; }
.count-ring { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; background: var(--bad-2); position: relative; }
.count-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--bad); animation: ringOut 1s ease-out infinite; }
.count-ring b { font-family: var(--serif); font-size: 86px; color: var(--bad); animation: pop .5s var(--spring); }
.sos-911 { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 104px; border-radius: var(--r-xl); background: var(--bad); color: #fff;
  box-shadow: 0 20px 40px -18px rgba(229, 64, 61, 1); animation: sosPulse 1.6s ease-in-out infinite; }
.sos-911 svg { width: 40px; height: 40px; stroke: #fff; }
.sos-911 b { display: block; font-size: 28px; font-weight: 900; }
@keyframes sosPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.sos-status { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; border: 2px solid var(--bad-2); }
.sos-status.ok { border-color: var(--ok-2); }
.pulse-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bad); animation: pulse 1.4s ease-out infinite; }
.sos-status.ok .pulse-dot { background: var(--ok); animation: none; }
.medcard .kv > div { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }

/* Pair keypad */
.code-boxes { display: flex; justify-content: center; gap: 8px; }
.code-boxes span { width: 44px; height: 58px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; font-family: var(--serif); font-size: 28px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pad button { min-height: 62px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); font-size: 24px; font-weight: 700; }
.pad .blank { visibility: hidden; }
.btn.link { background: transparent; color: var(--muted); box-shadow: none; min-height: 44px; }
.talk-cta { width: 100%; }
html[dir="rtl"] .tabbar .ind { left: auto; right: 10px; }
html[dir="rtl"] .seg .ind { left: auto; right: 0; }

/* getting set up */
.card.setup { display: grid; gap: 10px; border: 2px solid var(--accent-2); }
.card.setup h2 { font-family: var(--serif); font-weight: 450; font-size: 22px; }
.bar { height: 8px; border-radius: 8px; background: var(--accent-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: 8px; transition: width .6s var(--ease); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--surface-2, var(--bg)); color: var(--muted); }
.chip.on { background: var(--ok-2); color: var(--ok); }
.chip.off { text-decoration: line-through; }
.chip svg { width: 13px; height: 13px; }
.card.tell { display: grid; gap: 10px; text-align: center; }
.composer.cam { grid-template-columns: auto 1fr auto; align-items: end; }
.bub-img { display: block; max-width: 220px; max-height: 260px; border-radius: 14px; margin-bottom: 6px; object-fit: cover; }

/* translated menu card */
.bub .menu { display: grid; gap: 10px; min-width: min(300px, 70vw); }
.menu h3 { font-family: var(--serif); font-weight: 450; font-size: 18px; }
.dish { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: start; padding-top: 10px; border-top: 1px solid var(--line); }
.dish img, .dish .noimg { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--accent-2); display: grid; place-items: center; }
.dish .noimg svg { width: 26px; height: 26px; color: var(--accent-text); }
.dish b { font-size: 15.5px; }
.dish .price { float: inline-end; font-weight: 800; color: var(--ink-2); margin-inline-start: 8px; }
.dish .orig { display: block; color: var(--muted); }
.dish p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.dish .warn { color: var(--bad); font-weight: 700; }

/* route card */
.bub .route { display: grid; gap: 8px; min-width: min(310px, 72vw); }
.route h3 { display: flex; gap: 6px; align-items: center; font-family: var(--serif); font-weight: 450; font-size: 18px; }
.route h3 svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }
.route .sum { font-weight: 800; color: var(--ink-2); }
.route .steps { list-style: none; display: grid; gap: 0; padding: 0; margin: 0; }
.rs { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); position: relative; }
.rs .ri { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-2); color: var(--accent-text); }
.rs.walk .ri { background: var(--bg); color: var(--muted); }
.rs .ri svg { width: 18px; height: 18px; }
.rs b { display: block; font-size: 15px; }
.rs small { display: block; color: var(--muted); }
.line { display: inline-block; padding: 2px 9px; border-radius: 7px; font-weight: 900; font-size: 13px; background: var(--lc, var(--accent)); color: var(--ltc, #fff); margin-inline-end: 6px; }
.toward { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rs details { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.rs summary { cursor: pointer; color: var(--accent-text); font-weight: 700; }
.rs ol { padding-inline-start: 18px; margin: 4px 0 0; }
.maplinks { display: flex; flex-wrap: wrap; gap: 8px; }
.maplinks .btn { min-height: 40px; padding: 0 14px; font-size: 13px; flex: 1 1 auto; }

/* sign-in and security */
.row-links { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.phone-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.inp.region { width: auto; padding-inline: 10px; }
.code-in { text-align: center; font-size: 28px; letter-spacing: 10px; font-family: var(--serif); }
.secpage > .card, .secpage > form.card { display: grid; gap: 10px; }
.secpage h3 { font-size: 17px; }
.pw-row .inp { padding-inline-end: 70px; }
.kvrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.kvrow span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kvrow svg { width: 16px; height: 16px; }
.switch.card small { display: block; font-weight: 500; }

/* plan */
.card.plan h2 { font-family: var(--serif); font-weight: 450; font-size: 28px; }
.card.plan.plus { background: linear-gradient(135deg, #FF8A3D, #C2410C); color: #fff; }
.card.plan.plus .label, .card.plan.plus .muted { color: rgba(255, 255, 255, .8); }
.use { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; }
.use .bar { grid-column: 1 / -1; }
.use small { align-self: center; }
.use-line { font-weight: 600; margin: 4px 0 6px; }
.bar.hot i { background: var(--warn); }
.usebar { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow); margin: 0 0 12px; font-size: 15px; }
.use-pill { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
.use-pill .bar { width: 24px; height: 6px; }
.card.tier.mine { outline: 2px solid var(--accent); }
.tier-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier .btn { width: 100%; margin-top: 10px; }
.safe-line { display: flex; gap: 6px; align-items: flex-start; }
.safe-line svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.limitcard h3 { font-size: 17px; margin: 0 0 6px; }
.limitcard .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.perks li { display: flex; gap: 8px; align-items: flex-start; }
.perks svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }

/* action, weather and login cards */
.bub .actcard, .bub .wx, .bub .logincard { display: grid; gap: 8px; min-width: min(290px, 70vw); }
.actcard h3, .wx h3, .logincard h3 { display: flex; gap: 6px; align-items: center; font-family: var(--serif); font-weight: 450; font-size: 18px; }
.actcard h3 svg, .logincard h3 svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; }
.quote { border-inline-start: 3px solid var(--accent-2); padding-inline-start: 10px; color: var(--ink-2); }
.wnow { display: flex; align-items: baseline; gap: 10px; }
.wbig { font-size: 40px; line-height: 1; }
.wnow b { font-family: var(--serif); font-size: 34px; font-weight: 450; }
.wdays { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.wday { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--bg); }
.wday span { font-size: 22px; }
.wday small { color: var(--muted); font-size: 12px; }
.wday .rain { color: var(--accent-text); }
.ok-line { display: flex; gap: 6px; align-items: center; color: var(--ok); font-weight: 700; }
.ok-line svg { width: 18px; height: 18px; }
.row.conn { align-items: center; }
.mono { font-family: ui-monospace, monospace; word-break: break-all; }
.quote.pre { white-space: pre-wrap; max-height: 260px; overflow: auto; }

.calling { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--accent-text); }
.callcard .tr { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: 13.5px; }
.callcard .tr li.me b { color: var(--accent-text); }
.interp { text-align: center; font-weight: 800; color: var(--accent-text); background: var(--accent-2); border-radius: 999px; padding: 6px 14px; justify-self: center; }
.steps-ol { padding-inline-start: 20px; margin: 0; display: grid; gap: 4px; color: var(--ink-2); }

.orb-wrap.small { min-height: 180px; }
.orb-wrap.small .orb { transform: scale(.7); }
.notes-live { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px; max-height: 40vh; overflow: auto; display: grid; gap: 8px; }
.notes-live p { line-height: 1.45; }

.examples { display: grid; gap: 8px; }
.ex { text-align: start; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-weight: 600; color: var(--ink); }
.steps-ol, .card p { overflow-wrap: anywhere; }

.ci-card { display: grid; gap: 10px; background: var(--ok-2); border-color: transparent; }
.ci-card .btn svg { width: 18px; height: 18px; }
.circ-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; }
.circ-row .t { flex: 1 1 120px; min-width: 0; }
.circ-row .t h3 { font-size: 17px; }
.circ-row .btn { min-height: 40px; padding: 0 16px; width: auto; white-space: nowrap; }
.circ-btns { display: flex; gap: 6px; align-items: center; margin-inline-start: auto; }

/* lists */
.card.li { padding: 4px 0; gap: 0; }
.card.li.dim { opacity: .7; }
.li-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 10px 18px; background: none; border: 0;
  border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 18px; text-align: start; cursor: pointer; }
.li-row:last-child { border-bottom: 0; }
.li-row .box { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2, var(--muted)); display: grid; place-items: center; color: var(--accent-ink, #fff); }
.li-row.done .box { background: var(--ok); border-color: var(--ok); }
.li-row.done span:last-child { text-decoration: line-through; color: var(--muted); }
.li-row .box svg { width: 16px; height: 16px; }
/* timers and news */
.tquick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tquick .btn { min-height: 48px; padding: 0 6px; }
.tleft { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 750; }
.actcard .tleft { font-size: 30px; }
.tleft.rang { color: var(--bad); }
.actcard.news ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
.actcard.news a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.tcustom { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.tcustom .inp { min-width: 0; }

/* First taps on Home: four real results, no setup */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.try { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.try > button { display: grid; justify-items: start; align-content: start; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); text-align: start; }
.try .circ { width: 44px; height: 44px; background: var(--accent-2); margin-bottom: 4px; }
.try .circ svg { width: 22px; height: 22px; stroke: var(--accent-text); }
.try b { font-size: 16px; line-height: 1.25; }
.try small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.say { display: grid; gap: 8px; }
.say .label { margin-inline-start: 2px; }
.say-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); padding: 2px var(--gut-r) 4px var(--gut-l); scroll-snap-type: x proximity; }
.say-row::-webkit-scrollbar { display: none; }
.say-chip { flex: none; max-width: 78vw; padding: 10px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; scroll-snap-align: start; }
.say-chip::before { content: "“"; color: var(--accent-text); margin-inline-end: 2px; }
.say-chip::after { content: "”"; color: var(--accent-text); margin-inline-start: 2px; }
.actcard.places ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.actcard.places li { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.actcard.places li:first-child { padding-top: 0; border-top: 0; }
.pl-t { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: start; }
.pl-t b { font-size: 15.5px; }
.pl-t small { grid-row: 2; color: var(--muted); font-size: 13px; }
.pl-t .chip { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.actcard.places .maplinks .btn { padding: 8px 12px; font-size: 14px; min-height: 0; }
.actcard.places .maplinks svg { width: 16px; height: 16px; }

/* Giving Voodoo to someone, the hello they see, sharing results */
.hello { display: grid; gap: 10px; background: var(--accent-2); box-shadow: none; }
.hello-note { font-family: var(--serif); font-size: 19px; line-height: 1.4; }
.hello .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hello .btn.link { min-height: 32px; font-size: 13.5px; }
.gift-ready { display: grid; gap: 10px; text-align: center; justify-items: stretch; }
.gift-ready h2 { font-family: var(--serif); font-weight: 450; font-size: 24px; }
.gift-ready .qr { width: min(240px, 70vw); aspect-ratio: 1; justify-self: center; background: #fff; border-radius: var(--r-md); padding: 8px; }
.gift-chat { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; padding: 0; }
.gift-chat:empty { display: none; }
.bub-share { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 700; font-size: inherit; padding: 0; }
.bub-share svg { width: 13px; height: 13px; }
.switch span small { display: block; }

/* The voice window: one place to talk, type and add photos; the conversation and what Voodoo did, live */
.vwin { min-height: calc(100dvh - var(--safe-t) - 20px); display: flex; flex-direction: column; gap: 12px; animation: sheetUp .45s var(--spring) both; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.vw-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 4px 0 8px; }
.vw-orb { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.vw-orb .talk-state { color: var(--muted); font-weight: 700; font-size: 15px; }
.vw-head .btn { width: auto; flex: none; min-height: 42px; padding: 0 16px; font-size: 14px; }
.vw-head .iconbtn { flex: none; }
.orb.mini { width: 64px; height: 64px; }
.orb.mini .core { width: 46px; height: 46px; }
.orb.mini .r2 { inset: -8px; }
.vw-thread { flex: 1 1 auto; align-content: end; overflow-y: auto; max-height: calc(100dvh - 210px - var(--safe-t) - var(--safe-b)); padding: 4px 2px; }
.bub.live { opacity: .75; }
.bub.live[hidden] { display: none; }
.vwin .composer { bottom: calc(10px + var(--safe-b)); }

/* Action receipts: which connector, where it stands, details and proof on tap */
.bub .receipt { display: grid; gap: 6px; min-width: min(290px, 70vw); }
.receipt summary { list-style: none; display: grid; gap: 4px; cursor: pointer; }
.receipt summary::-webkit-details-marker { display: none; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-conn { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); }
.rc-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 750; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.rc-st svg { width: 14px; height: 14px; }
.receipt.done .rc-st { background: var(--ok-2); color: var(--ok); }
.receipt.needs_you .rc-st { background: var(--warn-2); color: var(--warn); }
.receipt.failed .rc-st { background: var(--bad-2); color: var(--bad); }
.rc-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent-text); animation: spin .9s linear infinite; }
.rc-act { font-family: var(--serif); font-weight: 450; font-size: 18px; line-height: 1.25; }
.receipt small { color: var(--ink-2); font-size: 13.5px; }
.rc-conf b { letter-spacing: .5px; }
.rc-thumbs { display: flex; gap: 6px; }
.rc-thumbs img { width: 54px; height: 40px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
.rc-more { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-text); font-weight: 750; font-size: 13px; }
.rc-more svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.receipt[open] .rc-more svg { transform: rotate(90deg); }
.receipt[open] .rc-thumbs { display: none; }
.rc-body { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .06); }
.rc-body .kv > div { padding: 7px 0; font-size: 14px; }
.rc-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.rc-proof { display: grid; gap: 8px; }
.rc-proof img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.rc-proof small { display: block; color: var(--muted); font-size: 12.5px; }

/* Eating out: the allergy card for the waiter, tip and split */
.allergy-chip { display: grid; gap: 2px; min-width: min(260px, 66vw); padding: 14px 16px; border-radius: var(--r-md); background: #fff; color: #1F1D2B; border: 2px solid var(--bad); }
.allergy-chip .al-lang { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--bad); }
.allergy-chip b { font-size: 20px; }
.allergy-chip small { color: #6B6979; }
.al-langs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.al-more { flex: 1 1 140px; min-height: 40px; padding: 6px 12px; }
.al-paper { background: #fff; color: #111; border-radius: var(--r-lg); padding: 22px 20px; display: grid; gap: 10px; box-shadow: var(--shadow); border-top: 6px solid var(--bad); }
.al-paper h2 { font-size: 24px; color: #C0302D; }
.al-paper p { font-size: 17px; line-height: 1.45; }
.al-paper ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 4px; font-size: 20px; font-weight: 800; }
.al-paper .diet { font-weight: 700; }
.al-paper .after { color: #444; }
.al-paper.big h2 { font-size: 34px; }
.al-paper.big p { font-size: 22px; }
.al-paper.big ul { font-size: 28px; }
.al-waiter { position: fixed; inset: 0; z-index: 50; background: #fff; overflow-y: auto; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 24px); display: grid; align-content: start; gap: 14px; text-align: start; }
.al-waiter .al-paper { box-shadow: none; padding: 8px 4px; }
.al-waiter small { color: #888; text-align: center; }
.al-edit, .al-own { display: grid; gap: 10px; }
.al-edit summary, .al-own summary { font-weight: 750; cursor: pointer; }
.chips-row.wrap { flex-wrap: wrap; }
.tipcard { display: grid; gap: 10px; min-width: min(290px, 72vw); }
.tipcard h3 { font-family: var(--serif); font-weight: 450; font-size: 18px; }
.tipcard .chips-row { flex-wrap: wrap; gap: 6px; }
.tip-people { display: flex; align-items: center; gap: 10px; }
.tip-people span { flex: 1; font-weight: 700; color: var(--ink-2); }
.tip-people b { min-width: 28px; text-align: center; font-size: 18px; }
.tip-people .iconbtn { width: 40px; height: 40px; font-size: 22px; }
.tipcard .kv > div { padding: 8px 0; }
.tipcard .each dd { font-size: 22px; font-weight: 800; color: var(--accent-text); }
.actcard.travel { gap: 8px; } .actcard.travel .chip { justify-self: start; }

/* The conversation, ChatGPT-style: their words in soft bubbles on the right, Voodoo's as plain full-width text,
   results as widgets that open full screen, follow-ups as chips, one rounded composer */
:root { --me-bg: #ECECF1; }
:root[data-theme="dark"] { --me-bg: #2C2B36; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --me-bg: #2C2B36; } }
.thread { gap: 18px; }
.bub { animation: rise .3s var(--ease) both; }
.bub.me { justify-self: end; max-width: 82%; background: var(--me-bg); color: var(--ink); box-shadow: none; border-radius: 22px; padding: 10px 16px; }
.bub.me .bub-t, .bub.fam .bub-t { justify-self: end; opacity: .5; }
.bub.me .bub-t svg, .bub.fam .bub-who svg { width: 13px; height: 13px; }
.bub.fam { justify-self: start; max-width: 82%; background: var(--warn-2); border-radius: 22px; padding: 10px 16px; }
.bub.ai { justify-self: stretch; max-width: 100%; background: none; box-shadow: none; border-radius: 0; padding: 0; gap: 8px; }
.bub.ai.typing { justify-self: start; padding: 8px 0; }
.md { display: grid; gap: 10px; font-size: 16.5px; line-height: 1.6; }
.md p { white-space: pre-wrap; }
.md ul, .md ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 4px; }
.md h4 { font-size: 17px; font-weight: 750; margin-top: 4px; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--me-bg); padding: 1px 6px; border-radius: 6px; }
.md a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.msg-tools { display: flex; gap: 2px; margin-inline-start: -8px; }
.tool { display: inline-flex; align-items: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.tool svg { width: 17px; height: 17px; }
.tool:active, .tool:hover { background: var(--me-bg); color: var(--ink); }
.tool.on { color: var(--accent-text); }
.sug { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sug.wrap { justify-content: center; }
.sug-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14.5px; font-weight: 600; text-align: start; }
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow); overflow: hidden; }
.widget.w-allergy, .widget.w-connected { padding: 0; border: 0; background: none; box-shadow: none; }
.bub.ai .widget .actcard, .bub.ai .widget .wx, .bub.ai .widget .route, .bub.ai .widget .menu, .bub.ai .widget .receipt, .bub.ai .widget .tipcard { min-width: 0; }
/* places: a carousel you swipe in the chat, a list when opened full screen */
.widget.w-places .actcard.places ol { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.widget.w-places .actcard.places ol::-webkit-scrollbar { display: none; }
.widget.w-places .actcard.places li, .widget.w-places .actcard.places li:first-child { flex: 0 0 min(250px, 78%); scroll-snap-align: start; border: 1px solid var(--line); border-radius: 16px; padding: 12px; align-content: space-between; }
.chat-thread { padding-bottom: 12px; }
/* the composer */
.composer2 { position: sticky; bottom: calc(96px + var(--safe-b)); z-index: 3; display: grid; grid-template-columns: auto 1fr auto auto; align-items: end; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 6px; box-shadow: 0 8px 30px -14px rgba(31, 29, 43, .35); }
.composer2 textarea { border: 0; outline: none; background: transparent; resize: none; min-height: 44px; max-height: 160px; padding: 11px 4px; font-size: 16px; line-height: 1.4; }
.c-add, .c-voice, .c-send { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.c-add { background: var(--bg); color: var(--ink-2); }
.c-voice, .c-send { background: var(--ink); color: var(--bg); }
.c-add svg, .c-voice svg, .c-send svg { width: 22px; height: 22px; }
.composer2:not(.has-text) .c-voice ~ .c-send { display: none; }
.composer2.has-text .c-voice { display: none; }
.vwin .composer2 { bottom: calc(10px + var(--safe-b)); }
.hello-empty { min-height: 46vh; display: grid; place-content: center; gap: 18px; text-align: center; padding: 44px 4px 20px; }
.hello-empty h1 { font-family: var(--serif); font-weight: 450; font-size: 30px; }
/* a card opened full screen */
.fullcard { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; animation: sheetUp .35s var(--spring) both;
  padding: calc(var(--safe-t) + 8px) var(--gut-r) calc(var(--safe-b) + 24px) var(--gut-l); }
.fc-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg); padding: 6px 0 12px; z-index: 1; }
.fc-head b { font-family: var(--serif); font-weight: 450; font-size: 22px; }
.fc-body { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.fc-body .actcard h3, .fc-body .menu > h3, .fc-body .route > h3 { display: none; }
.actcard.places .maplinks .btn, .fc-body .maplinks .btn { white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 14px; min-height: 36px; padding: 0 12px; font-weight: 700; }
.widget.w-places .actcard.places .maplinks { flex-wrap: nowrap; }
.chat-thread { min-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 330px); align-content: end; }

/* Routines */
.sched-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; }
.sched-row > a { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-width: 0; }
.sched-row .t h3 { font-size: 16.5px; } .sched-row .t p { color: var(--ink-2); font-size: 14.5px; }
.sched-row.off { opacity: .6; }
.switch.bare { border: 0; padding: 0; background: none; }
.chips-row.left { justify-content: flex-start; }
.sched-edit { display: grid; gap: 12px; }
.sched-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.actcard.myday h3 small { font-family: var(--sans); font-size: 13px; font-weight: 600; }
.md-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.md-row > svg { width: 18px; height: 18px; color: var(--accent-text); margin-top: 2px; }
.md-wx { font-size: 20px; font-weight: 700; }

/* Interests and "For you" */
.int-ask { display: grid; gap: 10px; }
.int-ask .btn.link { justify-self: start; min-height: 32px; padding: 0; }
.fy-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 0 6px; scrollbar-width: none; min-width: 0; }
.fy-row::-webkit-scrollbar { display: none; }
.fy { flex: 0 0 min(300px, 82%); scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow); }
.fy ol { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.fy a { color: var(--ink); }
.fy-game { display: grid; gap: 4px; }
.fy-game > div { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.fy-game .won { font-weight: 800; }
.fy-q { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; font-size: 15px; }
.fy-q .up { color: var(--ok); } .fy-q .down { color: var(--bad); }
.int-page .card { display: grid; gap: 10px; }
.int-add { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.int-add.two { grid-template-columns: 1fr auto; }
.int-add select { min-height: 52px; padding: 6px 10px; }
.chip.on .x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 2px; }
.chip.on .x svg { width: 13px; height: 13px; }

/* Trips */
.trip-next { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.trip-next h3 { font-size: 16.5px; } .trip-next p { color: var(--ink-2); font-size: 14px; }
.trip { display: grid; gap: 12px; }
.trip-head h2 { font-family: var(--serif); font-weight: 450; font-size: 24px; }
.trip-items { display: grid; }
.trip-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.trip-item:first-child { border-top: 0; padding-top: 0; }
.trip-item.off { opacity: .55; }
.trip-item h3 { font-size: 16px; } .trip-item p { color: var(--ink-2); font-size: 14px; }
.trip-item .t { display: grid; gap: 4px; min-width: 0; }
.trip-item .chip { justify-self: start; }
.trip-item .maplinks .btn { text-transform: none; letter-spacing: 0; font-size: 13.5px; min-height: 34px; flex: 0 0 auto; }
.iconbtn.bare { border: 0; width: 34px; height: 34px; color: var(--muted); }
.trip-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--bg); border-radius: 16px; padding: 12px; }
.trip-facts > div { display: grid; gap: 2px; } .trip-facts .wide { grid-column: 1 / -1; }
.fd-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.fd { display: grid; justify-items: center; gap: 1px; min-width: 42px; font-size: 14px; }
.trip-scan { display: grid; justify-items: center; gap: 6px; }
.trip-empty { display: grid; justify-items: center; gap: 12px; }

/* What Voodoo remembers */
.mem-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.mem-row .t { display: grid; gap: 4px; } .mem-row p { color: var(--ink-2); font-size: 14.5px; }
.mem-tools { display: flex; gap: 2px; }
form.mem-row { grid-template-columns: 1fr; }

/* The life map, timeline and "get to know me" */
.mem-map { padding: 8px; }
.mem-map svg { width: 100%; height: auto; display: block; }
.mem-map line { stroke: var(--line); stroke-width: 1; }
.mem-map line.strong { stroke: var(--accent-text); stroke-width: 1.6; opacity: .7; }
.mem-map circle { fill: var(--accent); } .mem-map .hub circle { fill: var(--ink-2); }
.mem-map .note { cursor: pointer; }
.mem-map text { font-size: 9px; fill: var(--ink-2); text-anchor: middle; font-family: var(--sans); }
.mem-map .hub text { font-weight: 800; fill: var(--ink); font-size: 10px; }
.mem-time { display: grid; gap: 8px; }
.mt-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font-size: 15px; }
.finding { display: grid; gap: 8px; } .finding.no { opacity: .5; }
.finding .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-spin.big { width: 34px; height: 34px; border-width: 3px; margin: 0 auto 10px; }

.money-hero h2 { font-family: var(--serif); font-weight: 450; font-size: 24px; margin: 10px 0 12px; }
.money-hero .perks { text-align: start; margin: 0 0 16px; }
.big { font-family: var(--serif); font-size: 30px; font-weight: 450; margin: 2px 0 6px; }
.mrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line, rgba(0,0,0,.06)); }
.mrow:first-of-type { border-top: 0; }
.mrow small { display: block; }
.mrow .in { color: var(--ok); }
.mcard .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mcard.late { outline: 2px solid var(--bad); }
.money-hero .circ { margin: 0 auto; }
.mbanks { display: grid; gap: 4px; margin-top: 12px; }
.mbanks .btn { width: 100%; }
.card.order h3 { margin: 2px 0; }
.card.order .btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.card.order.hot { outline: 2px solid var(--accent); }
.card.order .btns .btn { width: auto; margin: 0; }
.card.order .btns .btn:not(.link) { flex: 1 1 100%; }
.card.order .btns .btn.link { flex: 0 0 auto; padding: 8px 10px; min-height: 0; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.wcard { aspect-ratio: 1.586; border: 0; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; text-align: start;
  background: var(--wc, var(--accent)); color: #fff; box-shadow: var(--shadow); font: inherit; cursor: pointer; }
.wcard b { font-size: 17px; line-height: 1.2; } .wcard small { opacity: .85; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.wform { display: grid; gap: 10px; }
.wform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wfull { position: fixed; inset: 0; z-index: 60; background: #fff; color: #111; display: grid; place-items: center; padding: 24px; }
.wfull-in { display: grid; gap: 14px; justify-items: center; text-align: center; width: min(560px, 100%); }
.wfull-in b { font-size: 22px; } .wfull-in img { width: 100%; max-height: 42vh; object-fit: contain; image-rendering: pixelated; }
.wnum { font: 600 22px ui-monospace, Menlo, monospace; letter-spacing: .06em; word-break: break-all; margin: 0; }
.wfull-in small { color: #666; }
.calm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.calm-pick { display: grid; gap: 4px; text-align: start; border: 0; font: inherit; color: inherit; cursor: pointer; }
.calm-run { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.calm-ball { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--accent-2), var(--accent)); transform: scale(.6); opacity: .9; transition: transform var(--d, 4s) ease-in-out; }
.calm-ball.big { transform: scale(1); }
.calm-word { font: 450 30px/1.2 var(--serif); margin: 0; max-width: 22ch; text-wrap: balance; }
.calm-count { font-size: 18px; color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }
.calm-step { color: var(--muted); margin: 0; }
@media (prefers-reduced-motion: reduce) { .calm-ball { transition: none; } }
.form-row .form-val { margin: 2px 0; font-weight: 600; font-size: 16px; word-break: break-word; }
.alarm-time { font: 450 44px/1.1 var(--serif); margin: 4px 0; font-variant-numeric: tabular-nums; }
.actcard.alarm .btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.logrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin-top: 10px; }
.spark { width: 100%; height: 70px; margin: 6px 0; } .spark polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; } .spark .l0 { stroke: var(--accent-text); } .spark .l1 { stroke: var(--ok); }
.moods { display: flex; justify-content: space-between; gap: 6px; } .mood { font-size: 30px; background: none; border: 0; padding: 6px; cursor: pointer; border-radius: 12px; }
.warn-line { color: var(--bad); font-weight: 600; margin: 6px 0; } .big-btn { width: 100%; min-height: 64px; font-size: 18px; }
.logcard .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-url { word-break: break-all; user-select: all; background: var(--bg); padding: 8px; border-radius: 10px; }
.sug-chip { display: inline-flex; align-items: center; gap: 4px; } .sug-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.logcard .tier-h h3 { display: flex; align-items: center; gap: 10px; margin: 0; } .logcard .tier-h h3 .circ { width: 40px; height: 40px; }

.paused-all { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.paused-all .circ { flex-shrink: 0; } .paused-all .btn { flex-basis: 100%; }
.paused-all .t { flex: 1; } .paused-all h3 { margin: 0; } .paused-all p { margin: 2px 0 0; color: var(--muted); }
.pause-all summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.pause-all summary svg { width: 18px; height: 18px; }
.pause-all .row-form { display: grid; gap: 10px; margin-top: 12px; }
.sw-time { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 6px 0 12px; letter-spacing: -0.5px; }
.sw-card .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sw-laps { list-style: none; padding: 0; margin: 12px 0 0; max-height: 240px; overflow: auto; }
.sw-laps li { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sw-laps li span { flex: 1; color: var(--ink-2); }
.focus-card .sug { margin-top: 8px; }
.finds .mrow { align-items: center; } .find-l { display: flex; gap: 12px; align-items: center; min-width: 0; }
.find-l .circ { flex-shrink: 0; width: 36px; height: 36px; } .find-l small { display: block; }
.btns.tight { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: flex-start; margin: -2px 0 6px; }
.btns.tight .btn { width: auto; flex: 0 0 auto; padding: 6px 0; min-height: 0; white-space: nowrap; }
.finds .find-l { flex: 1; } .finds .mrow .btn { flex-shrink: 0; width: auto; white-space: nowrap; padding: 6px 0 6px 8px; min-height: 0; }
.rowscard .rrow { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.rowscard .rrow:first-of-type { border-top: 0; }
.rrow-t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rrow small { display: block; } .rows-h { margin-top: 12px; display: block; }
.stars { color: #F2A93B; letter-spacing: 1px; white-space: nowrap; } .stars i { color: var(--line); font-style: normal; }
.rows-car { margin: 4px 0 0; } .mono { font-family: ui-monospace, monospace; }
.warn-line, .ok-line { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; font-weight: 600; }
.warn-line { color: var(--bad); } .warn-line svg, .ok-line svg { width: 18px; height: 18px; }
.qdial { position: relative; width: 180px; height: 180px; margin: 12px auto; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: transform .2s linear; }
.qdial.aligned { border-color: var(--ok, #16A34A); box-shadow: 0 0 0 6px var(--accent-2); }
.qdial .qn { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-weight: 700; color: var(--muted); }
.qarrow { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .2s linear; }
.qarrow svg { width: 64px; height: 64px; color: var(--accent-text); stroke-width: 2.4; }
.rota-job .t h3 { margin: 0; } .rota-job .chip { margin-top: 6px; display: inline-block; } .rota-job.open { border: 1px dashed var(--accent); }
.rota-add { display: grid; gap: 10px; }
.btns.tight .icon-only { margin-inline-start: auto; } .btns.tight .icon-only svg { width: 18px; height: 18px; }
.li-age { margin-inline-start: auto; color: var(--muted); font-size: 13px; white-space: nowrap; } .li-age.old { color: var(--warn); font-weight: 600; }
.medc-t { width: 100%; border-collapse: collapse; font-size: 15px; } .medc-t td, .medc-t th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.medc-t th { color: var(--muted); font-weight: 600; font-size: 13px; } .medc-allergy { background: var(--bad-2); color: var(--ink); padding: 8px 10px; border-radius: 10px; }
.medc-prices { font-size: 13px; margin-top: 2px; } .medcard ul { margin: 0 0 8px; padding-inline-start: 18px; }
@media print { .tabbar, .topbar, header, nav, .noprint, .fab { display: none !important; } body, .screen { background: #fff !important; } .medcard .card { box-shadow: none; border: 0; } }
.logrow.food-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
.cam-cta { margin-top: 10px; } .cam-cta .mini-orb { background: var(--accent-2); color: var(--accent-text); }
.look { display: grid; gap: 12px; padding: 0 16px 24px; }
.look-v { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; }
.look-v video, .vcam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-flip { position: absolute; top: 10px; inset-inline-end: 10px; background: rgba(0,0,0,.45); color: #fff; border: 0; }
.look-rec { position: absolute; top: 12px; inset-inline-start: 12px; background: rgba(229,64,61,.92); color: #fff; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.look-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .look-btns > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.vcam { position: relative; border-radius: 18px; overflow: hidden; background: #000; height: 34vh; margin: 8px 0; }
.vcam-btns { position: absolute; bottom: 10px; inset-inline-start: 10px; display: flex; gap: 8px; }
.vcam-btns .chip-btn { background: rgba(0,0,0,.5); color: #fff; border-color: transparent; } .vcam-btns .chip-btn[aria-pressed="true"] { background: var(--accent); }
.vw-head .iconbtn.on { background: var(--accent); color: var(--accent-ink); }
.int-add[data-form="intLevel"] { grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto; }
.pdf-page .card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } .pdf-page .card { display: grid; gap: 10px; }
.sigpad { width: 100%; height: auto; aspect-ratio: 3 / 1; background: var(--surface); border: 1.5px dashed var(--line); border-radius: 14px; touch-action: none; }
.fly-form { display: grid; gap: 10px; }
.flyer-wrap { background: #fff; border-radius: 12px; box-shadow: 0 1px 8px rgba(0,0,0,.08); overflow: hidden; }
.flyer { color: #111; padding: 28px 22px 0; text-align: center; font-family: "Helvetica Neue", Arial, sans-serif; min-height: 420px; display: flex; flex-direction: column; gap: 14px; }
.fly-head { font-size: min(54px, 12vw); font-weight: 900; line-height: 1; text-transform: uppercase; color: #d62828; letter-spacing: -1px; overflow-wrap: normal; word-break: normal; hyphens: none; }
.k-lost_pet .fly-head { color: #111; } .k-event .fly-head { color: #3a0ca3; } .k-open .fly-head { color: #1b7f3b; font-size: min(96px, 20vw); } .k-closed .fly-head { color: #b00020; font-size: min(96px, 18vw); } .k-back_soon .fly-head { color: #1f1d2b; font-size: min(64px, 12vw); }
.fly-details { font-size: 22px; line-height: 1.3; white-space: pre-wrap; } .fly-line { font-size: 26px; font-weight: 700; } .fly-contact { font-size: 30px; font-weight: 800; }
.fly-tabs { margin-top: auto; display: flex; border-top: 2px dashed #888; }
.fly-tabs span { flex: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 13px; padding: 10px 2px; border-inline-start: 1px dashed #aaa; height: 120px; }
@media print { body.printing-flyer .screen > *:not(.stagger), body.printing-flyer .noprint, body.printing-flyer .tabbar, body.printing-flyer header { display: none !important; }
  body.printing-flyer .flyer-wrap { box-shadow: none; border-radius: 0; } body.printing-flyer .flyer { min-height: 96vh; } body.printing-flyer .fly-head { font-size: 13vw; } }
.flash { min-height: 220px; display: grid; place-content: center; text-align: center; gap: 16px; }
.flash-front { font-size: 34px; font-weight: 700; margin: 0; } .flash-back { font-size: 22px; color: var(--ink-2); margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .study-new { display: grid; gap: 10px; }
.mrow.best b { color: var(--ok); } .iv-more { display: grid; gap: 8px; } .iv-more summary { cursor: pointer; color: var(--accent-text); font-weight: 600; } .iv-more .inp { margin-top: 8px; }
.art-page .card { display: grid; gap: 10px; } .art-page .card h3 { display: flex; gap: 10px; align-items: center; margin: 0; }
.art-img { width: 100%; border-radius: 14px; display: block; margin-bottom: 10px; }
.col-canvas { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 1px 8px rgba(0,0,0,.08); } .col-page { display: grid; gap: 12px; padding-bottom: 24px; }
.caps { display: grid; gap: 12px; padding-bottom: 24px; min-height: 100vh; align-content: start; }
.cap-live { min-height: 55vh; max-height: 65vh; overflow-y: auto; background: var(--surface); border-radius: 18px; padding: 16px; line-height: 1.3; font-weight: 600; }
.cap-live p { margin: 0 0 12px; } .cap-btns { grid-template-columns: 1fr 1fr; }
/* polish pass: date/time fields never spill into each other; spacing in the invitation form and the Pictures page */
.sched-when .inp { min-width: 0; width: 100%; }
.inv-new { display: grid; gap: 10px; }
.art-page { display: grid; gap: 12px; }
/* the hidden switch iPhones tick when it flips (haptics) */
.hap { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
/* a ride Voodoo worked out (Uber) */
.actcard.ride { display: grid; gap: 8px; } .actcard.ride .btn { white-space: nowrap; } .actcard.ride .mrow small { display: block; } .actcard.ride p { margin: 0; } .actcard.ride .mrow { display: flex; justify-content: space-between; gap: 10px; }
.actcard.rides { display: grid; gap: 6px; } .actcard.rides p { margin: 0; }
.actcard.rides .mrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.actcard.rides .mrow small { display: block; } .actcard.rides .r { display: grid; justify-items: end; gap: 2px; text-align: right; } .actcard.rides .r .btn { padding: 0; min-height: 0; }
.addr { font-size: 14px; word-break: break-all; }
.mail-btns { grid-template-columns: 1fr !important; margin-bottom: 22px; }
.pay-new { display: grid; gap: 10px; }
.conn.budget .t h3, .conn.budget .t p { white-space: normal; overflow: visible; text-overflow: clip; } .pay-new { margin-top: 6px; }
.big-num { font-size: 26px; display: block; margin: 6px 0 12px; }
/* one conversation for years: date lines and paging back */
.day-div { text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 600; margin: 14px 0 4px; }
.chat-thread .earlier { display: block; margin: 4px auto 10px; }
.bub-audio { width: 240px; max-width: 100%; margin-bottom: 6px; } .bub-media { display: block; font-size: 12.5px; margin: 2px 0 4px; }
/* What's happening: Needs you / Doing / Coming up */
.happen { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 10px; }
.happen::-webkit-scrollbar { display: none; }
.top + .happen { position: sticky; top: calc(var(--safe-t) + 6px); z-index: 4; padding: 4px 0; background: var(--bg); }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px 8px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); }
.hp-chip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-2); color: var(--accent-text); font-size: 13px; }
.hp-needs { border-color: var(--warn); color: var(--ink); } .hp-needs b { background: var(--warn-2); color: var(--warn); }
.hp-list { display: grid; gap: 8px; margin-top: 6px; }
.hp-item { display: grid; gap: 3px; text-align: start; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-height: 44px; }
.hp-item b { font-size: 15.5px; } .hp-item small { color: var(--muted); font-size: 13.5px; }
.bub.hl-flash { animation: hlflash 1.6s var(--ease); border-radius: var(--r-md); }
@keyframes hlflash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-2); background-color: var(--accent-2); } 100% { box-shadow: 0 0 0 0 transparent; } }
.bub.ai.typing { display: grid; gap: 6px; } .bub.typing .dots { display: flex; gap: 6px; }
.typing-note { color: var(--muted); font-size: 13.5px; } .typing-note:empty { display: none; }
.mem-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.mem-note svg { width: 15px; height: 15px; color: var(--ok); flex-shrink: 0; } .mem-note span { flex: 1 1 auto; min-width: 0; }
.mem-note .link { font-size: 13px; font-weight: 600; color: var(--accent-text); background: none; border: 0; padding: 6px 4px; }
@media (prefers-reduced-motion: reduce) { .bub.hl-flash { animation: none; outline: 3px solid var(--accent-2); } }
/* Action receipts while working: steps tick off, the page as it is now */
.rc-live { display: grid; gap: 8px; margin-top: 8px; }
.rc-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rc-ticks li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.rc-ticks li svg { width: 16px; height: 16px; color: var(--ok); flex-shrink: 0; } .rc-ticks li.now { color: var(--ink); font-weight: 600; }
.rc-ticks li .rc-spin { flex-shrink: 0; }
.rc-see { display: flex; align-items: center; gap: 10px; color: var(--accent-text); font-weight: 600; font-size: 14px; }
.rc-see img { width: 72px; height: 48px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); }
/* Your turn */
.handoff { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--line); }
.handoff.open { border-color: var(--warn); background: linear-gradient(var(--warn-2), var(--surface) 70%); }
.handoff h3 { margin: 0; font-size: 17px; } .handoff p { margin: 0; color: var(--ink-2); } .handoff .btn { width: 100%; justify-content: center; }
.handoff.done { opacity: .75; }
/* Morning card */
.brief { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.br-item { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.br-item p { margin: 0; font-size: 15.5px; color: var(--ink); }
.br-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .br-acts .btn { min-height: 40px; padding: 8px 14px; }
.br-mute { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.br-end { margin: 8px 0 0; font-size: 13.5px; }
/* How Voodoo works for you */
.rule { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .rule:last-child { border-bottom: 0; }
.rule p { margin: 0; flex: 1; } .rule-i svg { width: 18px; height: 18px; color: var(--ok); }
.rules-form { display: grid; gap: 14px; } .cap-row { display: flex; align-items: center; gap: 6px; } .cap-row .inp { max-width: 140px; }
.share-prev { display: grid; gap: 4px; } .share-prev p { margin: 4px 0 0; }
.br-acts .btn, .rule .btn { width: auto; flex: 0 0 auto; }
.br-mute, .rule .btn.link { text-transform: none; letter-spacing: 0; font-weight: 600; min-height: 40px; padding: 8px 6px; }
.rule p { min-width: 0; }
.receipt .rc-stuck { color: var(--warn); font-weight: 600; }
.receipt .rc-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-weight: 600; } .rc-ok svg { width: 14px; height: 14px; }
.receipt .rc-unv { color: var(--muted); }
.cap-n { max-width: 120px; }
.src p { margin: 4px 0; }
.idcard { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--accent-2); }
.idcard .kv { margin: 0; }
.trig-row { display: flex; align-items: center; gap: 10px; } .trig-row .t { flex: 1; min-width: 0; } .trig-row h3 { margin: 0 0 2px; font-size: 15.5px; } .trig-row p { margin: 0; color: var(--ink-2); font-size: 14px; }
.trig-row .btn { width: auto; flex: 0 0 auto; text-transform: none; letter-spacing: 0; }
.actcard.trig .label { display: inline-flex; align-items: center; gap: 6px; } .actcard.trig .label svg { width: 15px; height: 15px; }
/* Recipe box and cook mode */
.rec-row { display: flex; align-items: center; gap: 12px; } .rec-row .t { flex: 1; min-width: 0; } .rec-row h3 { margin: 0 0 2px; font-size: 16px; } .rec-row p { margin: 0; color: var(--muted); font-size: 13.5px; }
.rec-add { display: grid; gap: 10px; }
.rec-meta { display: grid; gap: 8px; } .rec-meta p { margin: 0; color: var(--ink-2); }
.rec-ing { margin: 6px 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 16px; }
.rec-steps { margin: 6px 0 0; padding-inline-start: 22px; display: grid; gap: 10px; font-size: 16px; line-height: 1.5; }
.rec-card h3 { display: flex; align-items: center; gap: 8px; } .rec-card h3 svg { width: 20px; height: 20px; }
.cook { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; padding: calc(var(--safe-t) + 16px) var(--gut-r) calc(var(--safe-b) + 20px) var(--gut-l); }
.cook-in { display: grid; grid-template-rows: auto 1fr auto auto; gap: 16px; max-width: 640px; width: 100%; margin: 0 auto; }
.cook-top { display: flex; align-items: center; justify-content: space-between; }
.cook-step { margin: 0; align-self: center; font-size: clamp(22px, 6vw, 32px); line-height: 1.4; color: var(--ink); }
.cook-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.vw-done { width: auto; margin: 0 auto 8px; min-height: 44px; padding: 0 18px; text-transform: none; letter-spacing: 0; }
.orb.waiting .core { animation: waitglow 2.4s ease-in-out infinite; }
@keyframes waitglow { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .orb.waiting .core { animation: none; } }
/* Tap targets: at least 44px everywhere people tap */
.tool { min-width: 44px; height: 44px; }
.sug-chip, .say-chip, .chip-btn { min-height: 44px; }
.try-say { display: block; margin-top: 6px; font-size: 12.5px; font-style: italic; color: var(--accent-text); }
.txt-offer { display: grid; gap: 8px; } .txt-offer p { margin: 0; color: var(--ink-2); } .txt-offer .btns { display: flex; gap: 8px; flex-wrap: wrap; } .txt-offer .btn { width: auto; }
.vault-import { display: grid; gap: 8px; } .vault-import p { margin: 0; }
.vid-making p { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.grocery h3, .foodorder h3 { display: flex; align-items: center; gap: 8px; } .grocery h3 svg, .foodorder h3 svg { width: 20px; height: 20px; }
.gro-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; } .gro-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }
.gro-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gro-list .btn { width: auto; flex: 0 0 auto; text-transform: none; letter-spacing: 0; }
.fo-items { margin: 6px 0; padding-inline-start: 20px; display: grid; gap: 4px; }
/* Pages */
.pg-body { display: grid; gap: 8px; } .pg-body h2, .pg-body h3, .pg-body h4 { margin: 10px 0 2px; } .pg-body p { margin: 0; line-height: 1.5; }
.pg-body ul, .pg-body ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.pg-checks { list-style: none; padding-inline-start: 0 !important; }
.pg-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.pg-check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent-text); flex-shrink: 0; }
.pg-check.done span { color: var(--muted); text-decoration: line-through; }
.pg-table { overflow-x: auto; } .pg-table table { border-collapse: collapse; width: 100%; font-size: 14px; }
.pg-table th, .pg-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: start; vertical-align: top; } .pg-table th { color: var(--ink-2); }
/* Seasonal touches on the Home scene */
.scene .pk { fill: #F59E2B; stroke: var(--ink-2); stroke-width: 1.2; } .scene .pkf { fill: none; stroke: #7A3E00; stroke-width: 1; }
.scene .bulb { stroke: none; animation: twinkle 2.4s ease-in-out infinite; } .scene .b0 { fill: #E5403D; } .scene .b1 { fill: #FFB547; animation-delay: .8s; } .scene .b2 { fill: #12A574; animation-delay: 1.6s; }
.scene .flake { fill: #BFD7F5; animation: fall 6s linear infinite; } .scene .f1 { animation-delay: 2s; } .scene .f2 { animation-delay: 4s; }
.scene .heart { fill: #F06A8A; animation: twinkle 3s ease-in-out infinite; } .scene .fl { fill: #F7A8C8; stroke: var(--ink-2); stroke-width: .8; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes fall { from { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene .bulb, .scene .flake, .scene .heart { animation: none; } }
/* Product cards */
.prod-list { display: grid; gap: 12px; margin: 8px 0; }
.prod { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.prod-img { width: 84px; height: 84px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--line); display: block; }
.prod-t { display: grid; gap: 3px; min-width: 0; } .prod-t b { font-size: 15px; line-height: 1.3; } .prod-t small { color: var(--muted); font-size: 13px; }
.prod-price { font-weight: 800; font-size: 16px; } .prod-price s { color: var(--muted); font-weight: 500; font-size: 13px; }
.prod-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .prod-btns .btn { width: auto; min-height: 40px; padding: 8px 14px; }
/* Library and clashes */
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lib-tile { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.lib-tile img, .lib-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-play { position: absolute; inset: auto 6px 6px auto; background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; font-size: 12px; padding: 3px 8px; }
.actcard.clash .label { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); } .actcard.clash .label svg { width: 15px; height: 15px; }
.cl-row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); } .cl-row:last-of-type { border-bottom: 0; }
/* the weekend card and the week ahead (printable) */
.wk-day { padding: 10px 0; border-bottom: 1px solid var(--line); } .wk-day:last-of-type { border-bottom: 0; }
.wk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wk-wx { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.wk-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.wk-list li { display: flex; gap: 6px; align-items: baseline; } .wk-list svg { width: 15px; height: 15px; flex: none; color: var(--muted); align-self: center; }
.wk-btns { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
.sub-btns { margin: 6px 0 0; align-items: center; } .btns.tight.sub-btns .btn.outline { padding: 8px 16px; } .say-chip.own { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; } .say-chip.own svg { width: 15px; height: 15px; }
@media print { .digest .dg-days { box-shadow: none; border: 0; padding: 0; } .digest .wk-day { break-inside: avoid; } .digest { font-size: 12pt; } }
.tri-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; } .tri .btn { margin-top: 8px; }
.fc-btn { width: auto; min-height: 40px; margin-top: 8px; padding: 0 16px; } .fc-btn svg { width: 16px; height: 16px; }
.hsa-row { align-items: center; gap: 12px; } .hsa-row input { width: 22px; height: 22px; flex: none; } .hsa-row.off { opacity: .6; } .hsa-row > b { margin-inline-start: auto; white-space: nowrap; }
.feed { display: grid; gap: 12px; } .feed-story h3 { margin: 4px 0 6px; } .feed-story p { margin: 0 0 8px; line-height: 1.5; } .feed-src { font-size: .85rem; color: var(--muted); } .feed-src a { color: inherit; }
.call-audio { width: 100%; margin: 8px 0 4px; }
.sug-chip.new { border-color: var(--accent, #6d4cff); } .sug-chip.new svg { width: 14px; height: 14px; margin-inline-end: 5px; vertical-align: -2px; }
.sos-pill.hold { position: relative; overflow: hidden; border: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sos-pill .hold-fill { position: absolute; inset: 0; width: 0; background: rgba(255, 255, 255, .42); pointer-events: none; }
.sos-pill.holding .hold-fill { animation: holdfill var(--dur, 1s) linear forwards; }
@keyframes holdfill { from { width: var(--from, 0%); } to { width: 100%; } }
.sos-pill .hold-t { position: relative; pointer-events: none; }
.tr-said { display: block; margin-top: 2px; }
.tf-goal.on { border-color: var(--accent-text); background: var(--accent-2); }
.tf-list { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 6px; } .tf-list li { display: flex; gap: 8px; align-items: flex-start; } .tf-list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-text); }
/* the chat as a sheet: a handle to drag it down to a bar above the tabs, and the bar to bring it back */
.chat-grab { display: grid; place-items: center; height: 18px; margin: -6px 0 -12px; cursor: grab; touch-action: none; }
.chat-grab span, .mini-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line); }
.chat-mini { position: fixed; z-index: 9; left: 0; right: 0; bottom: calc(160px + var(--safe-b)); margin: 0 auto; width: min(420px, calc(100% - 40px));
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; padding: 6px 6px 8px 10px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); touch-action: none; animation: rise .3s var(--ease) both; }
.chat-mini .mini-grab { grid-column: 1 / -1; justify-self: center; margin-bottom: 2px; }
.mini-open { display: flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: none; color: var(--ink); text-align: start; font: inherit; }
.mini-open span { flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.35; }
.mini-open svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
.mini-x { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); } .mini-x svg { width: 16px; height: 16px; }
/* one message box above the tabs on every tab page; the voice button is a glowing orb that becomes Send when they type */
.dock { position: fixed; z-index: 8; left: 0; right: 0; bottom: calc(92px + var(--safe-b)); margin: 0 auto; width: min(420px, calc(100% - 40px)); }
.dock .composer2 { position: static; margin: 0; box-shadow: var(--shadow); }
body.kb-open .dock { bottom: calc(8px + var(--kb, 0px)); }
/* the page fades out under the box and the tabs, so nothing shows between them */
.dock::before { content: ""; position: fixed; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(172px + var(--safe-b)); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg) 34px); }
body.kb-open .dock::before { height: calc(82px + var(--kb, 0px)); }
/* the chat's name and its close button stay at the top while the messages scroll */
.chat-grab { position: relative; z-index: 6; }
.c-orb { position: relative; width: 40px; height: 40px; display: block; border-radius: 50%; box-shadow: 0 0 12px 1px rgba(139, 92, 246, .45), 0 0 20px 3px rgba(34, 211, 238, .22); animation: orbPulse 2.6s ease-in-out infinite; }
.c-orb i { position: absolute; inset: 0; border-radius: 50%; }
.c-orb i:nth-child(1) { background: conic-gradient(from 0deg, #3B82F6, #8B5CF6, #EC4899, #22D3EE, #3B82F6); filter: blur(1.5px) saturate(1.15); will-change: transform; animation: spin 6s linear infinite; }
.c-orb i:nth-child(2) { background: conic-gradient(from 90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, .75), rgba(236, 72, 153, 0) 45%, rgba(236, 72, 153, .7) 70%, rgba(34, 211, 238, 0)); filter: blur(3px); mix-blend-mode: screen; will-change: transform; animation: spin 4.2s linear infinite reverse; }
.c-orb i:nth-child(3) { inset: 5px; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .92) 30%, rgba(255, 255, 255, 0) 72%); animation: orbCore 1.8s ease-in-out infinite alternate; }
@keyframes orbPulse { 0%, 100% { transform: scale(.95); box-shadow: 0 0 10px 1px rgba(139, 92, 246, .38), 0 0 16px 2px rgba(34, 211, 238, .18); } 50% { transform: scale(1.04); box-shadow: 0 0 18px 4px rgba(139, 92, 246, .55), 0 0 26px 6px rgba(236, 72, 153, .28); } }
@keyframes orbCore { from { opacity: .55; transform: scale(.85); } to { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .c-orb, .c-orb i, .orb .core::before, .orb .core::after { animation: none !important; } }
.composer2 textarea { overflow-y: hidden; scrollbar-width: none; } .composer2 textarea::-webkit-scrollbar { display: none; }
.composer2 textarea.scrolls { overflow-y: auto; }
.mascot { display: block; margin: 0 auto; height: auto; }
.mascot-hi { width: min(200px, 52vw); animation: mascotHi 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes mascotHi { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-2.5deg) translateY(-3px); } 50% { transform: rotate(0deg) translateY(0); } 75% { transform: rotate(2.5deg) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mascot-hi { animation: none; } }
/* the living Home scene (3c): the sky by their clock and weather, the year's moments, the doll living there */
.scene .sk1 { stop-color: var(--sky-day); } .scene .sk2 { stop-color: var(--bg); }
.scene.p-dawn .sk1 { stop-color: var(--sky-dawn); } .scene.p-golden .sk1 { stop-color: var(--sky-golden); } .scene.p-dusk .sk1 { stop-color: var(--sky-dusk); }
.scene.w-overcast:not(.p-night) .sk1, .scene.w-rain:not(.p-night) .sk1, .scene.w-fog:not(.p-night) .sk1, .scene.w-snow:not(.p-night) .sk1 { stop-color: var(--sky-grey); }
.scene.w-storm:not(.p-night) .sk1 { stop-color: var(--sky-storm); }
.scene.p-night .sk1 { stop-color: var(--sky-night); } .scene.p-night .sk2 { stop-color: var(--sky-night2); }
.scene.p-night .hill { fill: var(--night-ground); } .scene.p-night .ln { stroke: var(--night-art); }
.scene .ln.win.lit { fill: #FFD27A; }
.scene .sunball.low { fill: #FF9F43; } .scene .sunball.hot { fill: #FFB020; filter: drop-shadow(0 0 6px rgba(255, 176, 32, .7)); }
.scene .moonball { fill: #F4F1DE; } .scene .moonshade { fill: var(--sky-night); opacity: .93; }
.scene .star { fill: #fff; animation: twinkle 2.8s ease-in-out infinite; } .scene .star.t1 { animation-delay: .9s; } .scene .star.t2 { animation-delay: 1.8s; }
.scene .cl { fill: var(--surface); stroke: var(--art); stroke-width: 2; stroke-linejoin: round; }
.scene .cloud.dark .cl { fill: var(--cloud-dark); } .scene .cloud.c1 { animation: drift 14s ease-in-out infinite reverse; } .scene .cloud.windy { animation-duration: 4s; }
.scene.p-night .cl { fill: var(--night-ground); stroke: var(--night-art); }
.scene .drop { stroke: #6B9BD8; stroke-width: 1.4; stroke-linecap: round; animation: rainfall .9s linear infinite; }
.scene .drop.r1 { animation-delay: .22s; } .scene .drop.r2 { animation-delay: .45s; } .scene .drop.r3 { animation-delay: .67s; }
@keyframes rainfall { from { transform: translate(0, -10px); opacity: 0; } 10% { opacity: .9; } to { transform: translate(-8px, 70px); opacity: 0; } }
.scene .snowfall .flake { fill: #fff; stroke: #BFD7F5; stroke-width: .6; animation: snowfall 7s linear infinite; }
.scene .snowfall .f1 { animation-delay: 2.3s; } .scene .snowfall .f2 { animation-delay: 4.6s; }
@keyframes snowfall { from { transform: translate(0, -10px); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(6px, 50px); } to { transform: translate(-4px, 110px); opacity: 0; } }
.scene .fog rect { fill: var(--surface); opacity: .6; animation: drift 12s ease-in-out infinite; }
.scene .fog rect:nth-child(2) { animation-direction: reverse; animation-duration: 16s; }
.scene .bolt { fill: #FFD34D; stroke: #C98A00; stroke-width: 1; opacity: 0; animation: bolt 6s infinite; }
.scene .flash { fill: #fff; opacity: 0; pointer-events: none; animation: flash 6s infinite; }
@keyframes bolt { 0%, 6%, 100% { opacity: 0; } 1%, 4% { opacity: 1; } }
@keyframes flash { 0%, 100% { opacity: 0; } 1% { opacity: .5; } 2% { opacity: 0; } 3% { opacity: .3; } 5% { opacity: 0; } }
.scene .tree.windy { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 2.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.scene .bloom { fill: #F7A8C8; }
.scene .leaf { fill: #E2873A; transform-box: fill-box; transform-origin: center; animation: leaffall 7s linear infinite; }
.scene .leaf.l1 { fill: #C2410C; animation-delay: 2.3s; } .scene .leaf.l2 { fill: #D9A441; animation-delay: 4.6s; }
@keyframes leaffall { from { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(-24px, 55px) rotate(260deg); opacity: 0; } }
.scene .burst { transform-box: fill-box; transform-origin: center; animation: burst 2.4s ease-out infinite; } .scene .burst line { stroke-width: 1.6; stroke-linecap: round; }
.scene .burst.k1 { animation-delay: .8s; } .scene .burst.k2 { animation-delay: 1.6s; }
@keyframes burst { 0% { transform: scale(.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.scene .lantern { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.scene .xstar { animation: twinkle 2s ease-in-out infinite; }
/* the doll: a small bob and a blink; it waves, sleeps, jumps at thunder */
.scene .dl-ln { fill: none; stroke: #5A3A2A; stroke-width: .8; stroke-linecap: round; }
.scene .dl-body { animation: dbob 3.6s ease-in-out infinite; }
@keyframes dbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.scene .dl-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.12); } }
.scene .dl-arm.up { transform-origin: 21.4px 21px; animation: dwave 1.3s ease-in-out infinite alternate; }
.scene .d-star .dl-arm.up { animation-duration: 2.6s; }
@keyframes dwave { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.scene .d-sleep .dl-head { transform-origin: 13px 20px; transform: rotate(-8deg); }
.scene .zzz text { font: 700 7px var(--sans); fill: var(--night-art); animation: zfloat 3s ease-in-out infinite; }
.scene .zzz text:nth-child(2) { font-size: 5.5px; animation-delay: 1.5s; }
@keyframes zfloat { 0% { opacity: 0; transform: translateY(4px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.scene .d-jump .dl-move { animation: djump 6s infinite; }
@keyframes djump { 0%, 3%, 14%, 100% { transform: none; } 6% { transform: translateY(-9px); } 10% { transform: none; } }
.page-hidden .scene, .page-hidden .scene * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .scene.live, .scene.live * { animation: none !important; } .scene .bolt { opacity: 1; } }
.wake-card { display: grid; gap: 10px; }
.wake-card + .wake-card { margin-top: 14px; }
.wake-card h3 { font-size: 17px; }
.walk-card { display: grid; gap: 12px; text-align: center; }
.walk-dot { width: 14px; height: 14px; border-radius: 50%; background: #12A574; justify-self: center; animation: walkPulse 1.6s ease-out infinite; }
@keyframes walkPulse { 0% { box-shadow: 0 0 0 0 rgba(18, 165, 116, .5); } 100% { box-shadow: 0 0 0 12px rgba(18, 165, 116, 0); } }
@media (prefers-reduced-motion: reduce) { .walk-dot { animation: none; } }
/* the header is see-through on Home: the sky runs up behind it to the top of the screen */
/* one header on the four tab pages: see-through over Home's sky, frosted glass elsewhere and once the page moves under it */
.apphdr { position: fixed; z-index: 9; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 600px; display: grid; grid-template-columns: 46px 1fr auto;
  align-items: center; gap: 10px; padding: calc(var(--safe-t) + 10px) var(--gut-r) 8px var(--gut-l); background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); transition: background-color .25s; }
.apphdr .title { font-size: 24px; text-align: center; color: var(--ink); }
.apphdr.clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.apphdr.on-dark .title, .apphdr.on-dark .iconbtn { color: #F2F1F7; border-color: rgba(242, 241, 247, .75); }
body.has-hdr .screen { padding-top: calc(var(--safe-t) + 74px); }
.home .scene-wrap { position: relative; z-index: 1; }
/* the chat's own row (its name, the arrow that tucks it away) stays under the header, frosted too */
.chat-grab + .top { min-height: 44px; position: sticky; top: calc(var(--safe-t) + 64px); z-index: 5; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-radius: 0 0 18px 18px; }
.top + .happen { top: calc(var(--safe-t) + 118px); }
/* the doll walks: legs swing, it turns the way it goes; then it does a thing */
.scene .doll-face { transform-origin: 13px 0; }
.scene .doll-face.left { transform: scaleX(-1); }
.scene .leg { transform-box: fill-box; transform-origin: 50% 0; }
.scene .walking .leg-l { animation: legSwing .45s ease-in-out infinite alternate; }
.scene .walking .leg-r { animation: legSwing .45s ease-in-out infinite alternate-reverse; }
.scene .walking .dl-body { animation: dstep .45s ease-in-out infinite alternate; }
@keyframes legSwing { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes dstep { from { transform: translateY(0); } to { transform: translateY(-1.3px); } }
.scene .prop { display: none; }
.scene .act-water .p-water, .scene .act-read .p-book, .scene .act-sweep .p-broom, .scene .act-build .p-snowball, .scene .tapped .p-heart { display: inline; }
.scene .dl-arm { transform-origin: 21.4px 21px; transition: transform .35s; }
.scene .act-look .dl-arm:not(.up), .scene .act-star .dl-arm:not(.up) { transform: rotate(-120deg); }
.scene .act-wave .dl-arm:not(.up), .scene .tapped .dl-arm:not(.up) { animation: dwave2 .9s ease-in-out infinite alternate; }
@keyframes dwave2 { from { transform: rotate(-112deg); } to { transform: rotate(-140deg); } }
.scene .act-water .dl-arm { transform: rotate(-35deg); }
.scene .p-water .drops circle { fill: #6B9BD8; animation: rainfall 1s linear infinite; } .scene .p-water .drops circle:nth-child(2) { animation-delay: .33s; } .scene .p-water .drops circle:nth-child(3) { animation-delay: .66s; }
.scene .act-sweep .dl-arm { animation: sweep .8s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: rotate(-12deg); } to { transform: rotate(22deg); } }
.scene .act-build .dl-arm { animation: sweep .6s ease-in-out infinite alternate; }
.scene .act-read .dl-move { transform: translateY(-8px); } .scene .act-read .dl-head { transform-origin: 13px 20px; transform: rotate(6deg); }
.scene .act-look .dl-head { transform-origin: 13px 20px; transform: rotate(-12deg); }
.scene .act-smell .dl-body { transform-box: view-box; transform-origin: 13px 39px; transform: rotate(-10deg); }
.scene .act-hop .dl-move, .scene .tapped .dl-move { animation: dhop .7s ease-in-out 3; }
@keyframes dhop { 0%, 100% { transform: none; } 45% { transform: translateY(-7px); } }
.scene .act-kick .leg-r { animation: kick .6s ease-in-out 3; }
@keyframes kick { 0%, 100% { transform: none; } 40% { transform: rotate(-55deg); } }
.scene .tapped .p-heart { animation: zfloat 1.3s ease-out both; }
.scene .doll { cursor: pointer; }
.chat-grab + .top .title { font-size: 18px; }
.chat-grab + .top .iconbtn { width: 38px; height: 38px; }