/* Chat Container */
.chat-container {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  padding: var(--inline-space);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-container__title {
  font-size: var(--font-large-responsive);
  font-weight: 700;
  margin: 0 0 var(--block-space);
  color: var(--color-ink);
}

/* Messages List */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
  flex: 1;
  overflow-y: auto;
  padding: var(--inline-space-half);
  min-height: 0;
}

.chat-messages__empty {
  text-align: center;
  color: var(--color-subtle);
  padding: var(--block-space-double);
  font-style: italic;
}

/* Individual Message */
.chat-message {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: var(--inline-space-half);
  transition: background 0.2s ease;
}

.chat-message:hover {
  background: var(--color-bg-soft);
}

.chat-message__header {
  display: flex;
  align-items: center;
  gap: var(--inline-space-half);
  margin-bottom: var(--block-space-half);
}

.chat-message__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.chat-message__username {
  font-weight: 600;
  color: var(--color-accent);
}

.chat-message__timestamp {
  font-size: var(--font-small-responsive);
  color: var(--color-subtle);
  margin-left: auto;
}

.chat-message__text {
  color: var(--color-ink);
  line-height: 1.5;
  word-wrap: break-word;
}

/* Responsive adjustments */
@container (max-width: 50cqi) {
  .chat-message__avatar {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .chat-message {
    border-color: var(--color-border-darker);
  }
}