/**
 * 🎬 YoutubeBusca — o desenho do CARTÃO do vídeo e do MODAL de busca, UM só para o feed e a Comunidade
 *
 * @file css/youtube_busca.css
 * @versao_deploy 2026-10-06-i-o-video-aparece-no-compositor
 * 🎴 + a caixa de pré-visualização do compositor (.yt-preview-caixa / .yt-preview-remover). SUCEDE o -i.
 *
 * Por que existe: o cartão `.yt-embed` só tinha CSS no feed (base_literario.css), e o modal estava
 * desenhado DUAS vezes (base_literario.css e comunidade.css), com valores que já divergiam. O Rafael
 * autorizou em 05/10 o CSS das Comunidades para o desenho IGUAL ao do feed: os VALORES aqui são os do
 * feed, copiados sem mudar nenhum (base_literario.css l.1588–1616 e l.1621–1701, medidos a 05/10).
 *
 * O que NÃO está aqui, de propósito:
 *   · `.composer-editor .yt-embed` — é do COMPOSITOR (a F3 leva-a para o /css/compositor.css, C1);
 *   · `.yt-url-preview*` — nenhum código de hoje a usa no modal partilhado; fica onde está.
 * Usa as variáveis de tema que as duas páginas já têm: --bg-card, --bg-hover, --border, --text,
 * --text-muted, --text-dim, --primary-light.
 */

/* -- O cartão do vídeo (no compositor e nos posts gravados) ------------------ */
.yt-embed {
  position: relative; display: block; width: 100%; margin: 10px 0;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #000; aspect-ratio: 16/9;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.yt-embed img.yt-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .25s; border-radius: 0; margin: 0;
}
.yt-embed:hover img.yt-thumb { opacity: .75; }
.yt-embed .yt-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 44px; background: #ff0000; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; transition: background .2s;
}
.yt-embed:hover .yt-play-btn { background: #cc0000; }
.yt-embed .yt-play-btn i { font-size: 1.6rem; color: #fff; }
.yt-embed .yt-title-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  padding: 20px 12px 10px; font-size: .8rem; font-weight: 600;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.yt-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}

/* -- O modal de busca --------------------------------------------------------- */
.yt-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); padding: 16px;
}
.yt-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 520px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden;
}
.yt-modal-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.yt-modal-header h3 {
  font-size: 1rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.yt-modal-header h3 i { color: #ff0000; font-size: 1.2rem; }
.yt-modal-close {
  width: 32px; height: 32px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.yt-modal-close:hover { background: var(--bg-hover); color: var(--text); }
.yt-modal-search {
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.yt-modal-search-row {
  display: flex; gap: 8px;
}
.yt-modal-input {
  flex: 1; padding: 9px 14px; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); font-size: .88rem; outline: none;
  transition: border-color .2s;
}
.yt-modal-input:focus { border-color: var(--primary-light); }
.yt-modal-btn {
  padding: 9px 16px; background: #ff0000; border: none; border-radius: 20px;
  color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background .2s;
}
.yt-modal-btn:hover { background: #cc0000; }
.yt-modal-btn:disabled { background: var(--text-dim); cursor: not-allowed; }
.yt-modal-hint {
  margin-top: 7px; font-size: .75rem; color: var(--text-dim);
}
.yt-modal-body {
  flex: 1; overflow-y: auto; padding: 12px 16px;
}
.yt-modal-status {
  text-align: center; padding: 24px; color: var(--text-dim); font-size: .85rem;
}
.yt-modal-status i { font-size: 2rem; display: block; margin-bottom: 8px; }
.yt-result-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (max-width: 400px) { .yt-result-grid { grid-template-columns: 1fr; } }
.yt-result-item {
  cursor: pointer; border-radius: 10px; overflow: hidden;
  background: var(--bg-hover); border: 1px solid var(--border);
  transition: transform .15s, border-color .15s;
}
.yt-result-item:hover { transform: translateY(-2px); border-color: var(--primary-light); }
.yt-result-item img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin: 0; border-radius: 0;
}
.yt-result-info {
  padding: 7px 9px 9px;
}
.yt-result-title {
  font-size: .78rem; font-weight: 600; color: var(--text);
  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.yt-result-channel {
  font-size: .7rem; color: var(--text-dim); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -- «Carregar mais» (o -10-02-g): a ÚNICA regra nova deste arquivo --------------
   O botão e a linha de falha já herdam o desenho de .yt-modal-btn / .yt-modal-hint
   (o módulo dá-lhes as duas classes); faltava só o contentor, que nunca teve CSS. */
.yt-modal-more {
  display: flex; flex-direction: column; align-items: center; margin-top: 12px;
}

/* -- A pré-visualização no compositor (lote P): o cartão FORA do editor + o × ------- */
.yt-preview-caixa { position: relative; max-width: 420px; margin: 8px 0; }
.yt-preview-caixa .yt-embed { margin: 0; cursor: default; }
.yt-preview-remover {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.65); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.yt-preview-remover:hover { background: rgba(0,0,0,.85); }

/* 🙏 «Tudo quanto fizerdes, fazei-o de todo o coração.» — Colossenses 3.23 */