:root{--bg:#080914;--line:#ffffff17;--text:#f5f4ff;--muted:#9295b1;--purple:#a58aff;--cyan:#69e9f6}*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:radial-gradient(ellipse at 13% 20%,#694abf22,transparent 32%),radial-gradient(ellipse at 87% 85%,#24a1b717,transparent 30%),#080914;overflow-x:hidden}.noise{position:fixed;inset:-40%;pointer-events:none;opacity:.035;z-index:8;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:grain .2s steps(2) infinite}@keyframes grain{0%{transform:translate(0)}50%{transform:translate(1%,-1%)}100%{transform:translate(-1%,1%)}}#particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.ambient{position:fixed;width:460px;height:460px;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.13}.a1{background:#8154ff;top:-250px;left:-150px}.a2{background:#20d7e9;right:-280px;bottom:-220px}.topbar{height:82px;padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10;position:relative;z-index:2;background:#08091480;backdrop-filter:blur(18px)}.brand{font:700 17px "Space Grotesk",Inter,sans-serif;letter-spacing:.17em;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px}.brand span{font-size:25px;color:var(--cyan);text-shadow:0 0 22px #61eaff}.top-status{font-size:9px;letter-spacing:.19em;color:#777c99}.top-status i,.status-chip i,.room-info i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#73f7bd;box-shadow:0 0 12px #73f7bd;margin-right:9px}.top-right{display:flex;align-items:center;gap:18px}.top-right small{font-size:9px;letter-spacing:.15em;color:#676c86}.avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#9d7cff,#52d8e9);color:#101024;font-weight:800}.avatar.mini{width:31px;height:31px;border-radius:50%;font-size:12px}.shell{position:relative;z-index:1;max-width:1250px;margin:0 auto;padding:7vh 42px 8vh;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(420px,1fr);gap:clamp(50px,8vw,130px);align-items:center;min-height:calc(100vh - 145px)}.welcome{position:relative;min-height:550px;display:flex;flex-direction:column;justify-content:center;isolation:isolate}.eyebrow,.kicker{font-size:9px;letter-spacing:.21em;color:#999db8;font-weight:700}.eyebrow i{display:inline-block;width:23px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:10px;box-shadow:0 0 10px var(--cyan)}h1{font:700 clamp(65px,7.6vw,108px)/.83 "Space Grotesk",Inter,sans-serif;letter-spacing:-.08em;margin:30px 0 25px;position:relative;z-index:2}h1 em{font-style:normal;background:linear-gradient(110deg,#fff 5%,#a58aff 53%,#69e9f6);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{max-width:390px;font-size:14px;line-height:1.9;color:#9296b0;position:relative;z-index:2}.welcome-foot{margin-top:70px;display:flex;align-items:center;gap:12px;color:#666b88;font-size:9px;letter-spacing:.2em;position:relative;z-index:2}.welcome-foot b{font-size:19px;color:#a58aff;text-shadow:0 0 20px #a58aff}.orbit{position:absolute;border:1px solid #9f87ff29;border-radius:50%;z-index:-1;pointer-events:none}.o1{width:430px;height:430px;right:-50px;top:50%;transform:translateY(-50%) rotate(-25deg);animation:orbit 34s linear infinite}.o2{width:315px;height:470px;right:10px;top:50%;transform:translateY(-50%) rotate(50deg);border-color:#69e9f61f;animation:orbit 27s linear infinite reverse}.planet{position:absolute;right:58px;top:50%;width:135px;height:135px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 32% 25%,#e2d8ff,#9c7bfa 12%,#4e367e 37%,#17132e 68%,#090914 78%);box-shadow:inset -18px -12px 32px #05050e,0 0 75px #8d6bff38;z-index:-1;animation:float 7s ease-in-out infinite}@keyframes orbit{to{rotate:335deg}}@keyframes float{50%{translate:0 -12px}}.app-panel{width:100%;max-width:none;justify-self:end;min-height:565px;border:1px solid #ffffff1f;border-radius:27px;background:linear-gradient(145deg,#191a31e0,#0d0e1de8);box-shadow:0 35px 100px #0005,0 0 70px #8b67ff0b;backdrop-filter:blur(25px);overflow:hidden;position:relative}.app-panel:before{content:"";position:absolute;inset:0 15% auto;height:1px;background:linear-gradient(90deg,transparent,#c8b6ff7a,transparent)}.auth-view{padding:35px 38px 28px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.kicker{font-size:8px;color:#8287a5}h2{font:600 28px "Space Grotesk",Inter,sans-serif;letter-spacing:-.04em;margin:10px 0 0}.status-chip{font-size:8px;letter-spacing:.12em;color:#9da3bd;border:1px solid var(--line);padding:8px 10px;border-radius:99px;white-space:nowrap}.status-chip i{width:5px;height:5px;margin-right:6px}.tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#0a0b19;border:1px solid #ffffff0b;border-radius:12px;margin:30px 0 26px}.tab{border:0;border-radius:9px;padding:11px;background:transparent;color:#777d99;font:500 12px Inter;cursor:pointer;transition:.25s}.tab.active{color:#f5f4ff;background:#25243e;box-shadow:inset 0 0 0 1px #ffffff0c}form label{display:block;font-size:11px;color:#c2c4d7;margin:18px 0 9px}.input-wrap{display:flex;align-items:center;height:49px;border:1px solid #ffffff12;background:#0b0c1b;border-radius:11px;padding:0 13px;transition:.25s}.input-wrap:focus-within{border-color:#9d82ff8c;box-shadow:0 0 0 3px #9d82ff12}.input-wrap>span{color:#8185a4;font-size:16px;margin-right:11px}.input-wrap input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#f4f3ff;font:12px Inter}.input-wrap input::placeholder{color:#555b78}.input-wrap button{background:transparent;border:0;color:#777d9b;padding:5px;cursor:pointer}.hint{font-size:10px;color:#777d99;margin:12px 0 0;line-height:1.6;min-height:16px}.error{color:#ff9da9;font-size:11px;line-height:1.5;min-height:16px;margin:8px 0}.submit-btn{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:15px 17px;border:0;border-radius:11px;background:linear-gradient(105deg,#e8e2ff,#a8a1ff 60%,#8ce9f2);color:#121126;font:700 12px Inter;cursor:pointer;transition:transform .25s,box-shadow .25s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #8e7aff35}.submit-btn b{font-size:17px}.privacy{border-top:1px solid #ffffff0b;padding-top:19px;margin-top:24px;color:#686d88;font-size:9px;display:flex;gap:9px;align-items:center}.privacy span{font-size:15px;color:#a58aff}.hidden{display:none!important}.chat-view{display:flex;flex-direction:column;min-height:100vh;height:100vh;width:100vw}.chat-header{padding:23px 25px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff0c}.room-icon{width:41px;height:41px;display:grid;place-items:center;background:#9e86ff1b;border:1px solid #a58aff30;border-radius:14px;color:#b8a7ff;font-size:22px}.room-info{display:flex;flex-direction:column;gap:6px;flex:1}.room-info strong{font-size:13px}.room-info span{font-size:10px;color:#777d99}.room-info i{width:5px;height:5px;margin-right:5px}.logout{border:1px solid var(--line);background:transparent;color:#a5a8c0;border-radius:9px;padding:9px 10px;font-size:10px;cursor:pointer}.logout:hover{color:#fff;border-color:#9d82ff77}.user-strip{display:flex;align-items:center;gap:11px;padding:14px 25px;background:#ffffff03;border-bottom:1px solid #ffffff08}.user-strip>div{display:flex;flex-direction:column;gap:4px;flex:1}.user-strip small{font-size:8px;letter-spacing:.13em;color:#747a98}.user-strip strong{font-size:11px}.online-pill{font-size:8px;letter-spacing:.1em;color:#7df4ba;background:#73f5b20c;border:1px solid #73f5b226;padding:6px 8px;border-radius:20px}.messages{height:300px;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:15px;scrollbar-width:thin;scrollbar-color:#3b365a transparent}.empty-state{margin:auto;display:flex;flex-direction:column;align-items:center;gap:9px;color:#7b809d;text-align:center}.empty-state b{font-size:30px;color:#ad99ff;text-shadow:0 0 25px #ad99ff55}.empty-state strong{font-size:12px;font-weight:600;color:#c8c8db}.empty-state span{font-size:10px}.message{display:flex;gap:9px;align-items:flex-start;animation:msgIn .3s ease both}.message.own{flex-direction:row-reverse}.msg-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(140deg,#343353,#24263e);color:#c5b8ff;font-size:10px;font-weight:800}.bubble-wrap{max-width:80%;display:flex;flex-direction:column;gap:5px}.message.own .bubble-wrap{align-items:flex-end}.msg-meta{font-size:9px;color:#747a98;display:flex;gap:8px;align-items:center}.msg-meta strong{color:#c2c4d9;font-weight:600}.bubble{font-size:11px;line-height:1.65;color:#e5e4f3;padding:10px 12px;border-radius:4px 13px 13px 13px;background:#ffffff09;border:1px solid #ffffff0b;overflow-wrap:anywhere;white-space:pre-wrap}.own .bubble{background:linear-gradient(120deg,#6551a82e,#3d74832b);border-color:#a58aff28;border-radius:13px 4px 13px 13px}@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.composer{margin:0 20px;padding:7px 7px 7px 14px;display:flex;gap:8px;align-items:flex-end;border:1px solid #ffffff13;background:#0b0c1b;border-radius:14px}.composer textarea{resize:none;flex:1;max-height:95px;min-height:30px;outline:none;border:0;background:transparent;color:#f5f4ff;font:11px/1.6 Inter;padding:7px 0}.composer textarea::placeholder{color:#626783}.send-btn{height:34px;width:36px;flex:0 0 36px;border:0;border-radius:10px;background:linear-gradient(135deg,#dcd4ff,#7be5f0);color:#15142b;font-size:20px;cursor:pointer;transition:.2s}.send-btn:hover{transform:translateY(-2px);box-shadow:0 4px 18px #8e7aff45}.chat-foot{display:flex;justify-content:space-between;padding:10px 23px 0;color:#555b78;font-size:8px;letter-spacing:.06em}.chat-error{padding:0 23px;margin:6px 0 10px}footer{position:relative;z-index:1;border-top:1px solid #ffffff08;display:flex;justify-content:space-between;padding:22px 5.5vw;color:#5e637e;font-size:8px;letter-spacing:.17em}footer b{color:#a58aff;margin-left:8px}@media(max-width:950px){.shell{grid-template-columns:1fr;gap:25px;padding:60px 22px}.welcome{min-height:360px}.welcome h1{font-size:clamp(70px,14vw,100px)}.welcome-foot{margin-top:35px}.o1{right:5%;width:310px;height:310px}.o2{right:15%;width:240px;height:350px}.planet{right:20%;width:95px;height:95px}.app-panel{justify-self:center;max-width:540px}.topbar{padding:0 22px}.top-status{display:none}}@media(max-width:500px){.topbar{height:68px}.brand{font-size:14px}.top-right small{display:none}.shell{padding:44px 14px 55px}.welcome{min-height:330px}.welcome h1{font-size:70px}.lead{font-size:12px;max-width:290px}.o1{right:-20%;width:270px;height:270px}.o2{right:-12%;width:210px;height:330px}.planet{right:9%;width:80px;height:80px}.app-panel{border-radius:21px;min-height:0}.auth-view{padding:26px 22px 23px}h2{font-size:24px}.status-chip{font-size:7px;padding:7px}.chat-view{min-height:550px}.messages{height:290px;padding:17px 14px}.chat-header{padding:18px 16px}.user-strip{padding:12px 16px}.composer{margin:0 12px}.chat-foot{padding-left:15px;padding-right:15px}footer{padding:18px 15px;font-size:7px;letter-spacing:.1em}footer span:last-child{max-width:45%;text-align:right}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.extras{padding:10px;border-bottom:1px solid #ffffff12}.extras input{background:#ffffff10;border:1px solid #ffffff22;color:white;padding:8px;border-radius:8px}.extras button{margin:4px;padding:7px;border-radius:8px;background:#ffffff12;color:white;border:1px solid #ffffff20}.extras div{margin-top:6px;white-space:pre-line}

/* Telegram style workspace */
.chat-view{min-height:100vh;height:100vh;width:100vw;background:#090a18;border-radius:0}.telegram-layout{display:flex;height:100%}.chat-sidebar{width:340px;border-right:1px solid #ffffff12;background:#0d0e1c;padding:14px;overflow:auto}.profile-row{display:flex;align-items:center;gap:12px;padding:8px 0 16px}.profile-row div{flex:1}.profile-row small,.dialog small{display:block;color:#7e829d;font-size:10px}.logout{background:none;border:0;color:#9da3bd;font-size:18px}.search-box{display:flex;background:#15162a;border-radius:12px;border:1px solid #ffffff12;overflow:hidden}.search-box input{flex:1;background:transparent;border:0;outline:0;color:white;padding:10px}.search-box button,.new-group{background:#ffffff10;color:white;border:0;padding:10px;cursor:pointer}.new-group{width:100%;margin:12px 0;border-radius:10px}.result-list button{display:block;width:100%;text-align:left;background:#ffffff08;color:#ddd;border:0;padding:8px;border-radius:8px;margin:3px 0}.dialogs{margin-bottom:10px}.dialog{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;color:#ddd}.dialog.active{background:#ffffff12}.dialog b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#6b5ce7}.dialog strong{font-size:13px}.telegram-chat{flex:1;display:flex;flex-direction:column}.telegram-chat .chat-header{height:70px;border-bottom:1px solid #ffffff12}.telegram-chat .messages{flex:1;height:auto}.composer{margin-bottom:15px}@media(max-width:800px){.chat-sidebar{width:100px}.profile-row strong,.profile-row small,.dialog span,.new-group{display:none}.search-box input{display:none}}

/* Full screen Telegram-like transition after login */
.chat-view{
  transform-origin:center;
}
.workspace-enter{
  animation:workspaceIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.auth-exit{
  animation:authOut .45s ease both;
}
@keyframes workspaceIn{
  0%{opacity:0;transform:translateY(40px) scale(.92);filter:blur(10px)}
  60%{opacity:1;transform:translateY(-5px) scale(1.02);filter:blur(0)}
  100%{opacity:1;transform:none}
}
@keyframes authOut{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.92) translateY(-25px);filter:blur(8px)}
}
.telegram-layout{
  animation:layoutFade .9s ease .15s both;
}
@keyframes layoutFade{
  from{opacity:0}
  to{opacity:1}
}
.chat-sidebar,.telegram-chat{
  animation:panelSlide .8s cubic-bezier(.2,.8,.2,1) both;
}
.telegram-chat{animation-delay:.1s}
@keyframes panelSlide{
  from{opacity:0;transform:translateX(-35px)}
  to{opacity:1;transform:none}
}

/* Fullscreen chat mode */
body:has(.chat-view:not(.hidden)){overflow:hidden}.chat-view{position:fixed;inset:0;z-index:20;border:0;border-radius:0}.telegram-layout{height:100vh}.telegram-chat{height:100vh}.messages{min-height:0}

/* FULLSCREEN CHAT FIX */
body.chat-mode {
  overflow: hidden;
}
body.chat-mode .topbar,
body.chat-mode .shell > .welcome,
body.chat-mode footer,
body.chat-mode .noise,
body.chat-mode .ambient,
body.chat-mode #particles {
  display: none !important;
}
body.chat-mode .shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 20;
}
body.chat-mode .app-panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
}
body.chat-mode #chatView {
  width: 100vw;
  height: 100vh;
}
.chat-view.workspace-enter {
  animation: chatOpen .45s ease forwards;
}
@keyframes chatOpen {
  from {opacity:0; transform:scale(.98)}
  to {opacity:1; transform:scale(1)}
}

.chat-sidebar {
  position: relative;
}
.create-chat-btn {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #6d5cff;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, filter .25s ease;
  z-index: 5;
}
.create-chat-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
}
.create-chat-btn svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.create-chat-btn svg{width:26px;height:26px;display:block;fill:currentColor;}
.create-chat-btn{cursor:pointer;}

/* Telegram style menu */
.menu-btn{
 position:absolute; top:14px; left:14px; width:42px; height:42px;
 border:0; background:transparent; display:flex; flex-direction:column;
 justify-content:center; gap:5px; cursor:pointer; z-index:30;
}
.menu-btn span{height:2px;width:22px;background:currentColor;border-radius:5px;display:block}
.chat-sidebar{padding-top:55px}
.side-menu-overlay{
 position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;
 transition:.25s;z-index:40
}
.side-menu{
 position:fixed;top:0;left:0;height:100vh;width:300px;background:#fff;color:#222;
 transform:translateX(-100%);transition:.3s ease;z-index:41;
 padding:16px 0;box-shadow:10px 0 30px rgba(0,0,0,.25);
}
.side-menu.open{transform:translateX(0)}
.side-menu-overlay.open{opacity:1;pointer-events:auto}
.menu-profile{display:flex;align-items:center;gap:16px;padding:8px 24px 18px;font-size:16px}
.menu-line{height:1px;background:#ddd;margin-bottom:8px}
.side-menu button{
 width:100%;height:44px;border:0;background:transparent;text-align:left;
 padding:0 24px;display:flex;gap:16px;align-items:center;font-size:15px;cursor:pointer;
}
.side-menu button:hover{background:#f1f1f1}
.side-menu .night i{margin-left:auto;width:30px;height:16px;border-radius:10px;background:#aaa;position:relative}
.side-menu .night i:after{content:"";position:absolute;width:14px;height:14px;top:1px;left:1px;background:white;border-radius:50%}

/* working night mode menu */
.menu-btn span{background:#fff!important;}
body.light-mode{--bg:#f4f4f8;--text:#111827;--muted:#5b6475;background:#f4f4f8;color:#111827}
body.light-mode .chat-sidebar,body.light-mode .telegram-chat{background:#fff;color:#111}
body.light-mode .side-menu{background:#fff;color:#111}
.side-menu .night i{transition:.3s}
body.light-mode .side-menu .night i{transform:translateX(16px)}


/* Theme switch */
body.light-mode{
 --bg:#ffffff;
 --text:#151515;
 --muted:#666;
 background:#fff;
 color:#151515;
}
body.light-mode .chat-sidebar,
body.light-mode .side-menu,
body.light-mode .topbar{
 background:#ffffff;
 color:#151515;
}
body.light-mode .menu-btn span{
 background:#222;
}
body:not(.light-mode) .menu-btn span{
 background:#fff;
}
body.light-mode .side-menu button{
 color:#222;
}
body:not(.light-mode) .side-menu button{
 color:#fff;
}

/* Telegram style toggle */
.side-menu .night{
 display:flex;
 align-items:center;
 justify-content:space-between;
}
.side-menu .night i{
 position:relative;
 display:block;
 width:42px;
 height:24px;
 border-radius:20px;
 background:#777;
 transition:.3s ease;
}
.side-menu .night i:before{
 content:"";
 position:absolute;
 width:18px;
 height:18px;
 left:3px;
 top:3px;
 border-radius:50%;
 background:#fff;
 transition:.3s ease;
 box-shadow:0 1px 4px #0004;
}
body:not(.light-mode) .side-menu .night i{
 background:#27c93f;
}
body:not(.light-mode) .side-menu .night i:before{
 transform:translateX(18px);
}


/* Final theme/menu fixes */
.side-menu{
  background:#111827;
  color:#fff;
}
.side-menu button{
  color:#fff;
}
.side-menu button:hover{
  background:#1f2937;
}
.side-menu .night i{
  width:42px;
  height:24px;
  background:#777;
  border-radius:20px;
  position:relative;
  transition:background .25s ease;
  transform:none !important;
}
.side-menu .night i:before{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  transition:transform .25s ease;
}
body.light-mode .side-menu{
  background:#fff;
  color:#111827;
}
body.light-mode .side-menu button{
  color:#111827;
}
body.light-mode .side-menu button:hover{
  background:#f1f1f1;
}
body:not(.light-mode) .side-menu .night i{
  background:#27c93f;
}
body:not(.light-mode) .side-menu .night i:before{
  transform:translateX(18px);
}
body.light-mode .side-menu .night i:before{
  transform:translateX(0);
}

/* fullscreen auth/chat transitions */
.auth-exit{animation:authToChat .5s ease forwards}
.workspace-enter{animation:chatFromAuth .65s ease forwards}
.chat-exit{animation:chatToAuth .45s ease forwards}
@keyframes authToChat{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94) translateX(-30px)}}
@keyframes chatFromAuth{from{opacity:0;transform:scale(.94) translateX(30px)}to{opacity:1;transform:scale(1)}}
@keyframes chatToAuth{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}

body.theme-dark{--bg:#080914;--text:#f5f4ff}
body.theme-light{--bg:#ffffff;--text:#111827;background:#fff;color:#111827}
body.theme-light .topbar{background:#ffffffcc;border-color:#ddd}
body.theme-light .brand{color:#111}
body.theme-light .chat-view,body.theme-light .menu{background:#fff;color:#111}
body.theme-light button,body.theme-light .menu-item{color:#111}
body.theme-dark .menu{background:#11131d;color:#fff}
body.theme-dark .menu-item{color:#fff}

.menu-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:99}
.modal-card{background:var(--bg);padding:25px;border-radius:18px;display:flex;flex-direction:column;gap:12px;width:340px}
.modal input,.modal textarea,.modal select{padding:12px;border-radius:10px}
.hidden{display:none!important}


/* Create group modal theme adaptive colors */
.modal-card{
  background:var(--bg);
  color:var(--text);
}
.modal-card input,
.modal-card textarea,
.modal-card select{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
}
.modal-card button{
  background:#ffffff10;
  color:var(--text);
  border:1px solid var(--line);
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  transition:.2s;
}
body.light-mode .modal-card button{
  background:#e9e9e9;
  color:#151515;
}
body:not(.light-mode) .modal-card button{
  background:#24283a;
  color:#fff;
}
.modal-card button:hover{
  filter:brightness(1.1);
}

.menu-profile{display:flex;align-items:center;gap:12px;background:none;border:0;color:inherit;width:100%;padding:12px;text-align:left;cursor:pointer}
.hidden-file{position:absolute;width:1px;height:1px;opacity:0}
.file-label{padding:12px;border-radius:10px;cursor:pointer;background:var(--line);text-align:center}
.profile-card{text-align:center;position:relative;align-items:center}
.profile-actions{position:absolute;right:12px;top:12px;display:flex;gap:8px}
.profile-actions button{border:0;background:transparent;font-size:20px;cursor:pointer;color:inherit}
.avatar.big{width:80px;height:80px;font-size:34px;display:flex;align-items:center;justify-content:center}
#profileOnline{color:#16a9ff}

.menu-profile.disabled-profile{cursor:default;pointer-events:none}
.menu-action-profile{display:block;width:100%;margin:8px 0;padding:12px;border:0;border-radius:14px;background:#ffffff12;color:inherit}
.profile-actions{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.profile-actions button{background:none!important;border:0!important;color:inherit;font-size:22px;cursor:pointer}
.edit-card{position:relative;display:flex;flex-direction:column;gap:12px}
.edit-card input,.edit-card textarea{background:#ffffff12;color:inherit;border:1px solid #ffffff18;padding:10px;border-radius:10px}

/* latest telegram-like light adjustments */
.menu-btn span{background:#000!important}
body.light-mode .dialogs{background:#e7e7eb}
body.light-mode .dialog{background:#dddddf;color:#111}
body.light-mode .dialog strong{color:#111}
body.light-mode .bubble{color:#1f2937;background:#d8d8db;border-color:#c9c9cc}
body.light-mode .telegram-chat{background:#ececee}
body.light-mode .chat-sidebar{background:#e4e4e7}
.menu-action-profile .menu-icon{margin-right:0}
.create-chat-btn{cursor:pointer}

/* requested menu/theme updates */
.menu-btn span{background:#111!important;}
body.theme-dark .menu-btn span, body:not(.light-mode) .menu-btn span{background:#fff!important;}
body.light-mode .menu-btn span{background:#111!important;}
.side-menu{background:#fff;color:#111;}
body.light-mode .side-menu{background:#ededed;color:#111;}
body.light-mode .telegram-chat,body.light-mode .chat-sidebar{background:#e9eef3;color:#111;}
body.light-mode .bubble{background:#fff;color:#111;}
body.light-mode .messages{background:#dfe7ef;background-image:radial-gradient(#cbd5df 1px,transparent 1px);background-size:18px 18px;}
.menu-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;}
.group-type-menu{display:flex;gap:8px;margin:10px 0;}
.group-type-menu .type-option{border:1px solid #ccc!important;border-radius:10px!important;height:38px!important;padding:0 12px!important;background:#f2f2f2!important;}
.group-type-menu .type-option.active{outline:2px solid #69e9f6;}


/* final theme fixes */
.menu-btn span{background:#222!important}
body:not(.light-mode) .menu-btn span{background:#f5f5f5!important}

/* dark chat falling bloom sparks */
body:not(.light-mode) .telegram-chat, body:not(.light-mode) .chat-area{
 position:relative;
 overflow:hidden;
 background-image:
 radial-gradient(circle at 20% 10%,rgba(255,170,70,.12) 0 2px,transparent 3px),
 radial-gradient(circle at 70% 30%,rgba(255,110,40,.10) 0 3px,transparent 4px),
 linear-gradient(180deg,#10121d,#090b14);
}
body:not(.light-mode) .telegram-chat:after, body:not(.light-mode) .chat-area:after{
 content:"";
 position:absolute;inset:0;pointer-events:none;
 background-image:radial-gradient(circle,rgba(255,180,80,.8) 0 2px,transparent 4px);
 background-size:90px 120px;
 filter:blur(5px);
 opacity:.35;
 animation:fallFire 8s linear infinite;
}
@keyframes fallFire{
 from{background-position:0 -100px}
 to{background-position:40px 700px}
}


/* final fixes */
body.theme-dark .side-menu, body:not(.light-mode) .side-menu{
 background:#10121b!important;
 color:#f5f5f5!important;
}
body.theme-light .side-menu, body.light-mode .side-menu{
 background:#ededed!important;
 color:#111!important;
}
body.theme-dark .group-type-menu .type-option, body:not(.light-mode) .group-type-menu .type-option{
 background:#1b1f2b!important;
 color:#eee!important;
 border-color:#34384a!important;
}
body.theme-dark .group-type-menu .type-option.active, body:not(.light-mode) .group-type-menu .type-option.active{
 background:#69e9f6!important;
 color:#081018!important;
 outline:2px solid #69e9f6!important;
}
body.light-mode .group-type-menu .type-option.active{
 background:#69e9f6!important;
 color:#111!important;
}
.menu-btn span{transition:.2s}
body.theme-dark .menu-btn span, body:not(.light-mode) .menu-btn span{background:#fff!important}
body.theme-light .menu-btn span, body.light-mode .menu-btn span{background:#111!important}

/* randomized glowing falling sparks */
body:not(.light-mode) .chat-area::before, body:not(.light-mode) .telegram-chat::before{
 content:"";
 position:absolute; inset:0; pointer-events:none;
 background-image:
 radial-gradient(circle,rgba(255,190,90,.85) 0 2px,transparent 5px),
 radial-gradient(circle,rgba(255,120,40,.7) 0 3px,transparent 7px),
 radial-gradient(circle,rgba(255,220,120,.65) 0 1px,transparent 4px);
 background-size:137px 211px,193px 277px,89px 151px;
 background-position:random,random;
 filter:blur(3px);
 opacity:.45;
 animation:sparksFall 9s linear infinite;
}
@keyframes sparksFall{
 0%{background-position:0 -300px,50px -500px,-20px -200px}
 100%{background-position:180px 900px,-120px 1100px,90px 800px}
}

/* unique falling bloom sparks */
body:not(.light-mode) .telegram-chat::before,
body:not(.light-mode) .chat-area::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:transparent;
}
body:not(.light-mode) .fire-spark{
 position:absolute;border-radius:50%;pointer-events:none;
 filter:blur(var(--blur));opacity:.8;
 background:var(--spark-color);
 box-shadow:0 0 calc(var(--size)*4) var(--spark-color);
 animation:uniqueSpark var(--time) linear infinite;
 left:var(--x);top:var(--y);
}
@keyframes uniqueSpark{
 0%{transform:translate(0,0) scale(.6);opacity:0}
 15%{opacity:1}
 100%{transform:translate(var(--dx),var(--dy)) rotate(360deg) scale(1.2);opacity:0}
}

body:not(.light-mode) .menu-btn span{background:#fff!important;} body.light-mode .menu-btn span{background:#222!important;}

body:not(.light-mode) .group-type-menu .type-option.active{background:#69e9f6!important;color:#111!important;}

/* Animated theme shader instead of sparks */
.theme-shader{
 position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
 background:
 radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--purple) 22%, transparent), transparent 35%),
 radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 38%),
 radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 45%);
 filter:blur(18px);
 animation:shaderMove 18s ease-in-out infinite alternate;
}
@keyframes shaderMove{
 from{transform:scale(1) translate3d(-2%,0,0)}
 to{transform:scale(1.15) translate3d(2%,3%,0)}
}
.type-option{cursor:pointer;transition:.2s;border:1px solid transparent}
.type-option.active{border-color:var(--cyan);box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 35%,transparent)}
[data-theme="dark"] .type-option,.dark .type-option{
 background:#171923!important;color:#fff!important;
}
[data-theme="light"] .type-option{
 background:#e9e9ee;color:#111;
}

/* Removed chat fire sparks */
.fire-spark,.sparks,.fire-particles{display:none!important;}

/* User requested: remove orange background circles/sparks */
.chat-area::before,.telegram-chat::before,.fire-spark,.sparks,.fire-particles{background:none!important;animation:none!important;display:none!important;opacity:0!important}

.dialog-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;} .edit-card #editAvatar{cursor:pointer;} .hidden-file{display:none!important;} .profile-card h2{margin-top:8px;margin-bottom:2px}.profile-card small{margin-top:0;display:block}

/* Telegram style fixes */
#particles{display:none!important}
.theme-shader{display:none!important}
.light-mode .message-input,.light-mode #messageInput,.theme-light .message-input,.theme-light #messageInput{
 background:#fff!important;color:#111!important;border-color:#ddd!important;
}
.light-mode .message-input::placeholder,.light-mode #messageInput::placeholder{color:#777!important}
.side-menu .menu-item svg,.side-menu svg{stroke-width:1.8}

/* Functional messenger refinements */
.list-heading{padding:12px 8px 5px;color:#8990aa;font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.room-dialog{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit}.room-dialog:hover,.user-result:hover{background:#ffffff12}.room-dialog.active{background:#ffffff16}.dialog-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.avatar:has(.avatar-img){overflow:hidden;padding:0}.user-result{display:flex;align-items:center;gap:9px;width:100%;padding:8px;border:0;border-radius:9px;background:#ffffff08;color:inherit;text-align:left;cursor:pointer}.result-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#3e9ee8;color:white;flex:none}.result-avatar .avatar-img{width:28px;height:28px}.room-settings-btn{margin-left:auto;border:0;background:transparent;color:inherit;font-size:24px;cursor:pointer;padding:8px 14px}.chat-header{display:flex;align-items:center}.telegram-chat{position:relative;isolation:isolate}.theme-shader{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.32;background-image:radial-gradient(circle at 15% 25%,rgba(75,157,205,.12) 0 2px,transparent 3px),radial-gradient(circle at 75% 70%,rgba(111,124,220,.1) 0 1px,transparent 2px);background-size:42px 42px,58px 58px;animation:shader-drift 32s linear infinite}@keyframes shader-drift{to{background-position:220px 100px,-180px 150px}}.modal-card .hidden-file{display:none}.modal-card .avatar.big{cursor:pointer}.modal-card #saveProfileBtn{background:#3390ec;color:#fff;border:0;padding:11px;border-radius:10px;cursor:pointer}.room-dialog span{min-width:0}.room-dialog strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.light-mode .chat-sidebar{background:#fff;border-right:1px solid #e5e7eb}.light-mode .search-box{background:#fff;border-color:#e1e4e8}.light-mode .search-box input{color:#1f2937}.light-mode .dialog,.light-mode .user-result{color:#202a35}.light-mode .dialog.active,.light-mode .room-dialog:hover,.light-mode .user-result:hover{background:#eef4f8}.light-mode .telegram-chat{background:#fff}.light-mode .composer textarea,.light-mode #messageInput{background:#fff!important;color:#202a35!important;border-color:#fff!important}.light-mode .room-settings-btn{color:#202a35}
/* Functional chat actions and responsive Telegram-like list rows */
#channels .channel-dialog{display:flex;width:100%;max-width:100%;box-sizing:border-box;grid-column:1/-1}
#channels{display:flex;flex-direction:column;align-items:stretch;width:100%}
#generalChatBtn{width:100%;max-width:100%;box-sizing:border-box}
.dialog.active,#generalChatBtn.active{background:var(--accent, #4b9be8);color:#fff}
.dialog.active small,#generalChatBtn.active small{color:rgba(255,255,255,.82)}
.message-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.message-actions button{font:inherit;font-size:12px;padding:3px 7px;border:1px solid var(--line,rgba(120,130,150,.25));border-radius:12px;background:var(--surface,#fff);color:var(--text,#222);cursor:pointer}
.message-actions button:hover{filter:brightness(.96)}
.danger-btn{background:#c83242!important;color:white!important;border:0!important}
#roomSettingsModal .modal-card input:disabled,#roomSettingsModal .modal-card textarea:disabled{opacity:.6;cursor:not-allowed}
#channels .room-dialog>span{min-width:0;flex:1;text-align:left}
/* Interaction affordances and compact Telegram-like overlays */
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.modal-top h2{margin:0}.modal-x{width:32px;height:32px;flex:none;border:0!important;border-radius:50%!important;background:transparent!important;color:inherit!important;font-size:25px!important;line-height:1;cursor:pointer;padding:0!important}.modal-x:hover{background:#8882!important}.all-users-btn{display:block;width:100%;padding:10px 12px;margin:8px 0;border:1px solid var(--line);border-radius:10px;background:#ffffff09;color:inherit;text-align:left;cursor:pointer}.light-mode .all-users-btn{background:#f6f8fa;color:#202a35}.audio-btn{width:35px;height:34px;flex:0 0 35px;border:0;border-radius:10px;background:#ffffff12;color:inherit;cursor:pointer}.light-mode .audio-btn{background:#edf2f7;color:#202a35}.audio-btn.recording{background:#e5484d;color:white;animation:recordPulse 1s infinite alternate}@keyframes recordPulse{to{opacity:.55}}.audio-message{display:block;width:min(270px,60vw);height:36px}.message-selected .bubble{outline:2px solid #3390ec}.msg-more{position:absolute;right:-6px;top:-6px;border:0;border-radius:50%;width:26px;height:26px;background:#747b8b;color:white;cursor:pointer;opacity:0;transition:opacity .15s}.message:hover .msg-more,.msg-more:focus{opacity:1}.bubble-wrap{position:relative}.context-menu{position:fixed;z-index:10000;min-width:205px;max-width:230px;padding:5px;border:1px solid #ffffff20;border-radius:12px;background:#171a28;color:#f6f7fb;box-shadow:0 12px 35px #0005;display:flex;flex-direction:column}.context-menu.hidden{display:none}.context-menu button{border:0;border-radius:7px;padding:10px 12px;text-align:left;background:transparent;color:inherit;cursor:pointer;font:13px inherit}.context-menu button:hover{background:#ffffff16}.light-mode .context-menu{background:#fff;color:#1e293b;border-color:#dbe1e8;box-shadow:0 12px 35px #24324724}.light-mode .context-menu button:hover{background:#eef4f8}.call-panel{position:fixed;z-index:10001;right:20px;bottom:20px;width:290px;padding:18px;border:1px solid #ffffff22;border-radius:16px;background:#151729;color:#f7f7fb;box-shadow:0 18px 50px #0005;display:flex;flex-direction:column;gap:14px}.call-panel.hidden{display:none}.call-panel div{display:flex;gap:8px}.call-panel button{border:0;border-radius:9px;padding:9px 12px;background:#3390ec;color:white;cursor:pointer}.call-panel #hangupBtn{background:#e5484d}.light-mode .call-panel{background:#fff;color:#17202a;border-color:#dce2e8}.edited-label{font-size:9px;color:#8d93a5}.chat-header{position:relative}

.confirm-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:9999}.confirm-box{background:var(--panel,#fff);padding:20px;border-radius:16px;min-width:280px}.confirm-box button{margin:8px;padding:10px 18px;border-radius:10px;border:0}.confirm-box .yes{background:#e53935;color:white}


.beta-version{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);font-size:11px;opacity:.35;z-index:20;pointer-events:none;letter-spacing:.08em;color:var(--text,#fff);user-select:none}

.message-actions .delete-message,.message-delete-btn{display:none!important}

.app-dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:20000}
.app-dialog{width:min(360px,90vw);background:var(--panel,#fff);color:var(--text,#111);border:1px solid var(--line,rgba(0,0,0,.12));border-radius:18px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.app-dialog h3{margin:0 0 10px;font-size:18px}.app-dialog p{opacity:.85;line-height:1.4}.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.app-dialog button{border:0;border-radius:10px;padding:10px 18px;background:var(--accent,#3390ec);color:white;cursor:pointer}.app-dialog button.danger{background:#e5484d}.app-dialog-input{width:100%;box-sizing:border-box;padding:12px;border-radius:10px;border:1px solid var(--line,rgba(0,0,0,.15));background:var(--surface,#fff);color:inherit}
.light-mode .app-dialog{background:#fff;color:#202a35;border-color:#e1e5ea}.light-mode .app-dialog-input{background:#fff;color:#202a35}

/* Theme fixes for custom dialogs */
:root{--panel:#171a28;--surface:#111525;--text:#f5f7fb;--line:#ffffff20}
.light-mode{--panel:#ffffff;--surface:#ffffff;--text:#202a35;--line:#dfe4ea}
.app-dialog{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important}
.app-dialog-input{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.confirm-box{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)}
.light-mode .confirm-box{background:#fff!important;color:#202a35!important;border-color:#e1e5ea}

/* KON-CHAT final dialog theme fix */
:root{
 --panel:#171a28;
 --surface:#111525;
}
body.light-mode{
 --panel:#ffffff;
 --surface:#ffffff;
 --text:#202a35;
 --line:rgba(0,0,0,.12);
}
dialog-overlay, confirm-overlay{
 background:rgba(0,0,0,.45);
}
dialog, confirm-box{
 background:var(--panel)!important;
 color:var(--text)!important;
 border:1px solid var(--line)!important;
}
dialog-input, .dialog-input{
 background:var(--surface)!important;
 color:var(--text)!important;
 border:1px solid var(--line)!important;
}
confirm-box button{
 color:#fff;
}