/* ==========================================================
   Testimonials as a chat ("That's what they said." section)
   Markup is in index.html (.chat-wall); layout/animation in js/testimonials.js
   ========================================================== */
.chat-wall {
  position: relative;
  background-color: var(--gray);
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 3rem 2.5rem 3.5rem;
}
.chat-wall .chat-wallpaper { opacity: .7; pointer-events: none; }
.chat-wall { text-align: left; }

/* Without JS: simple balanced columns. With JS: real columns that keep reading order. */
.chat-list { position: relative; columns: 3 300px; column-gap: 1.75rem; }
.chat-list.is-laid-out { columns: auto; display: flex; gap: 1.75rem; align-items: flex-start; }
.chat-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.chat-list:not(.is-laid-out) .chat-msg { break-inside: avoid; margin-bottom: 1.5rem; }

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  transform-origin: 0 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.chat-msg.chat-pre { opacity: 0; transform: translateY(16px) scale(.96); }

.chat-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(22, 14, 8, .15);
}

.chat-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border-radius: 0 1rem 1rem 1rem;
  padding: .7rem .95rem .5rem;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13), 0 6px 18px -10px rgba(22, 14, 8, .18);
}
/* WhatsApp-style tail at the top-left corner */
.chat-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 9px;
  height: 13px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.chat-head { display: flex; flex-direction: column; margin: 0 0 .35rem; text-align: left; }
.chat-name { color: var(--chat-name, var(--orange)); font-weight: 700; font-size: .95rem; line-height: 1.25; }
.chat-role { color: var(--text-gray); font-size: .8rem; line-height: 1.3; }

.chat-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  max-width: none;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--black);
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2, .8, .2, 1);
}
.chat-text p { margin: 0 0 .6em; font-size: inherit; line-height: inherit; color: inherit; }
.chat-text p:last-child { margin-bottom: 0; }
.chat-msg.is-clamped .chat-text {
  max-height: calc(1.45em * 9);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}

.chat-more {
  display: inline-block;
  margin: .2rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black-orange);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.chat-more:hover { text-decoration: underline; }
.chat-more[hidden] { display: none; }

.chat-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .3rem;
  font-size: .72rem;
  line-height: 1.2;
  color: #667781;
}
.chat-translated { display: inline-flex; align-items: center; gap: .3rem; margin-right: auto; }
.chat-translated svg { width: 13px; height: 13px; flex: none; }

@media screen and (max-width: 991px) {
  .chat-wall { padding: 2.5rem 1.75rem 3rem; }
}
@media screen and (max-width: 767px) {
  .chat-wall { padding: 2rem 1rem 2.5rem; border-radius: 1.25rem; }
  .chat-list.is-laid-out, .chat-col { gap: 1.1rem; }
  .chat-avatar { width: 34px; height: 34px; }
  .chat-text { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-msg, .chat-text { transition: none; }
  .chat-msg.chat-pre { opacity: 1; transform: none; }
}