/* Graba Music — CHATBOT FAQ widget (statico, senza backend). Incluso su tutte le 6 pagine del sito (index/studio/4 etichette) insieme a js/chatbot.js. Accento: TEAL di firma Graba di default (self-contained, valori letterali — non dipende da variabili --teal/--accent del CSS host, che non sono garantite su ogni pagina: index.html ad es. non definisce mai --accent). Sulla pagina Studio (rosso "recording/on-air") il bottone eredita il rosso via l'attributo , l'unico hook cross-file usato per evitare qualunque dipendenza dall'ordine di caricamento dei CSS host. */ :root{ --cb-black:#000000; --cb-panel:#101414; --cb-line:rgba(255,255,255,.12); --cb-white:#F8F8F8; --cb-grey:#9aa3a3; --cb-accent:#00B8A8; --cb-accent-2:#5be8db; --cb-accent-dim:rgba(0,184,168,.18); } body[data-chatbot-accent="red"]{ --cb-accent:#E4483B; --cb-accent-2:#f0796c; --cb-accent-dim:rgba(228,72,59,.18); } #cbRoot{font-family:'Montserrat',system-ui,sans-serif} #cbRoot *{box-sizing:border-box} /* ===== BOTTONE FLOTTANTE ===== */ .cb-btn{ position:fixed;right:24px;bottom:24px;z-index:300; width:58px;height:58px;border-radius:50%;border:0;cursor:pointer; display:flex;align-items:center;justify-content:center; background:var(--cb-accent);color:var(--cb-black); box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 0 var(--cb-accent-dim); transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease; } .cb-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 36px rgba(0,0,0,.5),0 0 0 8px var(--cb-accent-dim)} .cb-btn:focus-visible{outline:2px solid var(--cb-white);outline-offset:3px} .cb-btn svg{width:26px;height:26px;transition:opacity .18s ease,transform .18s ease} .cb-btn .cb-btn-icon-close{position:absolute;opacity:0;transform:scale(.7) rotate(-45deg)} .cb-btn.is-open .cb-btn-icon-chat{opacity:0;transform:scale(.7) rotate(45deg)} .cb-btn.is-open .cb-btn-icon-close{opacity:1;transform:scale(1) rotate(0)} /* piccolo badge pulse per farsi notare la prima volta, si ferma da solo dopo poche battute */ .cb-btn::after{ content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--cb-accent); opacity:.55;animation:cbPulse 2.4s ease-out 3; } @keyframes cbPulse{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}} /* ===== PANNELLO ===== */ .cb-panel{ position:fixed;right:24px;bottom:94px;z-index:300; width:min(360px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 140px)); display:flex;flex-direction:column;overflow:hidden; background:var(--cb-panel);border:1px solid var(--cb-line);border-radius:18px; box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03); opacity:0;visibility:hidden;transform:translateY(14px) scale(.98); transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s linear .22s; } .cb-panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)} .cb-head{ flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px; padding:20px 20px 16px;border-bottom:1px solid var(--cb-line); background:radial-gradient(ellipse 120% 100% at 0% 0%,var(--cb-accent-dim),transparent 65%); } .cb-head-title{margin:0;font-size:1rem;font-weight:900;color:var(--cb-white);letter-spacing:-.01em} .cb-head-sub{margin:5px 0 0;font-size:.78rem;color:var(--cb-grey);line-height:1.4} .cb-close{ flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--cb-line);background:rgba(255,255,255,.04); color:var(--cb-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,color .2s ease; } .cb-close:hover,.cb-close:focus-visible{border-color:var(--cb-accent);color:var(--cb-accent)} .cb-close svg{width:14px;height:14px} .cb-body{flex:1;overflow-y:auto;padding:16px 18px 18px} .cb-body::-webkit-scrollbar{width:7px} .cb-body::-webkit-scrollbar-thumb{background:var(--cb-line);border-radius:99px} .cb-greet{margin:0 0 16px;font-size:.86rem;color:var(--cb-white);opacity:.92;line-height:1.55} .cb-faq{display:flex;flex-direction:column;gap:8px;margin:0 0 6px} .cb-q{ display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left; padding:12px 14px;border-radius:11px;border:1px solid var(--cb-line);background:rgba(255,255,255,.03); color:var(--cb-white);font-family:inherit;font-size:.82rem;font-weight:700;line-height:1.35;cursor:pointer; transition:border-color .2s ease,background .2s ease; } .cb-q:hover,.cb-q:focus-visible{border-color:var(--cb-accent-dim);background:rgba(255,255,255,.06)} .cb-q-arrow{flex:none;width:9px;height:9px;border-right:2px solid var(--cb-accent);border-bottom:2px solid var(--cb-accent);transform:rotate(-45deg);transition:transform .22s ease} .cb-q[aria-expanded="true"] .cb-q-arrow{transform:rotate(45deg)} .cb-a{ max-height:0;overflow:hidden;transition:max-height .28s ease; font-size:.8rem;color:var(--cb-grey);line-height:1.55; } .cb-a-inner{padding:11px 14px 2px} .cb-a a{color:var(--cb-accent);text-decoration:underline;text-underline-offset:2px} .cb-q[aria-expanded="true"] + .cb-a{max-height:220px} .cb-foot{flex:none;padding:14px 18px 18px;border-top:1px solid var(--cb-line)} .cb-tg{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%; padding:13px 16px;border-radius:99px;border:0;cursor:pointer; background:var(--cb-accent);color:var(--cb-black);font-family:inherit; font-size:.8rem;font-weight:800;letter-spacing:.02em;transition:transform .2s ease,box-shadow .2s ease; } .cb-tg:hover{transform:translateY(-2px);box-shadow:0 10px 24px var(--cb-accent-dim)} .cb-tg svg{width:17px;height:17px;flex:none} /* Toggle lingua interno (usato solo se la pagina non ha gia' un .lang-toggle globale nell'header — sulle 6 pagine del sito il .lang-toggle globale c'e' sempre, quindi questo blocco resta di riserva/nascosto: il widget segue la lingua attiva del sito, vedi js/chatbot.js). */ .cb-langhint{margin:10px 0 0;text-align:center;font-size:.68rem;color:var(--cb-grey);opacity:.7} @media (max-width:480px){ .cb-btn{right:16px;bottom:16px;width:54px;height:54px} .cb-panel{right:16px;left:16px;width:auto;bottom:82px;max-height:min(72vh,560px)} }