:root {
  --teal: #2cc1d7;
  --teal-dark: #1aa8bd;
  --ink: #1c1c1e;
  --muted: #6b6b70;
  --line: #e8e4dc;
  --bg: #f4f1ea;
  --card: #fff;
  --danger: #ff3b30;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }

#app { min-height: 100%; max-width: 480px; margin: 0 auto; position: relative; background: var(--bg); min-height: 100dvh; box-shadow: 0 0 40px rgba(0,0,0,.06); }
.screen { min-height: 100dvh; display: flex; flex-direction: column; }

/* Auth */
.auth-card { margin: auto; width: min(100%, 400px); padding: 28px 22px calc(28px + var(--safe-b)); }
.brand-row { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.logo { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 8px 20px rgba(44,193,215,.35); }
.brand-row h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.03em; }
.brand-row p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab { flex: 1; border: 0; background: #ebe7df; border-radius: 999px; padding: 10px; font-weight: 600; cursor: pointer; }
.auth-tab.active { background: var(--teal); color: #fff; }
.auth-form label { display: grid; gap: 6px; margin-bottom: 12px; font-size: .9rem; color: var(--muted); }
.auth-form input, .sheet-card input, .sheet-card select, .sheet-card textarea, .travel-box input {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff;
}
.btn { border: 0; border-radius: 999px; padding: 12px 20px; font-weight: 700; cursor: pointer; }
.btn.primary { background: var(--teal); color: #fff; width: 100%; }
.btn.primary.small { width: auto; padding: 10px 16px; }
.btn.ghost { background: transparent; color: var(--muted); width: 100%; }
.hint { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.parent-link { display: block; text-align: center; margin-top: 18px; color: var(--teal-dark); font-weight: 600; text-decoration: none; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(244,241,234,.92); backdrop-filter: blur(10px); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(0,0,0,.04); }
.chip { border: 0; border-radius: 999px; padding: 8px 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip.ghost .dot { width: 8px; height: 8px; border-radius: 50%; background: #34c759; }
.chip.ghost.is-hidden .dot { background: #aaa; }
.top-actions { display: flex; gap: 6px; }
.icon-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); cursor: pointer; font-size: 1.1rem; }

.pills { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; }
.pill { border: 0; background: #ebe7df; color: var(--ink); border-radius: 999px; padding: 8px 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.pill.active { background: var(--teal); color: #fff; }

.travel-box { padding: 0 12px 12px; }
.travel-box label { display: grid; gap: 6px; font-size: .85rem; color: var(--muted); }
.suggestions { list-style: none; margin: 8px 0 0; padding: 0; background: #fff; border-radius: 14px; overflow: hidden; }
.suggestions li { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.suggestions li:hover { background: #f7fbfc; }
.map { height: 180px; border-radius: 16px; margin-top: 10px; overflow: hidden; background: #dfe8ea; }

.feed { padding: 0 12px calc(var(--nav-h) + var(--safe-b) + 16px); display: flex; flex-direction: column; gap: 12px; }
.feed.compact { max-height: 40vh; overflow: auto; padding: 0; }

.member-card, .chat-row, .ad-card {
  background: var(--card); border-radius: 18px; padding: 14px; box-shadow: 0 8px 24px rgba(28,28,30,.06);
}
.member-card { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
.member-card img, .chat-row img, .thread-peer img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #ddd; }
.member-card h3, .chat-row strong { margin: 0; font-size: 1.05rem; }
.member-card .meta, .chat-row .preview { color: var(--muted); font-size: .86rem; margin: 2px 0 8px; }
.langs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lang-tag { font-size: .72rem; background: #eef9fb; color: var(--teal-dark); border-radius: 999px; padding: 3px 8px; font-weight: 600; }
.member-card .actions { display: flex; gap: 8px; margin-top: 8px; }
.member-card .actions .btn { width: auto; padding: 8px 14px; font-size: .85rem; }

.ad-card { border: 1px dashed rgba(44,193,215,.45); background: linear-gradient(180deg,#f7fcfd,#fff); }
.ad-card .sponsored { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.ad-card h4 { margin: 4px 0; }
.ad-card p { margin: 0 0 10px; color: #444; font-size: .92rem; }
.ad-card a { color: var(--teal-dark); font-weight: 700; text-decoration: none; }

.chat-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; cursor: pointer; }
.chat-row img { width: 56px; height: 56px; }
.badge { background: var(--teal); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; padding: 0 6px; }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: #34c759; display: inline-block; margin-right: 4px; }

.bottom-nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(480px, 100%);
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; z-index: 30;
}
.nav-item { border: 0; background: none; display: grid; place-items: center; gap: 2px; color: var(--muted); font-size: .75rem; font-weight: 600; padding-top: 8px; cursor: pointer; }
.nav-item.active { color: var(--teal-dark); }
.nav-ico { font-size: 1.2rem; }

/* Thread */
.thread-top { gap: 10px; }
.thread-peer { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.thread-peer img { width: 40px; height: 40px; }
.thread-peer strong { display: block; }
.thread-peer small { color: var(--muted); }
.thread-messages { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg,#fbfaf7,#f3f0e8); }
.bubble { max-width: 78%; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); font-size: .95rem; }
.bubble.mine { align-self: flex-end; background: var(--teal); color: #fff; }
.bubble.voice { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; border: 0; }
.composer { display: flex; gap: 8px; padding: 10px 12px 4px; align-items: center; background: #fff; border-top: 1px solid var(--line); }
.composer input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 12px 14px; }
.mic { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef9fb; cursor: pointer; }
.mic.recording { background: var(--danger); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,59,48,.15); } }
.composer-hint { margin: 0; padding: 0 12px calc(10px + var(--safe-b)); font-size: .75rem; color: var(--muted); background: #fff; }

/* Sheets */
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; display: grid; align-items: end; }
.sheet-card { background: #fff; border-radius: 22px 22px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); max-height: 85vh; overflow: auto; }
.sheet-card h3 { margin: 0 0 14px; }
.sheet-card label { display: grid; gap: 6px; margin-bottom: 12px; font-size: .88rem; color: var(--muted); }
.sheet-card .check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ref-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.ref-item strong { display: block; }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; }

[dir="rtl"] .bottom-nav, [dir="rtl"] .topbar { direction: rtl; }

/* ---------------------------------------------------------------------------
   Toasts. Replaces alert() — see assets/js/ui.js
   --------------------------------------------------------------------------- */
.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 16px + var(--safe-b));
  width: min(480px, calc(100% - 24px));
  display: flex; flex-direction: column; gap: 8px;
  z-index: 80; pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  background: #26292e; color: #fff;
  border-radius: 14px; padding: 13px 16px;
  font-size: .94rem; line-height: 1.4; font-weight: 500;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast--error { background: #b3261e; }
.toast--success { background: #1f6f4a; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; transform: none; }
}

/* Map: country outlines, drawn under the Leaflet layer or standalone. */
.map .world-land { fill: #eae4d7; stroke: #b9c9cd; stroke-width: .7; vector-effect: non-scaling-stroke; }
.map .world-bg { fill: #cfe0e6; }

/* ---------------------------------------------------------------------------
   Entry-screen language picker — see assets/js/langpicker.js
   --------------------------------------------------------------------------- */
.lp { position: relative; margin-bottom: 18px; }
.lp-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 12px 15px; font-weight: 600; cursor: pointer; text-align: start;
}
.lp-globe { font-size: 1.05rem; }
.lp-current { flex: 1; }
.lp-caret { color: var(--muted); }
.lp-trigger:focus-visible, .lp-list button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.lp-panel {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(28,28,30,.16); padding: 12px; overflow: hidden;
}
.lp-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 13px; background: #faf9f6;
}
.lp-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  max-height: 190px; overflow: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.lp-list button {
  width: 100%; border: 0; background: none; border-radius: 9px;
  padding: 9px 10px; text-align: start; cursor: pointer; font-size: .9rem;
}
.lp-list button:hover { background: #f1eee7; }
.lp-list button.is-on { background: var(--teal); color: #fff; font-weight: 700; }
.lp-none { color: var(--muted); padding: 10px; font-size: .88rem; }

/* the live preview card */
.lp-preview { margin-top: 12px; }
.lp-frame {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--bg); font-size: .82rem;
}
.lp-tabs { display: flex; gap: 4px; padding: 8px 10px 0; }
.lp-tab { padding: 5px 9px; border-radius: 999px; background: #e6e2da; font-weight: 600; font-size: .72rem; }
.lp-tab.is-on { background: var(--teal); color: #fff; }
.lp-card { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 10px; }
.lp-thumb {
  width: 60px; height: 60px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, #2cc1d7, #8f7ae5); color: #fff; font-weight: 700; font-size: 1.4rem;
}
.lp-top { display: flex; align-items: center; gap: 8px; }
.lp-top b { font-size: .95rem; flex: 1; }
.lp-count { color: var(--muted); font-size: .75rem; font-weight: 700; }
.lp-bio { margin: 3px 0 6px; color: #3a3a40; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lp-flags span { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lp-btn { display: inline-block; background: var(--teal); color: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: .74rem; font-weight: 700; }
.lp-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line);
  background: #fff; font-size: .72rem; font-weight: 600; color: var(--muted); }
.lp-nav span { padding: 8px; text-align: center; }
.lp-nav span.is-on { color: var(--teal-dark); }

@media (max-width: 380px) { .lp-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Message bubbles.
   DO NOT add `user-select: none` here. A long press on Android must reach
   Chrome's own selection menu (Translate / Copy / Select all), which on a
   language-exchange app is the most useful control on the screen.
   See renderBubble() in assets/js/app.js for the rest of the reasoning.
   --------------------------------------------------------------------------- */
.bubble-wrap { display: flex; }
.bubble-wrap.mine { justify-content: flex-end; }
.bubble { position: relative; padding-inline-end: 54px; }
.bubble-text { -webkit-user-select: text; user-select: text; }
.bubble-meta {
  position: absolute; inset-inline-end: 30px; bottom: 6px;
  font-size: .66rem; opacity: .6; font-variant-numeric: tabular-nums;
}
.bubble.mine .bubble-meta { opacity: .8; }
.bubble-del {
  position: absolute; inset-inline-end: 7px; bottom: 3px;
  border: 0; background: none; cursor: pointer;
  font-size: .82rem; line-height: 1; padding: 4px; opacity: .5;
}
.bubble-del:hover, .bubble-del:focus-visible { opacity: 1; }
.bubble.mine .bubble-del { filter: brightness(0) invert(1); opacity: .75; }
.bubble-play { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }

/* Text button that reads as a link but behaves as a button. */
.linkish {
  display: block; width: 100%; margin-top: 12px;
  border: 0; background: none; cursor: pointer;
  color: var(--teal-dark); font-weight: 600; font-size: .9rem;
}
.linkish:hover { text-decoration: underline; }
#forgot-box h3, #reset-box h3 { margin: 0 0 6px; font-size: 1.15rem; }
#forgot-box .hint, #reset-box .hint { margin: 0 0 14px; }
#forgot-box label, #reset-box label { display: grid; gap: 6px; margin-bottom: 12px; font-size: .9rem; color: var(--muted); }
#forgot-box input, #reset-box input {
  width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff;
}