:root{--primary:#3b82f6;--primary-dark:#1e40af;--primary-light:#60a5fa;--accent:#f72585;--light:#f8f9fa;--dark:#212529;--gray:#6c757d;--light-gray:#e9ecef;--border-radius:24px;--shadow:0 4px 6px rgba(0,0,0,0.1);--transition:all 0.3s ease;--mention-bg:#e3f2fd;--mention-text:#1976d2;--mention-border:#90caf9;--mention-hover-bg:#bbdefb;--message-group-spacing:0.25rem;--message-group-radius:18px;--media-sidebar-width:280px;--media-sidebar-bg:#f8fafc;--media-sidebar-border:#e2e8f0;--media-item-hover:#e0f2fe;--media-item-selected:#bae6fd}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI','Microsoft YaHei',sans-serif;background:#666;color:var(--dark);line-height:1.6;height:100vh;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#chat-messages{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}#chat-messages *{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}#message-input{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}.message .content{user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text}header{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));color:white;padding:1rem;text-align:center;box-shadow:var(--shadow);position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.header-content{flex:1}header h1{font-size:1.25rem;font-weight:600;margin:0}.user-info{display:flex;align-items:center;gap:0.5rem}#username-display{font-size:0.9rem;font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#edit-username{background:none;border:none;color:white;cursor:pointer;font-size:0.9rem;transition:var(--transition);opacity:0.8}#edit-username:hover{opacity:1}#img-folder-link{display:inline-flex;align-items:center;padding:0.2rem 0.5rem;background-color:rgba(255,255,255,0.2);color:white;font-size:0.8rem;font-weight:500;border-radius:12px;text-decoration:none;transition:var(--transition);cursor:pointer;backdrop-filter:blur(4px)}#img-folder-link:hover{background-color:rgba(255,255,255,0.2);transform:none;box-shadow:none}@media (max-width:480px){#img-folder-link{padding:0.15rem 0.4rem;font-size:0.75rem}.modal-content{width:95%;padding:15px}.modal-buttons{flex-direction:column;gap:8px}.modal-buttons button{width:100%;padding:10px}#room-name-input{width:100%;padding:10px;font-size:1rem}}#chat-container{flex:1;display:flex;flex-direction:row;width:100%;max-width:1200px;margin:0 auto;padding:1rem;overflow:hidden;position:relative}@media (max-width:768px){#chat-container{padding:0.5rem}.controls-row.buttons-row{gap:10px;padding:0 15px}.volume-btn{width:40px;height:40px;font-size:16px}}@media (max-width:480px){#chat-container{padding:0.25rem}.controls-row.buttons-row{gap:8px;padding:0 10px}.volume-btn{width:35px;height:35px;font-size:14px}}.chat-main{flex:1;display:flex;flex-direction:column;height:100%;margin-right:1rem}#chat-messages{flex:1;overflow-y:auto;padding:1rem 0.5rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:0.75rem;position:relative;border:2px solid rgba(255,255,255,0.5);border-radius:var(--border-radius);background-color:rgba(255,255,255,0.85);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}#chat-messages::-webkit-scrollbar-button:start:decrement,#chat-messages::-webkit-scrollbar-button:end:increment{display:none}#chat-messages::-webkit-scrollbar{width:10px;background:transparent}#chat-messages::-webkit-scrollbar-track{background:rgba(255,255,255,0.3);border-radius:5px;margin:20px 0;box-shadow:inset 0 0 4px rgba(0,0,0,0.1)}#chat-messages::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.6);border-radius:5px;transition:background 0.3s ease;border:2px solid rgba(255,255,255,0.3)}#chat-messages::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,0.8)}#chat-messages::-webkit-scrollbar-thumb:vertical{border-radius:5px}#chat-messages{scrollbar-width:thin;scrollbar-color:rgba(59,130,246,0.6) rgba(255,255,255,0.3)}.message{max-width:85%;padding:0.75rem 1rem;border-radius:var(--border-radius);position:relative;word-break:break-word;animation:fadeIn 0.3s ease;box-shadow:var(--shadow);transition:var(--transition);margin-bottom:var(--message-group-spacing);line-height:1.5}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.self{align-self:flex-end;background-color:var(--primary);color:white;border-bottom-right-radius:8px}.message.other{align-self:flex-start;background-color:white;border-bottom-left-radius:8px}.message-group-first.self{border-top-right-radius:var(--message-group-radius)}.message-group-first.other{border-top-left-radius:var(--message-group-radius)}.message-group-middle.self,.message-group-middle.other{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-top:0}.message-group-last.self{border-bottom-right-radius:var(--message-group-radius);margin-bottom:var(--message-group-spacing)}.message-group-last.other{border-bottom-left-radius:var(--message-group-radius);margin-bottom:var(--message-group-spacing)}.message-group-single.self{border-top-right-radius:var(--message-group-radius);border-bottom-right-radius:var(--message-group-radius)}.message-group-single.other{border-top-left-radius:var(--message-group-radius);border-bottom-left-radius:var(--message-group-radius)}.message-group-middle .user,.message-group-last .user{display:none}.message-group-middle .timestamp,.message-group-last .timestamp{display:none}.message.other::before{content:'';position:absolute;left:-8px;top:30%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white;filter:drop-shadow(-1px 0px 0.5px rgba(0,0,0,0.1));border-radius:1px}.message.self::before{content:'';position:absolute;right:-8px;top:30%;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid var(--primary);filter:drop-shadow(1px 0px 0.5px rgba(0,0,0,0.1));border-radius:1px}.message-group-middle{margin-top:2px;margin-bottom:2px}.message-group-first{margin-top:10px}.message.sending{opacity:0.7;position:relative}.message.sending::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:shimmer 1.5s infinite;pointer-events:none}.message.error{border:2px solid #ff4444;background-color:#fff5f5}.message.error .status-indicator{color:#ff4444}.message.error .timestamp{color:#ff4444}.message .user{font-weight:600;margin-bottom:0.25rem;font-size:0.85rem;display:flex;align-items:center;gap:0.3rem;cursor:pointer}.message .timestamp{font-size:0.7rem;opacity:0.7;margin-top:0.25rem;text-align:right}.message.self .user{color:rgba(255,255,255,0.9)}.message .status-indicator{font-size:0.7rem;opacity:0.8}.message .content{line-height:1.5;margin:0;font-size:0.95rem}.message .content a{color:#1e88e5;text-decoration:none;word-break:break-all;border-bottom:1px dashed #1e88e5;padding:0 0 1px 18px;transition:none;position:relative}.message .content a::before{content:"🔗";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:14px}.message .content a:hover{color:#1e88e5;border-bottom:1px dashed #1e88e5;background-color:transparent;padding:0 0 1px 18px;border-radius:0;transition:none}.message.self .content a{color:#bbdefb;border-bottom:1px dashed #bbdefb;padding:0 0 1px 18px;transition:none;position:relative}.message.self .content a::before{content:"🔗";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:14px}.message.self .content a:hover{color:#bbdefb;border-bottom:1px dashed #bbdefb;background-color:transparent;padding:0 0 1px 18px;border-radius:0;transition:none}.message .content a.file-link{display:inline-flex;align-items:center;padding:6px 12px 6px 30px;color:white !important;text-decoration:none;border-radius:20px;font-size:14px;font-weight:500;box-shadow:0 2px 6px rgba(0,0,0,0.3);transition:none;margin:2px 0;position:relative}.message .content a.file-link::before{margin-right:6px;position:absolute;left:12px;top:50%;transform:translateY(-50%)}.message .content a.file-link:hover{transform:none;box-shadow:0 2px 6px rgba(0,0,0,0.3);transition:none}.message .content a.file-link::before{margin-right:6px;font-size:16px;position:absolute;left:12px;top:50%;transform:translateY(-50%)}.message .content a.file-link.tj-link{background:linear-gradient(135deg,#10b981,#059669);padding-left:30px}.message .content a.file-link.tj-link:hover{background:linear-gradient(135deg,#10b981,#059669);transform:none;box-shadow:0 2px 6px rgba(0,0,0,0.3);border-radius:20px;padding:6px 12px 6px 30px;transition:none}.message .content a.file-link.tj-link::before{content:"🔗";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px}.message.self .content a.file-link.tj-link{background:linear-gradient(135deg,#6ee7b7,#10b981)}.message.self .content a.file-link.tj-link:hover{background:linear-gradient(135deg,#6ee7b7,#10b981);transform:none;box-shadow:0 2px 6px rgba(0,0,0,0.3);border-radius:20px;padding:6px 12px 6px 30px;transition:none}.message .content a.file-link.unknown{background:linear-gradient(135deg,#94a3b8,#64748b)}.message .content a.file-link.unknown:hover{background:linear-gradient(135deg,#94a3b8,#64748b);transform:none;box-shadow:0 2px 6px rgba(0,0,0,0.3);border-radius:20px;padding:6px 12px;transition:none}.message .content a.file-link.unknown::before{content:"📁"}.message.self .content a.file-link.unknown{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}.message.self .content a.file-link.unknown:hover{background:linear-gradient(135deg,#cbd5e1,#94a3b8);transform:none;box-shadow:0 2px 6px rgba(0,0,0,0.3);border-radius:20px;padding:6px 12px;transition:none}.message .timestamp{font-size:0.7rem;opacity:0.7;margin-top:0.5rem;text-align:right}.media-container{position:relative;margin-top:0.5rem;border-radius:12px;overflow:hidden;cursor:pointer}.chat-image{max-width:100%;max-height:300px;border-radius:12px;display:block;object-fit:cover;transition:var(--transition)}#message-form-container{background-color:white;padding:0.75rem;border-radius:var(--border-radius);box-shadow:var(--shadow);width:100%}@media (max-width:768px){#message-form-container{padding:0.5rem}}@media (max-width:480px){#message-form-container{padding:0.25rem}}#message-form{position:relative}#input-wrapper{position:relative}#message-input{flex:1;padding:0.75rem 3.5rem 0.75rem 1rem;border:1px solid #ddd;border-radius:var(--border-radius);font-size:1rem;min-height:48px;max-height:120px;resize:none;transition:var(--transition);width:100%;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (max-width:480px){#message-input{min-height:40px;padding:0.5rem 2.5rem 0.5rem 0.75rem;font-size:0.9rem}}#message-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,0.2)}#message-input::placeholder{color:var(--gray);opacity:0.7}.action-buttons{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);display:flex;gap:0.5rem;align-items:center;z-index:10}@media (max-width:480px){.action-buttons{right:0.5rem;gap:0.25rem}}.action-button{background:rgba(255,255,255,0.9);border:none;color:var(--gray);font-size:1.2rem;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition);opacity:0.9}.action-button:hover{background:rgba(0,0,0,0.05);opacity:1;transform:translateY(-2px)}#send-button{background-color:var(--primary);color:white;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);flex-shrink:0}@media (max-width:480px){#send-button{width:32px;height:32px}}#send-button:hover{background-color:var(--primary-dark);transform:scale(1.05)}#send-button:disabled{background-color:var(--gray);cursor:not-allowed;transform:none}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.media-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);display:none;justify-content:center;align-items:center;z-index:2000;opacity:0;transition:opacity 0.3s ease;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box}.media-lightbox.show{opacity:1}.lightbox-content{max-width:90%;max-height:90%;animation:zoomIn 0.3s ease}@keyframes zoomIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}.close-lightbox{display:none !important}.close-lightbox:hover{transform:rotate(90deg);background:rgba(255,0,0,0.9);box-shadow:0 8px 25px rgba(0,0,0,0.8);border-color:white}#file-input{display:none}.image-controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:2002;background:rgba(0,0,0,0.7);padding:10px 15px;border-radius:30px;backdrop-filter:blur(10px)}.image-controls button{background:rgba(255,255,255,0.2);border:none;color:white;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.3s ease}.image-controls button:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.image-zoom-viewer{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);display:none;justify-content:center;align-items:center;z-index:3000;touch-action:none;opacity:0;transition:opacity 0.3s ease;backdrop-filter:blur(5px);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box}.image-zoom-viewer .image-container{position:relative;transform-origin:center center;cursor:grab;max-width:95vw;max-height:95vh;display:flex;align-items:center;justify-content:center}.image-zoom-viewer .image-container img{max-width:95vw;max-height:95vh;object-fit:contain}#image-loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.7);border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2003}#image-loading-indicator .fa-spinner{font-size:24px;margin-bottom:10px}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(3px);animation:fadeIn 0.3s ease}.modal-content{background-color:#fff;margin:15% auto;padding:0;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.3);width:90%;max-width:400px;overflow:hidden;animation:slideIn 0.3s ease;transform:translateY(0)}@keyframes slideIn{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{background:linear-gradient(135deg,var(--primary-light),var(--primary-dark));color:white;padding:20px;text-align:center}.modal-header h2{margin:0;font-size:1.5rem;font-weight:600}.modal-body{padding:25px}.username-input-container{position:relative;margin-bottom:20px}.username-input-container input{width:100%;padding:14px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all 0.3s ease;box-sizing:border-box}.username-input-container input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,0.2)}.username-input-container i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--gray)}.username-input-container input{padding-left:45px}.char-count{text-align:right;font-size:0.85rem;color:var(--gray);margin-top:5px}.char-count.warning{color:#f59e0b}.char-count.error{color:#ef4444}.modal-footer{display:flex;justify-content:space-between;padding:0 25px 25px;gap:15px}.btn{padding:12px 20px;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s ease;border:none;flex:1;text-align:center}.btn-cancel{background-color:#f1f5f9;color:#64748b}.btn-cancel:hover{background-color:#e2e8f0;transform:translateY(-2px)}.btn-confirm{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;box-shadow:0 4px 6px rgba(59,130,246,0.3)}.btn-confirm:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-2px);box-shadow:0 6px 8px rgba(59,130,246,0.4)}.btn-confirm:active{transform:translateY(0)}.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}.modal-error{color:#ef4444;font-size:0.9rem;margin-top:10px;text-align:center;min-height:20px}@media (max-width:480px){.modal-content{margin:20% auto;width:95%}.modal-header{padding:15px}.modal-header h2{font-size:1.3rem}.modal-body{padding:20px}.modal-footer{padding:0 20px 20px;flex-direction:column}.btn{width:100%}}.image-zoom-viewer .image-container img{user-select:none;-webkit-user-drag:none;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px}.image-zoom-viewer .image-container img.dragging{cursor:grabbing}.image-zoom-viewer .close-btn{display:none !important}.image-zoom-viewer .close-btn:hover{background:rgba(255,0,0,0.8);transform:rotate(90deg);box-shadow:0 6px 20px rgba(0,0,0,0.7)}.image-zoom-viewer .image-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom,20px));left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3001;max-width:min(90vw,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));flex-wrap:wrap;justify-content:center;padding:max(10px,env(safe-area-inset-bottom,10px));margin:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box;@media screen and (max-height:500px){bottom:max(10px,env(safe-area-inset-bottom,10px));padding:max(5px,env(safe-area-inset-bottom,5px))}}.image-zoom-viewer .zoom-btn{background:rgba(0,0,0,0.7);border:none;color:white;width:40px;height:40px;border-radius:50%}.media-sidebar{flex:0 0 var(--media-sidebar-width);background:var(--media-sidebar-bg);border-left:1px solid var(--media-sidebar-border);padding:15px;overflow-y:auto;display:flex;flex-direction:column;transition:all 0.3s ease;z-index:10;position:relative;min-width:0}.media-sidebar::-webkit-scrollbar-button:start:decrement,.media-sidebar::-webkit-scrollbar-button:end:increment{display:none}.media-sidebar::-webkit-scrollbar{width:8px;background:transparent}.media-sidebar::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);border-radius:4px;margin:20px 0}.media-sidebar::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:4px;transition:background 0.3s ease}.media-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}.media-sidebar{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.2) rgba(0,0,0,0.05)}.media-sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--media-sidebar-border)}.media-sidebar-header h3{font-size:16px;font-weight:600;color:var(--dark);margin:0}.media-sidebar-toggle{background:none;border:none;color:var(--gray);cursor:pointer;font-size:18px;transition:var(--transition)}.media-sidebar-toggle:hover{color:var(--primary)}.media-items-container{flex:1;overflow-y:auto;display:flex;flex-wrap:wrap;gap:8px;padding:8px;justify-content:flex-start;align-content:flex-start}.media-items-container::-webkit-scrollbar-button:start:decrement,.media-items-container::-webkit-scrollbar-button:end:increment{display:none}.media-items-container::-webkit-scrollbar{width:6px;background:transparent}.media-items-container::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);border-radius:3px;margin:20px 0}.media-items-container::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:3px;transition:background 0.3s ease}.media-items-container::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.3)}.media-items-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,0.2) rgba(0,0,0,0.05)}.media-item{width:50px;height:50px;margin:0;border-radius:4px;cursor:pointer;transition:all 0.3s ease;border:1px solid #e2e8f0;background:white;box-shadow:0 1px 2px rgba(0,0,0,0.05);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.media-item:hover{transform:scale(1.1);z-index:10;box-shadow:0 4px 8px rgba(0,0,0,0.15);border-color:var(--primary)}.media-item.selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}.media-item-thumb{width:100%;height:100%;object-fit:cover;background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:16px}.media-placeholder.media-thumb{width:80px;height:80px;background:linear-gradient(135deg,#2d3748 0%,#4a5568 100%);border:1px solid #ddd;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.3s ease;position:relative;overflow:hidden;box-shadow:inset 0 0 10px rgba(0,0,0,0.05)}.media-item-info{display:none}.media-sidebar-empty{text-align:center;padding:30px 20px;color:var(--gray);width:100%}.media-sidebar-empty i{font-size:48px;margin-bottom:15px;opacity:0.5}.media-sidebar-empty p{margin:0;font-size:14px}.mobile-media-sidebar-toggle{display:none;position:fixed;top:65px;right:5px;width:50px;height:50px;border-radius:50%;background:var(--primary);color:white;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:100;transition:all 0.3s ease}.mobile-media-sidebar-toggle:hover{background:var(--primary-dark);transform:scale(1.1)}@media (max-width:768px){.media-sidebar{display:none}.mobile-media-sidebar-toggle{display:block}.media-sidebar.mobile-visible{display:flex !important;position:fixed;top:130px;left:10px;right:10px;height:70vh;z-index:1000;background:white;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.3);padding:15px;margin:0;border:none}.media-sidebar-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);backdrop-filter:blur(5px);z-index:999;display:none}.media-sidebar.mobile-visible .media-sidebar-overlay{display:block}.media-sidebar.mobile-visible .media-sidebar-header{margin-bottom:15px}.media-sidebar.mobile-visible .media-items-container{gap:10px;padding:10px}.media-sidebar.mobile-visible .media-item{width:60px;height:60px}}#chat-container{flex:1;display:flex;flex-direction:row;width:100%;max-width:1200px;margin:0 auto;padding:1rem;overflow:hidden;position:relative}@media (max-width:768px){#chat-container{padding:0.5rem}}@media (max-width:480px){#chat-container{padding:0.25rem}}.chat-main{flex:1 1 auto;display:flex;flex-direction:column;height:100%;margin-right:1rem;min-width:0}#chat-messages{flex:1;overflow-y:auto;padding:1rem 0.5rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:0.75rem;position:relative;border:2px solid rgba(255,255,255,0.5);border-radius:var(--border-radius);background-color:rgba(255,255,255,0.85);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}.image-zoom-viewer .zoom-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.3s ease;backdrop-filter:blur(10px);box-shadow:0 2px 10px rgba(0,0,0,0.3)}.image-zoom-viewer .zoom-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.1)}.image-zoom-viewer .zoom-btn.close-viewer{background-color:#ff4444 !important;color:white}.image-zoom-viewer .zoom-btn.close-viewer:hover{background-color:#cc0000 !important;transform:scale(1.1)}.image-zoom-viewer .image-counter{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:white;font-size:16px;background:rgba(0,0,0,0.5);padding:5px 15px;border-radius:20px;z-index:3001;backdrop-filter:blur(5px)}#zoom-indicator{position:absolute;top:20px;right:20px;background:rgba(0,0,0,0.7);color:white;padding:5px 10px;border-radius:15px;font-size:14px;z-index:3001;backdrop-filter:blur(5px);animation:fadeInOut 3s ease}@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}@media (max-width:480px){.image-zoom-viewer .image-container{max-width:100vw;max-height:100vh}.image-zoom-viewer .image-container img{max-width:100vw;max-height:100vh}.image-zoom-viewer .close-btn{top:15px;right:15px;width:45px;height:45px;font-size:24px;background:rgba(0,0,0,0.8);border:2px solid rgba(255,255,255,0.95);box-shadow:0 4px 15px rgba(0,0,0,0.6)}.image-zoom-viewer .image-controls{bottom:15px}.image-zoom-viewer .zoom-btn{width:35px;height:35px;font-size:14px}.image-zoom-viewer .image-counter{top:15px;font-size:14px;padding:4px 12px}}#image-loading-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:white;padding:20px;border-radius:10px;z-index:9999;font-size:16px;font-weight:bold;text-align:center;backdrop-filter:blur(5px);box-shadow:0 0 30px rgba(0,0,0,0.5)}#image-loading-indicator .fa-spinner{font-size:24px;margin-bottom:10px}#image-preview-container{display:flex;flex-wrap:wrap;gap:8px;min-height:40px;padding:8px;border-radius:12px;background-color:rgba(248,249,250,0.8);border:1px dashed #dee2e6;margin-top:0.5rem;max-height:200px;overflow-y:auto}.file-preview-item{position:relative;display:inline-block;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.1);transition:all 0.3s ease;cursor:pointer;background:white}.file-preview-item:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}.file-preview-item .preview-thumbnail{display:block;max-width:80px;max-height:80px;object-fit:cover;border-radius:12px}.file-preview-item button{position:absolute;top:4px;right:4px;background:rgba(255,255,255,0.9);border:none;color:#ff4444;width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:10px;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;z-index:10}.file-preview-item button:hover{background:#ff4444;color:white;transform:scale(1.1)}.file-icon-container{width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;padding:8px;text-align:center;background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%)}.file-icon-container i{font-size:28px;color:#1976d2;margin-bottom:6px}.file-icon-container .file-name{font-size:11px;color:#1976d2;word-break:break-word;line-height:1.3;max-height:36px;overflow:hidden}@media (max-width:768px){#image-preview-container{gap:6px;padding:6px;max-height:150px}.file-preview-item .preview-thumbnail,.file-icon-container{max-width:70px;max-height:70px}.file-icon-container i{font-size:24px}.file-icon-container .file-name{font-size:10px}}@media (max-width:480px){#image-preview-container{gap:4px;padding:4px;max-height:120px}.file-preview-item .preview-thumbnail,.file-icon-container{max-width:60px;max-height:60px}.file-icon-container i{font-size:20px}.file-icon-container .file-name{font-size:9px}.file-preview-item button{width:18px;height:18px;font-size:8px}}@media (max-width:768px){#chat-container{padding:0.5rem}.message{max-width:90%}#username-display{max-width:100px}.message-group-first.self,.message-group-single.self{border-top-right-radius:20px;border-bottom-right-radius:6px}.message-group-first.other,.message-group-single.other{border-top-left-radius:20px;border-bottom-left-radius:6px}.message-group-last.self{border-bottom-right-radius:20px}.message-group-last.other{border-bottom-left-radius:20px}.chat-main{margin-right:0;min-width:0}}@media (max-width:480px){header h1{font-size:1.1rem}#message-input{padding-right:3rem;min-height:42px}.action-button,#send-button{width:32px;height:32px;font-size:1.1rem}#username-display{max-width:80px}.message{max-width:85%;padding:0.6rem 0.8rem}.message-group-first.self,.message-group-single.self{border-top-right-radius:18px;border-bottom-right-radius:4px}.message-group-first.other,.message-group-single.other{border-top-left-radius:18px;border-bottom-left-radius:4px}.message-group-last.self{border-bottom-right-radius:18px}.message-group-last.other{border-bottom-left-radius:18px}}.footer{text-align:center;padding:5px;color:#ffffff;font-family:Arial;font-size:14px;margin-top:3px}.multi-upload-panel{position:fixed;top:20px;right:20px;width:350px;max-height:80vh;overflow-y:auto;background:white;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:10000;padding:15px;display:none}.multi-upload-panel h3{margin:0 0 15px 0;font-size:16px;color:#333}.upload-file-list{display:flex;flex-direction:column;gap:10px}.upload-file-item{padding:10px;border:1px solid #eee;border-radius:6px;background:#fafafa}.file-name{font-size:14px;margin-bottom:8px;color:#333;overflow:hidden;text-overflow:ellipsis}.file-status{font-size:12px;margin-bottom:8px;color:#666}.file-progress-container{width:100%;height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden}.file-progress-bar{height:100%;width:0%;background:#4CAF50;transition:width 0.3s}.load-more-container{text-align:center;padding:10px}#load-more-btn{background-color:var(--primary);color:white;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;font-size:0.9rem;transition:var(--transition)}#load-more-btn:hover{background-color:var(--primary-dark);transform:translateY(-2px)}#load-more-btn:disabled{background-color:var(--gray);cursor:not-allowed;transform:none}.loading-indicator{display:none;text-align:center;padding:10px;color:var(--gray)}.loading-indicator.active{display:block}#new-messages-alert{position:absolute;bottom:80px;right:calc(20px + var(--media-sidebar-width));background-color:var(--primary);color:white;border:none;border-radius:20px;padding:8px 16px;cursor:pointer;box-shadow:var(--shadow);z-index:1001;display:none;animation:pulse 2s infinite;transition:var(--transition);font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,0.3)}@media (max-width:768px){#new-messages-alert{right:20px;z-index:1001}}@media (max-width:480px){#new-messages-alert{bottom:70px;right:15px;padding:6px 12px;font-size:0.9rem}}#new-messages-alert:hover{background-color:var(--primary-dark);transform:scale(1.05)}#new-messages-alert:hover{box-shadow:0 4px 12px rgba(59,130,246,0.6)}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(59,130,246,0.4)}50%{transform:scale(1.05);box-shadow:0 0 0 10px rgba(59,130,246,0.2)}100%{transform:scale(1);box-shadow:0 0 0 20px rgba(59,130,246,0)}}#new-messages-alert.pulse{animation:pulse 2s infinite}.media-scroll-container{display:flex;gap:2px;margin:2px 0;overflow-x:auto;overflow-y:hidden;padding:2px 1px 3px 1px;max-width:100%;scrollbar-width:thin;scrollbar-color:#3b82f6 rgba(0,0,0,0.1);background:rgba(59,130,246,0.05);border-radius:12px;border:1px solid rgba(59,130,246,0.1)}.media-scroll-container::-webkit-scrollbar{height:6px}.media-scroll-container::-webkit-scrollbar-track{background:rgba(59,130,246,0.1);border-radius:3px}.media-scroll-container::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:3px;transition:all 0.3s ease}.media-scroll-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#1e40af,#3b82f6)}.media-scroll-item{flex-shrink:0;transition:all 0.3s ease}.media-scroll-item:hover{transform:translateY(-2px)}.media-container.single-media{display:inline-block;margin:1px 0}@media (max-width:768px){.media-scroll-container{gap:6px;padding:6px 3px 10px 3px}}@media (max-width:480px){.media-scroll-container{gap:4px;padding:4px 2px 8px 2px}.media-scroll-item .media-placeholder.media-thumb{width:70px !important;height:70px !important}.media-scroll-item .media-icon{font-size:18px !important}.media-scroll-item .media-label{font-size:9px !important}}@media (max-width:360px){.media-scroll-item .media-placeholder.media-thumb{width:60px !important;height:60px !important}.media-scroll-item .media-icon{font-size:16px !important}.media-scroll-item .media-label{font-size:8px !important}}.chat-image.mosaic-preview{image-rendering:pixelated;filter:blur(1px) brightness(0.85) contrast(1.15);transition:none;transform:none;will-change:auto;backface-visibility:hidden;-webkit-font-smoothing:subpixel-antialiased}.mosaic-preview{image-rendering:pixelated !important;filter:blur(1px) brightness(0.85) contrast(1.15) !important;transition:none !important;transform:none !important;will-change:auto !important;backface-visibility:hidden !important}.video-placeholder{background:linear-gradient(135deg,#374151 0%,#6b7280 100%);border:1px solid #6b7280;transition:all 0.3s ease}.video-placeholder:hover{background:linear-gradient(135deg,#4b5563 0%,#9ca3af 100%);transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.media-placeholder{position:relative;display:inline-block;max-width:100%;cursor:pointer;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#2d3748 0%,#4a5568 100%);transition:var(--transition)}.noty_layout{top:60px !important}.noty_layout .noty_bar{margin-bottom:10px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15)}.media-placeholder img,.media-placeholder video{width:100%;height:auto;max-height:300px;display:block;object-fit:cover;filter:blur(10px) brightness(0.6);transition:filter 0.3s ease}.media-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:2rem;pointer-events:none;opacity:0.9;transition:var(--transition)}.media-placeholder:hover .media-overlay{transform:translate(-50%,-50%) scale(1.1)}.preview-thumbnail{max-width:80px;max-height:80px;border-radius:8px;margin:0.5rem 0;box-shadow:var(--shadow)}.message .status-indicator button{background:none;border:none;color:inherit;cursor:pointer;padding:2px;border-radius:3px;transition:var(--transition)}.message .status-indicator button:hover{background-color:rgba(255,255,255,0.2);transform:scale(1.1)}.media-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:1rem;pointer-events:none;opacity:0.9;transition:var(--transition);background:rgba(0,0,0,0.7);padding:0.5rem 1rem;border-radius:8px;text-align:center}.media-placeholder.media-thumb::before{display:none}.media-placeholder.media-thumb:hover{background:#2d3748 !important;border-color:#ddd}.media-placeholder.media-thumb:hover .media-icon{transform:scale(1.1)}.media-placeholder.media-thumb .media-label{font-size:10px !important;font-weight:600;color:#666;transition:all 0.3s ease;text-align:center;position:relative;z-index:2;letter-spacing:0.3px}.media-placeholder.media-thumb:hover .media-label{transform:translateY(-1px)}.message.mention{background-color:var(--mention-bg);border:1px solid var(--mention-border);position:relative}.message.mention::before{content:"@";position:absolute;top:-8px;left:10px;background:var(--mention-text);color:white;font-size:12px;font-weight:bold;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.2)}.message.mention .content .mention-text{background-color:rgba(25,118,210,0.1);color:var(--mention-text);font-weight:600;padding:0 4px;border-radius:4px}.message.mention .content .mention-text:hover{background-color:var(--mention-hover-bg);cursor:pointer;text-decoration:underline}.message.self.mention{background-color:#bbdefb}.message.self.mention .content .mention-text{background-color:rgba(255,255,255,0.3)}.message.self.mention .content .mention-text:hover{background-color:rgba(255,255,255,0.5);cursor:pointer;text-decoration:underline}.mention-text{cursor:pointer;transition:all 0.2s ease;user-select:text}.mention-text:hover{background-color:var(--mention-hover-bg) !important;text-decoration:underline}.mention-tag{background-color:var(--mention-bg);color:var(--mention-text);font-weight:600;padding:2px 6px;border-radius:12px;margin:0 2px;display:inline-block;vertical-align:middle;user-select:none}.mention-tag:hover{background-color:var(--mention-hover-bg);cursor:pointer}.mention-tag.deletable{position:relative;padding-right:20px}.mention-tag.deletable::after{content:"×";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-weight:bold;font-size:14px;opacity:0.7}.mention-tag.deletable:hover::after{opacity:1}.mention-text{background-color:var(--mention-bg);color:var(--mention-text);font-weight:600;padding:0 4px;border-radius:4px;cursor:pointer}.mention-text:hover{background-color:var(--mention-hover-bg);text-decoration:underline}.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:6px;margin:8px 0;max-width:280px;border-radius:12px;overflow:hidden}.image-grid-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.image-grid-item:hover{transform:scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,0.2)}.grid-image{width:100%;height:100%;object-fit:cover;border-radius:8px;transition:all 0.3s ease}.image-more-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);color:white;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;border-radius:8px;backdrop-filter:blur(2px)}.image-expand-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--primary,#3b82f6);color:white;border:none;border-radius:16px;cursor:pointer;font-size:12px;margin-top:6px;transition:all 0.3s ease;width:fit-content;font-weight:500;box-shadow:0 2px 4px rgba(59,130,246,0.3)}.image-expand-btn:hover{background:var(--primary-dark,#1e40af);transform:translateY(-1px);box-shadow:0 4px 8px rgba(59,130,246,0.4)}.video-container{margin:8px 0;max-width:350px;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.1)}.custom-video-player{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;background:#000;transition:all 0.3s ease}.custom-video-player:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.15)}.link-media-video{width:100%;height:auto;display:block;max-height:250px;object-fit:cover}.video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.4);transition:all 0.3s ease;backdrop-filter:blur(1px)}.custom-video-player:hover .video-overlay{background:rgba(0,0,0,0.6)}.media-icon.play-icon{width:32px;height:32px;border-radius:50%;background:rgb(0 140 243 / 90%);display:flex;align-items:center;justify-content:center;color:var(--primary,#3b82f6);transition:all 0.3s ease;box-shadow:0 2px 6px rgba(0,0,0,0.25)}.media-icon.play-icon::before{content:"";display:block;width:0;height:0;border-top:6px solid transparent;border-left:10px solid white;border-bottom:6px solid transparent;margin-left:2px}.media-icon.play-icon:hover{transform:scale(1.15);background:white;box-shadow:0 4px 12px rgba(0,0,0,0.4)}.media-placeholder.media-thumb::before{display:none}.media-placeholder.media-thumb:hover{background:#2d3748 !important;border-color:#ddd}.image-grid-item .media-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#2d3748 0%,#4a5568 100%);border:none;border-radius:8px;padding:10px;min-height:auto}.image-grid-item .media-placeholder .media-icon{font-size:24px;color:rgba(255,255,255,0.9);margin-bottom:4px}.image-gallery{position:relative;width:90vw;height:90vh;max-width:1200px;max-height:800px}.media-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);display:none;justify-content:center;align-items:center;z-index:2000;opacity:0;transition:opacity 0.3s ease}.gallery-main-image{flex:1;width:100%;object-fit:contain;background:#000}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:18px;color:#333;transition:all 0.3s ease;z-index:10}.gallery-nav:hover{background:white;transform:translateY(-50%) scale(1.1)}.prev-btn{left:20px}.next-btn{right:20px}.gallery-counter{position:absolute;top:20px;right:20px;background:rgba(0,0,0,0.7);color:white;padding:8px 16px;border-radius:20px;font-size:14px;z-index:10}.gallery-thumbnails{display:flex;gap:8px;padding:16px;background:rgba(0,0,0,0.8);overflow-x:auto;scrollbar-width:thin}.gallery-thumbnails::-webkit-scrollbar{height:6px}.gallery-thumbnails::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);border-radius:3px}.gallery-thumbnails::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:3px}.gallery-thumbnail{width:60px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:0.6;transition:all 0.3s ease;flex-shrink:0}.gallery-thumbnail:hover{opacity:0.8;transform:scale(1.05)}.gallery-thumbnail.active{opacity:1;border:2px solid var(--primary-color,#007bff)}.gallery-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom,20px));left:50%;transform:translateX(-50%);display:flex;justify-content:center;z-index:2002;max-width:min(90vw,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));flex-wrap:wrap;padding:max(10px,env(safe-area-inset-bottom,10px));margin:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box;@media screen and (max-height:600px){bottom:max(10px,env(safe-area-inset-bottom,10px));padding:max(5px,env(safe-area-inset-bottom,5px))}}.control-btn.close-media-btn.gallery-close-btn{background-color:#ff4444 !important;color:white;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}.control-btn.close-media-btn.gallery-close-btn:hover{background-color:#cc0000 !important;transform:scale(1.1)}.custom-video-lightbox{position:relative;width:90vw;height:90vh;max-width:1200px;max-height:800px;background:#000;border-radius:12px;overflow:hidden}.lightbox-video{width:100%;height:calc(100% - 60px);object-fit:contain}.video-controls{position:absolute;bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);height:max(60px,calc(60px + env(safe-area-inset-bottom,0px)));background:linear-gradient(transparent,rgba(0,0,0,0.8));display:flex;align-items:center;padding:0 max(20px,env(safe-area-inset-right,20px));gap:15px;box-sizing:border-box;@media screen and (max-height:500px){height:max(40px,calc(40px + env(safe-area-inset-bottom,0px)));padding:0 max(10px,env(safe-area-inset-right,10px));gap:10px}}.control-btn{background:none;border:none;color:white;font-size:18px;cursor:pointer;padding:8px;border-radius:4px;transition:background-color 0.3s ease;@media screen and (max-width:768px){font-size:16px;padding:6px}@media screen and (max-width:480px){font-size:14px;padding:4px}}.control-btn:hover{background:rgba(255,255,255,0.2)}.control-btn.close-media-btn{background-color:#ff4444 !important;color:white;margin-left:10px}.control-btn.close-media-btn:hover{background-color:#cc0000 !important;transform:scale(1.1)}.control-btn.copied{background:rgba(59,130,246,0.7);transform:scale(1.15);box-shadow:0 0 10px rgba(59,130,246,0.5)}.progress-container{flex:1;height:6px;background:rgba(255,255,255,0.3);border-radius:3px;cursor:pointer;position:relative}.progress-bar{height:100%;background:var(--primary-color,#007bff);border-radius:3px;transition:width 0.1s ease}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--primary-color,#007bff);border-radius:50%;cursor:pointer}.time-display{color:white;font-size:14px;min-width:100px;text-align:center}@media (max-width:768px){.image-grid{grid-template-columns:repeat(2,1fr);max-width:250px}.video-container{max-width:100%}.image-gallery{width:95vw;height:95vh}.custom-video-lightbox{width:95vw;height:95vh}.gallery-nav{width:40px;height:40px;font-size:16px}.prev-btn{left:10px}.next-btn{right:10px}.video-controls{padding:8px 15px !important;gap:10px !important}.time-display{font-size:12px;min-width:80px}.volume-slider{width:60px}.controls-row{gap:12px !important}.buttons-row{justify-content:center !important}}@media (max-width:480px){.image-grid{grid-template-columns:repeat(2,1fr);gap:6px;max-width:200px}.image-grid-item{aspect-ratio:1}.media-placeholder{min-height:80px;padding:15px}.media-icon{font-size:24px}.media-label{font-size:12px}.play-button{width:50px;height:50px;font-size:20px}.gallery-thumbnails{padding:12px}.gallery-thumbnail{width:50px;height:50px}}@keyframes newMessageSlideIn{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes newMessagePulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(59,130,246,0.4)}50%{transform:scale(1.02);box-shadow:0 0 0 10px rgba(59,130,246,0.2)}100%{transform:scale(1);box-shadow:0 0 0 20px rgba(59,130,246,0)}}.message.new-message{animation:newMessageSlideIn 0.4s ease-out}.message.new-message.auto-scroll{animation:newMessageSlideIn 0.4s ease-out,newMessagePulse 0.5s ease-out 0.4s}@keyframes fadeInScale{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}.image-grid-item,.video-container,.media-placeholder{animation:fadeInScale 0.3s ease-out}@media (prefers-color-scheme:dark){.media-placeholder{background:linear-gradient(135deg,#2d3748 0%,#4a5568 100%);border-color:#4a5568}.media-placeholder:hover{background:linear-gradient(135deg,#3182ce 0%,#2b6cb0 100%);border-color:#3182ce}.media-label{color:#e2e8f0}.image-expand-btn{background:#3182ce}.image-expand-btn:hover{background:#2b6cb0}}.image-scroll-container{display:flex;gap:12px;margin:12px 0;overflow-x:auto;overflow-y:hidden;padding:8px 4px 12px 4px;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--primary-light,#60a5fa) rgba(0,0,0,0.1);background:linear-gradient(135deg,rgba(59,130,246,0.05) 0%,rgba(147,197,253,0.05) 100%);border-radius:16px;border:1px solid rgba(59,130,246,0.1)}.image-scroll-container::-webkit-scrollbar{height:8px}.image-scroll-container::-webkit-scrollbar-track{background:rgba(59,130,246,0.1);border-radius:4px;margin:0 20px}.image-scroll-container::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--primary,#3b82f6),var(--primary-light,#60a5fa));border-radius:4px;transition:all 0.3s ease}.image-scroll-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,var(--primary-dark,#1e40af),var(--primary,#3b82f6));transform:scaleY(1.2)}.image-scroll-container::-webkit-scrollbar-button:start:decrement,.image-scroll-container::-webkit-scrollbar-button:end:increment{display:none}.image-scroll-item{position:relative;flex-shrink:0;width:100px;height:100px;border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 3px 8px rgba(59,130,246,0.15);border:2px solid rgba(255,255,255,0.8);background:white}.image-scroll-item:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 12px 24px rgba(59,130,246,0.25);border-color:var(--primary,#3b82f6)}.image-scroll-item:active{transform:translateY(-4px) scale(1.02)}.scroll-image{width:100%;height:100%;object-fit:cover;border-radius:14px;transition:all 0.4s ease;filter:brightness(0.95) saturate(1.1)}.image-scroll-item:hover .scroll-image{filter:brightness(1) saturate(1.2);transform:scale(1.1)}.image-scroll-item .media-placeholder.media-thumb{width:100% !important;height:100% !important;background:linear-gradient(135deg,rgba(59,130,246,0.9) 0%,rgba(147,197,253,0.8) 50%,rgba(59,130,246,0.9) 100%) !important;color:white !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;cursor:pointer;border-radius:14px !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;border:none !important;margin:0 !important;padding:12px !important;overflow:hidden;box-shadow:none !important}.image-scroll-item .media-placeholder.media-thumb .media-icon{font-size:36px !important;margin-bottom:8px !important;color:white !important;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);text-shadow:0 2px 4px rgba(0,0,0,0.3);position:relative;z-index:2}.image-scroll-item .media-placeholder.media-thumb:hover .media-icon{transform:scale(1.2) rotate(5deg);text-shadow:0 4px 8px rgba(0,0,0,0.4)}.image-scroll-item .media-placeholder.media-thumb .media-label{font-size:12px !important;color:white !important;font-weight:600;transition:all 0.3s ease;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.3);position:relative;z-index:2;letter-spacing:0.5px}.image-scroll-item .media-placeholder.media-thumb:hover .media-label{transform:translateY(-2px);text-shadow:0 2px 4px rgba(0,0,0,0.4)}.image-more-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(0,0,0,0.8) 0%,rgba(59,130,246,0.9) 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;border-radius:14px;backdrop-filter:blur(4px);transition:all 0.3s ease;z-index:3}.image-scroll-item:hover .image-more-overlay{background:linear-gradient(135deg,rgba(0,0,0,0.9) 0%,rgba(30,64,175,0.95) 100%);transform:scale(1.05)}.image-expand-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,var(--primary,#3b82f6),var(--primary-light,#60a5fa));color:white;border:none;border-radius:25px;cursor:pointer;font-size:13px;font-weight:600;margin-top:12px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);width:fit-content;box-shadow:0 4px 12px rgba(59,130,246,0.3);text-shadow:0 1px 2px rgba(0,0,0,0.2);letter-spacing:0.3px}.image-expand-btn:hover{background:linear-gradient(135deg,var(--primary-dark,#1e40af),var(--primary,#3b82f6));transform:translateY(-2px);box-shadow:0 8px 20px rgba(59,130,246,0.4)}.image-expand-btn:active{transform:translateY(0) scale(1.02)}.image-expand-btn i{transition:transform 0.3s ease}.image-expand-btn:hover i{transform:rotate(90deg) scale(1.1)}.image-gallery{position:relative;width:90vw;height:90vh;max-width:1200px;max-height:800px;display:flex;flex-direction:column;background:rgba(0,0,0,0.9);border-radius:12px;overflow:hidden}.gallery-main-image{flex:1;width:100%;object-fit:contain;background:#000;max-width:100%;max-height:calc(100% - 100px)}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:18px;color:#333;transition:all 0.3s ease;z-index:10}.gallery-nav:hover{background:white;transform:translateY(-50%) scale(1.1)}.prev-btn{left:20px}.next-btn{right:20px}.gallery-counter{position:absolute;top:20px;right:20px;background:rgba(0,0,0,0.7);color:white;padding:8px 16px;border-radius:20px;font-size:14px;z-index:10}.gallery-thumbnails{display:flex;gap:8px;padding:16px;background:rgba(0,0,0,0.8);overflow-x:auto;scrollbar-width:thin;max-height:100px}.gallery-thumbnails::-webkit-scrollbar{height:6px}.gallery-thumbnails::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);border-radius:3px;margin:0 20px}.gallery-thumbnails::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:3px}.gallery-thumbnails::-webkit-scrollbar-button:start:decrement,.gallery-thumbnails::-webkit-scrollbar-button:end:increment{display:none}.gallery-thumbnail{width:60px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:0.6;transition:all 0.3s ease;flex-shrink:0}.gallery-thumbnail:hover{opacity:0.8;transform:scale(1.05)}.gallery-thumbnail.active{opacity:1;border:2px solid var(--primary,#3b82f6)}.custom-video-lightbox{position:relative;width:90vw;height:90vh;max-width:1200px;max-height:800px;background:linear-gradient(145deg,#000 0%,#1a1a1a 100%);border-radius:20px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,0.6),0 10px 40px rgba(59,130,246,0.2),inset 0 1px 0 rgba(255,255,255,0.1);border:3px solid transparent;background-clip:padding-box}.custom-video-lightbox:before{content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;background:linear-gradient(45deg,var(--primary,#3b82f6) 0%,#8b5cf6 25%,#a855f7 50%,#8b5cf6 75%,var(--primary,#3b82f6) 100%);border-radius:23px;z-index:-1;animation:borderGlow 3s ease-in-out infinite alternate}@keyframes borderGlow{0%{opacity:0.5}100%{opacity:0.8}}.lightbox-video{width:100%;height:calc(100% - 80px);object-fit:contain;background:#000;border-radius:17px 17px 0 0}.video-controls{position:absolute;bottom:0;left:0;right:0;height:auto;min-height:80px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.4) 30%,rgba(0,0,0,0.8) 70%,rgba(0,0,0,0.95) 100%);display:flex;flex-direction:column;padding:10px 20px;gap:10px;backdrop-filter:blur(20px) saturate(150%);border-radius:0 0 17px 17px;border-top:1px solid rgba(255,255,255,0.1)}.control-btn{background:linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%);border:2px solid rgba(255,255,255,0.1);color:white;font-size:20px;cursor:pointer;padding:12px;border-radius:50%;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);backdrop-filter:blur(10px);box-shadow:0 4px 15px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1);width:50px;height:50px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.control-btn:hover{background:linear-gradient(145deg,rgba(59,130,246,0.8) 0%,rgba(37,99,235,0.9) 100%);border-color:rgba(255,255,255,0.3);transform:scale(1.1) translateY(-2px);box-shadow:0 0 0 4px rgba(59,130,246,0.3),0 8px 25px rgba(0,0,0,0.3),0 4px 15px rgba(59,130,246,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}.control-btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%);transition:left 0.6s ease}.control-btn:hover:before{left:100%}.progress-container{flex:1;height:10px;background:rgba(255,255,255,0.2);border-radius:5px;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1);transition:all 0.3s ease}.progress-row .progress-container{margin:0 10px}.controls-row{display:flex;align-items:center;gap:15px}.controls-row.buttons-row{justify-content:flex-end;gap:12px;padding:0 20px}.volume-btn{background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.1);color:white;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all 0.3s ease;backdrop-filter:blur(10px);box-shadow:0 4px 15px rgba(0,0,0,0.2)}.volume-btn:hover{background:rgba(59,130,246,0.8);border-color:rgba(255,255,255,0.3);transform:scale(1.1);box-shadow:0 0 0 4px rgba(59,130,246,0.3),0 8px 25px rgba(0,0,0,0.3)}.volume-slider,.volume-bar,.volume-handle{display:none !important;width:0 !important;height:0 !important;opacity:0 !important;visibility:hidden !important}.video-js .vjs-volume-panel,.video-js .vjs-volume-control,.video-js .vjs-volume-bar,.video-js .vjs-volume-level{display:none !important}.progress-row{width:100%}.buttons-row{width:100%}.progress-container:hover{background:rgba(255,255,255,0.25);transform:scaleY(1.2);box-shadow:inset 0 2px 4px rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.1),0 0 10px rgba(59,130,246,0.3)}.progress-bar{height:100%;background:linear-gradient(135deg,var(--primary,#3b82f6) 0%,var(--primary-light,#60a5fa) 50%,#8b5cf6 100%);border-radius:5px;transition:width 0.1s ease;position:relative;box-shadow:0 0 15px rgba(59,130,246,0.6),inset 0 1px 0 rgba(255,255,255,0.3)}.progress-bar:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);animation:progressShine 2s ease-in-out infinite}@keyframes progressShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(248,250,252,0.95) 100%);border-radius:50%;cursor:pointer;box-shadow:0 0 0 3px var(--primary,#3b82f6),0 0 0 6px rgba(59,130,246,0.3),0 4px 12px rgba(0,0,0,0.4);transition:all 0.3s ease;border:2px solid var(--primary,#3b82f6)}.progress-handle:hover{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 4px var(--primary,#3b82f6),0 0 0 8px rgba(59,130,246,0.4),0 0 0 12px rgba(59,130,246,0.2),0 6px 20px rgba(0,0,0,0.5)}.time-display{color:white;font-size:15px;font-weight:600;min-width:120px;text-align:center;background:linear-gradient(145deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 100%);border-radius:20px;padding:8px 16px;border:1px solid rgba(255,255,255,0.1);backdrop-filter:blur(10px);box-shadow:0 4px 15px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);font-family:'Consolas','Monaco',monospace;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,0.7);transition:all 0.3s ease;margin-left:auto}.time-display:hover{background:linear-gradient(145deg,rgba(59,130,246,0.4) 0%,rgba(59,130,246,0.6) 100%);border-color:rgba(255,255,255,0.2);transform:scale(1.05);box-shadow:0 6px 20px rgba(0,0,0,0.4),0 0 0 2px rgba(59,130,246,0.3),inset 0 1px 0 rgba(255,255,255,0.15);text-shadow:0 0 10px rgba(255,255,255,0.8)}.volume-slider{width:100px;height:8px;background:rgba(255,255,255,0.2);border-radius:4px;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.1);transition:all 0.3s ease}.volume-slider:hover{background:rgba(255,255,255,0.25);transform:scaleY(1.3);box-shadow:inset 0 2px 4px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.1),0 0 8px rgba(59,130,246,0.3)}.volume-bar{height:100%;background:linear-gradient(135deg,var(--primary,#3b82f6) 0%,var(--primary-light,#60a5fa) 50%,#8b5cf6 100%);border-radius:4px;transition:width 0.1s ease;position:relative;box-shadow:0 0 10px rgba(59,130,246,0.5),inset 0 1px 0 rgba(255,255,255,0.3)}.volume-bar:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.4) 50%,transparent 100%);animation:volumeShine 2s ease-in-out infinite}@keyframes volumeShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}.volume-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(248,250,252,0.95) 100%);border-radius:50%;cursor:pointer;box-shadow:0 0 0 2px var(--primary,#3b82f6),0 0 0 4px rgba(59,130,246,0.3),0 3px 8px rgba(0,0,0,0.3);transition:all 0.3s ease;border:1px solid var(--primary,#3b82f6)}.volume-handle:hover{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 0 3px var(--primary,#3b82f6),0 0 0 6px rgba(59,130,246,0.4),0 0 0 9px rgba(59,130,246,0.2),0 4px 12px rgba(0,0,0,0.4)}@media (max-width:480px){.image-scroll-container{gap:8px;padding:4px 2px 8px 2px}.image-scroll-item{width:100px;height:100px;border-radius:12px}.image-scroll-item .media-placeholder.media-thumb{border-radius:10px;padding:8px}.image-scroll-item .media-placeholder.media-thumb .media-icon{font-size:24px;margin-bottom:4px}.image-scroll-item .media-placeholder.media-thumb .media-label{font-size:10px}.scroll-image{border-radius:10px}.image-more-overlay{font-size:16px;border-radius:10px}.image-expand-btn{padding:6px 12px;font-size:11px;border-radius:20px}.gallery-thumbnails{padding:12px}.gallery-thumbnail{width:50px;height:50px}}@media (max-width:360px){.image-scroll-item{width:80px;height:80px}.image-scroll-container{gap:6px}.image-expand-btn{padding:5px 10px;font-size:10px}.play-button{width:35px;height:35px;font-size:14px}}.message .media-placeholder.media-thumb{max-width:100% !important;width:80px !important;height:80px !important;min-height:80px !important;box-sizing:border-box !important}.media-container .media-placeholder.media-thumb,.image-scroll-item .media-placeholder.media-thumb{margin:0 !important}.image-scroll-item{position:relative;flex-shrink:0;width:100px;height:100px;border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 3px 8px rgba(59,130,246,0.15);border:2px solid rgba(255,255,255,0.8);background:white;display:flex !important;align-items:center !important;justify-content:center !important}.image-scroll-item>.media-placeholder.media-thumb{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;border-radius:14px !important;display:flex !important;flex-direction:column !important;justify-content:center !important;align-items:center !important;background:linear-gradient(135deg,rgba(59,130,246,0.9) 0%,rgba(147,197,253,0.8) 50%,rgba(59,130,246,0.9) 100%) !important;color:white !important;margin:0 !important;padding:12px !important;box-shadow:none !important;border:none !important}.video-js{font-family:'Segoe UI','Microsoft YaHei',Arial,sans-serif !important;border-radius:20px !important;overflow:hidden !important;box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 20px rgba(59,130,246,0.2) !important;background:linear-gradient(145deg,#0f0f0f 0%,#1a1a1a 30%,#2d2d2d 70%,#3a3a3a 100%) !important;border:3px solid transparent !important;background-clip:padding-box !important;position:relative !important;transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important}.video-js:before{content:'' !important;position:absolute !important;top:-3px !important;left:-3px !important;right:-3px !important;bottom:-3px !important;background:linear-gradient(45deg,var(--primary,#3b82f6) 0%,var(--primary-light,#60a5fa) 25%,#8b5cf6 50%,#a855f7 75%,var(--primary,#3b82f6) 100%) !important;border-radius:23px !important;z-index:-1 !important;opacity:0 !important;transition:opacity 0.5s ease !important}.video-js:hover{transform:translateY(-6px) scale(1.02) !important;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 8px 30px rgba(59,130,246,0.3) !important}.video-js:hover:before{opacity:1 !important}.video-js .vjs-big-play-button{width:100px !important;height:100px !important;border-radius:50% !important;background:linear-gradient(145deg,rgba(255,255,255,0.95) 0%,rgba(240,248,255,0.9) 50%,rgba(255,255,255,0.85) 100%) !important;border:4px solid rgba(59,130,246,0.3) !important;font-size:38px !important;line-height:92px !important;text-align:center !important;left:50% !important;top:50% !important;margin-left:-50px !important;margin-top:-50px !important;transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94) !important;backdrop-filter:blur(20px) saturate(180%) !important;box-shadow:0 0 0 0 rgba(59,130,246,0.4),0 12px 40px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.8),inset 0 -1px 0 rgba(0,0,0,0.1) !important;color:var(--primary,#3b82f6) !important;position:relative !important;overflow:hidden !important}.video-js .vjs-big-play-button:hover{transform:scale(1.2) rotate(10deg) !important;background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(248,250,252,0.95) 50%,rgba(255,255,255,0.9) 100%) !important;border-color:var(--primary,#3b82f6) !important;box-shadow:0 0 0 8px rgba(59,130,246,0.2),0 0 0 16px rgba(59,130,246,0.1),0 20px 60px rgba(0,0,0,0.4),0 8px 30px rgba(59,130,246,0.3),inset 0 2px 4px rgba(255,255,255,0.9),inset 0 -2px 4px rgba(0,0,0,0.05) !important;color:var(--primary-dark,#1e40af) !important;animation:playButtonPulse 2s ease-in-out infinite !important}@keyframes playButtonPulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.4),0 20px 60px rgba(0,0,0,0.4),0 8px 30px rgba(59,130,246,0.3),inset 0 2px 4px rgba(255,255,255,0.9),inset 0 -2px 4px rgba(0,0,0,0.05)}50%{box-shadow:0 0 0 12px rgba(59,130,246,0.3),0 0 0 24px rgba(59,130,246,0.15),0 20px 60px rgba(0,0,0,0.4),0 8px 30px rgba(59,130,246,0.3),inset 0 2px 4px rgba(255,255,255,0.9),inset 0 -2px 4px rgba(0,0,0,0.05)}}.video-js .vjs-big-play-button:before{content:'' !important;position:absolute !important;top:-100% !important;left:-100% !important;width:300% !important;height:300% !important;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.3) 45%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,0.3) 55%,transparent 70%) !important;transform:rotate(45deg) !important;transition:all 0.8s ease !important;opacity:0 !important}.video-js .vjs-big-play-button:hover:before{opacity:1 !important;animation:luxuryShimmer 2s ease-in-out infinite !important}@keyframes luxuryShimmer{0%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}50%{transform:translateX(0%) translateY(0%) rotate(45deg)}100%{transform:translateX(100%) translateY(100%) rotate(45deg)}}.video-js .vjs-control-bar{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.3) 20%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0.95) 100%) !important;height:70px !important;padding:0 25px !important;border-radius:0 0 17px 17px !important;backdrop-filter:blur(20px) saturate(150%) !important;border-top:1px solid rgba(255,255,255,0.1) !important;box-shadow:0 -4px 20px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05) !important;position:relative !important}.video-js .vjs-control-bar:before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;height:2px !important;background:linear-gradient(90deg,transparent 0%,var(--primary,#3b82f6) 20%,var(--primary-light,#60a5fa) 50%,var(--primary,#3b82f6) 80%,transparent 100%) !important;opacity:0.6 !important}.video-js .vjs-play-control{width:55px !important;height:55px !important;border-radius:50% !important;background:linear-gradient(145deg,rgba(59,130,246,0.9) 0%,rgba(37,99,235,1) 50%,rgba(30,64,175,0.95) 100%) !important;margin:7px 12px !important;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;border:2px solid rgba(255,255,255,0.2) !important;box-shadow:0 4px 15px rgba(59,130,246,0.4),0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.2) !important;position:relative !important;overflow:hidden !important}.video-js .vjs-play-control:hover{background:linear-gradient(145deg,rgba(59,130,246,1) 0%,rgba(37,99,235,1) 50%,rgba(29,78,216,1) 100%) !important;transform:scale(1.15) !important;border-color:rgba(255,255,255,0.4) !important;box-shadow:0 0 0 4px rgba(59,130,246,0.3),0 8px 25px rgba(59,130,246,0.5),0 4px 15px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.1) !important}.video-js .vjs-play-control:before{content:'' !important;position:absolute !important;top:0 !important;left:-100% !important;width:100% !important;height:100% !important;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%) !important;transition:left 0.6s ease !important}.video-js .vjs-play-control:hover:before{left:100% !important}.video-js .vjs-progress-control{height:10px !important;border-radius:5px !important;background:rgba(255,255,255,0.15) !important;margin:25px 20px !important;position:relative !important;overflow:hidden !important;box-shadow:inset 0 2px 4px rgba(0,0,0,0.2),0 1px 0 rgba(255,255,255,0.1) !important}.video-js .vjs-progress-holder{height:10px !important;border-radius:5px !important;background:rgba(255,255,255,0.15) !important;position:relative !important;overflow:hidden !important}.video-js .vjs-progress-holder:before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;background:linear-gradient(45deg,transparent 25%,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.05) 50%,transparent 50%,transparent 75%,rgba(255,255,255,0.05) 75%) !important;background-size:20px 20px !important;animation:progressPattern 2s linear infinite !important}@keyframes progressPattern{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}.video-js .vjs-play-progress{background:linear-gradient(135deg,var(--primary,#3b82f6) 0%,var(--primary-light,#60a5fa) 30%,#8b5cf6 60%,var(--primary,#3b82f6) 100%) !important;border-radius:5px !important;height:10px !important;box-shadow:0 0 15px rgba(59,130,246,0.6),0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4) !important;position:relative !important;background-size:30px 30px !important;animation:progressGlow 3s ease-in-out infinite alternate !important}@keyframes progressGlow{0%{box-shadow:0 0 15px rgba(59,130,246,0.6),0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4)}100%{box-shadow:0 0 25px rgba(59,130,246,0.8),0 0 35px rgba(139,92,246,0.4),0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.4)}}.video-js .vjs-play-progress:before{width:20px !important;height:20px !important;border-radius:50% !important;background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(248,250,252,0.95) 100%) !important;box-shadow:0 0 0 3px rgba(59,130,246,0.8),0 0 0 6px rgba(59,130,246,0.4),0 4px 12px rgba(0,0,0,0.4) !important;top:-5px !important;right:-10px !important;border:2px solid var(--primary,#3b82f6) !important;transition:all 0.3s ease !important}.video-js .vjs-progress-control:hover .vjs-play-progress:before{transform:scale(1.3) !important;box-shadow:0 0 0 4px rgba(59,130,246,0.9),0 0 0 8px rgba(59,130,246,0.5),0 0 0 12px rgba(59,130,246,0.2),0 6px 20px rgba(0,0,0,0.5) !important}.video-js .vjs-volume-panel{width:auto !important;transition:all 0.3s ease !important}.video-js .vjs-volume-control{background:linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%) !important;border-radius:25px !important;padding:8px 15px !important;border:1px solid rgba(255,255,255,0.1) !important;backdrop-filter:blur(10px) !important;box-shadow:0 4px 15px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1) !important;transition:all 0.3s ease !important}.video-js .vjs-volume-control:hover{background:linear-gradient(145deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.08) 100%) !important;border-color:rgba(59,130,246,0.3) !important;transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(0,0,0,0.3),0 0 0 2px rgba(59,130,246,0.2),inset 0 1px 0 rgba(255,255,255,0.15) !important}.video-js .vjs-volume-bar{background:rgba(255,255,255,0.25) !important;border-radius:3px !important;height:6px !important;position:relative !important;overflow:hidden !important}.video-js .vjs-volume-bar:before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;background:linear-gradient(45deg,transparent 25%,rgba(255,255,255,0.1) 25%,rgba(255,255,255,0.1) 50%,transparent 50%) !important;background-size:8px 8px !important;animation:volumePattern 1.5s linear infinite !important}@keyframes volumePattern{0%{transform:translateX(-8px)}100%{transform:translateX(8px)}}.video-js .vjs-volume-level{background:linear-gradient(135deg,var(--primary,#3b82f6) 0%,var(--primary-light,#60a5fa) 50%,#8b5cf6 100%) !important;border-radius:3px !important;box-shadow:0 0 8px rgba(59,130,246,0.6),inset 0 1px 0 rgba(255,255,255,0.3) !important;position:relative !important}.video-js .vjs-volume-level:after{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%) !important;animation:volumeShine 2s ease-in-out infinite !important}@keyframes volumeShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}.video-js .vjs-time-control{color:white !important;font-weight:600 !important;font-size:13px !important;text-shadow:0 2px 4px rgba(0,0,0,0.7) !important;padding:8px 16px !important;background:linear-gradient(145deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.3) 100%) !important;border-radius:20px !important;margin:12px 8px !important;line-height:34px !important;height:34px !important;border:1px solid rgba(255,255,255,0.1) !important;backdrop-filter:blur(10px) !important;box-shadow:0 4px 15px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1),inset 0 -1px 0 rgba(0,0,0,0.2) !important;transition:all 0.3s ease !important;font-family:'Consolas','Monaco',monospace !important;letter-spacing:0.5px !important}.video-js .vjs-time-control:hover{background:linear-gradient(145deg,rgba(59,130,246,0.4) 0%,rgba(59,130,246,0.6) 50%,rgba(59,130,246,0.4) 100%) !important;border-color:rgba(255,255,255,0.2) !important;transform:translateY(-1px) scale(1.05) !important;box-shadow:0 6px 20px rgba(0,0,0,0.4),0 0 0 2px rgba(59,130,246,0.3),inset 0 1px 0 rgba(255,255,255,0.15),inset 0 -1px 0 rgba(0,0,0,0.1) !important;text-shadow:0 0 10px rgba(255,255,255,0.8) !important}.video-js .vjs-fullscreen-control{width:50px !important;height:50px !important;border-radius:50% !important;background:linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%) !important;margin:10px 12px !important;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94) !important;border:2px solid rgba(255,255,255,0.1) !important;backdrop-filter:blur(10px) !important;box-shadow:0 4px 15px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1) !important;position:relative !important;overflow:hidden !important}.video-js .vjs-fullscreen-control:hover{background:linear-gradient(145deg,rgba(59,130,246,0.8) 0%,rgba(37,99,235,0.9) 50%,rgba(30,64,175,0.8) 100%) !important;border-color:rgba(255,255,255,0.3) !important;transform:scale(1.15) rotate(5deg) !important;box-shadow:0 0 0 4px rgba(59,130,246,0.3),0 8px 25px rgba(0,0,0,0.3),0 4px 15px rgba(59,130,246,0.4),inset 0 1px 0 rgba(255,255,255,0.2) !important}.video-js .vjs-fullscreen-control:before{content:'' !important;position:absolute !important;top:0 !important;left:-100% !important;width:100% !important;height:100% !important;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%) !important;transition:left 0.6s ease !important}.video-js .vjs-fullscreen-control:hover:before{left:100% !important}.video-js .vjs-loading-spinner{border-color:transparent !important;border-width:0 !important;width:80px !important;height:80px !important;position:relative !important;background:none !important}.video-js .vjs-loading-spinner:before{content:'' !important;position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;border:4px solid transparent !important;border-top:4px solid var(--primary,#3b82f6) !important;border-right:4px solid var(--primary-light,#60a5fa) !important;border-radius:50% !important;animation:spin 1s linear infinite !important;box-shadow:0 0 20px rgba(59,130,246,0.4) !important}.video-js .vjs-loading-spinner:after{content:'' !important;position:absolute !important;top:8px !important;left:8px !important;width:calc(100% - 16px) !important;height:calc(100% - 16px) !important;border:3px solid transparent !important;border-bottom:3px solid #8b5cf6 !important;border-left:3px solid #a855f7 !important;border-radius:50% !important;animation:spin 1.5s linear infinite reverse !important;box-shadow:0 0 15px rgba(139,92,246,0.4) !important}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.video-js .vjs-error-display{background:linear-gradient(145deg,rgba(220,38,38,0.95) 0%,rgba(239,68,68,0.9) 50%,rgba(248,113,113,0.85) 100%) !important;color:white !important;border-radius:16px !important;margin:20px !important;padding:25px !important;backdrop-filter:blur(15px) saturate(150%) !important;border:2px solid rgba(255,255,255,0.2) !important;box-shadow:0 15px 50px rgba(220,38,38,0.4),0 8px 30px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2) !important;text-align:center !important;position:relative !important;overflow:hidden !important}.video-js .vjs-error-display:before{content:'⚠️' !important;font-size:48px !important;display:block !important;margin-bottom:15px !important;animation:errorPulse 2s ease-in-out infinite !important}@keyframes errorPulse{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.1);opacity:1}}.video-js .vjs-poster{border-radius:14px !important;object-fit:cover !important}@media (max-width:768px){.video-js .vjs-big-play-button{width:80px !important;height:80px !important;margin-left:-40px !important;margin-top:-40px !important;font-size:30px !important;line-height:72px !important;border-width:3px !important}.video-js .vjs-control-bar{height:60px !important;padding:0 15px !important}.video-js .vjs-play-control{width:45px !important;height:45px !important;margin:7px 8px !important}.video-js .vjs-time-control{font-size:12px !important;padding:6px 12px !important;margin:12px 6px !important;height:30px !important;line-height:30px !important;min-width:100px !important}.video-js .vjs-fullscreen-control{width:40px !important;height:40px !important;margin:10px 8px !important}.video-js .vjs-progress-control{margin:22px 15px !important;height:8px !important}.video-js .vjs-play-progress:before{width:16px !important;height:16px !important;top:-4px !important;right:-8px !important}.custom-video-lightbox{width:95vw !important;height:95vh !important;border-radius:16px !important}.video-controls{height:70px !important;padding:0 20px !important;gap:15px !important}.control-btn{width:45px !important;height:45px !important;font-size:18px !important;padding:10px !important}.time-display{font-size:13px !important;min-width:100px !important;padding:6px 12px !important}.volume-slider{width:80px !important}.video-overlay .play-button{width:70px !important;height:70px !important;font-size:28px !important;border-width:3px !important}}@media (max-width:480px){.video-js .vjs-big-play-button{width:65px !important;height:65px !important;margin-left:-32px !important;margin-top:-32px !important;font-size:24px !important;line-height:57px !important;border-width:2px !important}.video-js .vjs-control-bar{height:50px !important;padding:0 10px !important}.video-js .vjs-play-control{width:38px !important;height:38px !important;margin:6px !important}.video-js .vjs-time-control{font-size:11px !important;padding:5px 10px !important;margin:10px 4px !important;height:28px !important;line-height:28px !important;min-width:80px !important}.video-js .vjs-fullscreen-control{width:35px !important;height:35px !important;margin:7px 5px !important}.video-js .vjs-progress-control{margin:18px 10px !important;height:6px !important}.video-js .vjs-play-progress:before{width:14px !important;height:14px !important;top:-4px !important;right:-7px !important}.custom-video-lightbox{width:98vw !important;height:98vh !important;border-radius:12px !important}.video-controls{height:auto !important;padding:8px 10px !important;gap:8px !important}.control-btn{width:40px !important;height:40px !important;font-size:16px !important;padding:8px !important}.time-display{font-size:12px !important;min-width:85px !important;padding:5px 10px !important}.volume-slider{width:60px !important;height:6px !important}.video-overlay .play-button{width:60px !important;height:60px !important;font-size:24px !important;border-width:2px !important}.video-js .vjs-error-display{margin:15px !important;padding:20px !important;border-radius:12px !important}.video-js .vjs-error-display:before{font-size:36px !important;margin-bottom:10px !important}.controls-row{gap:10px !important}.buttons-row{justify-content:center !important}.time-display{min-width:80px !important;font-size:12px !important;padding:6px 12px !important}}@media (max-width:360px){.video-js .vjs-big-play-button{width:55px !important;height:55px !important;margin-left:-27px !important;margin-top:-27px !important;font-size:20px !important;line-height:49px !important}.video-js .vjs-control-bar{height:45px !important;padding:0 8px !important}.video-js .vjs-time-control{font-size:10px !important;padding:4px 8px !important;margin:8px 2px !important;height:25px !important;line-height:25px !important;min-width:70px !important}.video-overlay .play-button{width:50px !important;height:50px !important;font-size:20px !important}}.modern-video-container{position:relative;margin:12px 0;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);box-shadow:0 8px 32px rgba(0,0,0,0.3);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);border:2px solid rgba(59,130,246,0.2)}.modern-video-container:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.4);border-color:rgba(59,130,246,0.4)}.video-info-overlay{position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,transparent 100%);color:white;padding:15px 20px;z-index:10;opacity:0;transition:all 0.3s ease;pointer-events:none}.modern-video-container:hover .video-info-overlay{opacity:1}.video-title{font-size:14px;font-weight:600;margin-bottom:5px;text-shadow:0 1px 2px rgba(0,0,0,0.5)}.video-duration{font-size:12px;opacity:0.9;text-shadow:0 1px 2px rgba(0,0,0,0.5)}.video-overlay .play-button{width:90px !important;height:90px !important;border-radius:50% !important;background:rgb(0 140 243 / 90%) !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:35px !important;color:var(--primary,#3b82f6) !important;transition:all 0.6s cubic-bezier(0.25,0.46,0.45,0.94) !important;box-shadow:0 0 0 0 rgba(59,130,246,0.4),0 15px 50px rgba(0,0,0,0.4),0 8px 30px rgba(59,130,246,0.3),inset 0 2px 4px rgba(255,255,255,0.9),inset 0 -2px 4px rgba(0,0,0,0.05) !important;backdrop-filter:blur(20px) saturate(180%) !important;border:4px solid rgba(59,130,246,0.2) !important;position:relative !important;overflow:hidden !important;margin-left:2px !important}.video-overlay .play-button:hover{transform:scale(1.25) rotate(15deg) !important;background:linear-gradient(145deg,rgba(255,255,255,1) 0%,rgba(248,250,252,0.98) 30%,rgba(241,245,249,0.95) 70%,rgba(255,255,255,0.9) 100%) !important;box-shadow:0 0 0 8px rgba(59,130,246,0.3),0 0 0 16px rgba(59,130,246,0.15),0 0 0 24px rgba(59,130,246,0.05),0 25px 80px rgba(0,0,0,0.5),0 15px 50px rgba(59,130,246,0.4),inset 0 3px 6px rgba(255,255,255,0.95),inset 0 -3px 6px rgba(0,0,0,0.03) !important;color:var(--primary-dark,#1e40af) !important;border-color:var(--primary,#3b82f6) !important;animation:playButtonPulse 2s ease-in-out infinite !important}.video-overlay .play-button:before{content:'' !important;position:absolute !important;top:-100% !important;left:-100% !important;width:300% !important;height:300% !important;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.4) 45%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0.4) 55%,transparent 70%) !important;transform:rotate(45deg) !important;transition:all 0.8s ease !important;opacity:0 !important}.video-overlay .play-button:hover:before{opacity:1 !important;animation:luxuryShimmer 2s ease-in-out infinite !important}.custom-video-player{position:relative !important;border-radius:20px !important;overflow:hidden !important;cursor:pointer !important;background:linear-gradient(145deg,#0f0f0f 0%,#1a1a1a 30%,#2d2d2d 70%,#1a1a1a 100%) !important;transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94) !important;border:3px solid transparent !important;background-clip:padding-box !important;box-shadow:0 12px 40px rgba(0,0,0,0.4),0 4px 20px rgba(59,130,246,0.2) !important}.custom-video-player:before{content:'' !important;position:absolute !important;top:-3px !important;left:-3px !important;right:-3px !important;bottom:-3px !important;background:linear-gradient(45deg,var(--primary,#3b82f6) 0%,var(--primary-light,#60a5fa) 25%,#8b5cf6 50%,#a855f7 75%,var(--primary,#3b82f6) 100%) !important;border-radius:23px !important;z-index:-1 !important;opacity:0 !important;transition:opacity 0.5s ease !important}.custom-video-player:hover{transform:translateY(-6px) scale(1.02) !important;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 8px 30px rgba(59,130,246,0.3) !important}.custom-video-player:hover:before{opacity:1 !important}.video-overlay{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;background:linear-gradient(135deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.3) 100%) !important;transition:all 0.4s ease !important;backdrop-filter:blur(3px) saturate(120%) !important;border-radius:17px !important}.custom-video-player:hover .video-overlay{background:linear-gradient(135deg,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0.4) 100%) !important;backdrop-filter:blur(5px) saturate(150%) !important}.video-error-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(239,68,68,0.95),rgba(220,38,38,0.9));color:white;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(10px);border-radius:14px}.error-content{text-align:center;padding:30px;max-width:300px}.error-content i{font-size:48px;margin-bottom:20px;opacity:0.9;animation:pulse 2s infinite}.error-content h3{font-size:20px;font-weight:600;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.error-content p{font-size:14px;opacity:0.9;margin-bottom:20px;line-height:1.5}.retry-btn{background:linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.1));border:2px solid rgba(255,255,255,0.3);color:white;padding:12px 24px;border-radius:25px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.3s ease;backdrop-filter:blur(5px);display:inline-flex;align-items:center;gap:8px}.retry-btn:hover{background:linear-gradient(135deg,rgba(255,255,255,0.3),rgba(255,255,255,0.2));border-color:rgba(255,255,255,0.5);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.retry-btn i{transition:transform 0.3s ease}.retry-btn:hover i{transform:rotate(180deg)}.vjs-pip-control,.vjs-screenshot-control{width:40px !important;height:40px !important;border-radius:50% !important;background:rgba(255,255,255,0.1) !important;margin:10px 5px !important;transition:all 0.3s ease !important;display:flex !important;align-items:center !important;justify-content:center !important}.vjs-pip-control:hover,.vjs-screenshot-control:hover{background:rgba(59,130,246,0.8) !important;transform:scale(1.1) !important}.vjs-pip-control i,.vjs-screenshot-control i{font-size:16px !important;color:white !important}.video-js .vjs-playback-rate .vjs-playback-rate-value{background:rgba(255,255,255,0.1) !important;border-radius:15px !important;padding:5px 10px !important;margin:15px 5px !important;color:white !important;font-weight:500 !important}.video-js .vjs-playback-rate:hover .vjs-playback-rate-value{background:rgba(59,130,246,0.8) !important}.video-js .vjs-menu{background:rgba(0,0,0,0.9) !important;border-radius:12px !important;backdrop-filter:blur(10px) !important;border:1px solid rgba(255,255,255,0.1) !important;box-shadow:0 8px 32px rgba(0,0,0,0.3) !important}.video-js .vjs-menu-item{color:white !important;padding:10px 15px !important;transition:all 0.3s ease !important}.video-js .vjs-menu-item:hover,.video-js .vjs-menu-item.vjs-selected{background:linear-gradient(135deg,var(--primary,#3b82f6),var(--primary-light,#60a5fa)) !important;color:white !important}@media (max-width:480px){.error-content{padding:20px;max-width:250px}.error-content i{font-size:36px;margin-bottom:15px}.error-content h3{font-size:18px;margin-bottom:8px}.error-content p{font-size:13px;margin-bottom:15px}.retry-btn{padding:10px 20px;font-size:13px}.vjs-pip-control,.vjs-screenshot-control{width:35px !important;height:35px !important;margin:7px 3px !important}.vjs-pip-control i,.vjs-screenshot-control i{font-size:14px !important}}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);justify-content:center;align-items:center;z-index:1000;opacity:0;transition:opacity 0.3s ease}.modal.visible{display:flex;opacity:1}.modal-content{background:white;padding:0;border-radius:8px;width:90%;max-width:400px;box-shadow:0 4px 6px rgba(0,0,0,0.1);transform:translateY(-20px);transition:transform 0.3s ease;overflow:hidden}.modal.visible .modal-content{transform:translateY(0)}.modal-header{padding:20px;border-bottom:1px solid #e5e7eb;background-color:#f9fafb}.modal-header h3{margin:0;color:#1f2937;font-size:1.25rem;font-weight:600}.modal-body{padding:20px}#room-input-container{position:relative;display:flex;align-items:center}#room-input-container.hidden{display:none !important}#room-input-container .fas{position:absolute;left:12px;color:#9ca3af;font-size:1rem}#room-name-input{width:100%;padding:12px 12px 12px 40px;border:1px solid #d1d5db;border-radius:6px;font-size:1rem;transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box}#room-name-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}#room-name-input::placeholder{color:#9ca3af}.modal-footer{padding:16px 20px;border-top:1px solid #e5e7eb;background-color:#f9fafb;display:flex;justify-content:flex-end;gap:12px}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-buttons button,.modal-footer button{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:0.875rem;font-weight:500;transition:all 0.2s;min-width:80px}#cancel-room-btn,.btn-cancel{background-color:#e5e7eb;color:#4b5563}#confirm-room-btn,.btn-confirm{background-color:#3b82f6;color:white}#cancel-room-btn:hover,.btn-cancel:hover{background-color:#d1d5db}#confirm-room-btn:hover,.btn-confirm:hover{background-color:#2563eb}.wechat-audio-container{display:inline-block;margin:3px 0}.wechat-audio-player{background:#09bb07;border-radius:3px;padding:6px 8px;display:inline-flex;align-items:center;cursor:pointer;transition:all 0.3s ease;box-shadow:0 1px 2px rgba(0,0,0,0.1);position:relative;overflow:hidden;height:28px;width:fit-content;max-width:120px}.wechat-audio-player:hover{background:#08b006}.wechat-audio-player::before{content:'';position:absolute;left:0;top:0;height:100%;width:3px;background-color:#09bb07}.audio-content{display:flex;align-items:center;width:auto}.audio-play-btn{margin-right:8px}.voice-wave{display:flex;align-items:center;height:18px;width:18px}.voice-wave-bar{width:2px;height:100%;background-color:#fff;margin-right:2px;border-radius:1px}.voice-wave-bar:first-child{height:40%}.voice-wave-bar:nth-child(2){height:70%}.voice-wave-bar:last-child{height:100%;margin-right:0}.voice-wave.playing .voice-wave-bar:first-child{animation:voiceWave 1s infinite 0.1s}.voice-wave.playing .voice-wave-bar:nth-child(2){animation:voiceWave 1s infinite 0.2s}.voice-wave.playing .voice-wave-bar:last-child{animation:voiceWave 1s infinite 0.3s}@keyframes voiceWave{0%,100%{height:40%;transform:translateY(60%)}50%{height:100%;transform:translateY(0)}}@keyframes fadeInOut{0%{opacity:0}100%{opacity:1}}.message.self .wechat-audio-player{background:#9ae19d}.message.self .wechat-audio-player:hover{background:#8ad18d}.message.self .wifi-circle{border-color:#fff}.message.self .wifi-circle.first{background:#fff}.message.self .wechat-audio-player::before{background-color:#9ae19d}