/* RandomMeetBot — shared site stylesheet.
   Used by index.html, 404.html, 50x.html, stats/index.html. */

:root{
  --ink:      #0B0F17;
  --ink-2:    #131A29;
  --you:      #7C5CFF;
  --stranger: #FF5C8A;
  --signal:   #33F1B0;
  --paper:    #F1EDFB;
  --muted:    #8992AE;
  --line:     rgba(241,237,251,.09);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient duotone glow — the two strangers, before they meet */
body::before, body::after{
  content:"";
  position:fixed; z-index:0; border-radius:50%;
  width:60vmax; height:60vmax; filter:blur(90px); opacity:.16; pointer-events:none;
}
body::before{ background:var(--you);      top:-20vmax; left:-22vmax; }
body::after { background:var(--stranger); bottom:-24vmax; right:-20vmax; }

.wrap{ position:relative; z-index:1; max-width:460px; margin:0 auto; padding:0 20px 64px; }

/* ---------- micro header ---------- */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(14px) saturate(140%);
  background:rgba(11,15,23,.72);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:460px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--paper); }
.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 3px rgba(51,241,176,.18);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
.brand small{ font-family:'JetBrains Mono',monospace; color:var(--muted); font-weight:400; font-size:11px; }
.open-pill{
  font-family:'JetBrains Mono',monospace; font-size:12px; text-decoration:none;
  color:var(--ink); background:var(--paper); padding:7px 13px; border-radius:100px;
  font-weight:500; white-space:nowrap; transition:transform .15s ease, opacity .15s ease;
}
.open-pill:active{ transform:scale(.96); }

/* ---------- hero ---------- */
.hero{ padding:40px 0 8px; text-align:center; }
.kicker{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--signal); text-transform:uppercase; margin:0 0 18px;
}
h1{
  font-family:'Clash Display', 'General Sans', sans-serif;
  font-weight:700; font-size:clamp(34px,9vw,44px); line-height:1.03;
  letter-spacing:-.03em; margin:0 0 14px;
}
.sub{
  color:var(--muted); font-size:15.5px; line-height:1.55; margin:0 auto 30px;
  max-width:360px;
}

/* ---------- chat window (index signature element) ---------- */
.chat-window{
  background:var(--ink-2); border:1px solid var(--line); border-radius:20px;
  padding:18px 16px 16px; text-align:left;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.chat-log{ display:flex; flex-direction:column; gap:8px; min-height:190px; }

.bubble{
  max-width:78%; padding:9px 13px; border-radius:16px; font-size:14.5px; line-height:1.4;
  opacity:0; transform:translateY(6px) scale(.98);
  animation:pop-in .38s cubic-bezier(.2,.8,.2,1) forwards;
}
.bubble.stranger{
  background:rgba(255,92,138,.14); border:1px solid rgba(255,92,138,.28);
  align-self:flex-start; border-bottom-left-radius:5px; color:#FFD7E2;
}
.bubble.you{
  background:rgba(124,92,255,.18); border:1px solid rgba(124,92,255,.34);
  align-self:flex-end; border-bottom-right-radius:5px; color:#E4DBFF;
}

.typing{
  align-self:flex-start; display:flex; gap:4px; padding:11px 14px;
  background:rgba(255,92,138,.10); border:1px solid rgba(255,92,138,.22);
  border-radius:16px; border-bottom-left-radius:5px;
  opacity:0; animation:pop-in .3s ease forwards, fade-out .25s ease forwards;
  animation-delay:0s, 1.05s;
}
.typing i{ width:5px; height:5px; border-radius:50%; background:var(--stranger); animation:bounce 1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }

.matched{
  align-self:center; margin-top:4px; display:flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--signal);
  background:rgba(51,241,176,.10); border:1px solid rgba(51,241,176,.3);
  padding:6px 12px; border-radius:100px;
  opacity:0; animation:pop-in .4s cubic-bezier(.2,.8,.2,1) forwards;
}
.matched .ring{
  width:6px; height:6px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 rgba(51,241,176,.5); animation:ring 1.6s ease-out 1;
}

.b1{ animation-delay:1.15s; } /* stranger: hey */
.b2{ animation-delay:1.95s; } /* you: reply */
.b3{ animation-delay:2.75s; } /* stranger: reply */
.m1{ animation-delay:3.55s; }

@keyframes pop-in{ from{ opacity:0; transform:translateY(6px) scale(.98);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes fade-out{ to{ opacity:0; height:0; padding:0; margin:0; overflow:hidden;} }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-3px); opacity:1;} }
@keyframes pulse-dot{ 0%,100%{ opacity:1;} 50%{ opacity:.45;} }
@keyframes ring{ from{ box-shadow:0 0 0 0 rgba(51,241,176,.45);} to{ box-shadow:0 0 0 10px rgba(51,241,176,0);} }

@media (prefers-reduced-motion: reduce){
  .bubble, .typing, .matched{ animation:none !important; opacity:1 !important; transform:none !important; }
  .typing{ display:none; }
  .live-dot{ animation:none; }
}

/* composer / primary CTA — index, 404, 50x */
.composer{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  background:rgba(241,237,251,.05); border:1px solid var(--line);
  border-radius:100px; padding:6px 6px 6px 16px; text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.composer:active{ background:rgba(241,237,251,.09); }
.composer span{ color:var(--muted); font-size:14px; flex:1; text-align:left; }
.send-btn{
  width:38px; height:38px; min-width:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--you),var(--stranger));
  display:flex; align-items:center; justify-content:center;
}
.send-btn svg{ width:16px; height:16px; }

/* ---------- section shell ---------- */
section{ padding:46px 0 0; }
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em;
  color:var(--muted); text-transform:uppercase; margin:0 0 16px;
}

/* quick-reply pills = features (index) */
.pills{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pill{
  border:1px solid var(--line); background:var(--ink-2); border-radius:14px;
  padding:14px 14px 13px; text-decoration:none; color:var(--paper);
}
.pill .ico{ font-size:18px; display:block; margin-bottom:8px; }
.pill .label{ font-size:13.5px; font-weight:500; display:block; line-height:1.3; }

/* how it works — sequential mono timestamps like a real log (index) */
.log{ border-left:1px solid var(--line); margin-left:5px; }
.log-row{ position:relative; padding:0 0 22px 22px; }
.log-row:last-child{ padding-bottom:0; }
.log-row::before{
  content:""; position:absolute; left:-5px; top:3px; width:9px; height:9px;
  border-radius:50%; background:var(--ink); border:2px solid var(--you);
}
.log-row time{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-bottom:4px; }
.log-row p{ margin:0; font-size:15px; line-height:1.45; }

/* ---------- faq (index) ---------- */
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; font-size:15px; font-weight:500; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--muted); font-family:'JetBrains Mono',monospace;
  font-size:18px; flex:none; transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ color:var(--muted); font-size:14px; line-height:1.55; margin:10px 0 0; }

/* ---------- footer ---------- */
footer{
  margin-top:50px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted);
}
footer a{ color:var(--muted); }

/* ---------- stats page ---------- */
.tiles{ display:grid; gap:12px; }
.tile{
  background:var(--ink-2); border:1px solid var(--line); border-radius:16px;
  padding:20px 20px 18px; text-align:left;
}
.tile .label{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase; display:block; margin-bottom:8px;
}
.tile .num{
  font-family:'Clash Display','General Sans',sans-serif; font-weight:700;
  font-size:clamp(30px,9vw,38px); letter-spacing:-.02em; line-height:1;
}
.tile.accent .num{ color:var(--signal); }
.tile .num.skel{
  display:inline-block; width:100px; height:1em; border-radius:6px;
  background:rgba(241,237,251,.08); vertical-align:middle;
}
.updated{
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  color:var(--muted); margin-top:18px;
}
.err{ text-align:center; color:var(--muted); font-size:14px; margin-top:20px; }

/* ---------- error pages (404 / 50x) ---------- */
body.error-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
}
.error-card{ position:relative; z-index:1; max-width:360px; }
.error-code{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; margin:0 0 18px;
}
.error-bubble{
  display:inline-block; text-align:left; max-width:280px; margin:0 0 22px;
  border-radius:16px; border-bottom-left-radius:5px; padding:11px 15px;
  font-size:14.5px; line-height:1.4;
}
.error-bubble.tone-stranger{
  background:rgba(255,92,138,.12); border:1px solid rgba(255,92,138,.26); color:#FFD7E2;
}
.error-bubble.tone-signal{
  background:rgba(51,241,176,.10); border:1px solid rgba(51,241,176,.28); color:#CFFDEB;
}

@media (min-width:480px){
  .wrap{ padding-bottom:80px; }
}