/* Flua — small custom layer on top of the compiled Tailwind build (static/css/tailwind.css). */
[x-cloak] { display: none !important; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }

/* Task content (sanitised HTML: h2 h3 p ul ol li strong em blockquote br) */
.task-content { color: #1e293b; line-height: 1.7; font-size: 0.95rem; }
.task-content h2 { margin: 1.5rem 0 0.5rem; font-size: 1.25rem; font-weight: 700; }
.task-content h3 { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; font-weight: 600; }
.task-content p { margin: 0.75rem 0; }
.task-content ul { margin: 0.75rem 0; padding-left: 1.25rem; list-style: disc; }
.task-content ol { margin: 0.75rem 0; padding-left: 1.25rem; list-style: decimal; }
.task-content li { margin: 0.25rem 0; }
.task-content blockquote {
  margin: 1rem 0;
  border-left: 4px solid #0d9488;
  background-color: #f0fdfa;
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 1rem;
  color: #334155;
  font-style: italic;
}

/* Official "A Pena em Fluxo" brand utilities (media/logo/MANUAL_DA_MARCA.md, docs/VISUAL_EVOLUTION.md). */
.flua-gradient-bg { background: linear-gradient(135deg, #0d9488 0%, #0f766e 55%, #4f46e5 100%); }
.flua-gradient-text {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flua-surface-mist { background: linear-gradient(180deg, #f0fdfa 0%, rgba(238, 242, 255, 0.45) 45%, #f8fafc 100%); }

/* Modern UI (agent/Evolution_Modern_UI_Animations.md): entry animation for the expanded textarea panel, whose
   position switches between inline and fixed (it is not shown/hidden, so x-transition cannot animate it). */
@keyframes flua-pop-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.flua-pop-in { animation: flua-pop-in 300ms ease-out; }

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Busy panels shown by HTMX while a long AI call runs (hx-indicator on the panel id). */
.flua-busy { visibility: hidden; opacity: 0; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
.flua-busy.htmx-request { visibility: visible; opacity: 1; transition: opacity 200ms ease-out; }