/* HappyGram V43 — complete visual redesign
   Keeps existing HTML/API/functionality and replaces the visual language.
*/
:root{
  --hg-bg:#05070d;
  --hg-panel:#0b0f19;
  --hg-panel-2:#0f1420;
  --hg-card:rgba(16,21,34,.82);
  --hg-card-2:rgba(20,25,41,.72);
  --hg-line:rgba(255,255,255,.075);
  --hg-line-strong:rgba(255,255,255,.13);
  --hg-text:#f6f7fb;
  --hg-muted:#8993aa;
  --hg-soft:#b8c0d2;
  --hg-a:#7c5cff;
  --hg-b:#b65cff;
  --hg-c:#20d7c7;
  --hg-pink:#f05cff;
  --hg-shadow:0 30px 90px rgba(0,0,0,.45);
  --hg-radius:24px;
}
*{box-sizing:border-box}
html,body{background:var(--hg-bg)!important;color:var(--hg-text)!important}
body{font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.01em;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-20%;z-index:-4;background:radial-gradient(circle at 15% 10%,rgba(124,92,255,.18),transparent 25%),radial-gradient(circle at 88% 12%,rgba(32,215,199,.12),transparent 22%),radial-gradient(circle at 72% 85%,rgba(240,92,255,.10),transparent 28%),linear-gradient(135deg,#05070d 0%,#080b13 48%,#05070d 100%);pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
button,input,textarea,select{font:inherit}
button{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(124,92,255,.75);outline-offset:2px}

/* LANDING / AUTH */
.landing-screen{padding:28px!important}
.landing-topbar{max-width:1440px;margin:0 auto 20px!important;height:64px;padding:0 16px!important;border:1px solid var(--hg-line)!important;border-radius:22px!important;background:rgba(8,11,19,.68)!important;backdrop-filter:blur(24px)!important;box-shadow:0 18px 60px rgba(0,0,0,.22)!important}
.brand.landing-brand{gap:10px!important;font-weight:800!important;letter-spacing:-.04em!important}
.brand.landing-brand img{width:38px!important;height:38px!important;border-radius:13px!important;box-shadow:0 0 35px rgba(124,92,255,.35)!important}
.landing-hero{max-width:1440px!important;margin:0 auto!important;border:1px solid var(--hg-line)!important;border-radius:36px!important;background:linear-gradient(135deg,rgba(15,19,31,.94),rgba(9,12,21,.76))!important;box-shadow:var(--hg-shadow)!important;overflow:hidden!important}
.landing-hero:before{background:radial-gradient(circle at 72% 40%,rgba(124,92,255,.18),transparent 28%),radial-gradient(circle at 88% 75%,rgba(32,215,199,.12),transparent 25%)!important}
.landing-copy h1{font-size:clamp(48px,7vw,94px)!important;line-height:.92!important;letter-spacing:-.065em!important;font-weight:900!important}
.landing-copy p{color:#9da7bb!important;max-width:610px!important;font-size:16px!important;line-height:1.7!important}
.landing-kicker{color:#bdaeff!important;letter-spacing:.18em!important;font-weight:800!important}
.landing-main-btn,.landing-apk-btn{height:52px!important;border-radius:16px!important;padding:0 22px!important;font-weight:800!important;border:1px solid rgba(255,255,255,.08)!important}
.landing-main-btn{background:linear-gradient(135deg,#7659ff,#a54cff 55%,#ec55d9)!important;box-shadow:0 16px 40px rgba(124,92,255,.28)!important}
.landing-apk-btn{background:rgba(255,255,255,.055)!important;color:#f7f8ff!important}
.landing-main-btn:hover,.landing-apk-btn:hover{transform:translateY(-2px)!important}
.landing-ios{border:1px solid var(--hg-line)!important;border-radius:18px!important;background:rgba(255,255,255,.035)!important;color:#dfe4f1!important;padding:14px 18px!important}
.landing-feature-grid{gap:14px!important}
.landing-feature-grid article,.landing-premium-card{border:1px solid var(--hg-line)!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;box-shadow:0 20px 55px rgba(0,0,0,.18)!important}

.card-auth,.card-step{border:1px solid var(--hg-line)!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(15,20,32,.94),rgba(8,11,19,.91))!important;box-shadow:var(--hg-shadow)!important}
.tabs{padding:5px!important;border-radius:15px!important;background:rgba(255,255,255,.035)!important}
.tab{border-radius:11px!important;color:#818ba0!important}
.tab.is-active{background:linear-gradient(135deg,rgba(124,92,255,.9),rgba(176,82,255,.85))!important;color:#fff!important;box-shadow:0 8px 24px rgba(124,92,255,.22)!important}
.field input,.field select,.field textarea,.input-with-icon input{border:1px solid var(--hg-line)!important;background:rgba(255,255,255,.035)!important;border-radius:15px!important;color:#f6f7fb!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.field input:focus,.field select:focus,.field textarea:focus,.input-with-icon input:focus{border-color:rgba(124,92,255,.55)!important;background:rgba(124,92,255,.045)!important;box-shadow:0 0 0 4px rgba(124,92,255,.08)!important}
.btn-primary{border:0!important;border-radius:15px!important;background:linear-gradient(135deg,#7358ff,#a44eff 55%,#eb5bd8)!important;box-shadow:0 12px 30px rgba(124,92,255,.23)!important;font-weight:800!important}
.btn-primary:hover{transform:translateY(-2px)!important;filter:saturate(1.08)!important}

/* APP SHELL — completely new desktop composition */
#screen-app{padding:16px!important;align-items:stretch!important;justify-content:stretch!important}
.app-shell{width:min(1640px,calc(100vw - 32px))!important;height:min(920px,calc(100vh - 32px))!important;max-width:none!important;display:grid!important;grid-template-columns:78px 340px minmax(0,1fr)!important;gap:10px!important;padding:10px!important;border:1px solid rgba(255,255,255,.085)!important;border-radius:30px!important;background:linear-gradient(145deg,rgba(10,14,24,.96),rgba(6,9,16,.92))!important;box-shadow:0 45px 120px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.04)!important;backdrop-filter:blur(32px)!important;-webkit-backdrop-filter:blur(32px)!important;overflow:hidden!important}
.rail{width:auto!important;border:1px solid var(--hg-line)!important;border-radius:22px!important;background:linear-gradient(180deg,rgba(18,23,38,.82),rgba(8,12,20,.88))!important;padding:13px 8px!important;gap:8px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.rail-brand{width:46px!important;height:46px!important;margin:0 auto 16px!important;border-radius:15px!important;box-shadow:0 0 32px rgba(124,92,255,.25)!important}
.rail-btn{width:50px!important;height:50px!important;border:1px solid transparent!important;border-radius:16px!important;color:#717d96!important;background:transparent!important;position:relative!important}
.rail-btn:hover{color:#fff!important;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.06)!important;transform:translateY(-1px)!important}
.rail-btn.is-active{color:#fff!important;background:linear-gradient(145deg,rgba(124,92,255,.33),rgba(191,78,255,.13))!important;border-color:rgba(164,119,255,.28)!important;box-shadow:0 12px 30px rgba(124,92,255,.16),inset 0 1px 0 rgba(255,255,255,.08)!important}
.rail-btn.is-active:after{content:"";position:absolute;right:-9px;top:14px;width:3px;height:22px;border-radius:3px;background:linear-gradient(#8f75ff,#d855ff);box-shadow:0 0 14px rgba(168,85,247,.8)}
.sidebar{min-width:0!important;border:1px solid var(--hg-line)!important;border-radius:22px!important;background:linear-gradient(180deg,rgba(14,19,31,.88),rgba(8,12,20,.86))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;overflow:hidden!important}
.sidebar-top{padding:17px 16px 12px!important}
.me{padding:9px!important;border:1px solid transparent!important;border-radius:17px!important;transition:.18s ease!important}
.me:hover{background:rgba(255,255,255,.045)!important;border-color:var(--hg-line)!important}
.search-new{margin:5px 14px 14px!important}
.search-new input{height:46px!important;border:1px solid var(--hg-line)!important;border-radius:15px!important;background:rgba(255,255,255,.035)!important;color:#fff!important;padding:0 15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.search-new input:focus{border-color:rgba(124,92,255,.48)!important;box-shadow:0 0 0 4px rgba(124,92,255,.07)!important}
.story-strip{padding:0 14px 10px!important}
.story-add{width:100%!important;border:1px solid var(--hg-line)!important;border-radius:17px!important;background:linear-gradient(135deg,rgba(124,92,255,.10),rgba(255,255,255,.025))!important;color:#e8ebf4!important;padding:10px!important}
.story-add:hover{border-color:rgba(164,119,255,.3)!important;transform:translateY(-1px)!important}
.chat-list{padding:2px 10px 16px!important;overflow:auto!important}
.chat-item{border:1px solid transparent!important;border-radius:18px!important;padding:11px!important;margin:3px 0!important;background:transparent!important}
.chat-item:hover{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.055)!important;transform:none!important}
.chat-item.is-active{background:linear-gradient(110deg,rgba(124,92,255,.19),rgba(32,215,199,.035))!important;border-color:rgba(151,112,255,.22)!important;box-shadow:inset 3px 0 0 #8a6cff,0 10px 30px rgba(0,0,0,.12)!important}
.chat-item-name{font-size:13px!important;font-weight:800!important}.chat-item-preview{color:#7f899f!important}

/* CONVERSATION */
.conversation{min-width:0!important;border:1px solid var(--hg-line)!important;border-radius:22px!important;overflow:hidden!important;background:#070a12!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.conversation:before{opacity:.16!important;background-size:38px 38px!important}
.conv-header{height:76px!important;min-height:76px!important;padding:0 17px!important;border:0!important;border-bottom:1px solid var(--hg-line)!important;background:rgba(8,11,19,.72)!important;backdrop-filter:blur(24px)!important;box-shadow:0 8px 30px rgba(0,0,0,.12)!important}
.conv-header-left{min-width:0!important}.conv-header-info{min-width:0!important}
.peer-nickname{font-weight:850!important;letter-spacing:-.025em!important}.peer-meta{font-size:11px!important}
.conv-header-actions{gap:6px!important}.conv-header-actions .icon-btn{width:42px!important;height:42px!important;flex:0 0 42px!important;border:1px solid var(--hg-line)!important;border-radius:14px!important;background:rgba(255,255,255,.035)!important;color:#a9b2c7!important}
.conv-header-actions .icon-btn:hover{background:linear-gradient(145deg,rgba(124,92,255,.18),rgba(255,255,255,.04))!important;border-color:rgba(151,112,255,.3)!important;color:#fff!important;box-shadow:0 10px 24px rgba(0,0,0,.2)!important;transform:translateY(-1px)!important}
.messages{padding:28px clamp(20px,5vw,84px)!important;scrollbar-width:thin!important;scrollbar-color:rgba(124,92,255,.35) transparent!important}
.messages::-webkit-scrollbar{width:7px}.messages::-webkit-scrollbar-thumb{background:rgba(124,92,255,.35);border-radius:20px}
.composer{margin:12px 16px 16px!important;padding:7px!important;border:1px solid var(--hg-line)!important;border-radius:21px!important;background:rgba(12,16,27,.86)!important;box-shadow:0 20px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;gap:6px!important}
.composer input{height:48px!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0 9px!important;color:#f7f8fc!important}
.composer input::placeholder{color:#657087!important}
.composer .icon-btn{width:42px!important;height:42px!important;border:1px solid transparent!important;border-radius:14px!important;background:transparent!important;color:#8792aa!important}
.composer .icon-btn:hover{background:rgba(255,255,255,.055)!important;color:#fff!important}
.btn-send{width:48px!important;height:48px!important;border:0!important;border-radius:16px!important;background:linear-gradient(135deg,#745cff,#b04dff 58%,#f05bd5)!important;box-shadow:0 12px 30px rgba(124,92,255,.30)!important}
.btn-send:hover{transform:translateY(-2px) scale(1.02)!important;filter:none!important}

/* MESSAGE SURFACES — modern cards instead of old bubbles */
.msg{filter:drop-shadow(0 10px 22px rgba(0,0,0,.12))}
.msg:not(.own){background:rgba(20,25,39,.82)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:18px 18px 18px 6px!important;backdrop-filter:blur(14px)!important}
.msg.own{background:linear-gradient(135deg,rgba(105,77,240,.96),rgba(161,70,238,.94))!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:18px 18px 6px 18px!important;box-shadow:0 12px 30px rgba(100,70,230,.18)!important}
.msg .msg-time{opacity:.72!important}.msg:hover{transform:translateY(-1px)!important}
.msg-image{border-radius:15px!important}

/* UNIVERSAL AVATAR SYSTEM */
.avatar-wrap,.chat-item .avatar-wrap,.header-avatar-wrap,.msg-avatar,.public-profile-avatar,#me-avatar,#edit-avatar-preview{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;display:grid!important;place-items:center!important;position:relative!important;border-radius:50%!important;overflow:hidden!important;flex:0 0 46px!important;isolation:isolate!important}
.avatar-wrap:before,.chat-item .avatar-wrap:before,.header-avatar-wrap:before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:linear-gradient(135deg,rgba(124,92,255,.9),rgba(32,215,199,.45),rgba(240,92,255,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:0;pointer-events:none}
.avatar,.avatar img,#me-avatar,#me-avatar img,#peer-avatar,#peer-avatar img,.chat-item .avatar img,.msg-avatar img,.public-profile-avatar img,#edit-avatar-preview img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;display:block!important;border-radius:50%!important;overflow:hidden!important;object-fit:cover!important;object-position:50% 50%!important;margin:0!important;padding:0!important;transform:none!important;position:relative!important;z-index:1!important}
.header-avatar-wrap{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;flex-basis:48px!important}
.header-avatar-wrap .online-dot{z-index:3!important;right:1px!important;bottom:1px!important}

/* PANELS / MODALS / SETTINGS */
.panel-overlay{backdrop-filter:blur(16px)!important;background:rgba(2,4,9,.68)!important}
.panel-card{border:1px solid var(--hg-line-strong)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(15,20,32,.97),rgba(7,10,18,.97))!important;box-shadow:0 40px 120px rgba(0,0,0,.58)!important}
.panel-header{padding:22px 24px!important;border-bottom:1px solid var(--hg-line)!important}
.panel-header h2{font-size:24px!important;letter-spacing:-.04em!important}
.settings-layout{gap:14px!important;padding:14px!important}
.settings-nav{border:1px solid var(--hg-line)!important;border-radius:20px!important;background:rgba(255,255,255,.025)!important;padding:7px!important}
.settings-nav-item{border:0!important;border-radius:13px!important;color:#8590a7!important;background:transparent!important;text-align:left!important}
.settings-nav-item:hover{background:rgba(255,255,255,.045)!important;color:#fff!important}
.settings-nav-item.is-active{background:linear-gradient(135deg,rgba(124,92,255,.23),rgba(185,76,255,.10))!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important}
.settings-content{border:1px solid var(--hg-line)!important;border-radius:20px!important;background:rgba(255,255,255,.018)!important;padding:20px!important}
.setting-row,.choice-card,.chat-wallpaper-card,.feature-grid>*,.mini-list,.translation-grid{border-color:var(--hg-line)!important;background:rgba(255,255,255,.025)!important;border-radius:17px!important}
.choice-card:hover,.setting-row:hover{background:rgba(124,92,255,.055)!important;border-color:rgba(124,92,255,.2)!important}
.switch span{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
.switch input:checked+span{background:linear-gradient(135deg,#765cff,#b24fff)!important;box-shadow:0 8px 24px rgba(124,92,255,.24)!important}

/* WALLPAPER PICKER */
.wallpaper-chat-panel{border:1px solid var(--hg-line-strong)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(16,21,34,.98),rgba(7,10,18,.98))!important;box-shadow:0 40px 120px rgba(0,0,0,.6)!important}
.wallpaper-choice{border:1px solid var(--hg-line)!important;border-radius:18px!important;background:rgba(255,255,255,.025)!important;padding:6px!important;overflow:hidden!important}
.wallpaper-choice:hover{border-color:rgba(151,112,255,.35)!important;transform:translateY(-2px)!important;box-shadow:0 15px 35px rgba(0,0,0,.22)!important}
.wallpaper-choice.is-active{border-color:rgba(168,126,255,.65)!important;box-shadow:0 0 0 2px rgba(124,92,255,.15),0 16px 35px rgba(124,92,255,.12)!important}
.wallpaper-preview{border-radius:13px!important;overflow:hidden!important}
.wallpaper-upload-main{border:1px dashed rgba(151,112,255,.35)!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(32,215,199,.04))!important}

/* CALL / LABS / GIFT / PREMIUM cards */
.call-card,.labs-card,.gift-card,.premium-card,.modal-card,.feature-card{border:1px solid var(--hg-line)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(17,22,36,.94),rgba(8,11,19,.94))!important;box-shadow:0 24px 70px rgba(0,0,0,.34)!important}
.icon-btn,.btn,.choice-card,.settings-nav-item,.wallpaper-scope-btn,.wallpaper-choice,.landing-ios,.story-add{cursor:pointer!important}
.icon-btn{border:1px solid var(--hg-line)!important;background:rgba(255,255,255,.03)!important;color:#8994ab!important;border-radius:14px!important}
.icon-btn:hover{border-color:rgba(151,112,255,.32)!important;background:rgba(124,92,255,.09)!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.18)!important}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(124,92,255,.32) transparent}
*::-webkit-scrollbar{width:7px;height:7px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:rgba(124,92,255,.30);border-radius:99px}

/* MOBILE: keep the new language without collapsing the UI */
@media(max-width:980px){
  #screen-app{padding:0!important}
  .app-shell{width:100vw!important;height:100vh!important;border-radius:0!important;padding:7px!important;grid-template-columns:62px minmax(0,1fr)!important;gap:7px!important}
  .rail{border-radius:19px!important}.rail-btn{width:44px!important;height:44px!important}.rail-brand{width:40px!important;height:40px!important}
  .sidebar{position:absolute!important;left:69px!important;top:7px!important;bottom:7px!important;width:min(340px,calc(100vw - 76px))!important;z-index:20!important;transform:translateX(0)!important;box-shadow:30px 0 80px rgba(0,0,0,.45)!important}
  .conversation{grid-column:2!important;border-radius:19px!important}
  .conv-header-actions .icon-btn{width:38px!important;height:38px!important;flex-basis:38px!important}
}
@media(max-width:680px){
  .app-shell{grid-template-columns:1fr!important;padding:0!important;gap:0!important}
  .rail{position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;height:66px!important;width:auto!important;z-index:100!important;display:flex!important;flex-direction:row!important;justify-content:space-around!important;align-items:center!important;border-radius:22px!important;background:rgba(12,16,28,.91)!important;backdrop-filter:blur(24px)!important;box-shadow:0 20px 60px rgba(0,0,0,.45)!important}
  .rail-brand{display:none!important}.rail-btn{width:44px!important;height:44px!important}.rail-btn.is-active:after{right:auto;top:auto;bottom:-5px;left:50%;width:18px;height:3px;transform:translateX(-50%)}
  .sidebar{position:fixed!important;left:8px!important;top:8px!important;bottom:84px!important;width:calc(100vw - 16px)!important;z-index:80!important;border-radius:22px!important}
  .conversation{grid-column:1!important;border-radius:0!important;border:0!important}
  .conv-header{height:68px!important;min-height:68px!important;padding:0 10px!important}.conv-header-actions{gap:3px!important}.conv-header-actions .icon-btn{width:34px!important;height:34px!important;flex-basis:34px!important}
  .messages{padding:18px 12px 12px!important}.composer{margin:8px 8px 82px!important;border-radius:18px!important}.composer .icon-btn{width:38px!important;height:38px!important}.btn-send{width:44px!important;height:44px!important}
  .msg{max-width:88vw!important}
  .landing-screen{padding:12px!important}.landing-topbar{height:56px!important}.landing-hero{border-radius:26px!important}.landing-copy h1{font-size:52px!important}
  .wallpaper-grid-chat{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}