/* Explicit physical chat alignment prevents RTL flex-direction inversion. */
.messages { direction: ltr; }
.chat-turn { display: flex; align-items: flex-end; width: 100%; }
.assistant-turn { justify-content: flex-start; gap: 8px; }
.user-turn { justify-content: flex-end; }
.messages .message { direction: rtl; text-align: right; max-width: min(82%, 640px); }
.messages .assistant, .messages .user { align-self: auto; }
.assistant-avatar { flex: 0 0 38px; width: 38px; height: 38px; margin-bottom: 2px; border: 1px solid #3b6764; border-radius: 50%; background: #102626; display: grid; place-items: center; box-shadow: 0 5px 14px #0004; }
.assistant-avatar img { width: 31px; height: 31px; display: block; }
.typing-indicator { direction: rtl; align-self: flex-start; }
.typing-indicator::before { content: ""; width: 25px; height: 25px; flex: 0 0 25px; background: url('/static/interviewer-bot.svg') center / contain no-repeat; }

@media (max-width: 720px) {
  .assistant-turn { gap: 6px; }
  .assistant-avatar { flex-basis: 33px; width: 33px; height: 33px; }
  .assistant-avatar img { width: 27px; height: 27px; }
  .messages .message { max-width: calc(100% - 42px); }
}