/* =========================================================
   IL PANNELLO "CHIEDI AL TUO MODELLO"
   =========================================================
   ⬇️ NUOVO (17/08/2026). Vedi js/modules/chiedi-llm-pannello.js.

   Ricalca il pannello 👀 (css/scopri.css) invece di inventarsi una forma
   nuova: sono due modi di rispondere alla stessa domanda — "cosa c'è di
   buono qui" — e chi ha imparato uno non deve imparare l'altro. Cambia
   che qui i passi sono numerati, perché in mezzo si esce dal programma e
   bisogna sapere a che punto si è.
   ========================================================= */

.cl-velo{
  position:fixed; inset:0; z-index:1200;
  background:rgba(17,21,28,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.cl-finestra{
  background:var(--paper); width:100%; max-width:560px;
  max-height:88vh; max-height:88dvh;
  overflow-y:auto; overscroll-behavior:contain;
  border-radius:12px 12px 0 0; padding:14px 14px 20px;
}
.cl-testa{ display:flex; align-items:center; justify-content:space-between; }
.cl-testa h3{ font-family:'Fraunces',serif; font-size:16px; margin:0; }
.cl-chiudi{ border:none; background:none; font-size:17px; cursor:pointer; padding:6px; }
.cl-intro{ font-size:12px; color:var(--muted); line-height:1.5; margin:6px 0 4px; }

/* I passi numerati: in mezzo si esce dal programma, e senza numeri non
   si capisce se si è prima o dopo il giro fuori. */
.cl-passo{
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  margin:16px 2px 5px; display:flex; justify-content:space-between; gap:8px;
}
.cl-passo span{ text-transform:none; letter-spacing:normal; }

.cl-finestra input[type=text], .cl-finestra textarea{
  width:100%; box-sizing:border-box; min-height:38px;
  padding:7px 10px; font-size:13px; font-family:inherit;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
}
.cl-finestra textarea{ resize:vertical; line-height:1.4; }
.cl-comandi{ display:flex; gap:6px; margin-top:8px; }
.cl-comandi button{
  flex:1; min-height:38px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:6px;
}
.cl-comandi button:hover{ border-color:var(--route); color:var(--route); }
.cl-primario{
  width:100%; min-height:40px; margin-top:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  color:var(--white); background:var(--route);
  border:1px solid var(--route); border-radius:6px;
}
.cl-primario:disabled{ opacity:.45; cursor:default; }
.cl-avviso{ font-size:12px; color:var(--muted); margin-top:8px; line-height:1.45; }

.cl-riga{
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:13px; cursor:pointer;
}
.cl-riga input{ width:17px; height:17px; flex:none; margin:2px 0 0; accent-color:var(--route); }
.cl-testo{ flex:1; min-width:0; }
.cl-nome{ display:block; }
.cl-sub{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
.cl-desc{ display:block; font-size:12px; color:var(--ink); margin-top:4px; line-height:1.4; }
/* Chi non si trova resta a schermo — il nome è comunque un'informazione,
   si cerca a mano — ma smorzato e non spuntabile: senza posizione
   finirebbe sulla mappa dove non è. */
.cl-riga.spento{ opacity:.55; cursor:default; }
.cl-ok, .cl-no, .cl-attesa{
  flex:none; font-family:'JetBrains Mono',monospace; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.04em; margin-top:2px;
}
.cl-ok{ color:var(--route); }
.cl-no{ color:var(--danger); }
.cl-attesa{ color:var(--muted); }
.cl-nota{ font-size:10px; color:var(--muted); margin-top:14px; text-align:center; line-height:1.4; }