.avatar{border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#e0e0e0;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-initials{color:#666;font-weight:500;-webkit-user-select:none;user-select:none}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:16px}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-container p{color:#666;font-size:14px}.create-channel-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.create-channel-modal{background:#fff;border-radius:8px;padding:2rem;width:90%;max-width:500px;box-shadow:0 4px 20px #00000026}.create-channel-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.create-channel-modal-header h2{margin:0;font-size:1.5rem;color:#333}.create-channel-modal-close{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.create-channel-modal-close:hover{color:#333}.create-channel-modal-form{display:flex;flex-direction:column;gap:1rem}.create-channel-modal-field{display:flex;flex-direction:column;gap:.5rem}.create-channel-modal-field label{font-weight:500;color:#555}.create-channel-modal-field input{padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.create-channel-modal-field input:focus{outline:none;border-color:#007bff}.create-channel-modal-field small{color:#666;font-size:.85rem}.create-channel-modal-current-user{background-color:#e3f2fd;padding:.5rem;border-radius:4px;margin-bottom:.5rem;font-size:.9rem;color:#1976d2}.create-channel-modal-current-user strong{font-weight:600}.create-channel-modal-user-input{display:flex;gap:.5rem;align-items:center}.create-channel-modal-user-input input{flex:1}.create-channel-modal-user-list-button{padding:.5rem 1rem;background-color:#f0f0f0;border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:.9rem;white-space:nowrap}.create-channel-modal-user-list-button:hover{background-color:#e0e0e0}.create-channel-modal-user-list{margin-top:1rem;max-height:300px;overflow-y:auto;border:1px solid #ddd;border-radius:4px}.create-channel-modal-user-table{width:100%;border-collapse:collapse;font-size:.9rem}.create-channel-modal-user-table thead{background-color:#f5f5f5;position:sticky;top:0}.create-channel-modal-user-table th,.create-channel-modal-user-table td{padding:.5rem;text-align:left;border-bottom:1px solid #eee}.create-channel-modal-user-table th{font-weight:600;color:#555}.create-channel-modal-user-table tbody tr:hover{background-color:#f9f9f9}.create-channel-modal-add-user-button{padding:.25rem .75rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.85rem}.create-channel-modal-add-user-button:hover{background-color:#0056b3}.create-channel-modal-error{background-color:#fee;color:#c33;padding:.75rem;border-radius:4px;font-size:.9rem}.create-channel-modal-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}.create-channel-modal-cancel,.create-channel-modal-submit{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;font-weight:500}.create-channel-modal-cancel{background-color:#f5f5f5;color:#333}.create-channel-modal-cancel:hover{background-color:#e0e0e0}.create-channel-modal-submit{background-color:#007bff;color:#fff}.create-channel-modal-submit:hover:not(:disabled){background-color:#0056b3}.create-channel-modal-submit:disabled{background-color:#ccc;cursor:not-allowed}.chat-channels{display:flex;flex-direction:column;height:100%;background-color:#fff}.chat-channels-header{padding:20px;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.chat-channels-header h2{font-size:20px;font-weight:600;color:#212121;margin:0}.chat-channels-create-button{width:32px;height:32px;border-radius:50%;border:none;background-color:#007bff;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background-color .2s}.chat-channels-create-button:hover{background-color:#0056b3}.chat-channels-list{flex:1;overflow-y:auto}.chat-channels-empty{display:flex;align-items:center;justify-content:center;height:200px;color:#666}.chat-channel-item{display:flex;align-items:center;padding:12px 20px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s;gap:12px}.chat-channel-item:hover{background-color:#f5f5f5}.chat-channel-item-selected{background-color:#e3f2fd}.chat-channel-item-content{flex:1;min-width:0}.chat-channel-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.chat-channel-item-name{font-size:14px;font-weight:600;color:#212121;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-channel-item-date{font-size:10px;color:#a8a8a8;flex-shrink:0;margin-left:8px}.chat-channel-item-preview{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-message-container{position:relative;display:inline-block}.action-message-trigger{position:absolute;top:4px;right:4px;background-color:#0009;color:#fff;border:none;border-radius:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s}.action-message-container:hover .action-message-trigger{opacity:1}.action-message-menu{position:absolute;top:0;right:32px;background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px;z-index:1000;min-width:200px}.action-message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.action-message-reaction-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.action-message-reaction-btn:hover{background-color:#f0f0f0}.action-message-divider{height:1px;background-color:#e0e0e0;margin:8px 0}.action-message-action-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;text-align:left;cursor:pointer;border-radius:4px;font-size:14px;color:#212121;transition:background-color .2s}.action-message-action-btn:hover{background-color:#f0f0f0}.action-message-action-btn-danger{color:#dc3545}.action-message-action-btn-danger:hover{background-color:#fee}.message-item{display:flex;gap:8px;align-items:flex-start}.message-item-own{flex-direction:row-reverse}.message-item-other{flex-direction:row}.message-item-avatar{flex-shrink:0}.message-item-content{display:flex;flex-direction:column;max-width:70%;min-width:0}.message-item-name{font-size:12px;color:#666;margin-bottom:4px;padding:0 4px}.message-item-own .message-item-name{text-align:right}.message-item-bubble{padding:10px 14px;border-radius:12px;word-wrap:break-word;word-break:break-word}.message-item-bubble-own{background-color:#007bff;color:#fff;border-bottom-right-radius:4px}.message-item-bubble-other{background-color:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.message-item-text{font-size:14px;line-height:1.5;white-space:pre-wrap}.message-item-image{max-width:300px;max-height:300px;border-radius:8px;cursor:pointer}.message-item-file{display:flex;align-items:center;gap:8px;color:#007bff;text-decoration:none;padding:8px;border-radius:4px;transition:background-color .2s}.message-item-file:hover{background-color:#007bff1a}.message-item-video{max-width:400px;max-height:300px;border-radius:8px}.message-item-audio{width:100%;max-width:300px}.message-item-time{font-size:10px;color:#999;margin-top:4px;padding:0 4px}.message-item-own .message-item-time{text-align:right}.message-item-reply{padding:6px;background-color:#0000000d;border-left:3px solid #007bff;border-radius:4px;margin-bottom:8px}.message-item-reply-name{font-size:11px;font-weight:600;color:#007bff;margin-bottom:2px}.message-item-reply-content{font-size:11px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-images{position:relative;cursor:pointer;display:flex;align-items:center}.upload-images-input{position:absolute;width:26px;height:26px;opacity:0;cursor:pointer;font-size:0}.upload-images-label{display:flex;align-items:center;cursor:pointer}.upload-files{position:relative;cursor:pointer;display:flex;align-items:center}.upload-files-input{position:absolute;width:26px;height:26px;opacity:0;cursor:pointer;font-size:0}.upload-files-label{display:flex;align-items:center;cursor:pointer}.reply-item{background-color:#f5f5f5;padding:8px;border-radius:8px;margin-bottom:8px;border-left:3px solid #007bff}.reply-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.reply-item-title{font-size:12px;font-weight:600;color:#212121}.reply-item-close{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;color:#666}.reply-item-close:hover{color:#212121}.reply-item-content{display:flex;align-items:center;gap:6px;margin-bottom:6px}.reply-item-name{font-size:12px;font-weight:500;color:#212121}.reply-item-body{font-size:12px;color:#666}.reply-item-text{line-height:1.4}.reply-item-image{max-height:128px;max-width:128px;border-radius:8px;object-fit:cover}.reply-item-file{display:flex;align-items:center;gap:6px}.reply-item-media{font-style:italic}.message-input-container{padding:16px 20px;border-top:1px solid #e0e0e0;background-color:#fff}.message-input-previews{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.message-input-preview-item{position:relative;display:inline-block}.message-input-preview-image{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid #e0e0e0}.message-input-preview-file{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e0e0e0;border-radius:8px;background-color:#f5f5f5}.message-input-preview-file-name{font-size:12px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-input-preview-close{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background-color:#fff;border:1px solid #e0e0e0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0}.message-input-preview-close:hover{background-color:#f0f0f0}.message-input-form{display:flex;gap:12px;align-items:flex-end}.message-input-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.message-input-textarea{flex:1;padding:10px 14px;border:1px solid #e0e0e0;border-radius:20px;font-size:14px;font-family:inherit;resize:none;outline:none;overflow-y:auto;line-height:1.5}.message-input-textarea:focus{border-color:#007bff}.message-input-send{padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;flex-shrink:0}.message-input-send:hover:not(:disabled){background-color:#0056b3}.message-input-send:disabled{background-color:#ccc;cursor:not-allowed}.message-panel{display:flex;flex-direction:column;height:100%;background-color:#fff}.message-panel-header{padding:16px 20px;border-bottom:1px solid #e0e0e0;background-color:#fff;position:sticky;top:0;z-index:10}.message-panel-header-content{display:flex;justify-content:space-between;align-items:center}.message-panel-header h3{font-size:18px;font-weight:600;color:#212121;margin:0}.message-panel-close{background:none;border:none;font-size:24px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.message-panel-close:hover{background-color:#f0f0f0}.message-panel-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}.message-panel-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#666}.typing-indicator{padding:8px 12px;color:#666;font-size:12px;font-style:italic}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f5f5f5}.login-form{background:#fff;padding:2rem;border-radius:8px;box-shadow:0 2px 10px #0000001a;width:100%;max-width:400px}.login-form h2{margin:0 0 1.5rem;text-align:center;color:#333}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#007bff}.login-button{width:100%;padding:.75rem;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;margin-top:1rem}.login-button:hover:not(:disabled){background-color:#0056b3}.login-button:disabled{background-color:#ccc;cursor:not-allowed}.toggle-button{width:100%;padding:.5rem;background:none;border:none;color:#007bff;cursor:pointer;margin-top:1rem;font-size:.9rem}.toggle-button:hover{text-decoration:underline}.login-error{background-color:#fee;color:#c33;padding:.75rem;border-radius:4px;margin-bottom:1rem;font-size:.9rem}.app-container{width:100%;height:100vh;display:flex;flex-direction:column;background-color:#f5f5f5}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#fff;border-bottom:1px solid #e0e0e0}.app-header h1{margin:0;font-size:1.5rem;color:#333}.logout-button{padding:.5rem 1rem;background-color:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.logout-button:hover{background-color:#c82333}.chat-layout{display:flex;height:100%;width:100%}.channels-panel{width:405px;flex-shrink:0;background-color:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;transition:width .3s ease}.channels-panel-collapsed{width:0;overflow:hidden}.messages-panel{flex:1;display:flex;flex-direction:column;background-color:#fff;min-width:0}.messages-panel-empty{flex:1;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;color:#666}@media (max-width: 768px){.channels-panel{width:100%}.channels-panel-collapsed{display:none}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100vh}