:root{--fondo: #12100e;--fondo-alto: #1b1815;--fondo-bolla: #232019;--fondo-bolla-mia: #2f3a33;--testo: #efe9e0;--testo-tenue: #9a9188;--bordo: #302b25;--ambra: #d9a441;--ambra-tenue: #4a3a1c;--freddo: #7fa8c9;--freddo-tenue: #23343f;--allarme: #d97066;--raggio: 14px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#radice{height:100%;margin:0}body{background:var(--fondo);color:var(--testo);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-font-smoothing:antialiased;overscroll-behavior:none}.schermo{display:flex;flex-direction:column;height:100%;max-width:720px;margin:0 auto}.testata{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bordo);background:var(--fondo-alto)}.testata h1{font-size:17px;margin:0;font-weight:600;letter-spacing:.02em}.testata .sotto-titolo{font-size:12px;color:var(--testo-tenue);margin:2px 0 0}.testata .spinta{margin-left:auto}.pallino{width:8px;height:8px;border-radius:50%;background:var(--allarme);flex:0 0 auto}.pallino[data-collegato=true]{background:#6fbf8b}.corpo{flex:1;overflow-y:auto;padding:16px}.corpo.centrato{display:flex;flex-direction:column;justify-content:center;gap:18px}button,input,textarea,select{font:inherit;color:inherit}.bottone{background:var(--ambra);color:#1a1408;border:none;border-radius:var(--raggio);padding:13px 18px;font-weight:600;cursor:pointer;min-height:44px}.bottone:disabled{opacity:.45;cursor:not-allowed}.bottone.tenue{background:transparent;color:var(--testo);border:1px solid var(--bordo)}.bottone.piccolo{padding:7px 12px;min-height:34px;font-size:13px;border-radius:9px}input[type=text],input[type=password],input[type=datetime-local],input[type=number],textarea,select{width:100%;background:var(--fondo-alto);border:1px solid var(--bordo);border-radius:var(--raggio);padding:13px 14px;min-height:44px}input:focus,textarea:focus,select:focus{outline:2px solid var(--ambra);outline-offset:-1px}label{display:block;font-size:13px;color:var(--testo-tenue);margin-bottom:6px}.campo{margin-bottom:14px}.voce{display:flex;align-items:center;gap:12px;width:100%;padding:14px;background:var(--fondo-alto);border:1px solid var(--bordo);border-radius:var(--raggio);margin-bottom:10px;cursor:pointer;text-align:left}.voce .nome{font-weight:600}.voce .dettaglio{font-size:12px;color:var(--testo-tenue);margin-top:3px}.filo{display:flex;flex-direction:column;gap:10px}.bolla{max-width:82%;padding:11px 14px;border-radius:var(--raggio);background:var(--fondo-bolla);border:1px solid var(--bordo);word-break:break-word}.bolla.mia{align-self:flex-end;background:var(--fondo-bolla-mia)}.bolla .ora{font-size:11px;color:var(--testo-tenue);margin-top:6px;display:flex;align-items:center;gap:6px}.bottone-puntini{background:transparent;border:none;cursor:pointer;color:var(--testo-tenue);font-size:13px;line-height:1;padding:2px 4px}.bottone-puntini:hover{color:var(--testo)}.bolla.sigillata{border-color:var(--ambra);box-shadow:inset 0 0 0 1px var(--ambra-tenue)}.etichetta{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;margin-bottom:7px}.etichetta.sigillo{background:var(--ambra-tenue);color:var(--ambra)}.etichetta.serratura{background:var(--freddo-tenue);color:var(--freddo)}.etichetta.richiesta{background:#3a2f18;color:#e0bd72}.bolla.chiusa{border-color:var(--freddo);border-style:dashed}.bolla.chiusa .motivo{color:var(--freddo);font-size:13px}.azioni-bolla{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}.compositore{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--bordo);background:var(--fondo-alto)}.compositore textarea{resize:none;max-height:140px}.pannello{background:var(--fondo-alto);border:1px solid var(--bordo);border-radius:var(--raggio);padding:16px;margin-bottom:14px}.pannello h2{font-size:15px;margin:0 0 4px}.pannello p{font-size:13px;color:var(--testo-tenue);margin:0 0 14px;line-height:1.5}.avviso{border-left:3px solid var(--ambra);background:var(--ambra-tenue);color:#f0dcb4;padding:12px 14px;border-radius:8px;font-size:13px;line-height:1.5;margin-bottom:14px}.avviso.grave{border-color:var(--allarme);background:#3a201d;color:#f2c4bf}.numero-sicurezza{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:15px;letter-spacing:.06em;line-height:1.9;color:var(--testo);word-spacing:.35em}.errore{color:var(--allarme);font-size:13px;margin-top:10px}.tenue{color:var(--testo-tenue);font-size:13px;line-height:1.55}
