@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary:#7ab55c; /*bg-badge,bg-header*/
    --bg-bot-message:#f1f1f3; /*Bg messaggio bot*/
    --bg-user-message:#4285f4; /*Bg messaggio utente*/
    --bot-message:#444; /*Testo messaggio bot*/
    --user-message:#fff; /*Testo messaggio utente*/
    --scrollbar:#f0f0f0;
    --border:#f1f1f1;
    --white:#fff; /*title,newChat,colore svg*/
}

* {margin:0;padding:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;}
time {position:absolute;bottom:3px;right:13px;font-size:9px;color:var(--bot-message);}
#idThread{position:absolute;top:-22px;right:10px;font-size:14px;font-style:normal;font-weight:bold;}

/*Nuova chat e chiudi chat*/
.newChat {display:block;margin:4px 10px 0;font-size:14px;color:var(--white);text-decoration:underline;cursor:pointer;}
.closeChat {position:absolute;top:25px;right:20px;content:'';background:url('icon/cancel.svg') no-repeat center/30px;width:30px;height:30px;cursor:pointer;}

/* Badge */
.chat-badge {position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:var(--primary);border-radius:50%;cursor:pointer;box-shadow:0 4px 20px #c3c3c3;display:flex;align-items:center;justify-content:center;z-index:1000;transition:transform 0.3s ease, box-shadow 0.3s ease;}
.chat-badge:hover {transform:scale(1.1);}
.chat-badge svg {width:30px;height:30px;fill:var(--white);}

/* Container che contiene tutto*/
.chatbot-container {position:fixed;bottom:90px;right:20px;width:406px;max-width:calc(100vw - 40px);z-index:999;opacity:0;transform:translateY(20px) scale(0.95);pointer-events:none;transition:opacity 0.3s ease, transform 0.3s ease;box-shadow:0 4px 15px rgba(0, 0, 0, 0.08);border-radius:12px;font-family:'Inter','Roboto',sans-serif;}
.chatbot-container.active {opacity:1;transform:translateY(0) scale(1);pointer-events:all;}
@media (max-width:480px) {.chatbot-container {width:calc(100vw - 40px);right:20px;}}

.chat-header {background:linear-gradient(0deg, rgba(255, 255, 255, 0) 29.14%, rgba(255, 255, 255, 0.16) 100%), var(--primary);position:relative;border-radius:12px 12px 0 0;border-bottom:0;padding:15px 17px;}
.chat-header-title {color:var(--white);margin:0 10px;font-size:21px;}

.chat-container {border-top:0;border-radius:0 0 12px 12px;background-color:var(--white);display:flex;flex-direction:column;height:500px;overflow:hidden;}

/*AREA MESSAGGI*/
#chatMessages {flex-grow:1;overflow-y:auto;padding:30px 13px 9px;scrollbar-width:thin;scrollbar-color:#d1d1d1 var(--scrollbar);}
#chatMessages::-webkit-scrollbar {width:8px;}
#chatMessages::-webkit-scrollbar-track {background:var(--scrollbar);border-radius:10px;}
#chatMessages::-webkit-scrollbar-thumb {background-color:#d1d1d1;border-radius:10px;border:2px solid var(--scrollbar);}

/*MESSAGGI*/
.message {position:relative;margin-bottom:15px;padding:12px 16px 20px;border-radius:18px;line-height:1.4;word-wrap:break-word;width:max-content;max-width:80%;font-size:14px;}
.user-message {background-color:var(--bg-user-message);color:var(--user-message);margin-left:auto;padding-bottom:20px;border-bottom-right-radius:4px;text-align:right;}
.user-message time {left:9px;right:inherit;color:var(--user-message);}
.bot-message {background-color:var(--bg-bot-message);color:var(--bot-message);margin-right:auto;border-bottom-left-radius:4px;}
.bot-message.typing::after {content:'|';animation:blink-caret 0.75s step-end infinite;}
.message a {color:var(--bg-user-message);}
.message a:hover {color:#bd6b9a;}

/*PULSANTI DEI SUGGERIMENTI CREATI DAL CHATBOT*/
.suggestions-container {display:flex;flex-wrap:wrap;gap:8px;margin:15px auto 10px;}
.suggestion-button {background-color:#f2f8ef;border:0;border-radius:30px;padding:8px 12px;margin:0;width:max-content!important;cursor:pointer;font-size:14px;color:var(--primary);transition:background-color 0.3s;text-decoration:none;line-height:20px;text-wrap:wrap;text-align:center;font-weight:500;}
.suggestion-button a {color:var(--bg-user-message);text-decoration:none;}
.suggestion-button:hover {opacity:0.8;}

/*SEZIONE CON LA TEXTAREA PER L'INVIO DEL MESSAGGIO*/
.input-area {margin:0 16px 16px;}
.input-area textarea {position:relative;width:100%;height:52px;min-height:52px;max-height:200px;flex-grow:1;padding:14px;padding-right:55px;border:0.2px solid #ededed;border-radius:16px;font-size:16px;outline:none;transition:border-color 0.3s ease;resize:none;overflow:hidden;scrollbar-width:none;font-family:'Inter', 'Roboto', sans-serif;box-shadow:0 2px 6px rgba(0, 0, 0, 0.08);}
.input-area textarea::-webkit-scrollbar {display:none;}
.input-area textarea:focus {border-color:var(--primary);}
.input-area button {position:absolute;right:21px;bottom:21px;content:'';background:url('icon/send.svg') no-repeat 12px/22px;width:44px;height:44px;border:none;cursor:pointer;filter:grayscale(1) brightness(0);transition:background-color 0.3s ease, transform 0.1s ease;}
.input-area button:disabled {cursor:not-allowed;user-select:none;filter:grayscale(1) brightness(0.5);}

/* Indicatori "..." prima di ricevere risposta dal bot*/
.typing-indicator {display:flex;gap:5px;width:max-content;background-color:var(--bg-bot-message);padding:14px;margin-bottom:12px;border-radius:18px;}
.typing-indicator span {width:7px;height:7px;background-color:var(--bot-message);border-radius:50%;animation:blink 1.4s infinite both;}
.typing-indicator span:nth-child(2) {animation-delay:0.2s;}
.typing-indicator span:nth-child(3) {animation-delay:0.4s;}
@keyframes blink {
0% {opacity:0.2;transform:translateY(0);}
20% {opacity:1;transform:translateY(-4px);}
100% {opacity:0.2;transform:translateY(0);}
}