*{margin:0;padding:0;box-sizing:border-box;font-family:Happy Monkey,system-ui}body{height:100%;background-color:var(--app-bg, rgba(56, 54, 54, 1))}@keyframes spinner-fade{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes spinner-spin{to{transform:rotate(360deg)}}.spinner{border:3px solid;border-radius:50%;border-top-color:transparent;animation:spinner-spin 1s linear infinite,spinner-fade .2s ease-out;border-color:var(--spinner-color, white)}.spinner--small{width:1rem;height:1rem}.spinner--medium{width:1.8rem;height:1.8rem}.spinner--large{width:2.5rem;height:2.5rem}.spinner-centered{margin:0 auto;display:block}.loading-center{display:flex;justify-content:center;align-items:center;height:100vh}.home-page{display:flex;height:100vh;background-color:#383636;overflow-x:hidden}.home-left-panel{flex:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}.home-dog-image{height:30em;max-width:100%;object-fit:contain}.home-right-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em}.h2-login{font-size:2em;color:#fff;font-weight:700;margin-bottom:1em;text-align:center}.home-button{width:13em;height:3em;border:none;border-radius:8px;font-size:1.1em;font-weight:700;cursor:pointer;transition:background-color .3s ease;margin-bottom:1em;font-family:inherit}.guest-btn{padding:.5em;border-radius:15px;font-size:1.2em;font-weight:700;display:flex;justify-content:center;align-items:center;width:10em;cursor:pointer;transition:background-color .3s ease;margin-bottom:1em;font-family:inherit;background-color:#99d9f9;color:#000;text-decoration:none}.logout-button{width:13em;height:3em;border:none;border-radius:8px;font-size:1.1em;font-weight:700;cursor:pointer;transition:background-color .3s ease;margin-bottom:1em;font-family:inherit;background-color:#ad5b5b;color:#fff;margin-top:1em}.logout-button:hover{background-color:#e65353;color:#000}.home-button.primary{background-color:#da9548;color:#000;font-weight:700;font-family:inherit}.nameLabel,.passwordLabel{font-size:1em;color:#9ab5be;margin-bottom:.5em;font-weight:900;width:17em;text-align:left}#name,#password{padding:.75em;border:none;border-radius:4px;font-size:1em;margin-bottom:.5em;background-color:#fff;color:#333;font-family:inherit;width:17em}#password{padding-right:2.5em}.password-input-container{position:relative}.toggle-password-button{position:absolute;right:.5em;bottom:1em;background:none;border:none;cursor:pointer;color:#0f4e7b;font-size:1.2em;display:flex;align-items:center;justify-content:center}.toggle-password-button:hover{color:#000}.error-message{color:#f50808;font-size:.9em;min-height:1.3em;margin-bottom:1em}.home-button.primary:hover:not(:disabled){background-color:#be5f29;color:#fff}.home-button.secondary{background-color:#9ab5be;color:#000;font-weight:700;font-family:inherit}.home-button.secondary:hover:not(:disabled){background-color:#0f4e7b;color:#fff}.home-button.tertiary{background-color:#7d9e6d;color:#000;font-weight:700;font-family:inherit}.home-button.tertiary:hover:not(:disabled){background-color:#547046;color:#fff}.home-button.primary:disabled,.home-button.secondary:disabled,.home-button.tertiary:disabled{background-color:#6c757d;cursor:not-allowed}@media(max-width:768px){.home-page{flex-direction:column;justify-content:center;align-items:center;height:100vh}.home-right-panel{align-items:center;flex:none;padding:.5em}.home-dog-image{height:18em;border-radius:5.5em}.error-message{text-align:center}.nameLabel,.passwordLabel{width:17em}}.dashboard-page{height:100vh;background-color:#383636;display:flex;flex-direction:column;align-items:center}.dashboard-header{display:flex;justify-content:center;align-items:center;padding:1em 2em;background-color:#383636;color:#fff}.dashboard-main{display:flex;flex:1}.sidebar-users,.sidebar-channels{background-color:#383636;display:flex;flex-direction:column;overflow-y:auto;align-items:center}.sidebar-section-header{padding:1em;display:flex;justify-content:center}.section-title-btn{background-color:#504f4f;color:#fff;border:none;padding:1em;cursor:pointer;border-radius:15px;font-size:.9em;font-weight:700;width:10em;text-align:center}.section-title-btn:hover{background-color:#007bffcc}.section-title-btn:after{content:attr(data-arrow);margin-left:auto;font-weight:400}.user-name-btn{background-color:var(--profile-bg);color:var(--profile-text);display:flex;border:none;padding:.5em;cursor:pointer;border-radius:15px;font-size:1.2em;font-weight:700;width:10em;text-decoration:none;justify-content:center}.section-title-btn:hover{background-color:#01416d}.user-name-btn:hover{background-color:#9ab5be;color:#000}.users-list,.channels-list{list-style:none;padding:0;margin:0}.user-link,.channel-link{transition:background-color .2s;text-decoration:none;padding:.5em;cursor:pointer;border-radius:15px;font-size:1.1em;font-weight:700;margin-bottom:.5em;width:17.2em;display:flex;color:inherit;background-color:#000;border:none;justify-content:center;align-items:center}.user-list,.channel-list{display:flex;justify-content:center;align-items:center}.user-item:last-child,.channel-item:last-child{margin-bottom:0}.channel-item{margin-right:.5em;border-radius:15px}.user-item{margin-left:.5em;border-bottom:1px solid rgb(128,128,128);display:flex;border:none}.user-link:hover,.channel-link:hover{background-color:#03596673}.user-name{color:#060606;font-size:1em}.channel-name{color:#fff;font-size:1em}.channel-item.locked .channel-name{color:#ff6b6b}.channel-item.orange .channel-name{color:#c16029}.lock-icon{font-size:1em;margin-left:.5em}.dashboard-content{background-color:#383636;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em;overflow-y:auto;text-align:center}.p-dashboard{color:#ccc;font-size:1.2em}.main-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#ccc;font-size:1.2em}.disabled,.disabled-item{pointer-events:none}@media(max-width:768px){.dashboard-main{flex-direction:column}.dashboard-content{overflow-y:visible}.channel-item{margin-left:.5em}.user-item{margin-right:.5em}.sidebar-users,.sidebar-channels{width:100%;overflow-y:visible}.dashboard-header{padding:.5em 1em}.user-name{font-size:1em}}@media(max-width:480px){.dashboard-content{display:none}.sidebar-users,.sidebar-channels{flex:none;height:fit-content}}.profile-page{display:flex;height:100vh;background-color:#383636;overflow-x:hidden}.profile-left-panel{flex:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}.profile-right-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.profile-h2{color:#fff;font-weight:700}.color-section{color:#fff;font-weight:500;text-align:left;margin-bottom:1.5em;width:30em;font-size:1em}.color-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:1em;margin-bottom:.5em}.color-radio-label{position:relative;display:inline-block;width:4.75em;height:2.5em}.color-radio-label input[type=radio]{opacity:0;position:absolute;cursor:pointer}.color-radio-btn{width:4.75em;height:2.5em;border-radius:50%;border:2px solid transparent;display:block;cursor:pointer;transition:border-color .2s}.color-radio-label input[type=radio]:checked+.color-radio-btn{border:.3em solid #fbfbfb}.color-radio-label input[type=radio]:disabled+.color-radio-btn{opacity:.5;cursor:not-allowed}.color-radio-label:hover input:not(:disabled)+.color-radio-btn{border-color:#fff}.color-input[type=color]{width:15em;height:3em;border:none;border-radius:8px;padding:0;margin-bottom:1.5em;cursor:pointer}.color-input[type=color]:disabled{cursor:not-allowed;opacity:.5}.profile-color-label{margin:1em 0;color:#fcfcfc;font-weight:700}.profile-username{background-color:var(--profile-bg);color:var(--profile-text);display:flex;border:none;padding:.5em;cursor:pointer;border-radius:15px;font-size:1.2em;font-weight:700;width:10em;justify-content:center;margin-bottom:.5em}@media(max-width:768px){.color-palette{grid-template-columns:repeat(3,1fr);gap:1.5em}.color-radio-label,.color-radio-btn{width:4.75em;height:2.5em}.color-section{margin-left:1em;width:18em}.profile-page{flex-direction:column;align-items:center;height:100vh}.profile-left-panel{display:none}}.page-wrapper{width:100%;max-width:900px;margin:0 auto;height:100vh;display:flex;flex-direction:column;justify-content:center}.dm-page{height:90vh;display:flex;flex-direction:column;background-color:#383636}.dm-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:#0003;border-bottom:1px solid #333;color:#fff;border-radius:3em 3em 0 0}.dm-header h1{font-size:1.2rem;margin:0}.dm-header button{background-color:var(--profile-bg);color:var(--profile-text);border:none;padding:.5rem 1rem;border-radius:10px;cursor:pointer}.dm-header button:hover{background-color:#be5f29;color:#fff}.dm-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.message-bubble{padding:.75rem 1rem;border-radius:18px;background-color:#007bff;display:flex;flex-direction:column}.dm-error{padding:1rem;background-color:#ff6b6b;color:#fff;text-align:center}.dm-input-section{display:flex;padding:1rem;background-color:#0003;border-top:1px solid #333;justify-content:center;border-radius:0 0 3em 3em}.message-input{flex:1;padding:.75rem;border:none;border-radius:20px;background-color:#fff;margin-right:.5rem;resize:none;font-size:1rem;max-width:50em}.dm-input-section button{background-color:var(--profile-bg);color:var(--profile-text);border:none;padding:.75rem 1.5rem;border-radius:20px;cursor:pointer;font-weight:700}.dm-input-section button:hover:not(:disabled){background-color:#be5f29;color:#fff}.dm-input-section button:disabled{background-color:#6c757d;cursor:not-allowed}@media(max-width:768px){.dm-header{padding:.5rem 1rem}.dm-header h1{font-size:1rem}.dm-input-section{padding:.5rem}.message-bubble{padding:.5rem .75rem}.message-item{max-width:90%}.page-wrapper{width:100%}.dm-page{height:100vh}.chat-input-section,.chat-header{border-radius:0}}.chat-page{height:90vh;display:flex;flex-direction:column;background-color:#383636;border-radius:5em}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:#0003;border-bottom:1px solid #333;color:#fff;border-radius:3em 3em 0 0}.chat-header h1{font-size:1.2rem;margin:0}.chat-header button{background-color:#da9548;color:#000;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.chat-header button:hover{background-color:#be5f29;color:#fff}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.message-item{align-self:flex-start;max-width:70%}.message-item.sent{align-self:flex-end}.message-bubble p{margin:0 0 .25rem;color:#fff}.message-time{font-size:.8rem;opacity:.7;text-align:right}.no-messages{display:flex;justify-content:center;align-items:center;height:100%;color:#ccc;font-size:1rem}.chat-error{padding:1rem;background-color:#ff6b6b;color:#fff;text-align:center}.chat-input-section{display:flex;padding:1rem;background-color:#0003;border-top:1px solid #333;justify-content:center;border-radius:0 0 3em 3em}.message-input{flex:1;padding:.75rem;border:none;border-radius:20px;background-color:#fff;margin-right:.5rem;resize:none;font-size:1rem}.message-input:disabled{background-color:#ccc}.chat-input-section button{background-color:#da9548;color:#000;border:none;padding:.75rem 1.5rem;border-radius:20px;cursor:pointer;font-weight:700}.chat-input-section button:hover:not(:disabled){background-color:#be5f29;color:#fff}.chat-input-section button:disabled{background-color:#6c757d;cursor:not-allowed}.message-item{display:flex;width:100%;margin-bottom:4px}.message-item.received{justify-content:flex-start}.message-item.sent{justify-content:flex-end}.message-bubble{max-width:70%;padding:.6rem 1rem;border-radius:18px;position:relative;background-color:#2b2b2b;color:#fff}.message-item.sent .message-bubble{background-color:var(--profile-bg);color:var(--profile-text)}.message-item.received .message-bubble:after{content:"";position:absolute;left:-8px;top:10px;width:0;height:0;border-right:10px solid #2b2b2b;border-top:10px solid transparent;border-bottom:10px solid transparent}.message-item.sent .message-bubble:after{content:"";position:absolute;right:-8px;top:10px;width:0;height:0;border-left:10px solid var(--profile-bg);border-top:10px solid transparent;border-bottom:10px solid transparent}.message-item.grouped .message-bubble{border-top-left-radius:6px;border-top-right-radius:6px}.message-item.sent.grouped .message-bubble{border-top-right-radius:6px}.message-item.received.grouped .message-bubble{border-top-left-radius:6px}.message-item.grouped .message-bubble:after{display:none}.message-time{font-size:.75rem;opacity:.7;margin-top:2px;text-align:right}@media(max-width:768px){.chat-header{padding:.5rem 1rem}.chat-header h1{font-size:1rem}.chat-input-section{padding:.5rem}.message-bubble{padding:.5rem .75rem}.message-item{max-width:90%}.chat-page{height:100vh}.chat-input-section,.chat-header{border-radius:0}}