/* ongly Mini App, redesign v3 "Bulut glass" (2026-11-09). Tokens live in tokens.css; this file only
   composes them. Cloud grey with a dot grid and a slow violet glow, light frosted-glass surfaces, one
   violet accent, and the recovered words set in the serif with a red (deleted) or ocean (edited) mark. */

/* Platform baseline (mobile-native) */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  background: var(--bg);
}
body {
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--ink);
  font: 400 var(--t-body)/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* No colour transition here: the scheme is set at startup and must not fade in from the system's */
}
button, a { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; text-align: inherit; touch-action: manipulation; }
button, [role="button"], .tab, .chip, .segment, .grip { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button:disabled { cursor: default; opacity: 0.55; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
input, textarea, select { font: inherit; font-size: 16px; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
h1:focus, h2:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { display: inline-flex; flex: none; }
.icon svg { display: block; }
.mono, .row .time, .summary, .large-sub.mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0; }

/* The living background: two violet glows drifting slowly behind everything */
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Pre-blurred: a soft radial gradient looks like an 80px blur but costs no filter pass, and the
   drift only moves it (transform), so it stays on the compositor */
.glow i {
  position: absolute; border-radius: 50%; opacity: var(--glow-alpha);
  background: radial-gradient(closest-side, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, transparent) 30%, color-mix(in srgb, var(--accent) 30%, transparent) 62%, transparent 100%);
}
.glow i:first-child { width: 460px; height: 460px; right: -200px; top: -140px; animation: drift-a 18s ease-in-out infinite; }
.glow i:last-child { width: 400px; height: 400px; left: -210px; bottom: 0; opacity: calc(var(--glow-alpha) * 0.6); animation: drift-b 22s ease-in-out infinite; }
@keyframes drift-a { 50% { transform: translate(-60px, 80px) scale(1.2); } }
@keyframes drift-b { 50% { transform: translate(50px, -60px) scale(1.1); } }
:root[data-lite] .glow i { animation: none; }

/* Glass: every card-like surface */
.group, .lock-card, .connect, .notice, .viz-card, .answer, .recovered, .history li, .facts, .plan-panel,
.chip, .search-input, .tool, .bubble, .stat.glassy, .teaser-card, .plan-tile, .invite-card, .lang-option, .profile-plan-inner,
.field, .ask-bar, .icon-button.glassy, .ad-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 16px 36px -26px var(--shadow);
}
:root[data-lite] :is(.group, .lock-card, .connect, .notice, .viz-card, .answer, .recovered, .history li, .facts, .plan-panel,
.chip, .search-input, .tool, .bubble, .stat, .teaser-card, .plan-tile, .invite-card, .lang-option, .profile-plan-inner, .field, .ask-bar, .icon-button, .tabbar, .nav, .sheet, .ad-card) {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Shell */
#shell { position: relative; z-index: 1; }
#app { padding-bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-bottom) + var(--s-6)); max-width: 680px; margin: 0 auto; }
#app.no-tabs { padding-bottom: calc(var(--safe-bottom) + var(--s-8)); }
.screen { min-height: 60dvh; }
.content { padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--s-3); }
.loading-screen { display: grid; place-items: center; min-height: 60dvh; }

/* Navigation bar: clear at the top, frosted once the large title scrolls away */
.nav {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(var(--nav-h) + var(--safe-top)); padding: var(--safe-top) var(--s-3) 0;
  transition: background-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.nav.scrolled {
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 var(--material-edge);
}
.nav-title { font-weight: 700; font-size: 1.0625rem; opacity: 0; transition: opacity var(--d-fast) var(--ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.nav.scrolled .nav-title { opacity: 1; }
.nav-side { display: flex; align-items: center; gap: var(--s-2); }
.nav-side.end { justify-content: flex-end; }
/* Main tabs: the Profile pill on the left and the plan chip on the right keep their size, the title between gives way */
.nav.has-start { grid-template-columns: auto minmax(0, 1fr) auto; }
.nav.has-start .nav-title { justify-self: center; max-width: 100%; }
.nav.has-start .nav-side { min-width: 0; }
.large { padding: var(--s-1) var(--gutter) var(--s-4); }
.large h1 { font-size: var(--t-large); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.large-sub { color: var(--muted); font-size: var(--t-sub); margin-top: 4px; }

.icon-button { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; color: var(--ink); flex: none; }
.icon-button.quiet { color: var(--muted); width: 36px; height: 36px; }
.icon-button.filled { background: var(--solid); color: var(--on-solid); width: 40px; height: 40px; }
.icon-button.glassy { width: 42px; height: 42px; }

/* The profile button, top left of every main screen: your initial on a black disc, the word and a chevron in one pill */
.me-pill { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 12px 0 4px; border-radius: var(--r-pill); background: var(--surface); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%); box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink); font-size: var(--t-sub); font-weight: 600; flex: none; }
.me-pill .icon { color: var(--muted); }
.me { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--solid); color: var(--on-solid); font-weight: 700; font-size: 16px; }
/* The plan chip, top right of Home: "Your plan | Max". Violet is for upgrades; Free stays grey. */
.plan-chip { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); min-width: 0; padding: 0 14px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--link); flex: 0 1 auto; }
.plan-chip .plan-label { color: var(--ink-2); font-size: var(--t-foot); font-weight: 500; white-space: nowrap; }
.plan-chip .plan-divider { flex: none; width: 1px; height: 16px; background: color-mix(in srgb, var(--link) 30%, transparent); }
.plan-chip .plan-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sub); font-weight: 700; }
.plan-chip.quiet { background: var(--fill-strong); color: var(--ink); }
.plan-chip.quiet .plan-label { color: var(--muted); }
.plan-chip.quiet .plan-divider { background: var(--line); }

/* Tab bar: a floating black pill; the violet indicator slides to the tab you pick */
.tabbar {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + var(--tabbar-gap)); z-index: 6;
  display: flex; gap: 4px; padding: 6px;
  border-radius: var(--r-pill);
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 30px -10px var(--shadow);
  transform: translateX(-50%);
  transition: transform 400ms var(--ease-drawer), opacity 200ms var(--ease-out);
}
.tabbar.compact { transform: translateX(-50%) translateY(8px) scale(0.86); }
.tabbar.away { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; }
/* While typing, the keyboard needs the room: the tab bar steps aside and the ask bar sits low */
:root[data-typing] .tabbar { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; }
.tab-ind { position: absolute; left: 6px; top: 6px; width: var(--tab-w); height: 52px; border-radius: var(--r-pill); background: var(--accent); transition: transform 500ms var(--ease-spring); }
.tab { position: relative; width: var(--tab-w); height: 52px; border-radius: var(--r-pill); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--bar-off); font-size: var(--tab-fs, 11px); letter-spacing: -0.01em; font-weight: 600; white-space: nowrap; transition: color 300ms var(--ease-out); }
.tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tab[aria-current="page"] { color: var(--bar-on); }
/* Four tabs, the icon above the label: each as wide as fits (gaps and padding take 24px, the screen edges 32px), never wider than 88px */
:root { --tab-w: min(88px, calc((100vw - 56px) / 4)); }

/* Greeting on Home */
.hello { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hello b { font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search and chips */
.search { position: relative; }
.search-input { width: 100%; height: 44px; border: 0; border-radius: var(--r-pill); padding: 0 var(--s-4) 0 42px; color: var(--ink); }
.search-input::placeholder { color: var(--muted); }
.search-input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.search-icon { position: absolute; left: 14px; top: 13px; z-index: 1; color: var(--muted); pointer-events: none; }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--t-sub); font-weight: 600; white-space: nowrap; }
.chip[aria-selected="true"] { background: var(--solid); color: var(--on-solid); box-shadow: none; }
.chip .count { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--muted); font-weight: 500; }
.chip[aria-selected="true"] .count { color: color-mix(in srgb, var(--on-solid) 70%, var(--solid)); }
.chip .count:empty { display: none; }
/* Home's chips: one black pill sits under the picked chip and slides to the next one (200 ms) */
.chips.sliding { position: relative; }
.chip-ind { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: var(--r-pill); background: var(--solid); pointer-events: none; }
.chips.sliding.ready .chip-ind { transition: transform 200ms var(--ease-out), width 200ms var(--ease-out); }
.chips.sliding .chip { z-index: 1; transition: transform var(--d-press) var(--ease-out), color 200ms var(--ease-out); }
.chips.sliding .chip[aria-selected="true"] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.suggestions .chip { white-space: normal; text-align: left; min-height: var(--tap); padding: var(--s-2) 14px; font-size: 0.875rem; font-weight: 500; }

/* Message text. The serif means one thing only, words someone took back, so ordinary messages,
   saved replies, drafts and reminders stay in the interface font. */
.said { font-family: var(--font-ui); font-size: var(--t-said); line-height: 1.42; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--ink); }
:is(.is-deleted, .is-edited, .history) .said:not(.kind-only):not(.spoken), .said.diff { font-family: var(--font-said); }
.said.small { font-size: var(--t-sub); }
.said.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.said.kind-only { font-family: var(--font-ui); font-size: var(--t-sub); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.said.spoken { color: var(--ink-2); font-style: italic; }
.diff del { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--deleted); text-decoration-thickness: 1.5px; }
.diff ins { text-decoration: underline; text-decoration-color: var(--edited); text-decoration-thickness: 2px; text-underline-offset: 3px; background: var(--edited-soft); border-radius: 3px; }
/* A replaced word sits right next to its replacement ("Hi," → "Hi!"), so keep them apart. Only
   del → ins: the diff always writes the removed word first, and "ins + del" would also match across
   a real space (sibling selectors skip text) and double it. */
.diff del + ins { margin-left: 0.3em; }

.summary { color: var(--muted); padding: 0 var(--s-1); }

/* Your status (Pro and Max): a pill on Home; green when you're available, violet when a status is on */
.status-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); max-width: 100%; padding: 0 12px 0 14px; border-radius: var(--r-pill); background: var(--surface); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%); box-shadow: inset 0 0 0 1px var(--glass-edge); font-size: var(--t-sub); font-weight: 600; color: var(--ink); transition: transform var(--d-press) var(--ease-out); }
.status-pill:active { transform: scale(0.96); }
.status-pill .icon { color: var(--muted); }
/* Label, hairline, value: the same shape as the plan chip */
.status-pill .status-label { flex: none; color: var(--muted); font-size: var(--t-foot); font-weight: 500; white-space: nowrap; }
.status-pill .status-divider { flex: none; width: 1px; height: 16px; background: var(--line); }
.status-pill .status-value { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.status-pill .status-value > span:not(.status-dot):not(.status-until) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #1baf7a; box-shadow: 0 0 0 3px color-mix(in srgb, #1baf7a 22%, transparent); }
.status-pill.is-on .status-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Free: a quiet locked pill, grey, never the green "Available" */
.status-pill.is-locked { color: var(--muted); font-weight: 500; }
.status-emoji .status-dot { display: inline-block; }
.status-emoji .icon { color: var(--ink-2); }
.trial-ending { flex-direction: row; align-items: center; text-align: left; width: 100%; }
.trial-ending p { flex: 1; color: var(--ink); }
.trial-ending .icon:first-child { color: var(--accent); }
.status-until { color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; }
.status-option { display: flex; align-items: center; }
.status-option .row { flex: 1; min-width: 0; }
.status-option .icon-button { margin-right: var(--s-2); }
.status-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-screen .rename { margin-top: var(--s-2); }

/* Stat tiles on Home: tap one for Insights */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.stat { text-align: left; border-radius: var(--r-group); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat.solid { background: var(--solid); color: var(--on-solid); }
.stat-value { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--t-foot); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.solid .stat-label { color: color-mix(in srgb, var(--on-solid) 70%, var(--solid)); }
.stat.is-edited .stat-value { color: var(--edited-ink); }

/* Free: the archive waits, blurred, behind an honest count */
/* The rows and the card share one grid cell, so the section is exactly as tall as the taller of the
   two, and the blur is clipped to the rounded box instead of smudging past it */
.teaser { position: relative; display: grid; border-radius: var(--r-group); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.teaser > * { grid-area: 1 / 1; }
.teaser-rows { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4); filter: blur(3px); opacity: 0.9; }
/* Each placeholder is drawn like a message row: an avatar, a name and a line of text */
.teaser-rows i {
  display: block; height: 40px;
  background:
    radial-gradient(circle at 20px 20px, var(--fill-strong) 19px, transparent 20px),
    linear-gradient(var(--fill-strong), var(--fill-strong)) 54px 6px / 34% 10px no-repeat,
    linear-gradient(var(--fill-strong), var(--fill-strong)) 54px 25px / 62% 9px no-repeat;
}
.teaser-rows i:nth-child(2n) { background-size: auto, 26% 10px, 74% 9px; }
.teaser-rows i:nth-child(3n) { background-size: auto, 40% 10px, 50% 9px; }
.teaser-hold { display: flex; align-items: center; justify-content: center; padding: var(--s-3); }
.teaser-card { background: var(--surface-strong); border-radius: var(--r-group); padding: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.teaser-card h2 { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.teaser-card p { color: var(--muted); font-size: var(--t-sub); line-height: 1.4; }
.lock-badge { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }

/* Status marks: shape and colour together, never colour alone */
.status-mark { display: inline-flex; flex: none; }
.status-mark.is-deleted { color: var(--deleted-ink); }
.status-mark.is-edited { color: var(--edited-ink); }

/* Lists */
.group { border-radius: var(--r-group); overflow: hidden; }
.group > :focus-visible, .group.list > li > :focus-visible { outline-offset: -2px; }
.group > * + *, .group.list > li + li { box-shadow: 0 -1px 0 var(--line); }
.row { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 12px var(--s-4); text-align: left; }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row .line1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--t-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.row .sub { color: var(--muted); font-size: var(--t-foot); }
.row .label { flex: 1; min-width: 0; font-weight: 600; }
.row .value { color: var(--muted); font-size: var(--t-sub); }
.row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--fill); color: var(--ink-2); flex: none; }
.row-icon.accent { background: var(--accent-soft); color: var(--link); }
/* padding: 0 because the screen header's .large (padding) would otherwise push the icon off-centre */
.row-icon.large { width: 38px; height: 38px; padding: 0; border-radius: 12px; color: var(--ink); }
/* Automation hub: tapping a row opens its feature; the switch beside it is a control of its own */
.hub-row { padding: 0; gap: 0; }
.hub-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 62px; padding: 10px var(--s-3) 10px var(--s-4); text-align: left; transition: background-color var(--d-fast) var(--ease-out); }
.hub-open:active { background-color: var(--fill); }
.hub-row .label { display: flex; align-items: center; gap: var(--s-2); }
.hub-row .chevron { margin-left: auto; }
.switch-row.bare { flex: none; align-self: stretch; display: grid; place-items: center; min-width: var(--tap); padding: 0 var(--s-4) 0 var(--s-2); }
.chevron { color: var(--muted); opacity: 0.7; display: inline-flex; }
.msg .said { padding-left: var(--s-2); box-shadow: inset 2px 0 0 var(--deleted); font-size: var(--t-sub); }
.msg.is-edited .said { box-shadow: inset 2px 0 0 var(--edited); }
.kind-line { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--t-foot); }
.avatar { display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 700; letter-spacing: 0.01em; }
.counts { display: flex; gap: var(--s-3); font-size: var(--t-foot); color: var(--muted); font-variant-numeric: tabular-nums; }
.count-item { display: inline-flex; align-items: center; gap: 4px; }
.count-item.is-deleted .icon { color: var(--deleted-ink); }
.count-item.is-edited .icon { color: var(--edited-ink); }
.icon.quiet { color: var(--muted); }
.more { align-self: center; margin: var(--s-3) auto; min-height: var(--tap); padding: 0 var(--s-5); border-radius: var(--r-pill); background: var(--fill-strong); color: var(--ink); font-weight: 600; }
.badge { font-size: var(--t-mono); font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--link); flex: none; }

/* Switches, radios, segmented control */
.switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--fill-strong); transition: background-color 200ms var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); transition: transform 260ms var(--ease-spring), width 100ms var(--ease-out); }
.switch-row[aria-checked="true"] .switch { background: var(--accent); }
.switch-row[aria-checked="true"] .switch::after { transform: translateX(20px); }
.switch-row:active .switch::after { width: 32px; }
.switch-row[aria-checked="true"]:active .switch::after { transform: translateX(15px); }
.check { color: var(--link); visibility: hidden; display: inline-flex; }
[aria-checked="true"] > .check { visibility: visible; }
.segmented { position: relative; display: flex; padding: 4px; border-radius: var(--r-pill); background: var(--fill-strong); }
.segmented-knob { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: var(--r-pill); background: var(--knob); box-shadow: 0 4px 14px -6px var(--shadow); transition: transform 450ms var(--ease-spring), width 450ms var(--ease-spring); }
.segment { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: var(--r-pill); font-size: var(--t-foot); font-weight: 700; color: var(--ink-2); }
.segment[aria-selected="true"] { color: var(--ink); }
.segmented:not(.has-knob) .segment[aria-selected="true"] { background: var(--knob); box-shadow: 0 4px 14px -6px var(--shadow); }
.segment .count { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--muted); font-weight: 500; }

/* Buttons: black for the main action, violet for upgrades, quiet grey for the rest */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 50px; padding: 0 var(--s-5); border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-body); }
.button.small { min-height: 38px; padding: 0 14px; font-size: var(--t-sub); }
.button.primary { background: var(--solid); color: var(--on-solid); }
.button.accent { background: var(--accent); color: var(--accent-ink); }
.button.secondary { background: var(--fill-strong); color: var(--ink); }
.button.destructive { background: var(--danger); color: var(--on-danger); }
.button.destructive-text { color: var(--danger); background: var(--fill); }
.actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.actions .button { width: 100%; }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.action-tile { min-height: 66px; border-radius: 20px; background: var(--fill-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 6px; text-align: center; }
.action-tile.primary { background: var(--solid); color: var(--on-solid); }

/* Cards that explain a next step */
.lock-card, .connect, .notice { border-radius: var(--r-group); padding: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.lock-card h2, .connect h2 { font-size: var(--t-title); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.lock-card p, .connect p { color: var(--ink-2); }
.lock-card .button, .connect .button { margin-top: var(--s-2); }
.lock-mark, .connect-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-2) 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); align-items: baseline; color: var(--ink-2); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--solid); color: var(--on-solid); font-size: var(--t-foot); font-weight: 700; }
.notice { flex-direction: row; align-items: flex-start; gap: var(--s-3); }
.notice p { color: var(--ink); font-size: var(--t-sub); }
.notice-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.upsell { display: flex; align-items: center; gap: var(--s-3); background: var(--accent-soft); color: var(--link); border-radius: var(--r-group); padding: var(--s-4); font-weight: 600; text-align: left; }
.upsell span { flex: 1; }
.note { color: var(--muted); font-size: var(--t-foot); padding: var(--s-1) var(--s-4) 0; }
.section-title { color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; padding: var(--s-4) var(--s-4) 0; }
.error-text { color: var(--danger); font-size: var(--t-sub); }
.error-text:empty { display: none; }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-6); text-align: center; color: var(--muted); }
.empty-title { color: var(--ink); font-size: var(--t-title); font-weight: 700; }
.loading { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6) 0; color: var(--muted); font-size: var(--t-sub); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fill-strong); border-top-color: var(--accent); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeletons instead of spinners where the shape is known */
.skeleton { display: flex; flex-direction: column; gap: var(--s-3); }
.skeleton i { display: block; height: 64px; border-radius: var(--r-group); background: linear-gradient(90deg, var(--fill) 0%, var(--fill-strong) 50%, var(--fill) 100%); background-size: 200% 100%; animation: shimmer-bg 1.4s linear infinite; }
@keyframes shimmer-bg { to { background-position: -200% 0; } }
/* Home's first load: a few rows the shape of a person row */
.people-skeleton { gap: var(--s-2); }
.people-skeleton i { height: 68px; }

/* Home's people: the name and a short time on top, the counts below */
.person-row { min-height: 68px; }
.person-row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Settings → Chats not saved: the name opens the chat, the button beside it saves it again */
.unsaved-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); text-align: left; min-height: var(--tap); }
.unsaved-open .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Media */
.media-img, .media-video { border-radius: 18px; max-height: 360px; background: var(--fill); }
.media-round { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; background: #000; }
.media-sticker { width: 140px; height: 140px; object-fit: contain; }
.media-emoji { font-size: 72px; line-height: 1.1; }
/* Voice and audio: a round play button, a bar that fills as it plays, and the time */
.voice { display: flex; align-items: center; gap: var(--s-3); width: min(100%, 300px); min-height: var(--tap); }
.voice audio { display: none; }
.voice-play { display: grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; background: var(--solid); color: var(--on-solid); transition: transform var(--d-press) var(--ease-out); }
.voice-play:active { transform: scale(0.94); }
.voice-play .icon svg { fill: currentColor; }
.voice-time { flex: none; min-width: 3ch; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); font-variant-numeric: tabular-nums; }
.voice.is-playing .voice-time { color: var(--ink-2); }
/* The range input itself: a thin track filled up to --progress, with a small knob */
.voice-seek { flex: 1; min-width: 0; height: var(--tap); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --progress: 0%; }
.voice-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--progress), var(--fill-strong) var(--progress)); }
.voice-seek::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ink) var(--progress), var(--fill-strong) var(--progress)); }
.voice-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink); }
.voice-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ink); }
.voice-seek:focus-visible { outline: none; }
.voice-seek:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); }
.voice-seek:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); }
@media (forced-colors: active) { .voice-seek::-webkit-slider-runnable-track { background: CanvasText; } }
.chip-file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: 16px; background: var(--fill); text-align: left; min-width: 0; }
.chip-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--link); flex: none; }
.chip-meta { display: flex; flex-direction: column; min-width: 0; }
.chip-meta b { font-weight: 600; font-size: var(--t-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-meta span { color: var(--muted); font-size: var(--t-foot); }

/* The sheet: springs, see motion.js */
.scrim { position: fixed; inset: 0; z-index: 20; background: var(--scrim); opacity: 0; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-width: 680px; margin: 0 auto;
  /* In full screen the close button stays clear of Telegram's floating buttons */
  max-height: min(92dvh, calc(100dvh - var(--safe-top) - 12px));
  display: flex; flex-direction: column;
  background: var(--surface-strong);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 -20px 50px -20px var(--shadow);
  transform: translateY(100%); will-change: transform; touch-action: pan-x;
}
:root[data-lite] .sheet, :root[data-scheme] .sheet { background: var(--surface-strong); }
.grip { width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--fill-strong); padding: 10px 60px; background-clip: content-box; box-sizing: content-box; cursor: grab; }
.sheet-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--fill-strong); color: var(--muted); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) var(--gutter) calc(var(--s-6) + var(--safe-bottom)); touch-action: pan-y; }
.sheet-body > #sheet-title { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.02em; padding-right: 44px; margin-bottom: var(--s-1); }
.sheet-sub { color: var(--muted); font-size: var(--t-sub); margin-bottom: var(--s-3); }
.sheet-lead { color: var(--ink-2); margin-bottom: var(--s-3); }
.sheet-section { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--muted); font-weight: 500; margin: var(--s-5) 0 var(--s-2); }
.sheet-body .group { margin-top: var(--s-2); }
.recovered { position: relative; border-radius: var(--r-group); padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 6px); display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.recovered::before { content: ""; position: absolute; left: 0; top: var(--s-4); bottom: var(--s-4); width: 3px; border-radius: 0 3px 3px 0; background: var(--deleted); }
.recovered.is-edited::before { background: var(--edited); }
/* A normal message opened from a chat: no event line, interface type, not the recovered serif */
.recovered.is-plain::before { display: none; }
.recovered.is-plain { padding-left: var(--s-4); }
.recovered.is-plain .said { font-family: var(--font-ui, inherit); font-size: var(--t-body, 1rem); }
.recovered .said { font-size: 1.3125rem; line-height: 1.32; }
.transcript h3 { color: var(--muted); font-size: var(--t-foot); font-weight: 600; margin-bottom: var(--s-1); }
.history { display: flex; flex-direction: column; gap: var(--s-2); }
.history li { border-radius: var(--r-group); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 4px; }
.history .time { color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); }
.facts { margin-top: var(--s-4); border-radius: var(--r-group); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.facts div { display: flex; flex-direction: column; gap: 2px; padding: 12px var(--s-4); font-size: var(--t-sub); }
.facts div + div { box-shadow: -1px 0 0 var(--line); }
.facts div:nth-child(3) { box-shadow: 0 -1px 0 var(--line); }
.facts dt { color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); }
.facts dd { color: var(--ink); font-weight: 700; }

/* Plans: a full-screen page, Max first with a moving glow border */
.plans-page .large h1 { font-size: 2rem; }
.plan-list { display: flex; flex-direction: column; gap: var(--s-3); }
.plan-free .body span { color: var(--muted); font-size: var(--t-foot); }
.segment[aria-checked="true"] { color: var(--ink); }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Animating a gradient angle repaints every frame, so it turns twice and then rests (never on weak phones) */
.glow-border { padding: 1.5px; border-radius: calc(var(--r-hero) + 1.5px); background: conic-gradient(from var(--spin), var(--accent), #d9ccff, var(--line), var(--accent)); animation: spin-border 5s linear 2; }
@keyframes spin-border { to { --spin: 360deg; } }
:root[data-lite] .glow-border { animation: none; }
.plan-tile { border-radius: var(--r-hero); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.glow-border > .plan-tile { background: var(--bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.plan-tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.plan-tile-head h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan-price .amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price .unit { color: var(--muted); font-size: var(--t-sub); }
.plan-price-note { margin-top: -6px; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); }
.plan-tag { padding: 5px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--t-foot); font-weight: 700; }
.plan-pitch { color: var(--ink); font-weight: 500; }
.plan-points { display: flex; flex-direction: column; gap: var(--s-2); }
.plan-points li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); align-items: start; color: var(--ink-2); font-size: var(--t-sub); }
.plan-points .icon { color: var(--link); margin-top: 2px; }
.plan-current { color: var(--muted); font-weight: 700; text-align: center; padding: var(--s-2); }
/* The current plan's tag is grey, so violet stays for the upgrade */
.plan-tag.is-yours { background: var(--fill-strong); color: var(--ink); }
.plan-requested { color: var(--ink-2); }
.invite-reward h2 { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.error-screen .lock-card, .error-screen .empty { margin-top: var(--s-2); }
.plan-free { flex-direction: row; align-items: center; }
.plan-free .body { flex: 1; display: flex; flex-direction: column; }
.plan-fine { text-align: center; color: var(--muted); font-size: var(--t-foot); line-height: 1.5; padding: 0 var(--s-4); }
.period-save { font-size: var(--t-mono); padding: 3px 7px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.plan-row { min-height: 64px; }
.plan-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--fill); color: var(--muted); flex: none; }
.plan-badge.tier-pro, .plan-badge.tier-max, .plan-badge.tier-trial { background: var(--accent); color: var(--accent-ink); }
.plan-panel { border-radius: var(--r-group); padding: var(--s-5); margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-4); }

/* Profile */
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--s-2) 0 var(--s-2); text-align: center; }
.profile-ring { width: 88px; height: 88px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--accent), #d9ccff, var(--accent)); }
.profile-ring span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--solid); color: var(--on-solid); font-size: 30px; font-weight: 800; }
.profile-head h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.profile-plan { display: block; width: 100%; text-align: left; }
.profile-plan-inner { display: flex; align-items: center; gap: var(--s-3); padding: 14px var(--s-4); border-radius: var(--r-hero); background: var(--bg); box-shadow: none; }
.profile-plan .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-plan .body b { font-weight: 800; font-size: var(--t-body); }
.profile-plan .body span { color: var(--muted); font-size: var(--t-foot); }
.profile-plan .go { color: var(--link); font-weight: 700; font-size: var(--t-sub); }
.version { text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); padding: var(--s-3) 0; }

/* Invite friends */
.invite-card { border-radius: var(--r-group); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.invite-count { display: flex; align-items: baseline; gap: var(--s-2); }
.invite-count b { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.invite-count span { color: var(--muted); }
.progress { position: relative; height: 10px; border-radius: 5px; background: var(--fill-strong); }
.progress > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); transform-origin: left; animation: grow-x 1.1s var(--ease-out) 0.3s both; }
@keyframes grow-x { from { transform: scaleX(0); } }
.milestones { display: flex; flex-direction: column; gap: var(--s-3); }
.milestone { display: flex; align-items: center; gap: var(--s-3); }
.milestone-mark { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--fill-strong); font-weight: 800; font-size: var(--t-foot); flex: none; }
.milestone.reached .milestone-mark, .milestone.next .milestone-mark { background: var(--accent-soft); color: var(--link); }
.milestone .body { display: flex; flex-direction: column; }
.milestone .body b { font-size: var(--t-sub); }
.milestone .body span { color: var(--muted); font-size: var(--t-foot); }
.link-box { display: flex; align-items: center; gap: var(--s-2); padding: 6px 6px 6px var(--s-4); border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.link-box span { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--t-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* First open, on one page: language, the terms tick, Start, over a scene that plays like a short film
   (messages drift up, one is taken back, ongly keeps it). The scene is always dark, whatever the
   theme, so its colours are its own and are set once here. Weak phones and reduced motion get it still. */
.onboard { --ob-bg: #0b0c10; --ob-ink: #f1f3f5; --ob-muted: #a3a9b1; --ob-line: rgba(255, 255, 255, 0.12); --ob-fill: rgba(255, 255, 255, 0.08); --on-solid: #111316;
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; padding: calc(var(--safe-top) + var(--s-6)) var(--s-5) calc(var(--safe-bottom) + var(--s-6)); background: var(--ob-bg); color: var(--ob-ink); overflow: hidden; outline: none; }
.ob-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 16px 16px; }
.ob-glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(123, 77, 255, 0.55), rgba(123, 77, 255, 0)); will-change: transform; }
.ob-glow.a { width: 120vw; height: 120vw; left: -45vw; top: -30vw; animation: ob-drift-a 19s ease-in-out infinite alternate; }
.ob-glow.b { width: 100vw; height: 100vw; right: -50vw; top: 18%; background: radial-gradient(closest-side, rgba(123, 77, 255, 0.34), rgba(123, 77, 255, 0)); animation: ob-drift-b 23s ease-in-out infinite alternate; }
.ob-glow.c { width: 70vw; height: 70vw; left: 15vw; top: 10%; animation: ob-breathe 7s ease-in-out infinite; }
@keyframes ob-drift-a { to { transform: translate3d(22vw, 16vw, 0) scale(1.15); } }
@keyframes ob-drift-b { to { transform: translate3d(-26vw, -20vw, 0) scale(0.9); } }
@keyframes ob-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.4; } 50% { transform: scale(1.12); opacity: 0.8; } }
.ob-rain { position: absolute; inset: 0; }
.ob-bubble { --x: 8%; --w: 132px; --t: 17s; --d: 0s; --r: -3deg; --o: 0.55;
  position: absolute; left: var(--x); bottom: -96px; width: var(--w); display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border-radius: 18px 18px 18px 6px; border: 1px solid rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.07); opacity: 0; animation: ob-float var(--t) linear var(--d) infinite; will-change: transform, opacity; }
.ob-bubble.out { border-radius: 18px 18px 6px 18px; border-color: rgba(155, 123, 255, 0.3); background-color: rgba(123, 77, 255, 0.16); }
.ob-bubble i { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.26); }
.ob-bubble i + i { width: 58%; }
.ob-bubble b { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet-500); color: #fff; transform: scale(0); animation: ob-kept var(--t) linear var(--d) infinite; }
.ob-bubble.taken { animation: ob-float var(--t) linear var(--d) infinite, ob-taken var(--t) linear var(--d) infinite; }
.ob-bubble.taken i { animation: ob-words var(--t) linear var(--d) infinite; }
.ob-bubble:nth-child(1) { --x: 6%; --w: 128px; --t: 18s; --d: -2s; --r: -4deg; --o: 0.5; }
.ob-bubble:nth-child(2) { --x: 56%; --w: 150px; --t: 15s; --d: -9s; --r: 3deg; --o: 0.85; }
.ob-bubble:nth-child(3) { --x: 30%; --w: 96px; --t: 24s; --d: -14s; --r: 2deg; --o: 0.3; }
.ob-bubble:nth-child(4) { --x: 70%; --w: 104px; --t: 21s; --d: -5s; --r: -2deg; --o: 0.4; }
.ob-bubble:nth-child(5) { --x: 12%; --w: 156px; --t: 16s; --d: -12s; --r: 4deg; --o: 0.85; }
.ob-bubble:nth-child(6) { --x: 44%; --w: 120px; --t: 26s; --d: -20s; --r: -3deg; --o: 0.28; }
.ob-bubble:nth-child(7) { --x: 74%; --w: 88px; --t: 19s; --d: -16s; --r: 5deg; --o: 0.45; }
.ob-bubble:nth-child(8) { --x: 34%; --w: 144px; --t: 17s; --d: -1s; --r: -2deg; --o: 0.85; }
.ob-bubble:nth-child(9) { --x: 2%; --w: 100px; --t: 23s; --d: -8s; --r: 3deg; --o: 0.35; }
@keyframes ob-float { 0% { transform: translate3d(0, 0, 0) rotate(var(--r)); opacity: 0; } 8%, 78% { opacity: var(--o); } 100% { transform: translate3d(0, -118vh, 0) rotate(calc(var(--r) * -1)); opacity: 0; } }
/* A message taken back (red edge, the words gone), then kept (violet, the words back, a tick) */
@keyframes ob-taken { 0%, 34% { border-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.07); } 40%, 47% { border-color: rgba(255, 107, 118, 0.7); background-color: rgba(255, 107, 118, 0.06); } 54%, 100% { border-color: rgba(179, 157, 255, 0.85); background-color: rgba(123, 77, 255, 0.24); } }
@keyframes ob-words { 0%, 34% { opacity: 1; } 40%, 47% { opacity: 0.1; } 54%, 100% { opacity: 1; } }
@keyframes ob-kept { 0%, 50% { transform: scale(0); } 55% { transform: scale(1.25); } 59%, 100% { transform: scale(1); } }
.ob-fade { position: absolute; inset: auto 0 0; height: 64%; background: linear-gradient(to top, var(--ob-bg) 44%, rgba(11, 12, 16, 0.82) 66%, rgba(11, 12, 16, 0)); }
.ob-close { position: absolute; z-index: 2; top: calc(var(--safe-top) + var(--s-2)); right: var(--s-3); display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--ob-ink); }
.ob-close:focus-visible { outline-color: var(--ob-ink); }
.ob-brand { position: relative; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.ob-mark { margin-bottom: var(--s-2); color: var(--ob-ink); filter: drop-shadow(0 18px 40px rgba(123, 77, 255, 0.55)); }
/* The agent mascot (js/agent.js): a two-layer picture whose hand waves and whose eye winks. 1em is 1% of its
   width, and the art is drawn 4% larger than the tile, so the picture's own dark corners stay outside it. */
.agent { --agent: 128px; position: relative; display: block; width: var(--agent); height: var(--agent); font-size: calc(var(--agent) / 100); border-radius: 22%; overflow: hidden; background: #0a0724; isolation: isolate; opacity: 0; }
.agent.ready { opacity: 1; }
.agent-art { position: absolute; left: -2em; top: -2em; width: 104em; height: 104em; }
.agent-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.agent-hand { transform-origin: 28.2% 81.9%; }
.agent-patch, .agent-eye, .agent-lid { position: absolute; display: block; border-radius: 50%; opacity: 0; }
/* Hides the picture's closed eye while the drawn one is open */
.agent-patch { left: 42.3%; top: 54.2%; width: 22%; height: 18%; margin: -9% 0 0 -11%; background: radial-gradient(closest-side, #000115 0 70%, transparent); }
.agent-eye { left: 41.9%; top: 55%; width: 9.8%; height: 13.4%; margin: -6.7% 0 0 -4.9%; background: radial-gradient(circle at 50% 40%, #fff 0 45%, #dfe4ff); box-shadow: 0 0 0.8em 0.2em rgba(255, 255, 255, 0.9), 0 0 2.4em 0.8em rgba(84, 116, 255, 0.8), 0 0 5em 1.6em rgba(48, 72, 255, 0.35); transform: rotate(9deg); }
/* A blink of the other eye: the visor's own dark, over it for a moment */
.agent-lid { left: 68.1%; top: 60.9%; width: 19%; height: 22%; margin: -11% 0 0 -9.5%; background: radial-gradient(closest-side, #00011c 0 50%, rgba(0, 1, 28, 0.85) 68%, transparent); }
.agent.ready { animation: agent-float 5s ease-in-out 3s infinite; }
.agent.ready:not(.settled) { animation: agent-pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both, agent-float 5s ease-in-out 3s infinite; }
.agent.ready .agent-hand { animation: agent-wave-again 8s ease-in-out 6s infinite; }
.agent.ready:not(.settled) .agent-hand { animation: agent-wave 1.9s cubic-bezier(0.45, 0, 0.3, 1) 0.45s both, agent-wave-again 8s ease-in-out 6s infinite; }
.agent.ready:not(.settled) .agent-patch { animation: agent-patch 2.6s linear both; }
.agent.ready:not(.settled) .agent-eye { animation: agent-wink 2.6s linear both; }
.agent.ready .agent-lid { animation: agent-blink 5.2s linear 3.4s infinite; }
@keyframes agent-pop { from { opacity: 0; transform: scale(0.6) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes agent-float { 0%, 100% { transform: none; } 50% { transform: translateY(-3em); } }
@keyframes agent-wave { 0%, 100% { transform: none; } 12% { transform: rotate(-17deg); } 28% { transform: rotate(6deg); } 44% { transform: rotate(-15deg); } 60% { transform: rotate(5deg); } 76% { transform: rotate(-11deg); } }
@keyframes agent-wave-again { 0%, 78%, 100% { transform: none; } 83% { transform: rotate(-14deg); } 88% { transform: rotate(5deg); } 93% { transform: rotate(-10deg); } }
@keyframes agent-patch { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes agent-wink { 0%, 86% { opacity: 1; transform: rotate(9deg); } 93% { opacity: 1; transform: rotate(9deg) scaleY(0.12); } 100% { opacity: 0; transform: rotate(9deg) scaleY(0.12); } }
@keyframes agent-blink { 0%, 94%, 100% { opacity: 0; } 95.5%, 97.5% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .agent, .agent * { animation: none !important; } }
.ob-name { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.ob-tagline { font-size: 1.25rem; font-weight: 600; }
.ob-sub { max-width: 19rem; color: var(--ob-muted); font-size: var(--t-sub); }
.ob-panel { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.ob-ask { text-align: center; color: var(--ob-muted); font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.ob-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ob-lang { min-height: 52px; padding: 0 var(--s-2); text-align: center; border-radius: var(--r-control); border: 1px solid var(--ob-line); background: var(--ob-fill); color: var(--ob-ink); font-size: var(--t-sub); font-weight: 600; transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-press) var(--ease-out); }
.ob-lang[aria-pressed="true"] { border-color: var(--ob-ink); background: var(--ob-ink); color: #111316; }
.ob-lang:active, .ob-start:active { transform: scale(0.97); }
.ob-terms { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-1); color: var(--ob-muted); font-size: var(--t-foot); line-height: 1.4; cursor: pointer; }
.ob-check { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ob-box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; border: 2px solid rgba(255, 255, 255, 0.45); color: #fff; transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out); }
.ob-box svg { opacity: 0; transform: scale(0.5); transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-spring); }
.ob-check:checked + .ob-box { border-color: var(--violet-500); background: var(--violet-500); }
.ob-check:checked + .ob-box svg { opacity: 1; transform: none; }
.ob-check:focus-visible + .ob-box { outline: 2px solid var(--violet-300-dark); outline-offset: 3px; }
.ob-link { display: inline; padding: 0; border: 0; background: none; color: var(--ob-ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ob-terms.nudge { animation: ob-nudge 360ms var(--ease-out); }
@keyframes ob-nudge { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }
/* Start waits, dim, until the box is ticked; then it lights up */
.ob-start { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 58px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.55); font-size: 1.0625rem; font-weight: 700; transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), box-shadow 320ms var(--ease-out), transform var(--d-press) var(--ease-out); }
.ob-start.ready { background: var(--ob-ink); color: #111316; box-shadow: 0 14px 44px -12px rgba(123, 77, 255, 0.9); }
.ob-start.busy { pointer-events: none; }
.ob-start.busy span { opacity: 0.5; }
:root[data-onboard] #toast { top: calc(var(--safe-top) + var(--s-4)); bottom: auto; z-index: 50; background: #f1f3f5; color: #111316; }
:root[data-lite] .ob-rain { display: none; }
:root[data-lite] .ob-glow { animation: none; }
@media (prefers-reduced-motion: reduce) { .ob-rain { display: none; } }
.logo-mark { width: 92px; height: 92px; }
.logo-mark .echo { animation: logo-echo 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes logo-echo { 0%, 100% { transform: translate(0, 0); opacity: 0; } 50% { transform: translate(8px, -7px); opacity: 0.5; } }

/* An ad card on Free: one at most, quiet */
.ad-card { border-radius: var(--r-group); padding: var(--s-4); display: flex; align-items: center; gap: var(--s-3); text-align: left; width: 100%; }
.ad-card .body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ad-card .body b { font-weight: 700; }
.ad-tag { align-self: flex-start; font-size: var(--t-mono); font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 6px; }
.ad-card .body span { color: var(--muted); font-size: var(--t-foot); }

/* Emoji pictures: every emoji is one square cell, so a pixel-art frame keeps its grid whatever the phone's own emoji look like */
.emo { display: block; flex: none; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.emo-text { display: grid; place-items: center; overflow: hidden; text-align: center; }
.emo-line { display: flex; align-items: center; justify-content: center; white-space: pre; }
.emo-run { flex: none; white-space: pre; }
.anim-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Message animations: a grid of covers like a sticker picker, a preview that plays in a chat bubble, and the demo */
.anim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.anim-tile, .anim-upsell {
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); backdrop-filter: blur(var(--blur)) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 16px 36px -26px var(--shadow);
}
:root[data-lite] :is(.anim-tile, .anim-upsell) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.anim-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; min-width: 0; padding: 8px 4px; border-radius: 22px; text-align: center; transition: transform var(--d-fast) var(--ease-out); }
.anim-tile:active { transform: scale(0.96); }
.anim-cover { display: grid; place-items: center; height: 56px; margin-bottom: 4px; }
.anim-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-foot); font-weight: 700; line-height: 1.25; }
.anim-cmd { color: var(--muted); }
.anim-wall { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; min-height: 180px; margin-top: var(--s-2); padding: 16px 12px; border-radius: var(--r-group); background: var(--tg-wall); color: var(--tg-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.anim-wall .tg-msg { max-width: 92%; }
.anim-frame-box { display: flex; justify-content: center; }
.anim-upsell { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-group); }
.anim-upsell-line { padding: 0 var(--s-1); font-size: var(--t-title); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.anim-upsell .button { width: 100%; }

/* The demo: a Telegram chat that plays itself. Tap to pause. */
.demo-chat { position: relative; flex: none; height: 430px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.demo-hold { flex: none; height: 430px; border-radius: 26px; background: var(--fill); }
.demo-chat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-chat .tg-wall { overflow: hidden; transition: opacity 280ms var(--ease-out); }
.demo-chat .tg-wall.leaving { opacity: 0; }
.demo-chat .tg-msg { flex: none; }
.demo-chat .tg-msg.pop { animation: demo-pop 240ms var(--ease-out) both; }
.demo-chat .tg-input { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--tg-ink); }
.demo-chat .tg-input.placeholder { color: var(--tg-faint); }
.demo-chat .tg-caret { flex: none; height: 18px; }
.demo-chat.running .tg-caret { animation: demo-caret 1s steps(1) infinite; }
.demo-send { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--tg-blue); color: #fff; }
.demo-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17, 19, 22, 0.28); pointer-events: none; }
.demo-overlay[hidden] { display: none; }
.demo-play { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); background: var(--solid); color: var(--on-solid); font-weight: 700; }
@keyframes demo-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes demo-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-chat .tg-msg.pop { animation: none; } .demo-chat .tg-wall { transition: none; } }
/* "Try in any chat:" and three commands as small mono chips */
.try-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 var(--s-1); color: var(--muted); font-size: var(--t-foot); }
.try-line .command { padding: 5px 10px; border-radius: 10px; background: var(--fill); color: var(--ink); }
.said.draft { background: var(--surface-solid); border-radius: var(--r-group); padding: var(--s-4); margin-bottom: var(--s-2); }
.remind .suggestions { justify-content: center; }
.row.static { cursor: default; }
.value.status { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #1baf7a; }
.dot.off { background: var(--danger); }
.danger-group { margin-top: var(--s-6); }
.destructive-row { justify-content: center; color: var(--danger); font-weight: 700; }

/* A chat */
.chat-screen .large { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); padding-top: 0; }
.chat-screen .large h1 { font-size: var(--t-title); margin-top: var(--s-2); }
.toolbar { display: flex; gap: var(--s-2); }
.tool { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s-2) var(--s-1); border-radius: 18px; color: var(--link); min-height: 62px; }
/* Long labels ("Быстрый ответ", "Xabarnomasiz") wrap onto a second centred line; the tiles stay equal height */
.tool-label { font-size: 0.75rem; line-height: 1.25; color: var(--ink-2); font-weight: 600; text-align: center; overflow-wrap: anywhere; hyphens: auto; }
.tool[aria-pressed="true"] { background: var(--accent-soft); }
.thread { display: flex; flex-direction: column; gap: 8px; padding-top: var(--s-2); }
.day-pill { align-self: center; margin: var(--s-3) 0 var(--s-1); padding: 4px 10px; border-radius: var(--r-pill); background: var(--fill-strong); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--t-mono); }
.bubble { position: relative; align-self: flex-start; max-width: 86%; display: flex; flex-direction: column; gap: 6px; padding: 9px 14px 7px 16px; border-radius: 20px 20px 20px 6px; cursor: pointer; }
.bubble.is-deleted::before, .bubble.is-edited::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--deleted); }
.bubble.is-edited::before { background: var(--edited); }
.bubble.out { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--accent-soft); }
.bubble .said { font-size: var(--t-said); }
.bubble .foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); font-size: 0.75rem; }
.bubble .foot .time { min-height: 28px; padding: 0 4px; margin: -6px -6px -4px 0; font-family: var(--font-mono); font-size: var(--t-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.flash { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Insights */
.viz-card { position: relative; border-radius: var(--r-group); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.viz-card h2 { font-size: 1.0625rem; font-weight: 700; }
.viz-sub { color: var(--muted); font-size: var(--t-foot); margin-top: -8px; }
.legend { display: flex; gap: var(--s-4); color: var(--ink-2); font-size: var(--t-foot); }
.legend span, .legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend.list { flex-direction: column; gap: var(--s-2); }
.legend.list li { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--s-2); }
.legend-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch.is-deleted { background: var(--deleted); }
.swatch.is-edited { background: var(--edited); }
.columns { display: flex; align-items: flex-end; gap: 2px; height: 140px; box-shadow: 0 1px 0 var(--line); }
.column { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; border-radius: 4px; }
.stack { display: flex; flex-direction: column; gap: 2px; width: min(16px, 70%); transform-origin: bottom; transition: transform 520ms var(--ease-spring); }
.stack .seg { min-height: 2px; }
.stack .seg:first-child { border-radius: 4px 4px 0 0; }
.seg.is-deleted { background: var(--deleted); }
.seg.is-edited { background: var(--edited); }
.columns.grow .stack { transform: scaleY(0.02); transition: none; }
.cap { font-size: 0.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.axis { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); }
.axis.four span { flex: 1; }
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.hour { height: 36px; border-radius: 4px; background: var(--fill); }
.hour.step-1 { background: color-mix(in srgb, var(--deleted) 22%, var(--surface-solid)); }
.hour.step-2 { background: color-mix(in srgb, var(--deleted) 40%, var(--surface-solid)); }
.hour.step-3 { background: color-mix(in srgb, var(--deleted) 58%, var(--surface-solid)); }
.hour.step-4 { background: color-mix(in srgb, var(--deleted) 78%, var(--surface-solid)); }
.hour.step-5 { background: var(--deleted); }
.segments { display: flex; gap: 2px; height: 28px; }
.segment-block { min-width: 4px; border-radius: 4px; }
.viz-tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 12px; background: var(--solid); color: var(--on-solid); display: flex; flex-direction: column; align-items: center; pointer-events: none; white-space: nowrap; font-size: var(--t-foot); }
.viz-tip b { font-weight: 700; }
/* Stats v2: tiles, ranked people, donuts, the Your Telegram cards */
.viz-card { --viz-them: color-mix(in srgb, var(--ink) 38%, var(--surface-solid)); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.tiles .stat { padding: 14px 16px; gap: 4px; }
.tiles .stat:active { transform: none; }
.tile-label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.tile-label .status-mark { align-items: center; }
.stat.solid .status-mark.is-deleted { color: color-mix(in srgb, var(--deleted) 70%, var(--on-solid)); }
.viz-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.viz-section { margin: var(--s-4) 0 0 6px; font-family: var(--font-mono); font-size: var(--t-mono); font-weight: 500; color: var(--muted); }
.swatch.is-you { background: var(--solid); }
.swatch.is-them { background: var(--viz-them); }
.donut-row { display: flex; align-items: center; gap: var(--s-5); }
.donut { position: relative; flex: none; width: 124px; height: 124px; }
.donut-svg { display: block; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: var(--t-mono); }
.donut-center b { color: var(--ink); font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.donut-row .legend.list { flex: 1; min-width: 0; font-size: var(--t-sub); }
.ranked { display: flex; flex-direction: column; gap: var(--s-3); }
.rank-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.rank-n { flex: none; width: 14px; color: var(--muted); font-family: var(--font-mono); font-size: var(--t-mono); }
.rank-row .avatar { flex: none; }
.rank-main { display: flex; flex-direction: column; flex: 1; gap: 5px; min-width: 0; }
.rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-size: var(--t-sub); font-weight: 600; }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sub); font-weight: 600; }
.rank-value { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-2); font-size: var(--t-foot); }
.rank-value.mono { font-family: var(--font-mono); font-size: var(--t-foot); color: var(--ink); }
.rank-bar { display: flex; gap: 2px; height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.rank-bar i { display: block; height: 100%; border-radius: var(--r-pill); }
.rank-bar .is-deleted { background: var(--deleted); }
.rank-bar .is-you { background: var(--solid); }
.rank-bar .is-them { background: var(--viz-them); }
.viz-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.viz-pair > :only-child { grid-column: 1 / -1; }
.viz-card.mini { gap: var(--s-2); min-width: 0; }
.viz-card.mini h2 { font-size: var(--t-sub); }
.viz-card.mini.quiet { gap: 4px; }
.viz-card.mini.quiet h2 { color: var(--muted); font-size: var(--t-foot); font-weight: 500; }
.mini-value { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mini-value.big { font-size: 2rem; }
.viz-note { color: var(--muted); font-size: var(--t-foot); }
.donut-small { display: flex; align-items: center; gap: var(--s-3); }
.donut-small .donut-svg { flex: none; }
.legend.stacked { flex-direction: column; gap: 4px; }
.abars { display: flex; align-items: flex-end; gap: 3px; height: 70px; box-shadow: 0 1px 0 var(--line); }
.abar-cell { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 3px; }
.abar { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--solid); transform-origin: bottom; transition: transform 520ms var(--ease-spring); }
.abar.is-peak { background: var(--accent); }
.abars.grow .abar { transform: scaleY(0.02); transition: none; }
.ai-card { flex-direction: row; align-items: center; gap: 14px; }
.donut-ring { position: relative; flex: none; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.donut-ring .donut-svg { position: absolute; inset: 0; }
.donut-ring b { position: relative; font-size: var(--t-foot); font-variant-numeric: tabular-nums; }
.ring-track { stroke: var(--fill-strong); }
.ring-fill { stroke: var(--accent); }
.ai-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Assistant */
.answers { display: flex; flex-direction: column; gap: var(--s-3); }
.answer { border-radius: var(--r-group); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.answer .question { color: var(--muted); font-size: var(--t-foot); font-weight: 600; }
.answer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.answer-foot .mono { color: var(--muted); }
.answer-foot .button { min-height: var(--tap); }
/* The promise under the answers: one lock, one sentence */
.privacy-line { display: flex; align-items: center; gap: 6px; margin: 0 var(--s-1); color: var(--muted); font-size: var(--t-foot); }
.privacy-line .icon { flex: none; display: inline-flex; }
/* "This month": the label, a slim meter, the percent */
.usage-row { height: 56px; }
.usage-row .label { flex: none; }
.meter { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--fill-strong); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.answer .group { box-shadow: inset 0 0 0 1px var(--line); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.prose { display: flex; flex-direction: column; gap: var(--s-2); line-height: 1.55; }
.prose h3 { color: var(--muted); font-size: var(--t-foot); font-weight: 700; margin-top: var(--s-1); }
.prose ul { display: flex; flex-direction: column; gap: 6px; }
.prose li { position: relative; padding-left: var(--s-4); }
.prose li::before { content: ""; position: absolute; left: 4px; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.thinking { background: linear-gradient(90deg, var(--muted) 0%, var(--ink) 50%, var(--muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-bg 1.8s linear infinite; font-weight: 700; font-size: var(--t-foot); }
/* The ask box sits first on the tab; it grows with a longer question */
.ask-bar { display: flex; align-items: center; gap: var(--s-2); min-height: 56px; padding: 6px 6px 6px var(--s-4); border-radius: 20px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 24px -16px var(--shadow); }
.ask-bar .field { flex: 1; border-radius: 18px; min-height: 40px; max-height: 140px; resize: none; field-sizing: content; padding: 8px 4px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ask-bar .icon-button.filled { align-self: flex-end; width: var(--tap); height: var(--tap); }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--s-2); }
.form label { color: var(--muted); font-size: var(--t-foot); padding: 0 var(--s-1); }
.form-actions { display: flex; justify-content: flex-end; }
.field { width: 100%; border: 0; border-radius: var(--r-control); padding: 12px var(--s-4); line-height: 1.45; color: var(--ink); }
textarea.field { resize: none; field-sizing: content; min-height: 84px; max-height: 260px; }
.field::placeholder { color: var(--muted); }
.field:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.hours-fields { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: var(--s-2); }
.hours-fields label { padding: 0; }
.row.item { align-items: flex-start; }
/* An auto-reply editor redraws inside this; it adds no box of its own, so the screen's spacing holds */
.auto-area { display: contents; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-bottom) + var(--s-3)); z-index: 30; max-width: calc(100% - var(--s-8)); padding: 11px var(--s-4); border-radius: var(--r-pill); background: var(--solid); color: var(--on-solid); font-size: var(--t-sub); font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 10px) scale(0.96); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); box-shadow: 0 12px 30px -12px var(--shadow); }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity 240ms var(--ease-out), transform 420ms var(--ease-spring); }

/* Entrances: a screen's blocks rise into place one after another; pushed screens slide in */
.rise { animation: rise var(--d-rise) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pop { animation: pop 450ms var(--ease-spring) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Press feedback, on press, on every control */
.button, .icon-button, .chip, .tool, .tab, .more, .upsell, .sheet-close, .me-pill, .plan-chip, .stat, .action-tile, .lang-option, .profile-plan, .ad-card, .bubble, .row:not(.static) {
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease-out), color 300ms var(--ease-out);
}
.button:active:not(:disabled), .icon-button:active, .chip:active, .tool:active, .more:active, .upsell:active, .sheet-close:active,
.me-pill:active, .plan-chip:active, .stat:active, .action-tile:active, .lang-option:active, .profile-plan:active, .ad-card:active, .person-row:active { transform: scale(0.97); }
.bubble:active { transform: scale(0.985); }

/* Small controls keep their look but get a 44px touch area from an invisible layer around them */
.icon-button.quiet, .chip, .plan-chip, .status-pill, .bubble .foot .time { position: relative; }
.sheet-close::before, .icon-button.quiet::before, .chip::before, .segment::before, .plan-chip::before, .status-pill::before, .bubble .foot .time::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, var(--tap)); height: max(100%, var(--tap));
  transform: translate(-50%, -50%);
}
.row:active:not(.static):not(:disabled), .column:active { background-color: var(--fill); }

@media (hover: hover) and (pointer: fine) {
  .row:not(.static):hover, .column:hover, .hub-open:hover { background-color: var(--fill); }
  .button.primary:hover { background: color-mix(in srgb, var(--solid) 86%, var(--accent)); }
  .button.accent:hover { background: var(--accent-strong); }
  .button.secondary:hover, .chip:hover:not([aria-selected="true"]), .tool:hover { background-color: var(--fill-strong); }
  .icon-button:hover { background: var(--fill); }
  .tab:hover:not([aria-current="page"]) { color: var(--bar-on); }
  .hour:hover, .segment-block:hover { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .glow i, .glow-border, .logo-mark .echo, .skeleton i, .thinking { animation: none !important; }
  .flash { animation: none; outline: 3px solid var(--accent); }
}

@media (forced-colors: active) {
  .recovered::before, .bubble::before, .swatch, .seg, .hour, .segment-block, .rank-bar i, .abar, .tab-ind { forced-color-adjust: none; }
  .group, .viz-card, .chip, .stat, .plan-tile { border: 1px solid CanvasText; }
}

@media (max-width: 360px) {
  :root { --gutter: var(--s-3); --t-large: 1.875rem; --t-said-hero: 1.3125rem; }
  .stat-value { font-size: 1.5rem; }
}

/* Owner cabinet */
.cabinet-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cabinet-line .note { margin: 0; }
.cabinet-find { display: flex; flex-direction: column; gap: var(--s-3); }
.cabinet-result:empty { display: none; }
.link-box .field { flex: 1; min-width: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px 0; }
/* Message users: the counter beside the text label, the live line, history rows and what was sent */
.cast-label-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.cast-count { color: var(--muted); font-size: var(--t-foot); font-variant-numeric: tabular-nums; padding: 0 var(--s-1); }
.cast-progress { align-items: center; gap: var(--s-3); }
.cast-progress .meter { flex: none; width: 100%; }
.cast-preview { color: var(--ink-2); font-size: var(--t-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cast-text { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-3); }
.cast-lang { color: var(--muted); font-size: var(--t-foot); }
.cast-text p, .cast-quote { white-space: pre-wrap; overflow-wrap: anywhere; }
.cast-quote { margin-bottom: var(--s-3); padding: 12px var(--s-4); border-radius: var(--r-control); background: var(--fill); color: var(--ink); }


/* Status v2 */
.status-emoji { flex: none; width: 28px; font-size: 20px; line-height: 1; text-align: center; }
.add-row .value { margin-left: auto; color: var(--muted); }
.chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chips.wrap .chip { flex: none; }
#status-date { margin-top: var(--s-2); }
.bio-preview { display: flex; flex-direction: column; gap: 4px; margin-top: var(--s-3); padding: 12px var(--s-4); border-radius: var(--r-control); background: var(--fill); }
.bio-preview span { color: var(--muted); font-size: var(--t-foot); }
.bio-preview b { font-weight: 600; overflow-wrap: anywhere; }
.notice-button { display: flex; width: 100%; text-align: left; color: var(--ink); }
.notice-button p { flex: 1; }
.form-pair { display: flex; gap: var(--s-2); }
.form-pair .grow { flex: 1; min-width: 0; }
.emoji-field { width: 76px; text-align: center; font-size: 20px; }
.switch-row[aria-disabled="true"] .switch { opacity: 0.5; }
.chips.wrap + .form { margin-top: var(--s-3); }

/* Real Telegram photos over the initials */
.avatar, .me, .profile-ring > span { position: relative; overflow: hidden; }
img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-button { padding: 0; border: 0; background: none; border-radius: 50%; display: inline-grid; flex: none; cursor: zoom-in; }
.avatar-button:active { transform: scale(0.96); }
.sheet .avatar-button { margin-bottom: var(--s-3); }
.photo-full { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-group); background: var(--fill); }
/* Plans: compare every row */
.compare { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.compare-table { padding: 4px 0; }
.compare-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--s-1); padding: 10px var(--s-3); }
.compare-row + .compare-row { border-top: 1px solid var(--glass-edge); }
.compare-label { grid-column: 1 / -1; font-size: var(--t-foot); color: var(--muted); }
.compare-head .compare-label { display: none; }
.compare-head { padding-top: 14px; padding-bottom: 14px; }
.compare-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 28px; text-align: center; font-size: var(--t-foot); font-weight: 600; overflow-wrap: anywhere; }
.compare-head .compare-cell b { font-size: var(--t-sub); }
.compare-head .compare-cell.is-yours b { color: var(--link); }
.compare-cell.is-yes { color: var(--accent); }
.compare-cell.is-no { color: var(--muted); font-weight: 500; }
.compare-head .compare-for { font-size: var(--t-mono); font-weight: 500; color: var(--muted); line-height: 1.25; }
.compare-group { padding: 14px var(--s-3) 2px; border-top: 1px solid var(--glass-edge); color: var(--ink); font-size: var(--t-sub); font-weight: 700; }
.compare-head + .compare-group { border-top: 0; }

/* Maintenance: one calm line at the top while the owner has it on */
.maintenance { display: flex; align-items: flex-start; gap: var(--s-3); padding: 12px var(--s-4); border-radius: var(--r-group); background: color-mix(in srgb, var(--accent) 12%, var(--surface-solid)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.maintenance .icon { flex: none; color: var(--accent); margin-top: 2px; }
.maintenance p { font-size: var(--t-sub); color: var(--ink); }

/* Guides: a Telegram-style story. Full screen and dark in both themes. The Telegram screens inside it
   are drawn in Telegram's own light look, so their colours are fixed values, defined once here (also
   for the animation previews, as .tgskin). ongly's own screens (.og) use our tokens instead. */
.story, .tgskin {
  --tg-ground: #f0f1f4; --tg-white: #ffffff; --tg-ink: #111316; --tg-muted: #6f747c; --tg-faint: #8a8f97; --tg-line: #ecedef; --tg-chev: #b4b8be; --tg-bar: #f8f8fa;
  --tg-blue: #2481cc; --tg-green: #34c759; --tg-off: #e1e3e8; --tg-wall: #d9e3ea; --tg-out: #effdde; --tg-tick: #4fae4e;
  --tg-orange: #e8833a; --tg-sky: #3e8ed0; --tg-teal: #35a7c4; --tg-leaf: #3fa66b; --tg-grape: #9a62d8; --tg-red: #e5484d; --tg-slate: #8a8f97;
  --tg-once-1: #8793a3; --tg-once-2: #b6a99a; --tg-pic-1: #c4573a; --tg-pic-2: #a0782c;
}
.story {
  --story-bg: #0e1013; --story-ink: #f1f3f5; --story-muted: #9aa0a8; --story-track: rgba(255, 255, 255, 0.22); --story-soft: rgba(255, 255, 255, 0.1);
  --story-step: 4.5s;
  --hi-tint: rgba(123, 77, 255, 0.1); --hi-ink: #5a2fd6; --hi-ring: #7b4dff;
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  background: var(--story-bg); color: var(--story-ink); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.story-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; flex: none; padding: calc(var(--safe-top) + 14px) 12px 0; }
.story-bar { display: block; height: 3px; border-radius: 999px; background: var(--story-track); overflow: hidden; }
.story-fill { display: block; height: 100%; border-radius: 999px; background: #fff; transform-origin: left; transform: scaleX(0); }
.story-fill.done, .story-fill.now { transform: none; }
/* The fill is the clock: it runs only when motion is allowed, and the story moves on when it ends */
.story.play .story-fill.now { transform: scaleX(0); animation: story-fill var(--story-step) linear forwards; }
.story.play.held .story-fill.now { animation-play-state: paused; }
@keyframes story-fill { to { transform: scaleX(1); } }
.story-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 8px 0 14px; }
.story-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--violet-500); color: #fff; font-size: 17px; font-weight: 700; }
.story-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.story-titles b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-step { font-size: 12px; color: var(--story-muted); }
.story-close { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--story-ink); }
.story-stage { flex: 1; min-height: 0; display: grid; place-items: center; margin: 14px 24px 0; touch-action: none; cursor: pointer; }
.story-stage > * { width: min(100%, 340px); height: min(100%, 452px); }
.story.play .story-stage > * { animation: story-scene 360ms var(--ease-out); }
@keyframes story-scene { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.story-text { flex: none; min-height: 9rem; padding: 22px 24px 0; text-align: center; }
.story-caption { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.story-hint { margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--story-muted); text-wrap: pretty; }
.story-actions { display: flex; gap: 8px; flex: none; padding: 0 16px calc(var(--safe-bottom) + 28px); }
.story-button { display: flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; text-align: center; border-radius: 16px; font-size: 16px; font-weight: 600; transition: transform 140ms var(--ease-out); }
.story-button:active { transform: scale(0.97); }
.story-button[hidden] { display: none; }
.story-button.ghost { background: var(--story-soft); color: var(--story-ink); }
.story-button.main { flex: 1; background: var(--story-ink); color: var(--ink-900); font-weight: 700; }
.story:focus { outline: none; }
.story-close:focus-visible, .story-button:focus-visible { outline-color: var(--story-ink); }

/* The thing to tap: violet tint and a ring that breathes outwards (the pulse only with motion) */
.story .hi { position: relative; z-index: 1; background: var(--hi-tint); box-shadow: 0 0 0 2px var(--hi-ring); }
.story.play .hi { animation: story-ring 1.4s ease-out infinite; }
@keyframes story-ring {
  0% { box-shadow: 0 0 0 2px var(--hi-ring), 0 0 0 2px color-mix(in srgb, var(--hi-ring) 55%, transparent); }
  100% { box-shadow: 0 0 0 2px var(--hi-ring), 0 0 0 14px color-mix(in srgb, var(--hi-ring) 0%, transparent); }
}
@keyframes story-caret { 50% { opacity: 0; } }
.story.play .tg-caret, .story.play .og-caret { animation: story-caret 1s steps(1) infinite; }

/* Telegram's screens */
.tg, .og { position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; }
.tg { background: var(--tg-ground); color: var(--tg-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tg.plain { background: var(--tg-white); }
/* Sides share what the title leaves, so a long title in another language clips the Back label, as Telegram does */
.tg-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; flex: none; height: 48px; padding: 0 12px; }
.tg-side { display: flex; align-items: center; min-width: 0; }
.tg-side.end { justify-content: flex-end; }
.tg-title { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.15; }
.tg-title b { font-size: 17px; font-weight: 600; white-space: nowrap; }
.tg-title small { font-size: 12px; color: var(--tg-faint); }
.tg-link { display: inline-flex; align-items: center; color: var(--tg-blue); font-size: 16px; }
.tg-back .icon { transform: scaleX(-1); }
.tg-link { min-width: 0; }
.tg-back-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-search { display: grid; place-items: center; flex: none; height: 36px; margin: 0 12px 4px; border-radius: 10px; background: var(--tg-ground); color: var(--tg-faint); font-size: 15px; }
.tg-chats { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.tg-chat { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.tg-chat-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--tg-line); }
.tg-chat-top { display: flex; justify-content: space-between; gap: 8px; }
.tg-chat-top b { font-size: 15px; font-weight: 600; }
.tg-chat-top small { font-size: 12px; color: var(--tg-faint); }
.tg-chat-text { font-size: 14px; color: var(--tg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--tg-sky); color: #fff; font-size: 18px; font-weight: 600; }
.tg-avatar.md { width: 42px; height: 42px; font-size: 19px; }
.tg-avatar.sm { width: 34px; height: 34px; font-size: 15px; }
.tg-avatar.c1 { background: var(--tg-orange); }
.tg-avatar.c2 { background: var(--tg-sky); }
.tg-avatar.c3 { background: var(--tg-leaf); }
.tg-avatar.c4 { background: var(--tg-grape); }
.tg-avatar.violet { background: var(--violet-500); font-weight: 700; }
.tg-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; height: 62px; border-top: 1px solid var(--tg-line); background: var(--tg-bar); }
.tg-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; color: var(--tg-muted); }
.tg-tab.on { color: var(--tg-blue); }
.tg-tab.hi { justify-self: center; align-self: center; width: 62px; height: 50px; border-radius: 14px; color: var(--hi-ink); font-weight: 600; }
.tg-burger { display: flex; flex-direction: column; gap: 4px; width: 22px; }
.tg-burger i { display: block; height: 2px; border-radius: 1px; background: var(--tg-muted); }
.tg-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
.tg-drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 78%; display: flex; flex-direction: column; padding-top: 18px; background: var(--tg-white); }
.tg-me { display: flex; align-items: center; gap: 12px; padding: 0 16px 14px; }
.tg-bars { display: flex; flex-direction: column; flex: 1; gap: 8px; }
.tg-bars i { display: block; height: 10px; width: 60%; border-radius: 5px; background: var(--tg-line); }
.tg-bars i + i { width: 38%; }
.tg-drawer-row { display: flex; align-items: center; gap: 22px; min-height: 48px; margin: 0 8px; padding: 0 8px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.tg-drawer-row .icon { color: var(--tg-muted); }
.tg-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 0; }
.tg-caption { padding: 0 6px; font-size: 13px; color: var(--tg-muted); }
.tg-group { display: flex; flex-direction: column; border-radius: 14px; background: var(--tg-white); }
.tg-group + .tg-group, .tg-group + .tg-caption { margin-top: 6px; }
.tg-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 14px; font-size: 16px; }
.tg-row.tall { min-height: 64px; }
.tg-row.slim { min-height: 40px; }
.tg-row.hi { font-weight: 600; }
.tg-label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tg-label small { font-size: 13px; font-weight: 400; color: var(--tg-muted); }
.tg-tile { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--tg-slate); color: #fff; }
.tg-tile.blue { background: var(--tg-sky); }
.tg-tile.orange { background: var(--tg-orange); }
.tg-tile.teal { background: var(--tg-teal); }
.tg-tile.red { background: var(--tg-red); }
.tg-tile.green { background: var(--tg-leaf); }
.tg-tile.violet { background: var(--violet-500); }
.tg-chev { color: var(--tg-chev); }
.tg-row.hi .tg-chev { color: var(--hi-ink); }
.tg-field { display: flex; align-items: center; min-height: 50px; padding: 0 14px; border-radius: 14px; background: var(--tg-white); font-size: 17px; }
.tg-caret { width: 2px; height: 22px; margin-left: 2px; background: var(--tg-blue); }
.tg-add { display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 999px; background: var(--tg-blue); color: #fff; font-size: 15px; font-weight: 600; }
.story .tg-add.hi { background: var(--tg-blue); }
.tg-radio { box-sizing: border-box; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--tg-chev); border-radius: 50%; }
.tg-radio.on { border: 0; background: var(--tg-blue); color: #fff; }
.tg-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--tg-off); }
.tg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.tg-switch.on { background: var(--tg-green); }
.tg-switch.on::after { left: 20px; }

/* A chat: wallpaper, bubbles with time and ticks, the message bar */
.tg.chat { background: var(--tg-wall); }
.tg.chat .tg-bar { background: var(--tg-white); }
.tg-wall { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; flex: 1; min-height: 0; padding: 10px; }
.tg-msg { max-width: 84%; padding: 7px 10px 5px; border-radius: 16px; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.tg-msg.in { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--tg-white); }
.tg-msg.out { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--tg-out); }
.story .tg-msg.in.hi { background: color-mix(in srgb, var(--hi-ring) 10%, var(--tg-white)); }
.story .tg-msg.out.hi { background: color-mix(in srgb, var(--hi-ring) 10%, var(--tg-out)); }
.tg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 1px; font-size: 11px; color: var(--tg-faint); }
.tg-msg.out .tg-meta { color: var(--tg-tick); }
.tg-quote { display: flex; flex-direction: column; margin-bottom: 4px; padding-left: 8px; border-left: 2px solid var(--tg-leaf); font-size: 13px; line-height: 1.25; }
.tg-quote b { font-weight: 600; color: var(--tg-leaf); }
.tg-dot { display: block; font-size: 22px; font-weight: 700; line-height: 1; }
.tg-once { display: grid; place-items: center; width: 180px; height: 116px; border-radius: 12px; background: linear-gradient(135deg, var(--tg-once-1), var(--tg-once-2)); }
.tg-once-dot { display: grid; place-items: center; width: 44px; height: 44px; border: 2px dashed #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 18px; font-weight: 700; }
.tg-once-label, .tg-saved { display: block; margin-top: 4px; font-size: 14px; color: var(--tg-muted); }
.tg-saved { color: var(--tg-ink); }
.tg-photo { display: grid; place-items: center; width: 190px; height: 120px; border-radius: 12px; background: linear-gradient(135deg, var(--tg-pic-1), var(--tg-pic-2)); color: #fff; }
.tg-composer { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px 12px 12px; background: var(--tg-white); color: var(--tg-faint); }
.tg-input { display: flex; align-items: center; flex: 1; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--tg-ground); font-size: 15px; }

/* ongly's own screens, in our tokens */
.og { background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 16px 16px; color: var(--ink); font-family: var(--font-ui); box-shadow: inset 0 0 0 1px var(--line); }
.og-bar { display: grid; place-items: center; flex: none; height: 48px; font-size: 17px; font-weight: 700; }
.og-body { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 0; }
.og-caption { padding: 0 6px; font-size: var(--t-foot); color: var(--muted); }
.og-group { display: flex; flex-direction: column; border-radius: var(--r-group); background: var(--surface-solid); }
.og-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: var(--r-group); font-size: 16px; font-weight: 600; }
.og-row.dim { opacity: 0.55; }
.og-label { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.og-label small { font-size: var(--t-foot); font-weight: 500; color: var(--muted); }
.og-chev { color: var(--muted); }
.og-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--fill-strong); font-size: 14px; font-weight: 700; }
.og-radio { box-sizing: border-box; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.og-radio.on { box-shadow: inset 0 0 0 6px var(--accent); }
.og-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--fill-strong); }
.og-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.og-switch.on { background: var(--accent); }
.og-switch.on::after { left: 21px; }
.og-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.og-chip { padding: 9px 14px; border-radius: 999px; background: var(--surface-solid); font-size: 14px; font-weight: 600; }
.og-chip.on { background: var(--solid); color: var(--on-solid); }
.og-field { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 16px; background: var(--surface-solid); font-weight: 600; }
.og-field.tall { align-items: flex-start; min-height: 76px; padding-top: 14px; font-weight: 500; color: var(--muted); }
.og-caret { width: 2px; height: 18px; margin-left: 2px; background: var(--accent); }
.og-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--surface-solid); font-size: 15px; font-weight: 600; }
.og-pill .icon { color: var(--muted); }
.og-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat-3); }
.og-card { height: 92px; border-radius: var(--r-group); background: var(--surface-solid); opacity: 0.7; }
.og-card.short { height: 56px; }

/* Show me how */
.link-button { color: var(--link); font-weight: 700; font-size: var(--t-sub); padding: 4px 0; }

/* Home: the setup line. One quiet row: a progress ring, the count, Continue and an X. */
.setup { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 2px 0 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.setup-ring { flex: none; margin-right: 4px; }
.setup-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.setup-ring .track { stroke: var(--fill-strong); }
.setup-ring .arc { stroke: var(--accent); }
.setup-title { min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-count { flex: none; color: var(--muted); white-space: nowrap; }
.setup-go { flex: none; min-height: var(--tap); margin-left: auto; padding: 0 4px; color: var(--link); font-size: 15px; font-weight: 600; white-space: nowrap; }
.setup-hide { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); color: var(--muted); }
.setup-go:active, .setup-hide:active { opacity: 0.6; }