:root {
    --nursind-blue: #0b4c7c;
    --nursind-blue-dark: #073a5f;
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --text: #1f2933;
    --muted: #647084;
    --border: #dfe3e8;
    --danger: #b3261e;
    --success: #1e6b3c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

header.topbar {
    background: var(--nursind-blue);
    color: #fff;
    padding: 0.9rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.topbar a {
    color: #fff;
    text-decoration: none;
    margin-left: 1rem;
    font-size: 0.95rem;
}

.nav-feedback-btn {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 20px;
    background: #ffc107;
    border: none;
    color: #000;
    text-decoration: none;
    margin: 0 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 0 0.6rem;
    border-radius: 5px;
}

.nav-feedback-btn:hover {
    background: #e0a800;
}

/* Pulsante donazioni nel menu principale: colore volutamente diverso dal
   giallo del Feedback (stesso trattamento "pillola in risalto", ma i due
   non devono confondersi tra loro) — rosa/rosso caldo, buon contrasto sia
   sull'azzurro dell'header sia sul pannello blu scuro del menu mobile. */
header.topbar a.nav-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ff4d6d;
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) inset;
}

header.topbar a.nav-donate-btn:hover {
    background: #e6395a;
}

header.topbar .brand {
    font-weight: 700;
    font-size: 1.1rem;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
}

header.topbar .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    background: #fff;
    color: var(--nursind-blue);
    font-weight: 700;
    font-size: 0.8rem;
    margin-right: 0.5rem;
}

header.topbar nav {
    display: flex;
    align-items: center;
}

main.container {
    width: min(94%, 1280px);
    margin: 2rem auto;
    padding: 0 1rem;
}

.card-narrow {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.card-medium {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.card-wide {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.subscribe-hero {
    text-align: center;
    padding: 0.5rem 0 0.5rem;
}

.subscribe-intro {
    color: var(--muted);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1rem;
}

.piani-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    align-items: stretch;
}

.piano-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.piano-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

.piano-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}

.piano-card .piano-prezzo {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.piano-card .piano-valuta {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--muted);
    margin-left: 0.15rem;
}

.piano-card .piano-periodo {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
    display: block;
    margin-top: 0.15rem;
}

.piano-al-giorno {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0.4rem 0 1.25rem;
    font-style: italic;
}

.piano-features {
    flex: 1;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.piano-features li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    font-size: 0.88rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.piano-features li:last-child {
    border-bottom: none;
}

.piano-feature-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    font-size: 0.95rem;
}

.piano-card form { margin-top: auto; }
.piano-card button {
    width: 100%;
    font-weight: 600;
    padding: 0.75rem 1.3rem;
}

.subscribe-trust {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--muted);
}

.subscribe-trust div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
    font-size: 1rem;
}

/* Il piano di mezzo ("evo") come opzione consigliata, leggermente
   ingrandito e con sfondo sfumato per ancorare la scelta — pattern
   standard "buono/migliore/ottimo": senza questo, tre card identiche
   lasciano l'utente indeciso invece di guidarlo verso l'opzione che
   vogliamo davvero vendere di più. */
.piano-card-evo {
    background: linear-gradient(180deg, rgba(11,76,124,0.05), var(--card-bg) 40%);
    border-color: var(--nursind-blue);
    border-width: 2px;
    box-shadow: 0 6px 20px rgba(11,76,124,0.14);
    position: relative;
    transform: scale(1.04);
    z-index: 1;
}

.piano-card-evo:hover {
    transform: scale(1.04) translateY(-4px);
}

.piano-card-evo::before {
    content: "★ Consigliato";
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nursind-blue);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(11,76,124,0.3);
}

@media (max-width: 780px) {
    .piano-card-evo {
        transform: none;
        order: -1;
    }
    .piano-card-evo:hover {
        transform: translateY(-4px);
    }
}

.dropdown {
    position: relative;
    margin-left: 1rem;
}

.dropdown summary {
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    list-style: none;
}

.dropdown summary::-webkit-details-marker {
    display: none;
}

.dropdown summary::after {
    content: ' \25BE';
    font-size: 0.7rem;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    min-width: 190px;
    padding: 0.4rem 0;
    z-index: 1000;
}

.topbar .dropdown-menu a {
    display: block;
    color: var(--text);
    margin-left: 0;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
}

.topbar .dropdown-menu a:hover {
    background: var(--bg);
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-cards a.card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease;
}

.admin-cards a.card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admin-cards h3 {
    margin: 0 0 0.4rem 0;
    color: var(--nursind-blue-dark);
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

h1, h2 { color: var(--nursind-blue-dark); }

label {
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type=text], input[type=email], input[type=password] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 1rem;
}

.password-field {
    position: relative;
}

.password-field input[type=password], .password-field input[type=text] {
    padding-right: 2.4rem;
}

.password-toggle {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    margin-top: 0;
}

.password-toggle:hover {
    background: var(--border);
    border-radius: 5px;
}

select, textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 1rem;
}

button, .btn {
    background: var(--nursind-blue);
    color: #fff;
    border: none;
    padding: 0.65rem 1.3rem;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1.25rem;
    display: inline-block;
    text-decoration: none;
}

button:hover, .btn:hover { background: var(--nursind-blue-dark); }

.btn-secondary {
    background: #eee;
    color: var(--text);
}

/* Senza questa regola, al passaggio del mouse .btn-secondary erediterebbe
   lo sfondo scuro pensato per i pulsanti primari (button:hover, .btn:hover
   sopra) senza che il testo scuro di .btn-secondary schiarisca a sua
   volta — testo scuro su sfondo scuro, illeggibile. */
.btn-secondary:hover {
    background: #ddd;
    color: var(--text);
}

.alert-error {
    background: #fdecea;
    color: var(--danger);
    border: 1px solid #f5c6c2;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

/* Chiuso di default (vedi assenza dell'attributo "open" nel markup): con
   centinaia di accessi al giorno, un riquadro sempre espanso in cima alla
   pagina finiva per restare fisso davanti agli occhi ad ogni visita anche
   quando le stesse impronte si ripetevano da giorni senza essere un
   problema nuovo — qui resta comunque visibile a colpo d'occhio (colore,
   conteggio), ma occupa una sola riga finché non lo si apre volutamente. */
.suspicious-details {
    background: #fdecea;
    border: 1px solid #f5c6c2;
    border-radius: 5px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

.suspicious-details summary {
    color: var(--danger);
    cursor: pointer;
    font-size: 0.92rem;
}

.suspicious-details[open] summary {
    margin-bottom: 0.25rem;
}

.alert-success {
    background: #eaf6ee;
    color: var(--success);
    border: 1px solid #bfe2c9;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.alert-info {
    background: #e8f0fe;
    color: var(--nursind-blue-dark);
    border: 1px solid #c7dafc;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.secret-box {
    font-family: monospace;
    font-size: 1.1rem;
    background: #f0f2f5;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    letter-spacing: 2px;
    word-break: break-all;
}

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

.actions-cell {
    vertical-align: top;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

/* Senza un max-width, una colonna con testo lungo e privo di spazi (titolo
   di un documento, es. il nome di una circolare) non va mai a capo con
   table-layout:auto — la tabella cresce invece oltre il contenitore,
   spingendo le colonne successive (inclusi i pulsanti di azione) fuori
   dalla parte visibile di .table-scroll, raggiungibili solo scorrendo
   senza che sia ovvio doverlo fare. */
.documents-page td:first-child {
    max-width: 320px;
    overflow-wrap: break-word;
}

.inline-form {
    display: inline-block;
    margin-right: 0.3rem;
}

input[type=color] {
    padding: 0.2rem;
    height: 2.4rem;
}

.widget-preview {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.widget-preview-header {
    padding: 0.6rem 0.8rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-preview-log {
    background: #f4f6f8;
    padding: 0.6rem;
    min-height: 60px;
}

.widget-preview-bubble {
    display: inline-block;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    max-width: 90%;
}

.widget-preview-bubble.assistant {
    background: #e9edf1;
    color: var(--text);
}

.widget-preview-form {
    display: flex;
    border-top: 1px solid var(--border);
}

.widget-preview-input {
    flex: 1;
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    color: #aaa;
    background: #fff;
}

.widget-preview-send {
    padding: 0 0.9rem;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.8rem;
}

.widget-preview-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-verificato, .badge-attivo { background: #eaf6ee; color: var(--success); }
.badge-sospeso, .badge-in_attesa, .badge-annullato, .badge-scaduto { background: #fdecea; color: var(--danger); }
.badge-info { background: #e8f0fe; color: var(--nursind-blue-dark); }
.badge-warning { background: #fff4e0; color: #8a5a00; }

/* La pagina chat vuole occupare la viewport quasi per intero (a differenza
   delle altre pagine, dove i margini generosi di main.container aiutano la
   lettura): riduciamo qui i suoi margini verticali con :has() — supportato da
   tutti i browser moderni (Chrome/Edge/Firefox/Safari 2023+) — con fallback
   automatico ai margini standard su browser più vecchi, mai rotto. */
main.container:has(.chat-page) {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.chat-page {
    max-width: 1200px;
    margin: 0 auto;
    height: calc(100vh - 92px);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

.chat-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.chat-page-header h1 {
    margin: 0;
    font-size: 1.2rem;
}

.chat-page-header p {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.chat-new-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 0.9rem;
    border-radius: 7px;
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 0;
    white-space: nowrap;
}

.chat-new-btn:hover { background: var(--bg); }

.chat-submenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex: 0 0 auto;
}

.chat-submenu-form {
    margin: 0;
}

.chat-submenu-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.45rem 0.85rem;
    border-radius: 7px;
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 0;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.chat-submenu-btn:hover {
    background: var(--card-bg);
    border-color: var(--nursind-blue);
}

.chat-submenu-btn[aria-expanded="true"] {
    background: var(--nursind-blue);
    border-color: var(--nursind-blue);
    color: #fff;
}

.chat-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.chat-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Nascosta di default: si popola solo quando "Modalità redazione documento"
   o "Allegati" (sottomenù in alto) viene aperto, invece di occupare sempre
   280px di colonna vuota quando nessuno dei due pannelli è attivo. */
.chat-sidebar {
    display: none;
    flex: 0 0 280px;
    border-left: 1px solid var(--border);
    background: var(--bg);
    overflow-y: auto;
    flex-direction: column;
}

.chat-sidebar.chat-sidebar-visible {
    display: flex;
}

.chat-sidebar-section {
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0;
}

.chat-sidebar-section:last-child {
    border-bottom: none;
}

.chat-sidebar-label {
    margin: 0 1.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.chat-empty {
    margin: auto;
    text-align: center;
    color: var(--muted);
}

.chat-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }

.chat-turn {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    min-width: 0;
}

.chat-turn.user { flex-direction: row-reverse; }

.chat-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}

.chat-avatar.assistant { background: var(--nursind-blue); }
.chat-avatar.user { background: #647084; }

.chat-content {
    max-width: 78%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-turn.user .chat-content { align-items: flex-end; }

.chat-text {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.55;
    font-size: 0.95rem;
}

.chat-turn.user .chat-text {
    background: #eef1f4;
    color: var(--text);
    padding: 0.6rem 0.95rem;
    border-radius: 14px 14px 3px 14px;
}

.chat-turn.assistant .chat-text {
    background: transparent;
    color: var(--text);
    padding: 0.1rem 0;
}

.msg-fonte {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.msg-fonte-documenti { background: #eaf6ee; color: var(--success); }
.msg-fonte-conoscenza_generale { background: #fff4e0; color: #8a5a00; }
.msg-fonte-non_verificato { background: #fdecea; color: var(--danger); }

.chat-doc-request {
    margin-top: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.chat-doc-request-label {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text);
}

.chat-doc-request-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.chat-doc-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.chat-doc-request-row .chat-attachment-chip {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-doc-request-row button, .chat-doc-request-close {
    margin-top: 0;
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    flex: 0 0 auto;
}

.chat-drafting-area {
    flex: 0 0 auto;
}

.chat-attachments-area {
    flex: 0 0 auto;
    padding: 0.6rem 1.25rem;
}

.chat-attachments-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 1.5rem 0;
    flex: 0 0 auto;
}

.chat-attachments-chips:empty {
    display: none;
    padding: 0;
}

.chat-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text);
}

.chat-attachment-chip-loading {
    color: var(--muted);
    font-style: italic;
}

.chat-attachment-chip-remove {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.chat-attachment-chip-remove:hover {
    color: var(--danger);
}

.chat-attach-btn {
    display: inline-block;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
}

.chat-attach-btn:hover {
    color: var(--text);
}

/* .chat-attach-btn nasce per un <label> (nessun chrome nativo da annullare).
   Applicata a un vero <button> come #attach-vertenza-btn, lo stile base
   "button, .btn" (sfondo blu pieno, vedi sopra) restava non annullato,
   risultando in testo grigio su sfondo blu — stessa causa già vista con
   .nav-help-toggle nel menu principale. */
button.chat-attach-btn {
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.5rem;
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
}

button.chat-attach-btn:hover {
    background: none;
}

.chat-attach-error {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--danger);
}

.chat-drafting-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chat-drafting-toggle:hover {
    color: var(--text);
}

.chat-drafting-caret {
    transition: transform 0.15s ease;
}

.chat-drafting-toggle.open .chat-drafting-caret {
    transform: rotate(180deg);
}

.chat-drafting-panel {
    padding: 0 1.25rem 0.9rem;
}

.chat-drafting-hint {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.chat-drafting-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.chat-drafting-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    flex: 1 1 180px;
}

.chat-drafting-fields select {
    font-weight: 400;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.85rem;
}

.chat-tono-field {
    flex: 1 1 220px;
}

.chat-tono-field input[type="range"] {
    width: 100%;
    accent-color: var(--nursind-blue);
}

.chat-tono-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--muted);
}

.chat-input-area {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: 1rem 1.25rem;
}

.chat-input-area form {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.5rem 0.5rem 0.5rem 1.1rem;
}

.chat-input-area textarea {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    max-height: 160px;
    padding: 0.45rem 0;
    outline: none;
}

.chat-send-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--nursind-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 0;
    font-size: 1rem;
    padding: 0;
}

.chat-send-btn:hover { background: var(--nursind-blue-dark); }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 640px) {
    /* La chat occupa tutta la larghezza dello schermo su mobile: main.container
       normalmente ha margini laterali (94% + padding) pensati per la lettura
       nelle altre pagine, qui invece tolti apposta perché la chat deve
       riempire lo schermo come un'app, non stare "in una scheda" con bordi
       laterali visibili. */
    main.container:has(.chat-page) {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .chat-page {
        max-width: 100%;
        /* L'header (con il pulsante ☰ aggiunto in un turno precedente, ~79px
           reali) è più alto di quanto questo calcolo prevedesse (64px): il
           piè di pagina della chat (barra delle icone) finiva così ~30px
           sotto il bordo visibile dello schermo, rendendo le icone di fatto
           non toccabili — bug osservato in pratica, non solo teorico. */
        height: calc(100vh - 80px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .chat-avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 0.65rem; }
    .chat-content { max-width: 86%; }
}

.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.typing-indicator .typing-text {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

.typing-indicator .typing-dots {
    display: inline-flex;
    gap: 4px;
}

.typing-indicator .typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.4;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-indicator .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.muted { color: var(--muted); font-size: 0.85rem; }

.hero {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
}

.hero-eyebrow {
    color: var(--nursind-blue);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.75rem;
}

.hero h1 {
    font-size: 2.3rem;
    line-height: 1.25;
    margin: 0 auto 1rem;
    max-width: 760px;
}

.hero-sub {
    color: var(--muted);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 1.75rem;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hero-note {
    margin-top: 1rem;
    font-size: 0.85rem;
}

.hero-note a {
    color: var(--nursind-blue);
}

.feature-grid, .audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 2.5rem 0;
}

.feature-card, .audience-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.feature-icon {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}

.feature-card h3, .audience-card h3, .step h3 {
    margin: 0 0 0.5rem;
    color: var(--nursind-blue-dark);
    font-size: 1.05rem;
}

.feature-card p, .audience-card p, .step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.steps {
    margin: 3rem 0;
    text-align: center;
}

.steps h2, .audience h2, .cta-final h2, .pricing h2 {
    text-align: center;
}

.pricing {
    margin: 3rem 0;
    text-align: center;
}

.pricing .piani-grid {
    text-align: left;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.75rem;
    text-align: left;
}

.step-number {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--nursind-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.audience {
    margin: 3rem 0;
}

.novita-section {
    margin: 3rem 0;
}

.cta-final {
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    margin: 3rem 0 1rem;
}

.cta-final h2 { margin-top: 0; }
.cta-final .muted { margin-bottom: 1.25rem; }

@media (max-width: 640px) {
    .hero h1 { font-size: 1.7rem; }
    .hero-sub { font-size: 1rem; }
}

.widget-promo {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2.5rem;
    margin: 3rem 0;
    text-align: center;
}

.widget-promo h2 { margin: 0 0 0.75rem; }
.widget-promo .hero-sub { margin-left: auto; margin-right: auto; }

.widget-promo-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-top: 2rem;
    text-align: left;
}

/* Senza min-width:0 un elemento di grid non si restringe mai sotto la
   larghezza intrinseca del contenuto: la riga <script src="..."> nel blocco
   di codice, essendo un unico token senza spazi, sfondava così la card su
   schermi stretti invece di scorrere orizzontalmente al suo interno
   (nonostante overflow-x:auto fosse già impostato su .widget-promo pre). */
.widget-promo-text, .widget-promo-code {
    min-width: 0;
}

.widget-promo-list {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.widget-promo-list li {
    font-size: 0.92rem;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.widget-promo-code-label {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
}

.widget-promo-code-label code {
    background: var(--bg);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.widget-promo pre {
    background: #1e2530;
    color: #e8edf2;
    border-radius: 10px;
    padding: 1.25rem;
    overflow-x: auto;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
}

.widget-promo pre code {
    font-family: "SF Mono", Consolas, Menlo, monospace;
}

@media (max-width: 780px) {
    .widget-promo { padding: 1.75rem; }
    .widget-promo-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .widget-promo-text .hero-cta { justify-content: center !important; }

    /* Sotto i 780px la riga <script src="..."> supera la larghezza dello
       schermo anche a font ridotto: invece di richiedere uno scroll
       orizzontale poco visibile su un box così piccolo, va a capo così il
       frammento resta sempre leggibile per intero senza bisogno di scorrere. */
    .widget-promo pre {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-x: visible;
        text-align: left;
    }
}

.site-footer {
    width: min(94%, 1280px);
    margin: 2rem auto 1.5rem;
    padding: 1.25rem 1rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
}

.site-footer a {
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
    margin: 0 0.75rem;
}

.site-footer a:hover {
    color: var(--nursind-blue);
}

.legal-page h2, .tutorial-page h2 {
    margin-top: 1.75rem;
    font-size: 1.05rem;
}

.legal-page ul, .tutorial-page ul {
    padding-left: 1.25rem;
}

.legal-page li, .tutorial-page li {
    margin-bottom: 0.4rem;
}

dialog.modal {
    border: none;
    border-radius: 8px;
    padding: 1.75rem;
    width: min(90%, 480px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

dialog.modal::backdrop {
    background: rgba(15, 23, 32, 0.5);
}

dialog.modal h2 {
    margin-top: 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.modal-actions button {
    margin-top: 0;
}

.chat-donation-hint {
    margin: 0 1.25rem 0.6rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.chat-donation-btn {
    display: block;
    width: fit-content;
    margin: 0.4rem auto;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--nursind-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

.chat-donation-btn:hover {
    background: var(--nursind-blue-dark);
}

.chat-donation-legal {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
}

.chat-donation-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.chat-donation-checkbox input {
    margin-top: 0.2rem;
}

.chat-donation-history {
    list-style: none;
    margin: 0.4rem 1.25rem 0;
    padding: 0;
    font-size: 0.78rem;
    color: var(--muted);
    text-align: left;
}

.chat-donation-history li {
    padding: 0.2rem 0;
}

.chat-donation-history a {
    margin-left: 0.3rem;
}

.usage-bar {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
    margin-top: 0.35rem;
}

.usage-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.receipt-card {
    max-width: 700px;
}

@media print {
    header.topbar, .site-footer, .no-print {
        display: none !important;
    }
    .receipt-card {
        border: none;
        box-shadow: none;
    }
}

.chat-notice {
    margin: 0 1.5rem 0.75rem;
    font-size: 0.85rem;
}

.chat-mobile-icon-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-mobile-panel-close {
    display: none;
}

.chat-toolbar-bar,
.chat-toolbar-backdrop,
.chat-toolbar-panel {
    display: none;
}

.chat-msg-actions-toggle {
    display: none;
}

/* Regole responsive della pagina ViSo tenute in fondo al foglio di stile
   apposta: molte qui sotto devono avere la MEGLIO su regole base con la
   stessa specificità (una singola classe, es. .chat-drafting-toggle)
   definite più sopra nel file — in CSS, a parità di specificità vince
   l'ultima dichiarata, quindi vanno tenute dopo, non prima (bug reale
   osservato: .chat-drafting-toggle restava visibile su mobile finché
   questo blocco stava più in alto nel file, prima della sua regola base). */
@media (max-width: 860px) {
    .chat-body {
        flex-direction: column;
        overflow-y: auto;
    }

    /* La barra laterale sparisce come contenitore (display:contents): i suoi
       due contenuti restanti (redazione documento, allegati — utilizzo e
       donazioni sono già stati spostati sopra la chat nel markup) diventano
       schede fluttuanti indipendenti invece di restare impilate e occupare
       spazio fisso, che è la causa originale dello schiacciamento della
       chat su schermi stretti (flex-shrink:0 sulla barra). */
    .chat-sidebar,
    .chat-drafting-area {
        display: contents;
    }

    .chat-page-desc,
    .chat-submenu {
        display: none;
    }

    .chat-toolbar-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 0.4rem 1rem;
        border-top: 1px solid var(--border);
        background: var(--card-bg);
    }

    .chat-toolbar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 105;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .chat-toolbar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Sempre display:flex qui dentro: la visibilità è governata SOLO dal
       transform (stessa tecnica di header.topbar nav più sotto in questo
       file) — alternare display:none/flex via .open romperebbe la
       transizione, che non anima cambi di display. */
    .chat-toolbar-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--card-bg);
        border-top: 1px solid var(--border);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
        padding: 1rem;
        gap: 0.15rem;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        z-index: 106;
    }

    .chat-toolbar-panel.open {
        transform: translateY(0);
    }

    .chat-toolbar-item {
        text-align: left;
        background: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.45rem 0.85rem;
        font-size: 0.95rem;
        color: var(--text);
        text-decoration: none;
        cursor: pointer;
        width: 100%;
    }

    /* Le azioni per messaggio (docx/valuta/preferiti/promemoria/fascicolo/
       rigenera) ripetute su OGNI risposta sono la vera fonte
       dell'affollamento su schermo stretto: su mobile restano nascoste
       finché non si apre "⋯" per quel singolo messaggio (vedi
       .chat-msg-actions-toggle nel listener delegato su #chat-log). */
    .chat-msg-actions-toggle {
        display: inline-flex;
        background: none;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.15rem 0.5rem;
        font-size: 0.9rem;
        cursor: pointer;
        color: var(--text);
    }

    /* Scarica .docx e Rigenera risposta restano sempre visibili (azioni
       primarie, usate spesso); solo valutazione/preferiti/promemoria/
       fascicolo vanno dietro "⋯" — meno usate, non serve vederle sempre. */
    .chat-msg-actions .chat-rate,
    .chat-msg-actions > .chat-favorite-btn,
    .chat-msg-actions > .chat-promemoria-btn,
    .chat-msg-actions > .chat-fascicolo-btn {
        display: none;
    }

    .chat-msg-actions.expanded {
        flex-wrap: wrap;
    }

    .chat-msg-actions.expanded .chat-rate,
    .chat-msg-actions.expanded > .chat-favorite-btn,
    .chat-msg-actions.expanded > .chat-promemoria-btn,
    .chat-msg-actions.expanded > .chat-fascicolo-btn {
        display: inline-flex;
    }

    #drafting-panel,
    .chat-attachments-area {
        position: fixed;
        left: 1rem;
        right: 1rem;
        /* Deve superare l'altezza di .chat-input-area (~87px) SOMMATA a
           quella di .chat-mobile-toolbar (~67px), non solo quest'ultima:
           con "bottom" troppo basso la scheda copriva il campo di
           digitazione, impedendo di fatto di continuare la conversazione
           mentre il pannello era aperto (bug osservato in pratica). */
        bottom: 10.5rem;
        max-height: 50vh;
        overflow-y: auto;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        padding: 1rem;
        z-index: 40;
    }

    .chat-mobile-panel-close {
        display: block;
        margin-left: auto;
        background: none;
        border: none;
        font-size: 1.1rem;
        line-height: 1;
        padding: 0.2rem 0.4rem;
        cursor: pointer;
        color: var(--muted);
    }

    /* Utilizzo/donazioni/avviso privacy restano sopra la chat come richiesto,
       ma su schermi stretti il loro ingombro naturale sommato rischiava di
       schiacciare comunque il log a poche decine di pixel (osservato in
       pratica: ~80px su un'altezza disponibile di ~470px) — qui più
       compatti, e una min-height di sicurezza sul log garantisce comunque
       uno spazio minimo utilizzabile anche nel caso più sfavorevole. */
    .chat-usage-area,
    .chat-donation-area {
        padding: 0.4rem 0;
    }

    .chat-notice {
        margin: 0 1rem 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    /* L'avviso privacy ("Non inserire nomi, dati sanitari...") sparisce su
       mobile per lasciare più spazio alla chat — resta visibile su desktop.
       L'avviso di errore donazione (stessa classe .chat-notice ma
       .alert-error) non è toccato da questa regola, resta visibile. */
    .alert-info.chat-notice {
        display: none;
    }

    .chat-log {
        min-height: 30vh;
    }
}

.nav-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}

.nav-backdrop {
    display: none;
}

/* Il menu principale in alto (Dashboard/ViSo/Documenti/Abbonamento/Il mio
   account/Amministrazione/Esci) non ci sta su schermi stretti — va fuori
   dallo schermo invece di andare a capo. Qui diventa un pannello a
   scomparsa dal bordo destro, aperto dal pulsante ☰ (vedi layout.php). */
@media (max-width: 860px) {
    .nav-toggle-btn {
        display: block;
    }

    header.topbar nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(80%, 300px);
        background: var(--nursind-blue-dark);
        flex-direction: column;
        align-items: stretch;
        padding: 4rem 1.5rem 1.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 101;
        gap: 0.15rem;
    }

    header.topbar nav.nav-open {
        transform: translateX(0);
    }

    header.topbar nav a,
    header.topbar nav .dropdown,
    header.topbar nav .nav-feedback-btn,
    header.topbar nav .nav-help-toggle {
        margin-left: 0;
        width: 100%;
    }

    header.topbar nav a,
    header.topbar nav .nav-feedback-btn,
    header.topbar nav .nav-help-toggle {
        padding: 0.65rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        text-align: left;
    }

    header.topbar a.nav-donate-btn {
        border-radius: 0;
        box-shadow: none;
        padding: 0.65rem 0.75rem;
        justify-content: center;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(255,255,255,0.08);
        min-width: 0;
        width: 100%;
        margin-top: 0.2rem;
        border-radius: 6px;
    }

    .topbar .dropdown-menu a {
        color: #fff;
        border-bottom: none;
    }

    .topbar .dropdown-menu a:hover {
        background: rgba(255,255,255,0.15);
    }

    .nav-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 100;
    }
}

/* Anche la pagina Documenti occupa tutta la larghezza su mobile, stesso
   trattamento già usato per la pagina ViSo (vedi main.container:has(.chat-page)). */
@media (max-width: 640px) {
    main.container:has(.documents-page) {
        width: 100%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .documents-page .card {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.chat-download-docx {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    width: fit-content;
}

.chat-download-docx:hover {
    color: var(--nursind-blue-dark);
    border-color: var(--nursind-blue-dark);
}

.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    font-size: 0.85rem;
    font-family: inherit;
    text-decoration: none;
    margin: 0 0.75rem;
    cursor: pointer;
}

.footer-link-btn:hover {
    color: var(--nursind-blue);
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    max-height: 45vh;
    overflow-y: auto;
}

/* Senza questa regola l'attributo HTML "hidden" non ha alcun effetto qui:
   un foglio di stile d'autore (.cookie-banner { display:flex }) vince
   sempre sulla regola predefinita del browser [hidden] { display:none },
   che ha priorità solo nello user-agent stylesheet. Bug osservato in
   pratica: cliccando Accetta/Rifiuta l'attributo veniva impostato
   correttamente ma la striscia restava visibile a schermo. */
.cookie-banner[hidden] {
    display: none;
}

.cookie-banner-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 1 1 260px;
}

.cookie-banner-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text);
}

.cookie-banner-customize-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--nursind-blue);
    font-size: 0.8rem;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.cookie-banner-actions button {
    margin-top: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}

.cookie-category {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-top: 0.75rem;
}

.cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.cookie-category-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.cookie-category p.muted {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
}

@media (max-width: 640px) {
    .cookie-banner {
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .cookie-banner-body {
        flex: 1 1 100%;
    }

    .cookie-banner-actions {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    .cookie-banner-actions button {
        flex: 1 1 0;
    }
}

/* Variante "pillola" dell'anteprima del bottone widget, quando è impostato
   un testo accanto all'icona (vedi .widget-preview-toggle per la forma a
   cerchio di default, invariata quando il testo è vuoto). */
.widget-preview-toggle-pill {
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 0.5rem 0.9rem;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.widget-preview-toggle-pill [data-preview-toggle-icon] {
    font-size: 1.1rem;
}

.chat-msg-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.chat-rate {
    display: inline-flex;
    gap: 0.3rem;
}

.chat-rate-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0.6;
}

.chat-rate-btn:hover {
    opacity: 1;
    background: var(--bg);
}

.chat-rate-btn.active {
    opacity: 1;
    border-color: var(--nursind-blue);
    background: #e8f0fe;
}

.chat-favorite-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0.35;
    filter: grayscale(1);
}

.chat-favorite-btn:hover {
    opacity: 0.8;
    background: var(--bg);
}

.chat-favorite-btn.active {
    opacity: 1;
    filter: none;
    border-color: #d9a441;
    background: #fff8e1;
}

.chat-rate-comment {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
    max-width: 420px;
}

.chat-rate-comment[hidden] {
    /* Senza questa regola "display: flex" sopra (stessa specificità dello
       user-agent stylesheet per [hidden], ma dichiarata dopo) vince sempre,
       mostrando il campo commento anche quando l'attributo hidden è
       impostato — visto in pratica: il campo restava visibile su ogni
       risposta valutata, non solo su quelle con pollice giù. */
    display: none;
}

.chat-rate-comment-input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
}

.chat-rate-comment-send {
    margin-top: 0;
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
}

.chat-regenerate-btn,
.chat-promemoria-btn,
.chat-fascicolo-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

.chat-regenerate-btn:hover:not(:disabled),
.chat-promemoria-btn:hover,
.chat-fascicolo-btn:hover {
    color: var(--nursind-blue-dark);
    border-color: var(--nursind-blue-dark);
}

.chat-regenerate-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.chat-conversations-dialog {
    width: min(90%, 560px);
}

#conversations-search {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem;
    box-sizing: border-box;
}

.chat-picker-filters {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.chat-picker-search {
    flex: 1;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
    min-width: 0;
}

.chat-picker-anno {
    width: auto;
    flex: 0 0 auto;
    padding: 0.5rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
}

.chat-conversations-list {
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-conversations-empty {
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem 0;
}

.chat-conversation-item {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.chat-conversation-main {
    flex: 1;
    min-width: 0;
}

.chat-conversation-item form {
    margin: 0;
}

.chat-conversation-actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex-shrink: 0;
}

.chat-conversation-rename-btn,
.chat-conversation-delete-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0.6;
    margin-top: 0;
}

.chat-conversation-rename-btn:hover,
.chat-conversation-delete-btn:hover {
    opacity: 1;
    background: var(--bg);
}

.chat-conversation-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0;
}

.chat-conversation-btn:hover {
    border-color: var(--nursind-blue);
    background: var(--bg);
}

.chat-conversation-item.current .chat-conversation-btn {
    border-color: var(--nursind-blue);
    background: #e8f0fe;
}

.chat-conversation-preview {
    font-size: 0.88rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conversation-meta {
    font-size: 0.75rem;
    color: var(--muted);
}

.chat-stop-btn {
    background: #c0392b;
}

.chat-stop-btn:hover {
    background: #a5301f;
}

.dashboard-hero {
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--nursind-blue);
}

.dashboard-hero h1 {
    margin-bottom: 0.25rem;
}

.dashboard-hero-usage {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.dashboard-hero-usage h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.dashboard-grid .card {
    border-top: 3px solid var(--accent, var(--border));
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-grid .card:hover {
    box-shadow: 0 4px 14px rgba(11, 76, 124, 0.08);
}

.dashboard-card-blue { --accent: var(--nursind-blue); }
.dashboard-card-amber { --accent: #d9a441; }
.dashboard-card-green { --accent: var(--success); }
.dashboard-card-red { --accent: var(--danger); }

.dashboard-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.25rem;
}

.dashboard-card-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.dashboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent, var(--nursind-blue)) 14%, white);
}

.dashboard-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.dashboard-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 6px;
    border-bottom: 1px solid var(--border);
}

.dashboard-list li:hover {
    background: var(--bg);
}

.dashboard-list li:last-child {
    border-bottom: none;
}

.dashboard-list-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.dashboard-promemoria-item {
    border-left: 3px solid var(--border);
    padding-left: 0.6rem !important;
}

.dashboard-item-text {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-item-text strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-item-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-promemoria-item.urgenza-oggi-domani {
    border-left-color: var(--danger);
}

.dashboard-promemoria-item.urgenza-settimana {
    border-left-color: #d9a441;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--nursind-blue);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    text-align: left;
}

.dashboard-empty {
    text-align: center;
    padding: 1.75rem 0.5rem 0.75rem;
    color: var(--muted);
}

.dashboard-empty-icon {
    display: block;
    font-size: 1.9rem;
    margin-bottom: 0.5rem;
    opacity: 0.55;
}

.dashboard-promemoria-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding: 0.9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.dashboard-promemoria-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.dashboard-promemoria-form-row > div {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
}

.dashboard-promemoria-form label {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.dashboard-promemoria-form input,
.dashboard-promemoria-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: inherit;
}

.promemoria-ambito-scelta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
}

.promemoria-ambito-scelta label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    margin: 0;
}

.dashboard-list-actions button {
    margin-top: 0;
}

.icon-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    /* Quando .icon-btn è un vero <button> (non un <a>), eredita anche
       margin-top:1.25rem dalla regola base "button, .btn" pensata per
       pulsanti impilati in un form verticale — qui va sempre azzerato,
       altrimenti un <button class="icon-btn"> risulta disallineato in
       verticale rispetto a un <a class="icon-btn"> accanto sulla stessa
       riga (bug osservato in templates/vertenze/index.php, ma lo stesso
       reset serve ovunque .icon-btn sia usato su un elemento <button>). */
    margin-top: 0;
}

.icon-btn:hover {
    background: var(--border);
}

.icon-btn-danger:hover {
    background: color-mix(in srgb, var(--danger) 15%, var(--bg));
    border-color: var(--danger);
}

/* Cronologia fascicolo (templates/vertenze/show.php): linea verticale +
   pallino colorato per aggiornamento invece della lista semplice, per dare
   subito l'idea del "continuum del tempo" dell'iter. Ogni voce disegna il
   proprio segmento di linea verso la voce successiva (::before), non un'unica
   linea a piena altezza sul contenitore: le descrizioni hanno lunghezza
   variabile, quindi l'altezza di ogni voce non è prevedibile in anticipo. */
.vertenza-timeline {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.vertenza-timeline-item {
    position: relative;
    padding: 0 0 1.5rem 2rem;
}

.vertenza-timeline-item:last-child {
    padding-bottom: 0;
}

.vertenza-timeline-item::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: -1.5rem;
    width: 2px;
    background: var(--border);
}

.vertenza-timeline-item:last-child::before {
    display: none;
}

.vertenza-timeline-marker {
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 3px solid var(--border);
    z-index: 1;
}

.vertenza-timeline-positivo .vertenza-timeline-marker { border-color: var(--success); }
.vertenza-timeline-negativo .vertenza-timeline-marker { border-color: var(--danger); }
.vertenza-timeline-neutro .vertenza-timeline-marker { border-color: var(--nursind-blue); }

.vertenza-timeline-content {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.vertenza-timeline-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.vertenza-timeline-content p {
    white-space: pre-wrap;
    margin: 0.4rem 0 0;
}

.vertenza-timeline-content form {
    margin-top: 0.5rem;
}

/* Grafico "andamento accessi" nella dashboard admin (templates/admin/dashboard.php):
   SVG generato lato server, nessuna libreria JS di grafici — coerente con
   zero dipendenze esterne del resto della piattaforma, e funziona anche
   senza JavaScript attivo. overflow-x auto sul contenitore, non sull'SVG
   stesso: su schermi stretti con molti giorni si scorre invece di
   schiacciare le barre fino a renderle illeggibili.
 */
.admin-chart-scroll {
    overflow-x: auto;
    margin-top: 1rem;
}

.admin-usage-chart {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
}

.admin-chart-daylabel {
    font-size: 8px;
    fill: var(--muted);
}

.admin-chart-legend-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
}

/* Icone di aiuto (vedi View::helpIcon()): nascoste di default, rivelate in
   blocco dal pulsante ❓ nel menu (#help-mode-toggle, script in layout.php)
   così non intralciano mai l'uso ordinario della piattaforma. */
.help-icon {
    display: none;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    background: var(--nursind-blue);
    border-radius: 50%;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
    text-align: center;
    margin-left: 0.3rem;
    vertical-align: middle;
    cursor: help;
}

.help-icon:hover {
    background: var(--nursind-blue-dark);
}

body.help-mode .help-icon {
    display: inline-block;
}

/* Stessa resa delle voci di testo del menu (header.topbar a): niente sfondo
   o bordo propri, solo lo stato "attivo" reso con la sottolineatura invece
   di un colore diverso, così resta in linea visivamente con il resto del
   menu invece di sembrare un elemento a sé. */
/* Stesso identico schema di scatola di .nav-feedback-btn qui sopra (box-sizing,
   inline-flex + align-items:center, height fissa, line-height:1, margin):
   un <button> senza questi accorgimenti non si allinea verticalmente ai tag
   <a> del menu per via delle differenze di line-height/padding predefiniti
   tra i due elementi — confrontato via bounding rect prima di questo fix (il pulsante
   risultava spostato di 10px rispetto alle voci adiacenti). Cambiano solo i
   colori (trasparente/bianco invece della pillola gialla), per restare in
   linea con le voci di testo semplici invece che con Feedback. */
.nav-help-toggle {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 20px;
    background: transparent;
    border: none;
    color: #fff;
    text-decoration: none;
    margin: 0 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.nav-help-toggle[aria-pressed="true"] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Il paragrafo raggiunto da un'icona di aiuto si evidenzia brevemente, per
   far capire subito a colpo d'occhio dove si è atterrati nella pagina
   /istruzioni (che può avere decine di paragrafi). */
.help-section:target {
    animation: help-section-highlight 2.5s ease-out;
}

@keyframes help-section-highlight {
    from { background: #eef4fb; }
    to { background: transparent; }
}

/* ===== Calendario mensile ===== */

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* .btn/.btn-secondary hanno margin-top:1.25rem pensato per bottoni impilati
   in un form verticale: qui, dentro una barra di navigazione orizzontale
   già centrata con align-items:center, andrebbe solo a disallineare i
   pulsanti verso il basso. */
.calendar-nav-arrow,
.calendar-nav-today {
    margin-top: 0;
}

.calendar-nav-title {
    color: var(--nursind-blue-dark);
    font-weight: 600;
    font-size: 1.05rem;
}

.calendar-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0.75rem 0 1rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.calendar-legend-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 3px;
}

.calendar-grid-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    min-width: 560px;
}

.calendar-weekday {
    background: var(--bg);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.4rem 0;
}

/* Colonna della domenica in rosa: la griglia è 7 colonne, lunedì-domenica,
   quindi ogni 7° figlio diretto (sia l'intestazione "Dom" sia ogni cella
   giorno sotto di essa, incluse quelle fuori mese) cade sempre nella
   colonna della domenica. */
.calendar-grid > *:nth-child(7n) {
    background: #fce4ec;
}

/* Festività nazionali (calcolate in templates/calendario/index.php): stesso
   rosa della domenica, per estendere la stessa lettura visiva "giorno non
   lavorativo" invece di un colore diverso. Specificità più alta di
   .calendar-day-out apposta, per vincere anche quando un festivo cade in
   un giorno di riempimento fuori mese. */
.calendar-grid .calendar-day-festivo {
    background: #fce4ec;
}

/* .calendar-day è usata sia su <div> (giorni senza eventi/fuori mese, non
   cliccabili) sia su <button> (giorni con eventi): il reset esplicito
   evita che lo stile predefinito del browser per <button> (bordo, sfondo,
   allineamento testo) rompa la griglia — stessa lezione già imparata con
   .nav-help-toggle più sopra in questo file. */
.calendar-day {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-height: 92px;
    padding: 0.35rem;
    background: var(--card-bg);
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
}

button.calendar-day {
    cursor: pointer;
}

button.calendar-day:hover {
    background: var(--bg);
}

.calendar-day-out {
    background: var(--bg);
}

.calendar-day-number {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.calendar-day-out .calendar-day-number {
    color: var(--muted);
    font-weight: 400;
}

.calendar-day-today .calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--nursind-blue);
    color: #fff;
}

.calendar-event {
    display: block;
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.calendar-event-promemoria {
    background: #e8f0fe;
    color: var(--nursind-blue-dark);
}

.calendar-event-promemoria.calendar-event-completato {
    opacity: 0.55;
    text-decoration: line-through;
}

.calendar-event-esito-positivo {
    background: #eaf6ee;
    color: var(--success);
}

.calendar-event-esito-negativo {
    background: #fdecea;
    color: var(--danger);
}

.calendar-event-esito-neutro {
    background: #e8f0fe;
    color: var(--nursind-blue-dark);
}

.calendar-day-more {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    text-decoration: underline;
    margin-top: auto;
}

@media (max-width: 640px) {
    .calendar-day {
        min-height: 64px;
        padding: 0.25rem;
    }

    .calendar-event {
        font-size: 0.65rem;
    }

    .calendar-nav-title {
        font-size: 0.95rem;
    }
}

/* Sezioni faldone nella pagina Fascicoli (vista raggruppata,
   templates/vertenze/index.php): un faldone è un contenitore di livello
   superiore ai fascicoli che raggruppa, quindi ha un riquadro proprio ben
   visibile invece di essere solo un'etichetta in una colonna della
   tabella — <details>/<summary> nativi, aperti di default (il contenuto
   deve essere subito visibile, non nascosto dietro un click). */
.faldone-group {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
}

.faldone-group summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--nursind-blue-dark);
}

.faldone-group summary a {
    color: inherit;
}

/* Sezioni "+ Nuovo promemoria" / "+ Evento in un fascicolo" nel dialog di
   dettaglio giorno: <details>/<summary> nativi, stesso elemento già usato
   per il menu "Amministrazione" nella barra di navigazione, qui solo con
   uno stile leggero invece della resa scura del menu. */
.calendar-add-section {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.calendar-add-section summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--nursind-blue-dark);
}

.calendar-add-section form {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}