*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f0f0f0;font-family:Trebuchet MS,Arial,sans-serif;font-size:16px}.container{background:#fff;border:2px solid #ccc;width:90%;max-width:1600px;margin:20px auto;box-shadow:2px 2px 5px #000000c5}.header{color:#fff;background:linear-gradient(90deg,#2196f3,#21cbf3);border-bottom:1px solid #06c;justify-content:space-between;align-items:center;padding:12px 16px;font-size:18px;font-weight:700;display:flex}.header h1{font-size:18px;font-weight:700}.header-controls{align-items:center;gap:8px;display:flex}.header-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;padding:4px 8px;font-size:16px;display:flex}.header-btn:hover{background:#fff3}.header-btn svg{width:16px;height:16px}.minimize-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:2px;padding:4px 8px;font-size:20px}.minimize-btn:hover{background:#fff3}.toolbar{background:#e8e8e8;border-bottom:1px solid #ccc;align-items:center;gap:15px;padding:8px 12px;font-size:14px;display:flex}.room-select{background:#fff;border:1px inset #ccc;padding:4px 6px;font-family:inherit;font-size:14px}.toolbar-btn{cursor:pointer;background:#f0f0f0;border:1px outset #ccc;justify-content:center;align-items:center;padding:4px 8px;font-size:14px;display:flex}.toolbar-btn:hover{background:#e0e0e0}.toolbar-btn:active{border:1px inset #ccc}.toolbar-btn svg{width:14px;height:14px}.user-count{color:#666;margin-left:auto}.notification-banner{background:#fff3cd;border-bottom:1px solid #ffc107;align-items:center;gap:12px;padding:8px 16px;font-size:14px;display:flex}.notification-banner button{cursor:pointer;background:#ffc107;border:1px outset #ffc107;padding:4px 8px;font-size:12px}.notification-banner button:hover{background:#e0a800}.notification-banner button:active{border:1px inset #ffc107}.main-content{height:600px;display:flex}.chat-area{flex-direction:column;flex:1 1 0;min-width:300px;max-width:calc(100% - 200px);display:flex}.chat-box{background:#fff;border-right:1px solid #ccc;flex:1;font-size:14px;line-height:1.4;position:relative;overflow-y:auto}.msg{border-bottom:1px dotted #ddd;padding:4px 8px;position:relative}.msg:hover{background:#f5f5f5}.msg.highlighted{border-left:3px solid #ffc107;background:#ffc!important}.msg.reply-msg{background:#f0f8ff;border-left:3px solid #2196f3;margin-left:20px}.msg .time{color:#666;font-size:12px}.msg .user{cursor:pointer;margin-right:6px;font-weight:700}.msg .user.moderator:after{content:"👑";margin-left:4px;font-size:10px}.msg .text{margin-left:6px}.msg .reply-reference{color:#666;cursor:pointer;background:#2196f31a;border-radius:3px;margin-bottom:2px;padding:2px 4px;font-size:11px;font-style:italic;display:inline-block}.msg .reply-reference:hover{background:#2196f333;text-decoration:underline}.msg .file-attachment{color:#06c;background:#f0f0f0;border:1px solid #ccc;border-radius:4px;margin:4px 0;padding:4px 8px;text-decoration:none;display:inline-block}.msg .file-attachment:hover{background:#e0e0e0}.msg .image-attachment{cursor:pointer;border:2px inset #ccc;max-width:300px;max-height:200px;margin:4px 0;display:block}.reply-preview{background:#f0f8ff;border:1px solid #2196f3;justify-content:space-between;align-items:center;margin:4px 8px;padding:8px 12px;font-size:12px;display:flex}.reply-content{flex:1}.reply-label{color:#666;margin-right:8px}.reply-text{font-style:italic}.reply-cancel{color:#666;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:16px}.reply-cancel:hover{color:#333}.user-list{background:#f8f8f8;border-left:1px solid #ccc;width:180px;overflow-y:auto}.user-list-header{background:#e0e0e0;border-bottom:1px solid #ccc;padding:6px 8px;font-size:14px;font-weight:700}.user-item{cursor:pointer;border-bottom:1px dotted #ddd;align-items:center;gap:4px;padding:4px 8px;font-size:14px;display:flex}.user-item:hover{background:#e8e8e8}.user-item.moderator:after{content:"👑";font-size:10px}.input-area{background:#f0f0f0;border-top:1px solid #ccc;padding:8px}.input-container{gap:6px;display:flex}.msg-input{border:1px inset #ccc;flex:1;padding:6px 8px;font-family:inherit;font-size:14px}.send-btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#2196f3,#21cbf3);border:1px outset #2196f3;padding:6px 16px;font-family:inherit;font-size:14px}.send-btn:active{border:1px inset #2196f3}.send-btn:disabled{cursor:not-allowed;background:#ccc;border:1px outset #ccc}.status-bar{color:#666;background:#e8e8e8;border-top:1px solid #ccc;justify-content:space-between;padding:4px 8px;font-size:12px;display:flex}.connection-status{align-items:center;gap:6px;display:flex}.status-dot{background:#0c0;border-radius:50%;width:8px;height:8px}.status-dot.disconnected{background:#c00}.status-btn{color:#666;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin-left:8px;font-size:10px;display:inline-flex}.status-btn:hover{color:#333}.status-btn svg{width:12px;height:12px}.context-menu{z-index:1000;background:#f0f0f0;border:2px outset #ccc;min-width:150px;display:none;position:absolute;box-shadow:2px 2px 5px #0000004d}.context-item{cursor:pointer;border-bottom:1px dotted #ddd;align-items:center;gap:8px;padding:6px 12px;font-size:14px;display:flex}.context-item:hover{background:#e0e0e0}.context-item:last-child{border-bottom:none}.context-icon{flex-shrink:0;width:14px;height:14px}.modal{z-index:2000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal-content{background:#f0f0f0;border:2px outset #ccc;flex-direction:column;width:90%;max-width:600px;max-height:80vh;display:flex;position:relative;overflow:hidden;box-shadow:2px 2px 5px #0000004d}.modal-header{color:#fff;background:linear-gradient(90deg,#2196f3,#21cbf3);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;font-weight:700;display:flex}.modal-header h3{margin:0;font-size:16px}.close-btn{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:20px;display:flex}.close-btn:hover{background:#fff3;border-radius:2px}.modal-body{flex:1;padding:20px;overflow-y:auto}#search-input{border:1px inset #ccc;width:100%;margin-bottom:12px;padding:6px 8px;font-size:14px}.search-filters{align-items:center;gap:12px;margin-bottom:12px;font-size:14px;display:flex}.search-filters input[type=text]{border:1px inset #ccc;padding:4px 6px;font-size:14px}.search-results{background:#fff;border:1px inset #ccc;max-height:300px;overflow-y:auto}.search-result-item{cursor:pointer;border-bottom:1px dotted #ddd;padding:8px;font-size:14px}.search-result-item:hover{background:#f5f5f5}.search-result-item:last-child{border-bottom:none}.upload-area{text-align:center;cursor:pointer;background:#fafafa;border:2px dashed #ccc;padding:40px}.upload-area.drag-over{background:#f0f8ff;border-color:#2196f3}.upload-text{color:#666}.upload-icon{justify-content:center;align-items:center;margin-bottom:12px;font-size:48px;display:flex}.upload-icon svg{color:#666;width:48px;height:48px}.upload-limit{margin-top:8px;font-size:12px}#file-input{display:none}.upload-preview{background:#fff;border:1px inset #ccc;margin-top:16px;padding:12px;display:none}.preview-item{background:#f5f5f5;border:1px solid #ddd;align-items:center;gap:12px;margin-bottom:8px;padding:8px;display:flex}.preview-icon{text-align:center;justify-content:center;align-items:center;min-width:32px;font-size:24px;display:flex}.preview-icon svg{color:#666;width:24px;height:24px}.preview-info{flex:1}.preview-name{margin-bottom:4px;font-weight:700}.preview-size{color:#666;font-size:12px}.preview-remove{color:#fff;cursor:pointer;background:#c00;border:1px outset #c00;padding:4px 8px;font-size:12px}.preview-remove:hover{background:#900}.preview-remove:active{border:1px inset #c00}.pm-window{z-index:1500;resize:both;background:#fff;border:2px solid #ccc;flex-direction:column;width:400px;height:300px;display:flex;position:fixed;overflow:hidden;box-shadow:2px 2px 5px #000000c5}.pm-header{color:#fff;cursor:move;background:linear-gradient(90deg,#2196f3,#21cbf3);border-bottom:1px solid #06c;justify-content:space-between;align-items:center;padding:8px 12px;font-size:14px;font-weight:700;display:flex}.pm-chat{background:#fff;flex:1;font-size:14px;line-height:1.4;overflow-y:auto}.pm-input-area{background:#f0f0f0;border-top:1px solid #ccc;padding:6px}.pm-input-container{gap:4px;display:flex}.pm-input{border:1px inset #ccc;flex:1;padding:4px 6px;font-family:inherit;font-size:12px}.pm-send-btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#2196f3,#21cbf3);border:1px outset #2196f3;padding:4px 12px;font-family:inherit;font-size:12px}.pm-send-btn:active{border:1px inset #2196f3}.pm-close-btn{color:#fff;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:16px}.pm-close-btn:hover{background:#fff3;border-radius:2px}.chat-box::-webkit-scrollbar{width:16px}.user-list::-webkit-scrollbar{width:16px}.pm-chat::-webkit-scrollbar{width:16px}.search-results::-webkit-scrollbar{width:16px}.chat-box::-webkit-scrollbar-track{background:#f0f0f0;border:1px inset #ccc}.user-list::-webkit-scrollbar-track{background:#f0f0f0;border:1px inset #ccc}.pm-chat::-webkit-scrollbar-track{background:#f0f0f0;border:1px inset #ccc}.search-results::-webkit-scrollbar-track{background:#f0f0f0;border:1px inset #ccc}.chat-box::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2196f3,#21cbf3);border:1px outset #2196f3}.user-list::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2196f3,#21cbf3);border:1px outset #2196f3}.pm-chat::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2196f3,#21cbf3);border:1px outset #2196f3}.search-results::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2196f3,#21cbf3);border:1px outset #2196f3}.chat-box::-webkit-scrollbar-button{background:#e0e0e0;border:1px outset #ccc;height:16px}.user-list::-webkit-scrollbar-button{background:#e0e0e0;border:1px outset #ccc;height:16px}.pm-chat::-webkit-scrollbar-button{background:#e0e0e0;border:1px outset #ccc;height:16px}.search-results::-webkit-scrollbar-button{background:#e0e0e0;border:1px outset #ccc;height:16px}@media (width<=640px){.container{max-width:none;margin:10px}.main-content{height:500px}.user-list{display:none}.toolbar{flex-wrap:wrap;gap:8px}.chat-area{min-width:100%;max-width:100%}.pm-window{width:90%;max-width:350px;height:250px}.modal-content{width:95%;margin:5% auto}}.msg.system{background:#fff3cd;border-left:3px solid #ffc107}.msg.system .user{color:#856404}.welcome{background:#d4edda;border:1px solid #c3e6cb;border-radius:2px;margin:6px;padding:10px;font-size:14px}.header-btn.muted{opacity:.5}.desktop-notification{z-index:3000;background:#f0f0f0;border:2px outset #ccc;max-width:300px;padding:12px 16px;font-size:14px;position:fixed;top:20px;right:20px;box-shadow:2px 2px 5px #0000004d}.notification-title{margin-bottom:4px;font-weight:700}.notification-body{color:#666}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h4{color:#333;border-bottom:2px solid #e0e0e0;margin:0 0 20px;padding-bottom:10px;font-size:18px;font-weight:600}.setting-item{background:#fafafa;border:1px solid #e8e8e8;border-radius:6px;margin-bottom:20px;padding:16px;transition:background-color .2s}.setting-item:hover{background:#f5f5f5}.setting-label{cursor:pointer;color:#333;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:15px;font-weight:500;display:flex}.setting-description{color:#777;margin:8px 0 0;font-size:13px;line-height:1.5}.permission-status span:first-child{color:#555;font-weight:500}.small-btn{color:#fff;cursor:pointer;background:#2196f3;border:none;border-radius:4px;padding:6px 12px;font-size:12px;font-weight:500;transition:background-color .2s}.toggle-switch{width:48px;height:24px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:#ccc;border-radius:24px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:3px;left:3px;box-shadow:0 2px 4px #0003}.toggle-switch input:checked+.toggle-slider{background-color:#4caf50}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.toggle-switch input:disabled+.toggle-slider{cursor:not-allowed;background-color:#ddd}.toggle-switch input:disabled+.toggle-slider:before{background-color:#f5f5f5}.permission-status{align-items:center;gap:8px;font-size:14px;display:flex}#permission-status-text{border-radius:4px;padding:2px 8px;font-size:12px;font-weight:500}#permission-status-text.granted{color:#155724;background-color:#d4edda}#permission-status-text.denied{color:#721c24;background-color:#f8d7da}#permission-status-text.default{color:#856404;background-color:#fff3cd}.small-btn{color:#fff;cursor:pointer;background:#007bff;border:none;border-radius:4px;padding:4px 8px;font-size:12px}.small-btn:hover{background:#0056b3}