/* alvus-notas.css — Bloco de notas / caça-bugs (botão flutuante + modal).
 *
 * Vive em TODA tela do app, inclusive nas que não carregam design-tokens.css
 * (admin, vocabulário): por isso todo token traz fallback literal. Fora dessas
 * duas exceções, a fonte da verdade continua sendo design-tokens.css.
 * Namespace .anb-* (alvus nota bug) para não colidir com .mxp-* nem .toolbar-*.
 */

/* ── Botão flutuante ──────────────────────────────────────────────────────── */
.anb-fab {
  position: fixed;
  right: var(--space-4, 16px);
  bottom: var(--space-4, 16px);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-default, #2a3d50);
  border-radius: var(--radius-full, 999px);
  background: var(--bg-panel-elevated, #142230);
  color: var(--text-tertiary, #6d8a9e);
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-size: var(--fs-11, 11px);
  font-weight: var(--fw-medium, 500);
  letter-spacing: var(--tracking-caps-wide, .06em);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .35));
  transition: color var(--t-fast, .12s cubic-bezier(.16, 1, .3, 1)),
              border-color var(--t-fast, .12s cubic-bezier(.16, 1, .3, 1)),
              box-shadow var(--t-fast, .12s cubic-bezier(.16, 1, .3, 1)),
              transform var(--t-fast, .12s cubic-bezier(.16, 1, .3, 1));
}
.anb-fab:hover,
.anb-fab:focus-visible {
  outline: none;
  color: var(--accent, #00e5ff);
  border-color: var(--accent, #00e5ff);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(0, 229, 255, .15));
}
.anb-fab:active { transform: translateY(.5px); }
.anb-fab svg { flex: 0 0 auto; }
/* Em tela estreita o rótulo sai; sobra só o ícone. */
@media (max-width: 720px) {
  .anb-fab { padding: 0; width: 34px; justify-content: center; }
  .anb-fab-label { display: none; }
}

/* ── Overlay + modal (próprios: .mxp-* não existe em metade das telas) ────── */
.anb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  background: rgba(4, 10, 15, .72);
  opacity: 0;
  transition: opacity var(--t-base, .2s cubic-bezier(.16, 1, .3, 1));
}
.anb-overlay.show { opacity: 1; }

.anb-modal {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel, #0f1923);
  border: 1px solid var(--border-strong, #3a5064);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, .5));
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  transform: translateY(6px);
  transition: transform var(--t-base, .2s cubic-bezier(.16, 1, .3, 1));
}
.anb-overlay.show .anb-modal { transform: none; }

.anb-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-subtle, #1e2d3d);
}
.anb-head h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-12, 12px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide, .06em);
  color: var(--accent, #00e5ff);
}
.anb-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-muted, #4a6478);
  font-size: var(--fs-16, 16px);
  line-height: 1;
  cursor: pointer;
}
.anb-close:hover { color: var(--text-primary, #e8f4f8); }

.anb-body {
  padding: var(--space-4, 16px);
  overflow: auto;
}

/* Contexto capturado automaticamente — o usuário não digita nada disso. */
.anb-ctx {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px) var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}
.anb-chip {
  padding: 3px 8px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-input, #1a2735);
  border: 1px solid var(--border-subtle, #1e2d3d);
  color: var(--text-secondary, #9ab3c4);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--fs-10, 10px);
}
.anb-chip b { color: var(--text-tertiary, #6d8a9e); font-weight: var(--fw-medium, 500); }

.anb-label {
  display: block;
  margin-bottom: var(--space-2, 8px);
  color: var(--text-tertiary, #6d8a9e);
  font-size: var(--fs-10, 10px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide, .06em);
}

.anb-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--bg-input, #1a2735);
  border: 1px solid var(--border-default, #2a3d50);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #e8f4f8);
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-size: var(--fs-12, 12px);
  line-height: 1.5;
}
.anb-textarea:focus {
  outline: none;
  border-color: var(--accent, #00e5ff);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(0, 229, 255, .15));
}

.anb-hint {
  margin-top: var(--space-2, 8px);
  color: var(--text-muted, #4a6478);
  font-size: var(--fs-10, 10px);
  line-height: 1.5;
}
.anb-erro {
  margin-top: var(--space-2, 8px);
  color: var(--danger, #f87171);
  font-size: var(--fs-11, 11px);
  line-height: 1.5;
}

/* Gravidade — segmented control */
.anb-grav { display: flex; gap: 0; margin-top: var(--space-3, 12px); }
.anb-grav input { position: absolute; opacity: 0; pointer-events: none; }
.anb-grav label {
  flex: 1 1 0;
  padding: 6px 0;
  text-align: center;
  border: 1px solid var(--border-default, #2a3d50);
  background: var(--bg-input, #1a2735);
  color: var(--text-tertiary, #6d8a9e);
  font-size: var(--fs-11, 11px);
  cursor: pointer;
  transition: all var(--t-fast, .12s cubic-bezier(.16, 1, .3, 1));
}
.anb-grav label:first-of-type { border-radius: var(--radius-md, 6px) 0 0 var(--radius-md, 6px); }
.anb-grav label:last-of-type  { border-radius: 0 var(--radius-md, 6px) var(--radius-md, 6px) 0; }
.anb-grav label + label { border-left: 0; }
.anb-grav input:checked + label {
  background: var(--accent-glow, rgba(0, 229, 255, .15));
  border-color: var(--accent, #00e5ff);
  color: var(--accent, #00e5ff);
}
.anb-grav input:focus-visible + label { box-shadow: 0 0 0 3px var(--accent-glow, rgba(0, 229, 255, .15)); }

.anb-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-top: 1px solid var(--border-subtle, #1e2d3d);
}
.anb-btn {
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--border-default, #2a3d50);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-input, #1a2735);
  color: var(--text-secondary, #9ab3c4);
  font-family: inherit;
  font-size: var(--fs-11, 11px);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: all var(--t-fast, .12s cubic-bezier(.16, 1, .3, 1));
}
.anb-btn:hover { border-color: var(--border-strong, #3a5064); color: var(--text-primary, #e8f4f8); }
.anb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(0, 229, 255, .15));
}
.anb-btn--accent {
  background: var(--accent, #00e5ff);
  border-color: var(--accent, #00e5ff);
  color: var(--bg-app, #0a1218);
  font-weight: var(--fw-semibold, 600);
}
.anb-btn--accent:hover { background: var(--accent-hover, #22ebff); color: var(--bg-app, #0a1218); }
.anb-btn[disabled] { opacity: .5; cursor: default; }

/* Toast local — nem toda tela carrega AlvusApi.toast. */
.anb-toast {
  position: fixed;
  right: var(--space-4, 16px);
  bottom: 60px;
  z-index: 9200;
  padding: 8px 14px;
  border: 1px solid var(--success, #34d399);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-panel-elevated, #142230);
  color: var(--text-primary, #e8f4f8);
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-size: var(--fs-11, 11px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .35));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-base, .2s), transform var(--t-base, .2s);
}
.anb-toast.show { opacity: 1; transform: none; }
.anb-toast--erro { border-color: var(--danger, #f87171); }

@media (prefers-reduced-motion: reduce) {
  .anb-fab, .anb-overlay, .anb-modal, .anb-toast, .anb-grav label, .anb-btn { transition: none; }
}