/* posta.css — SOLO ciò che Tailwind non esprime con utility di classe:
 * la build vendorizzata (/vendor/tailwind.css) copre il resto. Niente CDN,
 * nessuna variante dark (la piattaforma Hub è solo light). */

/* Le icone sono inserite come markup <svg> grezzo via x-html (static/js/icons.js):
 * questa regola le fa riempire il contenitore su cui si mettono le utility
 * di dimensione (es. class="svg-fit w-4 h-4"), un selettore discendente non
 * esprimibile con una classe Tailwind stock. */
.svg-fit > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Scrollbar sottile e coerente con la palette neutra dell'Hub (solo webkit;
 * su Firefox resta lo scrollbar di sistema, degrado accettabile). */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 9999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Canvas Automazioni (grafo di blocchi con diramazione) ──────────────
 * Sfondo a puntini + linee connettore animate, stesso principio visivo del
 * canvas "Automazione" di ekomlab-hub/messages-app.html (bg-grid/
 * connection-line) ma qui i connettori si calcolano da next/si_next/
 * no_next del grafo, non dalla sola posizione nell'array. ⚠️ Il
 * trascinamento è mousedown/mousemove/mouseup (non touch): su schermi
 * touch il canvas resta visibile/zoomabile ma il riposizionamento libero
 * dei blocchi richiede desktop — stesso limite già noto per il canvas
 * dell'Hub. */
.automz-grid {
  background-size: 22px 22px;
  background-image: radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px);
}
.automz-connline {
  animation: automz-dash 25s linear infinite;
}
@keyframes automz-dash {
  to { stroke-dashoffset: -500; }
}

/* ── Editor WYSIWYG (Quill.js, sostituisce il textarea Markdown) ─────────
 * Ridisegnato nella palette Hub (bordo arancio in focus come ogni altro
 * campo del form, angoli arrotondati coerenti con gli input Tailwind). Il
 * contenitore .posta-quill è quello passato a EditorHtml.monta(); Quill vi
 * inietta da sé la sua toolbar (.ql-toolbar) e l'area editabile
 * (.ql-container/.ql-editor) — qui si adattano solo dimensioni e cornice. */
.posta-quill .ql-toolbar {
  border-color: #cbd5e1;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  background: #f8fafc;
}
.posta-quill .ql-container {
  border-color: #cbd5e1;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
}
.posta-quill .ql-editor {
  min-height: 160px;
  max-height: 360px;
  overflow-y: auto;
}
.posta-quill.posta-quill--sm .ql-editor {
  min-height: 110px;
  max-height: 240px;
}
.posta-quill:focus-within .ql-toolbar,
.posta-quill:focus-within .ql-container {
  border-color: #ea580c;
  box-shadow: 0 0 0 1px #ea580c;
}