/* ============================================================
   EMBEDS DE LINKS (vídeo/áudio/imagem/documentos nas mensagens)
   Estilos do `js/embeds.js`. Usa as variáveis do tema (base.css)
   p/ acompanhar temas claro/escuro e as escalas de UI/fonte.
   ============================================================ */

/* ---------- Container genérico do embed ---------- */
.msg-embed {
  margin-top: 6px;
  max-width: 480px;
  font-size: calc(13px * var(--font-scale));
}

/* ---------- Cabeçalho (provider + ações) ---------- */
.embed-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: calc(12px * var(--font-scale));
}
.embed-provider {
  font-weight: 700;
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.embed-open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 5px;
  background: none;
  border: none;
  color: var(--text-link);
  font-family: inherit;
  font-size: calc(12px * var(--font-scale));
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.embed-open:hover { text-decoration: underline; }
.embed-open .mi { font-size: calc(15px * var(--ui-scale)); }
.embed-open-btn { color: var(--text-muted); }
.embed-open-btn:hover { color: var(--text-normal); background: var(--bg-hover); }

/* ---------- Corpo do player (thumb/play → iframe) ---------- */
.embed-body {
  position: relative;
  width: 100%;
  aspect-ratio: var(--embed-ratio, 16 / 9);
  max-height: 480px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.embed-body.loaded { cursor: default; }
.embed-body img.embed-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.embed-body iframe.embed-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

/* ---------- Mídia por link direto ---------- */
.msg-embed-media img.embed-img {
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  display: block;
  background: #000;
  cursor: zoom-in;
}
.msg-embed-media video {
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  display: block;
  background: #000;
}
.msg-embed-media audio {
  width: 100%;
  max-width: 420px;
  display: block;
}
/* Vídeo por link direto: placeholder até clicar em play (não baixa o arquivo) */
.embed-video-lazy {
  position: relative;
  width: min(420px, 100%);
  height: 220px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.embed-video-lazy video { display: none; }
.embed-video-lazy .msg-video-play { z-index: 4; }

/* ---------- Card de link (fallback) ---------- */
.embed-link-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-input);
  max-width: 420px;
}
.embed-link-card .mi { flex-shrink: 0; color: var(--text-muted); }
.embed-link-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-normal);
}
.embed-link-open {
  flex-shrink: 0;
  color: var(--text-link);
  text-decoration: none;
  font-size: calc(12px * var(--font-scale));
}
.embed-link-open:hover { text-decoration: underline; }

/* ---------- Card de DOCUMENTO (anexo ou link) ---------- */
.doc-card { flex-wrap: nowrap; }
.doc-card .doc-card-note {
  flex: 1;
  min-width: 0;
  color: var(--text-muted);
  font-size: calc(11px * var(--font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-card .doc-view-btn,
.doc-card .doc-dl-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.doc-card .doc-dl-btn { background: var(--btn-secondary-bg); }
.doc-card .doc-dl-btn:hover { background: var(--bg-hover); }
.doc-card .doc-btn .mi,
.doc-card .file-download .mi { font-size: calc(15px * var(--ui-scale)); }

/* ============================================================
   VISUALIZADOR DE DOCUMENTO (modal)
   ============================================================ */
.doc-viewer.modal-backdrop { z-index: 420; }

.doc-viewer-box {
  display: flex;
  flex-direction: column;
  width: min(1040px, 94vw);
  height: min(86vh, 900px);
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.doc-viewer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-elevated);
}
.doc-viewer-icon { color: var(--text-muted); }
.doc-viewer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: calc(14px * var(--font-scale));
  color: var(--text-normal);
}
.doc-viewer-actions { display: flex; align-items: center; gap: 8px; }
.doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-normal);
  font-family: inherit;
  font-size: calc(12px * var(--font-scale));
  text-decoration: none;
  cursor: pointer;
}
.doc-btn:hover { background: var(--bg-hover); }
.doc-btn .mi { font-size: calc(16px * var(--ui-scale)); }
.doc-btn-icon { padding: 6px; }

.doc-viewer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-tertiary);
  overflow: auto;
}
.doc-viewer-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.doc-viewer-text {
  margin: 0;
  padding: 14px 16px;
  font-family: 'Consolas', 'Courier New', ui-monospace, monospace;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-normal);
  user-select: text;
}
.doc-viewer-msg {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: calc(14px * var(--font-scale));
}
.doc-viewer-hint {
  padding: 6px 14px;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border-color);
}

/* ============================================================
   PLAYER EM TELA CHEIA (modal do embed)
   ============================================================ */
.embed-modal.modal-backdrop { z-index: 420; }

.embed-modal-box {
  display: flex;
  flex-direction: column;
  width: min(1040px, 94vw);
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}
.embed-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-elevated);
}
.embed-modal-box .embed-body {
  max-height: 82vh;
  border-radius: 0;
  aspect-ratio: var(--embed-ratio, 16 / 9);
}
/* Vídeo EM PÉ (Shorts/TikTok): o modal fica estreito, na forma do vídeo */
.embed-modal-box.embed-modal-portrait { width: min(430px, 94vw); }
.embed-modal-box.embed-modal-portrait .embed-body { max-height: 84vh; }
/* Player NATIVO na tela cheia (link direto .mp4/.mp3): ocupa a caixa inteira
   (o card da mensagem limita a 360px, aqui não) */
.embed-modal-box .embed-body video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  background: #000;
  border-radius: 0;
}
.embed-modal-box .embed-body audio {
  width: 92%;
  max-width: none;
  margin: 20px auto 0;
  display: block;
}

/* ---------- Telas pequenas (mobile) ---------- */
@media (max-width: 700px) {
  .msg-embed { max-width: 100%; }
  .doc-viewer-box { width: 96vw; height: 92vh; }
  .doc-viewer-name { font-size: calc(13px * var(--font-scale)); }
  .doc-btn span:not(.mi) { display: none; } /* mobile: só os ícones nos botões */
  .embed-modal-box { width: 96vw; }
}