@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap";:root{--bg-color: #121212;--sidebar-bg: #000000;--chat-bg: #121212;--primary-color: #FFE135;--text-color: #FFFFFF;--secondary-text: #CCCCCC;--my-message-bg: #FFE135;--my-message-text: #000000;--other-message-bg: #2A2A2A;--input-bg: #1E1E1E;--border-color: #333333;--border-radius: 25px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Quicksand,sans-serif;background-color:var(--bg-color);color:var(--text-color);height:100vh;overflow:hidden}#root{height:100%}.login-container{display:flex;justify-content:center;align-items:center;height:100%;background-color:var(--bg-color);background-image:radial-gradient(circle at 50% 50%,#1a1a1a,#000)}.login-card{background:#000;padding:3rem;border-radius:var(--border-radius);border:2px solid var(--primary-color);text-align:center;box-shadow:0 0 20px #ffe13533;width:100%;max-width:400px}.login-card h1{margin-bottom:.5rem;font-weight:700;color:var(--primary-color);text-transform:uppercase;letter-spacing:2px}.login-card p{color:var(--secondary-text);margin-bottom:2rem;font-weight:600}.login-input{width:100%;padding:15px 20px;border-radius:var(--border-radius);border:2px solid var(--border-color);background:var(--input-bg);color:var(--text-color);font-size:1rem;margin-bottom:1.5rem;transition:all .3s ease;font-family:Quicksand,sans-serif}.login-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 10px #ffe1354d}.login-button{width:100%;padding:15px;border-radius:var(--border-radius);border:none;background:var(--primary-color);color:var(--my-message-text);font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform .2s,box-shadow .2s;text-transform:uppercase}.login-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #ffe13566}.app-container{display:flex;height:100%}.sidebar{width:280px;background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column}.sidebar-header{padding:25px;border-bottom:1px solid var(--border-color);background-color:#000}.sidebar-header h3{font-size:1.2rem;font-weight:700;color:var(--primary-color);text-transform:uppercase;letter-spacing:1px}.users-list{flex:1;overflow-y:auto;padding:15px}.user-item{display:flex;align-items:center;padding:12px;border-radius:var(--border-radius);margin-bottom:8px;transition:background-color .2s;border:1px solid transparent}.user-item:hover{background-color:#1a1a1a;border-color:#333}.user-avatar{width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:700;margin-right:12px;color:#000;background-color:var(--primary-color)!important;box-shadow:0 0 10px #ffe1354d}.user-name{font-size:1rem;font-weight:600}.current-user{font-weight:600;color:var(--primary-color)}.chat-container{flex:1;display:flex;flex-direction:column;background-color:var(--bg-color)}.chat-header{padding:20px 30px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background-color:#000}.chat-header h2{font-weight:700;color:var(--text-color)}.connection-status{display:flex;align-items:center;font-size:.9rem;font-weight:600;color:var(--secondary-text);background:#1e1e1e;padding:8px 15px;border-radius:20px}.status-dot{width:10px;height:10px;border-radius:50%;margin-right:8px}.status-dot.online{background-color:var(--primary-color);box-shadow:0 0 8px var(--primary-color)}.status-dot.offline{background-color:#e74c3c}.message-list{flex:1;overflow-y:auto;padding:30px;display:flex;flex-direction:column;gap:20px}.system-message{text-align:center;color:var(--secondary-text);font-size:.85rem;margin:10px 0;position:relative;font-weight:600;text-transform:uppercase;letter-spacing:1px}.system-message:before,.system-message:after{content:"";display:inline-block;width:40px;height:2px;background-color:var(--border-color);vertical-align:middle;margin:0 15px}.message-wrapper{display:flex;max-width:75%;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.my-message{align-self:flex-end;flex-direction:row-reverse}.other-message{align-self:flex-start}.message-avatar{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;color:#000;margin:0 12px;flex-shrink:0;box-shadow:0 2px 5px #0000004d}.message-bubble{padding:15px 20px;border-radius:var(--border-radius);position:relative;box-shadow:0 4px 10px #0003;font-weight:500}.my-message .message-bubble{background-color:var(--my-message-bg);color:var(--my-message-text);border-bottom-right-radius:4px}.other-message .message-bubble{background-color:var(--other-message-bg);color:var(--text-color);border-bottom-left-radius:4px;border:1px solid var(--border-color)}.message-sender{font-size:.75rem;font-weight:700;margin-bottom:6px;color:var(--primary-color);text-transform:uppercase}.message-content{line-height:1.5;word-break:break-word}.message-time{font-size:.7rem;margin-top:6px;opacity:.6;text-align:right;font-weight:600}.message-input-container{padding:25px;border-top:1px solid var(--border-color);display:flex;gap:15px;background-color:#000}.message-input{flex:1;padding:15px 25px;border-radius:var(--border-radius);border:2px solid var(--border-color);background-color:var(--input-bg);color:var(--text-color);font-size:1rem;transition:all .3s ease;font-family:Quicksand,sans-serif}.message-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 10px #ffe13533}.send-button{width:54px;height:54px;border-radius:50%;border:none;background-color:var(--primary-color);color:#000;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .2s,background-color .2s,box-shadow .2s;font-weight:700}.send-button:hover:not(:disabled){background-color:#ffe660;transform:scale(1.1);box-shadow:0 0 15px #ffe13580}.send-button:disabled{background-color:var(--border-color);cursor:not-allowed;opacity:.5}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#000}::-webkit-scrollbar-thumb{background:#333;border-radius:5px;border:2px solid #000}::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}