*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#36393f;color:#dcddde;height:100vh;overflow:hidden}#root,.view{height:100%;width:100%}#login-view{display:flex;justify-content:center;align-items:center;background-color:#5865f2}.login-box{background-color:#36393f;padding:32px;border-radius:8px;width:400px;box-shadow:0 2px 10px #0003;text-align:center}.login-box h2{color:#fff;margin-bottom:20px}.input-group{margin-bottom:16px;text-align:left}.input-group label{display:block;margin-bottom:8px;color:#b9bbbe;font-size:12px;text-transform:uppercase;font-weight:700}.input-group input{width:100%;padding:10px;border-radius:3px;border:none;background-color:#202225;color:#dcddde;font-size:16px}.input-group input:focus{outline:none}#login-btn{width:100%;padding:10px;background-color:#5865f2;color:#fff;border:none;border-radius:3px;font-size:16px;cursor:pointer;font-weight:700}#login-btn:hover{background-color:#4752c4}.error{color:#ed4245;margin-top:10px;font-size:14px}#chat-view{display:flex}.sidebar{width:240px;background-color:#2f3136;display:flex;flex-direction:column}.sidebar-header{padding:16px;box-shadow:0 1px 2px #0003;font-weight:700;color:#fff}.sidebar-section{padding:16px 8px}.sidebar-section h4{font-size:12px;text-transform:uppercase;color:#8e9297;margin-bottom:8px;padding-left:8px}.channel-list,.user-list{list-style:none}.channel-list li,.user-list li{padding:6px 8px;margin:2px 0;border-radius:4px;cursor:pointer;color:#8e9297}.channel-list li:hover,.user-list li:hover{background-color:#393c43;color:#dcddde}.channel-list li.active,.user-list li.active{background-color:#393c43;color:#fff}.logout-btn{margin-top:auto;padding:16px;background-color:#202225;color:#ed4245;border:none;cursor:pointer;text-align:left;font-weight:700}.logout-btn:hover{background-color:#18191c}.main-chat{flex:1;display:flex;flex-direction:column;background-color:#36393f}.chat-header{padding:16px;box-shadow:0 1px 2px #0003;font-weight:700;color:#fff;z-index:10}.message-list{flex:1;padding:16px;overflow-y:auto;display:flex;flex-direction:column}.message{margin-bottom:16px;display:flex;flex-direction:column}.message-header{display:flex;align-items:baseline;margin-bottom:4px}.message-sender{font-weight:700;color:#fff;margin-right:8px}.message-timestamp{font-size:12px;color:#72767d}.message-text{color:#dcddde;line-height:1.5}.chat-input-area{padding:16px;background-color:#36393f}#chat-form{display:flex;background-color:#40444b;border-radius:8px;padding:10px}#message-input{flex:1;background:transparent;border:none;color:#dcddde;font-size:16px}#message-input:focus{outline:none}#chat-form button{display:none}