/* =============================================================
   IMPULSA DIGITAL — chat-widget.css
   Chat de soporte con IA (Gemini). Usa las variables de styles.css.
   ============================================================= */
.ai-chat-bubble {
  position: fixed; right: 1.1rem; bottom: 5.3rem; z-index: 950;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-content: center;
  color: #12100a;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  box-shadow: 0 12px 34px -10px rgba(217,176,98,.6);
  border: none; cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-bounce);
}
.ai-chat-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ai-chat-bubble:hover { transform: translateY(-3px) scale(1.04); }
.ai-chat-bubble svg { width: 24px; height: 24px; }

@media (min-width: 1280px) {
  .ai-chat-bubble { right: 1.7rem; bottom: 6.1rem; }
}

.ai-chat-window {
  position: fixed; right: 1.1rem; bottom: 5.3rem; z-index: 960;
  width: 350px; max-width: calc(100vw - 2.2rem);
  height: min(70vh, 480px);
  background: var(--bg-2);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.6);
  display: none; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  font-family: var(--sans);
}
.ai-chat-window.open { display: flex; }
.ai-chat-window.is-in { opacity: 1; transform: none; }

.ai-chat-head {
  padding: .95rem 1rem; display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-3); border-bottom: 1px solid var(--line);
}
.ai-chat-head strong { font-family: var(--display); color: var(--ink); font-size: .95rem; display: block; }
.ai-chat-head span { color: var(--mute); font-size: .75rem; }
.ai-chat-close {
  background: none; border: none; color: var(--gold); font-size: 1.15rem;
  cursor: pointer; line-height: 1; padding: .2rem .3rem;
}

.ai-chat-body {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.ai-msg {
  max-width: 86%; padding: .55rem .75rem; border-radius: 12px;
  font-size: .84rem; line-height: 1.45; white-space: pre-wrap;
}
.ai-msg.bot { align-self: flex-start; background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line); }
.ai-msg.user { align-self: flex-end; background: var(--gold-soft); color: var(--ink); border: 1px solid var(--gold-line); }
.ai-msg.typing { color: var(--mute); font-style: italic; }

.ai-chat-input-bar {
  display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); background: var(--bg-3);
}
.ai-chat-input-bar input {
  flex: 1; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--ink); padding: .55rem .7rem; font: inherit; font-size: .84rem; outline: none;
}
.ai-chat-input-bar input:focus { border-color: var(--gold-line); }
.ai-chat-input-bar button {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  color: #12100a; border: none; border-radius: 10px; padding: 0 .95rem;
  font-weight: 700; font-size: .82rem; cursor: pointer;
}
.ai-chat-input-bar button:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .ai-chat-bubble, .ai-chat-window { transition: none; }
}