/* Comunicatore — foglio di stile (H157). Figlio del disegno approvato execution/h157_prove/disegno-presenze-e-comunicatore-v3.html */
:root { --blu:#161b33; --blu2:#232a4d; --blu3:#2f3763; --ar:#f47a20; --ch:#c9cfe6; --verde:#1fa860; --rosso:#e5484d; --giallo:#ffd43b; --celeste:#2f6bd8; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--blu); color: #fff; font: 17px/1.35 -apple-system, "Helvetica Neue", Arial, sans-serif; display: flex; flex-direction: column; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; text-align: left; }
button:disabled { opacity: .55; }
.top { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #0f1326; border-bottom: 3px solid var(--ar); }
.logo { width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--ar); font-weight: 900; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.top b { font-size: 18px; letter-spacing: .3px; }
.top .chi { margin-left: auto; font-size: 15px; color: var(--ch); }
.vista { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; }
.eti { font-size: 12px; font-weight: 900; letter-spacing: .7px; color: var(--ch); margin: 2px 0 -10px; }
/* Greg 4/10 (detto al Comunicatore stesso): pulsanti più grandi e più distanti, «così si possono cliccare bene» */
.big { width: 100%; min-height: 96px; border-radius: 20px; padding: 24px 18px; font-weight: 900; font-size: 22px; display: flex; align-items: center; gap: 14px; }
.big i { font-style: normal; font-size: 29px; flex: none; }
.big small { display: block; font-weight: 700; font-size: 14.5px; margin-top: 3px; }
.big:active { transform: scale(.985); }
/* I COLORI DI CASA (Greg 4/10): Omar = arancione scuro + testo nero profondo · Marco = blu + testo giallo ocra — sempre, in ogni pulsante */
.big.o { background: #de5a05; color: #000; }
.big.m { background: #1f4fae; color: #f7b500; }
.big.ro { background: #fff; color: #000; border-left: 10px solid #de5a05; }
.big.rm { background: #fff; color: #000; border-left: 10px solid #1f4fae; }
.big.id { background: #8a3ff0; color: #000; }               /* Idea: viola, testo nero profondo, lampadina gialla (scelto da Greg il 4/10 fra le prove) */
.big i svg { display: block; width: 30px; height: 30px; }
.big.achi { justify-content: center; text-align: center; background: #fff; color: #101816; }
.avviso-prova { background: var(--giallo); color: #3a2c00; font-size: 13.5px; font-weight: 700; border-radius: 12px; padding: 9px 12px; }
.rec { background: #fff; color: #101816; border-radius: 19px; padding: 18px 16px; text-align: center; }
.riga-rec { font-size: 18px; }
.pallino { width: 17px; height: 17px; border-radius: 50%; background: var(--rosso); display: inline-block; margin-right: 8px; vertical-align: -2px; animation: batte 1.1s infinite; }
.pallino.fermo { animation: none; background: #9aa5a1; }
@keyframes batte { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pallino { animation: none; } }
.tempo { font-size: 62px; font-weight: 900; line-height: 1.1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.sicuro { display: inline-block; font-size: 15.5px; font-weight: 800; color: #127a45; background: #e2f5ea; border-radius: 14px; padding: 6px 12px; }
.sicuro.attesa { color: #7a5d00; background: #f8edc6; }
.sicuro.guasto { color: #fff; background: var(--rosso); }
.fine { display: block; width: 100%; margin-top: 16px; background: #101816; color: #fff; border-radius: 26px; padding: 16px; font-weight: 900; font-size: 19px; text-align: center; }
.rec small { display: block; margin-top: 10px; color: #4d5956; font-size: 13.5px; }
.annulla { align-self: center; background: #e3e6ee; color: #101816; border-radius: 22px; padding: 10px 18px; font-weight: 800; font-size: 15px; }
.carta { background: #fff; color: #101816; border-radius: 17px; padding: 16px; font-size: 16px; }
.carta h1 { font-size: 21px; margin: 0 0 8px; }
.carta h2 { font-size: 20px; margin: 0 0 6px; }
.carta p { margin: 0 0 10px; color: #4d5956; }
.carta .ok { color: #127a45; font-weight: 900; }
.carta .no { color: #b3261e; font-weight: 900; }
.carta ul { margin: 6px 0 0; padding-left: 20px; }
.carta form { display: flex; gap: 8px; }
.carta input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 11px 12px; border: 2px solid #9aa5a1; border-radius: 12px; }
.carta form button { flex: none; background: var(--ar); color: #fff; font-weight: 900; border-radius: 22px; padding: 11px 20px; }
.carta .esito { min-height: 20px; margin-top: 8px; font-weight: 700; color: #b3261e; }
audio { width: 100%; }
.prova { background: var(--blu2); border-radius: 13px; padding: 10px 12px; font-size: 14px; color: var(--ch); display: flex; align-items: center; gap: 10px; }
.prova b { color: #fff; }
.prova .buco { color: var(--giallo); font-weight: 800; }
.prova button { margin-left: auto; flex: none; background: var(--blu3); color: #fff; border-radius: 16px; padding: 7px 12px; font-weight: 800; font-size: 13.5px; }

/* motore robusto (H157): il livello del microfono, i pezzi in attesa nel telefono, l'interruzione, l'esito */
.livello { height: 10px; border-radius: 6px; background: #e3e6ee; overflow: hidden; margin: 2px 0 10px; }
.livello span { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 6px; transition: width .12s linear; }
.telefono { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: #7a5d00; }
.rec.interrotta { outline: 4px solid var(--rosso); }
.rec.interrotta .tempo { color: var(--rosso); }
.riprendi { display: block; width: 100%; margin-top: 14px; background: var(--rosso); color: #fff; border-radius: 26px; padding: 16px; font-weight: 900; font-size: 19px; text-align: center; }
.nota-ripresa { background: #e2f5ea; color: #0b4d2b; border-radius: 12px; padding: 9px 12px; font-size: 14px; font-weight: 700; }
.carta .testo-detto { font-size: 17.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 10px; }
.carta .piccolo { font-size: 13.5px; color: #4d5956; margin: 4px 0 0; }
.carta .attesa { font-weight: 800; color: #7a5d00; }
.prova { text-align: left; width: 100%; }
.prova span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

/* Greg 4/10 16:08 (detto al Comunicatore): nella scelta i pulsanti sono più stretti del 30% e stanno al centro della pagina */
#v-scelta .big { width: 70%; min-height: 84px; align-self: center; padding: 18px 16px; font-size: 20px; }
#v-scelta .eti { width: 70%; align-self: center; }
#v-scelta .big.ro, #v-scelta .big.rm { font-size: 18px; }      /* «Rispondi a Marco» deve stare su una riga */
#v-scelta .big.ro i, #v-scelta .big.rm i { font-size: 23px; }
.big.sv { background: #ffd43b; color: #000; }               /* Nota sviluppo (Greg 4/10): giallo «lavori in corso», testo nero — bianco no: si confonde coi due «Rispondi» */

/* ═════ H174 (Greg 20/10): LE CHAT — l'elenco come WhatsApp, lo scorrimento a sinistra come la PWA Micro, le bolle ═════ */
.avvisi { margin-left: 10px; background: var(--blu3); color: #fff; border-radius: 16px; padding: 6px 11px; font-size: 14px; font-weight: 800; }
.avvisi.da-fare { background: var(--ar); color: #000; }
.nota-alto { flex: none; background: #e2f5ea; color: #0b4d2b; padding: 9px 16px; font-size: 14px; font-weight: 700; }
.chat-elenco { display: flex; flex-direction: column; gap: 10px; margin-top: -8px; }
.chat-elenco .vuoto { color: var(--ch); font-size: 15px; margin: 0; }
.cwrap { position: relative; border-radius: 16px; overflow: hidden; background: var(--blu3); }
.cazioni { position: absolute; top: 0; bottom: 0; display: flex; }
.cazioni.sx { left: 0; }
.cazioni.dx { right: 0; }
.cwrap.aperta-sx .cazioni.dx, .cwrap.aperta-dx .cazioni.sx { visibility: hidden; }
.caz { width: 96px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13.5px; font-weight: 900; padding: 6px; line-height: 1.2; }
.caz.prio { background: #ffd43b; color: #000; }
.caz.pin { background: #2f6bd8; color: #fff; }
.ccard { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 5px; background: #fff; color: #101816; border-radius: 16px; padding: 12px 14px 11px; transition: transform .2s ease; border-left: 7px solid #de5a05; }
.ccard.m { border-left-color: #1f4fae; }
.ccard.alta { box-shadow: inset 0 0 0 3px #ffd43b; }
.cwrap.aperta-dx .ccard { transform: translateX(-192px); }     /* scorsa a sinistra: Risolto · Rimanda */
.cwrap.aperta-sx .ccard { transform: translateX(192px); }      /* scorsa a destra: Priorità · Pinna */
.cwrap.via { opacity: .35; transition: opacity .2s; }
.caz.risolto { background: #1fa860; color: #fff; }
.caz.rimanda { background: #f47a20; color: #000; }
.caz.giorni { width: 48px; background: #f47a20; color: #000; font-size: 13px; border-left: 1px solid rgba(0,0,0,.18); }
.lista2 { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.criga2 { display: flex; align-items: center; gap: 8px; background: var(--blu2); border-radius: 13px; padding: 8px 10px; }
.capri { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; color: #fff; background: none; padding: 0; }
.capri span { min-width: 0; display: flex; flex-direction: column; }
.capri b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capri small { font-size: 12.5px; color: var(--ch); }
.cav.m { background: #1f4fae; color: #f7b500; }
.criapri { flex: none; background: var(--blu3); color: #fff; border-radius: 12px; padding: 7px 11px; font-size: 13px; font-weight: 800; }
.criga1 { display: flex; align-items: flex-start; gap: 9px; }
.cav { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 15px; background: #de5a05; color: #000; }
.ccard.m .cav { background: #1f4fae; color: #f7b500; }
.ctit { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.25; padding-top: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cquando { flex: none; text-align: right; font-size: 13px; font-weight: 800; color: #4d5956; padding-top: 3px; }
.cquando small { display: block; font-size: 11.5px; font-weight: 600; color: #6b7672; }
.cquando.nuovo { color: #127a45; }
.cdesc { font-size: 15px; line-height: 1.38; color: #2d3633; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.cpiede { display: flex; align-items: center; gap: 8px; min-height: 4px; }
.chip { font-style: normal; font-size: 13px; font-weight: 800; border-radius: 10px; padding: 3px 9px; background: #eef0f6; color: #2d3633; }
.chip.lavoro { background: #fff1d6; color: #7a4b00; }
.chip.fatto { background: #e2f5ea; color: #127a45; }
.chip.domanda { background: #fde2e2; color: #a01d1d; }
.chip.attesa { background: #f8edc6; color: #7a5d00; }
.pallino-nuovo { margin-left: auto; width: 13px; height: 13px; border-radius: 50%; background: var(--verde); }
.archivio { color: var(--ch); font-size: 14px; }
.archivio summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.archivio #recenti { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.vista.vchat { padding: 0; gap: 0; overflow: hidden; }
.chat-testa { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #de5a05; color: #000; }
.chat-testa.m { background: #1f4fae; color: #f7b500; }
.indietro { background: rgba(0,0,0,.12); color: inherit; font-size: 30px; line-height: 1; font-weight: 900; border-radius: 12px; padding: 2px 14px 6px; }
.chat-chi { min-width: 0; display: flex; flex-direction: column; }
.chat-chi b { font-size: 19px; }
.chat-chi small { font-size: 13.5px; font-weight: 700; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.chat-msg .vuoto { margin: auto 10px; text-align: center; color: var(--ch); font-size: 15.5px; line-height: 1.5; }
.bolla { max-width: 86%; border-radius: 16px; padding: 9px 12px 6px; font-size: 16px; line-height: 1.42; }
.bolla.greg { align-self: flex-end; background: #dfe6fb; color: #101816; border-bottom-right-radius: 5px; }
.bolla.ag { align-self: flex-start; background: #fff; color: #101816; border-left: 6px solid #de5a05; border-bottom-left-radius: 5px; }
.bolla.ag.m { border-left-color: #1f4fae; }
.bolla.volo { opacity: .8; }
.bolla.attesa { font-size: 14.5px; font-weight: 700; color: #4d5956; padding: 9px 12px; }
.btesto { white-space: pre-wrap; overflow-wrap: anywhere; }
.bora { font-size: 11.5px; color: #6b7672; text-align: right; margin-top: 3px; }
.voce { font-size: 13.5px; font-weight: 800; color: #4d5956; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.ascolta { background: #101816; color: #fff; border-radius: 12px; padding: 3px 10px; font-size: 13px; font-weight: 800; }
.bbottoni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bbot { background: #eef0f6; color: #101816; border-radius: 12px; padding: 7px 11px; font-size: 14px; font-weight: 800; }
.puntini { display: inline-flex; gap: 3px; vertical-align: middle; }
.puntini i { width: 6px; height: 6px; border-radius: 50%; background: #9aa5a1; animation: batte 1.2s infinite; }
.puntini i:nth-child(2) { animation-delay: .2s; } .puntini i:nth-child(3) { animation-delay: .4s; }
.chat-nota { flex: none; background: #fde2e2; color: #a01d1d; font-size: 14px; font-weight: 700; padding: 8px 14px; }
.chat-scrivi { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); background: #0f1326; border-top: 1px solid var(--blu3); }
.chat-scrivi textarea { flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.35; padding: 10px 12px; border-radius: 20px; border: 0; background: #fff; color: #101816; max-height: 140px; }
.manda { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blu3); color: #fff; font-size: 19px; text-align: center; }
.mic { flex: none; width: 58px; height: 58px; border-radius: 50%; font-size: 27px; text-align: center; background: #de5a05; color: #000; }
.mic.m { background: #1f4fae; color: #f7b500; }

/* H174 (Greg 20/10 20:2x): riascoltare la telefonata in macchina — pulsante grande, un tocco suona, un altro ferma */
.ascolta.grande { display: block; width: 100%; margin: 8px 0 4px; padding: 14px 12px; border-radius: 14px; font-size: 17px; font-weight: 900; text-align: center; background: #101816; color: #fff; }

/* H174 sera: «forse è fermo» si deve vedere (Omar spento 17:10→21:06 e la chat diceva «sta leggendo…») */
.bolla.attesa.fermo { background: #fde2e2; color: #a01d1d; border-left-color: #e5484d; }

/* H175 (Greg 21/10): registrando DENTRO una chat il pannello sta piccolo in basso e la chat resta leggibile sopra
   («devo vedere quello che lui mi ha scritto mentre parlo, invece non lo vedo più»). Fuori dalla chat resta a schermo pieno. */
.vchat.in-rec .chat-scrivi { display: none; }
#v-registra.dock { flex: none; overflow: visible; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #0f1326; border-top: 1px solid var(--blu3); }
#v-registra.dock .achi, #v-registra.dock #rec-nota { display: none; }
#v-registra.dock .rec { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 10px 14px; border-radius: 16px; text-align: left; }
#v-registra.dock .riga-rec { font-size: 16px; grid-column: 1; grid-row: 1; }
#v-registra.dock .tempo { font-size: 32px; margin: 0; grid-column: 2; grid-row: 1 / 3; }
#v-registra.dock .livello { grid-column: 1; grid-row: 2; margin: 0; }
#v-registra.dock .sicuro, #v-registra.dock .telefono { grid-column: 1 / -1; justify-self: start; font-size: 13.5px; padding: 4px 10px; margin: 0; }
#v-registra.dock .riprendi, #v-registra.dock .fine { grid-column: 1 / -1; margin-top: 2px; padding: 13px; font-size: 18px; }
#v-registra.dock .annulla { padding: 8px 16px; font-size: 14.5px; }

/* ═══ H176 — la sezione OPERAI ═══ */
.big.op { background: #1fa860; color: #000; position: relative; }
.op-nuovi { position: absolute; top: 10px; right: 12px; min-width: 26px; height: 26px; border-radius: 13px; padding: 0 7px; background: #b3261e; color: #fff; font-size: 15px; line-height: 26px; }
.op-testa { display: flex; align-items: center; gap: 10px; margin: -16px -16px 0; padding: 9px 12px; background: #1fa860; color: #000; position: sticky; top: -16px; z-index: 2; }
.chat-testa.op { background: #1fa860; color: #000; }
.op-corpo { display: flex; flex-direction: column; gap: 10px; }
.op-corpo .eti { margin: 8px 0 0; }
.op-card { display: block; width: 100%; text-align: left; background: #fff; color: #101816; border-radius: 16px; padding: 11px 14px; border-left: 8px solid #c9cfe6; }
.op-card.nuova { border-left-color: #de5a05; }
.op-card.chiusa { opacity: .6; }
.op-card b { display: block; font-size: 17px; } .op-card span { display: block; font-size: 15px; color: #37423f; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.op-card small { display: block; font-size: 12.5px; color: #6b7774; margin-top: 5px; } .op-card small em { font-style: normal; font-weight: 900; color: #b3261e; }
.op-nuova { background: #fff; color: #101816; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.op-nuova select, .op-nuova textarea { font: inherit; font-size: 16px; border-radius: 12px; border: 1px solid #c9cfe6; padding: 9px 10px; background: #fff; color: #101816; }
.op-nuova button { background: #1fa860; color: #000; font-weight: 900; border-radius: 14px; padding: 12px; font-size: 17px; }
.bolla.op { align-self: flex-start; background: #fff; color: #101816; border-left: 6px solid #1fa860; border-bottom-left-radius: 5px; }
.bolla.omar { align-self: flex-end; background: #fde9d9; color: #101816; border-bottom-right-radius: 5px; }
.bolla .bchi { font-size: 12.5px; font-weight: 900; color: #4d5956; margin-bottom: 2px; }

/* ═══ H176 — la scheda SU UN CLIENTE: le tendine del cliente sotto la testa ═══ */
.chat-cliente { flex: none; max-height: 52vh; overflow-y: auto; background: #0f1326; border-bottom: 1px solid var(--blu3); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.cli-capo { font-size: 14.5px; color: var(--ch); } .cli-capo b { color: #fff; font-size: 16px; }
.chat-cliente details { background: var(--blu2); border-radius: 12px; padding: 0 12px; }
.chat-cliente summary { cursor: pointer; padding: 10px 0; font-weight: 800; font-size: 15.5px; color: #fff; list-style: none; }
.chat-cliente summary::-webkit-details-marker { display: none; }
.chat-cliente summary::before { content: '▸ '; color: var(--ch); } .chat-cliente details[open] summary::before { content: '▾ '; }
.cli-corpo { padding: 0 0 12px; font-size: 15px; line-height: 1.5; color: #e6e9f5; }
.cli-corpo .cli-eti { font-size: 12px; font-weight: 900; letter-spacing: .5px; color: var(--ch); margin-top: 8px; }
.cli-corpo .cli-testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.cli-msg { border-top: 1px solid var(--blu3); padding: 7px 0; } .cli-msg:first-child { border-top: 0; }
.cli-msg small { display: block; font-size: 12.5px; color: var(--ch); font-weight: 800; } .cli-msg.cliente small { color: #f7b500; }
.cli-prev { border-top: 1px solid var(--blu3); padding: 7px 0; } .cli-prev:first-child { border-top: 0; }
.cli-prev .st { font-size: 14px; margin-top: 2px; } .cli-prev .st.ok { color: #7ee787; } .cli-prev .st.no { color: #ff7b72; } .cli-prev .st.at { color: #f0c674; } .cli-prev .st.gr { color: #8b949e; }

/* ═══ H176 — Manda e microfono: DUE RETTANGOLI VERTICALI AFFIANCATI (Greg 22/10: «due rettangoli, uno accanto all'altro, in verticale»;
   il tocco sul blu partiva sul microfono) ═══ */
.cs-colonna { flex: none; display: flex; flex-direction: row; gap: 8px; align-self: stretch; align-items: stretch; }
.chat-scrivi .manda { width: 64px; min-height: 92px; border-radius: 14px; background: #1f6feb; color: #fff; font-size: 15px; font-weight: 900; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; touch-action: manipulation; }
.chat-scrivi .manda b { font-size: 24px; line-height: 1; }
.chat-scrivi .manda:disabled { opacity: .55; }
.chat-scrivi .mic { width: 64px; min-height: 92px; border-radius: 14px; font-size: 26px; touch-action: manipulation; display: flex; align-items: center; justify-content: center; }