:root{/* valori di partenza: devono combaciare con Sabriel_Module_Branding::FIELDS. Servono se una di queste opzioni restasse vuota nel database: senza, la dichiarazione diventa vuota e la proprieta salta. */--sab-primary:#0d0d0d;--sab-secondary:#1461CC;--sab-on-secondary:#ffffff;--sab-bg:#f0f0f0;--sab-font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Arial,sans-serif;--sab-chat-bg:#ffffff;--sab-bot-bubble-bg:#ffffff;--sab-bot-bubble-text:#1a1a1a;--sab-user-bubble-bg:var(--sab-primary);--sab-user-bubble-text:#f2f2f2;--sab-name-color:#f0f0f1;--sab-border-color:#e5e5e5;--sab-input-bg:#f5f5f5;--sab-button-bg:var(--sab-primary);--sab-online-text:rgba(255,255,255,0.38);--sab-online-dot:#22c55e;--sab-header-icon:rgba(255,255,255,0.32);--sab-header-icon-hover:rgba(255,255,255,0.75);--sab-icon-color:#999;--sab-send-icon:#fff;--sab-bubble-icon:#ffffff;--sab-panel-bg:#fff;--sab-panel-text:#111;--sab-profile-bg:#fff;--sab-profile-text:#111;--sab-profile-button-bg:#0d0d0d;--sab-profile-button-text:#f0f0f0;--sab-profile-label:#666;--sab-avatar-bg:#1461CC;--sab-closed-btn-bg:#0d0d0d;--sab-greet-bg:#ffffff;--sab-greet-text:#1a1a1a;--sab-history-card-bg:#f8f8f8;--sab-input-text:#111111;--sab-closed-btn-radius:50%;--sab-dot-offset:1px;--sab-icon-hover:#1461CC;--sab-button-hover-bg:#262626;--sab-mic-rec:#ef4444;--sab-closed-btn-hover:#262626} /* ⚠ DUE REGOLE SEPARATE, ed e' voluto. box-sizing va dato ANCHE ai discendenti: otto regole di questo foglio mettono insieme width:100% e padding (i campi Nome/Cognome/Email/Telefono, il pulsante «Inizia la conversazione», il riquadro del profilo, il pulsante di prenotazione). Senza border-box un campo largo 100% con 13px di padding esce di 26px dal suo contenitore: i campi sbordano dalla finestra della chat. Finora funzionava solo perche' quasi tutti i temi mettono *{box-sizing:border-box} per conto loro; sui temi che non lo fanno il modulo si rompeva. Il vecchio selettore `#sar*` (senza spazio) NON e' un discendente: nel migliore dei casi vale `#sar` e basta, nel peggiore e' un errore di sintassi che fa buttare via l'INTERA regola, ::before e ::after compresi. ⚠ margin/padding a zero restano SOLO su #sar. Applicarli ai discendenti azzerava il padding di nuvolette, elenchi, orari e pulsanti, e il testo usciva dal bordo: e' il difetto gia' corretto una volta, non farlo tornare. */ #sar,#sar *,#sar *::before,#sar *::after{box-sizing:border-box} #sar{margin:0;padding:0} #sar{position:fixed;bottom:28px;right:28px;z-index:2147483647!important;font-family:var(--sab-font);-webkit-font-smoothing:antialiased;pointer-events:none} #sar-greet{position:absolute;bottom:4px;right:70px;max-width:230px;background:var(--sab-greet-bg);border-radius:16px;border-bottom-right-radius:5px;padding:13px 34px 13px 16px;box-shadow:0 10px 34px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.08);cursor:pointer;pointer-events:none;opacity:0;transform:translateY(8px) scale(0.94);transition:opacity .32s cubic-bezier(.32,.72,0,1),transform .32s cubic-bezier(.32,.72,0,1);z-index:1} /* Invisibile = non cliccabile. Con pointer-events:auto sempre acceso restava un rettangolo trasparente accanto al pulsante che si mangiava i clic sulla pagina. */ #sar-greet.show{opacity:1;transform:none;pointer-events:auto} /* Rete di sicurezza: se questo foglio non arriva (cache vecchia, minificatori che tolgono le regole che credono inutilizzate), l'attributo hidden del markup basta da solo a tenere la bolla fuori dalla pagina. Qui lo si rende non aggirabile. */ #sar-greet[hidden]{display:none!important} #sar-greet:hover{transform:translateY(-2px)} #sar-greet-txt{font-size:13px;line-height:1.42;color:var(--sab-greet-text);font-weight:500} #sar-greet-x{position:absolute;top:6px;right:6px;width:20px;height:20px;border:none;background:#f0f0f0;color:#888;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s} #sar-greet-x:hover{background:color-mix(in srgb,var(--sab-greet-text) 14%,transparent);color:var(--sab-greet-text)} @media(max-width:480px){#sar-greet{display:none!important}} #sar-tog{width:56px;height:56px;border-radius:var(--sab-closed-btn-radius,50%);background:var(--sab-closed-btn-bg);border:1.5px solid rgba(255,255,255,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(0,0,0,0.3);transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease;margin-left:auto;outline:none;position:relative;pointer-events:auto;color:var(--sab-bubble-icon)} #sar-tog:hover{transform:scale(1.07);box-shadow:0 7px 32px rgba(0,0,0,0.4);background:var(--sab-closed-btn-hover)} #sar-tog svg{position:absolute;transition:opacity .2s,transform .2s} #sar-tog .ic{opacity:1;transform:scale(1) rotate(0)} #sar-tog .ix{opacity:0;transform:scale(0.6) rotate(-30deg)} #sar-tog.open .ic{opacity:0;transform:scale(0.6) rotate(30deg)} #sar-tog.open .ix{opacity:1;transform:scale(1) rotate(0)} #sar-tog.mob-gone{opacity:0!important;pointer-events:none!important;transform:scale(0.7)!important} #sar-ndot{position:absolute;top:var(--sab-dot-offset,1px);right:var(--sab-dot-offset,1px);width:11px;height:11px;background:var(--sab-dot-color, #ffffff);border-radius:50%;border:2px solid var(--sab-closed-btn-bg);transition:opacity .2s;box-shadow:0 0 0 0 rgba(255,255,255,0.7);animation:sarPulseWhite 2.2s ease-in-out infinite} @keyframes sarPulseWhite{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.65)}50%{box-shadow:0 0 6px 3px rgba(255,255,255,0.55)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0.65)}} /* ⚠ B51: max-height NON e' «schermo meno 40». Sotto la finestra ci sono la bolla tonda (56px), il suo margine (12px) e la distanza dal fondo (28px): 96px in tutto. Con 40 la chat superava lo schermo appena la finestra del browser era alta meno di 644px (un portatile 1366x768 con le barre del browser) e testata e pulsanti finivano fuori, in alto. 116 = 96 + 20 di respiro sopra. Sopra i 664px di altezza non cambia niente: la chat resta alta 548px come prima. */ #sar-win{width:378px;max-width:calc(100vw - 40px);height:548px;max-height:calc(100vh - 116px);background:var(--sab-chat-bg);border:1px solid rgba(0,0,0,0.09);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;margin-bottom:12px;box-shadow:0 22px 70px rgba(0,0,0,0.13),0 6px 22px rgba(0,0,0,0.07);opacity:0;transform:translateY(20px) scale(0.96);pointer-events:none;visibility:hidden;transition:opacity .26s cubic-bezier(.32,.72,0,1),transform .26s cubic-bezier(.32,.72,0,1),visibility 0s linear .26s} /* ⚠ visibility, non display:none. `opacity:0` da solo nasconde agli OCCHI ma non alla tastiera: i 27 pulsanti e campi dentro la finestra chiusa restavano nel giro del tabulatore, e `aria-modal="true"` annunciava ai lettori di schermo una finestra di dialogo sempre aperta su ogni pagina del sito. display:none invece azzererebbe le misure: il codice che dimensiona l'elenco dei messaggi e l'altezza del campo di scrittura leggerebbe zero. visibility tiene il calcolo delle dimensioni e toglie solo la vista e il fuoco. La transizione va ridichiarata qui: senza, in apertura erediterebbe il ritardo di .26s della regola sopra e la chat comparirebbe di scatto a dissolvenza gia' finita. */ #sar-win.open{opacity:1;transform:none;pointer-events:all;visibility:visible;transition:opacity .26s cubic-bezier(.32,.72,0,1),transform .26s cubic-bezier(.32,.72,0,1),visibility 0s} #sar-hdr{background:var(--sab-primary);padding:14px 15px;display:flex;align-items:center;gap:10px;flex-shrink:0} #sar-av{width:34px;height:34px;border-radius:50%;background:var(--sab-avatar-bg);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:rgba(255,255,255,0.65);flex-shrink:0;overflow:hidden;background-clip:padding-box} #sar-hi{flex:1;min-width:0} #sar-hn{font-size:13px;font-weight:600;color:var(--sab-name-color);letter-spacing:.01em} #sar-hs{font-size:10.5px;color:var(--sab-online-text);margin-top:2px;display:flex;align-items:center;gap:5px} .sar-gd{width:6px;height:6px;background:var(--sab-online-dot);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 0 rgba(34,197,94,0.6);animation:sarPulseGreen 2.2s ease-in-out infinite} @keyframes sarPulseGreen{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}50%{box-shadow:0 0 6px 3px rgba(34,197,94,0.5)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0.55)}} .sar-hb{background:none;border:none;cursor:pointer;color:var(--sab-header-icon);padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;outline:none;flex-shrink:0} .sar-hb:hover{color:var(--sab-header-icon-hover);background:rgba(255,255,255,0.07)} .sar-sc{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden} .sar-sc.on{display:flex} #sar-sc-w{background:var(--sab-chat-bg);overflow-y:auto} #sar-sc-wi{padding:26px 22px 22px;display:flex;flex-direction:column} .sar-wlogo{width:40px;height:40px;border-radius:11px;background:var(--sab-avatar-bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:rgba(255,255,255,0.72);flex-shrink:0} #sar-sc-w h3{font-size:18px;font-weight:700;color:var(--sab-bot-bubble-text);margin-bottom:6px;line-height:1.25} #sar-sc-w .sar-sub{font-size:12.5px;color:#888;line-height:1.56;margin-bottom:20px} .sar-f{margin-bottom:13px} .sar-f label{display:block;font-size:10.5px;font-weight:700;color:#666;margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase} /* ⚠ TUTTI e quattro i campi di scrittura del widget devono seguire i due colori che il pannello chiama «Sfondo del campo dove si scrive» e «Testo che il cliente scrive»: prima li seguiva solo la casella della chat, gli altri tre avevano #fafafa/#111 scritti a mano. E il :focus NON deve rimettere uno sfondo fisso: il fuoco si vede gia' dal bordo colorato. NON rimettere background:#fff. */ .sar-f input{width:100%;padding:10px 13px;border:1.5px solid #e8e8e8;border-radius:9px;font-size:13.5px;font-family:inherit;color:var(--sab-input-text);outline:none;transition:border-color .18s,background .18s;background:var(--sab-input-bg)} .sar-f input:focus{border-color:var(--sab-primary)} .sar-f input::placeholder{color:#c0c0c0} .sar-f input.err{border-color:#e05555;background:#fff9f9;color:#111} .sar-fr{display:flex;gap:10px} .sar-fr .sar-f{flex:1;margin-bottom:0} .sar-ferr{font-size:11px;color:#e05555;margin-top:4px;display:none;font-weight:500} .sar-ferr.on{display:block} .sar-consent{display:flex;align-items:flex-start;gap:8px;margin:2px 0 13px;cursor:pointer;font-size:11.5px;color:#777;line-height:1.4;font-weight:400;text-transform:none;letter-spacing:normal} .sar-consent input{width:auto;flex-shrink:0;margin-top:2px;accent-color:var(--sab-primary);cursor:pointer} .sar-consent-nota{margin:-8px 0 13px;padding:8px 10px;border-radius:6px;font-size:11.5px;line-height:1.45;font-weight:400;text-transform:none;letter-spacing:normal;background:#fffbeb;border:1px solid #f5d98a;color:#92400e} /* ⚠ L'effetto al passaggio del mouse NON deve essere un colore scritto a mano: il pulsante segue il colore scelto dal titolare, e un nero fisso lo cancellava. Si usa una velatura chiara sopra QUALUNQUE colore: schiarisce i colori scuri (come faceva prima il #1a1a1a sul nero predefinito) e non rende mai illeggibile un colore chiaro. NON rimettere `background:#...` in queste tre regole :hover. */ #sar-sbtn{width:100%;padding:12.5px;background:var(--sab-primary);color:var(--sab-bg);border:none;border-radius:10px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;margin-top:10px;transition:box-shadow .18s,transform .14s;letter-spacing:.01em} #sar-sbtn:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.14);transform:translateY(-1px)} #sar-sbtn:active{transform:none} .sar-priv{font-size:10.5px;color:#c0c0c0;text-align:center;margin-top:12px;line-height:1.55} /* O5 (chat 8): #sar davanti, come nella versione gratuita. Senza, un tema che colora i link con a:link o a:visited (stessa forza della regola) e carica il suo foglio DOPO quello del widget vinceva: link dell'informativa bianco su bianco e senza sottolineatura. */ #sar .sar-priv a{color:inherit;text-decoration:underline} #sar-sc-c{background:var(--sab-bg)} #sar-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 13px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth} #sar-msgs::-webkit-scrollbar{width:3px} #sar-msgs::-webkit-scrollbar-thumb{background:#ddd;border-radius:4px} #sar-robanner{display:none;background:var(--sab-bg);border-radius:10px;padding:9px 14px;font-size:12px;color:#666;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;margin-bottom:10px} #sar-robanner.on{display:flex} #sar-roback{font-size:12px;font-weight:600;color:var(--sab-primary);background:none;border:none;cursor:pointer;padding:0;white-space:nowrap} .sar-msg-row{display:flex;align-items:flex-end;gap:8px;max-width:88%} .sar-msg-row.bot{align-self:flex-start;flex-direction:row} .sar-msg-row.user{align-self:flex-end;flex-direction:row-reverse} .sar-av-sm{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:0;box-sizing:border-box} .sar-av-sm.bot{background:var(--sab-avatar-bg);padding:2px} .sar-av-sm.bot img{width:100%;height:100%;object-fit:contain;display:block} .sar-av-sm.user{background:var(--sab-primary);color:var(--sab-user-bubble-text)} .sar-b{padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.56;word-break:break-word;animation:bin .22s ease both;min-width:0;flex:1} @keyframes bin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .sar-b.bot{background:var(--sab-bot-bubble-bg);color:var(--sab-bot-bubble-text);border-bottom-left-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.05);border-left:3px solid var(--sab-secondary);padding:11px 14px;font-size:13.5px;letter-spacing:0.01em} .sar-b strong{font-weight:700;color:var(--sab-primary)} .sar-b a.sar-lk{color:var(--sab-primary);font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word;cursor:pointer;touch-action:manipulation;display:inline} .sar-b a.sar-lk:hover{opacity:.7} .sar-b .sar-ul{margin:7px 0 3px;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px} .sar-b .sar-ul li{padding-left:18px;position:relative;line-height:1.52} .sar-b .sar-ul li::before{content:"→";position:absolute;left:0;color:#bbb;font-size:11px;top:4px} .sar-b p{margin:3px 0;line-height:1.52} .sar-b .sar-gap{height:5px} .sar-b.user{background:var(--sab-user-bubble-bg);color:var(--sab-user-bubble-text);border-bottom-right-radius:4px} .sar-b img{max-width:100%;border-radius:8px;margin-top:6px;display:block;max-height:180px;object-fit:cover} .sar-typ{display:flex;gap:4px;align-items:center;padding:11px 14px;background:var(--sab-bot-bubble-bg);border-radius:14px;border-bottom-left-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,0.07);border-left:3px solid var(--sab-secondary)} .sar-typ span{width:5px;height:5px;background:#bbb;border-radius:50%;animation:tb 1.2s ease-in-out infinite} .sar-typ span:nth-child(2){animation-delay:.15s} .sar-typ span:nth-child(3){animation-delay:.3s} @keyframes tb{0%,60%,100%{transform:none}30%{transform:translateY(-5px)}} #sar-ia{background:var(--sab-chat-bg);border-top:1px solid #ebebeb;padding:10px 12px;flex-shrink:0} #sar-ap{display:none;padding:6px 0 8px;align-items:center;gap:8px} #sar-ap.on{display:flex} #sar-ap img{width:52px;height:52px;object-fit:cover;border-radius:7px;border:1.5px solid #e0e0e0} #sar-aprm{background:var(--sab-primary);color:var(--sab-send-icon);border:none;border-radius:50%;width:20px;height:20px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1} #sar-ir{display:flex;align-items:flex-end;gap:7px} #sar-att{width:36px;height:36px;flex-shrink:0;background:none;border:1.5px solid var(--sab-border-color);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;outline:none;color:var(--sab-icon-color)} #sar-att:hover{border-color:var(--sab-icon-hover);background:color-mix(in srgb,var(--sab-icon-hover) 12%,transparent)} #sar-fi{display:none} #sar-ta{flex:1;min-height:36px;max-height:90px;background:var(--sab-input-bg);border:1.5px solid var(--sab-border-color);border-radius:10px;padding:9px 13px;font-size:14px;font-family:inherit;color:var(--sab-input-text);resize:none;outline:none;line-height:1.45;overflow-y:auto;transition:border-color .18s,background .18s;-webkit-appearance:none;appearance:none} #sar-ta:focus{border-color:var(--sab-primary)} #sar-ta::placeholder{color:#c0c0c0} #sar-snd{width:36px;height:36px;flex-shrink:0;background:var(--sab-button-bg);border:none;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s,transform .12s;outline:none;color:var(--sab-send-icon)} #sar-snd:hover:not(:disabled){background:var(--sab-button-hover-bg);transform:scale(1.05)} #sar-snd:disabled{background:#d0d0d0;cursor:not-allowed;transform:none} #sar-aprm:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.18)} #sar-att:active,#sar-mic:active,#sar-aprm:active,.sar-hb:active,#sar-snd:active:not(:disabled){transform:scale(.93)} #sar-att:focus-visible,#sar-mic:focus-visible,#sar-snd:focus-visible,#sar-aprm:focus-visible,.sar-hb:focus-visible,#sar-tog:focus-visible,#sar-sbtn:focus-visible,.sar-lbtn:focus-visible,.sab-book-btn:focus-visible,.sar-msg-send:focus-visible{outline:2px solid var(--sab-secondary);outline-offset:2px} #sar-mic{width:36px;height:36px;flex-shrink:0;background:none;border:1.5px solid var(--sab-border-color);border-radius:9px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:border-color .15s,background .15s;outline:none;color:var(--sab-icon-color)} #sar-mic:hover:not(.sar-mic-on){border-color:var(--sab-icon-hover);background:color-mix(in srgb,var(--sab-icon-hover) 12%,transparent)} #sar-mic.sar-mic-on{background:color-mix(in srgb,var(--sab-mic-rec) 12%,transparent);border-color:var(--sab-mic-rec);animation:sabMicPulse 1.4s ease-in-out infinite} @keyframes sabMicPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sab-mic-rec) 35%,transparent)}50%{box-shadow:0 0 0 6px transparent}} #sar-sc-h{background:var(--sab-panel-bg)} #sar-hl{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px;display:flex;flex-direction:column;gap:7px} #sar-newchat{display:flex;align-items:center;gap:8px;color:var(--sab-secondary);font-size:13px;font-weight:600;padding:11px 13px;margin-bottom:10px;border:1.5px dashed color-mix(in srgb,var(--sab-secondary) 32%,#fff);border-radius:12px;cursor:pointer;transition:background .15s} #sar-newchat:hover{background:color-mix(in srgb,var(--sab-secondary) 8%,#fff)} #sar-recuperahist{display:flex;align-items:center;gap:8px;color:#555;font-size:13px;font-weight:600;padding:11px 13px;margin-bottom:10px;border:1.5px dashed #ddd;border-radius:12px;cursor:pointer;transition:background .15s} #sar-recuperahist:hover{background:color-mix(in srgb,var(--sab-secondary) 8%,transparent);border-color:var(--sab-secondary)} .sar-hi{background:var(--sab-history-card-bg);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 13px;cursor:pointer;transition:filter .15s;display:flex;justify-content:space-between;align-items:flex-start;gap:8px} .sar-hi:hover{filter:brightness(0.93)} .sar-hii{flex:1;min-width:0} .sar-hin{font-size:13px;font-weight:600;color:var(--sab-panel-text);word-break:break-word;overflow-wrap:anywhere} .sar-hid{font-size:10.5px;color:var(--sab-panel-text);opacity:.5;margin-top:2px} .sar-hip{font-size:12px;color:var(--sab-panel-text);opacity:.7;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sar-hdel{background:none;border:none;cursor:pointer;color:#ccc;padding:4px;border-radius:4px;transition:color .15s;flex-shrink:0;font-size:15px;line-height:1} .sar-hdel:hover{color:#e05555} #sar-he{text-align:center;padding:40px 20px;color:var(--sab-panel-text);opacity:.45;font-size:13px} #sar-hclear{margin:0 10px 24px;padding:8px;background:none;border:1.5px solid #ebebeb;border-radius:9px;font-size:12px;line-height:1.2;color:#aaa;cursor:pointer;width:calc(100% - 20px);font-family:inherit;transition:border-color .15s,color .15s;flex-shrink:0} #sar-hclear:hover{border-color:#e05555;color:#e05555} #sar-foot{text-align:center;font-size:10px;color:var(--sab-bot-bubble-text);opacity:.35;padding:5px 0 8px;background:var(--sab-chat-bg);flex-shrink:0;letter-spacing:.04em;border-bottom-left-radius:20px;border-bottom-right-radius:20px} #sar-pw{display:block;font-size:9px;opacity:.7;margin-top:1px;letter-spacing:.03em} .sar-live-wrap{margin-top:10px;display:flex;flex-direction:column;gap:7px} .sar-live-txt{font-size:12px;color:#888;margin-bottom:2px} .sar-lbtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;transition:opacity .18s;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0.1);min-height:44px} .sar-lbtn:hover{opacity:.82} .sar-lbtn-wa{background:#25D366;color:#fff} .sar-lbtn-em{background:var(--sab-bg);color:var(--sab-primary);border:1px solid #e0e0e0} .sar-msg-box{margin-top:10px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px} .sar-msg-box textarea{width:100%;padding:10px 12px;border:1.5px solid #e0e0e0;border-radius:10px;font-size:13px;font-family:inherit;resize:none;outline:none;height:72px;box-sizing:border-box;transition:border-color .15s;background:var(--sab-input-bg);color:var(--sab-input-text)} .sar-msg-box textarea:focus{border-color:var(--sab-primary)} .sar-msg-box textarea::placeholder{color:#c0c0c0} .sar-msg-send{padding:10px;background:var(--sab-button-bg);color:var(--sab-send-icon);border:none;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s} .sar-msg-send:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.14)} .sar-msg-send:disabled{background:#d0d0d0;cursor:not-allowed} .sab-carousel-wrap{position:relative;margin-top:8px;width:100%} .sab-carousel-nav{background:none;border:none;cursor:pointer;font-size:18px;color:#888;padding:4px 6px;transition:color .15s;line-height:1;user-select:none} .sab-carousel-nav:hover{color:var(--sab-secondary)} .sab-carousel-nav.hidden{opacity:0;pointer-events:none} .sab-pf-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .sab-pf-titolo{font-size:11.5px;color:#777;flex:1 1 auto;min-width:0;line-height:1.35} .sab-pf-arrows{display:flex;align-items:center;gap:2px;flex-shrink:0} .sab-pf-counter{font-size:11px;color:#aaa;white-space:nowrap} .sab-portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;box-sizing:border-box} .sab-portfolio *{box-sizing:border-box;min-width:0} .sab-pcard{display:flex;flex-direction:column;background:#fff;border:1px solid #ebebeb;border-radius:10px;overflow:hidden;text-decoration:none;transition:box-shadow .15s} .sab-pcard:hover{box-shadow:0 2px 8px rgba(0,0,0,0.09)} .sab-pcard-img{width:100%;height:60px;object-fit:cover;background:var(--sab-bg)} .sab-pcard-ph{width:100%;height:60px;background:var(--sab-bg);background-image:linear-gradient(135deg,color-mix(in srgb,var(--sab-secondary) 9%,transparent) 0%,color-mix(in srgb,var(--sab-primary) 4%,transparent) 100%);display:flex;align-items:center;justify-content:center;font-size:20px} .sab-pcard-info{flex:1;padding:6px} .sab-pcard-title{font-size:10.5px;font-weight:700;color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px;line-height:1.3} .sab-pcard-cat{font-size:9.5px;color:#aaa;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sab-pcard-cta{font-size:10px;font-weight:700;color:var(--sab-secondary)} .sar-rate-overlay{position:absolute;inset:0;z-index:998;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;background:rgba(244,244,246,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .sar-rate-icon{width:44px;height:44px;border-radius:50%;background:#f0f0f2;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:20px} .sar-rate-tag{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bbb;margin-bottom:12px} .sar-rate-title{color:#111;font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em;white-space:nowrap} .sar-rate-sub{color:#888;font-size:11.5px;line-height:1.65;margin-bottom:16px;text-align:center;max-width:220px} .sar-rate-when{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e8e8e8;border-radius:7px;padding:7px 14px;color:#555;font-size:11px;font-weight:600;margin-bottom:20px} .sar-rate-divider{width:28px;height:1px;background:#e4e4e4;margin:0 auto 18px} .sar-rate-cta-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#ccc;margin-bottom:10px} .sar-rate-btns{display:flex;gap:8px} .sar-rate-btn{padding:10px 20px;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;display:inline-block;transition:all .18s;letter-spacing:.01em} .sar-rate-btn.wa{background:var(--sab-primary);color:var(--sab-bg)} .sar-rate-btn.em{background:#fff;color:#555;border:1px solid #e0e0e0} .sar-rate-btn:hover{opacity:.82;transform:translateY(-1px)} #sar-confirm{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:var(--sab-primary);align-items:center;padding:0 14px;gap:8px;z-index:10} #sar-profov{display:none;position:absolute;inset:0;background:rgba(13,13,13,.55);z-index:50;align-items:center;justify-content:center;padding:20px} #sar-profov.on{display:flex} #sar-profbox{background:var(--sab-profile-bg);border-radius:16px;padding:22px 22px 20px;width:100%;max-width:290px;max-height:100%;overflow-y:auto;box-sizing:border-box;box-shadow:0 10px 40px rgba(0,0,0,.25)} #sar-profbox .sar-ptitle{font-weight:700;font-size:15px;color:var(--sab-profile-text);margin-bottom:16px;display:flex;align-items:center;gap:8px} #sar-profbox .sar-psave{width:100%;padding:12px;background:var(--sab-profile-button-bg);color:var(--sab-profile-button-text);border:none;border-radius:10px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;margin-top:6px;transition:filter .15s} #sar-profbox .sar-psave:hover{filter:brightness(0.88)} #sar-profbox .sar-f label{color:var(--sab-profile-label)} #sar-profbox .sar-pcancel{width:100%;padding:10px;background:none;color:#888;border:none;font-size:12.5px;font-family:inherit;cursor:pointer;margin-top:4px} #sar-confirm.on{display:flex} #sar-confirm span{color:var(--sab-name-color);opacity:.85;font-size:12px;flex:1} .sar-cBtn{background:none;border:none;cursor:pointer;font-size:12px;font-weight:700;padding:5px 8px;border-radius:6px;font-family:inherit} #sar-cyes{color:#ff6b6b} #sar-cno{color:var(--sab-name-color);opacity:.55} #sar-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(10px);background:#111;color:#fff;font-size:12.5px;padding:9px 16px;border-radius:22px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:2147483647!important;max-width:280px;text-align:center;line-height:1.4} #sar-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .sab-cal{background:#fff;border-radius:14px;padding:0;margin-top:8px;box-shadow:0 4px 20px rgba(0,0,0,0.1);font-size:13px;overflow:hidden} .sab-cal-inactive{opacity:.42;pointer-events:none;filter:grayscale(.35)} .sab-cal-top{background:var(--sab-secondary);background-image:linear-gradient(135deg,var(--sab-secondary) 0%,color-mix(in srgb,var(--sab-secondary) 76%,#000) 100%);padding:16px 14px 12px} .sab-cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:0} .sab-cal-hdr strong{font-size:15px;font-weight:700;color:var(--sab-on-secondary);letter-spacing:.02em} .sab-cal-nav{background:rgba(127,127,127,0.22);border:none;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--sab-on-secondary);transition:background .15s} .sab-cal-nav:hover{background:rgba(255,255,255,0.28)} .sab-cal-body{padding:10px 12px 14px} .sab-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:10px} .sab-cal-day-hdr{text-align:center;font-size:9.5px;font-weight:700;color:#aaa;padding:6px 0 4px;letter-spacing:.04em} .sab-cal-day{text-align:center;padding:6px 2px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:#222;transition:background .12s,color .12s,transform .1s;line-height:1.3} .sab-cal-day:hover:not(.chiuso):not(.past):not(.other-month){background:color-mix(in srgb,var(--sab-secondary) 12%,#fff);color:var(--sab-secondary);transform:scale(1.08)} .sab-cal-day.selected{background:var(--sab-secondary);color:var(--sab-on-secondary);transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,0.22)} .sab-cal-day.today:not(.selected){background:color-mix(in srgb,var(--sab-secondary) 12%,#fff);color:var(--sab-secondary);font-weight:700} .sab-cal-day.chiuso,.sab-cal-day.past{color:#d0d0d0;cursor:default} .sab-cal-day.other-month{color:#e0e0e0;cursor:default} .sab-slots-wrap{padding:0 12px 4px} .sab-slots-label{font-size:10.5px;font-weight:700;color:#888;letter-spacing:.06em;margin-bottom:7px;display:flex;align-items:center;gap:6px} .sab-slots-label::before{content:'';display:inline-block;width:3px;height:12px;background:var(--sab-secondary);border-radius:2px} .sab-slots{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px} .sab-slot{padding:5px 10px;border-radius:20px;border:1.5px solid #e0e0e0;cursor:pointer;font-size:11.5px;font-weight:700;color:#444;color:color-mix(in srgb,var(--sab-input-text) 78%,var(--sab-input-bg));transition:all .15s;background:var(--sab-input-bg)} .sab-slot:hover:not(.busy){border-color:var(--sab-secondary);color:var(--sab-secondary);background:color-mix(in srgb,var(--sab-secondary) 12%,#fff);transform:scale(1.05)} .sab-slot.selected{background:var(--sab-secondary);color:var(--sab-on-secondary);border-color:var(--sab-secondary);box-shadow:0 2px 6px rgba(0,0,0,0.2)} .sab-slot.busy{color:#ccc;cursor:default;background:#f5f5f5;border-color:#ebebeb} .sab-form-wrap{padding:0 12px 14px} .sab-form-divider{height:1px;background:var(--sab-bg);margin:10px 0 12px} .sab-form-row{margin-bottom:9px} .sab-form-row label{display:block;font-size:10px;font-weight:700;color:#888;margin-bottom:4px;text-transform:uppercase;letter-spacing:.06em} .sab-form-row input,.sab-form-row textarea{color:var(--sab-input-text);width:100%;padding:9px 11px;border:1.5px solid #e8e8e8;border-radius:8px;font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;background:var(--sab-input-bg)} .sab-form-row input:focus,.sab-form-row textarea:focus{border-color:var(--sab-secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sab-secondary) 18%,transparent)} .sab-form-row textarea{resize:none;height:56px} .sab-book-btn{width:100%;padding:12px;line-height:1.3;text-transform:none;white-space:normal;font-family:inherit;letter-spacing:.02em;background:var(--sab-secondary);background-image:linear-gradient(135deg,var(--sab-secondary) 0%,color-mix(in srgb,var(--sab-secondary) 76%,#000) 100%);color:var(--sab-on-secondary);border:none;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;margin-top:4px} /* ⚠ line-height, text-transform e white-space QUI SOPRA, su questo solo bottone. Misurato su un sito con Flatsome: il tema mette ai bottoni della pagina righe alte e TUTTO MAIUSCOLO, il widget non si difendeva su questa regola e il tasto Conferma prenotazione diventava enorme, con la scritta su due righe. NON scrivere una regola su #sar button in generale: schiaccerebbe i bottoni a icona, ed e' lo stesso errore che aveva rotto le icone del widget. */ .sab-book-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)} .sab-book-btn:disabled{background:#d0d0d0;cursor:not-allowed;transform:none} @media(max-width:640px),(max-height:500px),(max-width:960px) and (max-height:720px){ #sar-tog{position:fixed!important;bottom:20px!important;right:20px!important;z-index:2147483646!important} #sar-tog.mob-gone{opacity:0!important;pointer-events:none!important;transform:scale(0.7)!important} /* ⚠ RESIDUO B28 (22 ottobre 2026): sul telefono la finestra NON ha piu' il tetto della pagina (max-height era 100%, ora none). Prende l'altezza che il browser dichiara visibile (sabRettangolo in widget-body.js) e basta. Firefox, mentre nasconde la sua barra scorrendo, dichiara subito lo spazio in piu' ma allarga la pagina solo a barra sparita del tutto: col tetto al 100% la chat restava ferma e sotto si apriva uno spazio alto quanto la barra. Quando il browser avvisa bene l'altezza non supera mai la pagina: identico a prima. none batte anche il max-height del computer (B51), come faceva il 100%. */ #sar-win{position:fixed!important;top:0;left:0!important;right:0!important;bottom:0!important;width:auto!important;max-width:100%!important;height:100%;max-height:none!important;border-radius:0!important;margin:0!important;box-shadow:none!important;border:none!important;z-index:2147483647!important;transform:translateY(100%)!important;visibility:hidden!important;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s ease,visibility 0s linear .3s!important} #sar-win.open{transform:none!important;opacity:1!important;visibility:visible!important;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s ease,visibility 0s!important} #sar-hdr{padding-top:max(14px,env(safe-area-inset-top,14px))} /* ⚠ RESIDUO B28, IL NOME IN FONDO (22 e 23 ottobre 2026): lo spazio per la barra di sistema in fondo allo schermo (env(safe-area-inset-bottom): la linea dell'iPhone, i tasti di Android quando la pagina ci arriva sotto) sta SOTTO il nome del bot, in fondo alla finestra, non piu' fra il campo e il nome (prima era il padding-bottom di #sar-ia). Dove env() vale 0 (Chrome, Samsung Internet, Opera, Brave) e' identico a prima: campo 10 px, nome 8 px. Vale anche in orizzontale (vedi B54 piu' sotto). FIREFOX: Firefox per Android (dalla 150, con la barra degli indirizzi in alto) dichiara come zona da evitare tutta la barra dei tasti (circa 48 px) anche se la pagina finisce SOPRA i tasti e non ci va mai sotto: difetto di Firefox, segnalato a Mozilla. Fra il campo e il nome il nome restava staccato di quasi 50 px; sotto il nome restava uno spazio vuoto alto uguale. Per questo su Firefox lo spazio non si usa e il nome resta a 8 px dal fondo come negli altri browser: la regola @supports qui sotto la legge solo Firefox (-moz-appearance e ::-moz-range-thumb esistono solo li'; provato: Chromium e WebKit la saltano, Firefox la applica). Se un giorno Firefox disegnasse la pagina sotto i tasti di sistema, questa regola va tolta. */ #sar-foot{padding-bottom:max(8px,env(safe-area-inset-bottom,8px))} @supports (-moz-appearance:none) or selector(::-moz-range-thumb){#sar-foot{padding-bottom:8px}} #sar-ta{font-size:16px} .sar-b{max-width:88%;font-size:14px} .sar-f input{font-size:16px} /* ⚠ B52: sotto i 16px Safari su iPhone ingrandisce la pagina quando si tocca il campo, e la chat a tutto schermo esce di lato. Per #sar-ta e .sar-f input c'era gia'; mancavano i campi del modulo appuntamento e la casella del messaggio al titolare. */ .sab-form-row input,.sab-form-row textarea,.sar-msg-box textarea{font-size:16px} #sar-toast{bottom:80px} /* ⚠ B28 (ottobre 2026): TELO sotto la chat aperta. La finestra prende l'altezza che il browser dichiara visibile; se quel numero e' sbagliato o arriva tardi (succede su Android con la tastiera aperta) il resto dello schermo mostrava il sito, che si poteva anche far scorrere. Il telo copre tutto lo schermo col fondo della chat, sta DIETRO header, messaggi e campo (z-index -1 dentro #sar-win) e i tocchi su di lui arrivano alla chat, non ai link del sito. Funziona perche' con .open il transform e' none: un fixed senza antenati con transform si misura sullo schermo e l'overflow:hidden della finestra non lo taglia. ⚠ Se #sar-win.open avesse transform, filter, contain o will-change, il telo verrebbe chiuso dentro la finestra e smetterebbe di coprire. overscroll-behavior: arrivati in cima o in fondo a un elenco della chat, il trascinamento non passa alla pagina sotto. */ /* ⚠ RESIDUO B28 (22 ottobre 2026): il telo va un'altezza di schermo OLTRE la pagina, sopra e sotto (top e bottom -100vh, prima 0). Alcuni browser del telefono mostrano un pezzo di schermo fuori dalla pagina: la striscia della barra che Firefox nasconde, lo spazio che Brave con la barra in basso lascia sotto la chat, il bordo mentre la tastiera si apre o si chiude. Li' il telo non arrivava e si vedeva il sito. La parte in piu' sta fuori dallo schermo e non allunga la pagina: un elemento fisso non conta per lo scorrimento. Il dito sul telo non trascina niente (touch-action pinch-zoom: resta solo lo zoom a due dita). Il telo e' fisso sullo schermo, quindi un trascinamento che parte da li' va allo schermo intero, non alla finestra: su Brave la fascia sotto la chat faceva scorrere lo schermo, con la barra grigia e la chat che saltava (provato sul banco con una fascia di 60 px: prima si spostava a ogni gesto, ora mai). Il colore del telo NON va mai cambiato: sta sopra lo sfondo della finestra e si vede attraverso le parti trasparenti (la riga del nome del bot e' al 35%). */ #sar-win.open::before{content:"";position:fixed;top:-100vh;left:0;right:0;bottom:-100vh;background:var(--sab-chat-bg);z-index:-1;touch-action:pinch-zoom} /* ⚠ RESIDUO B28 (22 ottobre 2026): con «I tuoi dati» aperta tutto quello che sta FUORI dalla finestra si scurisce come il velo del profilo (#sar-profov, stesso rgba). Dove il browser lascia spazio sotto la chat (Brave con la barra in basso) restava una striscia bianca sotto il velo scuro. Come funziona: ::after prende top e altezza della finestra (inherit, anche quelli scritti da sabRettangolo), quindi sta esattamente sopra la finestra, e la sua ombra larga un'altezza di schermo scurisce solo FUORI dal suo bordo, sopra il telo. Dentro la finestra non disegna niente e sta sotto header, messaggi e campo (z-index -1): provato pixel per pixel. NON scurire il telo (si vedeva attraverso la riga del nome del bot, trasparente al 35%) e NON usare l'outline della finestra (cambiava di poco la resa dei testi dentro). I browser senza :has() saltano solo questa regola: la striscia resta del colore della chat, mai il sito. */ #sar-win.open:has(#sar-profov.on)::after{content:"";position:fixed;left:0;right:0;top:inherit;height:inherit;box-shadow:0 0 0 100vh rgba(13,13,13,.55);z-index:-1} /* ⚠ RESIDUO B28, IL DITO (22 ottobre 2026): la finestra aperta sul telefono tiene per se' ogni trascinamento del dito. Con la tastiera aperta (e con alcune barre del browser) la zona visibile e' piu' piccola della pagina e il browser lascia trascinare tutto lo schermo per mostrare cosa c'e' dietro. Dove il dito non trovava un elenco da far scorrere (testata, campo, riga in fondo, spazio sotto, «I tuoi dati», conversazione corta) il gesto passava allo schermo, e ogni browser lo mostrava a modo suo: Brave la barra di scorrimento e una fascia grigia, Firefox la chat che saliva, Chrome e Samsung Internet la pagina sotto il fondo della chat, Opera insistendo in fondo ai messaggi. Come funziona, due difese insieme: 1. touch-action pinch-zoom: sulle parti che non scorrono il dito non trascina niente, resta solo lo zoom a due dita. Gli elenchi e il campo con tante righe scorrono come prima, perche' ogni contenitore che scorre riaccende il proprio trascinamento (regola dei browser, uguale in Chrome, Firefox e Safari). Questa difesa tiene anche quando Firefox, su un telefono lento, non aspetta la pagina e decide da solo a chi dare il gesto: il touch-action lo legge subito dal disegno della pagina, senza chiederlo alla pagina. 2. la trappola: la finestra e' un contenitore che scorre di un solo pixel (overflow-y auto, e l'::after della riga in fondo sporge di 1 px sotto la finestra) e non passa mai il trascinamento a quello che sta dietro (overscroll-behavior none). Serve per gli elenchi e il campo quando non hanno niente da scorrere: il loro gesto arriva qui, la finestra si sposta al massimo di quel pixel, che non si vede, e lo schermo resta fermo. Ai loro bordi gli elenchi si fermano (overscroll-behavior contain, qui sotto). Dopo il gesto la finestra torna a zero: Chrome e Safari da soli (scroll-snap sulla testata), Firefox no e ci pensa widget-body.js (scrollend). Se restasse in fondo di quel pixel, al tocco dopo Firefox per Android farebbe entrare e uscire la sua barra degli indirizzi e la chat salterebbe (il tremolio), e con «I tuoi dati» aperta in fondo resterebbe una riga chiara non scurita. NON fermare i tocchi con JavaScript (preventDefault sul touchmove): Firefox lo ascolta solo sul primo movimento del dito e quando lo ascolta puo' togliere anche il clic ai pulsanti. E NON togliere il pixel: un elenco che non ha niente da scorrere passa il gesto allo schermo anche con overscroll-behavior (provato). Tocchi, pressione lunga, selezione del testo e zoom con due dita restano al browser. La barra di scorrimento della finestra non si mostra (e' lunga 1 pixel). Provato sul banco con Chromium e con Firefox vero (senza Fission, come su Android): trascinamenti veloci, lenti e a raffica, conversazione corta e lunga: lo schermo non si sposta mai, quando il dito tocca la finestra e' a zero (239 tocchi su 240 a raffica: l'unico a 1 pixel mentre il gesto prima stava ancora scorrendo) e gli elenchi scorrono come prima. */ #sar-win.open{overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;scroll-snap-type:y mandatory;touch-action:pinch-zoom} #sar-win.open>#sar-hdr{scroll-snap-align:start} #sar-win.open::-webkit-scrollbar{display:none} #sar-win.open #sar-foot::after{content:"";position:absolute;left:0;bottom:-1px;width:1px;height:1px;pointer-events:none} #sar-msgs,#sar-hl,#sar-sc-w,#sar-profbox{overscroll-behavior:contain} } @media(max-height:500px){ #sar-hdr{padding:7px 12px!important} #sar-av{width:26px!important;height:26px!important} #sar-hn{font-size:13px!important} #sar-hs{font-size:10.5px!important} #sar-ia{padding:6px 10px!important} #sar-ta{padding-top:6px!important;padding-bottom:6px!important} #sar-msgs{padding:8px 10px!important;gap:8px!important} .sar-b{padding:8px 11px!important} } .sab-audit-card{background:var(--sab-chat-bg,#fff);border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08)} .sab-audit-head{padding:14px 16px;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(0,0,0,.06)} .sab-audit-url{font-weight:700;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sab-bot-bubble-text,#111)} .sab-audit-badge{font-size:11px;font-weight:700;flex-shrink:0} /* ⚠ Il margine SOPRA non e' decorazione: senza, la barra finiva appoggiata alla riga di separazione dell'intestazione e sembrava accavallata. */ .sab-audit-progress-track{height:7px;background:rgba(127,127,127,.14);border-radius:20px;overflow:hidden;margin:15px 16px 13px;position:relative} .sab-audit-progress-bar{height:100%;width:40%;background:var(--sab-primary);border-radius:2px;animation:sabAuditSlide 1.3s ease-in-out infinite} @keyframes sabAuditSlide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}} .sab-audit-progress-bar.sab-audit-reale{animation:none;width:0;border-radius:20px;position:relative;overflow:hidden; background:linear-gradient(90deg,var(--sab-primary) 0%,var(--sab-primary) 65%,rgba(255,255,255,.55) 100%); transition:width .5s cubic-bezier(.34,1.2,.64,1)} /* Il riflesso che scorre dice «sto ancora lavorando» anche nei secondi in cui la percentuale non si muove, perche' un controllo sta aspettando una risposta. */ .sab-audit-progress-bar.sab-audit-reale::after{content:'';position:absolute;inset:0;border-radius:20px; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%); transform:translateX(-100%);animation:sabAuditRiflesso 1.6s ease-in-out infinite} @keyframes sabAuditRiflesso{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} .sab-audit-perc-box{display:flex;align-items:baseline;gap:4px;flex-shrink:0} .sab-audit-conta{font-size:10.5px;color:#9a9a9f;font-variant-numeric:tabular-nums;flex-shrink:0;margin-left:auto;padding-left:8px} .sab-audit-perc{font-size:15px;font-weight:800;flex-shrink:0;color:var(--sab-primary);font-variant-numeric:tabular-nums;letter-spacing:-.3px} /* ⚠ Una PILA, non una riga sola. Con una riga sola lo spazio sotto la barra restava bianco finche' il server non mandava il primo passo, e la scheda sembrava vuota proprio nei secondi in cui il visitatore guarda. Qui restano in vista gli ultimi controlli finiti, con la spunta verde, e sotto quello in corso: si vede che sta lavorando anche stando fermi a guardare. */ .sab-audit-passi{display:flex;flex-direction:column;justify-content:flex-end;height:90px;margin:0 16px 14px;overflow:hidden} .sab-audit-passo{display:flex;align-items:center;gap:9px;height:30px;flex-shrink:0} .sab-audit-passo-testo{flex:1;min-width:0;font-size:12.5px;color:var(--sab-bot-bubble-text,#111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sab-audit-passo.sab-riga-fatta .sab-audit-passo-testo{color:#9a9a9f} .sab-audit-passo.sab-entra{animation:sabPassoEntra .34s cubic-bezier(.4,0,.2,1) both} .sab-audit-passo.sab-esce{animation:sabPassoEsce .38s cubic-bezier(.4,0,.2,1) both} @keyframes sabPassoEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes sabPassoEsce{0%{opacity:1;height:30px}100%{opacity:0;height:0}} .sab-audit-spin{width:17px;height:17px;flex-shrink:0;border-radius:50%;border:2px solid rgba(127,127,127,.2);border-top-color:var(--sab-primary);border-right-color:var(--sab-primary);animation:sabAuditGira .65s linear infinite} @keyframes sabAuditGira{to{transform:rotate(360deg)}} .sab-audit-fatto{width:16px;height:16px;flex-shrink:0;border-radius:50%;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;animation:sabAuditPop .3s cubic-bezier(.34,1.56,.64,1) both} @keyframes sabAuditPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} @media (prefers-reduced-motion:reduce){ .sab-audit-passo.sab-entra,.sab-audit-passo.sab-esce,.sab-audit-fatto{animation:none} .sab-audit-progress-bar.sab-audit-reale::after{animation:none;opacity:0} .sab-audit-spin{animation-duration:2s} .sab-audit-progress-bar.sab-audit-reale{transition:none} } .sab-audit-row{display:flex;align-items:flex-start;gap:10px;padding:9px 16px} .sab-audit-dot{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:1px} .sab-audit-row-text{min-width:0} .sab-audit-label{font-weight:700;font-size:12.5px;color:var(--sab-bot-bubble-text,#111)} .sab-audit-detail{font-size:11.5px;color:#888;margin-top:1px;line-height:1.4} .sab-audit-esito .sab-audit-hero{display:flex;align-items:center;gap:14px;padding:16px 16px 14px} .sab-audit-anello{position:relative;width:58px;height:58px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center; background:conic-gradient(var(--sab-voto-c) calc(var(--sab-voto) * 1%), rgba(127,127,127,.18) 0)} .sab-audit-anello::before{content:'';position:absolute;width:44px;height:44px;border-radius:50%;background:var(--sab-chat-bg,#fff)} .sab-audit-voto{position:relative;font-size:16px;font-weight:800;color:var(--sab-voto-c);font-variant-numeric:tabular-nums;line-height:1} .sab-audit-voto i{font-size:9px;font-style:normal;font-weight:700;margin-left:1px;opacity:.75} .sab-audit-hero-testo{min-width:0;flex:1} .sab-audit-hero-url{font-weight:800;font-size:13.5px;color:var(--sab-bot-bubble-text,#111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sab-audit-hero-sotto{font-size:11.5px;color:#888;margin-top:3px} .sab-audit-strip{display:flex;gap:2px;padding:0 16px 14px} .sab-audit-strip i{flex:1;height:7px;border-radius:2px;min-width:3px} .sab-audit-strip i.si{background:#22c55e} .sab-audit-strip i.no{background:#ef4444} .sab-audit-gruppo{border-top:1px solid rgba(127,127,127,.14);padding-top:2px} .sab-audit-gruppo-testa{display:flex;align-items:center;gap:8px;padding:11px 16px 3px} .sab-audit-gruppo-nome{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#9a9a9f;flex:1} .sab-audit-gruppo-conta{font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:20px;background:rgba(127,127,127,.12);color:#888} .sab-audit-gruppo-conta.pieno{background:rgba(34,197,94,.14);color:#16a34a} .sab-audit-nota{margin:12px 16px 4px;padding:10px 12px;background:rgba(0,0,0,.035);border-left:3px solid rgba(127,127,127,.35);border-radius:0 8px 8px 0;font-size:11.5px;color:#777;line-height:1.5} .sab-audit-summary{margin:6px 16px 14px;padding:11px 13px;background:rgba(0,0,0,.03);border-radius:10px;font-size:12.5px;color:var(--sab-bot-bubble-text,#111);line-height:1.5;font-style:italic} .sab-audit-foot{padding:14px 16px;border-top:1px solid rgba(0,0,0,.06)} /* ============================================================================ ARMATURA CONTRO I TEMI: leggere prima di toccare. Il widget vive dentro il sito del cliente e subisce il CSS del suo tema. ⚠⚠ QUI C'ERA UN BLOCCO CHE FACEVA IL DANNO, NON LA CURA. Diceva `min-width:0;min-height:0` sulle icone per togliere i limiti dei temi: ma quello non e' togliere un limite, e' dare il PERMESSO di schiacciarsi. Dentro un contenitore flessibile l'icona veniva compressa a larghezza ZERO (misurato su Flatsome: `SVG 0.0x15.0`) e `overflow:hidden` la tagliava via: restava il riquadro vuoto. La difesa giusta e' `flex-shrink:0`, nel blocco qui sotto. NON RIMETTERE `min-width:0` sulle icone. ⚠ REGOLA D'ORO, resta valida: qui si RIAFFERMANO solo valori che il widget ha gia' di suo. Mai valori nuovi, mai regole generiche su textarea/input/button. Motivo misurato: `#sar textarea` (un id + un elemento) VINCE su `#sar-ta` (un id solo), quindi un innocuo `min-height:0` in un blocco generico schiaccerebbe il campo di scrittura. Se serve blindare un'altra proprieta', si scrive nella regola dell'elemento preciso, non in un selettore generico. ========================================================================== */ /* Il tratto delle icone segue il colore del bottone: se il tema forza un colore sull'svg, l'icona diventa invisibile sul fondo scuro. */ #sar svg[stroke="currentColor"],#sar svg [stroke="currentColor"]{stroke:currentColor} /* Riaffermata perche' il blocco qui sotto ha la stessa specificita' e viene dopo. */ #sar-tog svg{position:absolute} /* Campo di scrittura: niente frecce sulla barra di scorrimento (certi temi le disegnano e restano quadrate fuori dagli angoli arrotondati). ⚠ Solo pseudo-elementi della barra: nessuna proprieta' del riquadro. */ #sar-ta::-webkit-scrollbar{width:6px} #sar-ta::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important} #sar-ta::-webkit-scrollbar-track{background:transparent} #sar-ta::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:10px} #sar-ta::-webkit-scrollbar-corner{background:transparent} /* --------------------------------------------------------------------------- RINFORZO PER I TEMI CHE USANO !important (difetto vero misurato su Flatsome). Sintomo: riquadri dei pulsanti visibili, icone dentro invisibili. ⚠⚠ CAUSA VERA, MISURATA, NON IPOTIZZATA: l'icona veniva fuori **larga ZERO** (`SVG 0.0x15.0`). Non era ne' il colore ne' il tratto: tratto, riempimento, spessore e opacita' arrivavano tutti giusti. Il tema aggiunge padding ai