/* ─────────────────────────────────────── GALLERY ─────────────────────────────────────── */
.bp-gallery-hero {
  padding: 120px 32px 32px;
  border-bottom: 1px solid var(--bp-line);
}
.bp-gallery-hero-inner { max-width: 1240px; margin: 0 auto; }

.bp-gallery-wrap { max-width: 1480px; margin: 0 auto; padding: 40px 32px 80px; }
.bp-gallery-grid {
  display: grid;
  /* 3 colunas: nav esquerda · feed · atividade direita.
     Sidebar de nav é compacta (220px) e sticky. */
  grid-template-columns: 220px 1fr 300px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1100px) {
  .bp-gallery-grid { grid-template-columns: 200px 1fr; }
  .bp-gallery-grid > .bp-panorama-side { display: none; }
}
@media (max-width: 760px) {
  .bp-gallery-grid { grid-template-columns: 1fr; }
  .g-side-clean { position: static !important; }
}

.bp-gallery-side {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 18px;
}
.bp-gallery-side-box {
  border: 1px solid var(--bp-glass-border);
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  padding: 18px 18px 20px;
}
.bp-gal-label {
  display: block;
  font-family: var(--bp-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bp-ink); margin-bottom: 12px;
}
.bp-gal-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--bp-r);
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  color: var(--bp-ink-mute);
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.bp-gal-search:focus-within {
  border-color: var(--bp-blue);
  background: rgba(255,255,255,0.04);
  color: var(--bp-blue-hi);
  box-shadow: var(--bp-shadow-focus);
}
.bp-gal-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--bp-ink); font-family: var(--bp-sans); font-size: 13px;
}
.bp-gal-search input::placeholder { color: var(--bp-ink-faint); }

.bp-gal-radio-group { display: flex; flex-direction: column; gap: 2px; }
.bp-gal-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  font-size: 13px; color: var(--bp-ink-dim);
  cursor: pointer;
  transition: color 160ms var(--bp-ease);
}
.bp-gal-radio input { display: none; }
.bp-gal-radio-dot {
  width: 10px; height: 10px; border: 1.5px solid var(--bp-line-strong);
  border-radius: 50%; flex-shrink: 0;
  transition: all 180ms var(--bp-ease);
}
.bp-gal-radio:hover { color: var(--bp-ink); }
.bp-gal-radio.on { color: var(--bp-teal); }
.bp-gal-radio.on .bp-gal-radio-dot {
  background: var(--bp-teal); border-color: var(--bp-teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 255,0.15);
}

.bp-gal-clear {
  font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-ink-mute); background: transparent;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  padding: 10px 14px; cursor: pointer;
  transition: all 160ms var(--bp-ease);
}
.bp-gal-clear:hover {
  border-color: var(--bp-blue);
  color: var(--bp-blue-hi);
  background: var(--bp-blue-glow);
}

.bp-gallery-main { min-width: 0; }
.bp-gallery-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--bp-line);
  margin-bottom: 24px;
}
.bp-gal-count { font-size: 14px; color: var(--bp-ink-dim); }
.bp-gal-count strong { color: var(--bp-ink); font-weight: 700; font-size: 16px; }
.bp-gal-sort-live {
  font-family: var(--bp-mono); font-size: 10.5px;
  color: var(--bp-ink-faint); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── Active filter chip ───────────────────────────────────── */
.bp-active-filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 14px;
  background: color-mix(in oklch, var(--bp-teal) 10%, var(--bp-bg-elev));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 35%, var(--bp-line));
  border-radius: 999px;
  font-size: 13px; color: var(--bp-ink-dim);
  margin-bottom: 18px;
}
.bp-active-filter-chip svg { color: var(--bp-teal); flex-shrink: 0; }
.bp-active-filter-chip strong { color: var(--bp-ink); font-weight: 600; margin-left: -2px; }
.bp-active-filter-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 4px;
  border: none; background: transparent; border-radius: 50%;
  color: var(--bp-ink-dim); cursor: pointer;
  transition: background 160ms, color 160ms;
}
.bp-active-filter-clear:hover { background: color-mix(in oklch, var(--bp-teal) 18%, transparent); color: var(--bp-ink); }

/* ── Clickable pills (filterable) ─────────────────────────── */
.bp-pill-clickable,
.g-ent-pill-clickable,
.bp-metric-qual-clickable,
.bp-br-cluster-link {
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.bp-pill-clickable:hover,
.g-ent-pill-clickable:hover {
  background: color-mix(in oklch, var(--bp-teal) 16%, var(--bp-bg-elev));
  border-color: color-mix(in oklch, var(--bp-teal) 45%, var(--bp-line));
  color: var(--bp-ink);
}
.bp-metric-qual-clickable:hover { filter: brightness(0.95); transform: translateY(-1px); }
.bp-br-cluster-link:hover { color: var(--bp-teal); text-decoration: underline; text-underline-offset: 3px; }

/* ── Related ideas section ────────────────────────────────── */
.bp-related-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 48px 120px;
  border-top: 1px solid var(--bp-line);
}
.bp-related-head { margin-bottom: 40px; max-width: 640px; }
.bp-related-title {
  font-family: var(--bp-serif);
  font-size: 36px; font-weight: 500; letter-spacing: -0.02em;
  margin: 10px 0 12px; color: var(--bp-ink);
}
.bp-related-sub {
  font-size: 15px; line-height: 1.55; color: var(--bp-ink-dim);
  margin: 0;
}
.bp-related-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 1100px) { .bp-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bp-related-grid { grid-template-columns: 1fr; } }

.bp-related-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 20px 20px 56px;
  min-height: 220px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  cursor: pointer;
  transition: border-color 220ms var(--bp-ease), transform 240ms var(--bp-ease), box-shadow 220ms;
}
.bp-related-card:hover {
  border-color: color-mix(in oklch, var(--bp-teal) 45%, var(--bp-line));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px color-mix(in oklch, var(--bp-teal) 30%, transparent);
}
.bp-related-card-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.bp-related-conn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bp-mono); font-size: 10px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--bp-ink-dim);
}
.bp-related-conn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bp-ink-faint);
}
.bp-related-conn-forte .bp-related-conn-dot { background: var(--bp-teal); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bp-teal) 22%, transparent); }
.bp-related-conn-relevante .bp-related-conn-dot { background: color-mix(in oklch, var(--bp-teal) 75%, var(--bp-ink-faint)); }
.bp-related-conn-forte { color: var(--bp-teal); }

.bp-related-card-title {
  font-family: var(--bp-serif);
  font-size: 19px; line-height: 1.3; font-weight: 500;
  margin: 0 0 10px; color: var(--bp-ink);
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-related-card-pitch {
  font-size: 13.5px; line-height: 1.5; color: var(--bp-ink-dim);
  margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-related-card-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--bp-line);
  font-size: 12px;
}
.bp-related-card-author {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bp-ink-dim);
}
.bp-related-card-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklch, var(--bp-teal) 18%, var(--bp-bg-elev));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 35%, var(--bp-line));
  color: var(--bp-ink); font-size: 10px; font-weight: 600;
}
.bp-related-card-votes { color: var(--bp-ink-faint); font-family: var(--bp-mono); font-size: 11px; }
.bp-related-card-cluster {
  position: absolute; bottom: 12px; left: 20px;
  font-family: var(--bp-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bp-ink-faint);
  max-width: calc(100% - 40px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ────────────────────────────────────────────────────────────────────────
   Related v2 — carrossel horizontal com cards estilo galeria
   ──────────────────────────────────────────────────────────────────────── */

.bp-related-section-v2 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 48px 48px;
  position: relative;
}
/* Glow atmosférico + horizon-line removidos (2026-05-02): user pediu pra
   tirar; o reorg dos blocos eliminou a necessidade de marcar a
   transição visualmente entre comentários e "Continue Explorando". */
.bp-related-section-v2 .bp-related-head {
  margin-bottom: 18px;
  max-width: none;
}
/* Título único "Continue explorando" — substituiu eyebrow + h2 + subtítulo
   pra deixar a seção mais compacta. Tamanho um pouco maior pra ganhar
   peso visual mesmo sozinho. */
.bp-related-title-only {
  font-family: var(--bp-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-blue-hi, #38b0ff);
  margin: 0;
}

/* Wrapper com setas FORA do trilho (estilo hero MediaCarousel)
   Layout flex: [seta-prev] [trilho-flex-1] [seta-next]
   Mantém setas sempre visíveis em desktop (apenas opacidade muda quando disabled). */
.bp-related-carousel-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Setas: glass retangular, igualzinho hero (bp-mc-nav). */
.bp-related-arrow {
  flex-shrink: 0;
  width: 48px;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,16,24,0.60);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--bp-r-lg);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transition:
    background   var(--bp-dur, 200ms) var(--bp-ease, ease),
    border-color var(--bp-dur, 200ms) var(--bp-ease, ease),
    color        var(--bp-dur, 200ms) var(--bp-ease, ease),
    box-shadow   var(--bp-dur, 200ms) var(--bp-ease, ease),
    opacity      var(--bp-dur, 200ms) var(--bp-ease, ease);
}
.bp-related-arrow:hover:not(.is-disabled) {
  background: rgba(0,153,255,0.14);
  border-color: rgba(0,153,255,0.28);
  color: var(--bp-blue-hi, #38b0ff);
  box-shadow:
    0 8px 32px -8px rgba(0,153,255,0.22),
    0 0 0 1px rgba(0,153,255,0.10) inset;
}
.bp-related-arrow.is-disabled {
  opacity: 0.25;
  pointer-events: none;
}
.bp-related-arrow svg {
  display: block;
  transition: transform 180ms var(--bp-ease, ease);
}
.bp-related-arrow:hover:not(.is-disabled) svg {
  transform: scale(1.1);
}

/* Trilho com fades nas pontas pra última card sumir suavemente.
   `mask-image` cria um gradient que esconde os pixels nas bordas. */
.bp-related-carousel {
  list-style: none; margin: 0; padding: 8px 0;
  flex: 1; min-width: 0;
  display: flex; gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade nas pontas (esquerda + direita) — se descobre dinamicamente
     via classes is-at-start/is-at-end aplicadas no JS. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
  transition: -webkit-mask-image 240ms var(--bp-ease, ease),
                      mask-image 240ms var(--bp-ease, ease);
}
.bp-related-carousel.is-at-start {
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%, #000 calc(100% - 32px), transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    #000 0%, #000 calc(100% - 32px), transparent 100%
  );
}
.bp-related-carousel.is-at-end {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%, #000 32px, #000 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%, #000 32px, #000 100%
  );
}
.bp-related-carousel.is-at-start.is-at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.bp-related-carousel::-webkit-scrollbar { display: none; }

/* Card v2 — glass + hover scale + thumb */
.bp-related-card-v2 {
  position: relative;
  flex: 0 0 340px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: var(--bp-r-lg, 12px);
  border: 1px solid var(--bp-line);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.02) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  overflow: hidden;
  transition: transform 240ms var(--bp-ease, ease),
              border-color 220ms,
              box-shadow 240ms;
  outline: none;
}
.bp-related-card-v2:hover,
.bp-related-card-v2:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--bp-teal) 50%, var(--bp-line));
  box-shadow:
    0 12px 32px -14px color-mix(in oklch, var(--bp-teal) 35%, transparent),
    0 0 0 1px color-mix(in oklch, var(--bp-teal) 25%, transparent) inset;
}

.bp-related-card-v2-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bp-teal) 8%, var(--bp-bg-elev)) 0%,
    color-mix(in oklch, var(--bp-bg) 95%, var(--bp-teal)) 100%);
  overflow: hidden;
}
.bp-related-card-v2-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--bp-ease, ease);
}
.bp-related-card-v2:hover .bp-related-card-v2-thumb img {
  transform: scale(1.05);
}
.bp-related-card-v2-thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--bp-ink-faint);
}
.bp-related-card-v2-thumb-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.bp-related-card-v2-conn {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bp-bg) 65%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bp-line);
  font-family: var(--bp-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bp-ink-dim);
}
.bp-related-card-v2-conn.bp-related-conn-forte {
  border-color: color-mix(in oklch, var(--bp-teal) 50%, var(--bp-line));
  color: var(--bp-teal);
}

.bp-related-card-v2-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 14px 16px 16px;
  min-height: 200px;
}
.bp-related-card-v2-eyebrow {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
  font-family: var(--bp-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bp-ink-faint);
}
.bp-related-card-v2-title {
  font-family: var(--bp-serif);
  font-size: 18px; line-height: 1.25; font-weight: 500;
  margin: 0 0 8px; color: var(--bp-ink);
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-related-card-v2-pitch {
  font-size: 13px; line-height: 1.5; color: var(--bp-ink-dim);
  margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.bp-related-card-v2-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--bp-line);
  font-size: 12px;
}
.bp-related-card-v2-author {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bp-ink-dim);
  text-decoration: none;
  min-width: 0;
}
.bp-related-card-v2-author:hover { color: var(--bp-teal); }
.bp-related-card-v2-author-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-related-card-v2-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklch, var(--bp-teal) 18%, var(--bp-bg-elev));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 35%, var(--bp-line));
  color: var(--bp-ink); font-size: 9px; font-weight: 700;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.bp-related-card-v2-votes {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--bp-ink-faint); font-family: var(--bp-mono); font-size: 11px;
  flex-shrink: 0;
}

/* Mobile: card menor + setas escondidas (swipe nativo) */
@media (max-width: 640px) {
  .bp-related-section-v2 { padding: 36px 24px 32px; }
  .bp-related-section-v2 .bp-related-head { margin-bottom: 14px; }
  .bp-related-title-only { font-size: 16px; }
  /* Mobile: glow um pouco menor pra não dominar */
  .bp-related-section-v2::before {
    top: -24px;
    height: 72px;
  }
  .bp-related-section-v2::after {
    top: 12px;
    left: 15%;
    right: 15%;
  }
  .bp-related-card-v2 { flex-basis: 280px; }
  .bp-related-arrow { display: none; }
  .bp-related-carousel { padding: 8px 4px; gap: 12px; }
}

.bp-gal-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.bp-gal-card {
  position: relative;
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  transition:
    transform var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
  display: flex; flex-direction: column;
}
.bp-gal-card.is-fresh {
  animation: bpFadeUp 500ms var(--bp-ease) both;
}
.bp-gal-card:hover {
  border-color: var(--bp-line-strong);
  border-top-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  transform: translateY(-3px);
  box-shadow: var(--bp-shadow-card-hover);
}
.bp-gal-card:hover .bp-gal-card-thumb img,
.bp-gal-card:hover .bp-gal-card-thumb-ph { transform: scale(1.04); }
.bp-gal-card:hover .bp-gal-card-thumb::before { opacity: 0.85; }
.bp-gal-card:hover .bp-gal-card-overlay { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bp-gal-card:hover { transform: none; }
}

.bp-gal-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #001F33 0%, #0a1626 60%, #001028 100%);
}
.bp-gal-card-thumb::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, var(--bp-blue-soft) 0%, transparent 60%);
  opacity: 0.5;
  transition: opacity var(--bp-dur-slow) var(--bp-ease);
  pointer-events: none;
}
.bp-gal-card-thumb img,
.bp-gal-card-thumb-ph {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--bp-ease), color var(--bp-dur) var(--bp-ease);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0, 153, 255, 0.45);
}
.bp-gal-card:hover .bp-gal-card-thumb-ph { color: rgba(56, 176, 255, 0.65); }
.bp-gal-card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 14px 16px;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.72) 100%);
  opacity: 0;
  transition: opacity var(--bp-dur) var(--bp-ease);
  pointer-events: none;
  z-index: 2;
}
.bp-gal-card-overlay-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--bp-blue-hi);
}
.bp-gal-card-mine {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--bp-mono); font-size: 9px; font-weight: 600;
  padding: 4px 9px; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--bp-r-sm);
  background: var(--bp-blue); color: var(--bp-blue-ink);
  z-index: 2;
}

.bp-gal-card-body {
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; flex: 1;
  gap: 4px;
}
.bp-gal-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}
/* Pill de categoria — mesmo glass style do trending hero. */
.bp-gal-card-cluster {
  display: inline-flex;
  align-items: center;
  height: 28px;
  min-height: 0;
  background: rgba(8, 11, 16, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--bp-blue-hi, #38b0ff);
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 11px;
  border-radius: var(--bp-r-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px -6px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.bp-gal-qualitative {
  font-family: var(--bp-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.bp-gal-qualitative.high { color: var(--bp-teal); }
.bp-gal-qualitative.mid  { color: var(--bp-orange); }
.bp-gal-qualitative.low,
.bp-gal-qualitative.mute { color: var(--bp-ink-faint); }

.bp-gal-card-title {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25; margin: 0 0 8px;
  color: var(--bp-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.bp-gal-card-pitch {
  font-family: var(--bp-poster); font-style: italic;
  font-size: 14px; color: var(--bp-ink-dim);
  line-height: 1.5; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.bp-gal-hair {
  height: 1px; background: var(--bp-line);
  margin: auto 0 12px;
}
.bp-gal-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.bp-gal-card-author {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bp-mono); font-size: 10.5px;
  color: var(--bp-ink-mute); letter-spacing: 0.04em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-gal-card-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0, 153, 255,0.14); border: 1px solid rgba(0, 153, 255,0.32);
  color: var(--bp-teal); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative; overflow: hidden;  /* pra img absolute cobrir o avatar */
}
/* Foto do autor cobre as iniciais quando carrega; se falhar (Google bloqueio
 * etc.), o onError esconde a img e o texto das iniciais reaparece atrás. */
.bp-author-avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  background: var(--bp-bg);  /* tampa as iniciais quando carrega */
}
.bp-gal-card-stats {
  display: inline-flex; gap: 14px; flex-shrink: 0;
}
.bp-gal-card-stats span {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-ink-mute);
}

.bp-gallery-empty {
  border: 1px dashed var(--bp-line-strong);
  border-radius: var(--bp-r-lg);
  padding: 60px 32px; text-align: center;
  background: rgba(255,255,255,0.025);
  display: flex; flex-direction: column; gap: 18px; align-items: center;
  color: var(--bp-ink-mute);
}

/* ─────────────────────────────────────── DETAIL ─────────────────────────────────────── */
.bp-detail-wrap {
  max-width: 1240px; margin: 0 auto;
  /* Reduzido (2026-05-02): bottom 80→24 pra reduzir o gap entre o final
     dos comentários e a seção "Continue explorando" abaixo. */
  padding: 104px 32px 24px;
}
.bp-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
.bp-detail-main { min-width: 0; }

/* Tabs + conteúdo (comentários, avaliação, arquivos, etc.) ocupam a largura
   total abaixo da apresentação. A sidebar (.bp-detail-side) fica vinculada
   apenas à .bp-detail-grid acima — quando o user rola pra esta seção, a
   sticky sidebar sai naturalmente da viewport (parent acabou).  */
.bp-detail-tabs-wrap {
  margin-top: 24px;
  width: 100%;
  min-width: 0;
}
.bp-detail-tabs-main { min-width: 0; }

.bp-breadcrumb {
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-ink-faint); letter-spacing: 0.06em;
  margin-bottom: 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.bp-breadcrumb a {
  color: var(--bp-ink-mute);
  transition: color 160ms var(--bp-ease);
}
.bp-breadcrumb a:hover { color: var(--bp-teal); }
.bp-br-sep { color: var(--bp-line-strong); }
.bp-br-cluster { color: var(--bp-teal); }
.bp-br-curr { color: var(--bp-ink-dim); }

/* Hero */
/* ── Cover (21:9 acima do hero) ─────────────────────────────── */
.bp-detail-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--bp-r-lg);
  overflow: hidden;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #001F33 0%, #002a4a 50%, #001028 100%);
  border: 1px solid var(--bp-line);
  box-shadow: var(--bp-shadow-elevated);
  animation: bpRise 700ms var(--bp-ease) both;
}
.bp-detail-cover::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, var(--bp-blue-soft), transparent 60%);
  opacity: 0.55;
  pointer-events: none;
}
.bp-detail-cover img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bp-detail-cover-ph {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0, 153, 255, 0.5);
  animation: bpDetailGlyphIn 600ms var(--bp-ease) both;
}
@keyframes bpDetailGlyphIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-detail-cover { animation: none; }
  .bp-detail-cover-ph { animation: none; opacity: 1; transform: none; }
}

.bp-detail-hero {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--bp-line);
  margin-bottom: 36px;
  animation: bpRise 700ms var(--bp-ease) both;
}
.bp-detail-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.bp-detail-eyebrow-pill {
  font-family: var(--bp-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 5px 11px;
  border-radius: var(--bp-r-sm);
  background: var(--bp-blue-glow);
  color: var(--bp-blue-hi);
  border: 1px solid var(--bp-blue-soft);
}
.bp-detail-eyebrow-cluster {
  font-family: var(--bp-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bp-ink-mute);
}
.bp-detail-title {
  font-family: var(--bp-poster); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 0 0 16px;
  text-wrap: balance;
}
.bp-detail-pitch {
  font-family: var(--bp-poster); font-style: italic;
  font-size: 19px; line-height: 1.55;
  color: var(--bp-ink-dim); margin: 0 0 24px;
  max-width: 760px; text-wrap: pretty;
}
.bp-detail-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.bp-detail-author {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--bp-ink-dim);
}
.bp-detail-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 153, 255,0.14); border: 1px solid rgba(0, 153, 255,0.38);
  color: var(--bp-teal); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.bp-detail-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.bp-detail-author-name { color: var(--bp-ink); font-weight: 600; }
.bp-detail-author-sep { color: var(--bp-line-strong); }
.bp-detail-author-date {
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-ink-faint); letter-spacing: 0.04em;
}

.bp-btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bp-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px; border: 1px solid var(--bp-line-strong);
  background: transparent; color: var(--bp-ink-mute);
  cursor: pointer; transition: all 160ms var(--bp-ease);
}
.bp-btn-ghost-sm:hover, .bp-btn-ghost-sm.on {
  border-color: var(--bp-teal); color: var(--bp-teal);
}

/* Botão "Editar ideia" no header da página de detalhe — versão polida
   da ghost-sm: bordas arredondadas, hover com efeito glass + shadow,
   leve lift no Y. (2026-05-03, a pedido do user) */
.bp-btn-editar-ideia {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  font-family: var(--bp-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bp-blue-hi, #38b0ff);
  background: rgba(0, 153, 255, 0.04);
  border: 1px solid rgba(0, 153, 255, 0.45);
  border-radius: 10px;
  cursor: pointer;
  transition:
    transform   220ms var(--bp-ease),
    background  220ms var(--bp-ease),
    border-color 220ms var(--bp-ease),
    box-shadow  220ms var(--bp-ease),
    color       220ms var(--bp-ease);
}
.bp-btn-editar-ideia svg {
  flex-shrink: 0;
  transition: transform 220ms var(--bp-ease);
}
.bp-btn-editar-ideia:hover {
  color: #5cc1ff;
  background: rgba(0, 153, 255, 0.10);
  border-color: rgba(0, 153, 255, 0.85);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(0, 153, 255, 0.12),
    0 10px 24px -8px rgba(0, 153, 255, 0.45),
    0 4px 12px -4px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bp-btn-editar-ideia:hover svg {
  transform: translateX(-1px) rotate(-3deg);
}
.bp-btn-editar-ideia:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 3px rgba(0, 153, 255, 0.18),
    0 2px 6px -2px rgba(0, 0, 0, 0.55);
}
.bp-btn-editar-ideia:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0, 153, 255, 0.25),
    0 4px 12px -4px rgba(0, 0, 0, 0.55);
}

.bp-detail-badges {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-ink-mute); letter-spacing: 0.08em; text-transform: uppercase;
  flex-wrap: wrap;
}
.bp-detail-badge-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--bp-line-strong); }
.bp-detail-stat { font-variant-numeric: tabular-nums; }

/* Mídias */
.bp-detail-medias { margin-bottom: 40px; }
.bp-media-scroll {
  display: flex; gap: 10px;
  overflow-x: auto; padding-bottom: 6px;
}
.bp-media-scroll::-webkit-scrollbar { height: 6px; }
.bp-media-scroll::-webkit-scrollbar-track { background: var(--bp-bg-elev); }
.bp-media-scroll::-webkit-scrollbar-thumb { background: var(--bp-line-strong); }
.bp-media-thumb {
  position: relative; flex-shrink: 0;
  width: 220px; height: 140px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  overflow: hidden; cursor: pointer;
  transition: border-color 160ms var(--bp-ease);
  padding: 0;
}
.bp-media-thumb:hover { border-color: var(--bp-teal); }
.bp-media-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.bp-media-thumb.ghost {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--bp-ink-mute);
}
.bp-media-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 10px;
  font-family: var(--bp-mono); font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--bp-ink); background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-media-thumb.ghost .bp-media-caption {
  position: static; background: none; text-align: center;
  padding: 0; color: var(--bp-ink-mute);
}

/* ── Admin · Triagem editorial ──────────────────────────────────────────────
   Lista de submissões rejeitadas pela triagem Haiku, pendentes de revisão
   humana. Moderador aprova manualmente (vai pro pipeline) ou confirma rejeição. */
.g-admin-section-head h2 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 8px;
  color: var(--bp-ink);
}
.g-admin-section-head p {
  color: var(--bp-ink-mute); font-size: 13.5px;
  line-height: 1.5; margin: 0 0 24px;
}

.g-admin-triagem-list {
  display: flex; flex-direction: column; gap: 16px;
}

.g-triagem-card {
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}

.g-triagem-card-head {
  display: flex; gap: 16px;
  align-items: flex-start; justify-content: space-between;
}

.g-triagem-card-eyebrow {
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bp-ink-mute);
  margin-bottom: 6px;
}

.g-triagem-card-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bp-ink);
  margin: 0;
}

.g-triagem-score {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
  font-family: var(--bp-mono);
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border: 1px solid var(--bp-line);
  border-radius: 6px;
  background: var(--bp-bg);
}
.g-triagem-score-num {
  font-size: 22px; font-weight: 700;
  color: var(--bp-red, #dc2626);
  line-height: 1;
}
.g-triagem-score-thr {
  font-size: 10px; color: var(--bp-ink-mute);
  letter-spacing: 0.04em;
}

.g-triagem-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bp-ink-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.g-triagem-motivo {
  border-left: 3px solid var(--bp-red, #dc2626);
  padding: 10px 14px;
  background: color-mix(in srgb, var(--bp-red, #dc2626) 6%, transparent);
}
.g-triagem-motivo-label {
  display: block;
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bp-red, #dc2626) 80%, var(--bp-ink));
  margin-bottom: 6px;
}
.g-triagem-motivo p {
  margin: 0; font-size: 13px; line-height: 1.5;
  color: var(--bp-ink-dim);
}

.g-triagem-card-actions {
  display: flex; gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bp-line);
}

/* ── Tags row nos cards e detail (pills clicáveis) ─────────────────────────
   Click numa pill propaga onTagClick(tag) → setActiveFilter({kind:'tag'}). */
.g-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0 0;
  align-items: center;
}
.g-tag-chip {
  background: transparent;
  border: 1px solid var(--bp-line);
  color: var(--bp-ink-mute);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.g-tag-chip:hover {
  border-color: var(--bp-teal);
  color: var(--bp-teal);
  background: color-mix(in srgb, var(--bp-teal) 8%, transparent);
}
.g-tag-overflow {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  color: var(--bp-ink-mute);
  letter-spacing: 0.04em;
  padding: 0 4px;
  cursor: default;
}
.g-tags-row-compact .g-tag-chip {
  font-size: 10.5px;
  padding: 2px 8px;
}

/* ── Score chips nos cards (Curadoria + Comunidade) ───────────────────────
   Substitui a antiga barra "Avaliação da Guilda". Mostra os 2 scores numéricos
   lado a lado com cor por banda (high/mid/low). Usado em FeedCard + IdeaCard. */
.g-score-chips {
  display: flex;
  gap: 10px;
  /* Mais respiro: separa de TagsRow em cima e do Foot embaixo. */
  margin: 18px 0 20px;
}
.g-score-chips-compact { gap: 8px; }

.g-score-chip {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 9px 12px 10px;
  background: rgba(8, 11, 16, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px -4px rgba(0, 0, 0, 0.35);
  min-width: 0;
}
.g-score-chip-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.g-score-chip-label {
  font-family: var(--bp-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bp-ink-mute);
  white-space: nowrap;
}
.g-score-chip-num {
  font-family: var(--bp-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.g-score-chip-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.g-score-chip-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.g-score-chip-high .g-score-chip-num,
.g-score-chip-high .g-score-chip-label { color: var(--bp-teal); }
.g-score-chip-high .g-score-chip-bar-fill { background: var(--bp-teal); }
.g-score-chip-mid .g-score-chip-num,
.g-score-chip-mid .g-score-chip-label { color: var(--bp-orange, #d97706); }
.g-score-chip-mid .g-score-chip-bar-fill { background: var(--bp-orange, #d97706); }
.g-score-chip-low .g-score-chip-num,
.g-score-chip-low .g-score-chip-label { color: var(--bp-red, #dc2626); }
.g-score-chip-low .g-score-chip-bar-fill { background: var(--bp-red, #dc2626); }
.g-score-chip-mute .g-score-chip-num { color: var(--bp-ink-mute); opacity: 0.6; }
.g-score-chip-mute .g-score-chip-bar-fill { background: var(--bp-line); }

/* ── Curador · Brand header da sidebar ─────────────────────────────────── */
.bp-curador-side-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 12px;
  flex-shrink: 0;
}
.bp-curador-side-brand-mark {
  background: var(--bp-blue-glow);
  border: 1px solid color-mix(in srgb, var(--bp-blue) 40%, transparent);
  border-radius: var(--bp-r);
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--bp-blue-soft, rgba(0,153,255,0.12)),
              var(--bp-shadow-card);
}
.bp-curador-side-brand-text {
  display: flex; flex-direction: column; line-height: 1.1;
  color: var(--bp-ink); font-weight: 700; font-size: 15px;
}
.bp-curador-side-brand-sub {
  font-family: var(--bp-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-ink-mute);
  margin-top: 3px;
}

/* + Novo chat — botão grande primário */
.bp-curador-side-new-big {
  margin: 0 12px 14px;
  padding: 11px 14px;
  background: var(--bp-blue-glow);
  color: var(--bp-blue-hi);
  border: 1px solid var(--bp-blue-soft);
  border-radius: var(--bp-r);
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition:
    background var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    transform var(--bp-dur) var(--bp-ease);
  flex-shrink: 0;
}
.bp-curador-side-new-big:hover {
  background: var(--bp-blue);
  color: var(--bp-blue-ink);
  border-color: var(--bp-blue);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--bp-blue-soft), 0 8px 20px -8px var(--bp-blue-soft);
}
.bp-curador-side-new-icon {
  font-size: 16px; line-height: 1;
  color: var(--bp-teal);
  font-weight: 700;
}

/* Profile card — footer da sidebar */
.bp-curador-side-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin: 8px 8px 12px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  flex-shrink: 0;
}
.bp-curador-side-profile-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bp-teal) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--bp-teal) 50%, transparent);
  color: var(--bp-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.bp-curador-side-profile-info {
  display: flex; flex-direction: column; line-height: 1.2;
  min-width: 0;
}
.bp-curador-side-profile-name {
  font-size: 13px; font-weight: 600;
  color: var(--bp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-curador-side-profile-role {
  font-family: var(--bp-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bp-ink-mute);
}

/* ── Curador · Chat header (título + ações) ──────────────────────────── */
.bp-curador-chat-header {
  padding: 12px 24px;
  border-bottom: 1px solid var(--bp-line);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bp-bg);
  flex-shrink: 0;
}
.bp-curador-chat-header-title {
  flex: 1; min-width: 0;
}
.bp-curador-chat-title-btn {
  background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bp-ink);
  font-size: 16px; font-weight: 600;
  padding: 6px 10px; margin-left: -10px;
  border-radius: 6px;
  max-width: 100%;
  transition: background 120ms ease;
}
.bp-curador-chat-title-btn:hover {
  background: rgba(255,255,255,0.04);
}
.bp-curador-chat-title-btn span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 480px;
}
.bp-curador-chat-title-btn svg { color: var(--bp-ink-mute); flex-shrink: 0; }

.bp-curador-chat-header-actions {
  display: flex; align-items: center; gap: 12px;
}
.bp-curador-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--bp-line);
  color: var(--bp-ink-dim);
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  transition: all 140ms ease;
}
.bp-curador-action-btn:hover {
  border-color: var(--bp-line-strong);
  color: var(--bp-ink);
  background: rgba(255,255,255,0.03);
}

/* ── Curador · Input area (estilo Claude/ChatGPT) ────────────────────── */
.bp-curador-input-wrap {
  padding: 14px 32px 14px;
  background: var(--bp-bg);
  border-top: 1px solid var(--bp-line);
  flex-shrink: 0;
}

/* ── Curador · Quick-prompts (5 atalhos pra gerar documentos) ────────── */
.bp-curador-quick-prompts {
  max-width: 880px; margin: 0 auto 8px;
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.bp-curador-quick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bp-line);
  border-radius: 999px;
  color: var(--bp-ink-dim);
  font-family: var(--bp-sans);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition:
    border-color  220ms var(--bp-ease),
    background    220ms var(--bp-ease),
    color         220ms var(--bp-ease),
    transform     220ms var(--bp-ease),
    box-shadow    220ms var(--bp-ease);
}
.bp-curador-quick-btn:hover:not(:disabled) {
  border-color: var(--bp-blue);
  background: rgba(0, 153, 255, 0.10);
  color: var(--bp-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -6px rgba(0, 153, 255, 0.5);
}
.bp-curador-quick-btn:hover:not(:disabled) .bp-curador-quick-icon {
  color: var(--bp-blue-hi);
  transform: scale(1.08) rotate(-3deg);
}
.bp-curador-quick-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.bp-curador-quick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bp-curador-quick-icon {
  flex-shrink: 0;
  color: var(--bp-blue);
  transition: transform 260ms var(--bp-ease), color 220ms var(--bp-ease);
}
.bp-curador-quick-label {
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Animação ao clicar — pop + spin pequeno + glow */
.bp-curador-quick-btn.is-clicked {
  border-color: var(--bp-blue);
  background: rgba(0, 153, 255, 0.16);
  color: var(--bp-blue-hi);
  box-shadow: 0 0 0 4px rgba(0, 153, 255, 0.18);
}
.bp-curador-quick-btn.is-clicked .bp-curador-quick-icon {
  animation: bpQuickPop 700ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--bp-blue-hi);
}
@keyframes bpQuickPop {
  0%   { transform: scale(1)   rotate(0deg); }
  30%  { transform: scale(1.4) rotate(-12deg); }
  60%  { transform: scale(0.92) rotate(6deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* Pulse pro IconThinking (loading inicial) */
@keyframes bpIconPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.bp-icon-pulse {
  animation: bpIconPulse 1.6s ease-in-out infinite;
}

/* Status de tool (pílula que aparece enquanto carregando) — SVG sutilmente
   pulsa pra dar sentido de "ativo". */
.bp-curador-tool-status svg {
  animation: bpIconPulse 1.6s ease-in-out infinite;
}

/* Ícone do export na sidebar — herda cor do contexto + transição suave
   no hover */
.bp-curador-export-icon {
  flex-shrink: 0;
  color: var(--bp-blue-hi);
  transition: color 200ms var(--bp-ease), transform 220ms var(--bp-ease);
}
.bp-curador-export-item:hover .bp-curador-export-icon {
  color: var(--bp-blue);
  transform: scale(1.1);
}

@media (max-width: 720px) {
  .bp-curador-quick-prompts { gap: 6px; }
  .bp-curador-quick-btn { padding: 5px 10px; font-size: 11px; }
  .bp-curador-quick-label { display: none; }   /* mobile: só ícones */
}
@media (prefers-reduced-motion: reduce) {
  .bp-curador-quick-btn,
  .bp-curador-quick-icon,
  .bp-icon-pulse,
  .bp-curador-tool-status svg {
    animation: none !important;
    transition: none !important;
  }
}
/* Toolbar de ação por mensagem do assistente (Fase 5 redesign mobile).
   Atualmente só Copiar — extensível pra share/thumbs/regenerate. */
.bp-curador-msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  opacity: 0.65;
  transition: opacity 180ms var(--bp-ease);
}
.bp-curador-msg-actions:hover { opacity: 1; }
.bp-curador-msg-action {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--bp-ink-mute);
  cursor: pointer;
  transition: all 140ms var(--bp-ease);
}
.bp-curador-msg-action:hover {
  background: rgba(255,255,255,0.06);
  color: var(--bp-ink);
}
.bp-curador-msg-action:active {
  transform: scale(0.92);
}
@media (max-width: 768px) {
  /* Em mobile o toolbar é mais visível por padrão (sem hover state). */
  .bp-curador-msg-actions { opacity: 1; }
  .bp-curador-msg-action { width: 36px; height: 36px; }
}

/* Hamburger + Nova-conversa do header (mobile-first, ChatGPT-style).
   Em desktop ficam escondidos via CSS (.bp-curador-header-menu) ou
   visualmente ocultos. Sidebar de chats é sempre visível em desktop,
   então hamburger não faz sentido lá. */
.bp-curador-header-menu,
.bp-curador-header-new {
  display: none;  /* desktop: oculto; mobile.css reativa */
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--bp-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--bp-dur) var(--bp-ease);
}
.bp-curador-header-menu:hover,
.bp-curador-header-new:hover {
  background: rgba(255,255,255,0.06);
}

/* Sidebar wrap (drawer container). Em desktop é layout normal (display:
   contents pra não quebrar grid). Em mobile vira fixed slide-in via
   mobile.css. */
.bp-curador-side-wrap { display: contents; }
.bp-curador-side-backdrop {
  display: none;  /* só mobile */
}

/* Composer pill (ChatGPT-like, 2026-05-02): UMA linha flex com
   [attach | textarea | send]. Border-radius 28px dá aparência de pílula.
   Antes era column com toolbar separado embaixo. */
.bp-curador-input {
  max-width: 880px; margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bp-line-strong);
  border-radius: 28px;
  padding: 6px 6px 6px 8px;
  display: flex; align-items: flex-end; gap: 6px;
  min-height: 52px;
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.bp-curador-input:focus-within {
  border-color: var(--bp-blue);
  background: rgba(255,255,255,0.05);
  box-shadow: var(--bp-shadow-focus);
}
.bp-curador-composer-attach {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: flex-end;
}
.bp-curador-input-textarea {
  flex: 1; min-width: 0;
  background: transparent;
  border: none;
  color: var(--bp-ink);
  font-family: var(--bp-sans);
  /* 16px é o threshold do iOS Safari pra NÃO disparar auto-zoom em focus.
     Era 14.5px e zoava. Line-height ajustada de 1.55 → 1.5 pra
     compensar visualmente. */
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  resize: none;
  min-height: 24px; max-height: 200px;
  padding: 8px 4px;
}
.bp-curador-input-textarea::placeholder {
  color: var(--bp-ink-mute);
}

/* .bp-curador-input-toolbar e .bp-curador-input-tools removidos
   (2026-05-02): composer agora é pill em UMA linha flex, sem toolbar
   inferior. Mantido .bp-curador-tool-btn pq é compartilhado pelo
   attach button do pill. */
.bp-curador-tool-btn {
  background: transparent;
  border: none;
  color: var(--bp-ink-mute);
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 120ms ease;
}
.bp-curador-tool-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: var(--bp-ink);
}
.bp-curador-tool-btn:disabled { opacity: 0.4; cursor: default; }

.bp-curador-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--bp-ink-mute);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms ease;
  flex-shrink: 0;
  align-self: flex-end;
}
.bp-curador-send.on {
  background: var(--bp-teal);
  color: #0A1A14;
}
.bp-curador-send.on:hover { filter: brightness(1.1); }
.bp-curador-send:disabled { cursor: default; }

.bp-curador-send-spinner {
  width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, var(--bp-ink-mute) 40%, transparent);
  border-top-color: var(--bp-teal);
  border-radius: 50%;
  animation: bp-spin 700ms linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }

.bp-curador-quota-exhausted {
  max-width: 880px; margin: 0 auto 10px;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid var(--bp-red, #dc2626);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--bp-ink-dim);
  line-height: 1.5;
  border-radius: var(--bp-r-sm);
}

.bp-curador-disclaimer {
  text-align: center;
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--bp-ink-mute);
  letter-spacing: 0.01em;
}

/* ── Scrollbar fino azul · utility ─────────────────────────────────────
   Aplicar em qualquer container com overflow: auto. WebKit + Firefox.
   Thumb usa --bp-blue-soft, intensifica no hover. */
.bp-scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--bp-blue-soft) transparent;
}
.bp-scroll-thin::-webkit-scrollbar {
  width: 8px; height: 8px;
}
.bp-scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.bp-scroll-thin::-webkit-scrollbar-thumb {
  background: var(--bp-blue-soft);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--bp-dur) var(--bp-ease);
}
.bp-scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--bp-blue);
  background-clip: padding-box;
}
.bp-scroll-thin::-webkit-scrollbar-corner { background: transparent; }

/* ── Curador · Painel direito (Ideias citadas) ────────────────────────── */
.bp-curador-citadas {
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border-left: 1px solid var(--bp-glass-border);
  padding: 20px 16px 24px;
  overflow-y: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bp-blue-soft) transparent;
}
.bp-curador-citadas::-webkit-scrollbar { width: 8px; }
.bp-curador-citadas::-webkit-scrollbar-track { background: transparent; }
.bp-curador-citadas::-webkit-scrollbar-thumb {
  background: var(--bp-blue-soft);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--bp-dur) var(--bp-ease);
}
.bp-curador-citadas::-webkit-scrollbar-thumb:hover { background: var(--bp-blue); background-clip: padding-box; }
.bp-curador-citadas-eyebrow {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bp-ink-mute);
  margin-bottom: 14px;
}
.bp-curador-citadas-empty {
  font-size: 12px; color: var(--bp-ink-mute); line-height: 1.55;
  margin: 0;
}

/* Card individual */
.bp-citada-card-wrap {
  position: relative;
  margin-bottom: 10px;
}
.bp-citada-card {
  display: block;
  text-decoration: none;
  color: var(--bp-ink);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: var(--bp-r);
  padding: 12px 14px;
  font-size: 12px;
  box-shadow: var(--bp-shadow-card);
  transition:
    transform var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
}
.bp-citada-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bp-blue) 40%, var(--bp-line));
  background: rgba(255,255,255,0.045);
  box-shadow: var(--bp-shadow-card-hover);
}
.bp-citada-card-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--bp-ink);
  line-height: 1.35;
}
.bp-citada-card-meta {
  color: var(--bp-ink-mute);
  font-size: 11px;
  line-height: 1.4;
}
.bp-citada-card-sep { margin: 0 6px; }
.bp-citada-card-cta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--bp-blue-hi, #38b0ff);
  font-family: var(--bp-mono);
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity var(--bp-dur) var(--bp-ease);
}
.bp-citada-card:hover .bp-citada-card-cta { opacity: 1; }

/* Popover de hover — sinopse curta. Glass mais denso pra leitura.
   Usa position:fixed com coords de getBoundingClientRect (não clipa pelo
   overflow do painel). React seta top/left inline. */
.bp-citada-popover {
  position: fixed;
  width: 320px;
  padding: 14px 16px 14px;
  background:
    linear-gradient(180deg, rgba(28,32,38,0.96), rgba(20,24,28,0.96)),
    var(--bp-blue-glow);
  background-blend-mode: normal, screen;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--bp-blue) 26%, var(--bp-line));
  border-top-color: rgba(255,255,255,0.10);
  border-radius: var(--bp-r-lg);
  box-shadow:
    0 18px 60px -16px rgba(0,0,0,0.72),
    0 8px 24px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  color: var(--bp-ink);
  z-index: 250;
  pointer-events: none;
  transform-origin: right center;
  animation: bpCitadaPop 220ms var(--bp-ease) both;
}
.bp-citada-popover::after {
  /* setinha apontando pro card (default: aponta pra direita) */
  content: '';
  position: absolute;
  top: 18px; right: -6px;
  width: 10px; height: 10px;
  background: rgba(28,32,38,0.96);
  border-right: 1px solid color-mix(in srgb, var(--bp-blue) 26%, var(--bp-line));
  border-top: 1px solid color-mix(in srgb, var(--bp-blue) 26%, var(--bp-line));
  transform: rotate(45deg);
  border-radius: 1px;
}
/* Variante "above": popover abre pra CIMA do alvo, seta aponta pra BAIXO.
   Usado nos links inline de ideia dentro da prosa do agente. */
.bp-citada-popover.bp-citada-popover-above {
  transform-origin: bottom center;
  animation: bpCitadaPopAbove 220ms var(--bp-ease) both;
}
.bp-citada-popover.bp-citada-popover-above::after {
  top: auto; right: auto;
  bottom: -6px;
  left: var(--arrow-x, 50%);
  border-right: none; border-top: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bp-blue) 26%, var(--bp-line));
  border-left: 1px solid color-mix(in srgb, var(--bp-blue) 26%, var(--bp-line));
}
@keyframes bpCitadaPopAbove {
  from { opacity: 0; transform: translateY(calc(-100% + 6px)) scale(0.97); }
  to   { opacity: 1; transform: translateY(-100%)            scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-citada-popover.bp-citada-popover-above { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Bottom-sheet pra preview de ideia (mobile/touch).
   Substitui o popover-em-hover quando `(hover: none) and (pointer: coarse)`.
   Backdrop semi-transparente + sheet sliding-up. Dismiss por tap-outside,
   ESC, ou botão "Fechar".

   Estrutura:
     <div .bp-idea-sheet-backdrop>           ← clique fecha
     <div .bp-idea-sheet>
       <div .bp-idea-sheet-handle>           ← grabber visual
       <header .bp-idea-sheet-head>
         <span .bp-idea-sheet-eyebrow>       ← categoria
         <h3 .bp-idea-sheet-title>           ← título
       <div .bp-idea-sheet-body>
         <p .bp-idea-sheet-resumo>
       <footer .bp-idea-sheet-foot>
         [Fechar] [Abrir detalhe →]
   ───────────────────────────────────────────────────────────────────── */
.bp-idea-sheet-backdrop {
  position: fixed; inset: 0;
  /* 310 cobre o top-bar do app (200) e o drawer do Curador (300).
     Sheet pode aparecer com drawer aberto (caso de uso edge), então
     fica acima de ambos. */
  z-index: 310;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--bp-ease);
}
.bp-idea-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bp-idea-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 311;
  max-height: 70dvh;
  background: var(--bp-bg-elev, #131722);
  border-top: 1px solid var(--bp-line);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  /* Easing iOS-like (cubic-bezier copia o "snap" do native sheet) */
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-shadow: 0 -12px 40px -8px rgba(0,0,0,0.6);
}
.bp-idea-sheet.is-open {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .bp-idea-sheet { transition: none; }
  .bp-idea-sheet-backdrop { transition: none; }
}
.bp-idea-sheet-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  margin: 8px auto 4px;
  flex-shrink: 0;
}
.bp-idea-sheet-head {
  flex-shrink: 0;
}
.bp-idea-sheet-eyebrow {
  display: inline-block;
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bp-blue-hi, #38b0ff);
  margin-bottom: 6px;
}
.bp-idea-sheet-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bp-ink);
  letter-spacing: -0.01em;
}
.bp-idea-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bp-idea-sheet-resumo {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bp-ink-dim);
}
.bp-idea-sheet-resumo.bp-idea-sheet-empty {
  color: var(--bp-ink-faint);
  font-style: italic;
}
.bp-idea-sheet-foot {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 8px;
  border-top: 1px solid var(--bp-line);
}
.bp-idea-sheet-foot .bp-btn {
  flex: 1;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bp-idea-sheet-foot .bp-btn-ghost {
  background: transparent;
  color: var(--bp-ink-mute);
  border: 1px solid var(--bp-line);
}
.bp-idea-sheet-foot .bp-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--bp-ink);
}

/* Em desktop o sheet nunca aparece (touch-only), mas se algum browser
   exótico disparar (ex: tablet com mouse), garante visual ok. */
@media (min-width: 769px) {
  .bp-idea-sheet {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border-radius: 16px;
    bottom: 24px;
  }
  .bp-idea-sheet.is-open {
    transform: translateX(-50%) translateY(0);
  }
}

.bp-citada-popover-eyebrow {
  font-family: var(--bp-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bp-blue-hi, #38b0ff);
  margin-bottom: 6px;
}
.bp-citada-popover-title {
  font-size: 13.5px; font-weight: 700;
  line-height: 1.3;
  color: var(--bp-ink);
  margin-bottom: 8px;
}
.bp-citada-popover-resumo {
  font-family: var(--bp-serif, Georgia, serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bp-ink-dim);
  text-wrap: pretty;
}
.bp-citada-popover-resumo-empty {
  font-style: normal;
  font-family: var(--bp-sans);
  color: var(--bp-ink-mute);
  font-size: 12px;
}

/* Variante "click" — popover é interativo (botão fechar, botão visitar).
   Reativa pointer-events que estavam off pra hover. */
.bp-citada-popover.bp-citada-popover-click {
  pointer-events: auto;
  padding-right: 30px;       /* espaço pro botão fechar */
}
.bp-citada-popover-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--bp-ink-mute);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  border-radius: var(--bp-r-sm);
  transition: background var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease);
}
.bp-citada-popover-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--bp-ink);
}
.bp-citada-popover-actions {
  margin-top: 12px;
  display: flex; justify-content: flex-end;
}
.bp-citada-popover-visit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--bp-blue);
  color: var(--bp-blue-ink, #04111a);
  border: 1px solid var(--bp-blue);
  border-radius: var(--bp-r-sm);
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px var(--bp-blue-soft);
  transition:
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    transform var(--bp-dur) var(--bp-ease);
}
.bp-citada-popover-visit:hover {
  background: var(--bp-blue-hi, #38b0ff);
  box-shadow: 0 10px 24px -8px var(--bp-blue-soft);
  transform: translateY(-1px);
}
.bp-citada-popover-visit:active { transform: translateY(0); }
@keyframes bpCitadaPop {
  from { opacity: 0; transform: translateX(6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-citada-popover { animation: none; }
}

/* ── Curador · Sidebar esquerda (conversas + documentos) ───────────────── */

.bp-curador-side {
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border-right: 1px solid var(--bp-glass-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;          /* impede overflow horizontal de flex children */
  overflow: hidden;
}

.bp-curador-side-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.bp-curador-side-section-grow {
  flex: 1 1 auto;
  border-bottom: 1px solid var(--bp-line);
}
.bp-curador-side-section-docs {
  flex: 0 1 38%;         /* máx 38% — sobra mais pra conversas */
  max-height: 38%;
}

.bp-curador-side-head {
  padding: 14px 14px 10px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.bp-curador-side-eyebrow {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-ink-mute);
}

.bp-curador-side-new {
  background: color-mix(in srgb, var(--bp-teal) 14%, transparent);
  color: var(--bp-teal);
  border: 1px solid color-mix(in srgb, var(--bp-teal) 50%, transparent);
  padding: 4px 10px; border-radius: var(--bp-r-sm);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  transition: background 140ms ease;
}
.bp-curador-side-new:hover {
  background: color-mix(in srgb, var(--bp-teal) 26%, transparent);
}

/* Search input */
.bp-curador-side-search {
  position: relative;
  margin: 0 12px 8px;
  flex-shrink: 0;
}
.bp-curador-side-search input {
  width: 100%;
  padding: 7px 28px 7px 10px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 6px;
  color: var(--bp-ink);
  font-size: 12.5px;
  outline: none;
  transition: border-color 140ms ease;
}
.bp-curador-side-search input::placeholder { color: var(--bp-ink-mute); opacity: 0.7; }
.bp-curador-side-search input:focus { border-color: var(--bp-teal); }
.bp-curador-side-search button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--bp-ink-mute);
  cursor: pointer; padding: 2px 6px; font-size: 11px;
}

/* Toggle Arquivadas */
.bp-curador-side-toggle {
  background: transparent;
  border: none;
  color: var(--bp-ink-mute);
  font-size: 11px;
  text-align: left;
  padding: 6px 14px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.bp-curador-side-toggle:hover { color: var(--bp-ink); }

/* Lista de chats / docs */
.bp-curador-side-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 6px 12px;
  min-height: 0;
}
.bp-curador-side-list::-webkit-scrollbar { width: 6px; }
.bp-curador-side-list::-webkit-scrollbar-thumb { background: var(--bp-line); border-radius: var(--bp-r-sm); }

.bp-curador-side-empty {
  margin: 0; padding: 4px 8px;
  font-size: 12px;
  color: var(--bp-ink-mute);
  line-height: 1.5;
}

/* Chat item */
.bp-curador-chat-item {
  position: relative;
  padding: 10px 12px;
  margin-bottom: 2px;
  border-radius: var(--bp-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease);
}
.bp-curador-chat-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.bp-curador-chat-item.on {
  background: var(--bp-blue-glow);
  border-color: var(--bp-blue-soft);
  box-shadow: 0 0 0 1px var(--bp-blue-soft) inset;
}

.bp-curador-chat-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--bp-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}
.bp-curador-chat-item.on .bp-curador-chat-title {
  color: var(--bp-ink);
  font-weight: 600;
}

.bp-curador-chat-meta {
  margin-top: 3px;
  font-family: var(--bp-mono);
  font-size: 10px;
  color: var(--bp-ink-mute);
  letter-spacing: 0.04em;
}

.bp-curador-chat-rename {
  width: 100%;
  background: var(--bp-bg);
  border: 1px solid var(--bp-teal);
  border-radius: var(--bp-r-sm);
  color: var(--bp-ink);
  font-size: 13px;
  padding: 5px 8px;
  outline: none;
  font-family: inherit;
}

/* Ações (renomear, arquivar, deletar) — aparecem on hover do item */
.bp-curador-chat-actions {
  position: absolute;
  right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 1px;
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--bp-bg-elev) 95%, transparent) 18%,
    var(--bp-bg-elev) 30%);
  padding-left: 16px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.bp-curador-chat-item:hover .bp-curador-chat-actions { opacity: 1; }
.bp-curador-chat-item.on .bp-curador-chat-actions {
  background: linear-gradient(to right,
    transparent,
    color-mix(in srgb, var(--bp-teal) 12%, var(--bp-bg-elev)) 30%);
}
.bp-curador-chat-actions button {
  background: transparent;
  border: none;
  color: var(--bp-ink-mute);
  padding: 4px 7px;
  font-size: 11px;
  cursor: pointer;
  border-radius: var(--bp-r-sm);
}
.bp-curador-chat-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bp-ink);
}
.bp-curador-chat-actions .bp-curador-chat-action-danger:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #ff6b6b;
}

/* Documentos */
.bp-curador-export-item {
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.bp-curador-export-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
  min-width: 0;
}
.bp-curador-export-head strong {
  flex: 1;
  min-width: 0;
  color: var(--bp-ink);
  font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-curador-export-actions {
  display: flex; gap: 6px; align-items: center;
}
.bp-curador-export-actions > button:first-child {
  background: color-mix(in srgb, var(--bp-teal) 14%, transparent);
  color: var(--bp-teal);
  border: 1px solid color-mix(in srgb, var(--bp-teal) 50%, transparent);
  padding: 2px 8px; border-radius: var(--bp-r-sm);
  font-size: 10px; font-weight: 500;
  cursor: pointer;
}
.bp-curador-export-actions > button:first-child:hover {
  background: color-mix(in srgb, var(--bp-teal) 24%, transparent);
}
.bp-curador-export-delete {
  background: transparent;
  border: none;
  color: var(--bp-ink-mute);
  padding: 2px 4px;
  font-size: 11px;
  cursor: pointer;
  margin-left: auto;
}
.bp-curador-export-delete:hover { color: #ff6b6b; }

/* ── Curador · Links de ideias dentro da prosa do agente ─────────────────
   Quando o agente menciona um título de ideia que veio de uma tool call, o
   frontend pós-processa o markdown e wrappa o título num
   <a class="bp-md-idea-link">. Click navega via SPA pra a página da ideia.
   Hover dispara um popover (mesmo CSS de .bp-citada-popover). */
.bp-md-idea-link {
  color: var(--bp-blue-hi, #38b0ff);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--bp-blue) 45%, transparent);
  cursor: pointer;
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
  border-radius: 2px;
  padding: 0 1px;
}
.bp-md-idea-link:hover {
  color: #fff;
  border-bottom-color: var(--bp-blue);
  background: var(--bp-blue-soft);
}

/* ── Galeria · Sidebar esquerda limpa (9GAG-inspired, sem ruído) ───────────
   3 blocos verticais: Visualizar (BP-only) · Categoria · Ordenar.
   Sticky no topo. Cada item é um botão minimalista — selecionado ganha
   borda teal à esquerda + bg sutil. */
.g-side-clean {
  position: sticky; top: 88px;
  display: flex; flex-direction: column;
  gap: 22px;
}

/* CTA primário "Nova Ideia" — sempre no topo da sidebar.
   Substitui o link "Nova ideia" do top bar, ficando mais visível e
   contextual (galeria → ação). */
.g-side-cta-new {
  appearance: none;
  /* inline-flex centraliza o conteúdo (ícone+texto) como um conjunto;
     gap controlado pra harmonizar o espaço entre + e a label. */
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid color-mix(in oklch, var(--bp-blue, #2563eb) 65%, transparent);
  border-radius: var(--bp-r-lg, 12px);
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--bp-blue, #2563eb) 95%, white) 0%,
    var(--bp-blue, #2563eb) 100%
  );
  color: white;
  font-family: var(--bp-mono);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;            /* evita altura extra do texto desbalancear o center */
  box-shadow:
    0 6px 20px -8px color-mix(in oklch, var(--bp-blue, #2563eb) 60%, transparent),
    0 0 0 1px color-mix(in oklch, white 12%, transparent) inset;
  transition: transform 180ms var(--bp-ease, ease),
              box-shadow 220ms var(--bp-ease, ease),
              filter 180ms var(--bp-ease, ease);
}
.g-side-cta-new:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 10px 28px -8px color-mix(in oklch, var(--bp-blue, #2563eb) 80%, transparent),
    0 0 0 1px color-mix(in oklch, white 18%, transparent) inset;
}
.g-side-cta-new:active {
  transform: translateY(0);
  filter: brightness(0.96);
}
.g-side-cta-new svg {
  flex-shrink: 0;
  display: block;     /* remove descendente baseline → centro vertical perfeito */
}
.g-side-cta-new span {
  display: inline-block;
  /* compensa o tracking final que joga o texto pra direita visualmente */
  margin-right: -0.14em;
}

.g-side-block {
  display: flex; flex-direction: column;
  gap: 1px;
}

.g-side-eyebrow {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-ink-mute);
  padding: 0 12px 8px;
}

.g-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  color: var(--bp-ink-dim);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 140ms var(--bp-ease), color 140ms var(--bp-ease), border-color 140ms var(--bp-ease);
}
.g-side-item:hover {
  background: var(--bp-bg-elev);
  color: var(--bp-ink);
}
.g-side-item.on {
  background: color-mix(in srgb, var(--bp-teal) 10%, transparent);
  color: var(--bp-ink);
  border-left-color: var(--bp-teal);
  font-weight: 600;
}
.g-side-item svg { flex-shrink: 0; opacity: 0.85; }

/* ── Botão "Enviar feedback" no rodapé da sidebar ───────────────────────── */
.g-side-feedback-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--bp-line, rgba(255,255,255,0.06));
}
.g-side-feedback-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin: 0 12px;
  background: transparent;
  border: 1px solid var(--bp-line, rgba(255,255,255,0.10));
  border-radius: 8px;
  color: var(--bp-ink-dim);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--bp-ease), color 140ms var(--bp-ease), border-color 140ms var(--bp-ease);
}
.g-side-feedback-btn:hover {
  background: var(--bp-bg-elev);
  color: var(--bp-ink);
  border-color: var(--bp-blue-soft, rgba(96,165,250,0.30));
}
.g-side-feedback-btn .bp-icon { opacity: 0.85; }

/* ── Sort select customizado (substitui o <select> nativo) ─────────────────
   Componente _SortSelect em gallery.jsx. Glass card + chevron animado +
   menu com checkmark no item ativo. Toda lista cabe sem ellipsis. */

.g-sort-select {
  position: relative;
  margin: 0 12px;
}

/* Trigger: caixa que mostra a opção atual + chevron */
.g-sort-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(15, 17, 22, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--bp-glass-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--bp-ink);
  font-family: var(--bp-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 200ms var(--bp-ease),
    background   200ms var(--bp-ease),
    box-shadow   200ms var(--bp-ease);
}
.g-sort-trigger:hover {
  border-color: rgba(0, 153, 255, 0.45);
  background: rgba(20, 24, 32, 0.85);
}
.g-sort-trigger:focus-visible {
  outline: none;
  border-color: var(--bp-teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.18);
}
.g-sort-trigger.is-open {
  border-color: var(--bp-teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.16);
}

.g-sort-trigger-label {
  flex: 1; min-width: 0;
  /* Permite wrap em duas linhas — caixa cresce em altura ao invés de
     truncar com ellipsis (era o problema do select nativo). */
  white-space: normal;
  line-height: 1.3;
  text-wrap: balance;
}

.g-sort-trigger-chevron {
  flex-shrink: 0;
  color: var(--bp-ink-mute);
  transition: transform 280ms var(--bp-ease), color 200ms var(--bp-ease);
}
.g-sort-trigger:hover .g-sort-trigger-chevron,
.g-sort-trigger.is-open .g-sort-trigger-chevron {
  color: var(--bp-teal);
}
.g-sort-trigger.is-open .g-sort-trigger-chevron {
  transform: rotate(180deg);
}

/* Menu — popover abaixo do trigger */
.g-sort-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  z-index: 30;
  margin: 0; padding: 6px;
  list-style: none;
  background: rgba(13, 15, 20, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--bp-glass-border, rgba(255,255,255,0.10));
  border-radius: 10px;
  box-shadow:
    0 18px 42px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 153, 255, 0.06);
  display: flex; flex-direction: column;
  gap: 2px;
  transform-origin: top center;
  animation: bpSortMenuIn 220ms var(--bp-ease) both;
}
@keyframes bpSortMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.g-sort-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--bp-ink-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 140ms var(--bp-ease),
    color      140ms var(--bp-ease);
  user-select: none;
}
.g-sort-option:hover,
.g-sort-option.is-hovered {
  background: rgba(0, 153, 255, 0.10);
  color: var(--bp-ink);
}
.g-sort-option.is-active {
  background: rgba(0, 153, 255, 0.14);
  color: var(--bp-teal);
}
.g-sort-option-label {
  flex: 1; min-width: 0;
  line-height: 1.3;
}

.g-sort-option-check {
  flex-shrink: 0;
  color: var(--bp-teal);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity   220ms var(--bp-ease),
    transform 220ms var(--bp-ease);
}
.g-sort-option.is-active .g-sort-option-check {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .g-sort-trigger-chevron,
  .g-sort-option-check { transition: none; }
  .g-sort-menu        { animation: none; }
}

/* ── Scores card (estilo Metacritic + Steam) ─────────────────────────────────
   Card que agrupa 3 blocos verticais:
     1. Score Editorial (badge quadrado, IA)
     2. Score da Comunidade (badge circular, média dos votos)
     3. Meu voto (badge circular interativo + grade 1-10)
   Cada bloco tem: eyebrow (label MONO), badge (numérico), label qualitativa
   colorida em destaque (Steam-style), subtitle com count, barra de progresso. */
.bp-scores-card {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 18px;
}

.bp-score-block {
  display: flex; flex-direction: column;
  gap: 10px;
}

.bp-score-block + .bp-score-block {
  padding-top: 18px;
  border-top: 1px solid var(--bp-line);
}

.bp-score-eyebrow {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bp-ink-mute);
}

.bp-score-row {
  display: flex; align-items: center; gap: 14px;
}

/* Badge — número grande, colorido conforme banda qualitativa */
.bp-score-badge {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 56px; height: 56px;
  font-family: var(--bp-mono);
  font-weight: 700; font-size: 19px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: var(--bp-bg-elev);
  color: var(--bp-ink);
  transition: background 160ms var(--bp-ease), color 160ms var(--bp-ease);
}
.bp-score-badge-square { border-radius: var(--bp-r); }
.bp-score-badge-circle { border-radius: 50%; }

/* Cores do badge conforme banda */
.bp-score-badge.high { background: var(--bp-teal); color: #0A1A14; }
.bp-score-badge.mid  { background: var(--bp-orange, #d97706); color: #1a0e00; }
.bp-score-badge.low  { background: color-mix(in srgb, var(--bp-red, #dc2626) 80%, black); color: #fff; }
.bp-score-badge.mute { background: var(--bp-bg-elev); color: var(--bp-ink-mute);
                       border: 1px solid var(--bp-line); }

/* Estado vazio (sem score ainda) */
.bp-score-badge.empty {
  background: transparent;
  border: 1.5px dashed var(--bp-line-strong);
  color: var(--bp-ink-mute);
  font-weight: 500;
}

/* Meu voto — badge interativo, mostra estado pendente em destaque */
.bp-score-badge-mine.pending {
  outline: 2px solid var(--bp-teal);
  outline-offset: 2px;
}

/* Info ao lado do badge */
.bp-score-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}

/* Label qualitativa em destaque (Steam-style) */
.bp-score-qual {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.bp-score-qual.high { color: var(--bp-teal); }
.bp-score-qual.mid  { color: var(--bp-orange, #d97706); }
.bp-score-qual.low  { color: var(--bp-red, #dc2626); }
.bp-score-qual.mute { color: var(--bp-ink-mute); }

/* Subtítulo (count, fonte) */
.bp-score-sub {
  font-size: 12px; color: var(--bp-ink-mute);
  line-height: 1.35;
}

/* Barra de progresso (Metacritic-style) */
.bp-score-bar {
  height: 4px;
  background: var(--bp-bg-elev);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 4px;
}
.bp-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bp-score-bar.high .bp-score-bar-fill { background: var(--bp-teal); }
.bp-score-bar.mid  .bp-score-bar-fill { background: var(--bp-orange, #d97706); }
.bp-score-bar.low  .bp-score-bar-fill { background: var(--bp-red, #dc2626); }
.bp-score-bar.mute .bp-score-bar-fill { background: var(--bp-line-strong); }

/* Grade compacta de votos dentro do bloco "Meu voto" */
.bp-vote-grid-compact {
  margin-top: 4px;
}

/* Histograma sempre visível (sem toggle) */
.bp-scores-histogram {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--bp-line);
}
.bp-scores-histogram-label {
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bp-ink-mute);
  margin-bottom: 10px;
}

/* ── Seção de Arquivos ─────────────────────────────────────────────────────── */
.bp-files-section { padding: 8px 0 32px; }

.bp-files-empty {
  color: var(--bp-ink-mute);
  font-size: 14px;
  padding: 24px 0;
}

.bp-files-list {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}

.bp-file-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  transition: border-color 140ms var(--bp-ease);
}
.bp-file-item:hover { border-color: var(--bp-line-strong); }

.bp-file-icon { color: var(--bp-ink-mute); flex-shrink: 0; display: flex; }

.bp-file-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}

.bp-file-name {
  font-size: 13.5px; font-weight: 500; color: var(--bp-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bp-file-meta {
  font-size: 11px; color: var(--bp-ink-mute);
  font-family: var(--bp-mono); letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bp-file-actions { display: flex; gap: 6px; flex-shrink: 0; }

.bp-btn-sm {
  font-size: 11px; padding: 4px 10px;
  line-height: 1.4; letter-spacing: 0.05em;
}
.bp-btn-danger {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--bp-red, #e05) 40%, transparent);
  color: var(--bp-red, #e05);
}
.bp-btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bp-red, #e05) 10%, transparent);
  border-color: var(--bp-red, #e05);
}
.bp-btn-danger:disabled { opacity: 0.5; cursor: default; }

.bp-files-upload {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}

.bp-files-hint {
  font-size: 11.5px; color: var(--bp-ink-mute);
  font-family: var(--bp-mono);
}

.bp-files-error {
  width: 100%; margin: 4px 0 0;
  font-size: 12px; color: var(--bp-red, #e05);
}

.bp-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 40px;
  animation: bpFadeUp 200ms var(--bp-ease) both;
}
.bp-lightbox img {
  max-width: min(1200px, 94vw); max-height: 82vh;
  object-fit: contain;
  border: 1px solid var(--bp-line-strong);
}
.bp-lightbox-close {
  position: absolute; top: 24px; right: 32px;
  width: 44px; height: 44px;
  border: 1px solid var(--bp-line-strong);
  background: transparent; color: var(--bp-ink);
  font-size: 26px; cursor: pointer;
  transition: all 160ms var(--bp-ease);
}
.bp-lightbox-close:hover { border-color: var(--bp-teal); color: var(--bp-teal); }
.bp-lightbox-cap {
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-ink-mute); letter-spacing: 0.08em;
}

/* Seções */
.bp-detail-sections { margin-bottom: 48px; }
.bp-detail-sec { margin-bottom: 32px; }
.bp-sec-label {
  font-family: var(--bp-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--bp-teal);
  padding-top: 14px;
  border-top: 1px solid rgba(0, 153, 255,0.3);
  margin: 0 0 16px;
}
.bp-sec-body {
  font-size: 16px; line-height: 1.78;
  color: var(--bp-ink-dim);
  margin: 0;
  text-wrap: pretty;
  white-space: pre-wrap;
}
.bp-sec-edit { font-size: 15px !important; }

/* Discussão */
.bp-discussion { margin-bottom: 12px; }
/* Toolbar compacta substitui o antigo h2 "Discussão da comunidade"
   (2026-05-02). Só contagem + sort, alinhados nas duas pontas. */
.bp-disc-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-line);
}
.bp-disc-count {
  font-family: var(--bp-mono); font-size: 11px; font-weight: 600;
  color: var(--bp-ink-mute); letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* Mantido pra compat com qualquer eco antigo no DOM. */
.bp-disc-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Container da lista de comentários — flow natural na página
   (sem scroll interno). Decisão 2026-05-02:
   - Antes era `max-height: 60vh; overflow-y: auto` pra manter o
     compose acessível em ideias com 100+ comentários, mas com
     default-collapsed (Reddit-style) a lista raramente excede a
     altura da tela.
   - O scroll interno ainda causava 2 problemas: corte hard no
     rodapé e interferência com o focus zoom do iOS quando o user
     focava o textarea de reply. */
.bp-comments-scroll {
  padding-top: 16px;
  border-top: 1px solid var(--bp-line);
  scroll-behavior: smooth;     /* p/ scrollToComment programático */
}

.bp-comments-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--bp-ink-faint);
  font-family: var(--bp-serif, Georgia, serif);
  font-style: italic;
  font-size: 14px;
  border-top: 1px solid var(--bp-line);
  margin-top: 16px;
}

.bp-comments { list-style: none; padding: 0; margin: 0 0 8px; }
.bp-comment {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 16px 18px 18px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-radius: var(--bp-r);
  margin-bottom: 10px;
  box-shadow: var(--bp-shadow-card);
  animation: bpFadeUp 400ms var(--bp-ease) both;
}

/* ── Animação de entrada do novo comentário + ripple nos vizinhos ─────
   Quando o user posta um comment novo:
   1. O novo (.bp-comment--just-added) entra com bouncy + glow azul que
      dissipa — substitui o bpFadeUp default por um keyframe mais rico.
   2. Os vizinhos (.bp-comments--rippling .bp-comment:not(--just-added))
      fazem um pequeno bounce escalonado, formando uma onda subindo do
      bottom (mais próximo do novo) pro topo da lista.
   Total: ~900ms entry + ripple termina em ~720ms. */

@keyframes bpCommentEnterRich {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    box-shadow:
      0 0 0 0 rgba(56, 176, 255, 0),
      var(--bp-shadow-card);
  }
  55% {
    opacity: 1;
    transform: translateY(-3px) scale(1.012);
    box-shadow:
      0 0 0 3px rgba(56, 176, 255, 0.30),
      0 12px 32px -8px rgba(56, 176, 255, 0.40),
      var(--bp-shadow-card);
  }
  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 2px rgba(56, 176, 255, 0.18),
      0 8px 24px -8px rgba(56, 176, 255, 0.22),
      var(--bp-shadow-card);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 0 0 rgba(56, 176, 255, 0),
      var(--bp-shadow-card);
  }
}
.bp-comment--just-added {
  /* !important pra sobrepor o bpFadeUp default do .bp-comment */
  animation: bpCommentEnterRich 900ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes bpCommentRipple {
  0%   { transform: translateY(0)   scale(1); }
  35%  { transform: translateY(-3px) scale(1.005); }
  100% { transform: translateY(0)   scale(1); }
}
/* Vizinhos do novo: ripple. Como o novo entra no TOPO (sort 'recent'),
   onda propaga top-down — vizinho imediatamente abaixo (nth-child 2)
   ripple primeiro, depois propaga pra baixo. */
.bp-comments--rippling .bp-comment:not(.bp-comment--just-added) {
  animation: bpCommentRipple 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.bp-comments--rippling .bp-comment:nth-child(2):not(.bp-comment--just-added) { animation-delay: 0ms;   }
.bp-comments--rippling .bp-comment:nth-child(3):not(.bp-comment--just-added) { animation-delay: 50ms;  }
.bp-comments--rippling .bp-comment:nth-child(4):not(.bp-comment--just-added) { animation-delay: 100ms; }
.bp-comments--rippling .bp-comment:nth-child(5):not(.bp-comment--just-added) { animation-delay: 150ms; }
.bp-comments--rippling .bp-comment:nth-child(6):not(.bp-comment--just-added) { animation-delay: 200ms; }
.bp-comments--rippling .bp-comment:nth-child(7):not(.bp-comment--just-added) { animation-delay: 250ms; }
/* Fallback pros mais distantes (sort 'oldest' invertido OU nested replies):
   onda satura em 300ms. */
.bp-comments--rippling .bp-comment:nth-child(n+8):not(.bp-comment--just-added) {
  animation-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .bp-comment--just-added,
  .bp-comments--rippling .bp-comment:not(.bp-comment--just-added) {
    animation: none !important;
  }
}
.bp-comment.from-author {
  border-left: 3px solid var(--bp-teal);
  background:
    linear-gradient(180deg, rgba(0, 153, 255, 0.06), rgba(0, 153, 255, 0.02)),
    var(--bp-bg-elev);
}
/* Comentário de Avaliador BP — peso editorial visual.
   Glass com glow azul composto (border azul + shadow azul-soft + faixa
   esquerda mais grossa). Animação sutil de pulso na borda esquerda. */
.bp-comment.from-avaliador {
  border-left: 3px solid var(--bp-blue);
  background:
    linear-gradient(180deg, rgba(0,153,255,0.07), rgba(0,153,255,0.025)),
    var(--bp-bg-elev);
  border-color: color-mix(in srgb, var(--bp-blue) 30%, var(--bp-line));
  border-top-color: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(0,153,255,0.10) inset,
    0 8px 24px -10px var(--bp-blue-soft),
    0 2px 8px -4px rgba(0,0,0,0.4);
  border-radius: var(--bp-r);
  position: relative;
}
.bp-comment.from-avaliador::before {
  /* aura azul sutil pulsando — assinatura do avaliador */
  content: '';
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 3px;
  background: var(--bp-blue);
  border-radius: 0;
  animation: bpAvaliadorEdge 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bpAvaliadorEdge {
  0%, 100% { box-shadow: 0 0 0 0 var(--bp-blue-soft); }
  50%      { box-shadow: 0 0 12px 1px var(--bp-blue-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-comment.from-avaliador::before { animation: none; }
}
.bp-comment.from-avaliador .bp-comment-avatar {
  background: var(--bp-blue-glow);
  border-color: color-mix(in srgb, var(--bp-blue) 50%, transparent);
  color: var(--bp-blue-hi, #38b0ff);
  box-shadow: 0 0 0 3px var(--bp-blue-soft);
}
/* Pill do badge AVALIADOR no head */
.bp-comment-badge-avaliador {
  background: var(--bp-blue) !important;
  color: var(--bp-blue-ink, #04111a) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 4px 12px -4px var(--bp-blue-soft);
}

/* Comentários LENDÁRIOS — tema verde-CTA #35C3A4 (distinto do azul
   do Avaliador). Aplicado pra:
   - `.from-cec`: Comitê Editorial Consultivo
   Border esquerda + glow + aura pulsante. (2026-05-02)

   Curador (badge agente_curador) compartilhava este styling até
   2026-05-05. Removido por decisão de produto — comentário do
   Curador agora aparece como comentário normal (sem destaque,
   sem pill, sem glow). */
.bp-comment.from-cec {
  border-left: 3px solid #35C3A4;
  background:
    linear-gradient(180deg, rgba(53, 195, 164, 0.08), rgba(53, 195, 164, 0.025)),
    var(--bp-bg-elev);
  border-color: color-mix(in srgb, #35C3A4 30%, var(--bp-line));
  border-top-color: rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(53, 195, 164, 0.12) inset,
    0 8px 24px -10px rgba(53, 195, 164, 0.45),
    0 2px 8px -4px rgba(0,0,0,0.4);
  border-radius: var(--bp-r);
  position: relative;
}
.bp-comment.from-cec::before {
  content: '';
  position: absolute;
  left: -3px; top: 0; bottom: 0;
  width: 3px;
  background: #35C3A4;
  border-radius: 0;
  animation: bpCecEdge 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bpCecEdge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53, 195, 164, 0); }
  50%      { box-shadow: 0 0 14px 2px rgba(53, 195, 164, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-comment.from-cec::before { animation: none; }
}
.bp-comment.from-cec .bp-comment-avatar {
  background: rgba(53, 195, 164, 0.12);
  border-color: color-mix(in srgb, #35C3A4 50%, transparent);
  color: #35C3A4;
  box-shadow: 0 0 0 3px rgba(53, 195, 164, 0.25);
}
/* Pill "COMITÊ EDITORIAL" no head — verde-CTA solid. */
.bp-comment-badge-cec {
  background: #35C3A4 !important;
  color: #062118 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20) inset,
    0 4px 14px -4px rgba(53, 195, 164, 0.55);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bp-comment-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bp-line-strong);
  color: var(--bp-ink);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* position:relative + overflow:hidden permite que .bp-author-avatar-img
     (absolute, inset:0) cubra as iniciais quando a foto carrega. Sem isso
     a img sobrava do círculo e/ou nem aparecia. */
  position: relative;
  overflow: hidden;
}
.bp-comment.from-author .bp-comment-avatar {
  background: rgba(0, 153, 255,0.14);
  border-color: rgba(0, 153, 255,0.4);
  color: var(--bp-teal);
}
.bp-comment-body { min-width: 0; }

/* Top-level comments (não-reply): texto, footer, edit-form, tombstone
   e pill de collapse ficam FLUSH-LEFT com o avatar (não indentam pra
   direita do nome). Liberam ~50px de largura horizontal — importante
   pra threads aninhadas em telas estreitas. (2026-05-02)
   Replies (.bp-comment--reply) já têm flush-left por design (avatar
   inline no head, body em display:block sem grid). */
.bp-comment:not(.bp-comment--reply) > .bp-comment-body > .bp-comment-text,
.bp-comment:not(.bp-comment--reply) > .bp-comment-body > .bp-comment-footer,
.bp-comment:not(.bp-comment--reply) > .bp-comment-body > .bp-comment-edit-form,
.bp-comment:not(.bp-comment--reply) > .bp-comment-body > .bp-comment-collapsed-toggle {
  /* avatar 36px + gap 14px = 50px pra esquerda. Width auto compensa
     extendendo pra direita até a borda do card. */
  margin-left: -50px;
}

/* Cursor default nos badges inline dentro de comentários — sinaliza que
   não são clicáveis (tap só mostra tooltip via data-tip do CSS). */
.bp-comment-head .g-badges-inline,
.bp-comment-head .g-badge-tip {
  cursor: default;
}
.bp-comment-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.bp-comment-name { font-size: 13.5px; font-weight: 700; color: var(--bp-ink); }
.bp-comment-badge {
  font-family: var(--bp-mono); font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--bp-r-sm);
  background: var(--bp-teal); color: var(--bp-teal-ink);
  letter-spacing: 0.12em;
}
.bp-comment-badge.inline {
  margin: 0 2px; font-size: 8.5px; padding: 2px 5px;
}
.bp-comment-time {
  font-family: var(--bp-mono); font-size: 10.5px;
  color: var(--bp-ink-faint); letter-spacing: 0.04em;
  margin-left: auto;
}
.bp-comment-text {
  font-size: 14.5px; line-height: 1.65;
  color: var(--bp-ink-dim); margin: 0;
  text-wrap: pretty;
}

/* ── Edit/delete de comentário (2026-05-01) ───────────────────────────
   - Ações no head: ícones edit/delete só pra autor próprio (e delete
     pra moderador). Aparecem on hover do comment OU sempre em mobile.
   - Form de edit inline: textarea + Cancelar/Salvar.
   - Tombstone "Comentário apagado" em soft-delete.
   - Marker "· editado" no timestamp quando edited_at existe. */
.bp-comment-edited {
  font-style: italic;
  opacity: 0.85;
}
.bp-comment-actions {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  /* Só aparece em hover do comment (desktop). Mobile sempre visível —
     no touch não tem hover, esconder seria armadilha. */
  opacity: 0;
  transition: opacity var(--bp-dur) var(--bp-ease);
}
.bp-comment:hover .bp-comment-actions,
.bp-comment:focus-within .bp-comment-actions {
  opacity: 1;
}
@media (hover: none) {
  .bp-comment-actions { opacity: 1; }
}
.bp-comment-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  padding: 0; border: 0;
  background: transparent;
  color: var(--bp-ink-faint);
  border-radius: var(--bp-r-sm);
  cursor: pointer;
  transition:
    background var(--bp-dur) var(--bp-ease),
    color      var(--bp-dur) var(--bp-ease);
}
.bp-comment-action:hover {
  background: rgba(255,255,255,0.06);
  color: var(--bp-ink);
}
.bp-comment-action:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.bp-comment-action-danger:hover {
  background: rgba(220, 38, 38, 0.10);
  color: var(--bp-red, #ef4444);
}

.bp-comment-edit-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2px;
}
.bp-comment-edit-textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  font-size: 14.5px;
  line-height: 1.55;
  padding: 10px 12px;
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  color: var(--bp-ink);
  font-family: inherit;
}
.bp-comment-edit-textarea:focus {
  outline: none;
  border-color: var(--bp-blue);
  box-shadow: 0 0 0 3px var(--bp-blue-soft);
}
.bp-comment-edit-actions {
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Sort selector (Recentes/Antigos/Relevantes) ─────────────────────
   2026-05-02: refatorado pra dark mode (color-scheme: dark) + custom
   chevron via background-image. Antes o native `<select>` aberto
   mostrava fundo branco bugado em desktop porque OS sobrepunha
   tema light. */
.bp-disc-sort {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  font-size: 12px;
  color: var(--bp-ink-mute);
  font-family: var(--bp-mono);
  letter-spacing: 0.04em;
}
.bp-disc-sort-label { font-weight: 600; }
.bp-disc-sort-select {
  /* color-scheme: dark obriga browsers/OS a renderizar o popover
     nativo (com as opções) em tema escuro. */
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(0,0,0,0.40);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a8b3c1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--bp-ink);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-sm);
  padding: 6px 26px 6px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    background-color var(--bp-dur) var(--bp-ease);
}
.bp-disc-sort-select:hover {
  border-color: var(--bp-blue);
  background-color: rgba(56, 176, 255, 0.08);
}
.bp-disc-sort-select:focus {
  border-color: var(--bp-blue);
  box-shadow: 0 0 0 3px var(--bp-blue-soft, rgba(56,176,255,0.20));
}
.bp-disc-sort-select option {
  background: #131722;
  color: var(--bp-ink);
}

/* ── Footer do comentário (like + reply) ──────────────────────────── */
.bp-comment-footer {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
}
.bp-comment-like-btn,
.bp-comment-reply-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--bp-ink-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: var(--bp-r-sm);
  transition:
    background var(--bp-dur) var(--bp-ease),
    color      var(--bp-dur) var(--bp-ease),
    transform  150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bp-comment-like-btn:hover,
.bp-comment-reply-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--bp-ink);
}
.bp-comment-like-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bp-comment-like-btn.liked {
  color: var(--bp-blue-hi, #38b0ff);
}
.bp-comment-like-btn.liked:hover {
  background: var(--bp-blue-soft, rgba(56,176,255,0.15));
}
/* Pop animation no click — pulso bouncy no SVG do coração quando liked.
   Usa keyframe pra pulsar (1 → 1.35 → 1) e desabilita após settle.
   Triggered pela classe `.liked` aplicada via toggleLike() no React. */
.bp-comment-like-btn .bp-heart-svg {
  transition: transform 180ms var(--bp-ease);
  transform-origin: center;
}
.bp-comment-like-btn.liked .bp-heart-svg {
  animation: bpHeartPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bpHeartPop {
  0%   { transform: scale(1); }
  20%  { transform: scale(0.85); }
  45%  { transform: scale(1.35); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
/* Pequenas partículas (radial burst) ao curtir — pseudo-elements no
   button geram dois círculos azuis que crescem e somem. */
.bp-comment-like-btn {
  position: relative;
  overflow: visible;
}
.bp-comment-like-btn.liked::before,
.bp-comment-like-btn.liked::after {
  content: '';
  position: absolute;
  top: 50%; left: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bp-blue-hi, #38b0ff);
  pointer-events: none;
  opacity: 0;
  animation: bpHeartBurst 600ms ease-out;
}
.bp-comment-like-btn.liked::after {
  animation-delay: 60ms;
  background: var(--bp-blue, #0099ff);
}
@keyframes bpHeartBurst {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { transform: translate(-50%, -180%) scale(0.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-comment-like-btn.liked .bp-heart-svg,
  .bp-comment-like-btn.liked::before,
  .bp-comment-like-btn.liked::after {
    animation: none !important;
  }
}
.bp-comment-like-btn:active:not(:disabled) {
  transform: scale(1.18);
}
.bp-comment-like-count {
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Composer reply inline — mesma vibe do edit-form */
.bp-comment-reply-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
}
/* "Respondendo a [nome]" — label do composer (Reddit-style) */
.bp-comment-reply-context {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bp-ink-mute);
  letter-spacing: 0.02em;
  text-transform: none;
}
.bp-comment-reply-context strong {
  color: var(--bp-blue-hi, #38b0ff);
  font-weight: 700;
}
.bp-comment-reply-context svg {
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Subthreads multinível Reddit/Threads-style (2026-05-02) ────────────
   Cada nível de profundidade ganha .bp-comment--depth-N (0 a 6). Top-level
   (depth 0) mantém card style. Replies (depth 1+) viram inline com
   connector vertical à esquerda — visualmente igual Reddit. */

/* Container de replies — list aninhada com indent + connector via ::before */
.bp-comment-replies {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 22px;
  position: relative;
}
/* Connector line vertical no left edge (Reddit-style).
   Vai do topo do primeiro filho até bottom do último. */
.bp-comment-replies::before {
  content: '';
  position: absolute;
  left: 8px; top: 4px; bottom: 8px;
  width: 2px;
  background: var(--bp-line);
  border-radius: 1px;
  transition: background var(--bp-dur) var(--bp-ease), width var(--bp-dur) var(--bp-ease);
  pointer-events: none;
}
.bp-comment-replies:hover::before {
  background: var(--bp-blue-hi, #38b0ff);
  width: 3px;
}

/* Botão invisível por cima do connector — touch target maior pra colapsar
   thread inteira ao tocar. Reddit faz exatamente isso na mobile. */
.bp-comment-connector-btn {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}
.bp-comment-connector-btn:focus-visible {
  outline: 2px solid var(--bp-blue-hi, #38b0ff);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Replies (qualquer depth > 0): perdem card style E quebram a grid.
   Reddit-style: layout flat, sem grid 36px+1fr — cada reply aninhada
   ocupa full-width do parent, e o avatar vira inline-block pequeno
   ao lado do nome. Sem isso, cada nível de aninhamento "comia" ~50px
   da largura disponível (avatar 36 + gap 14), deixando depth 5+ com
   menos de 50px de largura — texto quebrava letra por letra. */
.bp-comment.bp-comment--reply {
  display: block !important;          /* override grid do .bp-comment */
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  border-radius: var(--bp-r-sm);
  padding: 10px 10px 10px 8px;
  margin-bottom: 2px;
  transition: background var(--bp-dur) var(--bp-ease);
}
.bp-comment.bp-comment--reply:hover {
  background: rgba(255,255,255,0.025);
}
.bp-comment.bp-comment--reply .bp-comment-text {
  font-size: 13.5px;
}

/* Avatar nas replies — vira inline pequeno ao invés de coluna de grid.
   Top-level (depth 0) mantém o avatar grande na coluna esquerda. */
.bp-comment.bp-comment--reply .bp-comment-avatar {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}
.bp-comment.bp-comment--depth-1 .bp-comment-avatar {
  width: 26px; height: 26px;
  font-size: 10px;
}
.bp-comment.bp-comment--depth-2 .bp-comment-avatar,
.bp-comment.bp-comment--depth-3 .bp-comment-avatar,
.bp-comment.bp-comment--depth-4 .bp-comment-avatar,
.bp-comment.bp-comment--depth-5 .bp-comment-avatar,
.bp-comment.bp-comment--depth-6 .bp-comment-avatar {
  width: 22px; height: 22px;
  font-size: 9px;
}

/* Body em replies vira block full-width (override do flow normal do grid). */
.bp-comment.bp-comment--reply .bp-comment-body {
  display: block;
  min-width: 0;
}
/* Header com avatar inline antes do nome — muda a ordem visual. */
.bp-comment.bp-comment--reply .bp-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  column-gap: 8px;
}

/* Pill "X respostas ocultas" quando branch colapsado.
   Reddit/Threads-style: dashed border + cor azul de "expand". */
.bp-comment-collapsed-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--bp-line);
  border-radius: var(--bp-r-sm);
  color: var(--bp-blue-hi, #38b0ff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  min-height: 36px;
  transition:
    background   var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    color        var(--bp-dur) var(--bp-ease);
}
.bp-comment-collapsed-toggle:hover {
  background: var(--bp-blue-soft, rgba(56,176,255,0.08));
  border-color: var(--bp-blue-hi, #38b0ff);
  border-style: solid;
}
.bp-comment-collapsed-toggle svg {
  flex-shrink: 0;
}
/* Variante "expandido" — pill mais discreto pra indicar que o estado
   atual é "aberto". Borda solid + cor menos saturada. */
.bp-comment-collapsed-toggle--open {
  border-style: solid;
  border-color: var(--bp-line);
  color: var(--bp-ink-mute);
}
.bp-comment-collapsed-toggle--open:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--bp-ink-mute);
  color: var(--bp-ink);
}

/* Menu de contexto (⋯) — substituiu edit/delete inline.
   Wrap relativo + dropdown absoluto à direita. */
.bp-comment-menu-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;   /* empurra pra direita do .bp-comment-head */
}
.bp-comment-menu-btn {
  width: 28px; height: 28px;
  min-height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--bp-ink-mute);
  cursor: pointer;
  opacity: 0.65;
  transition:
    background var(--bp-dur) var(--bp-ease),
    color      var(--bp-dur) var(--bp-ease),
    opacity    var(--bp-dur) var(--bp-ease);
}
.bp-comment:hover .bp-comment-menu-btn,
.bp-comment:focus-within .bp-comment-menu-btn {
  opacity: 1;
}
.bp-comment-menu-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--bp-ink);
}
.bp-comment-menu-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.1);
  color: var(--bp-ink);
  opacity: 1;
}
@media (max-width: 768px) {
  .bp-comment-menu-btn { opacity: 1; }
}

.bp-comment-menu-backdrop {
  display: none;
}

.bp-comment-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 1000;
  min-width: 200px;
  padding: 6px 0;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.25);
  animation: bpMenuIn 150ms var(--bp-ease) both;
}

/* Quando o menu de contexto está aberto, o comentário inteiro sobe pra
   acima dos siblings — senão o próximo .bp-comment (que tem background
   próprio + box-shadow) renderiza por cima do dropdown e corta opções. */
.bp-comment.bp-comment--menu-open {
  position: relative;
  z-index: 100;
}
@keyframes bpMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.bp-comment-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 16px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--bp-ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--bp-dur) var(--bp-ease);
}
.bp-comment-menu-item:hover {
  background: rgba(255,255,255,0.06);
}
.bp-comment-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bp-comment-menu-item--danger {
  color: var(--bp-red, #ef4444);
}
.bp-comment-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}
.bp-comment-menu-item svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* Mobile: bottom-sheet (Reddit/Threads-style — IMG_6053.PNG) */
@media (max-width: 480px) {
  .bp-comment-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(0, 0, 0, 0.55);
    animation: bpFadeIn 200ms var(--bp-ease) both;
  }
  .bp-comment-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 51;
    border-radius: var(--bp-r) var(--bp-r) 0 0;
    border-bottom: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    animation: bpSheetUp 220ms var(--bp-ease) both;
  }
  @keyframes bpSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes bpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .bp-comment-menu-item {
    padding: 14px 22px;
    min-height: 48px;
    font-size: 15px;
  }
  .bp-comment-menu-item svg {
    width: 18px; height: 18px;
  }
}

/* Animações collapse/expand das replies. (2026-05-02 v3)
   Wrapper `.bp-comment-replies-wrap` usa o trick "grid-template-rows:
   0fr → 1fr" pra animar a HEIGHT real do bloco — o card pai cresce
   junto com o conteúdo aparecendo (e encolhe junto ao fechar).
   Estados:
   - default (montado): roda bpRepliesOpen 360ms
   - .is-closing (toggle): roda bpRepliesClose 320ms; após terminar,
     React desmonta o wrapper. */
.bp-comment-replies-wrap {
  display: grid;
  grid-template-rows: 1fr;
  animation: bpRepliesOpen 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.bp-comment-replies-wrap.is-closing {
  animation: bpRepliesClose 320ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.bp-comment-replies-wrap > .bp-comment-replies {
  min-height: 0;
  /* overflow VISÍVEL no estado aberto (parado) pra o tooltip do badge poder
     escapar pra cima sem ser cortado (2026-06-01). O clip só é necessário
     DURANTE o fechamento (animação grid-rows) — aplicado em .is-closing. */
  overflow: visible;
}
.bp-comment-replies-wrap.is-closing > .bp-comment-replies {
  overflow: hidden;
}
@keyframes bpRepliesOpen {
  0%   { grid-template-rows: 0fr; opacity: 0; }
  60%  { opacity: 1; }
  100% { grid-template-rows: 1fr; opacity: 1; }
}
@keyframes bpRepliesClose {
  0%   { grid-template-rows: 1fr; opacity: 1; }
  40%  { opacity: 0.6; }
  100% { grid-template-rows: 0fr; opacity: 0; }
}
.bp-comment-replies {
  transform-origin: top left;
}
/* Pill "X respostas ocultas" — bounce ao trocar de estado collapsed
   ↔ expanded. SVG do +/- gira. */
.bp-comment-collapsed-toggle {
  transition:
    background var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease),
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bp-comment-collapsed-toggle:active {
  transform: scale(0.94);
}
.bp-comment-collapsed-toggle svg {
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.bp-comment-collapsed-toggle--open svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .bp-comment-replies-wrap,
  .bp-comment-replies { animation: none !important; }
  .bp-comment-collapsed-toggle,
  .bp-comment-collapsed-toggle svg {
    transition: none !important;
  }
}

/* Indentação Reddit-style: só 2 níveis ganham indentação visual real
   (depth 1 e 2). Da depth 3 em diante, o conteúdo NÃO indenta mais —
   o connector vertical continua aparecendo, mas o card vira full-width
   do parent. Sem isso, padding cumulativo deixa depth 5+ com largura
   de avatar (26px) e conteúdo overflowa horizontalmente.

   Layout:
   - depth 0 (top-level): card com padding 18px
   - depth 1: indent 22px + connector
   - depth 2: indent 22px + connector (último com indent visível)
   - depth 3+: NO indent, connector mostra hierarquia */
.bp-comment.bp-comment--depth-2 .bp-comment-replies,
.bp-comment.bp-comment--depth-3 .bp-comment-replies,
.bp-comment.bp-comment--depth-4 .bp-comment-replies,
.bp-comment.bp-comment--depth-5 .bp-comment-replies,
.bp-comment.bp-comment--depth-6 .bp-comment-replies {
  padding-left: 0;
}
.bp-comment.bp-comment--depth-2 .bp-comment-replies::before,
.bp-comment.bp-comment--depth-3 .bp-comment-replies::before,
.bp-comment.bp-comment--depth-4 .bp-comment-replies::before,
.bp-comment.bp-comment--depth-5 .bp-comment-replies::before,
.bp-comment.bp-comment--depth-6 .bp-comment-replies::before {
  /* Connector permanece (mesmo sem padding o ::before é absoluto). */
  left: 8px;
}

/* Em depths profundos (>=3) deixa um leve indent via padding no .bp-comment
   pra connector ficar à esquerda do conteúdo, sem cumulativo.
   Padding-left aumentado (14→22) pra dar respiro entre o connector
   vertical (left:8px) e o avatar/foto da resposta. (2026-05-02 v2) */
.bp-comment.bp-comment--depth-3,
.bp-comment.bp-comment--depth-4,
.bp-comment.bp-comment--depth-5,
.bp-comment.bp-comment--depth-6 {
  padding-left: 22px;
  padding-right: 4px;
  /* Quebra do grid 36px+1fr → flat com avatar como inline-block.
     Isso libera os ~50px que o avatar ocupava como coluna fixa em
     cada nível. Conteúdo ganha ~50px adicionais de largura por nível. */
  display: block !important;
}
.bp-comment.bp-comment--depth-3 .bp-comment-avatar,
.bp-comment.bp-comment--depth-4 .bp-comment-avatar,
.bp-comment.bp-comment--depth-5 .bp-comment-avatar,
.bp-comment.bp-comment--depth-6 .bp-comment-avatar {
  /* Avatar vira parte do header — flutua pra esquerda do nome. */
  float: left;
  margin-right: 8px;
  width: 22px !important;
  height: 22px !important;
  font-size: 9px !important;
}
.bp-comment.bp-comment--depth-3 .bp-comment-body,
.bp-comment.bp-comment--depth-4 .bp-comment-body,
.bp-comment.bp-comment--depth-5 .bp-comment-body,
.bp-comment.bp-comment--depth-6 .bp-comment-body {
  /* Body ocupa toda a largura, sem fluxo de grid. */
  display: block;
  overflow: hidden;
}

@media (max-width: 480px) {
  .bp-comment-replies {
    padding-left: 12px;
  }
  .bp-comment-replies::before {
    left: 3px;
  }
  .bp-comment.bp-comment--depth-3,
  .bp-comment.bp-comment--depth-4,
  .bp-comment.bp-comment--depth-5,
  .bp-comment.bp-comment--depth-6 {
    padding-left: 10px;
  }
}

/* Comentário apagado (soft-delete): só o tombstone, sem texto, sem ações */
.bp-comment.is-deleted {
  opacity: 0.7;
}
.bp-comment.is-deleted .bp-comment-avatar {
  filter: grayscale(0.6);
  opacity: 0.6;
}
.bp-comment-deleted-msg {
  color: var(--bp-ink-faint) !important;
  font-size: 13.5px !important;
}
.bp-comment-deleted-msg em {
  font-style: italic;
}

/* Mobile: ações ficam mais compactas e o textarea respira mais */
@media (max-width: 768px) {
  .bp-comment-action {
    width: 32px; height: 32px;
    min-height: 0;   /* override do reset 44px do mobile.css */
  }
  .bp-comment-edit-textarea {
    font-size: 16px;  /* iOS Safari não dá zoom em ≥16px */
  }
}

/* Compose box — glass + rounded + shadow, alinhado com comments abaixo */
.bp-comment-compose {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 28px;
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border: 1px solid var(--bp-glass-border);
  border-top-color: rgba(255, 255, 255, 0.10);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
}

.bp-compose-body { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Textarea dentro do compose — espaçamento interno + focus ring sutil */
.bp-comment-compose .bp-textarea {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 90px;
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.bp-comment-compose .bp-textarea:focus {
  outline: none;
  border-color: rgba(0, 153, 255, 0.50);
  background: rgba(0, 0, 0, 0.32);
  box-shadow:
    0 0 0 3px rgba(0, 153, 255, 0.12),
    0 0 0 1px rgba(0, 153, 255, 0.30) inset;
}

.bp-compose-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.bp-compose-hint {
  font-family: var(--bp-mono); font-size: 10.5px;
  color: var(--bp-ink-faint); letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}

/* Avaliação */
.bp-evaluation {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--bp-line-strong);
}
.bp-reeval-banner {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--bp-orange);
  font-size: 13px; line-height: 1.45;
  margin-bottom: 28px;
}
.bp-eval-head { margin-bottom: 36px; }
.bp-eval-eyebrow {
  font-family: var(--bp-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--bp-ink-mute);
  display: block; margin-bottom: 8px;
}
.bp-eval-sub {
  font-size: 14px; color: var(--bp-ink-mute); margin: 0;
  max-width: 620px; line-height: 1.55;
}

.bp-eval-overall {
  padding: 24px 0 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--bp-line);
}
.bp-eval-overall-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.bp-eval-overall-label {
  font-family: var(--bp-mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bp-ink);
}
.bp-eval-resumo {
  font-size: 15px; color: var(--bp-ink-dim);
  margin: 20px 0 0; line-height: 1.65;
  text-wrap: pretty;
}

.bp-eval-metrics { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; }

.bp-metric {}
.bp-metric-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.bp-metric-key {
  font-family: var(--bp-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bp-ink);
}
.bp-metric-qual {
  font-family: var(--bp-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.bp-metric-qual.high { color: var(--bp-teal); }
.bp-metric-qual.mid { color: var(--bp-orange); }
.bp-metric-qual.low, .bp-metric-qual.mute { color: var(--bp-ink-mute); }

.bp-metric-bar {
  width: 100%; height: 6px;
  background: var(--bp-line);
  overflow: hidden;
  margin-bottom: 10px;
}
.bp-metric-bar.big { height: 10px; }
.bp-metric-fill {
  height: 100%; background: var(--bp-teal);
  width: 0%;
  transition: width 900ms var(--bp-ease);
}
.bp-metric-just {
  font-size: 13px; color: var(--bp-ink-mute);
  margin: 0; line-height: 1.6;
  text-wrap: pretty;
}

.bp-eval-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--bp-line);
  margin-bottom: 24px;
}
.bp-eval-col-title {
  font-family: var(--bp-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bp-ink); margin: 0 0 12px;
}
.bp-eval-col ul {
  list-style: none; padding: 0; margin: 0;
}
.bp-eval-col li {
  position: relative; padding-left: 16px;
  font-size: 13.5px; color: var(--bp-ink-dim);
  line-height: 1.55; margin-bottom: 8px;
}
.bp-eval-col li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 1px; background: var(--bp-teal);
}

.bp-eval-notion {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-teal); letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 153, 255,0.3);
  padding-bottom: 2px;
  transition: gap 160ms var(--bp-ease);
}
.bp-eval-notion:hover { gap: 10px; }

/* Sidebar detail */
.bp-detail-side {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-width: 0;
  /* hide scrollbar chrome but keep scrolling */
  scrollbar-width: thin;
  scrollbar-color: var(--bp-line) transparent;
  padding: 24px 4px;       /* respiro top/bottom pro fade respirar */
  margin: -24px -4px;      /* compensa visual: caixas começam onde antes começavam */
  /* Fade nas pontas — quando o conteúdo overflow, o que está fora some
     suavemente em vez de ser cortado abruptamente.
     Topo: 32px de fade, idem bottom. Centro permanece nítido. */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
          mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
}
.bp-detail-side > * { min-width: 0; }
.bp-detail-side::-webkit-scrollbar { width: 6px; }
.bp-detail-side::-webkit-scrollbar-track { background: transparent; }
.bp-detail-side::-webkit-scrollbar-thumb {
  background: var(--bp-line);
  border-radius: var(--bp-r-sm);
}
.bp-detail-side::-webkit-scrollbar-thumb:hover { background: var(--bp-muted, #4a5568); }
.bp-side-box {
  border: 1px solid var(--bp-line);
  border-top: 2px solid var(--bp-blue);
  border-top-color: var(--bp-blue);
  background: rgba(255,255,255,0.025);
  padding: 20px 20px 22px;
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  position: relative;
  transition: box-shadow var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}
.bp-side-box.ghost { border-top-color: var(--bp-line-strong); }
.bp-side-title {
  font-family: var(--bp-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bp-ink); display: block; margin-bottom: 16px;
}
.bp-side-mute { font-size: 13px; color: var(--bp-ink-mute); margin: 0; line-height: 1.55; }

.bp-vote-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; margin-bottom: 14px;
}
.bp-vote-num {
  padding: 10px 0;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  color: var(--bp-ink-dim);
  font-family: var(--bp-mono); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 160ms var(--bp-ease);
}
.bp-vote-num:hover { border-color: var(--bp-teal); color: var(--bp-teal); }
.bp-vote-num.on {
  background: var(--bp-teal); border-color: var(--bp-teal);
  color: var(--bp-teal-ink);
}
.bp-vote-num.voted:not(.on) {
  border-color: rgba(0, 153, 255,0.4); color: var(--bp-teal);
}
.bp-vote-submit {
  width: 100%; padding: 12px !important; font-size: 13px !important;
  letter-spacing: 0.06em;
}
.bp-vote-toast {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: var(--bp-teal); color: var(--bp-teal-ink);
  padding: 6px 14px;
  font-family: var(--bp-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  animation: bpFadeUp 280ms var(--bp-ease);
}

.bp-side-stat {
  font-family: var(--bp-mono); font-size: 11px;
  color: var(--bp-ink-mute); letter-spacing: 0.04em;
  margin: 0 0 16px;
}
.bp-histo {
  padding: 8px 0 14px;
  border-top: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
  margin-bottom: 16px;
}
.bp-histo-bars {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  height: 60px; align-items: end;
  margin-bottom: 6px;
}
.bp-histo-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; height: 100%;
  justify-content: flex-end;
}
.bp-histo-bar {
  width: 100%;
  background: rgba(0, 153, 255,0.32);
  min-height: 2px;
  transition: height 800ms var(--bp-ease), background 200ms var(--bp-ease);
}
.bp-histo-col.mine .bp-histo-bar { background: var(--bp-teal); box-shadow: 0 0 0 1px var(--bp-teal-ink); }
.bp-histo-col .bp-histo-label {
  font-family: var(--bp-mono); font-size: 8.5px;
  color: var(--bp-ink-faint); letter-spacing: 0.04em;
}
.bp-histo-col.mine .bp-histo-label { color: var(--bp-teal); font-weight: 700; }

.bp-side-consensus {}
.bp-consensus-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.bp-consensus-label {
  font-family: var(--bp-mono); font-size: 10.5px;
  color: var(--bp-ink); letter-spacing: 0.1em; text-transform: uppercase;
}

.bp-side-author {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
}
.bp-side-author > div {
  flex: 1;
  min-width: 0;
}
.bp-side-author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 153, 255,0.14); border: 1px solid rgba(0, 153, 255,0.4);
  color: var(--bp-teal); font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.bp-side-author-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.bp-side-author-name {
  font-family: var(--bp-poster); font-style: italic;
  font-size: 16px; color: var(--bp-ink);
}
.bp-side-author-sub {
  font-family: var(--bp-mono); font-size: 10.5px;
  color: var(--bp-ink-faint); letter-spacing: 0.06em;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-side-btn {
  width: 100%; padding: 10px !important; font-size: 12px !important;
  letter-spacing: 0.06em; margin-bottom: 8px;
}
.bp-side-btn:last-child { margin-bottom: 0; }
.bp-side-caption {
  font-size: 11.5px; color: var(--bp-ink-faint);
  margin: 10px 0 0; line-height: 1.55;
}

/* Mine card — clickable mode */
.bp-mine-card.clickable { cursor: pointer; }

/* Submit: second CTA */
.bp-proc-result-ctas .bp-btn-primary { order: 0; }

@media (max-width: 1060px) {
  .bp-gal-cards { grid-template-columns: 1fr; }
  .bp-gallery-grid { grid-template-columns: 1fr; }
  .bp-gallery-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .bp-gallery-side-box { flex: 1 1 220px; }
  .bp-detail-grid { grid-template-columns: 1fr; }
  .bp-detail-side { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; overflow: visible; }
  .bp-side-box { flex: 1 1 260px; }
}
@media (max-width: 700px) {
  .bp-gallery-wrap, .bp-detail-wrap { padding-left: 20px; padding-right: 20px; }
  .bp-eval-grid { grid-template-columns: 1fr; }
  .bp-comment-compose { grid-template-columns: 1fr; }
  .bp-comment-compose .bp-comment-avatar { display: none; }
}


/* ── v4: Avaliação expandida (accordions) ─────────────────────────── */
.bp-evaluation .g-metrics {
  border-top: 1px solid var(--bp-line);
  margin-top: 28px;
}
.g-metric-row {
  border-bottom: 1px solid var(--bp-line);
  padding: 18px 0;
  transition: background 200ms var(--bp-ease);
}
.g-metric-row[open] { background: rgba(0, 153, 255,0.025); }
.g-metric-row summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 10px;
  outline: none;
}
.g-metric-row summary::-webkit-details-marker { display: none; }
.g-metric-row summary:hover .g-metric-label { color: var(--bp-teal); }
.g-metric-row summary:hover .g-chevron { color: var(--bp-teal); }

.g-metric-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.g-metric-label {
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-ink);
  flex: 1;
  transition: color 160ms var(--bp-ease);
}
.g-metric-qual {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bp-qual-muito-alta, .bp-qual-alta { color: var(--bp-teal); }
.bp-qual-media-alta, .bp-qual-media { color: #F5A623; }
.bp-qual-baixa, .bp-qual-muito-baixa, .bp-qual-sem-consenso { color: var(--bp-ink-mute); }

.g-chevron {
  transition: transform 220ms var(--bp-ease), color 160ms var(--bp-ease);
  color: var(--bp-ink-mute);
  flex-shrink: 0;
}
.g-metric-row[open] .g-chevron,
.g-analysis-block[open] .g-chevron {
  transform: rotate(90deg);
  color: var(--bp-teal);
}

.g-metric-bar {
  width: 100%;
  height: 3px;
  background: var(--bp-line);
  overflow: hidden;
}
.g-metric-fill {
  height: 100%;
  background: var(--bp-teal);
  transition: width 900ms var(--bp-ease);
}

.g-metric-preview {
  font-size: 13.5px;
  color: var(--bp-ink-mute);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-metric-row[open] .g-metric-preview { display: none; }

.g-metric-body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--bp-ink-dim);
  padding: 14px 0 4px;
  animation: bpFadeUp 360ms var(--bp-ease);
}
.g-metric-body p { margin: 0; }
.g-metric-body p + p { margin-top: 14px; }

/* ── Accordions de análise estratégica (A/B/C) ───────────────────── */
.g-analysis-block {
  border: 1px solid var(--bp-line);
  margin-top: 14px;
  background: var(--bp-bg-elev);
  transition: border-color 200ms var(--bp-ease);
}
.g-analysis-block[open] { border-color: var(--bp-line-strong); }
.g-analysis-block summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  outline: none;
}
.g-analysis-block summary::-webkit-details-marker { display: none; }
.g-analysis-block summary:hover .bp-eyebrow { color: var(--bp-blue-hi); }

.g-analysis-head {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.g-analysis-sub {
  font-size: 12.5px;
  color: var(--bp-ink-mute);
  line-height: 1.5;
}

.g-analysis-body {
  padding: 4px 22px 22px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--bp-ink-dim);
  animation: bpFadeUp 400ms var(--bp-ease);
}
.g-analysis-body h4 {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bp-ink-mute);
  margin: 22px 0 10px;
}
.g-analysis-body h4:first-child { margin-top: 4px; }
.g-analysis-body ul {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}
.g-analysis-body li {
  margin: 8px 0;
  position: relative;
  padding-left: 4px;
}
.g-analysis-body li::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--bp-teal);
  border-radius: 50%;
}

/* Markdown do advogado do diabo */
.g-analysis-markdown p { margin: 0 0 14px; }
.g-analysis-markdown p:last-child { margin-bottom: 0; }
.g-analysis-markdown strong { color: var(--bp-ink); font-weight: 600; }
.g-analysis-markdown em { color: var(--bp-ink); font-style: italic; }
.g-analysis-markdown ul { margin: 10px 0 16px; }

/* ── Entidades ──────────────────────────────────────────────────── */
.g-entidades-grid {
  padding: 4px 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  animation: bpFadeUp 400ms var(--bp-ease);
}
@media (max-width: 680px) {
  .g-entidades-grid { grid-template-columns: 1fr; }
}
.g-ent-block { min-width: 0; }
.g-ent-label {
  font-family: var(--bp-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bp-ink-mute);
  margin-bottom: 10px;
  display: block;
}
.g-ent-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.g-ent-pill {
  background: rgba(0, 153, 255,0.10);
  color: var(--bp-teal);
  border: 1px solid rgba(0, 153, 255,0.22);
  font-size: 10.5px;
  padding: 4px 9px;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ── Link Notion ────────────────────────────────────────────────── */
.g-notion-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 32px;
  color: var(--bp-teal);
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 153, 255,0.3);
  transition: border-color 160ms var(--bp-ease), color 160ms var(--bp-ease);
}
.g-notion-link:hover {
  color: var(--bp-blue-hi);
  border-bottom-color: var(--bp-blue-hi);
}



/* ═══════════════════════════════════════════════════════════════════════
   v5 — Busca inteligente + Agente pesquisador
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Search bar ─────────────────────────────────────────────────────── */
.g-search-block { margin-bottom: 24px; }
.g-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--bp-r-lg);
  height: 56px;
  padding: 0 12px 0 52px;
  position: relative;
  margin-bottom: 12px;
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.g-search-bar:focus-within {
  border-color: var(--bp-blue);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--bp-shadow-focus);
}
.g-search-bar.agent {
  border-color: var(--bp-blue-soft);
  background: linear-gradient(to right, var(--bp-blue-glow), rgba(255,255,255,0.025) 40%);
}

.g-search-bar-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bp-ink-mute);
  transition: color 200ms var(--bp-ease);
}
.g-search-bar.agent .g-search-bar-icon { color: var(--bp-teal); }

.g-search-bar input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--bp-ink);
  font-size: 15px;
  outline: none;
  font-family: var(--bp-sans);
  height: 100%;
}
.g-search-bar input::placeholder { color: var(--bp-ink-faint); }
.g-search-bar input:disabled { opacity: 0.5; cursor: progress; }

.g-search-clear {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--bp-ink-mute);
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms var(--bp-ease);
}
.g-search-clear:hover { color: var(--bp-ink); }

.g-search-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 153, 255,0.2);
  border-top-color: var(--bp-teal);
  border-radius: 50%;
  animation: bpSpin 700ms linear infinite;
}
@keyframes bpSpin { to { transform: rotate(360deg); } }

/* Mode toggle row — discreet eyebrow below input */
.g-mode-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.g-mode-toggle {
  display: flex;
  gap: 20px;
  font-family: var(--bp-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.g-mode-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bp-ink-faint);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 160ms var(--bp-ease);
}
.g-mode-option:hover { color: var(--bp-ink-mute); }
.g-mode-option.active { color: var(--bp-teal); }
.g-mode-option::before {
  content: "○";
  font-size: 12px;
  display: inline-block;
  line-height: 1;
}
.g-mode-option.active::before { content: "●"; }

.g-mode-feedback {
  font-family: var(--bp-mono);
  font-size: 11px;
  color: var(--bp-ink-mute);
  letter-spacing: 0.04em;
}
.g-mode-feedback.hidden { visibility: hidden; }

/* ── Agent response card ────────────────────────────────────────────── */
.g-agent-response {
  position: relative;
  border: 1px solid rgba(0, 153, 255,0.28);
  background:
    linear-gradient(180deg, rgba(0, 153, 255,0.04) 0%, rgba(0, 153, 255,0) 60%),
    var(--bp-bg-elev);
  padding: 26px 30px 24px;
  margin-bottom: 32px;
  opacity: 1;
}
.g-agent-response.is-fresh {
  animation: bpFadeUp 460ms var(--bp-ease) both;
}
.g-agent-response::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bp-teal), rgba(0, 153, 255,0.3));
}

.g-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.g-agent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bp-ink-mute);
  text-transform: uppercase;
}
.g-agent-eyebrow em {
  font-style: italic;
  color: var(--bp-ink);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.g-agent-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-teal);
  box-shadow: 0 0 10px rgba(0, 153, 255,0.5);
}
.g-agent-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-teal);
  animation: bpPulse 1.3s ease-in-out infinite;
}
@keyframes bpPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.g-agent-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--bp-ink-faint);
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms var(--bp-ease);
}
.g-agent-dismiss:hover { color: var(--bp-ink); }

.g-agent-body {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--bp-ink-dim);
  margin-top: 4px;
}
.g-agent-body p { margin: 0; }
.g-agent-body p + p { margin-top: 14px; }
.g-agent-body strong { color: var(--bp-ink); font-weight: 600; }

.g-cite {
  font-size: 0.72em;
  margin-left: 1px;
  vertical-align: super;
  line-height: 0;
}
.g-cite a {
  color: var(--bp-teal);
  text-decoration: none;
  font-family: var(--bp-mono);
  font-weight: 700;
  padding: 1px 4px;
  border: 1px solid rgba(0, 153, 255,0.3);
  transition: all 140ms var(--bp-ease);
}
.g-cite a:hover {
  background: var(--bp-teal);
  color: #0A1A14;
  border-color: var(--bp-teal);
}

/* Citations mini-list */
.g-agent-citations {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--bp-line);
}
.g-agent-citations-label {
  display: block;
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--bp-ink-faint);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.g-agent-citations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.g-agent-cit-mini {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--bp-ink-dim);
  font-size: 13.5px;
  line-height: 1.5;
  padding: 4px 0;
  transition: color 160ms var(--bp-ease);
}
.g-agent-cit-mini:hover { color: var(--bp-ink); }
.g-agent-cit-mini:hover .g-agent-cit-title {
  border-bottom-color: var(--bp-teal);
  color: var(--bp-ink);
}
.g-agent-cit-num {
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bp-teal);
  flex-shrink: 0;
  min-width: 26px;
}
.g-agent-cit-title {
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--bp-ease);
}

/* Divider */
.g-agent-divider {
  height: 1px;
  background: var(--bp-line);
  margin: 22px -30px 18px;
}

/* Suggestions + chips */
.g-agent-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-agent-suggestions-label {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bp-ink-faint);
  text-transform: uppercase;
}
.g-agent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: transparent;
  color: var(--bp-teal);
  border: 1px solid rgba(0, 153, 255,0.3);
  font-size: 13px;
  font-family: var(--bp-sans);
  cursor: pointer;
  transition: all 160ms var(--bp-ease);
}
.g-chip svg { opacity: 0.6; transition: transform 180ms var(--bp-ease); }
.g-chip:hover {
  background: rgba(0, 153, 255,0.08);
  border-color: var(--bp-teal);
}
.g-chip:hover svg { transform: translateX(2px); opacity: 1; }

/* Follow-up button + textarea */
.g-agent-followup-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: transparent;
  color: var(--bp-teal);
  font-size: 13px;
  font-family: var(--bp-sans);
  border: 0;
  border-bottom: 1px solid rgba(0, 153, 255,0.3);
  cursor: pointer;
  padding: 5px 0;
  transition: border-color 160ms var(--bp-ease);
}
.g-agent-followup-btn:hover { border-bottom-color: var(--bp-teal); }
.g-agent-turn-count {
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
  margin-left: 2px;
}

.g-agent-followup {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--bp-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: bpFadeUp 260ms var(--bp-ease);
}
.g-agent-followup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.g-agent-followup-hint {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--bp-ink-faint);
}
.g-agent-followup-actions { display: flex; gap: 8px; }

/* Shimmer loading state */
.g-agent-loading .g-agent-shimmer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.g-shim-line {
  height: 12px;
  background: linear-gradient(90deg,
    rgba(0, 153, 255,0.04) 0%,
    rgba(0, 153, 255,0.14) 50%,
    rgba(0, 153, 255,0.04) 100%);
  background-size: 200% 100%;
  animation: bpShimmer 1.6s ease-in-out infinite;
}
@keyframes bpShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Idea card — estados de agente ─────────────────────────────────── */
.g-idea-card {
  position: relative;
  transition: opacity 200ms var(--bp-ease), transform 200ms var(--bp-ease);
}
.g-idea-card.dimmed { opacity: 0.48; }
.g-idea-card.dimmed:hover { opacity: 0.85; }
.g-idea-card.cited { outline: 1px solid rgba(0, 153, 255,0.35); outline-offset: -1px; }
.g-idea-card.g-idea-card-flash {
  animation: bpCardFlash 1.2s ease-out;
}
@keyframes bpCardFlash {
  0% { box-shadow: 0 0 0 0 rgba(0, 153, 255,0); }
  20% { box-shadow: 0 0 0 4px rgba(0, 153, 255,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(0, 153, 255,0); }
}

.g-idea-card-cite-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bp-teal);
  color: #0A1A14;
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  letter-spacing: 0.04em;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 153, 255,0.35);
}

/* Match reason caption */
.g-match-reason {
  display: inline-block;
  font-family: var(--bp-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 2px 6px;
  border: 1px solid;
}
.g-match-reason.textual { color: var(--bp-ink-faint); border-color: var(--bp-line); }
.g-match-reason.semantico-forte { color: var(--bp-teal); border-color: rgba(0, 153, 255,0.4); }
.g-match-reason.semantico-medio { color: #F5A623; border-color: rgba(245,166,35,0.4); }

/* Sidebar hint */
.bp-gallery-side-hint {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--bp-line);
}
.bp-gal-hint-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--bp-ink-faint);
  margin: 8px 0 0;
}
.bp-gal-hint-text strong { color: var(--bp-ink-dim); font-weight: 500; }

/* Filter "só citadas" */
.g-filter-cited {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: transparent;
  color: var(--bp-ink-mute);
  border: 1px solid var(--bp-line);
  font-family: var(--bp-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 160ms var(--bp-ease);
}
.g-filter-cited:hover { color: var(--bp-ink); border-color: var(--bp-line-strong); }
.g-filter-cited.on {
  color: var(--bp-teal);
  border-color: var(--bp-teal);
  background: rgba(0, 153, 255,0.06);
}
.g-filter-cited-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bp-teal);
}
.g-filter-cited:not(.on) .g-filter-cited-dot { background: var(--bp-ink-faint); }

.bp-gal-count-sub {
  font-family: var(--bp-mono);
  font-size: 11px;
  color: var(--bp-ink-faint);
  letter-spacing: 0.04em;
  margin-left: 4px;
  font-weight: 400;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .g-search-bar { height: 52px; padding: 0 12px 0 44px; }
  .g-search-bar-icon { left: 16px; }
  .g-search-bar input { font-size: 14px; }
  .g-mode-toggle-row { flex-wrap: wrap; gap: 8px; padding: 0 4px; }
  .g-mode-toggle { gap: 14px; }
  .g-mode-feedback { font-size: 10px; }
  .g-agent-response { padding: 22px 18px 20px; }
  .g-agent-divider { margin-left: -18px; margin-right: -18px; }
}

/* ════════════════════════════════════════════════════════════════════
   FEED VIEW (single-column, rich cards, infinite scroll)
   ════════════════════════════════════════════════════════════════════ */

.bp-view-toggle {
  display: inline-flex;
  border: 1px solid var(--bp-line);
  background: var(--bp-bg-elev);
}
.bp-view-toggle button {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font-family: var(--bp-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
  cursor: pointer;
  transition: color 180ms var(--bp-ease), background 180ms var(--bp-ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.bp-view-toggle button:hover { color: var(--bp-ink-dim); }
.bp-view-toggle button.active {
  color: var(--bp-teal);
  background: rgba(0, 153, 255,0.08);
}
.bp-view-toggle button + button { border-left: 1px solid var(--bp-line); }
.bp-view-toggle svg { width: 12px; height: 12px; }

/* Wrapper that swaps width based on view mode */
.bp-feed-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.bp-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.bp-feed-card {
  position: relative;
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--bp-ease),
              transform 700ms var(--bp-ease),
              box-shadow var(--bp-dur) var(--bp-ease),
              border-color var(--bp-dur) var(--bp-ease),
              background var(--bp-dur) var(--bp-ease);
}
.bp-feed-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .bp-feed-card { opacity: 1; transform: none; transition: none; }
}
.bp-feed-card:hover {
  border-color: var(--bp-line-strong);
  border-top-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--bp-shadow-card-hover);
}
.bp-feed-card:hover .bp-feed-card-thumb img { transform: scale(1.03); }
.bp-feed-card:hover .bp-feed-card-thumb-ph { color: rgba(56,176,255,0.7); }
.bp-feed-card:hover .bp-feed-card-thumb::before { opacity: 0.85; }

/* Hero image — full bleed inside card com gradient + glow */
.bp-feed-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #001F33 0%, #0a1626 60%, #001028 100%);
}
.bp-feed-card-thumb::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, var(--bp-blue-soft) 0%, transparent 60%);
  opacity: 0.55;
  transition: opacity var(--bp-dur-slow) var(--bp-ease);
  pointer-events: none;
}
.bp-feed-card-thumb img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--bp-ease);
  z-index: 1;
}
.bp-feed-card-thumb-ph {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0, 153, 255, 0.5);
  transition: color var(--bp-dur) var(--bp-ease);
  z-index: 1;
}
.bp-feed-card-mine {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--bp-mono); font-size: 9px; font-weight: 600;
  padding: 5px 10px; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--bp-r-sm);
  background: var(--bp-blue); color: var(--bp-blue-ink);
  z-index: 2;
}

/* Body */
.bp-feed-card-body {
  padding: 28px 32px 24px;
  display: flex; flex-direction: column;
  gap: 0;
}

.bp-feed-card-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.bp-feed-eyebrow-left {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Pill de categoria — mesmo glass style do trending hero. */
.bp-feed-cluster {
  display: inline-flex;
  align-items: center;
  height: 28px;
  min-height: 0;
  background: rgba(8, 11, 16, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--bp-blue-hi, #38b0ff);
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 11px;
  border-radius: var(--bp-r-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px -6px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  line-height: 1;
}
.bp-feed-qual {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
}
.bp-feed-qual.high { color: var(--bp-teal); }
.bp-feed-qual.mid  { color: var(--bp-orange); }
.bp-feed-qual.low,
.bp-feed-qual.mute { color: var(--bp-ink-faint); }
.bp-feed-qual-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.bp-feed-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--bp-ink);
  text-wrap: balance;
}

.bp-feed-pitch {
  font-family: var(--bp-poster);
  font-style: italic;
  font-size: 17px;
  color: var(--bp-ink-dim);
  line-height: 1.55;
  margin: 0 0 24px;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}

/* Avaliação row — bar */
.bp-feed-aval {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
  margin-bottom: 18px;
}
.bp-feed-aval-label {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  color: var(--bp-ink-faint);
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.bp-feed-aval-bar {
  flex: 1;
  height: 4px;
  background: var(--bp-line);
  position: relative;
  overflow: hidden;
}
.bp-feed-aval-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bp-teal);
  transform-origin: left;
  transition: transform 600ms var(--bp-ease);
}
.bp-feed-aval-bar-fill.mid  { background: var(--bp-orange); }
.bp-feed-aval-bar-fill.low  { background: var(--bp-ink-faint); }

/* Foot */
.bp-feed-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.bp-feed-author {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0;
}
.bp-feed-avatar {
  width: 30px; height: 30px;
  background: var(--bp-teal);
  color: var(--bp-teal-ink);
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative; overflow: hidden; border-radius: 50%;  /* p/ img absolute */
}
.bp-feed-author-name {
  font-size: 13px;
  color: var(--bp-ink-dim);
  font-weight: 500;
}
.bp-feed-stats {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--bp-mono);
  font-size: 12px;
  color: var(--bp-ink-mute);
}
.bp-feed-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bp-feed-stats svg { opacity: 0.85; }
.bp-feed-cta {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-ink-faint);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 180ms var(--bp-ease), gap 220ms var(--bp-ease);
}
.bp-feed-card:hover .bp-feed-cta {
  color: var(--bp-teal);
  gap: 12px;
}

/* Loading sentinel */
.bp-feed-sentinel {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bp-mono);
  font-size: 10px;
  color: var(--bp-ink-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 16px;
}
.bp-feed-sentinel-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bp-teal);
  margin-right: 10px;
  animation: bpPulse 1.4s var(--bp-ease) infinite;
}
@keyframes bpPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

/* Mobile feed */
@media (max-width: 700px) {
  .bp-feed-wrap { max-width: 100%; }
  .bp-feed-card-body { padding: 22px 20px 20px; }
  .bp-feed-title { font-size: 22px; }
  .bp-feed-pitch { font-size: 15px; }
  .bp-feed-card-eyebrow { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   v7 — PANORAMA (TrendingBanner + FeaturedCollection + Coleção)
   ══════════════════════════════════════════════════════════════ */

.bp-panorama-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 108px 48px 20px;
}

/* ── Trending banner v8 (Steam-style carousel) ────────────────────────
   1 card grande por vez, auto-advance 7s, hero+panel side-by-side.
   Glass + shadow + rounded + fade nas bordas. */
.bp-trending {
  margin-bottom: 28px;
  padding: 24px 0 18px;
  position: relative;
}
.bp-trending-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 24px;
  margin: 0 0 18px;
  padding: 0 8px;
  flex-wrap: wrap;
}
.bp-trending-head-left { flex: 1; min-width: 280px; max-width: 640px; }
.bp-trending-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bp-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-blue); font-weight: 700;
  margin-bottom: 6px;
}
.bp-trending-sub {
  font-size: 14px; line-height: 1.55; color: var(--bp-ink-dim);
  margin: 0; max-width: 580px;
}

.bp-trending-period {
  display: inline-flex; gap: 0;
  font-family: var(--bp-mono); font-size: 10.5px;
  letter-spacing: 0.12em;
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border: 1px solid var(--bp-glass-border);
  border-radius: var(--bp-r);
  overflow: hidden;
}
.bp-trending-period button {
  background: transparent; border: 0;
  color: var(--bp-ink-faint); padding: 8px 14px;
  cursor: pointer; text-transform: uppercase;
  transition: background var(--bp-dur) var(--bp-ease), color var(--bp-dur) var(--bp-ease);
}
.bp-trending-period button:hover { color: var(--bp-ink); background: rgba(255,255,255,0.04); }
.bp-trending-period button.active {
  background: var(--bp-blue);
  color: var(--bp-blue-ink, #04111a);
  font-weight: 700;
  box-shadow: 0 4px 16px -6px var(--bp-blue-soft);
}

/* ── Stage: container do card único + setas + fades ── */
.bp-trending-stage {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Viewport: wrapper com border-radius + overflow:hidden, contém o track. */
.bp-trending-viewport {
  flex: 1;
  min-width: 0;
  position: relative;
  border-radius: var(--bp-r-xl);
  overflow: hidden;
}
/* Track: flex strip com TODOS os cards lado a lado. translateX inline
   posiciona o card current no centro; durante swipe (mobile) acompanha
   o dedo. Em desktop, é o que move ao clicar nas setas prev/next. */
.bp-trending-track {
  display: flex;
  flex-direction: row;
  width: 100%;
  will-change: transform;
  transition: transform 320ms cubic-bezier(.2, .9, .25, 1);
}
.bp-trending-track.is-dragging {
  transition: none;
}
.bp-trending-card {
  flex: 0 0 100%;
  width: 100%;
}

/* Edge fades — fade sutil na esquerda/direita pra dar profundidade */
.bp-trending-fade {
  position: absolute; top: 0; bottom: 0;
  width: 64px;
  z-index: 3;
  pointer-events: none;
}
.bp-trending-fade-l {
  left: 0;
  background: linear-gradient(90deg,
    rgba(8,12,18,0.65) 0%,
    rgba(8,12,18,0.18) 55%,
    transparent 100%);
}
.bp-trending-fade-r {
  right: 0;
  background: linear-gradient(270deg,
    rgba(8,12,18,0.65) 0%,
    rgba(8,12,18,0.18) 55%,
    transparent 100%);
}

/* ── Card único ── */
.bp-trending-card {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  min-height: 300px;
  background:
    linear-gradient(180deg, rgba(20,24,28,0.88), rgba(14,18,22,0.95)),
    var(--bp-blue-glow);
  background-blend-mode: normal, screen;
  border: 1px solid var(--bp-glass-border);
  border-top-color: rgba(255,255,255,0.10);
  border-radius: var(--bp-r-xl);
  box-shadow:
    0 24px 80px -24px rgba(0,0,0,0.78),
    0 8px 24px -8px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  position: relative;
  overflow: hidden;
}
/* Fade direcional — next desliza da direita, prev da esquerda */
.bp-trending-card--next { animation: bpTrendingSlideNext 380ms var(--bp-ease) both; }
.bp-trending-card--prev { animation: bpTrendingSlidePrev 380ms var(--bp-ease) both; }
@keyframes bpTrendingSlideNext {
  from { opacity: 0; transform: translateX(24px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes bpTrendingSlidePrev {
  from { opacity: 0; transform: translateX(-24px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-trending-card--next,
  .bp-trending-card--prev { animation: none; }
}

/* ── Hero (esquerda): capa real OU fallback gradient+glyph ── */
.bp-trending-hero {
  position: relative;
  padding: 36px 40px 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
}

/* Fallback: gradient azul + glyph quando não tem capa */
.bp-trending-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%,
      rgba(0,153,255,0.18) 0%,
      rgba(0,153,255,0.06) 35%,
      transparent 65%),
    radial-gradient(circle at 18% 80%,
      rgba(56,176,255,0.12) 0%,
      transparent 60%),
    linear-gradient(135deg, #0a1626 0%, #0f1d30 50%, #08111c 100%);
  z-index: -2;
}
.bp-trending-glyph {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  color: rgba(56,176,255,0.22);
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(0,153,255,0.18));
  animation: bpTrendingGlyph 12s ease-in-out infinite;
}
@keyframes bpTrendingGlyph {
  0%, 100% { transform: translateY(-50%) scale(1) rotate(0deg); }
  50%      { transform: translateY(-52%) scale(1.04) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-trending-glyph { animation: none; }
}

/* Quando tem capa: img bleed full + overlay pra legibilidade do título */
.bp-trending-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: bpTrendingCoverIn 600ms var(--bp-ease) both;
}
@keyframes bpTrendingCoverIn {
  from { transform: scale(1.04); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.bp-trending-cover-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,12,18,0.10)  0%,
      rgba(8,12,18,0.55)  60%,
      rgba(8,12,18,0.92) 100%),
    linear-gradient(90deg,
      rgba(8,12,18,0.55) 0%,
      rgba(8,12,18,0.20) 40%,
      transparent 100%);
  z-index: -1;
}
.bp-trending-hero.has-cover .bp-trending-rank {
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}

.bp-trending-rank {
  position: absolute; top: 18px; left: 24px;
  font-family: var(--bp-poster, var(--bp-serif));
  font-size: 64px; font-weight: 700;
  font-style: italic;
  color: rgba(56,176,255,0.30);
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 4px 24px rgba(0,153,255,0.18);
}
.bp-trending-tag {
  position: absolute; top: 22px; right: 24px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bp-blue);
  color: var(--bp-blue-ink, #04111a);
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  padding: 5px 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--bp-r-sm);
  box-shadow:
    0 4px 16px -4px var(--bp-blue-soft),
    0 0 0 1px rgba(255,255,255,0.16) inset;
}
.bp-trending-tag svg { animation: bpTrendingArrow 1.6s ease-in-out infinite; }
@keyframes bpTrendingArrow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-2px); opacity: 0.7; }
}

/* Pills do trending — categoria + #N rank.
   - rank no canto SUPERIOR ESQUERDO
   - categoria no canto SUPERIOR DIREITO
   - Mesma altura forçada (28px) pra simetria visual.
   - Glass: bg .5 + blur 20 + saturate + borda branca translúcida.
   - height fixa garante alinhamento mesmo com o reset de touch target
     em mobile (button { min-height: 44px }) — sobrescrevemos.
   Funciona pra desktop e mobile (mobile.css só refina top/left/right). */
.bp-trending-rank-pill,
.bp-trending-cluster-pill {
  position: absolute;
  top: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 28px;
  min-height: 0;
  background: rgba(8, 11, 16, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--bp-blue-hi, #38b0ff);
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0 11px;
  border-radius: var(--bp-r-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px -6px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  line-height: 1;
}
.bp-trending-rank-pill {
  left: 24px;
  letter-spacing: 0.04em;
}
.bp-trending-cluster-pill {
  right: 24px;
  cursor: pointer;
  transition: background var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}
.bp-trending-cluster-pill:hover {
  background: rgba(8, 11, 16, 0.7);
  border-color: rgba(56, 176, 255, 0.4);
  color: #fff;
}

.bp-trending-hero-content {
  position: relative; z-index: 1;
  max-width: 540px;
}
.bp-trending-title {
  font-family: var(--bp-sans);
  font-size: 32px; font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--bp-ink);
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.bp-trending-pitch {
  font-family: var(--bp-serif, Georgia, serif);
  font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,0.86);
  margin: 0 0 14px;
  max-width: 520px;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.bp-trending-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.bp-trending-cluster {
  display: inline-flex; align-items: center;
  background: rgba(0,153,255,0.10);
  border: 1px solid color-mix(in srgb, var(--bp-blue) 30%, var(--bp-line));
  color: var(--bp-blue-hi, #38b0ff);
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: var(--bp-r-sm);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}
.bp-trending-cluster:hover {
  background: rgba(0,153,255,0.16);
  border-color: var(--bp-blue);
  color: #fff;
}
.bp-trending-qual {
  font-family: var(--bp-mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--bp-r-sm);
  letter-spacing: 0.08em;
}

/* ── Panel (direita): tech-grid no fundo + stats + CTA ── */
.bp-trending-panel {
  position: relative;
  padding: 32px 28px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  isolation: isolate;
}
.bp-trending-panel::before {
  /* tech-grid: linhas de grid sutis mascaradas por radial pra fade nas
     bordas. Dá profundidade no painel cinza sem competir com a capa. */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 70% 30%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 10%, transparent 75%);
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
}
.bp-trending-panel-eyebrow {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bp-ink-mute);
}
.bp-trending-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Desktop: layout 3-itens — votos | comentários (linha 1) + score pill
   (linha 2, full-width). Mobile esconde. */
.bp-trending-stats-desktop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 12px;
}
.bp-trending-stats-desktop .bp-trending-score-pill {
  grid-column: 1 / -1;
}
/* Mobile: stat antiga inline. Desktop esconde. */
.bp-trending-stats-mobile { display: none; }

.bp-trending-stat {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255,255,255,0.10);
  border-radius: var(--bp-r);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--bp-shadow-card);
  transition: background var(--bp-dur) var(--bp-ease), border-color var(--bp-dur) var(--bp-ease);
}
.bp-trending-stat:hover {
  background: rgba(255,255,255,0.04);
  border-color: color-mix(in srgb, var(--bp-blue) 28%, var(--bp-line));
}
.bp-trending-stat-num {
  font-family: var(--bp-mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 700;
  color: var(--bp-blue-hi, #38b0ff);
  line-height: 1;
  letter-spacing: -0.02em;
}
.bp-trending-stat-label {
  font-size: 10.5px;
  color: var(--bp-ink-mute);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* ── Score Comunidade pill (glass) — desktop trending panel ─────────────
   Mesmo padrão visual dos pills #N e Categoria do hero (rgba(8,11,16,.5)
   + blur + border branca 0.14). Inclui label/num em row + barra de fill. */
.bp-trending-score-pill {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 11px;
  background: rgba(8, 11, 16, 0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px -6px rgba(0, 0, 0, 0.4);
}
.bp-trending-score-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.bp-trending-score-label {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-ink-mute);
  white-space: nowrap;
}
.bp-trending-score-num {
  font-family: var(--bp-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bp-trending-score-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bp-trending-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Bandas de cor — mesmo threshold do .g-score-chip */
.bp-trending-score-high  .bp-trending-score-num   { color: var(--bp-teal); }
.bp-trending-score-high  .bp-trending-score-bar-fill { background: var(--bp-teal); }
.bp-trending-score-mid   .bp-trending-score-num   { color: var(--bp-orange, #d97706); }
.bp-trending-score-mid   .bp-trending-score-bar-fill { background: var(--bp-orange, #d97706); }
.bp-trending-score-low   .bp-trending-score-num   { color: var(--bp-red, #dc2626); }
.bp-trending-score-low   .bp-trending-score-bar-fill { background: var(--bp-red, #dc2626); }
.bp-trending-score-mute  .bp-trending-score-num   { color: var(--bp-ink-mute); opacity: 0.6; }
.bp-trending-score-mute  .bp-trending-score-bar-fill { background: var(--bp-line); }

.bp-trending-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  background: var(--bp-blue);
  color: var(--bp-blue-ink, #04111a);
  border: 1px solid var(--bp-blue);
  border-radius: var(--bp-r);
  font-family: var(--bp-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 8px 24px -8px var(--bp-blue-soft),
    0 0 0 1px rgba(255,255,255,0.16) inset;
  transition:
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    transform var(--bp-dur) var(--bp-ease);
}
.bp-trending-cta:hover {
  background: var(--bp-blue-hi, #38b0ff);
  box-shadow: 0 14px 32px -8px var(--bp-blue-soft);
  transform: translateY(-1px);
}
.bp-trending-cta:hover svg { transform: translateX(3px); }
.bp-trending-cta svg { transition: transform var(--bp-dur) var(--bp-ease); }
.bp-trending-cta:active { transform: translateY(0); }

/* ── Setas de navegação — glass rectangles fora do card ── */
.bp-trending-nav {
  flex-shrink: 0;
  width: 48px;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,16,24,0.60);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--bp-r-lg);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transition:
    background   var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    color        var(--bp-dur) var(--bp-ease),
    box-shadow   var(--bp-dur) var(--bp-ease);
  /* sem position absolute — é flex child */
}
.bp-trending-nav:hover {
  background: rgba(0,153,255,0.14);
  border-color: rgba(0,153,255,0.28);
  color: var(--bp-blue-hi, #38b0ff);
  box-shadow:
    0 8px 32px -8px rgba(0,153,255,0.22),
    0 0 0 1px rgba(0,153,255,0.10) inset;
}
.bp-trending-nav:active {
  background: rgba(0,153,255,0.20);
}

/* SVG arrow dentro da seta */
.bp-trending-nav-arrow {
  display: block;
  transition: transform var(--bp-dur) var(--bp-ease), opacity var(--bp-dur) var(--bp-ease);
}
.bp-trending-nav:hover .bp-trending-nav-arrow {
  opacity: 1;
}

/* Animação de clique SVG — bounce direcional */
@keyframes bpNavClickPrev {
  0%   { transform: translateX(0)    scale(1);    }
  30%  { transform: translateX(-5px) scale(0.88); }
  65%  { transform: translateX(3px)  scale(1.08); }
  100% { transform: translateX(0)    scale(1);    }
}
@keyframes bpNavClickNext {
  0%   { transform: translateX(0)   scale(1);    }
  30%  { transform: translateX(5px) scale(0.88); }
  65%  { transform: translateX(-3px) scale(1.08); }
  100% { transform: translateX(0)   scale(1);    }
}
.bp-trending-nav-prev.is-clicked .bp-trending-nav-arrow {
  animation: bpNavClickPrev 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bp-trending-nav-next.is-clicked .bp-trending-nav-arrow {
  animation: bpNavClickNext 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Glow ring no is-clicked */
.bp-trending-nav.is-clicked {
  box-shadow:
    0 0 0 3px rgba(0,153,255,0.25),
    0 8px 32px -8px rgba(0,153,255,0.30),
    0 0 0 1px rgba(0,153,255,0.12) inset;
  border-color: rgba(0,153,255,0.35);
}

/* ── Dots ── */
.bp-trending-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 16px;
  padding: 0 8px;
}
.bp-trending-dot {
  width: 8px; height: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 0;
  transition:
    width var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.bp-trending-dot:hover { background: rgba(255,255,255,0.36); }
.bp-trending-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--bp-blue);
  box-shadow: 0 0 0 4px var(--bp-blue-soft);
}

/* ── Skeleton ── */
.bp-trending-skel {
  display: block;
  min-height: 300px;
  background: linear-gradient(
    90deg,
    rgba(20,24,28,0.6) 0%,
    rgba(0,153,255,0.06) 50%,
    rgba(20,24,28,0.6) 100%);
  background-size: 200% 100%;
  animation: bpTrendingSkel 1.6s ease-in-out infinite;
}
@keyframes bpTrendingSkel {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}

/* ── Responsive: collapse pra single column em mobile ── */
@media (max-width: 768px) {
  .bp-trending-stage { gap: 6px; }
  .bp-trending-nav   { width: 36px; border-radius: var(--bp-r); }
  .bp-trending-card {
    grid-template-columns: 1fr;
  }
  .bp-trending-panel {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .bp-trending-title { font-size: 24px; }
  .bp-trending-rank  { font-size: 48px; }
  .bp-trending-glyph { display: none; }
  .bp-trending-fade  { display: none; }
}
@media (max-width: 480px) {
  .bp-trending-nav { display: none; }
}

/* ── Featured collection banner ──────────────────────────── */
.g-collection-banner {
  position: relative;
  padding: 0;
  background: linear-gradient(135deg, color-mix(in oklch, var(--bp-teal) 10%, var(--bp-bg-elev)) 0%, var(--bp-bg-elev) 55%);
  border: 1px solid var(--bp-line);
  border-left: 3px solid var(--bp-teal);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 200ms, transform 200ms;
  overflow: hidden;
}
.g-collection-banner:hover {
  border-color: color-mix(in oklch, var(--bp-teal) 45%, var(--bp-line));
  border-left-color: var(--bp-teal);
}
.g-collection-banner::after {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 200px;
  background: radial-gradient(circle at 100% 50%, color-mix(in oklch, var(--bp-teal) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.g-collection-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 32px;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.g-collection-left { flex: 1; min-width: 280px; }
.g-collection-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--bp-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bp-teal); font-weight: 600;
  margin-bottom: 6px;
}
.g-collection-titulo {
  font-family: var(--bp-serif);
  font-size: 26px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--bp-ink);
}
.g-collection-sub {
  font-size: 14px; color: var(--bp-ink-dim);
  margin: 0 0 12px;
}
.g-collection-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--bp-ink-dim);
  flex-wrap: wrap;
}
.g-collection-curator {
  display: inline-flex; align-items: center; gap: 8px;
}
.g-collection-curator-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklch, var(--bp-teal) 20%, var(--bp-bg));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 35%, var(--bp-line));
  font-size: 9.5px; font-weight: 600;
  color: var(--bp-ink);
}
.g-collection-curator strong { color: var(--bp-ink); font-weight: 600; }
.g-collection-sep { color: var(--bp-ink-faint); }
.g-collection-count { font-family: var(--bp-mono); font-size: 11px; letter-spacing: 0.04em; }

.g-collection-right { flex-shrink: 0; }
.g-collection-btn {
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 200ms var(--bp-ease);
}
.g-collection-btn:hover { gap: 12px; }

.g-collection-skel {
  height: 120px;
  background: linear-gradient(90deg, var(--bp-bg-elev) 0%, color-mix(in oklch, var(--bp-teal) 5%, var(--bp-bg-elev)) 50%, var(--bp-bg-elev) 100%);
  background-size: 200% 100%;
  animation: bpSkeleton 1.5s ease-in-out infinite;
  margin-bottom: 8px;
  border: 1px solid var(--bp-line);
  border-left: 3px solid var(--bp-teal);
}

/* ── Collection detail page ──────────────────────────────── */
.bp-collection-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 48px 120px;
}
.bp-collection-breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--bp-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--bp-ink-faint);
  margin-bottom: 40px;
  text-transform: uppercase;
}
.bp-collection-breadcrumb a {
  color: var(--bp-ink-dim); text-decoration: none;
  transition: color 160ms;
}
.bp-collection-breadcrumb a:hover { color: var(--bp-teal); }

.bp-collection-hero {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--bp-line);
  margin-bottom: 56px;
}
.bp-collection-hero-skel {
  height: 240px;
  background: linear-gradient(90deg, var(--bp-bg-elev) 0%, color-mix(in oklch, var(--bp-teal) 5%, var(--bp-bg-elev)) 50%, var(--bp-bg-elev) 100%);
  background-size: 200% 100%;
  animation: bpSkeleton 1.5s ease-in-out infinite;
  border-bottom: none;
}
.bp-collection-titulo {
  font-family: var(--bp-serif);
  font-size: 48px; font-weight: 500; line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 12px 0 12px;
  color: var(--bp-ink);
  max-width: 720px;
}
.bp-collection-subtitulo {
  font-family: var(--bp-poster);
  font-size: 20px; font-style: italic; font-weight: 500;
  color: var(--bp-teal);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.bp-collection-descricao {
  max-width: 680px;
  font-size: 17px; line-height: 1.65;
  color: var(--bp-ink-dim);
  margin-bottom: 32px;
}
.bp-collection-descricao p { margin: 0 0 1.1em; }
.bp-collection-descricao strong { color: var(--bp-ink); font-weight: 600; }

.bp-collection-curador-row {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  font-size: 13px; color: var(--bp-ink-dim);
}
.bp-collection-curador-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in oklch, var(--bp-teal) 20%, var(--bp-bg));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 35%, var(--bp-line));
  font-size: 11px; font-weight: 600;
  color: var(--bp-ink);
}
.bp-collection-curador-text strong { color: var(--bp-ink); font-weight: 600; }

/* Items list */
.bp-collection-items {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 32px;
}
.bp-collection-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
}
.bp-collection-item-num {
  font-family: var(--bp-poster);
  font-size: 40px; font-weight: 700; font-style: italic;
  color: color-mix(in oklch, var(--bp-teal) 55%, var(--bp-ink-faint));
  letter-spacing: -0.03em;
  line-height: 1;
  padding-top: 6px;
}

.bp-collection-item-card {
  padding: 24px 28px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  cursor: pointer;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.bp-collection-item-card:hover {
  border-color: color-mix(in oklch, var(--bp-teal) 45%, var(--bp-line));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -12px color-mix(in oklch, var(--bp-teal) 25%, transparent);
}
.bp-collection-item-head {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.bp-collection-item-title {
  font-family: var(--bp-serif);
  font-size: 22px; font-weight: 500; line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--bp-ink);
}
.bp-collection-item-pitch {
  font-size: 14.5px; line-height: 1.55;
  color: var(--bp-ink-dim);
  margin: 0 0 18px;
}
.bp-collection-item-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--bp-line);
  font-size: 12.5px;
}
.bp-collection-item-author {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bp-ink-dim);
}
.bp-collection-item-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in oklch, var(--bp-teal) 18%, var(--bp-bg));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 35%, var(--bp-line));
  font-size: 10px; font-weight: 600;
  color: var(--bp-ink);
}
.bp-collection-item-stats {
  font-family: var(--bp-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--bp-ink-faint);
}

.bp-collection-item-nota {
  margin-top: 14px;
  padding: 14px 20px 14px 20px;
  background: color-mix(in oklch, var(--bp-teal) 6%, var(--bp-bg));
  border-left: 2px solid var(--bp-teal);
  border-top: 1px solid var(--bp-line);
  border-right: 1px solid var(--bp-line);
  border-bottom: 1px solid var(--bp-line);
}
.bp-collection-nota-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--bp-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-teal); font-weight: 600;
  margin-bottom: 6px;
}
.bp-collection-item-nota p {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--bp-ink); font-style: italic;
}

.bp-collection-foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--bp-line);
}

.bp-collection-404 {
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.bp-collection-404-inner {
  text-align: center;
  max-width: 420px;
}
.bp-collection-404-inner h2 {
  font-family: var(--bp-serif);
  font-size: 24px; font-weight: 500;
  margin: 14px 0 24px;
  color: var(--bp-ink);
}

/* Mobile */
@media (max-width: 700px) {
  .bp-panorama-wrap { padding: 28px 16px 16px; }
  .bp-trending { padding: 16px 16px 12px; }
  .g-collection-inner { padding: 20px 22px; }
  .bp-collection-page { padding: 24px 20px 80px; }
  .bp-collection-titulo { font-size: 34px; }
  .bp-collection-item { grid-template-columns: 40px 1fr; gap: 14px; }
  .bp-collection-item-num { font-size: 28px; }
  .bp-collection-item-card { padding: 18px 20px; }
}

/* ── v7: Detail tabs ──────────────────────────────────────── */
.g-detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bp-line);
  margin: 0 0 36px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.g-detail-tabs::-webkit-scrollbar { display: none; }

.g-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 18px 15px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--bp-ease), border-color 160ms var(--bp-ease);
}
.g-tab:hover { color: var(--bp-ink); }
.g-tab.active {
  color: var(--bp-teal);
  border-bottom-color: var(--bp-teal);
}

.g-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bp-teal) 14%, var(--bp-bg-elev));
  border: 1px solid color-mix(in oklch, var(--bp-teal) 30%, var(--bp-line));
  color: var(--bp-ink-dim);
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.g-tab.active .g-tab-count {
  background: color-mix(in oklch, var(--bp-teal) 22%, var(--bp-bg-elev));
  border-color: color-mix(in oklch, var(--bp-teal) 50%, var(--bp-line));
  color: var(--bp-teal);
}

/* When tabs are used, the in-tab evaluation sections lose the top dividers */
.bp-evaluation-top { margin-top: 0; padding-top: 0; border-top: none; }
.bp-evaluation-bottom { margin-top: 40px; padding-top: 0; border-top: none; }

/* ── v7: Updates timeline ─────────────────────────────────── */
.g-updates { padding-top: 4px; }
.g-updates-head { margin-bottom: 28px; }
.g-updates-head .bp-eyebrow {
  display: block;
  font-family: var(--bp-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bp-teal);
  margin-bottom: 10px;
}
.g-updates-sub {
  font-size: 14.5px; line-height: 1.55;
  color: var(--bp-ink-dim);
  margin: 0;
  max-width: 58ch;
}

.g-timeline {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  position: relative;
}
.g-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--bp-line);
}

.g-timeline-item {
  position: relative;
  padding: 0 0 24px 32px;
  min-height: 28px;
}
.g-timeline-item:last-child { padding-bottom: 0; }

.g-timeline-dot {
  position: absolute;
  left: 2px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bp-bg);
  border: 2px solid var(--bp-line-strong);
  box-shadow: 0 0 0 3px var(--bp-bg);
}
.g-timeline-item.kind-submit .g-timeline-dot {
  border-color: var(--bp-ink-mute);
  background: var(--bp-ink-mute);
}
.g-timeline-item.kind-eval .g-timeline-dot {
  border-color: var(--bp-teal);
  background: var(--bp-teal);
}
.g-timeline-item.kind-edit .g-timeline-dot {
  border-color: var(--bp-orange);
  background: var(--bp-bg);
}
.g-timeline-item.kind-reeval .g-timeline-dot {
  border-color: var(--bp-orange);
  background: var(--bp-orange);
  animation: g-timeline-pulse 1.6s ease-in-out infinite;
}

@keyframes g-timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--bp-bg), 0 0 0 5px color-mix(in oklch, var(--bp-orange) 30%, transparent); }
  50% { box-shadow: 0 0 0 3px var(--bp-bg), 0 0 0 9px color-mix(in oklch, var(--bp-orange) 0%, transparent); }
}

.g-timeline-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.g-timeline-title {
  font-size: 14.5px; font-weight: 600;
  color: var(--bp-ink);
  letter-spacing: -0.005em;
}
.g-timeline-date {
  font-family: var(--bp-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.g-timeline-text {
  font-size: 13.5px; line-height: 1.55;
  color: var(--bp-ink-dim);
  margin: 0;
  max-width: 62ch;
}

.g-timeline-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px; color: var(--bp-ink-faint);
  border: 1px dashed var(--bp-line);
  background: var(--bp-bg-elev);
}

@media (max-width: 700px) {
  .g-tab { padding: 12px 14px 13px; font-size: 10.5px; }
  .g-timeline-top { flex-direction: column; gap: 2px; }
}

/* ── v8: Reconhecimento — badges, role, activity, toast ────────────── */

/* Activity panel:
   - >=1281px: variant="column" mostra como 3ª coluna sticky; variant="sidebar" some
   - <1281px:  variant="column" some; variant="sidebar" mostra inline na esquerda
   Antes (até 2026-05-03) a versão <1281px era floating FAB que sobrepunha o
   conteúdo principal — gerava problema visual e tinha que cliclar pra abrir. */
@media (max-width: 1280px) {
  .bp-gallery-grid { grid-template-columns: 240px 1fr; }
  .g-activity-column  { display: none !important; }
  .g-activity-sidebar { display: flex; }
}
@media (min-width: 1281px) {
  .g-activity-column  { display: flex; }
  .g-activity-sidebar { display: none !important; }
  .g-activity-fab     { display: none; }
}

/* AuthorBadges inline — v15: BpBadge direto + tooltip custom */
.g-badges-inline {
  display: inline-flex; align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Wrapper de cada badge — agora é um <button> (era <span>) pra suportar
   tap-to-reveal no mobile. Reset de estilos default do button. */
.g-badge-tip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.g-badge-tip:focus-visible {
  outline: 2px solid var(--bp-blue);
  outline-offset: 2px;
  border-radius: 50%;
}
/* Estado "active" — disparado por click/tap. Anima o badge bouncy
   (scale up → settle) e mostra o nome em um pop label flutuante. */
.g-badge-tip.is-active {
  animation: bpBadgeBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bpBadgeBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.20); }
  60%  { transform: scale(0.94); }
  80%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
/* Pop label do badge — aparece ACIMA do badge (2026-05-02 v2): antes
   ficava abaixo e era cortado pelo card de baixo no thread. Acima
   sempre tem espaço (gap entre header do comentário e topo do card). */
.g-badge-name-pop {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(8,12,18,0.96);
  border: 1px solid rgba(56, 176, 255, 0.4);
  border-radius: 999px;
  font-family: var(--bp-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--bp-ink);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  animation: bpBadgePopIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.6);
}
.g-badge-name-pop::after {
  /* Setinha apontando pra baixo (aponta pro badge). */
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(8,12,18,0.96);
}
@keyframes bpBadgePopIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .g-badge-tip.is-active { animation: none; }
  .g-badge-name-pop { animation: none; }
}

/* Tooltip CSS-only: aparece acima do badge no hover */
.g-badge-tip:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: rgba(8,12,18,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--bp-r-sm);
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bp-ink);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.6);
  animation: bpTipFadeIn 160ms var(--bp-ease) both;
}
.g-badge-tip:hover::before {
  /* setinha apontando pra baixo */
  content: '';
  position: absolute;
  bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(8,12,18,0.96);
  pointer-events: none;
  z-index: 1000;
  animation: bpTipFadeIn 160ms var(--bp-ease) both;
}
@keyframes bpTipFadeIn {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Densidade por tamanho — controla apenas spacing inter-badge */
.g-badges-inline.g-badges-xs { gap: 3px; margin-left: 6px; }
.g-badges-inline.g-badges-sm { gap: 4px; }
.g-badges-inline.g-badges-md { gap: 5px; }

/* Quando BpBadge não está disponível, fallback emoji */
.g-badge-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 12px; line-height: 1;
}

/* Counter "+N" — chip com mesmo estilo do tip */
.g-badges-more {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 22px; padding: 0 6px;
  background: transparent;
  border: 1px dashed var(--bp-line-strong);
  border-radius: var(--bp-r-sm);
  color: var(--bp-ink-mute);
  font-family: var(--bp-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em;
}

/* Role marker (mod ⚙ / admin ★) */
.g-role-marker {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  font-size: 12px;
  color: var(--bp-teal);
  vertical-align: middle;
  cursor: help;
}
.g-role-marker-admin { color: var(--bp-teal); font-weight: 700; font-size: 13px; }

/* AuthorBadgesGrid (sidebar Autor expandida) — minimalista (2026-05-02):
   sem caixa quadrada com border+bg. Só ícone + label centralizados,
   com glow sutil no ícone. Hover dá leve scale + glow mais forte. */
.g-author-badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.g-author-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  font-size: 11px;
  color: var(--bp-ink-dim);
  font-family: var(--bp-mono);
  letter-spacing: 0.02em;
  min-width: 0;
  cursor: help;
  transition: color 160ms var(--bp-ease);
}
.g-author-badge .bp-badge { width: 100%; min-width: 0; }
/* Remove o "bloco quadrado" do BpBadge dentro do grid de autor — só o
   glyph com drop-shadow azul, mesma vibe das badges inline. */
.g-author-badge .bp-badge-svg {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  filter: drop-shadow(0 0 6px rgba(56, 176, 255, 0.18));
  width: calc(var(--badge-size) + 4px);
  height: calc(var(--badge-size) + 4px);
}
.g-author-badge:hover .bp-badge-svg {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px var(--bp-blue-soft, rgba(56,176,255,0.5)));
  background: transparent;
  border-color: transparent;
}
.g-author-badge .bp-badge-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-weight: 600;
}
.g-author-badge:hover { color: var(--bp-ink); }
.g-author-badge-emoji { font-size: 14px; flex-shrink: 0; }
.g-author-badge-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-author-badges-empty {
  font-size: 12px; color: var(--bp-ink-faint);
  font-style: italic;
  margin: 14px 0;
}

/* Sidebar autor expandida */
.bp-side-author-lg {
  align-items: center;
  margin-bottom: 4px;
}
.bp-side-author-avatar.lg {
  width: 56px; height: 56px;
  font-size: 17px;
  border-radius: 50%;
}

/* ── ActivityPanel ────────────────────────────────────────────────── */
.g-activity-panel {
  padding: 18px 16px;
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border: 1px solid var(--bp-glass-border);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  display: flex; flex-direction: column;
}
/* Variant="column": sticky 3ª coluna em desktop (≥1281px) */
.g-activity-column {
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
/* Variant="sidebar": inline na sidebar esquerda em <1281px */
.g-activity-sidebar {
  margin-top: 0;
  max-height: 480px;
  overflow-y: auto;
  /* Reuse mesma estética dos outros g-side-block: padding mais compacto */
  padding: 14px 12px;
}
.g-activity-sidebar .g-activity-header {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
  padding-bottom: 8px;
}
.g-activity-sidebar .g-activity-text {
  font-size: 11.5px;
}
.g-activity-sidebar .g-activity-time {
  font-size: 9px;
}
.g-activity-panel::-webkit-scrollbar { width: 6px; }
.g-activity-panel::-webkit-scrollbar-thumb { background: var(--bp-line); }

.g-activity-header {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-ink-mute);
  margin-bottom: 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--bp-line);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.g-activity-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bp-teal);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--bp-teal) 40%, transparent);
  animation: g-activity-pulse 2s ease-out infinite;
}
@keyframes g-activity-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--bp-teal) 40%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklch, var(--bp-teal) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--bp-teal) 0%, transparent); }
}

.g-activity-list {
  list-style: none;
  margin: 0; padding: 0;
}
.g-activity-item { border-bottom: 1px solid var(--bp-line); }
.g-activity-item:last-child { border-bottom: none; }
.g-activity-item a {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 12px 4px;
  text-decoration: none;
  color: inherit;
  transition: background 140ms;
}
.g-activity-item a:hover { background: rgba(0, 153, 255, 0.04); }

.g-activity-icon {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
  text-align: center;
}
.g-activity-body { min-width: 0; }
.g-activity-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bp-ink-dim);
  overflow-wrap: break-word;
}
.g-activity-text strong {
  color: var(--bp-ink);
  font-weight: 600;
}
.g-activity-verb { color: var(--bp-ink-mute); }
.g-activity-text em {
  color: var(--bp-teal);
  font-style: normal;
  font-weight: 500;
}
.g-activity-time {
  display: block;
  margin-top: 4px;
  font-family: var(--bp-mono);
  font-size: 9.5px;
  color: var(--bp-ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.g-activity-badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(0, 153, 255, 0.1);
  border: 1px solid rgba(0, 153, 255, 0.28);
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--bp-teal);
}
.g-activity-skel, .g-activity-empty {
  font-size: 12px; color: var(--bp-ink-faint);
  font-family: var(--bp-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center;
  padding: 24px 8px;
}

/* g-activity-fab DEPRECATED em 2026-05-03 — JSX não renderiza mais o
   FAB. Regra mantida só pra não quebrar nada se algum overlay legacy
   tentar reusar a classe. Em telas <1281px o painel está inline na
   sidebar (g-activity-sidebar). */
.g-activity-fab { display: none !important; }

/* Floating fixed-panel removido em 2026-05-03: na faixa <1281px o painel
   agora vive inline na sidebar esquerda (g-activity-sidebar). Antes ele
   sobrepunha o conteúdo principal e cortava as ideias. */

/* ── BadgeToast (canto inferior direito) ───────────────────────────── */
.g-badge-toast {
  position: fixed;
  bottom: 32px; right: 32px;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 22px 18px 20px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-teal);
  border-left: 4px solid var(--bp-teal);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
              0 0 0 6px color-mix(in oklch, var(--bp-teal) 14%, transparent);
  z-index: 100;
  max-width: 380px;
  animation: g-badge-toast-rise 460ms var(--bp-ease);
}
@keyframes g-badge-toast-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.g-badge-toast-emoji {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 153, 255, 0.35));
}
.g-badge-toast-body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.g-badge-toast-eyebrow {
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bp-teal);
}
.g-badge-toast-body strong {
  font-size: 16px; font-weight: 700;
  color: var(--bp-ink);
  letter-spacing: -0.01em;
}
.g-badge-toast-body p {
  margin: 4px 0 0;
  font-size: 13px; line-height: 1.4;
  color: var(--bp-ink-dim);
}
.g-badge-toast-close {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent; border: none;
  color: var(--bp-ink-faint);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 160ms;
}
.g-badge-toast-close:hover { color: var(--bp-ink); }

/* Garante que badges não quebrem inline em comments (avatar é flex) */
.bp-comment-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.bp-detail-author-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.bp-side-author-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.bp-feed-author, .bp-gal-card-author {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Apresentação rica — collapse Steam-style + moldura nas imagens
   ────────────────────────────────────────────────────────────────────────── */

.g-presentation {
  margin: 0 0 36px;
}
.g-presentation-collapsible {
  position: relative;
  max-height: 680px;
  overflow: hidden;
  transition: max-height 320ms var(--bp-ease);
}
.g-presentation-collapsible.is-expanded {
  max-height: none;
  overflow: visible;
}
.g-presentation-collapsible:not(.is-expanded)::after {
  /* Fade gradient na base — indica que tem mais conteúdo abaixo */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(180deg,
    rgba(8, 12, 18, 0)   0%,
    rgba(8, 12, 18, 0.7) 60%,
    var(--bp-bg)         100%);
  pointer-events: none;
  z-index: 2;
}

.g-presentation-saiba-mais {
  display: block;
  margin: 18px auto 0;
  padding: 11px 28px;
  background: var(--bp-blue);
  color: var(--bp-blue-ink, #04111a);
  border: 1px solid var(--bp-blue);
  border-radius: var(--bp-r);
  font-family: var(--bp-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 8px 24px -8px var(--bp-blue-soft),
    0 0 0 1px rgba(255,255,255,0.16) inset;
  transition:
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    transform  var(--bp-dur) var(--bp-ease);
}
.g-presentation-saiba-mais:hover {
  background: var(--bp-blue-hi, #38b0ff);
  box-shadow: 0 14px 32px -8px var(--bp-blue-soft);
  transform: translateY(-1px);
}

.g-presentation-meta {
  margin-top: 24px;
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
  text-align: center;
}

/* Moldura elegante pras imagens dentro da apresentação */
.g-presentation-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border-radius: var(--bp-r-lg);
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-glass-border);
  border-top-color: rgba(255, 255, 255, 0.10);
  box-shadow: var(--bp-shadow-card);
  cursor: zoom-in;
  transition:
    transform   var(--bp-dur) var(--bp-ease),
    box-shadow  var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease);
}
.g-presentation-body img:hover {
  transform: translateY(-3px);
  box-shadow: var(--bp-shadow-card-hover);
  border-color: rgba(0, 153, 255, 0.30);
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* Iframe (YouTube/Vimeo) com moldura coerente */
.g-presentation-body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 28px 0;
  border: 1px solid var(--bp-glass-border);
  border-top-color: rgba(255,255,255,0.10);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  background: #000;
}

/* Vídeo nativo */
.g-presentation-body video {
  display: block;
  max-width: 100%;
  margin: 28px auto;
  border-radius: var(--bp-r-lg);
  background: #000;
  box-shadow: var(--bp-shadow-card);
  border: 1px solid var(--bp-glass-border);
}

@media (prefers-reduced-motion: reduce) {
  .g-presentation-body img:hover { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Ficha Técnica — campos estruturados por tipo
   ────────────────────────────────────────────────────────────────────────── */

.g-ficha-tecnica {
  margin: 0 0 56px;
}
.g-ficha-head {
  margin-bottom: 28px;
}
.g-ficha-sub {
  font-size: 13.5px;
  color: var(--bp-ink-mute);
  margin: 6px 0 0;
  max-width: 580px;
  line-height: 1.55;
}

.g-ficha-section {
  margin-bottom: 28px;
  padding: 22px 24px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
}
.g-ficha-section-title {
  font-family: var(--bp-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-ink);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bp-line);
}

.g-ficha-list {
  display: grid;
  grid-template-columns: minmax(160px, 0.5fr) 1fr;
  gap: 12px 28px;
  margin: 0;
}
.g-ficha-label {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bp-ink-mute);
  margin: 0;
  padding-top: 2px;
}
.g-ficha-value {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bp-ink-dim);
  white-space: pre-wrap;
  text-wrap: pretty;
}
.g-ficha-link {
  color: var(--bp-blue-hi, #38b0ff);
  text-decoration: none;
  word-break: break-all;
}
.g-ficha-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .g-ficha-list {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .g-ficha-value { margin-bottom: 14px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero slides panel — painel no edit pra autor controlar o carrossel hero
   ────────────────────────────────────────────────────────────────────────── */

.bp-hero-slides-loading {
  padding: 16px 20px;
  font-family: var(--bp-mono);
  font-size: 11px;
  color: var(--bp-ink-faint);
  letter-spacing: 0.06em;
}

.bp-hero-slides-panel {
  margin: 0 0 18px;
  padding: 0;
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border: 1px solid var(--bp-glass-border);
  border-top-color: rgba(255,255,255,0.10);
  border-radius: var(--bp-r-lg);
  box-shadow: var(--bp-shadow-card);
  overflow: hidden;
}

.bp-hero-slides-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.bp-hero-slides-toggle-collapse {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--bp-ink);
}
.bp-hero-slides-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.bp-hero-slides-count {
  font-family: var(--bp-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--bp-ink-faint);
  text-transform: uppercase;
}
.bp-hero-slides-head-right {
  display: inline-flex; align-items: center; gap: 12px;
}
.bp-hero-slides-saving {
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--bp-blue-hi, #38b0ff);
  text-transform: uppercase;
  animation: bpHeroSavingPulse 1.4s ease-in-out infinite;
}
@keyframes bpHeroSavingPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.bp-hero-slides-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--bp-ink-faint);
  font-style: italic;
  border-top: 1px solid var(--bp-line);
}

.bp-hero-slides-list {
  list-style: none;
  margin: 0; padding: 8px;
  border-top: 1px solid var(--bp-line);
  display: flex; flex-direction: column; gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bp-blue-soft) transparent;
}
.bp-hero-slides-list::-webkit-scrollbar { width: 8px; }
.bp-hero-slides-list::-webkit-scrollbar-thumb {
  background: var(--bp-blue-soft);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.bp-hero-slides-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  transition:
    background var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease);
}
.bp-hero-slides-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--bp-line-strong);
}
.bp-hero-slides-card.is-hero {
  background: rgba(0,153,255,0.06);
  border-color: rgba(0,153,255,0.30);
  border-left: 3px solid var(--bp-blue);
  padding-left: 7px;
}

.bp-hero-slides-thumb {
  position: relative;
  width: 64px;
  height: 36px; /* 16:9 */
  border-radius: var(--bp-r-sm);
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.bp-hero-slides-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bp-hero-slides-icon {
  color: rgba(56,176,255,0.50);
}
.bp-hero-slides-badge {
  position: absolute;
  top: 2px; left: 2px;
  padding: 1px 4px;
  background: var(--bp-blue);
  color: var(--bp-blue-ink, #04111a);
  font-family: var(--bp-mono);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
}

.bp-hero-slides-info {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.bp-hero-slides-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--bp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-hero-slides-tipo {
  font-family: var(--bp-mono);
  font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-faint);
}

.bp-hero-slides-actions {
  display: inline-flex; align-items: center; gap: 4px;
}
.bp-hero-slides-star,
.bp-hero-slides-arrow,
.bp-hero-slides-delete {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r-sm);
  color: var(--bp-ink-mute);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    color var(--bp-dur) var(--bp-ease);
}
.bp-hero-slides-star:hover,
.bp-hero-slides-arrow:hover:not([disabled]),
.bp-hero-slides-delete:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--bp-line-strong);
  color: var(--bp-ink);
}
.bp-hero-slides-star.on {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.45);
  color: var(--bp-amber, #fbbf24);
}
.bp-hero-slides-arrow:disabled {
  opacity: 0.30;
  cursor: not-allowed;
}
.bp-hero-slides-delete:hover {
  background: rgba(232,93,93,0.10);
  border-color: rgba(232,93,93,0.40);
  color: var(--bp-red, #e85d5d);
}

/* ──────────────────────────────────────────────────────────────────────────
   HALL DA FAMA — ideias que viraram produto BP de fato
   ────────────────────────────────────────────────────────────────────────── */

/* Página inteira, contém hero + grid */
.hf-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  color: var(--bp-ink, #fff);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hf-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  padding: 56px 40px;
  border: 1px solid var(--bp-line, rgba(255,255,255,0.08));
  border-radius: var(--bp-r-lg, 16px);
  background:
    radial-gradient(ellipse at 20% 0%,
      color-mix(in oklch, var(--bp-blue, #2563eb) 18%, transparent) 0%,
      transparent 60%),
    radial-gradient(ellipse at 80% 100%,
      color-mix(in oklch, var(--bp-teal, #25D5AB) 14%, transparent) 0%,
      transparent 55%),
    rgba(12, 16, 24, 0.55);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.hf-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
}
.hf-hero-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 18px 48px -12px color-mix(in oklch, var(--bp-blue, #2563eb) 30%, transparent);
}
.hf-hero-eyebrow {
  display: inline-block;
  font-family: var(--bp-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bp-blue-hi, #38b0ff);
  margin-bottom: 10px;
}
.hf-hero-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  background: linear-gradient(135deg,
    var(--bp-ink, #fff) 0%,
    color-mix(in oklch, var(--bp-blue-hi, #38b0ff) 60%, var(--bp-ink, #fff)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hf-hero-sub {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bp-ink-dim, rgba(255,255,255,0.72));
  margin: 0;
}
/* Glow decorativo (gradient atrás) */
.hf-hero-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklch, var(--bp-blue, #2563eb) 12%, transparent) 0%,
    transparent 50%);
  pointer-events: none;
  z-index: 1;
  animation: hf-hero-glow-pulse 6s ease-in-out infinite;
}
@keyframes hf-hero-glow-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.08); }
}

/* ── Trofeu SVG animado ────────────────────────────────────────────────── */
.hf-trophy {
  display: block;
  filter: drop-shadow(0 4px 12px color-mix(in oklch, var(--bp-blue-hi, #38b0ff) 40%, transparent));
}
/* Cup pulsa suavemente */
.hf-trophy-cup {
  transform-origin: 32px 32px;
  animation: hf-trophy-pulse 3s ease-in-out infinite;
}
@keyframes hf-trophy-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* Estrela do centro do cup brilha */
.hf-trophy-star {
  transform-origin: 32px 25px;
  animation: hf-trophy-star-shine 2.4s ease-in-out infinite;
}
@keyframes hf-trophy-star-shine {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.10); }
}
/* Laurels balançam levemente */
.hf-trophy-laurel-l {
  transform-origin: 14px 38px;
  animation: hf-trophy-laurel-l 4s ease-in-out infinite;
}
.hf-trophy-laurel-r {
  transform-origin: 50px 38px;
  animation: hf-trophy-laurel-r 4s ease-in-out infinite;
}
@keyframes hf-trophy-laurel-l {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-3deg); }
}
@keyframes hf-trophy-laurel-r {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(3deg); }
}

/* ── Empty / loading state ─────────────────────────────────────────────── */
.hf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 24px;
  text-align: center;
  color: var(--bp-ink-dim, rgba(255,255,255,0.55));
  font-size: 14px;
}
.hf-empty-err { color: var(--bp-red, #e85d5d); }
.hf-empty-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--bp-blue-hi, #38b0ff);
  animation: hf-spin 0.8s linear infinite;
}
@keyframes hf-spin {
  to { transform: rotate(360deg); }
}

/* ── Grid de cards ─────────────────────────────────────────────────────── */
.hf-grid {
  display: grid;
  /* Aumentado pra 460px — comporta poster + body + actions sem
     sobreposição. Em telas largas vira 2 colunas; em estreitas
     degrada pra 1 coluna no @media. */
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 24px;
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.hf-card {
  position: relative;
  display: grid;
  /* Poster 128px (era 152) — sobra mais espaço pro body respirar
     com eyebrow + título + sinopse + crew + actions empilhadas. */
  grid-template-columns: 128px 1fr;
  gap: 18px;
  padding: 18px;
  background: rgba(12, 16, 24, 0.55);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--bp-line, rgba(255,255,255,0.08));
  border-radius: var(--bp-r-lg, 16px);
  cursor: pointer;
  transition:
    transform   var(--bp-dur, 220ms) var(--bp-ease, cubic-bezier(.2,.7,.2,1)),
    border-color var(--bp-dur, 220ms) var(--bp-ease, cubic-bezier(.2,.7,.2,1)),
    box-shadow  var(--bp-dur, 220ms) var(--bp-ease, cubic-bezier(.2,.7,.2,1));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 14px 36px -16px rgba(0,0,0,0.5);
  outline: none;
}
.hf-card:hover,
.hf-card:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--bp-blue-hi, #38b0ff) 35%, var(--bp-line, rgba(255,255,255,0.08)));
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--bp-blue-hi, #38b0ff) 18%, transparent) inset,
    0 24px 56px -16px color-mix(in oklch, var(--bp-blue, #2563eb) 32%, rgba(0,0,0,0.5));
}
/* Featured ganha glow extra */
.hf-card.is-featured {
  border-color: color-mix(in oklch, var(--bp-teal, #25D5AB) 22%, var(--bp-line, rgba(255,255,255,0.08)));
}
.hf-card.is-featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bp-teal, #25D5AB) 20%, transparent) 0%,
    transparent 30%,
    transparent 70%,
    color-mix(in oklch, var(--bp-blue-hi, #38b0ff) 18%, transparent) 100%);
  z-index: -1;
}

/* ── Poster ────────────────────────────────────────────────────────────── */
.hf-card-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(0,153,255,0.10) 0%,
    rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.06);
}
.hf-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 360ms var(--bp-ease, cubic-bezier(.2,.7,.2,1));
}
.hf-card:hover .hf-card-poster img {
  transform: scale(1.04);
}
.hf-card-poster-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,0.20);
}

/* Badge "Lançado" */
.hf-card-laurel {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-family: var(--bp-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-teal, #25D5AB);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklch, var(--bp-teal, #25D5AB) 35%, transparent);
  border-radius: 6px;
  z-index: 2;
}

/* Rating chip Metacritic-style */
.hf-card-rating {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  font-family: var(--bp-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.hf-card-rating-high { color: var(--bp-teal, #25D5AB); }
.hf-card-rating-mid  { color: #f5b342; }
.hf-card-rating-low  { color: var(--bp-red, #e85d5d); }
.hf-card-rating-mute { color: var(--bp-ink-dim, rgba(255,255,255,0.5)); }

/* ── Card body ─────────────────────────────────────────────────────────── */
.hf-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* permite truncate */
}

.hf-card-eyebrow {
  display: flex;
  /* nowrap + overflow ellipsis evita que separadores caiam em linha
     extra (que estava deixando o card desalinhado). */
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  font-family: var(--bp-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-dim, rgba(255,255,255,0.55));
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.hf-card-format {
  color: var(--bp-blue-hi, #38b0ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.hf-card-dot      { opacity: 0.45; flex-shrink: 0; }
.hf-card-year,
.hf-card-duration { flex-shrink: 0; }
.hf-card-class {
  margin-left: auto;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 10px;
  letter-spacing: 0;
}

.hf-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--bp-ink, #fff);
  margin: 0 0 8px;
  /* até 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hf-card-sinopse {
  font-size: 13px;
  line-height: 1.5;
  color: var(--bp-ink-dim, rgba(255,255,255,0.65));
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Crew table */
.hf-card-crew {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 11.5px;
  line-height: 1.4;
}
.hf-card-crew-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}
.hf-card-crew-label {
  font-family: var(--bp-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-dim, rgba(255,255,255,0.45));
}
.hf-card-crew-value {
  color: var(--bp-ink, rgba(255,255,255,0.85));
  word-break: break-word;
}

/* Foot: autor (linha 1) + ações (linha 2) — empilhado pra evitar
   sobreposição em cards com nome longo + ambos os botões. */
.hf-card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.hf-card-author {
  /* flex (em vez de inline-flex) pra ocupar a linha inteira do foot
     empilhado — evita overflow horizontal quando o nome do autor é
     longo. */
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  width: 100%;
}
.hf-card-author-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bp-blue-glow, rgba(0,153,255,0.15));
  color: var(--bp-blue-hi, #38b0ff);
  font-family: var(--bp-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.hf-card-author-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.hf-card-author-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.hf-card-author-eyebrow {
  font-family: var(--bp-mono, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bp-ink-dim, rgba(255,255,255,0.45));
}
.hf-card-author-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--bp-ink, rgba(255,255,255,0.92));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hf-card-actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.hf-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  font-family: var(--bp-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--bp-ink-dim, rgba(255,255,255,0.72));
  cursor: pointer;
  transition: all 180ms var(--bp-ease, ease);
  white-space: nowrap;
}
/* IMDb fica compacto à esquerda; "Ver ideia original" toma o resto */
.hf-card-action-imdb    { flex: 0 0 auto; }
.hf-card-action-primary { flex: 1 1 auto; }
.hf-card-action:hover {
  background: rgba(255,255,255,0.08);
  color: var(--bp-ink, #fff);
  border-color: rgba(255,255,255,0.18);
}
.hf-card-action-imdb:hover {
  background: rgba(245, 197, 24, 0.15);
  color: #f5c518;
  border-color: rgba(245, 197, 24, 0.30);
}
.hf-card-action-primary {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--bp-blue, #2563eb) 95%, white) 0%,
    var(--bp-blue, #2563eb) 100%);
  color: white;
  border-color: color-mix(in oklch, var(--bp-blue, #2563eb) 65%, transparent);
}
.hf-card-action-primary:hover {
  filter: brightness(1.10);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--bp-blue, #2563eb) 95%, white) 0%,
    var(--bp-blue, #2563eb) 100%);
  color: white;
}

/* ── Nav link "Hall da Fama" ───────────────────────────────────────────── */
.bp-nav-link-hof svg {
  transition: transform 220ms var(--bp-ease, ease);
}
.bp-nav-link-hof:hover svg,
.bp-nav-link-hof.active svg {
  transform: scale(1.1) rotate(-3deg);
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hf-page { padding: 16px 12px 60px; }
  .hf-hero { padding: 32px 22px; }
  .hf-hero-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hf-hero-title { font-size: 28px; }
  .hf-grid { grid-template-columns: 1fr; gap: 16px; }
  .hf-card { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .hf-card-crew-row { grid-template-columns: 70px 1fr; gap: 8px; }
  .hf-card-foot { flex-direction: column; align-items: stretch; }
  .hf-card-actions { justify-content: stretch; }
  .hf-card-action { flex: 1; justify-content: center; }
}

/* ─── Tabs de busca (Para você / Pessoas / Tags) ──────────────────────── */
.bp-search-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--bp-line);
  margin: 18px 0 0;
}
.bp-search-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--bp-ink-mute);
  cursor: pointer;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 160ms ease, border-color 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bp-search-tab:hover { color: var(--bp-ink); }
.bp-search-tab.active {
  color: var(--bp-ink);
  border-bottom-color: var(--bp-blue);
}
.bp-search-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  font-family: var(--bp-mono);
  font-size: 10px;
  letter-spacing: 0;
}
.bp-search-tab.active .bp-search-tab-count {
  background: var(--bp-blue);
  color: #fff;
}

/* ─── Tab Pessoas — lista de pessoas ─────────────────────────────────── */
.bp-people-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-person-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}
.bp-person-row:hover {
  border-color: var(--bp-blue);
  transform: translateY(-1px);
}
.bp-person-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--bp-ink-mute);
  font-weight: 600;
}
.bp-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bp-person-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bp-person-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--bp-ink);
}
.bp-person-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.bp-person-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bp-line);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bp-ink-dim);
}
.bp-person-badge-emoji { font-size: 12px; line-height: 1; }
.bp-person-badge-label { font-weight: 600; }
/* SVG do <BpBadge> embedado — neutraliza o wrapper do componente
   compartilhado (ele renderiza `.bp-badge` com background/padding
   próprios pra strip do perfil). Aqui ficamos só com o ícone inline,
   herdando currentColor da .bp-person-badge. */
.bp-person-badge-svg {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.bp-person-badge-svg .bp-badge {
  display: inline-flex;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 14px;
  height: 14px;
  --badge-size: 14px;
}
.bp-person-badge-svg .bp-badge-svg {
  display: inline-flex;
  width: 14px;
  height: 14px;
}
.bp-person-badge-svg .bp-badge-label,
.bp-person-badge-svg .bp-badge-sub { display: none; }
.bp-person-badge.bp-badge-tier-lendario  { border-color: rgba(168,85,247,0.4); color: rgb(216,180,254); }
.bp-person-badge.bp-badge-tier-ouro      { border-color: rgba(245,179,66,0.4);  color: rgb(252,211,77); }
.bp-person-badge.bp-badge-tier-prata     { border-color: rgba(180,180,180,0.35); color: rgb(220,220,220); }
.bp-person-badge.bp-badge-tier-bronze    { border-color: rgba(205,133,63,0.35); color: rgb(220,170,120); }
.bp-person-badge.bp-badge-tier-identidade { border-color: rgba(0,153,255,0.4); color: rgb(110,180,255); }
.bp-person-badges-empty {
  font-size: 11px;
  color: var(--bp-ink-faint);
  font-style: italic;
}
.bp-person-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--bp-mono);
  color: var(--bp-ink-dim);
}
.bp-person-count strong {
  font-size: 18px;
  color: var(--bp-ink);
}
.bp-person-count span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-ink-mute);
}

/* ─── Tab Tags — lista de tags ───────────────────────────────────────── */
.bp-tag-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.bp-tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bp-bg-elev);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-r);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease;
}
.bp-tag-row:hover {
  border-color: var(--bp-blue);
  transform: translateY(-1px);
}
.bp-tag-row-name {
  font-family: var(--bp-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--bp-ink);
}
.bp-tag-row-count {
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--bp-ink-mute);
}