/* App layout */
#app {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--bg-main);
}

/* Sidebar */
#sidebar {
  width: 220px;
  background: var(--bg-panel);
  border-right: 1px solid var(--outline);
}

.dm {
  padding: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--outline);
}

.dm:hover {
  background: var(--bg-hover);
}

.dm.active {
  background: #1f1f2a;
}

/* Chat main area */
#chat {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Chat header */
#chatHeader {
  height: 50px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--outline);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}

/* Messages container */
#messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px; /* smaller gap for stacked messages */
  background: var(--bg-main);
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* Message row */
.message-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* User messages on the right */
.message-container.user {
  flex-direction: row-reverse;
}

/* Avatar */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  flex-shrink: 0;
}

/* Message content */
.message-content {
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
}

/* Bot text color */
.message-content.bot .message-text {
  color: white;
}

/* User text color */
.message-content.user .message-text {
  color: white;
}

/* Username and bot tag */
.username {
  font-weight: bold;
  font-size: 0.85rem;
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}

.bot-tag {
  background: #5865f2;
  color: white;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
}

/* Input bar */
#inputBar {
  border-top: 1px solid var(--outline);
  padding: 12px;
}

#messageInput {
  width: 100%;
  background: #0f0f14;
  border: 1px solid var(--outline);
  color: var(--text-main);
  padding: 10px 12px;
  border-radius: 6px;
  outline: none;
}

/* Scrollbar styling */
#messages::-webkit-scrollbar {
  width: 8px;
}

#messages::-webkit-scrollbar-thumb {
  background-color: #202225;
  border-radius: 4px;
}

/* Smooth scroll */
#messages {
  scroll-behavior: smooth;
}