/* Finestra della chat cifrata. I colori si prendono dalle variabili della piattaforma
   che la ospita, con valori di riserva. */
.msg {
  --msg-acc: var(--petrol, #1F6F78);
  --msg-acc-soft: var(--petrol-soft, #E1EEEF);
  --msg-ink: var(--ink, #14213D);
  --msg-muted: var(--muted, #64708A);
  --msg-line: var(--line, #DFE5E5);
  --msg-card: var(--card, #FFFFFF);
  --msg-ground: var(--ground, #F3F5F4);
  --msg-r: var(--r, 9px);
  color: var(--msg-ink);
}
.msg button { font: inherit; cursor: pointer; border: 1px solid var(--msg-line); background: var(--msg-card); color: var(--msg-ink); border-radius: var(--r-sm, 6px); padding: 7px 12px; }
.msg button.primary { background: var(--msg-acc); border-color: var(--msg-acc); color: #fff; }
.msg button:disabled { opacity: .55; cursor: default; }
.msg-link { border: 0 !important; background: none !important; color: var(--msg-acc) !important; padding: 4px 6px !important; text-decoration: underline; }
.msg-carica, .msg-vuota { padding: 28px; text-align: center; color: var(--msg-muted); }
.msg-avviso { padding: 10px 14px; border-radius: var(--msg-r); background: var(--msg-acc-soft); font-size: 13.5px; margin: 8px 0; }
.msg-warn { background: var(--warn-bg, #FBF1DE); color: var(--warn-fg, #7E4F0A); }
.msg-err { background: var(--bad-bg, #F8E5E3); color: var(--bad-fg, #8C2F2F); }
.msg-err-testo { color: var(--bad-fg, #8C2F2F); min-height: 1.4em; font-size: 13.5px; }
.msg-muto { color: var(--msg-muted); }
.msg-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg-nascosto { display: none; }

/* Attivazione e sblocco */
.msg-pannello { max-width: 620px; margin: 8px auto; background: var(--msg-card); border: 1px solid var(--msg-line); border-radius: var(--r-lg, 14px); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.msg-pannello h2 { margin: 0; }
.msg-pannello p { margin: 0; }
.msg-forte { font-weight: 500; }
.msg-codice { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 19px; letter-spacing: .06em; padding: 14px; text-align: center; background: var(--msg-ground); border: 1px dashed var(--msg-acc); border-radius: var(--msg-r); word-break: break-word; user-select: all; }
.msg-campo-codice { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 16px; padding: 10px; border: 1px solid var(--field, #CBD4D6); border-radius: var(--r-sm, 6px); width: 100%; text-transform: uppercase; }
.msg-spunta { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.msg-perso summary { cursor: pointer; color: var(--msg-acc); }
.msg-perso p { margin: 8px 0; }

/* Griglia: elenco conversazioni + conversazione */
.msg-griglia { display: grid; grid-template-columns: 260px 1fr; gap: 14px; min-height: 520px; }
.msg-griglia.msg-uno { grid-template-columns: 1fr; }
.msg-lato { min-width: 0; }
.msg-canali { display: flex; flex-direction: column; gap: 4px; }
.msg-canali-mobile { display: none; width: 100%; padding: 8px; border-radius: var(--r-sm, 6px); border: 1px solid var(--msg-line); font: inherit; }
.msg-canale { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border-color: transparent !important; background: transparent !important; padding: 10px 12px !important; }
.msg-canale:hover { background: var(--msg-card) !important; }
.msg-canale[aria-current="true"] { background: var(--msg-card) !important; border-color: var(--msg-line) !important; box-shadow: var(--shadow-1, none); }
.msg-canale-testo { display: flex; flex-direction: column; min-width: 0; }
.msg-canale-testo b { font-weight: 600; }
.msg-canale-testo span { font-size: 12.5px; color: var(--msg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-badge { background: var(--msg-acc, var(--petrol, #1F6F78)); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 600; min-width: 22px; padding: 1px 7px; text-align: center; flex-shrink: 0; }

.msg-vista { display: flex; flex-direction: column; min-width: 0; background: var(--msg-card); border: 1px solid var(--msg-line); border-radius: var(--r-lg, 14px); overflow: hidden; height: min(72vh, 760px); min-height: 460px; }
.msg-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--msg-line); flex-wrap: wrap; }
.msg-testa-testo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.msg-testa h2 { margin: 0; font-size: 17px; }
.msg-sotto { font-size: 12.5px; color: var(--msg-muted); }
.msg-conn { width: 8px; height: 8px; border-radius: 50%; background: var(--msg-line); display: inline-block; align-self: center; }
.msg-conn-ok { background: var(--ok, #2E6E4C); }
.msg-avvisi { padding: 0 16px; }
.msg-lista { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--msg-ground); }
.msg-precedenti { align-self: center; }
.msg-giorno { align-self: center; margin: 10px 0 4px; }
.msg-giorno span { font-size: 12px; color: var(--msg-muted); background: var(--msg-card); border: 1px solid var(--msg-line); border-radius: 999px; padding: 2px 10px; }
.msg-riga { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.msg-mia { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--msg-acc-soft); color: var(--msg-acc); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.msg-bolla { background: var(--msg-card); border: 1px solid var(--msg-line); border-radius: 12px 12px 12px 4px; padding: 7px 11px 5px; min-width: 0; }
.msg-mia .msg-bolla { background: var(--msg-acc-soft); border-color: transparent; border-radius: 12px 12px 4px 12px; }
.msg-autore { font-size: 12.5px; font-weight: 600; color: var(--msg-acc); }
.msg-autore span { font-weight: 400; color: var(--msg-muted); }
.msg-testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-ora { font-size: 11px; color: var(--msg-muted); text-align: right; margin-top: 2px; }
.msg-firma-ko { font-size: 12px; color: var(--bad-fg, #8C2F2F); }
.msg-file { display: flex !important; gap: 10px; align-items: center; text-align: left; margin: 4px 0; background: var(--msg-card) !important; }
.msg-file > span:last-child { display: flex; flex-direction: column; }
.msg-file > span:last-child span { font-size: 12px; color: var(--msg-muted); }
.msg-file-ico { font-size: 20px; }

.msg-composer { border-top: 1px solid var(--msg-line); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.msg-composer-riga { display: flex; gap: 8px; align-items: flex-end; }
.msg-composer textarea { flex: 1; resize: none; font: inherit; padding: 9px 11px; border: 1px solid var(--field, #CBD4D6); border-radius: 18px; max-height: 180px; min-width: 0; }
.msg-composer textarea:focus { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(31,111,120,.22)); border-color: var(--msg-acc); }
.msg-allega { padding: 7px 10px !important; }
.msg-allegato-scelto { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.msg-allegato-scelto:empty { display: none; }

/* Partecipanti */
.msg-dialogo { border: 1px solid var(--msg-line); border-radius: var(--r-lg, 14px); padding: 22px; max-width: 560px; width: calc(100% - 32px); color: var(--msg-ink); }
.msg-dialogo::backdrop { background: rgba(11, 21, 40, .4); }
.msg-dialogo h2 { margin: 0 0 8px; }
.msg-persone { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; }
.msg-persone li { display: flex; gap: 10px; align-items: flex-start; }
.msg-uscito { opacity: .55; }
.msg-sicurezza { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: 12.5px; letter-spacing: .04em; margin-top: 2px; }

@media (max-width: 760px) {
  .msg-griglia { grid-template-columns: 1fr; min-height: 0; }
  .msg-canali { display: none; }
  .msg-canali-mobile { display: block; margin-bottom: 8px; }
  .msg-vista { height: calc(100dvh - 300px); min-height: 380px; }
  .msg-riga { max-width: 92%; }
  .msg-testa { padding: 10px 12px; }
}

/* Pannello laterale (linguetta a destra) */
.msg-linguetta {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 9px; border: 0; border-radius: 12px 0 0 12px; cursor: pointer;
  background: var(--navy, #14213D); color: #fff; font: 600 13px/1 var(--sans, system-ui, sans-serif);
  box-shadow: 0 6px 22px -6px rgba(11, 21, 40, .45); transition: padding .15s ease, background .15s ease;
}
.msg-linguetta:hover { padding-right: 13px; background: var(--petrol, #1F6F78); }
.msg-linguetta:focus-visible { outline: 3px solid rgba(31, 111, 120, .45); outline-offset: 2px; }
.msg-linguetta[hidden] { display: none; }
.msg-linguetta-testo { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
.msg-linguetta-badge { background: #E0533D !important; color: #fff; }
.msg-linguetta-badge[hidden] { display: none; }
.msg-linguetta-nuovi { background: var(--petrol, #1F6F78); }
body.msg-cassetto-aperto .msg-linguetta { opacity: 0; pointer-events: none; }

.msg-cassetto {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1000; width: min(460px, 100vw);
  display: flex; flex-direction: column; background: var(--card, #fff);
  border-left: 1px solid var(--line, #DFE5E5); box-shadow: -18px 0 50px -20px rgba(11, 21, 40, .35);
  transform: translateX(105%); visibility: hidden; transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s;
}
.msg-cassetto.aperto { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .msg-cassetto, .msg-cassetto.aperto { transition: none; } }
.msg-cassetto-testa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 18px; background: var(--navy, #14213D); color: #fff; }
.msg-cassetto-tit { display: flex; flex-direction: column; min-width: 0; }
.msg-cassetto-tit b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.msg-cassetto-sotto { font-size: 12.5px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-chiudi { border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.msg-chiudi:hover { background: rgba(255, 255, 255, .2); }
.msg-cassetto-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--ground, #F3F5F4); }
.msg-cassetto-corpo > .msg { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.msg-margine { margin: 14px; }
/* Sugli schermi larghi la pagina si sposta a sinistra invece di finire sotto il pannello */
@media (min-width: 1280px) {
  body.msg-cassetto-aperto { padding-right: 460px; transition: padding-right .24s ease; }
}

/* Chat compatta (dentro il pannello) */
.msg-compatto .msg-griglia { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; }
.msg-compatto .msg-lato { padding: 10px 12px 0; }
.msg-compatto .msg-canali { display: none; }
.msg-compatto .msg-canali-mobile { display: block; margin: 0 0 10px; background: var(--card, #fff); }
.msg-compatto .msg-vista { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; }
.msg-compatto .msg-testa { padding: 10px 12px; }
.msg-compatto .msg-testa h2 { font-size: 15.5px; }
.msg-compatto .msg-testa .msg-azioni button { padding: 5px 10px; font-size: 13px; }
.msg-compatto .msg-riga { max-width: 88%; }
.msg-compatto .msg-pannello { margin: 14px; padding: 18px; }
.msg-compatto .msg-codice { font-size: 16px; }
.msg-compatto > .msg-carica, .msg-compatto > .msg-avviso { margin: 14px; }

@media (max-width: 760px) {
  .msg-linguetta { top: auto; bottom: 18px; right: 14px; transform: none; flex-direction: row; border-radius: 999px; padding: 12px 16px; }
  .msg-linguetta:hover { padding-right: 16px; }
  .msg-linguetta-testo { writing-mode: horizontal-tb; transform: none; }
  .msg-cassetto { width: 100vw; border-left: 0; }
  .msg-compatto .msg-vista { height: auto; }
}

/* Stampa: solo il foglio preparato dalla chat */
.msg-stampa { display: none; }
@media print {
  body.msg-stampa-attiva > *:not(.msg-stampa) { display: none !important; }
  body.msg-stampa-attiva { background: #fff !important; }
  .msg-stampa { display: block; font-family: var(--serif, Georgia, serif); color: #000; font-size: 11pt; }
  .msg-stampa h1 { font-size: 16pt; margin: 0 0 8pt; }
  .msg-stampa table { width: 100%; border-collapse: collapse; margin-top: 10pt; }
  .msg-stampa td { border-bottom: .5pt solid #bbb; padding: 4pt 6pt; vertical-align: top; white-space: pre-wrap; }
  .msg-st-data { width: 22%; white-space: nowrap !important; }
  .msg-st-chi { width: 20%; font-weight: 600; }
  .msg-stampa .msg-codice { font-family: ui-monospace, Menlo, monospace; font-size: 16pt; border: 1pt dashed #000; padding: 10pt; }
}

/* Invito al titolare a creare il codice di recupero dello studio */
.msg-invito { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 10px 12px 0; }
.msg-dialogo .msg-codice { margin: 12px 0; }
.msg-dialogo .msg-azioni { margin-top: 10px; }

/* Approvazione dei dispositivi */
.msg-approva { display: flex; flex-direction: column; gap: 8px; }
.msg-approva .msg-sicurezza, .msg-codice-attesa { font-weight: 600; }
.msg-codice-attesa { margin-top: 6px; font-size: 15px; }