/* ═══════════════════════════════════════════════════════════════════
   AVAMI-INCLUSAO — estilos do modulo compartilhado
   Profa. Dra. Lessandra Marcelly · "Do Pi a IA" · 1.0 · 2026-08-07

   Duas responsabilidades:
     A) desenhar os controles injetados por avami-inclusao.js;
     B) fornecer o tema de ALTO CONTRASTE (WCAG AAA) para todos os
        agentes de uma vez.

   Sobre (B): os agentes nao usam os mesmos nomes de variavel de cor.
   KAPA, LAMBDA, MI e SIGMA usam a familia --paper/--ink/--text; o BETA
   usa --panel/--ink/--line; o MATHETIC usa --paper/--cream/--border.
   Este arquivo redefine TODAS elas sob [data-contrast="alto"]. Definir
   uma variavel que um agente nao usa nao custa nada — e assim o alto
   contraste passa a existir nos sete sem tocar no CSS de nenhum.

   O seletor e [data-contrast="alto"], e NAO [data-theme="contrast"],
   por um motivo concreto: o MI ja tem tema de alto contraste proprio,
   feito para WCAG AAA, e ele vive justamente em
   [data-theme="contrast"]. Como este arquivo e carregado depois do CSS
   do MI, usar o mesmo seletor faria estas regras sobrescreverem o tema
   nativo dele — trocando um tema testado por uma copia. O atributo
   data-contrast so e escrito pelo modulo (avami-inclusao.js), entao
   estas regras valem apenas onde o modulo e quem comanda o contraste,
   e o MI segue com o tema dele intacto.

   Os valores vieram do tema de alto contraste do MI, que ja havia sido
   feito para WCAG AAA: fundo preto puro, texto branco puro, acento
   amarelo de alta visibilidade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── A) CONTROLES ──────────────────────────────────────────────── */
.avami-controles {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.avami-btn {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: .78;
  transition: opacity .15s ease, background-color .15s ease;
}
.avami-btn:hover { opacity: 1; }

/* Foco sempre visivel: navegacao por teclado nao pode ficar as cegas. */
.avami-btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}
.avami-btn[disabled] { opacity: .3; cursor: default; }
.avami-btn[aria-pressed="true"] { opacity: 1; background: rgba(127, 127, 127, .22); }

/* Microfone gravando: cor + pulso. O pulso respeita quem pediu menos
   movimento no sistema — ver @media no fim deste arquivo. */
.avami-btn.gravando, #avamiMic.gravando, .gravando {
  color: #C62828;
  border-color: #C62828;
  opacity: 1;
  animation: avami-pulso 1.1s ease-in-out infinite;
}
@keyframes avami-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0); }
}

.avami-lang {
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: 9px;
  overflow: hidden;
  margin-left: 2px;
}
.avami-lang .avami-btn {
  border: 0;
  border-radius: 0;
  min-width: 30px;
  height: 32px;
  font-size: .72rem;
  letter-spacing: .04em;
}
.avami-lang .avami-btn.on { background: rgba(127, 127, 127, .28); opacity: 1; }

/* Reserva: paginas sem a barra prevista ganham uma flutuante. */
.avami-barra-flutuante {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9998;
  padding: 5px 7px;
  border-radius: 11px;
  background: rgba(127, 127, 127, .14);
  backdrop-filter: blur(6px);
}

/* Avisos proprios (so aparecem quando o agente nao tem toast). */
.avami-avisos {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.avami-aviso {
  padding: 10px 16px;
  border-radius: 10px;
  background: #1B2430;
  color: #FFF;
  font-size: .88rem;
  max-width: 88vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.avami-aviso.erro { background: #B23A3A; }

/* ── B) ALTO CONTRASTE (WCAG AAA) ──────────────────────────────── */
:root[data-contrast="alto"],
[data-contrast="alto"] {
  /* familia KAPA / LAMBDA / MI / SIGMA */
  --ink: #000000; --ink-2: #0A0A0A; --ink-soft: #333333;
  --paper: #000000; --paper-2: #0A0A0A; --paper-3: #141414;
  --text: #FFFFFF; --text-muted: #E8E8E8;
  --edge: #FFFFFF;
  --teal: #FFD400; --teal-soft: #FFE566; --teal-deep: #FFD400;
  --jade: #FFD400; --gold: #FFD400; --violet: #FFD400; --coral: #FF8A80;
  --danger: #FF6B6B; --success: #66FF99; --info: #7DB8FF;
  --shadow: none; --shadow-lg: none;

  /* familia BETA */
  --panel: #000000; --panel-2: #0A0A0A;
  --line: #FFFFFF;
  --brand: #FFD400; --brand-2: #FFE566; --brand-soft: #141414;
  --accent: #FFD400; --curve: #FF8A80;
  --ok: #66FF99; --err: #FF6B6B;
  --grid: rgba(255, 255, 255, .14); --grid-strong: rgba(255, 255, 255, .26);

  /* familia MATHETIC */
  --cream: #000000; --border: #FFFFFF; --muted: #E8E8E8;
  --gold-light: #FFE566; --rust: #FF8A80;
  --module1: #FFD400; --module2: #FFD400; --module3: #FFD400;
  --module4: #FFD400; --module5: #FFD400;
}

/* Bordas e foco explicitos: no alto contraste, separacao por sombra
   ou por tom proximo desaparece — o limite precisa ser uma linha. */
[data-contrast="alto"] button,
[data-contrast="alto"] textarea,
[data-contrast="alto"] input,
[data-contrast="alto"] select {
  border: 1px solid #FFFFFF !important;
  background: #000000 !important;
  color: #FFFFFF !important;
}
[data-contrast="alto"] :focus-visible {
  outline: 3px solid #FFD400 !important;
  outline-offset: 2px !important;
}
[data-contrast="alto"] a { color: #FFE566 !important; text-decoration: underline; }
[data-contrast="alto"] ::placeholder { color: #C8C8C8 !important; opacity: 1; }
/* Imagem decorativa em fundo preto costuma virar mancha clara: sem
   sombra e sem filtro, mas com limite visivel. */
[data-contrast="alto"] img { border: 1px solid #FFFFFF; }

/* ── Quem pediu menos movimento no sistema, recebe menos movimento ── */
@media (prefers-reduced-motion: reduce) {
  .avami-btn { transition: none; }
  .avami-btn.gravando, #avamiMic.gravando, .gravando { animation: none; }
}

/* ── Telas estreitas: os controles nao podem empurrar o titulo ───── */
@media (max-width: 560px) {
  .avami-controles { gap: 2px; }
  .avami-btn { min-width: 30px; height: 30px; padding: 0 5px; font-size: .74rem; }
  .avami-lang .avami-btn { min-width: 26px; height: 28px; }
}