/* ==========================================================================
   PRISMA · ai/composer.css — PROMPT COMPOSER
   --------------------------------------------------------------------------
   O campo por onde a pessoa fala com o sistema. É a peça mais usada do
   ecossistema inteiro, então ela obedece a três coisas antes de qualquer
   estética:

     1. Nunca perde o que foi digitado. Trocar de modo, de modelo ou de
        agente não limpa o texto.
     2. O botão de enviar está sempre visível — inclusive no celular com o
        teclado aberto. Nada de "rolar para achar".
     3. Processando é um ESTADO da peça, não um spinner solto: o enviar vira
        interromper, o campo continua legível, o que está acontecendo é dito
        em texto (analisando, consultando arquivos, gerando…).

   ANATOMIA
     .composer
       .composer-modos       chips de modo (conversar / criar / com agente)
       .composer-caixa       o campo
         .composer-anexos    chips dos arquivos anexados
         .composer-texto     textarea que cresce
         .composer-barra     linha de baixo
           .composer-acoes   anexar · novo · ferramentas
           .composer-modelo  seletor de modelo/agente
           .composer-enviar  enviar / interromper
       .composer-estado      o que o sistema está fazendo agora
       .composer-sugestoes   chips de próximo passo

   Vidro SÓ quando flutua sobre campo (home, hero). Dentro de tela de trabalho
   densa, use .composer--solido.
   ========================================================================== */

.composer {
  display: grid;
  gap: var(--espaco-3);
  width: 100%;
  max-width: 720px;
}

/* --- Modos ------------------------------------------------------------- */
.composer-modos { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }
.composer-modos .chip { min-height: 36px; }

/* --- A caixa ------------------------------------------------------------ */
.composer-caixa {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--espaco-2);
  padding: var(--espaco-4) var(--espaco-4) var(--espaco-3);
  border-radius: var(--radius-xl);

  /* vidro LIQUID por padrão: a home é campo com textura */
  background-color: var(--glass-tint-liquid);
  -webkit-backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur-liquid)) saturate(var(--glass-saturacao));
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-floating);
  transition: box-shadow var(--motion-default) var(--easing-standard);
}
.composer-caixa:focus-within {
  box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-floating), var(--glow-focus);
}

/* Sobre superfície sólida: mesma anatomia, sem vidro. */
.composer--solido .composer-caixa {
  background-color: var(--surface-1);
  background-image: var(--surface-veu);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--border-default), var(--elev-raised);
}
.composer--solido .composer-caixa:focus-within {
  box-shadow: inset 0 0 0 1px var(--border-focus), var(--elev-raised), 0 0 0 3px var(--accent-muted);
}

/* --- Texto ---------------------------------------------------------------- */
.composer-texto {
  width: 100%;
  min-height: 56px;
  max-height: 40vh;             /* cresce, mas nunca engole a tela */
  padding: var(--espaco-1) 0;
  border: 0; background: transparent; resize: none; outline: none;
  color: var(--text-primary);
  font-size: var(--body-lg-size);
  line-height: 1.5;
  field-sizing: content;        /* cresce com o conteúdo, sem JS, onde há suporte */
}
.composer-texto::placeholder { color: var(--text-muted); }
@media (max-width: 640px) { .composer-texto { font-size: 16px; } } /* sem zoom do iOS */

/* --- Anexos ---------------------------------------------------------------- */
.composer-anexos { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }
.composer-anexos:empty { display: none; }
.composer-anexo {
  display: inline-flex; align-items: center; gap: var(--espaco-2);
  min-height: 32px; padding: 0 var(--espaco-2) 0 var(--espaco-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  font-size: var(--caption-size); color: var(--text-secondary);
  max-width: 220px;
}
.composer-anexo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-anexo svg { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.composer-anexo .chip-remover { margin: 0; }

/* --- Barra ---------------------------------------------------------------- */
.composer-barra {
  display: flex; align-items: center; gap: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--border-subtle);
}
.composer-acoes { display: flex; align-items: center; gap: var(--espaco-1); }

/* Botões pequenos da barra: ícone + rótulo curto, ou só ícone. */
.composer-acao {
  display: inline-flex; align-items: center; gap: var(--espaco-2);
  min-height: 36px; padding: 0 var(--espaco-3);
  border-radius: var(--radius-full);
  color: var(--text-secondary); font-size: var(--body-sm-size); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard);
}
.composer-acao svg { width: 18px; height: 18px; flex: none; }
.composer-acao:hover { background: var(--surface-2); color: var(--text-primary); }
.composer-acao--icone { width: 36px; padding: 0; justify-content: center; }

/* --- Modelo / agente ------------------------------------------------------ */
.composer-modelo {
  display: inline-flex; align-items: center; gap: var(--espaco-2);
  min-height: 36px; padding: 0 var(--espaco-2) 0 var(--espaco-3);
  margin-inline-start: auto;
  border-radius: var(--radius-full);
  color: var(--text-secondary); font-size: var(--body-sm-size); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard);
}
.composer-modelo:hover { background: var(--surface-2); color: var(--text-primary); }
.composer-modelo svg { width: 16px; height: 16px; }
.composer-modelo .avatar { width: 22px; height: 22px; font-size: 9px; }

/* --- Enviar / interromper ------------------------------------------------- */
.composer-enviar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-full);
  background-color: var(--accent-primary);
  background-image: linear-gradient(176deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--elev-raised);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard),
              transform var(--motion-fast) var(--easing-standard),
              box-shadow var(--motion-fast) var(--easing-standard);
}
.composer-enviar svg { width: 20px; height: 20px; }
.composer-enviar:hover { background-color: var(--accent-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), var(--elev-raised), var(--glow-subtle); }
.composer-enviar:active { transform: scale(.94); box-shadow: inset 0 1px 3px rgba(0,0,0,.28); }
/* Sem texto não há o que enviar — e a peça diz isso sem sumir. */
.composer-enviar:disabled { background: var(--surface-3); background-image: none; color: var(--text-disabled);
                            box-shadow: none; cursor: not-allowed; }

/* Processando: o mesmo botão vira "interromper". Mesma posição, mesmo
   tamanho — a mão já sabe onde ele está. */
.composer[data-estado="processando"] .composer-enviar {
  background: var(--surface-elevated); background-image: none;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--glow-processing);
}
.composer[data-estado="processando"] .composer-caixa { box-shadow: inset 0 0 0 1px var(--border-glass), var(--elev-floating), var(--glow-processing); }
.composer[data-estado="processando"] .composer-texto { color: var(--text-secondary); }

/* --- Estado (o que o sistema está fazendo) -------------------------------- */
.composer-estado {
  display: flex; align-items: center; gap: var(--espaco-3);
  min-height: 24px; padding-inline: var(--espaco-2);
  font-size: var(--caption-size); color: var(--text-muted);
}
.composer-estado[hidden] { display: none; }
.composer-estado .gerando span { width: 4px; height: 4px; }

/* --- Sugestões -------------------------------------------------------------- */
.composer-sugestoes { display: flex; gap: var(--espaco-2); flex-wrap: wrap; }
.composer-sugestoes .chip { min-height: 34px; font-size: var(--caption-size); }

/* --- Rodapé de atalhos ------------------------------------------------------ */
.composer-atalhos {
  display: flex; justify-content: space-between; gap: var(--espaco-4);
  padding-inline: var(--espaco-2);
  font-size: 11px; color: var(--text-muted);
}
.composer-atalhos kbd {
  font-family: var(--fonte-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* ==========================================================================
   CELULAR — simples e utilizável (brief §21)
   Rótulos somem, ícones ficam; o modelo vira só avatar; enviar não sai do lugar.
   ========================================================================== */
@media (max-width: 640px) {
  .composer-caixa { padding: var(--espaco-3); border-radius: var(--radius-lg); }
  .composer-acao span, .composer-modelo span { display: none; }
  .composer-acao { width: 36px; padding: 0; justify-content: center; }
  .composer-modelo { padding: 0 var(--espaco-2); }
  .composer-atalhos { display: none; }
  .composer-modos { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .composer-modos .chip { flex: none; padding-inline: var(--espaco-3); }   /* D-022: com a Sora, três modos voltam a caber sem cortar o último */
  .composer-modos::-webkit-scrollbar { display: none; }
  .composer-sugestoes { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .composer-sugestoes::-webkit-scrollbar { display: none; }
  .composer-sugestoes .chip { flex: none; }
}


/* ==========================================================================
   SELETORES DO COMPOSER  (D-014/D-015, da Home do PRISMA)
   No PRISMA o professor escolhe COMPONENTE · SÉRIE · TIPO DE MATERIAL e descreve o que
   precisa. O produto NÃO trabalha com dados de estudantes (regra da autora, 19/09/2026):
   nada de turma nominal, lista de alunos ou nota aqui.
   <select> nativo de propósito: teclado e leitor de tela funcionam sem uma linha de script.
     <label class="composer-seletor"><span class="apenas-leitor">Série</span>
       <select aria-label="Série">…</select><svg>…seta…</svg></label>
   ========================================================================== */
.composer-seletor { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.composer-seletor select {
  appearance: none; -webkit-appearance: none;
  field-sizing: content;   /* largura do item ESCOLHIDO, e nao do mais comprido da lista */
  min-height: 36px; max-width: 11.5rem; padding: 0 26px 0 var(--espaco-3);
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: var(--label-size); font-weight: 500; text-overflow: ellipsis; cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing-standard), color var(--motion-fast) var(--easing-standard);
}
.composer-seletor select:hover { background: var(--surface-2); color: var(--text-primary); }
.composer-seletor select:focus-visible { outline: 0; box-shadow: var(--glow-focus); }
.composer-seletor option { color: var(--tinta); background: var(--papel); }
.composer-seletor svg { position: absolute; right: 8px; width: 14px; height: 14px; pointer-events: none; color: var(--text-muted); }
@media (max-width: 720px) { .composer-seletor select { max-width: 8.4rem; } }

/* ==========================================================================
   CONTEXTO DO MATERIAL — fora da caixa, tudo opcional  (D-017 · autora, 19/09/2026 22h42)
   "Tem que ter a possibilidade do professor escrever o seu… cada escola tem o seu itinerário…
    nenhum ser obrigatório… talvez essa parte venha fora."
   · Componente é <input list> — TEXTO LIVRE com sugestões (áreas de conhecimento, componentes,
     itinerário formativo, projeto de vida, eletiva). Lista fechada nunca daria conta.
   · Ano ou série e Tipo de material são <select> com primeira opção vazia (= não informado).
   · Nenhum é obrigatório: o pedido em texto pode dizer tudo. Isto só poupa digitação.
     <div class="composer-contexto" role="group" aria-label="…tudo opcional">
       <label class="composer-seletor composer-seletor--livre">…<input list="…">…</label>
       <label class="composer-seletor">…<select>…</select>…</label>
     </div>
   ========================================================================== */
.composer-contexto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
.composer-contexto .composer-seletor {
  border-radius: var(--radius-full);
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur-clear)) saturate(var(--glass-saturacao));
          backdrop-filter: blur(var(--glass-blur-clear)) saturate(var(--glass-saturacao));
  box-shadow: inset 0 0 0 1px var(--border-glass);
}
.composer-contexto-nota { font-size: var(--caption-size); color: var(--text-muted); margin-inline-start: var(--espaco-1); }

.composer-seletor input {
  appearance: none; -webkit-appearance: none;
  field-sizing: content;
  min-height: 36px; min-width: 8.5rem; max-width: 20rem; padding: 0 28px 0 var(--espaco-4);   /* cresce com o que a pessoa escreve (field-sizing), até 20rem */
  border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: var(--label-size); font-weight: 500; text-overflow: ellipsis;
  transition: background-color var(--motion-fast) var(--easing-standard);
}
.composer-seletor input::placeholder { color: var(--text-secondary); opacity: 1; }
.composer-seletor input:hover { background: var(--surface-2); }
.composer-seletor input:focus-visible { outline: 0; box-shadow: var(--glow-focus); }
/* a seta nativa do datalist fica invisível MAS clicável, por cima da nossa seta */
.composer-seletor input::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 28px; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.composer-contexto .composer-seletor select { padding-inline-start: var(--espaco-4); }
/* rótulo de grupo na lista aberta: sem isto herdava texto claro sobre o fundo claro da lista */
.composer-seletor optgroup { color: var(--tinta); background: var(--papel); font-weight: 600; }
@media (max-width: 720px) {
  .composer-seletor input { min-width: 0; width: 100%; max-width: none; }
  .composer-seletor--livre { flex: 1 1 100%; }
  .composer-contexto .composer-seletor:not(.composer-seletor--livre) { flex: 1 1 0; }
  .composer-contexto .composer-seletor select { max-width: none; width: 100%; }
  .composer-contexto-nota { display: none; }
}