/* ELETTRA — pannello. Usa i token ufficiali Spring Energy, nessun colore nuovo. */
.el-panel{
  position:fixed;right:18px;bottom:88px;z-index:130;
  width:min(380px,calc(100vw - 32px));max-height:min(600px,calc(100vh - 140px));
  display:none;flex-direction:column;
  background:var(--paper);color:var(--ink-2);
  border-radius:var(--radius-l);box-shadow:var(--shadow-lg);
  overflow:hidden;font-family:var(--ff-body,'Inter',system-ui,sans-serif);
}
.el-panel.el-open{display:flex}
.el-panel.el-drag{user-select:none}
.el-panel.el-ritratta{opacity:.28;pointer-events:none;transform:translateY(10px) scale(.98)}
.el-panel{transition:opacity .2s ease,transform .2s ease}

.el-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;
  background:var(--ink);color:#fff;flex:none}
.el-id{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.el-id strong{font-family:var(--ff-head,'Manrope',sans-serif);font-size:1.02rem;letter-spacing:-.01em}
.el-sub{font-size:.72rem;color:rgba(255,255,255,.66)}
.el-icon{width:32px;height:32px;flex:none;border:0;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.1);color:#fff;font-size:15px;line-height:1;
  display:grid;place-content:center}
.el-icon:hover{background:rgba(255,255,255,.2)}
.el-icon.el-on{background:var(--red);}
.el-move{cursor:grab}

.el-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;
  background:var(--sand)}
.el-msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:.94rem;line-height:1.5;
  white-space:pre-wrap;word-wrap:break-word}
.el-a{background:var(--paper);color:var(--ink-2);border-bottom-left-radius:5px;align-self:flex-start;
  box-shadow:var(--shadow-sm)}
.el-u{background:var(--ink);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.el-typing{display:flex;gap:5px;align-items:center;padding:14px}
.el-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);display:block;
  animation:el-dot 1.15s infinite}
.el-typing i:nth-child(2){animation-delay:.16s}
.el-typing i:nth-child(3){animation-delay:.32s}
@keyframes el-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.el-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px;background:var(--sand)}
.el-quick:empty{display:none}
.el-quick button{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:9px 15px;font:600 .86rem var(--ff-body,'Inter',sans-serif);cursor:pointer}
.el-quick button:hover{border-color:var(--ink);}

.el-form{display:flex;gap:8px;padding:12px 14px;background:var(--sand);flex:none}
.el-input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;
  padding:11px 16px;font:inherit;font-size:.92rem;background:var(--paper);color:var(--ink)}
.el-send{border:0;border-radius:999px;padding:11px 20px;cursor:pointer;
  background:var(--red-2);color:#fff;font:800 .8rem var(--ff-body,'Inter',sans-serif);
  letter-spacing:.05em;text-transform:uppercase}
.el-send:hover{background:#9d1512}
.el-foot{margin:0;padding:0 14px 13px;background:var(--sand);font-size:.74rem;
  color:var(--ink-soft);line-height:1.45;flex:none}

.el-focus{outline:3px solid var(--red-3)!important;outline-offset:2px}
.el-panel :focus-visible{outline:3px solid var(--red-3);outline-offset:2px}

@media (max-width:560px){
  .el-panel{right:12px;left:12px;width:auto;bottom:82px;max-height:calc(100vh - 120px)}
}
@media (prefers-reduced-motion:reduce){
  .el-panel,.el-avatar,.el-typing i{transition:none!important;animation:none!important}
}

/* ===== la scena di Elettra: struttura ripresa dal pannello di Luna, palette Spring ===== */
.el-stage{
  position:relative;height:210px;flex:none;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 46%, rgba(252,35,30,.26), transparent 44%),
    linear-gradient(115deg, #141d27 0%, #24303f 55%, #0d141c 100%);
}
.el-stage::after{
  content:'';position:absolute;inset:auto 0 0;height:38%;
  background:linear-gradient(transparent, rgba(8,12,18,.55));pointer-events:none;
}
.el-portrait{
  position:absolute;z-index:1;left:50%;bottom:-58px;width:212px;height:auto;
  transform:translateX(-50%);transform-origin:50% 65%;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.48));
  transition:filter .25s,transform .25s;
}
.el-stage.el-parla .el-portrait{
  filter:drop-shadow(0 0 22px rgba(252,35,30,.6));
  animation:el-respiro 1.8s ease-in-out infinite;
}
@keyframes el-respiro{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.022)}}
@media (prefers-reduced-motion:reduce){.el-portrait{animation:none!important;transition:none}}

/* ===== riduzione del pannello: ripreso da Luna ===== */
.el-panel.el-ridotta .el-stage,
.el-panel.el-ridotta .el-log,
.el-panel.el-ridotta .el-quick,
.el-panel.el-ridotta .el-form,
.el-panel.el-ridotta .el-foot{display:none}
.el-panel.el-ridotta{max-height:none;width:auto;min-width:250px}
.el-panel.el-ridotta .el-head{border-radius:var(--radius-l)}
.el-panel.el-ridotta .el-id::before{content:'Elettra';font-family:var(--ff-head,'Manrope',sans-serif);
  font-weight:800;font-size:1.02rem;color:#fff}
.el-id{display:flex;align-items:center;margin-right:auto}

/* ---------------------------------------------------------------------------
   10/09/2026 — WhatsApp dentro Elettra.
   Sul sito non c'è più nessun pulsante WhatsApp: è lei che smista verso una
   persona. Qui l'icona nella barra del pannello, e il pulsante che compare
   nella conversazione quando propone il passaggio.
   --------------------------------------------------------------------------- */
.el-icon.el-wa{
  padding:0;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;text-decoration:none;
}
.el-icon.el-wa img{
  width:22px;height:22px;display:block;border-radius:6px;
  transition:transform .18s ease;
}
.el-icon.el-wa:hover img{transform:scale(1.10)}

.el-wa-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:#25d366;color:#0b3d20;
  font:700 13px/1 Inter,system-ui,sans-serif;text-decoration:none;
  box-shadow:0 4px 12px rgba(37,211,102,.30);
  transition:transform .18s ease, box-shadow .18s ease;
}
.el-wa-cta::before{
  content:"";width:16px;height:16px;flex:none;
  background:url("../img/whatsapp-official-sticker.png") center/contain no-repeat;
}
.el-wa-cta:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(37,211,102,.38)}
@media (prefers-reduced-motion:reduce){
  .el-icon.el-wa img,.el-wa-cta{transition:none}
}

/* ===========================================================================
   10/09/2026 — TRE CORREZIONI CHIESTE DAL TITOLARE

   1. LA FINESTRA ERA SPROPORZIONATA. Il ritratto occupava 210 px fissi; con
      testa, barra, campo di scrittura e nota legale, alla conversazione ne
      restava un centinaio: due righe visibili e la barra di scorrimento.
      Ora la scena si adatta all'altezza della finestra, il testo cresce, e la
      conversazione ha uno spazio minimo che nessun altro elemento può mangiare.
   2. L'ICONA WHATSAPP non aveva la sagoma delle altre: era un quadrato verde
      dentro una barra di pastiglie scure. Ora è una pastiglia identica.
   3. MANCAVANO I SIMULATORI. Stanno in una barra fissa sotto il ritratto.
   =========================================================================== */

/* 1 — proporzioni */
.el-panel{
  width:min(420px,calc(100vw - 28px));
  max-height:min(700px,calc(100vh - 110px));
}
.el-stage{
  height:clamp(112px,20vh,190px);
}
.el-portrait{
  width:clamp(150px,52%,215px);
  bottom:-44px;
}
.el-log{
  min-height:200px;
  padding:16px 15px;
  gap:11px;
  scrollbar-width:thin;
}
.el-msg{
  max-width:88%;
  font-size:.97rem;
  line-height:1.55;
}
.el-input{font-size:.95rem;padding:12px 17px}
.el-foot{font-size:.76rem}

/* su schermi bassi la scena si ritira ancora, il testo resta intero */
@media (max-height:720px){
  .el-stage{height:clamp(92px,15vh,130px)}
  .el-portrait{width:clamp(130px,46%,175px);bottom:-34px}
  .el-log{min-height:170px}
}
@media (max-height:560px){
  .el-stage{display:none}          /* meglio senza ritratto che senza parole */
  .el-log{min-height:140px}
}

/* 2 — WhatsApp con la stessa sagoma delle altre icone */
.el-icon.el-wa{
  width:32px;height:32px;flex:none;border-radius:10px;
  background:rgba(255,255,255,.1);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:0;text-decoration:none;
}
.el-icon.el-wa:hover{background:rgba(255,255,255,.2)}
.el-icon.el-wa img{
  width:19px;height:19px;display:block;border-radius:4px;
  transition:transform .18s ease;
}
.el-icon.el-wa:hover img{transform:scale(1.08)}

/* 3 — la barra degli strumenti del sito */
.el-tools{
  display:flex;gap:8px;flex:none;
  padding:10px 14px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.el-tool{
  flex:1;min-width:0;
  border:1.5px solid var(--line);background:var(--sand);color:var(--ink);
  border-radius:12px;padding:9px 10px;cursor:pointer;
  font:700 .82rem var(--ff-body,'Inter',sans-serif);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .18s ease,background .18s ease;
}
.el-tool:hover{border-color:var(--red);background:var(--paper)}
.el-panel.el-ridotta .el-tools{display:none}
@media (prefers-reduced-motion:reduce){.el-tool,.el-icon.el-wa img{transition:none}}

/* Correzione della correzione: dimensionando il ritratto in larghezza, quando la
   scena si accorcia restava inquadrato il busto e la testa usciva fuori. Il
   ritratto ora è alto quanto la scena (più il taglio in basso): rimpicciolisce
   con lei e il volto resta sempre dentro. */
.el-portrait,
.el-panel .el-portrait{
  height:calc(100% + 46px)!important;
  width:auto!important;
  bottom:-46px!important;
  max-width:none;
}
@media (max-height:720px){
  .el-portrait,.el-panel .el-portrait{height:calc(100% + 34px)!important;bottom:-34px!important}
}

/* R20 input vocale */
.el-mic{width:44px;height:44px;flex:none;border:1.5px solid var(--line);border-radius:50%;background:var(--paper);cursor:pointer;font-size:17px;display:grid;place-items:center}.el-mic:hover{border-color:var(--red)}.el-mic.el-listening{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 0 6px rgba(252,35,30,.12)}

/* ===========================================================================
   R22 — ELETTRA SAFE DOCK
   Il pannello aperto non deve mai coprire il verificatore o il contenuto.
   Desktop/tablet orizzontale: Elettra occupa una colonna dedicata a destra e
   il sito si ridimensiona nello spazio rimanente. Mobile: Elettra diventa una
   vista dedicata quasi full-screen, evitando sovrapposizioni parziali.
   =========================================================================== */
@media (min-width:900px){
  body.el-assistant-open{
    --el-dock-width:min(420px,38vw);
    overflow-x:hidden;
  }
  body.el-assistant-open #site-header,
  body.el-assistant-open #main,
  body.el-assistant-open .site-footer-cta,
  body.el-assistant-open footer.r20-footer{
    width:calc(100% - var(--el-dock-width) - 22px);
    transition:width .24s ease;
  }
  body.el-assistant-open .el-panel{
    right:12px!important;
    left:auto!important;
    top:12px!important;
    bottom:12px!important;
    width:var(--el-dock-width)!important;
    max-height:none!important;
    height:calc(100vh - 24px)!important;
    border-radius:22px;
  }
  body.el-assistant-open .verify-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  body.el-assistant-open .bill-shell{
    width:100%;
    max-width:none;
  }
  body.el-assistant-open .float-stack{
    opacity:0!important;
    pointer-events:none!important;
  }
}

@media (max-width:899px){
  body.el-assistant-open{overflow:hidden;}
  body.el-assistant-open .el-panel{
    inset:8px!important;
    width:auto!important;
    height:calc(100vh - 16px)!important;
    max-height:none!important;
    border-radius:20px!important;
  }
  body.el-assistant-open .float-stack{
    opacity:0!important;
    pointer-events:none!important;
  }
}