html,body{height:100%;margin:0;padding:0}:root{--bg:#0b0c0d;--componentBg:#101113;--text:#fff;--border-radius:10px;background:var(--bg);color:var(--text);--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);height:100%}.page{box-sizing:border-box;flex-direction:column;gap:16px;height:100vh;padding:0 5% 24px;display:flex;overflow:hidden}.mainBlock{flex:1;gap:20px;min-height:0;display:flex}.chat{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.messages{background:var(--componentBg);scrollbar-width:thin;scrollbar-color:#302f3173 transparent;border-radius:0 0 14px 14px;flex-direction:column;flex:1;gap:8px;min-height:0;padding:14px;display:flex;overflow-y:auto}.messages::-webkit-scrollbar{width:10px}.messages::-webkit-scrollbar-track{background:0 0}.messages::-webkit-scrollbar-thumb{background:linear-gradient(#00f0ffcc,#6c5ce7cc) padding-box padding-box;border:2px solid #0000;border-radius:999px}.messages::-webkit-scrollbar-thumb:hover{background:linear-gradient(#00f0ff,#6c5ce7)}.msgInput{margin-top:10px}.info{flex-direction:column;flex-shrink:0;gap:12px;width:320px;display:flex}.profile{background:var(--componentBg);border:1px solid #ffffff0f;border-radius:16px;flex-direction:column;gap:10px;padding:16px;display:flex;box-shadow:0 10px 30px #0000004d}.profileTitle{text-transform:uppercase;letter-spacing:1px;color:#ffffffb3;font-size:14px;font-weight:700}.profileName{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:18px;font-weight:700;overflow:hidden}.logoutBtn{cursor:pointer;text-align:center;color:#ff6b6b;background:#ff6b6b14;border-radius:10px;margin-top:4px;padding:10px;transition:all .2s}.logoutBtn:hover{background:#ff6b6b2e}.about{background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;padding:16px;position:relative;overflow:hidden}.about:before{content:"";background:#00ff15;width:2px;position:absolute;top:0;bottom:0;left:0;box-shadow:0 0 12px #00f0ff99}.aboutLabel{letter-spacing:2px;text-transform:uppercase;color:#fff6;margin-bottom:10px;font-size:10px}.aboutText{color:#ffffffd9;font-size:13px;font-style:italic;line-height:1.7}@media (width<=900px){.page{height:auto;overflow:visible}.mainBlock{flex-direction:column}.chat{width:100%;height:70vh}.info{width:100%}}.chat_message{padding:0 20px}.chat_message:first-child{padding-top:30px}.msg{justify-content:space-between;display:flex}.msg_time{color:#949494}.msg_text{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;max-width:90%}.msg_text p,.msg_text h1,.msg_text h2,.msg_text h3,.msg_text ul,.msg_text ol{margin:0}.messageDay{justify-content:center;margin:24px 0 18px;display:flex}.messageDay span{color:#fff9;letter-spacing:.04em;-webkit-user-select:none;user-select:none;background:#ffffff0d;border:1px solid #ffffff14;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600}.chat_input{width:100%;height:65px;position:relative}.chat_input_field{box-sizing:border-box;background-color:var(--componentBg);color:#fff;border:none;border-radius:10px;outline:none;width:100%;height:100%;padding:12px 55px 12px 12px}.send_message_btn{cursor:pointer;width:42px;position:absolute;top:50%;right:20px;transform:translateY(-50%)}header{border-radius:0 0 var(--border-radius) var(--border-radius);background:#15171c;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:20px 5% 20px 20px;display:flex;position:sticky;top:0}.onlineBadge{color:#7cffb2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00ff7814;border:1px solid #00ff7826;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;font-weight:500;display:flex}.dot{background:#0f8;border-radius:50%;width:8px;height:8px;position:relative}.dot:after{content:"";background:#00ff8880;border-radius:50%;animation:1.5s infinite pulse;position:absolute;inset:0}@keyframes pulse{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}.dot.offline{background:#6b7280}.loginPage{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.loginPage>*{width:100%;max-width:420px}.loginPage img{width:60%;max-width:260px;height:auto;display:block}.input{width:100%;margin-top:24px}.colorPicker{justify-content:center;padding-top:12px;display:flex}.enterButton{width:100%;margin-top:24px}.colorPicker{grid-template-rows:repeat(2,32px);grid-auto-flow:column;justify-content:center;gap:10px;display:grid}.colorItem{cursor:pointer;border:2px solid #0000;border-radius:50%;width:32px;height:32px;transition:all .2s}.colorItem:hover{transform:scale(1.1)}.colorItem.active{border:2px solid #fff;box-shadow:0 0 0 2px #000}.mainButton{color:#fff;cursor:pointer;background:#0f8119;border:none;border-radius:35px;width:100%;margin-top:20px;padding:10px 30px;font-size:16px;transition:all .5s}.mainButton:hover{transform:scale(1.05)}.mainButton:disabled{opacity:.5;cursor:not-allowed;transform:none}