.messages-container::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:var(--muted-background-color)}.sidebar::-webkit-scrollbar-track{background:var(--muted-background-color)}.messages-container::-webkit-scrollbar-thumb{background:var(--muted-color);border-radius:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--muted-color);border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background:var(--primary)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--primary)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.app-header{gap:.5rem;padding:.75rem 1rem}.header-actions .header-label{display:none}.hamburger-btn{align-items:center;display:inline-flex}.sidebar{z-index:100;width:280px;max-width:82vw;padding-top:4.75rem;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:4px 0 16px #00000026}.sidebar.open{transform:translate(0)}.sidebar-backdrop{display:block}.messages-container{padding:1rem}.message{max-width:85%}.input-area{padding:.75rem 1rem}.input-area input{padding:.875rem 1rem}.input-area button{padding:.875rem 1.25rem}.header-btn{padding:.5rem .6rem}}.auth-screen{height:var(--app-height,100dvh);background:linear-gradient(135deg,#1095c1 0%,#08769b 100%);justify-content:center;align-items:center;padding:1rem;display:flex}.auth-card{background:var(--background-color);border-radius:16px;width:100%;max-width:380px;padding:2rem;box-shadow:0 20px 50px #00000040}.auth-card h2{text-align:center;margin:0}.auth-tabs{background:var(--muted-background-color);border-radius:8px;margin-bottom:1.25rem;padding:4px;display:flex}.auth-tabs button{cursor:pointer;color:var(--muted-color);background:0 0;border:none;border-radius:6px;flex:1;padding:.6rem;font-weight:600}.auth-tabs button.active{background:var(--background-color);color:var(--primary);box-shadow:0 1px 3px #0000001a}.auth-submit{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;width:100%;margin-top:.5rem;padding:.8rem;font-weight:600;display:flex}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-hint{color:var(--muted-color);margin:.25rem 0 1rem;font-size:.8rem}.auth-error{color:#e74c3c;margin:.5rem 0;font-size:.85rem}.invite-code{letter-spacing:2px;background:var(--muted-background-color);cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;margin-top:.4rem;padding:.5rem .75rem;font-family:monospace;font-size:1rem;display:flex}.invite-code:hover{background:var(--muted-border-color)}.room-title{font-size:1.1rem;font-weight:700}.sidebar-section{margin-bottom:1rem}.sidebar-section-header{text-transform:uppercase;letter-spacing:.5px;color:var(--muted-color);justify-content:space-between;align-items:center;padding:0 .5rem .5rem;font-size:.8rem;font-weight:700;display:flex}.room-list{margin:0;padding:0;list-style:none}.room-list li{cursor:pointer;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.95rem;transition:background .15s;display:flex}.room-list li:hover{background:var(--muted-background-color)}.room-list li.active{background:var(--primary);color:#fff;font-weight:600}.room-list li.active .room-dot{box-shadow:0 0 0 1px #fff}.room-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;display:inline-block}.new-room-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:1.2rem;font-weight:700;line-height:1;transition:transform .15s,box-shadow .15s;display:flex}.new-room-btn:hover{transform:scale(1.15);box-shadow:0 2px 8px #0003}.room-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.room-settings-icon{opacity:0;cursor:pointer;flex-shrink:0;font-size:.75rem;transition:opacity .15s}.room-list li:hover .room-settings-icon{opacity:.7}.room-list li.active .room-settings-icon{color:#fff;opacity:.9}.room-dot-large{border-radius:50%;flex-shrink:0;width:16px;height:16px;display:inline-block}.color-picker{flex-wrap:wrap;gap:6px;margin-top:.3rem;display:flex}.color-swatch{cursor:pointer;border:3px solid #0000;border-radius:50%;width:28px;height:28px;transition:border-color .15s;display:inline-block}.color-swatch:hover{border-color:var(--muted-border-color)}.color-swatch.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.member-checkbox-list{border:1px solid var(--muted-border-color);border-radius:6px;max-height:180px;margin-top:.3rem;padding:.5rem;overflow-y:auto}.member-checkbox-row{padding:2px 0}.member-checkbox-row label{cursor:pointer;align-items:center;gap:.4rem;font-size:.9rem;display:flex}:root{--primary:#1095c1;--primary-hover:#08769b;--primary-background:#1095c1;--primary-inverse:#fff;--border-color:#e5e7eb;--background-color:#fff;--muted-color:#6b7280;--muted-background-color:#f3f4f6;--muted-border-color:#e5e7eb;--app-height:100dvh}html,body{height:100%}body{height:100dvh;margin:0;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}#app{height:var(--app-height);background-color:var(--background-color);flex-direction:column;display:flex}.app-header{border-bottom:1px solid var(--muted-border-color);background:var(--background-color);z-index:110;flex:none;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex;position:relative;box-shadow:0 1px 3px #0000001a}.app-body{flex:auto;display:flex;overflow:hidden}.sidebar{border-right:1px solid var(--muted-border-color);background:var(--muted-background-color);flex:0 0 280px;padding:1.5rem;overflow-y:auto}.chat-area{background:var(--background-color);flex-direction:column;flex:1;display:flex;overflow:hidden}.messages-container{flex-direction:column;flex:1;gap:1rem;padding:1.5rem;display:flex;overflow-y:auto}.message{word-wrap:break-word;border-radius:12px;max-width:70%;padding:1rem;box-shadow:0 1px 2px #0000001a}.message.mine{background:linear-gradient(135deg, var(--primary-background) 0%, var(--primary-hover) 100%);color:var(--primary-inverse);align-self:flex-end}.message.other{background:var(--background-color);border:1px solid var(--muted-border-color);color:#1f2937;align-self:flex-start}.message-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem;font-size:.75rem;display:flex}.message-user{font-size:.875rem;font-weight:600}.message-time{opacity:.7;font-size:.75rem}.message-text{word-wrap:break-word;white-space:pre-wrap;line-height:1.5}.input-area{border-top:1px solid var(--muted-border-color);background:var(--background-color);flex:none;gap:.75rem;padding:1.25rem 1.5rem;display:flex;box-shadow:0 -1px 3px #0000000d}.input-area input{border:1px solid var(--muted-border-color);border-radius:8px;outline:none;flex:1;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}.input-area input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #1095c11a}.input-area button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:500;transition:background .2s}.input-area button:hover:not(:disabled){background:var(--primary-hover)}.input-area button:disabled{opacity:.5;cursor:not-allowed}.online-users{margin:0;padding:0;list-style:none}.online-users li{border-bottom:1px solid var(--muted-border-color);align-items:center;gap:.75rem;padding:.75rem 0;display:flex}.online-users li:last-child{border-bottom:none}.online-users li:before{content:"";background:#22c55e;border-radius:50%;flex-shrink:0;width:8px;height:8px}.online-label{color:#1f2937;margin-bottom:1rem;font-size:1.125rem;font-weight:700}.username-input{border:1px solid var(--muted-border-color);border-radius:8px;width:100%;max-width:320px;margin-bottom:1rem;padding:.75rem 1rem;font-size:1rem}.messages-container::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:var(--muted-background-color)}.sidebar::-webkit-scrollbar-track{background:var(--muted-background-color)}.messages-container::-webkit-scrollbar-thumb{background:var(--muted-color);border-radius:4px}.sidebar::-webkit-scrollbar-thumb{background:var(--muted-color);border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background:var(--primary)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--primary)}dialog{border:none;border-radius:16px;width:90%;max-width:450px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}dialog::backdrop{background:#00000080}dialog article{padding:2rem}dialog h3{color:#1f2937;margin-top:0;margin-bottom:.5rem}dialog p{color:var(--muted-color);margin-bottom:1.5rem}dialog button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:.75rem 1.5rem;font-size:1rem;font-weight:500}dialog button:disabled{opacity:.5;cursor:not-allowed}.empty-state{text-align:center;color:var(--muted-color);padding:3rem 1rem}.empty-state p{margin:0;font-size:1.125rem}.image-btn{color:var(--muted-color);border:1px solid var(--muted-border-color);cursor:pointer;background:0 0;border-radius:8px;padding:.75rem 1rem;font-size:1.5rem;transition:all .2s}.image-btn:hover:not(:disabled){background:var(--muted-background-color);color:var(--primary);border-color:var(--primary)}.image-btn:disabled{opacity:.5;cursor:not-allowed}.message-image{cursor:pointer;border-radius:8px;max-width:100%;max-height:400px;margin-top:.5rem}.message-image:hover{opacity:.9}.preview-container{text-align:center}.preview-image{border-radius:8px;max-width:100%;max-height:300px;margin-bottom:1rem}.preview-actions{gap:.75rem;display:flex}.preview-actions button{flex:1}.preview-actions button.cancel{background:var(--muted-color)}.preview-actions button.cancel:hover{background:var(--muted-border-color)}.preview-info{color:var(--muted-color);margin-bottom:1rem;font-size:.875rem}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:1rem;height:1rem;animation:.75s linear infinite spin;display:inline-block}.header-actions{align-items:center;gap:.5rem;display:flex}.header-btn{border:1px solid var(--muted-border-color);cursor:pointer;background:0 0;border-radius:8px;padding:.5rem .75rem;font-size:1.125rem;line-height:1;transition:all .2s}.header-btn:hover{background:var(--muted-background-color);border-color:var(--primary)}.header-btn.muted{opacity:.5}.toast-container{z-index:9999;flex-direction:column;gap:.5rem;display:flex;position:fixed;top:1rem;right:1rem}.toast{color:#fff;border-radius:10px;align-items:center;gap:.5rem;max-width:340px;padding:.875rem 1.25rem;font-size:.9rem;animation:.25s ease-out toastIn;display:flex;box-shadow:0 8px 24px #00000026}.toast.error{background:#e74c3c}.toast.success{background:#27ae60}.toast.info{background:#3498db}.settings-row{border-bottom:1px solid var(--muted-border-color);justify-content:space-between;align-items:center;padding:.75rem 0;display:flex}.settings-row:last-of-type{border-bottom:none}.toggle-switch{flex-shrink:0;width:46px;height:26px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background:var(--muted-border-color);border-radius:26px;transition:all .2s;position:absolute;inset:0}.toggle-slider:before{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:all .2s;position:absolute;bottom:3px;left:3px}.toggle-switch input:checked+.toggle-slider{background:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.hamburger-btn{cursor:pointer;color:var(--primary);background:0 0;border:none;border-radius:8px;flex-shrink:0;padding:.25rem .5rem;font-size:1.5rem;line-height:1;display:none}.hamburger-btn:hover{background:var(--muted-background-color)}.sidebar-backdrop{z-index:90;background:#00000073;animation:.2s ease-out fadeIn;display:none;position:fixed;inset:0}@media (width<=768px){.app-header{gap:.5rem;padding:.75rem 1rem}.header-actions .header-label{display:none}.hamburger-btn{align-items:center;display:inline-flex}.sidebar{z-index:100;width:280px;max-width:82vw;padding-top:4.75rem;transition:transform .25s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:4px 0 16px #00000026}.sidebar.open{transform:translate(0)}.sidebar-backdrop{display:block}.messages-container{padding:1rem}.message{max-width:85%}.input-area{padding:.75rem 1rem}.input-area input{padding:.875rem 1rem}.input-area button{padding:.875rem 1.25rem}.header-btn{padding:.5rem .6rem}}