* { box-sizing: border-box; }
body, html {
  margin: 0; height: 100%;
  font-family: 'gg sans', sans-serif;
  background: #313338; color: #dbdee1; overflow: hidden;
}
#app { display: flex; height: 100vh; }
#sidebar { width: 240px; background: #2b2d31; padding: 12px 8px; flex-shrink: 0; overflow-y: auto; }
#sidebar h3 { font-size: 12px; color: #949ba4; margin: 8px; }
#channel-list { list-style: none; padding: 0; }
#channel-list li {
  padding: 8px 12px; margin: 2px 0; cursor: pointer; border-radius: 4px;
  color: #949ba4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#channel-list li.active { background: #404249; color: #fff; }
#channel-list li:hover:not(.active) { background: #35373c; color: #dbdee1; }

#chat-container { flex: 1; overflow-y: auto; background: #313338; overflow-anchor: none; }
.message { display: flex; gap: 16px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.02); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.content { min-width: 0; flex: 1; }
.username { font-weight: 600; color: #f2f3f5; }
.timestamp { font-size: 12px; color: #949ba4; margin-left: 8px; }
.text { line-height: 1.375rem; white-space: pre-wrap; word-break: break-all; margin-bottom: 4px; }

/* EMBEDS */
.attachments-container { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.embed { max-width: 100%; width: fit-content; }
.embed img, .embed video {
  max-width: 550px; max-height: 450px;
  border-radius: 8px; display: block; background: #2b2d31;
}
.embed audio {
  width: 100%; max-width: 500px; height: 40px; border-radius: 8px;
}
a { color: #00a8fc; text-decoration: none; }
a:hover { text-decoration: underline; }

.attachment-link {
  display: flex; align-items: center; gap: 8px;
  background: #2b2d31; padding: 10px; border-radius: 4px;
  border: 1px solid #1e1f22; font-size: 14px;
}

#boot-loader { position: fixed; inset: 0; background: #1e1f22; display: flex; align-items: center; justify-content: center; z-index: 9999; }
.boot-box { width: 400px; }
.boot-bar { height: 8px; background: #4e5058; border-radius: 4px; margin: 8px 0; overflow: hidden; }
#boot-bar-fill { height: 100%; width: 0%; background: #5865f2; }