/* /modules/feed.css */
/* ===== Feed (página inicial) ===== */

/* Achata a moldura do painel quando o feed está aberto (remove a borda externa) */
.panel-inner.feed-flat{
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

.feed-root{ display:block; }
.feed-list{ display:flex; flex-direction:column; gap:12px; }

/* Card */
.feed-card{
  background:#fff;
  border:1px solid var(--line,#e5e7eb);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  overflow:hidden;
  border-color:#cfd4dc;
}

/* Cabeçalho */
.feed-head{ display:flex; align-items:center; gap:10px; padding:12px 12px 8px; }
.feed-avatar{
  width:34px; height:34px; border-radius:999px; flex:0 0 auto; background:#f3f4f6; overflow:hidden;
  display:grid; place-items:center; color:#9ca3af; border:1px solid var(--line,#e5e7eb);
}
.feed-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.feed-title{ display:flex; flex-direction:column; min-width:0; }
.feed-name{ font-weight:800; color:#111827; font-size:.95rem; line-height:1.2; }
.feed-meta{ font-size:.8rem; color:#6b7280; display:flex; gap:8px; align-items:center; }

/* Selo cinza básico */
.feed-badge{
  font-size:.7rem; padding:2px 6px; border-radius:999px; font-weight:800;
  border:1px solid #e5e7eb; color:#374151; background:#f9fafb;
}

/* Verde para “Resposta aprovada” */
.feed-badge--ok{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#065f46;
}

/* >>> NOVO: Vermelho para “Aguardando aprovação” */
.feed-badge--danger{
  background:#fee2e2;   /* vermelho claro */
  border-color:#fecaca;
  color:#991b1b;
}

/* Selo discreto do tipo de mídia (PDF/IMG) */
.feed-kind{
  font-size:.68rem;
  padding:2px 6px;
  border-radius:999px;
  font-weight:800;
  border:1px solid #e5e7eb;
  color:#6b7280;
  background:#f3f4f6;
}

/* Conteúdo */
.feed-body{ padding:8px 12px 12px; }

/* ===== Grade (reusa base da folha de anexos) ===== */
.feed-grid.anx-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px; margin-bottom:8px; grid-auto-flow:dense;
  align-items:stretch;
}
.feed-grid .anx-thumb{
  position:relative; width:100%; aspect-ratio:1/1;
  border:1px solid var(--line,#e5e7eb); border-radius:12px; overflow:hidden;
  background:#f8fafc; display:block; box-sizing:border-box;
}
.feed-grid .anx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.feed-grid .anx-thumb.hero{ grid-column:1 / -1; grid-row: span 2; aspect-ratio: 2 / 2; }
.feed-grid .anx-thumb .anx-more{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); color:#fff; font-weight:900; font-size:1rem;
}

/* ===== Layout especial p/ 3 imagens ===== */
.feed-grid.grid-3-landscape{
  grid-template-areas:
    "a a"
    "b c";
}
.feed-grid.grid-3-landscape .anx-item-1{ grid-area:a; aspect-ratio:2/1 !important; }
.feed-grid.grid-3-landscape .anx-item-2,
.feed-grid.grid-3-landscape .anx-item-3{ grid-area:auto; height:100%; }

.feed-grid.grid-3-portrait{
  grid-template-areas:
    "a b"
    "a c";
}
.feed-grid.grid-3-portrait .anx-item-1{ grid-area:a; aspect-ratio:1/2 !important; }
.feed-grid.grid-3-portrait .anx-item-2,
.feed-grid.grid-3-portrait .anx-item-3{ grid-area:auto; height:100%; }

/* ----- PDF refinado ----- */
.feed-pdf{ margin-bottom:8px; }

/* PRÉVIA DE PDF COM MAIS ALTURA (4:3) */
.feed-pdf-hero{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  min-height: 220px;
  border:1px solid var(--line,#e5e7eb);
  border-radius:12px;
  overflow:hidden;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
@media (max-width:420px){
  .feed-pdf-hero{ min-height: 200px; }
}
.feed-pdf-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.feed-pdf-fallback{ display:grid; place-items:center; color:#9ca3af; padding:22px 0; }

.feed-pdf-overlay{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 80%);
  color:#fff;
}
.feed-pdf-overlay .pdf-chip{
  background:#ef4444; color:#fff; font-weight:900;
  border-radius:999px; padding:2px 8px; font-size:.72rem; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.35);
  flex:0 0 auto;
}
.feed-pdf-overlay .pdf-info{ min-width:0; }
.feed-pdf-overlay .pdf-name{
  font-weight:800; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.feed-pdf-overlay .pdf-meta{
  font-size:.75rem; opacity:.9; margin-top:1px;
}

.feed-pdf-actions{
  position:absolute; top:8px; right:8px; display:flex; gap:6px;
}
.feed-pdf-actions .iconbtn{
  position:relative;
  display:grid; place-items:center;
  width:32px; height:32px; padding:0; border-radius:999px;
  border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(2,6,23,.15); cursor:pointer;
  transition:transform .12s ease, filter .15s ease, background-color .15s ease;
}
.feed-pdf-actions .iconbtn:hover{ filter:brightness(0.97); }
.feed-pdf-actions .iconbtn.is-pressed{ transform:scale(.94); }
.feed-pdf-actions .iconbtn[disabled]{ cursor:default; opacity:.7 }
@keyframes feed_spin{ to{ transform:rotate(360deg); } }
.feed-pdf-actions .iconbtn.is-loading::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:999px;
  border:2px solid currentColor;
  border-right-color: transparent;
  animation: feed_spin .8s linear infinite;
  opacity:.9;
}
.feed-pdf-actions .iconbtn.is-loading svg{ opacity:.35; }

/* Toast leve */
.feed-toast-wrap{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none;
  will-change: opacity;
}
.feed-toast{
  background:rgba(17,24,39,.92); color:#fff;
  padding:10px 14px; border-radius:10px;
  font-size:.9rem; box-shadow:0 8px 30px rgba(2,6,23,.25);
  animation:feed_toast_fade_in .15s ease;
}
.feed-toast.is-hiding{ animation:feed_toast_fade_out .12s ease forwards; }
@keyframes feed_toast_fade_in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes feed_toast_fade_out{ from{ opacity:1; } to{ opacity:0; } }

/* Texto do post */
.feed-text{ font-size:.95rem; color:#111827; white-space:pre-wrap; }

/* ——— Destaque da pergunta ——— */
:root{ --question-accent: var(--primary, #3b82f6); }

.feed-card[data-post-type="pergunta"] .feed-text{
  position:relative;
  margin:8px 0 10px;
  padding:12px 12px 12px 16px;
  background:#f8fbff;
  border:1px solid #e5effe;
  border-radius:12px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  font-size:1.06rem;
  line-height:1.55;
  color:#0f172a;
}
.feed-card[data-post-type="pergunta"] .feed-text::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-0.6px;
  width:6px;
  border-radius:12px 0 0 12px;
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--question-accent), white 10%),
    var(--question-accent)
  );
}
.feed-card[data-post-type="pergunta"] .feed-text:hover{
  background:#f2f7ff;
  border-color:#dbeafe;
}

/* Compartilhado com mesmo balão */
.feed-card[data-post-type="compartilhar"] .feed-text{
  position:relative;
  margin:8px 0 10px;
  padding:12px 12px 12px 16px;
  background:#f8fbff;
  border:1px solid #e5effe;
  border-radius:12px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  font-size:1.06rem;
  line-height:1.55;
  color:#0f172a;
}
.feed-card[data-post-type="compartilhar"] .feed-text::before{
  content:"";
  position:absolute;
  left:-1px; top:-1px; bottom:-0.6px; width:6px;
  border-radius:12px 0 0 12px;
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--question-accent), white 10%),
    var(--question-accent)
  );
}
.feed-card[data-post-type="compartilhar"] .feed-text:hover{
  background:#f2f7ff; border-color:#dbeafe;
}

/* ——— Resposta (balão bege) ——— */
:root{
  --answer-beige-bg: #fffaf3;
  --answer-beige-br: #efd9b5;
}
.feed-answer-approved{
  position:relative;
  margin:8px 0 10px;
  padding:12px 12px 12px 14px;
  background:var(--answer-beige-bg);
  border:1px dashed var(--answer-beige-br);
  border-radius:14px;
  font-size:1.06rem;
  line-height:1.55;
  color:#1f2937;
  white-space:pre-wrap;
}
.feed-answer-approved::before{ content:none; }
.feed-answer-approved:hover{
  background:#fffcf7;
  border-color:#e8cfa6;
}

/* Se houver resposta aprovada, esconda CTAs */
.feed-card[data-has-approved="1"] .feed-foot{ display:none !important; }

/* Rodapé simples (reservado) */
.feed-foot{ padding:8px 12px 12px; display:flex; gap:8px; }

/* Loader & empty */
.feed-loader, .feed-empty{
  padding:16px; text-align:center; color:#6b7280; font-size:.95rem;
}
.feed-skel{
  height:180px;
  background:linear-gradient(90deg,#f3f4f6, #e5e7eb, #f3f4f6);
  background-size:200% 100%;
  animation:skel 1.2s infinite linear;
  border-radius:12px;
  margin:0;
}
@keyframes skel{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.feed-more{
  display:block; width:100%; padding:10px 14px; border:1px solid var(--line,#e5e7eb);
  background:#fff; color:#111; border-radius:12px; font-weight:800; cursor:pointer; margin-top:8px;
}
.feed-more[disabled]{ opacity:.6; cursor:not-allowed; }

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .feed-pdf-actions .iconbtn{ transition:none; }
  .feed-pdf-actions .iconbtn.is-loading::after{ animation:none; }
  .feed-toast{ animation:none !important; }
  .feed-toast.is-hiding{ animation:none !important; opacity:0; }
}
@media (max-width:420px){
  .feed-head{ padding:10px 10px 6px }
  .feed-body{ padding:6px 10px 10px }
  .feed-card[data-post-type="pergunta"] .feed-text,
  .feed-card[data-post-type="compartilhar"] .feed-text,
  .feed-answer-approved{
    padding:10px 10px 10px 12px;
    font-size:1.01rem;
  }
  .feed-pdf-overlay .pdf-name{ font-size:.88rem; }
  .feed-pdf-actions .iconbtn{ width:30px; height:30px; }
}

/* >>> Bloco de respostas dentro do feed */
.ans-wrap{
  border-top:1px solid var(--line,#e5e7eb);
  background:#fcfdff;
}
.ans-card{ border-top:1px dashed var(--line,#e5e7eb); }
.ans-card:first-child{ border-top:0; }

.ans-head{ display:flex; align-items:center; gap:10px; padding:12px 12px 6px; }
.ans-avatar{
  width:30px; height:30px; border-radius:999px; flex:0 0 auto; background:#f3f4f6; overflow:hidden;
  display:grid; place-items:center; color:#9ca3af; border:1px solid var(--line,#e5e7eb);
}
.ans-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.ans-title{ display:flex; flex-direction:column; min-width:0; }
.ans-name{ font-weight:800; color:#111827; font-size:.92rem; line-height:1.2; }
.ans-meta{ font-size:.78rem; color:#6b7280; display:flex; gap:8px; align-items:center; }
.ans-body{ padding:6px 12px 10px; }