:root {
  --wa-green: #0f766e;
  --wa-green-dark: #115e59;
  --badge: #0f766e;
  --tick: #0f766e;
  --font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root.dark {
  --wa-green: #2dd4bf;
  --wa-green-dark: #0f766e;
  --badge: #14b8a6;
  --tick: #5eead4;
  --header: #0e1c2b;
  --bg: #07111c;
  --chat-bg: #0b1624;
  --bubble-out: #134e4a;
  --bubble-in: #122033;
  --text: #e7eef6;
  --muted: #93a4b5;
  --border: rgba(148, 184, 196, .16);
  --hover: #122033;
  --active: #163044;
  --search: #102033;
  --icon: #c5d4e0;
  --composer: #102033;
  --panel: #0c1826;
  --empty: #102033;
  --notice: #13283a;
  --shadow: 0 10px 30px rgba(2, 8, 16, .28);
}
body { font-family: var(--font); }
.primary, .gate-go {
  border-radius: 14px;
  min-height: 48px;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px rgba(15, 118, 110, .22);
}
.welcome-gate {
  height: auto;
  min-height: 100%;
  overflow: auto;
  justify-content: flex-start;
  gap: 10px;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(20, 184, 166, .18), transparent 62%),
    linear-gradient(180deg, #0c1b2a, #07111c 58%);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.welcome-stage { flex: 0 0 auto; min-height: 0; }
.welcome-gate .deck { position: relative; min-height: 0; }
.welcome-gate .wslide {
  position: relative;
  inset: auto;
  display: none;
  background: rgba(14, 28, 43, .72);
  border: 1px solid rgba(148, 184, 196, .16);
  box-shadow: 0 16px 40px rgba(2, 8, 16, .28);
  backdrop-filter: blur(10px);
}
.welcome-gate .wslide[data-pose="now"] { display: flex; opacity: 1; transform: none; }
.welcome-gate .slide-banner {
  height: 168px;
  max-height: 168px;
  aspect-ratio: auto;
  width: calc(100% - 16px);
  margin: 8px auto 0;
  border-radius: 16px;
  background: #07111c;
  box-shadow: none;
}
.welcome-gate .slide-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.welcome-gate .slide-copy { padding: 0 16px 12px; }
.welcome-gate .wslide h2 { font-size: 20px; margin: 8px 0 4px; }
.welcome-gate .wslide p { font-size: 14px; }
.welcome-title { font-size: 22px; margin: 0; text-align: center; }
.terms-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: #d5e2ec;
}
.terms-check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: #14b8a6; }
.welcome-legal { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.welcome-legal .linkish { min-height: 36px; }
.home-banner { margin: 8px 12px 0; }
.home-banner .deck { min-height: 0; overflow: hidden; }
.home-banner .wslide { position: relative; inset: auto; display: none; border-radius: 16px; overflow: hidden; background: #102033; border: 1px solid rgba(148, 184, 196, .16); }
.home-banner .wslide[data-pose="now"] { display: block; opacity: 1; transform: none; }
.home-banner .slide-banner { height: 168px; max-height: 168px; aspect-ratio: auto; width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
.home-banner .slide-banner img { width: 100%; height: 100%; object-fit: cover; }
.home-banner .slide-copy { padding: 8px 12px 10px; }
.home-banner h2 { margin: 0 0 2px; font-size: 15px; }
.home-banner p { margin: 0; font-size: 12px; color: #93a4b5; }
.home-banner .wdots { margin: 6px 0 2px; }
.quick-row {
  display: flex;
  gap: 8px;
  padding: 0 12px 8px;
  overflow: auto;
}
.quick-row button {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}
.story-row { padding-top: 4px; padding-bottom: 4px; }
.spam-strip, .dev-flag {
  display: block;
  margin: 8px 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, .35);
  background: rgba(15, 118, 110, .16);
  color: #d9fff8;
  text-align: start;
}
.dev-code { margin: 0 0 12px; }
.dev-flag { margin: 0 0 6px; font-weight: 700; }
.chat-item, .menu-row, .set-item { border-radius: 12px; }
@media (min-width: 521px) {
  body.role-phone { background: #050b14; }
  body.role-phone #app { box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
}
@media (max-width: 380px) {
  .welcome-gate .slide-banner, .home-banner .slide-banner { height: 156px; max-height: 156px; }
  .welcome-gate .wslide h2 { font-size: 18px; }
}
@media (min-width: 900px) {
  .welcome-gate { align-items: center; }
  .welcome-gate .slide-banner { height: 220px; max-height: 220px; }
  .home-banner .slide-banner { height: 210px; max-height: 210px; }
  .welcome-gate .welcome-stage,
  .welcome-gate .welcome-title,
  .welcome-gate .terms-check,
  .welcome-gate .welcome-legal,
  .welcome-gate .gate-go { width: min(460px, 100%); }
}
.welcome-gate .deck,
.home-banner .deck { flex: 0 0 auto; height: auto; perspective: none; }
.welcome-gate .gate-body { flex: 0 0 auto; justify-content: flex-start; }
.welcome-gate .wslide[data-pose="next"],
.welcome-gate .wslide[data-pose="prev"],
.home-banner .wslide[data-pose="next"],
.home-banner .wslide[data-pose="prev"] { display: none; }
.wdot { background: rgba(148, 184, 196, .35); }
.wdot.on { width: 22px; background: #2dd4bf; }
.gate-go, .lang-chip, .lang-mark, .country-stage, .dot-btn i { animation: none; }
.gate {
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(20, 184, 166, .16), transparent 62%),
    linear-gradient(180deg, #0c1b2a, #07111c 58%);
  color: #e7eef6;
}
.gate .text-btn, .gate .linkish, .dial-code { color: #5eead4; }
.dot-btn { background: #122033; box-shadow: none; }
.lang-chip {
  border-color: rgba(45, 212, 191, .4);
  background: rgba(15, 118, 110, .28);
  box-shadow: none;
}
.lang-mark { background: linear-gradient(160deg, #5eead4, #0f766e); box-shadow: none; }
.gate-card {
  background: rgba(14, 28, 43, .88);
  border: 1px solid rgba(148, 184, 196, .16);
  box-shadow: 0 16px 40px rgba(2, 8, 16, .35);
  backdrop-filter: blur(12px);
}
.country-stage {
  background: linear-gradient(180deg, #122033, #07111c);
  border: 1px solid rgba(148, 184, 196, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: none;
}
.stage-flag { box-shadow: none; }
.stage-copy small { color: #5eead4; }
.phone-slab {
  background: #102033;
  box-shadow: inset 0 0 0 1px rgba(148, 184, 196, .18);
}
.slide-banner.is-broken,
.slide-fallback {
  background: radial-gradient(280px 120px at 50% 40%, rgba(20, 184, 166, .35), #07111c 72%);
}
@media (prefers-reduced-motion: reduce) {
  .wslide, .gate-go, .lang-chip, .dot-btn i, .toast, .stat { animation: none !important; transition: none !important; }
}

/* Spam restriction notice in the message composer */
.spam-composer-notice {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, .35);
  border-radius: 11px;
  background: rgba(127, 29, 29, .18);
  color: #fecaca;
  text-align: left;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}
.spam-composer-notice:active {
  transform: scale(.99);
}