/* ============================================================
   chatbot-shared.css — Asesor virtual (IA) de Santfrancisco Turismo
   Componente compartido entre bar-flotante.html, planchon.html y bote.html.
   Depende de las variables :root ya definidas en cada pagina
   (--brown-dark, --gold, --gold-light, --cream, --cream-soft, --text-dark).
   ============================================================ */

.chatbot-launcher{
  position:fixed;left:24px;bottom:24px;z-index:98;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 28px rgba(217,164,65,0.45);
  transition:transform .25s ease;border:none;
}
.chatbot-launcher:hover{transform:scale(1.06);}
.chatbot-launcher svg{width:26px;height:26px;stroke:var(--brown-dark);}
@media (max-width:720px){.chatbot-launcher{bottom:90px;left:16px;width:52px;height:52px;}}

.chatbot-window{
  position:fixed;left:24px;bottom:94px;z-index:99;
  width:340px;max-width:calc(100vw - 48px);height:460px;max-height:70vh;
  background:#fff;border-radius:18px;box-shadow:0 26px 60px rgba(43,29,18,0.32);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.97);pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.chatbot-window.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
@media (max-width:720px){.chatbot-window{left:16px;bottom:150px;}}

.chatbot-header{
  background:var(--brown-dark);color:var(--cream);padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.chatbot-header strong{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:1rem;display:block;}
.chatbot-header .chatbot-status{font-size:0.72rem;color:#c9baa4;}
.chatbot-close{background:none;border:none;color:var(--cream);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px;}

.chatbot-messages{
  flex-grow:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--cream);
}
.chatbot-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:0.86rem;line-height:1.5;}
.chatbot-msg.bot{background:#fff;color:var(--text-dark);align-self:flex-start;border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(43,29,18,0.08);}
.chatbot-msg.user{background:linear-gradient(135deg, var(--gold-light), var(--gold));color:var(--brown-dark);align-self:flex-end;border-bottom-right-radius:4px;font-weight:600;}
.chatbot-msg.typing{background:#fff;color:#8a795f;align-self:flex-start;font-style:italic;box-shadow:0 2px 8px rgba(43,29,18,0.08);}

.chatbot-input-row{display:flex;gap:8px;padding:12px 14px;border-top:1px solid #e4dac6;flex-shrink:0;}
.chatbot-input-row input{
  flex-grow:1;padding:10px 14px;border:1.5px solid #e4dac6;border-radius:20px;font-size:16px;
  font-family:inherit;background:#fdfbf7;
}
.chatbot-input-row input:focus{outline:none;border-color:var(--gold);}
.chatbot-send{
  width:38px;height:38px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));color:var(--brown-dark);
  font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
}