/* NAFIL — night blue, coral/pink and turquoise/cyan, taken from the NF icon. */
:root {
  --night: #0b1230;
  --night-2: #111a3f;
  --surface: #18224f;
  --surface-2: #202c62;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f4f6ff;
  --muted: #a3acd0;
  --coral: #ff7a6b;
  --pink: #ff4f9a;
  --turquoise: #2dd4bf;
  --cyan: #22d3ee;
  --mine-a: #e4566b;
  --mine-b: #c23c8f;
  --danger: #ff8a8a;
  --radius: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100dvh;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--text);
  /* "NAFIL Mongolian" only covers the Mongolian script (unicode-range): other characters use the system font. */
  font: 16px/1.4 "NAFIL Mongolian", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(60rem 40rem at -10% -10%, rgba(255, 122, 107, 0.10), transparent 60%),
    radial-gradient(50rem 40rem at 110% 110%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--night);
  background-attachment: fixed;
}

#app { height: var(--app-height); max-width: 760px; margin: 0 auto; position: relative; overflow: hidden; }

.screen { height: 100%; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ sign in */

#login { justify-content: center; align-items: center; padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); }
.login-card { width: 100%; max-width: 360px; text-align: center; }
.login-logo { border-radius: 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line); }
.brand {
  margin: 18px 0 4px;
  font-size: 34px;
  letter-spacing: 0.28em;
  font-weight: 700;
  padding-left: 0.28em;
  background: linear-gradient(90deg, var(--coral), var(--pink) 45%, var(--turquoise) 70%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline { margin: 0 0 32px; color: var(--muted); }
#login-form { display: grid; gap: 14px; text-align: left; }
#login-form label span { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px 4px; }
#login-form input {
  width: 100%;
  font-size: 17px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
}
#login-form input:focus { border-color: rgba(45, 212, 191, 0.6); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15); }
.form-error { min-height: 20px; margin: 0; color: var(--danger); font-size: 14px; text-align: center; }
.btn-primary {
  margin-top: 4px;
  padding: 15px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(135deg, var(--mine-a), var(--mine-b));
  box-shadow: 0 10px 24px rgba(194, 60, 143, 0.35);
}
.btn-primary:disabled { opacity: 0.6; }

/* ------------------------------------------------------------ header */

.chat-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) 12px 10px 16px;
  background: rgba(11, 18, 48, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.peer { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.usage-pill {
  flex: none; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line); white-space: nowrap;
}
.usage-pill:active { background: var(--surface-2); }
.usage-pop {
  position: absolute; right: 56px; top: calc(100% - 4px); width: 260px; z-index: 4;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); padding: 12px 14px; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.usage-pop strong { color: var(--text); font-weight: 600; }
.usage-pop .big { display: block; font-size: 22px; color: var(--text); font-weight: 700; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 17px; color: #08223a;
  background: linear-gradient(135deg, var(--turquoise), var(--cyan));
  position: relative;
}
.avatar.online::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #4ade80; border: 2px solid var(--night);
}
.peer-name { font-weight: 600; font-size: 17px; }
.peer-status { font-size: 13px; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.icon-btn:active { background: var(--surface); }
.icon-btn svg { fill: currentColor; stroke: none; }
.icon-btn.attach svg, .viewer-close svg, .viewer-nav svg { fill: none; stroke: currentColor; }

.menu {
  position: absolute; right: 12px; top: calc(100% - 4px);
  min-width: 200px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.menu-info { padding: 12px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.menu button { display: block; width: 100%; text-align: left; padding: 14px 16px; }
.menu button:active { background: var(--surface); }
.menu button:disabled { color: var(--turquoise); cursor: default; }
#notif-info { border-bottom: 0; border-top: 1px solid var(--line); }

.banner {
  z-index: 2;
  text-align: center;
  font-size: 13px;
  padding: 6px 12px;
  color: #08223a;
  background: linear-gradient(90deg, var(--turquoise), var(--cyan));
}
.banner.warn { color: #fff; background: linear-gradient(90deg, var(--mine-a), var(--mine-b)); }

/* ------------------------------------------------------------ messages */

.messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 8px;
  overscroll-behavior: contain;
}
.load-more { text-align: center; color: var(--muted); font-size: 13px; padding: 8px; }
.empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--muted); gap: 8px; }
.empty img { margin: 0 auto; border-radius: 16px; opacity: 0.9; }

.day {
  text-align: center;
  margin: 18px 0 10px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.day span { background: rgba(24, 34, 79, 0.8); padding: 4px 10px; border-radius: 999px; }

.row { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2px; }
.row.mine { align-items: flex-end; }
.row.gap { margin-top: 10px; }

.bubble {
  max-width: min(78%, 520px);
  padding: 9px 13px 7px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(45, 212, 191, 0.18);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  position: relative;
}
.row.mine .bubble {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--mine-a), var(--mine-b));
}
.row:not(.mine) .bubble.tail { border-bottom-left-radius: 6px; }
.row.mine .bubble.tail { border-bottom-right-radius: 6px; }
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.meta { display: block; text-align: right; font-size: 11px; opacity: 0.7; margin-top: 2px; white-space: nowrap; }

.bubble.media { padding: 4px; overflow: hidden; }
.bubble.media img, .bubble.media video {
  display: block;
  max-width: 100%;
  width: 280px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  background: var(--night-2);
}
.bubble.media .meta { padding: 2px 8px 2px; }

.file-card { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: inherit; min-width: 200px; }
.file-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.file-name { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.file-size { font-size: 12px; opacity: 0.75; }

.status { font-size: 11px; color: var(--muted); margin: 3px 6px 0; }
.status.failed { color: var(--danger); cursor: pointer; }
.progress { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); margin-top: 6px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: #fff; transition: width 0.2s; }
.pending .bubble { opacity: 0.75; }

/* ------------------------------------------------------------ composer */

.composer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px calc(8px + var(--safe-bottom));
  background: rgba(11, 18, 48, 0.85);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--line);
}
#input {
  flex: 1;
  resize: none;
  max-height: 140px;
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 10px 16px;
  outline: none;
}
#input:focus { border-color: rgba(45, 212, 191, 0.5); }
.send {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--mine-a), var(--mine-b));
  transition: transform 0.15s, opacity 0.15s;
}
.send:disabled { opacity: 0.35; }
.send:not(:disabled):active { transform: scale(0.92); }
.icon-btn.attach { width: 44px; height: 44px; color: var(--turquoise); background: var(--surface); }

.attach-sheet {
  position: absolute; left: 10px; bottom: calc(100% + 8px);
  display: flex; gap: 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.attach-sheet button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 76px; padding: 12px 6px; border-radius: 14px; font-size: 13px;
}
.attach-sheet button:active { background: var(--surface); }
.attach-sheet svg { color: var(--turquoise); }

/* ------------------------------------------------------------ viewer */

.viewer {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(5, 8, 22, 0.96);
  display: grid; place-items: center;
  padding: calc(56px + var(--safe-top)) 12px calc(64px + var(--safe-bottom));
}
.viewer-stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; will-change: transform; }
.viewer img.glide { transition: transform 0.22s ease-out; }
.viewer video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
.viewer-close { position: absolute; top: calc(8px + var(--safe-top)); right: 8px; color: #fff; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(24, 34, 79, 0.7); }
.viewer-nav.prev { left: 8px; }
.viewer-nav.next { right: 8px; }
@media (pointer: coarse) { .viewer-nav { display: none; } }
.viewer-bar {
  position: absolute; left: 0; right: 0; bottom: calc(12px + var(--safe-bottom));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 0 12px;
}
.viewer-pos { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.viewer-action {
  color: var(--text); text-decoration: none; font-size: 14px;
  padding: 9px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
}
.viewer-action:active { background: var(--surface); }

@media (min-width: 761px) {
  #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ------------------------------------------------------------ discreet version (/d): no NAFIL branding */

.discreet-only { display: none !important; }
[data-discreet] .discreet-only { display: revert !important; }
[data-discreet] .brand-only { display: none !important; }
[data-discreet] { --night: #16181d; --night-2: #1d2026; --surface: #23262d; --surface-2: #2b2f37; color-scheme: dark; }
[data-discreet] body { background: #16181d; }
.discreet-title { margin: 0 0 28px; font-size: 26px; font-weight: 600; text-align: center; }

/* ------------------------------------------------------------ start screen */

.splash {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background:
    radial-gradient(40rem 30rem at 20% 10%, rgba(255, 122, 107, 0.16), transparent 60%),
    radial-gradient(40rem 30rem at 80% 90%, rgba(34, 211, 238, 0.16), transparent 60%),
    var(--night);
  transition: opacity 0.35s ease;
}
[data-discreet] .splash { background: #16181d; }
.splash { gap: 26px; transition: opacity 0.8s ease, transform 0.8s ease; cursor: pointer; }
.splash.out { opacity: 0; transform: scale(1.02); pointer-events: none; }

/* 1. a coral glow (left) and a cyan glow (right) slide toward each other and meet behind the icon */
/* Soft glows drawn with radial gradients (no blur filter: some browsers clip an animated blur into hard rectangles). */
.sp-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -320px 0 0 -260px; border-radius: 50%; opacity: 0; pointer-events: none; }
.sp-warm { background: radial-gradient(circle, rgba(255, 107, 125, 0.55) 0%, rgba(255, 107, 125, 0.18) 38%, rgba(255, 107, 125, 0) 68%); animation: sp-glow-warm 2s cubic-bezier(.22, .61, .36, 1) forwards; }
.sp-cool { background: radial-gradient(circle, rgba(34, 211, 238, 0.5) 0%, rgba(34, 211, 238, 0.16) 38%, rgba(34, 211, 238, 0) 68%); animation: sp-glow-cool 2s cubic-bezier(.22, .61, .36, 1) forwards; }
/* 2. the icon emerges gently from a soft blur */
.sp-icon {
  position: relative; width: 136px; height: 136px; border-radius: 30px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0; transform: translateY(10px) scale(0.86); filter: blur(10px);
  animation: sp-icon-in 1.3s 0.45s cubic-bezier(.22, .61, .36, 1) forwards, sp-breathe 1.6s 2.3s ease-in-out;
}
.sp-icon img { display: block; width: 100%; height: 100%; }
/* 3. a soft light sweeps slowly across the icon */
.sp-shine {
  position: absolute; inset: -20%; transform: translateX(-120%) rotate(18deg);
  background: linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
  animation: sp-shine 1.3s 1.6s cubic-bezier(.45, 0, .25, 1) forwards;
}
/* 4. the name, letter by letter, in the colours of the two bubbles */
.splash-name { display: flex; gap: 0.32em; padding-left: 0.32em; font-size: 28px; font-weight: 700; }
.splash-name span { opacity: 0; transform: translateY(8px); filter: blur(6px); animation: sp-letter 0.9s cubic-bezier(.22, .61, .36, 1) forwards; }
.splash-name span:nth-child(1) { color: #ff9470; animation-delay: 1.75s; }
.splash-name span:nth-child(2) { color: #ff6b86; animation-delay: 1.88s; }
.splash-name span:nth-child(3) { color: #e86bbd; animation-delay: 2.01s; }
.splash-name span:nth-child(4) { color: #39d6c9; animation-delay: 2.14s; }
.splash-name span:nth-child(5) { color: #3ee0f5; animation-delay: 2.27s; }
/* 6. "Sain baina uu" in traditional Mongolian, left of the icon, revealed from top to bottom as if being written */
.sp-mongol {
  position: absolute; width: 42px; height: 162px;
  left: calc(50% - 136px); top: calc(50% - 111px);
  opacity: 0; clip-path: inset(0 0 100% 0);
  animation: sp-write 2s 2.3s cubic-bezier(.45, 0, .25, 1) forwards;
}

.splash-dot { width: 14px; height: 14px; border-radius: 50%; background: #3a3f4b; animation: sp-pulse 1.2s ease-in-out infinite; }
@keyframes sp-write { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 15% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }

@keyframes sp-glow-warm { from { opacity: 0; transform: translateX(-120px) scale(0.85); } to { opacity: 0.7; transform: translateX(-60px) scale(1); } }
@keyframes sp-glow-cool { from { opacity: 0; transform: translateX(120px) scale(0.85); } to { opacity: 0.7; transform: translateX(60px) scale(1); } }
@keyframes sp-icon-in { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sp-shine { to { transform: translateX(120%) rotate(18deg); } }
@keyframes sp-letter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sp-breathe { 50% { transform: scale(1.03); } }
@keyframes sp-pulse { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .sp-glow { opacity: 0.7; animation: none; }
  .sp-warm { transform: translateX(-60px); }
  .sp-cool { transform: translateX(60px); }
  .sp-icon, .splash-name span { opacity: 1; transform: none; filter: none; animation: none; }
  .sp-mongol { opacity: 1; clip-path: none; animation: none; }
  .sp-shine, .splash-dot { animation: none; }
}

/* ------------------------------------------------------------ urgent */

.urgent-pick { color: #ff8a8a; }
.attach-sheet .urgent-pick svg { color: #ff8a8a; }
.bubble.urgent { border: 2px solid #ff6b6b !important; box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.18); }
.urgent-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #ffd0d0; margin-bottom: 2px; }
.row:not(.mine) .urgent-label { color: #ff8a8a; }
.banner.alarm { color: #fff; background: #d93a4a; font-weight: 600; }

/* ------------------------------------------------------------ settings */

.settings-header { justify-content: flex-start; }
.settings-header .back svg, .settings-header .back { fill: none; stroke: currentColor; color: var(--text); }
.saved { margin-left: auto; font-size: 13px; color: var(--turquoise); }
.settings-body { flex: 1; overflow-y: auto; padding: 8px 16px calc(32px + var(--safe-bottom)); }
.settings-body h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 22px 4px 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.row-set { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.row-set:last-child { border-bottom: 0; }
.row-set.stack { flex-direction: column; align-items: stretch; }
.row-set.times { justify-content: flex-start; gap: 18px; color: var(--muted); }
.label { font-size: 16px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.hint.block { padding: 12px 16px; margin: 0; }
.hint strong { color: var(--text); font-weight: 600; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--turquoise); word-break: break-all; }
.settings-body input[type="time"], .settings-body select, .settings-body input[type="text"] {
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none;
}
.settings-body input[type="text"] { width: 100%; }
.settings-body input:focus, .settings-body select:focus { border-color: rgba(45, 212, 191, 0.6); }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 51px; height: 31px; border-radius: 999px; background: #3a4370; position: relative; cursor: pointer; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.switch:checked { background: var(--turquoise); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.4; }
.pill { flex: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--mine-a), var(--mine-b)); }
.pill.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.pill.danger { background: #d93a4a; }
.pill:disabled { opacity: 0.5; }
.version { text-align: center; color: var(--muted); font-size: 12px; margin-top: 24px; }

/* ------------------------------------------------------------ translations */

/* Traditional Mongolian script: served by NAFIL, downloaded only when such text is on screen (unicode-range). */
@font-face {
  font-family: "NAFIL Mongolian";
  src: url("/fonts/NotoSansMongolian-Regular.ttf") format("truetype");
  unicode-range: U+1800-18AF, U+11660-1167F, U+202F, U+200C-200D;
  font-display: swap;
}
.bubble.translatable { cursor: pointer; }
.translation { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.2); white-space: pre-wrap; }
.tr-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 2px; }
.tr-text { font-size: 15px; }
.tr-text[lang="mn-Mong"], .mn-label {
  font-family: "NAFIL Mongolian", "Noto Sans Mongolian", "Mongolian Baiti", sans-serif;
}
/* Traditional Mongolian is written top to bottom, columns from left to right. */
.tr-text[lang="mn-Mong"] { writing-mode: vertical-lr; max-height: 260px; max-width: 100%; overflow-x: auto; line-height: 1.6; }
.tr-pending, .tr-error { display: block; margin-top: 6px; font-size: 12px; opacity: 0.75; }
.tr-error { color: #ffd0d0; opacity: 1; }
.sheet .preview { color: var(--text); background: var(--night-2); border-radius: 12px; padding: 10px 12px; max-height: 96px; overflow: hidden; }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.lang-btn { padding: 12px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 16px; }
.lang-btn.last { border-color: rgba(45, 212, 191, 0.6); }
.lang-choice .lang-btn.last { background: rgba(45, 212, 191, 0.14); }
.lang-btn:active { background: var(--night-2); }
.mn-label { margin-right: 4px; }

/* ------------------------------------------------------------ dialog */

.dialog-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(5, 8, 22, 0.7); display: grid; place-items: center; padding: 24px; }
.dialog { width: 100%; max-width: 380px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.dialog h3 { margin: 0 0 8px; font-size: 19px; }
.dialog p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.dialog textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: none; outline: none; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* ------------------------------------------------------------ v0.6: together strip, languages, hearts, stickers, library */

/* The time for each of them (sun by day, moon at night) and the countdown to their next time together. */
.together {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 14px; font-size: 12.5px; color: var(--muted);
  background: rgba(11, 18, 48, 0.6); border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.together .clock { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.together .countdown { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* "I write in · I read in", above the field, changed at any time. */
.lang-bar {
  flex-basis: 100%; display: flex; gap: 6px; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted); padding: 0 0 6px;
}
.lang-bar .sep { opacity: 0.5; }
.lang-pop {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); z-index: 4;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.lang-row { margin-bottom: 10px; }
.lang-row-title { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 2px 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 12px; border-radius: 999px; font-size: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.chip.on { border-color: rgba(45, 212, 191, 0.7); background: rgba(45, 212, 191, 0.16); }

/* Empty field: the send button is a heart. */
.send .i-heart { display: none; }
.send.heart .i-heart { display: block; fill: currentColor; stroke: none; }
.send.heart .i-send { display: none; }

.empty h2 { color: var(--text); font-size: 22px; margin: 6px 0 0; }
.empty .welcome { max-width: 300px; margin: 0 auto; line-height: 1.5; }

/* Messages: only emoji, a heart, a sticker, reactions. */
.bubble.jumbo { background: none !important; border: 0 !important; padding: 0 4px; font-size: 44px; line-height: 1.15; }
.bubble.jumbo .meta { font-size: 11px; color: var(--muted); }
.bubble.nudge { display: flex; align-items: center; gap: 10px; }
.nudge-heart { font-size: 30px; line-height: 1; animation: beat 1.4s ease-in-out 2; }
.nudge-text { font-size: 14px; }
@keyframes beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(1); } 60% { transform: scale(1.15); } }
.bubble.sticker { background: none !important; border: 0 !important; padding: 0; }
.bubble.sticker img { display: block; width: 150px; height: 150px; border-radius: 28px; object-fit: cover; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.bubble.sticker .meta { display: block; font-size: 11px; color: var(--muted); padding: 3px 6px 0; }
.bubble { -webkit-user-select: text; -webkit-touch-callout: none; }
.bubble.media .expand { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: rgba(5, 8, 22, 0.6); color: #fff; font-size: 16px; }
.reactions { display: flex; gap: 2px; margin: -6px 10px 0; position: relative; z-index: 1; cursor: pointer; }
.reaction { font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.reaction.mine { border-color: rgba(255, 79, 154, 0.6); }
.react-row { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 12px; }
.react-btn { flex: 1; font-size: 26px; padding: 8px 0; border-radius: 14px; background: var(--surface); }
.react-btn.on { background: rgba(255, 79, 154, 0.25); }
.react-btn:active { transform: scale(0.9); }
#translate-part h3 { font-size: 15px; margin-top: 4px; }

/* Stickers */
.sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.sticker-tile { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--surface); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.sticker-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sticker-tile.new { display: grid; place-content: center; gap: 2px; color: var(--turquoise); font-size: 13px; border: 1px dashed rgba(45, 212, 191, 0.5); }
.sticker-tile .plus { font-size: 28px; line-height: 1; }
.sticker-empty { grid-column: 1 / -1; }

/* Celebrations: emoji floating up across the screen. */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.fx span { position: absolute; bottom: -60px; animation-name: float-up; animation-timing-function: ease-out; animation-fill-mode: both; }
@keyframes float-up {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(18px, -55vh) rotate(12deg); }
  100% { transform: translate(-14px, -110vh) rotate(-10deg); opacity: 0; }
}

/* Library */
.lib-tools { display: grid; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lib-row { display: flex; gap: 8px; }
.lib-tools select, .lib-tools input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--text);
  background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none;
}
.lib-body {
  flex: 1; overflow-y: auto; padding: 8px 8px calc(24px + var(--safe-bottom));
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 4px; align-content: start;
}
.lib-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--surface); padding: 0; }
.lib-tile img, .lib-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.lib-tile .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.lib-doc { grid-column: 1 / -1; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.lib-empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; }

/* Settings: shared countdown and secret words */
.countdown-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.countdown-edit input[type="text"] { flex: 1; width: auto; min-width: 140px; }
.settings-body input[type="date"] {
  font: inherit; font-size: 16px; color: var(--text); color-scheme: dark;
  background: var(--night-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; outline: none;
}
.secret-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.secret-list li { display: flex; align-items: center; gap: 10px; }
.secret-word { font-weight: 600; flex: 1; overflow-wrap: anywhere; }
.secret-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.secret-add input { flex: 1; min-width: 160px; }
.pill.small { padding: 5px 12px; font-size: 13px; }
.messages { padding-bottom: 8px; }

/* ------------------------------------------------------------ v0.7: tools above the field, voice messages */

.tools { flex-basis: 100%; display: flex; align-items: center; gap: 4px; padding: 0 0 6px; }
.tool {
  width: 40px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 12px; color: var(--turquoise);
}
.tool svg { width: 22px; height: 22px; }
.tool:active { background: var(--surface); }
.tool.urgent-pick { color: #ff8a8a; }
.tools .lang-bar {
  flex: 1; min-width: 0; flex-basis: auto; justify-content: flex-end; padding: 6px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icon-btn.attach svg { stroke-width: 1.8; }

.recorder { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4f5e; animation: rec-blink 1s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-label { flex: 1; color: var(--muted); font-size: 14px; }
.bubble.voice { min-width: 240px; }
.bubble audio { display: block; width: 100%; max-width: 280px; margin-top: 2px; }
.voice-label { display: block; font-size: 12px; opacity: 0.8; margin-bottom: 2px; }

/* ------------------------------------------------------------ v0.7: mood and picture */

.peer { position: relative; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mood-badge {
  position: absolute; left: 28px; top: 26px; font-size: 17px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.together .mine-clock { color: inherit; font: inherit; padding: 2px 6px; margin-left: -6px; border-radius: 999px; }
.together .mine-clock:active { background: var(--surface); }
.mood-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mood-head p { margin: 0; }
.avatar.big { width: 64px; height: 64px; font-size: 26px; flex: none; }
.mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mood-btn { font-size: 26px; padding: 8px 0; border-radius: 14px; background: var(--surface); }
.mood-btn.none { font-size: 13px; color: var(--muted); }
.mood-btn.on { background: rgba(45, 212, 191, 0.2); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.7); }
.mood-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ------------------------------------------------------------ v0.7: one composing card */

.composer { display: block; padding: 8px 10px calc(8px + var(--safe-bottom)); }
.compose-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 6px 6px 4px; transition: border-color 0.15s;
}
.compose-card:focus-within { border-color: rgba(45, 212, 191, 0.5); }
.compose-card #input {
  display: block; width: 100%; min-height: 56px;
  background: transparent; border: 0; border-radius: 0; padding: 8px 10px 4px;
  font-size: 17px; line-height: 1.4; max-height: none;
}
.compose-card .tools { padding: 2px 0 0; gap: 2px; }
.compose-card .tool { width: 38px; height: 38px; }
.compose-card .tool.mic { color: var(--text); }
.compose-card .send { width: 40px; height: 40px; margin-left: 2px; }
.compose-card .send svg { width: 22px; height: 22px; }
.compose-card .recorder { padding: 4px 4px 4px 8px; }
/* If the languages do not fit, show their beginning rather than cutting it off on the left. */
.compose-card .lang-bar { justify-content: safe flex-end; gap: 4px; font-size: 12px; }
@media (max-width: 420px) {
  .compose-card .tool { width: 34px; }
  .compose-card .tools { gap: 0; }
}

/* ------------------------------------------------------------ v0.8: topics */

/* "Us" and the topics, as pills under the header; the one on screen is highlighted, the others show their unread count. */
.topics {
  display: flex; gap: 6px; padding: 8px 12px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: rgba(11, 18, 48, 0.6); border-bottom: 1px solid var(--line);
}
.topics::-webkit-scrollbar { display: none; }
.topic-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 60vw;
  padding: 6px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.topic-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.topic-chip.on { border-color: rgba(45, 212, 191, 0.7); background: rgba(45, 212, 191, 0.16); }
.topic-chip.archived { opacity: 0.75; border-style: dashed; }
.topic-chip.add { color: var(--turquoise); font-size: 18px; line-height: 1; padding: 4px 12px; }
.topic-chip.ghost { color: var(--muted); }
.topic-chip:active { background: var(--surface-2); }
.topic-chip .badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--mine-a), var(--mine-b));
}
/* Empty topic: a short line instead of the welcome. */
#empty-topic { display: none; }
.empty.topic img, .empty.topic h2, .empty.topic .welcome, .empty.topic #empty-main { display: none; }
.empty.topic #empty-topic { display: block; }
.banner.archived { color: var(--muted); background: var(--surface); }
/* Topic sheet */
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 10px; }
.emoji-grid .mood-btn { font-size: 22px; padding: 6px 0; }
.emoji-grid .mood-btn.none { grid-column: span 2; }
.sheet input[type="text"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; outline: none;
}
.sheet input[type="text"]:focus { border-color: rgba(45, 212, 191, 0.6); }
.sheet .hint { margin-top: 8px; }
.move-row { margin: 10px 0 2px; }
#archive-list li { padding: 4px 0; }