/* =====================================================================
   CENSEA CLARITY — parte del solo portale Staff (backend)
   ---------------------------------------------------------------------
   La base del tema (token, sidebar, topbar, card, stat-box, tabelle,
   form, finestre, menu, tab) sta in
   common/assets/clarity/censea-clarity-base.css, pubblicata da
   common\assets\ClarityAsset e caricata prima di questo file.
   Qui: webmail, dashboard personalizzabile, Chat Clienti, riquadro chat.
   ===================================================================== */

/* ==================================================================
   9. WEBMAIL (modulo Messaggi) — restyle scoped a .cc-webmail
   Solo grafica: nessuna modifica a logica/JS. Il layout 3 colonne con
   reading-pane AJAX arriverà come step successivo (endpoint _preview).
   ================================================================== */

/* rail cartelle: fold in stile mockup */
.cc-webmail .nav-pills .nav-link {
    color: var(--cc-ink-soft) !important;
    background: transparent !important;
    border-radius: 10px !important;
    font-weight: 540;
    display: flex; align-items: center;
    transition: background-color .15s, color .15s;
}
.cc-webmail .nav-pills .nav-link :is(i, svg.i) { color: var(--cc-muted); }
.cc-webmail .nav-pills .nav-link:hover {
    background: var(--cc-surface-2) !important;
    color: var(--cc-ink) !important;
}
.cc-webmail .nav-pills .nav-link.active {
    background: var(--cc-brand-tint) !important;
    color: var(--cc-brand-ink) !important;
    font-weight: 660;
}
.cc-webmail .nav-pills .nav-link.active :is(i, svg.i) { color: var(--cc-brand); }
.cc-webmail .nav-pills .nav-link .badge {
    border-radius: 999px;
}

/* lista account */
.cc-webmail .list-group-item {
    border: none;
    border-bottom: 1px solid var(--cc-border);
    font-size: .82rem;
    color: var(--cc-ink-soft);
    transition: background-color .12s;
}
.cc-webmail .list-group-item:hover { background: var(--cc-surface-2); }
.cc-webmail .list-group-item.active {
    background: var(--cc-brand-tint) !important;
    color: var(--cc-brand-ink) !important;
    border-color: var(--cc-border) !important;
}

/* toolbar / righe messaggio */
.cc-webmail .card-table tbody tr { border-top: 1px solid var(--cc-border); }
.cc-webmail .card-table tbody tr:hover { background: var(--cc-surface-2) !important; }
/* non letto: pallino brand + tinta tenue (le righe unread hanno .font-weight-bold) */
.cc-webmail .card-table tbody tr.font-weight-bold {
    background: color-mix(in srgb, var(--cc-brand) 5%, transparent) !important;
}
.cc-webmail .card-table tbody tr.font-weight-bold td:first-child { position: relative; }
.cc-webmail .card-table td a.text-reset { color: var(--cc-ink) !important; }
.cc-webmail .card-table td a.text-reset:hover { color: var(--cc-brand) !important; }

/* stella flag */
.cc-webmail .toggle-flag { transition: color .15s; }


/* ==================================================================
   12. WEBMAIL 3 COLONNE (folders · lista · reading-pane)
   Desktop lg+; sotto lg resta la lista mobile esistente.
   ================================================================== */
.cc-mail-desktop { display: none; }
.cc-mail-mobile  { display: block; }
@media (min-width: 992px) {
    .cc-mail-desktop { display: block; }
    .cc-mail-mobile  { display: none; }
}

/* Nell'indice dei messaggi la finestra e' tutta della webmail: la classe la
   mette la vista (index.php) e vale solo su desktop, dove esistono le tre
   colonne. Il min-height che AdminLTE da' al content-wrapper vale
   100vh - navbar - 3.5rem, ma il piede reale e' piu' alto di 3.5rem e in dev
   c'e' anche la fascia arancione: quei pochi pixel di troppo erano la barra
   di scorrimento che restava a destra. Qui il min-height lo togliamo e ci
   pensa fitMailHeight() a far tornare i conti; overflow:hidden e' la
   cintura, non la cinghia. */
@media (min-width: 992px) {
    body.cc-mail-page { overflow: hidden; }
    body.cc-mail-page .wrapper .content-wrapper { min-height: 0; }
}

/* Il pulsante tondo "nuova email" viene appeso al <body> (vedi index.php),
   quindi non eredita piu' il display:none di .cc-mail-mobile: su desktop lo
   nascondiamo qui, dove a scrivere ci pensa il pulsante nella colonna
   cartelle. */
@media (min-width: 992px) {
    #pwa-compose-fab { display: none !important; }
}

.cc-mail {
    display: grid;
    grid-template-columns: 236px 320px 1fr;
    /* L'altezza esatta la misura fitMailHeight() nella vista (indice messaggi):
       il 148px e' solo il valore di partenza, ma sopra la webmail cambiano le
       cose — banner DEV, breadcrumb, footer — e uno scarto in piu' rimetterebbe
       lo scroll di pagina che stiamo togliendo. */
    height: calc(100vh - var(--cc-mail-off, 148px));
    min-height: 340px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    overflow: hidden;
}
.cc-mail__col { border-right: 1px solid var(--cc-border); display: flex; flex-direction: column; min-height: 0; }

/* rail cartelle */
.cc-mail__fold { padding: 14px 12px; overflow: auto; }
.cc-compose {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-size: 13.5px; font-weight: 640; background: var(--cc-brand); color: #fff;
    border: 0; border-radius: 11px; padding: 11px; cursor: pointer; text-decoration: none;
    box-shadow: 0 6px 16px -6px rgba(0,123,255,.6); margin-bottom: 14px;
}
.cc-compose:hover { background: var(--cc-brand-ink); color: #fff; }
.cc-fold { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--cc-ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 540; margin: 1px 0; }
.cc-fold > :is(i, svg.i) { font-size: 15px; color: var(--cc-muted); width: 18px; text-align: center; }
.cc-fold:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-fold.is-active { background: var(--cc-brand-tint); color: var(--cc-brand-ink); font-weight: 660; }
.cc-fold.is-active > :is(i, svg.i) { color: var(--cc-brand); }
.cc-fold .n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--cc-muted); }
.cc-fold .n.hot { background: var(--cc-brand); color: #fff; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; }
.cc-mail__acc { margin-top: 8px; border-top: 1px solid var(--cc-border); padding-top: 12px; }
.cc-mail__acc .t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); padding: 4px 12px 8px; }
.cc-acc { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 12.7px; color: var(--cc-ink-soft); border-radius: 9px; text-decoration: none; }
.cc-acc:hover { background: var(--cc-surface-2); color: var(--cc-ink); }
.cc-acc.is-active { background: var(--cc-brand-tint); color: var(--cc-brand-ink); }
.cc-acc .s { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cc-acc .s.on { background: var(--cc-success); } .cc-acc .s.off { background: var(--cc-border-strong); }
.cc-acc .n { margin-left: auto; font-size: 11px; color: var(--cc-muted); }

/* colonna lista (righe .cc-mrow, .cc-mscroll, .cc-mlist__top/__empty, .cc-read__empty:
   in common/assets/clarity/censea-clarity-base.css, condivise con la chat del portale clienti) */
.cc-mail__list { display: flex; flex-direction: column; min-height: 0; }
.cc-mlist__tools { display: flex; align-items: center; gap: 1px; padding: 5px 8px; border-bottom: 1px solid var(--cc-border); flex-wrap: wrap; }
.cc-mlist__tools .btn { padding: 5px 9px; }
.cc-mlist__foot { border-top: 1px solid var(--cc-border); padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cc-pp { padding: 0 4px; color: var(--cc-muted); text-decoration: none; }
.cc-pp:hover { color: var(--cc-brand); }
.cc-pp.is-active { color: var(--cc-brand); font-weight: 700; }

/* selezione: la checkbox prende il posto dell'avatar (allineata e centrata) */
.cc-mrow__av { transition: opacity .12s; }
.cc-mrow__cb { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); z-index: 3; display: none; margin: 0; }
.cc-mrow:hover .cc-mrow__cb, .cc-mrow.is-checked .cc-mrow__cb { display: block; }
.cc-mrow:hover .cc-mrow__av, .cc-mrow.is-checked .cc-mrow__av { opacity: 0; }
.cc-mrow:hover::after, .cc-mrow.is-checked::after { display: none; }
.cc-mrow__subj { font-size: 13px; color: var(--cc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cc-mrow.unread .cc-mrow__subj { font-weight: 640; color: var(--cc-ink); }
.cc-mrow__ic { display: flex; gap: 9px; margin-top: 6px; color: var(--cc-muted); font-size: 12px; align-items: center; }
.cc-mrow__ic .toggle-flag { text-decoration: none; }

/* reading pane */
.cc-mail__read { display: flex; flex-direction: column; min-height: 0; background: var(--cc-surface-2); border-right: 0; }
.cc-read__spin { margin: auto; color: var(--cc-muted); font-size: 22px; }
/* stile del contenuto _preview.php dentro il pannello */
.cc-mail__read .message-preview-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.cc-mail__read .preview-header { padding: 16px 22px; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface); }
.cc-mail__read .preview-subject { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--cc-ink); margin-bottom: 10px; text-wrap: balance; }
.cc-mail__read .preview-meta { font-size: 12.5px; color: var(--cc-muted); }
.cc-mail__read .preview-meta .meta-item { margin-bottom: 2px; }
.cc-mail__read .preview-meta strong { color: var(--cc-ink-soft); font-weight: 600; }
.cc-mail__read .preview-actions .btn-group-vertical { display: inline-flex; }
.cc-mail__read .preview-actions .btn { border-radius: 9px; margin: 1px; }
.cc-mail__read .preview-body { padding: 20px 24px 30px; overflow: auto; flex: 1; font-size: 14px; color: var(--cc-ink-soft); line-height: 1.65; }
.cc-mail__read .preview-body .html-content img { max-width: 100%; height: auto; }
.cc-mail__read .preview-attachments { padding: 0 24px 22px; }
.cc-mail__read .attachment-item { border: 1px solid var(--cc-border); border-radius: 12px; margin-bottom: 8px; }
/* iframe reading pane (view.php completo con collegamenti/creazioni) */
.cc-read__frame { flex: 1; width: 100%; border: 0; background: var(--cc-surface); display: none; }
/* checkbox selezione nativa (affidabile) */
.cc-cb { width: 18px; height: 18px; accent-color: var(--cc-brand); cursor: pointer; margin: 0; vertical-align: top; }

/* stella flag SVG: outline = non contrassegnato, .on = piena (contrassegnato) */
svg.cc-star.on { fill: currentColor; }

/* ---- coerenza dimensione caratteri nel modulo Messaggi ---- */
/* toolbar lista: tutti i pulsanti alla stessa scala */
.cc-mail__list .cc-mlist__tools .btn { font-size: 13px; padding: 5px 9px; line-height: 1.2; }
.cc-mail__list .cc-mlist__tools .btn > :is(i, svg.i) { font-size: 14px; margin: 0; }
.cc-mail__fold .cc-compose { font-size: 13.5px; }
/* Reading-pane: la colonna Azioni/Collega ha larghezza FISSA e compatta,
   così NON cresce in proporzione al pannello. Tutto lo spazio del reading
   pane (incluso quello recuperato restringendo l'elenco) va al CORPO del
   messaggio, che si espande a riempire il resto. */
body.cc-frame .row:has(> .col-md-3) { flex-wrap: nowrap; align-items: flex-start; }
body.cc-frame .row > .col-md-9 { flex: 1 1 0; max-width: none; min-width: 0; }
body.cc-frame .row > .col-md-3 { flex: 0 0 210px; max-width: 210px; }

/* reading-pane (view.php in iframe): uniforma i pulsanti, niente più bottoni sovradimensionati */
body.cc-frame .btn { font-size: 0.8125rem; }
body.cc-frame .btn-sm { font-size: 0.78rem; }
body.cc-frame .page-header { margin-bottom: 14px; }
/* de-colorizzazione icone: neutre, dentro riquadri grigi ben visibili */
body.cc-frame .avatar { background: var(--cc-bg) !important; color: var(--cc-ink-soft) !important; }
body.cc-frame .page-header .btn {
    background: var(--cc-bg) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-ink-soft) !important;
    border-radius: 9px;
    box-shadow: none !important;
}
body.cc-frame .page-header .btn:hover {
    background: var(--cc-surface-2) !important;
    border-color: var(--cc-border-strong) !important;
    color: var(--cc-ink) !important;
}
body.cc-frame .list-group-item > :is(i, svg.i),
body.cc-frame .list-group-item .fas,
body.cc-frame .list-group-item .far,
body.cc-frame .form-label :is(i, svg.i) { color: var(--cc-muted) !important; }

/* ---- reading-pane: cosa scorre e cosa no ----
   Dentro l'iframe scorre soltanto la parte bassa del messaggio (corpo e
   allegati). Restano fermi: la barra Rispondi/Inoltra/Elimina, l'oggetto e
   il blocco mittente-data — leggendo una mail lunga si deve sapere sempre
   che cosa si sta leggendo e poter rispondere senza tornare su.
   La catena min-height:0 su ogni livello e' obbligatoria: senza, un figlio
   flex non scende mai sotto la sua altezza naturale e a scorrere torna il
   documento intero dell'iframe. */
body.cc-frame {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.cc-frame .cc-frame-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 14px;
}
body.cc-frame .cc-frame-wrap > .row { flex: 1; min-height: 0; }
/* align-self invece di height:100%: la regola qui sopra mette il .row in
   align-items:flex-start, che da solo lascerebbe le colonne alte quanto il
   loro contenuto. */
body.cc-frame .cc-frame-wrap > .row > .col-md-9 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* la colonna "Collega a" scorre per conto suo, non trascina il messaggio */
body.cc-frame .cc-frame-wrap > .row > .col-md-3 {
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.cc-frame .cc-msg-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
body.cc-frame .cc-msg-card > .card-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.cc-frame .cc-msg-card .cc-msg-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* lo spazio a destra tiene la barra staccata dal testo */
    padding-right: 6px;
}

/* ---- il corpo dell'email non deve sfondare la pagina ----
   Il messaggio del mittente sta in un iframe, e una newsletter disegnata per
   il monitor resta larga anche dopo le regole che le iniettiamo: il codice in
   view.php la rimpicciolisce con una scala, ma la scala si ferma a 0.55 e
   qualcosa puo' comunque restare fuori.
   Due accorgimenti:
   - width:1px con min-width:100% sull'iframe. iOS non rispetta la larghezza
     dichiarata di un iframe: lo allarga fino al contenuto, e con width:100%
     era l'iframe stesso a sporgere dallo schermo, portandosi dietro la
     pagina - il corpo del messaggio finiva fuori a destra e non si poteva
     raggiungere. Con questa coppia la larghezza la detta il contenitore.
   - il riquadro scorre di lato per conto suo: se malgrado tutto l'iframe
     risultasse piu' largo, a scorrere e' questo riquadro e non la pagina
     intera. (Il caso piu' comune - il messaggio piu' largo dello schermo pur
     rimpicciolito al minimo - lo risolve view.php facendo scorrere il corpo
     dentro l'iframe.) */
.cc-mail-frame {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.cc-mail-frame > iframe {
    display: block;
    width: 1px;
    min-width: 100%;
    max-width: 100%;
}

/* ---- email aperta sul telefono: due righe di pulsanti, non otto ----
   Il motivo per cui finivano uno per riga e' in site.css:
       @media (max-width: 768px) { .page-header .d-flex {
           flex-direction: column; align-items: stretch !important; } }
   una regola generica che manda IN COLONNA qualunque .d-flex dentro un
   .page-header. Qui la annulliamo per la sola barra del messaggio: torna in
   riga, e i due gruppi — azioni (indietro, Rispondi, Tutti, Inoltra) e
   strumenti (stella, letto, stampa, elimina) — prendendo tutta la larghezza
   vanno a capo come blocchi, dando due righe nette. Serve la stessa soglia
   di site.css (768px, non 767.98) o a 768 esatti resterebbe la colonna.
   L'align-items va !important perche' quello di site.css lo e'. */
@media (max-width: 768px) {
    .page-header .cc-msg-toolbar,
    .page-header .cc-msg-actions,
    .page-header .cc-msg-tools {
        flex-direction: row !important;
        align-items: center !important;
    }
    .page-header .cc-msg-toolbar { flex-wrap: wrap; }
    /* aria sopra: in PWA l'intestazione di pagina e' nascosta e la barra
       finirebbe incollata al bordo alto dello schermo */
    .page-header.cc-msg-header { margin-top: 10px; }
    .page-header .cc-msg-actions {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        min-width: 0;
    }
    /* mobile-enhanced.css da' a ogni .btn min-height e min-width 44px con
       padding .5rem 1rem: su questa barra sono riquadri molto piu' grandi del
       testo che contengono. Qui i pulsanti tornano della loro misura. */
    .page-header .cc-msg-toolbar .btn {
        min-height: 36px;
        min-width: 0;
        padding: 5px 10px;
        font-size: .8125rem;
        white-space: nowrap;
    }
    .page-header .cc-msg-actions .btn { flex: 0 1 auto; }
    /* l'indietro e le icone sono quadrati: larghezza sul contenuto */
    .page-header .cc-msg-actions .cc-msg-back { flex: 0 0 auto; padding: 5px 8px; }
    .page-header .cc-msg-tools {
        flex: 1 1 100%;
        margin-left: 0 !important;
        justify-content: flex-end;
    }
    /* il nome dell'account sta a sinistra e cede spazio alle icone */
    .page-header .cc-msg-tools > .badge {
        margin-right: auto !important;
        max-width: 45%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .page-header .cc-msg-tools .btn { flex: 0 0 auto; padding: 5px 8px; }
}


/* ============================================================
   DASHBOARD PERSONALIZZABILE — edit mode, widget, cassetto
   ============================================================ */

/* Header: azioni a destra */
.cc-phead__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-btn-personalizza {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--cc-surface); color: var(--cc-ink-soft);
    border: 1px solid var(--cc-border-strong); border-radius: 10px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.cc-btn-personalizza:hover { background: var(--cc-brand-tint); color: var(--cc-brand); border-color: var(--cc-brand); }
.cc-dash.is-editing .cc-btn-personalizza { background: var(--cc-brand); color: #fff; border-color: var(--cc-brand); }

/* Barra azioni edit mode */
.cc-edit-bar {
    display: none; align-items: center; justify-content: space-between; gap: 14px;
    background: var(--cc-brand-tint); border: 1px solid var(--cc-brand);
    border-radius: var(--cc-radius-sm); padding: 10px 16px; margin: 4px 0 18px;
    position: sticky; top: 8px; z-index: 30; flex-wrap: wrap;
}
.cc-edit-bar.is-visible { display: flex; }
.cc-edit-bar__hint { font-size: 12.5px; color: var(--cc-ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.cc-edit-bar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-edit-bar__width { display: inline-flex; align-items: center; gap: 10px; }
.cc-edit-bar__width label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--cc-ink-soft); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cc-edit-bar__width input[type="range"] { width: 160px; max-width: 40vw; accent-color: var(--cc-brand); cursor: pointer; }
.cc-eb--ghost { background: var(--cc-surface); color: var(--cc-ink-soft); padding: 6px 10px; font-size: 12px; }
.cc-eb {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--cc-border-strong); background: var(--cc-surface); color: var(--cc-ink-soft);
}
.cc-eb--save { background: var(--cc-brand); color: #fff; border-color: var(--cc-brand); }
.cc-eb--save.is-loading { opacity: .6; pointer-events: none; }
.cc-eb--reset { color: var(--cc-danger); border-color: var(--cc-border-strong); }
.cc-eb:hover { filter: brightness(.98); }

/* Wrapper widget + controlli (visibili solo in edit) */
.cc-widget { position: relative; }
.cc-stats > .cc-widget > .cc-stat { height: 100%; }
.cc-widget__ctrl { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; gap: 4px; }
.cc-dash.is-editing .cc-widget__ctrl { display: inline-flex; }
.cc-widget__handle, .cc-widget__hide, .cc-widget__add {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--cc-border-strong);
    background: var(--cc-surface); color: var(--cc-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; padding: 0;
    box-shadow: var(--cc-shadow-sm);
}
.cc-widget__handle { cursor: grab; }
.cc-widget__hide:hover { color: var(--cc-danger); border-color: var(--cc-danger); }
.cc-widget__add:hover { color: var(--cc-brand); border-color: var(--cc-brand); }
.cc-dash.is-editing .cc-widget { outline: 1px dashed var(--cc-border-strong); outline-offset: 3px; border-radius: var(--cc-radius-sm); }
.cc-dash.is-editing .cc-widget:hover { outline-color: var(--cc-brand); }

/* Placeholder di drop */
.cc-drop {
    border: 2px dashed var(--cc-brand); border-radius: var(--cc-radius-sm);
    background: var(--cc-brand-tint); min-height: 64px; margin: 0 0 2px;
}

/* In edit mode: colonne/zone con altezza minima = bersagli di rilascio ampi,
   anche quando restano vuote o con pochi widget. */
.cc-dash.is-editing .cc-cols { align-items: start; }
.cc-dash.is-editing .cc-col {
    min-height: 160px; padding: 10px;
    border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-sm);
    background: var(--cc-surface-2);
}
.cc-dash.is-editing #cc-zone-stats {
    min-height: 96px; padding: 8px; border-radius: var(--cc-radius-sm);
    outline: 1px dashed var(--cc-border-strong); outline-offset: 2px;
}
/* segnaposto "trascina qui" per una zona vuota (classe gestita dal JS) */
.cc-dash.is-editing .cc-zone-empty::after {
    content: "Trascina qui i widget";
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; color: var(--cc-muted); font-size: 12.5px; font-style: italic;
}

/* Cassetto widget disponibili */
.cc-tray {
    display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
    background: var(--cc-surface-2); border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius); padding: 16px;
}
.cc-tray.is-visible { display: grid; }
.cc-tray__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cc-muted); margin-bottom: 10px; }
.cc-tray__list { display: flex; flex-direction: column; gap: 8px; min-height: 48px; }
.cc-tray__empty { font-size: 12.5px; color: var(--cc-muted); font-style: italic; padding: 6px 2px; }

/* Chip (widget disponibile / placeholder aggiunto) */
.cc-widget--chip { outline: none !important; }
.cc-chip {
    display: flex; align-items: center; gap: 10px;
    background: var(--cc-surface); border: 1px solid var(--cc-border-strong);
    border-radius: 10px; padding: 9px 12px;
}
.cc-chip__ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cc-brand-tint); color: var(--cc-brand); display: grid; place-items: center; font-size: 14px; flex: none; }
.cc-chip__tx { flex: 1; font-size: 13px; font-weight: 600; color: var(--cc-ink); }
.cc-chip .cc-widget__add { position: static; }

/* Widget: Collegamenti rapidi */
.cc-ql { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.cc-ql__item {
    display: flex; align-items: center; gap: 11px; text-decoration: none;
    background: var(--cc-surface-2); border: 1px solid var(--cc-border);
    border-radius: 11px; padding: 11px 13px; transition: background .15s, border-color .15s;
}
.cc-ql__item:hover { background: var(--cc-brand-tint); border-color: var(--cc-brand); }
.cc-ql__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--cc-brand-tint); color: var(--cc-brand); display: grid; place-items: center; font-size: 15px; flex: none; }
.cc-ql__tx { font-size: 13px; font-weight: 600; color: var(--cc-ink); }

/* Widget: Note personali */
.cc-note { padding: 14px; }
.cc-note-input {
    width: 100%; resize: vertical; min-height: 120px;
    border: 1px solid transparent; border-radius: 10px; padding: 10px 12px;
    font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--cc-ink);
    background: var(--cc-surface-2);
}
.cc-note-input[readonly] { background: transparent; cursor: default; }
.cc-note-input:not([readonly]) { border-color: var(--cc-border-strong); background: var(--cc-surface); }
.cc-note-input:focus { outline: none; border-color: var(--cc-brand); }

@media (max-width: 640px) {
    .cc-tray { grid-template-columns: 1fr; }
    .cc-ql { grid-template-columns: 1fr; }
}

/* ==================================================================
   16. CHAT CLIENTI (modulo multichat, pagina desktop)
   Due colonne come la webmail: elenco conversazioni · conversazione.
   Riusa .cc-mrow / .cc-search / .cc-cbadge / .cc-pill della webmail e
   della dashboard; qui solo quel che la chat ha in piu' (bolle,
   barra di scrittura, selezione messaggi). L'altezza la misura
   fitChatHeight() nella vista, come fitMailHeight() per la webmail.
   ================================================================== */
.cc-pill--violet { --pc: var(--cc-violet); }
a.cc-pill { text-decoration: none; }
a.cc-pill:hover { background: color-mix(in srgb, var(--pc) 22%, transparent); color: var(--pc); }

/* Il resto della Chat Clienti (contenitore, elenco, bolle, barra di scrittura) e' in
   common/assets/clarity/censea-clarity-base.css: lo usa anche la chat del portale clienti. */

/* ==================================================================
   17. RIQUADRO CHAT (backend\widgets\ChatWidget)
   Discussione interna nelle schede pratica e comunicazione fiscale.
   Stesso linguaggio della Chat Clienti (sezione 16): fondo chiaro,
   bolle con bordo, uscita in tinta brand, pulsanti tondi a icona.
   L'altezza dell'area messaggi resta per-widget, inline nella vista.
   ================================================================== */
.cw-card .card-header { display: flex; align-items: center; gap: 10px; }
.cw-card .card-header .card-title { display: flex; align-items: center; gap: 9px; float: none; }
.cw-card .card-header .card-title svg.i { color: var(--cc-brand); font-size: 17px; }
.cw-card .card-tools { margin-left: auto; float: none; }
.cw-card .card-tools .cc-pill::before { display: none; }

.cw-messages-area { overflow-y: auto; padding: 16px 18px; background: var(--cc-surface-2); display: flex; flex-direction: column; gap: 10px; }
.cw-empty { margin: auto; padding: 24px; text-align: center; color: var(--cc-muted); font-size: 13.5px; }
.cw-empty svg.i { display: block; margin: 0 auto 12px; font-size: 40px; opacity: .35; }

/* messaggi */
.cw-message { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; }
.cw-message.cw-incoming { align-self: flex-start; }
.cw-message.cw-outgoing { align-self: flex-end; flex-direction: row-reverse; }
.cw-avatar {
    width: 30px; height: 30px; border-radius: 9px; flex: none;
    display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: -.02em;
}
.cw-bubble {
    min-width: 140px; padding: 7px 12px 8px; border-radius: 14px; overflow-wrap: anywhere;
    background: var(--cc-surface); border: 1px solid var(--cc-border); box-shadow: var(--cc-shadow-sm);
}
.cw-incoming .cw-bubble { border-bottom-left-radius: 4px; }
.cw-outgoing .cw-bubble {
    background: color-mix(in srgb, var(--cc-brand) 8%, #fff);
    border-color: color-mix(in srgb, var(--cc-brand) 17%, #fff);
    border-bottom-right-radius: 4px;
}
.cw-bubble-header { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; }
.cw-author { font-size: 12px; font-weight: 650; color: var(--cc-brand-ink); }
.cw-outgoing .cw-author { color: var(--cc-ink-soft); }
.cw-time { font-size: 11px; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cw-actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.cw-message:hover .cw-actions, .cw-message:focus-within .cw-actions { opacity: 1; }
@media (hover: none) { .cw-actions { opacity: 1; } }
.cw-action-btn {
    width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    display: grid; place-items: center; background: transparent; color: var(--cc-muted); font-size: 13px;
}
.cw-action-btn:hover { background: var(--cc-bg); color: var(--cc-ink); }
.cw-action-delete:hover { background: color-mix(in srgb, var(--cc-danger) 10%, #fff); color: var(--cc-danger); }
.cw-text { font-size: 13.8px; line-height: 1.5; color: var(--cc-ink); }
.cw-reply-quote {
    margin: 2px 0 5px; padding: 5px 9px; border-radius: 8px; font-size: 12.3px; color: var(--cc-ink-soft);
    background: var(--cc-brand-tint); border-left: 3px solid var(--cc-brand);
}
.cw-reply-quote strong { color: var(--cc-brand-ink); margin-right: 4px; font-weight: 650; }

/* audio: lettore condiviso .cm-audio in css/chat-media.css */
.cw-bubble .cm-audio { margin: 2px 0; }

/* file */
.cw-file-message {
    display: flex; align-items: center; gap: 10px; margin: 3px 0; padding: 8px 10px;
    background: var(--cc-surface-2); border: 1px solid var(--cc-border); border-radius: 10px;
}
.cw-outgoing .cw-file-message { background: rgba(255,255,255,.75); }
.cw-file-icon { font-size: 20px; color: var(--cc-brand); }
.cw-file-info { flex: 1; min-width: 0; }
.cw-file-name { font-size: 13px; font-weight: 600; color: var(--cc-ink); word-break: break-all; }
.cw-file-info small { color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cw-file-dl {
    width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
    color: var(--cc-ink-soft); background: var(--cc-surface); border: 1px solid var(--cc-border); font-size: 14px;
}
.cw-file-dl:hover { color: var(--cc-brand); border-color: var(--cc-border-strong); }

/* barre sopra la scrittura (risposta, allegato) ed emoji */
.cw-reply-bar, .cw-attach-bar {
    display: none; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 6px 8px 6px 11px;
    font-size: 13px; color: var(--cc-ink-soft); background: var(--cc-brand-tint);
    border-left: 3px solid var(--cc-brand); border-radius: 0 10px 10px 0;
}
.cw-reply-bar.cw-active, .cw-attach-bar.cw-active { display: flex; }
.cw-attach-bar svg.i { color: var(--cc-brand); flex: none; }
.cw-reply-bar-text, .cw-attach-bar-text { flex: 1; min-width: 0; }
.cw-attach-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-reply-bar-close, .cw-attach-bar-close {
    width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; flex: none; cursor: pointer;
    display: grid; place-items: center; background: transparent; color: var(--cc-muted); font-size: 14px;
}
.cw-reply-bar-close:hover, .cw-attach-bar-close:hover { background: var(--cc-surface); color: var(--cc-danger); }
.cw-emoji-picker {
    display: none; margin: 8px 12px 0; padding: 8px; background: var(--cc-surface);
    border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm);
    box-shadow: 0 16px 32px -18px rgba(16,24,43,.35);
}
.cw-emoji-picker.cw-active { display: block; }
.cw-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 2px; }
.cw-emoji-item { cursor: pointer; font-size: 20px; padding: 4px; text-align: center; border-radius: 8px; }
.cw-emoji-item:hover { background: var(--cc-bg); }

/* scrittura */
.cw-input-area { padding: 10px 12px; background: var(--cc-surface); border-top: 1px solid var(--cc-border); }
.cw-input-normal { display: flex; align-items: flex-end; gap: 6px; }
.cw-input-normal.cw-hidden { display: none; }
.cw-input-rec { display: none; align-items: center; gap: 10px; }
.cw-input-rec.cw-active { display: flex; }
.cw-textarea {
    flex: 1; min-height: 38px; max-height: 96px; resize: none; outline: none;
    padding: 8px 15px; border-radius: 19px; font: inherit; font-size: 14px; line-height: 1.45; color: var(--cc-ink);
    background: var(--cc-surface); border: 1px solid var(--cc-border-strong);
}
.cw-textarea::placeholder { color: var(--cc-muted); }
.cw-textarea:focus { border-color: var(--cc-brand); box-shadow: 0 0 0 .15rem var(--cc-brand-tint); }
.cw-btn-circle {
    width: 38px; height: 38px; border-radius: 50%; flex: none; padding: 0; cursor: pointer;
    display: grid; place-items: center; font-size: 17px;
    background: var(--cc-surface); color: var(--cc-ink-soft); border: 1px solid var(--cc-border);
    transition: background .15s, color .15s, border-color .15s;
}
.cw-btn-circle:hover { background: var(--cc-bg); color: var(--cc-ink); border-color: var(--cc-border-strong); }
.cw-btn-send { background: var(--cc-brand); border-color: var(--cc-brand); color: #fff; box-shadow: 0 6px 16px -6px rgba(0,123,255,.6); }
.cw-btn-send:hover { background: var(--cc-brand-ink); border-color: var(--cc-brand-ink); color: #fff; }
.cw-rec-cancel:hover { background: color-mix(in srgb, var(--cc-danger) 10%, #fff); color: var(--cc-danger); border-color: color-mix(in srgb, var(--cc-danger) 25%, #fff); }
.cw-rec-stop { background: var(--cc-danger); border-color: var(--cc-danger); color: #fff; }
.cw-rec-stop:hover { background: #d92d20; border-color: #d92d20; color: #fff; }
.cw-rec-info { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; }
.cw-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc-danger); animation: cc-rec-pulse 1s ease-in-out infinite; }
.cw-rec-timer { min-width: 48px; font-size: 15px; font-weight: 650; color: var(--cc-danger); font-variant-numeric: tabular-nums; }

/* ── Schede di dettaglio (pratica, comunicazione fiscale) ──
   Griglia etichetta/valore, elenco di email e allegati con chip e pulsanti
   tondi, contatore nelle intestazioni delle card. */
.cc-phead__sopra { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cc-muted); text-decoration: none; margin-bottom: 4px; }
a.cc-phead__sopra:hover { color: var(--cc-brand); text-decoration: none; }
.cc-phead__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cc-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 0; }
.cc-kv > div { min-width: 0; }
.cc-kv dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 3px; }
.cc-kv dd { margin: 0; font-size: 14px; color: var(--cc-ink); overflow-wrap: anywhere; }
.cc-kv .cc-kv__intera { grid-column: 1 / -1; }
.cc-kv__testo { white-space: pre-wrap; background: var(--cc-surface-2, var(--cc-bg)); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm); padding: 10px 12px; max-height: 300px; overflow-y: auto; }
@media (max-width: 575.98px) { .cc-kv { grid-template-columns: 1fr; } }
.cc-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--cc-ink-soft); background: var(--cc-bg); border: 1px solid var(--cc-border); vertical-align: 1px; }
.cc-alist { list-style: none; margin: 0; padding: 0; }
.cc-alist__row { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-top: 1px solid var(--cc-border); }
.cc-alist__row:first-child { border-top: 0; }
.cc-alist__ic { --ac: var(--cc-brand); flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ac); background: color-mix(in srgb, var(--ac) 12%, transparent); }
.cc-alist__ic svg.i { width: 17px; height: 17px; }
.cc-alist__tx { flex: 1; min-width: 0; }
.cc-alist__nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--cc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cc-alist__nome:hover { color: var(--cc-brand); text-decoration: none; }
.cc-alist__meta { font-size: 12px; color: var(--cc-muted); }
.cc-alist__az { display: flex; gap: 2px; flex: none; }
.cc-alist__vuota { padding: 14px 16px; font-size: 13px; color: var(--cc-muted); }
.cc-ibtn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 0; background: none; color: var(--cc-ink-soft); padding: 0; transition: background-color .15s, color .15s; }
.cc-ibtn:hover, .cc-ibtn:focus { background: var(--cc-bg); color: var(--cc-brand); text-decoration: none; outline: none; }
.cc-ibtn--rosso:hover, .cc-ibtn--rosso:focus { color: var(--cc-danger); }
/* pratica: documento visibile al cliente nel portale (verde) o interno allo studio (spento) */
.cc-ibtn--cliente { color: var(--cc-success); background: color-mix(in srgb, var(--cc-success) 12%, transparent); }
.cc-ibtn--interno { color: var(--cc-muted); opacity: .75; }
.cc-pratica-portale {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--cc-radius, 10px);
    background: var(--cc-surface); border: 1px solid var(--cc-border); font-size: 13px; color: var(--cc-ink-soft);
}
.cc-pratica-portale > svg.i { flex: none; margin-top: 2px; color: var(--cc-brand); }
.cc-ibtn svg.i { width: 16px; height: 16px; }
.cc-carica { display: flex; flex-direction: column; gap: 10px; }
.cc-carica input[type=file] { font-size: 13px; color: var(--cc-ink-soft); width: 100%; }
.cc-carica input[type=file]::file-selector-button { margin-right: 10px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--cc-border-strong); background: var(--cc-surface); color: var(--cc-ink); font-weight: 600; cursor: pointer; }

/* Riquadro modale (.cc-riq, js/riquadro-istanza.js e anteprima allegati): in
   common/assets/clarity/censea-clarity-base.css, condiviso col portale dipendenti. */

/* Conferme e avvisi del portale (.cc-dlg): in css/dialogo.css, accanto a js/dialogo.js. */