/* Chat: cartões de prévia de links, mosaico de fotos e visualizador de imagens. */

/* ---------- Prévias de links ---------- */
.embeds { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; }
.embed {
  --embed-color: color-mix(in srgb, var(--text) 22%, transparent);
  position: relative; display: flex; gap: 14px; max-width: min(440px, 100%); padding: 10px 14px 12px 14px;
  border-radius: 6px; border: 1px solid var(--divider); border-left: 4px solid var(--embed-color);
  background: color-mix(in srgb, var(--bg-panel) 72%, var(--bg-main));
  animation: embed-in .22s var(--ease-out, ease-out);
}
@keyframes embed-in { from { opacity: 0; transform: translateY(4px); } }
.embed.large { flex-direction: column; }
.embed-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.embed-site, .embed-author { font-size: 12px; color: var(--text-muted); line-height: 1.3; }
.embed-author { color: var(--text); font-weight: 600; font-size: 13px; }
.embed-title { color: var(--link); font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.embed-title:hover { text-decoration: underline; }
.embed-desc {
  margin: 0; color: var(--text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.embed-media, .embed-thumb {
  position: relative; display: block; padding: 0; border: 0; background: var(--bg-input); border-radius: 6px; overflow: hidden; cursor: zoom-in; line-height: 0;
}
.embed-media { margin-top: 8px; max-width: 100%; }
.embed-media img { display: block; max-width: 100%; max-height: 300px; object-fit: cover; }
.embed-thumb { width: 80px; height: 80px; flex-shrink: 0; align-self: flex-start; }
.embed-thumb img { width: 100%; height: 100%; object-fit: cover; }
a.embed-media { cursor: pointer; }
/* Vídeo: caixa 16:9 preenchida (a miniatura do YouTube vem 4:3 com faixas pretas, que o corte esconde). */
.embed.kind-video .embed-media { width: 100%; aspect-ratio: 16 / 9; }
.embed.kind-video .embed-media img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.embed-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; backdrop-filter: blur(4px);
  transition: transform .15s var(--spring, ease), background .15s;
}
.embed-play .ico { margin-left: 3px; fill: currentColor; }
a.embed-media:hover .embed-play { transform: translate(-50%, -50%) scale(1.1); background: #ff0033; }
.embed-image { position: relative; max-width: min(440px, 100%); }
.embed-image .embed-media { margin-top: 0; }
.embed-remove {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: color-mix(in srgb, var(--bg-floating) 85%, transparent); color: var(--interactive); opacity: 0; transition: opacity .15s, color .15s;
}
.embed:hover .embed-remove, .embed-image:hover .embed-remove, .embed-remove:focus-visible { opacity: 1; }
.embed-remove:hover { color: var(--text-strong); }

/* ---------- Mosaico de fotos ---------- */
.att-gallery { display: grid; gap: 4px; width: min(440px, 100%); border-radius: 8px; overflow: hidden; }
.att-gallery.n-2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
.att-gallery.n-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 140px 140px; }
.att-gallery.n-3 .att-tile:first-child { grid-row: span 2; }
.att-gallery.n-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
.att-gallery.many { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; }
.att-gallery.many .att-tile:nth-child(1), .att-gallery.many .att-tile:nth-child(2) { grid-column: span 1; }
.att-tile {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--bg-input); cursor: zoom-in; overflow: hidden;
}
.att-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease-out, ease-out), filter .2s; }
.att-tile:hover img { transform: scale(1.03); filter: brightness(1.06); }
.att-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (max-width: 600px) {
  .att-gallery.n-2 { grid-auto-rows: 150px; }
  .att-gallery.n-3 { grid-template-rows: 110px 110px; }
  .att-gallery.n-4 { grid-auto-rows: 120px; }
  .att-gallery.many { grid-auto-rows: 100px; }
}

/* ---------- Visualizador ---------- */
#lightbox.modal {
  z-index: 70; padding: 0; flex-direction: column; align-items: stretch; justify-content: stretch;
  background: rgba(6, 6, 8, .92); backdrop-filter: blur(6px); animation: lb-in .16s ease-out;
}
@keyframes lb-in { from { opacity: 0; } }
.lb-top {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; min-height: 60px;
  background: linear-gradient(rgba(0, 0, 0, .55), transparent); color: #fff; z-index: 2;
}
.lb-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lb-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-meta { font-size: 12px; color: rgba(255, 255, 255, .65); }
.lb-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lb-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .85); text-decoration: none; transition: background .12s, color .12s, transform .12s;
}
.lb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); color: #fff; }
.lb-btn:active:not(:disabled) { transform: scale(.94); }
.lb-btn:disabled { opacity: .35; cursor: default; }
.lb-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lb-zoom-label { min-width: 46px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); }
.lb-sep { width: 1px; height: 22px; margin: 0 6px; background: rgba(255, 255, 255, .18); }
.lb-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 72px; }
.lb-frame { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; cursor: zoom-out; }
.lb-img {
  max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 16px 60px rgba(0, 0, 0, .6); cursor: zoom-in;
  transition: transform .18s var(--ease-out, ease-out), opacity .2s; transform-origin: center; user-select: none; touch-action: none;
}
.lb-frame.zoomed .lb-img { cursor: grab; }
.lb-frame.dragging .lb-img { cursor: grabbing; transition: none; }
.lb-frame.loading .lb-img { opacity: .25; }
.lb-spinner {
  position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff;
  opacity: 0; pointer-events: none; animation: lb-spin .8s linear infinite;
}
.lb-frame.loading .lb-spinner { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; z-index: 2; background: rgba(255, 255, 255, .08); }
.lb-nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }
.lb-thumbs {
  display: flex; gap: 6px; justify-content: safe center; padding: 10px 16px 14px; overflow-x: auto; scrollbar-width: thin; flex-shrink: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .5));
}
.lb-thumb {
  flex-shrink: 0; width: 54px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: rgba(255, 255, 255, .06); opacity: .55; transition: opacity .15s, border-color .15s, transform .15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .9; }
.lb-thumb.active { opacity: 1; border-color: #fff; transform: translateY(-2px); }
@media (max-width: 600px) {
  .lb-top { padding: 8px 10px; gap: 8px; }
  .lb-zoom-label, .lb-sep, .lb-actions .lb-btn[aria-label="Diminuir"], .lb-actions .lb-btn[aria-label="Ampliar"] { display: none; }
  .lb-stage { padding: 0 8px; }
  .lb-nav { width: 40px; height: 40px; background: rgba(0, 0, 0, .45); }
  .lb-nav.prev { left: 8px; }
  .lb-nav.next { right: 8px; }
  .lb-thumb { width: 44px; height: 44px; }
}