:root{
  --bg:#060910;--bg-2:#0A0F1A;
  --panel:rgba(16,24,38,.72);--panel-2:rgba(20,30,46,.72);
  --card:rgba(10,15,26,.6);
  --glass:rgba(120,160,210,.06);
  --line:rgba(120,162,214,.14);--line-2:rgba(120,162,214,.28);
  --grid:rgba(90,130,190,.05);
  --text:#DCE4EF;--text-dim:#7E8CA3;--text-faint:#55627A;
  --accent:#0078D4;--accent-lit:#3EA0EE;--accent-glow:rgba(62,160,238,.5);--accent-soft:rgba(0,120,212,.12);
  --live:#2FD6E0;
  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-body:"Inter",system-ui,sans-serif;
  --gutter:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,.68,.16,1);
  --rvd:120ms;
}
body[data-theme="light"]{
  --bg:#E9EEF5;--bg-2:#E1E8F1;
  --panel:rgba(255,255,255,.76);--panel-2:rgba(255,255,255,.66);
  --card:rgba(255,255,255,.62);
  --glass:rgba(20,60,120,.05);
  --line:rgba(24,48,84,.15);--line-2:rgba(24,48,84,.27);
  --grid:rgba(40,90,160,.07);
  --text:#132234;--text-dim:#47586E;--text-faint:#7C8A9D;
  --accent:#0072CE;--accent-lit:#0A63B4;--accent-glow:rgba(0,120,212,.28);--accent-soft:rgba(0,120,212,.10);
  --live:#0C8FA0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--f-body);background:var(--bg);color:var(--text);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;
  transition:background .5s var(--ease),color .5s var(--ease)}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
:focus-visible{outline:2px solid var(--accent-lit);outline-offset:2px}
.mono{font-family:var(--f-mono)}

/* ambient background */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg__grid{position:absolute;inset:-2px;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(130% 110% at 50% 0%,#000 34%,transparent 92%)}
.bg__glow{position:absolute;border-radius:50%;filter:blur(100px)}
.bg__glow.a{width:62vw;height:62vw;top:-24vw;left:-14vw;background:radial-gradient(circle,rgba(0,120,212,.28),transparent 66%)}
.bg__glow.b{width:54vw;height:54vw;bottom:-26vw;right:-16vw;background:radial-gradient(circle,rgba(24,80,150,.22),transparent 66%);animation:drift 24s var(--ease) infinite alternate}
body[data-theme="light"] .bg__glow{opacity:.6}
@keyframes drift{to{transform:translate(4vw,-3vw) scale(1.08)}}
.bg__graph{position:absolute;inset:0;opacity:.5}
.bg__graph .g-line{stroke:var(--line-2);fill:none}
.bg__graph .g-node{fill:var(--accent-lit)}
.bg__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);mix-blend-mode:overlay;opacity:.6}
body[data-theme="light"] .bg__scan{opacity:.2}

.stage,.bg__graph{transition:filter .5s var(--ease),transform .5s var(--ease)}
body.blurred .stage{filter:blur(9px) saturate(.7);transform:scale(.985)}
body.blurred .bg__graph{filter:blur(6px)}

/* scrims — keep scrolling content clean under bars */
.topscrim,.botscrim{position:fixed;left:0;right:0;z-index:55;pointer-events:none;transition:background .5s var(--ease)}
.topscrim{top:0;height:90px;background:linear-gradient(var(--bg) 42%,rgba(0,0,0,0));backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.botscrim{bottom:0;height:96px;background:linear-gradient(0deg,var(--bg) 42%,rgba(0,0,0,0));backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(0deg,#000 55%,transparent);mask-image:linear-gradient(0deg,#000 55%,transparent)}

/* frame */
.frame{position:fixed;inset:0;z-index:56;pointer-events:none}
.frame::before{content:"";position:absolute;inset:13px;border:1px solid var(--line)}
.tick{position:absolute;width:15px;height:15px;border:1px solid var(--accent-lit);opacity:.8}
.tick.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.tick.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.tick.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.tick.br{bottom:8px;right:8px;border-left:none;border-top:none}

/* menubar */
.menubar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:20px var(--gutter) 0}
.mb-left{display:flex;align-items:center;gap:20px;min-width:0;flex:1}
.osmark{display:flex;align-items:center;gap:10px;pointer-events:auto;flex:none}
.osmark svg{width:26px;height:26px}
.osmark b{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.16em}
.osmark b i{color:var(--accent-lit);font-style:normal}
.mb-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.mb-nav::-webkit-scrollbar{display:none}
.mb-nav button{position:relative;padding:8px 12px;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.02em;color:var(--text-dim);transition:color .3s;white-space:nowrap}
.mb-nav button:hover{color:var(--text)}
.mb-nav button[aria-current="true"]{color:var(--text)}
.mb-nav button[aria-current="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:1px;background:var(--accent-lit)}
.mb-right{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:11px;color:var(--text-dim);pointer-events:auto;flex:none}
.spine-ind{display:flex;align-items:center;gap:7px}
.spine-ind .d{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live);animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line-2);
  padding:7px 9px;color:var(--text-dim);transition:.3s;height:30px}
.icon-btn:hover{border-color:var(--accent-lit);color:var(--text)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.theme-btn .i-sun{display:none}
body[data-theme="light"] .theme-btn .i-sun{display:block}
body[data-theme="light"] .theme-btn .i-moon{display:none}
.menu-tgl{display:none;pointer-events:auto;flex-direction:column;gap:5px;padding:8px}
.menu-tgl span{width:20px;height:1.5px;background:var(--text);transition:.3s}
.menu-tgl[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-tgl[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-tgl[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* dock */
.dock{position:fixed;left:50%;bottom:62px;transform:translateX(-50%);z-index:58;
  display:flex;gap:5px;padding:8px;border:1px solid var(--line);background:var(--panel);
  backdrop-filter:blur(14px);pointer-events:auto}
.dock button{position:relative;width:40px;height:40px;display:grid;place-items:center;color:var(--text-dim);transition:.3s var(--ease)}
.dock button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.5}
.dock button:hover{color:var(--text);background:var(--glass);transform:translateY(-3px)}
.dock button[aria-current="true"]{color:var(--accent-lit)}
.dock button[aria-current="true"]::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent-lit)}
.dock button::before{content:attr(data-label);position:absolute;top:-30px;left:50%;transform:translateX(-50%) translateY(4px);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;white-space:nowrap;color:var(--text);
  background:var(--bg-2);border:1px solid var(--line);padding:3px 8px;opacity:0;pointer-events:none;transition:.25s}
.dock button:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}

/* status bar */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 var(--gutter) 18px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:.04em;color:var(--text-dim);pointer-events:none}
.sb-reg b{color:var(--accent-lit)}
.sb-tr{display:flex;align-items:center;gap:3px;pointer-events:auto;border:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(10px);padding:5px;max-width:calc(100vw - 40px);overflow-x:auto;scrollbar-width:none}
.sb-tr::-webkit-scrollbar{display:none}
.sb-tr .lbl{font-size:9.5px;letter-spacing:.16em;color:var(--text-faint);text-transform:uppercase;margin:0 8px 0 5px;white-space:nowrap}
.trbtn{padding:6px 11px;font-size:11px;letter-spacing:.06em;color:var(--text-dim);transition:.3s;white-space:nowrap}
.trbtn:hover{color:var(--text)}
.trbtn[aria-pressed="true"]{color:var(--accent-lit);background:var(--accent-soft)}
.sb-stat{display:flex;gap:14px;align-items:center}
.sb-stat .live{color:var(--live)}
.blink2{animation:blink 1.4s steps(1) infinite}

/* stage / modules */
.stage{position:fixed;inset:0;z-index:10}
.module{position:absolute;inset:0;display:flex;align-items:flex-start;padding:118px var(--gutter) 120px;
  opacity:0;visibility:hidden;pointer-events:none;overflow-y:auto;overscroll-behavior:contain}
.module__inner{width:100%}
/* overview stays visually centered (fits viewport); others start at a uniform height */
#overview{align-items:center;padding-top:96px}
.module.is-active{opacity:1;visibility:visible;pointer-events:auto}
.module__inner{width:100%;max-width:1220px;margin:0 auto}

.rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 56ms + var(--rvd,120ms))}
.module.is-active .rv{opacity:1;transform:none}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.2em;color:var(--accent-lit);text-transform:uppercase}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--accent-lit)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.h-xl{font-size:clamp(34px,5.6vw,76px)}
.h-lg{font-size:clamp(28px,4vw,52px)}
.lead{color:var(--text-dim);font-size:clamp(15px,1.2vw,18px);line-height:1.65;max-width:56ch}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;font-family:var(--f-mono);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:.35s var(--ease)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-lit);box-shadow:0 8px 30px -8px var(--accent-glow);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent-lit);color:var(--accent-lit)}
.btn svg{width:14px;height:14px}

/* overview */
.ov{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
.ov>:first-child{min-width:0}
.ov .eyebrow{margin-bottom:24px}
.ov h1{margin-bottom:24px}
.ov .cta-row{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.ov__vis{position:relative;aspect-ratio:1;max-width:430px;width:100%;margin-inline:auto}
.ov__vis svg{width:100%;height:100%;overflow:visible}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:38px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--card);padding:18px 16px}
.tile b{font-family:var(--f-display);font-size:22px;color:var(--text);display:block}
.tile span{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase;margin-top:5px;display:block}

/* stack */
.stk{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,64px);align-items:center}
.stk__list{display:flex;flex-direction:column;border:1px solid var(--line)}
.stk-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 18px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:.3s var(--ease);text-align:left;width:100%}
.stk-row:last-child{border-bottom:none}
.stk-row .n{font-family:var(--f-mono);font-size:11px;color:var(--text-faint)}
.stk-row .nm{font-family:var(--f-display);font-weight:500;font-size:16px}
.stk-row .ly{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase}
.stk-row:hover{background:var(--glass)}
.stk-row[aria-selected="true"]{background:var(--accent-soft)}
.stk-row[aria-selected="true"] .n,.stk-row[aria-selected="true"] .nm{color:var(--accent-lit)}
.stk__detail{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);padding:clamp(22px,3vw,34px);position:relative;min-height:280px}
.stk__detail .big{font-family:var(--f-mono);font-size:11px;color:var(--accent-lit);letter-spacing:.14em}
.stk__detail h3{font-size:clamp(24px,3vw,34px);margin:14px 0 16px}
.stk__detail p{color:var(--text-dim);line-height:1.7;max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-family:var(--f-mono);font-size:11px;color:var(--text-dim);border:1px solid var(--line-2);padding:6px 11px}
.stk__strata{position:absolute;right:24px;top:24px;width:72px;height:auto;opacity:.9}

/* generic section head + grids */
.sec-head h2{margin-top:20px}
.sec-head .lead{margin-top:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:42px;background:var(--line);border:1px solid var(--line)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:42px;background:var(--line);border:1px solid var(--line)}

/* pillars */
.pill{background:var(--card);padding:26px 22px 28px;text-align:left;position:relative;transition:background .35s var(--ease);cursor:pointer;width:100%;display:flex;flex-direction:column;min-height:230px}
.pill:hover{background:var(--panel-2)}
.pill__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pill__ic{width:32px;height:32px;color:var(--accent-lit)}
.pill__ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.badge{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--live);border:1px solid var(--line-2);padding:4px 8px;white-space:nowrap}
.pill h3{font-size:18px;margin-top:20px}
.pill p{color:var(--text-dim);font-size:13px;line-height:1.55;margin-top:10px;flex:1}
.pill__more{font-family:var(--f-mono);font-size:10.5px;color:var(--accent-lit);letter-spacing:.06em;margin-top:16px}
.pill::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent-lit);transition:width .4s var(--ease)}
.pill:hover::after{width:100%}

/* apps */
.app{background:var(--card);padding:26px 24px 28px;text-align:left;transition:.35s var(--ease);cursor:pointer;width:100%;position:relative}
.app:hover{background:var(--panel-2)}
.app__ic{width:42px;height:42px;color:var(--accent-lit);margin-bottom:18px}
.app__ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
.app .cat{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase}
.app h3{font-size:19px;margin:6px 0 10px}
.app p{color:var(--text-dim);font-size:13px;line-height:1.55}
.app__open{position:absolute;top:22px;right:22px;font-family:var(--f-mono);font-size:16px;color:var(--text-faint);transition:.3s}
.app:hover .app__open{color:var(--accent-lit)}

/* two experiences */
.exp{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line)}
.expcol{background:var(--card);padding:30px 26px}
.expcol .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--accent-lit);text-transform:uppercase}
.expcol h3{font-size:22px;margin:8px 0 18px}
.expcol ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.expcol li{display:flex;gap:11px;color:var(--text-dim);font-size:14px;line-height:1.5}
.expcol li::before{content:"›";color:var(--accent-lit);font-family:var(--f-mono);flex:none}
.expcol a{display:inline-flex;margin-top:20px;font-family:var(--f-mono);font-size:12px;color:var(--accent-lit);letter-spacing:.04em}
.exp-note{font-family:var(--f-mono);font-size:12px;color:var(--text-dim);margin-top:22px;line-height:1.6}
.exp-note b{color:var(--text)}

/* capacità */
.cap-block+.cap-block{margin-top:64px}
.capcard{background:var(--card);padding:26px 24px}
.capcard .ic{width:30px;height:30px;color:var(--accent-lit);margin-bottom:16px}
.capcard .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.capcard h4{font-size:17px}
.capcard p{color:var(--text-dim);font-size:13px;line-height:1.6;margin-top:10px}
.cap-infra{font-family:var(--f-mono);font-size:12px;color:var(--text-dim);margin-top:22px;line-height:1.6;border-left:2px solid var(--line-2);padding-left:16px}
.cap-infra b{color:var(--text)}

/* metodo */
.method__vis{margin-top:44px}
.method__vis svg{width:100%;height:auto;display:block;overflow:visible}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px}
.step .ix{font-family:var(--f-mono);font-size:11px;color:var(--accent-lit);letter-spacing:.1em}
.step h4{font-weight:500;font-size:17px;margin-top:6px}
.step p{color:var(--text-dim);font-size:13px;line-height:1.6;margin-top:8px}
.step .princ{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--text-faint);line-height:1.55}
.step .princ b{color:var(--live);font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;display:block;margin-bottom:5px;text-transform:uppercase}

/* progetti */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
.proj{border:1px solid var(--line);background:var(--card);overflow:hidden;text-align:left;display:flex;flex-direction:column;transition:.35s var(--ease)}
.proj:hover{border-color:var(--line-2);transform:translateY(-3px)}
.proj__media{aspect-ratio:16/10;position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg-2)}
.proj__media img{width:100%;height:100%;object-fit:cover;display:block}
.proj__media svg{width:100%;height:100%;display:block}
.proj__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 44px)}
.proj__tag{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-lit);background:var(--panel);border:1px solid var(--line-2);padding:4px 8px;backdrop-filter:blur(6px)}
.proj__b{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.proj__b h3{font-size:19px;margin-bottom:9px}
.proj__b p{color:var(--text-dim);font-size:13px;line-height:1.55;flex:1}
.proj__b a{display:inline-flex;margin-top:16px;font-family:var(--f-mono);font-size:11.5px;color:var(--accent-lit);letter-spacing:.04em}
.proj:hover .proj__b a{text-decoration:underline;text-underline-offset:3px}

/* client logos marquee */
.clients{margin-top:52px;border-top:1px solid var(--line);padding-top:34px}
.clients__label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--text-faint);text-transform:uppercase;text-align:center;margin-bottom:24px}
.clients__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.clients__track{display:flex;align-items:center;gap:64px;width:max-content;animation:marquee 26s linear infinite}
.clients:hover .clients__track{animation-play-state:paused}
.clients__track img{height:34px;width:auto;flex:none;filter:grayscale(1) brightness(0) invert(1);opacity:.55;transition:filter .35s var(--ease),opacity .35s var(--ease)}
body[data-theme="light"] .clients__track img{filter:grayscale(1) brightness(0);opacity:.5}
.clients__track img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* insights */
.feed{margin-top:42px;border:1px solid var(--line)}
.feed-row{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 22px;
  border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.feed-row:last-child{border-bottom:none}
.feed-row:hover{background:var(--glass)}
.feed-row .fx{font-family:var(--f-mono);font-size:11px;color:var(--text-faint)}
.feed-row .ft{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.8vw,20px)}
.feed-row .fc{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--accent-lit);text-transform:uppercase;margin-top:4px;display:block}
.feed-row .fg{font-family:var(--f-mono);font-size:16px;color:var(--text-faint);transition:.3s}
.feed-row:hover .fg{color:var(--accent-lit)}

/* contatto */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.contact .lead{margin-top:22px}
.clines{margin-top:36px;border-top:1px solid var(--line)}
.cline{display:flex;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:13px}
.cline span{color:var(--text-faint);font-size:11px;letter-spacing:.12em}
.cline a:hover{color:var(--accent-lit)}
.signoff{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);padding:clamp(24px,3vw,38px)}
.signoff .mk{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,30px)}
.signoff p{color:var(--text-dim);font-size:14px;line-height:1.7;margin-top:14px}
.signoff svg{width:100%;height:auto;margin-top:22px;overflow:visible}
.signoff .piva{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);margin-top:20px;letter-spacing:.04em}

/* footer */
.ldfooter{margin-top:56px;border-top:1px solid var(--line);padding-top:38px}
.ldf-cols{display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1.2fr;gap:34px}
.ldf-brand .ldf-mark{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.ldf-brand .ldf-mark svg{width:24px;height:24px}
.ldf-brand .ldf-mark b{font-family:var(--f-display);font-weight:700;letter-spacing:.14em;font-size:14px}
.ldf-brand .ldf-mark b i{color:var(--accent-lit);font-style:normal}
.ldf-brand p{color:var(--text-dim);font-size:13px;line-height:1.65;max-width:42ch}
.ldf-legal{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);margin-top:16px;letter-spacing:.03em;line-height:1.6}
.ldf-col{display:flex;flex-direction:column;gap:11px}
.ldf-h{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--text-faint);text-transform:uppercase;margin-bottom:3px}
.ldf-col a,.ldf-col>button{text-align:left;font-size:13px;color:var(--text-dim);transition:.25s;display:inline-flex;align-items:center;gap:9px}
.ldf-col a:hover,.ldf-col>button:hover{color:var(--accent-lit)}
.ldf-col svg{width:15px;height:15px;flex:none}
.ldf-tr{display:flex;flex-wrap:wrap;gap:5px;border:1px solid var(--line);padding:5px;width:max-content;max-width:100%}
.ldf-tr .trbtn{font-family:var(--f-mono)}
.ldf-hint{font-family:var(--f-mono);font-size:10px;color:var(--text-faint);letter-spacing:.02em;margin-top:4px}
.ldf-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:.03em;flex-wrap:wrap}
@media (max-width:1080px){.ldf-cols{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.ldf-cols{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   BACKDROP BLUR — quando un overlay/chat è aperto
═══════════════════════════════════════════════════════════════════════════ */
body.blurred .stage,
body.blurred .bg__graph,
body.blurred .bg__grid {
  filter: blur(6px) saturate(0.85);
  transform: scale(0.992);
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
body.blurred .dock {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* client ticker — nomi in stile terminale OS */
.client-ticker{margin-top:48px;display:flex;align-items:center;gap:18px;overflow:hidden;opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--i,0)*56ms + var(--rvd,120ms))}
.module.is-active .client-ticker{opacity:1;transform:none}
.client-ticker__label{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--text-faint);text-transform:uppercase;white-space:nowrap;flex:none;border-right:1px solid var(--line);padding-right:18px}
.client-ticker__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);flex:1;min-width:0}
.client-ticker__track{display:flex;align-items:center;gap:36px;width:max-content;animation:ticker 32s linear infinite}
.client-ticker:hover .client-ticker__track{animation-play-state:paused}
.client-ticker__track span{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.02em;color:var(--text-dim);white-space:nowrap;transition:color .3s;cursor:default}
.client-ticker__track span:hover{color:var(--accent-lit)}
.client-ticker__track .sep{color:var(--text-faint);opacity:.4;font-size:10px}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .client-ticker{flex-direction:column;align-items:flex-start;gap:10px}
  .client-ticker__label{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:8px;width:100%}
}

/* toast notification — LD Chat */
.ld-toast{position:fixed;top:20px;right:20px;z-index:95;display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border:1px solid var(--line-2);background:var(--panel);backdrop-filter:blur(20px);box-shadow:0 20px 60px -20px rgba(0,0,0,.5);max-width:340px;transform:translateX(120%);opacity:0;transition:transform .45s var(--ease),opacity .35s var(--ease);pointer-events:auto;cursor:pointer}
.ld-toast.show{transform:translateX(0);opacity:1}
.ld-toast__dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);flex:none;margin-top:4px;animation:blink 2s steps(1) infinite}
.ld-toast__body{flex:1;min-width:0}
.ld-toast__from{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--accent-lit);text-transform:uppercase;margin-bottom:5px}
.ld-toast__text{font-size:13px;color:var(--text);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ld-toast__time{font-family:var(--f-mono);font-size:10px;color:var(--text-faint);margin-top:6px}
.ld-toast__close{width:22px;height:22px;display:grid;place-items:center;color:var(--text-faint);flex:none;margin-top:-2px;margin-right:-4px;transition:.25s}
.ld-toast__close:hover{color:var(--text)}

/* konami code — CRT mode */
body.crt-mode{overflow:hidden}
body.crt-mode .stage{filter:contrast(1.15) brightness(.95)}
body.crt-mode::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,0,0,.015) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(0,255,0,.015) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(0,0,255,.015) 0 1px,transparent 1px 2px);animation:crtFlicker .12s infinite}
body.crt-mode::before{content:"";position:fixed;inset:0;z-index:301;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.4),inset 0 0 40px rgba(0,0,0,.2);border-radius:20% / 10%}
@keyframes crtFlicker{0%,100%{opacity:1}50%{opacity:.97}}
.crt-hud{position:fixed;top:var(--gutter);right:var(--gutter);z-index:302;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--live);border:1px solid var(--live);padding:6px 12px;background:rgba(6,9,16,.8);opacity:0;transition:opacity .5s;pointer-events:none}
body.crt-mode .crt-hud{opacity:1}

/* ===== TRANSITIONS — cover family ===== */
.veil{position:fixed;inset:0;z-index:70;pointer-events:none;clip-path:inset(0 0 100% 0)}
.veil .v-panel{position:absolute;inset:0;background:var(--bg);border:0 solid var(--accent-lit)}
.veil .v-scan{position:absolute;left:0;right:0;height:2px;top:0;background:linear-gradient(90deg,transparent,var(--accent-lit),transparent);box-shadow:0 0 20px var(--accent-glow);opacity:0}
.veil .v-edge{position:absolute;top:0;bottom:0;width:2px;left:0;background:linear-gradient(180deg,transparent,var(--accent-lit),transparent);box-shadow:0 0 20px var(--accent-glow);opacity:0}
.veil .v-ring{position:absolute;left:50%;top:50%;width:30px;height:30px;border:1px solid var(--accent-lit);border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0}
.veil .v-hud{position:absolute;left:var(--gutter);bottom:calc(var(--gutter) + 4px);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--text-dim);opacity:0}
.veil .v-hud b{color:var(--accent-lit)}

.veil.spawn.run{animation:coverTop 1140ms var(--ease) forwards}
.veil.spawn.run .v-scan{animation:scanTop 560ms var(--ease) forwards}
.veil.spawn.run .v-hud{animation:hudFade 1140ms var(--ease) forwards}
.veil.rise{clip-path:inset(100% 0 0 0)}
.veil.rise.run{animation:coverBottom 1140ms var(--ease) forwards}
.veil.rise.run .v-scan{animation:scanBottom 560ms var(--ease) forwards}
.veil.rise.run .v-hud{animation:hudFade 1140ms var(--ease) forwards}
.veil.sweep{clip-path:inset(0 100% 0 0)}
.veil.sweep.run{animation:coverLeft 1140ms var(--ease) forwards}
.veil.sweep.run .v-edge{animation:edgeMove 1140ms var(--ease) forwards}
.veil.sweep.run .v-hud{animation:hudFade 1140ms var(--ease) forwards}
.veil.iris{clip-path:circle(0% at 50% 50%)}
.veil.iris.run{animation:coverIris 1140ms var(--ease) forwards}
.veil.iris.run .v-ring{animation:ringPulse 1140ms var(--ease) forwards}
.veil.iris.run .v-hud{animation:hudFade 1140ms var(--ease) forwards}

@keyframes coverTop{0%{clip-path:inset(0 0 100% 0)}44%{clip-path:inset(0)}56%{clip-path:inset(0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes coverBottom{0%{clip-path:inset(100% 0 0 0)}44%{clip-path:inset(0)}56%{clip-path:inset(0)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes coverLeft{0%{clip-path:inset(0 100% 0 0)}44%{clip-path:inset(0)}56%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes coverIris{0%{clip-path:circle(0% at 50% 50%)}44%{clip-path:circle(150% at 50% 50%)}56%{clip-path:circle(150% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%)}}
@keyframes scanTop{0%{top:0;opacity:0}10%{opacity:1}44%{top:100%;opacity:1}52%{opacity:0}100%{opacity:0}}
@keyframes scanBottom{0%{top:100%;opacity:0}10%{opacity:1}44%{top:0;opacity:1}52%{opacity:0}100%{opacity:0}}
@keyframes edgeMove{0%{left:-2px;opacity:0}6%{opacity:1}44%{left:100%;opacity:1}52%{opacity:0}56%{left:-2px;opacity:1}100%{left:100%;opacity:1}}
@keyframes ringPulse{0%{transform:translate(-50%,-50%) scale(0);opacity:0}18%{opacity:1}50%{transform:translate(-50%,-50%) scale(22);opacity:.35}100%{transform:translate(-50%,-50%) scale(30);opacity:0}}
@keyframes hudFade{0%,8%{opacity:0}18%{opacity:1}56%{opacity:1}72%{opacity:0}}

/* overlays / palette / window / shortcuts */
.overlay{position:fixed;inset:0;z-index:90;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(4,7,13,.55)}
body[data-theme="light"] .overlay{background:rgba(120,140,170,.35)}
.overlay.open{display:flex}
.palette{width:min(620px,92vw);border:1px solid var(--line-2);background:var(--panel);backdrop-filter:blur(20px);box-shadow:0 30px 90px -30px rgba(0,0,0,.6);animation:popIn .3s var(--ease)}
@keyframes popIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.pal-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.pal-in svg{width:16px;height:16px;stroke:var(--text-faint);fill:none;stroke-width:1.6}
.pal-in input{flex:1;background:none;border:none;color:var(--text);font-family:var(--f-body);font-size:16px}
.pal-in input:focus{outline:none}
.pal-in input::placeholder{color:var(--text-faint)}
.pal-list{max-height:46vh;overflow-y:auto;padding:8px}
.pal-group{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--text-faint);text-transform:uppercase;padding:12px 12px 6px}
.pal-item{display:flex;align-items:center;gap:13px;padding:11px 12px;cursor:pointer;transition:background .15s}
.pal-item .pic{width:26px;height:26px;flex:none;display:grid;place-items:center;color:var(--accent-lit)}
.pal-item .pic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.pal-item .pt{font-size:14px}
.pal-item .ps{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);margin-left:auto}
.pal-item.sel,.pal-item:hover{background:var(--accent-soft)}
.pal-empty{padding:22px 14px;color:var(--text-faint);font-size:14px}

.win{width:min(680px,94vw);max-height:80vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line-2);background:var(--panel);backdrop-filter:blur(22px);box-shadow:0 40px 120px -30px rgba(0,0,0,.6);animation:winIn .35s var(--ease)}
@keyframes winIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.win__bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.win__dots{display:flex;gap:7px}
.win__dots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2);display:block}
.win__dots i:first-child{background:var(--accent);border-color:var(--accent)}
.win__title{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--text-dim)}
.win__close{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;color:var(--text-faint);transition:.3s;border:1px solid transparent}
.win__close:hover{color:var(--text);border-color:var(--line-2)}
.win__body{padding:clamp(24px,3vw,38px);overflow-y:auto}
.win__cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--accent-lit);text-transform:uppercase}
.win__body h3{font-size:clamp(24px,3vw,34px);margin:12px 0 18px}
.win__body p{color:var(--text-dim);line-height:1.75;max-width:52ch}
.win__body .chips{margin-top:22px}
.win__foot{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.sc{width:min(440px,92vw);border:1px solid var(--line-2);background:var(--panel);backdrop-filter:blur(20px);padding:28px;animation:popIn .3s var(--ease)}
.sc h3{font-size:20px;margin-bottom:18px}
.sc-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--text-dim)}
.sc-row:last-child{border:none}
.sc-row kbd{font-family:var(--f-mono);font-size:11px;color:var(--text);border:1px solid var(--line-2);padding:4px 9px}

/* mobile menu */
.mmenu{position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);gap:2px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;overflow-y:auto}
.mmenu.open{opacity:1;visibility:visible}
.mmenu button{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:500;font-size:clamp(22px,6vw,34px);color:var(--text)}
.mmenu button[aria-current="true"]{color:var(--accent-lit)}

/* boot */
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease),visibility .6s}
.boot.done{opacity:0;visibility:hidden}
.boot__box{width:min(460px,82vw);font-family:var(--f-mono);font-size:12.5px;color:var(--text-dim)}
.boot__logo{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.boot__logo svg{width:32px;height:32px}
.boot__logo span{font-family:var(--f-display);font-weight:700;letter-spacing:.14em;font-size:19px;color:var(--text)}
.boot__logo span i{color:var(--accent-lit);font-style:normal}
.boot__line{opacity:0;margin:5px 0;display:flex;gap:10px;align-items:baseline}
.boot__line.show{opacity:1;transition:opacity .25s}
.boot__line .ok{color:var(--accent-lit)}
.boot__line .dim{color:var(--text-faint);margin-left:auto}
.boot__prog{height:2px;background:var(--line-2);margin-top:20px;overflow:hidden;position:relative}
.boot__prog i{position:absolute;inset:0;background:var(--accent-lit);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--accent-glow)}

@media (max-width:1080px){
  .ov{grid-template-columns:1fr;gap:34px}.ov__vis{max-width:320px;order:-1}
  .stk{grid-template-columns:1fr;gap:30px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .exp{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr;gap:34px}
  .dock{bottom:56px}
}
@media (max-width:760px){
  .mb-nav{display:none}.menu-tgl{display:flex}
  .mb-right .spine-ind span{display:none}
  .dock{display:none}
  .statusbar{justify-content:center;padding:0 20px 14px}
  .sb-stat{display:none}
  .sb-reg{font-size:10px}
  .module,#overview{padding:96px 22px 104px;align-items:flex-start}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .grid-4,.grid-3,.proj-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .frame::before{inset:9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important}
  .rv{transition-duration:.2s!important}
  .veil{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
1.  DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Colori primari */
  --ld-primary:        #0078d4;
  --ld-primary-hover:  #005a9e;
  --ld-primary-soft:   #e6f2fb;   /* wash chiaro per bordi/sfondi sottili */
  --ld-primary-tint:   #cde4f5;   /* leggermente più intenso del soft */
  
  /* Neutral scale */
  --ld-black:          #0a0a0a;
  --ld-gray-900:       #1a1a1a;
  --ld-gray-700:       #4a4a4a;
  --ld-gray-600:       #6b6b6b;
  --ld-gray-500:       #8a8a8a;
  --ld-gray-400:       #b5b5b5;
  --ld-gray-300:       #d4d4d4;
  --ld-gray-200:       #e4e4e4;
  --ld-gray-150:       #ededed;
  --ld-gray-100:       #f5f5f5;
  --ld-gray-50:        #fafafa;
  --ld-white:          #ffffff;
  
  /* Semantiche */
  --ld-bg-page:        var(--ld-white);
  --ld-bg-panel:       var(--ld-white);
  --ld-bg-chat:        var(--ld-gray-50);
  --ld-bg-user-bubble: var(--ld-primary);
  --ld-bg-assistant:   var(--ld-white);
  --ld-text-primary:   var(--ld-gray-900);
  --ld-text-secondary: var(--ld-gray-600);
  --ld-text-muted:     var(--ld-gray-500);
  --ld-text-on-primary:#ffffff;
  --ld-border:         var(--ld-gray-200);
  --ld-border-strong:  var(--ld-gray-300);
  
  /* Ombre sottili multi-livello */
  --ld-shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04),
                 0 1px 3px rgba(10, 10, 10, 0.06);
  --ld-shadow-2: 0 2px 4px rgba(10, 10, 10, 0.06),
                 0 4px 8px rgba(10, 10, 10, 0.08);
  --ld-shadow-3: 0 4px 8px rgba(10, 10, 10, 0.08),
                 0 12px 24px rgba(10, 10, 10, 0.10),
                 0 24px 48px rgba(10, 10, 10, 0.08);
  
  /* Raggi */
  --ld-radius-sm:  6px;
  --ld-radius-md:  10px;
  --ld-radius-lg:  14px;
  --ld-radius-xl:  18px;
  --ld-radius-pill: 999px;
  
  /* Spaziature */
  --ld-space-1: 4px;
  --ld-space-2: 8px;
  --ld-space-3: 12px;
  --ld-space-4: 16px;
  --ld-space-5: 20px;
  --ld-space-6: 24px;
  --ld-space-8: 32px;
  
  /* Tipografia */
  --ld-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ld-text-xs:   11px;
  --ld-text-sm:   13px;
  --ld-text-base: 14px;
  --ld-text-md:   15px;
  --ld-text-lg:   17px;
  
  /* Transizioni */
  --ld-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ld-transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ld-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Dimensioni pannello */
  --ld-panel-width:  480px;
  --ld-panel-height: 700px;
  
  /* Z-index scale */
  --ld-z-toggle:  9998;
  --ld-z-panel:   9999;
  --ld-z-privacy: 10000;
  --ld-z-modal:   11000;
}

/* ═══════════════════════════════════════════════════════════════════════════
2.  RESET & BASE WIDGET
═══════════════════════════════════════════════════════════════════════════ */
#chat-app,
#chat-app * {
  box-sizing: border-box;
}
#chat-app {
  font-family: var(--ld-font);
  font-size: var(--ld-text-base);
  line-height: 1.5;
  color: var(--ld-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[v-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
3.  TOGGLE FLOATING BUTTON
═══════════════════════════════════════════════════════════════════════════ */
#chat-toggle {
  position: fixed;
  bottom: 34px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ld-primary) 0%, #0062b1 100%);
  color: var(--ld-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 120, 212, 0.28),
              0 1px 3px rgba(0, 120, 212, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: var(--ld-z-toggle);
  transition: transform var(--ld-transition),
              box-shadow var(--ld-transition);
  font-size: 20px;
}
#chat-toggle:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 16px rgba(0, 120, 212, 0.32),
              0 3px 6px rgba(0, 120, 212, 0.18),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#chat-toggle.chat-open {
  transform: rotate(90deg);
}
#chat-toggle.chat-open:hover {
  transform: rotate(90deg) translateY(-2px);
}
#chat-toggle.has-unread {
  animation: ld-pulse 2.5s infinite;
}
#chat-toggle .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--ld-radius-pill);
  background: #e53935;
  color: var(--ld-white);
  font-size: var(--ld-text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ld-white);
  animation: ld-badge-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px rgba(229, 57, 53, 0.3);
}
@keyframes ld-pulse {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.30),
                0 2px 4px rgba(0, 120, 212, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 0 0 0 rgba(0, 120, 212, 0.4);
  }
  50% {
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.30),
                0 2px 4px rgba(0, 120, 212, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 0 0 14px rgba(0, 120, 212, 0);
  }
}
@keyframes ld-badge-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════
4.  PANNELLO CHAT
═══════════════════════════════════════════════════════════════════════════ */
#chat-assistant {
  position: fixed;
  bottom: 114px;
  right: 24px;
  width: var(--ld-panel-width);
  height: var(--ld-panel-height);
  max-height: calc(100vh - 124px);
  background: var(--ld-bg-panel);
  border-radius: var(--ld-radius-xl);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04),
              0 8px 16px rgba(10, 10, 10, 0.06),
              0 24px 48px rgba(10, 10, 10, 0.10),
              0 32px 80px rgba(10, 10, 10, 0.06);
  border: 1px solid rgba(10, 10, 10, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--ld-z-panel);
  animation: ld-panel-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ld-panel-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
4a. HEADER PROFESSIONALE (logo + identità + close)
═══════════════════════════════════════════════════════════════════════════ */
.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ld-white);
  border-bottom: 1px solid var(--ld-border);
  position: relative;
  z-index: 2;
}
.chat-header-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.chat-header-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  /* Se il logo è nero SVG, lo leggermente "rialzo" con padding background */
  padding: 2px;
  background: var(--ld-gray-100);
  border-radius: var(--ld-radius-sm);
}
.chat-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-header-title {
  font-size: var(--ld-text-md);
  font-weight: 600;
  color: var(--ld-gray-900);
  line-height: 1.2;
}
.chat-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ld-text-xs);
  color: var(--ld-gray-600);
  line-height: 1;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
  animation: ld-status-pulse 2s infinite;
}
@keyframes ld-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
.chat-header-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ld-gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ld-transition-fast);
  flex-shrink: 0;
}
.chat-header-close:hover {
  background: var(--ld-gray-100);
  color: var(--ld-gray-900);
}

/* ═══════════════════════════════════════════════════════════════════════════
5.  HEADER COUNTER (limite messaggi)
═══════════════════════════════════════════════════════════════════════════ */
.chat-counter-container {
  flex-shrink: 0;
  padding: 10px 16px 0 16px;
  background: var(--ld-white);
}
.chat-counter {
  background: var(--ld-primary-soft);
  border: 1px solid var(--ld-primary-tint);
  color: var(--ld-primary);
  padding: 8px 12px;
  border-radius: var(--ld-radius-md);
  font-size: var(--ld-text-sm);
  font-weight: 500;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
6.  CHAT BOX (area messaggi scrollabile)
═══════════════════════════════════════════════════════════════════════════ */
.chat-box {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  background: var(--ld-bg-chat);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
6a. PATTERN DECORATIVI SVG (ispirati al logo Livedata)
═══════════════════════════════════════════════════════════════════════════ */
.chat-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: 
    radial-gradient(circle at 20% 30%, var(--ld-primary) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--ld-primary) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--ld-primary) 0.5px, transparent 0.5px);
  background-size: 120px 120px, 100px 100px, 60px 60px;
  z-index: 0;
}
.chat-box > * {
  position: relative;
  z-index: 1;
}

.chat-box::-webkit-scrollbar { width: 6px; }
.chat-box::-webkit-scrollbar-track { background: transparent; }
.chat-box::-webkit-scrollbar-thumb {
  background: var(--ld-gray-300);
  border-radius: var(--ld-radius-pill);
}
.chat-box::-webkit-scrollbar-thumb:hover { background: var(--ld-gray-400); }

/* ═══════════════════════════════════════════════════════════════════════════
7.  MESSAGGI (bubble chat)
═══════════════════════════════════════════════════════════════════════════ */
.message-row {
  display: flex;
  gap: 10px;
  animation: ld-msg-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
}
@keyframes ld-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.message-row.user-msg {
  flex-direction: row-reverse;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--ld-gray-100);
  border: 1px solid var(--ld-gray-200);
}
.user-msg .avatar {
  background: var(--ld-primary-soft);
  border-color: var(--ld-primary-tint);
}
.message-content {
  max-width: calc(100% - 44px);
  padding: 12px 14px;
  border-radius: var(--ld-radius-lg);
  font-size: var(--ld-text-base);
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.assistant-msg .message-content {
  background: var(--ld-bg-assistant);
  color: var(--ld-text-primary);
  border: 1px solid var(--ld-border);
  border-top-left-radius: var(--ld-radius-sm);
  box-shadow: var(--ld-shadow-1);
}
.user-msg .message-content {
  background: var(--ld-bg-user-bubble);
  color: var(--ld-text-on-primary);
  border-top-right-radius: var(--ld-radius-sm);
  /* ═══════════════════════════════════════════════════════════════════
     ACCENT DINAMICO: gradiente sottile su bubble utente
     ═══════════════════════════════════════════════════════════════════ */
  position: relative;
}
.user-msg .message-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
}
.message-content > div {
  margin: 0;
}
/* Markdown dentro bubble */
.message-content p {
  margin: 0 0 8px 0;
}
.message-content p:last-child { margin-bottom: 0; }
.message-content ul,
.message-content ol {
  margin: 8px 0;
  padding-left: 22px;
}
.message-content li {
  margin-bottom: 4px;
}
.message-content a {
  color: var(--ld-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.message-content a:hover {
  color: var(--ld-primary-hover);
}
.user-msg .message-content a {
  color: var(--ld-white);
  text-decoration: underline;
}
.message-content code {
  background: var(--ld-gray-100);
  padding: 1px 6px;
  border-radius: var(--ld-radius-sm);
  font-size: 0.9em;
  font-family: 'SF Mono', Consolas, Monaco, monospace;
  color: var(--ld-gray-900);
}
.user-msg .message-content code {
  background: rgba(255, 255, 255, 0.2);
  color: var(--ld-white);
}
.message-content pre {
  background: var(--ld-gray-100);
  padding: 10px;
  border-radius: var(--ld-radius-md);
  overflow-x: auto;
  font-size: var(--ld-text-sm);
  margin: 8px 0;
}
.message-content h3 {
  font-size: var(--ld-text-md);
  font-weight: 600;
  margin: 10px 0 6px 0;
  color: var(--ld-gray-900);
}
.message-content strong {
  font-weight: 600;
}
.timestamp {
  font-size: var(--ld-text-xs);
  color: var(--ld-text-muted);
  margin-top: 6px;
  font-weight: 400;
}
.user-msg .timestamp {
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════
8.  TYPING INDICATOR (3 punti animati)
═══════════════════════════════════════════════════════════════════════════ */
.spinner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
}
.spinner .dot {
  width: 6px;
  height: 6px;
  background: var(--ld-primary, #0078d4);
  border-radius: 50%;
  animation: ld-typing 1.6s infinite ease-in-out;
  opacity: 0.3;
}
.spinner .dot:nth-child(1) { animation-delay: 0ms; }
.spinner .dot:nth-child(2) { animation-delay: 240ms; }
.spinner .dot:nth-child(3) { animation-delay: 480ms; }
@keyframes ld-typing {
  0%, 100%  { transform: translateY(0) scale(1);     opacity: 0.3; }
  40%       { transform: translateY(-5px) scale(1.2); opacity: 1;   }
  60%       { transform: translateY(-2px) scale(1.05);opacity: 0.7; }
}
.typing-label {
  font-size: 11px;
  color: var(--ld-text-muted, #999);
  margin-left: 4px;
  font-style: italic;
  animation: ld-label-fade 0.4s ease-in;
}
@keyframes ld-label-fade {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
9.  ONBOARDING BUBBLE
═══════════════════════════════════════════════════════════════════════════ */
.onboarding-bubble .message-content {
  padding-bottom: 14px;
}
.onboarding-bubble p {
  margin: 0 0 12px 0;
  font-weight: 500;
  color: var(--ld-gray-900);
}
.onboarding-bubble .onboarding-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.onboarding-bubble .onboarding-options button {
  padding: 10px 14px;
  border: 1px solid var(--ld-border-strong);
  background: var(--ld-white);
  color: var(--ld-gray-700);
  border-radius: var(--ld-radius-md);
  cursor: pointer;
  text-align: left;
  font-size: var(--ld-text-base);
  font-weight: 500;
  font-family: var(--ld-font);
  transition: all var(--ld-transition-fast);
  position: relative;
}
.onboarding-bubble .onboarding-options button:hover {
  background: var(--ld-primary-soft);
  border-color: var(--ld-primary);
  color: var(--ld-primary);
  transform: translateX(2px);
}
.onboarding-bubble .onboarding-options button:active {
  transform: translateX(0);
}
.onboarding-bubble .onboarding-skip {
  margin-top: 10px;
  padding: 6px 2px;
  background: transparent;
  border: none;
  color: var(--ld-gray-500);
  font-size: var(--ld-text-sm);
  font-family: var(--ld-font);
  cursor: pointer;
  text-align: left;
}
.onboarding-bubble .onboarding-skip:hover {
  color: var(--ld-gray-900);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
10. SERVICE CARD (collapsed → espandibile)
═══════════════════════════════════════════════════════════════════════════ */
.service-card {
  margin: 10px 0 4px 0;
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius-md);
  background: var(--ld-white);
  overflow: hidden;
  transition: all var(--ld-transition);
  animation: ld-card-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ld-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.service-card:hover {
  border-color: var(--ld-primary-tint);
  box-shadow: var(--ld-shadow-1);
}
.service-card.expanded {
  border-color: var(--ld-primary);
  box-shadow: var(--ld-shadow-2);
}
.service-card-head {
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  user-select: none;
  transition: background var(--ld-transition-fast);
}
.service-card-head:hover {
  background: var(--ld-primary-soft);
}
.service-card-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.service-card-name {
  font-weight: 600;
  font-size: var(--ld-text-base);
  /* ═══════════════════════════════════════════════════════════════════
     PALETTE DINAMICA: gradiente brand sul nome servizio
     ═══════════════════════════════════════════════════════════════════ */
  background: linear-gradient(135deg, var(--ld-primary) 0%, #005a9e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}
.service-card-range {
  font-size: var(--ld-text-xs);
  color: var(--ld-gray-600);
  font-weight: 500;
}
.service-card-chevron {
  color: var(--ld-primary);
  font-size: 14px;
  transition: transform var(--ld-transition);
  flex-shrink: 0;
}
.service-card.expanded .service-card-chevron {
  transform: rotate(90deg);
}
.service-card-body {
  padding: 4px 14px 14px 14px;
  border-top: 1px solid var(--ld-border);
  background: var(--ld-gray-50);
  animation: ld-body-in 200ms ease-out;
}
@keyframes ld-body-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.service-card-row {
  margin-top: 10px;
  font-size: var(--ld-text-sm);
  color: var(--ld-gray-700);
  line-height: 1.5;
}
.service-card-label {
  font-weight: 600;
  color: var(--ld-gray-900);
  margin-right: 6px;
  display: inline-block;
  min-width: 70px;
}
.service-card-body ul {
  margin: 4px 0 0 0;
  padding-left: 18px;
  list-style-type: disc;
}
.service-card-body li {
  margin-bottom: 3px;
  color: var(--ld-gray-700);
}
.service-card-cta {
  margin-top: 14px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: var(--ld-primary);
  color: var(--ld-white);
  border-radius: var(--ld-radius-md);
  font-weight: 600;
  font-size: var(--ld-text-base);
  font-family: var(--ld-font);
  cursor: pointer;
  transition: background var(--ld-transition-fast), transform var(--ld-transition-fast);
}
.service-card-cta:hover {
  background: var(--ld-primary-hover);
  transform: translateY(-1px);
}
.service-card-cta:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
11. FOLLOW-UPS (pill cliccabili sotto il messaggio)
═══════════════════════════════════════════════════════════════════════════ */
.followups-box {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--ld-border);
}
.followups-label {
  font-size: var(--ld-text-xs);
  color: var(--ld-gray-500);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.followups-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.followup-btn {
  padding: 6px 12px;
  background: var(--ld-white);
  color: var(--ld-primary);
  border: 1px solid var(--ld-primary-tint);
  border-radius: var(--ld-radius-pill);
  font-size: var(--ld-text-sm);
  font-weight: 500;
  font-family: var(--ld-font);
  cursor: pointer;
  transition: all var(--ld-transition-fast);
}
.followup-btn:hover {
  background: var(--ld-primary);
  color: var(--ld-white);
  border-color: var(--ld-primary);
  transform: translateY(-1px);
}
.followup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.followup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--ld-transition-fast);
}
.followup-dot--deepen  { background: #534AB7; }
.followup-dot--scope   { background: #0F6E56; }
.followup-dot--action  { background: #993C1D; }
.followup-dot--compare { background: #854F0B; }
.followup-dot--default { background: var(--ld-gray-400, #888780); }
.followup-btn:hover .followup-dot { background: var(--ld-white); }

/* ═══════════════════════════════════════════════════════════════════════════
12. QUICK ACTIONS (collassabili con toggle)
═══════════════════════════════════════════════════════════════════════════ */
.faq-selector {
  flex-shrink: 0;
  padding: 0;
  border-top: 1px solid var(--ld-border);
  background: var(--ld-white);
}
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--ld-font);
  font-size: var(--ld-text-xs);
  font-weight: 600;
  color: var(--ld-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background var(--ld-transition-fast), color var(--ld-transition-fast);
}
.faq-toggle:hover {
  background: var(--ld-gray-50);
  color: var(--ld-gray-900);
}
.faq-toggle svg {
  transition: transform var(--ld-transition);
  color: var(--ld-gray-500);
}
.faq-toggle svg.rotated {
  transform: rotate(180deg);
}
.faq-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px 16px;
}
.faq-buttons button {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
  padding: 8px 12px;
  background: var(--ld-gray-50);
  color: var(--ld-gray-700);
  border: 1px solid var(--ld-gray-200);
  border-radius: var(--ld-radius-md);
  font-size: var(--ld-text-sm);
  font-weight: 500;
  font-family: var(--ld-font);
  cursor: pointer;
  transition: all var(--ld-transition-fast);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faq-buttons button:hover {
  background: var(--ld-primary-soft);
  color: var(--ld-primary);
  border-color: var(--ld-primary-tint);
  transform: translateY(-1px);
}
/* Transizione collapse */
.faq-slide-enter-active,
.faq-slide-leave-active {
  transition: max-height 250ms ease, opacity 200ms ease;
  overflow: hidden;
}
.faq-slide-enter-from,
.faq-slide-leave-to {
  max-height: 0;
  opacity: 0;
}
.faq-slide-enter-to,
.faq-slide-leave-from {
  max-height: 200px;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
13. INPUT AREA
═══════════════════════════════════════════════════════════════════════════ */
.input-area {
  flex-shrink: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ld-white);
  border-top: 1px solid var(--ld-border);
  position: relative;
}
.input-area input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--ld-border-strong);
  border-radius: var(--ld-radius-md);
  font-size: var(--ld-text-base);
  font-family: var(--ld-font);
  color: var(--ld-gray-900);
  background: var(--ld-white);
  outline: none;
  transition: border-color var(--ld-transition-fast),
              box-shadow var(--ld-transition-fast);
}
.input-area input:focus {
  border-color: var(--ld-primary);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12);
}
.input-area input::placeholder {
  color: var(--ld-gray-500);
}
.input-area input:disabled {
  background: var(--ld-gray-50);
  cursor: not-allowed;
  color: var(--ld-gray-500);
}
.input-area button {
  padding: 10px 16px;
  border: none;
  background: var(--ld-primary);
  color: var(--ld-white);
  border-radius: var(--ld-radius-md);
  font-size: var(--ld-text-base);
  font-weight: 600;
  font-family: var(--ld-font);
  cursor: pointer;
  transition: background var(--ld-transition-fast), transform var(--ld-transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.input-area button:hover:not(:disabled) {
  background: var(--ld-primary-hover);
  transform: translateY(-1px);
}
.input-area button:active:not(:disabled) {
  transform: translateY(0);
}
.input-area button:disabled {
  background: var(--ld-gray-300);
  cursor: not-allowed;
  transform: none;
}
.input-area button.clear-chat {
  background: transparent;
  color: var(--ld-gray-500);
  padding: 10px 8px;
  font-weight: 500;
  font-size: var(--ld-text-sm);
}
.input-area button.clear-chat:hover {
  background: var(--ld-gray-100);
  color: var(--ld-gray-900);
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
13a. SUCCESS FEEDBACK ANIMATION (checkmark pop post-invio)
═══════════════════════════════════════════════════════════════════════════ */
@keyframes ld-confetti-pop {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
.input-area.sent-success::after {
  content: "✓";
  position: absolute;
  right: 52px; /* prima del pulsante Invia */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ld-confetti-pop 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════
14. VOICE TOGGLE
═══════════════════════════════════════════════════════════════════════════ */
.voice-container {
  flex-shrink: 0;
  padding: 6px 20px 10px 20px;
  background: var(--ld-white);
}
.voice-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--ld-text-xs);
    color: var(--ld-gray-600);
    user-select: none;
    flex-wrap: wrap;
}

.voice-toggle input[type="checkbox"] {
  accent-color: var(--ld-primary);
  cursor: pointer;
}
.speaking-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: ld-pulse-speak 1.2s infinite;
}
@keyframes ld-pulse-speak {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
15. PRIVACY NOTICE
═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--ld-z-modal);
  animation: ld-fade-in 200ms ease-out;
}
@keyframes ld-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-content {
  background: var(--ld-white);
  border-radius: var(--ld-radius-xl);
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--ld-shadow-3);
  animation: ld-panel-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
/* Header modale privacy */
.modal-privacy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 0;
}
.modal-privacy-header h3 {
  margin: 0;
  font-size: var(--ld-text-base);
  font-weight: 600;
  color: var(--ld-gray-900);
  line-height: 1.4;
  flex: 1;
}
.modal-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 15px;
  color: var(--ld-gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ld-transition-fast);
  margin-top: -2px;
}
.modal-close:hover {
  background: var(--ld-gray-100);
  color: var(--ld-gray-900);
}
/* Body scrollabile */
.modal-body {
  overflow-y: auto;
  padding: 12px 24px 4px;
  flex-grow: 1;
}
.modal-body p {
  margin: 0 0 10px 0;
  font-size: var(--ld-text-sm);
  line-height: 1.65;
  color: var(--ld-gray-700);
}
.modal-body p strong {
  color: var(--ld-gray-900);
  font-weight: 600;
}
.modal-body a {
  color: var(--ld-primary);
  text-decoration: underline;
}
/* Label sezione */
.privacy-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ld-gray-500) !important;
  margin-top: 14px !important;
  margin-bottom: 3px !important;
}
/* Link informativa completa */
.privacy-external {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid var(--ld-border);
  display:none;
}
.privacy-external a {
  font-weight: 500;
  font-size: var(--ld-text-sm);
}
/* Footer modale */
.modal-privacy-footer {
  padding: 12px 24px 20px;
  border-top: 1px solid var(--ld-border);
}
.btn-privacy-ok {
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: var(--ld-radius-md);
  background: var(--ld-primary);
  color: var(--ld-white);
  font-size: var(--ld-text-sm);
  font-weight: 600;
  font-family: var(--ld-font);
  cursor: pointer;
  transition: background var(--ld-transition-fast);
  text-align: center;
}
.btn-privacy-ok:hover {
  background: var(--ld-primary-hover);
}
.btn-privacy-ok--secondary {
  background: var(--ld-gray-100);
  color: var(--ld-gray-700);
}
.btn-privacy-ok--secondary:hover {
  background: var(--ld-gray-200);
}

/* ═══════════════════════════════════════════════════════════════════════════
16. CHAT FOOTER
═══════════════════════════════════════════════════════════════════════════ */
.chat-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 10px;
  background: var(--ld-white);
  border-top: 1px solid var(--ld-border);
}
.chat-footer small {
  font-size: 10px;
  color: var(--ld-gray-500);
  letter-spacing: 0.3px;
}
.chat-footer__spacer {
  flex: 1;
}
.chat-footer small {
  flex: 0 0 auto;
}
.chat-footer__privacy-link {
  flex: 1;
  text-align: right;
  font-size: 10px;
  color: var(--ld-gray-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--ld-font);
  text-decoration: underline;
  letter-spacing: 0.3px;
  transition: color var(--ld-transition-fast);
}
.chat-footer__privacy-link:hover {
  color: var(--ld-gray-700);
}

/* ═══════════════════════════════════════════════════════════════════════════
17. EMPTY STATE — Illustrazione custom
═══════════════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--ld-text-secondary);
  animation: ld-fade-in 400ms ease-out;
  position: relative;
  z-index: 1;
}
.empty-illustration {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  opacity: 0.8;
}
.empty-text {
  font-size: var(--ld-text-sm);
  line-height: 1.5;
  max-width: 280px;
  color: var(--ld-gray-600);
}

/* ═══════════════════════════════════════════════════════════════════════════
18. RETRY INLINE BUTTON (per errori recuperabili)
═══════════════════════════════════════════════════════════════════════════ */
.retry-inline {
  background: var(--ld-primary-soft);
  color: var(--ld-primary);
  border: 1px solid var(--ld-primary-tint);
  padding: 4px 10px;
  border-radius: var(--ld-radius-sm);
  font-size: var(--ld-text-sm);
  font-weight: 500;
  cursor: pointer;
  margin-left: 8px;
  transition: all var(--ld-transition-fast);
  font-family: var(--ld-font);
}
.retry-inline:hover {
  background: var(--ld-primary);
  color: var(--ld-white);
}


/* ═══════════════════════════════════════════════════════════════════════════
19. RESPONSIVE (mobile)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

span.fullscreen-icon {
    display: none;
}
  #chat-assistant {
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 92vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  #chat-toggle {
    bottom: 26px;
    right: 16px;
    width: 46px;
    height: 46px;
  }
  .chat-box {
    padding: 14px 16px;
  }
  .input-area,
  .faq-selector,
  .chat-counter-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .message-content {
    font-size: var(--ld-text-md);
  }
}



/* Transizione fluida per il pannello chat */
#chat-assistant {
  transition: all 0.2s ease-out;
}

/* Stato fullscreen */
/* Stato fullscreen (specificità più alta) */
#chat-assistant.chat-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  bottom: auto;
  right: auto;
  z-index: 20000;
}

/* Stile del pulsante fullscreen nell'header */
.chat-header-fullscreen {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ld-gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ld-transition-fast);
  flex-shrink: 0;
  font-size: 18px;
}
.chat-header-fullscreen:hover {
  background: var(--ld-gray-100);
  color: var(--ld-gray-900);
}

/* Opzionale: migliora il layout del box messaggi quando fullscreen */
.chat-fullscreen .chat-box {
  max-height: none;
}


/* In fullscreen, allarga i messaggi */
#chat-assistant.chat-fullscreen .message-content {
  max-width: 85%; /* invece di calc(100% - 44px) */
}

/* In fullscreen, centra meglio i messaggi dell'assistente */
#chat-assistant.chat-fullscreen .assistant-msg .message-content {
  margin-right: auto;
}

/* In fullscreen, allarga le card */
#chat-assistant.chat-fullscreen .info-card,
#chat-assistant.chat-fullscreen .timeline-card {
  width: 100%;
  max-width: none;
}

#chat-assistant.chat-fullscreen .chat-box {
  padding: 24px 32px; /* più respiro laterale */
}

#chat-assistant.chat-fullscreen .message-content {
  padding: 14px 18px;
  font-size: 15px; /* leggermente più grande */
}

#chat-assistant.chat-fullscreen .timestamp {
  font-size: 11px;
}

#chat-assistant.chat-fullscreen .chat-header {
  box-shadow: var(--ld-shadow-2);
  border-bottom: none; /* evita doppio bordo */
}

#chat-assistant {
  animation: ld-panel-in 200ms cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

.chat-header-fullscreen:active {
  transform: scale(0.95);
}

#chat-assistant {
  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.05);
}

#chat-assistant.chat-fullscreen .comparison-grid {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.chat-box::-webkit-scrollbar {
  width: 8px;
}
.chat-box::-webkit-scrollbar-track {
  background: var(--ld-gray-100);
  border-radius: 10px;
}
.chat-box::-webkit-scrollbar-thumb {
  background: var(--ld-gray-400);
  border-radius: 10px;
}
.chat-box::-webkit-scrollbar-thumb:hover {
  background: var(--ld-gray-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
20. ACCESSIBILITY
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
*:focus-visible {
  outline: 2px solid var(--ld-primary);
  outline-offset: 2px;
}
#chat-toggle:focus-visible {
  outline-offset: 4px;
}
/* Hide scrollbar for Firefox */
.chat-box {
  scrollbar-width: thin;
  scrollbar-color: var(--ld-gray-300) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURED CARDS — InfoCard e TimelineCard (v1.5)
═══════════════════════════════════════════════════════════════════════════ */

/* Contenitore comune */
.info-card,
.timeline-card {
  margin: 12px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ld-border);
  background: var(--ld-white);
  box-shadow: var(--ld-shadow-1);
  overflow: hidden;
  animation: ld-card-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── COMPARISON card ──────────────────────────────────────────────────── */
.info-card-comparison {
  border-top: 3px solid var(--ld-primary);
}
.info-card-header {
  padding: 11px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ld-primary);
}
.comparison-grid {
  display: grid;
  gap: 1px;
  background: var(--ld-gray-150);
}
.comparison-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.comparison-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.comparison-col {
  background: var(--ld-white);
  padding: 10px 12px 12px;
}
.comparison-col-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ld-gray-900);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ld-primary-tint);
}
.comparison-col.highlighted .comparison-col-label {
  color: var(--ld-primary);
  border-bottom-color: var(--ld-primary);
}
.comparison-col-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ld-primary);
  color: var(--ld-white);
  margin-left: 5px;
  vertical-align: middle;
}
.comparison-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comparison-point {
  font-size: 12px;
  color: var(--ld-gray-700);
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}
.comparison-point::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--ld-gray-400);
}
.comparison-point.pro::before  { content: '✓'; color: #22c55e; font-size: 10px; left: 2px; }
.comparison-point.con::before  { content: '·'; color: var(--ld-gray-400); }

/* ── CHECKLIST card ──────────────────────────────────────────────────── */
.info-card-checklist {
  border-top: 3px solid #22c55e;
}
.checklist-items {
  padding: 4px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ld-gray-800);
  line-height: 1.4;
  animation: ld-card-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.checklist-item:nth-child(1) { animation-delay: 30ms; }
.checklist-item:nth-child(2) { animation-delay: 80ms; }
.checklist-item:nth-child(3) { animation-delay: 130ms; }
.checklist-item:nth-child(4) { animation-delay: 180ms; }
.checklist-item:nth-child(5) { animation-delay: 230ms; }
.checklist-item:nth-child(6) { animation-delay: 280ms; }
.checklist-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}
.checklist-icon.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.checklist-text-wrap { flex: 1; }
.checklist-text { font-weight: 500; }
.checklist-note {
  font-size: 11px;
  color: var(--ld-gray-500);
  margin-top: 1px;
}

/* ── STAT-ROW card ───────────────────────────────────────────────────── */
.info-card-stats {
  border-top: 3px solid var(--ld-primary);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1px;
  background: var(--ld-gray-150);
  padding-top: 1px;
}
.stat-cell {
  background: var(--ld-white);
  padding: 12px 10px;
  text-align: center;
}
.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ld-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--ld-primary);
  margin-left: 1px;
}
.stat-label {
  font-size: 10px;
  color: var(--ld-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
  font-weight: 600;
}

/* ── TIMELINE card ───────────────────────────────────────────────────── */
.timeline-card {
  border-top: 3px solid var(--ld-primary);
}
.timeline-header {
  padding: 11px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ld-primary);
}
.timeline-steps {
  padding: 4px 14px 14px;
  position: relative;
}
.timeline-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0 10px;
  position: relative;
  animation: ld-card-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.timeline-step:nth-child(1) { animation-delay: 0ms; }
.timeline-step:nth-child(2) { animation-delay: 70ms; }
.timeline-step:nth-child(3) { animation-delay: 140ms; }
.timeline-step:nth-child(4) { animation-delay: 210ms; }
.timeline-step:nth-child(5) { animation-delay: 280ms; }
.timeline-step:nth-child(6) { animation-delay: 350ms; }

/* Colonna sinistra: numero + linea verticale */
.timeline-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ld-primary-soft);
  border: 2px solid var(--ld-primary-tint);
  color: var(--ld-primary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-step.active .timeline-step-num {
  background: var(--ld-primary);
  border-color: var(--ld-primary);
  color: var(--ld-white);
}
.timeline-step-line {
  width: 2px;
  flex: 1;
  background: var(--ld-gray-200);
  min-height: 12px;
  margin: 2px 0;
}
.timeline-step:last-child .timeline-step-line {
  display: none;
}

/* Colonna destra: testo */
.timeline-step-body {
  padding-bottom: 12px;
  padding-top: 3px;
}
.timeline-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ld-gray-900);
  line-height: 1.3;
}
.timeline-step.active .timeline-step-title {
  color: var(--ld-primary);
}
.timeline-step-duration {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ld-gray-500);
  background: var(--ld-gray-100);
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 2px;
}
.timeline-step-desc {
  font-size: 12px;
  color: var(--ld-gray-600);
  margin-top: 4px;
  line-height: 1.45;
}
.timeline-total {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 10px;
  font-size: 12px;
  color: var(--ld-gray-600);
  border-top: 1px solid var(--ld-gray-150);
  margin-top: 2px;
}
.timeline-total strong {
  color: var(--ld-gray-900);
  font-weight: 700;
}

/* Animazione entrata comune */
@keyframes ld-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Placeholder card durante streaming ──────────────────────────────── */
.card-loading-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--ld-gray-100);
  border-radius: 8px;
  margin: 6px 0;
  border: 1px solid var(--ld-gray-200);
}
.card-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ld-gray-400);
  animation: card-dot-pulse 1.2s ease-in-out infinite;
}
.card-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.card-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes card-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1);   }
}

/* ================================================================
   WOW MESSAGE — SVG percorso Livedata
================================================================ */
.wow-message .message-content {
  /* Mantiene il padding della bubble — non azzerare */
  padding: 12px 14px;
}
.wow-intro {
  font-size: 13px;
  color: var(--ld-text-secondary, #666);
  margin: 0 0 12px;
  line-height: 1.6;
}
.wow-outro {
  font-size: 13px;
  color: var(--ld-text-secondary, #666);
  margin: 12px 0 2px;
  line-height: 1.6;
}
/* Contenitore SVG con pulsante espandi */
.wow-svg-container {
  position: relative;
}
.wow-svg-wrap {
  width: 100%;
  max-width: 520px;
  overflow: visible;
  display: block;
}
.wow-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
/* Pulsante espandi SVG */
.wow-expand-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  background: #fff;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;            /* sempre visibile — mobile-first */
  transition: opacity .2s ease, background .15s ease;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.wow-expand-btn:hover { background: #f0f0f0; color: #000; }



@media (min-width: 641px) {
  /* Desktop: visibile solo all'hover del contenitore */
  .wow-expand-btn { opacity: 0; }
  .wow-svg-container:hover .wow-expand-btn { opacity: 1; }
}
@media (max-width: 480px) {
  .wow-svg-wrap { max-width: 100%; }
}

/* ================================================================
   LD-OVERLAY — fullscreen per SVG wow e futuri contenuti
================================================================ */
#ld-svg-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ld-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  opacity: 0;
  transition: opacity .22s ease;
}
.ld-overlay-open .ld-overlay-backdrop  { opacity: 1; }
.ld-overlay-closing .ld-overlay-backdrop { opacity: 0; }
.ld-overlay-box {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  width: min(92vw, 900px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  transform: scale(.94) translateY(10px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  overflow: hidden;
}
.ld-overlay-open .ld-overlay-box    { transform: scale(1) translateY(0); opacity: 1; }
.ld-overlay-closing .ld-overlay-box { transform: scale(.94) translateY(10px); opacity: 0; }
.ld-overlay-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: none; border-radius: 8px;
  background: rgba(0,0,0,.06); color: #444;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background .15s;
}
.ld-overlay-close:hover { background: rgba(0,0,0,.12); }
.ld-overlay-scroll {
  flex: 1; overflow: auto; padding: 24px;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.ld-overlay-svg {
  display: flex; align-items: center; justify-content: center; min-height: 200px;
}
.ld-overlay-svg svg { width: 100%; max-width: 100%; height: auto; }
.ld-overlay-hint {
  text-align: center; font-size: 11px; color: #999;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(0,0,0,.06); margin: 0;
}
@media (min-width: 641px) { .ld-overlay-hint { display: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   CHAT DARK MODE — si attiva quando il body ha data-theme="dark"
═══════════════════════════════════════════════════════════════════════════ */
body[data-theme="dark"] #chat-assistant {
  --ld-bg-page:        #0d1117;
  --ld-bg-panel:       #161b22;
  --ld-bg-chat:        #0d1117;
  --ld-bg-user-bubble: #0078d4;
  --ld-bg-assistant:   #161b22;
  --ld-text-primary:   #e6edf3;
  --ld-text-secondary: #8b949e;
  --ld-text-muted:     #6e7681;
  --ld-text-on-primary:#ffffff;
  --ld-border:         #30363d;
  --ld-border-strong:  #484f58;
  --ld-gray-100:       #21262d;
  --ld-gray-50:        #161b22;
  --ld-gray-200:       #30363d;
  --ld-gray-300:       #484f58;
  --ld-gray-400:       #6e7681;
  --ld-gray-500:       #8b949e;
  --ld-gray-600:       #8b949e;
  --ld-gray-700:       #c9d1d9;
  --ld-gray-900:       #f0f6fc;
  --ld-primary-soft:   rgba(0,120,212,0.15);
  --ld-primary-tint:   rgba(0,120,212,0.25);
  --ld-shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
  --ld-shadow-2: 0 2px 4px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.5);
  --ld-shadow-3: 0 4px 8px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.6), 0 24px 48px rgba(0,0,0,0.5);
}
body[data-theme="dark"] #chat-toggle {
  box-shadow: 0 3px 10px rgba(0,120,212,0.4), 0 1px 3px rgba(0,120,212,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
}
body[data-theme="dark"] .chat-box::before { opacity: 0.06; }
body[data-theme="dark"] .message-content code { background: #21262d; color: #e6edf3; }
body[data-theme="dark"] .message-content pre { background: #0d1117; border: 1px solid #30363d; }
body[data-theme="dark"] .service-card-body { background: #0d1117; }
body[data-theme="dark"] .faq-buttons button { background: #161b22; border-color: #30363d; color: #c9d1d9; }
body[data-theme="dark"] .faq-buttons button:hover { background: rgba(0,120,212,0.15); }
body[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
body[data-theme="dark"] .modal-content { background: #161b22; border: 1px solid #30363d; }
body[data-theme="dark"] .modal-body p { color: #c9d1d9; }
body[data-theme="dark"] .ld-overlay-backdrop { background: rgba(0,0,0,0.8); }
body[data-theme="dark"] .ld-overlay-box { background: #161b22; border: 1px solid #30363d; }