*{box-sizing:border-box}
html,body{margin:0;background:#09060d;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 90% 0,#33103d 0,transparent 31%),
    radial-gradient(circle at 8% 38%,#220827 0,transparent 30%),
    #09060d;
}
img{max-width:100%}

.topbar{
  min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 22px;position:sticky;top:0;background:rgba(9,6,13,.84);backdrop-filter:blur(20px);
  z-index:20;border-bottom:1px solid rgba(255,255,255,.06)
}
.brand-wrap{display:flex;flex-direction:column;min-width:0}
.brand-logo{width:168px;max-width:100%;height:auto;display:block}
.tagline{font-size:9px;letter-spacing:3px;color:#d9c8de;text-transform:uppercase;margin-top:3px}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ghost,.coin-pill{
  border:1px solid rgba(255,255,255,.13);color:#fff;background:#17101f;border-radius:999px;
  padding:10px 13px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center
}
.coin-pill{color:#ffc6ed}

.app-shell{max-width:1180px;margin:auto;padding:24px 18px 110px}
.view{display:none}
.view.active{display:block}

.hero-v2{
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:34px;
  background:linear-gradient(120deg,rgba(255,55,178,.16),rgba(91,38,170,.11));
  margin-bottom:18px;min-height:250px;display:flex;align-items:center;justify-content:space-between;gap:30px
}
.hero-copy{z-index:2;max-width:690px}
.hero-v2 h1{font-size:clamp(34px,5.8vw,62px);line-height:.96;margin:8px 0 14px;letter-spacing:-3px}
.hero-v2 p{color:#d4c8d8;max-width:590px;font-size:16px;line-height:1.5;margin:0}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#ff79c9}
.hero-stack{position:relative;width:290px;height:210px;flex:0 0 auto}
.hero-stack img{
  position:absolute;width:142px;height:185px;object-fit:cover;border-radius:26px;
  border:2px solid rgba(255,255,255,.18);box-shadow:0 18px 42px rgba(0,0,0,.35)
}
.hero-stack img:nth-child(1){right:95px;top:19px;transform:rotate(-8deg)}
.hero-stack img:nth-child(2){right:4px;top:17px;transform:rotate(7deg)}
.hero-stack img:nth-child(3){right:51px;top:1px;z-index:2}

.discovery-bar{display:flex;gap:10px;margin:0 0 14px}
.search-wrap{
  flex:1;border:1px solid #30233a;background:#130d19;border-radius:16px;display:flex;align-items:center;padding:0 14px
}
.search-wrap span{font-size:23px;color:#89768f}
.search-wrap input{width:100%;background:transparent;border:0;outline:0;color:#fff;padding:13px 10px;font-size:14px}
.surprise-btn{
  border:1px solid #4d2f58;background:linear-gradient(135deg,#2b1235,#441946);color:#ffbce6;
  border-radius:16px;padding:0 17px;font-weight:700
}
.filters{display:flex;gap:8px;overflow:auto;padding:3px 0 18px}
.filter{
  white-space:nowrap;border:1px solid #2c2235;background:#130d19;color:#cdbfd1;border-radius:999px;padding:9px 14px
}
.filter.active{background:#ff35ad;color:#fff;border-color:#ff35ad}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px;gap:12px}
.section-head h2{margin:0;font-size:21px}
.section-head p{margin:4px 0 0;color:#7f7086;font-size:12px}
.section-head span{color:#9986a0;font-size:12px}

.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.profile-card{
  position:relative;border-radius:24px;overflow:hidden;background:#17101f;border:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:.22s transform,.22s border,.22s box-shadow
}
.profile-card:hover{transform:translateY(-4px);border-color:rgba(255,63,180,.52);box-shadow:0 18px 34px rgba(0,0,0,.24)}
.profile-photo{position:relative;height:300px;overflow:hidden;background:#1e1323}
.profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;transition:.35s transform}
.profile-card:hover .profile-photo img{transform:scale(1.025)}
.profile-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 49%,rgba(8,5,11,.96))}
.fav-btn{
  position:absolute;right:11px;top:11px;z-index:4;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,7,14,.52);color:#fff;font-size:19px;backdrop-filter:blur(10px)
}
.fav-btn.active{color:#ff5bbd;background:rgba(80,14,64,.68)}
.virtual-label{
  position:absolute;left:11px;top:11px;z-index:4;font-size:9px;letter-spacing:.9px;background:rgba(10,7,14,.6);
  border:1px solid rgba(255,255,255,.14);padding:6px 8px;border-radius:999px;color:#e7dfe9;backdrop-filter:blur(10px)
}
.profile-info{padding:0 16px 16px;margin-top:-48px;position:relative;z-index:2}
.name-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.name-row strong{font-size:24px;letter-spacing:-.5px}
.age-city{font-size:11px;color:#9b8ca1;margin-top:2px}
.online{font-size:11px;color:#72e3aa}
.profile-info p{color:#bdaec3;font-size:12px;line-height:1.42;min-height:35px}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.tag{font-size:9px;border:1px solid #3a2b43;border-radius:999px;padding:5px 7px;color:#d9cfe0}
.profile-cta{
  display:flex;align-items:center;justify-content:space-between;margin-top:12px;border-top:1px solid rgba(255,255,255,.06);padding-top:11px;gap:10px
}
.profile-cta span{font-size:11px;color:#8d7d95}
.profile-cta b{color:#ff75ca;font-size:12px}

.chat-header{
  display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.08);padding:9px 4px 17px;
  position:sticky;top:76px;background:rgba(9,6,13,.96);z-index:15
}
.icon-btn,.gift-btn,.plus-btn,.header-action{
  width:42px;height:42px;border:0;border-radius:50%;background:#1b1322;color:#fff;font-size:19px
}
.header-action{margin-left:auto}
.gift-btn{background:#2b1230}
.avatar-img.small{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #ff50ba}
.chat-meta{display:flex;flex-direction:column;min-width:0}
.chat-meta strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.chat-meta span{font-size:11px;color:#9c8ea4;margin-top:2px}
.online-dot{display:inline-block;width:7px;height:7px;background:#3bdd91;border-radius:50%}

.messages{
  min-height:55vh;max-height:64vh;overflow:auto;padding:22px 4px;display:flex;flex-direction:column;gap:10px
}
.bubble{max-width:min(78%,610px);padding:12px 14px;border-radius:18px;line-height:1.4;font-size:15px;white-space:pre-wrap}
.bubble.ai{align-self:flex-start;background:#1a1321;border-bottom-left-radius:5px}
.bubble.user{align-self:flex-end;background:linear-gradient(135deg,#8a29d9,#f52ca5);border-bottom-right-radius:5px}
.bubble.typing{opacity:.7}

.quick-actions{display:flex;gap:7px;overflow:auto;padding:0 0 9px}
.quick-actions button{white-space:nowrap;border:1px solid #34253d;border-radius:999px;background:#130d19;color:#cfc3d4;padding:8px 11px}

.composer{
  display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #30233a;background:#130d19;border-radius:20px
}
.composer input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:16px;padding:10px 4px}
.send-btn{width:44px;height:44px;border-radius:50%;border:0;background:#ff35ad;color:#fff;font-size:18px}
.chat-note{text-align:center;color:#6f6375;font-size:10px;margin-top:8px}

.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:76px;background:rgba(9,6,13,.92);backdrop-filter:blur(20px);
  display:flex;justify-content:center;gap:min(8vw,80px);border-top:1px solid rgba(255,255,255,.07);z-index:30;padding-bottom:env(safe-area-inset-bottom)
}
.nav-btn{
  border:0;background:transparent;color:#86798d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:58px;font-size:20px
}
.nav-btn span{font-size:10px}
.nav-btn.active{color:#ff4bb8}

.age-gate{position:fixed;inset:0;background:rgba(3,2,6,.975);z-index:100;display:grid;place-items:center;padding:18px}
.age-gate.hidden{display:none}
.age-card{
  max-width:470px;width:100%;text-align:center;background:linear-gradient(180deg,#1a1020,#100b15);
  border:1px solid #33233d;border-radius:28px;padding:28px
}
.gate-logo{object-fit:contain;display:block;margin:0 auto 8px}
.gate-logo-horizontal{width:min(260px,78%);height:auto}
.age-card h1{margin:8px 0}
.age-card p{color:#bdafc3;line-height:1.55}
.age-badge{display:inline-block;margin:5px 0 0;border:1px solid #ff49b7;border-radius:999px;color:#ff79c9;padding:6px 10px;font-weight:700}
.checkline{
  display:flex;gap:9px;text-align:left;align-items:flex-start;background:#130d19;padding:13px;border-radius:14px;margin:18px 0;font-size:13px
}
.primary{
  width:100%;border:0;background:linear-gradient(90deg,#8c2ee8,#ff34ac);color:#fff;border-radius:16px;padding:15px;font-size:16px;font-weight:800
}
.primary:disabled{opacity:.35}
.age-card small{display:block;color:#6e6373;margin-top:12px}

.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);display:grid;place-items:end center;padding:18px}
.modal.hidden{display:none}
.modal-card{
  position:relative;background:#15101b;border:1px solid #35283e;border-radius:26px 26px 10px 10px;max-width:560px;width:100%;
  padding:24px;max-height:88vh;overflow:auto
}
.modal-close{
  position:absolute;right:14px;top:12px;border:0;background:#261b2d;color:#fff;width:34px;height:34px;border-radius:50%;font-size:20px
}
.profile-modal-photo{width:100%;height:330px;object-fit:cover;border-radius:20px;margin-bottom:14px}
.modal h2{margin-top:0}
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.gift{background:#201628;border:1px solid #372840;border-radius:15px;padding:14px 7px;text-align:center;cursor:pointer}
.gift .emoji{font-size:28px;display:block}
.gift small{color:#ff83cc}
.plans{display:grid;gap:10px}
.plan{border:1px solid #34253d;background:#1a1220;border-radius:18px;padding:16px}
.plan.hot{border-color:#ff3daf}
.plan strong{font-size:20px}
.plan p{color:#a99daf;font-size:13px}
.recent-list{display:grid;gap:10px}
.recent-item{
  display:flex;align-items:center;gap:12px;background:#1b1322;border:1px solid #35283e;border-radius:16px;padding:10px;cursor:pointer
}
.recent-item img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.recent-item small{display:block;color:#8e8094;margin-top:2px}
.toast{
  position:fixed;left:50%;bottom:95px;transform:translateX(-50%) translateY(20px);background:#211628;color:#fff;border:1px solid #3c2b46;
  padding:11px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;z-index:120;font-size:13px
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* admin engine monitor */
.ai-engine-monitor{
  margin-left:auto;display:flex;align-items:center;gap:8px;padding:5px 7px 5px 10px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:999px;min-width:0;backdrop-filter:blur(10px)
}
.ai-engine-label{
  font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#8f8599;font-weight:800;white-space:nowrap
}
.ai-engine-pill{
  display:inline-flex;align-items:center;gap:7px;min-width:88px;justify-content:center;padding:7px 10px;border-radius:999px;
  font-size:11px;line-height:1;font-weight:800;border:1px solid rgba(255,255,255,.08);transition:.18s ease;white-space:nowrap
}
.ai-engine-dot{
  width:7px;height:7px;border-radius:50%;display:inline-block;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.04)
}
.ai-engine-pill.idle{color:#a9a0b0;background:rgba(255,255,255,.035)}
.ai-engine-pill.loading{color:#e9cfff;background:rgba(170,79,255,.08);border-color:rgba(190,109,255,.18)}
.ai-engine-pill.openai{color:#8de7d0;background:rgba(37,190,150,.08);border-color:rgba(76,220,180,.18)}
.ai-engine-pill.venice{color:#ff84cb;background:rgba(255,54,170,.09);border-color:rgba(255,84,190,.22)}
.ai-engine-pill.error{color:#ff9aab;background:rgba(255,65,95,.08);border-color:rgba(255,95,115,.18)}
.ai-engine-pill.loading .ai-engine-dot{animation:enginePulse 1s infinite ease-in-out}
@keyframes enginePulse{50%{opacity:.25;transform:scale(.72)}}

@media(max-width:920px){
  .profile-grid{grid-template-columns:repeat(2,1fr)}
  .hero-stack{width:250px}
}
@media(max-width:760px){
  .topbar{padding:10px 12px;min-height:68px;gap:10px}
  .brand-logo{width:126px}
  .tagline{font-size:8px;letter-spacing:2px}
  .top-actions{gap:6px}
  .ghost,.coin-pill{padding:9px 11px;font-size:12px}
  .ai-engine-label{display:none}
  .ai-engine-monitor{padding-left:7px;gap:0}
  .ai-engine-pill{min-width:auto;padding:7px 9px}
}
@media(max-width:640px){
  .app-shell{padding:14px 10px 104px}
  .topbar{align-items:flex-start}
  .brand-wrap{gap:1px}
  .hero-v2{
    padding:20px;min-height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px
  }
  .hero-copy{max-width:none}
  .hero-v2 h1{font-size:34px;letter-spacing:-2px;max-width:none}
  .hero-v2 p{max-width:none;font-size:13px}
  .hero-stack{
    position:relative;right:auto;bottom:auto;width:100%;height:148px;opacity:1;margin-top:4px
  }
  .hero-stack img{width:92px;height:126px;border-radius:18px}
  .hero-stack img:nth-child(1){left:8%;right:auto;top:14px}
  .hero-stack img:nth-child(2){left:44%;right:auto;top:16px}
  .hero-stack img:nth-child(3){left:26%;right:auto;top:0}
  .discovery-bar{flex-direction:column;gap:8px}
  .surprise-btn{height:46px;font-size:13px}
  .section-head{align-items:flex-start;flex-direction:column}
  .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .profile-photo{height:220px}
  .profile-info{padding:0 11px 13px}
  .name-row strong{font-size:18px}
  .profile-info p{font-size:10.5px;min-height:30px}
  .tag{font-size:8px;padding:4px 6px}
  .profile-cta{margin-top:8px}
  .chat-header{
    top:68px;padding:10px 2px 12px;gap:8px;flex-wrap:nowrap
  }
  .avatar-img.small{width:42px;height:42px}
  .chat-meta strong{font-size:15px;max-width:120px}
  .chat-meta span{font-size:10px}
  .icon-btn,.gift-btn,.plus-btn,.header-action{width:38px;height:38px;font-size:16px}
  .messages{
    min-height:calc(100dvh - 305px);
    max-height:none;
    padding:16px 2px 12px
  }
  .bubble{max-width:88%;font-size:14px;padding:11px 13px}
  .quick-actions{
    position:sticky;bottom:78px;z-index:11;background:linear-gradient(180deg,rgba(9,6,13,0),rgba(9,6,13,.97) 30%,rgba(9,6,13,.97));
    padding:10px 0 8px;margin-top:auto
  }
  .quick-actions button{font-size:12px;padding:8px 10px}
  .composer{
    position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));z-index:12;border-radius:18px
  }
  .composer input{font-size:16px}
  .chat-note{padding-bottom:4px}
  .bottom-nav{height:74px;justify-content:space-around;gap:0}
  .nav-btn{min-width:0;flex:1}
  .age-gate{padding:14px}
  .age-card{padding:24px 18px;border-radius:24px}
  .gate-logo-horizontal{width:min(220px,84%)}
  .modal{padding:0}
  .modal-card{border-radius:26px 26px 0 0;padding:22px 16px;max-height:92vh}
  .profile-modal-photo{height:300px}
}
@media(max-width:390px){
  .brand-logo{width:112px}
  .top-actions{display:grid;grid-template-columns:repeat(2,max-content);justify-content:end}
  .ghost,.coin-pill{padding:8px 10px;font-size:11px}
  .hero-v2 h1{font-size:30px}
  .profile-grid{grid-template-columns:1fr 1fr}
  .profile-photo{height:200px}
  .gift-grid{grid-template-columns:repeat(2,1fr)}
}


/* ===== V4.4 PREMIUM CHARACTERS ===== */
.locked-card{border-color:rgba(255,73,183,.16)}
.locked-card .profile-photo img{filter:saturate(.88) brightness(.88)}
.locked-card:hover{border-color:rgba(255,73,183,.48)}
.premium-lock-badge{
 position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);z-index:5;
 width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;
 background:rgba(15,8,18,.78);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);
 box-shadow:0 10px 28px rgba(0,0,0,.28)
}
.premium-tag{border-color:rgba(255,66,177,.3)!important;color:#ff9bd4!important;background:rgba(255,50,171,.06)}
.premium-mini{font-size:11px;color:#ff73c7}
.premium-photo-wrap{position:relative}
.premium-photo{filter:saturate(.9) brightness(.82)}
.premium-photo-lock{
 position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
 background:linear-gradient(180deg,transparent 35%,rgba(7,4,10,.68));border-radius:20px;color:#fff
}
.premium-photo-lock span{font-size:34px}
.premium-photo-lock strong{font-size:10px;letter-spacing:1.7px;background:rgba(20,10,24,.78);padding:7px 11px;border-radius:999px}
.premium-headline{font-size:18px;line-height:1.4;color:#f3e9f6;margin:16px 0 12px;font-weight:700}
.unlock-box{margin:18px 0 14px;padding:15px;border:1px solid rgba(255,76,185,.2);border-radius:16px;background:linear-gradient(135deg,rgba(255,57,175,.08),rgba(126,45,205,.08))}
.unlock-box strong{font-size:14px}
.unlock-box p{color:#a998b0;font-size:12px;line-height:1.5;margin:6px 0 0}
.premium-unlock-btn{box-shadow:0 10px 28px rgba(255,49,173,.18)}
.premium-back-btn{width:100%;border:0;background:transparent;color:#8f8295;padding:12px;margin-top:4px}

.premium-offer{text-align:center}
.premium-kicker{font-size:10px;letter-spacing:2px;color:#ff72c7;font-weight:900}
.premium-offer h2{font-size:28px;margin:8px 0}
.premium-sub{color:#aa9ab1;line-height:1.5}
.premium-price{display:flex;align-items:end;justify-content:center;gap:8px;margin:20px 0}
.premium-price strong{font-size:34px;letter-spacing:-1px}
.premium-price span{font-size:12px;color:#8e8094;margin-bottom:6px}
.premium-benefits{display:grid;gap:9px;text-align:left;background:#100b15;border:1px solid #30233a;border-radius:18px;padding:16px;margin-bottom:16px}
.premium-benefits div{font-size:13px;color:#d8cedd}
.premium-foot{font-size:10px;color:#756b7a}
.gem-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:#796d80;font-size:10px;text-transform:uppercase;letter-spacing:1px}
.gem-divider:before,.gem-divider:after{content:"";height:1px;background:#31243a;flex:1}
.gem-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.gem-packs button{border:1px solid #392a43;background:#1a1220;color:#fff;border-radius:14px;padding:12px 7px}
.gem-packs b{display:block;color:#ff81cc}
.gem-packs span{font-size:10px;color:#97899d}
.gift-grid-three{grid-template-columns:repeat(3,1fr)}
.gift-grid-three .gift{min-height:140px}
.gift-grid-three .gift p{font-size:10px;color:#8f8195;margin:7px 0 0;line-height:1.35}
.gift-fire{border-color:rgba(255,112,50,.24)}
.gift-key{border-color:rgba(255,73,183,.26)}
@media(max-width:520px){
 .premium-headline{font-size:16px}
 .premium-offer h2{font-size:24px}
 .gem-packs{grid-template-columns:1fr 1fr 1fr}
 .gift-grid-three{grid-template-columns:1fr}
 .gift-grid-three .gift{min-height:auto}
}


/* ===== V4.5 CONVERSION GATES ===== */
.paywall-gate{text-align:center;padding:4px 2px}
.paywall-icon{
 width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;
 background:linear-gradient(135deg,rgba(140,46,232,.2),rgba(255,52,172,.2));
 border:1px solid rgba(255,91,190,.26);font-size:28px
}
.paywall-gate h2{font-size:27px;letter-spacing:-.7px;margin:8px 0 9px}
.paywall-gate>p{color:#ad9fb4;line-height:1.55;font-size:14px;max-width:430px;margin:0 auto 18px}
.paywall-link{text-decoration:none;display:flex;align-items:center;justify-content:center}
@media(max-width:520px){
 .paywall-gate h2{font-size:23px}
 .paywall-gate>p{font-size:13px}
}


/* ===========================
   ONVII V5 EXPERIENCE
=========================== */
.intent-gate{
 position:fixed;inset:0;z-index:95;background:rgba(4,2,7,.96);display:grid;place-items:center;padding:18px;
 backdrop-filter:blur(18px)
}
.intent-gate.hidden{display:none}
.intent-card{
 width:min(760px,100%);background:linear-gradient(145deg,#1a1020,#0f0a14);border:1px solid #392840;border-radius:30px;
 padding:30px;text-align:center;box-shadow:0 28px 70px rgba(0,0,0,.42)
}
.intent-logo{width:200px;margin:0 auto 8px}
.intent-kicker{font-size:10px;letter-spacing:2px;color:#ff73c8;font-weight:900}
.intent-card h2{font-size:34px;margin:8px 0 6px;letter-spacing:-1px}
.intent-card>p{color:#a99aae;margin:0 auto 22px}
.intent-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.intent-options button{
 border:1px solid #39283f;background:#160f1c;color:#fff;border-radius:20px;padding:20px 14px;text-align:left;cursor:pointer;
 transition:.2s transform,.2s border,.2s background
}
.intent-options button:hover{transform:translateY(-3px);border-color:#ff4cb7;background:#201226}
.intent-options button>span{font-size:30px;display:block;margin-bottom:10px}
.intent-options strong{display:block;font-size:17px}
.intent-options small{display:block;color:#938497;line-height:1.4;margin-top:5px}
.intent-skip{border:0;background:transparent;color:#827687;margin-top:17px;padding:10px 18px}

.experience-line{display:flex;align-items:center;gap:8px;margin:7px 0 0}
.experience-line span{font-size:10px;letter-spacing:-2px}
.experience-line b{font-size:10px;color:#d8cadc;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chemistry-mini{
 display:flex;align-items:center;gap:7px;border:1px solid rgba(255,75,180,.15);background:rgba(255,48,171,.05);
 border-radius:999px;padding:6px 9px;white-space:nowrap
}
.chemistry-mini span{font-size:9px;color:#9b899f}
.chemistry-mini b{font-size:10px;color:#ff7dca}
.chemistry-panel{
 margin:12px 0 0;padding:11px 13px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:rgba(23,16,31,.68)
}
.chemistry-title{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#9b8ca1}
.chemistry-title strong{color:#ff82cc}
.chemistry-track{height:5px;border-radius:99px;background:#251a2b;margin:8px 0;overflow:hidden}
.chemistry-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9a38e6,#ff3ead);border-radius:99px;transition:.35s width}
.unlock-row{display:flex;gap:6px;overflow:auto}
.unlock-row span{font-size:8px;color:#716576;border:1px solid #30243a;border-radius:999px;padding:4px 7px;white-space:nowrap}
.unlock-row span.unlocked{color:#ffa1d9;border-color:rgba(255,75,180,.25);background:rgba(255,54,171,.05)}

.gift-store{text-align:center}
.gift-balance{margin-top:14px;font-size:11px;color:#8e8194}
.gift-balance b{color:#ffc2e7}
.gift-message{border:1px solid rgba(255,205,80,.16)!important}
.gift-effect{
 position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);z-index:200;font-size:92px;
 filter:drop-shadow(0 15px 26px rgba(0,0,0,.4));animation:giftPop 1.05s ease forwards;pointer-events:none
}
@keyframes giftPop{
 0%{opacity:0;transform:translate(-50%,-30%) scale(.4) rotate(-12deg)}
 35%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(5deg)}
 100%{opacity:0;transform:translate(-50%,-72%) scale(.82) rotate(0)}
}

.recent-header h2{margin:5px 0 14px}
.recent-pro{padding:11px}
.recent-pro>span{margin-left:auto;color:#7f7186;font-size:22px}
.recent-copy{min-width:0;flex:1}
.recent-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:350px}

.user-profile h2{font-size:28px;margin:6px 0 16px}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.profile-stats>div{background:#100b15;border:1px solid #30243a;border-radius:15px;padding:13px}
.profile-stats span{display:block;font-size:9px;color:#827488;margin-bottom:5px}
.profile-stats b{font-size:13px}
.user-profile h3{font-size:14px;margin:20px 0 9px}
.mini-favorites{display:flex;gap:8px;overflow:auto}
.mini-favorites button{border:0;background:#17101f;color:#fff;border-radius:14px;padding:8px;min-width:82px}
.mini-favorites img{width:52px;height:52px;border-radius:12px;object-fit:cover;display:block;margin:auto}
.mini-favorites span{font-size:10px;display:block;margin-top:5px}
.mini-favorites p{color:#817486;font-size:12px}
.profile-login-link{display:block;text-align:center;color:#ff74c8;margin-top:16px;text-decoration:none;font-size:13px}

@media(max-width:640px){
 .intent-card{padding:22px 15px;border-radius:24px}
 .intent-logo{width:170px}
 .intent-card h2{font-size:28px}
 .intent-options{grid-template-columns:1fr}
 .intent-options button{display:grid;grid-template-columns:42px 1fr;column-gap:10px;padding:14px;text-align:left}
 .intent-options button>span{grid-row:1/3;margin:0;align-self:center}
 .intent-options strong{align-self:end}
 .intent-options small{margin-top:2px}
 .chemistry-panel{margin-top:8px}
 .chemistry-mini{display:none}
 .messages{min-height:calc(100dvh - 352px)}
 .profile-stats{grid-template-columns:1fr 1fr 1fr}
}


/* =========================================================
   ONVII V5.1 — NEON EXPERIENCE
   ========================================================= */
:root{
 --neon-pink:#ff48b7;
 --neon-hot:#ff2ca9;
 --neon-purple:#7a35ff;
 --glass:rgba(20,12,27,.72);
}
body{position:relative;overflow-x:hidden}
body>*:not(.ambient-bg):not(.boot-splash){position:relative;z-index:1}

/* Ambient moving background */
.ambient-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.16;will-change:transform}
.orb-one{width:420px;height:420px;background:#ff2cab;left:-160px;top:14%;animation:orbFloat1 14s ease-in-out infinite}
.orb-two{width:500px;height:500px;background:#6432ff;right:-220px;top:5%;animation:orbFloat2 17s ease-in-out infinite}
.orb-three{width:320px;height:320px;background:#ff4cc0;left:42%;bottom:-180px;opacity:.09;animation:orbFloat3 12s ease-in-out infinite}
.ambient-grid{
 position:absolute;inset:0;opacity:.035;
 background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);
 background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 75%,transparent)
}
@keyframes orbFloat1{50%{transform:translate(90px,-50px) scale(1.12)}}
@keyframes orbFloat2{50%{transform:translate(-120px,90px) scale(.9)}}
@keyframes orbFloat3{50%{transform:translate(-80px,-80px) scale(1.2)}}

/* Animated brand splash */
.boot-splash{
 position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center;overflow:hidden;
 opacity:0;transition:opacity .25s ease
}
.boot-splash.boot-visible{opacity:1}
.boot-splash.boot-exit{opacity:0;pointer-events:none;transition:opacity .48s ease}
.boot-content{width:min(720px,88vw);text-align:center;position:relative;z-index:2;transform:scale(.92);opacity:0;animation:bootIn .7s .08s cubic-bezier(.2,.8,.2,1) forwards}
.boot-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(255,53,180,.24))}
.boot-content>span{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:#d8c5df;opacity:.75}
.boot-line{width:min(320px,60%);height:1px;background:#241427;margin:-5px auto 13px;overflow:hidden}
.boot-line i{display:block;height:100%;width:42%;background:linear-gradient(90deg,transparent,#ff45b7,#8749ff,transparent);animation:bootScan .9s ease-in-out infinite}
.boot-aura{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28}
.boot-aura-one{width:440px;height:440px;background:#ff2cac;left:18%;top:14%;animation:bootAura 2s ease-in-out infinite}
.boot-aura-two{width:430px;height:430px;background:#6630ff;right:16%;bottom:10%;animation:bootAura 2.4s ease-in-out infinite reverse}
@keyframes bootIn{to{transform:scale(1);opacity:1}}
@keyframes bootScan{from{transform:translateX(-180%)}to{transform:translateX(340%)}}
@keyframes bootAura{50%{transform:scale(1.15);opacity:.38}}

/* Exact new logo treatment */
.brand-logo,.gate-logo,.intent-logo{
 object-fit:contain;
 filter:drop-shadow(0 0 9px rgba(255,61,181,.22));
 animation:logoBreath 4.2s ease-in-out infinite
}
.brand-logo{width:185px}
.gate-logo{width:min(430px,86%);margin-inline:auto}
.intent-logo{width:min(350px,76%);margin-inline:auto}
@keyframes logoBreath{
 50%{filter:drop-shadow(0 0 17px rgba(255,63,184,.35)) drop-shadow(0 0 25px rgba(116,58,255,.15))}
}

/* Header */
.topbar{box-shadow:0 10px 40px rgba(0,0,0,.16)}
.coin-pill,.ghost,.primary,.surprise-btn{position:relative;overflow:hidden}
.coin-pill:after,.ghost:after,.primary:after,.surprise-btn:after{
 content:"";position:absolute;top:-90%;left:-45%;width:24%;height:280%;transform:rotate(23deg);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
 transition:transform .65s ease
}
.coin-pill:hover:after,.ghost:hover:after,.primary:hover:after,.surprise-btn:hover:after{transform:translateX(650%) rotate(23deg)}

/* Hero becomes reactive */
.hero-v2{
 isolation:isolate;
 background:
 radial-gradient(circle at var(--hero-x,78%) var(--hero-y,25%),rgba(255,70,184,.19),transparent 30%),
 linear-gradient(120deg,rgba(255,55,178,.16),rgba(91,38,170,.11));
 box-shadow:0 20px 60px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.04);
}
.hero-v2:before{
 content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
 background:linear-gradient(115deg,rgba(255,91,196,.55),rgba(255,255,255,.05) 36%,rgba(116,66,255,.4));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;opacity:.58
}
.hero-v2:after{
 content:"";position:absolute;width:240px;height:240px;right:105px;top:-120px;border-radius:50%;
 background:rgba(255,48,177,.15);filter:blur(55px);animation:heroAura 5s ease-in-out infinite
}
@keyframes heroAura{50%{transform:translate(-45px,35px) scale(1.2);opacity:.32}}
.hero-copy{animation:heroCopyIn .72s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:none}}
.hero-signals{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
.hero-signals span{
 font-size:10px;color:#d8c9dd;border:1px solid rgba(255,255,255,.09);background:rgba(7,4,10,.28);
 border-radius:999px;padding:7px 10px;backdrop-filter:blur(12px)
}
.signal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#43ed9c;margin-right:4px;box-shadow:0 0 0 0 rgba(67,237,156,.5);animation:livePulse 1.8s infinite}
@keyframes livePulse{60%{box-shadow:0 0 0 7px rgba(67,237,156,0)}}
.hero-stack{animation:stackIn .82s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes stackIn{from{opacity:0;transform:translateX(18px) scale(.95)}to{opacity:1;transform:none}}
.hero-stack img{animation:portraitFloat 4.5s ease-in-out infinite}
.hero-stack img:nth-of-type(2){animation-delay:-1.4s}
.hero-stack img:nth-of-type(3){animation-delay:-2.6s}
@keyframes portraitFloat{50%{translate:0 -7px}}
.hero-orbit{
 position:absolute;width:205px;height:205px;left:42px;top:1px;border:1px solid rgba(255,68,185,.22);border-radius:50%;
 box-shadow:0 0 40px rgba(255,45,175,.12);animation:orbitSpin 12s linear infinite
}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#ff5bc1;box-shadow:0 0 14px #ff4bb9}
.hero-orbit:before{left:20px;top:25px}.hero-orbit:after{right:25px;bottom:18px;background:#804cff}
@keyframes orbitSpin{to{transform:rotate(360deg)}}

/* Cards enter and react to cursor */
.profile-card{
 --rx:0deg;--ry:0deg;transform-style:preserve-3d;
 transition:transform .24s ease,border .22s,box-shadow .22s;
}
.profile-card.reveal-ready{animation:cardReveal .55s var(--reveal-delay,0ms) cubic-bezier(.2,.8,.2,1) both}
@keyframes cardReveal{from{opacity:0;transform:translateY(20px) scale(.965)}to{opacity:1;transform:none}}
.profile-card:hover{
 transform:perspective(850px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px);
 box-shadow:0 22px 48px rgba(0,0,0,.34),0 0 0 1px rgba(255,57,177,.14)
}
.profile-card:before{
 content:"";position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;
 background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 26%);
 transition:opacity .2s
}
.profile-card:hover:before{opacity:1}
.profile-photo:after{transition:.25s background}
.profile-card:hover .profile-photo:after{background:linear-gradient(transparent 43%,rgba(8,5,11,.97))}
.premium-lock-badge{animation:lockGlow 2s ease-in-out infinite}
@keyframes lockGlow{50%{box-shadow:0 0 0 7px rgba(255,62,182,.05),0 0 24px rgba(255,50,178,.25)}}

/* Intention entrance */
.intent-card,.age-card{position:relative;overflow:hidden}
.intent-card:before,.age-card:before{
 content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-110px;top:-120px;background:#ff36ad;filter:blur(75px);opacity:.12;pointer-events:none
}
.intent-options button{position:relative;overflow:hidden}
.intent-options button:after{
 content:"";position:absolute;inset:auto 10% 0;height:1px;background:linear-gradient(90deg,transparent,#ff52bd,transparent);
 transform:scaleX(0);transition:.25s transform
}
.intent-options button:hover:after{transform:scaleX(1)}
.intent-options button>span{filter:drop-shadow(0 0 10px rgba(255,72,187,.25))}

/* Chat */
.chat-header{box-shadow:0 14px 30px rgba(0,0,0,.1)}
.avatar-img.small{box-shadow:0 0 0 0 rgba(255,80,186,.28);animation:avatarPulse 3s infinite}
@keyframes avatarPulse{55%{box-shadow:0 0 0 7px rgba(255,80,186,0)}}
.bubble{animation:bubbleIn .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes bubbleIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.typing{position:relative;overflow:hidden}
.typing:after{content:"";display:inline-block;width:18px;height:5px;margin-left:7px;background:radial-gradient(circle,#ff76c9 2px,transparent 3px) 0 0/6px 5px;animation:typingSlide .7s linear infinite}
@keyframes typingSlide{to{background-position:6px 0}}
.chemistry-fill,.chemistry-track i{box-shadow:0 0 12px rgba(255,66,180,.26)}
.gift-btn{animation:giftAttention 4s ease-in-out infinite}
@keyframes giftAttention{0%,78%,100%{transform:none}84%{transform:rotate(-7deg) scale(1.06)}90%{transform:rotate(7deg) scale(1.06)}}

/* Filters / nav */
.filter{transition:.2s transform,.2s background,.2s border-color}
.filter:active,.nav-btn:active{transform:scale(.94)}
.filter.active{box-shadow:0 8px 22px rgba(255,53,173,.2)}
.bottom-nav{backdrop-filter:blur(22px);box-shadow:0 -14px 38px rgba(0,0,0,.24)}
.nav-btn.active{position:relative}
.nav-btn.active:before{content:"";position:absolute;top:-7px;left:50%;width:22px;height:2px;transform:translateX(-50%);background:#ff4eba;border-radius:9px;box-shadow:0 0 10px #ff45b5}

/* Sparkles + micro touch */
.micro-pop{animation:microPop .24s ease}
@keyframes microPop{50%{scale:.975}}
.tiny-spark{
 position:fixed;z-index:9998;width:5px;height:5px;border-radius:50%;background:#ff79ca;pointer-events:none;
 box-shadow:0 0 9px rgba(255,61,181,.9);animation:sparkFly .86s var(--sd,0ms) cubic-bezier(.2,.7,.2,1) forwards
}
.tiny-spark:nth-of-type(even){background:#8c66ff}
@keyframes sparkFly{to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}

/* Modal polish */
.modal-card{animation:modalLift .3s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 40px rgba(255,53,177,.06)}
@keyframes modalLift{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* Performance / accessibility */
@media(max-width:640px){
 .brand-logo{width:145px}
 .gate-logo{width:min(340px,88%)}
 .intent-logo{width:min(280px,82%)}
 .boot-content{width:92vw}
 .boot-content>span{font-size:8px;letter-spacing:3px}
 .ambient-orb{filter:blur(85px);opacity:.11}
 .hero-v2:after{display:none}
 .hero-orbit{width:170px;height:170px;left:calc(50% - 85px);top:7px}
 .hero-stack img{animation-duration:5.5s}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
 .profile-card:hover{transform:none}
}


/* =========================================================
   ONVII V5.2 — AGE FIRST + CHAT FIX
   ========================================================= */

/* The 18+ screen must visually outrank every other experience layer. */
.age-gate{
 z-index:12000!important;
 background:
   radial-gradient(circle at 50% 17%,rgba(255,51,177,.14),transparent 28%),
   radial-gradient(circle at 18% 80%,rgba(109,54,255,.11),transparent 27%),
   #050308!important;
}
.age-card{
 width:min(520px,100%);
 border:1px solid rgba(255,80,190,.22)!important;
 box-shadow:0 35px 110px rgba(0,0,0,.66),0 0 55px rgba(255,47,176,.07)!important;
}
.age-card .gate-logo{
 width:min(390px,88%)!important;
 max-height:132px;
 object-fit:contain;
 margin-bottom:5px;
}
.age-kicker{
 display:block;
 margin:3px 0 4px;
 color:#ff72c9;
 font-weight:900;
 font-size:9px;
 letter-spacing:2.4px;
}
.age-card h1{
 margin:5px 0 9px!important;
 font-size:29px!important;
 letter-spacing:-.7px;
}
.age-card>p{
 max-width:420px;
 margin:0 auto 17px!important;
 line-height:1.55;
}
.checkline{
 border:1px solid rgba(255,255,255,.09);
 background:rgba(255,255,255,.025);
 padding:13px 14px!important;
 border-radius:15px;
 transition:.2s border-color,.2s background;
}
.checkline:has(input:checked){
 border-color:rgba(255,72,185,.34);
 background:rgba(255,54,177,.06);
}
.checkline input{accent-color:#ff45b5}
.age-card .primary{min-height:49px;font-weight:900}

/* Splash only exists AFTER age confirmation. */
.boot-splash.hidden{display:none!important}
.boot-splash{z-index:11000!important}
.boot-logo{
 width:min(700px,88vw)!important;
 max-height:250px;
 object-fit:contain;
 filter:drop-shadow(0 0 22px rgba(255,53,180,.30))!important;
}

/* Only the transparent ONVII brand treatment is used. */
.brand-logo,.gate-logo,.intent-logo,.boot-logo{
 background:transparent!important;
}

/* Cards must always remain clickable even with visual layers. */
.profile-card{cursor:pointer;isolation:isolate}
.profile-card:before,.profile-card:after,.profile-photo:after,.hero-orbit{
 pointer-events:none!important;
}
.profile-card .profile-info,
.profile-card .profile-photo{
 position:relative;
}
.profile-card .profile-info{z-index:8}
.profile-card .profile-photo{z-index:1}

/* Make the direct-to-chat behavior feel intentional. */
.profile-card:not(.locked-card) .profile-cta b{
 position:relative;
 color:#ff8dd1;
}
.profile-card:not(.locked-card) .profile-cta b:after{
 content:"";
 position:absolute;
 left:0;right:0;bottom:-3px;
 height:1px;
 background:linear-gradient(90deg,transparent,#ff58bd,transparent);
 transform:scaleX(.15);
 opacity:.3;
 transition:.22s transform,.22s opacity;
}
.profile-card:not(.locked-card):hover .profile-cta b:after{
 transform:scaleX(1);
 opacity:.9;
}

/* Smoother direct chat entrance. */
#chatView.active{
 animation:chatViewEnter .32s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chatViewEnter{
 from{opacity:0;transform:translateX(10px)}
 to{opacity:1;transform:none}
}

@media(max-width:640px){
 .age-card{padding:22px 17px!important}
 .age-card .gate-logo{width:min(330px,92%)!important}
 .age-card h1{font-size:25px!important}
 .boot-logo{width:94vw!important}
}


/* =========================================================
   ONVII V5.3 — MODALES CENTRADOS
   ========================================================= */

/* 18+ = bloqueo total de pantalla, sin dejar ver la app detrás. */
.age-gate{
  position:fixed!important;
  inset:0!important;
  z-index:20000!important;
  display:grid!important;
  place-items:center!important;
  padding:18px!important;
  overflow:auto;
  background:#050308!important;
  backdrop-filter:blur(26px)!important;
  -webkit-backdrop-filter:blur(26px)!important;
}
.age-gate.hidden{display:none!important}

.age-gate:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,55,182,.17),transparent 31%),
    radial-gradient(circle at 18% 84%,rgba(115,54,255,.12),transparent 28%);
}

.age-card{
  position:relative!important;
  z-index:2!important;
  margin:auto!important;
  width:min(500px,calc(100vw - 32px))!important;
  max-width:500px!important;
  border-radius:28px!important;
  padding:27px 24px!important;
  transform:none!important;
}

/* Todos los modales de ONVII aparecen en el centro también en celular. */
.modal{
  position:fixed!important;
  inset:0!important;
  z-index:15000!important;
  display:grid!important;
  place-items:center!important;
  padding:18px!important;
  overflow:auto!important;
  background:rgba(3,2,6,.88)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.modal.hidden{display:none!important}

.modal-card{
  position:relative!important;
  margin:auto!important;
  width:min(560px,calc(100vw - 32px))!important;
  max-width:560px!important;
  max-height:min(86dvh,760px)!important;
  overflow:auto!important;
  border-radius:26px!important;
  padding:24px!important;
  background:
    radial-gradient(circle at 85% 0,rgba(255,57,179,.075),transparent 31%),
    #15101b!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    0 0 50px rgba(255,54,178,.08)!important;
  overscroll-behavior:contain;
}

.modal-card:before{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#ff59bf,transparent);
  opacity:.75;
}

.modal-close{
  position:sticky!important;
  float:right;
  right:0!important;
  top:0!important;
  z-index:20;
  margin:-8px -8px 4px 10px;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}

/* Evita que una imagen grande empuje el contenido del modal fuera de pantalla. */
.profile-modal-photo{
  width:100%!important;
  height:min(315px,36dvh)!important;
  object-fit:cover!important;
  border-radius:20px!important;
  margin-bottom:14px!important;
}

/* El onboarding también se siente como modal central bloqueante. */
.intent-gate{
  z-index:19000!important;
  background:#050308!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
}
.intent-card{
  margin:auto!important;
  max-height:90dvh;
  overflow:auto;
}

/* En móvil ya NO se convierte en bottom-sheet. */
@media(max-width:640px){
  .age-gate{padding:14px!important}
  .age-card{
    width:min(470px,calc(100vw - 24px))!important;
    padding:22px 17px!important;
    border-radius:24px!important;
  }

  .modal{
    place-items:center!important;
    padding:12px!important;
  }

  .modal-card{
    width:calc(100vw - 24px)!important;
    max-height:88dvh!important;
    border-radius:24px!important;
    padding:20px 15px!important;
  }

  .profile-modal-photo{
    height:min(280px,34dvh)!important;
  }
}

@media(max-width:390px){
  .modal-card{width:calc(100vw - 18px)!important;padding:18px 13px!important}
  .age-card{width:calc(100vw - 18px)!important}
}


/* =========================================================
   ONVII V5.4 — IMMERSIVE PWA EXPERIENCE
   ========================================================= */

html{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
  touch-action:pan-y;
  background:#050308;
}
body{
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  touch-action:pan-y;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
img,button,a,.profile-card,.filter,.nav-btn{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input,textarea{
  font-size:16px!important; /* prevents iOS focus zoom */
  touch-action:manipulation;
}
button,a,.profile-card,.filter,.nav-btn,.gift{
  touch-action:manipulation;
}

/* PWA install button */
.install-app-btn{
  border:1px solid rgba(255,82,190,.25);
  background:rgba(255,61,178,.06);
  color:#ffc2e6;
  min-height:36px;
  padding:0 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  letter-spacing:.2px;
  cursor:pointer;
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  transition:.2s transform,.2s border-color,.2s background;
}
.install-app-btn:hover{
  border-color:rgba(255,82,190,.55);
  background:rgba(255,61,178,.12);
  transform:translateY(-1px);
}
.install-app-btn.hidden{display:none!important}

/* Immersive particle field */
.experience-particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.55;
}
.experience-particles i{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:#ff76c9;
  box-shadow:0 0 10px rgba(255,87,194,.8);
  animation:particleDrift 12s linear infinite;
}
.experience-particles i:nth-child(1){left:9%;top:88%;animation-delay:-2s;animation-duration:15s}
.experience-particles i:nth-child(2){left:19%;top:72%;animation-delay:-7s;animation-duration:13s;background:#8d6cff}
.experience-particles i:nth-child(3){left:35%;top:94%;animation-delay:-4s;animation-duration:16s}
.experience-particles i:nth-child(4){left:49%;top:80%;animation-delay:-10s;animation-duration:14s;background:#8d6cff}
.experience-particles i:nth-child(5){left:61%;top:89%;animation-delay:-5s;animation-duration:17s}
.experience-particles i:nth-child(6){left:73%;top:77%;animation-delay:-9s;animation-duration:12s;background:#a879ff}
.experience-particles i:nth-child(7){left:87%;top:92%;animation-delay:-1s;animation-duration:18s}
.experience-particles i:nth-child(8){left:94%;top:68%;animation-delay:-11s;animation-duration:15s}
@keyframes particleDrift{
  0%{transform:translateY(30px) scale(.7);opacity:0}
  15%{opacity:.8}
  85%{opacity:.55}
  100%{transform:translateY(-110vh) translateX(38px) scale(1.25);opacity:0}
}

/* Premium glass depth */
.topbar,
.bottom-nav,
.chemistry-panel,
.modal-card,
.intent-card,
.age-card{
  -webkit-backdrop-filter:blur(22px) saturate(125%);
  backdrop-filter:blur(22px) saturate(125%);
}

.topbar{
  border-bottom:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg,rgba(10,6,14,.92),rgba(10,6,14,.72))!important;
}
.bottom-nav{
  background:linear-gradient(180deg,rgba(12,7,17,.72),rgba(7,4,10,.96))!important;
}

/* More cinematic character cards */
.profile-card{
  background:
    radial-gradient(circle at 85% 5%,rgba(255,72,185,.06),transparent 28%),
    linear-gradient(180deg,rgba(27,17,34,.96),rgba(14,9,19,.98))!important;
}
.profile-card .profile-photo{
  overflow:hidden;
}
.profile-card .profile-photo img{
  transform:scale(1.002);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.profile-card:hover .profile-photo img{
  transform:scale(1.045);
}
.profile-card:active{
  transform:scale(.985)!important;
}

/* Stronger premium CTA */
.primary,.premium-btn{
  box-shadow:
    0 10px 25px rgba(255,41,168,.15),
    inset 0 1px rgba(255,255,255,.18);
}
.primary:active,.premium-btn:active{
  transform:scale(.975);
}

/* Chat becomes the focus */
#chatView.active{
  min-height:100dvh;
}
.chat-shell{
  isolation:isolate;
}
.messages{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.bubble.ai{
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.bubble.user{
  box-shadow:0 10px 28px rgba(255,45,171,.08);
}
.chat-composer{
  position:sticky;
  bottom:calc(0px + env(safe-area-inset-bottom));
  z-index:30;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

/* Soft animated aura around current chat avatar */
.chat-header .avatar-wrap{
  position:relative;
}
.chat-header .avatar-wrap:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,75,187,.18);
  animation:chatAuraPulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes chatAuraPulse{
  50%{transform:scale(1.12);opacity:.28}
}

/* Better modal immersion */
.modal{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,53,177,.10),transparent 28%),
    rgba(3,2,6,.91)!important;
}
.modal-card{
  transform-origin:center;
}

/* subtle animated gradient line */
.modal-card:after{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#7e57ff,#ff4ab9,transparent);
  background-size:200% 100%;
  animation:modalLine 3s linear infinite;
  opacity:.8;
}
@keyframes modalLine{
  to{background-position:200% 0}
}

/* Mobile app feel */
@media(max-width:640px){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }

  .topbar{
    min-height:58px!important;
  }

  .brand-logo{
    width:138px!important;
  }

  .install-app-btn{
    min-height:32px;
    padding:0 9px;
    font-size:9px;
  }

  .hero-v2{
    border-radius:22px!important;
  }

  .profile-card{
    border-radius:18px!important;
  }

  .profile-photo{
    border-radius:17px 17px 0 0!important;
  }

  .bottom-nav{
    padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
  }

  .modal-card{
    max-height:86dvh!important;
  }

  .chat-composer textarea,
  .chat-composer input,
  #messageInput{
    font-size:16px!important;
  }
}

@media(display-mode:standalone){
  .install-app-btn{display:none!important}
  body{
    padding-top:max(env(safe-area-inset-top),4px);
  }
}

@media(prefers-reduced-motion:reduce){
  .experience-particles{display:none}
}


/* =========================================================
   ONVII V5.5 — CHAT FULL SCREEN / SOLO MENSAJES HACEN SCROLL
   ========================================================= */

/* Cuando el chat está abierto, la página completa no debe desplazarse. */
body.chat-open{
  overflow:hidden!important;
  height:100dvh!important;
  max-height:100dvh!important;
}

/* La vista de chat ocupa toda la pantalla disponible. */
#chatView.active{
  position:fixed!important;
  inset:0!important;
  z-index:5000!important;
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  background:#07040b!important;
  padding-top:env(safe-area-inset-top)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}

/* Contenedor interno del chat: estructura fija. */
#chatView.active .chat-shell{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  margin:0!important;
}

/* Cabecera fija dentro del layout. */
#chatView.active .chat-header{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:40!important;
}

/* Química / progreso también fijo. */
#chatView.active .chemistry-panel{
  flex:0 0 auto!important;
  margin:8px 12px 0!important;
}

/* SOLO esta zona hace scroll. */
#chatView.active .messages{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  padding-bottom:18px!important;
}

/* Acciones rápidas se quedan abajo pero fuera del scroll principal. */
#chatView.active #quickActions,
#chatView.active .quick-actions{
  flex:0 0 auto!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
#chatView.active #quickActions::-webkit-scrollbar,
#chatView.active .quick-actions::-webkit-scrollbar{
  display:none;
}

/* Composer siempre visible; ya no depende del scroll de la página. */
#chatView.active .chat-composer{
  flex:0 0 auto!important;
  position:relative!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:50!important;
  margin:0!important;
  padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,rgba(10,6,14,.82),rgba(7,4,10,.98))!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}

/* Evita que el textarea haga crecer toda la vista. */
#chatView.active #messageInput,
#chatView.active .chat-composer textarea{
  max-height:112px!important;
  overflow-y:auto!important;
}

/* En móvil aprovechamos toda la pantalla. */
@media(max-width:640px){
  #chatView.active{
    height:100dvh!important;
  }

  #chatView.active .chat-header{
    padding-top:8px!important;
  }

  #chatView.active .chemistry-panel{
    margin:6px 10px 0!important;
    padding:9px 11px!important;
  }

  #chatView.active .messages{
    padding-top:10px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #chatView.active .chat-composer{
    padding-left:10px!important;
    padding-right:10px!important;
  }
}

/* PWA standalone: respeta notch y barra inferior sin cortar contenido. */
@media(display-mode:standalone){
  #chatView.active{
    padding-top:env(safe-area-inset-top)!important;
    padding-bottom:0!important;
  }

  #chatView.active .chat-composer{
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
}


/* =========================================================
   ONVII V5.6 — REALISTIC + UNIVERSAL MOBILE OPTIMIZATION
   ========================================================= */

:root{
  --app-vh:100dvh;
  --vv-top:0px;
}

/* More stable than raw 100vh when browser chrome/keyboard changes. */
body.chat-open{
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  overflow:hidden!important;
}

#chatView.active{
  top:var(--vv-top)!important;
  bottom:auto!important;
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  min-height:0!important;
}

/* Chat shell never overflows its own viewport. */
#chatView.active .chat-shell{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
}

/* Header compact enough for small phones while remaining readable. */
#chatView.active .chat-header{
  min-height:58px!important;
  padding:9px 12px!important;
}
#chatView.active .chat-header .avatar-img.small{
  width:42px!important;
  height:42px!important;
}
#chatView.active .chat-meta{
  min-width:0!important;
}
#chatView.active .chat-meta strong,
#chatView.active .chat-meta span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Chemistry should never steal too much chat space. */
#chatView.active .chemistry-panel{
  padding:8px 10px!important;
  margin:6px 10px 0!important;
  border-radius:13px!important;
}
#chatView.active .unlock-row{
  min-height:22px;
}

/* Only messages scroll. */
#chatView.active .messages{
  min-height:0!important;
  flex:1 1 0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,79,190,.28) transparent;
  padding:12px max(10px,calc((100vw - 760px)/2)) 16px!important;
}
#chatView.active .messages::-webkit-scrollbar{width:4px}
#chatView.active .messages::-webkit-scrollbar-thumb{
  background:rgba(255,79,190,.22);
  border-radius:999px;
}

/* Better human-like spacing, without claiming to be human. */
.bubble{
  max-width:min(82%,620px)!important;
  line-height:1.48!important;
  letter-spacing:.01em;
}
.bubble.ai{
  border-bottom-left-radius:7px!important;
}
.bubble.user{
  border-bottom-right-radius:7px!important;
}

/* Typing state feels more alive. */
.typing{
  opacity:.86;
  animation:typingBreath 1.3s ease-in-out infinite!important;
}
@keyframes typingBreath{
  50%{opacity:.62}
}

/* Quick actions compact and horizontal. */
#chatView.active .quick-actions,
#chatView.active #quickActions{
  min-height:42px!important;
  padding:6px 10px!important;
  gap:7px!important;
  background:rgba(8,5,11,.82)!important;
}
#chatView.active .quick-actions button,
#chatView.active #quickActions button{
  flex:0 0 auto!important;
  min-height:30px!important;
  white-space:nowrap;
}

/* Composer always fits and stays visible over mobile keyboard. */
#chatView.active .chat-composer{
  min-height:64px!important;
  padding:8px 10px max(8px,env(safe-area-inset-bottom))!important;
  gap:7px!important;
}
#chatView.active #messageInput,
#chatView.active .chat-composer textarea,
#chatView.active .chat-composer input{
  font-size:16px!important;
  line-height:1.35!important;
  min-height:44px!important;
  max-height:112px!important;
  resize:none!important;
}
body.keyboard-open #chatView.active .chemistry-panel{
  margin-top:4px!important;
  padding-top:6px!important;
  padding-bottom:6px!important;
}
body.keyboard-open #chatView.active .unlock-row{
  display:none!important;
}

/* General form reliability: no iOS focus zoom anywhere. */
input,
select,
textarea{
  font-size:16px!important;
}
input[type="date"],
input[type="time"],
select{
  min-height:46px;
}

/* Prevent clipped controls on tiny devices. */
button,.primary,.ghost,.premium-btn{
  min-width:0;
}
img{
  max-width:100%;
}

/* Landscape phones: preserve conversation area by collapsing nonessential chrome. */
@media(max-height:540px) and (orientation:landscape){
  #chatView.active .chemistry-panel{
    display:none!important;
  }
  #chatView.active .chat-header{
    min-height:50px!important;
    padding:5px 9px!important;
  }
  #chatView.active .quick-actions,
  #chatView.active #quickActions{
    min-height:34px!important;
    padding-block:3px!important;
  }
  #chatView.active .chat-composer{
    min-height:54px!important;
    padding-block:5px!important;
  }
}

/* Very small phones */
@media(max-width:380px){
  #chatView.active .chemistry-title{
    font-size:9px!important;
  }
  #chatView.active .unlock-row span{
    font-size:7px!important;
    padding:3px 6px!important;
  }
  .bubble{
    max-width:88%!important;
    font-size:13px!important;
  }
  .chat-meta span{
    font-size:9px!important;
  }
}

/* Tablets / desktop: centered readable chat column */
@media(min-width:900px){
  #chatView.active .messages,
  #chatView.active .chat-composer,
  #chatView.active .quick-actions,
  #chatView.active #quickActions{
    padding-left:max(22px,calc((100vw - 860px)/2))!important;
    padding-right:max(22px,calc((100vw - 860px)/2))!important;
  }
}

/* Standalone PWA */
@media(display-mode:standalone){
  #chatView.active{
    top:var(--vv-top)!important;
  }
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  .typing{animation:none!important}
}


/* =========================================================
   ONVII V5.7 — FINAL COMPATIBILITY LAYOUT
   This block is authoritative and intentionally overrides
   accumulated experimental rules from earlier versions.
   ========================================================= */

/* ---------- GLOBAL DOCUMENT SCROLL ---------- */
html{
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:auto!important;
  scrollbar-gutter:stable;
}
body{
  width:100%!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  height:auto!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}
body:not(.chat-open){
  overflow-y:auto!important;
  height:auto!important;
  max-height:none!important;
}
body:not(.chat-open) .app-shell{
  min-height:auto!important;
  overflow:visible!important;
}
body:not(.chat-open) #homeView.active{
  display:block!important;
  overflow:visible!important;
  height:auto!important;
  min-height:0!important;
}
body:not(.chat-open) .bottom-nav{
  display:flex!important;
}

/* Mouse wheel / desktop scrollbar remains normal on regular pages. */
@media(pointer:fine){
  html,body{scroll-behavior:auto!important}
}

/* ---------- CHAT = ISOLATED APP VIEW ---------- */
body.chat-open{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--app-vh,100dvh)!important;
  min-height:0!important;
  max-height:var(--app-vh,100dvh)!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}

/* Hide global chrome while chatting: prevents any overlap. */
body.chat-open > .topbar,
body.chat-open > .bottom-nav{
  display:none!important;
}

/* app-shell becomes a transparent host only. */
body.chat-open .app-shell{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--app-vh,100dvh)!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

#chatView.active{
  position:absolute!important;
  inset:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    0
    env(safe-area-inset-left)!important;
  display:block!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 0,rgba(255,54,180,.075),transparent 27%),
    #07040b!important;
  z-index:5000!important;
}

#chatView.active .chat-shell{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
}

/* ---------- CHAT HEADER ---------- */
#chatView.active .chat-header{
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:64px!important;
  margin:0!important;
  padding:9px clamp(10px,2vw,20px)!important;
  display:grid!important;
  grid-template-columns:42px 46px minmax(0,1fr) auto auto auto!important;
  align-items:center!important;
  gap:9px!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:rgba(8,5,11,.94)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  z-index:20!important;
  overflow:visible!important;
}

#chatView.active .chat-header .icon-btn{
  grid-column:1!important;
}
#chatView.active .chat-header .avatar-img.small{
  grid-column:2!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
}
#chatView.active .chat-header .chat-meta{
  grid-column:3!important;
  min-width:0!important;
  width:auto!important;
}
#chatView.active .chat-meta strong{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#chatView.active .chat-meta span{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#chatView.active .chemistry-mini{
  grid-column:4!important;
  margin:0!important;
}
#chatView.active .ai-engine-monitor{
  position:absolute!important;
  right:112px!important;
  top:58px!important;
  z-index:30!important;
  max-width:240px!important;
}
#chatView.active #favoriteChatBtn{
  grid-column:5!important;
  margin:0!important;
}
#chatView.active .gift-btn{
  grid-column:6!important;
  margin:0!important;
}

/* ---------- CHEMISTRY ---------- */
#chatView.active .chemistry-panel{
  grid-row:2!important;
  position:relative!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:6px clamp(10px,2vw,20px) 0!important;
  padding:8px 10px!important;
  flex:none!important;
  overflow:hidden!important;
  border-radius:13px!important;
  z-index:10!important;
}
#chatView.active .chemistry-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-width:0!important;
  gap:8px!important;
}
#chatView.active .chemistry-title span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#chatView.active .unlock-row{
  display:flex!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
#chatView.active .unlock-row::-webkit-scrollbar{display:none!important}

/* ---------- ONLY MESSAGE AREA SCROLLS ---------- */
#chatView.active #messages,
#chatView.active .messages{
  grid-row:3!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:
    14px
    max(12px,calc((100vw - 840px)/2))
    18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,79,190,.28) transparent!important;
  z-index:1!important;
}
#chatView.active #messages::-webkit-scrollbar{width:5px!important}
#chatView.active #messages::-webkit-scrollbar-track{background:transparent!important}
#chatView.active #messages::-webkit-scrollbar-thumb{
  background:rgba(255,79,190,.25)!important;
  border-radius:999px!important;
}

/* ---------- CHAT BOTTOM: QUICK ACTIONS + INPUT ---------- */
#chatView.active .chat-bottom{
  grid-row:4!important;
  position:relative!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:
    6px
    max(10px,calc((100vw - 860px)/2))
    max(7px,env(safe-area-inset-bottom))!important;
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  gap:5px!important;
  background:linear-gradient(180deg,rgba(8,5,11,.82),rgba(6,3,9,.99))!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  z-index:20!important;
}

#chatView.active .quick-actions{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0 0 3px!important;
  display:flex!important;
  gap:7px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  touch-action:pan-x!important;
}
#chatView.active .quick-actions::-webkit-scrollbar{display:none!important}
#chatView.active .quick-actions button{
  flex:0 0 auto!important;
  min-height:31px!important;
  padding:6px 10px!important;
  white-space:nowrap!important;
}

#chatView.active .composer{
  position:relative!important;
  inset:auto!important;
  bottom:auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  margin:0!important;
  padding:6px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#130d19!important;
  border:1px solid #30233a!important;
}

#chatView.active .composer .plus-btn{
  grid-column:1!important;
  width:40px!important;
  height:40px!important;
}
#chatView.active #messageInput{
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  height:40px!important;
  max-height:96px!important;
  margin:0!important;
  padding:8px 4px!important;
  font-size:16px!important;
  line-height:1.3!important;
  border:0!important;
  outline:0!important;
  overflow-y:auto!important;
  background:transparent!important;
  color:#fff!important;
}
#chatView.active .send-btn{
  grid-column:3!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  margin:0!important;
}

#chatView.active .chat-note{
  margin:0!important;
  padding:0!important;
  min-height:12px!important;
  font-size:9px!important;
  line-height:1.2!important;
  color:#736778!important;
  text-align:center!important;
}

/* ---------- KEYBOARD MODE ---------- */
body.keyboard-open #chatView.active .chemistry-panel{
  display:none!important;
}
body.keyboard-open #chatView.active .quick-actions{
  display:none!important;
}
body.keyboard-open #chatView.active .chat-bottom{
  padding-top:5px!important;
}
body.keyboard-open #chatView.active .chat-note{
  display:none!important;
}

/* ---------- DESKTOP ---------- */
@media(min-width:800px){
  #chatView.active .chat-header{
    grid-template-columns:42px 46px minmax(240px,1fr) auto auto auto!important;
    padding-left:max(20px,calc((100vw - 980px)/2))!important;
    padding-right:max(20px,calc((100vw - 980px)/2))!important;
  }
  #chatView.active .chemistry-panel{
    margin-left:max(20px,calc((100vw - 900px)/2))!important;
    margin-right:max(20px,calc((100vw - 900px)/2))!important;
  }
  #chatView.active .bubble{
    max-width:min(68%,620px)!important;
  }
}

/* ---------- TABLET / MOBILE ---------- */
@media(max-width:799px){
  #chatView.active .chat-header{
    grid-template-columns:38px 42px minmax(0,1fr) 38px 38px!important;
    min-height:58px!important;
    padding:7px 9px!important;
    gap:7px!important;
  }
  #chatView.active .chat-header .icon-btn{
    width:38px!important;height:38px!important;
  }
  #chatView.active .chat-header .avatar-img.small{
    width:40px!important;height:40px!important;min-width:40px!important;
  }
  #chatView.active .chemistry-mini{
    display:none!important;
  }
  #chatView.active #favoriteChatBtn{
    grid-column:4!important;
    width:38px!important;height:38px!important;
  }
  #chatView.active .gift-btn{
    grid-column:5!important;
    width:38px!important;height:38px!important;
  }
  #chatView.active .ai-engine-monitor{
    display:none!important;
  }
  #chatView.active #messages{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #chatView.active .chat-bottom{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  #chatView.active .bubble{
    max-width:86%!important;
  }
}

@media(max-width:390px){
  #chatView.active .chat-header{
    grid-template-columns:36px 38px minmax(0,1fr) 36px 36px!important;
    gap:5px!important;
    padding-inline:6px!important;
  }
  #chatView.active .chat-header .avatar-img.small{
    width:36px!important;height:36px!important;min-width:36px!important;
  }
  #chatView.active .chat-meta strong{font-size:14px!important}
  #chatView.active .chat-meta span{font-size:8px!important}
  #chatView.active .chemistry-panel{
    margin-left:7px!important;
    margin-right:7px!important;
  }
  #chatView.active .bubble{
    max-width:90%!important;
    font-size:13px!important;
  }
}

/* ---------- LANDSCAPE / SHORT HEIGHT ---------- */
@media(max-height:560px) and (orientation:landscape){
  #chatView.active .chemistry-panel{display:none!important}
  #chatView.active .quick-actions{display:none!important}
  #chatView.active .chat-note{display:none!important}
  #chatView.active .chat-bottom{padding-top:5px!important}
  #chatView.active .chat-header{min-height:50px!important;padding-block:4px!important}
}

/* ---------- MODALS NEVER AFFECT PAGE SCROLL ---------- */
.modal{
  overscroll-behavior:contain!important;
}
.modal-card{
  overscroll-behavior:contain!important;
}

/* ---------- HOME / WEB ORGANIZATION ---------- */
.app-shell{
  width:100%;
}
#homeView.active{
  width:100%;
}
.profile-grid{
  align-items:stretch!important;
}
.profile-card{
  min-width:0!important;
}
.discovery-bar,
.section-head,
.hero-v2{
  min-width:0!important;
}

@media(min-width:1100px){
  .app-shell{max-width:1240px!important}
}
@media(min-width:700px) and (max-width:1099px){
  .profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(min-width:481px) and (max-width:699px){
  .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:480px){
  .app-shell{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .profile-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .profile-info{padding-left:10px!important;padding-right:10px!important}
  .profile-info .name-row strong{font-size:18px!important}
  .profile-photo{height:230px!important}
  .hero-v2{padding:20px 14px!important}
  .discovery-bar{gap:7px!important}
}

/* Restore ordinary scrollbar when not in chat. */
body:not(.chat-open)::-webkit-scrollbar{width:10px}
body:not(.chat-open)::-webkit-scrollbar-thumb{
  background:rgba(255,76,188,.16);
  border-radius:999px;
}


/* =========================================================
   ONVII V5.8 — FIX BOTTOM CHAT AREA / FULL CHAT SCREEN
   This block intentionally overrides previous keyboard rules.
   ========================================================= */

:root{
  --kb-h: 0px;
}

/* The public site keeps its fixed bottom navigation. */
.bottom-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:120!important;
}
#homeView.active{
  padding-bottom:88px!important;
}

/* While chatting, the website nav disappears so the chat can use the full screen. */
body.chat-open .bottom-nav{
  display:none!important;
}

/* Authoritative full-screen chat sizing. */
body.chat-open{
  padding:0!important;
}
body.chat-open .app-shell{
  inset:0!important;
  padding:0!important;
  margin:0!important;
}

#chatView.active{
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  padding-bottom:0!important;
}

#chatView.active .chat-shell{
  grid-template-rows:auto auto minmax(0,1fr) auto!important;
}

/* Message area only scrolls. */
#chatView.active #messages,
#chatView.active .messages{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:14px!important;
}

/* The complete bottom chat zone stays attached to the real bottom of the viewport. */
#chatView.active .chat-bottom{
  position:relative!important;
  transform:none!important;
  margin:0!important;
  padding-top:6px!important;
  padding-right:max(10px,calc((100vw - 860px)/2))!important;
  padding-left:max(10px,calc((100vw - 860px)/2))!important;
  padding-bottom:max(8px, env(safe-area-inset-bottom))!important;
  min-height:auto!important;
}

/* When the keyboard opens, do NOT push the bottom zone upward leaving a ghost gap. */
body.keyboard-open #chatView.active{
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  padding-bottom:0!important;
}
body.keyboard-open #chatView.active .chat-shell{
  height:100%!important;
}
body.keyboard-open #chatView.active .chat-bottom{
  padding-bottom:6px!important;
  margin-bottom:0!important;
  bottom:auto!important;
}
body.keyboard-open #chatView.active .composer{
  min-height:54px!important;
  margin:0!important;
}
body.keyboard-open #chatView.active #messageInput{
  max-height:96px!important;
}
body.keyboard-open #chatView.active #messages{
  padding-bottom:10px!important;
}

/* Hide only secondary helpers on keyboard; keep the actual composer fixed and visible. */
body.keyboard-open #chatView.active .quick-actions{
  display:none!important;
}
body.keyboard-open #chatView.active .chemistry-panel{
  display:none!important;
}
body.keyboard-open #chatView.active .chat-note{
  display:none!important;
}

/* Desktop / web: mouse wheel + fixed bottom site nav must still feel natural. */
@media(min-width:800px){
  #homeView.active{
    padding-bottom:96px!important;
  }
  #chatView.active .chat-bottom{
    padding-left:max(18px,calc((100vw - 860px)/2))!important;
    padding-right:max(18px,calc((100vw - 860px)/2))!important;
  }
}

/* Mobile tuning */
@media(max-width:799px){
  #homeView.active{
    padding-bottom:84px!important;
  }
  #chatView.active .chat-bottom{
    padding-left:8px!important;
    padding-right:8px!important;
    padding-bottom:max(8px, env(safe-area-inset-bottom))!important;
  }
  body.keyboard-open #chatView.active .chat-bottom{
    padding-bottom:6px!important;
  }
}

/* Very small phones */
@media(max-width:390px){
  #homeView.active{
    padding-bottom:80px!important;
  }
  #chatView.active .composer{
    grid-template-columns:38px minmax(0,1fr) 40px!important;
    gap:6px!important;
  }
  #chatView.active .composer .plus-btn{
    width:36px!important;
    height:36px!important;
  }
  #chatView.active .send-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
}


/* =========================================================
   ONVII V5.9 — iPHONE KEYBOARD GAP FIX
   ========================================================= */

/*
 Safari iOS already moves fixed-position content into the visual viewport.
 Do not add visualViewport.offsetTop a second time while the keyboard is open.
*/
html.is-ios body.chat-open #chatView.active,
html.is-ios body.ios-keyboard-open #chatView.active{
  top:0!important;
  bottom:auto!important;
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  transform:none!important;
}

/* The host itself must match the visible viewport exactly. */
html.is-ios body.ios-keyboard-open .app-shell{
  top:0!important;
  bottom:auto!important;
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  transform:none!important;
}

/* No safe-area reserve between the keyboard and composer while keyboard is visible. */
html.is-ios body.ios-keyboard-open #chatView.active{
  padding-bottom:0!important;
}
html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom{
  margin:0!important;
  padding-top:4px!important;
  padding-bottom:2px!important;
  bottom:0!important;
  transform:none!important;
}
html.is-ios body.ios-keyboard-open #chatView.active .composer{
  margin:0!important;
  bottom:0!important;
  transform:none!important;
}

/* Keep only the conversation flexible; composer occupies its exact intrinsic height. */
html.is-ios body.ios-keyboard-open #chatView.active .chat-shell{
  height:100%!important;
  max-height:100%!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
}

/* Chemistry is hidden with the keyboard, therefore remove its grid row entirely. */
html.is-ios body.ios-keyboard-open #chatView.active .chemistry-panel{
  display:none!important;
}
html.is-ios body.ios-keyboard-open #chatView.active #messages{
  grid-row:2!important;
  min-height:0!important;
  padding-bottom:6px!important;
}
html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom{
  grid-row:3!important;
}

/* Secondary rows stay hidden so they can't create invisible height. */
html.is-ios body.ios-keyboard-open #chatView.active .quick-actions,
html.is-ios body.ios-keyboard-open #chatView.active .chat-note{
  display:none!important;
}

/* iPhone composer: compact enough to sit directly above software keyboard. */
html.is-ios body.ios-keyboard-open #chatView.active .composer{
  min-height:50px!important;
  padding:4px 6px!important;
  border-radius:15px!important;
}
html.is-ios body.ios-keyboard-open #chatView.active #messageInput{
  min-height:40px!important;
  height:40px!important;
  max-height:82px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
}

/* Do not reserve the home indicator safe-area when the software keyboard occupies it. */
@supports(padding:max(0px)){
  html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom{
    padding-bottom:2px!important;
  }
}

/* Tiny iPhones */
@media(max-width:390px){
  html.is-ios body.ios-keyboard-open #chatView.active .chat-header{
    min-height:52px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
}


/* =========================================================
   ONVII V5.10 — iOS FOCUS MODE
   Safari fix: when the keyboard opens, header stays fixed on top,
   composer stays fixed above the keyboard, and only messages scroll.
   ========================================================= */

:root{
  --ios-chat-header-h: 72px;
  --ios-chat-bottom-h: 72px;
}

/* While typing in iPhone Safari, never allow the browser to "push" the chat upward. */
html.is-ios body.ios-focus-mode,
html.is-ios body.ios-keyboard-open{
  overflow:hidden!important;
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  min-height:0!important;
  overscroll-behavior:none!important;
  -webkit-overflow-scrolling:auto!important;
}

html.is-ios body.ios-focus-mode .app-shell,
html.is-ios body.ios-keyboard-open .app-shell{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}

html.is-ios body.ios-focus-mode #chatView.active,
html.is-ios body.ios-keyboard-open #chatView.active{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:var(--app-vh)!important;
  max-height:var(--app-vh)!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 0,rgba(255,54,180,.075),transparent 27%),
    #07040b!important;
}

html.is-ios body.ios-focus-mode #chatView.active .chat-shell,
html.is-ios body.ios-keyboard-open #chatView.active .chat-shell{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}

/* Fixed header */
html.is-ios body.ios-focus-mode #chatView.active .chat-header,
html.is-ios body.ios-keyboard-open #chatView.active .chat-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:50!important;
  padding-top:max(8px, env(safe-area-inset-top))!important;
  min-height:var(--ios-chat-header-h)!important;
  background:rgba(8,5,11,.96)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

/* Hide chemistry while typing to recover vertical space cleanly */
html.is-ios body.ios-focus-mode #chatView.active .chemistry-panel,
html.is-ios body.ios-keyboard-open #chatView.active .chemistry-panel{
  display:none!important;
}

/* Fixed bottom zone = no more jumping upward */
html.is-ios body.ios-focus-mode #chatView.active .chat-bottom,
html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:55!important;
  margin:0!important;
  padding:4px 8px 2px!important;
  background:linear-gradient(180deg,rgba(8,5,11,.85),rgba(6,3,9,.98))!important;
  border-top:1px solid rgba(255,255,255,.05)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

/* Only composer remains while keyboard is up */
html.is-ios body.ios-focus-mode #chatView.active .quick-actions,
html.is-ios body.ios-keyboard-open #chatView.active .quick-actions,
html.is-ios body.ios-focus-mode #chatView.active .chat-note,
html.is-ios body.ios-keyboard-open #chatView.active .chat-note{
  display:none!important;
}

html.is-ios body.ios-focus-mode #chatView.active .composer,
html.is-ios body.ios-keyboard-open #chatView.active .composer{
  min-height:52px!important;
  margin:0!important;
  padding:5px!important;
  border-radius:16px!important;
  grid-template-columns:40px minmax(0,1fr) 42px!important;
}

html.is-ios body.ios-focus-mode #chatView.active .composer .plus-btn,
html.is-ios body.ios-keyboard-open #chatView.active .composer .plus-btn{
  width:38px!important;
  height:38px!important;
}

html.is-ios body.ios-focus-mode #chatView.active .send-btn,
html.is-ios body.ios-keyboard-open #chatView.active .send-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
}

html.is-ios body.ios-focus-mode #chatView.active #messageInput,
html.is-ios body.ios-keyboard-open #chatView.active #messageInput{
  min-height:40px!important;
  height:40px!important;
  max-height:82px!important;
  font-size:16px!important;
  padding:7px 4px!important;
}

/* Conversation occupies the exact space between header and composer */
html.is-ios body.ios-focus-mode #chatView.active #messages,
html.is-ios body.ios-keyboard-open #chatView.active #messages,
html.is-ios body.ios-focus-mode #chatView.active .messages,
html.is-ios body.ios-keyboard-open #chatView.active .messages{
  position:fixed!important;
  top:var(--ios-chat-header-h)!important;
  left:0!important;
  right:0!important;
  bottom:calc(var(--ios-chat-bottom-h) + 2px)!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:12px 10px 10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}

/* Small iPhones */
@media(max-width:430px){
  :root{
    --ios-chat-header-h: 70px;
    --ios-chat-bottom-h: 66px;
  }
}

/* Very small iPhones */
@media(max-width:390px){
  :root{
    --ios-chat-header-h: 66px;
    --ios-chat-bottom-h: 62px;
  }
  html.is-ios body.ios-focus-mode #chatView.active .chat-header,
  html.is-ios body.ios-keyboard-open #chatView.active .chat-header{
    padding-top:max(6px, env(safe-area-inset-top))!important;
  }
  html.is-ios body.ios-focus-mode #chatView.active #messages,
  html.is-ios body.ios-keyboard-open #chatView.active #messages{
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* Browser mode on iPhone: still avoid extra bottom safe-area while keyboard is shown */
@supports(padding:max(0px)){
  html.is-ios body.ios-focus-mode #chatView.active .chat-bottom,
  html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom{
    padding-bottom:2px!important;
  }
}


/* =========================================================
   ONVII V5.11 — iPHONE COMPOSER ABOVE KEYBOARD
   Keep the chat on the layout viewport and lift only the
   composer by the measured visual-viewport keyboard overlap.
   ========================================================= */

:root{
  --visual-vh:100dvh;
}

/* iOS: the chat itself stays on the layout viewport. */
html.is-ios body.chat-open,
html.is-ios body.ios-focus-mode,
html.is-ios body.ios-keyboard-open{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}

html.is-ios body.chat-open .app-shell,
html.is-ios body.ios-focus-mode .app-shell,
html.is-ios body.ios-keyboard-open .app-shell,
html.is-ios body.chat-open #chatView.active,
html.is-ios body.ios-focus-mode #chatView.active,
html.is-ios body.ios-keyboard-open #chatView.active{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100dvh!important;
  max-height:100dvh!important;
  transform:none!important;
  overflow:hidden!important;
}

/* Header always visible at the top. */
html.is-ios body.ios-keyboard-open #chatView.active .chat-header,
html.is-ios body.ios-focus-mode #chatView.active .chat-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:60!important;
}

/*
  KEY FIX:
  bottom = measured keyboard overlap.
  Safari can keep fixed bottom:0 under the keyboard; this lifts
  the composer exactly to the keyboard's top edge.
*/
html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom,
html.is-ios body.ios-focus-mode #chatView.active .chat-bottom{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:var(--kb-h)!important;
  z-index:70!important;
  margin:0!important;
  padding:4px 8px 2px!important;
  transform:none!important;
}

/* No secondary rows while typing. */
html.is-ios body.ios-keyboard-open #chatView.active .quick-actions,
html.is-ios body.ios-focus-mode #chatView.active .quick-actions,
html.is-ios body.ios-keyboard-open #chatView.active .chat-note,
html.is-ios body.ios-focus-mode #chatView.active .chat-note,
html.is-ios body.ios-keyboard-open #chatView.active .chemistry-panel,
html.is-ios body.ios-focus-mode #chatView.active .chemistry-panel{
  display:none!important;
}

/* Compact composer directly above keyboard. */
html.is-ios body.ios-keyboard-open #chatView.active .composer,
html.is-ios body.ios-focus-mode #chatView.active .composer{
  min-height:52px!important;
  height:auto!important;
  margin:0!important;
  padding:5px 6px!important;
  border-radius:16px!important;
}

/*
  Messages occupy exactly the area between header and lifted composer.
  Bottom is keyboard overlap + composer height.
*/
html.is-ios body.ios-keyboard-open #chatView.active #messages,
html.is-ios body.ios-focus-mode #chatView.active #messages{
  position:fixed!important;
  top:var(--ios-chat-header-h)!important;
  left:0!important;
  right:0!important;
  bottom:calc(var(--kb-h) + var(--ios-chat-bottom-h))!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:10px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Remove any safe-area padding while the keyboard itself occupies that area. */
html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom,
html.is-ios body.ios-focus-mode #chatView.active .chat-bottom{
  padding-bottom:2px!important;
}

/* Do not let previous visualViewport-height rules win. */
html.is-ios body.ios-keyboard-open #chatView.active,
html.is-ios body.ios-focus-mode #chatView.active,
html.is-ios body.ios-keyboard-open .app-shell,
html.is-ios body.ios-focus-mode .app-shell{
  height:100dvh!important;
  max-height:100dvh!important;
}

/* Fine tuning for browser Safari bottom chrome / keyboard animation. */
@media(max-width:430px){
  html.is-ios body.ios-keyboard-open #chatView.active .chat-bottom,
  html.is-ios body.ios-focus-mode #chatView.active .chat-bottom{
    padding-left:7px!important;
    padding-right:7px!important;
  }
}


/* =========================================================
   ONVII V5.12 — CHEMISTRY + HEAT ECONOMY
   ========================================================= */
.relation-title-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.boost-mini-btn{
  width:24px;
  height:24px;
  min-width:24px;
  border-radius:50%;
  border:1px solid rgba(255,80,190,.25);
  background:rgba(255,55,177,.08);
  color:#ff9bd6;
  display:grid;
  place-items:center;
  padding:0;
  font-weight:900;
  cursor:pointer;
}
.heat-row{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.05);
  transition:.25s opacity;
}
.heat-row.locked{opacity:.48}
.heat-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:9px;
  color:#a998af;
}
.heat-title strong{color:#ff9b77}
.heat-track{
  height:5px;
  border-radius:99px;
  background:#251713;
  margin-top:6px;
  overflow:hidden;
}
.heat-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#ff9c54,#ff442e,#ff2f84);
  box-shadow:0 0 14px rgba(255,72,58,.28);
  transition:.35s width;
}
.heat-row:not(.locked) .heat-title span{
  animation:heatPulse 2.4s ease-in-out infinite;
}
@keyframes heatPulse{
  50%{filter:drop-shadow(0 0 7px rgba(255,75,55,.65))}
}

.boost-store h2{margin:6px 0 7px}
.boost-store h3{
  font-size:12px;
  margin:18px 0 8px;
  color:#e7dce9;
}
.relation-store-state{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:16px 0;
}
.relation-store-state>div{
  border:1px solid #35283d;
  background:#100b15;
  border-radius:15px;
  padding:12px;
}
.relation-store-state span{
  display:block;
  font-size:9px;
  color:#8e8194;
  margin-bottom:5px;
}
.relation-store-state b{font-size:18px}
.relation-store-state .disabled{opacity:.5}
.boost-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.boost-grid button{
  border:1px solid #3a2a42;
  background:linear-gradient(145deg,#18101f,#100b15);
  color:#fff;
  border-radius:16px;
  padding:14px 10px;
  text-align:left;
  cursor:pointer;
}
.boost-grid button span{
  display:block;
  font-size:18px;
  font-weight:900;
}
.boost-grid button b{
  display:block;
  color:#ff8fd1;
  margin:5px 0 2px;
}
.boost-grid button small{color:#807287}
.boost-disabled{opacity:.45}
.boost-disabled button{cursor:not-allowed}
.boost-locked,.boost-unlocked{
  font-size:10px;
  line-height:1.4;
  padding:9px 10px;
  border-radius:12px;
  margin-bottom:8px;
}
.boost-locked{
  color:#9c8ca1;
  background:#110c16;
  border:1px solid #302438;
}
.boost-unlocked{
  color:#ffb18f;
  background:rgba(255,77,50,.06);
  border:1px solid rgba(255,91,65,.16);
}

@media(max-width:480px){
  .relation-store-state,.boost-grid{grid-template-columns:1fr 1fr}
  .boost-grid button{padding:12px 9px}
}


/* =========================================================
   ONVII V5.16 — PAGO MANUAL + TELEGRAM
   ========================================================= */
.manual-pay{text-align:center}
.manual-pay h2{margin:6px 0 4px}
.manual-pay-amount{
  font-size:32px;font-weight:950;margin:10px 0 16px;
  letter-spacing:-1px
}
.manual-pay-amount small{font-size:11px;color:#8f8395;letter-spacing:0}
.payment-key-card{
  background:linear-gradient(145deg,#181020,#0f0a14);
  border:1px solid #3c2b45;border-radius:18px;padding:16px;
  margin:12px 0;text-align:center
}
.payment-key-card>span{display:block;color:#9c8fa2;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.payment-key-card strong{
  display:block;font-size:21px;margin:8px 0;word-break:break-all;color:#fff
}
.payment-key-card small{display:block;color:#847889;font-size:10px}
.copy-key-btn{
  margin-top:12px;border:1px solid rgba(255,72,183,.28);
  background:rgba(255,55,177,.08);color:#ff8fd0;
  border-radius:11px;padding:9px 13px;font-weight:800
}
.payment-qr img{
  width:min(220px,72vw);height:auto;background:#fff;padding:10px;border-radius:18px;margin:8px auto
}
.payment-steps{display:grid;gap:7px;margin:16px 0;text-align:left}
.payment-steps>div{
  display:flex;align-items:center;gap:9px;padding:9px 10px;
  background:#100b15;border:1px solid #2d2234;border-radius:12px
}
.payment-steps b{
  width:23px;height:23px;min-width:23px;border-radius:50%;
  display:grid;place-items:center;background:#ff36ad;color:#fff;font-size:10px
}
.payment-steps span{font-size:11px;color:#c8bdcc}
.receipt-form{display:grid;gap:10px;margin-top:12px}
.receipt-drop{
  display:grid;place-items:center;gap:4px;
  border:1px dashed #60466b;background:#110c16;border-radius:16px;
  padding:17px;cursor:pointer
}
.receipt-drop input{display:none}
.receipt-drop>span{font-size:25px}
.receipt-drop b{font-size:12px}
.receipt-drop small{font-size:9px;color:#807486}
.receipt-file-name{font-size:10px;color:#64dfa0;min-height:14px;word-break:break-all}
.payment-security-note{font-size:9px;color:#766c7b;margin-top:12px}
.payment-pending,.payment-result{text-align:center;padding:8px 0}
.payment-state-icon{
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 14px;background:#1c1322;border:1px solid #4a3653;
  font-size:29px
}
.payment-pending h2,.payment-result h2{margin:7px 0}
.payment-pending p,.payment-result p{color:#9d91a2;font-size:12px;line-height:1.55}
.payment-id{
  display:inline-block;margin:10px 0;background:#110c16;border:1px solid #33263a;
  border-radius:10px;padding:7px 11px;font-size:10px;color:#a99daf
}
.payment-live{display:flex;justify-content:center;align-items:center;gap:7px;margin:14px 0;color:#a89cae;font-size:10px}
.payment-live i{
  width:8px;height:8px;border-radius:50%;background:#ff3fad;
  box-shadow:0 0 10px rgba(255,63,173,.6);animation:payPulse 1.25s infinite
}
@keyframes payPulse{50%{opacity:.25;transform:scale(.72)}}
.payment-warning{
  background:rgba(255,173,69,.08);border:1px solid rgba(255,173,69,.2);
  color:#d9ad72;padding:10px;border-radius:12px;font-size:9px;line-height:1.45
}
.payment-result.approved .payment-state-icon{
  color:#61e49b;border-color:rgba(97,228,155,.28);background:rgba(97,228,155,.06)
}
.payment-result.rejected .payment-state-icon{
  color:#ff718c;border-color:rgba(255,113,140,.25);background:rgba(255,113,140,.06)
}
.payment-close-btn{margin-top:5px}