: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)}} #sar-win{width:378px;max-width:calc(100vw - 40px);height:548px;max-height:calc(100vh - 40px);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} .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} #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:#111;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;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;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;letter-spacing:.02em} .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} #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:100%!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))} #sar-ia{padding-bottom:max(10px,env(safe-area-inset-bottom,10px))} #sar-ta{font-size:16px} .sar-b{max-width:88%;font-size:14px} .sar-f input{font-size:16px} #sar-toast{bottom:80px} } @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