/* ════════════════════════════════════════════════════════════════════════
   Veriax Console — Home / "Centro di Controllo" · DIREZIONE E
   "Veriax come superficie di controllo di un sistema AI vivente."

   Evolve i token di home.css (NON li abbandona). Aggiunge un linguaggio
   "sistema vivente di frontiera", scoped a [data-dir="e"]:
   • Pannelli a VETRO stratificati con bordo-luce sottile (no cornici mono).
   • Accent IRIDESCENTE blu→ciano→viola SOLO su stati live (max 1–2 per vista).
   • Mesh a punti + griglia hairline + bloom blu-violaceo dove c'è segnale.
   • Grafo di nodi vivo, telemetria/waveform, command palette ⌘K.
   • Geist Mono come "voce macchina"; numeri tabulari ovunque.

   Token NUOVI (tutti dichiarati): --cyan, --violet, --irid(-soft/-text),
   --glass-bg, --glass-edge, --glow-irid, --node-line(-lit), --bloom.
   Restraint: il glow è SEGNALE, non ornamento.
   ════════════════════════════════════════════════════════════════════════ */
@import url("home.css");

[data-dir="e"] {
  /* iridescenza (in-famiglia: blu brand → ciano → viola, stessa L/C) */
  --cyan:        #5ad7ec;
  --cyan-soft:   rgba(90, 215, 236, 0.16);
  --violet:      #a78bfa;

  --irid:        linear-gradient(100deg, #4e7cff 0%, #5ad7ec 52%, #a78bfa 100%);
  --irid-soft:   linear-gradient(100deg, rgba(78,124,255,.20), rgba(90,215,236,.16) 52%, rgba(167,139,250,.18));
  --irid-text:   linear-gradient(100deg, #8fb0ff 0%, #7fe0f1 50%, #c0acff 100%);

  /* vetro stratificato */
  --glass-bg:    linear-gradient(180deg, rgba(26,29,46,.74), rgba(16,18,30,.82));
  --glass-bg-2:  linear-gradient(180deg, rgba(30,34,52,.62), rgba(18,20,34,.7));
  --glass-edge:  inset 0 0 0 1px rgba(140,165,255,.09), inset 0 1px 0 0 rgba(180,205,255,.13);
  --glass-line:  rgba(150,175,255,.12);

  --glow-irid:   0 0 0 1px rgba(90,215,236,.34), 0 16px 54px -14px rgba(78,124,255,.46);
  --glow-cyan:   0 0 22px -2px rgba(90,215,236,.55);

  /* grafo di nodi */
  --node-line:     rgba(120,150,230,.20);
  --node-line-lit: rgba(90,215,236,.92);
  --node-stroke:   rgba(150,175,255,.28);

  /* sfondo "ossidiana" + bloom dove c'è segnale */
  --bloom:       radial-gradient(680px 360px at 26% -6%, rgba(78,124,255,.16), transparent 66%),
                 radial-gradient(620px 420px at 92% 4%, rgba(167,139,250,.09), transparent 70%),
                 radial-gradient(520px 300px at 60% 0%, rgba(90,215,236,.06), transparent 72%);
}

/* leggero scurimento d'app per dare profondità "ossidiana" */
[data-dir="e"].app { background: #07070c; }
[data-dir="e"] .main { background-color: #07070c; }

/* ── Sfondo: bloom + mesh punti + hairline ──────────────────────────────── */
[data-dir="e"] .home-bg::before {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: .9;
}
[data-dir="e"] .home-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 104px,
    var(--bloom);
}

/* sweep/scanline discreta al load (motion-safe, una sola volta) */
.e-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  overflow: hidden;
}
.e-scan::before {
  content: ""; position: absolute; left: 0; right: 0; height: 38%;
  top: -40%;
  background: linear-gradient(180deg, transparent, rgba(90,215,236,.06) 60%, rgba(90,215,236,.12));
  border-bottom: 1px solid rgba(90,215,236,.30);
}
@media (prefers-reduced-motion: no-preference) {
  .e-scan::before { animation: eScan 1.5s cubic-bezier(.4,0,.2,1) .15s 1 both; }
}
@keyframes eScan { from { top: -40%; opacity: 1; } 85% { opacity: 1; } to { top: 120%; opacity: 0; } }

/* ── Glassmorphism per i pannelli ───────────────────────────────────────── */
[data-dir="e"] .panel {
  background: var(--glass-bg);
  border-color: transparent;
  box-shadow: var(--glass-edge), 0 18px 50px -28px rgba(0,0,0,.8);
  backdrop-filter: blur(12px) saturate(1.1);
}
[data-dir="e"] .panel-head { border-bottom-color: var(--glass-line); }
[data-dir="e"] .panel-head .ph-ico {
  background: var(--irid-soft);
  color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(140,165,255,.16);
}

/* eyebrow / titolo */
[data-dir="e"] .home-title { font-size: 30px; letter-spacing: -.02em; flex-wrap: wrap; }
[data-dir="e"] .home-title .ht-text { white-space: nowrap; }
[data-dir="e"] .dir-switch { white-space: nowrap; }
[data-dir="e"] .home-title .accent-irid {
  background: var(--irid-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* sys-pill diventa "vivente" iridescente (è UNO dei pochi elementi accesi) */
[data-dir="e"] .sys-pill {
  background: var(--irid-soft);
  border-color: rgba(90,215,236,.34);
  color: var(--cyan);
}

/* CTA: bordo-luce + riempimento accent (no gradiente sparato) */
[data-dir="e"] .btn.cta {
  background: rgba(78,124,255,.16);
  border: 1px solid rgba(120,150,255,.4);
  color: #cfe0ff;
  box-shadow: inset 0 0 0 1px rgba(150,175,255,.08);
}
[data-dir="e"] .btn.cta:hover { background: rgba(78,124,255,.26); border-color: var(--accent); color: #fff; }

/* tasto ⌘K nella topbar */
.e-cmdk {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 12px 0 13px; border-radius: 9px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-line);
  color: var(--text-muted); font-size: 12.5px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.e-cmdk:hover { border-color: rgba(90,215,236,.4); color: var(--text); }
.e-cmdk .kbd {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  background: var(--bg-app); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; line-height: 1.5;
}
[data-dir="e"] .dir-switch:hover { border-color: var(--cyan); }
[data-dir="e"] .dir-switch b { color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════════════
   HERO — banda "sistema vivente": grafo di nodi + colonna telemetria
   ════════════════════════════════════════════════════════════════════════ */
.e-hero { margin-bottom: 16px; }
.e-hero-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--glass-line);
}
.e-hero-head .hl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.e-hero-head .grow { flex: 1; }
.e-hero-body {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(248px, .85fr);
  gap: 18px; padding: 16px;
}
@media (max-width: 1180px) { .e-hero-body { grid-template-columns: 1fr; } }

/* ── Grafo di nodi ──────────────────────────────────────────────────────── */
.graph {
  position: relative; width: 100%;
  aspect-ratio: 640 / 392; max-height: 412px;
  border-radius: 12px; overflow: hidden;
  background:
    radial-gradient(380px 240px at 50% 52%, rgba(78,124,255,.10), transparent 70%),
    rgba(10,11,18,.55);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.graph svg.graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-edge   { stroke: var(--node-line); stroke-width: 1.2; fill: none; }
.graph-edge.lit { stroke: rgba(90,215,236,.4); }
.graph-pulse  { fill: none; stroke: var(--node-line-lit); stroke-width: 1.7;
                stroke-linecap: round; stroke-dasharray: 2.4 15; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .graph-pulse { animation: pulseFlow 1.5s linear infinite; }
}
@keyframes pulseFlow { to { stroke-dashoffset: -17.4; } }
.graph.dimmed .graph-edge:not(.lit) { stroke: rgba(120,150,230,.08); }

/* nodi = HTML posizionati sopra l'SVG (icone nitide + tooltip) */
.gnode {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; z-index: 2;
}
.gnode-dot {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--node-stroke);
  color: var(--text-muted);
  transition: box-shadow .18s, transform .18s, color .18s, background .18s;
}
.gnode-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  color: var(--text-faint); white-space: nowrap;
  max-width: 92px; overflow: hidden; text-overflow: ellipsis;
}
.gnode.kind-core   .gnode-lbl { color: var(--text); font-size: 11px; max-width: none; overflow: visible; }
.gnode.kind-agent  .gnode-lbl { color: var(--text-muted); }

/* core = il nodo "acceso" iridescente (respira) */
.gnode.kind-core .gnode-dot {
  background: radial-gradient(circle at 50% 35%, rgba(90,215,236,.22), rgba(78,124,255,.16));
  color: #eaf6ff;
  box-shadow: inset 0 0 0 1.5px rgba(120,210,255,.7), var(--glow-cyan);
}
@media (prefers-reduced-motion: no-preference) {
  .gnode.kind-core .gnode-dot { animation: coreBreath 3.4s ease-in-out infinite; }
}
@keyframes coreBreath {
  0%,100% { box-shadow: inset 0 0 0 1.5px rgba(120,210,255,.6), 0 0 18px -3px rgba(90,215,236,.45); }
  50%     { box-shadow: inset 0 0 0 1.5px rgba(120,210,255,.9), 0 0 30px 0 rgba(90,215,236,.7); }
}
/* un agente "in run" = leggera pulsazione accent (l'altro elemento vivo) */
.gnode.live .gnode-dot { color: var(--cyan); box-shadow: inset 0 0 0 1.5px rgba(90,215,236,.55); }
.gnode.live .gled {
  position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px 0 var(--cyan);
}
@media (prefers-reduced-motion: no-preference) { .gnode.live .gled { animation: livePulse 2s ease-out infinite; } }

/* hover olografico: evidenzia il nodo e attenua il resto (via .dimmed sul wrap) */
.gnode:hover .gnode-dot,
.gnode.hot .gnode-dot {
  color: var(--cyan);
  box-shadow: inset 0 0 0 1.5px rgba(90,215,236,.85), var(--glow-cyan);
  transform: translateY(-1px);
}
.graph.dimmed .gnode:not(.hot):not(:hover) { opacity: .42; }
.gnode-dot > svg { position: relative; }

.graph-legend {
  position: absolute; left: 12px; bottom: 10px; z-index: 3;
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; color: var(--text-faint);
}
.graph-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.graph-legend .lg i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

/* ── Colonna telemetria (destra dell'hero) ──────────────────────────────── */
.e-telecol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.e-readout {
  position: relative; padding: 11px 13px;
  border-radius: 10px; background: var(--glass-bg-2);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.e-readout .ro-top { display: flex; align-items: center; gap: 8px; }
.e-readout .ro-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.e-readout .ro-live { margin-left: auto; }
.e-readout .ro-val {
  font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong);
  line-height: 1.05; margin-top: 6px; display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.e-readout .ro-val .sm { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.e-readout .ro-spark { height: 26px; margin: 6px -4px -2px; }
.e-readout .ro-spark svg { width: 100%; height: 100%; display: block; }

/* waveform "il sistema respira" */
.e-wave-card {
  padding: 12px 13px 13px; border-radius: 10px;
  background: var(--glass-bg-2); box-shadow: inset 0 0 0 1px var(--glass-line);
}
.e-wave-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--text-faint);
  text-transform: uppercase;
}
.e-wave { display: flex; align-items: center; gap: 3px; height: 44px; }
.e-wave .bar {
  flex: 1; min-width: 0; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--accent));
  opacity: .9; align-self: center;
  transition: height .28s cubic-bezier(.3,.7,.3,1);
}

/* ════════════════════════════════════════════════════════════════════════
   KPI (glass) — iridescente solo sul tile "hero" (1 acceso)
   ════════════════════════════════════════════════════════════════════════ */
[data-dir="e"] .kpi {
  background: var(--glass-bg);
  border-color: transparent;
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(10px);
}
[data-dir="e"] .kpi:hover { box-shadow: var(--glass-edge), var(--glow-irid); transform: translateY(-2px); }
[data-dir="e"] .kpi-ico { background: var(--accent-soft); color: var(--accent); }
[data-dir="e"] .kpi.hero .kpi-ico { background: var(--irid-soft); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(140,165,255,.18); }
[data-dir="e"] .kpi.hero .kpi-value {
  background: var(--irid-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   Feed live (glass)
   ════════════════════════════════════════════════════════════════════════ */
[data-dir="e"] .feed-row.fresh::before { background: var(--cyan); }
[data-dir="e"] .tool-chip.run { color: var(--cyan); border-color: rgba(90,215,236,.4); }
[data-dir="e"] .st-run .d { background: var(--cyan); }
.e-feed-bus {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
}

/* sottosistemi: ring chip su vetro */
[data-dir="e"] .ring-chip { background: var(--glass-bg-2); border-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-line); }
[data-dir="e"] .qa { background: var(--glass-bg-2); border-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-line); }
[data-dir="e"] .qa:hover { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(90,215,236,.4); }
[data-dir="e"] .qa:hover .qa-ico { background: var(--irid-soft); color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════════════
   Command palette ⌘K
   ════════════════════════════════════════════════════════════════════════ */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,7,14,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 13vh;
  animation: cmdkFade .14s ease;
}
@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: min(640px, 92vw); max-height: 64vh; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #1b1e30, #111322);
  box-shadow: 0 0 0 1px rgba(140,165,255,.16), 0 40px 120px -30px rgba(0,0,0,.85),
              0 0 30px -6px rgba(90,215,236,.22);
  animation: cmdkPop .18s cubic-bezier(.2,.85,.25,1);
}
@keyframes cmdkPop { from { transform: translateY(-8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.cmdk-inwrap {
  display: flex; align-items: center; gap: 11px; padding: 15px 17px;
  border-bottom: 1px solid var(--glass-line);
}
.cmdk-inwrap > svg { color: var(--cyan); flex-shrink: 0; }
.cmdk-inwrap input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-size: 16px; color: var(--text-strong);
}
.cmdk-inwrap input::placeholder { color: var(--text-faint); }
.cmdk-inwrap .esc {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px;
}
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-group {
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
  padding: 9px 11px 5px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 11px; border-radius: 10px; cursor: pointer;
}
.cmdk-item .ci-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--bg-elev); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.cmdk-item.active { background: var(--irid-soft); box-shadow: inset 0 0 0 1px rgba(90,215,236,.34); }
.cmdk-item.active .ci-ico { background: var(--bg-card); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(90,215,236,.4); }
.cmdk-item .ci-mid { min-width: 0; flex: 1; }
.cmdk-item .ci-name { font-size: 13.5px; color: var(--text); font-weight: 520; }
.cmdk-item .ci-sub  { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.cmdk-item .ci-kind {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.cmdk-empty { padding: 30px; text-align: center; color: var(--text-faint); font-size: 13px; }
.cmdk-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 15px; border-top: 1px solid var(--glass-line);
  font-family: var(--mono); font-size: 10.5px; color: var(--text-faint);
}
.cmdk-foot .k { color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }

/* ── Annotazione direzione (riusa .note-bar di home.css, accenti E) ──────── */
[data-dir="e"] .note-bar { background: var(--glass-bg-2); border-color: var(--glass-line); }
[data-dir="e"] .note-bar .nb-tag { color: var(--cyan); border-color: rgba(90,215,236,.4); }

/* toast minimale (azione palette/CTA) */
.e-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 250; display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(24,27,44,.96), rgba(16,18,30,.96));
  box-shadow: 0 0 0 1px rgba(90,215,236,.3), 0 20px 50px -16px rgba(0,0,0,.7);
  color: var(--text); font-size: 13px; backdrop-filter: blur(10px);
  animation: toastIn .22s cubic-bezier(.2,.85,.25,1);
}
.e-toast svg { color: var(--cyan); }
@keyframes toastIn { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .e-scan::before { animation: none; display: none; }
  .gnode.kind-core .gnode-dot { animation: none; }
  .graph-pulse { animation: none; }
  .gnode.live .gled { animation: none; }
}