.swcb {
--swcb-verde: #9cad3f;
--swcb-verde-scuro: #6f7d22;
--swcb-teal: #1b8a83;
--swcb-testo: #1f2328;
--swcb-sfondo: #ffffff;
--swcb-grigio: #f2f4f1;
position: fixed;
right: 16px;
bottom: 16px;
z-index: 99990;
font-family: inherit;
font-size: 15px;
line-height: 1.45;
color: var(--swcb-testo);
}
.swcb *, .swcb *::before, .swcb *::after { box-sizing: border-box; }
.swcb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .swcb-lancio {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 52px;
height: 52px;
padding: 0;
border: 0;
border-radius: 50% 50% 5px 50%;
background: var(--swcb-teal);
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
cursor: pointer;
transition: transform .2s ease, background .2s ease;
margin-left: auto;
} .swcb-lancio::before { content: ""; position: absolute; inset: -2px; }
.swcb-lancio:hover, .swcb-lancio:focus-visible { transform: scale(1.1); background: #146b65; }
.swcb-lancio:focus-visible { outline: 2px solid var(--swcb-verde); outline-offset: 3px; }
.swcb-lancio img { width: 42px; height: 42px; display: block; border-radius: 50%; background: #fff; } .swcb-fumetto {
position: absolute;
right: 0;
bottom: 62px;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}
.swcb-fumetto.swcb-visibile { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s; }
.swcb-fumetto-testo {
display: block;
background: var(--swcb-sfondo);
color: var(--swcb-testo);
border: 0;
padding: 7px 11px;
border-radius: 12px 12px 3px 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
font: inherit;
font-size: 13px;
line-height: 1.35;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.swcb-fumetto-testo strong { font-weight: 700; }
.swcb-fumetto-x {
position: absolute;
top: -8px;
left: -8px;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: #555;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
font: 14px/20px Arial, sans-serif;
cursor: pointer;
}
.swcb-pannello {
position: absolute;
right: 0;
bottom: 66px;
width: 370px;
max-width: calc(100vw - 32px);
height: 560px;
max-height: calc(100vh - 100px);
display: flex;
flex-direction: column;
background: var(--swcb-sfondo);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
overflow: hidden;
}
.swcb-pannello[hidden] { display: none; }
.swcb-testa {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--swcb-teal);
color: #fff;
}
.swcb-testa img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.swcb-testa div { flex: 1; display: flex; flex-direction: column; }
.swcb-testa span { font-size: 12px; opacity: .9; }
.swcb-chiudi { background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.swcb-messaggi { flex: 1; overflow-y: auto; padding: 12px; background: var(--swcb-grigio); }
.swcb-msg { display: flex; gap: 6px; margin-bottom: 10px; align-items: flex-end; }
.swcb-av { width: 28px; height: 28px; border-radius: 50%; background: #fff; flex: none; }
.swcb-bolla { background: var(--swcb-sfondo); padding: 9px 12px; border-radius: 14px 14px 14px 4px; max-width: 88%; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); overflow-wrap: anywhere; }
.swcb-bolla p { margin: 0 0 .5em; }
.swcb-bolla p:last-child { margin-bottom: 0; }
.swcb-bolla ul { margin: .3em 0 .5em 1.1em; padding: 0; }
.swcb-bolla a { color: var(--swcb-teal); text-decoration: underline; }
.swcb-bolla table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: .4em 0; }
.swcb-bolla td { border-bottom: 1px solid #e3e6e1; padding: 3px 4px; vertical-align: top; }
.swcb-bolla td:last-child { white-space: nowrap; text-align: right; }
.swcb-utente { justify-content: flex-end; }
.swcb-utente .swcb-bolla { background: var(--swcb-teal); color: #fff; border-radius: 14px 14px 4px 14px; }
.swcb-benvenuto { display: block; width: 96px; height: 96px; margin: 0 auto 6px; }
.swcb-fonte { margin-top: 8px; font-size: 12px; color: #5b6168; }
.swcb-contatti { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #d5d9d2; font-size: 13px; }
.swcb-anche { margin-top: 10px; font-size: 13px; font-weight: 600; }
.swcb-rapidi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.swcb-rapidi button {
border: 1px solid var(--swcb-teal);
background: #fff;
color: var(--swcb-teal);
border-radius: 999px;
padding: 5px 11px;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.swcb-rapidi button:hover, .swcb-rapidi button:focus-visible { background: var(--swcb-teal); color: #fff; }
.swcb-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #e3e6e1; background: #fff; }
.swcb-form input { flex: 1; min-width: 0; border: 1px solid #cfd4cc; border-radius: 999px; padding: 9px 14px; font: inherit; color: var(--swcb-testo); background: #fff; }
.swcb-form input:focus { outline: 2px solid var(--swcb-teal); border-color: transparent; }
.swcb-form button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--swcb-verde); color: #fff; font-size: 17px; cursor: pointer; }
.swcb-form button:hover { background: var(--swcb-verde-scuro); }
.swcb-nota { font-size: 11px; color: #6b7178; padding: 0 12px 8px; background: #fff; }
.swcb-nota a { color: inherit; }
@media (max-width: 520px) {
.swcb { right: 10px; bottom: 10px; }
.swcb-fumetto-testo { font-size: 12.5px; }
.swcb-fumetto { right: 0; bottom: 62px; }
.swcb.swcb-aperto { left: 0; right: 0; top: 0; bottom: 0; }
.swcb.swcb-aperto .swcb-pannello { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
.swcb.swcb-aperto .swcb-lancio, .swcb.swcb-aperto .swcb-fumetto { display: none; }
.swcb-form input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.swcb-lancio, .swcb-fumetto { transition: none; }
} #swcb button {
-webkit-appearance: none;
appearance: none;
margin: 0;
min-width: 0;
min-height: 0;
text-transform: none;
letter-spacing: normal;
text-shadow: none;
font-family: inherit;
}
#swcb .swcb-lancio {
width: 52px; height: 52px; padding: 0; border: 0;
border-radius: 50% 50% 5px 50%;
background: var(--swcb-teal);
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
#swcb .swcb-lancio:hover, #swcb .swcb-lancio:focus-visible { background: #146b65; }
#swcb .swcb-lancio img { width: 42px; height: 42px; max-width: none; border-radius: 50%; background: #fff; }
#swcb .swcb-fumetto-testo {
background: #fff; color: #1f2328; border: 0; outline: 0;
padding: 7px 11px; border-radius: 12px 12px 3px 12px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
font-size: 13px; line-height: 1.35; font-weight: 400; text-align: left;
}
#swcb .swcb-fumetto-x {
width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
background: #fff; color: #555; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
font: 14px/20px Arial, sans-serif;
}
#swcb .swcb-rapidi button { border: 1px solid var(--swcb-teal); background: #fff; color: var(--swcb-teal); border-radius: 999px; padding: 5px 11px; font-size: 13px; line-height: 1.3; }
#swcb .swcb-rapidi button:hover, #swcb .swcb-rapidi button:focus-visible { background: var(--swcb-teal); color: #fff; }
#swcb .swcb-chiudi { background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; padding: 0 4px; box-shadow: none; }
#swcb .swcb-form button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--swcb-verde); color: #fff; box-shadow: none; }
@media (max-width: 520px) {
#swcb .swcb-fumetto-testo { font-size: 12.5px; }
}