*{box-sizing:border-box}*,body{margin:0;padding:0}body{background:#f4f4f4;color:#333;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6}.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}.mt-5{margin-top:3rem}.text-center{text-align:center}.form-control{background-clip:padding-box;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;color:#495057;display:block;line-height:1.5;padding:.375rem .75rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-group{margin-bottom:1rem}.btn{border:1px solid #0000;border-radius:.25rem;display:inline-block;font-weight:400;line-height:1.5;padding:.375rem .75rem;text-align:center;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn-primary{border-color:#007bff}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #007bff;outline-offset:2px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.fade-in{animation:fadeIn .3s ease-in}.login-container{background-color:#f4f4f4}.login-card{border-radius:8px;box-shadow:0 4px 10px #0000001a;max-width:400px;padding:2rem}.login-title{margin-bottom:.5rem}.login-subtitle{margin-bottom:1.5rem}.error-message{border:1px solid #f5c6cb;border-radius:4px;margin-bottom:1rem;padding:.75rem}.popular-rooms{margin-bottom:1.5rem;margin-top:1rem}.popular-rooms p{font-size:.9rem;margin-bottom:.5rem}.room-buttons{gap:.5rem}.room-btn{background:#e9ecef;border:none;border-radius:20px;padding:.5rem 1rem}.room-btn:hover{background:#dee2e6}.room-btn.active{background:#007bff}.join-btn{font-weight:700;margin-top:1rem;padding:.75rem;transition:all .3s}.join-btn:hover:not(:disabled){background-color:#0069d9;transform:translateY(-2px)}.join-btn:disabled{cursor:not-allowed;opacity:.65}.lottie-emoji-picker{animation:pickerSlideIn .2s ease-out;background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;height:420px;overflow:hidden;position:absolute;width:350px;z-index:1000}.lottie-emoji-picker.bottom{bottom:50px;left:0}.lottie-emoji-picker.top{left:0;top:50px}@keyframes pickerSlideIn{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.lottie-picker-header{align-items:center;background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;gap:8px;padding:10px 12px}.search-container{flex:1 1;position:relative}.emoji-search-input{border:1px solid #dee2e6;border-radius:8px;font-size:14px;outline:none;padding:8px 32px 8px 12px;transition:border-color .2s,box-shadow .2s;width:100%}.emoji-search-input:focus{border-color:#5865f2;box-shadow:0 0 0 3px #5865f226}.emoji-search-input::placeholder{color:#adb5bd}.search-clear-btn{align-items:center;background:#adb5bd;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:14px;height:20px;justify-content:center;line-height:1;position:absolute;right:6px;top:50%;transform:translateY(-50%);transition:background-color .2s;width:20px}.search-clear-btn:hover{background:#868e96}.picker-close-btn{align-items:center;background:none;border:none;border-radius:6px;color:#868e96;cursor:pointer;display:flex;font-size:20px;height:28px;justify-content:center;transition:background-color .2s,color .2s;width:28px}.picker-close-btn:hover{background:#e9ecef;color:#495057}.lottie-category-tabs{background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;gap:4px;overflow-x:auto;padding:6px 8px;scrollbar-width:none}.lottie-category-tabs::-webkit-scrollbar{display:none}.category-tab{align-items:center;background:#0000;border:none;border-radius:8px;cursor:pointer;display:flex;flex-shrink:0;font-size:20px;height:36px;justify-content:center;transition:background-color .2s,transform .1s;width:36px}.category-tab:hover{background:#e9ecef}.category-tab.active{background:#5865f2;transform:scale(1.05)}.lottie-emoji-grid{grid-gap:4px;display:grid;flex:1 1;gap:4px;grid-template-columns:repeat(6,1fr);overflow-x:hidden;overflow-y:auto;padding:8px}.lottie-emoji-grid::-webkit-scrollbar{width:6px}.lottie-emoji-grid::-webkit-scrollbar-track{background:#0000}.lottie-emoji-grid::-webkit-scrollbar-thumb{background:#dee2e6;border-radius:3px}.lottie-emoji-grid::-webkit-scrollbar-thumb:hover{background:#adb5bd}.lottie-emoji-item{align-items:center;aspect-ratio:1;border-radius:8px;cursor:pointer;display:flex;justify-content:center;padding:4px;transition:background-color .2s,transform .1s}.lottie-emoji-item:hover{background:#f1f3f5;transform:scale(1.15)}.lottie-emoji-item:active{transform:scale(.95)}.lottie-wrapper{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.lottie-emoji{height:100%;max-height:40px;max-width:40px;width:100%}.emoji-fallback{font-size:28px;line-height:1}.emoji-fallback.loading{opacity:.5}.picker-empty,.picker-loading{align-items:center;color:#868e96;display:flex;font-size:14px;grid-column:1/-1;height:200px;justify-content:center}.lottie-picker-footer{align-items:center;background:#f8f9fa;border-top:1px solid #e9ecef;color:#868e96;display:flex;font-size:11px;justify-content:space-between;padding:8px 12px}.powered-by{font-style:italic}@media (max-width:768px){.lottie-emoji-picker{height:380px;width:300px}.lottie-emoji-grid{grid-template-columns:repeat(5,1fr)}.lottie-emoji{max-height:36px;max-width:36px}.emoji-fallback{font-size:24px}}@media (max-width:480px){.lottie-emoji-picker{height:350px;max-width:320px;width:calc(100vw - 20px)}.lottie-emoji-grid{gap:2px;grid-template-columns:repeat(5,1fr);padding:6px}.category-tab{font-size:18px;height:32px;width:32px}}@media (prefers-color-scheme:dark){.lottie-emoji-picker{background:#2b2d31;box-shadow:0 8px 32px #0006}.lottie-category-tabs,.lottie-picker-footer,.lottie-picker-header{background:#1e1f22;border-color:#3f4147}.emoji-search-input{background:#383a40;border-color:#3f4147;color:#dbdee1}.emoji-search-input::placeholder{color:#6d6f78}.emoji-search-input:focus{border-color:#5865f2}.picker-close-btn{color:#b5bac1}.picker-close-btn:hover{background:#3f4147;color:#dbdee1}.category-tab:hover,.lottie-emoji-item:hover{background:#3f4147}.lottie-emoji-grid::-webkit-scrollbar-thumb{background:#3f4147}.lottie-emoji-grid::-webkit-scrollbar-thumb:hover{background:#5c5e66}.lottie-picker-footer,.picker-empty,.picker-loading{color:#6d6f78}}.animated-message{word-wrap:break-word;display:inline}.lottie-emoji-inline{align-items:center;display:inline-flex;justify-content:center;margin:0 1px;vertical-align:middle}.lottie-emoji-inline svg{display:block}.lottie-emoji-inline.large-emoji{display:inline-block;margin:4px 2px}.emoji-static{display:inline;line-height:1;vertical-align:middle}.emoji-static.large-emoji{display:inline-block;margin:4px 2px}.message-content .animated-message:only-child{align-items:center;display:flex;flex-wrap:wrap}.lottie-emoji-inline:hover{transform:scale(1.1);transition:transform .15s ease}.lottie-message-emoji{align-items:center;display:inline-flex;justify-content:center;vertical-align:middle}.lottie-message-emoji .lottie-emoji{height:24px;width:24px}.lottie-message-emoji.large .lottie-emoji{height:48px;width:48px}.lottie-message-emoji.jumbo .lottie-emoji{height:64px;width:64px}.custom-emoji-item{height:100%;max-height:48px;max-width:48px;position:relative;width:100%}.custom-emoji-img{border-radius:4px;height:32px;object-fit:contain;width:32px}.custom-emoji-inline{display:inline-block;margin:0 2px;vertical-align:middle}.custom-emoji-inline img{height:24px;object-fit:contain;vertical-align:middle;width:auto}.custom-emoji-inline.large-emoji img{height:48px}.custom-emoji-inline.jumbo-emoji img{height:64px}.custom-emoji-inline:hover{transform:scale(1.1);transition:transform .15s ease}@media (max-width:768px){.custom-emoji-img{height:28px;width:28px}.custom-emoji-inline img{height:22px}}@media (max-width:480px){.custom-emoji-img{height:24px;width:24px}.custom-emoji-inline img{height:20px}}.private-emoji-picker-wrapper{position:fixed;z-index:99999}.private-emoji-picker-wrapper .lottie-emoji-picker{bottom:auto!important;height:320px!important;left:auto!important;position:static!important;right:auto!important;top:auto!important;width:280px!important}.private-emoji-picker-wrapper .lottie-emoji-grid{grid-template-columns:repeat(5,1fr)}.private-emoji-picker-wrapper .lottie-emoji{max-height:32px;max-width:32px}.private-emoji-picker-wrapper .emoji-fallback{font-size:22px}.lottie-emoji-picker.none{bottom:auto;left:auto;position:static;right:auto;top:auto}.group-container{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.sidebar-header-content{align-items:center;display:flex;flex:1 1;gap:6px;justify-content:space-between;min-width:0}.current-user-status{position:relative}.status-indicator{align-items:center;background:#00000014;border:1px solid #0000001a;border-radius:12px;color:#333;cursor:pointer;display:flex;font-size:11px;font-weight:500;gap:4px;padding:4px 8px;transition:background-color .2s;white-space:nowrap}.status-indicator:hover{background:#0000001f}.status-indicator .status-label{color:#333;font-weight:500}.status-indicator .status-arrow{color:#666}.status-emoji{font-size:10px}.status-label{font-weight:500}.status-arrow{font-size:8px;transition:transform .2s}.status-dropdown{background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:120px;position:absolute;right:0;top:100%;z-index:1000}.status-option{align-items:center;color:#333!important;cursor:pointer;display:flex;font-size:13px;gap:8px;padding:10px 12px;transition:background-color .2s}.status-option .status-label{color:#333}.status-option .status-emoji{font-size:12px}.status-option:hover{background-color:#f5f5f5}.status-option.active{background-color:#e3f2fd;color:#1976d2!important}.status-option.active .status-label{color:#1976d2}.status-option:first-child{border-radius:8px 8px 0 0}.status-option:last-child{border-radius:0 0 8px 8px}.user-status-message{color:#999;display:block;font-size:9px;font-style:italic;line-height:1.1;margin-top:0}.status-message-inline{font-style:italic;opacity:.8}.app-layout.theme-light,.theme-light{--bg-color:#f8f9fa;--text-color:#212529;--message-bg:#f1f0f0;--user-message-bg:#fff;--sidebar-bg:#fff;--border-color:#ddd;--nav-bg:#e9ecef;--nav-text:#212529}.app-layout.theme-dark,.theme-dark{--bg-color:#343a40;--text-color:#f8f9fa;--message-bg:#495057;--user-message-bg:#212529;--sidebar-bg:#212529;--border-color:#495057;--nav-bg:#212529;--nav-text:#f8f9fa}.app-layout.theme-blue,.theme-blue{--bg-color:#e6f2ff;--text-color:#0056b3;--message-bg:#cce5ff;--user-message-bg:#b8daff;--sidebar-bg:#fff;--border-color:#b8daff;--nav-bg:#0056b3;--nav-text:#fff}.app-layout.theme-green,.theme-green{--bg-color:#e8f5e9;--text-color:#1b5e20;--message-bg:#c8e6c9;--user-message-bg:#a5d6a7;--sidebar-bg:#fff;--border-color:#a5d6a7;--nav-bg:#2e7d32;--nav-text:#fff}.app-layout.theme-purple,.theme-purple{--bg-color:#f3e5f5;--text-color:#4a148c;--message-bg:#e1bee7;--user-message-bg:#ce93d8;--sidebar-bg:#fff;--border-color:#ce93d8;--nav-bg:#6a1b9a;--nav-text:#fff}.app-layout.theme-red,.theme-red{--bg-color:#ffebee;--text-color:#b71c1c;--message-bg:#ffcdd2;--user-message-bg:#ef9a9a;--sidebar-bg:#fff;--border-color:#ef9a9a;--nav-bg:#c62828;--nav-text:#fff}.app-layout.theme-orange,.theme-orange{--bg-color:#fff3e0;--text-color:#e65100;--message-bg:#ffe0b2;--user-message-bg:#ffcc80;--sidebar-bg:#fff;--border-color:#ffcc80;--nav-bg:#ef6c00;--nav-text:#fff}.app-layout.theme-teal,.theme-teal{--bg-color:#e0f2f1;--text-color:#004d40;--message-bg:#b2dfdb;--user-message-bg:#80cbc4;--sidebar-bg:#fff;--border-color:#80cbc4;--nav-bg:#00796b;--nav-text:#fff}.app-layout.theme-pink,.theme-pink{--bg-color:#fce4ec;--text-color:#880e4f;--message-bg:#f8bbd0;--user-message-bg:#f48fb1;--sidebar-bg:#fff;--border-color:#f48fb1;--nav-bg:#c2185b;--nav-text:#fff}.app-layout.theme-indigo,.theme-indigo{--bg-color:#e8eaf6;--text-color:#1a237e;--message-bg:#c5cae9;--user-message-bg:#9fa8da;--sidebar-bg:#fff;--border-color:#9fa8da;--nav-bg:#3949ab;--nav-text:#fff}.app-layout,.group-container{background-color:var(--bg-color);color:var(--text-color)}.app-layout .navigation,.group-container .navigation,.navigation{background:var(--nav-bg)!important;color:var(--nav-text)}.left-sidebar,.sidebar{background:var(--sidebar-bg);border-color:var(--border-color)}.chatroom-container{background:var(--bg-color)}.message{background-color:var(--message-bg);color:var(--text-color)}.user-message{background:var(--user-message-bg)}.message-input{background:var(--sidebar-bg)}.form-control,.message-input{border-color:var(--border-color)}.form-control{background:#fff;background:var(--sidebar-bg,#fff);color:#212529;color:var(--text-color,#212529)}.main-content{display:flex;flex:1 1;overflow:hidden;position:relative}.left-sidebar{background:#fff;background:var(--sidebar-bg,#fff);border-right:1px solid #ddd;border-right:1px solid var(--border-color,#ddd);box-shadow:2px 0 10px #00000026;display:flex;flex-direction:column;height:100%;left:0;overflow-y:auto;position:fixed;top:0;transform:translateX(-100%);transition:transform .3s ease-in-out;width:280px;z-index:1100}.left-sidebar.show{transform:translateX(0)}.left-sidebar-header{align-items:center;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;padding:15px}.left-sidebar-header h4{color:#007bff;font-size:1.1rem;margin:0}.left-sidebar-content{flex:1 1;padding:15px}.settings-section{margin-bottom:20px}.settings-section h5{border-bottom:1px solid #eee;color:#007bff;margin-bottom:10px;padding-bottom:5px}.profile-section{border-bottom:1px solid #eee;margin-bottom:15px;padding-bottom:15px}.profile-item{display:flex;flex-direction:column;gap:10px}.profile-info{align-items:center;gap:10px}.profile-avatar-sidebar{border-radius:50%;height:40px;object-fit:cover;width:40px}.profile-username{color:#333;font-size:14px}.profile-role{color:#666;font-size:12px;text-transform:capitalize}.edit-profile-btn{background:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:12px;padding:8px 16px;transition:background-color .2s}.edit-profile-btn:hover{background:#0056b3}.setting-item{margin-bottom:15px}.setting-item label{display:block;font-weight:500;margin-bottom:5px}.color-picker{border:none;border-radius:4px;cursor:pointer;height:30px;width:100%}.font-size-control{align-items:center;display:flex;gap:10px}.font-size-btn{background:#f0f0f0;border:none;border-radius:4px;cursor:pointer;font-weight:700;height:30px;transition:all .2s;width:30px}.font-size-btn:hover{background:#e0e0e0}.font-size-value{font-weight:700;text-align:center;width:40px}.theme-options{display:flex;flex-wrap:wrap;gap:10px}.theme-option{border:2px solid #0000;border-radius:50%;cursor:pointer;height:30px;transition:transform .2s;width:30px}.theme-option:hover{transform:scale(1.1)}.theme-option.active{border-color:#007bff}.theme-light{background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.theme-dark{background:linear-gradient(135deg,#343a40,#212529)}.theme-blue{background:linear-gradient(135deg,#007bff,#0056b3)}.theme-green{background:linear-gradient(135deg,#28a745,#1e7e34)}.theme-purple{background:linear-gradient(135deg,#6f42c1,#4e2a84)}.theme-red{background:linear-gradient(135deg,#dc3545,#c82333)}.theme-orange{background:linear-gradient(135deg,#fd7e14,#e65100)}.theme-teal{background:linear-gradient(135deg,#20c997,#00796b)}.theme-pink{background:linear-gradient(135deg,#e83e8c,#c2185b)}.theme-indigo{background:linear-gradient(135deg,#6610f2,#3949ab)}.navigation{background:var(--nav-bg);box-shadow:0 2px 5px #0000001a;color:var(--nav-text);z-index:10}.nav-main-row{padding:10px 15px}.nav-left{align-items:center;display:flex;gap:10px}.nav-left h3{color:#fff;color:var(--nav-text,#fff);font-size:1.1rem;margin:0}.nav-right{align-items:center;display:flex;gap:8px}.nav-topic-row{background:#0000001a;padding:5px 15px 8px}.nav-topic-text{color:#ffffffe6;font-size:12px}@media (max-width:768px){.nav-logo{display:block}.nav-left h3{font-size:.95rem}.nav-share-btn .btn-text,.toggle-sidebar-btn .btn-text{display:none}}.leave-room-btn,.toggle-settings-btn,.toggle-sidebar-btn{background:#fff;border:none;border-radius:5px;color:var(--nav-bg);cursor:pointer;font-weight:700;margin-left:8px;padding:8px 12px;transition:all .2s ease}.toggle-settings-btn,.toggle-sidebar-btn{align-items:center;display:flex;gap:5px}.toggle-settings-btn{background-color:#17a2b8;color:#fff}.toggle-settings-btn:hover{background-color:#138496;transform:translateY(-2px)}.nav-share-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:700;gap:5px;padding:8px 14px;transition:all .2s ease}.nav-share-btn:hover{background:linear-gradient(135deg,#5a6fd6,#6a4190);box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.user-count-badge{align-items:center;background-color:#28a745;border-radius:50%;color:#fff;display:inline-flex;font-size:.8rem;height:20px;justify-content:center;margin-left:5px;min-width:20px;padding:0 5px}.leave-room-btn:hover,.toggle-sidebar-btn:hover{background:#f0f0f0;transform:translateY(-2px)}.leave-room-btn{background:#dc3545;color:#fff}.leave-room-btn:hover{background:#c82333}.sidebar{background:#f0f0f0;background:var(--sidebar-bg,#f0f0f0);border-left:1px solid #ddd;border-left:1px solid var(--border-color,#ddd);box-shadow:none;display:none;flex-direction:column;flex-shrink:0;height:100%;max-width:240px;min-width:240px;overflow-y:auto;position:relative;right:auto;top:auto;transform:none;width:240px;z-index:1}.sidebar.show{display:flex}.sidebar-header{align-items:center;border-bottom:1px solid #ddd;border-bottom:1px solid var(--border-color,#ddd);display:flex;gap:8px;justify-content:space-between;padding:10px 12px}.sidebar-header h4{color:#007bff;color:var(--nav-bg,#007bff);flex-shrink:0;font-size:.85rem;margin:0;white-space:nowrap}.close-btn{background:#dc3545;border-radius:50%;color:#fff;font-size:1.2rem;height:30px;width:30px}.sidebar-content{flex:1 1;padding:15px}.room-info{background:#f8f9fa;background:var(--message-bg,#f8f9fa);border-radius:5px;margin-bottom:15px;padding:10px}.room-info p{margin:5px 0}.user-list{list-style:none;margin:0;padding:0}.user-item{border-bottom:1px solid #f0f0f0;border-bottom:1px solid var(--border-color,#f0f0f0);flex-direction:column;margin-bottom:0;padding:0;position:relative;transition:all .2s ease}.user-info,.user-item{border-radius:0;display:flex}.user-info{align-items:center;cursor:pointer;padding:3px 6px;-webkit-user-select:none;user-select:none;width:100%}.user-avatar-container{border-radius:50%;cursor:pointer;flex-shrink:0;margin-right:6px;position:relative}.user-avatar{border:1px solid #e9ecef;border:1px solid var(--border-color,#e9ecef);border-radius:50%;display:block;height:40px;object-fit:cover;width:40px}.user-avatar-initials{font-size:16px;text-shadow:0 1px 2px #0000001a}.user-status{border:1.5px solid #fff;border-radius:50%;bottom:10px;height:9px;position:absolute;right:0;width:9px}.user-details{display:flex;flex:1 1;flex-direction:column;line-height:1.2;min-width:0}.user-name{color:#333;cursor:pointer;font-size:18px;font-weight:500;gap:4px;margin-bottom:0;position:relative}.unread-badge,.user-name{align-items:center;display:flex}.unread-badge{animation:pulse 2s infinite;background-color:#ff4757;border-radius:50%;box-shadow:0 2px 4px #ff47574d;height:18px;justify-content:center;transition:all .2s ease}.unread-badge.clickable{cursor:pointer}.unread-badge.clickable:hover{background-color:#ff3742;box-shadow:0 4px 8px #ff475766;transform:scale(1.1)}.user-name.clickable{cursor:pointer;transition:color .2s ease}.user-name.clickable:hover{color:#007bff}.user-details{position:relative}.quick-options-menu{animation:fadeIn .15s ease;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;gap:2px;left:0;margin-top:4px;min-width:120px;padding:4px;position:absolute;top:100%;z-index:100}.quick-option-btn{align-items:center;background:#0000;border:none;border-radius:6px;color:#333;cursor:pointer;display:flex;font-size:13px;gap:6px;padding:8px 12px;text-align:left;transition:background-color .2s ease;white-space:nowrap;width:100%}.quick-option-btn:hover{background:#f0f0f0}.quick-option-btn.dm-btn:hover{background:#e3f2fd;color:#1976d2}.quick-option-btn.ignore-btn:hover{background:#ffebee;color:#c62828}.quick-options-divider{background:#e0e0e0;height:1px;margin:4px 0}.quick-option-btn.kick-btn:hover{background:#fff3e0;color:#e65100}.quick-option-btn.mute-btn:hover{background:#fce4ec;color:#ad1457}.quick-option-btn.ban-btn:hover{background:#ffebee;color:#b71c1c}.user-status.online{background:#28a745;box-shadow:0 0 5px #28a74580}.ignored-badge{background-color:#dc3545;border-radius:10px;color:#fff;font-size:.7rem;margin-left:8px;padding:2px 5px}.user-options{background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:0 2px 5px #0000001a;display:flex;flex-direction:column;margin-top:5px;overflow:hidden;z-index:10}.option-btn{background:none;border:none;cursor:pointer;padding:8px 12px;text-align:left;transition:background .2s}.option-btn:hover{background-color:#f0f0f0}.option-btn:first-child{border-bottom:1px solid #eee}.no-users{color:#6c757d;font-style:italic}.user-search-container{align-items:center;background-color:#f8f9fa;border-radius:20px;display:flex;height:36px;margin-bottom:10px;overflow:hidden;padding:0 5px;transition:all .3s ease}.user-search-container.expanded{background-color:#fff;box-shadow:0 1px 3px #0000001a}.search-toggle-btn{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-size:1.1rem;justify-content:center;min-width:36px;padding:5px;transition:transform .2s ease;z-index:2}.search-toggle-btn:hover{transform:scale(1.1)}.user-search-input{background:#0000;border:none;font-size:.9rem;outline:none;transition:all .3s ease}.user-search-input:focus{border:none;box-shadow:none;outline:none}.user-search-input::placeholder{color:#adb5bd}.private-chat-window{background:#fff!important;border-radius:12px!important;bottom:20px!important;box-shadow:0 4px 24px #0000002e!important;display:flex!important;flex-direction:column!important;height:520px!important;overflow:visible!important;position:fixed!important;right:20px!important;width:340px!important;z-index:9999!important}.private-chat-window:nth-child(2){right:370px}.private-chat-window:nth-child(3){right:720px}.notification-badge{align-items:center;animation:pulseNotification 1.5s infinite;background-color:#dc3545;border-radius:50%;box-shadow:0 2px 5px #0003;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:700;height:25px;justify-content:center;position:absolute;right:-8px;top:-8px;width:25px;z-index:20}.notification-badge:hover{background-color:#c82333;transform:scale(1.2)}@keyframes pulseNotification{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.private-chat-header{align-items:center;background:var(--nav-bg);border-radius:12px 12px 0 0;color:#fff;display:flex;justify-content:space-between;overflow:hidden;padding:10px 15px}.private-chat-header h5{font-size:1rem;margin:0}.private-chat-messages{background:#fff;display:flex;flex:1 1;flex-direction:column;gap:8px;min-height:0;overflow-x:hidden;overflow-y:auto;padding:10px 10px 5px}.private-message{border-radius:15px;max-width:80%;overflow:hidden;padding:8px 12px;word-break:break-word}.private-message.sent{align-self:flex-end;background-color:var(--nav-bg);border-bottom-right-radius:5px;color:#fff}.private-message.received{align-self:flex-start;background-color:#f1f0f0;border-bottom-left-radius:5px}.private-message-time{display:block;font-size:.65em;margin-top:4px;opacity:.7;text-align:right}.private-message.received .private-message-time{color:#666}.private-message.sent .private-message-time{color:#fffc}.private-message{position:relative}.private-delete-btn{align-items:center;background:#0000004d;border:none;border-radius:50%;color:#fff;cursor:pointer;display:none;font-size:12px;height:18px;justify-content:center;line-height:1;padding:0;position:absolute;right:2px;top:2px;transition:background .2s;width:18px}.private-message:hover .private-delete-btn{display:flex}.private-delete-btn:hover{background:#dc3545cc}.private-message-menu-container{position:absolute;right:4px;top:4px;z-index:20}.private-message.received .private-message-menu-container{left:4px;right:auto}.private-message-menu-btn{align-items:center;background:#0000004d;border:none;border-radius:50%;color:#fff;cursor:pointer;display:none;font-size:14px;font-weight:700;height:22px;justify-content:center;line-height:1;padding:0;transition:background .2s;width:22px}.private-message:hover .private-message-menu-btn{display:flex}.private-message.sent .private-message-menu-btn{background:#ffffff4d;color:#fff}.private-message.received .private-message-menu-btn{background:#0003;color:#333}.private-message-menu-btn:hover{background:#00000080}.private-message.sent .private-message-menu-btn:hover{background:#ffffff80}.private-message-dropdown{background:#fff;border-radius:8px;box-shadow:0 2px 10px #00000026;min-width:100px;overflow:hidden;position:absolute;right:0;top:100%;z-index:100}.private-message.received .private-message-dropdown{left:0;right:auto}.private-message-dropdown-item{align-items:center;background:none;border:none;color:#333;cursor:pointer;display:flex;font-size:13px;gap:6px;padding:8px 12px;transition:background .15s;width:100%}.private-message-dropdown-item:hover{background:#f5f5f5}.private-message-dropdown-item.delete{color:#dc3545}.private-message-dropdown-item.delete:hover{background:#fff0f0}.private-message.deleted{opacity:.7}.private-message.deleted.sent{background-color:#6c757d80;background-color:rgba(var(--nav-bg-rgb,108,117,125),.5)}.private-message.deleted.received{background-color:#e9e8e8}.deleted-message-text{color:#888;font-size:.9em;font-style:italic}.private-message.sent .deleted-message-text{color:#ffffffb3}.no-messages{color:#6c757d;font-style:italic;margin-top:20px;text-align:center}.private-reply-indicator{align-items:center;background:#0000000d;border-left:2px solid #6c757d;border-radius:4px;display:flex;font-size:.8em;gap:4px;margin-bottom:4px;padding:4px 8px}.private-reply-indicator .reply-icon{color:#6c757d}.private-reply-indicator .reply-to-user{color:#495057;font-weight:600}.private-reply-indicator .reply-to-text{color:#6c757d;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.private-message.sent .private-reply-indicator{background:#ffffff26;border-left-color:#ffffff80}.private-message.sent .private-reply-indicator .reply-icon,.private-message.sent .private-reply-indicator .reply-to-text,.private-message.sent .private-reply-indicator .reply-to-user{color:#ffffffd9}.private-chat-input{background:#fafafa;border-radius:0 0 12px 12px;border-top:1px solid #eee;overflow:visible!important;padding:8px 10px;position:relative!important}.private-chat-window .private-chat-input .lottie-emoji-picker{z-index:10001}.private-action-btn{background:none;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:1.2rem;line-height:1;padding:6px;transition:background .2s}.private-action-btn:hover{background:#00000014}.private-recording-row{align-items:center;background:#fff3f3;border-radius:8px;display:flex;gap:10px;padding:8px 10px}.private-recording-row .recording-indicator{align-items:center;display:flex;flex:1 1;gap:6px}.private-recording-row .recording-dot{animation:recordingPulse 1s infinite;background:#f44;border-radius:50%;height:10px;width:10px}.private-recording-row .recording-time{color:#666;font-size:.9rem;font-weight:500}.private-recording-row .recording-control-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:1rem;height:32px;justify-content:center;transition:transform .15s;width:32px}.private-recording-row .recording-control-btn.stop{background:#4caf50;color:#fff}.private-recording-row .recording-control-btn.cancel{background:#f44336;color:#fff}.private-recording-row .recording-control-btn:hover{transform:scale(1.1)}.private-input-row{align-items:center;display:flex;gap:4px}.private-input-wrapper{align-items:center;display:flex;flex:1 1;position:relative}.private-message-input{background:#fff;background:var(--sidebar-bg,#fff);border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:20px;color:#333;color:var(--text-color,#333);font-size:.9rem;outline:none;padding:8px 30px 8px 8px;transition:border-color .2s;width:100%}.private-message-input:focus{border-color:var(--nav-bg)}.private-message-input::placeholder{color:#aaa;color:var(--text-color,#aaa);opacity:.6}.private-mic-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;line-height:1;opacity:.7;padding:4px;position:absolute;right:6px;top:50%;transform:translateY(-50%);transition:opacity .2s}.private-mic-btn:hover{opacity:1}.private-input-container{align-items:center;display:flex;position:relative}.private-emoji-container{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}.emoji-picker-overlay{background:#0000004d;bottom:0;left:0;position:fixed;right:0;top:0;z-index:99}.private-emoji-container .emoji-picker-container{bottom:40px;left:0;max-height:350px;max-width:280px;position:absolute;transform:scale(.8);transform-origin:bottom left;z-index:100}.private-emoji-picker{position:relative}.emoji-picker-close-btn{align-items:center;background:#f44;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px #0000004d;color:#fff;cursor:pointer;display:flex;font-size:18px;font-weight:700;height:28px;justify-content:center;position:absolute;right:-10px;top:-10px;transition:background-color .2s,transform .2s;width:28px;z-index:101}.emoji-picker-close-btn:hover{background:#c00;transform:scale(1.1)}.private-emoji-container .emoji-picker-react{height:auto!important;width:100%!important}.private-chat-input input{border:1px solid #ddd;border-radius:20px;flex:1 1;outline:none;padding:8px 30px 8px 8px;width:100%}.private-input-field-container{margin-right:5px}.private-message .private-media-container{display:block;margin:4px 0 8px}.private-chat-input .private-media-container{left:35px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}.private-voice-record-btn{color:#007bff;font-size:1.2rem;position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:10}.private-recording-container{margin-left:10px;margin-right:10px}.private-input-field-container{flex:1 1;margin-right:10px;position:relative}.private-media-container .media-options{background:#fff;border:1px solid #ddd;border-radius:5px;bottom:40px;box-shadow:0 2px 10px #0000001a;left:0;padding:5px 0;position:absolute;width:120px;z-index:100}.private-message-media{display:flex;flex-direction:column;margin-top:8px;min-width:200px;width:100%}.private-media-image{border-radius:8px;cursor:pointer;display:block;max-height:150px;max-width:200px;object-fit:cover}.private-media-audio-container{background-color:#f0f0f0;border-radius:8px;margin-top:5px;min-width:180px;padding:8px;width:100%}.private-media-audio{height:36px;min-width:160px;width:100%}.private-media-name{color:#666;font-size:.8rem;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.private-media-file{align-items:center;background:#f8f9fa;border-radius:5px;display:flex;margin-top:5px;padding:5px}.private-chat-input input:focus{border-color:var(--nav-bg)}.private-send-btn{align-items:center;background:var(--nav-bg);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:38px;justify-content:center;min-width:38px;transition:background .2s,transform .15s;width:38px}.private-send-btn svg{height:18px;width:18px}.private-send-btn:hover{background:#0056b3;transform:scale(1.08)}.chatroom-container{align-items:stretch;background:#f8f9fa;display:flex;flex:1 1;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%}.chat-messages{align-items:flex-start;display:flex;flex:1 1;flex-direction:column;gap:1px;overflow-y:auto;padding:10px 10px 100px 5px;position:relative;width:100%}.new-messages-indicator{align-items:center;align-self:center;animation:bounce-in .3s ease-out;background:linear-gradient(135deg,#1976d2,#1565c0);border-radius:25px;bottom:110px;box-shadow:0 4px 15px #1976d266;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;left:50%;margin-top:auto;padding:10px 20px;position:-webkit-sticky;position:sticky;transform:translateX(-50%);transition:all .2s ease;z-index:100}.new-messages-indicator:hover{background:linear-gradient(135deg,#1565c0,#0d47a1);box-shadow:0 6px 20px #1976d280;transform:translateX(-50%) scale(1.05)}.new-messages-indicator:active{transform:translateX(-50%) scale(.98)}.new-messages-icon{animation:bounce-arrow 1s infinite;font-size:18px}.new-messages-text{white-space:nowrap}@keyframes bounce-in{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes bounce-arrow{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}@media (max-width:768px){.group-container{height:100vh;height:100dvh;overflow:hidden}.main-content{flex:1 1;min-height:0;overflow:hidden}.chatroom-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat-messages{flex:1 1;min-height:0;overflow-y:auto}.new-messages-indicator{bottom:95px;font-size:13px;padding:8px 16px}.new-messages-icon{font-size:16px}}.message{align-self:flex-start;background-color:#f1f0f0;background-color:var(--message-bg,#f1f0f0);border-radius:8px;box-shadow:0 1px 2px #0000001a;color:#333;color:var(--text-color,#333);margin-bottom:1px;margin-left:0;margin-right:auto;max-width:80%;padding:6px 15px;position:relative;text-align:left;word-break:break-word}.emoji-animated{display:inline-block;font-size:1.5em;margin:0 2px;transform-origin:center}.emoji-wave{animation:waveAnimation 2s infinite;transform-origin:bottom center}.emoji-heart{animation:heartBeatAnimation 1.5s infinite}.emoji-sparkle{animation:sparkleAnimation 2s infinite}.emoji-bounce{animation:bounceAnimation 2s infinite}@keyframes waveAnimation{0%,to{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}@keyframes sparkleAnimation{0%,to{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.3);transform:scale(1.2)}}@keyframes bounceAnimation{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.user-message{background:#fff;border-top-left-radius:0;margin-left:0;margin-right:auto}.admin-message-join{color:#28a745}.admin-message-join,.admin-message-left{background:#0000;border:none;box-shadow:none;font-size:.85em;font-weight:400;margin-bottom:1px;max-width:100%;padding:2px 10px;text-align:center;width:100%}.admin-message-left{color:#dc3545}.admin-message-join .message-row,.admin-message-left .message-row{justify-content:center}.admin-message-join .message-time,.admin-message-left .message-time{margin-left:10px;opacity:.7}.admin-arrow{font-weight:700;margin-right:5px}.admin-message-join .admin-arrow{color:#28a745}.admin-message-left .admin-arrow{color:#dc3545}.dark-mode .admin-message-join{color:#5cb85c}.dark-mode .admin-message-left{color:#ff6b6b}.dark-mode .admin-message-join .admin-arrow{color:#5cb85c}.dark-mode .admin-message-left .admin-arrow{color:#ff6b6b}.typing-indicator{align-items:center;background-color:#00000008;border-radius:20px;color:#6c757d;display:inline-flex;font-size:12px;margin:1px 0;max-width:-webkit-fit-content;max-width:fit-content;padding:3px 10px}.typing-indicator-wrapper{background:linear-gradient(180deg,#0000 0,#f8f9fae6 40%,#f8f9fafa);bottom:72px;left:0;padding:6px 15px 4px;pointer-events:none;position:absolute;right:0;z-index:11}.typing-indicator-fixed{align-items:center;animation:fadeInUp .2s ease-out;background-color:#fffffffa;border-radius:12px;box-shadow:0 2px 8px #0000001f;color:#6c757d;display:inline-flex;font-size:12px;max-width:-webkit-fit-content;max-width:fit-content;padding:6px 12px;pointer-events:auto}@keyframes fadeInUp{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.typing-user{color:#007bff;font-weight:700}.typing-dots{display:inline-flex;margin-left:4px}.typing-dots .dot{animation:typingAnimation 1.4s infinite;font-size:16px;line-height:0}.typing-dots .dot:nth-child(2){animation-delay:.2s}.typing-dots .dot:nth-child(3){animation-delay:.4s}@keyframes typingAnimation{0%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}to{opacity:.2;transform:translateY(0)}}.private-typing-indicator{align-items:center;background-color:#0000000a;border-radius:15px;color:#6c757d;display:inline-flex;font-size:11px;font-style:italic;margin:5px 10px;max-width:-webkit-fit-content;max-width:fit-content;padding:4px 8px}.private-typing-indicator .typing-user{color:#007bff;font-weight:700}.private-typing-indicator .typing-dots{display:inline-flex;margin-left:4px}.private-typing-indicator .typing-dots .dot{animation:typingAnimation 1.4s infinite;font-size:14px;line-height:0}.private-typing-indicator .typing-dots .dot:nth-child(2){animation-delay:.2s}.private-typing-indicator .typing-dots .dot:nth-child(3){animation-delay:.4s}.private-typing-indicator-fixed{align-items:center;background-color:#f8f9faf2;border-top:1px solid #0000000d;color:#6c757d;display:flex;flex-shrink:0;font-size:11px;font-style:italic;min-height:24px;padding:4px 10px}.private-typing-indicator-fixed .typing-dots{display:inline-flex;margin-left:4px}.private-typing-indicator-fixed .typing-dots .dot{animation:typingAnimation 1.4s infinite;font-size:14px;line-height:0}.private-typing-indicator-fixed .typing-dots .dot:nth-child(2){animation-delay:.2s}.private-typing-indicator-fixed .typing-dots .dot:nth-child(3){animation-delay:.4s}.reply-context{align-items:flex-start;background-color:#007bff1a;border-left:3px solid #007bff;border-radius:8px 8px 0 0;display:flex;margin-bottom:5px;padding:8px 12px}.reply-content{flex:1 1}.reply-to{color:#6c757d}.reply-text{color:#495057;font-size:.9rem;margin:2px 0 0;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cancel-reply-btn{background:none;border:none;color:#6c757d;cursor:pointer;font-size:1.2rem;padding:0 5px}.cancel-reply-btn:hover{color:#dc3545}.reply-wrapper{margin-bottom:8px;position:relative}.message-reply-context{align-items:flex-start;background-color:#007bff0d;border-left:3px solid #007bff;border-radius:5px;box-shadow:0 1px 3px #0000001a;cursor:pointer;display:flex;font-size:.85rem;padding:8px 10px;position:relative;transition:background-color .2s}.message-reply-context:hover{background-color:#007bff1a}.reply-arrow{color:#007bff;font-size:1.2rem;margin-right:8px}.message-id-badge{background-color:#007bff;border-radius:10px;color:#fff;font-size:.7rem;font-weight:700;opacity:.7;padding:2px 5px;position:absolute;right:30px;top:5px}.reply-id{color:#999;font-size:.7rem;margin-left:5px;opacity:.7}.is-reply{border-left:3px solid #007bff!important;position:relative}.is-reply:before{background-color:#007bff;content:"";height:100%;left:-10px;opacity:.5;position:absolute;top:0;width:2px}.has-replies{border-right:3px solid #007bff!important}.reply-line{background-color:#007bff;height:2px;left:-10px;position:absolute;top:50%;width:8px}.reply-to{color:#007bff;display:block;font-size:.8rem;font-weight:500;margin-bottom:3px}.reply-text{color:#555;font-style:italic;line-height:1.2;margin:0;padding:0}.message-content{position:relative}@keyframes highlightMessage{0%{background-color:#007bff1a}to{background-color:initial}}.highlight-message{animation:highlightMessage 2s ease;border-left:3px solid #007bff!important}.reply-icon{font-style:normal;margin-right:3px}.message-input{background:#fff;background:var(--sidebar-bg,#fff);border-top:1px solid #ddd;border-top:1px solid var(--border-color,#ddd);bottom:0;box-shadow:0 -2px 5px #0000000d;display:flex;flex-direction:column;left:0;padding:10px 15px;position:absolute;right:0;z-index:10}.media-preview{background-color:#00000008;border-radius:8px;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;padding:10px}.media-preview-item{align-items:center;background:#fff;background:var(--sidebar-bg,#fff);border-radius:5px;box-shadow:0 1px 3px #0000001a;display:flex;max-width:200px;padding:5px;position:relative}.media-thumbnail{border-radius:4px;height:40px;margin-right:8px;object-fit:cover;width:40px}.audio-thumbnail,.file-thumbnail,.video-thumbnail{align-items:center;background-color:#f0f0f0;border-radius:4px;display:flex;font-size:1.5rem;height:40px;justify-content:center;margin-right:8px;width:40px}.media-info{flex:1 1;overflow:hidden}.media-name{display:block;font-size:.8rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-size{color:#666;display:block;font-size:.7rem}.remove-media-btn{background:none;border:none;color:#dc3545;cursor:pointer;font-size:1.2rem;padding:0 5px}.message-media{display:flex;flex-direction:column;gap:5px;margin-top:8px}.message-media:has(.media-audio-container.simple){align-items:center;display:inline-flex;margin-left:4px;margin-top:0;vertical-align:middle}.message-media:has(.media-audio-container.simple) .media-item{align-items:center;display:inline-flex}.message:has(.media-audio-container.simple) .message-content{align-items:center;display:inline-flex;flex-wrap:wrap}.message:has(.media-audio-container.simple) .message-user{align-items:center;display:inline-flex}.media-item{border-radius:5px;max-width:100%;overflow:hidden}.media-image{border-radius:5px;cursor:pointer;filter:blur(3px);height:120px;object-fit:cover;transition:filter .3s ease,transform .2s ease;width:200px}.media-image[src$=".gif"],.media-image[src*="image/gif"]{background-color:#f8f9fa;filter:none;object-fit:contain}.media-image:hover{transform:scale(1.05)}.image-overlay{align-items:center;background-color:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:9999}.expanded-image-container{max-height:90%;max-width:90%;position:relative}.expanded-image{border-radius:5px;box-shadow:0 5px 15px #0000004d;max-height:90vh;max-width:100%}.close-expanded-image{align-items:center;background-color:#dc3545;border:none;border-radius:50%;box-shadow:0 2px 5px #0000004d;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;position:absolute;right:-20px;top:-20px;width:40px}.close-expanded-image:hover{background-color:#c82333}.media-audio,.media-video{background-color:#f0f0f0;border-radius:5px;height:120px;object-fit:cover;position:relative;width:200px}.media-video-container{display:flex;flex-direction:column;min-height:80px;overflow:visible;padding:8px;position:relative;width:220px}.media-audio-container.simple,.media-video-container{align-items:center;background-color:#f0f0f0;border-radius:8px;justify-content:center}.media-audio-container.simple{display:inline-flex;margin-left:8px;max-width:300px;min-width:220px;padding:6px 8px;vertical-align:middle}.media-audio-container.simple .media-audio{height:32px;width:100%}.media-name-overlay{background-color:#000000b3;border-radius:4px;color:#fff;font-size:.7rem;max-width:150px;overflow:hidden;padding:3px 8px;position:absolute;right:0;text-overflow:ellipsis;top:-20px;white-space:nowrap}.play-button{align-items:center;background-color:#007bffcc;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px;z-index:5}.play-button:hover{background-color:#007bff}.media-icon{color:#007bff;font-size:2rem;margin-bottom:10px}.media-file{align-items:center;background:#f8f9fa;border-radius:5px;display:flex;padding:8px}.file-icon{font-size:1.5rem;margin-right:8px}.file-download{color:#007bff;font-size:.9rem;text-decoration:none}.file-download:hover{text-decoration:underline}.embedded-media{border-radius:8px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;margin:8px 0;overflow:hidden}.embedded-image,.embedded-media{background-color:#f8f9fa;max-width:100%}.embedded-image{border-radius:8px 8px 0 0;cursor:pointer;max-height:300px;object-fit:contain;transition:transform .2s ease}.embedded-image:hover{transform:scale(1.02)}.embedded-video{border-radius:8px 8px 0 0;max-height:300px;width:100%}.embedded-audio{margin:10px 0;width:100%}.embedded-youtube{border-radius:8px 8px 0 0}.media-link{background-color:#f8f9fa;border-top:1px solid #eee;color:#007bff;font-size:.8rem;padding:8px 12px;text-decoration:none;word-break:break-all}.media-link:hover{background-color:#f0f0f0;text-decoration:underline}.message-link{color:#007bff;text-decoration:none;word-break:break-all}.message-link:hover{text-decoration:underline}.message-input>.input-container{align-items:center;display:flex;flex-direction:row;gap:4px;position:relative;width:100%}.form-control{border-radius:20px;flex:1 1;font-size:14px;height:40px;margin-left:0;margin-right:0;min-width:0;padding-left:10px;padding-right:40px;position:relative}.send-btn{align-items:center;background:#007bff;border:none;border-radius:18px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:13px;font-weight:600;height:36px;justify-content:center;max-width:60px;min-width:60px;padding:0;width:60px}.send-btn:hover{background:#0056b3}.input-field-container{align-items:center;display:flex;flex:1 1;min-width:0;position:relative}.voice-record-btn{background:none;border:none;color:#007bff;cursor:pointer;font-size:1.5rem;padding:0;position:absolute;right:5px;top:50%;transform:translateY(-50%);transition:transform .2s;z-index:10}.voice-record-btn:hover{color:#0056b3;transform:translateY(-50%) scale(1.1)}.recording-container,.recording-indicator{align-items:center;display:flex;margin-right:10px}.recording-indicator{background-color:#dc35451a;border-radius:20px;padding:5px 10px}.recording-dot{animation:pulse 1.5s infinite;background-color:#dc3545;border-radius:50%;height:10px;margin-right:8px;width:10px}.recording-time{color:#dc3545;font-size:.9rem;font-weight:700}.recording-control-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:1.1rem;height:36px;justify-content:center;margin-left:8px;transition:transform .2s,background-color .2s;width:36px}.recording-control-btn.send{background-color:#28a745;color:#fff}.recording-control-btn.send:hover{background-color:#218838;transform:scale(1.1)}.recording-control-btn.cancel{background-color:#dc3545;color:#fff}.recording-control-btn.cancel:hover{background-color:#c82333;transform:scale(1.1)}.recording-control-btn.stop{background-color:#28a745;color:#fff}.recording-control-btn.stop:hover{background-color:#218838;transform:scale(1.1)}.emoji-container,.media-container{flex-shrink:0;position:relative;z-index:10}.emoji-container,.media-btn,.media-container{align-items:center;display:flex;justify-content:center}.media-btn{background:none;border:none;border-radius:50%;cursor:pointer;font-size:1.3rem;height:32px;line-height:1;padding:4px;transition:background-color .2s;width:32px}.media-btn:hover{background-color:#007bff1a}.media-options{background:#fff;border:1px solid #ddd;border-radius:5px;bottom:40px;box-shadow:0 2px 10px #0000001a;left:0;padding:5px 0;position:absolute;width:120px;z-index:100}.media-option{cursor:pointer;display:block;padding:8px 12px;transition:background .2s}.media-option:hover{background-color:#f0f0f0}.media-option span{align-items:center;display:flex;gap:5px}.formatting-container{flex-shrink:0;position:relative;z-index:10}.formatting-btn,.formatting-container{align-items:center;display:flex;justify-content:center}.formatting-btn{background:none;border:none;border-radius:50%;color:#007bff;cursor:pointer;font-size:1.1rem;font-weight:700;height:32px;line-height:1;padding:4px;transition:background-color .2s;width:32px}.formatting-btn:hover{background-color:#007bff1a}.formatting-btn.has-formatting{background-color:#007bff33;border:1px solid #007bff}.formatting-menu{background:#fff;border:1px solid #ddd;border-radius:8px;bottom:40px;box-shadow:0 4px 15px #00000026;left:0;min-width:220px;padding:15px;position:absolute;z-index:1000}.formatting-option{margin-bottom:15px}.formatting-option:last-child{margin-bottom:0}.formatting-option label{color:#333;display:block;font-size:.9rem;font-weight:500;margin-bottom:8px}.format-buttons{align-items:center;display:flex;gap:8px}.format-btn{background:#f0f0f0;border:1px solid #ddd;border-radius:3px;cursor:pointer;margin-right:5px;padding:5px 10px;transition:all .2s}.format-btn:hover{background:#e0e0e0}.format-btn.active{background:#007bff;border-color:#0056b3;color:#fff}.format-btn.reset-btn{background:#f8f9fa;border-color:#dee2e6;color:#6c757d;font-size:.8rem}.format-btn.reset-btn:hover{background:#e9ecef;border-color:#adb5bd}.hamburger-menu-btn{align-items:center;border-radius:50%;gap:4px;height:32px;justify-content:center;padding:6px;transition:all .2s ease;width:32px}.hamburger-menu-btn:hover{background-color:#007bff1a}.emoji-btn{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:1.3rem;height:32px;justify-content:center;line-height:1;padding:4px;transition:background-color .2s;width:32px}.emoji-btn:hover{background-color:#007bff1a}.emoji-picker-container{bottom:40px;left:0;position:absolute;z-index:100}.color-picker-input{align-items:center;background-color:#f8f9fa;border:1px solid #ddd;border-radius:50%;box-shadow:0 1px 3px #0000001a;color:#333;cursor:pointer;display:flex;font-family:serif;font-size:16px;font-weight:700;height:25px;justify-content:center;width:25px}.hamburger-menu-btn{display:flex;flex-direction:column;flex-shrink:0;height:24px;justify-content:space-between;margin-right:15px;padding:0;position:relative;transition:all .3s ease;width:30px;z-index:10}.hamburger-line{background-color:#666;border-radius:2px;height:2px;transition:all .2s ease;width:16px}.hamburger-menu-btn:hover{transform:scale(1.1)}.profile-btn{align-items:center;background:var(--nav-bg);border:none;border-radius:6px;color:var(--nav-text);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:8px;margin-right:10px;padding:8px 12px;transition:all .2s ease}.profile-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.profile-avatar-small{border:2px solid #ffffff4d;border-radius:50%;height:24px;object-fit:cover;transition:border-color .2s ease;width:24px}.profile-btn:hover .profile-avatar-small{border-color:#fff9}.hamburger-menu-btn:hover .hamburger-line{background-color:#0056b3}.system-message{background-color:#d1ecf1;border-left:4px solid #17a2b8;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#0c5460;font-size:.95em;font-weight:500;margin:8px 0;padding:10px 12px}.system-username{color:#17a2b8!important;font-weight:600}.notice-message{animation:noticeSlideIn .3s ease-out;background:linear-gradient(135deg,#fff3cd,#ffeeba);border-left:4px solid #ffc107;border-radius:8px;box-shadow:0 3px 8px #ffc10733;color:#856404;font-size:.95em;font-weight:500;margin:10px 0;padding:12px 15px}@keyframes noticeSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dark-mode .notice-message{background:linear-gradient(135deg,#4a4020,#5c4e26);border-left-color:#ffc107;color:#ffe082}.message.notice-message[data-broadcast=true],.notice-message.broadcast-message{animation:broadcastPulse .5s ease-out;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);border-left:4px solid #c0392b;box-shadow:0 4px 12px #ff6b6b4d;color:#fff;font-weight:600}@keyframes broadcastPulse{0%{opacity:0;transform:scale(.95)}50%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}.dark-mode .message.notice-message[data-broadcast=true],.dark-mode .notice-message.broadcast-message{background:linear-gradient(135deg,#8b2020,#a02828);border-left-color:#ff6b6b;color:#ffcdd2}.action-message{background:linear-gradient(135deg,#f8e6ff,#e8d5f9);border-left:4px solid #9c27b0;border-radius:8px;box-shadow:0 2px 6px #9c27b026;color:#4a148c;font-size:.95em;font-style:italic;margin:6px 0;padding:10px 12px}.action-message .action-prefix{font-style:normal;margin-right:4px}.action-message .action-prefix:before{color:#9c27b0;content:"* "}.action-message .message-content>span:last-of-type{font-style:italic}.action-message .message-content>span:last-of-type:after{color:#9c27b0;content:" *";font-style:normal}.dark-mode .action-message{background:linear-gradient(135deg,#3d1f47,#4a2a54);border-left-color:#ba68c8;color:#e1bee7}.dark-mode .action-message .action-prefix:before,.dark-mode .action-message .message-content>span:last-of-type:after{color:#ba68c8}.welcome-message{animation:welcomePop .5s ease-out;background:linear-gradient(135deg,#fff9e6,#fff0f5 50%,#f0fff0);border:2px solid #0000;border-image:linear-gradient(135deg,gold,#ff69b4,#98fb98) 1;border-radius:12px;box-shadow:0 4px 15px #ff69b433,0 2px 8px #ffd70026;margin:8px 0;padding:12px 16px}@keyframes welcomePop{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.welcome-message-content{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;text-align:center}.welcome-emojis{animation:emojiFloat 2s ease-in-out infinite;font-size:1.3em}.welcome-emojis:first-child{animation-delay:0s}.welcome-emojis:last-child{animation-delay:.5s}@keyframes emojiFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.welcome-text{color:#333;font-size:1.05em}.welcome-target{animation:targetPulse 1.5s ease-in-out infinite;color:#e91e63;font-size:1.1em;text-shadow:1px 1px 2px #e91e6333}@keyframes targetPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.welcome-room{color:#2196f3;font-weight:600}.dark-mode .welcome-message{background:linear-gradient(135deg,#2d2a1f,#2d1f2a 50%,#1f2d1f);box-shadow:0 4px 15px #ff69b41a,0 2px 8px #ffd7001a}.dark-mode .welcome-text{color:#f0f0f0}.dark-mode .welcome-target{color:#ff80ab}.dark-mode .welcome-room{color:#64b5f6}.message-row{align-items:flex-start;display:flex;gap:8px;justify-content:space-between}.message-content{flex:1 1}.message-time{color:#999;flex-shrink:0;font-size:.7em;font-weight:400;margin-left:auto;padding-left:10px;white-space:nowrap}.dark-mode .message-time{color:#777}.message-actions-inline{align-items:center;display:flex;flex-shrink:0;gap:4px;opacity:0;position:relative;transition:opacity .2s ease}.message:hover .message-actions-inline{opacity:1}.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.reaction-button{align-items:center;background:#007bff1a;border:1px solid #007bff4d;border-radius:12px;cursor:pointer;display:flex;font-size:16px;gap:3px;padding:3px 8px;transition:all .2s ease}.reaction-button:hover{background:#007bff33;transform:scale(1.05)}.reaction-button.user-reacted{background:#007bff4d;border-color:#007bff;font-weight:600}.reaction-add-btn,.reply-btn{align-items:center;background:#ffffffe6;border:1px solid #0000001a;border-radius:50%;box-shadow:0 2px 4px #0000001a;cursor:pointer;display:flex;font-size:18px;height:32px;justify-content:center;transition:all .2s ease;width:32px}.reaction-add-btn:hover,.reply-btn:hover{background:#007bff1a;border-color:#007bff;transform:scale(1.1)}.delete-msg-btn{align-items:center;background:#ffffffe6;border:1px solid #dc35454d;border-radius:50%;color:#dc3545;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:20px;justify-content:center;opacity:.7;transition:all .2s ease;width:20px}.delete-msg-btn:hover{background:#dc354526;border-color:#dc3545;opacity:1;transform:scale(1.1)}.reaction-picker{background:#fff;border:1px solid #ddd;border-radius:8px;bottom:40px;box-shadow:0 4px 12px #00000026;display:flex;gap:6px;min-width:240px;padding:10px;position:absolute;right:0;z-index:1000}.reaction-option{background:#0000;border:none;border-radius:4px;cursor:pointer;font-size:22px;padding:6px;transition:background .2s ease}.reaction-option:hover{background:#007bff1a;transform:scale(1.2)}.chatroom-container.drag-over{background-color:#007bff0d}.drag-overlay{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#007bff1a;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.drag-overlay-content{background:#fff;border:2px dashed #007bff;border-radius:16px;box-shadow:0 8px 32px #007bff33;padding:40px;text-align:center}.drag-icon{font-size:48px;margin-bottom:16px}.drag-text{color:#007bff;font-size:18px;font-weight:600}.profile-popup-overlay{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.profile-popup{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0003;max-height:80vh;max-width:400px;overflow:hidden;width:90%}.profile-popup-header{align-items:center;background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;padding:16px 20px}.profile-popup-header h3{color:#333;font-size:18px;font-weight:600;margin:0}.profile-popup-close{align-items:center;background:none;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:24px;height:24px;justify-content:center;padding:0;transition:background-color .2s ease;width:24px}.profile-popup-close:hover{background:#0000001a}.profile-popup-content{padding:20px;text-align:center}.profile-popup-avatar{align-items:center;display:flex;justify-content:center;margin-bottom:16px}.profile-popup-avatar img{aspect-ratio:1;border:3px solid #e9ecef;border-radius:12px;height:120px;object-fit:cover;width:120px}.profile-popup-avatar-initials{align-items:center;aspect-ratio:1;border-radius:12px;color:#fff;display:flex;font-size:40px;font-weight:600;height:120px;justify-content:center;text-shadow:0 1px 2px #0000001a;width:120px}.profile-popup-info h4{color:#333;font-size:20px;font-weight:600;margin:0 0 16px}.profile-popup-details{margin-bottom:20px;text-align:left}.profile-detail{align-items:center;border-bottom:1px solid #f1f1f1;display:flex;justify-content:space-between;padding:8px 0}.profile-detail:last-child{border-bottom:none}.detail-label{color:#666;font-weight:500}.detail-value{color:#333;font-weight:400}.detail-value.role-superadmin{color:#dc3545;font-weight:600}.detail-value.role-admin{color:#ffc107;font-weight:600}.detail-value.role-moderator{color:#17a2b8;font-weight:600}.status-online{align-items:center;display:flex;gap:6px}.status-dot{background:#28a745;border-radius:50%;height:8px;width:8px}.profile-popup-actions{display:flex;gap:8px;justify-content:center}.profile-action-btn{border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .2s ease}.profile-action-btn.primary{background:#007bff;color:#fff}.profile-action-btn.primary:hover{background:#0056b3}.profile-action-btn.secondary{background:#6c757d;color:#fff}.profile-action-btn.secondary:hover{background:#545b62}@media (max-width:576px){.group-container{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden}.chatroom-container{display:flex;flex-direction:column;height:100%;max-height:100%;overflow:hidden}.chat-messages{flex:1 1;min-height:0;overflow-y:auto;padding-bottom:85px}.message-input{bottom:0;flex-shrink:0;left:0;padding:8px 10px;position:absolute;right:0}.typing-indicator-wrapper{bottom:58px;padding:4px 10px}.typing-indicator-fixed{font-size:11px;padding:4px 10px}.emoji-btn,.formatting-btn,.hamburger-menu-btn,.media-btn{font-size:1.1rem;height:28px;padding:2px;width:28px}.hamburger-line{height:2px;width:14px}.hamburger-menu-btn{gap:3px;padding:4px}.send-btn{border-radius:16px;font-size:12px;height:32px;max-width:50px;min-width:50px;width:50px}.form-control{font-size:13px;height:36px;padding-left:8px;padding-right:35px}.voice-record-btn{font-size:1.2rem;right:6px}.message-input>.input-container{gap:2px}}@media (max-width:400px){.emoji-btn,.formatting-btn,.hamburger-menu-btn,.media-btn{font-size:.95rem;height:24px;width:24px}.hamburger-line{width:12px}.send-btn{font-size:11px;height:30px;max-width:44px;min-width:44px;width:44px}.form-control{font-size:12px;height:32px;padding-right:32px}.voice-record-btn{font-size:1rem;right:6px}.message-input{padding:6px 8px}}.full-image-overlay{align-items:center;animation:fadeIn .2s ease;background:#000000e6;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:100000}.full-image-container{align-items:center;display:flex;flex-direction:column;max-height:90vh;max-width:90vw;position:relative}.full-image-close{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:24px;height:36px;justify-content:center;position:absolute;right:-40px;top:-40px;transition:all .2s ease;width:36px}.full-image-close:hover{background:#fff3;transform:scale(1.1)}.full-image{border-radius:8px;box-shadow:0 20px 60px #00000080;max-height:80vh;max-width:90vw;object-fit:contain}.full-image-username{color:#fff;font-size:18px;font-weight:500;margin-top:16px;text-shadow:0 2px 4px #00000080}.profile-popup-avatar.clickable{cursor:pointer;transition:transform .2s ease}.profile-popup-avatar.clickable:hover{transform:scale(1.05)}.profile-popup-avatar.clickable img{box-shadow:0 4px 12px #00000026}.profile-popup-avatar.clickable:hover img{box-shadow:0 6px 20px #00000040}.about-me-detail{align-items:flex-start;flex-direction:column;gap:4px}.about-me-text{background:#f8f9fa;border-radius:6px;box-sizing:border-box;line-height:1.5;max-height:100px;overflow-y:auto;padding:8px;white-space:pre-wrap;width:100%;word-break:break-word}.ip-detail{background:#fff3cd;border-radius:0 0 8px 8px;margin:8px -12px -8px;padding:8px 12px}.ip-value{color:#856404;font-family:monospace;font-weight:600}.gender-icon{font-size:12px;font-weight:700;margin-left:4px}.gender-icon.male{color:#2196f3}.gender-icon.female{color:#e91e63}.gender-icon.non-binary{color:#9c27b0}.profile-popup-info h4 .guest-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;color:#fff;display:inline-block;font-weight:600;letter-spacing:.5px;margin-left:8px;padding:2px 8px;text-transform:uppercase;vertical-align:middle}.dark-mode,.dark-mode .app-layout{--bg-color:#1a1a2e;--text-color:#e0e0e0;--text-secondary:#a0a0a0;--message-bg:#16213e;--user-message-bg:#0f3460;--sidebar-bg:#16213e;--input-bg:#16213e;--border-color:#2a2a4a;--hover-color:#2a2a4a;--nav-bg:#0f3460;--nav-text:#e0e0e0}.dark-mode .left-panel,.dark-mode .left-sidebar,.dark-mode .right-sidebar{background:var(--sidebar-bg);border-color:var(--border-color);color:var(--text-color)}.dark-mode .left-panel-header,.dark-mode .left-sidebar-header{border-color:var(--border-color)}.dark-mode .left-sidebar-header h4,.dark-mode .settings-section h5{color:#4fc3f7}.dark-mode .profile-username,.dark-mode .setting-item label,.dark-mode .toggle-info label{color:var(--text-color)}.dark-mode .profile-role,.dark-mode .setting-description,.dark-mode .toggle-description{color:var(--text-secondary)}.dark-mode .chat-messages{background:var(--bg-color)}.dark-mode .new-messages-indicator{background:linear-gradient(135deg,#4fc3f7,#29b6f6);box-shadow:0 4px 15px #4fc3f766;color:#1a1a2e}.dark-mode .new-messages-indicator:hover{background:linear-gradient(135deg,#29b6f6,#03a9f4);box-shadow:0 6px 20px #4fc3f780}.dark-mode .message{background:var(--message-bg);color:var(--text-color)}.dark-mode .message .message-user{color:#4fc3f7}.dark-mode .message .message-text{color:var(--text-color)}.dark-mode .user-message{background:var(--user-message-bg)}.dark-mode .message-input-area,.dark-mode .message-input-container{background:var(--sidebar-bg);border-color:var(--border-color)}.dark-mode .message-input,.dark-mode .message-input-field{background:var(--input-bg);border-color:var(--border-color);color:var(--text-color)}.dark-mode .message-input-field::placeholder,.dark-mode .message-input::placeholder{color:var(--text-secondary)}.dark-mode .typing-indicator-wrapper{background:linear-gradient(180deg,#0000,#1e1e2ef2)}.dark-mode .typing-indicator-fixed{background-color:#28283cfa;box-shadow:0 2px 8px #0006;color:var(--text-secondary)}.dark-mode .typing-user{color:#4fc3f7}.dark-mode .sidebar{background:var(--sidebar-bg)}.dark-mode .sidebar,.dark-mode .sidebar-header{border-color:var(--border-color)}.dark-mode .sidebar-header h4,.dark-mode .user-item{color:var(--text-color)}.dark-mode .user-item:hover{background:var(--hover-color)}.dark-mode .room-card{color:var(--text-color)}.dark-mode .room-card:hover{background:var(--hover-color)}.dark-mode .room-selection-view h2{color:var(--text-color)}.dark-mode .room-selection-view p{color:var(--text-secondary)}.dark-mode .status-dropdown{background:var(--sidebar-bg);border-color:var(--border-color)}.dark-mode .status-option{color:var(--text-color)!important}.dark-mode .status-option:hover{background:var(--hover-color)}.dark-mode .status-indicator{background:#ffffff1a;border-color:#fff3;color:var(--text-color)}.dark-mode .status-indicator .status-label{color:var(--text-color)}.dark-mode .form-control,.dark-mode .settings-select{background:var(--input-bg);border-color:var(--border-color);color:var(--text-color)}.dark-mode .font-size-btn{background:var(--hover-color);color:var(--text-color)}.dark-mode .font-size-btn:hover{background:#3a3a5a}.dark-mode .private-chat-window{background:var(--sidebar-bg);border-color:var(--border-color)}.dark-mode .private-chat-header{background:var(--nav-bg);color:var(--text-color)}.dark-mode .private-chat-messages{background:var(--bg-color)}.dark-mode .private-message{background:var(--message-bg);color:var(--text-color)}.dark-mode .private-message.sent{background:var(--user-message-bg)}.dark-mode .private-message-time{color:#fff9}.dark-mode .private-message.received .private-message-time{color:#ffffff80}.dark-mode .private-message.deleted{opacity:.6}.dark-mode .private-message.deleted.received{background-color:#ffffff1a}.dark-mode .deleted-message-text{color:#ffffff80}.dark-mode .private-reply-indicator{background:#ffffff1a;border-left-color:#ffffff4d}.dark-mode .private-reply-indicator .reply-to-user{color:#fffc}.dark-mode .private-reply-indicator .reply-to-text{color:#fff9}.dark-mode .private-typing-indicator-fixed{background-color:#1e1e2ef2;border-top-color:#ffffff1a;color:var(--text-secondary)}.dark-mode .private-delete-btn{background:#fff3}.dark-mode .private-delete-btn:hover{background:#dc3545cc}.dark-mode .private-message-menu-btn{color:#fff9}.dark-mode .private-message-menu-btn:hover{background:#ffffff26}.dark-mode .private-message-dropdown{background:#2d2d3d;box-shadow:0 2px 10px #0006}.dark-mode .private-message-dropdown-item{color:#e0e0e0}.dark-mode .private-message-dropdown-item:hover{background:#ffffff1a}.dark-mode .private-message-dropdown-item.delete{color:#ff6b6b}.dark-mode .private-message-dropdown-item.delete:hover{background:#dc354533}.setting-item.toggle-item{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.toggle-info{flex:1 1}.toggle-info label{display:block;font-weight:500;margin-bottom:2px}.toggle-description{color:#666;font-size:11px;line-height:1.3}.toggle-description.error-text{color:#dc3545}.toggle-switch{display:inline-block;flex-shrink:0;height:24px;position:relative;width:44px}.toggle-switch input[type=checkbox]{height:0;opacity:0;position:absolute;width:0}.toggle-switch .toggle-label{background:#ccc;border-radius:12px;cursor:pointer;display:block;height:24px;left:0;position:absolute;top:0;transition:background-color .3s;width:44px}.toggle-switch .toggle-label:after{background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003;content:"";height:20px;left:2px;position:absolute;top:2px;transition:transform .3s;width:20px}.toggle-switch input[type=checkbox]:checked+.toggle-label{background:#28a745}.toggle-switch input[type=checkbox]:checked+.toggle-label:after{transform:translateX(20px)}.settings-select{border:1px solid #ddd;border-radius:4px;cursor:pointer;font-size:13px;margin-top:5px;padding:8px 12px;width:100%}.setting-description{color:#666;display:block;font-size:11px;margin-top:5px}.friends-btn{background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:10px 16px;transition:background-color .2s;width:100%}.friends-btn:hover{background:#0056b3}.saving-indicator{color:#666;font-size:12px;font-style:italic;padding:10px;text-align:center}.danger-zone{border-top:2px solid #fee2e2;margin-top:10px;padding-top:15px}.danger-zone h5{border-bottom-color:#fee2e2!important;color:#dc2626!important}.delete-account-btn{background:#dc2626;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:10px 16px;transition:background-color .2s;width:100%}.delete-account-btn:hover{background:#b91c1c}.danger-text{color:#dc2626!important}.delete-modal-overlay{align-items:center;background:#0009;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}.delete-modal{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;max-width:100%;overflow:hidden;width:420px}.delete-modal-header{align-items:center;background:#dc2626;color:#fff;display:flex;justify-content:space-between;padding:16px 20px}.delete-modal-header h3{font-size:18px;font-weight:600;margin:0}.close-modal-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:24px;line-height:1;opacity:.8;padding:0;transition:opacity .2s}.close-modal-btn:hover{opacity:1}.delete-modal-body{padding:20px}.delete-warning{align-items:flex-start;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;display:flex;gap:12px;margin-bottom:16px;padding:12px}.warning-icon{color:#dc2626;flex-shrink:0;font-size:24px}.delete-warning p{color:#991b1b;font-size:14px;margin:0}.delete-modal-body>p{color:#374151;font-size:14px;margin:0 0 8px}.delete-consequences{color:#6b7280;font-size:13px;margin:0 0 16px;padding-left:20px}.delete-consequences li{margin-bottom:4px}.delete-password-input{border:1px solid #d1d5db;border-radius:6px;box-sizing:border-box;font-size:14px;margin-top:8px;padding:10px 12px;width:100%}.delete-password-input:focus{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a;outline:none}.delete-error{color:#dc2626;font-size:13px;margin:8px 0 0}.delete-modal-footer{background:#f9fafb;border-top:1px solid #e5e7eb;display:flex;gap:12px;padding:16px 20px}.cancel-delete-btn{background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:10px 16px;transition:all .2s}.cancel-delete-btn:hover{background:#f3f4f6}.confirm-delete-btn{background:#dc2626;border:none;border-radius:6px;color:#fff;cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:10px 16px;transition:background-color .2s}.confirm-delete-btn:hover:not(:disabled){background:#b91c1c}.confirm-delete-btn:disabled{background:#9ca3af;cursor:not-allowed}.dark-mode .danger-zone{border-top-color:#7f1d1d}.dark-mode .delete-modal{background:var(--sidebar-bg)}.dark-mode .delete-modal-body,.dark-mode .delete-modal-body>p{color:var(--text-color)}.dark-mode .delete-consequences{color:var(--text-secondary)}.dark-mode .delete-warning{background:#dc26261a;border-color:#dc26264d}.dark-mode .delete-password-input{background:var(--input-bg);border-color:var(--border-color);color:var(--text-color)}.dark-mode .delete-modal-footer{background:var(--hover-color);border-top-color:var(--border-color)}.dark-mode .cancel-delete-btn{background:var(--sidebar-bg);border-color:var(--border-color);color:var(--text-color)}.dark-mode .cancel-delete-btn:hover{background:var(--hover-color)}.friends-modal{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;display:flex;flex-direction:column;height:600px;max-height:85vh;max-width:90vw;overflow:hidden;width:500px}.friends-modal .modal-header{align-items:center;border-bottom:1px solid #eee;display:flex;flex-shrink:0;justify-content:space-between;padding:18px 20px}.friends-modal .modal-header h3{color:#333;font-size:1.3rem;margin:0}.friends-modal .modal-close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:28px;height:32px;justify-content:center;line-height:1;padding:0;transition:background-color .2s;width:32px}.friends-modal .modal-close-btn:hover{background:#f0f0f0;color:#333}.friends-error{background:#ffebee;color:#c62828}.friends-error,.friends-success{border-radius:6px;flex-shrink:0;font-size:13px;margin:10px 15px 0;padding:10px 15px}.friends-success{background:#e8f5e9;color:#2e7d32}.friends-tabs{background:#f8f9fa;display:flex;flex-shrink:0;margin:0;padding:0}.friends-tab{background:#0000;border:none;border-bottom:3px solid #0000;color:#666;cursor:pointer;flex:1 1;font-size:14px;margin:0;outline:none;padding:14px 10px;transition:all .2s}.friends-tab:hover{background:#e9ecef;color:#333}.friends-tab.active{background:#fff;border-bottom-color:#007bff;color:#007bff;font-weight:600}.friends-content{flex:1 1;min-height:0;overflow-y:auto;padding:20px}.friends-loading{color:#666}.friends-empty,.friends-loading{font-size:15px;padding:50px 30px;text-align:center}.friends-empty{color:#999}.friends-list{display:flex;flex-direction:column;gap:12px}.friend-item{align-items:center;background:#f8f9fa;border-radius:10px;display:flex;justify-content:space-between;padding:12px 15px;transition:background-color .2s}.friend-item:hover{background:#e9ecef}.friend-info{align-items:center;display:flex;gap:12px}.friend-avatar{border-radius:50%;height:45px;object-fit:cover;width:45px}.friend-details{display:flex;flex-direction:column}.friend-username{color:#333;font-size:15px;font-weight:600}.friend-status{font-size:12px;margin-top:2px}.friend-status.online{color:#28a745}.friend-status.offline{color:#999}.friend-remove-btn{background:#dc3545;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 14px;transition:background-color .2s}.friend-remove-btn:hover{background:#c82333}.request-actions{display:flex;gap:8px}.request-accept-btn{background:#28a745;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 14px;transition:background-color .2s}.request-accept-btn:hover{background:#218838}.request-cancel-btn,.request-reject-btn{background:#6c757d;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;padding:8px 14px;transition:background-color .2s}.request-cancel-btn:hover,.request-reject-btn:hover{background:#5a6268}@media (max-width:576px){.friends-modal{border-radius:0;height:100%;max-height:100%;max-width:100%;width:100%}.friends-modal .modal-header{padding:15px}.friends-tab{font-size:13px;padding:12px 8px}.friends-content{padding:15px}.friend-item{padding:10px 12px}.friend-avatar{height:40px;width:40px}.request-actions{flex-direction:column;gap:6px}.friend-remove-btn,.request-accept-btn,.request-cancel-btn,.request-reject-btn{font-size:12px;padding:8px 10px}}.dark-mode .friends-modal{background:var(--sidebar-bg)}.dark-mode .friends-modal .modal-header{border-color:var(--border-color)}.dark-mode .friends-modal .modal-header h3{color:var(--text-color)}.dark-mode .friends-tabs{border-color:var(--border-color)}.dark-mode .friends-tab{color:var(--text-secondary)}.dark-mode .friends-tab:hover{background:var(--hover-color);color:var(--text-color)}.dark-mode .friends-tab.active{border-bottom-color:#4fc3f7;color:#4fc3f7}.dark-mode .friend-item{background:var(--hover-color)}.dark-mode .friend-item:hover{background:#3a3a5a}.dark-mode .friend-username{color:var(--text-color)}.dark-mode .friends-empty,.dark-mode .friends-loading{color:var(--text-secondary)}.add-friend-btn{align-items:center;background:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:12px;gap:5px;padding:6px 12px;transition:background-color .2s}.add-friend-btn:hover{background:#218838}.add-friend-btn.pending{background:#ffc107;color:#333}.add-friend-btn.friends{background:#6c757d}.dm-locked-badge{align-items:center;background:#fff3cd;border-radius:10px;color:#856404;display:inline-flex;font-size:10px;gap:4px;padding:2px 8px}.notification-settings{padding:15px}.notification-settings-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;margin-bottom:15px;padding-bottom:10px}.notification-settings-header h4{color:#333;font-size:16px;margin:0}.notification-settings-header .close-btn{background:none;border:none;color:#666;cursor:pointer;font-size:20px}.notification-loading,.notification-unsupported{color:#666;padding:20px;text-align:center}.notification-unsupported .hint{color:#999;font-size:12px;margin-top:8px}.notification-main-toggle{background:#f8f9fa;border-radius:8px;margin-bottom:15px;padding:15px}.notification-blocked,.notification-disabled,.notification-enabled{align-items:center;display:flex;gap:12px}.notification-blocked .blocked-icon,.notification-disabled .disabled-icon,.notification-enabled .enabled-icon{font-size:28px}.notification-blocked p,.notification-disabled p,.notification-enabled p{font-weight:500;margin:0 0 8px}.notification-blocked .hint{color:#999;font-size:12px;margin:0}.disable-btn,.enable-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;padding:8px 16px;transition:all .2s}.enable-btn{background:#007bff;color:#fff}.enable-btn:hover:not(:disabled){background:#0056b3}.disable-btn{background:#dc3545;color:#fff}.disable-btn:hover:not(:disabled){background:#c82333}.disable-btn:disabled,.enable-btn:disabled{cursor:not-allowed;opacity:.6}.notification-types{margin-top:20px}.notification-types h5{color:#333;font-size:14px;margin:0 0 15px}.notification-toggle{align-items:center;border-bottom:1px solid #eee;cursor:pointer;display:flex;justify-content:space-between;padding:12px 0}.notification-toggle span:first-child{color:#333;font-size:14px}.notification-toggle input{display:none}.notification-toggle .toggle-slider{background:#ccc;border-radius:12px;height:24px;position:relative;transition:background .3s;width:44px}.notification-toggle .toggle-slider:before{background:#fff;border-radius:50%;content:"";height:20px;left:2px;position:absolute;top:2px;transition:transform .3s;width:20px}.notification-toggle input:checked+.toggle-slider{background:#007bff}.notification-toggle input:checked+.toggle-slider:before{transform:translateX(20px)}.notification-hint{background:#f8f9fa;border-radius:4px;color:#999;font-size:12px;margin-top:10px;padding:8px}.dark-mode .notification-settings-header{border-bottom-color:var(--border-color)}.dark-mode .notification-settings-header h4{color:var(--text-color)}.dark-mode .notification-main-toggle{background:var(--hover-color)}.dark-mode .notification-blocked p,.dark-mode .notification-disabled p,.dark-mode .notification-enabled p,.dark-mode .notification-types h5{color:var(--text-color)}.dark-mode .notification-toggle{border-bottom-color:var(--border-color)}.dark-mode .notification-toggle span:first-child{color:var(--text-color)}.dark-mode .notification-hint{background:var(--hover-color);color:var(--text-secondary)}.push-notifications-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:10px 16px;transition:all .2s;width:100%}.push-notifications-btn:before{content:"🔔"}.push-notifications-btn:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-1px)}.push-notifications-btn:active{transform:translateY(0)}.notification-settings-modal{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10000}.notification-settings-modal .notification-settings{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0000004d;max-height:80vh;max-width:400px;overflow-y:auto;width:100%}.dark-mode .notification-settings-modal .notification-settings{background:var(--sidebar-bg)}@media (max-width:480px){.notification-settings-modal{padding:10px}.notification-settings-modal .notification-settings{border-radius:8px;max-height:90vh}}.connection-top-bar{animation:slideDown .3s ease-out;background:linear-gradient(135deg,#ff9800,#f57c00);box-shadow:0 2px 8px #0003;color:#fff;left:0;padding:10px 20px;position:fixed;right:0;top:0;z-index:99999}.dark-mode .connection-top-bar{background:linear-gradient(135deg,#e65100,#bf360c)}.connection-bar-content{align-items:center;display:flex;gap:12px;justify-content:center;margin:0 auto;max-width:600px}.connection-bar-spinner{animation:spin .8s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:18px;width:18px}.connection-bar-text{font-size:14px;font-weight:500}.connection-bar-dots{display:inline-flex}.connection-bar-dots .dot{animation:dotPulse 1.4s ease-in-out infinite;font-weight:700}.connection-bar-dots .dot:first-child{animation-delay:0s}.connection-bar-dots .dot:nth-child(2){animation-delay:.2s}.connection-bar-dots .dot:nth-child(3){animation-delay:.4s}@keyframes dotPulse{0%,60%,to{opacity:.3}30%{opacity:1}}.disconnected-message{align-items:center;background:#ff98001a;border:1px solid #ff98004d;border-radius:8px;color:#e65100;display:flex;font-size:13px;gap:8px;justify-content:center;margin:8px 0;padding:12px 16px}.dark-mode .disconnected-message{background:#ff980026;color:#ffb74d}.disconnected-message .spinner-small{animation:spin .8s linear infinite;border:2px solid #e651004d;border-radius:50%;border-top-color:#e65100;height:14px;width:14px}.dark-mode .disconnected-message .spinner-small{border-color:#ffb74d #ffb74d4d #ffb74d4d}.user-item.user-away{opacity:.6}.user-item.user-away .user-avatar{filter:grayscale(50%)}.user-item.user-away .user-name{font-style:italic}.user-status.away{animation:awayPulse 2s ease-in-out infinite;background-color:#ff9800!important}@keyframes awayPulse{0%,to{box-shadow:0 0 0 0 #ff980066;opacity:1}50%{box-shadow:0 0 0 4px #ff980000;opacity:.7}}.user-away-badge{background:#ff9800;border-radius:10px;color:#fff;font-size:9px;font-weight:500;letter-spacing:.5px;margin-left:6px;padding:2px 6px;text-transform:uppercase}.dark-mode .user-item.user-away{opacity:.5}.dark-mode .user-away-badge{background:#e65100}.room-settings-modal-overlay{align-items:center;background:#0009;display:flex;inset:0;justify-content:center;padding:20px;position:fixed;z-index:10000}.room-settings-modal{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}.dark-mode .room-settings-modal{background:#2d2d2d;color:#f5f5f5}.room-settings-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:16px 20px}.dark-mode .room-settings-header{border-color:#444}.room-settings-header h2{font-size:18px;font-weight:600;margin:0}.room-settings-header .close-btn{background:none;border:none;color:#666;cursor:pointer;font-size:24px;line-height:1;padding:0}.dark-mode .room-settings-header .close-btn{color:#aaa}.room-settings-loading{color:#666;padding:40px;text-align:center}.room-settings-form{padding:20px}.room-settings-info{background:#f8f9fa;border-radius:8px;margin-bottom:20px;padding:12px 16px}.dark-mode .room-settings-info{background:#383838}.room-settings-info p{font-size:13px;margin:4px 0}.room-settings-info .system-room-badge{background:#007bff;border-radius:12px;color:#fff;display:inline-block;font-size:11px;margin-top:8px;padding:2px 8px}.room-settings-error{background:#f8d7da;color:#721c24}.room-settings-error,.room-settings-success{border-radius:6px;font-size:14px;margin-bottom:16px;padding:12px}.room-settings-success{background:#d4edda;color:#155724}.room-settings-form .form-group{margin-bottom:20px}.room-settings-form .form-group>label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.room-settings-form input[type=number],.room-settings-form input[type=password],.room-settings-form input[type=text],.room-settings-form textarea{border:1px solid #ddd;border-radius:6px;font-size:14px;padding:10px 12px;width:100%}.dark-mode .room-settings-form input,.dark-mode .room-settings-form textarea{background:#383838;border-color:#555;color:#f5f5f5}.room-settings-form small{color:#888;display:block;font-size:12px;margin-top:4px}.room-settings-form .radio-group{display:flex;flex-direction:column;gap:10px}.room-settings-form .radio-label{align-items:flex-start;background:#f8f9fa;border-radius:8px;cursor:pointer;display:flex;gap:10px;padding:12px;transition:background .2s}.dark-mode .room-settings-form .radio-label{background:#383838}.room-settings-form .radio-label:hover{background:#eee}.dark-mode .room-settings-form .radio-label:hover{background:#444}.room-settings-form .radio-label input[type=radio]{margin-top:3px;width:auto}.room-settings-form .radio-label span{display:block;font-weight:500}.room-settings-form .radio-label small{margin-top:2px}.room-settings-form .checkbox-label{align-items:center;cursor:pointer;display:flex;gap:10px}.room-settings-form .checkbox-label input[type=checkbox]{width:auto}.room-settings-form .password-section .current-password-status{align-items:center;background:#e3f2fd;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:10px;padding:10px 12px}.dark-mode .room-settings-form .password-section .current-password-status{background:#1e3a5f}.room-settings-form .password-section .has-password{color:#1976d2;font-size:13px}.dark-mode .room-settings-form .password-section .has-password{color:#64b5f6}.room-settings-form .password-section .remove-password{font-size:13px}.room-settings-actions{border-top:1px solid #eee;display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:16px}.dark-mode .room-settings-actions{border-color:#444}.room-settings-actions .btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px}.room-settings-actions .btn-secondary{background:#e0e0e0;color:#333}.dark-mode .room-settings-actions .btn-secondary{background:#444;color:#f5f5f5}.room-settings-actions .btn-primary{background:#007bff;color:#fff}.room-settings-actions .btn-primary:disabled{background:#ccc;cursor:not-allowed}.room-settings-modal-large{max-width:600px}.room-settings-tabs{border-bottom:1px solid #eee;display:flex;padding:0 20px}.dark-mode .room-settings-tabs{border-color:#444}.room-settings-tabs .tab-btn{background:none;border:none;border-bottom:2px solid #0000;color:#666;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .2s}.dark-mode .room-settings-tabs .tab-btn{color:#aaa}.room-settings-tabs .tab-btn:hover{background:#f8f9fa;color:#333}.dark-mode .room-settings-tabs .tab-btn:hover{background:#383838;color:#fff}.room-settings-tabs .tab-btn.active{border-bottom-color:#007bff;color:#007bff}.dark-mode .room-settings-tabs .tab-btn.active{border-bottom-color:#64b5f6;color:#64b5f6}.room-settings-staff{padding:20px}.staff-section{margin-bottom:20px}.staff-section-title{border-bottom:1px solid #eee;color:#333;font-size:14px;font-weight:600;margin:0 0 10px;padding-bottom:8px}.dark-mode .staff-section-title{border-color:#444;color:#f5f5f5}.staff-section.owner-section{background:#fff8e1;border-radius:8px;margin-bottom:24px;padding:12px 16px}.dark-mode .staff-section.owner-section{background:#4a4000}.staff-owner{align-items:center;display:flex;gap:8px}.owner-badge{font-size:18px}.owner-username{font-size:15px;font-weight:600}.staff-empty{color:#888;font-size:13px;font-style:italic;margin:0;padding:8px 0}.staff-list{list-style:none;margin:0;padding:0}.staff-item{align-items:center;background:#f8f9fa;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:6px;padding:10px 12px}.dark-mode .staff-item{background:#383838}.staff-info{display:flex;flex-direction:column;gap:2px}.staff-username{font-size:14px;font-weight:500}.staff-assigned{color:#888;font-size:11px}.owner-tag{color:#f0a500;font-size:11px;font-weight:600}.staff-remove-btn{align-items:center;background:#f44336;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:background .2s,transform .2s;width:28px}.staff-remove-btn:hover{background:#d32f2f;transform:scale(1.1)}.add-staff-form{background:#f8f9fa;border-radius:8px;margin-bottom:24px;padding:16px}.dark-mode .add-staff-form{background:#383838}.add-staff-form h4{font-size:14px;font-weight:600;margin:0 0 12px}.add-staff-row{display:flex;gap:10px;margin-bottom:8px}.staff-input{border:1px solid #ddd;border-radius:6px;flex:1 1;font-size:14px;padding:8px 12px}.dark-mode .staff-input{background:#2d2d2d;border-color:#555;color:#f5f5f5}.staff-select{background:#fff;border:1px solid #ddd;border-radius:6px;font-size:14px;min-width:120px;padding:8px 12px}.dark-mode .staff-select{background:#2d2d2d;border-color:#555;color:#f5f5f5}.add-staff-form .btn-sm{font-size:13px;padding:8px 16px}.role-help{color:#666;font-size:11px;line-height:1.5}.dark-mode .role-help{color:#aaa}.staff-lists{display:flex;flex-direction:column;gap:20px}@media (max-width:600px){.room-settings-modal-large{max-width:100%}.add-staff-row{flex-wrap:wrap}.staff-input{width:100%}.staff-select{flex:1 1}}body,html{max-width:100vw;overflow-x:hidden;overscroll-behavior:none}.app-layout{background:#fff;background:var(--bg-color,#fff);box-sizing:border-box;max-width:100vw;overflow:hidden;width:100vw}.app-layout,.left-panel{display:flex;height:100vh;height:100dvh}.left-panel{background:#fff;background:var(--sidebar-bg,#fff);border-right:1px solid #ddd;border-right:1px solid var(--border-color,#ddd);flex-direction:column;min-width:280px;transition:transform .3s ease;width:280px}.left-panel-header{background:#007bff;background:var(--nav-bg,#007bff);border-bottom:1px solid #ddd;border-bottom:1px solid var(--border-color,#ddd);display:flex;flex-direction:column;padding:12px 16px}.panel-logo{border-bottom:1px solid #fff3;margin-bottom:8px;padding:8px 0;text-align:center}.panel-logo-img{height:auto;max-height:50px;max-width:140px;object-fit:contain;width:auto}.left-panel-header-content{align-items:center;display:flex;justify-content:space-between;width:100%}.user-info-section{align-items:center;border-radius:4px;cursor:pointer;display:flex;flex:1 1;gap:10px;overflow:hidden;padding:4px 8px}.user-info-section:hover{background:#4f545c66}.user-avatar-small{border-radius:50%;flex-shrink:0;height:32px;object-fit:cover;width:32px}.user-avatar-initials{align-items:center;color:#fff;display:flex;font-size:12px;font-weight:600;justify-content:center}.user-name-role{display:flex;flex-direction:column;overflow:hidden}.user-name{color:#fff;color:var(--nav-text,#fff);font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-role{border-radius:3px;font-size:10px;padding:1px 4px;text-transform:uppercase;width:-webkit-fit-content;width:fit-content}.user-role.role-superadmin{background:#ed4245;color:#fff}.user-role.role-admin{background:#faa61a;color:#1a1a1a}.user-role.role-moderator{background:#3ba55c;color:#fff}.header-actions{display:flex;gap:4px}.icon-btn{align-items:center;background:none;border:none;border-radius:4px;color:#b9bbbe;color:var(--nav-text,#b9bbbe);cursor:pointer;display:flex;font-size:16px;justify-content:center;padding:6px}.icon-btn:hover{background:#0000001a;color:#dcddde;color:var(--nav-text,#dcddde)}.close-panel-btn{display:none}.left-panel-content{flex:1 1;overflow-y:auto;padding:8px 0}.join-room-section{border-bottom:1px solid #ddd;border-bottom:1px solid var(--border-color,#ddd);padding:8px 12px}.join-room-btn.primary{align-items:center;background:#5865f2;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:10px 12px;transition:background-color .2s;width:100%}.join-room-btn.primary:hover{background:#4752c4}.join-room-btn.primary .btn-icon{font-size:18px;font-weight:600}.panel-tabs{background:#fff;background:var(--sidebar-bg,#fff);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color,#e0e0e0);padding:8px 10px}.panel-tab,.panel-tabs{display:flex;gap:4px;overflow:hidden}.panel-tab{align-items:center;background:#f0f2f5;background:var(--bg-secondary,#f0f2f5);border:none;border-radius:8px;color:#65676b;color:var(--text-muted,#65676b);cursor:pointer;flex:1 1;font-size:11px;font-weight:500;justify-content:center;min-width:0;padding:8px 6px;position:relative;text-overflow:ellipsis;transition:all .2s ease;white-space:nowrap}.panel-tab:hover{background:#e4e6e9;background:var(--hover-bg,#e4e6e9);color:#1c1e21;color:var(--text-color,#1c1e21)}.panel-tab.active{box-shadow:0 2px 6px #007bff4d;color:#fff;font-weight:600}.panel-tab.active,.panel-tab.active:hover{background:#007bff;background:var(--nav-bg,#007bff)}.panel-tab.active:hover{filter:brightness(1.1)}.dark-mode .panel-tabs{background:#1a1a1a;background:var(--sidebar-bg,#1a1a1a);border-bottom-color:#333;border-bottom-color:var(--border-color,#333)}.dark-mode .panel-tab{background:#2d2d2d;background:var(--bg-secondary,#2d2d2d);color:#a0a0a0;color:var(--text-muted,#a0a0a0)}.dark-mode .panel-tab:hover{background:#3d3d3d;background:var(--hover-bg,#3d3d3d);color:#e0e0e0;color:var(--text-color,#e0e0e0)}.dark-mode .panel-tab.active{background:#5865f2;background:var(--nav-bg,#5865f2);box-shadow:0 2px 6px #5865f266;color:#fff}.tab-badge{background:#f44336;border-radius:10px;color:#fff;font-size:10px;font-weight:600;min-width:18px;padding:2px 6px;text-align:center}.panel-tab.active .tab-badge{background:#ffffffe6;color:#f44336}.tab-count{background:#00000026;border-radius:10px;color:#666;color:var(--text-color,#666);font-size:10px;font-weight:500;min-width:18px;padding:2px 6px;text-align:center}.panel-tab.active .tab-count{background:#ffffff40;color:#ffffffe6}.dark-mode .tab-count{background:#ffffff1a;color:#a0a0a0;color:var(--text-muted,#a0a0a0)}.tab-content{flex:1 1;overflow-y:auto}.my-room-item .owner-icon{font-size:14px}.room-private-badge{font-size:12px;margin-left:4px}.my-room-actions{display:flex;gap:2px}.room-action-btn.edit-btn{color:#2196f3}.room-action-btn.edit-btn:hover{background:#2196f31a}.room-action-btn.delete-btn{color:#f44336}.room-action-btn.delete-btn:hover{background:#f443361a}.create-room-link{background:none;border:none;color:#5865f2;cursor:pointer;font-size:13px;margin-top:8px;padding:4px 8px;text-decoration:underline}.create-room-link:hover{color:#4752c4}.left-panel-content::-webkit-scrollbar{width:4px}.left-panel-content::-webkit-scrollbar-track{background:#0000}.left-panel-content::-webkit-scrollbar-thumb{background:#ccc;background:var(--border-color,#ccc);border-radius:2px}.panel-section{margin-bottom:8px}.section-header{align-items:center;cursor:pointer;display:flex;padding:6px 16px;-webkit-user-select:none;user-select:none}.section-header:hover{color:#333;color:var(--text-color,#333)}.expand-icon{font-size:8px;margin-right:6px;opacity:.7}.expand-icon,.section-title{color:#666;color:var(--text-color,#666)}.section-title{flex:1 1;font-size:12px;font-weight:600;letter-spacing:.02em;opacity:.8;text-transform:uppercase}.section-badge{background:#ed4245;border-radius:10px;color:#fff;font-size:10px;font-weight:700;min-width:18px;padding:2px 6px;text-align:center}.section-content{padding:0 8px}.room-item{align-items:center;border-radius:4px;color:#666;color:var(--text-color,#666);cursor:pointer;display:flex;margin:2px 0;padding:8px 12px;position:relative}.room-item:hover{background:#00000014;color:#333;color:var(--text-color,#333)}.room-item.active{background:#007bff;background:var(--nav-bg,#007bff);color:#fff;color:var(--nav-text,#fff)}.room-icon{color:#666;color:var(--text-color,#666);font-size:18px;font-weight:600;margin-right:8px;opacity:.7}.room-item.active .room-icon,.room-item:hover .room-icon{color:inherit;opacity:1}.room-name{flex:1 1;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-item .room-user-count{background:#0000000f;border-radius:10px;color:#888;color:var(--text-color,#888);font-size:.7rem;margin-right:4px;opacity:.8;padding:2px 6px}.room-item.active .room-user-count{background:#fff3;color:#ffffffe6}.room-item:hover .room-user-count{opacity:1}.room-actions{align-items:center;display:none;gap:2px;margin-left:auto}.room-item:hover .room-actions{display:flex}.room-action-btn{background:none;border:none;border-radius:3px;color:#666;color:var(--text-color,#666);cursor:pointer;font-size:14px;opacity:.7;padding:2px 6px;transition:all .2s ease}.room-action-btn:hover{opacity:1}.room-action-btn.hide-btn:hover{background:#ffa5001a;color:orange}.room-action-btn.leave-btn{font-size:12px}.room-action-btn.leave-btn:hover{background:#ed42451a;color:#ed4245}.room-action-btn.share-btn:hover{background:#5865f21a;color:#5865f2}.unread-badge{background:#ed4245;border-radius:10px;color:#fff;font-size:11px;font-weight:700;margin-left:8px;margin-right:8px;min-width:18px;padding:2px 6px;text-align:center}.share-modal-overlay{align-items:center;background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.share-modal{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000004d;max-width:420px;overflow:hidden;width:90%}.share-modal-header{align-items:center;background:#007bff;background:var(--nav-bg,#007bff);border-bottom:1px solid #eee;color:#fff;color:var(--nav-text,#fff);display:flex;justify-content:space-between;padding:16px 20px}.share-modal-header h3{font-size:18px;font-weight:600;margin:0}.share-modal-close{background:none;border:none;color:#fff;color:var(--nav-text,#fff);cursor:pointer;font-size:24px;line-height:1;opacity:.8;padding:0}.share-modal-close:hover{opacity:1}.share-modal-content{padding:20px}.share-room-name{color:#333;font-size:24px;font-weight:600;margin:0 0 8px}.share-description{color:#666;font-size:14px;margin:0 0 16px}.share-link-container{display:flex;gap:8px;margin-bottom:12px}.share-link-input{background:#f8f9fa;border:1px solid #ddd;border-radius:6px;color:#333;flex:1 1;font-size:13px;padding:10px 12px}.share-link-input:focus{border-color:#007bff;border-color:var(--nav-bg,#007bff);outline:none}.share-copy-btn{background:#007bff;background:var(--nav-bg,#007bff);border:none;border-radius:6px;color:#fff;color:var(--nav-text,#fff);cursor:pointer;font-size:14px;font-weight:500;padding:10px 16px;transition:all .2s ease;white-space:nowrap}.share-copy-btn:hover{opacity:.9}.share-copy-btn.success{background:#43b581}.share-native-btn{background:#f0f0f0;border:1px solid #ddd;border-radius:6px;color:#333;cursor:pointer;font-size:14px;font-weight:500;padding:12px;transition:all .2s ease;width:100%}.share-native-btn:hover{background:#e8e8e8}.dark-mode .share-modal{background:#2f3136}.dark-mode .share-modal-header{border-bottom-color:#40444b}.dark-mode .share-room-name{color:#fff}.dark-mode .share-description{color:#b9bbbe}.dark-mode .share-link-input,.dark-mode .share-native-btn{background:#40444b;border-color:#40444b;color:#fff}.dark-mode .share-native-btn:hover{background:#4f545c}.join-room-btn{align-items:center;background:none;border:none;border-radius:4px;color:#666;color:var(--text-color,#666);cursor:pointer;display:flex;font-size:14px;gap:8px;margin-top:4px;padding:8px 12px;text-align:left;width:100%}.join-room-btn:hover{background:#00000014;color:#333;color:var(--text-color,#333)}.btn-icon{font-size:16px;font-weight:600}.dm-item{align-items:center;border-radius:4px;color:#666;color:var(--text-color,#666);cursor:pointer;display:flex;margin:2px 0;padding:8px 12px}.dm-item:hover{background:#00000014;color:#333;color:var(--text-color,#333)}.dm-item.active{background:#007bff;background:var(--nav-bg,#007bff);color:#fff;color:var(--nav-text,#fff)}.dm-avatar{border-radius:50%;flex-shrink:0;height:32px;margin-right:10px;object-fit:cover;width:32px}.dm-avatar-initials{align-items:center;color:#fff;display:flex;font-size:11px;font-weight:600;justify-content:center}.dm-avatar-container{flex-shrink:0;margin-right:10px;position:relative}.dm-avatar-container .dm-avatar{margin-right:0}.dm-status-indicator{border:2px solid #1e1e1e;border:2px solid var(--left-panel-bg,#1e1e1e);border-radius:50%;bottom:0;box-sizing:border-box;height:10px;position:absolute;right:0;width:10px}.dm-status-indicator.status-online{background:#3ba55c}.dm-status-indicator.status-away{background:#faa61a}.dm-status-indicator.status-offline{background:#747f8d}.dm-username{flex:1 1;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-indicator{background:#3ba55c;border-radius:50%;height:8px;margin-right:8px;width:8px}.dm-close-btn{background:none;border:none;border-radius:4px;color:#999;cursor:pointer;display:none;font-size:16px;line-height:1;margin-left:4px;padding:2px 6px;transition:all .2s}.dm-item:hover .dm-close-btn{align-items:center;display:flex;justify-content:center}.dm-close-btn:hover{background:#0000001a;color:#666}.dm-item.active .dm-close-btn{color:#ffffffb3}.dm-item.active .dm-close-btn:hover{background:#fff3;color:#fff}.empty-state{padding:12px}.empty-state,.loading-state{color:#666;color:var(--text-color,#666);font-size:13px;opacity:.7;text-align:center}.loading-state{padding:20px}.left-panel-footer{background:#f0f0f0;background:var(--sidebar-bg,#f0f0f0);border-top:1px solid #ddd;border-top:1px solid var(--border-color,#ddd);padding:12px 16px}.guest-notice{color:#666;color:var(--text-color,#666);font-size:12px;text-align:center}.guest-notice a{color:#007bff;color:var(--nav-bg,#007bff);text-decoration:none}.guest-notice a:hover{text-decoration:underline}.logout-btn{align-items:center;background:#0000;border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:4px;color:#666;color:var(--text-color,#666);cursor:pointer;display:flex;font-size:14px;gap:8px;justify-content:center;margin-top:10px;padding:10px 16px;transition:all .2s ease;width:100%}.logout-btn:hover{background:#ed4245;border-color:#ed4245}.logout-icon{font-size:16px}.main-area{background:#fff;background:var(--bg-color,#fff);display:flex;flex:1 1;flex-direction:column;min-width:0;overflow:hidden;position:relative}.connection-banner{animation:slideDown .3s ease;font-weight:500;padding:10px 20px;text-align:center;z-index:100}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.connection-banner.disconnected{background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff}.connection-banner.reconnecting{background:linear-gradient(135deg,#ffa726,#fb8c00);color:#fff}.connection-banner-content{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.connection-icon{font-size:1.2rem}.connection-text{font-size:.95rem}.reconnect-btn{background:#fff;border:none;border-radius:4px;color:#ee5a5a;cursor:pointer;font-weight:600;padding:6px 16px;transition:all .2s ease}.reconnect-btn:hover{background:#f0f0f0;transform:scale(1.05)}.dark-mode .connection-banner.disconnected{background:linear-gradient(135deg,#c62828,#b71c1c)}.dark-mode .reconnect-btn{background:#ffffffe6;color:#c62828}.right-sidebar{background:#f0f0f0;background:var(--sidebar-bg,#f0f0f0);border-left:1px solid #ddd;border-left:1px solid var(--border-color,#ddd);box-shadow:none;flex-direction:column;flex-shrink:0;height:100vh;max-width:240px;min-width:240px;overflow-y:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:240px}.right-sidebar.show{display:flex}.room-selection-view{background:#f5f5f5;box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:20px;width:100%}.room-selection-header{margin-bottom:30px;text-align:center}.room-selection-header h2{color:#333;font-size:24px;margin-bottom:8px}.room-selection-header p{color:#666;font-size:14px}@media (max-width:640px){.room-selection-view{padding:16px 12px}.room-selection-header{margin-bottom:20px}.room-selection-header h2{font-size:20px}.room-selection-header p{font-size:13px}.create-room-btn{font-size:14px;margin-bottom:16px;max-width:100%;padding:10px 20px}}.create-room-btn{background:#5865f2;border:none;border-radius:8px;color:#fff;cursor:pointer;display:block;font-size:16px;font-weight:600;margin:0 auto 24px;max-width:300px;padding:12px 24px;transition:background .2s,transform .2s;width:100%}.create-room-btn:hover{background:#4752c4;transform:translateY(-1px)}.modal-overlay{background:#000000b3;padding:20px}.create-room-modal{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;max-height:90vh;max-width:480px;overflow-y:auto;width:100%}.create-room-modal .modal-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:16px 20px}.create-room-modal .modal-header h3{color:#333;font-size:20px;margin:0}.create-room-modal .modal-close-btn{background:none;border:none;color:#999;cursor:pointer;font-size:24px;line-height:1;padding:0;transition:color .2s}.create-room-modal .modal-close-btn:hover{color:#333}.create-room-modal form{padding:20px}.create-room-modal .form-group{margin-bottom:16px}.create-room-modal label{color:#555;display:block;font-size:12px;font-weight:600;margin-bottom:8px;text-transform:uppercase}.create-room-modal .form-control{background:#fff;border:1px solid #ddd;border-radius:4px;color:#333;font-size:14px;padding:10px 12px;transition:border-color .2s;width:100%}.create-room-modal .form-control:focus{border-color:#5865f2;outline:none}.create-room-modal textarea.form-control{min-height:80px;resize:vertical}.create-room-modal .checkbox-group label{align-items:center;color:#333;cursor:pointer;display:flex;font-size:14px;font-weight:400;gap:8px;text-transform:none}.create-room-modal .checkbox-group input[type=checkbox]{cursor:pointer;height:18px;width:18px}.create-room-modal .error-message{background:#f04747;border-radius:4px;color:#fff;font-size:14px;margin-bottom:16px;padding:10px 12px}.create-room-modal .modal-actions{border-top:1px solid #e0e0e0;display:flex;gap:12px;justify-content:flex-end;margin-top:20px;padding-top:16px}.create-room-modal .btn{border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;padding:10px 20px;transition:background .2s,opacity .2s}.create-room-modal .btn-secondary{background:#0000;border:1px solid #ddd;color:#666}.create-room-modal .btn-secondary:hover{background:#f5f5f5}.create-room-modal .btn-primary{background:#5865f2;border:none;color:#fff}.create-room-modal .btn-primary:hover{background:#4752c4}.create-room-modal .btn-primary:disabled{background:#ccc;cursor:not-allowed;opacity:.7}.room-grid{grid-gap:16px;box-sizing:border-box;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));width:100%}@media (max-width:640px){.room-grid{gap:12px;grid-template-columns:1fr;padding:0}}.room-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000000d;cursor:pointer;padding:16px;transition:background .2s,transform .2s,box-shadow .2s}.room-card:hover{background:#fafafa;border-color:#ccc;box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.room-card-header{align-items:center;display:flex;gap:10px;margin-bottom:8px}.room-card-icon{color:#5865f2;font-size:24px}.room-card-name{color:#333;flex:1 1;font-size:16px;font-weight:600}.room-card-badge{background:#5865f2;border-radius:3px;color:#fff;font-size:10px;padding:2px 6px;text-transform:uppercase}.room-card-users{background:#00000014;border-radius:12px;color:#555;font-size:12px;font-weight:500;margin-left:auto;padding:3px 8px}.room-card-description{color:#666;font-size:13px;line-height:1.4;margin-bottom:12px}.room-card-meta{align-items:center;color:#888;display:flex;font-size:12px;gap:12px}.room-card-meta span{align-items:center;display:flex;gap:4px}@media (max-width:640px){.room-card{padding:14px}.room-card-header{gap:8px}.room-card-icon{font-size:20px}.room-card-name{font-size:15px}.room-card-badge{font-size:9px;padding:2px 5px}.room-card-description{font-size:12px;margin-bottom:10px}.room-card-meta{font-size:11px;gap:8px}}.search-mode-overlay{background:#f5f5f5;bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0;z-index:100}.search-header{align-items:center;background:#fff;border-bottom:1px solid #e0e0e0;display:flex;padding:16px 20px}.search-input-container{align-items:center;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;display:flex;flex:1 1;margin-right:12px;padding:8px 12px}.search-input-container input{background:none;border:none;color:#333;flex:1 1;font-size:14px;outline:none}.search-input-container input::placeholder{color:#999}.search-close-btn{background:none;border:none;color:#666;cursor:pointer;font-size:20px;padding:4px 8px}.search-close-btn:hover{color:#333}.create-room-btn-small{background:#5865f2;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;margin-right:12px;padding:8px 16px;transition:background .2s;white-space:nowrap}.create-room-btn-small:hover{background:#4752c4}@media (max-width:640px){.search-mode-overlay{overflow-x:hidden}.search-header{flex-wrap:wrap;gap:8px;padding:12px}.search-input-container{flex:1 1 100%;margin-bottom:8px;margin-right:0;order:1}.create-room-btn-small{flex:1 1;font-size:13px;margin-right:8px;order:2;padding:8px 12px}.search-close-btn{order:3}.search-results{overflow-x:hidden;padding:12px}}.search-results{flex:1 1;overflow-y:auto;padding:20px}.room-browser-view{background:#f5f5f5;background:var(--bg-color,#f5f5f5);display:flex;flex:1 1;flex-direction:column;overflow:hidden}.room-browser-header{align-items:flex-start;background:#fff;background:var(--sidebar-bg,#fff);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color,#e0e0e0);display:flex;justify-content:space-between;padding:24px 24px 16px}.room-browser-title h2{color:#333;color:var(--text-color,#333);font-size:22px;font-weight:600;margin:0 0 4px}.room-browser-title p{color:#666;color:var(--text-secondary,#666);font-size:14px;margin:0}.room-browser-close-btn{align-items:center;background:none;border:none;border-radius:50%;color:#666;color:var(--text-secondary,#666);cursor:pointer;display:flex;flex-shrink:0;font-size:24px;height:36px;justify-content:center;transition:background .2s,color .2s;width:36px}.room-browser-close-btn:hover{background:#00000014;color:#333;color:var(--text-color,#333)}.room-browser-actions{align-items:center;background:#fff;background:var(--sidebar-bg,#fff);border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color,#e0e0e0);display:flex;gap:12px;padding:16px 24px}.room-browser-actions .search-input-container{align-items:center;background:#f0f0f0;background:var(--input-bg,#f0f0f0);border:1px solid #ddd;border:1px solid var(--border-color,#ddd);border-radius:8px;display:flex;margin-right:0;max-width:350px;padding:10px 14px;position:relative;width:100%}.room-browser-actions .search-icon{font-size:16px;margin-right:10px;opacity:.6}.room-browser-actions .search-input-container input{background:none;border:none;color:#333;color:var(--text-color,#333);flex:1 1;font-size:15px;outline:none}.room-browser-actions .search-input-container input::placeholder{color:#999;color:var(--text-secondary,#999)}.room-browser-actions .search-clear-btn{align-items:center;background:#0000001a;border:none;border-radius:50%;color:#666;color:var(--text-secondary,#666);cursor:pointer;display:flex;font-size:14px;height:20px;justify-content:center;transition:background .2s;width:20px}.room-browser-actions .search-clear-btn:hover{background:#0003}.room-browser-actions .create-room-btn{align-items:center;background:#5865f2;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:6px;margin:0;max-width:none;padding:10px 18px;transition:background .2s,transform .2s;white-space:nowrap;width:auto}.room-browser-actions .create-room-btn:hover{background:#4752c4;transform:translateY(-1px)}.room-browser-actions .create-room-btn .btn-icon{font-size:16px;font-weight:700}.room-browser-content{flex:1 1;overflow-y:auto;padding:20px 24px}.no-rooms-message{font-size:15px;text-align:center}.no-rooms-message,.rooms-loading{color:#666;color:var(--text-secondary,#666);padding:60px 20px}.rooms-loading{align-items:center;display:flex;flex-direction:column;justify-content:center}.rooms-loading .loading-spinner{animation:spin .8s linear infinite;border:3px solid #e0e0e0;border-top-color:#007bff;border:3px solid var(--border-color,#e0e0e0);border-radius:50%;border-top-color:var(--primary-color,#007bff);height:40px;margin-bottom:16px;width:40px}.rooms-loading p{font-size:14px;margin:0}.room-card-badge.system{background:#5865f2}.room-card-badge.protected{background:#faa61a;color:#1a1a1a}@media (max-width:768px){.room-browser-header{padding:16px}.room-browser-title h2{font-size:18px}.room-browser-title p{font-size:13px}.room-browser-close-btn{font-size:20px;height:32px;width:32px}.room-browser-actions{flex-wrap:wrap;padding:12px 16px}.room-browser-actions .search-input-container{flex:1 1 100%;margin-bottom:10px;max-width:none;order:1}.room-browser-actions .create-room-btn{flex:1 1;justify-content:center;order:2;padding:10px 14px}.room-browser-content{padding:16px}}@media (max-width:480px){.room-browser-header{padding:12px}.room-browser-title h2{font-size:16px}.room-browser-title p{font-size:12px}.room-browser-actions{padding:10px 12px}.room-browser-actions .search-input-container{padding:8px 12px}.room-browser-actions .create-room-btn{font-size:13px;padding:8px 12px}.room-browser-content{padding:12px}}.dark-mode .room-browser-view{background:var(--bg-color)}.dark-mode .room-browser-actions,.dark-mode .room-browser-header{background:var(--sidebar-bg);border-color:var(--border-color)}.dark-mode .room-browser-title h2{color:var(--text-color)}.dark-mode .room-browser-close-btn,.dark-mode .room-browser-title p{color:var(--text-secondary)}.dark-mode .room-browser-close-btn:hover{background:#ffffff1a;color:var(--text-color)}.dark-mode .room-browser-actions .search-input-container{background:var(--input-bg);border-color:var(--border-color)}.dark-mode .room-browser-actions .search-input-container input{color:var(--text-color)}.dark-mode .room-browser-actions .search-clear-btn{background:#ffffff1a;color:var(--text-secondary)}.dark-mode .room-browser-actions .search-clear-btn:hover{background:#fff3}.dark-mode .no-rooms-message{color:var(--text-secondary)}.dark-mode .room-card{background:var(--sidebar-bg);border-color:var(--border-color)}.dark-mode .room-card:hover{background:var(--hover-bg);border-color:var(--border-color)}.dark-mode .room-card-name{color:var(--text-color)}.dark-mode .room-card-description,.dark-mode .room-card-meta{color:var(--text-secondary)}.dark-mode .room-card-users{background:#ffffff1a;color:var(--text-secondary)}@media (max-width:768px){.app-layout,.left-panel{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}.left-panel{left:0;overflow:hidden;position:fixed;top:0;transform:translateX(-100%);z-index:1000}.left-panel.open{transform:translateX(0)}.left-panel .left-panel-content{flex:1 1;min-height:0;overflow-y:auto}.left-panel .left-panel-footer{flex-shrink:0}.close-panel-btn{display:flex}.right-sidebar,.sidebar.right-sidebar{box-shadow:-4px 0 20px #0000004d;height:100vh;height:100dvh;left:auto!important;max-width:80vw;min-width:260px;position:fixed!important;right:0!important;top:0;transform:translateX(100%);transition:transform .3s ease;width:260px;z-index:1000}.right-sidebar.show,.sidebar.right-sidebar.show{display:flex!important;left:auto!important;right:0!important;transform:translateX(0)!important}.mobile-overlay{background:#00000080;bottom:0;left:0;position:fixed;right:0;top:0;z-index:999}}@media (min-width:769px) and (max-width:1024px){.left-panel{min-width:200px;width:200px}.right-sidebar,.sidebar.right-sidebar{box-shadow:-4px 0 15px #0003;height:100vh;height:100dvh;left:auto!important;min-width:240px;position:fixed!important;right:0!important;top:0;transform:translateX(100%);transition:transform .3s ease;width:240px;z-index:1000}.right-sidebar.show,.sidebar.right-sidebar.show{display:flex!important;left:auto!important;right:0!important;transform:translateX(0)!important}}.navigation{background:#007bff;background:var(--nav-bg,#007bff);border-bottom:1px solid #0056b3;border-bottom:1px solid var(--border-color,#0056b3);display:flex;flex-direction:column}.nav-main-row{align-items:center;display:flex;justify-content:space-between;min-height:48px;padding:10px 16px}.navigation .nav-left{align-items:center;display:flex;gap:12px}.navigation .nav-left h3{color:#fff;color:var(--nav-text,#fff);font-size:16px;font-weight:600;margin:0}.navigation .nav-right{align-items:center;display:flex;gap:8px}.nav-center{align-items:center;display:flex;flex:1 1;justify-content:center;min-width:0;padding:0 16px}.nav-topic-inline{color:#ffffffe6;font-size:14px;font-weight:400;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-logo{display:none;height:auto;max-height:28px;max-width:90px;object-fit:contain;width:auto}.nav-topic-row{background:#00000026;display:none;padding:6px 16px 8px}.nav-topic-text{color:#fffffff2;display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hamburger-menu-btn{background:none;border:none;border-radius:4px;color:#fff;cursor:pointer;display:none;font-size:20px;padding:4px 8px}.hamburger-menu-btn:hover{background:#ffffff1a}.hamburger-icon{font-size:20px}@media (max-width:768px){.main-area{flex:1 1;height:100%;max-height:100%;min-height:0;overflow:hidden}.nav-main-row{flex-shrink:0;min-height:44px;padding:8px 12px}.hamburger-menu-btn{display:flex}.nav-logo{display:block}.navigation .nav-left{gap:10px}.navigation .nav-left h3{font-size:14px}.navigation .nav-right{gap:6px}.nav-share-btn .btn-text,.toggle-sidebar-btn .btn-text{display:none}.nav-share-btn,.toggle-sidebar-btn{font-size:14px!important;padding:6px 10px!important}.nav-center{display:none}.nav-topic-row{display:block;flex-shrink:0;padding:5px 12px 7px}.nav-topic-text{font-size:12px}.navigation{flex-shrink:0}}@media (max-width:480px){.navigation .nav-left h3{font-size:13px}.nav-logo{max-height:24px;max-width:70px}.nav-share-btn,.toggle-sidebar-btn{padding:5px 8px!important}.user-count-badge{font-size:10px!important;padding:1px 4px!important}}.global-unread-indicator{align-items:center;animation:slideIn .3s ease-out,pulse 2s infinite;background:linear-gradient(135deg,#5865f2,#4752c4);border-radius:30px;bottom:20px;box-shadow:0 4px 20px #5865f280;color:#fff;cursor:pointer;display:flex;font-weight:500;gap:8px;left:20px;padding:12px 20px;position:fixed;transition:all .2s ease;z-index:1000}.global-unread-indicator:hover{background:linear-gradient(135deg,#4752c4,#3c45a5);box-shadow:0 6px 25px #5865f299;transform:scale(1.05)}.global-unread-indicator:active{transform:scale(.98)}.global-unread-indicator .unread-icon{animation:bounce 1s ease infinite;font-size:20px}.global-unread-indicator .unread-count{background:#ed4245;border-radius:12px;color:#fff;font-size:14px;font-weight:700;min-width:20px;padding:2px 8px;text-align:center}.global-unread-indicator .unread-text{font-size:14px;white-space:nowrap}@keyframes slideIn{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media (max-width:768px){.global-unread-indicator{bottom:80px;left:50%;padding:10px 16px;transform:translateX(-50%)}.global-unread-indicator:hover{transform:translateX(-50%) scale(1.05)}.global-unread-indicator .unread-text{display:none}.global-unread-indicator .unread-icon{font-size:18px}.global-unread-indicator .unread-count{font-size:13px}}.dark-mode .global-unread-indicator,.theme-dark .global-unread-indicator{background:linear-gradient(135deg,#7289da,#5865f2);box-shadow:0 4px 20px #7289da66}.dark-mode .global-unread-indicator:hover,.theme-dark .global-unread-indicator:hover{background:linear-gradient(135deg,#5865f2,#4752c4);box-shadow:0 6px 25px #7289da80}.profile-modal-overlay{align-items:center;background:#00000080!important;bottom:0!important;display:flex!important;justify-content:center;left:0!important;padding:20px;position:fixed!important;right:0!important;top:0!important;z-index:999999!important}.profile-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}.profile-modal-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:16px 20px 12px}.profile-modal-header h2{color:#1f2937;font-size:1.25rem;font-weight:600;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;padding:4px;transition:color .2s,background-color .2s;width:32px}.close-btn:hover{background-color:#f3f4f6;color:#374151}.profile-modal-content{padding:16px 20px}.avatar-section{display:flex;justify-content:center;margin-bottom:12px}.avatar-preview{border-radius:50%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;height:120px;overflow:hidden;position:relative;transition:transform .2s ease;width:120px}.avatar-preview:hover{transform:scale(1.05)}.avatar-img{border-radius:50%;height:100%;object-fit:cover;width:100%}.avatar-overlay{align-items:center;background:#00000080;border-radius:50%;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease}.avatar-preview:hover .avatar-overlay{opacity:1}.avatar-upload-label{background:#0003;border:1px solid #ffffff4d;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;padding:8px 12px;text-align:center;transition:background-color .2s}.avatar-upload-label:hover{background:#0006}.profile-modal .profile-fields{display:flex;flex-direction:column;gap:4px!important}.profile-modal .form-group{display:flex;flex-direction:column;margin:0!important;padding:0!important}.profile-modal .form-group label{color:#374151;font-size:.75rem!important;font-weight:500;margin-bottom:2px!important}.profile-modal .form-group input,.profile-modal .form-group select,.profile-modal .form-group textarea{background-color:#fff;border:1px solid #d1d5db;border-radius:4px;font-size:.8rem!important;margin:0!important;padding:6px 10px!important;transition:border-color .2s,box-shadow .2s}.profile-modal .form-group input:focus,.profile-modal .form-group select:focus,.profile-modal .form-group textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.profile-modal .form-group textarea{font-family:inherit;min-height:60px!important;resize:vertical}.char-count{color:#6b7280;font-size:.7rem;margin-top:1px;text-align:right}.error-message{background-color:#fee2e2;border:1px solid #fecaca;border-radius:8px;color:#dc2626}.error-message,.success-message{font-size:.875rem;margin-bottom:16px;padding:12px 16px}.success-message{background-color:#dcfce7;border:1px solid #bbf7d0;border-radius:8px;color:#16a34a}.profile-modal-footer{border-top:1px solid #e5e7eb;display:flex;gap:10px;justify-content:flex-end;margin-top:12px;padding-top:12px}.btn{border-radius:6px;font-size:.8rem;min-width:90px;padding:10px 20px;transition:all .2s ease}.btn-primary{background-color:#3b82f6}.btn-primary:hover:not(:disabled){background-color:#2563eb;box-shadow:0 4px 8px #3b82f64d;transform:translateY(-1px)}.btn-primary:disabled{background-color:#9ca3af;box-shadow:none}.btn-secondary{background-color:#f3f4f6;border:1px solid #d1d5db;color:#374151}.btn-secondary:hover{background-color:#e5e7eb;transform:translateY(-1px)}@media (prefers-color-scheme:dark){.profile-modal{background:#1f2937;color:#f9fafb}.profile-modal-header{border-bottom-color:#374151}.profile-modal-header h2{color:#f9fafb}.close-btn{color:#9ca3af}.close-btn:hover{background-color:#374151;color:#f3f4f6}.form-group label{color:#e5e7eb}.form-group input,.form-group select,.form-group textarea{background-color:#374151;border-color:#4b5563;color:#f9fafb}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1a}.char-count{color:#9ca3af}.profile-modal-footer{border-top-color:#374151}.btn-secondary{background-color:#374151;border-color:#4b5563;color:#e5e7eb}.btn-secondary:hover{background-color:#4b5563}}@media (max-width:640px){.profile-modal-overlay{padding:10px}.profile-modal{margin:0;max-width:100%}.profile-modal-content,.profile-modal-header{padding:16px}.avatar-preview{height:100px;width:100px}.profile-modal-footer{flex-direction:column}.btn{width:100%}}.readonly-field{background-color:#f5f5f5!important;border-color:#ddd!important;color:#666!important;cursor:not-allowed}.field-hint{color:#888;display:block;font-size:10px;margin-top:1px}.profile-view-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:10000}.profile-view-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:450px;overflow-y:auto;width:100%}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.profile-view-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:24px 24px 16px}.profile-view-header h2{color:#1f2937;font-size:1.5rem;font-weight:600;margin:0}.profile-view-content{padding:24px}.loading-spinner{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:40px 20px;text-align:center}.spinner{animation:spin 1s linear infinite;border:4px solid #e5e7eb;border-radius:50%;border-top-color:#3b82f6;height:40px;margin-bottom:16px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-spinner p{color:#6b7280;font-size:.875rem;margin:0}.error-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:40px 20px;text-align:center}.error-icon{font-size:2rem;margin-bottom:12px}.error-state p{color:#dc2626;font-size:.875rem;margin-bottom:16px}.retry-btn{background-color:#3b82f6;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.875rem;padding:8px 16px;transition:background-color .2s}.retry-btn:hover{background-color:#2563eb}.profile-details{display:flex;flex-direction:column;gap:24px}.profile-avatar-section{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;flex-direction:column;padding-bottom:16px;text-align:center}.profile-avatar{border-radius:50%;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;height:100px;margin-bottom:12px;object-fit:cover;width:100px}.profile-username{color:#1f2937;font-size:1.25rem;font-weight:600;margin:0}.profile-info{flex-direction:column;gap:16px}.profile-field{display:flex;flex-direction:column;gap:4px}.profile-field.about-field{gap:8px}.field-label{color:#6b7280;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.field-value{color:#1f2937;font-size:.875rem;font-weight:500}.field-value.ip-address{background-color:#fef3c7;border-radius:4px;color:#92400e;font-family:Monaco,Menlo,Ubuntu Mono,monospace;padding:2px 8px}.about-text{color:#4b5563;font-size:.875rem;line-height:1.5;margin:0;white-space:pre-wrap;word-break:break-word}.website-link{border-bottom:1px solid #0000;color:#3b82f6;text-decoration:none;transition:border-color .2s}.website-link:hover{border-bottom-color:#3b82f6}.profile-timestamps{border-top:1px solid #e5e7eb;display:flex;flex-direction:column;gap:8px;padding-top:16px}.timestamp{align-items:center;display:flex;justify-content:space-between}.timestamp-label{color:#6b7280;font-size:.75rem;font-weight:500}.timestamp-value{color:#4b5563;font-size:.75rem}@media (prefers-color-scheme:dark){.profile-view-modal{background:#1f2937;color:#f9fafb}.profile-view-header{border-bottom-color:#374151}.profile-view-header h2{color:#f9fafb}.close-btn,.profile-view-overlay .close-btn{color:#9ca3af}.close-btn:hover,.profile-view-overlay .close-btn:hover{background-color:#374151;color:#f3f4f6}.loading-spinner p{color:#9ca3af}.spinner{border-color:#60a5fa #4b5563 #4b5563}.profile-avatar-section{border-bottom-color:#374151}.profile-username{color:#f9fafb}.field-label{color:#9ca3af}.field-value{color:#e5e7eb}.about-text{color:#d1d5db}.website-link{color:#60a5fa}.website-link:hover{border-bottom-color:#60a5fa}.profile-timestamps{border-top-color:#374151}.timestamp-label{color:#9ca3af}.timestamp-value{color:#d1d5db}.retry-btn{background-color:#3b82f6}.retry-btn:hover{background-color:#2563eb}}@media (max-width:640px){.profile-view-overlay{padding:10px}.profile-view-modal{margin:0;max-width:100%}.profile-view-content,.profile-view-header{padding:16px}.profile-avatar{height:80px;width:80px}.profile-username{font-size:1.125rem}.timestamp{align-items:flex-start;flex-direction:column;gap:2px}}.guest-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;color:#fff;display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.5px;margin-left:8px;padding:2px 8px;text-transform:uppercase;vertical-align:middle}.profile-popup-info h4 .guest-badge{font-size:.65rem;padding:2px 6px}.profile-full-image-overlay{align-items:center;animation:fadeIn .2s ease;background:#000000f2;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2147483647}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.profile-full-image-container{align-items:center;display:flex;flex-direction:column;max-height:90vh;max-width:90vw;position:relative}.profile-full-image-close{align-items:center;background:#ffffff26;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:28px;height:40px;justify-content:center;position:absolute;right:-50px;top:-50px;transition:all .2s ease;width:40px}.profile-full-image-close:hover{background:#ffffff40;transform:scale(1.1)}.profile-full-image{border-radius:8px;box-shadow:0 20px 60px #00000080;max-height:80vh;max-width:90vw;object-fit:contain}.profile-full-image-username{color:#fff;font-size:18px;font-weight:500;margin-top:16px;text-shadow:0 2px 4px #00000080}.profile-avatar.clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.profile-avatar.clickable:hover{box-shadow:0 8px 25px #0003;transform:scale(1.05)}@media (max-width:768px){.profile-full-image-close{font-size:24px;height:36px;right:0;top:-45px;width:36px}}.login-container{align-items:center;background:linear-gradient(135deg,#6a11cb,#2575fc);display:flex;justify-content:center;min-height:100vh;padding:20px}.login-card{background:#fff;border-radius:10px;box-shadow:0 10px 30px #0003;max-width:500px;padding:30px;transition:all .3s ease;width:100%}.register-card{max-width:600px}.login-logo{margin-bottom:20px;text-align:center}.logo-img{height:auto;max-height:80px;max-width:200px;object-fit:contain;width:auto}.login-title{color:#333;font-size:2rem;margin-bottom:5px;text-align:center}.login-subtitle{color:#666;margin-bottom:25px;text-align:center}.error-message{background-color:#f8d7da;border-radius:5px;color:#721c24;padding:10px;text-align:center}.error-message,.form-group,.form-row{margin-bottom:20px}.form-row{display:flex;gap:15px}.form-group.half,.form-group.half-width{flex:1 1;margin-bottom:0}.form-group.half .form-control,.form-group.half-width .form-control{width:100%}.form-group label{color:#333;display:block;font-weight:500;margin-bottom:8px}.form-control{border:1px solid #ddd;border-radius:5px;font-size:1rem;padding:12px 15px;transition:border-color .3s;width:100%}.form-control:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff1a;outline:none}.btn{border:none;border-radius:5px;cursor:pointer;font-size:1rem;font-weight:500;padding:12px 20px;transition:all .3s}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0069d9;transform:translateY(-2px)}.btn-primary:disabled{background-color:#6c757d;cursor:not-allowed;transform:none}.btn-block{display:block;width:100%}.join-btn{font-size:1.1rem;margin-top:10px;padding:15px}.popular-rooms{margin-bottom:20px}.popular-rooms p{color:#666;margin-bottom:10px}.room-buttons{display:flex;flex-wrap:wrap;gap:10px}.room-btn{background-color:#f0f0f0;border:1px solid #ddd;border-radius:5px;cursor:pointer;padding:8px 15px;transition:all .2s}.room-btn:hover{background-color:#e0e0e0}.room-btn.active{background-color:#007bff;border-color:#007bff;color:#fff}.room-user-count{align-items:center;background:#00000014;border-radius:10px;color:#666;display:inline-flex;font-size:.75rem;gap:2px;margin-left:8px;padding:2px 6px}.room-btn.active .room-user-count{background:#fff3;color:#ffffffe6}.checkbox-label{align-items:center;cursor:pointer;display:flex;font-weight:400;gap:10px}.checkbox-label input[type=checkbox]{cursor:pointer;height:18px;width:18px}.checkbox-label span{color:#333}.form-text{color:#6c757d;display:block;font-size:.85rem;margin-top:5px}.loading-text,.no-rooms-text{background:#f8f9fa;padding:15px}.guest-info-text,.loading-text,.no-rooms-text{border-radius:5px;color:#6c757d;font-size:.9rem;text-align:center}.guest-info-text{background:#e7f3ff;border-left:3px solid #007bff;margin:15px 0;padding:12px}.login-footer{color:#666;margin-top:20px;text-align:center}.login-footer a{color:#007bff;font-weight:500;text-decoration:none}.login-footer a:hover{text-decoration:underline}.login-mode-toggle{border:1px solid #ddd;border-radius:5px;display:flex;margin-bottom:20px;overflow:hidden}.mode-btn{background:#f8f9fa;border:none;cursor:pointer;flex:1 1;padding:10px;transition:all .2s}.mode-btn.active{background:#007bff;color:#fff}.profile-pic-container{margin-top:10px}.profile-pic-preview{border:3px solid #007bff;border-radius:50%;height:100px;margin-bottom:10px;overflow:hidden;width:100px}.profile-pic-preview img{height:100%;object-fit:cover;width:100%}.room-selection-card{max-width:600px}.user-welcome{margin-bottom:30px;text-align:center}.user-welcome h1{color:#333;margin-bottom:15px}.user-actions{display:flex;gap:10px;justify-content:center}.btn-outline{background:#0000;border:1px solid #007bff;color:#007bff}.btn-outline:hover{background:#007bff;color:#fff}.admin-btn{border-color:#6f42c1;color:#6f42c1}.admin-btn:hover{background:#6f42c1;color:#fff}.logout-btn{border-color:#dc3545;color:#dc3545}.logout-btn:hover{background:#dc3545;color:#fff}.room-selection-title{color:#333;margin-bottom:20px;text-align:center}.profile-container{margin:0 auto;max-width:900px;padding:30px}.profile-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:20px}.profile-header h1{color:#333;margin:0}.profile-actions{display:flex;gap:10px}.profile-error{background-color:#f8d7da;color:#721c24}.profile-error,.profile-success{border-radius:5px;margin-bottom:20px;padding:10px 15px}.profile-success{background-color:#d4edda;color:#155724}.profile-tabs{border-bottom:1px solid #eee;display:flex;margin-bottom:30px}.tab-btn{background:none;border:none;border-bottom:3px solid #0000;color:#666;cursor:pointer;font-size:1rem;padding:10px 20px;transition:all .2s}.tab-btn:hover{color:#333}.tab-btn.active{border-bottom-color:#007bff;color:#007bff}.profile-content{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;padding:30px}.profile-info{display:flex;margin-bottom:30px}.profile-pic-large{border:3px solid #007bff;border-radius:50%;height:120px;margin-right:30px;overflow:hidden;width:120px}.profile-pic-large img{height:100%;object-fit:cover;width:100%}.profile-details h2{color:#333;margin-bottom:5px;margin-top:0}.profile-role{background:#007bff;border-radius:20px;color:#fff;display:inline-block;font-size:.8rem;margin-bottom:10px;padding:3px 10px}.profile-role.superadmin{background:#6f42c1}.profile-joined{color:#666;font-size:.9rem}.password-change{margin:0 auto;max-width:500px}.password-change h2{color:#333;margin-bottom:20px;margin-top:0;text-align:center}.admin-layout{background:#f5f7fa;display:flex;min-height:100vh}.admin-sidebar{background:linear-gradient(180deg,#1a1a2e,#16213e);display:flex;flex-direction:column;flex-shrink:0;width:260px}.admin-sidebar-header{border-bottom:1px solid #ffffff1a;padding:25px 20px}.admin-sidebar-header h2{color:#fff;font-size:1.4rem;font-weight:600;margin:0}.admin-nav{flex:1 1;overflow-y:auto;padding:15px 0}.admin-nav-item{align-items:center;background:#0000;border:none;color:#ffffffb3;cursor:pointer;display:flex;font-size:.95rem;padding:12px 20px;position:relative;text-align:left;transition:all .2s ease;width:100%}.admin-nav-item:hover{background:#ffffff14;color:#fff}.admin-nav-item.active{background:#007bff33;border-left:3px solid #007bff;color:#fff}.admin-nav-item .nav-icon{font-size:1.2rem;margin-right:12px;text-align:center;width:24px}.admin-nav-item .nav-label{flex:1 1}.admin-nav-item .nav-badge{background:#007bff;border-radius:12px;color:#fff;font-size:.75rem;font-weight:600;padding:2px 8px}.admin-nav-item .nav-alert{animation:pulse-alert 2s infinite;background:#dc3545;border-radius:50%;height:8px;width:8px}@keyframes pulse-alert{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.admin-sidebar-footer{border-top:1px solid #ffffff1a;display:flex;flex-direction:column;gap:10px;padding:15px}.admin-back-btn,.admin-logout-btn{border:none;border-radius:5px;cursor:pointer;font-size:.9rem;padding:10px 15px;transition:all .2s;width:100%}.admin-back-btn{background:#ffffff1a;color:#fff}.admin-back-btn:hover{background:#fff3}.admin-logout-btn{background:#dc354533;color:#ff6b6b}.admin-logout-btn:hover{background:#dc35454d}.admin-main{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.admin-main-header{background:#fff;border-bottom:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d;padding:20px 30px}.admin-main-header h1{color:#333;font-size:1.5rem;margin:0}.admin-container{margin:0 auto;max-width:1200px;padding:30px}.admin-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;margin-bottom:30px;padding-bottom:20px}.admin-header h1{color:#333;margin:0}.admin-error{background-color:#f8d7da;color:#721c24}.admin-error,.admin-success{border-radius:5px;margin-bottom:20px;padding:10px 15px}.admin-success{background-color:#d4edda;color:#155724}.admin-tabs{border-bottom:1px solid #eee;display:flex;margin-bottom:30px}.admin-content{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;flex:1 1;margin:20px;overflow-y:auto;padding:30px}.rooms-panel{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 2fr}.rooms-list{border-right:1px solid #eee;max-height:70vh;overflow-y:auto;padding-right:20px}.rooms-list h2{color:#333;margin-bottom:20px;margin-top:0}.rooms-list ul{list-style:none;margin:0;padding:0}.rooms-list .room-item{background:#fafafa;border:1px solid #eee;border-radius:8px;cursor:pointer;margin-bottom:10px;padding:12px 15px;transition:all .2s}.rooms-list .room-item:hover{background:#f0f4ff;border-color:#007bff}.rooms-list .room-item.selected{background:#e8f4ff;border-color:#007bff;box-shadow:0 2px 8px #007bff26}.room-item-info{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px}.room-item-info strong{color:#333;font-size:1rem}.room-badges{display:flex;gap:5px}.room-badges .badge{border-radius:12px;font-size:.7rem;font-weight:600;padding:2px 8px}.room-badges .badge.system{background:#6f42c1;color:#fff}.room-badges .badge.private{background:#ffc107;color:#333}.room-badges .badge.password{background:#dc3545;color:#fff}.room-item-meta{color:#666;display:flex;font-size:.85rem;gap:15px}.room-edit{padding-left:10px}.room-edit h2{color:#333;margin-bottom:15px;margin-top:0}.room-info-badges{display:flex;gap:10px;margin-bottom:20px}.room-info-badges .badge{border-radius:15px;font-size:.8rem;padding:4px 12px}.room-info-badges .badge.system{background:#6f42c1;color:#fff}.room-info-badges .badge.owner{background:#28a745;color:#fff}.password-status{align-items:center;display:flex;flex-wrap:wrap;gap:15px;margin-bottom:10px}.password-status .has-password{color:#dc3545;font-weight:500}.users-panel{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 2fr}.users-list{border-right:1px solid #eee;padding-right:20px}.users-list h2{color:#333;margin-bottom:20px;margin-top:0}.users-list ul{list-style:none;margin:0;padding:0}.users-list .user-item{border:1px solid #eee;border-radius:5px;cursor:pointer;margin-bottom:10px;padding:0;transition:all .2s}.users-list .user-item:hover{background:#f8f9fa}.users-list .user-item.selected{background:#e8f4ff;border-color:#007bff}.users-list .user-item-info{align-items:center;display:flex;margin-bottom:5px}.users-list .user-avatar{border:2px solid #007bff;border-radius:50%;flex-shrink:0;height:40px;margin-right:10px;overflow:hidden;width:40px}.users-list .user-item-info strong{flex-grow:1;margin-right:10px}.users-list .user-avatar img{height:100%;object-fit:cover;width:100%}.user-role{background:#007bff;border-radius:20px;color:#fff;display:inline-block;font-size:.7rem;padding:2px 8px}.user-role.superadmin{background:#6f42c1}.user-item-email{color:#666;font-size:.9rem}.user-edit h2{color:#333;margin-bottom:20px;margin-top:0}.password-reset{border-top:1px solid #eee;margin-top:30px;padding-top:20px}.password-reset h3{color:#333;margin-bottom:15px;margin-top:0}.danger-zone{border-top:1px solid #eee;margin-top:30px;padding-top:20px}.danger-zone h3{color:#dc3545;margin-bottom:15px;margin-top:0}.btn-warning{background-color:#ffc107;color:#212529}.btn-warning:hover{background-color:#e0a800}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}.stats-panel h2{color:#333;margin-bottom:30px;margin-top:0;text-align:center}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.stat-card{background:#f8f9fa;border-radius:10px;box-shadow:0 2px 5px #0000001a;padding:20px;text-align:center;transition:all .3s}.stat-card:hover{box-shadow:0 5px 15px #0000001a;transform:translateY(-5px)}.stat-card h3{color:#333;font-size:1rem;margin-bottom:15px;margin-top:0}.stat-value{color:#007bff;font-size:2.5rem;font-weight:700}.admin-loading,.loading-container,.maintenance-container{align-items:center;display:flex;justify-content:center;min-height:100vh}.maintenance-container{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.maintenance-card{background:#fff;border-radius:15px;box-shadow:0 20px 60px #0000004d;max-width:500px;padding:50px 40px;text-align:center;width:100%}.maintenance-icon{color:#667eea;margin-bottom:20px}.maintenance-icon svg{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.maintenance-title{color:#333;font-size:2rem;margin-bottom:15px}.maintenance-message{color:#666;font-size:1.1rem;line-height:1.6;margin-bottom:20px}.maintenance-eta{background:#f0f4ff;border-radius:8px;color:#667eea;margin-bottom:25px;padding:10px 20px}.maintenance-actions{display:flex;gap:15px;justify-content:center;margin-bottom:30px}.admin-bypass-btn{border-color:#764ba2;color:#764ba2}.admin-bypass-btn:hover{background:#764ba2;color:#fff}.maintenance-info{color:#999;font-size:.9rem}.maintenance-info p{margin:5px 0}.maintenance-panel{margin:0 auto;max-width:600px}.maintenance-panel h2{color:#333;margin-bottom:20px;margin-top:0;text-align:center}.maintenance-status{border-radius:10px;margin-bottom:30px;padding:30px;text-align:center}.maintenance-status.active{background:#fff3cd;border:2px solid #ffc107}.maintenance-status.inactive{background:#d4edda;border:2px solid #28a745}.maintenance-status h3{margin-bottom:10px;margin-top:0}.maintenance-status.active h3{color:#856404}.maintenance-status.inactive h3{color:#155724}.maintenance-status p{color:#666;margin:5px 0}.maintenance-form{background:#f8f9fa;border-radius:10px;padding:25px}.maintenance-form h3{color:#333;margin-bottom:20px;margin-top:0}.maintenance-form textarea{min-height:100px;resize:vertical}.maintenance-buttons{display:flex;gap:15px;margin-top:20px}.maintenance-buttons .btn{flex:1 1}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.success-message{background-color:#d4edda;border-radius:5px;color:#155724;margin-bottom:20px;padding:10px;text-align:center}.modal-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.modal-content{background:#fff;border-radius:10px;box-shadow:0 10px 30px #0000004d;max-width:450px;padding:30px;width:90%}.modal-content h3{color:#333;margin-bottom:20px;margin-top:0;text-align:center}.modal-actions{display:flex;gap:15px;margin-top:20px}.modal-actions .btn{flex:1 1}@media (max-width:1024px){.admin-layout{flex-direction:column}.admin-sidebar{flex-direction:row;flex-wrap:wrap;width:100%}.admin-sidebar-header{padding:15px;text-align:center;width:100%}.admin-nav{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:10px}.admin-nav-item{border-radius:5px;padding:8px 15px}.admin-nav-item.active{border-bottom:2px solid #007bff;border-left:none}.admin-nav-item .nav-label{display:none}.admin-nav-item .nav-icon{margin-right:0}.admin-sidebar-footer{flex-direction:row;justify-content:center;width:100%}.admin-back-btn,.admin-logout-btn{padding:8px 20px;width:auto}.rooms-panel{grid-template-columns:1fr}.rooms-list{border-right:none;margin-bottom:20px;max-height:300px;padding-right:0}}@media (max-width:768px){.rooms-panel,.users-panel{grid-template-columns:1fr}.rooms-list,.users-list{border-right:none;margin-bottom:30px;padding-right:0}.profile-info{align-items:center;flex-direction:column;text-align:center}.profile-pic-large{margin-bottom:20px;margin-right:0}.admin-content{margin:10px;padding:20px}.admin-main-header{padding:15px 20px}.room-edit{padding-left:0}}
/*# sourceMappingURL=main.17aa6222.css.map*/