:root {
  --chatbot-bg: #000;
  --chatbot-text: #fff;
  --chatbot-title-color: #1DDDDD;
  --chatbot-subtitle-color: #ccc;
  --user-msg-bg: #B83DDA;
  --bot-msg-bg: #1DDDDD;
  --suggestion-bg: #333333;
  --suggestion-text: #FFFFFF;
  --icon-bg: #B83DDA;
}

/* Massima visibilità del widget */
#sinapsi-chatbox { position: fixed; background-color: var(--chatbot-bg); color: var(--chatbot-text);
  z-index: 99999; box-shadow: 0 4px 12px rgba(0,0,0,0.5); transition: all 0.3s ease; overflow: hidden;
  box-sizing: border-box; border-radius: 12px; width: min(92vw, 400px); min-width: 280px; right: 2rem; bottom: 6rem;
}
#sinapsi-chatbox .chatbot-content { display: flex; flex-direction: column; gap: 10px; min-height: 360px; max-height: min(70vh, 640px); padding: 16px; }

.chatbot-header { display: flex; justify-content: space-between; align-items: center; }
.chatbot-title { margin: 0; font-size: 1.2rem; color: var(--chatbot-title-color); }
.chatbot-toggle { background: transparent; border: none; color: var(--chatbot-title-color); font-size: 1.4rem; cursor: pointer; }

.chatbot-subtitle { margin: 0; font-size: .95rem; color: var(--chatbot-subtitle-color); }

#chatbot-messages { flex: 1 1 auto; overflow-y: auto; border-radius: 8px; padding: 8px; background: rgba(255,255,255,0.06); scroll-behavior: smooth; }

.chatbot-input-area { display: flex; align-items: center; gap: 8px; }
#chatbot-input { flex: 1; padding: 10px; border: 1px solid var(--user-msg-bg); border-radius: 6px; background: var(--chatbot-bg); color: var(--chatbot-text); font-size: 0.95rem; outline: none; }
#chatbot-send { padding: 10px 14px; border: none; border-radius: 6px; background-color: var(--user-msg-bg); color: var(--chatbot-text); font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: filter .2s; }
#chatbot-send:hover { filter: brightness(1.1); }
.attach-btn { border: 1px dashed rgba(255,255,255,.3); background: transparent; color: var(--chatbot-text); border-radius: 6px; padding: 8px; cursor: pointer; }

.upload-queue { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.upload-item { display:flex; align-items:center; gap:8px; font-size:.85rem; background: rgba(255,255,255,.06); padding:6px 8px; border-radius:6px; }
.upload-item img { width:28px; height:28px; border-radius:4px; object-fit:cover; }
.upload-status { opacity:.8; }

.user-message, .bot-message { display: inline-block; max-width: 86%; margin: 6px 0; padding: 8px 10px; border-radius: 10px; line-height: 1.4; }
.user-message { background-color: var(--user-msg-bg); color: var(--chatbot-text); margin-left: auto; }
.bot-message  { background-color: var(--bot-msg-bg); color: #000; margin-right: auto; }
.chat-label { font-weight: 700; margin-right: 6px; }

.loading-message { display: inline-flex; align-items: center; gap: 10px; background-color: var(--bot-msg-bg); color: #000; margin: 6px 0; padding: 8px 10px; border-radius: 8px; }
@keyframes spin { 0% {transform: rotate(0)} 100% {transform: rotate(360deg)} }
.spinner { width: 16px; height: 16px; border: 2px solid #fff; border-top: 2px solid var(--user-msg-bg); border-radius: 50%; animation: spin 1s linear infinite; }

.typing-dots::after { content: '…'; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } }

.chatbot-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.chatbot-suggestions .suggestion-btn { background-color: var(--suggestion-bg); color: var(--suggestion-text); border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: opacity .2s; }
.chatbot-suggestions .suggestion-btn:hover { opacity: .85; }

#sinapsi-chatbox.minimized .chatbot-content { display: none !important; }
#sinapsi-chatbox.minimized { width: 56px !important; min-width: 56px !important; height: 56px !important; padding: 0 !important; border-radius: 50% !important; background-color: var(--icon-bg) !important; right: 2rem; bottom: 6rem; cursor: pointer; box-shadow: none !important; display:flex; align-items:center; justify-content:center; }
#sinapsi-chatbox.expanded { box-shadow: 0 0 15px rgba(255,255,255,0.25); }

/* Icon wrapper sempre visibile in minimized, anche se l'immagine manca (mostriamo 💬) */
#sinapsi-chatbox .chat-icon-wrapper { display: none; }
#sinapsi-chatbox.minimized .chat-icon-wrapper { display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 56px; height: 56px; background-color: var(--icon-bg); }
#sinapsi-chatbox.minimized .chat-icon-wrapper img { width: 26px; height: 26px; }
#sinapsi-chatbox.minimized .chat-icon-fallback { font-size: 22px; line-height: 1; }

.bot-message .message-content, .user-message .message-content { line-height: 1.55; }
.bot-message .message-content h1, .bot-message .message-content h2, .bot-message .message-content h3 { margin: .2em 0 .4em; color: #000; }
.bot-message .message-content p { margin: .4em 0; }
.bot-message .message-content ul, .bot-message .message-content ol { margin: .4em 0 .4em 1.2em; }
.bot-message .message-content li { margin: .2em 0; }
.bot-message .message-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,.08); padding: .1em .3em; border-radius: 4px; }
.bot-message .message-content pre { background: rgba(0,0,0,.08); padding: 8px; border-radius: 6px; overflow: auto; position: relative; }
.bot-message .message-content pre code { background: transparent; padding: 0; display: block; white-space: pre; }
.codeblock { position: relative; }
.copy-btn { position: absolute; top: 6px; right: 6px; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; padding: 4px 8px; font-size: .75rem; font-weight: 700; cursor: pointer; background: #fff; color: #000; }
.copy-btn:hover { filter: brightness(.97); }
.bot-message .message-content blockquote { margin: .4em 0; padding: .4em .8em; border-left: 3px solid rgba(0,0,0,.3); background: rgba(255,255,255,.5); border-radius: 4px; }
.bot-message .message-content table { width: 100%; border-collapse: collapse; margin: .5em 0; }
.bot-message .message-content th, .bot-message .message-content td { border: 1px solid rgba(0,0,0,.15); padding: 6px 8px; text-align: left; }

/* Immagini */
.chat-img { margin: .4em 0; }
.chat-img img { max-width: 100%; height: auto; display: block; border-radius: 8px; cursor: zoom-in; }
.chat-img figcaption { font-size: .8rem; color: #111; opacity: .85; margin-top: 4px; }

.img-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
@media (min-width: 560px) { .img-grid { grid-template-columns: repeat(3, 1fr); } }

.img-lightbox { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); z-index: 100000; }
.img-lightbox.hidden { display: none; }
.img-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.img-lightbox-img { position: relative; max-width: 92vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.img-lightbox-close { position: absolute; top: 20px; right: 24px; background: #fff; color: #000; border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 20px; cursor: pointer; }

.reveal-step { opacity: 0; transform: translateY(4px); animation: reveal .25s ease forwards; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

.link-cards { display: grid; gap: 8px; margin-top: 8px; }
.link-card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; text-decoration: none; color: inherit; background: rgba(255,255,255,.75); border-radius: 8px; padding: 8px; border: 1px solid rgba(0,0,0,.12); }
.link-card:hover { filter: brightness(.97); }
.link-thumb { width: 64px; height: 64px; background-size: cover; background-position: center; border-radius: 6px; background-color: rgba(0,0,0,.1); }
.link-thumb.placeholder { background-image: none; }
.link-body { display: grid; gap: 4px; }
.link-title { font-weight: 700; font-size: .95rem; color: #000; }
.link-desc { font-size: .85rem; color: #111; opacity: .9; }
.link-url  { font-size: .75rem; color: #333; opacity: .8; word-break: break-all; }

@media (max-width: 480px) {
  #sinapsi-chatbox { right: 3vw; bottom: 5vh; width: 94vw; min-width: 0; }
  #sinapsi-chatbox .chatbot-content { max-height: 70vh; min-height: 50vh; }
}