/* make all chat text 50% of the slide base size */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  font-size: 0.5em; /* 50% */
}

/* GPT = full-width block with a sharp border, no shadow */
.chat-gpt {
  align-self: stretch;
  padding: 0.9rem 1.1rem;
  background: #ffffff;                 /* white like the page */
  color: var(--r-main-color, #222);
  border-radius: 12px;                 /* rounded corners */
  box-shadow: none;                    /* NO blur */
}

/* User = right grey bubble with a sharp border, no shadow */
.chat-user {
  align-self: flex-end;
  max-width: 75%;
  padding: 0.75rem 1rem;
  background: #f2f3f5;                 /* light grey bubble */
  color: #111;
  border-radius: 16px;
  border-top-right-radius: 10px;       /* slight “tail” feel */
  box-shadow: none;                    /* NO blur */
}

/* small “role” labels (remove if not needed) */
.chat-gpt::before, .chat-user::before {
  display: block; font-size: .8rem; opacity: .6; margin-bottom: .25rem;
}

/* tidy content inside GPT blocks */
.chat-gpt p { margin: .35rem 0; }
.chat-gpt ul, .chat-gpt ol { margin: .5rem 0 .5rem 1.25rem; }
.chat-gpt pre code {
  display: block; padding: .8rem; border-radius: 8px;
  background: #f6f8fa; border: 1px solid #e5e7eb; overflow-x: auto;
  box-shadow: none;
}

/* small screens */
@media (max-width: 640px) { .chat-user { max-width: 100%; } }

/* used to hide queued elements until it's their turn */
.typing-hidden { visibility: hidden; }

.typing-fade-in {
  visibility: visible !important;
  opacity: 0;
  transition: opacity 220ms ease;
}
.typing-fade-in.typing-show {
  opacity: 1;
}

/* caret (keep from previous setup) */
.typing-caret::after {
  content: "▍";
  margin-left: 0.15rem;
  animation: blink 1s steps(1, end) infinite;
  opacity: .7;
}
@keyframes blink { 50% { opacity: 0; } }