#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}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:#f1f1f1}.messages-container::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:#555}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message-bubble{animation:slideIn .3s ease-out}@keyframes typing{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.typing-dots{display:inline-block}.typing-dots:after{content:"";animation:typing 1.4s infinite;display:inline-block;width:4px;height:4px;border-radius:50%;background-color:#666;margin-left:2px}.user-list-item:hover,.room-list-item:hover{background-color:#0000000a;transition:background-color .2s ease}.MuiTextField-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#1976d2;border-width:2px}.message-input:focus-within{box-shadow:0 0 0 2px #1976d233;border-radius:4px}.MuiAvatar-root:hover{transform:scale(1.05);transition:transform .2s ease}.send-button:hover{background-color:#1565c0;transform:scale(1.05);transition:all .2s ease}.online-indicator{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background-color:#4caf50;border:2px solid white;border-radius:50%}@media (max-width: 768px){.drawer{width:280px!important}.message-bubble{max-width:85%!important}}@media (prefers-color-scheme: dark){.chat-background{background-color:#121212}.message-bubble-other{background-color:#424242;color:#fff}}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.notification{position:fixed;top:20px;right:20px;z-index:9999;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}:root{--primary-color: #1976d2;--secondary-color: #dc004e;--success-color: #4caf50;--warning-color: #ff9800;--error-color: #f44336;--background-color: #f5f5f5;--surface-color: #ffffff;--text-primary: #212121;--text-secondary: #757575}.message-status{display:flex;align-items:center;gap:4px;font-size:12px;opacity:.7}.message-status.sent:after{content:"✓";color:#666}.message-status.delivered:after{content:"✓✓";color:#666}.message-status.read:after{content:"✓✓";color:#4caf50}.emoji-picker{position:absolute;bottom:100%;right:0;z-index:1000;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026}.file-upload{display:none}.file-upload-label{cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s ease}.file-upload-label:hover{background-color:#0000000a}.voice-message{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0000000d;border-radius:20px;max-width:200px}.voice-controls{display:flex;align-items:center;gap:4px}.search-container{position:relative;margin-bottom:16px}.search-input{width:100%;padding:8px 12px 8px 40px;border:1px solid #ddd;border-radius:20px;font-size:14px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#666}.group-header{display:flex;align-items:center;gap:12px}.group-avatar{position:relative}.group-participants{display:flex;align-items:center;gap:4px}.participant-avatar{width:24px;height:24px;border:2px solid white;margin-left:-8px}.participant-avatar:first-child{margin-left:0}.message-reactions{display:flex;gap:4px;margin-top:4px}.reaction{background:#0000001a;border-radius:12px;padding:2px 6px;font-size:12px;cursor:pointer;transition:background-color .2s ease}.reaction:hover{background:#0003}.reply-message{background:#0000000d;border-left:3px solid var(--primary-color);padding:8px;margin-bottom:8px;border-radius:4px;font-size:12px;opacity:.8}.message-menu{position:absolute;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px #00000026;z-index:1000}.message-menu-item{padding:8px 16px;cursor:pointer;transition:background-color .2s ease}.message-menu-item:hover{background-color:#0000000a}.connection-status{position:fixed;top:0;left:0;right:0;z-index:9999;padding:4px;text-align:center;font-size:12px;transition:all .3s ease}.connection-status.connected{background-color:var(--success-color);color:#fff}.connection-status.disconnected{background-color:var(--error-color);color:#fff}.connection-status.reconnecting{background-color:var(--warning-color);color:#fff}