/* Second Brain: stile unico. Blu come colore principale, tema scuro da prefers-color-scheme. */

:root {
  --blu: #1565ff;
  --blu-scuro: #0d4fd1;
  --blu-tenue: #e3ecff;
  --bg: #f5f7fb;
  --superficie: #ffffff;
  --superficie-2: #eef1f6;
  --testo: #121722;
  --tenue: #5b6475;
  --bordo: #d9dee8;
  --rosso: #d32f2f;
  --rosso-tenue: #fdecec;
  --verde: #1b873f;
  --verde-tenue: #e6f5ea;
  --ombra: 0 1px 3px rgba(16, 24, 40, 0.08);
  --raggio: 12px;
  --nav-h: 64px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blu: #3d82ff;
    --blu-scuro: #2a6cf0;
    --blu-tenue: #15284d;
    --bg: #0e1116;
    --superficie: #171b22;
    --superficie-2: #1f2430;
    --testo: #e8ebf1;
    --tenue: #9aa3b5;
    --bordo: #2c3240;
    --rosso: #ff6b6b;
    --rosso-tenue: #3a1c1f;
    --verde: #4cc472;
    --verde-tenue: #17311f;
    --ombra: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: var(--bg);
  color: var(--testo);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; margin-bottom: 12px; }
h4 { font-size: 0.95rem; color: var(--tenue); margin: 16px 0 8px; font-weight: 600; }
p { margin: 0; }

input, textarea, select, button { font: inherit; color: inherit; }

input[type="text"], input[type="password"], input[type="date"], input[type="time"], textarea, select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  font-size: 16px; /* sotto i 16px iOS fa lo zoom */
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blu); outline-offset: -1px; border-color: var(--blu); }

/* ---------- bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primario { background: var(--blu); border-color: var(--blu); color: #fff; }
.btn-primario:hover { background: var(--blu-scuro); }
.btn-pericolo { color: var(--rosso); }
.btn-largo { width: 100%; }
.btn-piccolo { min-height: 34px; padding: 4px 12px; font-size: 0.9rem; }
.btn-icona { padding: 8px; min-width: 42px; }

/* ---------- testi di stato ---------- */

.errore { color: var(--rosso); font-size: 0.92rem; margin-top: 8px; }
.avviso { background: var(--blu-tenue); color: var(--testo); padding: 10px 12px; border-radius: 10px; font-size: 0.95rem; }
.esito { font-size: 0.92rem; margin-top: 8px; }
.esito-ok { color: var(--verde); }
.esito-errore { color: var(--rosso); }
.testo-tenue { color: var(--tenue); font-size: 0.92rem; }
.vuoto { color: var(--tenue); font-size: 0.95rem; text-align: center; padding: 16px 0; list-style: none; }

/* ---------- banner promemoria scaduti ---------- */

.banner {
  background: var(--blu);
  color: #fff;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.banner-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.banner-testo { display: flex; flex-direction: column; min-width: 0; }
.banner-testo strong { overflow-wrap: anywhere; }
.banner-quando { font-size: 0.85rem; opacity: 0.9; }
.btn-banner { background: #fff; color: var(--blu); border-color: #fff; }
.btn-banner:hover { background: #e9f0ff; }

/* ---------- accesso ---------- */

.login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-box {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--superficie);
  padding: 28px 22px;
  border-radius: 16px;
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra);
}
.login-titolo { font-size: 1.5rem; color: var(--blu); text-align: center; margin-bottom: 4px; }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; color: var(--tenue); }
.campo > span { font-weight: 500; }
.campo input, .campo textarea, .campo select { color: var(--testo); }

/* ---------- guscio e navigazione ---------- */

.shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.nav {
  order: 1; /* in basso su telefono */
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  min-height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--superficie);
  border-top: 1px solid var(--bordo);
}
.nav-marchio { display: none; }
.nav-voce {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  color: var(--tenue);
  text-decoration: none;
  font-size: 0.75rem;
}
.nav-voce.attiva { color: var(--blu); font-weight: 600; }

.nav-icona {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icona) center / contain no-repeat;
  mask: var(--icona) center / contain no-repeat;
}
.nav-icona-home { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-8 9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.nav-icona-chat { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H9l-5 4z'/%3E%3C/svg%3E"); }
.nav-icona-memoria { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
.nav-icona-impostazioni { --icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h10v2H3zm14-2h2v6h-2zm2 2h2v2h-2zM3 11h4v2H3zm6-2h2v6H9zm4 2h8v2h-8zM3 17h12v2H3zm16-2h2v6h-2z'/%3E%3C/svg%3E"); }

.vista { padding: 16px; max-width: 860px; margin: 0 auto; width: 100%; }
.vista-testa { margin-bottom: 12px; }
.sezione {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--ombra);
}
.sezione-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sezione-testa h3 { margin: 0; }

/* ---------- Home ---------- */

.vista-home { display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.home-centro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 0 8px; }

.mic-grande {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: none;
  background: var(--blu);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(21, 101, 255, 0.35);
  transition: transform 0.15s ease, background-color 0.2s ease;
  touch-action: manipulation;
}
.mic-grande:active { transform: scale(0.96); }
.mic-grande-icona, .mic-piccolo-icona {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mic-grande-icona { width: 84px; height: 84px; }
.mic-piccolo-icona { width: 22px; height: 22px; }

.mic-grande.stato-ascolto { background: var(--blu-scuro); animation: pulsa 1.4s ease-out infinite; }
.mic-grande.stato-pensando { background: var(--blu); opacity: 0.75; animation: respira 1.6s ease-in-out infinite; }

@keyframes pulsa {
  0% { box-shadow: 0 0 0 0 rgba(21, 101, 255, 0.55); }
  100% { box-shadow: 0 0 0 28px rgba(21, 101, 255, 0); }
}
@keyframes respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .mic-grande.stato-ascolto, .mic-grande.stato-pensando { animation: none; }
  .mic-grande.stato-ascolto { outline: 6px solid var(--blu-tenue); }
}

.home-stato { font-weight: 600; color: var(--tenue); min-height: 1.5em; text-align: center; }
.home-form { display: flex; gap: 8px; align-items: flex-end; }
.home-dialogo { display: flex; flex-direction: column; gap: 10px; }
.home-trascrizione {
  font-size: 1.1rem;
  text-align: center;
  color: var(--testo);
  padding: 8px 4px;
  font-style: italic;
  overflow-wrap: anywhere;
}
.home-ultimo { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Chat ---------- */

.vista-chat { display: flex; flex-direction: column; height: 100%; padding-bottom: 8px; }
.chat-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 12px; }
.avviso-chat { margin-bottom: 8px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto; }
.chat-form textarea { resize: none; max-height: 40vh; }
.mic-piccolo.mic-attivo { background: var(--blu); color: #fff; border-color: var(--blu); }

.msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  align-self: flex-start;
  overflow-wrap: anywhere;
}
.msg-user { align-self: flex-end; background: var(--blu); border-color: var(--blu); color: #fff; }
.msg-testo { white-space: pre-wrap; }
.msg-meta { font-size: 0.75rem; opacity: 0.75; margin-top: 4px; }
.msg-attesa { opacity: 0.7; }
.msg-transitorio { border-style: dashed; background: transparent; }

.msg.msg-errore { background: var(--rosso-tenue); border-color: var(--rosso); color: var(--testo); }
.msg-errore-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.msg-errore-testo { color: var(--rosso); font-size: 0.9rem; font-weight: 500; }

.azione {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  color: var(--testo);
}
.azione-titolo { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tenue); }
.azione-descrizione { margin-top: 4px; white-space: pre-wrap; }
.azione-bottoni { display: flex; gap: 8px; margin-top: 10px; }
.azione-stato { margin-top: 6px; font-weight: 600; font-size: 0.9rem; }
.azione-esito { margin-top: 2px; font-size: 0.9rem; color: var(--tenue); white-space: pre-wrap; }
.azione-in_attesa { border-color: var(--blu); }
.azione-eseguita .azione-stato { color: var(--verde); }
.azione-fallita .azione-stato { color: var(--rosso); }
.azione-annullata .azione-stato { color: var(--tenue); }

/* ---------- Memoria ---------- */

.riga-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.riga-form input[type="text"], .riga-form input[type="password"], .riga-form textarea { flex: 1 1 220px; }
.riga-form input[type="date"] { flex: 1 1 150px; width: auto; }
.riga-form input[type="time"] { flex: 0 1 120px; width: auto; }
.riga-form.modifica { width: 100%; }

.elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
}
.voce-corpo { flex: 1 1 220px; min-width: 0; }
.voce-testo { overflow-wrap: anywhere; }
.testo-lungo { white-space: pre-wrap; }
.voce-meta { font-size: 0.82rem; color: var(--tenue); margin-top: 2px; }
.voce-bottoni { display: flex; gap: 6px; flex-wrap: wrap; }
.voce > .errore { flex-basis: 100%; margin-top: 0; }
.voce-fatto .voce-testo { text-decoration: line-through; color: var(--tenue); }

/* ---------- Impostazioni ---------- */

.integrazioni { display: flex; flex-direction: column; gap: 10px; }
.integ { border: 1px solid var(--bordo); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.integ-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.integ-testa h4 { margin: 0; color: var(--testo); font-size: 1rem; }
.badge { font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.badge-ok { background: var(--verde-tenue); color: var(--verde); }
.badge-no { background: var(--superficie-2); color: var(--tenue); }
.badge-attesa { background: var(--blu-tenue); color: var(--blu-scuro); }
.integ-dettaglio { font-size: 0.92rem; overflow-wrap: anywhere; }
.integ-account { margin: 0; padding-left: 20px; font-size: 0.92rem; }
.integ-modulo { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.integ-modulo select { flex: 1 1 220px; }
.integ-risultato { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.integ-risultato:empty { display: none; }
.integ-codice { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.pagina-esito { max-width: 480px; margin: 15vh auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.integ-serve-titolo { font-size: 0.85rem; font-weight: 600; margin-top: 4px; }
.integ-serve { margin: 0; padding-left: 20px; font-size: 0.9rem; color: var(--tenue); }
.integ-aiuto { margin: 6px 0 0; padding-left: 20px; font-size: 0.85rem; color: var(--tenue); }
.integ-claude { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.riga-bottoni { display: flex; gap: 8px; flex-wrap: wrap; }

.agenti-form { display: flex; flex-direction: column; gap: 14px; }
.agenti-form > .btn { align-self: flex-start; }
.gruppo { border: 1px solid var(--bordo); border-radius: 10px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gruppo legend { padding: 0 6px; font-weight: 600; }
.interruttore { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.interruttore input { width: 20px; height: 20px; accent-color: var(--blu); }

.registro-box { overflow-x: auto; }
.registro { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.registro th, .registro td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.registro th { color: var(--tenue); font-weight: 600; white-space: nowrap; }
.registro td { white-space: nowrap; }
.registro td.registro-dettaglio { white-space: normal; min-width: 200px; overflow-wrap: anywhere; }
.esito-riga-errore td { color: var(--rosso); }
.esito-riga-saltata td { color: var(--tenue); }

/* ---------- PC: navigazione laterale, Chat come schermata principale ---------- */

@media (min-width: 768px) {
  .shell { flex-direction: row; }
  .nav {
    order: -1;
    flex-direction: column;
    justify-content: flex-start;
    width: 220px;
    padding: 16px 12px;
    gap: 4px;
    border-top: none;
    border-right: 1px solid var(--bordo);
  }
  .nav-marchio { display: block; font-weight: 700; color: var(--blu); font-size: 1.15rem; padding: 4px 12px 16px; }
  .nav-voce {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.95rem;
  }
  .nav-voce:hover { background: var(--superficie-2); }
  .nav-voce.attiva { background: var(--blu-tenue); }
  .nav-icona { width: 20px; height: 20px; }
  .solo-mobile { display: none; }
  .vista { padding: 24px; }
  .vista-chat { padding-bottom: 16px; }
  .msg { max-width: 70%; }
}

/* Popup del microfono */
.dialogo {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
  padding: 20px;
  width: min(92vw, 420px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialogo h2 { margin: 0 0 8px; font-size: 1.15rem; }
.dialogo p { margin: 0 0 12px; line-height: 1.45; }
.dialogo-passi { margin: 0 0 16px; padding-left: 1.2em; line-height: 1.5; color: var(--tenue); }
.dialogo .riga-bottoni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }