:root{
  --bg:#080a0d;
  --surf:#0e1217;
  --surf2:#131821;
  --elev:#1a222d;
  --line:rgba(255,255,255,.06);
  --line2:rgba(255,255,255,.12);
  --tx:#eef2f6;
  --dim:#94a0ab;
  --mute:#5d6874;
  --acc:#8b5cf6;
  --acc2:#a855f7;
  --coral:#ff5a3c;
  --deep:#7c3aed;
  --glow:rgba(139,92,246,.45);
  --ok:#2fd07a;
  --warn:#ffb454;
  --bad:#ff5f57;
  --info:#4ea1ff;
  --violet:#b07bff;
  --disp:'Sora',sans-serif;
  --ui:'IBM Plex Sans',sans-serif;
  --sb:env(safe-area-inset-bottom,0px);
  --st:env(safe-area-inset-top,0px);
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
  --ease:cubic-bezier(.22,.9,.28,1);
}

[data-theme="light"]{
  --bg:#f3f5f8;
  --surf:#ffffff;
  --surf2:#edf1f6;
  --elev:#e1e7ee;
  --line:rgba(0,0,0,.06);
  --line2:rgba(0,0,0,.12);
  --tx:#0e1217;
  --dim:#4b5563;
  --mute:#8a94a2;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}

html, body{
  width:100%;
  height:100%;
  height:100dvh;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  touch-action:pan-y;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
}

body{
  font-family:var(--ui);
  color:var(--tx);
  background:var(--bg);
  display:flex;
  -webkit-font-smoothing:antialiased;
}

button, input, textarea{
  font-family:inherit;
  color:inherit;
  outline:none;
  border:none;
  background:none;
}

button{
  cursor:pointer;
  touch-action:manipulation;
}

*:focus{
  outline:none!important;
  box-shadow:none!important;
}

svg{
  display:block;
}

.lucide{
  stroke-width:1.8;
}

::-webkit-scrollbar{
  width:0;
  height:0;
}

.hide{
  display:none!important;
}

/* APP SHELL & DEVICE CONTAINER (100dvh rigid bounds) */
.device{
  position:relative;
  width:100vw;
  max-width:100vw;
  height:100dvh;
  background:var(--surf);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
}

.device::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(139,92,246,.12),transparent 55%),
    radial-gradient(90% 50% at 100% 110%,rgba(255,90,60,.06),transparent 60%);
  pointer-events:none;
  z-index:0;
}

.stack{
  position:absolute;
  inset:0;
  z-index:1;
}

/* SCREENS */
.scr{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transform:scale(.985);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  z-index:1;
}

.scr.on{
  opacity:1;
  visibility:visible;
  transform:none;
  z-index:2;
}

.has-tab{
  padding-bottom:calc(60px + var(--sb));
}

/* AUTH SCREEN */
.auth{
  padding:calc(var(--st)+20px) 20px calc(var(--sb)+20px);
  overflow-y:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
}

.auth-card{
  margin:auto;
  background:linear-gradient(180deg,rgba(19,24,33,.97),rgba(14,18,23,.97));
  border:1px solid var(--line2);
  border-radius:var(--r-lg);
  padding:28px 24px;
  width:100%;
  max-width:380px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9),0 0 40px -15px rgba(139,92,246,.2);
}

.tabs{
  display:flex;
  background:var(--bg);
  border-radius:13px;
  padding:4px;
  gap:4px;
  margin-bottom:16px;
  border:1px solid var(--line);
}

.tab{
  flex:1;
  color:var(--dim);
  font-weight:600;
  font-size:13.5px;
  padding:10px;
  border-radius:10px;
  transition:background .2s,color .2s;
}

.tab.on{
  background:var(--elev);
  color:var(--tx);
}

.fld{
  margin-bottom:12px;
}

.fld label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:var(--mute);
  margin:0 0 6px 3px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.iw{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg);
  border:1px solid var(--line2);
  border-radius:13px;
  padding:0 13px;
  height:48px;
  transition:border-color .2s;
}

.iw:focus-within{
  border-color:var(--acc);
}

.iw input{
  flex:1;
  font-size:15px;
  font-weight:500;
  height:100%;
}

.iw input::placeholder{
  color:var(--mute);
}

.eye{
  color:var(--mute);
  padding:4px;
  display:grid;
  place-items:center;
}

.eye .lucide{
  width:18px;
  height:18px;
}

.uname-hint{
  font-size:11px;
  color:var(--mute);
  margin:4px 3px 0;
  display:flex;
  align-items:center;
  gap:4px;
  min-height:14px;
}

.uname-hint.ok{
  color:var(--ok);
}

.uname-hint.bad{
  color:var(--bad);
}

.bp{
  width:100%;
  border-radius:14px;
  height:50px;
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
  font-family:var(--disp);
  font-weight:700;
  font-size:15px;
  position:relative;
  box-shadow:0 8px 24px -6px var(--glow);
  transition:opacity .2s,transform .1s;
}

.bp:active{
  transform:scale(.98);
}

.bp:disabled{
  opacity:.6;
  pointer-events:none;
}

.bp.ld{
  color:transparent;
  pointer-events:none;
}

.bp.ld::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:20px;
  height:20px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .65s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg);}
}

.err{
  color:var(--bad);
  font-size:12.5px;
  font-weight:600;
  margin:2px 0 10px 3px;
  display:none;
  align-items:center;
  gap:6px;
}

.err.show{
  display:flex;
}

.auth-ft{
  text-align:center;
  color:var(--mute);
  font-size:11px;
  margin-top:16px;
}

/* APPBAR (Fixed top headers) */
.appbar{
  padding:calc(var(--st)+14px) 16px 10px;
  flex-shrink:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  background:var(--surf);
  z-index:30;
  border-bottom:1px solid var(--line);
}

.appbar .apt{
  flex:1;
  min-width:0;
}

.appbar h1{
  font-family:var(--disp);
  font-weight:700;
  font-size:22px;
  letter-spacing:-.02em;
}

.appbar p{
  color:var(--dim);
  font-size:12px;
  margin-top:1px;
}

.appbar .apa{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.appbar .abtn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line2);
  background:var(--surf2);
  color:var(--dim);
  display:grid;
  place-items:center;
  transition:color .15s,background .15s;
}

.appbar .abtn:hover, .appbar .abtn:active{
  color:var(--tx);
  background:var(--elev);
}

.appbar .abtn .lucide{
  width:19px;
  height:19px;
}

/* SCROLL CONTAINER (Strict containment) */
.scrl{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:6px 12px 16px;
  scroll-behavior:smooth;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* CHAT LIST ROWS */
.row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background .15s;
  position:relative;
}

.row:hover, .row:active{
  background:var(--surf2);
}

.rb{
  flex:1;
  min-width:0;
}

.rt{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
}

.rn{
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rtm{
  font-size:11px;
  color:var(--mute);
  flex-shrink:0;
}

.rbt{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:3px;
}

.rpv{
  font-size:13px;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bdg{
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:10px;
  background:var(--acc);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.typing-t{
  color:var(--acc2);
  font-style:italic;
  font-weight:500;
}

/* SAVED MESSAGES (Избранное) BANNER IN CHAT LIST */
.saved-notes-banner{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 12px;
  background:linear-gradient(90deg,rgba(139,92,246,.15),rgba(124,58,237,.06));
  border:1px solid rgba(139,92,246,.25);
  border-radius:var(--r-md);
  margin-bottom:8px;
  cursor:pointer;
  transition:transform .15s,background .15s;
}

.saved-notes-banner:active{
  transform:scale(.985);
}

.snb-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(139,92,246,.35);
}

.snb-icon .lucide{
  width:22px;
  height:22px;
}

.snb-info{
  flex:1;
  min-width:0;
}

.snb-title{
  font-family:var(--disp);
  font-weight:700;
  font-size:15px;
  color:var(--tx);
}

.snb-desc{
  font-size:12px;
  color:var(--dim);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.snb-badge{
  color:var(--acc2);
  padding:4px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.snb-badge .lucide{
  width:16px;
  height:16px;
}

/* FLOATING ACTION BUTTON (FAB) */
.fab-new{
  position:absolute;
  right:18px;
  bottom:calc(74px + var(--sb));
  width:54px;
  height:54px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 8px 24px -4px var(--glow);
  z-index:40;
  transition:transform .2s var(--ease),box-shadow .2s;
}

.fab-new:active{
  transform:scale(.92);
}

.fab-new .lucide{
  width:24px;
  height:24px;
}

/* AVATARS */
.av{
  width:50px;
  height:50px;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center;
  font-family:var(--disp);
  font-weight:700;
  font-size:17px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  cursor:pointer;
}

.av img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.av.sm{
  width:42px;
  height:42px;
  font-size:15px;
}

.av.big{
  width:64px;
  height:64px;
  font-size:23px;
}

.av.xl{
  width:86px;
  height:86px;
  font-size:30px;
}

.av.xxl{
  width:104px;
  height:104px;
  font-size:38px;
}

.sd{
  position:absolute;
  right:1px;
  bottom:1px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ok);
  border:2.5px solid var(--surf);
}

.sd.away{
  background:var(--warn);
}

.sd.off{
  background:var(--mute);
}

/* TABBAR (Bottom Navigation 4 Tabs 1-to-1 Telegram) */
.tabbar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:calc(58px + var(--sb));
  padding-bottom:var(--sb);
  background:rgba(14,18,23,.94);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--line2);
  display:flex;
  z-index:35;
}

[data-theme="light"] .tabbar{
  background:rgba(255,255,255,.94);
}

.tb{
  flex:1;
  color:var(--dim);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:10.5px;
  font-weight:600;
  position:relative;
  transition:color .2s;
}

.tb .lucide{
  width:22px;
  height:22px;
  transition:transform .2s;
}

.tb.on{
  color:var(--acc2);
}

.tb.on .lucide{
  transform:scale(1.08);
}

.tb .tbdg{
  position:absolute;
  top:5px;
  left:50%;
  margin-left:8px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--acc);
  color:#fff;
  font-size:9.5px;
  font-weight:700;
  display:grid;
  place-items:center;
}

.tb-prof-av{
  width:23px;
  height:23px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1.5px solid currentColor;
}

.tb-prof-av img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tb-prof-av .lucide{
  width:16px;
  height:16px;
}

/* CONTACTS TAB STYLING (1-to-1 Telegram) */
.contacts-search-box{
  padding:10px 14px 4px;
  background:var(--surf);
  flex-shrink:0;
}

.contacts-search-box .iw{
  height:44px;
  border-radius:12px;
}

.contacts-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:50px 24px;
}

.contacts-empty-art{
  width:100px;
  height:100px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(255,90,60,.1));
  display:grid;
  place-items:center;
  color:var(--acc2);
  margin-bottom:20px;
  box-shadow:0 8px 30px rgba(139,92,246,.15);
}

.contacts-empty-art .lucide{
  width:48px;
  height:48px;
}

.contacts-empty h3{
  font-family:var(--disp);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.contacts-empty p{
  font-size:13px;
  color:var(--dim);
  line-height:1.5;
  max-width:280px;
  margin-bottom:20px;
}

.bp-sm{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
  font-family:var(--disp);
  font-size:14px;
  font-weight:700;
  box-shadow:0 6px 18px -4px var(--glow);
}

.bp-sm .lucide{
  width:18px;
  height:18px;
}

.contact-letter-head{
  font-size:11px;
  font-weight:700;
  color:var(--acc2);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:10px 8px 4px;
}

.contact-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background .15s;
}

.contact-row:hover, .contact-row:active{
  background:var(--surf2);
}

.contact-info{
  flex:1;
  min-width:0;
}

.contact-name{
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.contact-status{
  font-size:12px;
  color:var(--dim);
  margin-top:1px;
}

/* SETTINGS & CARDS */
.sg{
  background:var(--surf2);
  border:1px solid var(--line2);
  border-radius:var(--r-md);
  overflow:hidden;
  margin-bottom:12px;
}

.si{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 15px;
  cursor:pointer;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}

.si:last-child{
  border:none;
}

.si:hover, .si:active{
  background:var(--elev);
}

.sico{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.sico .lucide{
  width:18px;
  height:18px;
}

.stx{
  flex:1;
  min-width:0;
}

.stx .st-t{
  font-weight:600;
  font-size:14.5px;
}

.stx .st-s{
  font-size:12px;
  color:var(--dim);
  margin-top:1px;
}

.sw{
  width:44px;
  height:26px;
  border-radius:13px;
  background:var(--elev);
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  border:1px solid var(--line2);
  transition:background .2s,border-color .2s;
}

.sw::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#bcc4cc;
  transition:left .22s;
}

.sw.on{
  background:var(--acc);
  border-color:var(--acc);
}

.sw.on::after{
  left:20px;
  background:#fff;
}

.prof-header-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 16px;
}

.prof-header-card .pi{
  flex:1;
  min-width:0;
}

.prof-header-card .pn{
  font-family:var(--disp);
  font-weight:700;
  font-size:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.prof-header-card .pp{
  font-size:12.5px;
  color:var(--dim);
  margin-top:2px;
}

.av-cam-badge{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--acc2);
  color:#fff;
  border:2.5px solid var(--surf2);
  display:grid;
  place-items:center;
}

.av-cam-badge .lucide{
  width:12px;
  height:12px;
}

/* DEDICATED PROFILE SCREEN (1-to-1 Screenshot 4) */
.profile-view-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px 12px 24px;
}

.profile-avatar-box{
  position:relative;
  margin-bottom:14px;
}

.profile-name{
  font-family:var(--disp);
  font-size:22px;
  font-weight:800;
  margin-bottom:4px;
  text-align:center;
}

.profile-status{
  font-size:13px;
  color:var(--dim);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:5px;
}

.profile-actions-row{
  display:flex;
  gap:10px;
  width:100%;
  max-width:360px;
  margin-bottom:18px;
}

.prof-action-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--surf2);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:12px 8px;
  color:var(--tx);
  font-size:11.5px;
  font-weight:600;
  transition:background .15s,border-color .15s;
}

.prof-action-btn:active{
  background:var(--elev);
  border-color:var(--acc);
}

.prof-action-btn .lucide{
  width:20px;
  height:20px;
  color:var(--acc2);
}

.profile-info-card{
  width:100%;
  max-width:360px;
  background:var(--surf2);
  border:1px solid var(--line2);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:16px;
}

.prof-info-row{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}

.prof-info-row:last-child{
  border:none;
}

.prof-info-val{
  font-size:14.5px;
  font-weight:600;
  color:var(--tx);
}

.prof-info-lbl{
  font-size:11.5px;
  color:var(--mute);
  margin-top:2px;
}

.profile-tabs-bar{
  display:flex;
  width:100%;
  max-width:360px;
  background:var(--surf2);
  border-radius:12px;
  padding:3px;
  gap:3px;
  margin-bottom:16px;
  border:1px solid var(--line2);
}

.prof-tab-btn{
  flex:1;
  padding:8px 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--dim);
  border-radius:9px;
  text-align:center;
}

.prof-tab-btn.on{
  background:var(--elev);
  color:var(--tx);
}

.profile-feed-empty{
  text-align:center;
  padding:24px 16px;
  color:var(--mute);
}

.profile-feed-empty h4{
  font-size:16px;
  font-weight:700;
  color:var(--tx);
  margin-bottom:6px;
}

.profile-feed-empty p{
  font-size:12.5px;
  color:var(--dim);
  margin-bottom:16px;
}

/* CHAT DIALOG VIEW (1-to-1 Telegram screenshots 7-11) */
.chat-v{
  position:absolute;
  inset:0;
  z-index:50;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .32s var(--ease);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.chat-v.open{
  transform:translateX(0);
}

.ch-h{
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(var(--st)+10px) 10px 10px;
  background:rgba(14,18,23,.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line2);
  flex-shrink:0;
  z-index:30;
  position:relative;
}

[data-theme="light"] .ch-h{
  background:rgba(255,255,255,.94);
}

.cb{
  width:40px;
  height:40px;
  border-radius:12px;
  color:var(--dim);
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:color .15s,background .15s;
}

.cb:hover, .cb:active{
  color:var(--tx);
  background:var(--surf2);
}

.cb .lucide{
  width:20px;
  height:20px;
}

.chi{
  flex:1;
  min-width:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:11px;
}

.chi .ct{
  font-family:var(--disp);
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chi .cst{
  font-size:11.5px;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:1px;
  min-height:14px;
}

.chi .cst.live{
  color:var(--acc2);
}

.ch-acts{
  display:flex;
  gap:2px;
  flex-shrink:0;
}

/* UNKNOWN CONTACT TOP BANNER */
.unknown-banner{
  background:linear-gradient(90deg,rgba(139,92,246,.25),rgba(23,30,40,.9));
  border-bottom:1px solid rgba(139,92,246,.3);
  padding:9px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
  z-index:28;
}

.ub-acts{
  display:flex;
  align-items:center;
  gap:10px;
}

.ub-btn{
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ub-btn .lucide{
  width:14px;
  height:14px;
}

.ub-btn.dngr{
  color:var(--bad);
}

.ub-x{
  color:var(--dim);
  font-size:16px;
  padding:3px;
  display:grid;
  place-items:center;
}

.ub-x .lucide{
  width:16px;
  height:16px;
}

/* MESSAGES SCROLL AREA WITH CYBER DARK WALLPAPER */
.msg-sc{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:14px 12px 10px;
  position:relative;
  scroll-behavior:smooth;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255,90,60,.04) 0%, transparent 60%),
    var(--bg);
}

.pin-bar{
  background:rgba(255,180,84,.12);
  border-bottom:1px solid rgba(255,180,84,.3);
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--warn);
  flex-shrink:0;
  z-index:25;
}

.pin-bar .lucide{
  width:15px;
  height:15px;
}

.pin-bar .px{
  margin-left:auto;
  color:var(--dim);
  font-size:18px;
  cursor:pointer;
}

.scroll-down{
  position:absolute;
  right:16px;
  bottom:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--elev);
  border:1px solid var(--line2);
  color:var(--dim);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:6;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}

.scroll-down.show{
  display:flex;
}

.scroll-down .lucide{
  width:18px;
  height:18px;
}

/* MESSAGE BUBBLES (1-to-1 Telegram curvature & Cyber Dark Neon) */
.mr{
  display:flex;
  gap:7px;
  align-items:flex-end;
  margin-bottom:4px;
  max-width:100%;
  position:relative;
}

.mr.out{
  flex-direction:row-reverse;
  margin-right:2px;
}

.mr.in{
  margin-left:-2px;
}

.mr.gap{
  margin-top:12px;
}

.ma{
  width:32px;
  height:32px;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:var(--disp);
  font-weight:700;
  font-size:12px;
  margin-bottom:2px;
  overflow:hidden;
  cursor:pointer;
}

.ma img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ms{
  width:32px;
  flex-shrink:0;
}

.bb{
  max-width:calc(100% - 64px);
  min-width:0;
  padding:8px 12px 6px;
  border-radius:18px;
  position:relative;
  word-break:break-word;
  overflow-wrap:anywhere;
  font-size:14px;
  line-height:1.45;
}

.mr.in .bb{
  background:var(--surf2);
  border:1px solid var(--line2);
  border-bottom-left-radius:4px;
  color:var(--tx);
}

.mr.out .bb{
  background:linear-gradient(135deg,var(--deep) 0%,var(--acc2) 100%);
  border-bottom-right-radius:4px;
  color:#fff;
  box-shadow:0 4px 16px -2px rgba(124,58,237,.35);
}

.mr.out .bb.media{
  background:transparent!important;
  border:none!important;
  padding:0!important;
  box-shadow:none!important;
}

.mr.out .bb.media .att{
  background:var(--surf2);
  border:1px solid var(--line2);
}

.mr.out .bb.media .bm{
  color:rgba(255,255,255,.75)!important;
  background:rgba(0,0,0,.45);
  padding:2px 7px;
  border-radius:8px;
}

.mr.deleted .bb{
  opacity:.6;
}

.bs{
  font-size:11.5px;
  font-weight:700;
  margin-bottom:2px;
  font-family:var(--disp);
  color:var(--acc2);
}

.bt{
  font-size:14.5px;
  line-height:1.42;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.bt.deleted{
  font-style:italic;
  opacity:.7;
}

.bt a{
  color:inherit;
  text-decoration:underline;
}

.bt code{
  background:rgba(0,0,0,.25);
  padding:1px 5px;
  border-radius:5px;
  font-family:monospace;
  font-size:12.5px;
}

/* LINK PREVIEWS */
.link-preview{
  margin-top:6px;
  border-radius:11px;
  overflow:hidden;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  padding:8px 10px;
}

.link-preview .lp-t{
  font-weight:700;
  font-size:12.5px;
  color:var(--tx);
}

.mr.out .link-preview .lp-t{
  color:#fff;
}

.link-preview .lp-u{
  font-size:11px;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

.mr.out .link-preview .lp-u{
  color:rgba(255,255,255,.8);
}

/* FILE ATTACHMENTS (Matching screenshots 7-11) */
.att{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px 11px;
  margin-bottom:2px;
  cursor:pointer;
}

.mr.in .att{
  background:var(--bg);
}

.ai{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
}

.ai .lucide{
  width:18px;
  height:18px;
}

.an{
  font-weight:600;
  font-size:13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:180px;
}

.asz{
  font-size:11px;
  color:var(--dim);
  font-weight:500;
  margin-top:1px;
}

.mr.out .asz{
  color:rgba(255,255,255,.75);
}

.ph{
  border-radius:13px;
  overflow:hidden;
  margin-bottom:2px;
  max-width:240px;
  cursor:pointer;
  background:var(--bg);
  min-height:60px;
}

.ph img{
  width:100%;
  display:block;
}

.pc{
  font-size:13.5px;
  margin-top:4px;
}

/* METADATA (TIME & CHECKMARKS) */
.bm{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin-top:3px;
  font-size:10.5px;
  color:var(--mute);
  font-weight:500;
}

.mr.out .bm{
  color:rgba(255,255,255,.8);
}

.bm .lucide{
  width:15px;
  height:15px;
}

/* REPLIES */
.reply-quote{
  background:rgba(0,0,0,.25);
  border-left:3px solid var(--acc2);
  border-radius:7px;
  padding:5px 9px;
  margin-bottom:6px;
  cursor:pointer;
  font-size:12px;
  line-height:1.3;
  max-height:50px;
  overflow:hidden;
}

.mr.out .reply-quote{
  background:rgba(255,255,255,.16);
  border-left-color:#fff;
}

.reply-quote .rq-a{
  font-weight:700;
  color:var(--acc2);
  font-size:11px;
  margin-bottom:1px;
}

.mr.out .reply-quote .rq-a{
  color:#fff;
}

.reply-quote .rq-t{
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mr.out .reply-quote .rq-t{
  color:rgba(255,255,255,.9);
}

/* COMPOSER BAR (Telegram 1-to-1 layout) */
.cmp{
  flex-shrink:0;
  background:rgba(14,18,23,.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--line2);
  padding:8px 10px calc(8px + var(--sb));
  position:relative;
  z-index:25;
}

[data-theme="light"] .cmp{
  background:rgba(255,255,255,.96);
}

.cmp.disabled{
  opacity:.45;
  pointer-events:none;
}

.rpb{
  display:none;
  align-items:center;
  gap:9px;
  background:var(--surf2);
  border-left:3px solid var(--acc2);
  border-radius:10px;
  padding:7px 11px;
  margin-bottom:8px;
}

.rpb.show{
  display:flex;
}

.rpb .rbt2{
  flex:1;
  min-width:0;
}

.rpb .rba{
  font-size:11.5px;
  font-weight:700;
  color:var(--acc2);
}

.rpb .rbm{
  font-size:12.5px;
  color:var(--dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rpb .rbx{
  color:var(--mute);
  font-size:20px;
  line-height:1;
  padding:0 4px;
}

.cs{
  display:flex;
  align-items:flex-end;
  gap:6px;
  background:var(--surf2);
  border:1px solid var(--line2);
  border-radius:24px;
  padding:3px 5px 3px 6px;
  position:relative;
}

.cs textarea{
  flex:1;
  resize:none;
  font-size:15px;
  line-height:1.4;
  max-height:120px;
  padding:8px 4px;
  color:var(--tx);
}

.cs textarea::placeholder{
  color:var(--mute);
}

.ci2{
  width:38px;
  height:38px;
  border-radius:50%;
  color:var(--dim);
  display:grid;
  place-items:center;
  flex-shrink:0;
  transition:color .15s,background .15s;
}

.ci2:hover, .ci2:active{
  color:var(--tx);
  background:var(--elev);
}

.ci2 .lucide{
  width:20px;
  height:20px;
}

.sb{
  width:40px;
  height:40px;
  border-radius:50%;
  flex-shrink:0;
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 4px 14px -2px var(--glow);
  transition:transform .15s;
}

.sb:active{
  transform:scale(.92);
}

.sb:disabled{
  background:var(--elev);
  color:var(--mute);
  cursor:default;
  box-shadow:none;
}

.sb .lucide{
  width:18px;
  height:18px;
}

/* EMOJI / GIF / STICKER DRAWER */
.emoji-picker{
  position:absolute;
  bottom:calc(100% + 6px);
  left:8px;
  right:8px;
  background:var(--elev);
  border:1px solid var(--line2);
  border-radius:16px;
  padding:10px;
  display:none;
  z-index:20;
  box-shadow:0 18px 45px -15px rgba(0,0,0,.85);
  max-height:300px;
  overflow-y:auto;
}

.emoji-picker.open{
  display:block;
}

.ep-cat{
  font-size:10.5px;
  font-weight:700;
  color:var(--mute);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:6px 6px 3px;
}

.ep-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:2px;
}

.ep-grid button{
  font-size:22px;
  padding:4px;
  border-radius:8px;
  line-height:1;
  transition:background .15s,transform .1s;
}

.ep-grid button:active{
  transform:scale(1.2);
  background:var(--surf2);
}

/* FULLSCREEN PAGES (.fs-page) */
.fs-page{
  position:absolute;
  inset:0;
  z-index:55;
  background:var(--surf);
  transform:translateY(100%);
  transition:transform .3s var(--ease);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.fs-page.open{
  transform:translateY(0);
}

.fs-h{
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(var(--st)+12px) 14px 10px;
  border-bottom:1px solid var(--line2);
  flex-shrink:0;
  background:var(--surf);
  z-index:10;
}

.fs-title{
  font-family:var(--disp);
  font-weight:700;
  font-size:18px;
  flex:1;
}

.fs-body{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 14px calc(16px + var(--sb));
}

/* OVERLAYS: MODAL, SCRIM, SHEET, CONTEXT MENU, TOAST */
.sh-scrim{
  position:absolute;
  inset:0;
  z-index:60;
  background:rgba(0,0,0,.65);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s,visibility .25s;
}

.sh-scrim.open{
  opacity:1;
  visibility:visible;
}

.sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:65;
  background:var(--surf2);
  border-radius:22px 22px 0 0;
  border-top:1px solid var(--line2);
  transform:translateY(100%);
  transition:transform .32s var(--ease);
  max-height:85%;
  overflow-y:auto;
  padding:8px 0 calc(20px + var(--sb));
  box-shadow:0 -10px 40px rgba(0,0,0,.6);
}

.sheet.open{
  transform:translateY(0);
}

.sg2{
  width:40px;
  height:4px;
  border-radius:2px;
  background:var(--line2);
  margin:6px auto 8px;
}

.sh-h{
  font-family:var(--disp);
  font-weight:700;
  font-size:17px;
  padding:10px 18px 8px;
}

.mi{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 18px;
  font-size:14.5px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s;
}

.mi:hover, .mi:active{
  background:var(--elev);
}

.mi .mic{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}

.mi .mic .lucide{
  width:18px;
  height:18px;
}

.mi.dngr{
  color:var(--bad);
}

.mod{
  position:absolute;
  inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.7);
}

.mod.open{
  display:flex;
}

.mc{
  background:var(--surf2);
  border:1px solid var(--line2);
  border-radius:20px;
  padding:22px;
  width:100%;
  max-width:340px;
  max-height:88%;
  overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.8);
}

.mc h3{
  font-family:var(--disp);
  font-weight:700;
  font-size:18px;
  margin-bottom:8px;
}

.mc p{
  color:var(--dim);
  font-size:13.5px;
  line-height:1.5;
  margin-bottom:18px;
}

.ma2{
  display:flex;
  gap:10px;
}

.mb{
  flex:1;
  border-radius:12px;
  height:44px;
  font-weight:600;
  font-size:14px;
  display:grid;
  place-items:center;
}

.mb.ca{
  background:var(--elev);
  color:var(--tx);
}

.mb.ok{
  background:linear-gradient(135deg,var(--deep),var(--acc2));
  color:#fff;
}

.msg-ctx{
  position:fixed;
  z-index:80;
  background:var(--elev);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:5px;
  box-shadow:0 20px 48px -10px rgba(0,0,0,.8);
  display:none;
  flex-direction:column;
  min-width:180px;
}

.msg-ctx.open{
  display:flex;
}

.msg-ctx button{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  color:var(--tx);
  font-size:13.5px;
  font-weight:500;
  border-radius:9px;
  text-align:left;
  transition:background .15s;
}

.msg-ctx button:hover, .msg-ctx button:active{
  background:var(--surf2);
}

.msg-ctx button.dngr{
  color:var(--bad);
}

.msg-ctx .lucide{
  width:17px;
  height:17px;
}

.react-bar{
  display:flex;
  gap:3px;
  padding:6px 6px 5px;
  border-bottom:1px solid var(--line2);
  margin-bottom:3px;
}

.react-bar button{
  font-size:20px;
  padding:4px 6px;
  border-radius:8px;
  line-height:1;
}

.toast{
  position:absolute;
  left:50%;
  bottom:calc(78px + var(--sb));
  transform:translateX(-50%) translateY(18px);
  background:var(--elev);
  border:1px solid var(--line2);
  color:var(--tx);
  padding:11px 18px;
  border-radius:14px;
  font-size:13.5px;
  font-weight:500;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
  z-index:90;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:88%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.toast .lucide{
  width:18px;
  height:18px;
  color:var(--acc2);
  flex-shrink:0;
}

.offline-bar{
  position:absolute;
  left:0;
  right:0;
  top:0;
  background:var(--bad);
  color:#fff;
  text-align:center;
  font-size:11.5px;
  font-weight:600;
  padding:5px;
  z-index:100;
  display:none;
}

.offline-bar.show{
  display:block;
}

.upload-status{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:95;
  background:var(--elev);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:16px 24px;
  display:none;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 20px 50px rgba(0,0,0,.8);
}

.upload-status.show{
  display:flex;
}

.upload-spin{
  width:20px;
  height:20px;
  border:2.5px solid rgba(255,255,255,.15);
  border-top-color:var(--acc2);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

.bg-badge{
  position:absolute;
  top:calc(var(--st)+10px);
  left:50%;
  transform:translateX(-50%);
  z-index:54;
  background:rgba(47,208,122,.15);
  border:1px solid rgba(47,208,122,.35);
  color:var(--ok);
  font-size:11px;
  font-weight:700;
  padding:4px 11px;
  border-radius:999px;
  display:none;
  align-items:center;
  gap:5px;
  pointer-events:none;
}

.bg-badge.show{
  display:flex;
}

.bg-badge .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
}

.empty{
  text-align:center;
  color:var(--mute);
  padding:48px 24px;
  font-size:14px;
  line-height:1.6;
}

.empty .lucide{
  width:40px;
  height:40px;
  margin:0 auto 12px;
  color:var(--mute);
  display:block;
}

.online-txt{
  font-size:11px;
  color:var(--dim);
}

.online-txt.live{
  color:var(--ok);
}

.online-txt .dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  margin-right:4px;
  vertical-align:middle;
}

.code-field{
  background:rgba(139,92,246,.08);
  border:1px dashed var(--acc2);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}

.code-field .cf-h{
  font-size:11.5px;
  font-weight:700;
  color:var(--acc2);
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.code-field .cf-h a{
  color:var(--info);
  text-decoration:none;
  font-size:11px;
  font-weight:500;
  cursor:pointer;
}

.code-field .iw{
  border-color:var(--acc2);
  background:var(--surf);
}

.code-field input{
  font-size:22px;
  letter-spacing:6px;
  text-align:center;
  font-weight:700;
  color:var(--acc2);
}