/* Feed e post aberto conforme docs/04-components-feed.md */
.composer { width: 100%; border: 1px solid var(--border); text-align: left; }
.category-row .btn-icon.outlined { margin-left: auto; }
/* Categorias que rolam de lado (06/10/2026): esmaecimento nas bordas + setas redondas quando há mais filtros */
.pills-scroll { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.pills-scroll .pills { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px 0; }
.pills-scroll .pills::-webkit-scrollbar { display: none; }
.pills-scroll .pills .pill { flex: none; }
.pills-scroll::before, .pills-scroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
.pills-scroll::before { left: 0; background: linear-gradient(to right, var(--surface) 30%, transparent); }
.pills-scroll::after { right: 0; background: linear-gradient(to left, var(--surface) 30%, transparent); }
.pills-scroll.can-left::before, .pills-scroll.can-right::after { opacity: 1; }
.pills-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: var(--shadow-ui); cursor: pointer; }
.pills-arrow--left { left: 0; } .pills-arrow--left .icon { transform: scaleX(-1); }
.pills-arrow--right { right: 0; }
.pills-arrow:hover { background: var(--surface); }
@media (max-width: 768px) { .pills-arrow { display: none; } }  /* celular: rola pelo toque; o esmaecimento continua avisando */
/* Ordenação do feed (feed/_order_menu.html): menu como no Skool, item ativo em amarelo; período do Topo ao lado */
.feed-order { display: flex; gap: 8px; margin-left: auto; flex: none; }
.feed-order__menu { position: relative; }
/* fundo branco com borda clara e ícone cinza em qualquer ordem; hover e menu aberto preenchem de cinza (sem linha escura) */
.feed-order .btn-icon.outlined { background: var(--card); border-color: var(--border); color: var(--gray); }
.feed-order .btn-icon.outlined:hover, .feed-order .btn-icon.outlined[aria-expanded="true"] { background: var(--border); color: var(--gray-text); }
.feed-order__period:hover, .feed-order__period[aria-expanded="true"] { border-color: var(--gray); }
.feed-order__period { gap: 6px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.feed-order__popover { width: 216px; top: 48px; padding: 8px; }
.feed-order__popover a { font-weight: 700; gap: 12px; padding: 12px 16px; }
.feed-order__popover a.is-active { background: var(--yellow-highlight); }
button.pill { cursor: pointer; }
.pill-count { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border-radius: 20px; background: none; border: 0; color: var(--gray); font: 700 14px/20px var(--font); cursor: pointer; }
.pill-count:hover, .pill-count.liked { color: var(--ink); }
.pill-count .icon { width: 20px; height: 20px; }
.post-card { position: relative; padding: 16px 16px 10px; margin-bottom: 16px; cursor: pointer; }
.post-card.card--pinned .pinned { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 6px; font: 700 14px/21px var(--font); color: var(--ink); }
.post-row { display: flex; align-items: center; gap: 16px; }
.post-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.post-author { display: flex; align-items: center; gap: 8px; }
.post-name { font: 700 16px/24px var(--font); }
.post-meta { font: 700 13px/19.5px var(--font); color: var(--gray); }
.post-meta a { color: inherit; }
.post-title { font: 700 20px/30px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: inherit; }
.unread-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); margin-right: 8px; vertical-align: 2px; }
.post-preview { font: 400 16px/24px var(--font); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-bottom: 2px; }  /* 2 linhas com "…" no corte */
.post-thumb { width: 104px; height: 104px; border-radius: var(--r-md); border: 1px solid var(--border); object-fit: contain; background: var(--surface); flex: none; }  /* a imagem inteira (14/10/2026) */
.post-foot { display: flex; align-items: center; gap: 8px; }
.commenters { display: flex; margin-left: 8px; }
.commenters .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.commenters .avatar:first-child { margin-left: 0; }
.post-foot .newc { margin-left: 16px; font: 700 13px/19.5px var(--font); color: var(--blue); }
.post-foot .newc--seen { color: var(--gray); }
.post-attach { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 400 13px/19.5px var(--font); }
.post-attach a { color: var(--blue); display: inline-flex; align-items: center; gap: 4px; }
/* Paginação: Anterior e Próximo em pílulas, "página X de Y" embaixo (03/10/2026) */
.pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 8px; }
.pagination__steps { display: flex; gap: 16px; }
.pagination__step { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; font: 700 14px/20px var(--font); color: var(--ink); }
.pagination__step:first-child { padding-left: 12px; }
.pagination__step:last-child { padding-right: 12px; }
a.pagination__step:hover { background: var(--card); border-color: var(--gray); }
.pagination__step.is-off { opacity: .4; cursor: not-allowed; }
.pagination__back { transform: rotate(180deg); }
.pagination__count { margin: 0; font: 400 14px/20px var(--font); color: var(--gray-text); }

/* Post aberto */
.post-open { padding: 32px; margin-bottom: 16px; overflow: visible; }  /* visible: o "ir para o último" é sticky e o picker de emoji sai do card */
.divider--bleed { margin: 16px -32px; }
.post-open .post-author { justify-content: space-between; }
.post-open .post-title { font-size: 23px; line-height: 1.5; white-space: normal; margin-top: 16px; }
.post-body { font: 400 16px/24px var(--font); margin-top: 8px; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 16px; } .post-body p:last-child { margin-bottom: 0; }
.post-body a { color: var(--blue); }
.post-body pre { overflow-x: auto; padding: 12px; background: var(--surface); border-radius: var(--r-sm); }
.post-body iframe, .post-body img { width: 100%; max-width: 370px; border-radius: var(--r-md); border: 1px solid var(--border); margin-top: 16px; }
.post-body iframe { aspect-ratio: 16/9; min-height: 210px; }
.post-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* Como no Skool: miniaturas quadradas lado a lado; clicar abre a imagem inteira (lightbox) */
.post-images a { display: block; flex: none; }
/* só as miniaturas (a > img): o lightbox fica dentro do mesmo bloco e tem a regra própria em lightbox.css */
/* Imagem inteira na proporção dela (14/10/2026): altura fixa, largura acompanha; cover cortava a foto em pé */
.post-images a img { display: block; width: auto; height: 210px; max-width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); object-fit: contain; background: var(--surface); cursor: zoom-in; }
.post-open .post-foot { margin-top: 16px; }
/* Curtir: pill compacto (feed e comentários) e botão split (post aberto), docs/04 */
.like-form { display: inline-flex; margin: 0; }
.like-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border: 0; border-radius: 20px; background: none; color: var(--gray); font: 700 14px/20px var(--font); cursor: pointer; }
.like-btn:hover { color: var(--ink); }
.like-btn.liked { color: var(--indigo); }
.like-btn:disabled { cursor: default; }
.like-btn:disabled:not(.liked):hover { color: var(--gray); }
.like-btn .icon { width: 20px; height: 20px; }
.like-label { display: none; }
/* Só o rodapé do post usa o split; os comentários (dentro do mesmo card) mantêm o pill compacto */
.post-open .post-foot .like-btn { padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--card); gap: 0; }
.post-open .post-foot .like-btn .icon { margin: 0 8px 0 12px; }
.post-open .post-foot .like-label { display: inline; padding-right: 12px; }
.post-open .post-foot .like-count { display: inline-flex; align-items: center; height: 100%; padding: 0 14px; border-left: 1px solid var(--border); color: var(--gray); }
.post-open .post-foot .like-btn.liked .like-count { color: var(--indigo); }
.mod-menu { position: relative; }
.mod-menu .popover { width: 220px; top: 44px; }
.mod-menu form { margin: 0; }
/* "Mover para" (moderador/admin): mesmo recuo dos itens do popover, select logo abaixo */

/* Comentários (fora do card) */
.comments { margin-top: 16px; }
.comment { display: flex; gap: 8px; margin-bottom: 8px; }
.comment-main { flex: 1; min-width: 0; }
.bubble { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 13px; }
.bubble-head { display: flex; align-items: baseline; gap: 6px; }
.bubble-head b { font: 700 16px/24px var(--font); }
.bubble-head span { font: 400 13px/19.5px var(--font); color: var(--gray); }
/* Comentário é texto puro (textarea): pre-line mostra as quebras de linha digitadas, que antes viravam espaço (18/10/2026) */
.comment-body { font: 400 16px/24px var(--font); overflow-wrap: anywhere; white-space: pre-line; }
.comment-body a, .mention { color: var(--blue); }
.comment-actions { display: flex; align-items: center; gap: 12px; padding: 0 0 8px 14px; }
.comment-actions .reply { background: none; border: 0; font: 700 14px/21px var(--font); color: var(--gray); cursor: pointer; }
.comment-actions .reply:hover { color: var(--ink); }
.replies { margin-left: 52px; }
.reply-form { margin: 4px 0 12px 52px; }
.comment-box { margin: 8px 0 16px; }
.comment-row { display: flex; gap: 12px; align-items: flex-start; }
.cbox { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 4px; min-height: 48px; padding: 4px 8px 4px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.cbox.active, .cbox:focus-within { border-color: var(--gray); }
.cbox textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; resize: none; padding: 8px 0; font: 400 16px/24px var(--font); color: var(--ink); max-height: 240px; }
.cbox textarea::placeholder { color: var(--gray); }
.cbox-tools { display: flex; align-items: center; flex: none; }
/* Lista do "@" (mention-picker.js): flutua sobre a página (fixed; topo, lado e altura vêm do JS), até 8 nomes */
.mention-menu { position: fixed; z-index: 1300; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-ui); }
.mention-menu li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); font: 400 15px/22px var(--font); color: var(--ink); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mention-menu li.active { background: var(--surface); }
.mention-menu li.mention-hint { color: var(--gray-text); font-size: 14px; cursor: default; white-space: normal; }
.cbox-tools .tool { width: 36px; height: 40px; }
.comment-actions-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.jump-latest { position: sticky; bottom: 16px; display: flex; justify-content: center; pointer-events: none; margin-top: 8px; }
.jump-latest button { border: 0; cursor: pointer; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-ui); font: 700 14px/21px var(--font); color: var(--ink); }

/* Tópico aberto em modal sobre o feed */
.post-modal { position: fixed; inset: 0; z-index: 1300; }
.post-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.post-modal__close { position: fixed; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-ui); z-index: 2; }
/* Centralizado sem transform: transform prenderia o card de perfil (position: fixed) dentro do painel, que corta com o overflow */
/* Altura do conteúdo, até o pé da tela: post curto não vira um bloco branco com rolagem; longo rola por dentro */
.post-modal__panel { position: absolute; top: 24px; left: 0; right: 0; margin: 0 auto; width: 790px; max-width: calc(100vw - 24px); max-height: calc(100% - 48px); background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-ui); overflow-y: auto; padding: 0 16px 24px; }
.post-modal__panel .post-open { border: 0; box-shadow: none; padding: 32px 16px 16px; margin: 0; border-radius: 0; }
.post-modal__panel .divider--bleed { margin: 16px -16px; }
.post-modal__panel .post-open.card--pinned { box-shadow: none; }
.post-modal__panel .comments { margin-top: 16px; }

/* Composer inline (estilo Skool logado) */
.composer-wrap { position: relative; margin-bottom: 20px; }
.composer-wrap.open { z-index: 1150; }
.composer-wrap > .composer-backdrop { position: fixed; inset: 0; z-index: 1140; }
.composer-card { position: relative; z-index: 1150; padding: 16px; box-shadow: var(--shadow-ui); border-color: transparent; overflow: visible; }
.composer-head { display: flex; align-items: center; gap: 8px; font: 400 16px/24px var(--font); color: var(--gray); margin-bottom: 8px; }
.composer-head b { color: var(--ink); font-weight: 500; }
.composer-title { width: 100%; border: 0; outline: 0; background: none; padding: 4px 0; font: 500 20px/30px var(--font); color: var(--ink); }
.composer-title::placeholder { color: var(--gray); }
.composer-editor { min-height: 96px; }
.composer-card .composer-editor.ql-container.ql-snow { border: 0; font-family: var(--font); }
.composer-editor .ql-editor { padding: 4px 0 8px; min-height: 96px; font: 400 16px/24px var(--font); }
.composer-editor .ql-editor.ql-blank::before { left: 0; right: 0; color: var(--gray); font-style: normal; font: 400 16px/24px var(--font); }
.composer-editor .ql-editor a { color: var(--blue); }
.composer-editor .ql-video { width: 370px; max-width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md); border: 1px solid var(--border); }
.media-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 16px; }
.media-tile { position: relative; width: 200px; height: 200px; border-radius: var(--r-md); overflow: hidden; background: var(--border); border: 0; padding: 0; }
.media-tile img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }  /* a imagem inteira, como será publicada (cover cortava) */
.media-add { background: var(--card); border: 2px dashed var(--border); color: var(--gray); display: grid; place-items: center; cursor: pointer; }
.media-add:hover { color: var(--ink); border-color: var(--gray); }
.tile-btn { position: absolute; top: 8px; left: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--card); color: var(--ink); border: 0; display: grid; place-items: center; box-shadow: var(--shadow-ui); cursor: pointer; }
.tile-btn.right { left: auto; right: 8px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: 16px; font: 400 13px/19.5px var(--font); }
.chip button { border: 0; background: none; color: var(--gray); display: grid; place-items: center; cursor: pointer; padding: 2px; }
/* Barra em duas linhas (06/10/2026): ferramentas em cima, separadas por uma linha; categoria, cancelar, relógio e Publicar embaixo */
.composer-bar { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.composer-tools { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.composer-spacer { flex: 1; }
.tool--round { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--card); color: var(--ink); }
.tool--round.active { background: var(--yellow-flash); border-color: var(--yellow); }
.composer-tools { display: flex; align-items: center; gap: 4px; }
.tool { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--gray); display: grid; place-items: center; cursor: pointer; }
.tool:hover, .tool.active { background: var(--border); color: var(--ink); }
.tool[disabled] { opacity: .4; cursor: not-allowed; }
.emoji-anchor { position: relative; }
.composer-actions { display: flex; align-items: center; gap: 8px; }
.composer-actions .btn-primary { padding: 0 24px; }
.field--icon { display: flex; align-items: center; gap: 8px; height: 52px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 14px; color: var(--gray); }
.field--icon input, .field--icon input:focus { border: 0; height: auto; padding: 0; outline: 0; }
.field--icon:focus-within { border: 2px solid var(--ink); padding: 0 13px; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 160px; margin: 0 0 24px; padding: 24px; border: 2px dashed var(--border); border-radius: var(--r-md); color: var(--gray); font: 400 16px/24px var(--font); text-align: center; cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--gray); color: var(--ink); }
.dropzone u { text-underline-offset: 3px; }
.emoji-picker { left: -8px; right: auto; top: 46px; width: 304px; padding: 12px; }
/* Na caixa de comentário o botão fica na ponta direita: o picker abre para dentro. */
.cbox .emoji-picker { left: auto; right: -8px; }
.emoji-search { display: flex; align-items: center; gap: 8px; height: 40px; background: var(--surface); border-radius: var(--r-md); padding: 0 12px; color: var(--gray); margin-bottom: 8px; }
.emoji-search input { border: 0; background: none; outline: 0; flex: 1; font: 400 14px/20px var(--font); }
.emoji-scroll { max-height: 300px; overflow-y: auto; }
.emoji-group { font: 500 14px/20px var(--font); color: var(--gray); margin: 8px 0 4px; }
.emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.emoji-grid button { border: 0; background: none; font-size: 24px; line-height: 36px; height: 36px; border-radius: 8px; cursor: pointer; padding: 0; }
.emoji-grid button:hover { background: var(--surface); }

/* Folhas modais (link, vídeo) */
.feed-sheet { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
.feed-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.feed-sheet__panel { position: relative; width: 454px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 32px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-ui); }
.feed-skeleton { display: grid; gap: 12px; } .feed-skeleton span { display: block; height: 16px; background: var(--border); border-radius: 4px; }

@media (max-width: 768px) {
  .post-card { border-radius: 0; border-left: 0; border-right: 0; margin-bottom: 16px; }
  .composer { width: calc(100% - 24px); }
  .composer-card { border-radius: var(--r-md); margin: 0 12px; }
  .composer-actions .btn-text { display: none; }  /* celular: fecha pelo X/Esc; sobra espaço para categoria, relógio e Publicar */
  .composer-actions { justify-content: flex-end; }
  .composer-tools { flex-wrap: nowrap; gap: 2px; } .composer-tools .tool { width: 36px; }  /* as 8 ferramentas numa linha só em 360px */
  .composer-tools { flex-wrap: wrap; row-gap: 8px; }  /* a Categoria desce em vez de vazar do card */
  .media-tile { width: calc(50% - 8px); height: auto; aspect-ratio: 1; }
  .post-title { white-space: normal; max-height: 60px; }
  .post-thumb { width: 72px; height: 72px; }
  .commenters { display: flex; margin-left: 8px; }
.commenters .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.commenters .avatar:first-child { margin-left: 0; }
.post-foot .newc { margin-left: auto; }
  .post-open { padding: 16px; }
  .divider--bleed { margin: 16px -16px; }
  .replies, .reply-form { margin-left: 16px; }
  .post-modal__panel { top: 0; bottom: 0; max-height: none; border-radius: 0; max-width: 100vw; padding: 0 0 24px; }
  .post-modal__panel .post-open { padding-top: 64px; }
  .cbox-tools > .tool[disabled] { display: none; }  /* no celular só o que funciona: link, vídeo, emoji e GIF */
  /* Cinco botões espremiam o texto: no celular eles vão para uma linha própria e só aparecem ao tocar na caixa */
  .cbox { flex-wrap: wrap; }
  .cbox textarea { flex: 1 1 100%; }
  .cbox-tools { flex: 1 1 100%; justify-content: flex-end; }
  .cbox:not(.active):not(:focus-within) .cbox-tools { display: none; }
}

/* Travas por nível (Painel › Níveis): aviso no lugar do campo */
.composer--locked { cursor: default; color: var(--gray-text); }
.composer--locked span { display: inline-flex; align-items: center; gap: 6px; }
.comment-locked { display: flex; align-items: center; gap: 6px; margin: 8px 0; font: 500 14px/20px var(--font); color: var(--gray-text); }
/* Moderação: selo no conteúdo que só o autor vê enquanto a IA ou a equipe analisa */
.mod-badge { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 10px; background: var(--yellow-flash); color: #7a5b00; font: 700 12px/20px var(--font); vertical-align: middle; }
.mod-badge--held { background: var(--surface); color: var(--gray-text); border: 1px solid var(--border); }
.comment--held .bubble, .vc-item--held .vc-main { color: var(--gray-text); font: 400 14px/20px var(--font); font-style: italic; }
.post-removed { display: grid; justify-items: start; gap: 16px; color: var(--gray-text); font: 400 16px/24px var(--font); }
/* GIF nos comentários (GIPHY) */
.gif-anchor { position: relative; }
.gif-picker { right: -8px; left: auto; top: 46px; width: 336px; padding: 12px; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 6px; max-height: 300px; overflow-y: auto; }
.gif-item { display: block; height: 96px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--surface); cursor: pointer; }
.gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-item:hover, .gif-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.gif-more { grid-column: 1 / -1; height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); font: 500 13px/20px var(--font); cursor: pointer; }
.gif-empty { grid-column: 1 / -1; margin: 8px 0; font: 400 13px/18px var(--font); color: var(--gray-text); }
.gif-powered { margin: 8px 0 0; font: 700 11px/16px var(--font); color: var(--gray); text-align: right; letter-spacing: .02em; }
.gif-chosen { position: relative; display: inline-block; margin: 8px 0 0 12px; }
.gif-chosen--post { margin: 0 0 12px; }
/* Vídeo escolhido no comentário: linha própria acima do texto (senão espreme o campo no celular) */
.cbox:has(.video-chosen, .files-chosen, .file-error:not([style*="none"])) { flex-wrap: wrap; }
.cbox:has(.video-chosen, .files-chosen, .file-error:not([style*="none"])) textarea { flex-basis: 0; }
.video-chosen, .files-chosen, .file-error { flex: 0 0 100%; margin: 6px 0 0; }
.files-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.files-chosen .chip > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-error { font: 500 13px/18px var(--font); color: #a93226; }
/* Anexos no comentário publicado: miniaturas no padrão do GIF (até 130 de altura) e documentos como no post.
   Imagem e GIF inteiros, sem corte (18/10/2026): a altura acompanha a proporção, como a galeria do post */
.comment-images { display: flex; flex-wrap: wrap; gap: 6px; }
.comment-images:not(:has(.comment-image)), .comment-docs:empty { display: none; }
.comment-image img { display: block; width: auto; height: auto; max-width: min(240px, 100%); max-height: 130px; margin-top: 6px; border-radius: 10px; }
.comment-docs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font: 400 13px/19.5px var(--font); }
.comment-docs a { color: var(--blue); display: inline-flex; align-items: center; gap: 4px; }
/* Player do YouTube/Vimeo em comentário: mesma largura do vídeo no composer do post */
.comment-video { width: min(370px, 100%); aspect-ratio: 16 / 9; margin-top: 6px; border-radius: 10px; overflow: hidden; background: #000; }
.comment-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.post-gif { display: block; width: auto; height: auto; max-width: 100%; max-height: 200px; margin: 12px 0; border-radius: 10px; }
/* No composer o GIF fica no meio da barra: o seletor abre a partir do começo dela e cabe na tela do celular */
.composer-tools { position: relative; }
.composer-tools .gif-anchor { position: static; }
.composer-tools .gif-picker { left: 0; right: auto; top: calc(100% + 6px); width: min(336px, calc(100vw - 48px)); }
.gif-chosen img { display: block; max-width: 120px; max-height: 120px; border-radius: 8px; }
.gif-chosen button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
/* Mesmo padrão das imagens em comentário no Skool (docs/04: altura ~130, raio 10): GIF em pé ou deitado fica igual */
.comment-gif { display: block; width: auto; height: auto; max-width: min(240px, 100%); max-height: 130px; margin-top: 6px; border-radius: 10px; }
/* Miniatura do card: vídeo ganha o triângulo de play por cima (é a primeira mídia do post) */
.post-thumb-wrap { position: relative; flex: none; display: block; }
.post-thumb--blank { display: block; background: #111; }
/* Post com mais de uma foto (14/10/2026): selo "+N" no canto, para a pessoa saber que tem mais no post */
.post-thumb-more { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .68); color: #fff; font: 700 12px/18px var(--font); pointer-events: none; }
@media (max-width: 767px) { .post-thumb-more { right: 4px; bottom: 4px; padding: 0 6px; font-size: 11px; } .post-thumb-more .icon { display: none; } }  /* miniatura pequena: só "+N" */
.post-thumb-wrap.is-video::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
@media (max-width: 767px) { .post-images a img { height: calc((100vw - 64px) / 3); } }


/* Aviso "Novas publicações" (static/js/feed-live.js): pílula centralizada no topo da lista, gruda ao rolar */
.feed-new-wrap { position: sticky; top: 76px; z-index: 20; display: flex; justify-content: center; }
.feed-new-slot:empty { display: none; }
.feed-new-slot { margin-bottom: 12px; }
.feed-new { border: 0; border-radius: var(--r-pill); background: var(--blue); color: #fff; padding: 8px 20px; font: 500 14px/20px var(--font); cursor: pointer; box-shadow: var(--shadow-ui); }
.feed-new:hover { filter: brightness(1.08); }
.feed-new:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }


/* Compartilhar post (06/10/2026): folha com botões redondos, como a do Instagram; no celular a fileira rola */
dialog.share-dialog { width: 440px; padding: 24px 24px 20px; }
.share-dialog h2 { font: 700 20px/28px var(--font); margin: 0 0 20px; }
.share-close { position: absolute; top: 12px; right: 12px; }
.share-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }  /* 4 por linha: 2 linhas, sem rolar */
.share-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; border: 0; background: none; font: 400 12px/16px var(--font); color: var(--ink); cursor: pointer; text-align: center; }
.share-item:hover { text-decoration: none; }
.share-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); transition: background .1s; }
.share-item:hover .share-icon { background: var(--border); }
.share-item--mobile { display: none; }  /* Messenger: só o app do celular abre o link */
@media (max-width: 768px) { dialog.share-dialog { width: calc(100vw - 32px); padding: 20px 16px 16px; } .share-item--mobile { display: flex; } }
.share-item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tipo de post, contador e agendamento no composer (06/10/2026) */
.composer-head > span:not(.avatar) { flex: 1 1 auto; min-width: 0; }
.kind-switch { display: inline-flex; flex: none; margin-left: auto; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.kind-switch button { height: 30px; padding: 0 14px; border: 0; background: var(--card); color: var(--gray-text); font: 500 13px/20px var(--font); cursor: pointer; }
.kind-switch button + button { border-left: 1px solid var(--border); }
.kind-switch button.active { background: var(--ink); color: #fff; }
.kind-switch button[disabled] { opacity: .45; cursor: not-allowed; }
.feed-sheet__panel .help { display: block; margin: 0 0 20px; line-height: 18px; }  /* texto do modal de agendar, acima do campo */
.composer-count { margin: 4px 0 0; text-align: right; font: 400 12px/16px var(--font); color: var(--gray-text); font-variant-numeric: tabular-nums; }
.composer-count.is-over { color: var(--red-today); font-weight: 500; }
.composer-actions { flex-wrap: wrap; }
/* Agendados no perfil */
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.sched-item:last-child { border-bottom: 0; }
.sched-main { flex: 1; min-width: 0; }
.sched-title { font: 700 16px/24px var(--font); margin: 0; }
.sched-when { font: 400 13px/18px var(--font); color: var(--gray-text); margin: 2px 0 0; }
.sched-actions { display: flex; gap: 4px; flex: none; }
.sched-actions form { margin: 0; }

/* Artigo (06/10/2026): capa no card e na leitura; o corpo usa os estilos .rich (títulos, imagens, tabelas) */
.post-card-cover { display: block; margin: 8px 0 12px; border-radius: var(--r-md); overflow: hidden; background: var(--border); aspect-ratio: 16 / 9; }
.post-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-cover { display: block; width: 100%; max-height: 420px; object-fit: cover; margin: 12px 0 4px; border-radius: var(--r-md); }
.post-body--article h3 { font: 700 22px/30px var(--font); margin: 24px 0 8px; }
.post-body--article h4 { font: 700 18px/26px var(--font); margin: 20px 0 6px; }
.post-body--article p { margin: 0 0 14px; }
.post-body--article blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--border); color: var(--gray-text); }
.post-body--article pre { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font: 14px/20px ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }
/* Modal "Escrever artigo", alto como o "Criar evento" do LinkedIn */
/* overflow visível no dialog: os menus do editor (tabela) nascem dentro dele e não podem ser cortados; o form é que recorta */
dialog.article-dialog { width: 720px; max-height: calc(100vh - 32px); padding: 0; overflow: visible; }
.article-form { display: flex; flex-direction: column; max-height: calc(100vh - 32px); border-radius: inherit; overflow: hidden; }
.article-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 24px; border-bottom: 1px solid var(--border); }
.article-head h2 { margin: 0; font: 700 20px/28px var(--font); }
.article-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 16px; }
.article-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; margin: 0 -24px 16px; background: var(--surface); border-bottom: 1px solid var(--border); cursor: pointer; overflow: hidden; }
.article-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-cover-hint { display: grid; justify-items: center; gap: 4px; color: var(--gray-text); text-align: center; }
.article-cover-hint b { color: var(--ink); font: 700 16px/24px var(--font); }
.article-cover-hint small { font: 400 13px/18px var(--font); }
.article-cover-change { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); font: 500 13px/18px var(--font); color: var(--ink); }
.article-title { width: 100%; border: 0; outline: 0; background: none; padding: 4px 0; font: 700 24px/32px var(--font); color: var(--ink); }
.article-title::placeholder { color: var(--gray); }
.article-errors { margin: 12px 0 0; }
.article-foot { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--card); }
.article-schedule { position: relative; }
.article-schedule-pop { left: auto; right: 0; top: auto; bottom: calc(100% + 8px); width: 300px; padding: 12px; display: grid; gap: 8px; }
.article-schedule-label { font: 500 13px/18px var(--font); color: var(--gray-text); }
.article-schedule-pop input { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font: 400 15px/20px var(--font); }
.article-dialog .tox-dialog-wrap, .article-dialog .tox-tinymce-aux { z-index: 1500; }
@media (max-width: 768px) {
  dialog.article-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .article-form { max-height: calc(100vh - 16px); }
  .article-body { padding: 0 16px 12px; }
  .article-cover { margin: 0 -16px 12px; }
  .article-foot { gap: 4px; padding: 12px 16px; }
  .article-foot .btn { padding: 0 16px; }  /* Cancelar, cadeado, relógio e Publicar cabem em 390px */
}
/* Próximo evento abaixo do composer (09/10/2026, como no Skool): o título abre o modal do evento */
.feed-next-event { margin: -4px 0 20px; padding: 0 12px; font: 400 15px/22px var(--font); color: var(--ink); text-align: center; }
.feed-next-event .icon { vertical-align: -4px; margin-right: 4px; }  /* em linha: no celular o texto quebra junto do ícone */
.feed-next-event__lock { color: var(--gray-text); }
.feed-next-event__lock .icon { vertical-align: -2px; }
.feed-next-event a { font-weight: 700; color: inherit; }
.feed-next-event a:hover, .feed-next-event a:focus-visible { text-decoration: underline; }
/* Vídeo enviado no post (09/10/2026): player do Bunny na proporção do vídeo; o vertical estreita para caber em 70% da tela */
.post-video { position: relative; aspect-ratio: var(--w, 16) / var(--h, 9); width: min(100%, calc(70vh * var(--w, 16) / var(--h, 9))); margin: 12px auto; border-radius: 10px; overflow: hidden; background: #000; }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-video-pending { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 12px 16px; border: 1px dashed var(--border); border-radius: 10px; color: var(--gray-text); font: 400 14px/20px var(--font); }
/* Chip do vídeo enviado: nome cortado, barra de progresso fina no rodapé do chip */
.chip--video { position: relative; overflow: hidden; max-width: 100%; }
.chip--video .chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--blue); transition: width .2s; }
.dropzone-hint { font: 400 13px/18px var(--font); color: var(--gray-text); }
.dropzone.busy { opacity: .6; pointer-events: none; }

/* Documento anexado com prévia (14/10/2026; templates/feed/_document_chip.html) */
.chip--doc { position: relative; overflow: hidden; max-width: 100%; }
.chip--doc .chip-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-state { color: var(--gray-text); white-space: nowrap; }
.chip .chip-view { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 12px; color: var(--blue); font: 500 13px/19.5px var(--font); }
.chip .chip-view:hover { background: var(--surface); }
.attachment-item { display: inline-flex; align-items: center; gap: 2px; }
.tile-btn.bottom { top: auto; bottom: 8px; }  /* Recortar (14/10/2026): no canto de baixo, longe de Ampliar e Remover */

/* Post ainda na moderação (14/10/2026): faixa amarela chamativa + card tracejado; no feed o conteúdo fica apagado */
.post--unpublished { border: 2px dashed #d9a400; }
.mod-notice { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--yellow-highlight) 14px 28px); color: #4a3700; }
.mod-notice--held { background: repeating-linear-gradient(-45deg, #f6c39a 0 14px, #fbdcc2 14px 28px); color: #5a2c00; }
.mod-notice__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: inherit; }
.mod-notice--pending .mod-notice__icon { animation: mod-notice-pulse 1.6s ease-in-out infinite; }
.mod-notice__text { display: grid; gap: 2px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .82); }
.mod-notice__text strong { font: 700 16px/22px var(--font); }
.mod-notice__text span { font: 400 14px/20px var(--font); }
.post-card.post--unpublished .post-row { opacity: .5; filter: grayscale(.6); }
@keyframes mod-notice-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 255, 255, .5); } }
@media (prefers-reduced-motion: reduce) { .mod-notice--pending .mod-notice__icon { animation: none; } }