body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#2f3136;color:#dcddde}
a{color:#00aff4;text-decoration:none}
.container{display:flex;height:calc(100vh - 60px)}
.header{height:60px;background:#202225;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.sidebar{width:240px;background:#202225;padding:10px;overflow-y:auto}
.sidebar h2{color:#fff;font-size:16px;margin:0 0 10px}
.sidebar ul{padding:0;margin:0;list-style:none}
.sidebar li a{display:block;padding:6px;border-radius:4px;color:#dcddde}
.sidebar li a.active,.sidebar li a:hover{background:#36393f;color:#fff}
.content{flex:1;overflow-y:auto;padding:10px}
.chat{display:flex;flex-direction:column;height:100%}
.channel-nav{margin:0;font-size:14px}
.channel-list{list-style:none;padding:0;margin:0 0 5px}
.channel-list li a{display:block;padding:4px;border-radius:4px;color:#dcddde;font-size:14px}
.channel-list li a.active,.channel-list li a:hover{background:#36393f;color:#fff}
.messages{flex:1;overflow-y:auto;margin-bottom:10px}
.message{margin-bottom:6px}
.message small{color:#72767d}
form{display:flex;gap:5px}
form input[type=text]{flex:1;padding:8px;border:none;border-radius:4px}
form button{padding:8px 12px;border:none;border-radius:4px;background:#5865f2;color:#fff;cursor:pointer}
.error{color:#f04747}
.tip{font-size:12px;color:#72767d;margin:4px 0 8px}
.channel-title{margin:0 0 6px;font-size:18px;color:#fff}
.channel-list-top{list-style:none;margin:0 0 8px;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.channel-list-top li a{padding:2px 6px;border-radius:4px;color:#dcddde;font-size:14px}
.channel-list-top li a.active,.channel-list-top li a:hover{background:#36393f;color:#fff}
.empty{color:#72767d;font-style:italic;margin:8px 0}

.msg-form{display:flex;gap:6px;margin-top:auto}
.msg-form input[type=text]{flex:1;padding:8px;border:none;border-radius:4px}

/* chat-box basics */
.chat-box{display:flex;flex-direction:column;height:calc(100vh - 120px)}
.chat-head{margin:0 0 6px;color:#fff}
.chan-switch{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.chan-switch a{padding:2px 6px;border-radius:4px;color:#dcddde;font-size:14px}
.chan-switch a.active,.chan-switch a:hover{background:#36393f;color:#fff}
.msg-history{flex:1;overflow-y:auto;margin-bottom:8px}
.msg{margin-bottom:6px}
.msg small{color:#72767d}
.msg-form{display:flex;gap:6px}
.msg-form input[type=text]{flex:1;padding:8px;border:none;border-radius:4px}
.msg-form button{padding:8px 12px;border:none;border-radius:4px;background:#5865f2;color:#fff}
.empty{color:#72767d;font-style:italic}