.chat-app{--primary: #7c3aed;--primary-light: #8b5cf6;--secondary: #ec4899;--background: #f9fafb;--sidebar-bg: #ffffff;--message-bg: #ffffff;--your-message-bg: var(--primary);--text-primary: #1f2937;--text-secondary: #6b7280;--text-white: #ffffff;--online-indicator: #10b981;--offline-indicator: #ef4444;--typing-indicator: #f59e0b;--border-radius: 12px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px rgba(0,0,0,.1);--transition: all .2s ease;padding:1rem;display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}.chat-container{display:flex;width:100%;max-width:1200px;height:82vh;background:linear-gradient(to right,#e8f5e9 0% 50%,#e3f2fd 50% 100%);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-lg);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.sidebar{width:260px;background:var(--sidebar-bg);display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.05)}.sidebar-header,.sidebar-footer{padding:.75rem;border-bottom:1px solid rgba(0,0,0,.05)}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(0,0,0,.05);border-bottom:none}.sidebar-body{padding:.75rem;overflow-y:auto;flex:1}.status{font-size:.75rem;padding:.25rem .5rem;border-radius:999px;font-weight:500}.status.online{color:var(--online-indicator);background:#10b9811a}.status.offline{color:var(--offline-indicator);background:#ef44441a}.room-header,.users-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.room-header h3,.users-header h3{margin:0;font-size:.85rem;color:var(--primary);font-weight:600;text-transform:uppercase}.room-header button{background:var(--primary);color:var(--text-white);border:none;border-radius:6px;padding:.25rem .5rem;cursor:pointer;font-size:.75rem;transition:var(--transition)}.room-header button:hover{background:var(--primary-light)}.room-item,.user-item{display:flex;align-items:center;padding:.5rem;margin-bottom:.25rem;border-radius:6px;cursor:pointer;transition:var(--transition);font-size:.85rem}.room-item:hover,.user-item:hover{background:#7c3aed1a}.room-item.active{background:#7c3aed33;font-weight:500}.dot{width:8px;height:8px;border-radius:50%;margin-right:.5rem;background:var(--primary)}.user-online.dot{background:var(--online-indicator)}.room-item .count{margin-left:auto;font-size:.7rem;color:var(--secondary);background:#ec48991a;padding:.1rem .3rem;border-radius:999px}.profile{display:flex;align-items:center}.avatar{width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--text-white);font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:.5rem;font-size:.9rem}.logout-btn{background:none;border:none;color:var(--primary);font-size:.75rem;cursor:pointer;margin-top:.25rem;transition:var(--transition);display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:4px}.logout-btn:hover{color:var(--text-white);background:var(--secondary);transform:scale(1.05)}.logout-btn:active{transform:scale(.98)}.logout-btn svg{width:12px;height:12px;transition:var(--transition)}.logout-btn:hover svg{transform:translate(2px)}.main-chat{flex:1;display:flex;flex-direction:column}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--sidebar-bg);border-bottom:1px solid rgba(0,0,0,.05)}.chat-header h1{margin:0;font-size:1.1rem;color:var(--primary);font-weight:600}.summary{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.messages{flex:1;padding:.75rem;overflow-y:auto;background:linear-gradient(to right,#7e6fc0,#6fc45a);display:flex;flex-direction:column;gap:.75rem;border-radius:25px 20px 20px 15px;box-shadow:inset 0 0 10px #0000001a}.message-row{display:flex;width:100%}.message-row.you{justify-content:flex-end}.message-row.other{justify-content:flex-start}.message-bubble{max-width:70%;padding:.75rem 1rem;border-radius:1rem;position:relative;word-wrap:break-word;box-shadow:var(--shadow-sm)}.message-row.you .message-bubble{background:var(--your-message-bg);color:var(--text-white);border-bottom-right-radius:.25rem}.message-row.other .message-bubble{background:var(--message-bg);color:var(--text-primary);border-bottom-left-radius:.25rem;border:1px solid rgba(0,0,0,.05)}.msg-user-label{font-size:.7rem;font-weight:600;margin-bottom:.25rem;color:var(--primary)}.message-row.you .msg-user-label{display:none}.msg-text{font-size:.9rem;line-height:1.4}.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:.25rem}.msg-time{font-size:.65rem;opacity:.8}.message-row.you .msg-time{color:#fffc}.message-row.other .msg-time{color:var(--text-secondary)}.read-receipt{font-size:.7rem;color:#fffc}.typing-status{margin-top:.25rem;display:flex;justify-content:flex-end;align-items:center;font-size:.7rem;color:var(--text-secondary)}.typing-indicator{display:flex;gap:3px;margin-left:.25rem}.typing-indicator span{width:5px;height:5px;background:var(--typing-indicator);border-radius:50%;animation:blink 1s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}.chat-input-container{padding:16px 24px;border-top:1px solid #5593e4ff;background-color:#fff}.upload-progress{margin-bottom:12px;padding:8px 12px;background-color:#f7bd49;border-radius:8px;font-size:14px}.upload-progress-bar{height:4px;background-color:#4299e1;border-radius:2px;margin-bottom:4px;transition:width .3s ease}.input-row{display:flex;align-items:center;gap:12px}.file-input-btn{padding:10px;border-radius:50%;border:1px solid #e2e8f0;background-color:#31ee73;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.file-input-btn:hover{background-color:#df3e7e}.input-row input[type=text]{flex:1;padding:12px 16px;border-radius:24px;border:1px solid #e2e8f0;font-size:16px;outline:none;transition:border-color .2s ease}.input-row input[type=text]:focus{border-color:#4299e1}.input-row button:last-child{padding:10px;border-radius:50%;border:none;background-color:#4299e1;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.input-row button:last-child:hover{background-color:#3182ce}.file-input{display:none}.no-messages{text-align:center;color:var(--text-secondary);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;opacity:.6}.no-messages svg{width:2.5rem;height:2.5rem}.no-messages p{margin:0;font-size:.9rem}@keyframes blink{0%,to{opacity:.2}50%{opacity:1}}.file-message-container{border:1px solid #e0e0e0;border-radius:8px;margin-top:8px;overflow:hidden;background-color:#f9f9f9}.file-header{display:flex;align-items:center;padding:10px;border-bottom:1px solid #e0e0e0}.file-icon{font-size:24px;margin-right:10px}.file-info{flex:1}.file-name{font-weight:500;margin-bottom:2px;word-break:break-word}.file-size{font-size:12px;color:#666}.file-actions{display:flex;padding:8px;gap:8px}.file-action-btn{flex:1;padding:6px 12px;border:1px solid #ddd;border-radius:4px;background-color:#fff;cursor:pointer;font-size:13px;transition:all .2s}.file-action-btn:hover{background-color:#f0f0f0}.file-action-btn.primary{background-color:#007bff;color:#fff;border-color:#007bff}.file-action-btn.primary:hover{background-color:#0069d9}.file-action-btn:disabled{opacity:.5;cursor:not-allowed}.file-preview{margin-top:8px;border-top:1px solid #e0e0e0;padding:8px;background-color:#fff}.file-preview-image{max-width:100%;max-height:200px;border-radius:4px;cursor:pointer}.file-preview-video,.file-preview-audio{width:100%;border-radius:4px}.file-preview-pdf{width:100%;height:300px;border:none}.context-menu{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;min-width:200px;overflow:hidden;z-index:1000;border:1px solid rgba(0,0,0,.08);animation:fadeIn .15s ease-out}.context-menu-item{display:flex;align-items:center;padding:10px 16px;width:100%;border:none;background:none;text-align:left;cursor:pointer;font-size:14px;color:#333;transition:all .2s;gap:8px}.context-menu-item:hover{background:#f5f5f5}.context-menu-item:active{background:#ebebeb}.context-menu-item svg{width:16px;height:16px}.context-menu-divider{height:1px;background:#00000014;margin:4px 0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1024px){.chat-app{padding:.75rem}.chat-container{height:85vh}}@media (max-width: 768px){.chat-container{height:90vh;flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid rgba(0,0,0,.05)}.sidebar-body{max-height:120px}.messages{padding-bottom:70px}.chat-input-container{position:sticky;bottom:0;padding:12px 16px}.input-row{gap:8px}.file-input-btn,.input-row button:last-child{padding:8px}.input-row input[type=text]{padding:10px 14px;font-size:14px}}@media (max-width: 480px){.chat-app{padding:.5rem}.chat-container{height:95vh}.messages{padding:.5rem;padding-bottom:75px}.chat-input-container{padding:10px 12px}.input-row input[type=text]{padding:8px 12px}}@media (max-width: 336px),(max-height: 521px){.chat-input-container{padding:10px 12px}.input-row{flex-wrap:nowrap}.file-input-btn,.input-row button:last-child{min-width:44px;padding:8px}.input-row input[type=text]{min-width:120px;padding:8px 12px;font-size:14px}}.password-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.password-modal{background:linear-gradient(to right,#4caf50,#2196f3);border-radius:8px;padding:20px;width:350px;max-width:calc(100vw - 40px);box-sizing:border-box;box-shadow:0 4px 6px #0000001a;color:#fff}.password-modal h3{margin-top:0;color:#fff;font-size:1.2rem;margin-bottom:15px;text-align:center;padding:0 10px}.password-modal input{width:calc(100% - 6px);padding:12px 15px;margin:0 0 15px;border:1px solid rgba(255,255,255,.3);border-radius:6px;background-color:#ffffff1a;color:#fff;font-size:1rem;box-sizing:border-box}.password-modal input::placeholder{color:#ffffffb3}.password-modal input:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px #fff3}.password-error{color:#fdd;margin:-10px 0 15px;font-size:.9rem;text-align:center;padding:0 10px}.password-modal-buttons{display:flex;justify-content:space-between;gap:10px;padding:0 5px}.password-modal-buttons button{padding:10px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease;flex:1;font-size:.95rem}.password-modal-buttons button:first-child{background-color:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}.password-modal-buttons button:first-child:hover{background-color:#f44!important;border-color:#f44!important;color:#fff!important}.password-modal-buttons button:last-child{background-color:#fff;color:#2196f3;font-weight:600}.password-modal-buttons button:last-child:hover{background-color:#f44!important;color:#fff!important}@media (max-width: 480px){.password-modal{width:calc(100vw - 30px);padding:15px}.password-modal h3{font-size:1.1rem}.password-modal input{width:calc(100% - 24px);padding:10px 12px}.password-modal-buttons{gap:8px}.password-modal-buttons button{padding:8px 12px}}.create-room-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.create-room-modal{position:relative;width:440px;max-width:90%;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:16px;overflow:hidden;box-shadow:0 20px 40px #00000040;animation:modalFadeIn .3s ease-out}.modal-gradient-bg{position:absolute;top:0;left:0;width:100%;height:8px;background:linear-gradient(90deg,#7c3aed,#6366f1,#8b5cf6)}.modal-content{padding:30px}.create-room-modal h3{margin-top:0;margin-bottom:25px;color:#1e293b;font-size:1.6rem;text-align:center;font-weight:700;background:linear-gradient(90deg,#7c3aed,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:10px;font-weight:600;color:#334155;font-size:.95rem}.form-group input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#fff;box-shadow:0 2px 4px #0000000d}.form-group input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed26}.checkbox-group{margin:24px 0}.checkbox-container{display:flex;align-items:center;position:relative;padding-left:35px;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:500;color:#475569}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:24px;width:24px;background-color:#fff;border:2px solid #cbd5e1;border-radius:6px;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.checkbox-container:hover input~.checkmark{border-color:#7c3aed;background-color:#f8fafc}.checkbox-container input:checked~.checkmark{background-color:#7c3aed;border-color:#7c3aed}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{left:8px;top:4px;width:6px;height:12px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.modal-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:30px}.modal-buttons button{padding:12px 24px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.95rem}.cancel-btn{background:#fff;color:#64748b;border:2px solid #e2e8f0;box-shadow:0 2px 4px #0000000d}.cancel-btn:hover{background:#f8fafc;border-color:#94a3b8;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.create-btn{background:linear-gradient(90deg,#7c3aed,#8b5cf6);color:#fff;border:none;box-shadow:0 4px 6px #7c3aed4d}.create-btn:hover{background:linear-gradient(90deg,#6d28d9,#7c3aed);transform:translateY(-2px);box-shadow:0 6px 12px #7c3aed66}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 720px){.messages{max-height:60vh;padding:.5rem;gap:.5rem;border-radius:15px}}@media (max-width: 540px){.messages{max-height:50vh;padding:.4rem;gap:.4rem;border-radius:12px}}@media (max-width: 480px){.messages{max-height:45vh;padding:.35rem;border-radius:10px}}@media (max-width: 470px){.messages{max-height:40vh;padding:.3rem}}@media (max-width: 200px){.messages{max-height:30vh;padding:.2rem;gap:.2rem;border-radius:8px}}@media (max-width: 720px){.message-bubble{max-width:75%;padding:.6rem .8rem;border-radius:.8rem}}@media (max-width: 540px){.message-bubble{max-width:80%;padding:.5rem .7rem;border-radius:.7rem}}@media (max-width: 480px){.message-bubble{max-width:85%;padding:.4rem .6rem;border-radius:.6rem}}@media (max-width: 470px){.message-bubble{max-width:90%;padding:.35rem .5rem}}@media (max-width: 200px){.message-bubble{max-width:95%;padding:.25rem .4rem;border-radius:.4rem}}.header{width:100%;background:linear-gradient(to right,#0e7f54,#8b5cf6);box-shadow:0 2px 4px #0000000d;border-radius:20px 20px 0 0}.header-container{width:100%;max-width:1200px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;align-items:center}.header-content{display:flex;flex-direction:column;align-items:center}.app-title{font-size:1.8rem;font-weight:600;display:flex;align-items:center;gap:.75rem;margin:0;color:#fff}.header-emoji{animation:pulse 2s infinite}.app-name{text-shadow:0 1px 2px rgba(0,0,0,.1)}.welcome-message{margin-top:.5rem;font-size:.875rem;color:#e0e7ff;background-color:#4f46e54d;padding:.25rem .75rem;border-radius:9999px}.username{font-weight:500}.logout-button{margin-left:.5rem;font-size:.75rem;background-color:#ffffffe6;color:#4f46e5;padding:.25rem .5rem;border-radius:9999px;border:none;cursor:pointer;transition:all .2s ease}.logout-button:hover{background-color:#fff;transform:translateY(-1px)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.footer{width:100%;background:linear-gradient(to right,#1e293b,#0f172a);color:#e2e8f0;padding:1.5rem 0;border-radius:0 0 20px 20px;box-shadow:0 -2px 4px #0000001a;margin-top:auto}.footer-container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}.footer-content{display:flex;flex-direction:column;align-items:center}.footer-divider{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:1rem;width:100%}.divider-line{height:1px;width:5rem;background-color:#334155;flex-grow:1;max-width:4rem}.divider-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;flex-shrink:0}.footer-info{text-align:center}.copyright{font-size:.875rem;margin:0;color:#cbd5e1}.footer-links{display:flex;justify-content:center;gap:1rem;margin:.5rem 0;font-size:.75rem}.footer-link{color:#94a3b8;text-decoration:none;transition:all .3s ease}.footer-link:hover{color:#3dec3a;transform:scale(1.25);text-decoration:underline;font-style:italic}.footer-message{font-size:.75rem;color:#94a3b8;margin:.5rem 0 0}.designer-credit{margin:.25rem 0 0}.designer-link{font-size:.75rem;color:#94a3b8;text-decoration:none;transition:all .3s ease;display:inline-block}.designer-link:hover{color:#3dec3a;transform:scale(1.25);text-decoration:underline;font-style:italic}.divider-text:hover{color:#5fb717;transform:scale(1.175);text-decoration:underline;font-style:italic;cursor:pointer}.layout{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#f1f5f9)}.main-content{flex-grow:1;width:100%;max-width:1200px;margin:0 auto;padding:0}@media (min-width: 768px){.main-content{padding:0}}