@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#10131c;--panel:#171b28;--line:#2c3242;--text:#f6f6fb;--muted:#98a0b2;--accent:#9686f8;--green:#54d29e;--shadow:0 20px 55px #0005}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 72% 0,#332a5b,transparent 36%),var(--bg);color:var(--text);font:14px Manrope,Arial,sans-serif}.hidden{display:none!important}.brand{width:44px;height:44px;border-radius:16px;background:linear-gradient(145deg,#ad9dff,#6959da);display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:-3px;box-shadow:0 8px 20px #6959dc44}.brand span{color:#ded9ff}.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(420px,100%);padding:40px;border:1px solid #ffffff16;border-radius:25px;background:#171b28;box-shadow:var(--shadow)}.auth-card .brand{margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:1.2px;font-weight:800;color:#aa9eff;margin:0 0 10px}.auth-card h1{font-size:27px;letter-spacing:-1.2px;margin:0 0 8px}.muted{color:var(--muted);font-size:12px;line-height:1.5}.auth-card form{display:grid;gap:12px;margin-top:26px}.auth-card label{display:grid;gap:6px;color:#bdc2d1;font-size:11px;font-weight:700}.auth-card input{border:1px solid #343b4b;background:#222837;border-radius:10px;color:#fff;padding:12px;font:13px Manrope;outline:none}.auth-card input:focus{border-color:#9888fa}.primary{border:0;background:linear-gradient(135deg,#9b8cff,#7564df);color:#fff;border-radius:10px;padding:12px 15px;font:700 12px Manrope;cursor:pointer}.text-button{width:100%;border:0;background:none;color:#aaa0ff;font:12px Manrope;margin-top:17px;cursor:pointer}.auth-error{min-height:16px;margin:10px 0 0;color:#ff98a5;font-size:11px}.app-shell{height:100vh;min-height:600px;display:grid;grid-template-columns:70px 270px minmax(380px,1fr) 290px;overflow:hidden}.rail{background:#10131c;border-right:1px solid #242a37;display:flex;align-items:center;flex-direction:column;padding:16px 0;gap:13px}.rail-line{height:1px;width:28px;background:#353b4b}.rail-item,.rail-settings{border:0;background:none;color:#aeb5c7;font-size:19px;border-radius:11px;width:38px;height:38px}.rail-item.active{background:#6658cf;color:#fff}.rail-settings{margin-top:auto}.chats-panel,.details-panel{background:#171b28;border-color:var(--line);border-style:solid}.chats-panel{border-width:0 1px 0 0;display:flex;flex-direction:column;min-width:0}.chats-panel header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--line)}.chats-panel header b{font-size:14px}.chats-panel header small{display:block;color:#878fa1;font-size:10px;margin-top:3px}.chats-panel header button{border:0;border-radius:9px;background:#282e3d;color:#fff;width:30px;height:30px;font-size:17px}.search{margin:14px 15px 10px;height:36px;background:#222837;border:1px solid #313849;border-radius:10px;display:flex;align-items:center;padding:0 10px;gap:7px;color:#7e8598}.search input{width:100%;background:transparent;border:0;outline:none;color:#eee;font:inherit}.section-title{font-size:10px;letter-spacing:.7px;font-weight:800;color:#7f8799;padding:12px 19px}.chat-list{padding:0 9px;display:grid;gap:4px;overflow:auto}.conversation{height:61px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-rows:27px 21px;align-items:center;gap:0 9px;text-align:left;padding:4px 8px;border:0;background:transparent;border-radius:10px;color:var(--text);font:inherit;cursor:pointer}.conversation:hover,.conversation.selected{background:#2d2b4d}.avatar,.hero-avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none;background:linear-gradient(145deg,#9b8cff,#5b51ae);font-weight:800;color:#fff}.conversation .avatar{width:37px;height:37px;border-radius:12px;grid-row:1/3;font-size:12px}.conversation .avatar i{position:absolute;width:9px;height:9px;border-radius:50%;right:-1px;bottom:-1px;background:var(--green);border:2px solid #1b1f2d}.conversation strong{font-size:12px;align-self:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation small{color:#a3aabd;font-size:10px;align-self:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation time{font-size:10px;color:#9299aa;align-self:end}.profile-card{border-top:1px solid var(--line);padding:13px 15px;margin-top:auto;display:flex;gap:9px;align-items:center}.profile-card .avatar{height:33px;width:33px;border-radius:11px}.profile-card strong,.profile-card small{display:block}.profile-card strong{font-size:12px}.profile-card small{font-size:10px;color:var(--green)}.main-content{background:linear-gradient(145deg,#1b1f2c,#141720);min-width:0;display:flex;flex-direction:column}.empty-state{height:100%;display:grid;place-content:center;text-align:center;padding:28px}.empty-star{height:52px;width:52px;background:#6d5de3;display:grid;place-items:center;border-radius:18px;margin:auto;color:#fff;font-size:24px}.empty-state h2{margin:18px 0 6px;font-size:20px}.empty-state p{color:#969daf;font-size:12px;margin:0 0 18px}.chat-view{display:flex;flex-direction:column;height:100%;min-height:0}.chat-head{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 23px;gap:10px}.chat-head .avatar{width:38px;height:38px;border-radius:13px}.chat-head strong,.chat-head small{display:block}.chat-head strong{font-size:13px}.chat-head small{font-size:10px;color:var(--green);margin-top:2px}.header-actions{margin-left:auto;display:flex;gap:5px}.header-actions button{background:transparent;color:#abb3c5;border:0;width:34px;height:34px;border-radius:10px;font-size:19px}.header-actions button:hover{background:#292f3d}.back{display:none}.message-area{overflow:auto;padding:28px clamp(22px,5vw,60px) 16px;flex:1}.day-label{text-align:center;margin-bottom:24px;position:relative}.day-label:before{content:"";height:1px;background:#2b3040;left:0;right:0;top:50%;position:absolute}.day-label span{position:relative;background:#1a1e2a;color:#9097a9;font-size:10px;padding:0 10px}.message{display:flex;gap:10px;margin:14px 0;max-width:82%}.message.incoming>.avatar{width:32px;height:32px;border-radius:11px;font-size:11px}.message-meta{display:flex;gap:8px;margin-bottom:5px}.message-meta strong{font-size:12px}.message-meta time,.message-foot time{font-size:10px;color:#9097a9}.message p{line-height:1.5;margin:0;font-size:13px;color:#e7e8ef}.message.outgoing{margin-left:auto;justify-content:flex-end}.message.outgoing>div{background:linear-gradient(135deg,#6e60db,#5146ae);border-radius:14px 14px 3px 14px;padding:10px 13px}.message-foot{text-align:right;margin-top:4px}.message-foot time{color:#d4d0f5}.message-foot span{color:#8ff0c5;margin-left:5px}.composer{margin:0 clamp(15px,4vw,44px) 20px;min-height:48px;display:flex;align-items:center;background:#242a37;border:1px solid #353c4c;border-radius:14px;padding:0 7px;gap:4px}.composer input{flex:1;background:none;border:0;outline:0;color:#f6f6fa;font:13px Manrope;padding:0 6px}.composer button{height:32px;width:32px;border:0;border-radius:9px;background:transparent;color:#9da5b8;font-size:18px}.composer .send{background:#8879ef;color:#fff}.details-panel{border-width:0 0 0 1px;padding:20px;position:relative;overflow:auto}.details-close{position:absolute;right:14px;top:13px;border:0;background:#292f3c;color:#fff;border-radius:8px;font-size:18px;width:28px;height:28px}.person-hero{text-align:center;padding:23px 0 21px;border-bottom:1px solid var(--line)}.hero-avatar{width:77px;height:77px;border-radius:27px;font-size:27px}.person-hero h2{font-size:16px;margin:12px 0 2px}.person-hero p{margin:0;color:#8c94a7;font-size:12px}.online-pill{display:inline-flex;gap:5px;align-items:center;border-radius:10px;background:#20372f;color:#75d7af;padding:4px 8px;font-size:10px;margin:10px 0}.online-pill i{width:5px;height:5px;background:#5bd9a6;border-radius:50%}.hero-buttons button{background:#282e3d;color:#fff;border:0;border-radius:10px;width:64px;height:48px;font-size:16px}.hero-buttons small{display:block;font-size:9px;color:#aeb3c4}.info-block{padding:17px 0;border-bottom:1px solid var(--line)}.info-block h3{font-size:11px;margin:0 0 9px}.info-block p{color:#aeb4c3;font-size:11px;line-height:1.55;margin:0}dialog{width:min(410px,calc(100vw - 32px));border:1px solid #ffffff17;border-radius:18px;background:#1a1f2d;color:#f7f6fb;box-shadow:var(--shadow);padding:26px}dialog::backdrop{background:#070911a8;backdrop-filter:blur(4px)}dialog h2{margin:0;font-size:20px}.dialog-close{position:absolute;right:13px;top:11px;background:#2b3040;color:#fff;border:0;border-radius:7px;font-size:17px}.users-list{display:grid;gap:5px;margin-top:18px;max-height:310px;overflow:auto}.users-list button{height:58px;text-align:left;display:flex;align-items:center;gap:9px;border:0;border-radius:10px;background:#242a38;color:#f4f3fa;padding:8px;cursor:pointer}.users-list button:hover{background:#303746}.users-list .avatar{width:37px;height:37px;border-radius:12px}.users-list strong,.users-list small{display:block}.users-list small{font-size:10px;color:#9ba1b2;margin-top:2px}.users-list b{margin-left:auto;color:#b9b1ff;font-size:10px}.toast{position:fixed;z-index:20;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#eae8ff;color:#312d55;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:700;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1080px){.app-shell{grid-template-columns:70px 270px minmax(380px,1fr)}.details-panel{display:none}}@media(max-width:720px){.app-shell{min-height:100vh;grid-template-columns:1fr}.rail,.chats-panel,.details-panel{display:none}.chat-head{height:64px;padding:0 16px}.back{display:block;color:#b7b0ed;background:none;border:0;font-size:32px;line-height:1}.message-area{padding:20px 16px 12px}.message{max-width:91%}.composer{margin:0 12px 15px;min-height:50px}}