/* Smilo by HaZix. System fonts only. Logical properties so Arabic (RTL) just works. */
:root {
  --coral: #ff7a59;
  --amber: #ffb547;
  --brand: linear-gradient(135deg, #ff7a59, #ffb547);
  --r: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Noto Sans", "Noto Sans Arabic", "Geeza Pro", "Helvetica Neue", Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}

/* ---------- the look (decision 39): palette + mode come from js/theme.js as variables on <html> ---------- */
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #ff7a59; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #ffb547; }
@property --tint { syntax: '<color>'; inherits: true; initial-value: #fff3ec; }
@property --b1 { syntax: '<color>'; inherits: true; initial-value: #ff7a59; }
@property --b2 { syntax: '<color>'; inherits: true; initial-value: #ffb547; }
@property --bon { syntax: '<color>'; inherits: true; initial-value: #1b1730; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #b8401f; }
@property --bg { syntax: '<color>'; inherits: true; initial-value: #fff3ec; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #1b1730; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #57526f; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .8); }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: rgba(27, 23, 48, .07); }
@property --border { syntax: '<color>'; inherits: true; initial-value: rgba(27, 23, 48, .12); }
@property --card { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .74); }
@property --solid { syntax: '<color>'; inherits: true; initial-value: #fff3ec; }
@property --glass { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .55); }

:root {
  --a1: #ff7a59; --a2: #ffb547; --tint: #fff3ec; --tintd: #1f1116;
  --accent: #b8401f; --accent-ink: #ffffff;
  --b1: var(--a1); --b2: var(--a2); --bon: #1b1730; --bread: #0a4da6; --on: #1b1730;
  --fill: linear-gradient(135deg, var(--a1), var(--a2));
  --fs: 16px; --fz: 1;
  --bg: var(--tint); --text: #1b1730; --muted: #57526f;
  --surface: rgba(255, 255, 255, .8); --surface-2: rgba(27, 23, 48, .07); --border: rgba(27, 23, 48, .12);
  --card: rgba(255, 255, 255, .74); --glass: rgba(255, 255, 255, .4); --glass-line: rgba(255, 255, 255, .42);
  --blur: 22px; --gw: 1px; --hi: rgba(255, 255, 255, .7); --w1: var(--a1); --w2: var(--a2); --their-bg: var(--glass); --their-ink: var(--text);
  --solid: color-mix(in srgb, var(--tint) 90%, white);
  --accent-soft: color-mix(in srgb, var(--a1) 20%, white);
  --ai-bg: color-mix(in srgb, var(--a2) 22%, white); --ai-border: color-mix(in srgb, var(--a1) 45%, transparent); --ai-ink: var(--text);
  --danger: #b3261e; --badge: var(--accent); --focus: #1f6feb; --sender-l: 34%;
  --shadow: 0 1px 2px rgba(27, 23, 48, .08), 0 12px 32px -14px rgba(40, 20, 90, .35); --scrim: rgba(14, 10, 30, .45);
  --br: 22px; --rad2: 7px; --row-pad: 14px; --av: 52px; --msg-gap: 3px; --bub-y: 8px;
  transition: --a1 .5s, --a2 .5s, --tint .5s, --b1 .5s, --b2 .5s, --bon .4s, --accent .5s, --bg .5s, --text .4s, --muted .4s, --surface .4s, --surface-2 .4s, --border .4s, --card .4s, --glass .4s, --solid .4s;
}
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: var(--tintd); --text: #f3f1ff; --muted: #b9b6d6;
  --surface: rgba(28, 24, 52, .82); --surface-2: rgba(255, 255, 255, .09); --border: rgba(255, 255, 255, .15);
  --card: rgba(34, 30, 64, .78); --glass: rgba(255, 255, 255, .09); --glass-line: rgba(255, 255, 255, .12); --hi: rgba(255, 255, 255, .2);
  --solid: color-mix(in srgb, var(--tintd) 88%, white 8%);
  --accent-soft: color-mix(in srgb, var(--a1) 28%, #17142b);
  --ai-bg: color-mix(in srgb, var(--a2) 20%, #1c1834); --ai-border: color-mix(in srgb, var(--a1) 50%, transparent);
  --danger: #ff9a90; --focus: #8ab4ff; --sender-l: 74%;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -14px rgba(0, 0, 0, .8); --scrim: rgba(0, 0, 0, .6);
}
:root[data-shape="round"] { --br: 22px; --rad2: 7px; }
:root[data-shape="soft"] { --br: 16px; --rad2: 6px; }
:root[data-shape="sharp"] { --br: 4px; --rad2: 2px; }
:root[data-density="compact"] { --row-pad: 8px; --av: 42px; --msg-gap: 1px; --bub-y: 4px; }

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; height: 100%; min-height: 100dvh; overflow: hidden;
  background: var(--bg); color: var(--text); font: calc(16px * var(--fz))/1.45 var(--font);
}
#app { position: fixed; z-index: 1; inset-inline: 0; top: var(--app-top, 0px); height: 100vh; height: var(--app-h, 100dvh); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-size: calc(14px * var(--fz)); }
.fine { color: var(--muted); font-size: calc(13px * var(--fz)); text-align: center; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
h1, h2, h3, p { margin: 0; }
.ico { display: inline-flex; width: 22px; height: 22px; flex: none; }
.ico svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ---------- controls ---------- */
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; text-decoration: none;
}
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn.light { color: #fff; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 999px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn .ico { width: 20px; height: 20px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
:root[data-mode="dark"] .btn.danger { color: #2b0a07; }
.btn.link { background: transparent; color: var(--accent); padding: 0 8px; min-height: 36px; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: calc(14px * var(--fz)); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--accent-ink); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.ghost.busy::after, .btn.link.busy::after { border-color: var(--accent); border-top-color: transparent; }
.danger-text { color: var(--danger); }
.input {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text);
}
textarea.input { resize: vertical; }
.input:disabled { opacity: .5; }
.input.code { text-align: center; font-size: calc(28px * var(--fz)); letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: calc(14px * var(--fz)); }
.field > span:first-child, .field > small { font-weight: 600; }
.field small { font-weight: 400; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; justify-content: space-between; align-items: center; }
.form-error { color: var(--danger); font-size: calc(14px * var(--fz)); font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text);
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.small { min-height: 32px; padding: 2px 12px; font-size: calc(14px * var(--fz)); }
.chip:disabled { opacity: .45; }
.spinner { width: 28px; height: 28px; margin: 24px auto; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.spinner.small { width: 16px; height: 16px; margin: 0; border-width: 2px; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: calc(14px * var(--fz)); align-items: flex-start; }
.notice .ico { margin-top: 2px; }
.avatar { --s: 44px; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--g1, hsl(var(--hue) 50% 42%)), var(--g2, hsl(var(--hue) 50% 42%))); color: var(--gi, #fff); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ini { font-weight: 700; font-size: calc(var(--s) * .38); }
.mark { width: var(--s, 44px); height: var(--s, 44px); flex: none; border-radius: 22%; }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; font-size: calc(20px * var(--fz)); letter-spacing: -.01em; }
.brand-by { font-size: calc(11px * var(--fz)); color: var(--muted); }
.brand-word.big .brand-name { font-size: calc(34px * var(--fz)); }
.brand-word.big .brand-by { font-size: calc(13px * var(--fz)); }
.brand-word.big { align-items: center; }
.badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--badge); color: #fff; font-size: calc(12px * var(--fz)); font-weight: 700; display: inline-grid; place-items: center; }
.badge.muted { background: var(--muted); }
.ai-pill { display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; background: var(--brand); color: #3a1a08; font-size: calc(11px * var(--fz)); font-weight: 800; line-height: 18px; }

/* ---------- toast, overlay, sheets ---------- */
#toast { position: fixed; inset-inline: 0; bottom: calc(88px + var(--safe-b)); z-index: 100; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast { display: flex; gap: 12px; align-items: center; max-width: 480px; padding: 12px 18px; border-radius: 14px; background: #1c2630; color: #fff; box-shadow: var(--shadow); pointer-events: auto; animation: rise .2s ease-out; }
.toast-action { border: 0; background: transparent; color: #ffd08a; font-weight: 700; padding: 4px 6px; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.overlay { position: fixed; inset: var(--app-top, 0px) 0 auto 0; height: var(--app-h, 100%); z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--scrim); animation: fade .15s ease-out; padding: 16px; }
.overlay.bottom { align-items: flex-end; padding: 0; }
.overlay.popover { background: transparent; align-items: flex-start; justify-content: flex-start; padding: 0; }
.overlay.viewer { background: rgba(0, 0, 0, .96); padding: 0; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 440px; max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); color: var(--text); border-radius: 22px; box-shadow: var(--shadow); }
.sheet.bottom { max-width: 520px; border-radius: 22px 22px 0 0; padding-bottom: var(--safe-b); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateY(24px); opacity: .6; } }
@media (min-width: 640px) { .overlay.bottom { align-items: center; padding: 16px; } .sheet.bottom { border-radius: 22px; padding-bottom: 0; } }
.sheet.popover { width: 240px; border-radius: 14px; padding: 4px; }
.sheet.viewer { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; background: transparent; overflow: hidden; }
.sheet.wide { max-width: 560px; }
.sheet-title { padding: 16px 20px 6px; font-weight: 700; }
.sheet-note { padding: 0 20px 8px; color: var(--muted); font-size: calc(14px * var(--fz)); }
.menu { padding: 6px; display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; text-align: start; width: 100%; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-label { flex: 1; }
.menu-hint { color: var(--muted); font-size: calc(13px * var(--fz)); }
.dialog { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog h2 { font-size: calc(19px * var(--fz)); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.pick-list { display: flex; flex-direction: column; max-height: 50dvh; overflow: auto; }
.pick-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 4px; }
.pick-row input { width: 22px; height: 22px; accent-color: var(--accent); }
.viewer-body { height: 100%; display: flex; flex-direction: column; color: #fff; }
.viewer-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-t)) 8px 8px; }
.viewer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--fz)); }
.viewer-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- shell ---------- */
.shell { height: 100%; display: flex; flex-direction: column; }
.offline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: calc(4px + var(--safe-t)) 12px 4px; background: #fff0c9; color: #4a3300; font-size: calc(13px * var(--fz)); font-weight: 600; flex: none; }
.panes { flex: 1; min-height: 0; display: flex; }
.pane-list { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.pane-main { flex: 1; min-width: 0; background: var(--bg); display: flex; flex-direction: column; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.shell[data-view="list"] .pane-main { display: none; }
/* page changes: the new page is there at once (only a short slide), so the bare background never shows between pages */
.pane-main .view { animation: viewIn .32s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes viewIn { from { transform: translate3d(0, 18px, 0); } }
.shell[data-view="detail"] .pane-list { display: none; }
@media (min-width: 900px) {
  .pane-list { flex: none; width: 380px; border-inline-end: 1px solid var(--border); }
  .shell[data-view="list"] .pane-main, .shell[data-view="detail"] .pane-list { display: flex; }
  .only-narrow { display: none !important; }
}
.placeholder { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); padding: 24px; text-align: center; }
.screen { height: 100%; overflow: auto; }

.list-head { display: flex; align-items: center; gap: 4px; padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 8px calc(14px + var(--safe-l)); }
.brand-link { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.list-search { position: relative; padding: 4px 14px 10px; }
.list-search .ico { position: absolute; inset-inline-start: 28px; top: 14px; width: 18px; height: 18px; color: var(--muted); }
.list-search .input { padding-inline-start: 40px; border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.chat-list { list-style: none; margin: 0; padding: 0 0 calc(12px + var(--safe-b)); overflow: auto; flex: 1; }
.chat-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; text-decoration: none; color: var(--text); border-inline-start: 4px solid transparent; }
.chat-row:hover { background: var(--surface-2); }
.chat-row.active { background: var(--accent-soft); }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-time { font-size: calc(12px * var(--fz)); color: var(--muted); flex: none; }
.chat-time.unread { color: var(--badge); font-weight: 700; }
.chat-preview { color: var(--muted); font-size: calc(14px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-preview.typing { color: var(--accent); font-weight: 600; }
.mini-ico { color: var(--muted); display: inline-flex; }
.mini-ico .ico { width: 16px; height: 16px; }
.empty { margin: auto; padding: 32px 24px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 16px; align-items: center; }
.empty.small { margin: 0; }
.list-empty { padding: 24px 20px; text-align: center; color: var(--muted); }
.list-empty p { margin: 0 0 12px; }
.list-sub { padding: 8px 20px 0; color: var(--muted); font-size: calc(13px * var(--fz)); font-weight: 700; }

/* ---------- pages (settings, profile, ...) ---------- */
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-head { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--safe-t)) 12px 8px 8px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
.page-head h1 { font-size: calc(20px * var(--fz)); }
.page-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; padding: 16px calc(16px + var(--safe-r)) calc(32px + var(--safe-b)) calc(16px + var(--safe-l)); display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 680px; margin-inline: auto; }

.page-body > * { flex: none; }
.card-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-section h2, .sub { font-size: calc(16px * var(--fz)); }
.group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-decoration: none; text-align: start; }
.group > .row:last-child { border-bottom: 0; }
a.row:hover, button.row:hover { background: var(--surface-2); }
.row.static:hover { background: transparent; }
.row.danger { color: var(--danger); }
.row-label { flex: 1; }
.row-hint { color: var(--muted); font-size: calc(14px * var(--fz)); }
.chev { color: var(--muted); }
[dir="rtl"] .ico.flip svg { transform: scaleX(-1); }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.seg-btn { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: calc(14px * var(--fz)); }
.seg-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.account-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.avatar-edit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.avatar-btn { position: relative; border: 0; background: none; padding: 0; border-radius: 50%; }
.avatar-badge { position: absolute; inset-inline-end: 0; bottom: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg); }
.avatar-badge .ico { width: 16px; height: 16px; }
.switch-row { display: flex; align-items: center; gap: 12px; }
.switch-row small { display: block; }
input[type="checkbox"][role="switch"] { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--border); position: relative; transition: background .15s; cursor: pointer; margin: 0; }
input[type="checkbox"][role="switch"]::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .15s; }
input[type="checkbox"][role="switch"]:checked { background: var(--accent); }
input[type="checkbox"][role="switch"]:checked::after { inset-inline-start: 23px; }
input[type="checkbox"][role="switch"]:disabled { opacity: .45; cursor: default; }
.radio-list { display: flex; flex-direction: column; }
.radio-row { display: flex; align-items: center; gap: 8px; }
.radio { display: flex; align-items: center; gap: 12px; min-height: 46px; flex: 1; border: 0; background: transparent; text-align: start; padding: 0 4px; }
.radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; }
.radio.on .radio-dot { border-color: var(--accent); }
.radio.on .radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.person:last-child { border-bottom: 0; }
.person-card { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); flex-wrap: wrap; }
.sess-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }
.status-card { display: flex; gap: 12px; padding: 14px; border-radius: var(--r); align-items: center; }
.status-card.good { background: var(--accent-soft); }
.status-card.warn { background: #fff0c9; color: #4a3300; }
.row-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lookup { display: flex; flex-direction: column; gap: 8px; }
.lookup-row { display: flex; gap: 8px; }
.group-top { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.group-ico { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.group-ico .ico { width: 44px; height: 44px; }
.ai-note { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.ai-note .ico { width: 14px; height: 14px; color: var(--accent); }
.qlist { display: flex; flex-direction: column; }
.qrow { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qrow:last-child { border-bottom: 0; }
.qrow-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.qrow-edit { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.qwidget { display: flex; flex-direction: column; gap: 14px; }
.time-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.time-pair input { min-width: 0; width: 100%; }
.chips.days .chip { min-width: 52px; justify-content: center; padding-inline: 10px; }
.card-q { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

/* ---------- auth and first-run flows ---------- */
.auth, .flow { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); background: linear-gradient(160deg, #fff1e8 0%, #fff8ec 55%, var(--bg) 100%); overflow: auto; height: 100%; }
.auth-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; margin: auto; }
.auth-lang { display: flex; gap: 8px; justify-content: flex-end; }
.auth-card { background: var(--surface); border-radius: 28px; padding: 28px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
.auth-card.center { align-items: center; text-align: center; }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth-logo .mark { box-shadow: 0 10px 24px -8px rgba(255, 122, 89, .6); }
.auth-card h1 { font-size: calc(24px * var(--fz)); }
.dev-banner { padding: 10px 14px; border-radius: 12px; background: #fff0c9; color: #4a3300; font-size: calc(14px * var(--fz)); border: 1px dashed #d4a017; }
.dev-banner code { font-size: calc(20px * var(--fz)); letter-spacing: .15em; font-weight: 800; }
.young { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.young-emoji { font-size: 56px; }
.flow-card { width: 100%; max-width: 520px; background: var(--surface); border-radius: 28px; padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; }
.flow-top { display: flex; align-items: center; gap: 12px; }
.progress { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--brand); border-radius: 4px; transition: width .25s; }
.flow-hint { color: var(--muted); font-size: calc(14px * var(--fz)); }
.flow-title { font-size: calc(22px * var(--fz)); line-height: 1.3; }
.flow-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: 4px; }
.flow-actions .btn { white-space: nowrap; }
.flow-actions .btn.link { padding: 0 6px; }
.tut-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; border-radius: 20px; }
.tut-track::-webkit-scrollbar { display: none; }
.tut-card { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 8px 0; }
.tut-card h2 { font-size: calc(22px * var(--fz)); }
.tut-card p { color: var(--muted); }
.tut-art { width: 132px; height: 132px; border-radius: 36px; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px -12px rgba(255, 122, 89, .7); }
.tut-art .ico { width: 64px; height: 64px; }
.tut-art.coral { background: linear-gradient(135deg, #ff7a59, #ff9a5c); }
.tut-art.amber { background: linear-gradient(135deg, #ff9a3c, #ffb547); }
.dots { display: flex; justify-content: center; gap: 8px; }
.dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--border); }
.dot.on { background: var(--accent); width: 24px; border-radius: 5px; transition: width .2s; }

/* ---------- chat ---------- */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.chat-head { display: flex; align-items: center; gap: 4px; padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 6px calc(4px + var(--safe-l)); background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
.head-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px; text-align: start; border-radius: 12px; }
.head-text { display: flex; flex-direction: column; min-width: 0; }
.head-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-sub { font-size: calc(13px * var(--fz)); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-sub.typing { color: var(--accent); font-weight: 600; }
.banners { flex: none; }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--accent-soft); font-size: calc(14px * var(--fz)); flex-wrap: wrap; }
.banner.soft { background: var(--surface-2); color: var(--muted); }
.pinned { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex: none; }
.pinned > .ico { color: var(--accent); width: 18px; height: 18px; }
.pinned-text { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 0; background: transparent; text-align: start; padding: 2px 0; }
.pinned-text small { color: var(--accent); font-weight: 700; }
.pinned-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--fz)); }
.msgs-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; overscroll-behavior: contain; padding: 6px calc(10px + var(--safe-r)) 10px calc(10px + var(--safe-l)); }
.top-loader { text-align: center; padding: 8px; }
.msg-list { display: flex; flex-direction: column; gap: 3px; }
.day { align-self: center; margin: 10px 0 6px; }
.day span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--muted); font-size: calc(12px * var(--fz)); font-weight: 600; box-shadow: var(--shadow); }
.msg { display: flex; max-width: 100%; position: relative; }
.msg.mine { align-self: flex-end; }
.msg.theirs { align-self: flex-start; }
.msg.system { align-self: center; margin: 6px 0; }
.sys { padding: 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--muted); font-size: calc(13px * var(--fz)); text-align: center; }
.bubble { position: relative; max-width: min(78vw, 520px); min-width: 64px; padding: 7px 11px 5px; border-radius: 18px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); overflow-wrap: anywhere; user-select: text; }

.msg.ai .bubble { background: var(--ai-bg); color: var(--ai-ink); border: 1px solid var(--ai-border); border-end-start-radius: 6px; }
.msg.flash .bubble { animation: flash 1.2s ease-out; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--focus); } }
@media (pointer: coarse) { .bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.b-text { white-space: pre-wrap; }
.b-text a { color: inherit; text-decoration: underline; }
.b-sender { font-size: calc(13px * var(--fz)); font-weight: 700; color: hsl(var(--h) 55% var(--sender-l)); margin-bottom: 1px; }
.b-ai { display: flex; align-items: center; gap: 5px; font-size: calc(13px * var(--fz)); color: #c2411f; margin-bottom: 2px; flex-wrap: wrap; }
.b-ai .ico { width: 15px; height: 15px; }
.b-ai small { color: var(--muted); font-weight: 400; }
.b-fwd { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: calc(12px * var(--fz)); font-style: italic; }
.b-fwd .ico { width: 14px; height: 14px; }
.b-deleted { display: flex; align-items: center; gap: 6px; color: var(--muted); font-style: italic; }
.b-deleted .ico { width: 16px; height: 16px; }
.b-quote { display: flex; flex-direction: column; width: 100%; text-align: start; margin: 2px 0 4px; padding: 4px 8px; border: 0; border-inline-start: 4px solid var(--accent); border-radius: 8px; background: rgba(0, 0, 0, .06); }
.b-quote strong { font-size: calc(13px * var(--fz)); color: var(--accent); }
.b-quote span { font-size: calc(13px * var(--fz)); opacity: .85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.b-extra { margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .06); font-size: calc(14px * var(--fz)); white-space: pre-wrap; }
.b-extra small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; }
.b-extra small .ico { width: 14px; height: 14px; }
.b-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 1px; font-size: calc(11px * var(--fz)); color: var(--muted); }
.b-meta .ico { width: 15px; height: 15px; }
.pin-ico { width: 12px !important; height: 12px !important; }
.ticks { display: inline-flex; }
.ticks.read { color: var(--bread); }
.msg-more { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; width: 26px; height: 26px; opacity: 0; background: inherit; }
.msg-more .ico { width: 16px; height: 16px; }
@media (hover: hover) { .bubble:hover .msg-more { opacity: .9; } }
.msg-more:focus-visible { opacity: 1; }
.media-img { display: block; padding: 0; border: 0; background: rgba(0, 0, 0, .08); border-radius: 12px; overflow: hidden; margin: 2px 0; min-width: 160px; min-height: 100px; max-width: 100%; }
.media-img img { display: block; max-width: 100%; max-height: 340px; object-fit: cover; margin: auto; }
.media-video { display: block; max-width: 100%; max-height: 340px; border-radius: 12px; margin: 2px 0; background: #000; }
.voice { display: flex; align-items: center; gap: 6px; min-width: 210px; }
.voice-play { background: var(--accent); color: var(--accent-ink); width: 40px; height: 40px; }
.voice-play:hover { background: var(--accent); filter: brightness(1.08); }
.voice-play .ico { width: 20px; height: 20px; }
.seek { flex: 1; min-width: 80px; accent-color: var(--accent); }
.vtime { font-size: calc(12px * var(--fz)); font-variant-numeric: tabular-nums; min-width: 34px; }
.file-card { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 6px 0; }
.file-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, .08); }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.typing-row .bubble { padding: 8px 12px; }
.dots-anim { display: inline-flex; gap: 4px; margin-inline-start: 6px; }
.dots-anim i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: bounce 1s infinite; }
.dots-anim i:nth-child(2) { animation-delay: .15s; }
.dots-anim i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.to-bottom { position: absolute; inset-inline-end: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; }
.to-bottom .badge { position: absolute; top: -8px; inset-inline-end: -4px; }
.suggest { display: flex; gap: 8px; padding: 8px 12px 0; overflow-x: auto; background: var(--surface); flex: none; scrollbar-width: none; }
.suggest::-webkit-scrollbar { display: none; }
.chip.suggestion { flex: none; max-width: 80vw; background: var(--accent-soft); border-color: transparent; text-align: start; min-height: 38px; }
.chip.ai-chip { flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: start; line-height: 1.25; background: var(--ai-bg); border-color: var(--ai-border); color: var(--ai-ink); font-weight: 600; }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: var(--surface); border-top: 1px solid var(--border); flex: none; }
.reply-quote { flex: 1; min-width: 0; display: flex; flex-direction: column; border-inline-start: 4px solid var(--accent); padding-inline-start: 10px; }
.reply-quote strong { font-size: calc(13px * var(--fz)); color: var(--accent); }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--fz)); color: var(--muted); }
.uploads { background: var(--surface); flex: none; }
.upload { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 14px; font-size: calc(14px * var(--fz)); }
.upload-name { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload progress { flex: 1; accent-color: var(--accent); height: 8px; }
.composer { position: relative; display: flex; align-items: flex-end; gap: 2px; padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(6px + var(--safe-l)); background: var(--surface); flex: none; }
.composer-note { padding: 14px 16px calc(14px + var(--safe-b)); text-align: center; color: var(--muted); background: var(--surface); flex: none; }
.composer-input { flex: 1; min-width: 0; resize: none; max-height: 140px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--bg); color: var(--text); line-height: 1.35; }
.send-btn { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; touch-action: none; }
.send-btn .ico { width: 22px; height: 22px; }
[dir="rtl"] .send-btn:not(.mic) .ico svg { transform: scaleX(-1); }
.emoji-panel { max-height: 260px; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); flex: none; padding-bottom: var(--safe-b); }
.rec-bar { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 8px calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(14px + var(--safe-l)); background: var(--surface); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #d92d20; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; }
.rec-hint { order: 5; margin-inline-start: auto; color: var(--muted); font-size: calc(14px * var(--fz)); }
.rec-cancel { color: var(--danger); }
.rec-bar .send-btn { margin-inline-start: auto; }

@media (max-width: 380px) {
  .bubble { max-width: 84vw; }
  .voice, .file-card { min-width: 180px; }
}
.ai-suggest { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: var(--ai-bg); border: 1px solid var(--ai-border); color: var(--ai-ink); }
.ai-suggest p { flex: 1; min-width: 180px; }

.stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.stack > .look, .stack > .ai-suggest { align-self: stretch; }

/* ---------- decision 36: polls, stickers, big emoji, GIFs ---------- */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; overflow: auto; padding: 4px 8px 10px; }
.sticker-pick { display: grid; place-items: center; height: 76px; border: 0; border-radius: 14px; background: transparent; }
.sticker-pick:hover, .sticker-pick:focus-visible { background: var(--surface-2); }
.sticker-pick .sticker { font-size: 44px; line-height: 1; width: auto; padding: 0; animation: none; }
.sticker-pick:hover .sticker { animation: var(--st-anim); }

.bubble.bare { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0; min-width: 0; color: var(--text); }
.bubble.bare .b-meta { align-self: flex-end; justify-content: flex-end; width: fit-content; margin-inline-start: auto; padding: 1px 8px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--muted); }
.bubble.bare .b-sender { margin-inline-start: 4px; }
.sticker, .big-emoji { display: block; line-height: 1.1; cursor: pointer; user-select: none; -webkit-user-select: none; transform-origin: 50% 70%; }
.sticker { font-size: 96px; width: 120px; text-align: center; padding: 4px 0; --st-anim: none; }
.big-emoji.n1 { font-size: 64px; }
.big-emoji.n2, .big-emoji.n3 { font-size: 48px; letter-spacing: 2px; }
.big-emoji.play { animation: emoji-pop .7s cubic-bezier(.3, 1.6, .5, 1) both, emoji-wiggle 1.1s ease-in-out .7s 2; }
@keyframes emoji-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-10deg) scale(1.08); } 45% { transform: rotate(9deg) scale(1.08); } 70% { transform: rotate(-5deg) scale(1.03); } }
.sticker.play { animation: var(--st-anim); }
@keyframes emoji-pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes st-pulse { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.22); } 50% { transform: scale(.96); } 70% { transform: scale(1.14); } }
@keyframes st-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.08); } 40% { transform: rotate(12deg) scale(1.08); } 60% { transform: rotate(-9deg); } 80% { transform: rotate(7deg); } }
@keyframes st-pop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 50% { transform: scale(1.3) rotate(10deg); opacity: 1; } 70% { transform: scale(.9) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes st-clap { 0%, 100% { transform: scale(1) rotate(0); } 15% { transform: scale(1.25) rotate(-8deg); } 30% { transform: scale(.88) rotate(6deg); } 45% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.9) rotate(4deg); } }
@keyframes st-thumbs { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 30% { transform: translateY(-18px) rotate(-18deg) scale(1.18); } 55% { transform: translateY(2px) rotate(6deg) scale(.95); } 75% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes st-squish { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.22, .82); } 55% { transform: scale(.88, 1.16); } 75% { transform: scale(1.1, .94); } }
@keyframes st-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes st-shine { 0%, 100% { transform: scale(1) rotate(0); filter: brightness(1); } 30% { transform: scale(1.3) rotate(20deg); filter: brightness(1.35) drop-shadow(0 0 14px #ffd54a); } 60% { transform: scale(.95) rotate(-12deg); } }
@keyframes st-flicker { 0%, 100% { transform: scale(1, 1) translateY(0); } 20% { transform: scale(1.1, 1.2) translateY(-6px); } 40% { transform: scale(.94, .96) translateY(0); } 60% { transform: scale(1.08, 1.24) translateY(-8px); } 80% { transform: scale(.98, 1.04); } }
@keyframes st-tilt { 0%, 100% { transform: rotate(0) translateX(0); } 25% { transform: rotate(-12deg) translateX(-8px); } 55% { transform: rotate(10deg) translateX(8px) scale(1.1); } 80% { transform: rotate(-4deg); } }
@keyframes st-beat { 0%, 100% { transform: scale(1) translateY(0); } 15% { transform: scale(1.28) translateY(-8px); } 30% { transform: scale(1) translateY(0); } 45% { transform: scale(1.22) translateY(-6px); } 60% { transform: scale(1); } }
@keyframes st-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(24deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(24deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(14deg); } }
@keyframes st-sway { 0%, 100% { transform: translateX(0) scale(1); } 30% { transform: translateX(-14px) scale(1.08); } 65% { transform: translateX(14px) scale(1.08); } }
@keyframes st-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.15, .85); } 45% { transform: translateY(-26px) scale(.92, 1.1); } 70% { transform: translateY(0) scale(1.12, .88); } 85% { transform: translateY(-8px); } }
@keyframes st-float { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-4deg); } 70% { transform: translateY(-5px) rotate(3deg); } }
@keyframes st-snooze { 0%, 100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-10deg) translateY(6px) scale(.95); } 65% { transform: rotate(8deg) translateY(2px) scale(1.04); } }
.st-heart { --st-anim: st-pulse 1.1s ease-in-out 3; }
.st-laugh { --st-anim: st-wobble 1s ease-in-out 3; }
.st-party { --st-anim: st-pop .9s ease-out 2; }
.st-clap { --st-anim: st-clap .9s ease-in-out 3; }
.st-thumbs { --st-anim: st-thumbs 1s ease-in-out 2; }
.st-hug { --st-anim: st-squish 1.1s ease-in-out 3; }
.st-sun { --st-anim: st-spin 3s linear 2; }
.st-star { --st-anim: st-shine 1.2s ease-in-out 3; }
.st-fire { --st-anim: st-flicker .8s ease-in-out 4; }
.st-cool { --st-anim: st-tilt 1.2s ease-in-out 2; }
.st-love { --st-anim: st-beat 1.2s ease-in-out 3; }
.st-wave { --st-anim: st-wave 1.3s ease-in-out 2; transform-origin: 70% 80%; }
.st-rainbow { --st-anim: st-sway 1.8s ease-in-out 2; }
.st-cake { --st-anim: st-hop 1s ease-in-out 3; }
.st-coffee { --st-anim: st-float 1.8s ease-in-out 2; }
.st-sleepy { --st-anim: st-snooze 2s ease-in-out 3; }
.st-unknown { --st-anim: st-pulse 1.4s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .sticker, .big-emoji, .big-emoji.play, .sticker.play, .sticker-pick:hover .sticker { animation: none !important; } }

.poll { display: flex; flex-direction: column; gap: 6px; min-width: min(250px, 70vw); }
.poll-q { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.poll-q .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.poll-opts { display: flex; flex-direction: column; gap: 2px; }
.poll-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 6px 2px; border: 0; background: transparent; text-align: start; color: inherit; border-radius: 10px; }
.poll-opt:hover { background: rgba(0, 0, 0, .05); }
.poll-mark { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 2px solid var(--muted); border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); }
.poll-mark.square { border-radius: 6px; }
.poll-mark .ico { width: 14px; height: 14px; }
.poll-opt.on .poll-mark { background: var(--accent); border-color: var(--accent); }
.poll-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.poll-line { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; }
.poll-text { overflow-wrap: anywhere; }
.poll-count { font-variant-numeric: tabular-nums; font-weight: 700; }
.poll-bar { display: block; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.poll-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.poll-foot .btn.link { padding: 0 4px; min-height: 32px; }
.poll-fields { display: flex; flex-direction: column; gap: 8px; }
.poll-field { display: flex; align-items: center; gap: 4px; }
.poll-field .icon-btn:disabled { opacity: .3; }
.votes-list { display: flex; flex-direction: column; gap: 12px; max-height: 50dvh; overflow: auto; }
.votes-head { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.votes-opt ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.poll-q-small { overflow-wrap: anywhere; }
.media-img { position: relative; }
.gif-badge { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #fff; font-size: calc(11px * var(--fz)); font-weight: 800; letter-spacing: .05em; }
.viewer-stage { position: relative; }
.viewer-stage .gif-badge { inset-block-end: 16px; inset-inline-start: 16px; }
.votes-list { text-align: start; }

/* ---------- decision 37: the free Gemini path ---------- */
.gemini-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 18px 18px; border-radius: 24px; background: linear-gradient(160deg, var(--ai-bg), var(--surface)); border: 2px solid var(--ai-border); box-shadow: var(--shadow); }
.gemini-card h2 { font-size: calc(22px * var(--fz)); line-height: 1.25; }
.recommended { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px 2px 10px; border-radius: 999px; background: var(--brand); color: #3a1a08; font-size: calc(13px * var(--fz)); font-weight: 800; }
.recommended .ico { width: 16px; height: 16px; }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--surface); border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; }
.step.attention { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: calc(18px * var(--fz)); }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.step-body strong { font-size: calc(17px * var(--fz)); }
.btn.big { min-height: 52px; font-size: calc(17px * var(--fz)); }
.big-input { min-height: 56px; font-size: calc(18px * var(--fz)); border-width: 2px; border-color: var(--accent); }
.step-now { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; }
.step.attention .big-input { animation: nudge 1.2s ease-out 2; }
@keyframes nudge { 30% { box-shadow: 0 0 0 6px var(--accent-soft); } }
.connecting { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.step-art { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 2px dashed var(--border); }
.art-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: calc(14px * var(--fz)); box-shadow: 0 0 0 4px var(--accent-soft); }
.art-btn .ico { width: 16px; height: 16px; }
.art-arrow { color: var(--muted); }
.art-key { direction: ltr; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-family: ui-monospace, Menlo, monospace; font-size: calc(14px * var(--fz)); }
.art-copy { display: inline-flex; padding: 4px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.art-copy .ico { width: 16px; height: 16px; }
.other-ai { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.other-ai summary { padding: 14px 16px; font-weight: 700; cursor: pointer; }
.other-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; align-items: stretch; }
.success-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 18px; border-radius: 24px; background: var(--accent-soft); animation: emoji-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.success-emoji { font-size: 56px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .success-card, .step.attention .big-input { animation: none; } }


/* =========================================================
   Aurora (decision 39). Glass (backdrop-filter) only on the few fixed surfaces: headers, tab bar, composer, sheets.
   Rows and bubbles are translucent colours. Animations: transform and opacity only.
   ========================================================= */
.aurora { position: fixed; inset: -40px 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(165deg, color-mix(in srgb, var(--bg) 85%, #fff), color-mix(in srgb, var(--bg) 78%, var(--w1))); }
:root[data-mode="dark"] .aurora { background: linear-gradient(165deg, var(--bg), color-mix(in srgb, var(--bg) 80%, var(--w1))); }
.aurora i { position: absolute; display: block; width: clamp(360px, 95vw, 960px); aspect-ratio: 1; border-radius: 50%; filter: blur(48px); opacity: .7; will-change: transform; }
:root[data-mode="dark"] .aurora i { opacity: .5; }
.aurora i:nth-child(1) { top: -10%; inset-inline-start: -25%; background: radial-gradient(circle, var(--w1), transparent 66%); animation: aur1 19s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { bottom: -8%; inset-inline-end: -30%; background: radial-gradient(circle, var(--w2), transparent 66%); animation: aur2 25s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { top: 32%; inset-inline-start: 18%; width: clamp(236px, 62vw, 620px); background: radial-gradient(circle, color-mix(in srgb, var(--w1) 55%, #7b5cff), transparent 66%); animation: aur3 31s ease-in-out infinite alternate; }
.aurora::after { content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background-image: radial-gradient(#000 .5px, transparent .6px); background-size: 3px 3px; }
@keyframes aur1 { to { transform: translate3d(35%, 30%, 0) scale(1.2); } }
@keyframes aur2 { to { transform: translate3d(-40%, -25%, 0) scale(1.25); } }
@keyframes aur3 { to { transform: translate3d(30%, -35%, 0) scale(.8) rotate(40deg); } }
html.paused .aurora i, html.paused .wall *, html.paused .wall::before, html.paused .wall::after { animation-play-state: paused !important; }

/* shell */
.pane-list { position: relative; background: transparent; } /* the moving colours show fully, as in the preview */
.pane-main { background: transparent; }
@media (min-width: 900px) { .pane-list { background: color-mix(in srgb, var(--surface) 38%, transparent); border-inline-end: var(--gw) solid var(--glass-line); } }
.offline { background: var(--accent-soft); color: var(--text); }
/* glass: the colours behind it show through (strength and edge come from the look: --glass, --blur, --glass-line, --gw, --hi) */
.glass, .list-search .input, .chat-row, .chat-head, .page-head, .tabbar, .composer-pill, .sheet, .toast, .auth-card, .flow-card, .chip, .day span, .msg.theirs .bubble, .msg.ai .bubble {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7);
}
.chat-head, .page-head, .tabbar, .composer-pill, .chat-row, .chip, .day span, .list-search .input, .msg.theirs .bubble, .msg.ai .bubble { box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }

/* list: a bare header (the brand in the user's colours, search and new buttons), a row of favourite contacts, glass search, glass rows */
.list-head { margin: calc(8px + var(--safe-t)) 0 0; padding: 8px 14px 6px; gap: 10px; }
.list-head .brand-name { background: linear-gradient(90deg, var(--br1), var(--br2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; font-size: calc(24px * var(--fz)); }
.list-head .brand-link { gap: 12px; }
/* the "Customize" pill at the end of the header (decision 42) */
.look-pill { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border: 0; border-radius: 99px; background: var(--fill); color: var(--on); font-weight: 700; font-size: calc(12.5px * var(--fz)); white-space: nowrap; box-shadow: 0 10px 22px -12px var(--a1), inset 0 0 0 2px #ffffff55; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.look-pill:active { transform: scale(.92); }
.look-emoji { display: inline-block; font-size: calc(20px * var(--fz)); line-height: 1; animation: lookSpin 6s linear infinite; }
@keyframes lookSpin { 50% { transform: rotate(20deg) scale(1.15); } }
.look-btn { color: var(--accent); background: var(--accent-soft); animation: lookPulse 4s ease-in-out infinite; }
@keyframes lookPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.favs { display: flex; gap: 12px; padding: 6px 14px 10px; overflow-x: auto; scrollbar-width: none; flex: none; position: relative; z-index: 2; }
.favs::-webkit-scrollbar, .chat-list::-webkit-scrollbar { display: none; }
.fav { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; flex: none; padding: 0; border: 0; background: transparent; font: inherit; text-align: center; color: var(--muted); font-size: calc(12px * var(--fz)); text-decoration: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.fav:active { transform: scale(.92); }
.fav .avatar { --s: 54px; }
.fav-av { position: relative; display: block; }
.fav-dot { position: absolute; top: -1px; inset-inline-end: -1px; width: 15px; height: 15px; border-radius: 50%; background: var(--fill); border: 2.5px solid var(--bg); animation: badgePop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.fav-hint { align-self: center; max-width: 230px; margin: 0; padding-inline: 4px; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.35; }
.fav-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.fav-new { background: var(--fill); color: var(--on); }
.fav-new .ico { width: 28px; height: 28px; }
.list-search { padding: 2px 14px 8px; }
.list-search .ico { z-index: 1; top: 13px; inset-inline-start: 28px; width: 22px; height: 22px; pointer-events: none; }
.list-search .input { min-height: 44px; height: 44px; padding-inline-start: 46px; border: var(--gw) solid var(--glass-line); border-radius: 20px; background: var(--glass); }
.chat-list { padding: 9px 0 calc(104px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.chat-list li { padding: 0 12px; }
.chat-row { padding: var(--row-pad) 14px; border-radius: 24px; background: var(--glass); border: var(--gw) solid var(--glass-line); border-inline-start: var(--gw) solid var(--glass-line); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), background-color .2s; }
.chat-row:hover { background: color-mix(in srgb, var(--glass) 85%, var(--a1)); transform: translateY(-2px); }
.chat-row:active { transform: scale(.975); }
.chat-row.active { background: var(--accent-soft); border-color: var(--accent); }
.chat-row .avatar { --s: var(--av); }
.chat-line { gap: 8px; }
.chat-title { font-size: calc(var(--fs) + 1px); }
.chat-preview { font-size: calc(var(--fs) - 1px); }
.chat-preview.typing { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.chat-preview .dots-anim { margin-inline-start: 0; }
.chat-preview .dots-anim i { width: 7px; height: 7px; }
.chat-row .badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; font-size: calc(13px * var(--fz)); font-weight: 800; }
.chat-row .ai-pill { margin: 0; padding: 1px 7px; font-size: calc(10px * var(--fz)); line-height: 1.4; }
.chat-row .mini-ico .ico { width: 22px; height: 22px; }
.chat-row .mark, .chat-head .mark { border-radius: 50%; }
.chat-time.unread { color: var(--accent); }
.chat-row.fly { animation: rowIn .6s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes rowIn { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); } }
.badge { background: var(--accent); color: var(--accent-ink); animation: badgePop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes badgePop { from { transform: scale(0); } }
.badge.muted { background: var(--muted); color: var(--bg); animation: none; }
.ai-pill { background: linear-gradient(135deg, var(--a1), var(--a2)); color: var(--on); }
.tabbar { position: absolute; z-index: 5; inset-inline: 18px; bottom: calc(12px + var(--safe-b)); display: flex; justify-content: space-around; align-items: center; padding: 6px 6px 5px; border-radius: 30px; background: var(--glass); border: var(--gw) solid var(--glass-line); }
/* modern tabs (decision 42): the icon sits in a pill that fills in for the active tab, the icon turns from outline to tinted, a small bounce on tap */
.tb { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 2px 0 0; border: 0; background: transparent; color: var(--muted); font-size: calc(11px * var(--fz)); font-weight: 500; text-decoration: none; }
.tb-ico { position: relative; display: grid; place-items: center; width: 60px; height: 32px; border-radius: 16px; transition: background-color .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tb-ico::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--a1) 24%, transparent); transform: scaleX(.3); opacity: 0; transition: transform .4s cubic-bezier(.3, 1.5, .5, 1), opacity .25s; }
.tb-ico .ico { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity .2s, transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.tb-ico .ico.on { opacity: 0; transform: scale(.5) rotate(-14deg); }
.tb:active .tb-ico { transform: scale(.88); }
.tb[aria-current="page"] { color: var(--accent); font-weight: 800; }
.tb[aria-current="page"] .tb-ico::before { transform: none; opacity: 1; }
.tb[aria-current="page"] .tb-ico .ico.off { opacity: 0; transform: scale(.5) rotate(14deg); }
.tb[aria-current="page"] .tb-ico .ico.on { opacity: 1; transform: none; }
.tb.bump .tb-ico { animation: tbBounce .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tbBounce { 0% { transform: scale(1); } 30% { transform: scale(.82); } 62% { transform: scale(1.14) translateY(-2px); } 100% { transform: scale(1); } }
.tb-badge { position: absolute; top: -4px; inset-inline-end: 4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); color: var(--on); font-size: calc(11px * var(--fz)); font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 85%, transparent); animation: badgePop .6s cubic-bezier(.3, 1.8, .5, 1) both; z-index: 1; }

/* the Smilo mark in the user's colours */
.mark { position: relative; display: inline-grid; place-items: center; border-radius: 30%; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 6px 16px -6px var(--a1); color: var(--accent); }
.mark svg { width: 72%; height: 72%; overflow: visible; }
.mark .bub { fill: #fff; }
.mark .sm { stroke: currentColor; fill: none; }

/* pages and cards */
.page-head { margin: calc(8px + var(--safe-t)) 10px 0; padding: 6px 10px 6px 8px; border-radius: 26px; background: var(--glass); border: var(--gw) solid var(--glass-line); }
.card-section, .group, .account-card, .person-card, .other-ai { background: var(--surface); border-color: var(--glass-line); box-shadow: 0 8px 24px -16px rgba(40, 20, 90, .4); }
.auth, .flow { background: transparent; }
.auth-card, .flow-card { background: var(--glass); border: 1px solid var(--glass-line); }
.gemini-card { background: linear-gradient(160deg, color-mix(in srgb, var(--a2) 24%, var(--surface)), var(--surface)); border-color: var(--ai-border); }
.step { background: var(--surface); }
.dot.on { background: var(--accent); }
.progress span { background: linear-gradient(90deg, var(--a1), var(--a2)); }
.btn.primary { box-shadow: 0 10px 22px -12px var(--accent); }
.avatar-badge { border-color: var(--bg); }
.chip { background: var(--glass); border-color: var(--glass-line); min-height: 44px; padding: 0 16px; color: var(--text); }
.chip.suggestion { background: var(--glass); border: var(--gw) solid var(--glass-line); color: var(--text); animation: chipIn .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes chipIn { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.92); } }
.chip.on { background: var(--accent); color: var(--accent-ink); }

/* chat */
.chat-head { margin: calc(4px + var(--safe-t)) 10px 0; padding: calc(6px - var(--gw)) calc(8px - var(--gw)); gap: 4px; border-radius: 26px; background: var(--glass); border: var(--gw) solid var(--glass-line); position: relative; z-index: 4; }
.chat-head .icon-btn { width: 44px; height: 44px; }
.head-info { gap: 8px; padding: 0 4px; }
.head-title { font-size: calc(var(--fs) + 1px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-sub { font-size: calc(12px * var(--fz)); min-height: 16px; line-height: 1.35; }
.head-sub.typing { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.head-sub .dots-anim { margin-inline-start: 0; }
.head-sub:empty { display: none; }
.pinned, .banner { margin: 6px 10px 0; border-radius: 18px; border: 1px solid var(--glass-line); background: var(--card); }
.banner { background: var(--accent-soft); }
.banner.soft { background: var(--card); color: var(--muted); }
.msgs-wrap { position: relative; overflow: hidden; }
.chat { isolation: isolate; } /* the wallpaper sits behind the header and the composer too, as in the preview */
.msgs { padding: 14px calc(12px + var(--safe-r)) 20px calc(12px + var(--safe-l)); scrollbar-width: none; }
.msgs::-webkit-scrollbar { display: none; }
.msg-list { gap: var(--msg-gap); }
.day { margin: 6px 0; }
.day span { padding: calc(3px - var(--gw)) calc(12px - var(--gw)); background: var(--glass); border: var(--gw) solid var(--glass-line); color: var(--muted); font-weight: 700; }
.sys { background: var(--card); border: 1px solid var(--glass-line); }
.bubble { font-size: var(--fs); padding: var(--bub-y) 13px calc(var(--bub-y) - 2px); border-radius: var(--br); box-shadow: 0 6px 16px -12px rgba(40, 20, 90, .5); transition: border-radius .4s, background-color .4s; }
.msg.mine .bubble { background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--bon); border-end-end-radius: var(--rad2); box-shadow: 0 10px 26px -10px var(--b1), inset 0 1px 0 rgba(255, 255, 255, .4); }
.msg.theirs .bubble { background: var(--their-bg); color: var(--their-ink); border: var(--gw) solid var(--glass-line); border-end-start-radius: var(--rad2); }
.msg.ai .bubble { background: var(--their-bg); color: var(--their-ink); border: var(--gw) solid var(--glass-line); border-end-start-radius: var(--rad2); }
.msg.enter { animation: msgIn .6s cubic-bezier(.2, 1.1, .3, 1.15) both; }
@keyframes msgIn { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.92); } 60% { transform: translate3d(0, -3px, 0) scale(1.01); } }
.b-ai { color: var(--accent); }
.b-meta { color: var(--muted); }
.msg.mine .b-meta { color: color-mix(in srgb, var(--bon) 78%, transparent); }
.msg.mine .b-quote { border-inline-start-color: var(--bon); background: color-mix(in srgb, var(--bon) 14%, transparent); }
.msg.mine .b-quote strong { color: inherit; }
.msg.mine .b-extra { background: color-mix(in srgb, var(--bon) 14%, transparent); }
.msg.mine .b-extra small, .msg.mine .b-fwd { color: inherit; opacity: .85; }
.msg.mine .b-text a { color: inherit; }
.msg.mine .voice-play { background: var(--bon); color: var(--b1); }
.msg.mine .seek { accent-color: var(--bon); }
.msg.mine .poll-q .ico { color: inherit; }
.msg.mine .poll-mark { border-color: currentColor; }
.msg.mine .poll-opt.on .poll-mark { background: var(--bon); border-color: var(--bon); color: var(--b1); }
.msg.mine .poll-bar { background: color-mix(in srgb, var(--bon) 22%, transparent); }
.msg.mine .poll-bar span { background: var(--bon); }
.msg.mine .poll-opt:hover { background: color-mix(in srgb, var(--bon) 10%, transparent); }
.msg.mine .btn.link { color: inherit; }
.b-quote { background: var(--surface-2); }
.b-extra { background: var(--surface-2); }
.poll-bar { background: var(--surface-2); }
.poll-opt:hover { background: var(--surface-2); }
.bubble.bare .b-meta { background: var(--card); }
.to-bottom { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.suggest, .uploads, .reply-bar { background: transparent; border: 0; }
.reply-bar { margin: 0 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--glass-line); padding-inline-start: 14px; }
.upload { background: var(--card); margin: 0 10px 4px; border-radius: 14px; }
.suggest { padding: 6px 12px 4px; }
.chip.suggestion { min-height: 44px; font-size: calc(var(--fs) - 1px); }

/* composer: a floating pill */
.composer { background: transparent; align-items: flex-end; gap: 6px; padding: 4px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); }
.composer-pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 30px; background: var(--glass); border: var(--gw) solid var(--glass-line); padding: calc(3px - var(--gw)) calc(4px - var(--gw)) calc(3px - var(--gw)) calc(6px - var(--gw)); }
.composer-pill .icon-btn { width: 44px; height: 44px; color: var(--muted); }
.composer-input { border: 0; background: transparent; font-size: max(16px, calc(16px * var(--fz))); padding: 11px 6px; min-height: 46px; border-radius: 0; }
.composer-input:focus-visible { outline: none; }
.composer-pill:focus-within { box-shadow: var(--shadow), 0 0 0 2px var(--accent); }
.send-btn { background: linear-gradient(135deg, var(--b1), var(--b2)); color: var(--bon); box-shadow: 0 8px 22px -6px var(--b1), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.send-btn:active { transform: scale(.88); }
.composer-note { background: var(--card); margin: 0 10px 10px; border-radius: 22px; }
.emoji-panel { margin: 0 10px 10px; border-radius: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: var(--gw) solid var(--glass-line); padding-bottom: 0; -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7); }
.rec-bar { background: var(--surface); border-radius: 28px; margin: 0 10px 10px; inset: 6px 0 0 0; padding: 4px 8px 4px 14px; }

/* sheets, menus, dialogs */
.sheet { background: color-mix(in srgb, var(--bg) 88%, transparent); border: var(--gw) solid var(--glass-line); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 -20px 60px -10px rgba(8, 6, 20, .5), inset 0 1px 0 var(--hi); }
.sheet.bottom { position: relative; border-radius: 30px 30px 0 0; animation: sheetUp .55s cubic-bezier(.2, 1, .3, 1); }
/* the grab handle of every bottom sheet and menu (ui.js swipeToClose): a real element, so a finger can take it; it stays at the top while the content scrolls */
.sheet-grab-wrap { position: sticky; top: 0; height: 0; z-index: 6; }
.sheet-grab { position: absolute; top: 0; left: 50%; width: 120px; height: 28px; margin-left: -60px; touch-action: none; cursor: grab; }
.sheet-grab span { position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: var(--muted); opacity: .5; transition: opacity .15s; }
.sheet-grab:hover span, .overlay.dragging .sheet-grab span { opacity: .85; }
.overlay.dragging .sheet-grab { cursor: grabbing; }
.overlay.bottom { background: color-mix(in srgb, var(--scrim) calc(var(--dim, 1) * 100%), transparent); }
.sheet.bottom { overscroll-behavior: contain; }
.overlay.dragging .sheet.bottom { user-select: none; -webkit-user-select: none; }
.menu-item.sep { margin-top: 5px; position: relative; }
.menu-item.sep::before { content: ""; position: absolute; top: -3px; inset-inline: 14px; height: 1px; background: var(--border); }
@keyframes sheetUp { from { transform: translate3d(0, 40px, 0); opacity: .4; } }
.sheet.popover { border-radius: 18px; }
.toast { background: color-mix(in srgb, #14122a 88%, transparent); border: 1px solid rgba(255, 255, 255, .14); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.input { background: var(--surface); border-color: var(--border); }
.list-search .input:focus-visible, .input:focus-visible { outline-offset: 0; }
input[type="checkbox"][role="switch"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
input[type="checkbox"][role="switch"]:checked { background: var(--accent); box-shadow: none; }
.seg { background: var(--surface-2); }

/* chat wallpapers: one layer behind the messages (follow the palette; transform / opacity animations only) */
.wall { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.wall::before, .wall::after { content: ""; position: absolute; }
.w-aurora::before { inset: -35%; background: radial-gradient(circle closest-side at 30% 30%, color-mix(in srgb, var(--w1) 55%, transparent), transparent), radial-gradient(circle closest-side at 72% 68%, color-mix(in srgb, var(--w2) 55%, transparent), transparent); animation: wAur 18s ease-in-out infinite alternate; will-change: transform; }
.w-aurora::after { inset: -35%; background: radial-gradient(circle closest-side at 70% 25%, color-mix(in srgb, #8a6cff 40%, transparent), transparent); animation: wAur 26s ease-in-out infinite alternate-reverse; will-change: transform; }
@keyframes wAur { from { transform: translate3d(-8%, -6%, 0) rotate(0) scale(1); } to { transform: translate3d(10%, 8%, 0) rotate(30deg) scale(1.15); } }
.w-photo .ph { position: absolute; inset: -6%; background-size: cover; background-position: center; animation: ken 26s ease-in-out infinite alternate; will-change: transform; }
.w-photo::after { inset: 0; background: color-mix(in srgb, var(--bg) 42%, transparent); }
@keyframes ken { to { transform: scale(1.1) translate3d(-2%, -2%, 0); } }

/* the Customize sheet and the Look page */
.look-sheet { display: flex; flex-direction: column; max-height: min(86dvh, 720px); }
.sh-head { display: flex; align-items: center; gap: 10px; padding: 16px 12px 4px 20px; }
.sh-head h2 { font-size: calc(20px * var(--fz)); }
.look-scroll { overflow-y: auto; padding: 4px 18px 8px; overscroll-behavior: contain; flex: 1; min-height: 0; }
.sh-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 8px 18px calc(14px + var(--safe-b)); }
.look { display: flex; flex-direction: column; gap: 20px; }
.look-sec h3 { margin: 0 0 8px; font-size: calc(13px * var(--fz)); color: var(--muted); font-weight: 700; }
.pal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pal { height: 58px; border: 0; border-radius: 18px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--pi, #1b1730); font-size: calc(12px * var(--fz)); font-weight: 800; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), box-shadow .3s; }
.pal:active { transform: scale(.92); }
.pal[aria-checked="true"] { transform: scale(1.05); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.seg3 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: var(--surface-2); }
.seg3 button { min-height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-weight: 700; font-size: calc(14px * var(--fz)); padding: 0 6px; transition: background-color .3s, color .3s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.seg3 button:active { transform: scale(.94); }
.seg3 button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 16px -8px var(--accent); }
.wp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wp-tile { position: relative; min-height: 66px; border: 0; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 34px 4px 6px; background: var(--surface-2); color: #fff; font-size: calc(12px * var(--fz)); font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), box-shadow .3s; }
.wp-tile:active { transform: scale(.92); }
.wp-tile[aria-checked="true"] { transform: scale(1.04); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.wp-name { text-align: center; line-height: 1.15; }
.wp-tile::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.wp-tile > * { position: relative; z-index: 1; }
.wp-tile .ico { position: absolute; top: 8px; width: 22px; height: 22px; }
.wp-default, .wp-none { color: var(--text); text-shadow: none; }
.wp-default .ico { color: var(--accent); }
.wp-aurora::before { background: radial-gradient(circle at 20% 30%, var(--a1), transparent 55%), radial-gradient(circle at 80% 70%, var(--a2), transparent 55%), #20184a; }
.wp-waves::before { background: repeating-radial-gradient(circle at 50% 120%, var(--a1) 0 8px, var(--a2) 8px 16px); opacity: .85; }
.wp-bubbles::before { background: radial-gradient(circle at 25% 70%, #ffffff66 0 10px, transparent 11px), radial-gradient(circle at 70% 40%, #ffffff55 0 14px, transparent 15px), radial-gradient(circle at 50% 85%, #ffffff44 0 7px, transparent 8px), linear-gradient(160deg, var(--a2), var(--a1)); }
.wp-stars::before { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 60% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent), radial-gradient(2px 2px at 35% 75%, #fff, transparent), #151338; }
.wp-drift::before { background: conic-gradient(from 0deg, var(--a1), var(--a2), #8a6cff, var(--a1)); }
.wp-photo::before { background: var(--img, linear-gradient(#ffb36b, #ff6a88 45%, #5c3c8f 70%, #1a1240)) center / cover; }
.wp-empty::before { background: var(--surface-2); }
.wp-photo.wp-empty { color: var(--text); text-shadow: none; }
.sw-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), box-shadow .3s; }
.sw.auto { background: conic-gradient(var(--a1), var(--a2), var(--a1)); }
.sw:active { transform: scale(.88); }
.sw[aria-checked="true"] { transform: scale(1.12); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }

::placeholder { color: var(--muted); opacity: 1; }
/* deep colour control: sliders, follow-my-colour rows, the colour picker */
:root.dragging { transition: none; }
.h3-val { display: flex; justify-content: space-between; gap: 8px; }
.h3-val em { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.look-group { margin: 4px 0 -8px; font-size: calc(15px * var(--fz)); font-weight: 800; }
.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row small { min-width: 44px; text-align: center; font-size: calc(12px * var(--fz)); color: var(--muted); font-weight: 700; }
.sld { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; background: transparent; margin: 0; --track: linear-gradient(90deg, var(--a2), var(--a1)); touch-action: pan-y; }
.sld::-webkit-slider-runnable-track { height: 14px; border-radius: 99px; background: var(--track); box-shadow: inset 0 0 0 1px var(--border); }
.sld::-moz-range-track { height: 14px; border-radius: 99px; background: var(--track); box-shadow: inset 0 0 0 1px var(--border); }
.sld::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .4); }
.sld::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .4); }
.sld:focus-visible { outline-offset: 4px; }
.cp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 48px; }
.cp-swatch { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--border), 0 6px 14px -6px rgba(0, 0, 0, .5); }
.cp-swatch.follow { background: conic-gradient(var(--a1), var(--a2), var(--a1)) !important; }
.cp-title { flex: 1 1 7rem; min-width: 0; font-weight: 800; font-size: calc(14px * var(--fz)); }
.cp-title small { display: block; font-weight: 600; color: var(--muted); font-size: calc(12px * var(--fz)); }
.cp-follow { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-inline-start: auto; font-size: calc(12px * var(--fz)); font-weight: 700; color: var(--muted); }
.cp { display: flex; flex-direction: column; gap: 10px; }
.cp-body { display: grid; gap: 10px; }
.cp-pad { position: relative; height: 150px; border-radius: 18px; touch-action: none; cursor: crosshair; direction: ltr; --L: 58%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border);
  background: linear-gradient(to bottom, hsl(0 0% var(--L) / 0), hsl(0 0% var(--L))), linear-gradient(to right, hsl(0 100% var(--L)), hsl(60 100% var(--L)), hsl(120 100% var(--L)), hsl(180 100% var(--L)), hsl(240 100% var(--L)), hsl(300 100% var(--L)), hsl(360 100% var(--L))); }
.cp-knob { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; transition: transform .15s; }
.cp-pad:active .cp-knob { transform: scale(1.2); }
.cp-light { --track: linear-gradient(90deg, #000, hsl(var(--hh, 0) var(--ss, 100%) 50%), #fff); }
.cp-hex { display: flex; align-items: center; gap: 8px; }
.cp-hex-in { flex: 1; min-height: 44px; border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; font: 700 max(16px, calc(16px * var(--fz))) ui-monospace, Menlo, monospace; background: var(--surface); color: var(--text); text-transform: uppercase; direction: ltr; text-align: start; }
.cp-hex-in.bad { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.sw.custom { background: conic-gradient(#ff5c5c, #ffd24d, #5cff8f, #4dc3ff, #b06cff, #ff5c5c); }
.sw.custom[aria-checked="true"] { background: var(--c1); }


/* ---------- decision 41: the emoji picker and Smilo's own stickers ---------- */
.emoji-panel { height: min(340px, calc(var(--app-h, 100dvh) * .5)); max-height: none; position: relative; overflow: hidden; }
.emoji-panel > .spinner { margin: auto; }
.emoji-panel > p { margin: auto; padding: 16px; }
.ep-root { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ep-tabs { display: flex; gap: 6px; padding: 8px 10px 4px; flex: none; overflow-x: auto; scrollbar-width: none; }
.ep-tab { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font-weight: 800; font-size: calc(14px * var(--fz)); display: inline-flex; align-items: center; gap: 6px; transition: background-color .25s, color .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.ep-tab[aria-selected="true"] { background: var(--fill); color: var(--on); }
.ep-tab:active { transform: scale(.94); }
.ep-tab .mark { box-shadow: none; }
.ep-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ep-pane[hidden] { display: none; }
.sticker-grid.ep-pane { display: grid; align-content: start; flex: 1; }
.sticker-grid.ep-pane[hidden] { display: none; }
.ep-bar { display: flex; gap: 8px; padding: 2px 10px 4px; align-items: center; flex: none; }
.ep-search { flex: 1; min-width: 0; min-height: 44px; border: var(--gw) solid var(--glass-line); border-radius: 99px; padding: 0 16px; background: var(--glass); color: var(--text); font-size: max(16px, calc(16px * var(--fz))); }
.ep-search:focus-visible { outline-offset: 0; }
.ep-tone { width: 44px; height: 44px; flex: none; padding: 0; border: var(--gw) solid var(--glass-line); border-radius: 50%; background: var(--glass); font-size: calc(22px * var(--fz)); line-height: 1; }
.ep-cats { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ep-cats::-webkit-scrollbar { display: none; }
.ep-cat { flex: none; width: 44px; height: 40px; padding: 0; border: 0; font-size: calc(20px * var(--fz)); border-radius: 12px; background: transparent; opacity: .55; transition: opacity .2s, background-color .2s; }
.ep-cat[aria-current="true"] { opacity: 1; background: var(--glass); }
.ep-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; overscroll-behavior: contain; position: relative; }
.ep-sec h4 { margin: 10px 4px 4px; font-size: calc(12.5px * var(--fz)); color: var(--muted); font-weight: 800; position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 2px 0; z-index: 1; }
.ep-sec { content-visibility: auto; contain-intrinsic-size: 0 600px; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.eb { position: relative; min-height: 46px; padding: 0; border: 0; background: transparent; font-size: calc(28px * var(--fz)); line-height: 1; border-radius: 12px; display: grid; place-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.eb:active { background: var(--glass); transform: scale(1.25); }
.eb.new::after { content: attr(data-new); position: absolute; top: 0; inset-inline-end: 0; font: 800 calc(8.5px * var(--fz))/1 var(--font); padding: 2px 4px; border-radius: 99px; background: var(--fill); color: var(--on); }
.ep-none { padding: 30px; text-align: center; color: var(--muted); }
.ep-pop { position: absolute; z-index: 20; background: color-mix(in srgb, var(--bg) 94%, transparent); border: var(--gw) solid var(--glass-line); border-radius: 20px; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); padding: 6px; display: grid; grid-template-columns: repeat(6, 44px); gap: 2px; animation: epPop .35s cubic-bezier(.3, 1.8, .5, 1); }
.ep-pop[hidden] { display: none; }
.ep-pop .eb { width: 44px; }
.ep-pop .eb.sel { background: var(--glass); box-shadow: inset 0 0 0 2px var(--accent); }
.ep-tones { top: 52px; inset-inline-end: 8px; }
@keyframes epPop { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
.ep-smilo { overflow-y: auto; padding: 4px 10px 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.ep-smilo[hidden] { display: none; }
.sp { position: relative; aspect-ratio: 1; padding: 8px 8px 16px; border: var(--gw) solid var(--glass-line); border-radius: 22px; background: var(--glass); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.sp:active { transform: scale(.92); }
.sp > span { position: absolute; inset-inline: 0; bottom: 3px; text-align: center; font-size: calc(11px * var(--fz)); font-weight: 800; color: var(--muted); }
.sp .ss-wrap, .sticker.svg .ss-wrap { width: 100%; height: 100%; }
.sticker.svg { width: 120px; height: 124px; padding: 0; font-size: 0; --it: 3; }
.sticker.svg:not(.play) .ss, .sticker.svg:not(.play) .ss * { animation: none !important; }
.sticker.svg .ss-wrap { width: 100%; height: 100%; }
.sticker.svg .ss-wrap, .sticker.svg .ss { pointer-events: none; }

/* Smilo's own stickers: drawn in the viewer's colours */
.ss { width: 100%; height: 100%; overflow: visible; display: block; }
.ss .s-all { transform-box: fill-box; transform-origin: 50% 70%; }
.s-face { fill: var(--face); stroke: var(--sbd); stroke-width: .55px; stroke-linejoin: round; }
.s-ink { fill: var(--fi); } .s-line { stroke: var(--fi); stroke-width: 1.05; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-acc { fill: var(--a2); stroke: var(--sbd); stroke-width: .4px; } .s-acc1 { fill: var(--a1); stroke: var(--sbd); stroke-width: .4px; }
.s-blush { fill: #ff9db8; opacity: .85; } .s-tear { fill: #8fd3ff; stroke: #4aa3d8; stroke-width: .25; } .s-heart { fill: #ff5b86; } .s-white { fill: #fff; stroke: var(--sbd); stroke-width: .4px; }
.s-glass { fill: #231d3b; } .s-glint { fill: #fff; opacity: .55; } .s-bulb { fill: #ffd95a; stroke: var(--sbd); stroke-width: .4px; }
.s-txt { fill: var(--fi); font: 800 4px "Arial Rounded MT Bold", system-ui, sans-serif; }
.ss g, .ss path, .ss circle, .ss ellipse, .ss rect, .ss text { transform-box: fill-box; transform-origin: center; }
.ss-laugh .s-all { animation: s-laugh .55s ease-in-out var(--it, infinite); }
.ss-laugh .t1 { animation: s-tear 1.1s ease-in var(--it, infinite); } .ss-laugh .t2 { animation: s-tear 1.1s .35s ease-in var(--it, infinite); }
.ss-laugh .mouth { animation: s-chomp .55s ease-in-out var(--it, infinite); }
@keyframes s-laugh { 0%, 100% { transform: rotate(-4deg) translateY(0); } 25% { transform: rotate(4deg) translateY(-1.2px); } 50% { transform: rotate(-4deg) translateY(0); } 75% { transform: rotate(4deg) translateY(-1.2px); } }
@keyframes s-tear { 0% { transform: translate(0, 0) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, -3px), 7px) scale(1); opacity: 0; } }
.ss-laugh .t2 { --dx: 3px; }
@keyframes s-chomp { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }
.ss-love .s-all { animation: s-bob 2s ease-in-out var(--it, infinite); }
.ss-love .eyeh { animation: s-beat .9s ease-in-out var(--it, infinite); } .ss-love .eyeh.e2 { animation-delay: .08s; }
.ss-love .fh { animation: s-rise 2.2s ease-out var(--it, infinite); opacity: 0; } .ss-love .fh.h2 { animation-delay: .7s; } .ss-love .fh.h3 { animation-delay: 1.4s; }
@keyframes s-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.4px) rotate(2deg); } }
@keyframes s-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1); } 60% { transform: scale(1.25); } }
@keyframes s-rise { 0% { transform: translateY(2px) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-9px) scale(1); opacity: 0; } }
.ss-party .s-all { animation: s-hop 1s ease-in-out var(--it, infinite); }
.ss-party .hat { animation: s-hat 1s ease-in-out var(--it, infinite); transform-origin: 30% 100%; }
.ss-party .cf { animation: s-conf 1.6s ease-out var(--it, infinite); opacity: 0; } .ss-party .cf:nth-of-type(2n) { animation-delay: .4s; } .ss-party .cf:nth-of-type(3n) { animation-delay: .8s; } .ss-party .cf:nth-of-type(5n) { animation-delay: 1.2s; }
@keyframes s-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(0) scale(1.06, .94); } 55% { transform: translateY(-3px) scale(.96, 1.05); } }
@keyframes s-hat { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes s-conf { 0% { transform: translate(0, 4px) rotate(0) scale(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--cx, 5px), var(--cy, 12px)) rotate(var(--cr, 240deg)) scale(1); opacity: 0; } }
.ss-sleepy .s-all { animation: s-breathe 2.6s ease-in-out var(--it, infinite); }
.ss-sleepy .z { animation: s-z 2.6s ease-in var(--it, infinite); opacity: 0; } .ss-sleepy .z.z2 { animation-delay: .8s; } .ss-sleepy .z.z3 { animation-delay: 1.6s; }
@keyframes s-breathe { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(1.045, .96) rotate(2deg); } }
@keyframes s-z { 0% { transform: translate(0, 3px) scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(5px, -7px) scale(1.2); opacity: 0; } }
.ss-think .s-all { animation: s-tilt 3s ease-in-out var(--it, infinite); }
.ss-think .bulb { animation: s-bulb 3s ease-in-out var(--it, infinite); } .ss-think .rays { animation: s-rays 3s ease-in-out var(--it, infinite); }
.ss-think .pupil { animation: s-look 3s ease-in-out var(--it, infinite); }
@keyframes s-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(3deg); } }
@keyframes s-bulb { 0%, 25% { opacity: .25; transform: scale(.85); } 35%, 45% { opacity: 1; transform: scale(1.12); } 55% { opacity: .6; } 65%, 100% { opacity: 1; transform: scale(1); } }
@keyframes s-rays { 0%, 30% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes s-look { 0%, 100% { transform: translate(-.4px, 0); } 50% { transform: translate(.5px, -.5px); } }
.ss-wink .s-all { animation: s-tilt2 2.4s ease-in-out var(--it, infinite); }
.ss-wink .eye2 { animation: s-wink 2.4s ease-in-out var(--it, infinite); }
.ss-wink .spark { animation: s-spark 2.4s ease-in-out var(--it, infinite); }
@keyframes s-tilt2 { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(-1px); } }
@keyframes s-wink { 0%, 55%, 100% { transform: scaleY(1); } 62%, 78% { transform: scaleY(.12); } }
@keyframes s-spark { 0%, 55% { transform: scale(0) rotate(0); opacity: 0; } 70% { transform: scale(1.3) rotate(40deg); opacity: 1; } 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
.ss-shy .s-all { animation: s-sway 2.6s ease-in-out var(--it, infinite); }
.ss-shy .blush { animation: s-blush 1.8s ease-in-out var(--it, infinite); }
.ss-shy .pupil { animation: s-dart 2.6s ease-in-out var(--it, infinite); }
@keyframes s-sway { 0%, 100% { transform: rotate(-5deg) translateX(-.6px); } 50% { transform: rotate(5deg) translateX(.6px); } }
@keyframes s-blush { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes s-dart { 0%, 100% { transform: translateX(-.5px); } 50% { transform: translateX(.6px); } }
.ss-grumpy .s-all { animation: s-grr .3s linear var(--it, infinite); }
.ss-grumpy .steam { animation: s-steam 1.6s ease-out var(--it, infinite); opacity: 0; } .ss-grumpy .steam.st2 { animation-delay: .8s; }
.ss-grumpy .cheek { animation: s-blush 1.4s ease-in-out var(--it, infinite); }
@keyframes s-grr { 0%, 100% { transform: translateX(-.35px); } 50% { transform: translateX(.35px); } }
@keyframes s-steam { 0% { transform: translateY(2px) scale(.4); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-9px) scale(1.4); opacity: 0; } }
.ss-cool .s-all { animation: s-nod 3.4s ease-in-out var(--it, infinite); }
.ss-cool .glasses { animation: s-slide 3.4s cubic-bezier(.3, 1.4, .5, 1) var(--it, infinite); }
.ss-cool .glint { animation: s-glint 3.4s linear var(--it, infinite); }
@keyframes s-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg) translateY(.6px); } }
@keyframes s-slide { 0% { transform: translateY(-11px); opacity: 0; } 12% { opacity: 1; } 28%, 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes s-glint { 0%, 50% { transform: translateX(-4px); opacity: 0; } 60% { opacity: .9; } 78%, 100% { transform: translateX(5px); opacity: 0; } }
.ss-hcry .s-all { animation: s-wob 1.2s ease-in-out var(--it, infinite); }
.ss-hcry .tr1 { animation: s-stream 1.3s ease-in var(--it, infinite); } .ss-hcry .tr2 { animation: s-stream 1.3s .4s ease-in var(--it, infinite); }
.ss-hcry .spark { animation: s-spark 2.2s ease-in-out var(--it, infinite); }
@keyframes s-wob { 0%, 100% { transform: rotate(-2.5deg) scale(1); } 50% { transform: rotate(2.5deg) scale(1.03); } }
@keyframes s-stream { 0% { transform: translateY(-1px) scaleY(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(5px) scaleY(1.1); opacity: 0; } }
.ss-thumb .s-all { animation: s-bob 1.8s ease-in-out var(--it, infinite); }
.ss-thumb .hand { animation: s-thumb 1.4s cubic-bezier(.3, 1.6, .5, 1) var(--it, infinite); transform-origin: 50% 100%; }
@keyframes s-thumb { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-2.6px) rotate(-10deg) scale(1.1); } 60% { transform: translateY(0) rotate(2deg); } }
.ss-hug .s-all { animation: s-squeeze 1.5s ease-in-out var(--it, infinite); }
.ss-hug .arm { animation: s-arm 1.5s ease-in-out var(--it, infinite); }
.ss-hug .fh { animation: s-rise 2.2s ease-out var(--it, infinite); opacity: 0; } .ss-hug .fh.h2 { animation-delay: 1.1s; }
@keyframes s-squeeze { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.06, .95); } }
@keyframes s-arm { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.93); } }

.ss .arm-o { fill: none; stroke: var(--sbd); stroke-width: 3.9px; stroke-linecap: round; }
.ss .arm-i { fill: none; stroke: var(--a2); stroke-width: 3px; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .ss, .ss * { animation: none !important; } }

/* fallbacks */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-head, .page-head, .tabbar, .composer-pill, .sheet, .toast, .auth-card, .flow-card, .chat-row, .chip { background: var(--solid); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--solid) !important; --surface: var(--solid); --card: var(--solid); --their-bg: var(--solid) !important; }
  .glass, .list-search .input, .chat-row, .chip, .day span, .msg.theirs .bubble, .emoji-panel, .chat-head, .page-head, .tabbar, .composer-pill, .sheet, .toast, .auth-card, .flow-card, .to-bottom { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet { background: var(--solid); }
  .aurora i { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .look-btn, .wall *, .wall::before, .wall::after, .chat-row.fly, .msg.enter { animation: none !important; }
  .sheet.bottom { animation: none !important; transition: none !important; }
}

/* filled controls: the bright gradient with dark ink (contrast checked per palette); --accent stays the darker text colour */
.btn.primary, .chip.on, .seg-btn.on, .seg3 button[aria-checked="true"], .step-n, .badge, .art-btn, .avatar-badge, .voice-play, input[type="checkbox"][role="switch"]:checked { background: var(--fill); color: var(--on); }
.chip.on { border-color: transparent; }
.btn.primary { box-shadow: 0 10px 22px -12px var(--a1); }
.btn.primary:hover { filter: brightness(1.04); }
.btn.busy::after { border-color: var(--on); border-top-color: transparent; }
.badge.muted { background: var(--muted); color: var(--bg); }
.msg.mine .voice-play { background: var(--bon); color: var(--b1); }
.send-btn:disabled { opacity: .5; }
.look-btn { background: var(--fill); color: var(--on); }

.bubble.bare .b-sender { background: var(--card); border-radius: 99px; padding: 0 9px; width: fit-content; margin-inline-start: 0; }
.msg.mine .poll small, .msg.mine .poll-foot .muted, .msg.mine .poll-foot span { color: inherit; opacity: .85; }

/* ---------- Smilo notes (decision 43): the pop-up note and the Smilo page ---------- */
/* the pop-up: a calm "message from Smilo". The screen behind dims and blurs; a floating glass card with a gradient hairline,
   a soft glow in the user's colours, and the Smilo face resting on its top edge */
.overlay.note { background: radial-gradient(72% 46% at 50% 50%, color-mix(in srgb, var(--a1) 24%, transparent), transparent 78%), var(--scrim); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); animation: fade .45s ease-out; transition: opacity .24s ease; }
.overlay.note.leaving { opacity: 0; pointer-events: none; }
.sheet.note { max-width: 388px; max-height: none; overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; animation: noteIn .85s cubic-bezier(.2, 1.2, .3, 1) backwards; transition: transform .24s ease, opacity .24s ease; touch-action: pan-y; }
.overlay.note.leaving .sheet.note { transform: translate3d(0, 8px, 0) scale(.94); opacity: 0; }
.note-wrap { position: relative; margin-top: 34px; }
.note-glow { position: absolute; inset: 24px -10px -16px; border-radius: 44px; background: conic-gradient(from 210deg, var(--a1), var(--a2), var(--a1)); filter: blur(44px); opacity: .5; animation: noteGlow 7s ease-in-out infinite alternate; pointer-events: none; }
.note-card { position: relative; z-index: 1; display: flex; flex-direction: column; max-height: calc(var(--app-h, 100dvh) - 90px); border-radius: 30px; text-align: start; color: var(--text); background: linear-gradient(168deg, color-mix(in srgb, var(--a1) 10%, var(--solid)), var(--solid) 58%); box-shadow: 0 34px 70px -34px var(--a1), var(--shadow), inset 0 1px 0 var(--hi); }
.note-edge { position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, var(--a1), color-mix(in srgb, var(--a2) 22%, transparent) 46%, color-mix(in srgb, var(--a1) 22%, transparent) 62%, var(--a2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.note-mark { position: absolute; z-index: 3; top: -32px; left: 50%; width: 64px; height: 64px; margin-left: -32px; }
.note-mark::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--a1); opacity: 0; animation: noteHalo 4.2s ease-out 1s infinite; }
.note-mark .mark { border-radius: 50%; box-shadow: 0 0 0 5px var(--solid), 0 14px 26px -8px var(--a1); animation: noteBreathe 4.2s ease-in-out infinite; }
.note-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: 30px; padding: 48px 28px 26px; }
.note-card:has(.note-foot) .note-scroll { padding-bottom: 20px; border-radius: 30px 30px 0 0; -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
.note-foot { flex: none; padding: 0 28px 26px; }
.note-head { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 16px; text-align: center; }
.note-kind { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 99px; background: color-mix(in srgb, var(--a1) 14%, transparent); color: var(--accent); font-size: calc(13.5px * var(--fz)); font-weight: 800; line-height: 1.3; }
.note-time { color: var(--muted); font-size: calc(12px * var(--fz)); }
.note-body { display: flex; flex-direction: column; }
.note-text { font-size: calc(18.5px * var(--fz)); line-height: 1.75; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.note-text.short { text-align: center; font-size: calc(21px * var(--fz)); line-height: 1.6; text-wrap: balance; }
:root[lang="ar"] .note-text { line-height: 1.95; }
:root[lang="ar"] .note-text.short { line-height: 1.8; }
.note-close { position: absolute; z-index: 3; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); transition: background-color .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.note-close::after { content: ""; position: absolute; inset: -6px; }
.note-close:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
.note-close:active { transform: scale(.88); }
.note-close .ico { width: 18px; height: 18px; }
.note-go { position: relative; overflow: hidden; width: 100%; min-height: 54px; padding: 0 24px; border: 0; border-radius: 99px; background: var(--fill); color: var(--on); font: inherit; font-size: calc(17px * var(--fz)); font-weight: 800; box-shadow: 0 16px 30px -16px var(--a1), inset 0 1px 0 #ffffff66; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), filter .2s; }
.note-go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffff55 50%, transparent 65%); transform: translateX(-120%); animation: noteSheen 1.5s ease-in-out 1.1s 1; }
.note-go:hover { filter: brightness(1.05); }
.note-go:active { transform: scale(.97); }
.note-done { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0; font-weight: 800; font-size: calc(18px * var(--fz)); color: var(--accent); animation: noteRise .25s ease-out; }
/* the questions note keeps its question widgets, in softer boxes */
.note-card .card-q { gap: 10px; margin: 12px 0 0; padding: 14px 16px 16px; border-radius: 22px; background: var(--surface-2); }
.note-card .card-q > strong { line-height: 1.5; }
.note-card .dialog-actions { position: sticky; bottom: -22px; justify-content: space-between; align-items: center; margin: 14px 0 -22px; padding: 12px 0 22px; background: linear-gradient(transparent, var(--solid) 16px); }
.note-card .dialog-actions .btn { min-height: 48px; border-radius: 99px; }
.note-card .dialog-actions .btn.primary { padding: 0 28px; background: var(--fill); color: var(--on); font-weight: 800; }
.note-card .dialog-actions .btn:disabled { filter: saturate(.4); }
@keyframes noteRise { from { transform: translateY(10px); opacity: 0; } }
@keyframes noteIn { from { opacity: 0; transform: translate3d(0, 46px, 0) scale(.88); } }
@keyframes noteSoft { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes noteGlow { from { opacity: .36; transform: scale(.97); } to { opacity: .58; transform: scale(1.03); } }
@keyframes noteBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes noteHalo { 0% { opacity: .55; transform: scale(.88); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes noteSheen { to { transform: translateX(120%); } }
/* a crisis note is calmer: no spring, no breathing, warm colours, a soft button */
.sheet.note.crisis { animation: noteSoft 1s ease-out backwards; }
.crisis .note-glow { background: radial-gradient(closest-side, var(--amber), var(--coral) 70%, transparent); opacity: .3; animation: none; }
.crisis .note-card { background: linear-gradient(170deg, color-mix(in srgb, var(--amber) 15%, var(--solid)), var(--solid) 62%); box-shadow: 0 30px 64px -38px var(--coral), var(--shadow), inset 0 1px 0 var(--hi); }
.crisis .note-edge { background: linear-gradient(150deg, color-mix(in srgb, var(--amber) 80%, transparent), color-mix(in srgb, var(--coral) 18%, transparent) 55%, color-mix(in srgb, var(--coral) 65%, transparent)); }
.crisis .note-mark::before { display: none; }
.crisis .note-mark .mark { animation: none; background: linear-gradient(135deg, var(--amber), var(--coral)); box-shadow: 0 0 0 5px var(--solid), 0 12px 24px -10px var(--coral); }
.crisis .note-kind { background: color-mix(in srgb, var(--amber) 22%, transparent); }
.crisis .note-text { line-height: 1.95; font-weight: 500; }
.crisis .note-go { background: color-mix(in srgb, var(--amber) 26%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 35%, transparent); }
.crisis .note-go::after { display: none; }
@media (prefers-reduced-motion: reduce) { .note-glow, .note-mark::before, .note-mark .mark, .note-go::after { animation: none !important; } .note-mark::before { opacity: 0; } .note-go::after { display: none; } }
@media (max-width: 420px) { .note-scroll { padding: 46px 22px 22px; } .note-foot { padding: 0 22px 22px; } }
.smilo-page .page-head .mark { border-radius: 50%; }
.head-title { display: flex; flex-direction: column; line-height: 1.2; }
/* the Smilo page: the same notes, lighter */
.note-list { display: flex; flex-direction: column; gap: 12px; }
.note-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 15px; border-radius: 22px; background: linear-gradient(162deg, color-mix(in srgb, var(--a1) 8%, var(--surface)), var(--surface)); box-shadow: 0 12px 26px -22px var(--a1), inset 0 1px 0 var(--hi); animation: noteRise .4s ease-out backwards; }
.note-item::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; opacity: .5; background: linear-gradient(140deg, var(--a1), color-mix(in srgb, var(--a2) 15%, transparent) 50%, var(--a2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.note-item.unseen::before { opacity: 1; padding: 1.5px; }
.note-item.kind-crisis { background: linear-gradient(162deg, color-mix(in srgb, var(--amber) 14%, var(--surface)), var(--surface)); }
.note-item.kind-crisis::before { background: linear-gradient(140deg, var(--amber), color-mix(in srgb, var(--coral) 20%, transparent) 55%, var(--coral)); opacity: .55; }
.note-item-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.note-item-head time { font-size: calc(12px * var(--fz)); white-space: nowrap; flex: none; }
/* a long label ("Pages and subscriptions") shortens with "…" instead of pushing the time out of the card (owner, 2026-10-22) */
.note-item-head strong { font-size: calc(14.5px * var(--fz)); white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.note-item { min-width: 0; max-width: 100%; }
/* every note lines up on the app's side, whatever language it is written in (dir="auto" still orders the punctuation right) */
:root[dir="rtl"] .note-item-text { text-align: right; }
:root[dir="ltr"] .note-item-text { text-align: left; }
.note-emoji { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 30%, transparent), color-mix(in srgb, var(--a2) 30%, transparent)); font-size: calc(16px * var(--fz)); line-height: 1; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fill); flex: none; }
.note-item-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; text-wrap: pretty; }
.note-item-text .ico { display: inline-flex; vertical-align: middle; margin-inline-end: 8px; color: var(--accent); }
.note-item-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.knows-summary { white-space: pre-wrap; line-height: 1.55; }
.knows-link { align-self: flex-start; }
.smilo-page .status-card p { margin-top: 2px; }

/* ---------- invite links (decision 44) ---------- */
.invite-card h2 { display: flex; align-items: center; gap: 8px; }
.invite-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--accent-soft); color: var(--text); text-align: start; animation: noteRise .35s ease-out; }
.invite-banner small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.35; }
.invite-banner.expired { background: #fff0c9; color: #4a3300; }
.invite-banner.expired .ico { color: inherit; }

/* ---------- Discover tab (decision 45) ---------- */
.discover-hero { position: relative; overflow: hidden; padding: 24px 22px 22px; border-radius: 30px; background: var(--fill); color: var(--on); box-shadow: 0 22px 44px -24px var(--a1), inset 0 1px 0 #ffffff66; animation: noteRise .5s ease-out backwards; }
.discover-hero > :not(.hero-orb) { position: relative; }
.discover-hero h2 { font-size: calc(24px * var(--fz)); line-height: 1.25; text-wrap: balance; }
.discover-hero p { margin-top: 8px; font-size: calc(15px * var(--fz)); line-height: 1.65; text-wrap: pretty; }
.hero-orb { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #ffffff80, transparent); pointer-events: none; animation: heroFloat 9s ease-in-out infinite alternate; }
.hero-orb.o1 { width: 190px; height: 190px; top: -70px; inset-inline-end: -50px; }
.hero-orb.o2 { width: 130px; height: 130px; bottom: -60px; inset-inline-start: -30px; animation-delay: -4s; }
@keyframes heroFloat { to { transform: translate3d(0, 14px, 0) scale(1.1); } }
.hero-pills { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-pills li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--on) 12%, transparent); font-size: calc(13px * var(--fz)); font-weight: 700; }
.hero-pills .ico { width: 16px; height: 16px; }
.discover-search { position: relative; }
.discover-search .ico { position: absolute; top: 50%; inset-inline-start: 16px; width: 22px; height: 22px; margin-top: -11px; color: var(--muted); pointer-events: none; z-index: 1; }
.discover-search .input { height: 48px; padding-inline-start: 46px; border: var(--gw) solid var(--glass-line); border-radius: 22px; background: var(--glass); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7); opacity: .85; }
.discover-search .input::placeholder { color: var(--muted); opacity: 1; }
.discover-chips { display: flex; gap: 8px; margin-inline: calc(-16px - var(--safe-l)); padding: 2px calc(16px + var(--safe-r)) 6px calc(16px + var(--safe-l)); overflow-x: auto; scrollbar-width: none; }
.discover-chips::-webkit-scrollbar { display: none; }
.discover-chips .chip { flex: none; }
.discover-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .discover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.discover-grid > li { animation: noteRise .45s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(min(var(--i, 0), 9) * 45ms); }
.discover-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 138px; padding: 16px 10px; font: inherit; color: var(--text); text-align: center; border-radius: 26px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.discover-card:hover { transform: translateY(-2px); }
.discover-card:active { transform: scale(.96); }
.discover-tile { --m: 0%; display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 20px; font-size: calc(28px * var(--fz)); line-height: 1; background: linear-gradient(140deg, color-mix(in srgb, var(--a1) calc(100% - var(--m)), var(--a2)), color-mix(in srgb, var(--a2) calc(100% - var(--m) * .5), var(--a1))); box-shadow: 0 12px 22px -12px var(--a1), inset 0 1px 0 #ffffff77; }
.discover-tile.big { width: 52px; height: 52px; border-radius: 18px; }
.discover-card strong { font-size: calc(15px * var(--fz)); line-height: 1.3; overflow-wrap: anywhere; }
.discover-soon { padding: 2px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: calc(11px * var(--fz)); font-weight: 800; white-space: nowrap; }
.how-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.how-steps li { display: flex; align-items: center; gap: 14px; }
.how-steps p { margin-top: 2px; font-size: calc(14px * var(--fz)); line-height: 1.5; }
.how-num { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 30%, transparent), color-mix(in srgb, var(--a2) 30%, transparent)); font-size: calc(22px * var(--fz)); }
.discover-own p { margin-bottom: 4px; line-height: 1.55; }
/* the sample sheet: what a category will look like, with blurred avatars and skeleton lines (no real names) */
.sample { display: flex; flex-direction: column; gap: 14px; padding: 26px 20px calc(20px + var(--safe-b)); }
.sample-head { display: flex; align-items: center; gap: 14px; }
.sample-head strong { display: block; font-size: calc(19px * var(--fz)); }
.sample-head small { display: block; margin-top: 2px; line-height: 1.4; }
.sample-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sample-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--surface-2); animation: noteRise .4s ease-out backwards; animation-delay: calc(var(--k, 0) * 90ms + 120ms); }
.sample-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(140deg, color-mix(in srgb, var(--a1) calc(100% - var(--m, 0%)), var(--a2)), color-mix(in srgb, var(--a2) calc(100% - var(--m, 0%) * .5), var(--a1))); filter: blur(5px) saturate(.9); opacity: .85; }
.sample-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--border), color-mix(in srgb, var(--text) 18%, transparent), var(--border)) 0 0 / 220% 100%; animation: skShimmer 1.8s ease-in-out infinite; }
.sk.w1 { width: 62%; }
.sk.w2 { width: 38%; height: 8px; }
@keyframes skShimmer { to { background-position: -220% 0; } }
.sample-foot { font-size: calc(13px * var(--fz)); text-align: center; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .hero-orb, .sk { animation: none !important; } }

/* phone: the tab pages (Smilo, Discover, Settings) keep the bottom tab bar */
@media (max-width: 899px) {
  .shell[data-view="detail"][data-tabpage] .pane-list { display: block; position: fixed; inset: auto 0 0 0; height: 0; z-index: 20; background: none; animation: none; }
  .shell[data-view="detail"][data-tabpage] .pane-list > :not(.tabbar) { display: none; }
  .shell[data-tabpage] .pane-main { padding-bottom: calc(84px + var(--safe-b)); }
}

/* ---------- calls (Phase 2): the ring, the call screen, the return-to-call pill, the AI captions ---------- */
#call-media { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* while the call is minimized, a strip at the top holds the pill and the app sits below it (the strip takes over the safe area) */
:root.in-call-bar { --call-bar: calc(50px + env(safe-area-inset-top, 0px)); --safe-t: 0px; }
#app { margin-top: var(--call-bar, 0px); height: calc(var(--app-h, 100dvh) - var(--call-bar, 0px)); }
:root.in-call-screen #toast { bottom: calc(176px + var(--safe-b)); }

.call-pill { position: fixed; z-index: 45; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 24px); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: linear-gradient(135deg, #17a34d, #22c55e); color: #fff; font-weight: 700; font-size: calc(14px * var(--fz)); box-shadow: 0 10px 24px -12px #17a34d; animation: pillIn .3s cubic-bezier(.3, 1.5, .5, 1); }
.pill-dot { position: relative; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .24); animation: pillBeat 1.8s ease-in-out infinite; }
.pill-dot .ico { width: 16px; height: 16px; }
.pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-time { flex: none; font-variant-numeric: tabular-nums; opacity: .92; }
.pill-back { flex: none; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: calc(12px * var(--fz)); }
@keyframes pillIn { from { opacity: 0; transform: translateY(-10px) scale(.9); } }
@keyframes pillBeat { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 255, 255, .16); } }

/* header: the call buttons, or the Join pill */
.head-calls { display: flex; align-items: center; flex: none; gap: 0; }
.chat-head .call-btn { width: 40px; height: 40px; color: var(--accent); }
.chat-head .call-btn .ico { width: 21px; height: 21px; }
.join-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #17a34d, #22c55e); color: #fff; font-weight: 700; font-size: calc(14px * var(--fz)); box-shadow: 0 8px 18px -10px #17a34d; animation: joinBeat 1.8s ease-in-out infinite; }
.join-pill .ico { width: 17px; height: 17px; }
@keyframes joinBeat { 50% { transform: scale(1.06); } }
@media (max-width: 430px) { .chat-head .look-btn { display: none; } } /* "Customize" stays in the chat menu */

/* the call line in the chat */
button.sys { font: inherit; font-size: calc(13px * var(--fz)); cursor: pointer; }
.call-line { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.call-line .ico { width: 17px; height: 17px; color: var(--accent); }
.call-line.missed, .call-line.missed .ico { color: var(--danger); }
.call-line:hover { background: var(--accent-soft); }

/* incoming call */
.ring { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(48px + env(safe-area-inset-bottom, 0px)); color: #fff; text-align: center; animation: fade .25s ease-out; }
.ring-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 70% at 15% 0%, color-mix(in srgb, var(--a1) 70%, transparent), transparent 70%), radial-gradient(100% 70% at 100% 100%, color-mix(in srgb, var(--a2) 60%, transparent), transparent 65%), rgba(13, 10, 28, .9); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); }
.ring-body { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.ring-avatar { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 26px; }
.ring-avatar > i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: ringWave 2.4s ease-out infinite; }
.ring-avatar > i:nth-child(2) { animation-delay: .8s; }
.ring-avatar > i:nth-child(3) { animation-delay: 1.6s; }
.ring-avatar .avatar { position: relative; box-shadow: 0 0 0 4px rgba(255, 255, 255, .3), 0 18px 40px -12px rgba(0, 0, 0, .6); }
@keyframes ringWave { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.ring-name { font-size: calc(30px * var(--fz)); font-weight: 800; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.ring-kind { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); font-weight: 600; font-size: calc(15px * var(--fz)); }
.ring-kind .ico { width: 18px; height: 18px; }
.ring-from { font-size: calc(14px * var(--fz)); opacity: .85; }
.ring-actions { display: flex; justify-content: space-around; width: min(100%, 340px); }
.ring-act { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 600; font-size: calc(14px * var(--fz)); }
.round { width: 76px; height: 76px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); transition: transform .15s; }
.round:active { transform: scale(.92); }
.round .ico { width: 34px; height: 34px; }
.round.accept { background: #1fb75a; animation: ringShake 1.2s ease-in-out infinite; }
.round.decline { background: #e5353b; }
@keyframes ringShake { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(-14deg) scale(1.06); } 20% { transform: rotate(12deg) scale(1.06); } 30% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } }

/* the call */
.call { position: fixed; z-index: 40; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); overflow: hidden; color: #fff; background: #0d0a1c; animation: fade .2s ease-out; }
.call[hidden] { display: none; }
.call-bg { position: absolute; inset: 0; background: radial-gradient(90% 60% at 12% 0%, color-mix(in srgb, var(--a1) 55%, transparent), transparent 70%), radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--a2) 45%, transparent), transparent 65%), #0d0a1c; }
.call-head, .call-ai, .call-bar { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .22); }
.call-head { position: absolute; z-index: 5; top: calc(8px + env(safe-area-inset-top, 0px)); inset-inline: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 6px; border-radius: 26px; }
:root[dir="rtl"] .call-head { padding: 6px 6px 6px 14px; }
.call-min { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; }
.call-head-text { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.call-title { max-width: 100%; font-weight: 800; font-size: calc(17px * var(--fz)); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-status { font-size: calc(13px * var(--fz)); opacity: .85; font-variant-numeric: tabular-nums; }
.call-status.warn { color: #ffd08a; opacity: 1; }
.call-min + .call-head-text { margin-inline-end: 42px; } /* centred in the bar: the minimize button's width on the other side */
.call-ai-row { position: absolute; z-index: 5; top: calc(72px + env(safe-area-inset-top, 0px)); inset-inline: 12px; display: flex; justify-content: center; pointer-events: none; }
.call-ai { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 8px 6px 8px; border-radius: 999px; color: #fff; animation: capIn .4s cubic-bezier(.3, 1.4, .5, 1); }
.call-ai.add { border-style: dashed; padding-inline-end: 16px; }
.call-ai-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fill); color: var(--on); }
.call-ai-ico .ico { width: 18px; height: 18px; }
.call-ai-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-align: start; }
.call-ai-text strong { font-size: calc(13px * var(--fz)); }
.call-ai-text small { font-size: calc(11px * var(--fz)); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-ai-x { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; font-size: calc(12px * var(--fz)); }
.call-ai-x .ico { width: 15px; height: 15px; }
.call-ai-st { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: calc(11px * var(--fz)); font-weight: 700; opacity: .92; white-space: nowrap; animation: capIn .3s ease-out; }
.call-ai-st[hidden] { display: none; }
.call-ai-st::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
.call-ai-st.listening::before { animation: aiListen 1.6s ease-in-out infinite; }
.call-ai-st.thinking::before { animation: aiWrite .9s ease-in-out infinite; }
@keyframes aiListen { 0%, 100% { transform: scale(.8); opacity: .7; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
@keyframes aiWrite { 0%, 100% { transform: translateY(2px); opacity: .6; } 50% { transform: translateY(-2px); opacity: 1; } }

.call-grid { position: absolute; z-index: 1; inset: 0; display: grid; gap: 8px; align-content: stretch; padding: calc(150px + env(safe-area-inset-top, 0px)) 14px 150px; }
.call[data-mode="video"] .call-grid { padding: calc(86px + env(safe-area-inset-top, 0px)) 8px 140px; }
.call[data-mode="video"] .call-grid[data-n="1"] { padding: 0; gap: 0; }
.call.has-ai[data-mode="video"] .call-grid:not([data-n="1"]) { padding-top: calc(144px + env(safe-area-inset-top, 0px)); }
.call-grid[data-n="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.call-grid[data-n="3"], .call-grid[data-n="4"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.call-grid[data-n="3"] .tile:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .call-grid[data-n="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } }
.call[data-mode="voice"] .call-grid { align-content: center; justify-content: center; }
.call[data-mode="voice"] .call-grid[data-n="1"] { --tav: 150px; }
.call[data-mode="voice"] .call-grid[data-n="2"] { grid-template-rows: none; grid-template-columns: 1fr 1fr; --tav: 96px; }
.call[data-mode="voice"] .call-grid[data-n="3"], .call[data-mode="voice"] .call-grid[data-n="4"] { --tav: 84px; }

.tile { position: relative; min-height: 0; min-width: 0; overflow: hidden; display: grid; place-items: center; border-radius: 22px; background: rgba(255, 255, 255, .08); }
.call-grid[data-n="1"] .tile { border-radius: 0; }
.call[data-mode="video"] .call-grid[data-n="1"] .tile { background: rgba(0, 0, 0, .35); }
.tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; }
.tile.has-video .tile-video { display: block; }
.tile.has-video .tile-av { display: none; }
.tile-av { --tav: 96px; position: relative; display: grid; place-items: center; }
.call[data-mode="video"] .tile-av { --tav: 96px; }
.tile-av .avatar { transition: box-shadow .15s; }
.tile.dim .tile-av { opacity: .5; filter: grayscale(.4); }
.tile-label { position: absolute; z-index: 2; inset-inline-start: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: calc(13px * var(--fz)); font-weight: 600; }
.call[data-mode="video"] .call-grid[data-n="1"] .tile-label { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 14px; }
.call[data-mode="video"] .call-grid[data-n="1"] .tile-state { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
.tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-mic .ico { width: 15px; height: 15px; color: #ff8a80; }
.tile-state { position: absolute; z-index: 2; inset-inline: 0; bottom: 48px; text-align: center; font-size: calc(13px * var(--fz)); opacity: .85; }
.tile-state:empty { display: none; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 3px solid #34d399; box-shadow: 0 0 calc(10px + var(--lv, 0) * 30px) #34d399 inset; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tile.speaking::after { opacity: 1; }
.call[data-mode="voice"] .tile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: none; overflow: visible; }
.call[data-mode="voice"] .tile::after { display: none; }
.call[data-mode="voice"] .tile-label { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: calc(17px * var(--fz)); font-weight: 700; padding: 0; }
.call[data-mode="voice"] .tile-state { position: static; }
.call[data-mode="voice"] .tile.speaking .tile-av .avatar { box-shadow: 0 0 0 4px #34d399, 0 0 calc(12px + var(--lv, 0) * 40px) #34d399; }

.call-pip { position: absolute; z-index: 4; inset-inline-end: 14px; bottom: 150px; width: 96px; height: 128px; overflow: hidden; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .55); background: #000; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); touch-action: none; cursor: grab; transition: left .25s cubic-bezier(.3, 1.3, .5, 1); }
.call-pip.drag { cursor: grabbing; transition: none; }
.pip-video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pip-video.mirror { transform: scaleX(-1); }
.pip-off { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 10, 28, .85); }
.pip-off .ico { width: 28px; height: 28px; opacity: .8; }

.call-bar { position: absolute; z-index: 5; inset-inline: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-around; align-items: flex-start; gap: 4px; padding: 12px 8px 10px; border-radius: 34px; }
.cbtn { flex: 1 1 0; min-width: 0; max-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; }
.cbtn-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .17); transition: background .15s, color .15s, transform .15s; }
.cbtn:active .cbtn-ico { transform: scale(.92); }
.cbtn-ico .ico { width: 26px; height: 26px; }
.cbtn.on .cbtn-ico { background: #fff; color: #1b1730; }
.cbtn.end .cbtn-ico { background: #e5353b; color: #fff; }
.cbtn-label { max-width: 100%; text-align: center; font-size: calc(11px * var(--fz)); line-height: 1.2; font-weight: 600; opacity: .92; }
.cbtn:disabled { opacity: .45; }
.call.over .call-pip, .call.over .tile::after { display: none; }
.call:focus-visible, .call .cbtn:focus-visible, .call-min:focus-visible, .call-ai-x:focus-visible { outline: 3px solid #fff; }

/* what the AI writes in the call: a caption that fades (it never speaks) */
.call-caps { position: fixed; z-index: 46; inset-inline: 0; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.call-caps.low { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.call-cap { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 8px 18px 8px 10px; border-radius: 24px; background: rgba(24, 18, 48, .78); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); color: #fff; font-size: calc(16px * var(--fz)); font-weight: 600; line-height: 1.35; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); animation: capIn .45s cubic-bezier(.3, 1.4, .5, 1); transition: opacity .6s, transform .6s; }
.call-cap .mark { flex: none; }
.call-cap.out { opacity: 0; transform: translateY(-8px); }
@keyframes capIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }

/* ---------- Public pages (Phase 3, decisions 21-25 and 50): posts, pages, comments, forms ---------- */
:root { --verified: #1478d4; }
:root[data-mode="dark"] { --verified: #4db3ff; }
.vbadge { display: inline-grid; place-items: center; width: var(--s, 18px); height: var(--s, 18px); flex: none; color: var(--verified); vertical-align: middle; }
.vbadge svg { width: 100%; height: 100%; }
.seg.wide-seg { display: flex; width: 100%; }
.seg.wide-seg .seg-btn { flex: 1; min-height: 40px; }
.status-chip { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--text); font-size: calc(12px * var(--fz)); font-weight: 800; line-height: 1.5; white-space: nowrap; }
.status-chip.pending { background: color-mix(in srgb, var(--amber) 30%, var(--surface)); }
.status-chip.rejected { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); }
.status-chip.active { background: color-mix(in srgb, #17a34d 22%, var(--surface)); }
.field-hint { color: var(--muted); font-weight: 500; font-size: calc(13px * var(--fz)); }
.field-hint.ok { color: #0e7a3a; font-weight: 700; }
:root[data-mode="dark"] .field-hint.ok { color: #6be3a0; }
.field-hint.bad { color: var(--danger); font-weight: 700; }
.field-hint.count { align-self: flex-end; }

/* the page row (Discover lists, search, categories) */
.pg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pg-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 24px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7); animation: noteRise .4s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.pg-row.compact { padding: 8px 12px; }
.pg-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.pg-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-row-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(14px * var(--fz)); color: var(--text); opacity: .85; overflow-wrap: anywhere; }
.pg-row-n { display: inline-flex; align-items: center; gap: 4px; }
.pg-row-n .ico { width: 14px; height: 14px; }
.pg-name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 800; }
.pg-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-name.small { font-size: calc(14px * var(--fz)); }
.pg-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; text-align: center; border-radius: 28px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); animation: noteRise .45s ease-out backwards; }
.pg-empty strong { font-size: calc(18px * var(--fz)); }
.pg-empty p { max-width: 34ch; line-height: 1.55; text-wrap: balance; }
.pg-empty-art { font-size: calc(46px * var(--fz)); line-height: 1.1; animation: heroFloat 4s ease-in-out infinite alternate; }
.pg-empty-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.head-tile { width: 40px; height: 40px; border-radius: 14px; font-size: calc(20px * var(--fz)); }

/* follow button: it fills in with a little pop, the check draws in */
.follow-btn { flex: none; min-width: 108px; background: var(--fill); color: var(--on); box-shadow: 0 10px 22px -12px var(--a1), inset 0 1px 0 #ffffff55; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), background-color .3s, color .3s; }
.follow-btn.small { min-width: 96px; }
.follow-btn:active { transform: scale(.94); }
.follow-btn.on { background: var(--glass); color: var(--text); border-color: var(--glass-line); box-shadow: inset 0 0 0 1.5px var(--accent); }
.follow-btn.on .ico { color: var(--accent); }
.follow-btn.just { animation: followPop .55s cubic-bezier(.3, 1.8, .5, 1); }
.follow-btn.just .ico { animation: followCheck .5s cubic-bezier(.3, 1.8, .5, 1); }
.follow-btn.just::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--a1); animation: followRing .6s ease-out; pointer-events: none; }
/* the notifications bell next to Following (decision 55) */
.bell-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--glass); color: var(--accent); border: 1px solid var(--glass-line); box-shadow: inset 0 0 0 1.5px var(--accent); cursor: pointer; transition: transform .3s cubic-bezier(.3, 1.8, .5, 1), background-color .3s, color .3s, box-shadow .3s; }
.bell-btn[hidden] { display: none; }
.bell-btn:active { transform: scale(.92); }
.bell-btn.off { color: var(--muted); box-shadow: none; }
.bell-btn .ico { transform-origin: 50% 12%; }
.bell-btn.swing .ico { animation: bellRing .7s ease-out; }
@keyframes bellRing { 0% { transform: rotate(0); } 15% { transform: rotate(22deg); } 30% { transform: rotate(-18deg); } 45% { transform: rotate(13deg); } 60% { transform: rotate(-9deg); } 75% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes followPop { 0% { transform: scale(.88); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes followCheck { from { transform: scale(0) rotate(-40deg); } }
@keyframes followRing { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a1) 55%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }

/* Discover: the Following strip and the panes */
.disc-pane { display: flex; flex-direction: column; gap: 16px; }
.disc-pane[hidden] { display: none; }
.fstrip { display: flex; gap: 12px; margin-inline: calc(-16px - var(--safe-l)); padding: 2px calc(16px + var(--safe-r)) 4px calc(16px + var(--safe-l)); overflow-x: auto; scrollbar-width: none; }
.fstrip::-webkit-scrollbar { display: none; }
.fstrip .fav { text-decoration: none; }
.fstrip .fav-av .avatar { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--a1); }
.feed { display: flex; flex-direction: column; gap: 14px; }
.disc-results, .disc-browse { display: flex; flex-direction: column; gap: 14px; }
.disc-results[hidden], .disc-browse[hidden] { display: none; }
.pg-listbox { display: flex; flex-direction: column; gap: 10px; }
.discover-card { text-decoration: none; }

/* a post */
.post { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 8px; border-radius: 28px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7); content-visibility: auto; contain-intrinsic-size: auto 320px; transition: opacity .3s, transform .3s; }
.post.fresh { animation: msgIn .6s cubic-bezier(.2, 1.1, .3, 1.15) both; }
.post.gone { opacity: 0; transform: scale(.96); }
.post-head { display: flex; align-items: center; gap: 8px; }
.post-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.post-who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.post-who-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn-more { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.iconbtn-more:hover { background: var(--surface-2); }
.post-body { display: flex; flex-direction: column; gap: 8px; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: calc(16px * var(--fz)); }
.post-text.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.post-text a { color: var(--accent); }
.post-more { align-self: flex-start; padding: 0 4px; min-height: 30px; }
.post-edited { font-size: calc(12px * var(--fz)); }
.post-media-wrap { display: flex; flex-direction: column; gap: 8px; }
.post-media { display: grid; gap: 3px; border-radius: 22px; overflow: hidden; background: var(--surface-2); }
.post-media .pm { position: relative; display: block; padding: 0; border: 0; background: var(--surface-2); overflow: hidden; min-width: 0; min-height: 0; cursor: zoom-in; }
.post-media .pm img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-media .pm:hover img { transform: scale(1.03); }
.post-media.n1 .pm { max-height: 460px; }
.post-media.n1 .pm img { height: auto; max-height: 460px; }
.post-media.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; }
.post-media.n3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.post-media.n3 .pm:first-child { grid-row: 1 / 3; }
.post-media.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.pm-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14, 10, 30, .55); color: #fff; font-size: calc(30px * var(--fz)); font-weight: 800; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pm-more.small { inset: auto; inset-block-end: 6px; inset-inline-end: 6px; padding: 1px 9px; border-radius: 99px; font-size: calc(13px * var(--fz)); background: rgba(14, 10, 30, .62); }
.post-file { text-decoration: none; color: var(--text); }
.post-reacts { display: flex; flex-wrap: wrap; gap: 6px; }
.rx { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 2px 11px 2px 8px; border: var(--gw) solid var(--glass-line); border-radius: 99px; background: var(--surface-2); color: var(--text); font-size: calc(14px * var(--fz)); transition: transform .25s cubic-bezier(.3, 1.8, .5, 1), background-color .2s; }
.rx:active { transform: scale(.92); }
.rx-e { font-size: calc(17px * var(--fz)); line-height: 1; }
.rx.mine { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 800; }
.post-bar { display: flex; border-top: 1px solid var(--border); margin-inline: -4px; padding-top: 2px; }
.act { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 6px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font-weight: 700; font-size: calc(14px * var(--fz)); transition: background-color .2s, color .2s, transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.act:hover { background: var(--surface-2); color: var(--text); }
.act:active { transform: scale(.94); }
.act .ico { width: 22px; height: 22px; }
.act span:not(.ico) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act.react.on { color: var(--accent); }
.act-e { font-size: calc(22px * var(--fz)); line-height: 1; }
.act-e.pop { animation: heartPop .5s cubic-bezier(.3, 1.9, .5, 1); }
@keyframes heartPop { 0% { transform: scale(.3); } 60% { transform: scale(1.4) rotate(-8deg); } 100% { transform: scale(1); } }

/* the quick reaction row */
.overlay.popover.clear { background: transparent; }
.sheet.react { width: auto; max-width: calc(100vw - 16px); max-height: none; overflow: visible; padding: 5px; border-radius: 99px; }
.react-row { display: flex; gap: 2px; align-items: center; }
.rr { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: calc(28px * var(--fz)); line-height: 1; animation: rrIn .45s cubic-bezier(.3, 1.9, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 38ms); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); }
.rr:hover, .rr:focus-visible { transform: scale(1.28) translateY(-4px); }
.rr.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.rr.more { font-size: inherit; color: var(--muted); background: var(--surface-2); width: 38px; height: 38px; margin-inline: 4px 2px; }
@keyframes rrIn { from { opacity: 0; transform: translateY(14px) scale(.4); } }
@media (max-width: 400px) { .rr { width: 40px; height: 40px; font-size: calc(24px * var(--fz)); } }
.picker-sheet { height: min(420px, 62dvh); display: flex; flex-direction: column; padding-top: 14px; }
.picker-sheet > .spinner { margin: auto; }
.picker-sheet .ep-tabs { display: none; }

/* the subscription sheet */
.subs-sheet { display: flex; flex-direction: column; gap: 12px; padding: 30px 22px calc(18px + var(--safe-b)); text-align: center; align-items: stretch; }
.subs-art { align-self: center; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 26px; font-size: calc(36px * var(--fz)); background: var(--fill); box-shadow: 0 16px 30px -14px var(--a1), inset 0 1px 0 #ffffff77; animation: heartPop .6s cubic-bezier(.3, 1.9, .5, 1); }
.subs-sheet h2 { font-size: calc(21px * var(--fz)); text-wrap: balance; }
.subs-sheet p { line-height: 1.6; text-wrap: pretty; }
.subs-dev { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--amber) 22%, transparent); font-size: calc(13px * var(--fz)); }
.subs-dev .ico { width: 18px; height: 18px; }
.subs-note { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 14px; border-radius: 18px; background: var(--accent-soft); }
.subs-note[hidden] { display: none; }
.subs-note p { font-size: calc(14px * var(--fz)); }
.sub-card .sub-head { display: flex; align-items: center; gap: 12px; }
.sub-art { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 17px; font-size: calc(24px * var(--fz)); background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 30%, transparent), color-mix(in srgb, var(--a2) 30%, transparent)); }
.sub-card.active { border-color: var(--accent); }
.stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* the comments sheet */
.sheet.comments { max-width: 560px; }
.comments-sheet { display: flex; flex-direction: column; height: min(86dvh, 700px); padding-top: 18px; }
.c-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 8px 20px; }
.c-head h2 { font-size: calc(18px * var(--fz)); }
.c-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.c-item { display: flex; gap: 10px; animation: noteRise .35s ease-out backwards; }
.c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 9px 13px 8px; border-radius: 20px; border-start-start-radius: 6px; background: var(--surface-2); }
.c-item.by-owner .c-main { background: var(--accent-soft); }
.c-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-meta strong { font-size: calc(14px * var(--fz)); overflow-wrap: anywhere; }
.c-meta time { font-size: calc(12px * var(--fz)); }
.c-owner { margin: 0; }
.c-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.c-quote { display: flex; flex-direction: column; padding: 4px 10px; border-inline-start: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: calc(13px * var(--fz)); }
.c-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.c-acts { display: flex; gap: 4px; margin-inline-start: -8px; }
.c-acts .btn { min-height: 32px; font-size: calc(13px * var(--fz)); }
.c-acts .btn .ico { width: 16px; height: 16px; }
.c-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 0; font-size: calc(36px * var(--fz)); }
.c-composer { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px calc(12px + var(--safe-b)); border-top: 1px solid var(--border); }
.c-row { display: flex; align-items: flex-end; gap: 8px; }
.c-row .composer-pill { flex: 1; }
.c-input { resize: none; max-height: 120px; }
.c-ask { align-self: flex-start; }
.c-sugg { display: flex; flex-direction: column; gap: 6px; }
.c-sugg .chip.suggestion { min-height: 40px; height: auto; padding: 8px 14px; text-align: start; border-radius: 18px; white-space: normal; line-height: 1.45; }
.c-replying { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; border-radius: 14px; background: var(--accent-soft); font-size: calc(13px * var(--fz)); }
.c-replying[hidden] { display: none; }
.c-replying .ico { width: 18px; height: 18px; color: var(--accent); }
.c-replying-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the page screen */
.pg-body { padding-top: 0; }
.page-screen .pg-body { gap: 14px; }
.pg-top { display: flex; flex-direction: column; gap: 12px; }
.pg-cover { position: relative; height: 150px; margin-inline: calc(-16px - var(--safe-l)) calc(-16px - var(--safe-r)); display: grid; place-items: center; overflow: hidden; border-radius: 0 0 30px 30px; background: linear-gradient(140deg, color-mix(in srgb, var(--a1) calc(100% - var(--m, 0%)), var(--a2)), color-mix(in srgb, var(--a2) calc(100% - var(--m, 0%) * .5), var(--a1))); }
.pg-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-cover-art { font-size: calc(64px * var(--fz)); opacity: .55; }
.pg-id { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -56px; padding-inline: 4px; position: relative; }
.pg-avatar .avatar { box-shadow: 0 0 0 5px var(--bg), 0 14px 28px -12px var(--a1); }
.pg-follow { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.pg-info { display: flex; flex-direction: column; gap: 6px; padding-inline: 4px; }
.pg-title { display: flex; align-items: center; gap: 8px; font-size: calc(25px * var(--fz)); line-height: 1.25; overflow-wrap: anywhere; }
.pg-sub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pg-cat { color: var(--accent); font-weight: 700; text-decoration: none; }
.pg-bio { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.pg-count { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pg-count .ico { width: 18px; height: 18px; }
.pg-count strong { color: var(--text); }
.pg-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-tools .btn { flex: 1 1 150px; }
.pg-status { align-items: flex-start; }
.pg-status p { margin-top: 2px; }
.verify-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); }
.verify-card p { font-size: calc(13px * var(--fz)); }
.verify-art { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 16px; background: color-mix(in srgb, var(--verified) 14%, transparent); }
.verify-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.verify-file img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; }
.verify-file[hidden] { display: none; }

/* forms: open your page, edit page, composer */
.pg-form { gap: 18px; }
.pg-form-intro { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--accent-soft); }
.pg-form-intro .pg-empty-art { font-size: calc(36px * var(--fz)); animation: none; }
.handle-wrap { direction: ltr; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.handle-wrap:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.handle-at { padding-inline: 14px 2px; color: var(--muted); font-weight: 800; }
.handle-wrap .input { border: 0; border-radius: 0; background: transparent; padding-inline-start: 4px; direction: ltr; text-align: start; }
.handle-wrap .input:focus-visible { outline: none; }
.handle-wrap.locked { background: var(--surface-2); min-height: 46px; }
.handle-fixed { padding-inline-start: 4px; font-weight: 700; }
.cat-pick .chip { min-height: 38px; }
.cat-fixed { align-self: flex-start; }
.pg-sent { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 4px; animation: noteRise .5s ease-out backwards; }
.pg-sent h2 { font-size: calc(24px * var(--fz)); }
.pg-sent-art { font-size: calc(64px * var(--fz)); animation: heartPop .7s cubic-bezier(.3, 1.9, .5, 1); }
.pg-sent-card { display: flex; align-items: center; gap: 12px; align-self: stretch; padding: 12px 14px; border-radius: 22px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); text-align: start; }
.pg-sent-card small { display: block; }
.cover-edit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cover-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 24px; overflow: hidden; }
.cover-btn .pg-cover { height: 130px; margin: 0; border-radius: 24px; }
.cover-btn .avatar-badge { inset-inline-end: 12px; bottom: 12px; }
.post-input { min-height: 150px; font-size: max(16px, calc(16px * var(--fz))); line-height: 1.6; }
.compose-who { display: flex; flex-direction: column; }
.compose-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compose-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.compose-thumbs[hidden] { display: none; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--surface-2); animation: noteRise .3s ease-out backwards; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-bar { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .35); }
.thumb-bar::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--fill); transition: width .2s; }
.thumb-err { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--danger) 45%, transparent); color: #fff; }
.thumb-x { position: absolute; top: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 10, 30, .62); color: #fff; }
.thumb-x .ico { width: 16px; height: 16px; }
.compose-help { border-radius: 20px; background: var(--glass); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); padding: 4px 14px 12px; }
.compose-help summary { display: flex; align-items: center; gap: 8px; min-height: 46px; cursor: pointer; font-weight: 800; list-style: none; }
.compose-help summary::-webkit-details-marker { display: none; }
.compose-help summary .ico:first-child { color: var(--accent); }
.compose-help summary .chev { margin-inline-start: auto; transition: transform .25s; }
.compose-help[open] summary .chev { transform: rotate(180deg); }
.compose-help > p { margin-bottom: 8px; line-height: 1.5; }
.help-row { display: flex; gap: 8px; align-items: center; }
.help-row .input { flex: 1; }
.drafts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.draft { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--ai-bg); border: 1px solid var(--ai-border); animation: chipIn .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--k, 0) * 80ms); }
.draft p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }

.adm-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.proof { align-self: flex-start; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--surface-2); max-width: 100%; cursor: zoom-in; }
.proof img { display: block; max-width: 100%; max-height: 220px; object-fit: contain; }

/* a shared post inside a chat bubble: a compact card that opens the post */
.post-preview { display: flex; flex-direction: column; gap: 6px; width: min(100%, 290px); margin-bottom: 4px; padding: 10px 11px; border-radius: 18px; background: var(--card); color: var(--text); border: var(--gw) solid var(--glass-line); text-decoration: none; text-align: start; box-shadow: inset 0 1px 0 var(--hi); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.post-preview:hover { transform: translateY(-1px); }
.post-preview:active { transform: scale(.98); }
.post-preview.gone { flex-direction: row; align-items: center; gap: 8px; color: var(--muted); font-size: calc(14px * var(--fz)); }
.pp-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.5; font-size: calc(15px * var(--fz)); }
.pp-img { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.pp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: calc(12px * var(--fz)); }
.pp-open { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 800; }
.pp-open .ico { width: 16px; height: 16px; }

/* the picture viewer with several pictures */
.viewer-count { color: #fff; opacity: .85; font-size: calc(13px * var(--fz)); font-variant-numeric: tabular-nums; padding-inline: 8px; }
.viewer-nav { position: absolute; top: 50%; margin-top: -21px; z-index: 2; background: rgba(0, 0, 0, .45); }
.viewer-nav.prev { inset-inline-start: 8px; }
.viewer-nav.next { inset-inline-end: 8px; }
.viewer-nav:hover { background: rgba(0, 0, 0, .65); }
.viewer-stage img { transition: opacity .2s; }

@media (max-width: 420px) {
  .pg-row { padding: 10px 10px; }
  .follow-btn.small { min-width: 0; padding: 0 12px; }
  .post { padding-inline: 11px; }
  .act { gap: 5px; padding: 0 2px; font-size: calc(13px * var(--fz)); }
}
@media (min-width: 900px) {
  .pg-cover { margin-inline: 0; border-radius: 28px; }
  .post-media.n1 .pm img { max-height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .pg-empty-art, .subs-art, .pg-sent-art, .act-e.pop { animation: none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .post, .pg-row, .pg-empty { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.seg.wide-seg .seg-btn { white-space: nowrap; padding-inline: 8px; }

/* ---------- invitation only (decisions 51-54): WhatsApp invite, join screen, contacts, recovery email, test money ---------- */
.btn.wa, .menu-item.wa { background: linear-gradient(135deg, #12883f, #0b7a39); color: #fff; font-weight: 800; box-shadow: 0 12px 24px -14px #0b7a39; }
.btn.wa { min-height: 52px; font-size: calc(17px * var(--fz)); border: 0; }
.btn.wa .ico { width: 24px; height: 24px; }
.btn.wa:hover { filter: brightness(1.07); }
.menu-item.wa { margin-bottom: 4px; }
.menu-item.wa:hover, .menu-item.wa:focus-visible { background: linear-gradient(135deg, #12883f, #0b7a39); filter: brightness(1.08); }
.invite-actions { display: flex; flex-direction: column; gap: 6px; }
.invite-second { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.invite-second .btn.small { font-size: calc(13px * var(--fz)); min-height: 32px; color: var(--muted); }
.invite-second .btn .ico { width: 16px; height: 16px; }
.invite-empty { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 36px; }
.invite-empty p { margin: 0; line-height: 1.55; }
.empty-art { align-self: center; font-size: calc(46px * var(--fz)); line-height: 1; animation: heartPop .6s cubic-bezier(.3, 1.9, .5, 1); }

.join-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 4px; }
.join-hero h1 { font-size: calc(23px * var(--fz)); text-wrap: balance; line-height: 1.35; }
.join-hero p { text-wrap: pretty; line-height: 1.55; }
.join-av { display: block; padding: 4px; border-radius: 50%; background: var(--fill); box-shadow: 0 14px 28px -12px var(--a1); animation: heartPop .6s cubic-bezier(.3, 1.9, .5, 1); }
.join-av .avatar { box-shadow: 0 0 0 3px var(--solid); }

.contacts { display: flex; flex-direction: column; gap: 10px; }
.contacts .search[hidden] { display: none; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.contact-list.scroll { max-height: 46dvh; overflow: auto; overscroll-behavior: contain; }
.contact-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 6px 4px; border: 0; background: transparent; color: var(--text); text-align: start; border-bottom: 1px solid var(--border); }
button.contact-row:hover, button.contact-row:focus-visible { background: var(--surface-2); border-radius: 12px; }
.contact-list li:last-child .contact-row { border-bottom: 0; }
.contact-row .chev { color: var(--muted); }
.contact-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.contact-main strong { overflow-wrap: anywhere; }
.via-tag { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--text); font-size: calc(11.5px * var(--fz)); font-weight: 700; line-height: 1.6; }
.contact-empty { padding: 8px 0; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.contact-empty .invite-card { text-align: start; }

.hint-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.recovery-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r); border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--text); text-align: start; }
.recovery-row small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.4; }
.recovery-row .chev { color: var(--muted); }
.hint-card { position: fixed; z-index: 40; top: calc(var(--safe-t, 0px) + 66px); inset-inline: 12px; max-width: 460px; margin-inline: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 22px; background: var(--glass); border: var(--gw, 1px) solid var(--glass-line); -webkit-backdrop-filter: blur(var(--blur, 18px)); backdrop-filter: blur(var(--blur, 18px)); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); animation: noteRise .4s ease-out; }
.hint-card p { margin: 2px 0 8px; font-size: calc(14px * var(--fz)); line-height: 1.45; color: var(--muted); }
.hint-acts { display: flex; align-items: center; gap: 6px; }
.recovery.dialog .dialog-actions { margin-top: 4px; }

.test-banner { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--amber) 24%, var(--surface)); color: var(--text); font-size: calc(13.5px * var(--fz)); font-weight: 700; text-align: center; }
.test-banner .ico { width: 18px; height: 18px; flex: none; }
.subs-sheet { position: relative; overflow: hidden; }
.plan-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 20px; background: var(--accent-soft); }
.plan-price { font-size: calc(26px * var(--fz)); font-weight: 800; letter-spacing: -.01em; }
.plan-trial { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 99px; background: var(--fill); color: var(--on); font-weight: 800; font-size: calc(13.5px * var(--fz)); }
.plan-trial.muted { background: transparent; color: var(--muted); font-weight: 600; }
.plan-trial .ico { width: 16px; height: 16px; }
.plan-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.split-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; text-align: start; font-size: calc(14px * var(--fz)); color: var(--muted); }
.split-note .ico { width: 20px; height: 20px; flex: none; color: var(--accent); }
.subs-devlink { align-self: center; opacity: .6; font-size: calc(12px * var(--fz)); min-height: 28px; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; inset-inline-start: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); opacity: 0; animation: confettiFall var(--t) ease-in var(--d) forwards; }
@keyframes confettiFall { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } 100% { opacity: 0; transform: translate(var(--dx), 420px) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .confetti, .empty-art, .join-av { display: none; } }
.sub-art.small { width: 36px; height: 36px; border-radius: 13px; font-size: calc(18px * var(--fz)); }
.pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pay-row:last-child { border-bottom: 0; }
.pay-row small { display: block; }
.pay-amount { text-align: end; white-space: nowrap; }
.earn-body { display: flex; flex-direction: column; gap: 8px; }
.earn-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.earn-total strong { font-size: calc(22px * var(--fz)); }

.c-hint { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12px * var(--fz)); }
.c-hint .ico { width: 14px; height: 14px; }
.c-requested { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; }
.c-requested .ico { width: 13px; height: 13px; }
.seg.wide-seg { flex-wrap: wrap; border-radius: 22px; }
.seg.wide-seg .seg-btn { flex: 1 1 auto; }
.money-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.money-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.money-grid > div:last-child { border-bottom: 0; }
.money-grid dt { color: var(--muted); font-size: calc(14px * var(--fz)); }
.money-grid dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-month { border-top: 1px solid var(--border); padding: 8px 0; }
.money-month summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer; min-height: 36px; }

/* ---------- message-level features (decision 57, batch A): reactions, edit, delete, pins, stars, info, select, reply privately, report ---------- */
/* a bubble and, under it, the reaction pills */
.msg.mine, .msg.theirs { flex-direction: column; }
.msg.mine { align-items: flex-end; }
.msg.theirs { align-items: flex-start; }
.msg.has-reacts { margin-bottom: 10px; }
.bubble { touch-action: manipulation; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 12px 0; position: relative; z-index: 1; max-width: min(78vw, 520px); }
.react-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--glass-line); background: var(--solid); color: var(--text); font-size: calc(13px * var(--fz)); font-weight: 700; box-shadow: var(--shadow); }
span.react-pill { cursor: default; }
button.react-pill:hover, button.react-pill:focus-visible { border-color: var(--accent); }
.react-pill.mine { background: var(--accent-soft); border-color: var(--accent); }
.react-pill .re { font-size: calc(15px * var(--fz)); line-height: 1; }
.react-pill .rc { font-variant-numeric: tabular-nums; }
.msg-react { display: flex; justify-content: space-between; gap: 0; padding: 8px 4px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.msg-react .rr { width: 42px; height: 42px; font-size: calc(26px * var(--fz)); flex: none; }
.msg-react .rr.more { width: 34px; height: 34px; margin: 4px 2px 0; font-size: inherit; }
@media (max-width: 360px) { .msg-react .rr { width: 38px; height: 38px; font-size: calc(23px * var(--fz)); } }
.sheet.popover .menu-item { min-height: 40px; padding-block: 4px; }
.react-sheet { gap: 10px; }
.react-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.react-chips .chip { flex: none; min-height: 36px; padding-inline: 12px; }
.react-list { max-height: 44dvh; overflow: auto; }
.contact-row.static { cursor: default; }
.react-emoji { font-size: calc(24px * var(--fz)); line-height: 1; }

/* the bubble's small marks: star, pin, "edited" */
.meta-ico { display: inline-flex; }
.b-meta .meta-ico .ico { width: 13px; height: 13px; }
.star-ico svg { fill: currentColor; }
.edited { font-style: italic; }
.b-quote.external { cursor: default; }
.b-quote.external small { display: flex; align-items: center; gap: 4px; font-size: calc(12px * var(--fz)); color: var(--muted); }
.b-quote.external small .ico { width: 13px; height: 13px; }
.msg.mine .b-quote.external small { color: inherit; opacity: .85; }
.sys.pin-line { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: calc(13px * var(--fz)); }
.sys.pin-line .ico { width: 14px; height: 14px; color: var(--accent); }
.sys.pin-line:hover { background: var(--accent-soft); }

/* the pinned bar with up to three pins */
.pinned { align-items: center; }
.pin-dots { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: none; }
.pin-dots i { display: block; width: 3px; height: 8px; border-radius: 2px; background: var(--border); }
.pin-dots i.on { background: var(--accent); }
.pin-left { color: var(--muted); font-weight: 500; }

/* the bar above the composer in edit mode, delete choices, the unread marker */
.reply-bar > .ico { color: var(--accent); flex: none; }
.send-btn.editing { background: var(--accent); }
.dialog-actions.stack { flex-direction: column; align-items: stretch; }
.dialog-actions.stack .btn { width: 100%; }
.unread-div { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--accent); font-weight: 800; font-size: calc(13px * var(--fz)); scroll-margin-top: 64px; }
.unread-div::before, .unread-div::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.unread-div span { padding: 3px 14px; border-radius: 999px; background: var(--card); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow); }

/* select several */
.sel-bar .sel-count { font-weight: 800; padding-inline: 6px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sel-bar .icon-btn { flex: none; }
.sel-bar .icon-btn.on { color: var(--accent); }
.sel-bar .icon-btn.on svg { fill: currentColor; }
.sel-bar .icon-btn:disabled { opacity: .35; cursor: default; }
.sel-bar .danger-ico { color: var(--danger); }
.chat.selecting > .composer, .chat.selecting > .reply-bar, .chat.selecting > .suggest, .chat.selecting > .emoji-panel, .chat.selecting > .uploads, .chat.selecting > .composer-note { display: none; }
.chat.selecting .msg.mine, .chat.selecting .msg.theirs { align-self: stretch; position: relative; padding-inline-start: 40px; border-radius: 16px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.chat.selecting .msg:not(.system)::before { content: ""; position: absolute; inset-inline-start: 8px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--muted); background: var(--card); }
.chat.selecting .msg.selected::before { content: "\2713"; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: calc(14px * var(--fz)); line-height: 18px; text-align: center; }
.chat.selecting .msg.selected { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chat.selecting .msg-more { display: none; }
.chat.selecting .bubble * { pointer-events: none; }

/* report sheet, message info, starred messages */
.seg-col { display: flex; flex-direction: column; gap: 8px; }
.reason { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 8px 14px; text-align: start; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.reason.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.report-sheet textarea { resize: vertical; min-height: 84px; }
.info-bubble { display: flex; flex-direction: column; padding: 8px 4px 14px; border-radius: 22px; }
.info-bubble .msg { align-self: stretch; }
.info-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px 4px; font-size: calc(15px * var(--fz)); color: var(--muted); font-weight: 800; }
.info-h .ico { width: 18px; height: 18px; }
.info-sec.read .info-h .ico { color: var(--bread); }
.info-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 56px; border-bottom: 1px solid var(--border); }
.info-sec .people li:last-child { border-bottom: 0; }
.info-time { color: var(--muted); font-size: calc(13px * var(--fz)); text-align: end; }
.starred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.starred-item { display: flex; align-items: center; gap: 2px; border-radius: var(--r); background: var(--card); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow); }
.starred-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; color: inherit; text-decoration: none; border-radius: var(--r); }
.starred-link:hover, .starred-link:focus-visible { background: var(--surface-2); }
.starred-link .contact-main { flex: 1; width: 100%; }
.starred-link .chat-line { width: 100%; }
.starred-link .chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.starred-link .chat-time { flex: none; color: var(--muted); font-size: calc(12px * var(--fz)); }
.starred-who { color: var(--accent); font-weight: 700; font-size: calc(13px * var(--fz)); }
.starred-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; font-size: calc(14px * var(--fz)); }
.star-off { color: var(--accent); flex: none; }
.star-off svg { fill: currentColor; }
.sentinel { height: 1px; }
.to-bottom { z-index: 3; } /* above the message list (it was hidden behind it) */

/* ===== 57A media + voice ===== */
/* the preview sheet for photos and videos (views/mediasheet.js) */
.sheet.media-sheet { max-width: 560px; }
.ms { display: flex; flex-direction: column; min-height: 0; }
.ms-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 2px; }
.ms-title { flex: 1; min-width: 0; margin: 0; font-size: calc(17px * var(--fz)); }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 14px; overflow: auto; max-height: min(44dvh, 420px); }
@media (min-width: 640px) { .ms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ms-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.ms-media { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ms-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 32px; height: 32px; background: rgba(0, 0, 0, .62); color: #fff; }
.ms-x:hover { background: rgba(0, 0, 0, .8); }
.ms-x .ico { width: 16px; height: 16px; }
.ms-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ms-play .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(0, 0, 0, .52); color: #fff; }
.ms-dur { position: absolute; inset-inline-start: 6px; bottom: 6px; padding: 1px 7px; border-radius: 7px; background: rgba(0, 0, 0, .62); color: #fff; font-size: calc(11px * var(--fz)); font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.ms-dur:empty { display: none; }
.ms-add { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--border); border-radius: 12px; background: transparent; color: var(--muted); font-size: calc(12px * var(--fz)); font-weight: 700; padding: 4px; text-align: center; }
.ms-add:hover, .ms-add:focus-visible { border-color: var(--accent); color: var(--accent); }
.ms-add .ico { width: 24px; height: 24px; }
.ms-foot { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px calc(14px + var(--safe-b)); }
.ms-caption { width: 100%; resize: none; min-height: 44px; max-height: 110px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--bg); color: var(--text); line-height: 1.35; }
.ms-caption:disabled { opacity: .55; }
.ms-once { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ms-once.off { opacity: .6; }
.ms-once-label { font-weight: 700; white-space: nowrap; }
.ms-once small { flex: 1; min-width: 0; text-align: end; font-size: calc(12px * var(--fz)); line-height: 1.25; }
.ms-once-box { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 12px; background: var(--border); transition: background .15s; }
.ms-once-box::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: inset-inline-start .15s; }
.ms-once-box:checked { background: var(--accent); }
.ms-once-box:checked::after { inset-inline-start: 21px; }
.ms-once-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ms-once-box:disabled { opacity: .5; }
.ms-once-ico, .vo-ico { flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; border: 2px dashed currentColor; font-weight: 800; font-size: calc(12px * var(--fz)); line-height: 1; }
.ms-send { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ms-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--accent-ink); color: var(--accent); font-size: calc(13px * var(--fz)); font-weight: 800; display: inline-grid; place-items: center; }

/* the album bubble (views/album.js) */
.album { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: min(300px, 62vw); margin: 2px 0; border-radius: 12px; overflow: hidden; }
.album.n2 { aspect-ratio: 2 / 1; }
.album.n3 { grid-template-rows: 1.4fr 1fr; aspect-ratio: 1 / 1; }
.album.n3 .al-tile:first-child { grid-column: 1 / -1; }
.album.n4 { grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.al-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: rgba(0, 0, 0, .12); cursor: pointer; }
.al-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.al-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.al-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .52); color: #fff; font-size: calc(26px * var(--fz)); font-weight: 800; }

/* view once (views/viewonce.js) */
.vo-card { display: flex; align-items: center; gap: 10px; min-width: 170px; padding: 3px 2px; color: inherit; text-align: start; font: inherit; }
.vo-card .vo-ico { width: 34px; height: 34px; font-size: calc(15px * var(--fz)); }
.vo-card.open { cursor: pointer; }
.vo-card.open .vo-ico { border-style: solid; border-color: transparent; background: var(--accent); color: var(--accent-ink); }
.vo-card.open:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
.vo-card.done { opacity: .6; }
.vo-text { display: flex; flex-direction: column; min-width: 0; }
.vo-text small { display: flex; align-items: center; gap: 4px; opacity: .8; font-size: calc(12px * var(--fz)); }
.vo-text small .ico { width: 14px; height: 14px; }

/* the gallery (views/viewer.js) */
.viewer-stage { touch-action: pan-y; overflow: hidden; }
.viewer-img, .viewer-video { max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; }
.viewer-img { object-fit: contain; }
.viewer-video { background: #000; border-radius: 8px; }
.viewer-stage.once img, .viewer-stage.once video { -webkit-touch-callout: none; }
.v-in { animation: vIn .22s ease-out; }
@keyframes vIn { from { transform: translateX(var(--dx, 0)); opacity: 0; } }
.viewer-note { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px calc(14px + var(--safe-b)); color: #fff; opacity: .88; font-size: calc(13px * var(--fz)); }
.viewer-note .vo-ico { width: 24px; height: 24px; border-width: 1.5px; }

/* voice notes (views/voice.js, recorder.js) */
.rec-bar { inset: 4px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); gap: 10px; padding: 0 5px 0 14px; border-radius: 30px; background: var(--solid); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); touch-action: none; }
.composer.recording { min-height: 60px; }
.composer.recording > .composer-pill, .composer.recording > .send-btn { opacity: 0; } /* the bar covers them; the mic keeps the finger (pointer capture) */
.rec-bar .rec-send { width: 42px; height: 42px; }
.rec-bar .wf { display: block; flex: 1 1 0; width: 0; min-width: 0; height: 32px; color: var(--accent); }
.rec-bar .wf.seekable { color: color-mix(in srgb, var(--muted) 65%, transparent); --played: var(--accent); cursor: pointer; touch-action: none; border-radius: 6px; }
.rec-bar .wf.seekable:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rec-slot { position: relative; flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.rec-slot > * { grid-area: 1 / 1; }
.rec-trash { opacity: 0; transform: scale(.6); color: var(--danger); transition: opacity .12s, transform .12s; }
.rec-trash svg { width: 22px; height: 22px; }
.rec-bar.armed .rec-dot { opacity: 0; animation: none; }
.rec-bar.armed .rec-trash { opacity: 1; transform: none; animation: recShake .35s ease-in-out infinite; }
@keyframes recShake { 25% { transform: translateX(-2px) rotate(-10deg); } 75% { transform: translateX(2px) rotate(10deg); } }
.rec-bar .rec-hint { order: 0; flex: none; margin-inline-start: 0; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.rec-hint .ico { animation: recNudge 1.2s ease-in-out infinite; }
@keyframes recNudge { 50% { transform: translateX(-4px); } }
[dir="rtl"] .rec-hint .ico { animation-name: recNudgeRtl; }
@keyframes recNudgeRtl { 50% { transform: translateX(4px); } }
.rec-bar.armed .rec-hint { visibility: hidden; }
.rec-lock { position: absolute; inset-inline-end: 3px; bottom: calc(100% + 8px); width: 40px; height: 48px; border-radius: 20px; display: grid; place-items: center; background: var(--surface); color: var(--muted); box-shadow: var(--shadow); transform: translateY(calc(var(--up, 0) * -26px)) scale(calc(1 + var(--up, 0) * .15)); pointer-events: none; }
.rec-lock .ico { width: 20px; height: 20px; }
.rec-bar .rec-stop { color: var(--danger); }
.rec-bar .rec-play { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.rec-bar .rec-play:hover { background: var(--accent); filter: brightness(1.08); }
.rec-bar .rec-play .ico { width: 20px; height: 20px; }
.rec-bar .rec-send { margin-inline-start: 0; }
.rec-bar .rec-time { flex: none; min-width: 38px; }
.composer.recording .rec-bar { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .rec-hint .ico, .rec-bar.armed .rec-trash, .v-in { animation: none; } }
/* ===== end 57A media + voice ===== */

/* ===== 57A cards ===== */
/* @mentions: the picker above the composer and the names in a bubble */
.mention-pop { flex: none; margin: 0 10px; max-height: min(240px, 36dvh); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background: var(--card); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow), inset 0 1px 0 var(--hi); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7); backdrop-filter: blur(var(--blur)) saturate(1.7); }
.mention-list { display: flex; flex-direction: column; padding: 4px; }
.mention-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 10px; border: 0; background: transparent; color: var(--text); text-align: start; border-radius: 14px; font-size: calc(15px * var(--fz)); }
.mention-item:hover, .mention-item.on { background: var(--accent-soft); }
.mention-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mention { display: inline; margin: 0; padding: 0 3px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-weight: 700; color: var(--accent); text-align: inherit; cursor: pointer; }
.mention:hover { text-decoration: underline; }
.mention.me { background: var(--accent-soft); }
.msg.mine .mention { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.msg.mine .mention.me { background: color-mix(in srgb, var(--bon) 16%, transparent); }
.mention-sheet .ms-who { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mention-sheet .ms-who h2 { overflow-wrap: anywhere; }
.chat.selecting > .link-bar, .chat.selecting > .mention-pop, .chat.selecting > .share-strip { display: none; }

/* link previews: the bar above the composer, the card in a bubble */
.link-bar { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 10px; padding: 6px 6px 6px 8px; border-radius: 18px; background: var(--card); border: var(--gw) solid var(--glass-line); box-shadow: inset 0 1px 0 var(--hi); }
.lb-img { flex: none; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.lb-img.none { display: grid; place-items: center; color: var(--muted); }
.lb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: start; }
.lb-text small { color: var(--accent); font-weight: 700; font-size: calc(12px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-text strong { font-size: calc(14px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-text span { color: var(--muted); font-size: calc(13px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-wait { flex: 1; color: var(--muted); font-size: calc(14px * var(--fz)); }
.lp-card, .loc-card, .ct-card, .ev-card { display: flex; flex-direction: column; width: 280px; max-width: 100%; margin: 2px 0 4px; border-radius: 16px; overflow: hidden; background: var(--card); color: var(--text); border: var(--gw) solid var(--glass-line); box-shadow: inset 0 1px 0 var(--hi); text-align: start; text-decoration: none; }
.lp-card:hover { filter: brightness(.98); }
.lp-img { display: block; width: 100%; aspect-ratio: 1.91 / 1; max-height: 170px; object-fit: cover; background: var(--surface-2); }
.lp-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px 10px; }
.lp-site { color: var(--muted); font-size: calc(12px * var(--fz)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-title { font-size: calc(15px * var(--fz)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-desc { color: var(--muted); font-size: calc(13px * var(--fz)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msg .lp-card + .b-text { margin-top: 2px; }

/* location: the stylised map (drawn from the coordinates, no map service) */
.loc-map { position: relative; aspect-ratio: 280 / 150; overflow: hidden; background: var(--surface-2); }
.loc-sheet .loc-map { border-radius: 16px; }
.loc-map svg { display: block; width: 100%; height: 100%; }
.lm-bg { fill: color-mix(in srgb, var(--accent) 11%, var(--solid)); }
.lm-grid { fill: none; stroke: color-mix(in srgb, var(--accent) 16%, transparent); stroke-width: 1; }
.lm-park { fill: color-mix(in srgb, #2fb36a 30%, transparent); }
.lm-road { fill: none; stroke: color-mix(in srgb, var(--text) 8%, var(--solid)); stroke-width: 11; stroke-linecap: round; }
.lm-side { fill: none; stroke: color-mix(in srgb, var(--text) 8%, var(--solid)); stroke-width: 6; stroke-linecap: round; }
.lm-svg .lm-road { paint-order: stroke; }
.lm-ring { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.2; }
.lm-ring.r3 { fill-opacity: .5; }
.lm-ring.r2 { fill-opacity: .8; }
.lm-shadow { fill: rgba(0, 0, 0, .28); }
.lm-pin-body { fill: var(--accent); stroke: #fff; stroke-width: 1.6; }
.lm-pin-dot { fill: var(--accent-ink); }
.loc-card.live .lm-ring { animation: lmPulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.loc-card.live.ended .lm-ring, .loc-card.ended .lm-ring { animation: none; }
.loc-card.ended .lm-pin { opacity: .6; }
@keyframes lmPulse { 0% { opacity: 1; } 60% { opacity: .55; } 100% { opacity: 1; } }
.loc-body { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px 11px; }
.loc-title { display: flex; align-items: center; gap: 6px; }
.loc-title .ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.loc-title strong { min-width: 0; overflow-wrap: anywhere; }
.loc-coords-line, .loc-coords bdi { font-variant-numeric: tabular-nums; color: var(--muted); font-size: calc(13px * var(--fz)); }
.loc-liverow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: calc(13px * var(--fz)); font-weight: 600; }
.loc-upd { font-weight: 400; font-size: calc(12px * var(--fz)); }
.live-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); animation: liveDot 1.8s ease-out infinite; }
.loc-card.ended .live-dot { background: var(--muted); animation: none; box-shadow: none; }
@keyframes liveDot { 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.loc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.loc-actions .btn { min-height: 38px; text-decoration: none; }
.loc-actions .btn .ico { width: 16px; height: 16px; }
.loc-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 16px; border: var(--gw) solid var(--glass-line); background: var(--card); color: var(--text); text-align: start; }
.loc-choice:hover { background: var(--accent-soft); }
.lc-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.lc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc-text small { color: var(--muted); font-size: calc(13px * var(--fz)); }
.loc-choice .chev { color: var(--muted); }
.loc-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 12px 0; }
.loc-coords { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.loc-coords bdi { color: var(--text); font-weight: 700; font-size: calc(16px * var(--fz)); }
.loc-note { font-size: calc(13px * var(--fz)); }
.share-strip { flex: none; display: flex; align-items: center; gap: 10px; margin: 6px 10px 0; padding: 6px 8px 6px 14px; border-radius: 18px; background: var(--accent-soft); border: var(--gw) solid var(--glass-line); font-size: calc(14px * var(--fz)); font-weight: 600; position: relative; z-index: 2; }
.share-strip > .ico { color: var(--accent); width: 18px; height: 18px; flex: none; }
.share-strip .btn { min-height: 34px; }

/* contact card */
.ct-card { gap: 10px; padding: 11px; }
.ct-head { display: flex; align-items: center; gap: 12px; }
.ct-name { min-width: 0; display: flex; flex-direction: column; }
.ct-name strong { overflow-wrap: anywhere; font-size: calc(16px * var(--fz)); }
.ct-name small { display: inline-flex; align-items: center; gap: 4px; }
.ct-name small .ico { width: 13px; height: 13px; }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-actions .btn { min-height: 38px; }
.ct-actions .btn .ico { width: 16px; height: 16px; }
.ct-actions .btn.wa { min-height: 40px; font-size: calc(14px * var(--fz)); }
.ct-note { flex-basis: 100%; }

/* event */
.ev-card { gap: 8px; padding: 12px; }
.ev-card.past .ev-badge { filter: grayscale(.6); opacity: .8; }
.ev-card.busy { opacity: .8; pointer-events: none; }
.ev-head { display: flex; gap: 12px; align-items: flex-start; }
.ev-badge { flex: none; width: 54px; border-radius: 14px; overflow: hidden; text-align: center; background: var(--solid); border: var(--gw) solid var(--glass-line); line-height: 1.1; }
.ev-mon { display: block; padding: 2px 0; background: var(--accent); color: var(--accent-ink); font-size: calc(12px * var(--fz)); font-weight: 800; text-transform: uppercase; order: -1; }
.ev-badge { display: flex; flex-direction: column; }
.ev-day { display: block; padding: 4px 0 6px; font-size: calc(24px * var(--fz)); font-weight: 800; font-variant-numeric: tabular-nums; }
.ev-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev-title { font-size: calc(17px * var(--fz)); line-height: 1.25; overflow-wrap: anywhere; }
.ev-when, .ev-place { display: flex; align-items: flex-start; gap: 5px; color: var(--muted); font-size: calc(13px * var(--fz)); }
.ev-when .ico, .ev-place .ico { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.ev-place span { overflow-wrap: anywhere; }
.ev-desc { margin: 0; color: var(--text); font-size: calc(14px * var(--fz)); line-height: 1.4; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ev-rsvps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ev-rsvp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px 4px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font-size: calc(13px * var(--fz)); font-weight: 700; }
.ev-rsvp:hover { border-color: var(--accent); }
.ev-rsvp.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ev-rsvp-label { display: inline-flex; align-items: center; gap: 3px; text-align: center; line-height: 1.15; }
.ev-rsvp-label .ico { width: 13px; height: 13px; }
.ev-rsvp-n { font-variant-numeric: tabular-nums; font-size: calc(15px * var(--fz)); }
.ev-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
.ev-foot .btn.link { padding: 0 4px; min-height: 34px; color: var(--accent); }
.ev-foot .btn .ico { width: 15px; height: 15px; }
.ev-when-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msg.mine .ev-foot .btn.link, .msg.mine .ct-card .btn.link { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .live-dot, .loc-card.live .lm-ring { animation: none; } }
/* ===== end 57A cards ===== */

/* Settings > Privacy (decision 57, batch B) */
.privacy-pin { display: flex; flex-direction: column; gap: 10px; }
.privacy-pin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.privacy-pin + .fine { text-align: start; }

/* Broadcast lists (decision 57, batch B) */
.bc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bc-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--card); border: var(--gw) solid var(--glass-line); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.bc-link:hover, .bc-link:focus-visible { background: var(--surface-2); }
.bc-link .contact-main { min-width: 0; }
.bc-tile { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.bc-tile .ico { width: 22px; height: 22px; }
.bc-sub { font-size: calc(13px * var(--fz)); }
.bc-intro, .bc-hint { font-size: calc(14px * var(--fz)); line-height: 1.5; margin: 0; }
.bc-title-btn { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; border: 0; background: transparent; color: inherit; text-align: start; padding: 2px 6px; }
.bc-title-btn h1 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-body { gap: 10px; }
.bc-feed { display: flex; flex-direction: column; gap: 8px; }
.bc-feed .msg.mine { align-self: flex-end; max-width: 100%; }
.bc-bubble { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.bc-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bc-img { display: block; max-width: 100%; max-height: 280px; border-radius: 12px; object-fit: cover; }
.bc-audio { max-width: 100%; }
.bc-file { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--bon) 14%, transparent); }
.bc-file .file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
.bc-file small { color: inherit; opacity: .8; }
.bc-sticker { font-size: 64px; line-height: 1.1; text-align: center; }
.bc-meta { flex-wrap: wrap; gap: 4px 8px; }
.bc-none { padding: 24px 0; }
.bc-note { margin: 0; padding: 4px 18px 0; text-align: center; font-size: calc(12px * var(--fz)); }
.bc-dialog .field { display: flex; flex-direction: column; gap: 4px; }

/* Group info: description, settings card, invite link; group-link landing (decision 57, batch B) */
.group-desc { margin: 0; max-width: 46ch; color: var(--text); font-size: calc(14px * var(--fz)); line-height: 1.5; text-wrap: pretty; white-space: pre-wrap; overflow-wrap: anywhere; }
.gset-card h2, .glink-card h2 { display: flex; align-items: center; gap: 8px; }
.gset-card h2 .ico, .glink-card h2 .ico { width: 20px; height: 20px; color: var(--accent); }
.gset-rows { margin-inline: -16px; }
.gset-rows .row:last-child { border-bottom: 0; }
.gset-rows .row .ico:first-child { color: var(--accent); }
.gset-area { min-height: 110px; width: 100%; }
.gset-count { display: block; margin-top: 4px; text-align: end; font-variant-numeric: tabular-nums; }
.gset-limit { margin-inline-start: 8px; font-size: calc(13px * var(--fz)); font-weight: 400; font-variant-numeric: tabular-nums; }
.glink-field { width: 100%; text-overflow: ellipsis; direction: ltr; text-align: start; }
.glink-card .invite-second .btn.stop { color: var(--danger); }
.shared-card { padding: 8px 0 0; overflow: hidden; }
.group-ico.mini { width: 44px; height: 44px; flex: none; }
.group-ico.mini .ico { width: 24px; height: 24px; }
.join-av .group-ico { width: 84px; height: 84px; box-shadow: 0 0 0 3px var(--solid); }
.join-desc { margin: 0; max-width: 40ch; color: var(--text); font-size: calc(14px * var(--fz)); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Decision 57, batch B: archive, locked chats, row menu, search in a chat, shared media, contact info, PIN ---- */
.chat-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chat-row.special { gap: 14px; min-height: 56px; }
.special-ico { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.special-ico .ico { width: 22px; height: 22px; }
.badge.dot { min-width: 14px; width: 14px; height: 14px; padding: 0; border-radius: 50%; }
.chat-row .badge.dot { min-width: 14px; height: 14px; padding: 0; }
.sub-list { padding-top: 6px; }
.pad-x { padding-inline: 20px; }
.pad { padding: 16px; }
.locked-gate .pg-empty { margin: auto; }
.pin-input { text-align: center; letter-spacing: .5em; font-size: calc(24px * var(--fz)); font-weight: 700; }
.pin-dialog .pin-input { margin-top: 8px; }
.head-timer { display: inline-grid; vertical-align: middle; margin-inline-start: 6px; color: var(--muted); }
.head-timer .ico { width: 16px; height: 16px; }
.head-sub.online { color: var(--accent); font-weight: 600; }
.chat-search { display: flex; align-items: center; gap: 4px; margin: 6px 10px 0; padding: 4px 6px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); position: relative; z-index: 4; }
.chat-search[hidden] { display: none; }
.chat-search .input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; box-shadow: none; padding-inline: 8px; }
.chat-search .icon-btn { width: 40px; height: 40px; flex: none; }
.chat-search .icon-btn:disabled { opacity: .35; }
.search-count { flex: none; font-size: calc(13px * var(--fz)); color: var(--muted); font-weight: 600; min-width: 0; white-space: nowrap; }
.search-count.none { color: var(--danger); }
::highlight(smilo-find) { background-color: rgba(255, 213, 79, .55); color: inherit; }
::highlight(smilo-find-cur) { background-color: #fff; color: #1d1208; text-decoration: underline; }
.chat-search input::-webkit-search-cancel-button { display: none; }
.chat-search .input:focus { outline: 0; box-shadow: none; }
.shared-tabs { display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.shared-tabs .chip { display: inline-flex; align-items: center; gap: 6px; }
.shared-tabs .tab-n { opacity: .7; font-weight: 700; }
.shared-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.shared-tile { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.shared-tile img, .shared-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shared-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shared-link, .shared-doc { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); min-width: 0; }
.shared-link > *, .shared-doc > * { max-width: 100%; }
.shared-url { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); overflow-wrap: anywhere; text-decoration: none; }
.shared-doc-link { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--text); text-decoration: none; min-width: 0; }
.shared-doc-link strong, .shared-doc-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-doc-link .grow { min-width: 0; }
.contact-top { text-align: center; }
.contact-top h2 { margin: 6px 0 0; }
.contact-presence { margin: 2px 0 0; }
.contact-presence.online { color: var(--accent); font-weight: 600; }
.contact-about { margin: 6px 0 0; max-width: 32ch; overflow-wrap: anywhere; }
.info-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; width: 100%; }
.info-act { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; padding: 0; border: 0; background: none; color: var(--text); font-size: calc(12px * var(--fz)); font-weight: 600; }
.info-act-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border); transition: transform .15s; }
.info-act-ico .ico { width: 23px; height: 23px; }
.info-act:active .info-act-ico { transform: scale(.92); }
.info-act:disabled { opacity: .45; }
.info-act.on .info-act-ico { background: var(--surface-2); color: var(--muted); }
.head-mute { display: inline-grid; vertical-align: middle; margin-inline-start: 2px; padding: 8px 6px; margin-block: -8px; color: var(--muted); }
.head-mute .ico { width: 16px; height: 16px; }
.chat-head .search-btn { width: 40px; height: 40px; color: var(--accent); }
.chat-head .search-btn .ico { width: 21px; height: 21px; }
/* a phone: back, picture, name, search, call, video and menu all fit, with room for the name and the muted bell */
@media (max-width: 430px) { .chat-head { gap: 2px; } .chat-head .icon-btn { width: 38px; } .chat-head .call-btn, .chat-head .search-btn { width: 36px; } .chat-head .head-info { gap: 6px; } .chat-head .head-avatar .avatar { --s: 36px !important; } }
.person-link { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; width: 100%; min-width: 0; }
.card-section.group { padding: 0; overflow: hidden; }
.chat-head .head-title { display: flex; flex-direction: row; align-items: center; min-width: 0; }
.head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-title .head-mute, .head-title .head-timer { flex: none; }