/* =========================================================
   components.css — visual styling for individual pieces
   rendered inside the chat: message bubbles, quick-start /
   suggestion chips, the typing indicator, and file/link cards.
   ========================================================= */

/* ---------- message bubbles ---------- */
.msg{ max-width:84%; display:flex; flex-direction:column; gap:16px; }
.msg.user{ align-self:flex-end; align-items:flex-end; }
.msg.bot{ align-self:flex-start; align-items:flex-start; }

.bubble{
  padding:12px 16px;
  border-radius:var(--radius-bubble);
  font-size:14.5px;
  line-height:1.55;
  white-space:pre-line; /* renders \n from the API's answer text as real line breaks */
  overflow-wrap:anywhere;
  overflow:hidden;
  max-width:100%;
}
.msg.bot .bubble{
  background:var(--bubble);
  color:var(--text);
  border-bottom-left-radius:1px;
}
.msg.user .bubble{
  background:var(--accent);
  color:#000;
  border-bottom-right-radius:1px;
}

.bubble-text{
  display:block;
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.bubble-image{
  display:block;
  width:100%;
  max-width:786px;
  border-radius:12px;
  margin:8px 0;
  cursor:zoom-in; /* clickable to open the lightbox */
}

/* ---------- video embeds ---------- */
.video-embed{
  position:relative;
  width:100%;
  max-width:786px;
  aspect-ratio:16 / 9;
  margin:8px 0;
  border-radius:12px;
  overflow:hidden;
  background:#000;
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.bubble-video{
  display:block;
  width:100%;
  max-width:786px;
  border-radius:12px;
  margin:8px 0;
  background:#000;
}

/* ---------- chips (quick-start + suggested follow-ups) ---------- */
.chip-box{
  background:var(--bubble);
  border-radius:var(--radius-bubble);
  border-bottom-left-radius:1px;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chip-box .chip-heading{
  font-size:14.5px;
  color:var(--text);
}
.chips-row{ display:flex; flex-wrap:wrap; gap:12px; }
.chips-row--inline{ margin:8px 0; }

.chip{
  font-family:var(--font-body);
  font-size:13px;
  text-align:left;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  border:1px solid var(--accent);
  background:transparent;
  color:var(--text);
  transition:background .15s ease;
}
.chip:hover{ background:var(--accent-soft); }

/* ---------- typing indicator ---------- */
.typing{
  display:flex;
  gap:4px;
  align-items:center;
  padding:6px 4px;
}
.typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  animation:typingBounce 1.1s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ---------- file / link cards ---------- */
.file-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:8px 0;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--bubble-line);
  text-decoration:none;
  color:var(--text);
  transition:border-color .15s ease;
  min-width:0;
  max-width:100%;
}
.file-card:hover{
  border-color:var(--accent);
}
.file-card-icon,
.file-card-download{
  display:flex;
  color:var(--accent);
  flex-shrink:0;
}
.file-card-icon svg,
.file-card-download svg{
  width:18px;
  height:18px;
  stroke-width:1.5;
}
.file-card-label{
  flex:1 1 0%;
  min-width:0;
  max-width:100%;
  font-size:13.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}