/* ===================================================================
   chat.css — the saved-conversation module (the hero)
   Spec: lander-build-prompt_v1.md §4
   Bubbles render statically. Only the typing indicator animates, once.
   =================================================================== */

.chat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* one human bridge line from her cry into the saved transcript */
.chat-bridge {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 40px;
}

/* ---- the SAVED CONVERSATION label above the first message ---- */
.chat-label {
  text-align: center;
  margin-bottom: 28px;
  line-height: 1.4;
}

/* ---- turn grouping ---- */
.turn { display: flex; flex-direction: column; }
.turn + .turn { margin-top: 18px; }

/* the meta header that opens a turn (avatar/name/time or just time) */
.turn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.turn-head.is-owner { justify-content: flex-end; }

.avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.turn-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.turn-time {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---- bubbles ---- */
.bubbles { display: flex; flex-direction: column; gap: 4px; }
.bubbles.is-owner { align-items: flex-end; }
.bubbles.is-vet   { align-items: flex-start; }

.bubble {
  max-width: 80%;
  padding: 16px 20px;
  font-size: var(--fs-chat);
  line-height: var(--lh-chat);
  color: var(--ink);
  border-radius: var(--radius-bubble);
}

/* vet — left, white, bordered, sharp top-left corner anchors it */
.bubble.vet {
  background: var(--vet-bubble);
  border: 1px solid var(--vet-border);
  border-top-left-radius: 4px;
}
/* owner — right, warm grey, no border, sharp top-right corner */
.bubble.owner {
  background: var(--owner-bubble);
  border-top-right-radius: 4px;
}
/* the ONE accented bubble — Yates names AquaOne */
.bubble.vet.accent {
  background: var(--accent-aqua);
  border-color: #CFE2E4;
}

.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin-bottom: 0; }

/* ---- photo attachments — phone-snapshot cards ---- */
.chat-photo {
  max-width: 280px;
  border-radius: var(--radius-photo);
  overflow: hidden;
}
.chat-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-photo);
  display: block;
}
.bubbles.is-owner .chat-photo { align-self: flex-end; }
/* preview-phase placeholder shown when a chat photo file is missing */
.chat-photo-ph {
  width: 260px;
  max-width: 100%;
  min-height: 150px;
  border-radius: var(--radius-photo);
  background: repeating-linear-gradient(45deg, #EFEDE8, #EFEDE8 10px, #E7E4DE 10px, #E7E4DE 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: var(--muted);
}
.chat-photo-ph .ph-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--vet-border);
  border-radius: 4px;
  padding: 2px 8px;
}
.chat-caption {
  margin-top: 6px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bubbles.is-owner .chat-caption { text-align: right; }

/* ---- in-chat link card (the exact product link the vet sends) ---- */
.chat-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 80%;
  margin-top: 2px;
  padding: 12px 16px;
  background: var(--vet-bubble);
  border: 1px solid var(--vet-border);
  border-left: 3px solid var(--navy);
  border-radius: 12px;
  text-decoration: none;
  align-self: flex-start;
}
.chat-link:hover { background: #FBFBF9; }
.chat-link-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.chat-link-domain {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---- rich link card (the main CTA — unfurled product link) ---- */
.chat-link.rich {
  display: block;
  flex-direction: initial;
  gap: 0;
  width: 340px;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--vet-border);
  border-left: 1px solid var(--vet-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--vet-bubble);
  align-self: flex-start;
}
.chat-link.rich:hover { background: var(--vet-bubble); }
.chat-link.rich .cl-img {
  background: #F4F3EF;
  border-bottom: 1px solid var(--vet-border);
}
.chat-link.rich .cl-img img {
  width: 100%;
  height: 190px;
  object-fit: contain;
  display: block;
}
.chat-link.rich .cl-body { padding: 16px 18px 18px; }
.chat-link.rich .cl-domain {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.chat-link.rich .cl-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 12px;
}
.chat-link.rich .cl-benefits {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.chat-link.rich .cl-benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 7px;
}
.chat-link.rich .cl-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--navy);
  font-weight: 700;
}
.chat-link.rich .cl-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 14px;
}
.chat-link.rich .cl-cta {
  display: block;
  text-align: center;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 10px;
}
.chat-link.rich:hover .cl-cta { background: var(--navy-hover); }

/* ---- typing indicator (animates once on view) ---- */
.typing {
  align-self: flex-start;
  background: var(--vet-bubble);
  border: 1px solid var(--vet-border);
  border-top-left-radius: 4px;
  border-radius: var(--radius-bubble);
  padding: 16px 20px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.4;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.4; }
  30%           { transform: translateY(-4px);  opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .typing span { animation: none; opacity: 0.6; }
}

/* ---- system "joined the chat" notification ---- */
.chat-join {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  margin: 8px auto 16px;
  padding: 9px 16px;
  background: #F4F3EF;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
.chat-join .join-avatar {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-join .join-text strong { color: var(--ink); font-weight: 600; }
.chat-join .join-cred { white-space: nowrap; }
.chat-join .join-time {
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* ---- day-jump divider ---- */
.day-jump {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 36px 0;
}
.day-jump::before,
.day-jump::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.day-jump span {
  flex: none;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- end-of-conversation line ---- */
.chat-end {
  text-align: center;
  margin-top: 28px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
}