/* Notepad — Xsyte. Tavolozza unica, tinte piene, nessuna sfumatura. */

:root {
  --bg:        #F4F5F7;
  --superficie:#FFFFFF;
  --superficie-2:#EDEFF3;
  --linea:     #E3E6EB;
  --inchiostro:#16181D;
  --inchiostro-2:#6B7280;
  --accento:   #2F6FED;
  --accento-tenue:#E6EEFD;
  --rosso:     #D64545;
  --giallo:    #E8B004;

  --r:  10px;
  --r-g: 14px;
  --ombra: 0 1px 2px rgba(22,24,29,.06);
  --testata: 52px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sicuro-alto: env(safe-area-inset-top, 0px);
  --sicuro-basso: env(safe-area-inset-bottom, 0px);
}

:root[data-tema="scuro"],
html:not([data-tema="chiaro"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --bg:        #0F1116;
    --superficie:#181B21;
    --superficie-2:#22262E;
    --linea:     #2C313A;
    --inchiostro:#EDEEF2;
    --inchiostro-2:#98A0AD;
    --accento:   #5B8DEF;
    --accento-tenue:#1D2A44;
    --rosso:     #E06767;
    --giallo:    #E8B004;
    --ombra: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

:root[data-tema="scuro"] {
  --bg:        #0F1116;
  --superficie:#181B21;
  --superficie-2:#22262E;
  --linea:     #2C313A;
  --inchiostro:#EDEEF2;
  --inchiostro-2:#98A0AD;
  --accento:   #5B8DEF;
  --accento-tenue:#1D2A44;
  --rosso:     #E06767;
  --ombra: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Le regole di impianto qui sotto usano display: flex/grid, che da solo
   vincerebbe sull'attributo hidden del browser. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body { overflow: hidden; }

button { font: inherit; color: inherit; }

.ico { width: 20px; height: 20px; flex: none; }

/* ---------- Accesso ---------- */
body.accesso {
  display: grid; place-items: center; overflow: auto;
  padding: 24px calc(24px + env(safe-area-inset-left)) calc(24px + var(--sicuro-basso));
}
.accesso__riquadro {
  width: 100%; max-width: 360px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-g);
  padding: 32px 26px;
  text-align: center;
}
.accesso__marchio { color: var(--accento); display: flex; justify-content: center; }
.accesso h1 { font-size: 26px; margin: 12px 0 4px; letter-spacing: -.02em; }
.accesso__sottotitolo { margin: 0 0 24px; color: var(--inchiostro-2); font-size: 14px; }
.accesso__errore {
  background: var(--superficie-2); border-left: 3px solid var(--rosso);
  color: var(--inchiostro); text-align: left; padding: 10px 12px;
  border-radius: 6px; font-size: 14px; margin: 0 0 16px;
}
.accesso__modulo { display: grid; gap: 14px; text-align: left; }
.campo { display: grid; gap: 6px; font-size: 13px; color: var(--inchiostro-2); }
.campo input[type=email], .campo input[type=password], .campo input[type=text] {
  font: inherit; font-size: 16px; color: var(--inchiostro);
  background: var(--bg); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 11px 12px; width: 100%;
}
.campo input:focus { outline: 2px solid var(--accento); outline-offset: -1px; border-color: transparent; }
.campo--riga { grid-auto-flow: column; justify-content: start; align-items: center; gap: 9px; }
.campo--riga input { width: 18px; height: 18px; accent-color: var(--accento); }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--linea); background: var(--superficie);
  border-radius: var(--r); padding: 10px 16px; cursor: pointer;
  min-height: 42px; font-size: 15px;
}
.bottone:hover { background: var(--superficie-2); }
.bottone--pieno { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 600; }
.bottone--pieno:hover { filter: brightness(.94); background: var(--accento); }
.bottone--tenue { background: transparent; color: var(--rosso); border-color: var(--linea); }

/* ---------- Impianto a tre colonne ---------- */
.app {
  display: grid;
  grid-template-columns: 236px 300px 1fr;
  height: 100dvh;
  background: var(--bg);
}
.colonna { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.colonna--quaderni { background: var(--superficie-2); border-right: 1px solid var(--linea); padding-left: env(safe-area-inset-left, 0px); }
.colonna--elenco  { background: var(--superficie); border-right: 1px solid var(--linea); }
.colonna--editor  { background: var(--bg); position: relative; }

.colonna__testata {
  height: calc(var(--testata) + var(--sicuro-alto));
  padding: var(--sicuro-alto) 10px 0 12px;
  display: flex; align-items: center; gap: 8px; flex: none;
  border-bottom: 1px solid transparent;
}
.colonna--elenco .colonna__testata { border-bottom-color: var(--linea); }
.marchio { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -.01em; flex: 1; }
.marchio .ico { color: var(--accento); }
h2#titoloElenco { font-size: 16px; margin: 0; flex: 1; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.testata__azioni { display: flex; align-items: center; gap: 2px; }

.icona {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--inchiostro-2); flex: none; -webkit-tap-highlight-color: transparent;
}
.icona:hover { background: var(--superficie-2); color: var(--inchiostro); }
.colonna--elenco .icona:hover, .editor .icona:hover { background: var(--superficie-2); }
.icona.is-attiva { color: var(--accento); }
.icona--piccola { width: 28px; height: 28px; }
.icona--piccola .ico { width: 17px; height: 17px; }
.icona[disabled] { opacity: .35; pointer-events: none; }

/* menu raccolte */
.menu { padding: 6px 8px; display: grid; gap: 1px; }
.voce {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: 8px;
  padding: 8px 10px; cursor: pointer; text-align: left; color: var(--inchiostro);
  min-height: 38px;
}
.voce .ico { width: 18px; height: 18px; color: var(--inchiostro-2); }
.voce span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce:hover { background: var(--superficie); }
.voce.is-attiva { background: var(--accento); color: #fff; }
.voce.is-attiva .ico, .voce.is-attiva .conta { color: rgba(255,255,255,.85); }
.conta { font-style: normal; font-size: 12px; color: var(--inchiostro-2); }

.menu__titolo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px 4px 14px; font-size: 11.5px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--inchiostro-2);
}
.quaderni { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.quaderni .voce .pallino-colore { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.colonna__pie {
  flex: none; border-top: 1px solid var(--linea); padding: 8px 10px calc(8px + var(--sicuro-basso));
  display: grid; gap: 6px; font-size: 12px; color: var(--inchiostro-2);
}
.stato { display: flex; align-items: center; gap: 7px; }
.pallino { width: 7px; height: 7px; border-radius: 50%; background: #34A853; flex: none; }
.stato[data-stato="salvataggio"] .pallino { background: var(--giallo); }
.stato[data-stato="offline"] .pallino { background: var(--inchiostro-2); }
.stato[data-stato="errore"] .pallino { background: var(--rosso); }
.pie__utente { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.utente__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie__utente form { margin: 0; }

/* ---------- Elenco note ---------- */
.ricerca {
  flex: none; display: flex; align-items: center; gap: 8px;
  margin: 8px 10px; padding: 0 10px; background: var(--superficie-2);
  border-radius: 9px; height: 36px; color: var(--inchiostro-2);
}
.ricerca .ico { width: 17px; height: 17px; }
.ricerca input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 16px; color: var(--inchiostro); outline: none; height: 100%;
}
.ricerca input::-webkit-search-cancel-button { display: none; }
.ricerca .icona--piccola { width: 26px; height: 26px; flex: none; }

.elenco__scorri { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.note { list-style: none; margin: 0; padding: 4px 8px 24px; display: grid; gap: 2px; }
.nota {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 10px 10px; border-radius: var(--r); cursor: pointer;
  align-items: start; border: 1px solid transparent;
}
.nota:hover { background: var(--superficie-2); }
.nota.is-attiva { background: var(--accento); color: #fff; }
.nota.is-attiva .nota__meta, .nota.is-attiva .nota__estratto { color: rgba(255,255,255,.8); }
.nota.is-attiva .nota__segno { color: rgba(255,255,255,.9); }
.nota__testi { min-width: 0; }
.nota__titolo { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Il nome ha bisogno di un contenitore proprio: dentro un flex i puntini
   di sospensione non funzionano sul contenitore stesso. */
.nota__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota__segno { color: var(--inchiostro-2); display: inline-flex; }
.nota__segno .ico { width: 14px; height: 14px; }
.nota__estratto { font-size: 13px; color: var(--inchiostro-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota__meta { font-size: 12px; color: var(--inchiostro-2); margin-top: 3px; display: flex; gap: 8px; }
.nota__anteprima {
  width: 46px; height: 60px; border-radius: 5px; background: var(--superficie);
  border: 1px solid var(--linea); object-fit: cover; object-position: top center; flex: none;
}
.elenco__vuoto { text-align: center; color: var(--inchiostro-2); padding: 40px 20px; font-size: 14px; }
.cestino__barra { flex: none; padding: 10px 12px calc(10px + var(--sicuro-basso)); border-top: 1px solid var(--linea); display: flex; justify-content: center; }

/* ---------- Editor ---------- */
.editor { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.editor--testo { background: var(--superficie); }
.editor--testo .editor__foglio { background: var(--superficie); }
.editor__testata {
  height: calc(var(--testata) + var(--sicuro-alto)); padding: var(--sicuro-alto) 8px 0 8px;
  display: flex; align-items: center; gap: 4px; flex: none;
  background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.editor__titolo {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 16px; font-weight: 600; color: var(--inchiostro); outline: none; padding: 6px 8px;
  letter-spacing: -.01em;
}
.editor__titolo::placeholder { color: var(--inchiostro-2); font-weight: 500; }

.vuoto {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 14px; color: var(--inchiostro-2); text-align: center; padding: 24px;
}
.vuoto__segno { width: 48px; height: 48px; color: var(--linea); }
.vuoto__scelte { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* barra di formattazione del testo */
.barra-formato {
  flex: none; display: flex; align-items: center; gap: 2px; padding: 5px 8px;
  background: var(--superficie); border-bottom: 1px solid var(--linea);
  overflow-x: auto; scrollbar-width: none;
}
.barra-formato::-webkit-scrollbar { display: none; }
.fmt {
  min-width: 32px; height: 32px; padding: 0 7px; border: 0; background: transparent;
  border-radius: 7px; cursor: pointer; display: grid; place-items: center; color: var(--inchiostro-2);
  flex: none; font-size: 15px;
}
.fmt:hover { background: var(--superficie-2); color: var(--inchiostro); }
.fmt.is-attivo { background: var(--accento-tenue); color: var(--accento); }
.fmt[data-fmt="titolo"] { font-size: 17px; font-weight: 700; }
.fmt[data-fmt="sottotitolo"] { font-size: 15px; font-weight: 700; }
.barra-formato .sep { width: 1px; height: 20px; background: var(--linea); margin: 0 5px; flex: none; }

.editor__foglio { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 40vh; }
.testo {
  max-width: 740px; margin: 0 auto; padding: 28px 22px;
  min-height: 60vh; outline: none; font-size: 16.5px; line-height: 1.62;
  color: var(--inchiostro); -webkit-user-select: text; user-select: text;
}
.testo:empty::before { content: attr(data-vuoto); color: var(--inchiostro-2); }
.testo h1 { font-size: 25px; margin: 1.1em 0 .35em; letter-spacing: -.02em; }
.testo h2 { font-size: 19.5px; margin: 1em 0 .3em; letter-spacing: -.01em; }
.testo p { margin: 0 0 .75em; }
.testo ul, .testo ol { margin: 0 0 .8em; padding-left: 1.4em; }
.testo li { margin: .18em 0; }
.testo blockquote { margin: .6em 0; padding: .1em 0 .1em 14px; border-left: 3px solid var(--linea); color: var(--inchiostro-2); }
.testo mark { background: #FDE68A; color: #16181D; padding: 0 .12em; border-radius: 2px; }
.testo img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: .6em 0; }
.testo a { color: var(--accento); }
.testo hr { border: 0; border-top: 1px solid var(--linea); margin: 1.4em 0; }
.testo ul.spunte { list-style: none; padding-left: 2px; }
.testo ul.spunte li { display: flex; align-items: flex-start; gap: 9px; }
.testo ul.spunte input[type=checkbox] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accento); flex: none; }
.testo li.fatto { color: var(--inchiostro-2); text-decoration: line-through; }
.testo .disegno-incorporato {
  display: block; max-width: 100%; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--superficie); margin: .7em 0; cursor: pointer;
}

/* ---------- Attrezzi del foglio a mano ---------- */
.attrezzi {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 6px 10px;
  background: var(--superficie); border-bottom: 1px solid var(--linea);
  overflow-x: auto; scrollbar-width: none;
}
.attrezzi::-webkit-scrollbar { display: none; }
.attrezzi__gruppo { display: flex; align-items: center; gap: 3px; flex: none; }
.attrezzi__gruppo--fine { margin-left: auto; }
.attrezzo {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0;
  background: transparent; border-radius: 8px; cursor: pointer; color: var(--inchiostro-2); flex: none;
  -webkit-tap-highlight-color: transparent;
}
.attrezzo:hover { background: var(--superficie-2); color: var(--inchiostro); }
.attrezzo.is-attivo { background: var(--accento-tenue); color: var(--accento); }
.colori { gap: 5px; }
.colore {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; flex: none; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.colore.is-attivo { border-color: var(--accento); }
.spessori { gap: 4px; }
.spessore {
  width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px;
  cursor: pointer; display: grid; place-items: center; flex: none;
}
.spessore i { display: block; background: var(--inchiostro-2); border-radius: 99px; }
.spessore.is-attivo { background: var(--accento-tenue); }
.spessore.is-attivo i { background: var(--accento); }
.zoom__valore { font-size: 12px; color: var(--inchiostro-2); width: 42px; text-align: center; flex: none; font-variant-numeric: tabular-nums; }

/* ---------- Tela ---------- */
.tela {
  flex: 1; overflow: auto; position: relative;
  background: var(--bg); -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; touch-action: pan-x pan-y;
}
.tela__pagine { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 18px 12px; width: max-content; min-width: 100%; }
.pagina {
  position: relative; background: #fff; box-shadow: var(--ombra);
  border: 1px solid var(--linea); flex: none;
}
.pagina canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.pagina__sfondo { position: absolute; inset: 0; pointer-events: none; }
.pagina__numero {
  position: absolute; bottom: -16px; right: 2px; font-size: 11px; color: var(--inchiostro-2);
}
.pagina__testi { position: absolute; inset: 0; pointer-events: none; }
.casella-testo {
  position: absolute; pointer-events: auto; outline: none; min-width: 40px;
  border: 1px dashed transparent; padding: 2px 4px; color: #16181D;
  line-height: 1.35; white-space: pre-wrap; overflow-wrap: break-word;
}
.casella-testo:focus, .casella-testo:hover { border-color: var(--accento); }
.aggiungi-pagina {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 40px; padding: 10px 18px; border: 1px dashed var(--linea);
  background: transparent; color: var(--inchiostro-2); border-radius: var(--r); cursor: pointer;
}
.aggiungi-pagina:hover { color: var(--accento); border-color: var(--accento); }

.selezione__barra {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--sicuro-basso)); display: flex; gap: 2px; padding: 4px;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14); z-index: 30;
}
.selezione__barra button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.selezione__barra button:hover { background: var(--superficie-2); }

/* ---------- Pannelli e avvisi ---------- */
.velo { position: fixed; inset: 0; background: rgba(22,24,29,.32); z-index: 40; }
.pannello {
  position: fixed; z-index: 50; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-g); box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 230px; max-width: min(440px, calc(100vw - 24px)); padding: 6px;
  max-height: min(70dvh, 560px); overflow-y: auto;
}
.pannello--centro {
  left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 20px;
}
.pannello h3 { margin: 0 0 12px; font-size: 16px; }
.pannello .voce-menu {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; min-height: 40px;
}
.pannello .voce-menu:hover { background: var(--superficie-2); }
.pannello .voce-menu .ico { width: 18px; height: 18px; color: var(--inchiostro-2); }
.pannello .voce-menu.pericolo { color: var(--rosso); }
.pannello .voce-menu.pericolo .ico { color: var(--rosso); }
.pannello .separatore { height: 1px; background: var(--linea); margin: 5px 4px; }
.pannello__azioni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.pannello .campo input { font-size: 16px; }
.scelta-colori { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.griglia-carte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.carta-scelta {
  border: 1px solid var(--linea); border-radius: 8px; background: #fff; cursor: pointer;
  aspect-ratio: 3/4; padding: 0; overflow: hidden;
}
.carta-scelta.is-attiva { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.miniature { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.miniatura { border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; cursor: pointer; background: #fff; position: relative; }
.miniatura.is-attiva { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }
.miniatura canvas { display: block; width: 100%; height: auto; }
.miniatura__n { position: absolute; bottom: 2px; right: 4px; font-size: 10px; color: var(--inchiostro-2); background: var(--superficie); border-radius: 3px; padding: 0 3px; }

.avvisi { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + var(--sicuro-basso)); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.avviso {
  background: var(--inchiostro); color: var(--bg); padding: 10px 16px; border-radius: 99px;
  font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: sali .22s ease;
}
@keyframes sali { from { opacity: 0; transform: translateY(8px); } }

.solo-stretto { display: none; }

/* ---------- Schermi stretti: una colonna per volta ---------- */
@media (min-width: 781px) and (max-width: 1080px) {
  .app { grid-template-columns: 210px 1fr; }
  .colonna--editor { grid-column: 2; }
  .app[data-vista="editor"] .colonna--elenco { display: none; }
  .app:not([data-vista="editor"]) .colonna--editor { display: none; }
  .app:not([data-vista="editor"]) .colonna--elenco { grid-column: 2; }
}

@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .colonna { grid-column: 1; grid-row: 1; }
  .app[data-vista="quaderni"] .colonna--elenco,
  .app[data-vista="quaderni"] .colonna--editor,
  .app[data-vista="elenco"] .colonna--quaderni,
  .app[data-vista="elenco"] .colonna--editor,
  .app[data-vista="editor"] .colonna--quaderni,
  .app[data-vista="editor"] .colonna--elenco { display: none; }
  .solo-stretto { display: grid; }
  .colonna--quaderni { border-right: 0; }
  .colonna--elenco { border-right: 0; }
  .testo { padding: 20px 16px; font-size: 17px; }
  .attrezzo, .icona { width: 40px; height: 40px; }
  .fmt { min-width: 38px; height: 38px; }
  .colore { width: 28px; height: 28px; }
  .pannello { max-width: calc(100vw - 20px); }
}

@media (hover: none) {
  .nota { padding: 12px 10px; }
  .voce { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .elenco__scorri { scroll-behavior: auto; }
}

/* Il pallino del nero, su fondo scuro, sparirebbe senza un contorno chiaro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .colore { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
}
:root[data-tema="scuro"] .colore { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* ---------- Spazio per l'assistente AI (funzioni non ancora costruite) ---------- */
.fmt--assistente, .attrezzo--assistente { color: var(--accento); }
.fmt--assistente:hover, .attrezzo--assistente:hover { background: var(--accento-tenue); color: var(--accento); }

.ai-testata { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px; }
.ai-titolo { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.ai-titolo .ico { color: var(--accento); }
.ai-etichetta {
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accento); background: var(--accento-tenue); border-radius: 99px; padding: 3px 9px;
}
.ai-elenco { display: grid; gap: 2px; }
.ai-voce { padding: 8px 10px; border-radius: 8px; opacity: .55; cursor: default; }
.ai-voce__nome { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.ai-voce__nome .ico { width: 17px; height: 17px; color: var(--inchiostro-2); }
.ai-voce__dettaglio { font-size: 12.5px; color: var(--inchiostro-2); margin-top: 2px; padding-left: 26px; }
.ai-nota {
  margin: 8px 4px 2px; padding: 10px 12px; border-radius: 8px;
  background: var(--superficie-2); color: var(--inchiostro-2);
  font-size: 12.5px; line-height: 1.55;
}
.ai-nota strong { color: var(--inchiostro); }
.ai-nota a { color: var(--accento); }