*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:#1a1a2e;color:#eee;min-height:100vh}.app{display:flex;flex-direction:column;height:100vh;max-width:900px;margin:0 auto}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:#16213e;border-bottom:1px solid #0f3460}.app-header h1{font-size:1.5rem;color:#e94560}.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.login-form{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:2rem}.login-form h2{margin-bottom:1.5rem;color:#e94560}.login-form form{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px}.channel-selector{display:flex;flex-direction:column;align-items:center;flex:1;padding:2rem;gap:1.5rem}.channel-selector h2{color:#e94560;margin-bottom:.5rem}.channel-selector .loading,.channel-selector .no-channels{color:#888}.channel-list{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:400px}.channel-list-title,.join-title{color:#aaa;font-size:.875rem;margin-bottom:.5rem}.channel-item{display:block;width:100%;padding:.75rem 1rem;background-color:#16213e;border:1px solid #0f3460;border-radius:4px;color:#eee;text-align:left;cursor:pointer;transition:background-color .2s}.channel-item:hover{background-color:#0f3460;border-color:#e94560}.channel-join-form{width:100%;max-width:400px;margin-top:1rem;padding-top:1rem;border-top:1px solid #0f3460}.channel-selector form{display:flex;gap:.5rem;width:100%}.current-channel{display:flex;align-items:center;gap:1rem;font-size:1.25rem}.chat-container{display:flex;flex-direction:column;flex:1;overflow:hidden}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#16213e;border-bottom:1px solid #0f3460}.channel-info{display:flex;align-items:center;gap:.75rem}.channel-name{font-weight:600;color:#e94560}.status{font-size:.75rem;padding:.25rem .5rem;border-radius:4px}.status.connected{background-color:#2e7d32;color:#fff}.status.disconnected{background-color:#c62828;color:#fff}.user-info{display:flex;align-items:center;gap:1rem}.display-name{color:#aaa}.message-list{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.load-more-btn{align-self:center;padding:.5rem 1rem;background-color:#0f3460;border:none;border-radius:4px;color:#aaa;cursor:pointer;margin-bottom:.5rem}.load-more-btn:hover{background-color:#16213e}.message{max-width:75%;padding:.75rem;background-color:#16213e;border-radius:8px;align-self:flex-start}.message.own-message{align-self:flex-end;background-color:#0f3460}.message-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.25rem}.message-meta{display:flex;align-items:center;gap:.5rem}.unread-badge{font-size:.7rem;padding:.15rem .4rem;border-radius:10px;background-color:#e94560;color:#fff}.sender{font-weight:600;color:#e94560;font-size:.875rem}.timestamp{font-size:.75rem;color:#666}.message-text{word-wrap:break-word;line-height:1.4}.message-input{display:flex;gap:.5rem;padding:1rem;background-color:#16213e;border-top:1px solid #0f3460}.message-input textarea{flex:1;padding:.75rem;border:1px solid #0f3460;border-radius:4px;background-color:#1a1a2e;color:#eee;font-family:inherit;font-size:1rem;resize:none;min-height:44px;max-height:120px}.message-input textarea:focus{outline:none;border-color:#e94560}input[type=text]{flex:1;padding:.75rem;border:1px solid #0f3460;border-radius:4px;background-color:#1a1a2e;color:#eee;font-size:1rem}input[type=text]:focus{outline:none;border-color:#e94560}button{padding:.75rem 1.5rem;border:none;border-radius:4px;background-color:#e94560;color:#fff;font-size:1rem;cursor:pointer;transition:background-color .2s}button:hover:not(:disabled){background-color:#d63350}button:disabled{opacity:.5;cursor:not-allowed}.leave-btn,.logout-btn{background-color:transparent;border:1px solid #e94560;color:#e94560;padding:.5rem 1rem}.leave-btn:hover:not(:disabled),.logout-btn:hover:not(:disabled){background-color:#e94560;color:#fff}.back-btn{background-color:transparent;border:1px solid #aaa;color:#aaa;padding:.5rem 1rem}.back-btn:hover:not(:disabled){background-color:#aaa;color:#1a1a2e}