:root{
  --bg-base:#0B0D12;
  --bg-secondary:#12151C;
  --violet:#377DFF;
  --pink:#5C97FF;
  --cyan:#377DFF;
  --text-primary:#F5F7FB;
  --text-muted:#8B93A7;
  --glass-bg:rgba(255,255,255,0.045);
  --glass-bg-strong:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.09);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{height:100%;max-width:100%;overflow-x:hidden;}
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:'Manrope',system-ui,sans-serif;
  overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

h1{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(24px,4vw,32px);
  margin:0 0 6px;
  letter-spacing:-0.01em;
}

/* ---------- фон: аврора ---------- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg-base);}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.4;}
.b1{width:60vmax;height:60vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,var(--violet),transparent 70%);animation:drift1 26s ease-in-out infinite;}
.b2{width:55vmax;height:55vmax;right:-22vmax;top:-10vmax;background:radial-gradient(circle,var(--pink),transparent 70%);animation:drift2 30s ease-in-out infinite;}
.b3{width:50vmax;height:50vmax;left:20vw;bottom:-30vmax;background:radial-gradient(circle,#2a1f5e,transparent 70%);animation:drift3 34s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(6vw,4vh)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-5vw,6vh)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(4vw,-5vh)}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- экраны ---------- */
.screen{
  position:relative;z-index:1;
  min-height:100dvh;
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
}
.screen[data-active="true"]{display:flex;}

.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

.card-auth,.card-step{
  width:100%;max-width:420px;
  border-radius:var(--radius-lg);
  padding:38px 34px;
  animation:cardIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(18px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.brand-mark{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px;
  background:linear-gradient(135deg,var(--violet),var(--pink));
  box-shadow:0 8px 24px rgba(139,92,246,.4);
}
.brand-mark.big{width:72px;height:72px;font-size:24px;border-radius:22px;margin-bottom:16px;}
.brand-name{font-family:'Unbounded',sans-serif;font-weight:600;font-size:19px;letter-spacing:-0.01em;}

.tabs{display:flex;gap:6px;background:rgba(255,255,255,.05);padding:4px;border-radius:14px;margin-bottom:22px;}
.tab{
  flex:1;border:none;background:transparent;color:var(--text-muted);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
  padding:10px 0;border-radius:11px;cursor:pointer;transition:.2s;
}
.tab.is-active{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;}

.form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field>span{font-size:13px;color:var(--text-muted);font-weight:600;}
.field input, .input-at{
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  color:var(--text-primary);
  font-family:'Manrope',sans-serif;font-size:15px;
  outline:none;transition:border-color .2s,background .2s;
}
.input-with-icon{position:relative;display:flex;}
.input-with-icon input{flex:1;padding-right:44px;}
.eye-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;background:transparent;color:var(--text-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:color .15s,background .15s;
}
.eye-toggle:hover{color:var(--text-primary);background:rgba(255,255,255,.06);}
.eye-toggle.is-active{color:var(--violet);}
.field input:focus{border-color:var(--violet);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(139,92,246,.18);}
.input-at{display:flex;align-items:center;gap:2px;padding-left:14px;}
.input-at span{color:var(--text-muted);font-weight:700;}
.input-at input{border:none;background:transparent;padding:0 0 0 2px;flex:1;}
.input-at:focus-within{border-color:var(--violet);}
#username-status{min-height:16px;font-size:12.5px;color:var(--text-muted);}
#username-status.ok{color:#4ADE80;}
#username-status.bad{color:#FB7185;}

.error{color:#FB7185;font-size:13.5px;margin:0;}

.btn{
  border:none;border-radius:var(--radius-sm);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;
  padding:14px 18px;cursor:pointer;transition:transform .15s, box-shadow .2s, opacity .15s, filter .15s;
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:scale(.98);}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--pink));
  box-shadow:0 10px 28px rgba(139,92,246,.35);
}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}

.step-eyebrow{color:var(--text-muted);font-size:13px;font-weight:700;margin:0 0 8px;}
.step-hint{color:var(--text-muted);font-size:14px;line-height:1.5;margin:0 0 24px;}

.avatar-upload-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.btn-upload{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;font-weight:700;
}
.btn-upload:hover{border-color:var(--violet);}
#avatar-upload-status{font-size:12px;color:var(--text-muted);}
.avatar-photo-preview{
  width:88px;height:88px;border-radius:26px;object-fit:cover;
  border:2px solid var(--violet);margin-bottom:6px;
}

.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
.avatar-opt{
  aspect-ratio:1;border-radius:18px;border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;transition:.15s;
}
.avatar-opt.is-selected{border-color:#fff;transform:scale(1.06);}

.avatar{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar.sm{width:38px;height:38px;font-size:16px;border-radius:11px;}
.avatar.big{width:88px;height:88px;font-size:34px;border-radius:26px;}
.avatar-wrap{position:relative;display:inline-flex;flex-shrink:0;}
.online-dot{
  position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:#4ADE80;border:2.5px solid var(--bg-base);
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:onlinePulse 2.2s ease-out infinite;
}
@keyframes onlinePulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55);}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}

/* ---------- тики прочтения ---------- */
.msg-ticks{opacity:.75;margin-left:4px;letter-spacing:-2px;}
.msg-ticks.read{opacity:1;color:#4ADE80;}

/* ---------- реакции ---------- */
.msg-reactions{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;}
.reaction-pill{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.10);border:1px solid var(--glass-border);
  border-radius:999px;padding:2px 8px;font-size:12px;cursor:pointer;
}
.reaction-pill.mine{border-color:var(--violet);background:rgba(139,92,246,.25);}
.reaction-picker{
  position:absolute;display:flex;gap:4px;padding:6px 8px;border-radius:999px;
  background:var(--bg-secondary);border:1px solid var(--glass-border);
  box-shadow:0 14px 34px rgba(0,0,0,.45);z-index:20;
}
.reaction-picker span{cursor:pointer;font-size:18px;padding:2px;transition:transform .1s;}
.reaction-picker span:hover{transform:scale(1.25);}
.msg{position:relative;}

/* ---------- статус / typing ---------- */
.typing-text{color:var(--cyan);}
.conv-header-info{min-width:0;flex:1;}
.conv-header-actions{display:flex;gap:8px;margin-left:auto;}
.call-btn{font-size:16px;}

/* ---------- приложение ---------- */
#screen-app{padding:0;}
.app-shell{
  width:100%;height:100dvh;max-width:none;
  border:none;border-radius:0;
  box-shadow:none;
  display:grid;grid-template-columns:72px 360px 1fr;overflow:hidden;
}

.rail{
  border-right:1px solid var(--glass-border);
  background:rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0;gap:6px;
}
.rail-brand{
  width:42px;height:42px;border-radius:13px;margin-bottom:20px;
  background:linear-gradient(135deg,var(--violet),#2864d4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;color:#fff;
  box-shadow:0 8px 24px rgba(55,125,255,.35);
}
.rail-btn{
  width:44px;height:44px;border-radius:12px;border:none;background:transparent;
  color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s,background .2s,transform .2s;
}
.rail-btn:hover{color:var(--text-primary);background:rgba(255,255,255,.05);}
.rail-btn:active{transform:scale(.92);}
.rail-btn.is-active{color:var(--violet);background:rgba(55,125,255,.14);}

.sidebar{
  border-right:1px solid var(--glass-border);
  display:flex;flex-direction:column;min-height:0;
  background:rgba(255,255,255,.02);
}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;}
.me{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer;border-radius:12px;padding:4px;transition:background .15s;}
.me:hover{background:rgba(255,255,255,.05);}
.me-nickname{font-weight:700;font-size:14.5px;}
.me-username{color:var(--text-muted);font-size:12.5px;}
.icon-btn{
  width:36px;height:36px;border-radius:11px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);color:var(--text-muted);cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .15s, border-color .15s, color .15s;
}
.icon-btn:hover{color:var(--text-primary);border-color:var(--violet);transform:translateY(-1px);}
.icon-btn:active{transform:scale(.94);}
#btn-logout:hover{color:#FB7185;border-color:#FB7185;}

.search-new{padding:0 18px 14px;position:relative;}
.search-new input{
  width:100%;padding:11px 14px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
  color:var(--text-primary);font-family:'Manrope',sans-serif;font-size:14px;outline:none;
}
.search-new input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.16);}
.search-results{
  position:absolute;left:18px;right:18px;top:calc(100% - 4px);z-index:5;
  background:var(--bg-secondary);border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);overflow:hidden;display:none;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.search-results.show{display:block;}
.search-result{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-size:13.5px;}
.search-result:hover{background:rgba(255,255,255,.06);}

.chat-list{flex:1;overflow-y:auto;padding:4px 10px 14px;}
.empty-hint{color:var(--text-muted);font-size:13px;padding:14px 10px;line-height:1.5;}
.chat-item{
  display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:14px;
  cursor:pointer;margin-bottom:2px;
  transition:background .18s, transform .15s;
}
.chat-item:hover{background:rgba(255,255,255,.06);transform:translateX(2px);}
.chat-item.is-active{background:rgba(139,92,246,.16);}
.chat-item-body{min-width:0;flex:1;}
.chat-item-top{display:flex;justify-content:space-between;gap:6px;}
.chat-item-name{font-weight:700;font-size:14px;}
.chat-item-time{color:var(--text-muted);font-size:11px;flex-shrink:0;}
.chat-item-preview{color:var(--text-muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.unread-dot{
  min-width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--pink));
  animation:onlinePulse 2s ease-out infinite;
}

.conversation{position:relative;display:flex;flex-direction:column;min-height:0;}
.conversation-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px;color:var(--text-muted);gap:4px;
}
.conversation-empty p{max-width:280px;font-size:14px;line-height:1.6;margin:0;}
.conversation-active{display:flex;flex-direction:column;min-height:0;height:100%;}

.conv-header{
  display:flex;align-items:center;gap:12px;padding:16px 22px;
  border-bottom:1px solid var(--glass-border);
}
#btn-back{display:none;}
@media (max-width:760px){#btn-back{display:flex;align-items:center;justify-content:center;}}
.peer-nickname{font-weight:700;font-size:15px;}
.peer-username{color:var(--text-muted);font-size:12.5px;}

.messages{
  flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:10px;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
.msg{
  max-width:70%;padding:11px 15px;border-radius:18px;font-size:14.5px;line-height:1.45;
  word-wrap:break-word;overflow-wrap:anywhere;
  animation:msgIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.msg.mine{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--violet),#2864d4);
  color:#fff;border-bottom-right-radius:6px;
}
.msg.theirs{
  align-self:flex-start;
  background:rgba(255,255,255,.07);border:1px solid var(--glass-border);
  border-bottom-left-radius:6px;
}
.msg.mine::after{
  content:'';position:absolute;bottom:0;right:-7px;width:12px;height:12px;
  background:linear-gradient(135deg,var(--violet),#2864d4);
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.msg.theirs::after{
  content:'';position:absolute;bottom:0;left:-7px;width:12px;height:12px;
  background:rgba(255,255,255,.07);border-left:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.msg.media-msg::after{display:none;}
.msg-time{display:block;font-size:10.5px;opacity:.65;margin-top:4px;}
.msg.media-msg{padding:6px;background:rgba(255,255,255,.06);}
.msg.media-msg.mine{background:rgba(139,92,246,.18);}
.msg-image{max-width:260px;width:100%;max-height:320px;border-radius:14px;display:block;cursor:pointer;object-fit:cover;}
.msg-image-caption{padding:8px 10px 2px;}
.voice-player{display:flex;align-items:center;gap:8px;padding:8px 12px;min-width:0;max-width:100%;width:min(220px,60vw);}
.voice-play-btn{
  width:34px;height:34px;border-radius:50%;border:none;flex-shrink:0;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;
}
.voice-wave{flex:1;min-width:0;height:22px;display:flex;align-items:center;gap:2px;overflow:hidden;}
.voice-wave span{width:3px;border-radius:2px;background:rgba(255,255,255,.5);}
.voice-duration{font-size:11.5px;opacity:.8;flex-shrink:0;}
.video-note-msg{
  width:min(180px,55vw);height:min(180px,55vw);border-radius:50%;object-fit:cover;display:block;cursor:pointer;
  border:2px solid rgba(255,255,255,.2);max-width:100%;
}

/* ---------- запись голосового/кружка ---------- */
.recorder-bar{
  display:flex;align-items:center;gap:10px;padding:14px 22px;
  border-top:1px solid var(--glass-border);background:rgba(239,68,68,.08);
}
.recorder-dot{width:10px;height:10px;border-radius:50%;background:#EF4444;animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.recorder-hint{color:var(--text-muted);font-size:13px;margin-left:6px;}
.recorder-actions{margin-left:auto;display:flex;gap:8px;}
.video-note-preview{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:220px;height:220px;
  border-radius:50%;object-fit:cover;border:3px solid var(--violet);
  box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:60;
}

.attach-btn,.mic-btn,.cam-btn{font-size:18px;flex-shrink:0;}


/* ---------- панели: звонки и настройки ---------- */
.panel-overlay{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,5,16,.72);backdrop-filter:blur(12px) saturate(140%);
}
.panel-overlay[hidden]{display:none;}
.panel-card{
  width:min(900px,100%);max-height:min(760px,calc(100dvh - 48px));overflow:hidden;
  border-radius:30px;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:28px 30px 22px;border-bottom:1px solid var(--glass-border);}
.panel-header h2{margin:4px 0 4px;font-family:'Unbounded',sans-serif;font-size:21px;letter-spacing:-.03em;}
.panel-header p{margin:0;color:var(--text-muted);font-size:13px;}
.panel-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--violet);font-weight:800;}
.panel-close{flex-shrink:0;}
.panel-loading,.panel-empty{padding:50px 24px;text-align:center;color:var(--text-muted);}
.panel-empty span{display:block;font-size:34px;margin-bottom:10px;}
.panel-empty b{display:block;color:var(--text-primary);margin-bottom:5px;}
.panel-empty p{margin:0;font-size:13px;}
.calls-list{padding:12px;overflow:auto;}
.call-history-item{
  width:100%;display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid transparent;
  background:transparent;color:var(--text-primary);border-radius:18px;text-align:left;cursor:pointer;
  transition:background .16s,border-color .16s,transform .16s;
}
.call-history-item:hover{background:rgba(255,255,255,.055);border-color:var(--glass-border);}
.call-history-item:active{transform:scale(.99);}
.call-history-item .avatar{flex-shrink:0;}
.call-history-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.call-history-main strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.call-history-main span,.call-history-meta small{font-size:12px;color:var(--text-muted);}
.call-history-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap;}
.call-history-meta b{font-size:11.5px;font-weight:700;}
.call-history-item.is-missed .call-history-meta b{color:#fb7185;}
.settings-layout{display:grid;grid-template-columns:190px 1fr;min-height:450px;overflow:hidden;}
.settings-nav{padding:18px;border-right:1px solid var(--glass-border);}
.settings-nav-item{
  width:100%;padding:12px 13px;margin-bottom:5px;border:0;border-radius:13px;background:transparent;
  color:var(--text-muted);text-align:left;font:600 13px 'Manrope',sans-serif;cursor:pointer;
}
.settings-nav-item:hover{background:rgba(255,255,255,.04);color:var(--text-primary);}
.settings-nav-item.is-active{background:rgba(139,92,246,.14);color:#c4b5fd;}
.settings-content{padding:25px 28px;overflow:auto;}
.settings-section{display:none;}
.settings-section.is-active{display:block;}
.settings-section-title{font-family:'Unbounded',sans-serif;font-size:15px;margin-bottom:16px;}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.setting-row strong{display:block;font-size:14px;margin-bottom:4px;}
.setting-row span:not(.status-chip){display:block;color:var(--text-muted);font-size:12px;line-height:1.45;max-width:560px;}
.static-row{align-items:center;}
.status-chip{font-size:11px!important;color:#a7f3d0!important;background:rgba(16,185,129,.1);padding:6px 9px;border-radius:999px;white-space:nowrap;}
.switch{position:relative;width:46px;height:26px;flex:0 0 auto;}
.switch input{position:absolute;opacity:0;pointer-events:none;}
.switch span{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid var(--glass-border);cursor:pointer;transition:.2s;}
.switch span:before{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:.2s;}
.switch input:checked + span{background:linear-gradient(135deg,var(--violet),#5b7cfa);border-color:transparent;}
.switch input:checked + span:before{transform:translateX(20px);}
.choice-card{
  display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--glass-border);
  border-radius:16px;margin-bottom:9px;background:rgba(255,255,255,.025);cursor:pointer;transition:.16s;
}
.choice-card:has(input:checked){background:rgba(139,92,246,.11);border-color:rgba(139,92,246,.42);}
.choice-card input{accent-color:var(--violet);}
.choice-card b{display:block;font-size:13px;margin-bottom:3px;}
.choice-card small{display:block;color:var(--text-muted);font-size:11.5px;}
.settings-note{margin-top:15px;padding:12px 13px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--text-muted);font-size:11.5px;line-height:1.5;}
.settings-save-state{height:22px;margin-top:13px;color:#a7f3d0;font-size:12px;font-weight:700;}
.video-note-wrap{position:relative;width:min(180px,55vw);height:min(180px,55vw);border-radius:50%;overflow:hidden;background:#171923;}
.video-note-msg{width:100%;height:100%;border:2px solid rgba(255,255,255,.2);border-radius:50%;object-fit:cover;display:block;cursor:pointer;background:#171923;}
.video-note-play{position:absolute;inset:auto 10px 10px auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;pointer-events:none;opacity:.9;}
.video-note-wrap.is-error:after{content:"Видео недоступно";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;background:rgba(18,21,28,.9);color:#aeb3c2;font-size:12px;}

.bottom-nav{display:none;}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);
  padding:11px 18px;border-radius:14px;background:rgba(18,21,28,.92);
  backdrop-filter:blur(24px);border:1px solid var(--glass-border);
  font-size:13.5px;font-weight:600;color:var(--text-primary);
  box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;pointer-events:none;z-index:300;
  transition:all .3s cubic-bezier(.2,.9,.3,1);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- QR ---------- */
.qr-overlay{
  position:fixed;inset:0;z-index:55;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,5,16,.72);backdrop-filter:blur(6px);padding:20px;
}
.qr-overlay[hidden]{display:none;}
.qr-card{width:100%;max-width:360px;border-radius:28px;padding:30px 26px;position:relative;}
.qr-close{position:absolute;top:16px;right:16px;}
.qr-img-wrap{
  width:220px;height:220px;margin:10px auto 16px;border-radius:18px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.qr-img-wrap img{width:100%;height:100%;object-fit:contain;}
#qr-video{width:100%;border-radius:18px;margin:10px 0 12px;background:#000;max-height:280px;object-fit:cover;}

.composer{display:flex;align-items:center;gap:10px;padding:16px 22px;border-top:1px solid var(--glass-border);}
.composer input{
  flex:1;padding:13px 16px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-border);
  color:var(--text-primary);font-family:'Manrope',sans-serif;font-size:14.5px;outline:none;
}
.composer input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.16);}
.btn-send{
  width:46px;height:46px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),#2864d4);color:#fff;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, filter .15s;
}
.btn-send:hover{filter:brightness(1.1);transform:scale(1.04);}
.btn-send:active{transform:scale(.95);}

/* ---------- звонки ---------- */
.call-overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,5,16,.72);backdrop-filter:blur(6px);padding:20px;
}
.call-overlay[hidden]{display:none;}
.call-card{
  width:100%;max-width:380px;border-radius:32px;padding:40px 30px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  position:relative;overflow:hidden;
}
.call-name{font-family:'Unbounded',sans-serif;font-weight:600;font-size:19px;margin-top:16px;}
.call-status{color:var(--text-muted);font-size:14px;margin-bottom:10px;}
.call-video{width:100%;border-radius:20px;margin:10px 0;max-height:320px;object-fit:cover;background:#000;}
.call-local-video{
  position:absolute;top:16px;right:16px;width:90px;border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.5);object-fit:cover;background:#000;
}
.call-actions{display:flex;gap:22px;margin-top:22px;}
.call-round{
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;font-size:22px;
  display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s;
}
.call-round:active{transform:scale(.92);}
.call-round.accept{background:#22C55E;box-shadow:0 10px 26px rgba(34,197,94,.45);}
.call-round.decline{background:#EF4444;box-shadow:0 10px 26px rgba(239,68,68,.45);}
.call-round.mute,.call-round.camtoggle{background:rgba(255,255,255,.12);border:1px solid var(--glass-border);}
.call-round.mute.is-off,.call-round.camtoggle.is-off{background:#EF4444;}

@media (max-width:760px){
  .panel-overlay{padding:0;align-items:flex-end;}
  .panel-card{max-height:92dvh;border-radius:26px 26px 0 0;}
  .panel-header{padding:22px 20px 18px;}
  .settings-layout{grid-template-columns:1fr;min-height:0;}
  .settings-nav{display:flex;gap:6px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--glass-border);overflow:auto;}
  .settings-nav-item{width:auto;white-space:nowrap;margin:0;padding:9px 12px;}
  .settings-content{padding:20px 18px 30px;}
  .calls-list{padding:8px;}
  .call-history-meta{display:none;}
  .app-shell{grid-template-columns:1fr;height:100dvh;border-radius:0;}
  .rail{display:none;}
  .sidebar{display:flex;}
  .conversation{display:none;}
  .app-shell[data-view="chat"] .sidebar{display:none;}
  .app-shell[data-view="chat"] .conversation{display:flex;}
  #screen-app{padding:0;}

  .bottom-nav{
    display:flex;justify-content:space-around;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(18,21,28,.75);backdrop-filter:blur(24px) saturate(180%);
    border-top:1px solid var(--glass-border);
  }
  .app-shell[data-view="chat"] ~ .bottom-nav{display:none;}
  .sidebar{padding-bottom:64px;}
  .bn-item{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;color:var(--text-muted);font-size:10.5px;font-weight:600;
    padding:4px 14px;cursor:pointer;transition:color .15s;
  }
  .bn-item.is-active{color:var(--violet);}
  .bn-item:active{transform:scale(.94);}

  .composer{padding:12px 10px;gap:6px;}
  .composer input{padding:11px 12px;font-size:14px;min-width:0;}
  .attach-btn,.mic-btn,.cam-btn{width:34px;height:34px;font-size:16px;padding:0;flex-shrink:0;}
  .btn-send{width:40px;height:40px;font-size:15px;flex-shrink:0;}
  .conv-header{padding:12px 14px;gap:9px;}
  .conv-header-actions{gap:5px;}
  .call-btn{width:34px;height:34px;font-size:14px;padding:0;}
  .chat-item-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .msg{max-width:82%;}
  .video-note-preview{width:70vw;height:70vw;max-width:220px;max-height:220px;}
}
/* v13 feature layer */
.story-strip{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--glass-border);overflow:auto}.story-add{border:0;background:transparent;color:var(--text-primary);display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}.story-add-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px dashed rgba(255,255,255,.45);font-size:20px}.story-mood{padding:9px 12px;border-radius:16px;background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(34,211,238,.14));font-size:12px;white-space:nowrap}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feature-grid .field{margin:0}.feature-grid select,.feature-grid input[type=color],.translation-grid input{width:100%;box-sizing:border-box}.feature-textarea{width:100%;min-height:100px;resize:vertical;border:1px solid var(--glass-border);background:rgba(255,255,255,.045);border-radius:16px;padding:13px;color:var(--text-primary);font:inherit;box-sizing:border-box;margin-bottom:12px}.story-visibility{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-muted);margin-bottom:14px}.translation-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.translation-grid input{border:1px solid var(--glass-border);background:rgba(255,255,255,.045);border-radius:12px;padding:11px;color:var(--text-primary)}.check-line{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-muted);margin-bottom:14px}.feature-actions{margin-top:14px}.btn-small{padding:8px 11px!important;font-size:11px!important;white-space:nowrap}.mini-list{display:grid;gap:8px;margin-top:15px}.mini-list>div{padding:10px 12px;border:1px solid var(--glass-border);border-radius:13px;background:rgba(255,255,255,.035);font-size:12px}.profile-mini-card{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;padding:10px;border-radius:14px;background:rgba(255,255,255,.035);font-size:12px;color:var(--text-muted)}.avatar.frame-glow{box-shadow:0 0 0 3px rgba(139,92,246,.35),0 0 20px rgba(34,211,238,.35)}.avatar.frame-rainbow{box-shadow:0 0 0 3px #f472b6,0 0 0 6px #8b5cf6,0 0 0 9px #22d3ee}.avatar.frame-diamond{box-shadow:0 0 0 3px #e2e8f0,0 0 18px rgba(226,232,240,.45)}.avatar.frame-neon{box-shadow:0 0 0 3px #22d3ee,0 0 22px #8b5cf6}.avatar.frame-aurora{box-shadow:0 0 0 3px #34d399,0 0 22px #a78bfa}.name-gradient{background:linear-gradient(90deg,var(--name-c1,#8b5cf6),var(--name-c2,#22d3ee));-webkit-background-clip:text;background-clip:text;color:transparent}.name-shimmer{background:linear-gradient(110deg,var(--name-c1,#8b5cf6),#fff,var(--name-c2,#22d3ee));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hgShimmer 3.2s linear infinite}@keyframes hgShimmer{to{background-position:220% center}}.call-round.share-active{background:linear-gradient(135deg,#22d3ee,#8b5cf6)}
@media(max-width:700px){.feature-grid,.translation-grid{grid-template-columns:1fr}.settings-panel{max-height:92vh}.settings-nav{flex-wrap:nowrap}.story-strip{padding-left:10px}}
.story-ring{position:absolute;inset:-2px;border:2px solid #22d3ee;border-radius:50%;pointer-events:none}.avatar-wrap{position:relative}.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0}.gift-grid button{border:1px solid var(--glass-border);background:rgba(255,255,255,.05);color:var(--text-primary);border-radius:16px;padding:12px 6px;display:grid;gap:5px;place-items:center;font-size:25px;cursor:pointer}.gift-grid button.is-selected{outline:2px solid #8b5cf6;background:rgba(139,92,246,.14)}.gift-grid span{font-size:10px;color:var(--text-muted)}.gift-caption{width:100%;box-sizing:border-box;border:1px solid var(--glass-border);background:rgba(255,255,255,.045);border-radius:13px;padding:12px;color:var(--text-primary);margin-bottom:12px}

/* =========================================================
   HAPPYGRAM V17 — TOTAL NEON GLASS REDESIGN
   Desktop + Android/mobile first. Functional DOM/IDs preserved.
   ========================================================= */
:root{
  --bg-base:#050712;
  --bg-secondary:#0b1020;
  --glass-bg:rgba(10,15,32,.78);
  --glass-border:rgba(255,255,255,.105);
  --violet:#8b5cf6;
  --pink:#ec4899;
  --cyan:#22d3ee;
  --blue:#4f7cff;
  --text-primary:#f8faff;
  --text-muted:#8f9ab4;
  --radius-sm:16px;
  --radius-lg:30px;
}
html{background:#050712;scroll-behavior:smooth}
body{background:#050712;color:var(--text-primary);letter-spacing:-.01em}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% -10%,rgba(92,72,255,.14),transparent 35%),linear-gradient(180deg,rgba(4,6,15,.12),rgba(4,6,15,.78))}
.aurora{background:#050712}
.aurora .b1{background:radial-gradient(circle,rgba(124,58,237,.58),transparent 68%);opacity:.36}
.aurora .b2{background:radial-gradient(circle,rgba(236,72,153,.42),transparent 68%);opacity:.30}
.aurora .b3{background:radial-gradient(circle,rgba(34,211,238,.28),transparent 68%);opacity:.22}

/* Brand / logo */
.brand-mark,.rail-brand,.brand-mark.big{background-image:url('../img/happygram-icon.svg');background-size:cover;background-position:center;background-color:transparent;box-shadow:0 0 34px rgba(99,102,241,.32);font-size:0;color:transparent}
.brand-mark{width:48px;height:48px;border-radius:16px}
.brand-mark.big{width:84px;height:84px;border-radius:25px}
.rail-brand{width:46px;height:46px;border-radius:15px}
.brand-name{font-family:'Unbounded',sans-serif;font-size:18px;letter-spacing:-.045em}
.brand-name:after{content:' ✦';color:#8b5cf6}

/* Auth */
.card-auth,.card-step{position:relative;border:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(14,19,40,.88),rgba(8,11,25,.78));box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 80px rgba(88,28,135,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.card-auth:before,.card-step:before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 24%,transparent 72%,rgba(34,211,238,.06))}
.tabs{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.tab.is-active{box-shadow:0 7px 24px rgba(124,58,237,.3)}
.field input,.input-at,.composer input{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}
.btn-primary{background:linear-gradient(110deg,#7c3aed 0%,#a855f7 38%,#ec4899 70%,#22d3ee 115%);background-size:200% 100%;animation:hgButton 7s ease infinite;box-shadow:0 12px 34px rgba(124,58,237,.30)}
@keyframes hgButton{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* Main app frame */
#screen-app{background:radial-gradient(circle at 72% 0%,rgba(78,81,255,.08),transparent 28%)}
.app-shell{grid-template-columns:78px 380px minmax(0,1fr);background:rgba(5,8,19,.70);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.rail{background:linear-gradient(180deg,rgba(10,14,30,.94),rgba(6,9,20,.88));border-right:1px solid rgba(255,255,255,.08);padding:22px 0;gap:8px}
.rail-brand{margin-bottom:25px}
.rail-btn{width:48px;height:48px;border-radius:15px;color:#6f7b99}
.rail-btn:hover{background:rgba(139,92,246,.10);color:#d8d5ff}
.rail-btn.is-active{background:linear-gradient(145deg,rgba(139,92,246,.24),rgba(34,211,238,.07));color:#fff;box-shadow:inset 0 0 0 1px rgba(139,92,246,.22),0 10px 30px rgba(79,70,229,.12)}
.sidebar{background:linear-gradient(180deg,rgba(9,13,28,.91),rgba(6,9,19,.84));border-right:1px solid rgba(255,255,255,.08)}
.sidebar-top{padding:21px 19px 15px}
.me{padding:7px 9px;border-radius:17px}
.me:hover{background:rgba(255,255,255,.045)}
.me-nickname{font-size:14px}
.me-username{color:#6e7a98}
.search-new{padding:0 15px 14px}
.search-new input{width:100%;box-sizing:border-box;height:44px;border-radius:15px!important;padding:0 15px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.075)!important}
.search-new input:focus{border-color:rgba(139,92,246,.55)!important;box-shadow:0 0 0 4px rgba(139,92,246,.09)!important}
.story-strip{margin:0 13px 10px;padding:10px 4px;border:1px solid rgba(255,255,255,.065);border-radius:19px;background:linear-gradient(100deg,rgba(139,92,246,.07),rgba(34,211,238,.035));border-bottom:1px solid rgba(255,255,255,.065)}
.story-add{font-size:11px}
.story-add-avatar{border:2px solid rgba(139,92,246,.72);box-shadow:0 0 0 3px rgba(34,211,238,.10),0 0 22px rgba(139,92,246,.18)}
.chat-list{padding:4px 10px 18px}
.chat-item{border-radius:18px!important;border:1px solid transparent!important;margin:3px 0!important;padding:11px 10px!important}
.chat-item:hover{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.055)!important}
.chat-item.is-active{background:linear-gradient(100deg,rgba(124,58,237,.18),rgba(34,211,238,.045))!important;border-color:rgba(139,92,246,.18)!important;box-shadow:inset 3px 0 0 #8b5cf6}

/* Conversation */
.conversation{position:relative;background:radial-gradient(circle at 70% 5%,rgba(139,92,246,.075),transparent 27%),radial-gradient(circle at 20% 85%,rgba(34,211,238,.035),transparent 26%),#060914}
.conversation:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,black,transparent)}
.conv-header{position:relative;z-index:2;height:72px;padding:0 22px;background:rgba(6,9,20,.74)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(22px)}
.conv-header .avatar{box-shadow:0 0 0 2px rgba(139,92,246,.45),0 0 20px rgba(139,92,246,.12)}
.peer-nickname{font-weight:800;letter-spacing:-.02em}
.peer-username{font-size:11px!important;color:#6f7c9c!important}
.conversation-empty{position:relative;z-index:1;max-width:420px;padding:40px;text-align:center;color:#7d88a4}
.conversation-empty p{line-height:1.65}
.messages{position:relative;z-index:1;padding:26px clamp(18px,5vw,70px);scrollbar-width:thin}
.msg{filter:drop-shadow(0 9px 16px rgba(0,0,0,.14))}
.msg-bubble{border:1px solid rgba(255,255,255,.07)!important;background:rgba(17,23,43,.90)!important;border-radius:21px!important}
.msg.mine .msg-bubble{background:linear-gradient(135deg,rgba(109,40,217,.92),rgba(79,70,229,.90),rgba(59,130,246,.78))!important;border-color:rgba(255,255,255,.10)!important}
.composer{position:relative;z-index:2;background:rgba(5,8,18,.80);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.08)!important;padding:15px 22px}
.composer input{height:46px;box-sizing:border-box;border-radius:17px}
.btn-send{background:linear-gradient(135deg,#7c3aed,#2563eb,#06b6d4);box-shadow:0 9px 26px rgba(79,70,229,.26)}

/* Panels */
.panel-overlay,.call-overlay,.qr-overlay{background:rgba(2,4,12,.76)!important;backdrop-filter:blur(13px)!important}
.panel-card,.call-card,.qr-card{border:1px solid rgba(255,255,255,.11)!important;background:linear-gradient(145deg,rgba(14,19,40,.96),rgba(7,10,23,.94))!important;box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 80px rgba(99,52,180,.10)!important}
.panel-header{border-bottom-color:rgba(255,255,255,.07)!important}
.settings-nav-item.is-active{background:linear-gradient(100deg,rgba(124,58,237,.22),rgba(34,211,238,.05));color:#fff}
.setting-row{border-bottom-color:rgba(255,255,255,.065)}
.choice-card{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.075)}
.choice-card:has(input:checked){background:rgba(124,58,237,.13);border-color:rgba(139,92,246,.45);box-shadow:0 8px 30px rgba(79,70,229,.08)}

/* Stories / gifts / feature cards */
.story-card,.feature-card,.gift-grid button,.mini-list>div{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;border-color:rgba(255,255,255,.075)!important}
.gift-grid button{transition:.18s transform,.18s box-shadow,.18s border-color}
.gift-grid button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,58,237,.14)}
.gift-grid button.is-selected{outline:none!important;border-color:rgba(139,92,246,.72)!important;box-shadow:0 0 0 2px rgba(139,92,246,.18),0 12px 30px rgba(124,58,237,.15)}

/* Mobile — Android-like bottom navigation and sheets */
@media(max-width:760px){
  .screen{padding:0}
  .card-auth,.card-step{border-radius:0;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:28px 22px}
  .app-shell{grid-template-columns:1fr;border:0}
  .sidebar{padding-bottom:75px}
  .bottom-nav{background:rgba(6,9,20,.88)!important;border-top:1px solid rgba(255,255,255,.09)!important;box-shadow:0 -16px 40px rgba(0,0,0,.24)}
  .bn-item{font-size:10px;padding:6px 17px;color:#6f7b99}
  .bn-item.is-active{color:#c4b5fd}
  .conversation{min-height:100dvh}
  .conv-header{height:64px;padding:0 11px}
  .messages{padding:20px 12px 16px}
  .composer{padding:9px 8px calc(9px + env(safe-area-inset-bottom,0px))}
  .story-strip{margin-left:10px;margin-right:10px}
}

/* Larger Android phones: keep app feeling like a native full-screen messenger */
@media(min-width:761px) and (max-width:1100px){
  .app-shell{grid-template-columns:72px 315px minmax(0,1fr)}
  .messages{padding-left:28px;padding-right:28px}
}

/* Scrollbars */
*{scrollbar-color:rgba(139,92,246,.42) transparent;scrollbar-width:thin}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(#8b5cf6,#22d3ee);border-radius:99px}

/* reduced motion */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* ===== HappyGram V18 fixes: native mobile layout + Labs ===== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app-shell,.conversation,.conversation-active,.messages,.composer,.conv-header{min-width:0;max-width:100%}
.conv-header-info{overflow:hidden}
.peer-nickname,.peer-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-header-actions{min-width:0;overflow:hidden;flex-shrink:0}
.conv-header-actions .icon-btn{flex:0 0 36px}
.story-add-only{width:100%;justify-content:flex-start;padding:4px 8px!important}
.story-add-only span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.story-add-only small{font-size:10px;color:var(--text-muted);font-weight:500}
.story-add-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.composer{min-width:0}
.composer input{min-width:0;width:0}
.labs-panel{width:min(980px,calc(100vw - 28px));max-height:min(88dvh,860px)}
.labs-toolbar{display:flex;gap:10px;padding:0 22px 14px;align-items:center}
.labs-toolbar input{flex:1;min-width:0;height:42px;border-radius:14px;border:1px solid var(--glass-border);background:rgba(255,255,255,.045);color:var(--text-primary);padding:0 14px;outline:none}
.labs-count{min-width:38px;height:38px;padding:0 10px;border-radius:12px;display:grid;place-items:center;background:rgba(139,92,246,.12);color:#c4b5fd;font-size:12px}
.labs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 22px 14px;overflow:auto}
.lab-card{display:flex;align-items:flex-start;gap:11px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));color:var(--text-primary);padding:13px;cursor:pointer;min-width:0;transition:.18s}
.lab-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.4);background:linear-gradient(145deg,rgba(139,92,246,.12),rgba(34,211,238,.035))}
.lab-icon{font-size:23px;flex:0 0 30px;text-align:center}.lab-card span:last-child{min-width:0;display:flex;flex-direction:column;gap:4px}.lab-card b{font-size:12px}.lab-card small{font-size:10px;line-height:1.45;color:var(--text-muted)}
.labs-status{margin:0 22px 18px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.035);color:var(--text-muted);font-size:11px}
.canvas-panel{width:min(860px,calc(100vw - 24px));height:min(82dvh,720px)}
.canvas-panel #hg-canvas{display:block;width:calc(100% - 44px);height:calc(100% - 155px);margin:0 22px;border-radius:18px;background:#0a0f20;border:1px solid rgba(255,255,255,.08);touch-action:none}
.canvas-tools{display:flex;gap:8px;padding:12px 22px}.canvas-tools button{border:1px solid var(--glass-border);background:rgba(255,255,255,.045);color:var(--text-primary);border-radius:12px;padding:9px 12px}
.lab-message{max-width:85%!important}.lab-card-inline{display:grid;gap:5px}.lab-card-inline strong{font-size:13px}.lab-card-inline span{font-size:13px}.lab-card-inline small{font-size:10px;color:var(--text-muted)}
@media(max-width:760px){
  .app-shell{width:100vw;height:100dvh;overflow:hidden}
  .conversation-active{width:100%;overflow:hidden}
  .conv-header{gap:7px;padding:0 8px}
  .conv-header .avatar{width:36px;height:36px;flex:0 0 36px}
  .conv-header-actions{gap:3px}
  .conv-header-actions .icon-btn{width:32px;height:32px;flex-basis:32px;border-radius:10px}
  #btn-archive-chat{display:none}
  .peer-nickname{font-size:13px}
  .peer-username{font-size:10px!important}
  .messages{width:100%;box-sizing:border-box;padding:18px 9px 12px;overflow-x:hidden}
  .msg{max-width:84%;box-sizing:border-box}
  .composer{width:100%;box-sizing:border-box;gap:4px;padding-left:6px;padding-right:6px}
  .composer .icon-btn{width:32px;height:32px;flex:0 0 32px;border-radius:10px}
  .composer .btn-send{width:38px;height:38px;flex:0 0 38px}
  .composer input{height:40px!important;padding:8px 10px!important;font-size:13px!important}
  .labs-panel{width:100%;max-height:94dvh;border-radius:24px 24px 0 0}
  .labs-grid{grid-template-columns:1fr 1fr;padding:0 14px 12px}
  .labs-toolbar{padding:0 14px 12px}.labs-status{margin:0 14px 14px}
  .canvas-panel{width:100%;height:92dvh;border-radius:24px 24px 0 0}.canvas-panel #hg-canvas{width:calc(100% - 28px);margin:0 14px;height:calc(100% - 150px)}.canvas-tools{padding:10px 14px}
}
@media(max-width:390px){
  .conv-header-actions .labs-chat-btn{display:none}
  .conv-header-actions .call-btn{width:30px;height:30px;flex-basis:30px}
  .composer .attach-btn{display:none}
  .composer{gap:3px}
}

/* HappyGram V19 mobile hardening */
html,body{max-width:100%;overflow-x:hidden}
.app-shell,.screen,.conversation,.conversation-main,.conversation-header,.messages,.composer{max-width:100%;min-width:0}
.conversation-header{width:100%;box-sizing:border-box;overflow:hidden;display:flex;align-items:center;gap:10px}
.conversation-header .peer-info{min-width:0;flex:1;overflow:hidden}
.peer-nickname,.peer-username{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-header .header-actions{flex:0 0 auto;display:flex;gap:4px;max-width:42%;overflow:hidden}
.messages{overflow-x:hidden;word-break:break-word}
.msg{max-width:min(86%,560px);box-sizing:border-box}
.msg img,.msg video,.msg audio{max-width:100%}
.composer{box-sizing:border-box;width:100%;display:flex;min-width:0}
#composer-input{min-width:0;max-width:100%;flex:1}
.story-strip{width:100%;overflow:hidden}
.story-add-only{width:100%;max-width:100%;box-sizing:border-box}
.lab-card{position:relative}
.lab-badge{font-style:normal;font-size:10px;padding:4px 7px;border-radius:999px;background:rgba(34,211,238,.12);color:#67e8f9;white-space:nowrap}
.lab-installed{border-color:rgba(34,211,238,.22)}
@media(max-width:600px){
 .conversation-header{padding-left:10px;padding-right:8px;gap:7px}
 .conversation-header .header-actions .icon-btn:nth-child(n+4){display:none}
 .peer-nickname{font-size:14px}.peer-username{font-size:11px}
 .msg{max-width:88%}
 .composer{gap:5px;padding-left:7px;padding-right:7px}
}


/* HappyGram V20 — conversation contact header */
.conv-header{box-sizing:border-box;overflow:hidden;}
.conv-header > .avatar-wrap{display:flex!important;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;visibility:visible!important;}
.conv-header > .avatar-wrap > .avatar{display:flex!important;width:44px!important;height:44px!important;min-width:44px!important;border-radius:50%!important;visibility:visible!important;opacity:1!important;}
.conv-header > .avatar-wrap > .avatar img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;}
.conv-header-info{display:flex!important;flex-direction:column;justify-content:center;min-width:0!important;flex:1 1 auto!important;visibility:visible!important;}
.conv-header-info .peer-nickname{display:block!important;min-width:0!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px!important;line-height:20px!important;color:var(--text-primary,#fff)!important;}
.conv-header-info .peer-username{display:block!important;min-width:0!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px!important;line-height:16px!important;color:var(--text-muted,#7d88a4)!important;}
.conv-header-actions{display:flex!important;flex:0 0 auto!important;align-items:center;gap:5px;min-width:0;visibility:visible!important;}
@media(max-width:600px){
 .conv-header{height:62px!important;padding:0 7px!important;gap:7px!important;}
 .conv-header > .avatar-wrap{flex-basis:38px;width:38px;height:38px;min-width:38px;}
 .conv-header > .avatar-wrap > .avatar{width:38px!important;height:38px!important;min-width:38px!important;}
 .conv-header-info .peer-nickname{font-size:13px!important;}
 .conv-header-info .peer-username{font-size:10px!important;}
}
\n\n/* HappyGram V21 — guaranteed contact header */
.conv-header{display:flex!important;align-items:center!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;overflow:hidden!important;}
.conv-header.has-contact{visibility:visible!important;opacity:1!important;}
.conv-header .avatar-wrap{display:flex!important;visibility:visible!important;opacity:1!important;flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;}
.conv-header .avatar-wrap .avatar{display:flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;border-radius:50%!important;overflow:hidden!important;font-size:20px!important;line-height:1!important;}
.conv-header .avatar-wrap .avatar img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;}
.conv-header-info{display:flex!important;visibility:visible!important;opacity:1!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;flex-direction:column!important;justify-content:center!important;}
.conv-header-info .peer-nickname,.conv-header-info .peer-username{display:block!important;visibility:visible!important;opacity:1!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;}
.conv-header-info .peer-nickname{color:#fff!important;font-weight:750!important;font-size:15px!important;line-height:20px!important;}
.conv-header-info .peer-username{color:#8b96ad!important;font-size:11px!important;line-height:16px!important;}
.conv-header-actions{display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;gap:5px!important;}
@media(max-width:760px){.conv-header{height:62px!important;padding:0 8px!important;gap:7px!important}.conv-header .avatar-wrap,.conv-header .avatar-wrap .avatar{width:38px!important;height:38px!important;min-width:38px!important;flex-basis:38px!important}.conv-header-info .peer-nickname{font-size:13px!important}.conv-header-info .peer-username{font-size:10px!important}.conv-header-actions .icon-btn{width:34px!important;height:34px!important;flex-basis:34px!important}.conv-header #btn-back{display:flex!important;flex:0 0 32px!important;width:32px!important;height:32px!important;}}

/* =========================================================
   HAPPYGRAM V23 — CHAT EXPERIENCE
   Полная переработка окна переписки. IDs/функциональность сохранены.
   ========================================================= */
.conversation{background:linear-gradient(180deg,#070a15 0%,#050813 100%);overflow:hidden}
.conversation-active{position:relative;background:radial-gradient(circle at 50% 0%,rgba(99,102,241,.10),transparent 34%),linear-gradient(180deg,#080b17,#050813)}
.conv-header{
  min-height:76px;box-sizing:border-box;padding:10px 18px;gap:11px;
  background:rgba(7,10,22,.88);backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.18);z-index:4;
}
.conv-header .avatar-wrap{width:48px;height:48px;flex:0 0 48px;display:block}
.conv-header #peer-avatar{width:48px;height:48px;border-radius:50%;display:flex;overflow:hidden;background:linear-gradient(135deg,#211a44,#0e2b3e);border:2px solid rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(139,92,246,.24),0 7px 24px rgba(0,0,0,.3)}
.conv-header .online-dot{right:0;bottom:1px;width:11px;height:11px;border:2px solid #080b17;background:#22c55e;border-radius:50%;position:absolute}
.conv-header-info{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.peer-nickname{font-size:15px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.peer-username{margin-top:5px;font-size:11.5px;color:#7f8ba8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer-username::first-letter{color:#a78bfa}
.conv-header-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
.conv-header-actions .icon-btn{width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);color:#aeb8cf}
.conv-header-actions .icon-btn:hover{background:rgba(139,92,246,.14);color:#fff;border-color:rgba(139,92,246,.45);transform:none}
#btn-back{width:36px;height:36px;border-radius:12px}

.messages{position:relative;padding:24px clamp(14px,3vw,34px) 22px;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.35) transparent;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:26px 26px}
.messages:before{content:'HAPPYGRAM';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);font-size:clamp(38px,7vw,80px);font-weight:900;letter-spacing:.12em;color:rgba(255,255,255,.012);pointer-events:none;white-space:nowrap}
.msg{position:relative;max-width:min(72%,620px);padding:11px 14px 9px;border-radius:20px;font-size:14px;line-height:1.48;box-shadow:0 7px 22px rgba(0,0,0,.12)}
.msg.mine{background:linear-gradient(135deg,#7449e8 0%,#4768ef 100%);border:1px solid rgba(255,255,255,.10);box-shadow:0 8px 28px rgba(72,82,230,.20)}
.msg.theirs{background:rgba(22,27,43,.86);border:1px solid rgba(255,255,255,.075);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.msg.mine::after{right:-6px;background:#4e63ec;width:12px;height:12px}
.msg.theirs::after{left:-6px;background:#171c2d;border:0;width:12px;height:12px}
.msg-time{font-size:10px;opacity:.58;margin-top:5px;display:flex;justify-content:flex-end;align-items:center;gap:5px}
.msg-ticks{font-size:10px;letter-spacing:-2px;opacity:.8}
.msg-ticks.read{color:#72e5ff;opacity:1}

/* media is contained, never becomes chat wallpaper */
.msg.media-msg{max-width:min(72%,430px);overflow:hidden;border-radius:20px;padding:5px}
.msg-image{width:auto;max-width:100%;height:auto;max-height:min(55vh,430px);object-fit:contain;background:#080b14;border-radius:16px}
.msg-image-caption{padding:7px 8px 3px}
.video-note-msg{width:min(210px,58vw);height:min(210px,58vw);max-width:100%;border-radius:50%;object-fit:cover;background:#080b14;box-shadow:0 8px 30px rgba(0,0,0,.3)}

.composer{position:relative;display:flex;align-items:center;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(7,10,21,.94);backdrop-filter:blur(24px) saturate(160%);border-top:1px solid rgba(255,255,255,.08);z-index:5}
.composer .icon-btn{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.085)}
.composer input{height:42px;box-sizing:border-box;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:#fff;padding:0 15px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);font-size:14px}
.composer input:focus{border-color:rgba(139,92,246,.6);box-shadow:0 0 0 3px rgba(139,92,246,.10)}
.composer input::placeholder{color:#68738b}
.btn-send{width:42px;height:42px;border:0;border-radius:15px;background:linear-gradient(135deg,#7c3aed,#168df5);box-shadow:0 8px 24px rgba(82,74,230,.32);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.btn-send:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* top-of-chat subtle identity chip */
.conv-header.has-contact:after{content:'личный чат';font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#56617a;position:absolute;left:50%;transform:translateX(-50%);top:5px;pointer-events:none}

/* Empty chat */
.conversation-empty{background:radial-gradient(circle at 50% 42%,rgba(124,58,237,.11),transparent 30%),linear-gradient(180deg,#070a15,#050813);gap:12px}
.conversation-empty .brand-mark.big{width:76px;height:76px;border-radius:23px;box-shadow:0 0 55px rgba(99,102,241,.26)}
.conversation-empty p{color:#74809a;max-width:340px}

@media(max-width:760px){
  .conv-header{min-height:70px;height:70px;padding:8px 10px;gap:7px;padding-top:max(8px,env(safe-area-inset-top,0px))}
  .conv-header .avatar-wrap,.conv-header #peer-avatar{width:43px;height:43px;flex-basis:43px}
  .peer-nickname{font-size:14px}
  .peer-username{font-size:10.5px;margin-top:4px}
  .conv-header-actions{gap:4px}
  .conv-header-actions .icon-btn{width:34px;height:34px;border-radius:11px}
  .conv-header-actions #btn-archive-chat{display:none}
  .messages{padding:16px 10px 14px;gap:7px}
  .msg{max-width:86%;font-size:13.5px;padding:10px 12px 8px;border-radius:18px}
  .msg.media-msg{max-width:82%;padding:4px}
  .msg-image{max-height:46vh;border-radius:14px}
  .composer{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:5px}
  .composer .icon-btn{width:35px;height:35px;border-radius:12px}
  .composer #btn-gift{display:none}
  .composer input{height:38px;border-radius:16px;padding:0 12px;font-size:13px}
  .btn-send{width:39px;height:39px;border-radius:14px}
  .conv-header.has-contact:after{display:none}
}
@media(max-width:380px){
  .conv-header-actions #btn-chat-labs{display:none}
  .conv-header-actions .call-btn{display:none}
  .conv-header .avatar-wrap,.conv-header #peer-avatar{width:40px;height:40px;flex-basis:40px}
  .conv-header{gap:6px}
}


/* =========================================================
   HAPPYGRAM V24 — FULL CHAT SHELL
   Контактная шапка, список диалогов, панели и мобильная версия.
   ========================================================= */
:root{--hg-bg:#050713;--hg-panel:#0a0e1b;--hg-panel2:#0d1221;--hg-line:rgba(255,255,255,.08);--hg-muted:#7d88a4;--hg-purple:#8b5cf6;--hg-cyan:#22d3ee}
.app-shell{border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 30px 100px rgba(0,0,0,.48),0 0 0 1px rgba(139,92,246,.04)!important;overflow:hidden!important;background:#070a14!important}
.rail{background:linear-gradient(180deg,#080b17,#060914)!important;border-right:1px solid var(--hg-line)!important;padding:14px 10px!important;gap:8px!important}
.rail-brand{width:42px!important;height:42px!important;border-radius:14px!important;background:linear-gradient(135deg,#8b5cf6,#4f46e5)!important;box-shadow:0 8px 30px rgba(99,102,241,.3)!important;font-weight:900!important;letter-spacing:-.05em}
.rail-btn{width:42px!important;height:42px!important;border-radius:14px!important;border:1px solid transparent!important;color:#6f7a95!important;background:transparent!important}
.rail-btn:hover{background:rgba(255,255,255,.045)!important;color:#fff!important}
.rail-btn.is-active{background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(34,211,238,.08))!important;border-color:rgba(139,92,246,.25)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 25px rgba(72,56,180,.12)!important}
.sidebar{background:linear-gradient(180deg,#090d19,#080b15)!important;border-right:1px solid var(--hg-line)!important}
.sidebar-top{padding:18px 18px 13px!important}
.me{padding:8px 9px!important;border-radius:16px!important;transition:.18s ease}
.me:hover{background:rgba(255,255,255,.045)!important}
.me .avatar{box-shadow:0 0 0 2px rgba(139,92,246,.20),0 8px 24px rgba(0,0,0,.3)!important}
.me-nickname{font-size:14px!important;font-weight:850!important}
.me-username{font-size:11px!important;color:#717c96!important;margin-top:3px}
.search-new{padding:0 15px 12px!important;position:relative}
.search-new input{height:42px!important;border-radius:14px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;padding-left:39px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important}
.search-new:before{content:'⌕';position:absolute;left:28px;top:9px;color:#77829c;font-size:20px;z-index:2}
.story-strip{padding:2px 15px 11px!important}
.story-add-only{border:1px solid rgba(255,255,255,.07)!important;background:linear-gradient(135deg,rgba(139,92,246,.09),rgba(34,211,238,.04))!important;border-radius:16px!important;padding:10px!important}
.chat-list{padding:2px 9px 14px!important}
.chat-item{margin:2px 0!important;border:1px solid transparent!important;border-radius:16px!important;padding:10px!important;transition:.16s ease!important}
.chat-item:hover{background:rgba(255,255,255,.045)!important;transform:none!important;border-color:rgba(255,255,255,.045)!important}
.chat-item.is-active{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(74,87,239,.08))!important;border-color:rgba(139,92,246,.20)!important;box-shadow:inset 3px 0 0 #8b5cf6,0 8px 24px rgba(0,0,0,.12)!important}
.chat-item .avatar{box-shadow:0 0 0 1px rgba(255,255,255,.08)!important}
.chat-item-name{font-size:13.5px!important;font-weight:800!important;color:#f7f8ff!important}
.chat-item-preview{font-size:11.5px!important;color:#7b86a0!important;margin-top:2px}
.chat-item-time{font-size:10px!important;color:#5f6b84!important}
.unread-dot{min-width:8px!important;height:8px!important;border-radius:50%!important;background:#8b5cf6!important;box-shadow:0 0 12px rgba(139,92,246,.65)!important}
.conversation{background:#060914!important}
.conversation-active{background:radial-gradient(circle at 50% -10%,rgba(109,74,236,.16),transparent 38%),linear-gradient(180deg,#080b17,#050813)!important}
.conv-header{position:relative!important;min-height:82px!important;height:82px!important;padding:11px 18px!important;background:rgba(8,11,23,.92)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;box-shadow:0 12px 38px rgba(0,0,0,.25)!important}
.conv-header:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.55),rgba(34,211,238,.32),transparent);pointer-events:none}
.conv-header #peer-avatar{width:50px!important;height:50px!important;min-width:50px!important;border:2px solid rgba(255,255,255,.12)!important;box-shadow:0 0 0 3px rgba(139,92,246,.10),0 8px 28px rgba(0,0,0,.35)!important}
.conv-header .avatar-wrap{width:50px!important;height:50px!important;flex-basis:50px!important;position:relative!important}
.conv-header-info{padding:0 4px!important}
.conv-header-info .peer-nickname{font-size:16px!important;font-weight:850!important;letter-spacing:-.025em!important;color:#fff!important}
.conv-header-info .peer-username{font-size:11.5px!important;color:#7d89a5!important;margin-top:5px!important}
.conv-header-info .peer-username .typing-text,.typing-text{color:#8b5cf6!important;font-weight:750!important}
.conv-header-actions{gap:7px!important}
.conv-header-actions .icon-btn{width:40px!important;height:40px!important;border-radius:13px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;color:#a9b4ca!important}
.conv-header-actions .icon-btn:hover{background:rgba(139,92,246,.14)!important;border-color:rgba(139,92,246,.38)!important;color:#fff!important}
.messages{padding:26px clamp(18px,4vw,52px) 24px!important;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px)!important;background-size:24px 24px!important}
.messages:after{content:'END-TO-END';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.18em;color:rgba(140,150,175,.22);pointer-events:none}
.msg{max-width:min(68%,640px)!important;border-radius:20px!important;padding:11px 14px 9px!important}
.msg.mine{background:linear-gradient(135deg,#7147e8,#4667ed)!important;border-color:rgba(255,255,255,.11)!important}
.msg.theirs{background:linear-gradient(135deg,rgba(20,25,41,.94),rgba(15,20,34,.94))!important;border-color:rgba(255,255,255,.075)!important}
.composer{padding:13px 16px calc(13px + env(safe-area-inset-bottom,0px))!important;background:rgba(7,10,21,.96)!important;border-top:1px solid rgba(255,255,255,.09)!important;box-shadow:0 -12px 35px rgba(0,0,0,.18)!important}
.composer input{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.09)!important;height:44px!important;border-radius:16px!important}
.composer .icon-btn{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.08)!important}
.composer .icon-btn:hover{background:rgba(139,92,246,.13)!important;color:#fff!important}
.btn-send{height:44px!important;width:44px!important;border-radius:15px!important;background:linear-gradient(135deg,#7c3aed,#0ea5e9)!important}
.conversation-empty{background:radial-gradient(circle at 50% 35%,rgba(124,58,237,.12),transparent 28%),linear-gradient(180deg,#070a15,#050813)!important}
.conversation-empty:before{content:'Выбери диалог';position:absolute;top:26px;left:28px;color:#e8eaf2;font-weight:800;font-size:14px;opacity:.9}
.conversation-empty .brand-mark.big{width:86px!important;height:86px!important;border-radius:26px!important;background:linear-gradient(135deg,#8b5cf6,#2563eb)!important;box-shadow:0 0 70px rgba(99,102,241,.30)!important}
.panel-card{border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important;background:linear-gradient(180deg,rgba(12,16,29,.98),rgba(7,10,19,.98))!important}
.panel-header{border-bottom:1px solid rgba(255,255,255,.07)!important}
@media(max-width:760px){
 .rail{display:none!important}
 .sidebar{border-right:0!important}
 .conv-header{height:70px!important;min-height:70px!important;padding:8px 9px!important}
 .conv-header .avatar-wrap,.conv-header #peer-avatar{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important}
 .conv-header-info .peer-nickname{font-size:14px!important}.conv-header-info .peer-username{font-size:10.5px!important}
 .conv-header-actions{gap:4px!important}.conv-header-actions .icon-btn{width:34px!important;height:34px!important;border-radius:11px!important}
 .messages{padding:16px 10px 14px!important}.msg{max-width:86%!important}
 .composer{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;gap:5px!important}
 .composer .icon-btn{width:35px!important;height:35px!important}.composer input{height:38px!important}.btn-send{width:39px!important;height:39px!important}
}


/* =========================================================
   HAPPYGRAM V25 — premium conversation header
   ========================================================= */
.conv-header{height:88px!important;min-height:88px!important;padding:12px 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;background:linear-gradient(180deg,rgba(9,13,26,.98),rgba(7,10,20,.92))!important;box-shadow:0 14px 42px rgba(0,0,0,.32)!important;isolation:isolate!important}
.conv-header:after{content:''!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;top:auto!important;height:1px!important;background:linear-gradient(90deg,transparent 0%,rgba(139,92,246,.18) 18%,rgba(139,92,246,.65) 48%,rgba(34,211,238,.42) 70%,transparent 100%)!important;transform:none!important;pointer-events:none!important}
.conv-header-left{display:flex;align-items:center;min-width:0;gap:12px;position:relative;z-index:2}
.header-back{display:none!important;width:38px!important;height:38px!important;border-radius:13px!important;flex:0 0 auto}
.header-back svg{width:18px;height:18px}
.header-avatar-wrap{width:54px!important;height:54px!important;min-width:54px!important;flex-basis:54px!important;padding:2px;border-radius:18px!important;background:linear-gradient(135deg,rgba(139,92,246,.85),rgba(34,211,238,.6))!important;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 28px rgba(0,0,0,.35),0 0 28px rgba(99,102,241,.16)!important}
.header-avatar-wrap #peer-avatar{width:50px!important;height:50px!important;min-width:50px!important;border:2px solid #0a0e1b!important;box-shadow:none!important;border-radius:16px!important;background-color:#111827!important;overflow:hidden!important}
.header-avatar-wrap .online-dot{right:0!important;bottom:0!important;width:14px!important;height:14px!important;border:3px solid #080b16!important;box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 12px rgba(34,211,238,.65)!important}
.conv-header-info{min-width:0!important;padding:0!important;display:flex;flex-direction:column;justify-content:center;gap:5px!important}
.peer-name-row{display:flex;align-items:center;gap:7px;min-width:0}
.peer-nickname{font-size:16px!important;line-height:1.15!important;font-weight:900!important;letter-spacing:-.035em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f9fbff!important}
.verified-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:900;color:#fff;background:linear-gradient(135deg,#8b5cf6,#22d3ee);box-shadow:0 3px 10px rgba(99,102,241,.28);flex:0 0 auto}
.peer-meta{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px!important}
.peer-username{font-size:11px!important;color:#7f8aa5!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer-presence{font-size:10px;color:#59657f;white-space:nowrap;padding-left:7px;border-left:1px solid rgba(255,255,255,.08);transition:.2s}
.peer-presence.is-online{color:#62e7bd}
.peer-presence.is-online:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#62e7bd;box-shadow:0 0 8px rgba(98,231,189,.65);margin:0 5px 1px 0}
.typing-text{color:#a78bfa!important;font-weight:800!important}
.conv-header-actions{display:flex!important;align-items:center!important;gap:7px!important;position:relative;z-index:2}
.conv-header-actions .icon-btn{width:42px!important;height:42px!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;border:1px solid rgba(255,255,255,.09)!important;color:#aab4c8!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 6px 18px rgba(0,0,0,.16)!important;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important}
.conv-header-actions .icon-btn svg{width:18px;height:18px;display:block}
.conv-header-actions .icon-btn:hover{transform:translateY(-2px)!important;background:linear-gradient(180deg,rgba(139,92,246,.18),rgba(139,92,246,.06))!important;border-color:rgba(139,92,246,.38)!important;color:#fff!important;box-shadow:0 9px 24px rgba(76,57,180,.20)!important}
.conv-header-actions .video-head-btn:hover{background:linear-gradient(180deg,rgba(34,211,238,.16),rgba(34,211,238,.05))!important;border-color:rgba(34,211,238,.34)!important}
.conv-header-actions .labs-chat-btn{color:#c4b5fd!important}
.conv-header-actions .labs-chat-btn:hover{color:#fff!important}
.conv-header.has-contact:before{content:'ЛИЧНЫЙ ЧАТ';position:absolute;left:50%;top:8px;transform:translateX(-50%);font-size:8px;line-height:1;letter-spacing:.22em;font-weight:900;color:rgba(151,163,190,.35);pointer-events:none}
.conv-header.has-contact:after{content:''!important}
.messages{padding-top:28px!important}
@media(min-width:761px){.conversation-active{position:relative}.conversation-active:before{content:'';position:absolute;top:88px;left:0;right:0;height:90px;background:linear-gradient(180deg,rgba(8,11,23,.32),transparent);pointer-events:none;z-index:1}.messages{position:relative;z-index:0}}
@media(max-width:760px){
 .conv-header{height:72px!important;min-height:72px!important;padding:8px 9px!important;gap:7px!important}
 .header-back{display:flex!important}
 .header-avatar-wrap{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;border-radius:15px!important}
 .header-avatar-wrap #peer-avatar{width:40px!important;height:40px!important;border-radius:13px!important}
 .header-avatar-wrap .online-dot{width:11px!important;height:11px!important;border-width:2px!important}
 .conv-header-left{gap:7px!important;flex:1;min-width:0}
 .peer-nickname{font-size:14px!important}.peer-meta{gap:5px!important}.peer-username{font-size:10px!important}.peer-presence{font-size:9px!important;padding-left:5px!important}
 .verified-badge{width:14px;height:14px;font-size:9px}
 .conv-header-actions{gap:4px!important}.conv-header-actions .icon-btn{width:35px!important;height:35px!important;border-radius:11px!important}.conv-header-actions .icon-btn svg{width:16px;height:16px}
 .conv-header-actions #btn-archive-chat{display:none!important}
 .conv-header.has-contact:before{display:none!important}
}
@media(max-width:430px){.conv-header-actions #btn-chat-labs{display:none!important}.conv-header-actions{margin-left:auto}.peer-presence{display:none!important}}

/* ---------- HappyGram real profile QR ---------- */
.qr-profile-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin:8px 0 12px}.qr-kicker{font-size:9px;letter-spacing:.18em;color:#9aa4c8;font-weight:800}.qr-profile-head strong{font-size:18px}.qr-profile-head span:last-child{font-size:12px;color:var(--text-muted)}
.qr-img-wrap{width:270px;height:270px;padding:10px;box-sizing:border-box;background:#fff;border-radius:24px;box-shadow:0 18px 55px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12);position:relative}
.hg-qr-code{width:250px;height:250px;position:relative;display:flex;align-items:center;justify-content:center}.hg-qr-code img{display:block;width:250px!important;height:250px!important}.hg-qr-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px #fff,0 5px 16px rgba(0,0,0,.18)}.hg-qr-logo span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#22d3ee);color:#fff;font-size:14px;font-weight:900;letter-spacing:.03em}
.qr-profile-card{max-width:390px!important;text-align:center;padding:30px!important}.qr-profile-avatar{margin:0 auto 14px;width:96px!important;height:96px!important;overflow:hidden;clip-path:circle(50% at 50% 50%)}.qr-profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}.qr-profile-name{font-size:23px;font-weight:800}.qr-profile-handle{color:var(--text-muted);font-size:13px;margin-top:3px}.qr-profile-mood,.qr-profile-text{margin:12px auto 0;max-width:310px;padding:9px 12px;border-radius:14px;background:rgba(139,92,246,.10);font-size:12px;color:#dbe2ff}.qr-profile-actions{display:flex;gap:10px;margin-top:20px}.qr-profile-actions .btn{flex:1}.qr-profile-actions .btn:not(.btn-primary){border:1px solid var(--glass-border);background:rgba(255,255,255,.05);color:var(--text-primary)}
#qr-video{aspect-ratio:4/3;min-height:220px;object-fit:cover;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 45px rgba(0,0,0,.35)}
@media(max-width:520px){.qr-card{max-width:calc(100vw - 28px)!important;padding:24px 18px!important}.qr-img-wrap{width:250px;height:250px}.hg-qr-code,.hg-qr-code img{width:230px!important;height:230px!important}.hg-qr-logo{width:50px;height:50px}.hg-qr-logo span{width:37px;height:37px}.qr-profile-actions{flex-direction:column}}