/* =====================================================================
   [25] Quebra de texto + "Ver mais" universal
   Chat bubbles, biografia do perfil, conteúdo de posts, comentários e
   respostas. Todos usam a mesma classe .wz-clampable OU são detectados
   automaticamente pelo JS 25-read-more.js.
   ===================================================================== */

/* ---------- FIX definitivo do overflow do chat bubble ---------- */
.chat-messages, .wz-msg-row, .chat-page, .chat-desktop-shell { min-width: 0; }

.wz-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.wz-msg-row.mine   { justify-content: flex-end; }
.wz-msg-row.theirs { justify-content: flex-start; }

/* A bolha em si: tem um teto duro e QUEBRA qualquer string */
.chat-bubble,
.wz-msg {
  max-width: min(72%, 560px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  hyphens: auto;
  box-sizing: border-box;
}
.wz-msg-row.mine   .chat-bubble { margin-left: auto; }
.wz-msg-row.theirs .chat-bubble { margin-right: auto; }

.chat-bubble .wz-msg-body,
.chat-bubble .wz-msg-body p,
.chat-bubble .wz-msg-body span,
.chat-bubble a,
.wz-msg .wz-msg-body,
.wz-msg .wz-msg-body p,
.wz-msg a {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
}
.chat-bubble a, .wz-msg a { word-break: break-all !important; }

.chat-bubble img,
.chat-bubble video,
.chat-bubble audio,
.chat-bubble .chat-image,
.chat-bubble .chat-shared-post,
.wz-msg img, .wz-msg video, .wz-msg audio {
  max-width: 100% !important;
  height: auto;
}

/* ---------- Sistema "Ver mais" ---------- */
.wz-clampable { position: relative; }
.wz-clampable[data-wz-clamp="1"] .wz-clamp-inner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--wz-clamp-lines, 5);
  line-clamp: var(--wz-clamp-lines, 5);
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
  mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}
.wz-clampable[data-wz-clamp="0"] .wz-clamp-inner {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  mask-image: none;
  -webkit-mask-image: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.wz-clamp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  border: 0;
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  border-radius: 999px;
  font: 600 12px/1 inherit;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.wz-clamp-toggle:hover { background: rgba(139, 92, 246, 0.22); color: #ede9fe; }
.wz-clamp-toggle:active { transform: scale(.96); }
.wz-clamp-toggle svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* Variante dentro da bolha do chat: menos "gritante" */
.chat-bubble .wz-clamp-toggle,
.wz-msg .wz-clamp-toggle {
  background: rgba(255,255,255,.14);
  color: #f1f5ff;
  margin-top: 4px;
}
.chat-bubble.mine .wz-clamp-toggle,
.wz-msg.mine .wz-clamp-toggle {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* Aplica clamp automaticamente onde a lógica for útil */
.post-content, .profile-bio, .comment-content, .comment-reply-content { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Segurança extra: nenhuma bolha/coluna pode estourar */
.post-card, .comment-item, .conversation-item, .profile-header { min-width: 0; }
.post-card .post-content, .comment-item p, .conversation-preview {
  overflow-wrap: anywhere;
  word-break: break-word;
}