/* =========================================================
   Chat Avatars — Circular avatars next to message bubbles
   =========================================================
   Plug-and-play: load this CSS AFTER bayer-lk-docs-assistant.css.
   The avatars-effect.js file handles DOM injection.

   Layout: wraps bubble+meta in .lk-msg-content, adds .lk-avatar
   beside it. Uses CSS specificity to override .lk-msg layout
   from column → row without modifying bayer-lk-docs-assistant.css.
   ========================================================= */

/* --- Override .lk-msg to row layout when avatar is injected --- */
.lk-msg.lk-has-avatar {
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  max-width: 90%;
}

/* --- Content wrapper (bubble + meta) --- */
.lk-msg.lk-has-avatar .lk-msg-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* --- Avatar base --- */
.lk-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 20px; /* Vertically align with bubble bottom, above meta */
}

.lk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Agent avatar (LiveKit logo on teal bg) --- */
.lk-avatar-agent {
  background: var(--lk-primary, #10384f);
  border: 1px solid var(--lk-primary, #10384f);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.lk-avatar-agent img {
  width: 100%;
  height: 80%;
  object-fit: contain;
}

/* --- User avatar (Entra photo) --- */
.lk-avatar-user {
  background: var(--lk-primary, #10384f);
}

/* --- Initials fallback --- */
.lk-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lk-primary, #10384f);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}