/* TOPCHIK / SPACE DESIGN SYSTEM — V2
   Compositor-friendly animations, responsive layout, reduced-motion support. */
:root {
  color-scheme:dark;
  --bg:#070812;
  --panel:#10121f;
  --panel2:#161829;
  --muted:#8c91ae;
  --text:#f7f7ff;
  --purple:#b59bff;
  --purple2:#7d62f7;
  --border:rgba(185,179,255,.105);
  --shadow:0 24px 90px rgba(0,0,0,.45);
  --radius:19px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html {background:#050711}
body {font-family:Manrope,system-ui,sans-serif;background:radial-gradient(ellipse 75% 70% at 60% -25%,#16113f 0,transparent 75%),#070812;letter-spacing:-.08px}
body:before {content:"";position:fixed;inset:0;pointer-events:none;opacity:.21;z-index:-1;background-image:radial-gradient(#a4a2eb5c .7px,transparent .7px);background-size:31px 31px;mask-image:linear-gradient(135deg,#000,transparent 70%)}
.ambient{z-index:0;opacity:.68;filter:blur(88px);animation:ambient-drift 16s ease-in-out infinite alternate}
.ambient-one{background:#492c9c70;height:550px;width:550px;top:-300px;left:-200px}
.ambient-two{background:#2846a34b;height:660px;width:650px;bottom:-390px;right:-260px;animation-delay:-8s}
.cursor-glow{position:fixed;z-index:0;pointer-events:none;width:420px;height:420px;top:0;left:0;border-radius:50%;background:radial-gradient(circle,#8173ff23 0,transparent 67%);filter:blur(18px);transition:opacity .25s ease;will-change:transform;opacity:.6}
.app-shell{max-width:1780px;width:calc(100vw - 44px);height:calc(100dvh - 44px);margin:22px auto;background:#0c0d19;border:1px solid #b2a4ff2e;border-radius:26px;box-shadow:0 0 0 1px #090919,0 35px 120px #000a,0 0 95px #7760d017;backdrop-filter:blur(30px);isolation:isolate;animation:shell-in .65s var(--ease) both}
.app-shell:before{position:absolute;content:"";pointer-events:none;z-index:8;inset:0;border-radius:inherit;box-shadow:inset 0 1px #ffffff0c}
.rail{width:89px;padding:30px 14px 23px;gap:10px;background:linear-gradient(180deg,#0e1020,#0b0e19);border-right:1px solid #c1b9ff17}
.logo-icon{border-radius:18px;background:linear-gradient(145deg,#a883ff 0%,#8459f7 43%,#5644d4 100%);font-size:34px;letter-spacing:-3.5px;box-shadow:0 11px 30px #906aff46,inset 0 1px 2px #ffffff60;border:1px solid #e2d2ff70;transform:rotate(-7deg);margin:0 0 19px;position:relative;transition:transform .45s var(--ease),box-shadow .3s ease}
.logo-icon span{line-height:1;display:block;transform:rotate(7deg) translate(-2px,-1px)}
.logo-icon i{font-style:normal;font-size:16px;position:absolute;right:12px;bottom:3px;color:#dcfd9a}
.logo-icon:hover{transform:rotate(0) scale(1.06);box-shadow:0 15px 46px #906aff80}
.rail-divider{width:26px;height:1px;background:linear-gradient(90deg,transparent,#8679ac85,transparent);margin:1px 0 16px}
.rail-item{border-radius:16px;width:51px;height:51px;color:#73778d;transition:background .26s ease,color .26s ease,transform .45s var(--ease),border-color .26s ease;border:1px solid transparent}
.rail-item:hover{background:#ffffff0a;color:#ddd3ff;transform:translateY(-2px);border-color:#ffffff12}
.rail-item.active{background:linear-gradient(135deg,#795bf32c,#a57cff18);color:#b9a1ff;border:1px solid #a18bf82d;box-shadow:inset 0 1px #ffffff0d}
.rail-item.active:before{left:-15px;width:3px;height:23px;background:#b19dff;box-shadow:0 0 20px #a787ff}
.rail-bottom{gap:14px}.rail-bottom-label{letter-spacing:1.8px;font-size:8px;color:#77738e;font-weight:800}.rail-avatar{transition:transform .35s var(--ease)}.rail-avatar:hover{transform:scale(1.09)}.rail-avatar .avatar{border:2px solid #a48af665;width:40px;height:40px}
.side{width:342px;min-width:275px;background:linear-gradient(180deg,#121423,#101221);border-right:1px solid #ffffff13}
.side-header{padding:27px 23px 19px}
.side-identity{height:31px;display:flex;align-items:center;gap:8px;color:#e5dfff;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:2.2px}
.signal-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#a8ffdc;box-shadow:0 0 13px #76ffbbab;display:inline-block}
.side-version{color:#74718c;letter-spacing:1px;font-size:9px;font-weight:500}
.side-top{margin:29px 0 22px}.side-heading{font-size:29px;line-height:1.15;letter-spacing:-1.3px;font-weight:800}.accent-period{color:#b09aff}.side-kicker{font-size:9px;color:#777f9e;letter-spacing:2px;margin-bottom:7px}
.round-btn{background:linear-gradient(145deg,#aa88ff,#7555e9);color:white;border:1px solid #d5b7ff70;width:40px;height:40px;border-radius:13px;box-shadow:0 7px 24px #8d62f23d;transition:transform .4s var(--ease),box-shadow .3s}
.round-btn:hover{background:linear-gradient(145deg,#b99dff,#805dec);transform:rotate(90deg) scale(1.06);box-shadow:0 10px 28px #9b71f866}
.search-box{height:46px;background:#1a1c2f;border:1px solid #9d9bdb21;border-radius:12px;gap:10px;padding:0 12px;color:#9195b7;transition:border-color .3s,box-shadow .3s,background .3s}
.search-box:hover{background:#202238;border-color:#aaa1f736}
.search-box:focus-within{background:#20243b;border-color:#9e85ff83;box-shadow:0 0 0 3px #a17aff10}
.search-box input{font-size:12px;color:#f8f6ff}.search-box input::placeholder{color:#777e99}
.search-box kbd{padding:3px 5px;border-radius:5px;border:1px solid #ffffff13;background:#ffffff07;font:9px Manrope,system-ui,sans-serif;color:#797e98;white-space:nowrap}
.side-section-head{display:flex;align-items:center;justify-content:space-between;margin:9px 25px 14px;color:#8587a8;font-size:10px;letter-spacing:1.65px;font-weight:800}
.count-pill{font-size:10px;color:#c5b0ff;background:#9280fd22;border:1px solid #9b8eff26;border-radius:6px;padding:2px 7px;letter-spacing:0}
.chat-list{padding:0 10px 14px;overscroll-behavior:contain}
.chat-row{min-height:77px;gap:13px;border-radius:15px;padding:13px 12px;border:1px solid transparent;transition:background .25s ease,border-color .25s ease,transform .3s var(--ease);animation:chat-row-in .45s var(--ease) both}
.chat-row:hover{background:#ffffff09;transform:translateX(2px);border-color:#ffffff0a}
.chat-row.selected{background:linear-gradient(110deg,#7b65dd26,#8b68b60b);border-color:#a495ff30}
.chat-row.selected:before{width:3px;top:17px;bottom:17px;background:#ab95ff;box-shadow:0 0 16px #947dff84}
.chat-row .avatar{transition:transform .35s var(--ease),box-shadow .35s}
.chat-row:hover .avatar{transform:scale(1.045);box-shadow:0 5px 21px #0003}
.avatar{border-radius:15px;box-shadow:inset 0 0 0 1px #ffffff16}
.avatar.medium{width:49px;height:49px;border-radius:15px}
.avatar.large{width:100px;height:100px;border-radius:29px}
.chat-name{font-size:12.7px;letter-spacing:-.15px;color:#eef0ff}.chat-time{font-size:10px;color:#7c80a0}.chat-snippet{font-size:11px;line-height:1.55;color:#8286a1;margin-top:5px}
.side-bottom-panel{display:flex;align-items:center;gap:10px;margin:12px 15px 15px;padding:15px 13px;border-radius:14px;border:1px solid #a9a0eb23;background:linear-gradient(115deg,#272447b0,#191d35c9);position:relative;overflow:hidden}
.side-bottom-panel:after{content:"";position:absolute;inset:-90px auto auto 65%;width:170px;height:170px;border-radius:50%;background:#9f75ff18;filter:blur(23px)}
.side-bottom-icon{display:grid;place-items:center;color:#c8b5ff;width:32px;height:32px;flex:none;border-radius:10px;background:#a081ef26;border:1px solid #bda4ff36}
.side-bottom-copy{display:grid;min-width:0;gap:2px}.side-bottom-copy strong{font-size:11px;color:#e2dcfa}.side-bottom-copy small{font-size:9px;color:#8989a5;white-space:nowrap}
.side-bottom-spark{margin-left:auto;color:#a8a0ff;font-size:18px;z-index:1}
.demo-strip{margin:0 15px 17px;padding:10px 13px;font-size:10px;color:#aaa9ce;border-radius:12px;border-color:#8b74d044;background:#6b56b515}.demo-strip strong{color:#c8b8ff}.demo-more{border:0;background:transparent;color:#e2d7ff;font-weight:700;font-size:10px;padding:0;text-decoration:underline}
.main{background:radial-gradient(ellipse 78% 70% at 55% 50%,#18192c 0%,transparent 75%),#10121f;position:relative;overflow:hidden}
.main:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(180deg,transparent,#0008 35%,transparent 98%)}
.chat-head{min-height:91px;padding:19px 29px;background:#121524b5;border-bottom:1px solid #ffffff10;backdrop-filter:blur(12px);position:relative;z-index:1}
.chat-person{gap:13px}.chat-person .avatar{width:47px;height:47px;border-radius:14px}.person-name{font-size:14px;letter-spacing:-.2px}.person-shimmer{font-size:12px;color:#b695f7;margin-left:4px}.person-sub{font-size:10px;color:#9395b4}.bullet-dot{padding:0 4px;color:#9f8bd8}.chat-head-id{letter-spacing:1.5px;font:700 10px 'Space Grotesk',sans-serif;color:#6f7190;margin-right:9px}
.head-mini{background:#222439;color:#afafd1;border-color:#ffffff17;transition:transform .3s var(--ease),border-color .25s,background .25s}.head-mini:hover{background:#302b50;border-color:#ab91ff7a;transform:translateY(-2px)}
.messages-area{padding:29px clamp(21px,4vw,58px) 15px;position:relative;z-index:1;scroll-behavior:smooth;scrollbar-width:thin;gap:12px}
.date-divider{letter-spacing:.5px;color:#7f809b;font-size:10px;margin:15px 0}.date-divider:before,.date-divider:after{background:#ffffff0d}
.msg-row{animation:message-rise .37s var(--ease) both}.msg-bubble{background:#23263a;color:#e8e7f5;border-color:#ffffff10;font-size:12.5px;padding:12px 16px;border-radius:17px 17px 17px 5px;line-height:1.75;box-shadow:0 6px 24px #0002;backdrop-filter:blur(3px)}
.mine .msg-bubble{background:linear-gradient(130deg,#9878f5,#7762da 63%,#7062d1);color:white;border:1px solid #d3bbff3b;border-radius:17px 17px 5px 17px;box-shadow:0 8px 22px #6646be24,inset 0 1px #ffffff2c}
.msg-clock,.msg-row.mine .msg-clock{color:#878aa6;font-size:9px}
.composer-wrap{position:relative;z-index:2;padding:16px clamp(21px,4vw,53px) 22px;background:linear-gradient(0deg,#141525e8,transparent)}
.composer{min-height:64px;background:#212438;border-color:#aaa2ef2a;border-radius:17px;padding:9px 11px 9px 17px;box-shadow:0 9px 25px #0003,inset 0 1px #ffffff09;gap:14px;transition:border-color .25s ease,box-shadow .25s ease,transform .35s var(--ease)}
.composer:focus-within{border-color:#af93ff88;box-shadow:0 8px 35px #6553dd1b,0 0 0 3px #b59bff0d}
.composer-plus{display:grid;place-items:center;color:#8b88af;border-right:1px solid #ffffff18;padding-right:14px;height:25px}
.composer textarea{color:#f4f4ff;height:26px;font-size:12px;line-height:26px}.composer textarea::placeholder{color:#8889a6}
.send-btn{width:43px;height:43px;border-radius:13px;background:linear-gradient(145deg,#bd9bff,#8d6bfc);box-shadow:0 6px 22px #9169ff4f;transition:transform .35s var(--ease),box-shadow .35s ease,filter .35s}
.send-btn:hover{transform:translateY(-2px) scale(1.035);box-shadow:0 10px 30px #8d69fb75;filter:none}.send-btn:active{transform:scale(.94)}
.composer-hint{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:9px;letter-spacing:.2px;color:#747994;margin-top:14px;text-align:left}.composer-hint>span:first-child{font:700 9px 'Space Grotesk',sans-serif;letter-spacing:1.2px}.star-mini{color:#a58bfd}.composer-hint-sep{color:#aaa1e6;margin:0 8px}
.detail{width:279px;padding:25px 21px 22px;background:linear-gradient(160deg,#141628,#101321 80%);border-left:1px solid #ffffff12;display:block}
.detail-top{display:flex;align-items:center;justify-content:space-between}.detail-title{font-size:9px;color:#898bac;letter-spacing:1.45px}.detail-stars{color:#a693f0;font-size:14px}
.profile-banner{height:105px;margin-top:27px;background:radial-gradient(circle at 65% 0%,#af96ff71,transparent 35%),radial-gradient(circle at 30% 100%,#6557d4a0,transparent 42%),linear-gradient(135deg,#2b2a56,#252b4e 55%,#17192b);border:1px solid #ffffff1a;border-radius:16px}
.profile-banner:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(130deg,transparent 0 18px,#ffffff06 19px 20px)}
.profile-banner:after{height:115px;width:140px;left:90px;top:5px;border:1px solid #ffffff28;transform:rotate(33deg);border-radius:32px}
.banner-lines{position:absolute;left:-30px;bottom:-40px;border:1px solid #ffffff20;border-radius:50%;height:125px;width:125px}
.banner-label{position:absolute;bottom:10px;right:11px;color:#eeeaff86;font:700 8px 'Space Grotesk',sans-serif;letter-spacing:1px}
.detail-identity{display:flex;flex-direction:column;align-items:center}.detail-identity .avatar.large{margin-top:-49px;width:82px;height:82px;border-radius:24px;border:5px solid #141628;box-sizing:content-box;box-shadow:0 12px 26px #0005}
.detail-name{font-size:17px;margin-top:8px}.tag{color:#9698b9;font-size:11px}.status-pill{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:9px;letter-spacing:.4px;background:#4bac8820;border-color:#76dfb347;color:#9af0c7}
.detail-divider{background:#ffffff12;margin:26px 0}.detail-label{font-size:9px;letter-spacing:1.3px;color:#9992b6}.detail-bio{line-height:1.8;font-size:11px;color:#b7b9d0;margin-top:15px}.detail-capsule{border:1px solid #b5a8e12b;background:#a9a3f10b;color:#c6b8ff;font-size:9px;letter-spacing:.25px;margin-top:16px;padding:9px 10px}.right-quote{font:600 17px/1.5 'Space Grotesk',sans-serif;letter-spacing:-.3px;color:#b2add6;position:relative}.right-quote span{float:right;color:#ae94ff;font-size:22px}.detail-safety{margin-top:16px;font-size:10px;line-height:1.7;color:#777c98}
/* Distinctive first-contact screen */
.empty-hero{position:relative;isolation:isolate;overflow:hidden;padding:35px 20px 58px;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse 62% 48% at 50% 45%,#28204b70,transparent 90%)}
.hero-noise{position:absolute;inset:0;background-image:radial-gradient(#c7bcff42 .65px,transparent .65px);background-size:25px 25px;mask-image:radial-gradient(circle,#0009 5%,transparent 74%);z-index:-1}
.hero-halo{border:1px solid #ad9bff12;position:absolute;width:min(650px,90%);aspect-ratio:1;border-radius:50%;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-halo-two{width:min(900px,125%);opacity:.5}
.welcome-pill{display:flex;align-items:center;gap:11px;background:#30294a7a;border:1px solid #9f8bd73c;color:#c5b9e9;border-radius:100px;padding:9px 15px;font:800 9px Manrope,sans-serif;letter-spacing:1.35px;margin-bottom:17px;animation:hero-fade .7s .08s var(--ease) both}.welcome-pill .signal-dot{width:6px;height:6px}.welcome-pill span:last-child{color:#b79cfa}
.hero-glyph{width:144px;height:144px;display:grid;place-items:center;position:relative;margin:12px 0 23px;animation:hero-fade .8s .15s var(--ease) both}
.hero-glyph-inner{display:grid;place-items:center;width:98px;height:98px;border-radius:31px;background:linear-gradient(145deg,#b69aff,#8064ec 55%,#6550c5);border:1px solid #e9d6ff99;box-shadow:inset 0 2px #ffffff59,0 21px 55px #7754e05d;transform:rotate(-9deg);animation:floaty 6s ease-in-out infinite}
.hero-glyph-inner .icon{width:45px;height:45px;color:#fff;stroke-width:1.6;transform:rotate(9deg)}
.orbit{position:absolute;border:1px solid #a998ed3e;border-radius:50%;width:142px;height:142px;pointer-events:none}.orbit-a{width:160px;height:160px;border-style:dashed;animation:spin 34s linear infinite}.orbit-b{width:188px;height:188px;opacity:.6}.orbit-c{right:-31px;top:4px;border:none;width:auto;height:auto;font-size:23px;color:#b69cff;animation:twinkle 4s ease-in-out infinite}
.hero-overline{font:700 10px 'Space Grotesk',sans-serif;color:#aaa5e6;letter-spacing:2.1px;margin-bottom:17px;animation:hero-fade .85s .23s var(--ease) both}
.empty-hero h2{font:700 clamp(31px,3.5vw,54px)/1.09 'Space Grotesk',sans-serif;letter-spacing:-2.15px;margin:0 0 19px;max-width:620px;color:#fcfbff;animation:hero-fade .9s .29s var(--ease) both}
.empty-hero h2 em{font-style:normal;background:linear-gradient(110deg,#cab6ff 0%,#9d91ff 43%,#74bcff 100%);background-clip:text;color:transparent}
.empty-hero p{font-size:12px;max-width:430px;color:#9599b8;line-height:1.85;margin:0 0 27px;animation:hero-fade .9s .34s var(--ease) both}
.hero-action{min-height:45px;padding:10px 17px 10px 19px;border-radius:13px;font-size:12px;box-shadow:0 9px 27px #795ce74c;animation:hero-fade .9s .42s var(--ease) both}.button-arrow{font-size:18px;margin-left:14px;font-weight:400}
.hero-footer{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,33px);position:absolute;bottom:27px;font:700 9px 'Space Grotesk',sans-serif;letter-spacing:1.4px;color:#747897}
.empty-chat h2{font-size:23px}.empty-chat p{font-size:12px}.empty-chat .empty-orb{height:74px;width:74px;border-radius:22px}.empty-chat .empty-orb .icon{width:30px;height:30px}
/* All other pages retain working forms and data flows. */
.content{position:relative;z-index:1;padding-top:65px;max-width:1050px}.page-eyebrow{font-size:10px;letter-spacing:1.9px;color:#a79af2}.page-title{font-size:clamp(33px,3.6vw,48px);letter-spacing:-2.1px;margin:17px 0}.page-sub{color:#9a9eba;font-size:12px}
.user-card,.setting-card{border-radius:19px;background:linear-gradient(150deg,#25253c,#1b2030);border:1px solid #b5a6ff27;box-shadow:inset 0 1px #ffffff0b;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.user-card:hover{transform:translateY(-5px);border-color:#ac8fff69;box-shadow:0 17px 35px #0003}.user-card{padding:22px;gap:10px}.user-card h3{font-size:16px}.user-card p{color:#9298b4;font-size:11px}
.profile-hero{background:radial-gradient(circle at 90% 20%,#866de673,transparent 43%),linear-gradient(130deg,#2a2a49,#1d2236);border-color:#aa97ff45;box-shadow:0 18px 48px #0003;position:relative;overflow:hidden}
.profile-hero:before{content:'TOPCHIK / PROFILE';position:absolute;right:22px;top:19px;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:1.5px;color:#c4adff4d}
.primary,.ghost{border-radius:12px;transition:transform .4s var(--ease),box-shadow .35s,border-color .35s,background .35s}
.primary{background:linear-gradient(135deg,#a989ff,#7158de);border:1px solid #d2bcff80;box-shadow:0 7px 25px #8065f240}
.primary:hover{filter:none;transform:translateY(-2px);box-shadow:0 10px 28px #8062ef70}.primary:active,.ghost:active{transform:scale(.98)}
.ghost{background:#31304c;border-color:#a292fa45;color:#dcd2fd}.ghost:hover{background:#454064}
.field{font-size:12px;background:#1b1e31;border:1px solid #988ad73c;border-radius:12px;transition:background .3s,border-color .3s,box-shadow .3s}
.field:focus{border-color:#b39aff;background:#232742;box-shadow:0 0 0 3px #9c7fff17}.field-label{color:#b9b4d1}
.modal-overlay{background:#070912d6;backdrop-filter:blur(16px);animation:fade-in .22s ease}.modal{background:linear-gradient(155deg,#292841,#171a2d);border-color:#b6a3f942;border-radius:24px;box-shadow:0 35px 90px #000a;animation:modal-enter .4s var(--ease) both}.avatar-upload{background:#34304b;border:1px solid #ffffff15}
.auth-cover{background:radial-gradient(ellipse 60% 70% at 17% 40%,#3c2e8359,transparent 77%),radial-gradient(ellipse 45% 75% at 95% 100%,#28457c55,transparent),#0b0c19;position:absolute;isolation:isolate}
.auth-cover:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#bfafff3b .6px,transparent .6px);background-size:30px 30px;mask-image:linear-gradient(90deg,#000,transparent 80%)}
.auth-layout{max-width:1200px;grid-template-columns:minmax(0,1fr) 425px;gap:65px}
.auth-brand-marker{display:inline-flex;align-items:center;gap:10px;margin-top:55px;border:1px solid #afa4f33b;border-radius:30px;background:#ffffff0b;padding:10px 15px;font:800 10px Manrope,sans-serif;letter-spacing:1.1px;color:#d0c5ff}
.auth-brand h1{font-size:clamp(47px,6.3vw,84px);line-height:1.08;margin:23px 0 25px;letter-spacing:-4.2px}.auth-brand h1 span{background:linear-gradient(115deg,#d8c2ff,#a592ff,#85c2ff);background-clip:text;color:transparent}.auth-brand p{color:#adb0cc;font-size:14px;line-height:1.9}
.auth-features{margin-top:46px;gap:12px}.auth-features span{color:#bdb1e3;background:#9380db0d;border-color:#a493ed38;font:700 10px 'Space Grotesk',sans-serif;letter-spacing:.8px}
.auth-card{background:#242438d9;border:1px solid #a79bec5c;box-shadow:0 33px 95px #0006,inset 0 1px #ffffff16;padding:36px;backdrop-filter:blur(25px)}.auth-card h2{font:700 29px 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:8px 0}.auth-card p{color:#a5a4c3;font-size:12px}.auth-meta{color:#a5a1ba}
.boot{color:#a09ab4;animation:hero-fade .6s both}.boot-symbol{color:#bca8ff;font-size:26px;margin-bottom:19px;animation:floaty 4s ease-in-out infinite}.boot-mark{font-size:45px;letter-spacing:-2px}.boot-mark span,.wordmark span{color:#baa2ff}.boot p{font-size:10px;font-weight:800;letter-spacing:2px;margin:17px 0}.boot-progress{height:3px;width:184px;border-radius:4px;margin:24px auto;background:#ffffff13;overflow:hidden}.boot-progress span{display:block;width:45%;height:100%;border-radius:4px;background:linear-gradient(90deg,#7755ed,#c4a6ff);animation:loading-bar 1.65s ease-in-out infinite}
#toast-root{z-index:100}.toast{background:#29263f;border-color:#a18dfd56;font-size:12px;box-shadow:0 20px 44px #0005}
@keyframes shell-in{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chat-row-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes message-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hero-fade{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes modal-enter{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-9px) rotate(-6deg)}}
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ambient-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(55px,-45px,0)}}
@keyframes loading-bar{0%{transform:translateX(-105%)}100%{transform:translateX(340%)}}
@media(max-width:1340px){.detail{width:243px;padding:25px 17px}.side{width:310px}.rail{width:76px;padding:25px 10px}.rail-item{width:47px;height:47px}.rail-item.active:before{left:-11px}.side-header{padding:22px 17px 14px}.side-section-head{margin-left:20px;margin-right:20px}}
@media(max-width:1150px){.detail{display:none}.side{width:315px}}
@media(max-width:960px) and (min-width:781px){.rail{width:69px}.side{width:270px;min-width:270px}.side-header{padding:20px 14px}.side-heading{font-size:26px}.side-bottom-panel{margin:12px 10px}.side-bottom-copy small{white-space:normal}.chat-head-id{display:none}.composer-hint>span:first-child{display:none}}
@media(max-width:780px){
  .app-shell{width:100vw;height:100dvh;margin:0;border:0;border-radius:0;animation:none}
  .rail{width:67px;padding:19px 8px;background:#101221}
  .logo-icon{width:45px;height:45px;font-size:30px;margin-bottom:10px}.logo-icon i{right:10px}
  .rail-divider{margin:5px 0 9px}.rail-item{width:46px;height:46px}
  .side{min-width:0;width:calc(100% - 67px)}.side-header{padding:27px 17px 14px}.side-top{margin:28px 0 20px}.side-heading{font-size:27px}
  .side-bottom-panel{margin:10px 12px 12px}.side-bottom-copy small{white-space:normal}
  .chat-row{padding:11px 12px;min-height:71px}.chat-row:hover{transform:none}
  .chat-head{padding:13px 15px;min-height:77px}.chat-head-id{display:none}
  .composer-wrap{padding:9px 13px 15px}.composer-hint>span:first-child{display:none}.composer-hint{justify-content:center}.composer{min-height:57px}
  .messages-area{padding:18px 16px 12px}
  .empty-hero{padding:18px 13px 52px}.empty-hero h2{font-size:clamp(28px,8vw,42px)}.hero-glyph{transform:scale(.85);margin:0 0 6px}.empty-hero p{font-size:11px}.hero-footer{gap:13px;font-size:8px;bottom:14px}
  .auth-layout{display:flex;flex-direction:column;max-width:440px;gap:0}.auth-cover{display:block;padding:20px 18px}.auth-brand{padding:12px 10px 20px}.auth-brand-marker{margin-top:20px;font-size:8px}.auth-brand h1{font-size:40px;letter-spacing:-2.1px;margin:12px 0}.auth-brand p{font-size:12px}.auth-card{width:100%;padding:24px}.auth-features{display:none}
  .content{padding:38px 22px}.page-title{font-size:35px}
}
@media(max-width:420px){.side-heading{font-size:24px}.side-header{padding:20px 14px 12px}.side-top{margin:22px 0 17px}.chat-row{gap:10px}.side-version{font-size:8px}.avatar.medium{height:45px;width:45px}.chat-time{font-size:9px}.composer-plus{display:none}.empty-hero h2{letter-spacing:-1.4px}.hero-glyph{transform:scale(.73);margin:-7px 0 -8px}.hero-footer{gap:9px;font-size:7px}.auth-brand h1{font-size:34px}.auth-brand-marker{letter-spacing:.2px;font-size:8px}.auth-card{padding:19px}.modal{padding:23px}}
@media(pointer:coarse){.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .cursor-glow{display:none!important}
}