:root {
  --bg: #f6f4fb;
  --panel: #ffffff;
  --text: #1d1b22;
  --muted: #77727f;
  --line: #e4e0ec;
  --bubble: #ebe8f1;
  --mine: #8b5cf6;
  --mine-text: #ffffff;
  --accent: #8b5cf6;
  --green: #22c55e;
  --red: #d93a3a;
  --mark: #ffe066;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17151c;
    --panel: #201d27;
    --text: #f2f0f6;
    --muted: #9a94a6;
    --line: #322e3b;
    --bubble: #2d2936;
    --mine: #7c4ef0;
    --accent: #a78bfa;
  }
}

/* ---------- Alien: deep space, green glow, little visitors. ---------- */
:root[data-theme="alien"] {
  --bg: #050a14;
  --panel: #0b1322;
  --text: #e3ffe6;
  --muted: #8fb3a0;
  --line: #1b2a3c;
  --bubble: #16263b;
  --mine: #2a9d48;
  --mine-text: #ffffff;
  --accent: #6cf07f;
  --mark: #9dff9f;
  color-scheme: dark;
}
:root[data-theme="alien"] .messages {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='320'><g fill='white' opacity='0.5'><circle cx='20' cy='18' r='0.9'/><circle cx='96' cy='44' r='0.6'/><circle cx='170' cy='12' r='1'/><circle cx='226' cy='70' r='0.7'/><circle cx='58' cy='96' r='0.8'/><circle cx='132' cy='128' r='0.6'/><circle cx='210' cy='160' r='1'/><circle cx='30' cy='196' r='0.7'/><circle cx='112' cy='232' r='0.9'/><circle cx='190' cy='250' r='0.6'/><circle cx='74' cy='290' r='0.8'/><circle cx='226' cy='306' r='0.7'/></g><g opacity='0.24'><text x='14' y='60' font-size='26'>👽</text><text x='150' y='56' font-size='24' transform='rotate(-12 150 56)'>🛸</text><text x='200' y='130' font-size='18'>🪐</text><text x='60' y='160' font-size='13'>✨</text><text x='130' y='200' font-size='22' transform='rotate(10 130 200)'>👽</text><text x='16' y='250' font-size='18'>☄️</text><text x='190' y='290' font-size='20'>🛸</text><text x='90' y='310' font-size='12'>⭐</text></g></svg>"),
    radial-gradient(circle at 85% 18%, rgb(110 240 127 / 0.35) 0 22px, rgb(110 240 127 / 0.1) 23px 70px, transparent 71px),
    radial-gradient(ellipse at 20% 110%, rgb(60 200 110 / 0.22), transparent 60%),
    linear-gradient(#0a1426, #02040a);
}
:root[data-theme="alien"] .bubble a { color: #9dff9f; }
:root[data-theme="alien"] .mine .bubble a { color: #fff; }

/* ---------- Themes (⚙ → Theme). Halloween is a night theme, dark even in light mode. ---------- */
:root[data-theme="halloween"] {
  --bg: #0d0614;
  --panel: #1a0d26;
  --text: #f5ecff;
  --muted: #a993bd;
  --line: #34204a;
  --bubble: #3d1f5c;
  --mine: #f2730f;
  --mine-text: #ffffff;
  --accent: #ff8c1a;
  --mark: #ffb347;
  color-scheme: dark;
}
:root[data-theme="halloween"] .messages {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='300'><g opacity='0.2'><text x='8' y='40' font-size='38'>🕸️</text><text x='150' y='70' font-size='20' transform='rotate(-12 150 70)'>🦇</text><text x='190' y='40' font-size='15'>🦇</text><text x='40' y='140' font-size='24'>👻</text><text x='200' y='160' font-size='16'>🕷️</text><text x='110' y='190' font-size='14'>🦇</text><text x='20' y='250' font-size='26'>🎃</text><text x='150' y='270' font-size='18'>🍬</text></g></svg>"),
    radial-gradient(circle at 82% 12%, rgb(255 226 150 / 0.85) 0 24px, rgb(255 190 90 / 0.22) 25px 58px, transparent 59px),
    linear-gradient(#210d38, #0b0512);
}
:root[data-theme="halloween"] .bubble a { color: #ffd08a; }
:root[data-theme="halloween"] .mine .bubble a { color: #fff; }

:root[data-theme="metalxmas"] {
  --bg: #050505;
  --panel: #121214;
  --text: #e8e9ee;
  --muted: #8d8f98;
  --line: #2a2a2f;
  --bubble: #2b2b30;
  --mine: #9e0514;
  --mine-text: #ffffff;
  --accent: #d91f29;
  --mark: #c0c4cc;
  color-scheme: dark;
}
:root[data-theme="metalxmas"] .messages {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='320'><g opacity='0.22' filter='grayscale(0.4)'><text x='10' y='30' font-size='14'>❄️</text><text x='70' y='50' font-size='22' transform='rotate(-10 70 50)'>💀</text><text x='200' y='40' font-size='22'>⚡</text><text x='150' y='24' font-size='11'>❄️</text><text x='20' y='120' font-size='24' transform='rotate(30 20 120)'>⛓️</text><text x='180' y='120' font-size='26' transform='rotate(-25 180 120)'>🎸</text><text x='110' y='100' font-size='12'>❄️</text><text x='50' y='190' font-size='22'>🤘</text><text x='215' y='180' font-size='14'>❄️</text><text x='140' y='200' font-size='28'>🎄</text><text x='14' y='250' font-size='20'>🔥</text><text x='100' y='260' font-size='11'>❄️</text><text x='200' y='260' font-size='18'>💀</text><text x='60' y='305' font-size='22'>🎅</text><text x='170' y='310' font-size='20' transform='rotate(-30 170 310)'>⛓️</text></g></svg>"),
    radial-gradient(ellipse at 50% 110%, rgb(160 0 12 / 0.4), transparent 60%),
    linear-gradient(#141416, #020202);
}
:root[data-theme="metalxmas"] .bubble a { color: #ff6b72; }
:root[data-theme="metalxmas"] .mine .bubble a { color: #fff; }
:root[data-theme="metalxmas"] .bar { border-bottom-color: #3a3a40; box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.04); }
:root[data-theme="contrast"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #000000;
  --muted: #2b2b2b;
  --line: #000000;
  --bubble: #ffe600;
  --mine: #000000;
  --mine-text: #ffffff;
  --accent: #0030d0;
  --mark: #ff9be0;
  color-scheme: light;
}
:root[data-theme="contrast"] .bubble { border: 1.5px solid #000; }
:root[data-theme="contrast"] .bubble a { color: #000; text-decoration: underline; }
:root[data-theme="contrast"] .mine .bubble a { color: #fff; }
:root[data-theme="contrast"] .msg:not(.mine) .status-pill { background: #ffe600; color: #000; border: 1px solid #000; }
:root[data-theme="contrast"] .mine .status-pill { background: #000; color: #fff; }
.status-pill {
  display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: 1px;
  font-size: 11px; font-weight: 500; padding: 1px 8px; margin: 0 2px; border-radius: 99px;
  background: #e1f5ee; color: #085041;
}
.mine .status-pill { background: color-mix(in srgb, var(--mine) 16%, transparent); color: var(--mine); }
:root[data-theme] .status-pill { background: var(--bubble); color: var(--text); }
:root[data-theme] .mine .status-pill { background: color-mix(in srgb, var(--mine) 60%, transparent); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .msg:not(.mine) .status-pill { background: #0f3b31; color: #9fe1cb; } }
.sheet-backdrop { position: fixed; inset: 0; z-index: 85; background: rgb(0 0 0 / 0.4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.sheet-row { display: flex; gap: 8px; align-items: center; }
.sheet .primary { border-radius: 10px; padding: 8px 14px; }
.sheet input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 0; background: var(--bubble); }
.status-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.status-picks button { font-size: 13px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); }
.plain.link { color: var(--accent); }
.weather { display: flex; align-items: center; gap: 6px; padding: 4px 14px; font-size: 13px; background: var(--panel); border-bottom: 1px solid var(--line); }
.weather[hidden], .daily[hidden] { display: none; }
.weather-icon { font-size: 16px; }
.weather-right { margin-left: auto; white-space: nowrap; }
.calendar { padding: 5px 14px; font-size: 13px; background: var(--panel); border-bottom: 1px solid var(--line); cursor: pointer; }
.calendar[hidden] { display: none; }
.cal-next, .cal-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cal-when { color: var(--accent); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-more { white-space: nowrap; }
.cal-list { margin: 4px 0 2px 22px; display: flex; flex-direction: column; gap: 2px; }
.cal-day { margin-top: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.daily { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.daily-banner {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.daily-icon { font-size: 18px; line-height: 1.2; }
.daily-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.daily-body b { font-size: 14px; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.daily-remove { padding: 0 2px; color: var(--muted); }
.pinbar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--panel); text-align: left; font-size: 14px; }
.pinbar[hidden] { display: none; }
.pinbar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-item .bubble { display: inline-block; max-width: 100%; white-space: pre-wrap; word-break: break-word; }
.pinned-item .photo { max-width: 60%; border-radius: 10px; }
.shared-meta button + button { padding-left: 10px; }
.shared { flex: 1; overflow-y: auto; padding: 10px 12px; overscroll-behavior: contain; }
.shared-tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; border-radius: 10px; background: var(--bubble); }
.shared-tabs button { flex: 1; padding: 6px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.shared-tabs button.on { background: var(--panel); color: var(--text); font-weight: 600; }
.shared-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.shared-grid .photo { width: 100%; aspect-ratio: 1; max-height: none; margin: 0; border-radius: 6px; }
.shared-item { margin-bottom: 14px; }
.shared-item .link-row { display: flex; gap: 8px; align-items: center; text-decoration: none; }
.shared-item .link-row b { display: block; }
.shared-item .link-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.shared-meta { margin-top: 3px; }
.shared-meta button { color: var(--accent); font-size: inherit; padding: 0 0 0 4px; }
#theme-toggle { display: flex; align-items: center; gap: 6px; }
#theme-toggle .chevron { margin-left: auto; transition: transform 0.15s; }
#theme-toggle.open .chevron { transform: rotate(90deg); }
.theme-list { display: flex; flex-direction: column; margin: 0 0 4px 14px; padding-left: 6px; border-left: 2px solid var(--line); }
.theme-list[hidden] { display: none; }
.theme-list button { padding: 8px 10px; }
.theme-list button.on { color: var(--accent); font-weight: 600; }
.theme-list button.on::after { content: " ✓"; }
.menu .theme-label { padding: 6px 10px 0; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--text); } /* 16px stops iOS zooming into fields */
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--red); font-size: 13px; margin: 4px 16px; }
.link { color: var(--accent); }

#app { height: 100dvh; max-width: 640px; margin: 0 auto; }
.screen { height: 100%; display: flex; flex-direction: column; }
.center { align-items: center; justify-content: center; }

/* Forms (login, profile) */
.form { align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; text-align: center; }
.form h1 { margin: 0; font-size: 26px; }
.form form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.form input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
}
.form button { padding: 12px; border-radius: 12px; background: var(--bubble); }
.primary { background: var(--accent) !important; color: #fff; font-weight: 600; }
.row-buttons { display: flex; gap: 10px; }
.row-buttons button { flex: 1; }
.avatar-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }

/* Avatars */
.avatar {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mine), var(--green)) center / cover;
  color: #fff; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar.big { width: 96px; height: 96px; font-size: 40px; }
.avatar.tiny { width: 18px; height: 18px; font-size: 9px; }
.avatar .note {
  position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* Header & menu */
.bar {
  display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.bar .title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar .title strong, .bar .title .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar #partner-status { line-height: 1.25; }
.icon { width: 36px; height: 36px; border-radius: 50%; font-size: 17px; }
.icon:active, .icon.on { background: var(--bubble); }
/* Your chess move: a small dot on ⚙. */
#menu-toggle { position: relative; }
#menu-toggle.turn::after { content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #0a84ff; border: 2px solid var(--panel); }
.menu-line { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.shared-head { margin: -10px -12px 10px; }
.search-row { display: flex; gap: 8px; align-items: center; }
.chess-pane { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
/* The same blue dot as on ⚙︎ when it's your chess move. */
.menu-dot { display: inline-block; width: 9px; height: 9px; margin: 0 5px 0 8px; border-radius: 50%; background: #0a84ff; vertical-align: 0.1em; }

/* ---------- Countdowns and lists (⚙ → ⏳ Countdowns / 📝 Lists) ---------- */
.countdown-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel); text-align: left; font-size: 14px; }
.countdown-bar .days { margin-left: auto; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.pane[hidden] { display: none; }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.pane-head b { flex: 1; text-align: center; margin-right: 56px; }
.pane-head button { color: var(--accent); }
#countdown-list, #lists-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; }
.pane-form { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; } /* the message box under it already keeps room for the home bar */
.pane-form input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.pane-form input[type="date"] { flex: 0 0 auto; }
.pane-form .emoji-input { flex: 0 0 46px; text-align: center; }
.pane-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.pane-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pane-row .emoji { font-size: 22px; width: 28px; text-align: center; }
.pane-row .days { font-weight: 600; color: var(--accent); white-space: nowrap; }
.pane-row .x { color: var(--muted); padding: 4px 8px; }
.pane-row.done .grow { text-decoration: line-through; color: var(--muted); }
.pane-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.pane-row.link { cursor: pointer; }
.pane-empty { text-align: center; color: var(--muted); padding: 24px 12px; }
.pane-empty .picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.pane-empty .picks button, .pane-actions button { padding: 6px 12px; border-radius: 999px; background: var(--bubble); color: var(--text); font-size: 14px; }
.pane-actions { display: flex; justify-content: center; gap: 8px; padding: 12px 0; }
.pane-actions .danger { color: var(--red); }
.partner-time { white-space: nowrap; }
#menu-toggle { display: grid; place-items: center; color: var(--text); }
#menu-toggle svg { pointer-events: none; }
.plain { padding: 6px 4px; color: var(--accent); }
.menu {
  position: absolute; right: max(12px, calc(50% - 308px)); top: calc(env(safe-area-inset-top) + 54px); z-index: 10;
  display: flex; flex-direction: column; min-width: 190px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  max-height: calc(100dvh - env(safe-area-inset-top) - 70px); overflow-y: auto; overscroll-behavior: contain;
}
.menu button { text-align: left; padding: 10px 12px; border-radius: 8px; }
.menu button:active { background: var(--bubble); }
.danger { color: var(--red); }

/* Search */
.search { padding: 8px 12px 0; }
.search input {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 0; background: var(--bubble);
}
.search p { margin: 6px 2px 0; }
mark { background: var(--mark); color: #000; border-radius: 3px; }

/* Messages */
.messages { touch-action: manipulation; flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.mine { flex-direction: row-reverse; }
.msg .col { display: flex; flex-direction: column; max-width: 76%; }
.msg.mine .col { align-items: flex-end; }
.meta { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
/* A run of messages from one person: only the first shows the name, photo and time. */
.msg.grouped { margin-top: -7px; }
.msg.grouped .meta { display: none; }
.msg.grouped > .avatar { visibility: hidden; height: 0; }
/* # Header and ## smaller header lines in a message. */
.bubble .mh1 { font-size: 1.3em; font-weight: 700; line-height: 1.3; }
.bubble .mh2 { font-size: 1.1em; font-weight: 700; }
.meta b { color: var(--text); font-weight: 600; }
.bubble {
  padding: 7px 11px; border-radius: 16px; background: var(--bubble);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mine .bubble { background: var(--mine); color: var(--mine-text); }
/* Double-tap: a heart pops up over the message. */
.col { position: relative; }
.heart-pop {
  position: absolute; left: 50%; top: 50%; font-size: 44px; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.3); opacity: 0; animation: heart-pop 0.8s ease-out;
}
@keyframes heart-pop {
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  60% { transform: translate(-50%, -60%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -90%) scale(0.9); opacity: 0; }
}
/* Just an emoji (or up to three): big, without a bubble. */
.jumbo { font-size: 48px; line-height: 1.1; padding: 2px 0; }
.jumbo.few { font-size: 38px; }
.msg.flash .jumbo { border-radius: 12px; box-shadow: 0 0 0 3px var(--mark); }
.mine .bubble a { color: #fff; }
.bubble a { text-decoration: underline; }
.msg.flash .bubble { box-shadow: 0 0 0 3px var(--mark); }
.edit-chip {
  font-size: 13px; color: var(--accent); padding: 4px 6px; white-space: nowrap;
}
.actions {
  width: max-content; display: flex; align-items: center; gap: 2px; margin-top: 5px; padding: 3px 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 99px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}
.pick { font-size: 21px; width: 36px; height: 36px; border-radius: 50%; padding: 0; }
.pick.on, .pick:active { background: var(--bubble); }
.more-pick { font-size: 18px; color: var(--muted); }
.actions.all { width: auto; max-width: min(300px, 80vw); flex-wrap: wrap; justify-content: center; border-radius: 20px; }
.reactions { display: flex; gap: 4px; margin-top: 4px; }
.chip {
  font-size: 14px; padding: 2px 8px; border-radius: 99px; background: var(--bubble);
  border: 1px solid transparent; color: var(--text);
}
.chip.mine { border-color: var(--accent); }
.seen { font-size: 11px; color: var(--muted); margin-top: 3px; }
.chip:disabled { opacity: 1; cursor: default; }
.bubble a, button { cursor: pointer; }
.result { cursor: pointer; }
.empty { margin: auto; color: var(--muted); font-size: 14px; }

/* Typing */
.typing { display: flex; align-items: center; gap: 6px; padding: 2px 14px 6px; }
.dots { display: inline-flex; gap: 3px; padding: 6px 8px; border-radius: 99px; background: var(--bubble); }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: bounce 1.05s infinite; }
.dots i:nth-child(2) { animation-delay: 0.35s; }
.dots i:nth-child(3) { animation-delay: 0.7s; }
@keyframes bounce { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* Composer */
.editing {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 14px; font-size: 13px; border-top: 1px solid var(--line);
}
.editing span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
  border-top: 1px solid var(--line); background: var(--panel);
}
.composer textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 10px 14px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--bg); outline: none; line-height: 22px;
}
.composer .small { padding-bottom: 10px; font-variant-numeric: tabular-nums; }
.composer .small.full { color: var(--red); }
.send {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 20px; font-weight: 700;
}
.send:disabled { opacity: 0.35; }

/* About */
.about-body { flex: 1; overflow-y: auto; padding: 20px 16px; text-align: center; }
.about-body h1 { margin: 8px 0 0; }
.about-body p { margin: 6px 0; }
.card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 16px 0; }
.card h2 { font-size: 16px; margin: 0 0 8px; }
.card h3 { font-size: 14px; margin: 10px 0 4px; }
.card ul { margin: 0; padding-left: 18px; font-size: 14px; }

/* Privacy veil and toast */
#veil {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted);
}
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 62px); transform: translateX(-50%); z-index: 95;
  max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); font-size: 14px;
}

/* Logo images use the full-bleed icon, so round them like iOS does. */
#veil img, .form > img, .about-body > img { border-radius: 22%; }

/* Photos */
.photo {
  display: block; width: min(300px, 100%); max-height: 420px; object-fit: cover;
  border-radius: 16px; background: var(--bubble); cursor: zoom-in; margin-bottom: 4px;
}
.bar #status.online::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #34c759; vertical-align: 1px;
}
.photo.broken { min-height: 60px; font-size: 12px; padding: 8px; aspect-ratio: auto !important; }
.file {
  display: flex; align-items: center; gap: 10px; max-width: 240px; padding: 8px 11px; margin-bottom: 4px;
  border-radius: 16px; background: var(--bubble); color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.mine .file { background: var(--mine); color: var(--mine-text); }
.file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file .small { opacity: 0.8; }
.file > span:last-child { min-width: 0; }
.file-icon { font-size: 24px; }
.gif-button {
  font-size: 12px; font-weight: 700; padding: 3px 5px; margin: 0 2px 9px; border-radius: 6px;
  border: 1.5px solid currentColor; color: var(--accent); background: none; cursor: pointer;
}
.gifs {
  position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.gifs-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; }
.gifs-bar input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 0; background: var(--bubble); font: inherit; }
#gif-message { text-align: center; padding: 20px; margin: 0; }
.gif-grid { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 8px; }
.gif-cols { columns: 2; column-gap: 6px; }
.gif-grid img { width: 100%; height: auto; display: block; margin-bottom: 6px; border-radius: 8px; background: var(--bubble); cursor: pointer; break-inside: avoid; }
.gif-grid img.busy { opacity: 0.4; }
.gifs-credit { text-align: center; margin: 6px 0; font-weight: 600; }
.attach { font-size: 22px; padding: 0 2px 8px; cursor: pointer; }
.pending { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-top: 1px solid var(--line); }
.pending img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.pending span { flex: 1; }
.viewer {
  position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / 0.92);
  display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 8px env(safe-area-inset-bottom);
}
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }

.bubble code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 3px; border-radius: 4px; background: rgb(127 127 127 / 0.18); }

/* Quotes */
.quote {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  max-width: 240px; margin-bottom: 4px; padding: 5px 9px; border-radius: 10px;
  border-left: 3px solid var(--accent); background: var(--bubble); font-size: 13px;
}
.quote b { font-size: 12px; }
.quote span {
  color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.msg { position: relative; }
.msg.swipe-ready::before {
  content: "↩︎"; position: absolute; left: -34px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--accent);
}
.messages { overflow-x: hidden; } /* rows slide sideways while swiping */

/* Phone keyboard open: the bars under the header step aside. */
body.kb-open #weather, body.kb-open #calendar, body.kb-open #countdown-bar,
body.kb-open #daily, body.kb-open #pinbar { display: none !important; }
body.kb-open .composer { padding-bottom: 8px; }