/* @file css/compositor.css
   @versao_deploy 2026-10-05-l-o-compositor-da-comunidade-e-o-do-feed
   ⚠️ Trocar a data acima ao editar — o painel `</>` lê este marcador do disco, e só varre o começo do arquivo.
   🧩 05/10 (F3, C1 — pedido do Rafael): o COMPOSITOR de postagens, UM desenho para o feed (base_literario.html)
      e para a Comunidade (comunidade.html). As regras vieram do base_literario.css SEM mudar nenhum valor
      (l.786–931, 1617–1618 e 1798–1804 do -10-05-f); usam só os tokens de tema, que são os mesmos nos dois
      lados (medido: 224 pares iguais). Uma regra nova do compositor entra AQUI — nunca numa das páginas.
      O cartão do YouTube (.yt-embed) NÃO mora aqui: vive também dentro dos posts (é do módulo do YouTube). */

    .post-composer {
      background: var(--bg-card); border-radius: 12px; padding: 14px;
      margin-bottom: 16px; border: 1px solid var(--border);
    }
    .post-composer-top { display: flex; gap: 12px; align-items: flex-start; }
    /* Área colapsada (clicável para expandir) */
    .post-composer-collapsed {
      flex: 1; background: var(--bg-hover); border: none; border-radius: 20px;
      padding: 10px 16px; color: var(--text-dim); font-size: 0.9rem;
      cursor: pointer; user-select: none; transition: background 0.2s;
    }
    .post-composer-collapsed:hover { background: var(--bg-body); }

    /* Área expandida (editor completo) */
    .post-composer-expanded { display: none; flex: 1; flex-direction: column; gap: 0; }
    .post-composer.expanded .post-composer-collapsed { display: none; }
    .post-composer.expanded .post-composer-expanded { display: flex; }

    /* Input de título */
    .composer-titulo-input {
      width: 100%; border: none; background: transparent; color: var(--text);
      font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem;
      padding: 8px 0; outline: none; border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }
    .composer-titulo-input::placeholder { color: var(--text-dim); font-weight: 400; }

    /* Toolbar do editor */
    .composer-toolbar {
      display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
      padding: 6px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px;
    }
    .composer-toolbar button {
      width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
      background: none; border: 1px solid transparent; border-radius: 4px;
      color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
    }
    .composer-toolbar button:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
    .composer-toolbar button.active { background: var(--primary); color: white; border-color: var(--primary); }
    .composer-toolbar .toolbar-divider {
      width: 1px; height: 20px; background: var(--border); margin: 0 4px;
    }
    .composer-toolbar select {
      padding: 3px 6px; background: var(--bg-hover); color: var(--text);
      border: 1px solid var(--border); border-radius: 4px; font-size: 0.75rem;
      cursor: pointer; outline: none;
    }

    /* Área editável contenteditable */
    .composer-editor {
      min-height: 80px; max-height: 300px; overflow-y: auto;
      padding: 10px 2px; color: var(--text); font-size: 0.9rem; line-height: 1.6;
      outline: none; word-wrap: break-word; overflow-wrap: break-word;
    }
    .composer-editor:empty::before {
      content: attr(data-placeholder); color: var(--text-dim); pointer-events: none;
    }
    .composer-editor h1, .composer-editor h2, .composer-editor h3 { font-family: 'Cinzel', serif; margin: 8px 0 4px; }
    .composer-editor h1 { font-size: 1.2rem; }
    .composer-editor h2 { font-size: 1.1rem; }
    .composer-editor h3 { font-size: 1rem; }
    .composer-editor blockquote {
      border-left: 3px solid var(--primary-light); padding: 6px 12px;
      margin: 8px 0; background: var(--bg-hover); border-radius: 0 4px 4px 0;
      font-style: italic; color: var(--text-muted);
    }

    /* Preview de imagem anexada */
    .composer-image-preview {
      position: relative; display: inline-block; margin-top: 8px;
    }
    .composer-image-preview img {
      max-width: 100%; max-height: 200px; border-radius: 8px; object-fit: cover;
    }
    .composer-image-preview .remove-img {
      position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
      background: rgba(0,0,0,0.7); color: white; border: none; border-radius: 50%;
      cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px;
    }

    .post-composer-actions {
      display: flex; gap: 8px; margin-top: 12px; padding-top: 12px;
      border-top: 1px solid var(--border); justify-content: space-between;
      align-items: center;
    }
    /* Grupo da esquerda: é ELE que cede espaço quando a linha aperta.
       `min-width: 0` desarma o mínimo automático do flex — sem isso um
       filho que não encolhe faz o grupo inteiro empurrar o vizinho para
       fora da tela, que era o defeito do «Publicar» no celular. */
    .post-composer-tools {
      display: flex; gap: 4px; min-width: 0; flex: 0 1 auto; overflow: hidden;
    }
    .post-action-btn {
      display: flex; align-items: center; gap: 6px; padding: 8px 12px;
      background: none; border: none; color: var(--text-muted);
      cursor: pointer; border-radius: 8px; font-size: 0.85rem; transition: all 0.2s;
    }
    .post-action-btn:hover { background: var(--bg-hover); color: var(--primary-light); }
    .post-action-btn i { font-size: 1.1rem; }
    /* Vídeo do YouTube: o ícone leva a cor da marca porque é a única pista de
       que aquele botão abre uma BUSCA no YouTube, e não um seletor de arquivo
       como o vizinho «Foto». O rótulo segue a cor dos outros — o vermelho no
       texto todo pareceria alerta. */
    .post-action-btn--video i { color: #ff0000; }
    .post-action-btn--video:hover { background: rgba(255, 0, 0, 0.10); color: var(--text); }
    .post-action-btn--video:hover i { color: #ff0000; }
    .post-publish-btn {
      padding: 8px 20px; background: var(--gradient); border: none;
      border-radius: 20px; color: white; font-weight: 500; cursor: pointer;
      font-size: 0.85rem; transition: opacity 0.2s;
      /* Publicar é o destino da tela: nunca encolhe nem quebra em duas
         linhas, por mais apertada que a barra fique. */
      flex: 0 0 auto; white-space: nowrap;
    }
    .post-publish-btn:hover { opacity: 0.9; }
    .post-publish-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* --------------------------------------------------------------------
       CELULAR: o composer perde os RÓTULOS, nunca o botão de publicar.
       --------------------------------------------------------------------
       Foto + Compartilhar + Emoji com texto ao lado do ícone somam mais de
       250px. Numa coluna de ~340px isso empurrava o «Publicar» para fora da
       borda direita — sumia justamente a ação que a tela existe para
       oferecer. Aqui sobra só o ícone, que é o que se reconhece de relance.
       ♿ O nome de cada botão passa a vir do `title` (os quatro têm, e são
       traduzidos) — ver o comentário no base_literario.html.

       🔴 30/08/2026 — entrou o QUARTO botão («Vídeo»), e a conta ficou justa:
       4 × 40px + 3 × 2px de gap = 166px de ícones, mais ~92px do «Publicar».
       Em 360px de viewport sobram ~328px depois das margens, então cabe — mas
       sem folga para um quinto. Abaixo de 380px o padding cede mais 8px por
       botão: `overflow:hidden` não avisa quando corta, ele só some com o
       último ícone.
       -------------------------------------------------------------------- */
    @media (max-width: 768px) {
      .post-composer-actions { gap: 6px; }
      .post-composer-tools { gap: 2px; }
      .post-action-btn > span { display: none; }
      .post-action-btn { padding: 8px 10px; gap: 0; }
      .post-action-btn i { font-size: 1.25rem; }
      .post-publish-btn { padding: 8px 16px; }
    }
    @media (max-width: 380px) {
      .post-action-btn { padding: 8px 6px; }
      .post-publish-btn { padding: 8px 12px; }
    }

    /* Embed no compositor (preview) */
    .composer-editor .yt-embed { max-height: 220px; }

    /* Composer avatar image */
    .post-composer-avatar { 
      width: 40px; height: 40px; border-radius: 50%; background: var(--bg-hover);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; flex-shrink: 0;
    }
    .post-composer-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

    /* A letra-base da CAIXA é a da raiz (1rem): no feed a caixa já herdava 16px (nada muda — provado pelo
       comparar_estilos.js, árvore × candidato); na Comunidade herdava os 15px da página e as caixas sem tamanho
       próprio ficavam menores (medido 05/10: 13 diferenças por estado, todas font-size). */
    .post-composer { font-size: 1rem; }

    /* A Comunidade abre e fecha o compositor pondo/tirando style="display:none" (comunidade.js composeExpandir /
       composeCollapsar), não pela classe .expanded do feed. Sem o style, o editor aparece. */
    .post-composer--abre-inline .post-composer-expanded { display: flex; }