.title{font-family:Barrio,system-ui;font-weight:400;font-style:normal;letter-spacing:.2rem}p{font-family:Zain,sans-serif;font-weight:400;font-style:normal;font-size:1.3rem;color:var(--text-color-secondary);text-align:justify;text-shadow:1px 1px 2px rgba(0,0,0,.1)}body{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:0;font-family:Arial,sans-serif;background:var(--background);background:linear-gradient(to right,var(--background),var(--container-background));height:100vh}#root{width:100%;margin:auto}.chat-container{width:100%;margin:auto;display:flex;flex-direction:column;align-items:center;height:100vh}.success-message,.error-message{display:block;margin-top:10px;font-weight:700;border:none;border-radius:1rem;padding:1rem;text-align:center;box-shadow:0 0 10px #0000001a}a{text-decoration:none;color:var(--highlights)}input[type=checkbox]{border-radius:.25rem;cursor:pointer}*{box-sizing:border-box}:root{--background: #0E0E10;--container-background: #18181b;--container-background-secondary: #1f1f23;--highlights: #9146ff;--highlights-hover: #a970ff;--text-color: #FFFFFF;--text-color-secondary: #b9bbbe;--borders: #2c2f33}h1,h2{margin:0;font-size:1.5rem;font-weight:700;color:var(--highlights)}.login-container,.register-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:400px;padding:2rem;margin:auto;border-radius:2rem}.form-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0;margin-top:100px}form{display:flex;flex-direction:column;gap:10px;padding:1rem;background-color:var(--container-background-secondary);border-radius:2rem;border:1px solid var(--borders);box-shadow:0 0 10px var(--borders)}.create-room-form{width:100%;max-width:600px}label{font-weight:700;color:var(--text-color-secondary)}input[type=text],input[type=number],input[type=password],input[type=email],select{padding:.5rem;border:1px solid var(--borders);border-radius:.5rem;width:100%;background:var(--container-background-secondary);background-color:var(--container-background);color:var(--text-color-secondary);font-size:1rem}input[type=text]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,input[type=email]::placeholder,select::placeholder{color:var(--text-color-secondary);font-style:italic;font-size:1rem}input[type=submit]{background-color:var(--highlights);color:var(--text-color);border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer}input[type=submit]:hover{background-color:var(--highlights-hover)}.rooms{display:flex;flex-direction:column;padding:1rem;width:100%;max-width:600px}.rooms p{font-size:1.2rem;color:var(--text-color-secondary);margin:auto;text-align:justify}.room{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--highlights-hover);cursor:default}button{color:var(--text-color);border:none;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer}.logout-button{background-color:var(--highlights)}.success{background-color:var(--highlights)}.success:hover{background-color:var(--highlights-hover)}.secondary{background-color:var(--container-background-secondary);border:1px solid var(--borders)}.secondary:hover{background-color:var(--borders)}.room-name{font-weight:700;color:var(--highlights)}.btn-actions{display:flex;gap:10px}.success-message{background-color:var(--highlights)}.error-message{background-color:var(--highlights-hover);color:var(--text-color)}.room-info{display:flex;flex-direction:column}.room-owner{font-size:.9rem;color:var(--text-color-secondary);margin:0}.room-owner-username{font-size:.9rem;color:var(--highlights-hover);margin:0}@media (max-width: 600px){.login-container{padding:2rem;border-radius:1rem}.form-container{padding:1rem}}.chat_container{display:flex;flex-direction:column;height:100dvh;width:100%;padding-top:60px;padding-bottom:60px;box-sizing:border-box}.messages_container{display:flex;flex-direction:column;padding:2rem .5rem 1rem;gap:.5rem;overflow-y:auto;flex:1;scroll-behavior:smooth;transition:all .3s ease-in-out}.message{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:10px;padding:1rem;background-color:#f9f9f9;width:fit-content;border-radius:2rem;min-width:140px}.message .profile-image{width:20px;height:20px;border-radius:50%;object-fit:cover;margin-right:8px;align-self:flex-start}.message .user{font-weight:700;color:#333;display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}.message .time{font-size:.8rem;color:#999}.other{border-bottom-left-radius:.2rem;align-self:flex-start}.self{background-color:#e0f7fa;align-self:flex-end;border-bottom-right-radius:.2rem}.message-form{display:flex;position:fixed;width:100%;height:60px;flex-direction:row;border-radius:0;gap:8px;border-top:2px solid var(--lilas-suave);background-color:var(--container-background-secondary);justify-content:center;align-items:center;padding:.5rem;bottom:0}.message-form input[type=text]{flex:1;margin-bottom:.5rem}.message-form input[type=submit]{margin-bottom:.5rem}.system-message{font-style:italic;color:var(--text-color-secondary);margin-bottom:.5rem;background-color:var(--container-background-secondary);padding:.5rem;border-radius:.3rem;text-align:center}@media (max-width: 600px){.messages_container{width:100%;height:calc(100dvh - 120px);box-sizing:border-box}.message-form{padding-bottom:env(safe-area-inset-bottom)}}nav{position:fixed;display:flex;align-items:center;width:100%;height:60px;padding:2rem;background-color:var(--container-background);border-bottom:1px solid var(--borders)}nav .title{position:absolute;left:50%;transform:translate(-50%);color:var(--highlights);margin:0;font-size:1.8rem}.menu-button{display:flex;align-items:center;justify-content:center;margin-left:auto;background-color:transparent;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.menu-button svg{width:24px;height:24px}.menu-button svg g{fill:var(--highlights)}.menu-button:hover{background-color:var(--borders)}.logout-button:hover{background-color:var(--highlights-hover)}.chat-link button{margin-left:auto;background-color:var(--highlights);color:var(--text-color);border:none;padding:8px 16px;border-radius:8px;cursor:pointer;transition:background-color .3s ease}.menu{display:flex;flex-direction:column;position:absolute;top:60px;right:0;background-color:var(--container-background);padding:1rem;border-radius:8px}.inactive{display:none}.menu ul{z-index:1000;display:flex;flex-direction:column;list-style:none;padding:0;margin:0;gap:.2rem}.menu ul li{padding:1rem;color:var(--highlights);border-bottom:1px solid var(--highlights-hover);cursor:pointer}.menu ul li:hover{transform:scale(1.1);border-radius:.2rem;background-color:var(--borders)}.menu ul li a{display:flex;gap:.5rem}.container_form_private{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#00000080}.container_form_private.inactive{display:none}.container_form_private form{background-color:var(--container-background-secondary);padding:2rem;border-radius:8px;box-shadow:0 4px 8px var(--borders);width:300px}.background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080}.container-form-user-profile{padding:5rem 1rem 0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.default-profile-icon{font-size:4rem;color:var(--text-color-secondary);margin:auto}.container-form-user-profile form{width:100%;gap:1rem}.container-form-user-profile form img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:auto}.profile-assets-container{position:absolute;padding:2rem;display:flex;flex-direction:column;gap:10px;justify-content:center;align-items:center;background-color:var(--container-background-secondary);margin-top:20px;border-radius:2rem;box-shadow:0 0 10px var(--borders)}.profile-assets-container.inactive{display:none}.profile-assets{display:flex;z-index:1000;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}.profile-assets img{width:120px;height:120px;border-radius:10%;object-fit:cover;cursor:pointer;border:2px solid transparent;transition:border-color .3s}.profile-assets img:hover{transform:scale(1.1);filter:drop-shadow(0 0 10px var(--borders));transition:.2s all}.profile-assets img.selected{transform:scale(1.1);filter:drop-shadow(0 0 5px var(--highlights-hover));transition:.5s all}.search-page{display:flex;flex-direction:column;align-items:center;height:100vh;margin-top:100px;width:100%;gap:1rem}.search-page p{font-size:1.3rem;color:var(--text-color)}