/* =========================================================
   FILE: /ai/widget/chatbot.css
   Scopo: Stile widget "*Sicurmed Assistente*"
   NOTE: Qui puoi cambiare colori, font, dimensioni, ecc.
   ========================================================= */

/* ====== Variabili base (MODIFICABILI) ====== */
:root{
  --med-blue-dark: #14264e;   /* blu scuro */
  --med-blue:      #1d538d;   /* blu chiaro */
  --med-bg:        #f4f6f9;   /* sfondo chat */
  --med-card:      #ffffff;   /* bolle e card */
  --med-text:      #0f172a;   /* testo principale */
  --med-muted:     #64748b;   /* testo secondario */
  --med-border:    rgba(15, 23, 42, .10);
  --med-shadow:    0 20px 50px rgba(0,0,0,.25);
  --med-radius:    18px;

  /* Font (MODIFICABILE) */
  --med-font: 'Segoe UI', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --med-font-size: 15px; /* base */
}

/* ====== RESET SOLO PER IL WIDGET (selettori larghi) ======
   Qui forziamo il font ovunque nel widget, anche se il sito ha
   regole aggressive o WebSiteX5 inietta CSS “strani”.
*/
#med-chatbot,
#med-chatbot * ,
.med-chatbot,
.med-chatbot * ,
#med-chatbot-container,
#med-chatbot-container * ,
.med-chatbot-container,
.med-chatbot-container * ,
.med-bot-message,
.med-bot-message * ,
.med-user-message,
.med-user-message * ,
.med-quick-buttons,
.med-quick-buttons * {
  font-family: var(--med-font) !important;
  font-size: var(--med-font-size) !important;
  font-weight: 400 !important;
  letter-spacing: .2px !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ====== DEBUG (ATTIVA SOLO PER TEST) ======
   Se vuoi verificare che il CSS venga letto, togli i commenti.
*/
/*
#med-chatbot, .med-chatbot, #med-chatbot-container, .med-chatbot-container {
  outline: 4px solid red !important;
}
*/

/* ====== Pulsante flottante (chat bubble) ======
   Se l’ID non coincide, non importa: sotto ho anche selettori
   “di sicurezza” per button flottanti.
*/
#med-chatbot-toggle{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--med-blue-dark), var(--med-blue));
  color: #fff;
  border: none;
  font-size: 26px;
  cursor: pointer;
  box-shadow: var(--med-shadow);
  z-index: 999999;
}

/* Se il JS usa un altro id/classe per il bottone: fallback */
button[id*="chatbot"][id*="toggle"],
button[class*="chatbot"][class*="toggle"],
button[id*="chat"][id*="toggle"]{
  font-family: var(--med-font) !important;
}

/* ====== Finestra Chat (container) ====== */
#med-chatbot,
.med-chatbot,
#med-chatbot-container,
.med-chatbot-container{
  position: fixed;
  right: 22px;
  bottom: 92px;
  width: 360px;
  max-width: calc(100vw - 28px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--med-bg);
  border-radius: var(--med-radius);
  box-shadow: var(--med-shadow);
  overflow: hidden;
  z-index: 999999;
}

/* ====== Header ====== */
.med-chatbot-header,
#med-chatbot-header{
  background: linear-gradient(135deg, var(--med-blue-dark), var(--med-blue));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.med-chatbot-title{
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

.med-chatbot-close,
#med-chatbot-close{
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: .9;
}
.med-chatbot-close:hover{ opacity: 1; }

/* ====== Area messaggi ====== */
.med-chatbot-body,
#med-chatbot-body{
  padding: 14px;
  height: calc(100% - 120px);
  overflow-y: auto;
}

/* ====== Bolle messaggi ====== */
.med-bot-message,
.med-user-message{
  background: var(--med-card);
  border: 1px solid var(--med-border);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
  color: var(--med-text);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Bot */
.med-bot-message{
  border-top-left-radius: 6px;
}

/* User */
.med-user-message{
  margin-left: auto;
  width: fit-content;
  max-width: 90%;
  background: #eaf2ff;
  border-color: rgba(29, 83, 141, .22);
  border-top-right-radius: 6px;
}

/* Testo dentro le bolle (qui forziamo ancora) */
.med-bot-message,
.med-user-message{
  line-height: 1.35 !important;
}
.med-bot-message p,
.med-user-message p,
.med-bot-message div,
.med-user-message div,
.med-bot-message span,
.med-user-message span{
  font-family: var(--med-font) !important;
  font-size: 1rem !important;       /* TEST: usa rem */
  font-weight: 400 !important;
}

/* ====== Pulsanti “quick” ======
   TEST: se vuoi togliere i pulsanti per capire se influenzano il font,
   togli i commenti a display:none.
*/
.med-quick-buttons{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

/*
.med-quick-buttons{
  display:none !important;
}
*/

.med-quick-buttons button{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
}
.med-quick-buttons button:hover{
  border-color: rgba(29,83,141,.35);
  transform: translateY(-1px);
}

/* ====== Footer (input + invia) ====== */
.med-chatbot-footer,
#med-chatbot-footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid rgba(15,23,42,.10);
  display: flex;
  gap: 10px;
  align-items: center;
}

.med-chatbot-input,
#med-chatbot-input{
  flex: 1;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 0 12px;
  outline: none;
  background: #fff;
  color: var(--med-text);
  font-family: var(--med-font) !important;
  font-size: 14px !important;
}

.med-chatbot-send,
#med-chatbot-send{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--med-blue-dark), var(--med-blue));
  font-family: var(--med-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 22px rgba(20,38,78,.25);
}
.med-chatbot-send:hover{
  filter: brightness(1.05);
}