:root{--sab-primary:#0d0d0d;--sab-secondary:#1461CC;--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%} #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-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)} #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:1px;right: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 is NOT "screen minus 40". Below the window sit the round button (56px), its margin (12px) and the distance from the bottom (28px): 96px in all. With 40 the chat went past the top of the screen as soon as the browser window was less than 644px tall (a 1366x768 laptop with the browser bars) and the header with its buttons ended up off screen. 116 = 96 + 20 of breathing room on top. Above 664px of height nothing changes: the chat stays 548px tall as before. */ #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 solo `opacity`. Con la sola trasparenza la finestra resta nel documento a tutti gli effetti: `pointer-events:none` ferma il mouse ma NON la tastiera, quindi i pulsanti della chat chiusa restavano nel giro del tabulatore su OGNI pagina del sito, e i lettori di schermo annunciavano una finestra di dialogo aperta a chi non l'aveva mai aperta. ⚠ Il ritardo `visibility 0s linear .26s` serve a far vedere la dissolvenza in chiusura: senza, la finestra sparirebbe di colpo invece di sfumare. */ #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;padding:3px;background-origin:content-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;overflow:hidden;padding:4px;background-origin:content-box} #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} .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-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} /* The "Privacy policy" link keeps the colour of its line and stays underlined. Without this rule it took the link colour of the theme: with a dark theme and light links it came out white on white. #sar in front so that a theme rule loaded later (a:link, a:visited) cannot win. */ #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} /* The customer's initial (and the x that removes an attachment, #sar-aprm) sit on the primary colour, so their text takes the same pair as the primary buttons, "Start the conversation" first: the light contrast colour, which the panel describes as the text on primary buttons. Before they were fixed light colours (#f2f2f2 and #fff), unreadable on a light primary such as yellow, and this edition has no control to change them. */ .sar-av-sm.user{background:var(--sab-primary);color:var(--sab-bg)} .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-bg);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:#aaa;background:#f5f5f5} #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){box-shadow:inset 0 0 0 999px rgba(255,255,255,.14);transform:scale(1.05)} #sar-snd:disabled{background:#d0d0d0;cursor:not-allowed;transform:none} #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{border-color:#aaa;background:#f5f5f5} #sar-mic.sar-mic-on{background:#fef2f2;border-color:#ef4444;animation:sabMicPulse 1.4s ease-in-out infinite} @keyframes sabMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.35)} 50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}} /* A visible ring for whoever moves with the keyboard. Bubble, header buttons, attachment, microphone and send have outline:none, so Tab went through them without showing where it was. :focus-visible shows up only with the keyboard: a mouse click or a tap looks as before. Same rule as the complete edition, with the buttons this edition has. */ #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,.sar-msg-send:focus-visible{outline:2px solid var(--sab-secondary);outline-offset:2px} #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-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-pw{display:block;font-size:9px;opacity:.7;margin-top:1px;letter-spacing:.03em} #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-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} .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)} @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} /* Leftover of B28 (October 22, 2026): on phones the window is NO longer capped by the page (max-height was 100%, now none). It takes the height the browser reports as visible (sabRettangolo in widget-body.js) and that is all. Firefox, while it hides its bar during a scroll, reports the extra room at once but widens the page only once the bar is fully gone: capped at 100% the chat stood still and a gap as tall as the bar opened under it. When the browser reports correctly the height never exceeds the page: same as before. none also beats the desktop max-height (B51), as 100% did. */ #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))} /* Leftover of B28, THE NAME AT THE BOTTOM (October 22 and 23, 2026): the room for the system bar at the bottom of the screen (env(safe-area-inset-bottom): the iPhone home line, the Android buttons when the page reaches under them) sits BELOW the bot name, at the bottom of the window, no longer between the field and the name (it was the padding-bottom of #sar-ia). Where env() is 0 (Chrome, Samsung Internet, Opera, Brave) it is identical to before: field 10 px, name 8 px. It also applies sideways (see B54 below). FIREFOX: Firefox for Android (from 150, with the address bar at the top) reports the whole button bar (about 48 px) as an area to avoid even though the page ends ABOVE the buttons and never goes under them: a Firefox bug, reported to Mozilla. Between the field and the name the name stood almost 50 px away; below the name an empty space just as tall was left. So in Firefox that room is not used and the name stays 8 px from the bottom as in the other browsers: only Firefox reads the @supports rule below (-moz-appearance and ::-moz-range-thumb exist only there; tested: Chromium and WebKit skip it, Firefox applies it). If Firefox ever draws the page under the system buttons, this rule must go. */ #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: below 16px Safari on iPhone zooms the page in when the field is tapped, and the full-screen chat slides off to the side. #sar-ta and .sar-f input already had it; the box for writing a message to the owner did not. */ .sar-msg-box textarea{font-size:16px} #sar-toast{bottom:80px} /* B28 (October 2026): COVER under the open chat. The window takes the height the browser reports as visible; when that number is wrong or late (it happens on Android with the keyboard open) the rest of the screen showed the site, which could even be scrolled. The cover fills the whole screen with the chat background, sits BEHIND header, messages and input (z-index -1 inside #sar-win) and taps on it reach the chat, not the links of the site. It works because .open has transform:none: a fixed box with no transformed ancestor is sized on the screen and the window's overflow:hidden does not clip it. If #sar-win.open ever gets transform, filter, contain or will-change, the cover would be trapped inside the window and stop covering. overscroll-behavior: at the top or bottom of a chat list, dragging no longer passes to the page underneath. */ /* Leftover of B28 (October 22, 2026): the cover reaches one screen height PAST the page, above and below (top and bottom -100vh, they were 0). Some phone browsers show a piece of screen outside the page: the strip of the bar Firefox hides, the room Brave with its bottom toolbar leaves under the chat, the edge while the keyboard opens or closes. The cover did not reach there and the site showed. The extra part is off screen and does not make the page longer: a fixed box does not count for scrolling. A finger on the cover drags nothing (touch-action pinch-zoom: only two-finger zoom is left). The cover is fixed on the screen, so a drag starting there goes to the whole screen, not to the window: in Brave the band under the chat made the screen scroll, with the grey bar and the chat jumping (tested on the bench with a 60 px band: before it moved on every gesture, now never). Never change the color of the cover: it sits above the window background and shows through the see-through parts (the bot name line is at 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} /* Leftover of B28 (October 22, 2026): with «Your details» open everything OUTSIDE the window darkens like the profile veil (#sar-profov, same rgba). Where the browser leaves room under the chat (Brave with its bottom toolbar) a white strip remained under the dark veil. How it works: ::after takes the top and height of the window (inherit, also the ones written by sabRettangolo), so it sits exactly on the window, and its shadow, one screen height wide, darkens only OUTSIDE its edge, above the cover. Inside the window it draws nothing and stays under header, messages and field (z-index -1): tested pixel by pixel. Do NOT darken the cover (it showed through the bot name line, which is 35% see-through) and do NOT use the outline of the window (it slightly changed how the texts inside were drawn). Browsers without :has() only skip this rule: the strip keeps the chat color, never the site. */ #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} /* Leftover of B28, THE FINGER (October 22, 2026): on phones the open window keeps every finger drag for itself. With the keyboard open (and with some browser bars) the visible area is smaller than the page and the browser lets the whole screen be dragged to show what is behind. Wherever the finger found no list to scroll (header, field, bottom line, space below, «Your details», short conversation) the gesture went to the screen, and every browser showed it its own way: Brave the scrollbar and a grey strip, Firefox the chat moving up, Chrome and Samsung Internet the page under the bottom of the chat, Opera when pushing past the end of the messages. How it works, two defences together: 1. touch-action pinch-zoom: on the parts that do not scroll the finger drags nothing, only two-finger zoom is left. The lists and the field with many lines scroll as before, because every box that scrolls turns its own dragging back on (a browser rule, the same in Chrome, Firefox and Safari). This defence also holds when Firefox, on a slow phone, does not wait for the page and decides alone who gets the gesture: it reads touch-action straight from the drawing of the page, without asking the page. 2. the trap: the window is a box that scrolls by a single pixel (overflow-y auto, and the ::after of the bottom line sticks out 1 px below the window) and never hands a drag over to what is behind (overscroll-behavior none). It is there for the lists and the field when they have nothing to scroll: their gesture ends here, the window moves by that pixel at most, which cannot be seen, and the screen stays still. At their edges the lists stop (overscroll-behavior contain, below). After the gesture the window goes back to zero: Chrome and Safari by themselves (scroll-snap on the header), Firefox does not and widget-body.js does it (scrollend). Left one pixel down, on the next touch Firefox for Android would slide its address bar in and out and the chat would jump (the shaking), and with «Your details» open a light line would stay at the bottom, not darkened. Do NOT stop touches with JavaScript (preventDefault on touchmove): Firefox only listens to it on the first movement of the finger, and when it does it can also take the click away from buttons. And do NOT remove the pixel: a list with nothing to scroll hands the gesture to the screen even with overscroll-behavior (tested). Taps, long press, text selection and two-finger zoom stay with the browser. The window's own scrollbar is not shown (it is 1 pixel long). Tested on the bench in Chromium and in a real Firefox (without Fission, as on Android): fast, slow and rapid-fire drags, short and long conversation: the screen never moves, the window is at zero when the finger touches (239 touches out of 240 rapid-fire ones: the only one at 1 pixel while the gesture before was still scrolling) and the lists scroll as before. */ #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;padding:2px} #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}} /* ============================================================================ 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