/* Header */
.site-header { padding: 1.2rem; background: #1a1a40; color: #fff; }
.brand { display: flex; align-items: center; gap: 1rem; }
h1 { margin: 0; }
.tagline { margin: .25rem 0 0; color: #cfd1ff; }

/* Avatar (circular, supports video or image) */
.avatar {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff55;
  flex: 0 0 auto;
}
.avatar--xl { width: 72px; height: 72px; }
.avatar__media, .avatar__fallback {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.avatar__fallback { position: absolute; inset: 0; }

/* Chat layout with avatars */
.chat-box { border: 1px solid #ddd; border-radius: 12px; padding: .75rem; min-height: 250px; max-height: 420px; overflow-y: auto; background: #fff; }
.message {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .6rem;
  align-items: flex-start;
  margin: .6rem 0;
}
.message .bubble {
  background: #f7f7ff;
  border: 1px solid #ececff;
  border-radius: 12px;
  padding: .55rem .7rem;
  line-height: 1.45;
}
.message.you .bubble {
  background: #f7fbff;
  border-color: #e6f2ff;
}
.message .sender { font-weight: 700; color: #1a1a40; display: block; margin-bottom: .2rem; }

/* Input */
.chat-input { display: flex; gap: .5rem; margin-top: .75rem; }
#user-input { flex: 1; padding: .6rem; border: 1px solid #ccc; border-radius: 8px; }
#send-btn, #reload-knowledge { padding: .6rem .9rem; border-radius: 8px; border: 1px solid #ccc; background: #eee; cursor: pointer; }

/* Feedback (if you added it earlier) */
.feedback { display: inline-flex; gap: .4rem; margin-left: .5rem; vertical-align: middle; }
.feedback button { border: 1px solid #ddd; background: #fff; border-radius: 16px; padding: .2rem .5rem; cursor: pointer; font-size: .85rem; }
.feedback button.active { border-color: #1a1a40; background: #f0f0ff; }
.feedback small { color: #777; margin-left: .4rem; }