/* ==========================================================================
   Impostazioni → Accesso e sessioni (js/settings.js)
   Un dispositivo per riga: icona, nome («iPad · Safari»), «Questo dispositivo» /
   «Online adesso», IP in parte e date; «Esci» a destra. Sotto: esci dagli altri, ovunque.
   ========================================================================== */
.sess-list { list-style: none; margin: 4px 0 0; padding: 0; }
.sess-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.sess-row:last-child { border-bottom: 0; }
.sess-ic {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: var(--fill-2); color: var(--ink-2);
}
.sess-ic svg { width: 21px; height: 21px; }
.sess-row.current .sess-ic { background: var(--solid); color: var(--on-solid); }
.sess-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sess-main b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-main small { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.sess-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sess-tags:empty { display: none; }
.sess-tag { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--fill-2); color: var(--ink-2); }
.sess-tag.on { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.sess-tag.on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sess-row .btn { flex: none; }
.sess-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.sess-foot { margin: 10px 0 4px; font-size: 12.5px; }
.sess-err { margin-bottom: 8px; }
.sess-loading { display: grid; gap: 8px; margin: 6px 0 2px; }
.sess-loading i { display: block; height: 46px; border-radius: 12px; background: var(--fill); animation: sessPulse 1.2s ease-in-out infinite alternate; }
.sess-loading i + i { opacity: 0.6; }
@keyframes sessPulse { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sess-loading i { animation: none; } }
@media (max-width: 420px) { .sess-actions .btn { flex: 1 1 100%; } }

/* ==========================================================================
   Finestra delle impostazioni: sezioni a schede (come le Impostazioni dell'iPhone)
   Titolo e «Fine» fermi in alto mentre si scorre; ogni sezione è una scheda con gli stessi
   margini (16 px ai lati, righe da almeno 52 px, linee sottili tra le righe, niente linea
   sotto l'ultima); titolo e spiegazione della sezione dentro la scheda, in alto.
   ========================================================================== */
.nb-modal.set-modal { width: min(560px, 100%); padding: 0 18px 18px; }
.set-modal .set-head {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -18px 2px; padding: 16px 18px 12px;
  background: var(--raised);
  box-shadow: 0 0.5px 0 var(--stroke);
}
.set-modal .set-head h3 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }
.set-modal .set-sec {
  margin: 12px 0 0; padding: 2px 16px;
  border: 0; border-radius: 18px;
  background: var(--fill);
  box-shadow: inset 0 0 0 0.5px var(--card-edge, var(--stroke));
}
.set-modal .set-sec > h4 { margin: 14px 0 4px; font-size: 15.5px; font-weight: 650; }
.set-modal .set-sec > .set-note { margin: 0 0 8px; font-size: 13px; }
.set-modal .set-sec > .set-note:last-child { margin-bottom: 14px; }
.set-modal .set-row { min-height: 52px; padding: 10px 0; gap: 12px; border-bottom: 0.5px solid var(--stroke); }
.set-modal .set-sec > .set-row:last-child, .set-modal .set-sec > .set-row:not(:has(~ .set-row)) { border-bottom: 0; }
.set-modal .set-row > span:first-child { gap: 2px; }
.set-modal .set-row small { line-height: 1.35; }
.set-modal .set-row .btn, .set-modal .set-row .toggle { flex: none; }
/* due interruttori (Sfoca, Nascondi): insieme a destra; sul telefono vanno sotto, allineati a destra */
.set-modal .set-two { flex-wrap: wrap; }
.set-modal .set-two > span:first-child { flex: 1 1 140px; }
.set-modal .set-toggles { display: flex; gap: 16px; margin-left: auto; }
/* chip (Non disturbare), orari e giorni */
.set-modal .set-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.set-modal .set-sched { padding: 2px 0 12px; }
.set-modal .set-times { margin: 4px 0 10px; }
.set-modal .set-days { display: flex; flex-wrap: wrap; gap: 6px; }
.set-modal .set-diag { margin: 4px 0 8px; max-height: 220px; overflow: auto; font-size: 12px; border-radius: 12px; padding: 10px 12px; background: var(--fill-2); }
.set-modal .set-sec > .nb-modal-actions:last-child { margin-bottom: 14px; }
/* sessioni e IA: stessi margini delle righe */
.set-modal .sess-list { margin: 2px 0 0; }
.set-modal .sess-row { min-height: 56px; padding: 10px 0; border-bottom-width: 0.5px; }
.set-modal .sess-actions { margin: 10px 0 14px; }
.set-modal .sess-foot { margin: -4px 0 14px; }
.set-modal .sess-loading { margin: 6px 0 14px; }
.set-modal .mcp-cv { border-top: 0.5px solid var(--stroke); border-bottom: 0; }
.set-modal .mcp-log-h { margin: 6px 0 4px; padding-top: 14px; border-top: 0.5px solid var(--stroke); font-size: 15px; }
.set-modal [data-mcp-log] { padding-bottom: 12px; }
.set-modal [data-mcp-log] > .set-note:last-child { margin-bottom: 2px; }
@media (max-width: 560px) {
  .nb-modal.set-modal { padding: 0 12px 14px; }
  .set-modal .set-head { margin: 0 -12px 2px; padding: 14px 14px 10px; }
  .set-modal .set-sec { margin-top: 10px; padding: 2px 14px; border-radius: 16px; }
  .set-modal .sess-actions .btn { flex: 1 1 100%; }
  .set-modal .mcp-sec .sess-actions .btn { flex: 1 1 calc(50% - 4px); }
}