/* AI Companion chat v2 — dark, native to the gayencounters funnel's dark themes */
:root{
  --bg:#0d0b12; --bg-2:#141019; --card:#1b1622; --line:#2a2233;
  --ink:#f3eef8; --muted:#9d93ad; --brand:#ff3d7f; --brand-2:#ff7a3d;
  --me:#ff3d7f; --them:#241d2e; --ok:#28c76f; --warn:#ffb020; --bad:#ff5b5b;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #241631 0%, var(--bg) 60%);
  color:var(--ink); font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
#app{display:flex; flex-direction:column; height:100dvh; max-width:520px; margin:0 auto}

/* header */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:rgba(20,16,25,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5}
.who{display:flex; align-items:center; gap:10px}
.avatar{position:relative; width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:18px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 0 0 2px #ffffff22}
.avatar i{position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%;
  background:var(--ok); border:2px solid var(--bg-2); animation:pulse 2.4s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(40,199,111,.55)} 55%{box-shadow:0 0 0 6px rgba(40,199,111,0)}}
.avatar.big{width:52px; height:52px; font-size:22px}
.meta{display:flex; flex-direction:column; line-height:1.25}
.name{font-weight:800; font-size:15.5px}
.statusrow{font-size:11px; color:var(--muted)}
.online{font-weight:600; color:var(--ok)}
.online.typingtxt{color:var(--brand); animation:fadein .2s ease}
.badge{letter-spacing:.2px}
.credits{font-size:14px; font-weight:800; background:var(--card); border:1px solid var(--line);
  padding:6px 11px; border-radius:999px; transition:border-color .3s}
.credits b{color:var(--brand); transition:color .3s}
.credits.low b{color:var(--warn)}
.credits.zero{border-color:var(--bad)}
.credits.zero b{color:var(--bad)}
.credits.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)} 35%{transform:scale(1.18)} 100%{transform:scale(1)}}
@keyframes fadein{from{opacity:0} to{opacity:1}}

/* thread */
.thread{flex:1; overflow-y:auto; padding:16px 14px 6px; display:flex; flex-direction:column; gap:9px}
.day{align-self:center; font-size:11px; font-weight:600; color:var(--muted); background:var(--card);
  border:1px solid var(--line); padding:3px 11px; border-radius:999px; margin-bottom:4px}
.bubble{max-width:80%; padding:10px 13px; border-radius:18px; font-size:15px;
  word-wrap:break-word; white-space:pre-wrap; animation:pop .24s ease}
.bubble.static{animation:none}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none}}
.bubble.them{align-self:flex-start; background:var(--them); border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; border-bottom-right-radius:5px}
.bubble.sys{align-self:center; background:transparent; color:var(--muted); font-size:12.5px; text-align:center; max-width:92%}
/* tick ladder: ✓ sent (faint) -> ✓✓ delivered (grey) -> ✓✓ read (blue) */
.ticks{display:inline-block; margin-left:8px; font-size:10.5px; opacity:.5; vertical-align:bottom;
  letter-spacing:-1px; transition:opacity .25s, color .25s}
.ticks.delivered{opacity:.8}
.ticks.read{color:#8fe0ff; opacity:1}

/* typing indicator as an incoming bubble */
.bubble.typingb{display:flex; gap:5px; align-items:center; padding:14px 16px; min-height:0}
.bubble.typingb span{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite both}
.bubble.typingb span:nth-child(2){animation-delay:.2s} .bubble.typingb span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}

/* composer */
.composer{display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg-2); border-top:1px solid var(--line)}
.composer input{flex:1; background:var(--card); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:12px 16px; font-size:16px; outline:none; transition:border-color .2s}
.composer input:focus{border-color:var(--brand)}
.composer button{flex:none; width:46px; border:0; border-radius:50%; font-size:18px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer; transition:transform .12s}
.composer button:active{transform:scale(.88)}
.composer button:disabled{opacity:.5}

/* paywall sheet */
.sheet{position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.6); backdrop-filter:blur(3px)}
.sheet[hidden]{display:none}
.sheet-card{width:100%; max-width:520px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:22px 22px 0 0; padding:14px 18px calc(20px + env(safe-area-inset-bottom)); position:relative;
  animation:rise .28s ease}
@keyframes rise{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}
.grab{display:block; width:38px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 14px}
.sheet-x{position:absolute; top:14px; right:14px; background:none; border:0; color:var(--muted); font-size:26px; cursor:pointer}
.payhead{display:flex; gap:12px; align-items:center; margin-bottom:16px; padding-right:26px}
.sheet-card h2{margin:0 0 3px; font-size:19px; line-height:1.2}
.sub{color:var(--muted); font-size:13.5px; margin:0}
.sub.center{text-align:center; margin-bottom:14px}
.loading{color:var(--muted); font-size:14px; text-align:center; padding:14px 0}
.packages{display:flex; flex-direction:column; gap:10px}
.pkg{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 16px;
  color:var(--ink); cursor:pointer; font-size:15px; text-align:left; transition:transform .12s, border-color .2s}
.pkg:active{transform:scale(.98)}
.pkg.best{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), 0 0 18px rgba(255,61,127,.25)}
.pkg .c{font-weight:800}
.pkg .unit{display:block; font-weight:500; font-size:11.5px; color:var(--muted); margin-top:2px}
.pkg .unit b{color:var(--ok); font-weight:700}
.pkg .p{font-weight:800; color:var(--brand); white-space:nowrap}
.pkg .tag{font-size:10px; background:var(--brand); color:#fff; padding:2px 7px; border-radius:999px; margin-left:6px; vertical-align:2px}
.pkg .tag.gold{background:linear-gradient(135deg,#f6a700,#ff7a3d)}

.pixbox{margin-top:14px}
.pixqr{display:block; width:190px; height:190px; margin:0 auto 12px; border-radius:12px; background:#fff; padding:8px}
.copyrow{display:flex; gap:8px; align-items:stretch}
.copyrow code{flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:10px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.copyrow button{flex:none; background:var(--brand); color:#fff; border:0; border-radius:10px; padding:0 16px; font-weight:700; cursor:pointer}
.waiting{text-align:center; color:var(--muted); font-size:13px; margin:14px 0 2px}
.waiting::before{content:"●"; color:var(--ok); margin-right:6px; animation:blink 1.2s infinite}
.pixttl{text-align:center; color:var(--muted); font-size:11.5px; margin:0; font-variant-numeric:tabular-nums}
.trust{text-align:center; color:var(--muted); font-size:11.5px; margin:16px 0 0}

/* photo messages: locked teaser -> revealed image */
.bubble.photob{padding:5px; background:var(--them)}
.photob .photo{display:block; width:220px; max-width:62vw; border-radius:14px}
.photob .photo.reveal{animation:reveal .6s ease}
@keyframes reveal{from{filter:blur(18px); opacity:.4} to{filter:blur(0); opacity:1}}
.lockbox{position:relative; width:220px; max-width:62vw; height:275px; border:0; border-radius:14px;
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px;
  background:
    radial-gradient(90px 120px at 38% 32%, #b4786e88 0%, transparent 70%),
    radial-gradient(70px 90px at 60% 68%, #a05f5a66 0%, transparent 70%),
    linear-gradient(160deg, #241631, #17111f)}
.lockbox::before{content:""; position:absolute; inset:0; backdrop-filter:blur(14px);
  background:rgba(13,11,18,.25)}
.lockic{position:relative; font-size:30px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.lockbtn{position:relative; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  font-size:13px; font-weight:800; padding:9px 16px; border-radius:999px; box-shadow:0 4px 16px rgba(255,61,127,.4)}

/* persona avatar palettes (initial-based gradients until real photos) */
.av-rafa  {background:linear-gradient(135deg,#ff3d7f,#ff7a3d)}
.av-alex  {background:linear-gradient(135deg,#3d9bff,#3dfff0)}
.av-bruno {background:linear-gradient(135deg,#5a6478,#2e3542)}
.av-leo   {background:linear-gradient(135deg,#28c76f,#3dd6ff)}
.av-thiago{background:linear-gradient(135deg,#8a3dff,#ff3d55)}
.avatar.small{width:32px; height:32px; font-size:14px}

/* inbox button (back chevron) */
.inbtn{position:relative; flex:none; width:34px; height:38px; border:0; background:none; color:var(--ink);
  font-size:26px; line-height:1; cursor:pointer; padding:0 6px 4px 0}
.inbtn i{position:absolute; top:6px; right:2px; width:9px; height:9px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 0 2px var(--bg-2)}

/* inbox overlay */
.inbox{position:absolute; inset:0; z-index:12; background:var(--bg);
  display:flex; flex-direction:column;
  transform:translateX(-102%); transition:transform .26s ease; will-change:transform}
#app{position:relative; overflow:hidden}
#app.inbox-open #inbox{transform:none}
.inboxbar{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:16px 16px 10px; border-bottom:1px solid var(--line)}
.inboxbar h1{margin:0; font-size:22px; flex:1}
.devreset{flex:none; font-size:11px; color:var(--muted); text-decoration:none;
  border:1px dashed var(--line); border-radius:999px; padding:4px 10px}
.inboxlist{flex:1; overflow-y:auto; padding:6px 8px}
.inrow{display:flex; align-items:center; gap:12px; width:100%; padding:11px 10px;
  background:none; border:0; border-radius:14px; color:var(--ink); text-align:left; cursor:pointer}
.inrow:active{background:var(--card)}
.inrow .avatar{width:48px; height:48px; font-size:20px}
.incol{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.inname{font-weight:800; font-size:15.5px}
.inlast{color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.inlast i{font-style:normal; color:var(--ok); font-size:12px}
.inrow.unread .inlast{color:var(--ink); font-weight:600}
.inmeta{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none}
.intime{font-size:11px; color:var(--muted)}
.inrow.unread .intime{color:var(--brand)}
.incount{min-width:19px; height:19px; border-radius:999px; background:var(--brand); color:#fff;
  font-size:11.5px; font-weight:800; display:grid; place-items:center; padding:0 5px}

/* incoming-message banner */
.pingbanner{position:absolute; top:64px; left:10px; right:10px; z-index:15;
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(27,22,34,.97); border:1px solid var(--line); border-radius:16px;
  color:var(--ink); text-align:left; cursor:pointer; box-shadow:0 8px 30px rgba(0,0,0,.5)}
.pingbanner.in{animation:dropin .3s ease}
@keyframes dropin{from{transform:translateY(-16px); opacity:0} to{transform:none; opacity:1}}
.pingtxt{display:flex; flex-direction:column; min-width:0; font-size:13.5px}
.pingtxt b{font-size:13px}
.pingtxt span{color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* registration sheet */
.regtitle{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px !important; padding-right:26px}
.bonuspill{font-size:11.5px; font-weight:800; background:linear-gradient(135deg,#28c76f,#3dd6a0); color:#04170c;
  padding:4px 10px; border-radius:999px; white-space:nowrap}
.regin{display:block; width:100%; background:var(--card); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:13px 14px; font-size:16px; outline:none; margin:0 0 12px}
.regin:focus{border-color:var(--brand)}
.cta{display:block; width:100%; border:0; border-radius:12px; padding:14px; font-size:15px; font-weight:800;
  color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); cursor:pointer}
.cta:disabled{opacity:.55}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.chips button{background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:999px;
  padding:10px 15px; font-size:14px; cursor:pointer; transition:border-color .15s, transform .1s}
.chips button:active{transform:scale(.95)}
.chips button.sel{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); color:var(--brand); font-weight:700}
.terms{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); margin:2px 0 14px; cursor:pointer}
.terms input{margin-top:2px; accent-color:var(--brand)}
.terms a{color:var(--brand)}
.err{color:var(--bad); font-size:12.5px; text-align:center; margin:10px 0 0}
.linkbtn{display:block; margin:14px auto 0; background:none; border:0; color:var(--muted); font-size:12.5px;
  text-decoration:underline; cursor:pointer}

/* profile view */
.profilev{transform:translateX(102%); z-index:13}
#app.profile-open .profilev{transform:none}
.static-x{position:static; font-size:24px}
.profbody{flex:1; overflow-y:auto; padding:16px}
.profcard{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--card);
  border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:18px}
.bigbal{font-size:14px; color:var(--muted)}
.bigbal b{font-size:26px; color:var(--brand); margin-right:4px}
.profcard .cta{width:auto; padding:12px 18px}
.profrow{display:flex; flex-direction:column; gap:2px; margin-bottom:18px; font-size:15px}
.profmail{color:var(--muted); font-size:12.5px}
.proflabel{display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px}
.pwrow{display:flex; gap:8px; margin-bottom:26px}
.pwrow .regin{flex:1; margin:0}
.pwrow button{flex:none; background:var(--card); border:1px solid var(--brand); color:var(--brand);
  border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer}
.dangerbtn{display:block; width:100%; background:none; border:1px solid #7a2733; color:var(--bad);
  border-radius:12px; padding:12px; font-size:13.5px; cursor:pointer; margin-bottom:10px}
#credits{cursor:pointer}

/* unlock celebration */
.heart{position:fixed; bottom:14%; z-index:50; pointer-events:none; animation:floatup 2.2s ease-out forwards}
@keyframes floatup{
  0%{transform:translateY(0) scale(.6); opacity:0}
  12%{opacity:1}
  100%{transform:translateY(-52vh) scale(1.15) rotate(8deg); opacity:0}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}