/* omigles — light, classic stranger-chat styling
   ----------------------------------------------------------------------------
   Palette
     --bg        #eef3fa  soft blue-grey page
     --panel     #ffffff  cards / chat surface
     --line      #dbe4ef  hairlines
     --ink       #1d2733  primary text
     --muted     #6b7a8d  secondary text
     --brand     #2f6fed  primary blue (buttons, "You")
     --teal      #14b8a6  accent
     --stranger  #e5484d  warm red ("Stranger")
     --ok        #1fa971  online / success
*/
:root {
  --bg:#eef3fa;
  --panel:#ffffff;
  --panel-2:#f6f9fd;
  --line:#dbe4ef;
  --ink:#1d2733;
  --muted:#6b7a8d;
  --brand:#2f6fed;
  --brand-dark:#2357c9;
  --teal:#14b8a6;
  --stranger:#e5484d;
  --ok:#1fa971;
  --radius:14px;
  --shadow:0 10px 30px rgba(38,64,104,.10), 0 2px 6px rgba(38,64,104,.06);
  --sans:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing:border-box; }
/* The hidden attribute must always win over display rules below
   (otherwise .gate/.app display:flex keeps them visible when JS hides them). */
[hidden] { display:none !important; }
html, body { height:100%; }
body {
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -200px, #dbe9ff 0%, rgba(219,233,255,0) 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a { color:var(--brand); }

/* ---------- Buttons ---------- */
button { font-family:inherit; cursor:pointer; }
.btn {
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  padding:11px 20px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  transition:transform .04s ease, box-shadow .15s ease, background .15s ease, opacity .15s;
}
.btn:hover { box-shadow:0 4px 14px rgba(38,64,104,.14); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn--primary {
  background:linear-gradient(180deg, #3b82f6, var(--brand));
  border-color:var(--brand-dark);
  color:#fff;
}
.btn--primary:hover { background:linear-gradient(180deg, #4a8cff, var(--brand-dark)); }
.btn--ghost { background:var(--panel); color:var(--brand); border-color:#c4d6f5; }
.btn--ghost:hover { background:#eef4ff; }
.btn--send {
  border-radius:12px;
  background:linear-gradient(180deg, #3b82f6, var(--brand));
  border-color:var(--brand-dark);
  color:#fff;
  padding:0;
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}

/* ---------- Age / terms gate ---------- */
.gate {
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:
    radial-gradient(1000px 500px at 50% -150px, #d3e5ff 0%, rgba(211,229,255,0) 60%),
    var(--bg);
}
.gate__card {
  width:100%; max-width:460px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:32px 28px;
  text-align:center;
}
.gate__mark {
  width:120px; height:56px; margin:0 auto 6px;
  background:url("/logo.svg") center/contain no-repeat;
}
.gate__title { display:none; } /* logo carries the name */
.gate__lede { color:var(--muted); margin:4px 0 18px; font-size:15px; }
.gate__rules {
  text-align:left; margin:0 0 18px; padding:16px 16px 16px 34px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  font-size:14px; color:#41505f;
}
.gate__rules li { margin:6px 0; }
.gate__check {
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:15px; margin:6px 0 18px; cursor:pointer; user-select:none;
}
.gate__check input { width:18px; height:18px; accent-color:var(--brand); }
.gate .btn--primary { width:100%; padding:13px; font-size:16px; }
.gate__fine { color:var(--muted); font-size:12.5px; margin:14px 0 0; }

/* ---------- App shell ---------- */
.app {
  max-width:900px;
  margin:0 auto;
  min-height:100dvh;
  display:flex; flex-direction:column;
  padding:14px 14px 0;
}

/* header */
.bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 12px;
}
.brand { display:flex; align-items:center; }
.brand__logo { height:34px; width:auto; display:block; }
.brand__dot, .brand__name { display:none; } /* replaced by logo image */
.bar__status { display:flex; align-items:center; gap:12px; }
.online {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; color:var(--muted);
  background:var(--panel); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px;
}
.online::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 3px rgba(31,169,113,.18);
}
.online strong { color:var(--ink); font-weight:700; }
.flag {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; color:#41505f;
  background:var(--panel); border:1px solid var(--line);
  padding:5px 11px; border-radius:999px;
}
.flag__emoji { font-size:16px; line-height:1; }

/* ---------- Chat stage ---------- */
.stage {
  flex:1;
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px 16px 0 0;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* status strip */
.status {
  display:flex; align-items:center; gap:10px;
  padding:11px 16px;
  font-size:14px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
}
.status__scan {
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--muted);
}
.status--idle .status__scan { background:#9aa7b6; }
.status--searching .status__scan {
  background:var(--brand);
  animation:pulse 1s infinite ease-in-out;
}
.status--live .status__scan { background:var(--ok); }
.status--ended .status__scan { background:var(--stranger); }
@keyframes pulse { 0%,100%{opacity:.35;} 50%{opacity:1;} }
.status__text { color:#41505f; }

/* conversation log */
.log {
  list-style:none; margin:0; padding:18px 16px;
  flex:1; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
  min-height:280px;
}
.msg {
  max-width:78%;
  padding:9px 14px;
  border-radius:16px;
  font-size:15px;
  word-wrap:break-word; overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.msg--self {
  align-self:flex-end;
  background:linear-gradient(180deg,#3b82f6,var(--brand));
  color:#fff;
  border-bottom-right-radius:5px;
}
.msg--partner {
  align-self:flex-start;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--ink);
  border-bottom-left-radius:5px;
}
/* classic "You:" / "Stranger:" prefixes */
.msg--self::before { content:"You  "; font-weight:700; opacity:.85; }
.msg--partner::before { content:"Stranger  "; font-weight:700; color:var(--stranger); }
.msg--system {
  align-self:center; max-width:100%;
  background:transparent; color:var(--muted);
  font-size:13px; text-align:center; padding:4px 8px;
}

/* typing indicator */
.typing { display:flex; gap:5px; padding:2px 20px 12px; }
.typing[hidden] { display:none; }
.typing span {
  width:7px; height:7px; border-radius:50%; background:#b7c2d0;
  animation:blink 1.2s infinite both;
}
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

/* ---------- Dock (controls + composer) ---------- */
.dock {
  background:var(--panel);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 16px 16px;
  box-shadow:var(--shadow);
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  position:sticky; bottom:0;
}
.interests { display:flex; flex-direction:column; gap:6px; }
.interests[hidden] { display:none; }
.interests__input {
  width:100%;
  border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2);
  padding:11px 14px; font-size:15px; color:var(--ink);
  font-family:inherit;
}
.interests__input:focus { outline:2px solid #bcd3ff; border-color:var(--brand); background:#fff; }
.interests__hint { font-size:12.5px; color:var(--muted); padding-left:4px; }

/* country preference toggle */
.pref {
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; color:#41505f; cursor:pointer; user-select:none;
  padding:2px 4px;
}
.pref input { width:17px; height:17px; accent-color:var(--brand); }

.controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.controls .btn--primary { min-width:110px; }

.composer { display:flex; gap:10px; align-items:flex-end; }
.composer__input {
  flex:1;
  border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2);
  padding:12px 14px; font-size:15px; color:var(--ink);
  font-family:inherit; resize:none; line-height:1.4;
  max-height:140px;
}
.composer__input:focus { outline:2px solid #bcd3ff; border-color:var(--brand); background:#fff; }
.composer__input:disabled { opacity:.6; }

/* ---------- Landing / SEO content ---------- */
.landing {
  background:var(--panel);
  border-top:1px solid var(--line);
  margin-top:28px;
}
.landing[hidden] { display:none !important; }
.landing__inner {
  max-width:820px; margin:0 auto; padding:44px 22px 72px;
}
.landing__h1 { font-size:30px; line-height:1.2; margin:0 0 12px; }
.landing__lede { font-size:17px; color:#41505f; margin:0 0 26px; }
.landing h2 { font-size:21px; margin:32px 0 12px; }
.landing p { color:#41505f; }
.steps, .features { padding-left:22px; color:#41505f; }
.steps li, .features li { margin:8px 0; }
.faq { margin:8px 0 0; }
.faq dt { font-weight:700; margin:18px 0 4px; color:var(--ink); }
.faq dd { margin:0; color:#41505f; }
.landing__foot {
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:14px; text-align:center;
}

/* ---------- Responsive ---------- */
@media (max-width:640px) {
  .app { padding:10px 10px 0; }
  .brand__logo { height:30px; }
  .msg { max-width:88%; }
  .landing__h1 { font-size:24px; }
}