/* ================= CHAT WIDGET — Assistente AI ================= */
/* Usa le stesse variabili colore di style.css (:root). Caricare DOPO style.css. */

.chat-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:60px;height:60px;border:none;border-radius:50%;
  background:var(--grad);color:#04101a;cursor:pointer;box-shadow:0 10px 30px rgba(47,243,224,.35);
  display:flex;align-items:center;justify-content:center;transition:.3s}
.chat-fab svg{width:27px;height:27px}
.chat-fab:hover{transform:translateY(-3px) scale(1.05)}
.chat-fab.hidden{opacity:0;pointer-events:none;transform:scale(.6)}

.chat-panel{position:fixed;right:22px;bottom:22px;z-index:61;
  width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 90px));
  background:rgba(10,13,22,.97);backdrop-filter:blur(16px);border:1px solid var(--panel-brd);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(20px) scale(.98);pointer-events:none;transition:.3s;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}

.chat-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--panel-brd)}
.chat-id{display:flex;align-items:center;gap:12px}
/* avatar del bot con indicatore "online" */
.chat-avatar{position:relative;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(47,243,224,.35)}
.chat-avatar svg{width:23px;height:23px;color:#04101a}
.chat-avatar::after{content:'';position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:var(--cyan);border:2px solid rgba(10,13,22,.97);box-shadow:0 0 8px var(--cyan)}
.chat-id strong{font-family:'Space Grotesk';font-size:15px;display:block;line-height:1.2}
.chat-id small{color:var(--dim);font-size:12px;font-family:'JetBrains Mono'}
.chat-close{background:none;border:none;color:var(--muted);font-size:26px;cursor:pointer;line-height:1;padding:0 4px}
.chat-close:hover{color:var(--txt)}

.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.chat-msg{max-width:82%;padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.chat-msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--panel-brd);color:var(--txt);border-bottom-left-radius:4px}
.chat-msg.user{align-self:flex-end;background:var(--grad);color:#04101a;font-weight:500;border-bottom-right-radius:4px}
.chat-msg.typing{color:var(--dim);letter-spacing:3px}

.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--panel-brd)}
.chat-input input{flex:1;background:var(--panel);border:1px solid var(--panel-brd);border-radius:12px;padding:12px 14px;
  color:var(--txt);font-family:'Inter',sans-serif;font-size:14px;outline:none;transition:.2s}
.chat-input input:focus{border-color:var(--cyan)}
.chat-send{width:44px;flex-shrink:0;border:none;border-radius:12px;background:var(--grad);color:#04101a;
  font-size:18px;font-weight:700;cursor:pointer;transition:.25s}
.chat-send:hover{transform:translateY(-2px)}

@media(max-width:480px){
  .chat-panel{right:0;bottom:0;width:100vw;height:88vh;border-radius:20px 20px 0 0}
  .chat-fab{right:16px;bottom:16px}
}