/* HappyGram V38 — visual polish layer. No server/API changes. */
:root{
  --hg-bg:#070910;--hg-panel:rgba(15,19,31,.78);--hg-panel2:rgba(19,24,40,.86);
  --hg-border:rgba(255,255,255,.085);--hg-border2:rgba(167,139,250,.20);
  --hg-text:#f6f7ff;--hg-muted:#8f98ad;--hg-a:#7c5cff;--hg-b:#d946ef;--hg-c:#22d3ee;
  --hg-shadow:0 18px 60px rgba(0,0,0,.34);--hg-radius:18px;
}
/* Global visual rhythm */
*{box-sizing:border-box}
button,input,textarea,select{font:inherit}
button{border:0}
button,.btn,.icon-btn,.rail-btn,.bn-item,.settings-nav-item,.wallpaper-choice,.tab,.landing-ios,.landing-premium-link,.story-add,.btn-send{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease,color .18s ease}
button:not(:disabled),.btn:not(:disabled),.icon-btn:not(:disabled),.rail-btn:not(:disabled){cursor:pointer}
button:not(:disabled):active,.btn:not(:disabled):active,.icon-btn:not(:disabled):active{transform:scale(.97)}
button:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(167,139,250,.75);outline-offset:2px}

/* App shell */
.app-shell,.messenger-shell,.main-shell{background:radial-gradient(900px 520px at 70% -10%,rgba(124,92,255,.13),transparent 65%),radial-gradient(700px 500px at -10% 100%,rgba(34,211,238,.07),transparent 60%),var(--hg-bg)}
.sidebar,.chat-list,.conversation,.settings-panel,.calls-panel,.labs-panel,.modal,.drawer{border-color:var(--hg-border)!important;box-shadow:var(--hg-shadow)}
.sidebar,.chat-list,.conversation{background:linear-gradient(180deg,rgba(14,18,30,.92),rgba(8,11,19,.94))!important}

/* Unified button system */
.btn,.btn-small,.btn-primary,.btn-ghost,.btn-upload{border-radius:13px!important;min-height:40px;padding:0 15px!important;font-weight:750!important;letter-spacing:-.01em!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.btn-primary,.btn-send{background:linear-gradient(135deg,#6252f4 0%,#8b5cf6 48%,#d946ef 100%)!important;color:#fff!important;border:1px solid rgba(255,255,255,.13)!important;box-shadow:0 10px 28px rgba(124,92,255,.28),inset 0 1px rgba(255,255,255,.22)!important}
.btn-primary:hover,.btn-send:hover{transform:translateY(-1px)!important;box-shadow:0 14px 34px rgba(124,92,255,.38),inset 0 1px rgba(255,255,255,.24)!important}
.btn-ghost,.btn-small,.btn-upload{background:rgba(255,255,255,.055)!important;color:#e8ebf8!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 5px 18px rgba(0,0,0,.12)!important}
.btn-ghost:hover,.btn-small:hover,.btn-upload:hover{background:rgba(139,92,246,.13)!important;border-color:rgba(167,139,250,.25)!important;transform:translateY(-1px)!important}
.icon-btn{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.075)!important;color:#dce2f4!important;box-shadow:0 6px 18px rgba(0,0,0,.14)!important}
.icon-btn:hover{background:linear-gradient(135deg,rgba(124,92,255,.20),rgba(217,70,239,.12))!important;border-color:rgba(167,139,250,.30)!important;box-shadow:0 9px 24px rgba(76,57,180,.22)!important;transform:translateY(-1px)}
.rail-btn,.bn-item{background:transparent!important;color:#7f89a4!important;border:1px solid transparent!important;border-radius:14px!important}
.rail-btn:hover,.bn-item:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}
.rail-btn.is-active,.bn-item.is-active{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(217,70,239,.11))!important;color:#fff!important;border-color:rgba(167,139,250,.20)!important;box-shadow:0 8px 24px rgba(76,57,180,.16)!important}
.btn-send{width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important}

/* Search / fields */
input,textarea,select,.search-input,.chat-search input{background:rgba(255,255,255,.045)!important;color:var(--hg-text)!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:13px!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}
input:hover,textarea:hover,select:hover{border-color:rgba(167,139,250,.18)!important}
input:focus,textarea:focus,select:focus{border-color:rgba(139,92,246,.48)!important;box-shadow:0 0 0 4px rgba(124,92,255,.10),inset 0 1px rgba(255,255,255,.04)!important}

/* Chat list cards */
.chat-item{border:1px solid transparent!important;border-radius:16px!important;margin:3px 5px!important;background:transparent!important}
.chat-item:hover{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.05)!important;transform:translateX(2px)}
.chat-item.is-active,.chat-item.active{background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(217,70,239,.065))!important;border-color:rgba(167,139,250,.16)!important;box-shadow:0 10px 28px rgba(0,0,0,.15)!important}

/* Avatar clipping — image can never escape the mask */
.avatar,.avatar img,.avatar-wrap .avatar,.avatar-wrap .avatar img,#peer-avatar,#peer-avatar img,.public-profile-avatar,.public-profile-avatar img,#edit-avatar-preview,#edit-avatar-preview img,.msg-avatar,.msg-avatar img,.story-add-avatar{border-radius:50%!important;overflow:hidden!important;clip-path:circle(50% at 50% 50%)!important}
.avatar,.avatar-wrap .avatar,#peer-avatar,.public-profile-avatar,#edit-avatar-preview,.msg-avatar{isolation:isolate!important;position:relative!important}
.avatar img,.avatar-wrap .avatar img,#peer-avatar img,.public-profile-avatar img,#edit-avatar-preview img,.msg-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}
.avatar-wrap,.header-avatar-wrap{overflow:visible!important}
.online-dot{z-index:5!important}

/* Wallpaper selector: card-like, visual-first */
.chat-wallpaper-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;border:1px solid var(--hg-border)!important;border-radius:20px!important;padding:16px!important;box-shadow:0 18px 50px rgba(0,0,0,.20)!important}
.chat-wallpaper-head{align-items:center!important;margin-bottom:14px!important}
.chat-wallpaper-head strong{font-size:15px!important;color:#fff!important}
.chat-wallpaper-head span{color:#8993aa!important;font-size:12px!important}
.wallpaper-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
.wallpaper-choice{position:relative!important;overflow:hidden!important;padding:0!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.075)!important;color:#fff!important;text-align:left!important;box-shadow:0 8px 22px rgba(0,0,0,.15)!important}
.wallpaper-choice:hover{transform:translateY(-3px)!important;border-color:rgba(167,139,250,.35)!important;box-shadow:0 14px 32px rgba(0,0,0,.25),0 0 22px rgba(124,92,255,.10)!important}
.wallpaper-choice.is-active{border-color:rgba(167,139,250,.65)!important;box-shadow:0 0 0 2px rgba(124,92,255,.20),0 16px 34px rgba(0,0,0,.25)!important}
.wallpaper-choice.is-active:after{content:'✓';position:absolute;right:9px;top:9px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7c5cff,#d946ef);color:white;font-size:13px;font-weight:900;box-shadow:0 6px 18px rgba(124,92,255,.35)}
.wallpaper-preview{display:block!important;width:100%!important;height:96px!important;border-radius:0!important;position:relative!important;overflow:hidden!important}
.wallpaper-preview:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.22),transparent 20%),linear-gradient(145deg,rgba(255,255,255,.08),transparent 45%);mix-blend-mode:screen}
.wp-aurora{background:radial-gradient(circle at 72% 25%,#ff78cf 0 7%,transparent 24%),radial-gradient(circle at 24% 65%,#2dd4bf 0 8%,transparent 28%),linear-gradient(135deg,#111a4c,#4c1d95 48%,#07152b)}
.wp-midnight{background:radial-gradient(circle at 70% 22%,rgba(255,255,255,.55) 0 1px,transparent 2px),radial-gradient(circle at 28% 38%,rgba(255,255,255,.35) 0 1px,transparent 2px),linear-gradient(150deg,#07101e,#111b35 55%,#03050b)}
.wp-violet{background:radial-gradient(circle at 72% 28%,#f0abfc 0 5%,transparent 25%),linear-gradient(140deg,#2e1065,#7e22ce 52%,#db2777)}
.wp-grid{background:linear-gradient(rgba(125,211,252,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.10) 1px,transparent 1px),linear-gradient(135deg,#08142c,#111827);background-size:20px 20px,20px 20px,100% 100%}
.wp-bubbles{background:radial-gradient(circle at 20% 30%,rgba(34,211,238,.55) 0 10%,transparent 11%),radial-gradient(circle at 70% 65%,rgba(217,70,239,.50) 0 16%,transparent 17%),radial-gradient(circle at 78% 18%,rgba(124,92,255,.55) 0 7%,transparent 8%),#091022}
.wp-plain{background:linear-gradient(145deg,#101827,#171327 48%,#090b13)}
.wallpaper-choice b{padding:9px 11px 2px!important;font-size:12px!important;color:#f3f5ff!important}
.wallpaper-choice small{padding:0 11px 10px!important;color:#7f8aa8!important;font-size:10px!important}
.wallpaper-upload{margin-top:12px!important;border-radius:14px!important;border:1px dashed rgba(167,139,250,.28)!important;background:rgba(124,92,255,.07)!important;color:#dcd7ff!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:750!important;cursor:pointer!important}
.wallpaper-upload:hover{background:rgba(124,92,255,.13)!important;border-color:rgba(167,139,250,.48)!important}

/* Full video circles */
.video-note-wrap{width:min(280px,72vw)!important;height:min(280px,72vw)!important;aspect-ratio:1/1!important;border-radius:50%!important;overflow:hidden!important;display:grid!important;place-items:center!important;position:relative!important;background:#03050b!important;border:2px solid rgba(167,139,250,.52)!important;box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 40px rgba(124,92,255,.14)!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:#03050b!important;display:block!important}
.video-note-play{z-index:3!important;width:52px!important;height:52px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:rgba(8,10,20,.68)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 10px 30px rgba(0,0,0,.34)!important;backdrop-filter:blur(12px)!important}

/* Message bubbles */
.msg{animation:hgMsgIn .22s ease both}
@keyframes hgMsgIn{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:none}}
.msg-bubble{border-radius:17px!important;border:1px solid rgba(255,255,255,.06)!important;box-shadow:0 8px 25px rgba(0,0,0,.14)!important}
.msg.mine .msg-bubble{background:linear-gradient(135deg,rgba(98,82,244,.90),rgba(139,92,246,.82))!important}
.msg:not(.mine) .msg-bubble{background:rgba(255,255,255,.055)!important}

/* Settings / panels */
.settings-nav-item{min-height:42px!important;padding:0 13px!important;border-radius:13px!important;color:#9da6bb!important;border:1px solid transparent!important;background:transparent!important;text-align:left!important}
.settings-nav-item:hover{color:#fff!important;background:rgba(255,255,255,.045)!important;transform:translateX(2px)}
.settings-nav-item.is-active{color:#fff!important;background:linear-gradient(135deg,rgba(124,92,255,.20),rgba(217,70,239,.08))!important;border-color:rgba(167,139,250,.20)!important;box-shadow:0 8px 24px rgba(76,57,180,.14)!important}
.setting-row,.feature-card,.labs-card,.premium-card{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important}
.setting-row:hover,.feature-card:hover,.labs-card:hover{border-color:rgba(167,139,250,.16)!important;background:rgba(255,255,255,.048)!important}

/* Landing/auth */
.landing-main-btn,.landing-apk-btn,.landing-ios,.landing-premium-link,.tab{border-radius:15px!important}
.landing-main-btn:hover,.landing-apk-btn:hover,.landing-premium-link:hover{transform:translateY(-2px)!important}
.tab{background:rgba(255,255,255,.035)!important;border:1px solid transparent!important;color:#8e97ad!important}
.tab.is-active{background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(217,70,239,.10))!important;color:#fff!important;border-color:rgba(167,139,250,.20)!important;box-shadow:0 8px 22px rgba(76,57,180,.12)!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.35) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(#7c5cff,#d946ef);border-radius:99px;border:2px solid transparent;background-clip:padding-box}

@media(max-width:900px){.wallpaper-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.wallpaper-preview{height:78px!important}.video-note-wrap{width:min(78vw,280px)!important;height:min(78vw,280px)!important}.icon-btn{width:36px!important;height:36px!important;min-width:36px!important}.btn,.btn-small{min-height:38px!important}}
/* HappyGram V39 — premium interaction layer */
:root{--hg-accent:#7c5cff;--hg-accent2:#ec4fd8;--hg-surface:rgba(18,22,38,.78)}
button,.btn,.btn-small,.icon-btn,.call-round,.device-choice,.tab-btn,input,textarea,select{transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,opacity .18s ease!important}
button:not(:disabled):hover,.btn:not(:disabled):hover,.btn-small:not(:disabled):hover,.icon-btn:not(:disabled):hover,.call-round:not(:disabled):hover,.device-choice:hover{transform:translateY(-1px)}
button:active,.btn:active,.btn-small:active,.icon-btn:active,.call-round:active{transform:translateY(0) scale(.97)!important}
button:focus-visible,.btn:focus-visible,.icon-btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(167,139,250,.85)!important;outline-offset:2px!important}
.btn,.btn-small{border:1px solid rgba(255,255,255,.08)!important;background:linear-gradient(135deg,rgba(124,92,255,.92),rgba(236,79,216,.78))!important;box-shadow:0 10px 28px rgba(85,55,190,.22)!important}
.btn:not(.btn-primary),.btn-small:not(.btn-primary){background:rgba(255,255,255,.055)!important;box-shadow:0 8px 24px rgba(0,0,0,.14)!important}
.icon-btn,.call-round{border:1px solid rgba(255,255,255,.09)!important;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.07)!important;backdrop-filter:blur(14px)!important}
.avatar,.avatar img,.avatar-wrap .avatar,.avatar-wrap .avatar img,#peer-avatar,#peer-avatar img,.public-profile-avatar,.public-profile-avatar img,#edit-avatar-preview,#edit-avatar-preview img,.msg-avatar,.msg-avatar img,.story-add-avatar{contain:paint!important;overflow:hidden!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,.msg-avatar img{object-fit:cover!important;transform:none!important}
.video-note-wrap{box-sizing:border-box!important;overflow:hidden!important;border:2px solid rgba(167,139,250,.65)!important;background:radial-gradient(circle at 35% 25%,rgba(124,92,255,.25),#050712 65%)!important;box-shadow:0 18px 60px rgba(0,0,0,.45),0 0 42px rgba(124,92,255,.16)!important}
.video-note-msg{object-fit:contain!important;background:#050712!important;transform:none!important}
.call-card{border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(145deg,rgba(18,22,38,.92),rgba(10,12,22,.92))!important;box-shadow:0 30px 100px rgba(0,0,0,.52),0 0 70px rgba(124,92,255,.14)!important}
.call-video{object-fit:contain!important;background:#050712!important}
.call-local-video{object-fit:cover!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 12px 35px rgba(0,0,0,.4)!important}
#btn-call-diagnostics{font-size:18px}
.wallpaper-preview,.wallpaper-card,.wallpaper-item{overflow:hidden!important;border-radius:16px!important}
.wallpaper-preview img,.wallpaper-card img,.wallpaper-item img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}