/*
 * Sistema di design JARVIS — token e componenti condivisi da TUTTE le pagine della PWA.
 * Fonte: `cowork idea/coworkanatomiaecloni.md` §5.2 (il principio) e §5.3 (i token), più
 * `CLAUDE.md` §Estetica. Questo è "il solo file di variabili CSS condiviso" chiesto dal brief:
 * le pagine linkano questo e non ridefiniscono un token da sole.
 *
 * §5.2, la regola che tiene insieme tutto:
 *   BRUTALISTA sulle superfici della MACCHINA (log, output, id, comandi): raggio 0, mono,
 *   densità alta, nero, nessuna ombra.
 *   RAFFINATO sulle superfici dell'UMANO (controlli, navigazione): raggio 6px, sans geometrica,
 *   hairline 1px a basso contrasto, transizioni 140ms.
 *
 * Regole non negoziabili applicate qui:
 *  - l'accento cyan (--accent) segnala SOLO stato agente, mai un bottone. Qui compare unicamente
 *    su `.agent-dot`, il puntino di "un agente ti sta aspettando", accoppiato SEMPRE a
 *    un'etichetta di testo (accessibilità §5.3: lo stato non è dato dal solo colore);
 *  - una sola animazione continua in tutta l'app: `agent-pulse` su `.agent-dot`. Tutto il resto
 *    è una transizione a 140ms;
 *  - nessuna ombra, nessun gradiente, nessun glassmorphism: la profondità è fondale + bordo 1px;
 *  - dark-only per la v1 (§5.3 lo permette esplicitamente).
 *
 * DEVIAZIONE DICHIARATA (FASE6.md §1.12, "Font di sistema invece di Inter/Geist"): il brief
 * chiede Inter o Geist. Senza passo di build, caricarle vorrebbe dire o una dipendenza esterna a
 * ogni apertura (una chiamata in più dal telefono, e un host esterno da cui la pagina dipende) o
 * i file dei caratteri nel repo. Per ora si usa lo stack di sistema — nessuna chiamata, nessun
 * peso. La voce è aperta, non decisa in silenzio.
 */

:root {
  /* Fondali — OLED-first (§5.3) */
  --bg-void: #000000;      /* canvas app, superfici macchina */
  --bg-surface: #0a0a0b;   /* pannelli */
  --bg-raised: #121214;    /* card, input */
  --bg-hover: #1a1a1d;

  /* Bordi — hairline, sempre 1px */
  --border: #1f1f23;
  --border-strong: #2e2e34;

  /* Testo */
  --text-primary: #f5f5f7;
  --text-emphasis: #ffffff;
  --text-secondary: #8a8a94;  /* ≥4.5:1 su nero */
  --text-muted: #55555e;      /* solo elementi non essenziali (sotto 4.5:1) */

  /* Accento — UNO SOLO, freddo. Stato agente, mai decorazione */
  --accent: #22d3ee;      /* agente: ti sta aspettando */
  --accent-dim: #0e7490;  /* agente idle */

  /* Semantici — usati con parsimonia sulle azioni, NON sono l'accento */
  --ok: #3ecf8e;
  --warn: #f5a524;
  --danger: #f4212e;

  /* Raggi — la regola di §5.2 */
  --radius-machine: 0px;
  --radius-human: 6px;

  /* Motion — mai molleggiato */
  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Caratteri — deviazione dichiarata sopra: stack di sistema, non Inter/Geist */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;              /* §5.3: base 13px */
  letter-spacing: -0.01em;      /* tracking leggermente stretto */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Una colonna, pensata per il telefono prima del desktop. */
.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* Barra di navigazione — superficie umana. */
header.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
header.bar h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: 0; }
header.bar .count { color: var(--text-secondary); font-size: 12px; }

a.back {
  display: inline-block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 16px;
  padding: 8px 0;
  transition: color var(--dur) var(--ease);
}
a.back:hover { color: var(--text-primary); }

/* Riga di attesa — card, superficie umana (raggio 6px): è un controllo da toccare. */
a.run {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-human);
  padding: 16px;
  margin-bottom: 12px;
  min-height: 64px;             /* bersaglio ampio da toccare */
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
a.run:hover { border-color: var(--border-strong); background: var(--bg-hover); }

.run-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

/* Stato agente: puntino cyan + etichetta categoria. L'unico uso dell'accento in queste pagine,
   e mai da solo (accessibilità §5.3). */
.agent-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: agent-pulse 2s var(--ease) infinite;  /* l'UNICA animazione continua dell'app */
}
@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-dot { animation: none; }  /* l'etichetta resta: lo stato non era mai dato dal solo colore */
}

/* FASE6.md §1.16.13(d): concluso, fallito, fermato sono grigi — si distinguono per la PAROLA
   (categoria/stato), mai per un colore proprio (niente verde di successo, niente rosso di
   errore: non sono stati dell'agente). Nessuna animazione: il pulse è riservato a chi lavora. */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
  flex: none;
}

.category { font-weight: 600; font-size: 13px; }

/* id / riferimento breve — superficie MACCHINA: mono, raggio 0. */
.ref {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius-machine);
  padding: 1px 6px;
}

.run-meta { display: flex; gap: 16px; color: var(--text-secondary); font-size: 12px; }
.run-meta .expiry.soon { color: var(--warn); }

/* Stato vuoto della sezione attese (FASE6.md §1.16.13 b) — una riga sola, non una schermata di
   benvenuto: il "curato" della prima ora (punto centrato, due righe di spiegazione, 56px di
   padding) occupava il 40% dello schermo. Il caso normale non deve costare più di un annuncio
   qualsiasi — nessun puntino: non c'è niente da annunciare. */
.empty-attention {
  color: var(--text-secondary);
  font-size: 12px;
  padding: 6px 0 2px;
  margin: 0;
}

/* Dettaglio del run. */
.detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }

/* Messaggi del SISTEMA (motivo di un rifiuto, motivo di chiusura) — superficie MACCHINA: sono
   output grezzo (una regola citata, un comando), mono e raggio 0.
   FASE6.md §1.16.13(i)/correzione 2: il padding qui NON era la causa dello spazio vuoto prima
   dell'etichetta — quella era whitespace del template reso visibile da `pre-wrap` (vedi il
   commento in testa a `renderRun`, in render.ts). Rimosso il vero difetto, il padding torna al
   valore originale, uniforme. */
.question {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius-machine);
  padding: 16px;
  margin-bottom: 8px;
}
.question .label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* FASE6.md §1.16.13(g): ciò che scrive o legge una PERSONA — la richiesta di Lorenzo, la risposta
   di JARVIS — va nel carattere umano, superficie raffinata (raggio 6px), non da macchina. I
   blocchi di codice al suo interno (.md-block/.md-inline) restano mono: sono l'eccezione dentro
   il testo, non il testo. Stesso padding di `.question`, per lo stesso motivo (correzione 2:
   la causa dello spazio vuoto non era qui). */
.answer-text {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-human);
  padding: 16px;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.answer-text .label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* FASE6.md §1.16.13(h): il sottoinsieme minimo di markdown interpretato — blocco recintato e
   apice in linea, nient'altro. Superficie MACCHINA per entrambi (sono codice, non prosa), a
   differenza del testo che li circonda. Scorrimento orizzontale, mai andare a capo: una riga di
   codice lunga resta una riga. */
.md-block {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius-machine);
  padding: 12px;
  margin: 8px 0;
}
.md-block code { font: inherit; }
.md-inline {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius-machine);
  padding: 1px 5px;
}

.field-gap { margin-bottom: 20px; }

/* Azioni — superfici umane, raggio 6px, bersagli grandi. MAI cyan (non sono stato agente). */
.actions { display: grid; gap: 10px; margin-top: 24px; }
form.action { margin: 0; }
button.act {
  width: 100%;
  min-height: 52px;            /* bersaglio grande da toccare */
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-human);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
button.act:hover { background: var(--bg-hover); }
/* Colori SEMANTICI (non l'accento): solo sul bordo/testo, mai riempimento acceso. */
button.approve { border-color: color-mix(in srgb, var(--ok) 55%, var(--border-strong)); }
button.approve:hover { border-color: var(--ok); }
button.deny { color: color-mix(in srgb, var(--danger) 80%, var(--text-primary)); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
button.deny:hover { border-color: var(--danger); }

textarea.answer {
  width: 100%;
  min-height: 96px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-human);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  padding: 12px;
  resize: vertical;
  transition: border-color var(--dur) var(--ease);
}
textarea.answer:focus { outline: none; border-color: var(--border-strong); }

.logout { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); }
.logout button {
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 0;
}
.logout button:hover { color: var(--text-secondary); }

/* Notifiche (passo A3, FASE6.md §1.4) — superficie UMANA: è un controllo, quindi raggio 6px e
   bersaglio grande. MAI cyan: attivare le notifiche non è uno stato dell'agente, è un'azione. */
.push {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
button.push-button {
  width: 100%;
  min-height: 48px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-human);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
button.push-button:hover:not(:disabled) { background: var(--bg-hover); }
button.push-button:disabled { color: var(--text-secondary); border-color: var(--border); cursor: default; }
.push-status {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  min-height: 1em;
}
.push-status.ok { color: color-mix(in srgb, var(--ok) 70%, var(--text-secondary)); }
.push-status.warn { color: var(--warn); }

/*
 * Passo B (FASE6.md §1.16): la casella di lancio e gli ultimi compiti.
 * Mobile-first: la casella di lancio sta in BASSO (ordine 5, sticky sopra il pollice),
 * gli elenchi scorrono sopra di essa. Su desktop (min-width: 640px) torna in cima (ordine 0).
 * Tutto in puro CSS, zero JavaScript.
 */
.home-layout {
  display: flex;
  flex-direction: column;
}

/* FASE6.md §1.16.13(a): la barra in cima — nome, stato dell'agente (l'unico cyan della pagina,
   presente SOLO quando c'è davvero qualcosa in corso o in attesa), «Esci» all'estremità opposta.
   Nessun `order` esplicito: resta il primo elemento del layout per posizione nel sorgente, prima
   di `.attention-section` (ordine 1) — e prima di `.launch-box` anche su desktop, dove torna a
   condividere l'ordine 0 ma segue la barra nel markup. */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.topbar-name { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  flex: 1;
}
.topbar-status-label { color: var(--text-secondary); }
.topbar-logout { margin-left: auto; }
.topbar-logout button {
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.topbar-logout button:hover { color: var(--text-secondary); }

/* FASE6.md §1.16.13(a): lo stato delle notifiche non è un annuncio, è una condizione — una riga
   minima sotto la barra, non più una sezione a sé con un titolo. Stessi id (`push-box`,
   `push-button`, `push-status`) di cui `push.js` già si serve: qui si sposta e si restringe solo
   il contenitore, lo script non cambia. */
.notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.notify-row button.push-button {
  width: auto;
  min-height: 32px;
  font-size: 12px;
  padding: 0 12px;
}
.notify-row .push-status {
  margin: 0;
  text-align: right;
}

.attention-section {
  order: 1;
  margin-bottom: 24px;
}

.recent-section {
  order: 2;
  margin-bottom: 24px;
}

.recent-section .bar h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0;
}

/* FASE6.md §1.16.13(c): "Concluso #1sfn" non diceva cosa era stato chiesto — il difetto peggiore.
   Una riga sola con ellissi, non due: la richiesta serve a riconoscere il compito a colpo
   d'occhio, non a leggerlo per intero (quello è il dettaglio). */
.run-prompt {
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-recent {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Casella di lancio — superficie umana: raggio 6px, nessun cyan */
.launch-box {
  order: 5;
  position: sticky;
  bottom: 0;
  background: var(--bg-void);
  border-top: 1px solid var(--border);
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  margin-top: 16px;
  z-index: 10;
}

.launch-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.launch-input {
  width: 100%;
  min-height: 80px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-human);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  padding: 12px;
  resize: vertical;
  transition: border-color var(--dur) var(--ease);
  margin-bottom: 10px;
  display: block;
}

.launch-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.launch-button {
  width: 100%;
  min-height: 48px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-human);
  color: var(--text-emphasis);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.launch-button:hover {
  background: var(--bg-hover);
  border-color: var(--text-secondary);
}

/* Su schermo largo: casella in cima, dove l'occhio la cerca */
@media (min-width: 640px) {
  .launch-box {
    order: 0;
    position: static;
    border-top: none;
    border-bottom: 1px solid var(--border);
    padding-top: 0;
    padding-bottom: 24px;
    margin-top: 0;
    margin-bottom: 24px;
  }
}

/* Dettaglio run: meta box, esito, motivo chiusura, dedup, running notice */
.run-meta-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-machine);
  padding: 12px 16px;
}
/* FASE6.md §1.16.13(k): "non misurabile — modelli gratuiti" andava a capo dentro una colonna di
   130px. Una riga sola, in fondo al riquadro: il costo copre l'intera larghezza della griglia
   invece di condividerla con Iniziato/Finito. */
.meta-item.cost { grid-column: 1 / -1; }

.meta-item .label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meta-item {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

.dedup-notice {
  background: var(--bg-raised);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: var(--radius-human);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.running-notice {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-machine);
}

.running-notice p {
  margin: 0 0 6px;
}

.running-notice .sub {
  color: var(--text-muted);
  font-size: 12px;
}