:root{--bg-color: #f4f1ea;--fg-color: #ffffff;--text-color: #3a3a3a;--text-secondary: #7a7a7a;--border-color: #dcdcdc;--primary-color: #2c3e50;--primary-hover: #34495e;--secondary-color: #e0e0e0;--secondary-hover: #d0d0d0;--sent-bg: #34495e;--sent-text: #ffffff;--received-bg: #ecf0f1;--received-text: #3a3a3a;--online-color: #2ecc71;--heading-font: "Playfair Display", serif;--body-font: "Lora", serif;--success-color: #2980b9}[data-theme=dark]{--bg-color: #1a1a1a;--fg-color: #2c2c2c;--text-color: #FFFFFF;--text-secondary: #a0a0a0;--border-color: #444444;--primary-color: #FFFFFF;--primary-hover: #e0e0e0;--secondary-color: #444444;--secondary-hover: #555555;--sent-bg: #3498db;--sent-text: #ffffff;--received-bg: #3a3a3a;--received-text: #FFFFFF}*{box-sizing:border-box;margin:0;padding:0}.app{font-family:var(--body-font);min-height:100vh;width:100vw;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s,color .3s}.main-content{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;padding:0}.centered-card{background:var(--fg-color);padding:40px;border:none;box-shadow:0 5px 15px #0000000d;display:flex;flex-direction:column;gap:20px;width:100%;text-align:center;height:100vh;max-width:100%;border-radius:0;justify-content:center;align-items:center}.centered-card>*{max-width:450px;width:100%}.centered-card h1{font-family:var(--heading-font);margin-bottom:5px}.centered-card p{color:var(--text-secondary);line-height:1.6}input,select,textarea{padding:12px 15px;width:100%;border-radius:4px;border:1px solid var(--border-color);background:var(--fg-color);color:var(--text-color);font-size:16px;font-family:var(--body-font)}textarea{resize:vertical;min-height:100px}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3498db33}.btn{padding:12px 20px;border-radius:4px;border:1px solid transparent;cursor:pointer;font-weight:600;font-size:16px;font-family:var(--body-font);transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 -2px #0000001a}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:active{transform:translateY(1px);box-shadow:none}.btn.primary{background-color:var(--primary-color);color:var(--bg-color);border-color:var(--primary-color)}.btn.primary:hover{background-color:var(--primary-hover)}[data-theme=dark] .btn.primary{color:#1a1a1a}.btn.secondary{background-color:var(--secondary-color);color:var(--text-color);border-color:var(--border-color)}.btn.secondary:hover{background-color:var(--secondary-hover)}.btn.hangup{background-color:#e74c3c;color:#fff;border-color:#c0392b}.btn.btn-small{padding:8px 16px;font-size:14px;gap:6px;border-radius:20px;box-shadow:none;border-width:2px}.btn.btn-small:active{transform:translateY(0)}.btn.btn-small svg{width:16px;height:16px}.lobby-container{position:relative;width:100%;display:flex;flex-direction:column;gap:2rem;height:100vh;overflow-y:auto;padding:2rem}.lobby-header{text-align:center}.lobby-header h1{font-family:var(--heading-font);font-size:2.5rem}.lobby-header p{font-size:1.1rem;color:var(--text-secondary)}.sub-card{background:var(--fg-color);padding:30px;border-radius:4px;border:1px solid var(--border-color);box-shadow:0 5px 15px #0000000d;max-width:900px;width:100%;margin:0 auto}.sub-card h2{font-family:var(--heading-font);margin-bottom:15px;font-size:1.3rem;border-bottom:1px solid var(--border-color);padding-bottom:10px}.sub-card p{margin-bottom:1rem;color:var(--text-secondary)}.room-creation-options{display:flex;gap:2rem;margin-top:1rem;align-items:center;flex-wrap:wrap}.toggle-group{display:flex;border:1px solid var(--border-color);border-radius:4px;overflow:hidden}.toggle-group label{padding:0 10px;align-self:center;font-size:.9rem;color:var(--text-secondary)}.toggle-group button{background:transparent;border:none;padding:8px 12px;cursor:pointer;color:var(--text-color)}.toggle-group button.active{background-color:var(--primary-color);color:var(--bg-color)}[data-theme=dark] .toggle-group button.active{color:#1a1a1a}.checkbox-group{display:flex;align-items:center;gap:8px}.password-input{margin-top:1rem}.chat-container{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--fg-color);border:none;border-radius:0;overflow:hidden}.input-group{display:flex;gap:10px;align-items:center}.input-group input{flex:1}.room-limit-input{width:80px;flex:0 0 80px}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem;margin-top:1rem}.room-card{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;aspect-ratio:1 / 1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;cursor:pointer;transition:all .2s ease;padding:1rem}.room-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #00000014;border-color:var(--primary-color)}.room-avatar{width:60px;height:60px;border-radius:50%;background-color:var(--primary-color);color:var(--bg-color);display:flex;justify-content:center;align-items:center;font-family:var(--heading-font);font-size:2rem;flex-shrink:0}[data-theme=dark] .room-avatar{color:#1a1a1a}.room-name-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px}.room-name-display{font-weight:600;text-align:center}.room-icons{display:flex;gap:6px;color:var(--text-secondary)}.header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0;background:var(--fg-color)}.room-info{display:flex;align-items:center;gap:15px}.room-info h2{font-family:var(--heading-font);font-size:1.5rem;margin:0}.active-users-btn{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text-secondary);cursor:pointer;padding:6px 12px;border-radius:4px;transition:background-color .2s ease;background:none;border:1px solid var(--border-color);font-family:var(--body-font)}.active-users-btn:hover{background-color:var(--secondary-color)}.view-members-chevron{font-size:.7rem;margin-left:4px;transition:transform .2s ease}.active-users-btn:hover .view-members-chevron{transform:translateY(1px)}.online-dot{width:8px;height:8px;background-color:var(--online-color);border-radius:50%}.header-buttons{display:flex;align-items:center;gap:10px}.chat-box{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:15px;max-width:800px;margin:0 auto;width:100%}.empty-chat-message{text-align:center;margin:auto;color:var(--text-secondary)}.message-wrapper{display:flex;flex-direction:column;max-width:70%;position:relative}.message-wrapper:hover .message-actions{opacity:1;pointer-events:auto}.message-wrapper.sent{align-self:flex-end}.message-wrapper.received{align-self:flex-start}.message-wrapper.sent .message-content{flex-direction:row-reverse}.message-wrapper.sent .reactions-display{justify-content:flex-end}.message-wrapper.system{align-self:center;background:#7f8c8d33;padding:5px 10px;border-radius:10px;font-size:.8rem;color:var(--text-secondary);max-width:80%;text-align:center}.message-content{display:flex;align-items:center;gap:8px}.message{padding:10px 15px;border-radius:18px;position:relative}.message-wrapper.sent .message{background-color:var(--sent-bg);color:var(--sent-text);border-bottom-right-radius:4px}.message-wrapper.received .message{background-color:var(--received-bg);color:var(--received-text);border-bottom-left-radius:4px;box-shadow:0 1px 1px #0000000d}.sender-name{font-weight:600;font-size:.8rem;margin-bottom:4px}.message-wrapper.sent .sender-name{color:#fffc}.message-wrapper.received .sender-name{color:var(--text-secondary)}.message-text,.system-message-text{word-wrap:break-word;white-space:pre-wrap;line-height:1.5}.message-text a{color:var(--primary-color);text-decoration:underline}[data-theme=dark] .message-text a{color:var(--text-color)}.timestamp{font-size:.7rem;margin-top:5px;text-align:right;opacity:.7}.input-area{border-top:1px solid var(--border-color);background:var(--fg-color);flex-shrink:0;padding-top:5px}.input-box{display:flex;padding:0 15px 15px;gap:10px;max-width:800px;margin:0 auto;width:100%;align-items:center}.input-box input{flex:1}.send-btn{background-color:transparent;color:var(--primary-color);padding:0 15px;border:none;box-shadow:none}.send-btn:hover{color:var(--primary-hover)}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:3000;padding:1rem}.button-group{display:flex;justify-content:center;gap:1rem;width:100%;margin-top:1rem}.button-group .btn.secondary{margin-top:0}.members-modal{position:relative;background:var(--fg-color);padding:30px;border-radius:4px;width:100%;max-width:500px;box-shadow:0 5px 20px #0003;max-height:90vh;overflow-y:auto}.members-modal.modal-generic{padding-top:50px}.members-modal h2{font-family:var(--heading-font);text-align:center;margin-bottom:20px}.members-list{list-style:none;display:flex;flex-direction:column;gap:15px}.members-list li{display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--bg-color);border-radius:4px}.member-actions{display:flex;gap:5px}.kick-btn{background-color:#e74c3c;color:#fff;padding:5px 10px;font-size:14px;box-shadow:none;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #c0392b}.notification-toast{position:fixed;top:20px;right:20px;color:#fff;padding:15px 20px;border-radius:4px;box-shadow:0 5px 15px #0003;z-index:4000;animation:slide-in .3s ease-out}.notification-toast.error{background-color:#e74c3c}.notification-toast.success{background-color:var(--success-color)}@keyframes slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.close-modal-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:24px;color:var(--text-secondary);cursor:pointer;line-height:1}.modal-list{text-align:left;margin-left:20px;display:flex;flex-direction:column;gap:10px;color:var(--text-secondary)}.modal-list li strong{color:var(--text-color)}.report-form{display:flex;flex-direction:column;gap:15px;margin-top:20px;text-align:left}.reactions-display{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap}.reaction-tag{background-color:var(--secondary-color);color:var(--text-secondary);font-size:.8rem;padding:3px 8px;border-radius:10px;cursor:pointer;border:1px solid transparent}.reaction-tag.reacted{background-color:var(--success-color);color:#fff;border-color:#2980b9}.typing-indicator{font-size:.9rem;color:var(--text-secondary);padding:0 15px 5px;font-style:italic;max-width:800px;margin:0 auto;width:100%;height:20px}.menu-container{position:relative}.menu-btn{padding:8px;background-color:transparent;border:none;box-shadow:none;color:var(--text-secondary)}.menu-btn:hover{background-color:var(--secondary-color);color:var(--text-color)}.header-menu{position:absolute;top:100%;right:0;background-color:var(--fg-color);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 5px 15px #0000001a;z-index:200;display:flex;flex-direction:column;padding:5px}.header-menu button{background:none;border:none;padding:10px 20px;text-align:left;width:100%;cursor:pointer;font-size:15px;color:var(--text-color);display:flex;align-items:center;gap:8px}.header-menu button:hover{background-color:var(--secondary-color)}.message-actions{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:4px;background-color:var(--fg-color);border-radius:15px;padding:4px;box-shadow:0 2px 5px #0000001a;opacity:0;transition:all .2s ease;pointer-events:none;z-index:10}.message-wrapper.sent .message-actions{left:0;transform:translate(calc(-100% - 10px),-50%)}.message-wrapper.received .message-actions{right:0;transform:translate(calc(100% + 10px),-50%)}.message-actions button{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:4px;display:flex;align-items:center;justify-content:center}.message-actions button:hover{color:var(--primary-color)}.emoji-picker-container{position:relative}.emoji-picker{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:10px;width:320px;background-color:var(--fg-color);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 5px 15px #00000026;z-index:11;padding:10px}.emoji-picker h3{font-size:1rem;font-family:var(--body-font);color:var(--text-secondary);margin-bottom:10px}.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.emoji-grid button{font-size:1.5rem;padding:5px;line-height:1;border-radius:4px;background:none;border:none;cursor:pointer;transition:background-color .2s}.emoji-grid button:hover{background-color:var(--secondary-color)}.reply-context{padding:8px;margin-bottom:6px;border-left:3px solid var(--primary-color);background-color:#0000000d;border-radius:4px;font-size:.9em;opacity:.8}.message-wrapper.sent .reply-context{background-color:#ffffff1a;border-left-color:#ecf0f1}.reply-context-sender{font-weight:600}.reply-context-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;font-size:.9em}.reply-preview{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background-color:var(--secondary-color);border-bottom:1px solid var(--border-color);max-width:800px;margin:0 auto;width:100%}.reply-preview-content{font-size:.9rem;color:var(--text-secondary);overflow:hidden}.reply-preview-content strong{color:var(--text-color)}.reply-preview-content p{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.close-reply-btn{background:none;border:none;font-size:24px;font-weight:300;color:var(--text-secondary);cursor:pointer;line-height:1;padding-left:15px}.app-logo-name-screen{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 20px;display:block}.app-logo-lobby{width:100px;height:100px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block}.app-logo-chat-header{width:40px;height:40px;border-radius:50%;object-fit:cover}.emoji-btn{background:none;border:none;box-shadow:none;padding:8px;color:var(--text-secondary)}.emoji-btn:hover{color:var(--primary-color);background-color:var(--secondary-color)}.message-edit-input{width:100%;padding:8px;border-radius:4px;border:1px solid var(--primary-color);font-family:var(--body-font);font-size:1rem}.edited-tag{font-size:.7rem;color:var(--text-secondary);margin-left:8px;font-style:italic}.link-preview{margin-top:8px;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;max-width:350px;text-decoration:none;display:block;color:var(--text-color)}.link-preview:hover{border-color:var(--primary-color)}.link-preview-image{width:100%;height:180px;object-fit:cover;background-color:var(--secondary-color)}.link-preview-content{padding:10px}.link-preview-title{font-weight:600;font-size:.9rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.link-preview-description{font-size:.8rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.link-preview-url{font-size:.7rem;color:var(--text-color);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline}.theme-toggle-btn{position:absolute;top:1.5rem;right:1.5rem;padding:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10}.voice-container{background-color:var(--bg-color)}.voice-room-body{display:flex;flex-direction:column;align-items:center;flex-grow:1;padding:2rem;text-align:center;overflow-y:auto}.voice-disclaimer{font-size:.8rem;color:var(--text-secondary);font-style:italic;margin-bottom:1rem}.voice-members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem;width:100%;max-width:1000px;margin-bottom:2rem}.voice-member-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background-color:var(--fg-color);padding:1.5rem 1rem;border-radius:8px;border:1px solid var(--border-color);box-shadow:0 2px 4px #0000000d}.voice-member-card.speaking{border-color:var(--online-color);box-shadow:0 0 10px var(--online-color)}.voice-member-avatar{width:70px;height:70px;border-radius:50%;background-color:var(--primary-color);color:var(--bg-color);display:flex;justify-content:center;align-items:center;font-family:var(--heading-font);font-size:2.5rem;margin-bottom:.5rem}.voice-member-status{color:var(--text-secondary);height:24px}.voice-controls{display:flex;gap:1rem;padding:1.5rem;border-top:1px solid var(--border-color);background-color:var(--fg-color);width:100%;justify-content:center}.voice-btn{border-radius:50px;padding:15px 25px;font-size:1rem;box-shadow:0 4px 10px #0000001a}.voice-notifications{position:absolute;top:1rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:.5rem;z-index:10}.voice-notification-item{background-color:#000000b3;color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;animation:fade-in-out 4s forwards}@keyframes fade-in-out{0%{opacity:0;transform:translateY(-20px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.member-options-container{position:absolute;top:8px;right:8px}.member-options-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:5px;border-radius:50%}.member-options-btn:hover{background-color:var(--secondary-color)}.member-options-menu{position:absolute;top:100%;right:0;background-color:var(--fg-color);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 5px 15px #0000001a;z-index:200;display:flex;flex-direction:column;padding:5px;width:150px}.member-options-menu button{background:none;border:none;padding:10px 15px;text-align:left;width:100%;cursor:pointer;font-size:14px;color:var(--text-color);display:flex;align-items:center;gap:8px}.member-options-menu button:hover{background-color:var(--secondary-color)}@media (max-width: 768px){.lobby-container{padding:5rem 1rem 1rem}.theme-toggle-btn{top:1rem;right:1rem}.sub-card{padding:20px}.room-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.message-wrapper{max-width:85%}.reply-context-text{max-width:180px}}