/* HappyGram V36 — visual polish, landing, premium gifts */
.landing-screen{min-height:100dvh!important;overflow:auto!important;padding:24px!important;display:block!important;background:radial-gradient(circle at 20% 10%,rgba(139,92,246,.16),transparent 32%),radial-gradient(circle at 80% 15%,rgba(34,211,238,.12),transparent 28%),#050713!important}
.landing-screen[data-active="false"]{display:none!important}.landing-topbar{width:min(1240px,100%);margin:0 auto 18px;display:flex;justify-content:space-between;align-items:center;gap:14px}.landing-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:22px}.landing-brand img{width:42px;height:42px;border-radius:13px;box-shadow:0 0 35px rgba(139,92,246,.35)}.landing-brand b{color:#f0abfc}.landing-lang{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:14px;padding:10px 13px;backdrop-filter:blur(16px)}.landing-lang option{background:#0d1224;color:#fff}.landing-hero{width:min(1240px,100%);margin:auto;min-height:520px;border-radius:34px;padding:clamp(28px,6vw,72px);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;overflow:hidden;position:relative;background:linear-gradient(135deg,rgba(18,22,48,.88),rgba(8,11,26,.72));border:1px solid rgba(255,255,255,.1);box-shadow:0 35px 100px rgba(0,0,0,.35)}.landing-copy{position:relative;z-index:2}.landing-kicker{letter-spacing:.18em;font-size:11px;color:#b9a8ff;font-weight:800;margin-bottom:16px}.landing-hero h1{font-size:clamp(42px,6vw,82px);line-height:1.02;margin:0;letter-spacing:-.055em;color:#fff}.landing-hero h1 span{background:linear-gradient(100deg,#a78bfa,#22d3ee,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent}.landing-hero p{max-width:660px;color:#aeb7d4;font-size:18px;line-height:1.65;margin:24px 0 28px}.landing-actions{display:flex;gap:12px;flex-wrap:wrap}.landing-main-btn,.landing-apk-btn{min-height:52px;padding-inline:22px;text-decoration:none}.landing-apk-btn{display:inline-flex;align-items:center}.landing-ios{margin-top:16px;border:0;background:transparent;color:#c9c5db;text-align:left;cursor:pointer;padding:0;font-weight:700}.landing-ios small{display:block;color:#7e86a6;font-weight:500;margin-top:5px;max-width:520px}.landing-orbit{min-height:380px;display:flex;align-items:center;justify-content:center;position:relative}.landing-logo-glow{width:210px;height:210px;border-radius:56px;display:grid;place-items:center;background:radial-gradient(circle,#4c1d95 0,rgba(124,58,237,.3) 38%,transparent 70%);box-shadow:0 0 110px rgba(139,92,246,.4);animation:hgFloat 5s ease-in-out infinite}.landing-logo-glow img{width:125px;height:125px;border-radius:34px;box-shadow:0 0 55px rgba(236,72,153,.4)}.orbit-pill{position:absolute;padding:11px 15px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(15px);color:#fff;font-size:13px;box-shadow:0 15px 35px rgba(0,0,0,.2)}.p1{top:12%;left:8%}.p2{top:27%;right:3%}.p3{bottom:19%;right:9%}.p4{bottom:7%;left:13%}@keyframes hgFloat{50%{transform:translateY(-10px) rotate(1deg)}}.landing-labs{width:min(1240px,100%);margin:55px auto 0}.landing-section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:18px}.landing-section-head span{font-size:11px;letter-spacing:.18em;color:#9f8cff;font-weight:800}.landing-section-head h2{font-size:34px;margin:5px 0 0;color:#fff}.landing-section-head p{color:#7f88a8}.landing-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.landing-feature-grid article{min-height:165px;padding:22px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}.landing-feature-grid b{font-size:26px}.landing-feature-grid strong{color:#fff;font-size:16px}.landing-feature-grid span{color:#8d96b5;line-height:1.55;font-size:13px}.landing-footer{width:min(1240px,100%);margin:35px auto 10px;padding:18px 0;color:#707895;display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}.gift-premium-panel,.payment-panel{max-width:560px!important}.gift-balance{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035);margin-bottom:14px}.gift-balance span{color:#8d96b5}.gift-balance strong{margin-left:auto;color:#f8d66d}.gift-grid-premium{grid-template-columns:repeat(4,1fr)!important}.gift-grid-premium button{position:relative;min-height:100px}.gift-grid-premium button small{color:#f8d66d;font-size:10px}.gift-grid-premium button.is-selected{border-color:#a78bfa;box-shadow:0 0 30px rgba(167,139,250,.2);transform:translateY(-2px)}.gift-preview{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;margin:14px 0;background:linear-gradient(135deg,rgba(139,92,246,.13),rgba(236,72,153,.08));border:1px solid rgba(255,255,255,.08)}.gift-preview>span{font-size:42px;animation:hgGift 1.7s ease-in-out infinite}.gift-preview div{display:flex;flex-direction:column;gap:3px}.gift-preview small,.gift-note{color:#7f88a8;line-height:1.45}.gift-note{display:block;margin-top:10px}.gift-message-card{min-width:220px;padding:18px 16px;border-radius:22px;background:radial-gradient(circle at 50% 20%,rgba(167,139,250,.3),transparent 45%),linear-gradient(145deg,#17142c,#0b1021);border:1px solid rgba(216,180,254,.22);text-align:center;box-shadow:0 12px 45px rgba(139,92,246,.18);position:relative;overflow:hidden}.gift-orbit{font-size:58px;animation:hgGift 1.8s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(244,114,182,.35))}.gift-message-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#a7aed0;margin-top:5px}.gift-message-name{font-size:18px;font-weight:800;color:#fff;margin-top:5px}.gift-message-caption{color:#d7cce8;margin-top:7px;font-size:13px}.gift-message-price{color:#f8d66d;font-weight:800;margin-top:9px}@keyframes hgGift{50%{transform:translateY(-7px) scale(1.06) rotate(2deg)}}.stars-pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stars-pack-grid button,.payment-methods button{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;border-radius:16px;padding:14px;text-align:left;cursor:pointer}.stars-pack-grid button small{display:block;color:#7f88a8;margin-top:4px}.stars-pack-grid button.is-selected,.payment-methods button.is-active{border-color:#a78bfa;background:rgba(139,92,246,.12)}.payment-methods{display:flex;gap:8px;margin:16px 0}.payment-form{display:grid;gap:10px}.payment-form input{width:100%;box-sizing:border-box}.payment-form>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payment-form small{color:#7f88a8;line-height:1.45}@media(max-width:820px){.landing-hero{grid-template-columns:1fr;min-height:auto}.landing-orbit{min-height:300px}.landing-feature-grid{grid-template-columns:1fr 1fr}.landing-section-head{align-items:start;flex-direction:column}.landing-footer{flex-direction:column}}@media(max-width:560px){.landing-screen{padding:14px!important}.landing-hero{padding:28px 20px;border-radius:25px}.landing-hero h1{font-size:43px}.landing-hero p{font-size:15px}.landing-orbit{min-height:260px}.landing-logo-glow{width:150px;height:150px}.landing-logo-glow img{width:95px;height:95px}.orbit-pill{font-size:11px}.landing-feature-grid{grid-template-columns:1fr}.gift-grid-premium{grid-template-columns:repeat(2,1fr)!important}.stars-pack-grid{grid-template-columns:1fr}.payment-methods{flex-direction:column}}

/* =========================================================
   HAPPYGRAM V37 — final visual polish
   Wallpaper previews, clickable controls, full video notes,
   and strict avatar clipping.
   ========================================================= */

/* All ordinary clickable controls share one polished language. */
button,
.btn,
.wallpaper-choice,
.settings-nav-item,
.checkout-method,
.premium-plan,
.gift-grid button,
.gift-grid-premium button,
.stars-pack-grid button,
.payment-methods button,
.landing-ios,
.landing-premium-link,
.rail-btn,
.bn-item,
.icon-btn{
  -webkit-tap-highlight-color:transparent;
}
button:not(.icon-btn):not(.btn-send):not(.rail-btn):not(.bn-item),
.btn:not(.btn-send){
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,filter .18s ease!important;
}
.btn{
  min-height:42px!important;
  padding:10px 17px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  font-weight:750!important;
  letter-spacing:.01em!important;
  box-shadow:0 7px 22px rgba(0,0,0,.16)!important;
}
.btn:not(.btn-primary):not(.btn-send){
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  color:#eaf0ff!important;
}
.btn:hover:not(:disabled){transform:translateY(-2px)!important;border-color:rgba(167,139,250,.42)!important;box-shadow:0 12px 30px rgba(0,0,0,.22)!important;filter:none!important}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)!important}
.btn-primary{box-shadow:0 10px 30px rgba(124,58,237,.28)!important}
.icon-btn{
  border-radius:13px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 6px 18px rgba(0,0,0,.16)!important;
}
.icon-btn:hover{transform:translateY(-2px)!important;background:linear-gradient(180deg,rgba(139,92,246,.20),rgba(139,92,246,.07))!important;border-color:rgba(167,139,250,.42)!important;color:#fff!important}

/* Wallpaper selector: the card itself is the preview, not just a text label. */
.wallpaper-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.wallpaper-choice{
  position:relative!important;
  display:block!important;
  min-height:104px!important;
  padding:7px!important;
  overflow:hidden!important;
  text-align:left!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border-radius:17px!important;
  box-shadow:0 8px 25px rgba(0,0,0,.14)!important;
}
.wallpaper-choice:hover{transform:translateY(-3px)!important;border-color:rgba(167,139,250,.48)!important;box-shadow:0 14px 32px rgba(0,0,0,.24)!important}
.wallpaper-choice.is-active{border-color:rgba(167,139,250,.9)!important;box-shadow:0 0 0 1px rgba(167,139,250,.22),0 14px 34px rgba(76,57,180,.20)!important}
.wallpaper-choice.is-active:after{content:'✓';position:absolute;right:10px;top:9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:12px;font-weight:900;box-shadow:0 5px 16px rgba(139,92,246,.35)}
.wallpaper-preview{
  position:relative!important;
  height:72px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.wallpaper-preview:before{content:'';position:absolute;left:9px;top:12px;width:42%;height:16px;border-radius:9px 9px 9px 3px;background:rgba(255,255,255,.20);box-shadow:0 22px 0 rgba(255,255,255,.10)}
.wallpaper-preview:after{content:'';position:absolute;right:9px;bottom:10px;width:42%;height:18px;border-radius:9px 9px 3px 9px;background:linear-gradient(135deg,rgba(139,92,246,.85),rgba(236,72,153,.72));box-shadow:0 0 18px rgba(139,92,246,.28)}
.wp-midnight:before{background:rgba(148,163,184,.18);box-shadow:0 22px 0 rgba(148,163,184,.08)}
.wp-midnight:after{background:linear-gradient(135deg,rgba(71,85,150,.78),rgba(37,99,235,.55))}
.wp-violet:before{background:rgba(236,72,153,.18);box-shadow:0 22px 0 rgba(217,70,239,.09)}
.wp-violet:after{background:linear-gradient(135deg,rgba(139,92,246,.9),rgba(217,70,239,.7))}
.wp-grid:before,.wp-bubbles:before{z-index:1}
.wp-grid:after{background:linear-gradient(135deg,rgba(34,211,238,.65),rgba(139,92,246,.78))}
.wp-bubbles:after{background:linear-gradient(135deg,rgba(34,211,238,.65),rgba(236,72,153,.72))}
.wp-plain:before{background:rgba(255,255,255,.12);box-shadow:0 22px 0 rgba(255,255,255,.055)}
.wp-plain:after{background:rgba(139,92,246,.52)}
.wallpaper-choice b{display:block!important;padding:7px 5px 3px!important;font-size:12px!important;color:#edf1ff!important}
.wallpaper-choice small{display:block;color:#7f8aa8;font-size:10px;padding:0 5px 3px}

/* Full video circles: preserve the whole recorded frame instead of cropping it. */
.video-note-wrap{
  width:min(240px,68vw)!important;
  height:min(240px,68vw)!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  background:#050812!important;
  border:2px solid rgba(167,139,250,.48)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.34),0 0 30px rgba(139,92,246,.15)!important;
}
.video-note-msg{
  width:100%!important;height:100%!important;
  border:0!important;border-radius:50%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#050812!important;
  display:block!important;
}
.video-note-play{z-index:3!important;background:rgba(8,11,23,.68)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 8px 20px rgba(0,0,0,.28)!important}

/* Hard clipping for every person/avatar image. The frame stays outside the clip. */
.avatar,
.avatar img,
.avatar-wrap .avatar,
.avatar-wrap .avatar img,
.chat-item .avatar,
.chat-item .avatar img,
.msg-avatar .avatar,
.msg-avatar .avatar img,
.public-profile-avatar,
.public-profile-avatar img,
#edit-avatar-preview,
#edit-avatar-preview img,
#peer-avatar,
#peer-avatar img,
.qr-profile-avatar,
.qr-profile-avatar img{
  overflow:hidden!important;
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%)!important;
}
.avatar img,.avatar-wrap .avatar img,#peer-avatar img,.public-profile-avatar img,#edit-avatar-preview img,.qr-profile-avatar img{
  display:block!important;
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
/* Keep the online indicator visible outside the clipped avatar. */
.avatar-wrap{overflow:visible!important}
.conv-header .header-avatar-wrap{overflow:visible!important}
.conv-header .header-avatar-wrap #peer-avatar{overflow:hidden!important;clip-path:circle(50% at 50% 50%)!important}
.conv-header .header-avatar-wrap #peer-avatar img{clip-path:circle(50% at 50% 50%)!important}

/* Cleaner settings navigation and segmented controls. */
.settings-nav-item{border:1px solid transparent!important;border-radius:13px!important;min-height:40px!important;font-weight:700!important}
.settings-nav-item:hover{transform:translateX(2px)!important;border-color:rgba(255,255,255,.07)!important}
.settings-nav-item.is-active{border-color:rgba(167,139,250,.18)!important;box-shadow:0 8px 22px rgba(76,57,180,.10)!important}

@media(max-width:760px){
  .wallpaper-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wallpaper-preview{height:68px!important}
  .video-note-wrap{width:min(76vw,270px)!important;height:min(76vw,270px)!important}
}