/* Widget del asistente de ayuda (assistant/_widget). Se carga en el panel y
   en el landing, que tienen hojas y variables distintas: por eso define sus
   propias variables (--as-*), con los mismos valores del panel. */
.tt-assistant {
  --as-font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --as-font-heading: "Plus Jakarta Sans", -apple-system, sans-serif;
  --as-gradient: linear-gradient(120deg, #7F77DD 15%, #5B8DEF 85%);
  --as-surface: #FFFFFF;
  --as-surface-2: #F2F5F7;
  --as-bg: #F8FAFB;
  --as-border: #E2E8F0;
  --as-border-light: #EEF2F7;
  --as-text: #1A2332;
  --as-text-muted: #6B7A8D;
  --as-text-light: #A0AEBF;
  --as-radius: 18px;
  --as-shadow: 0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);
  --as-bottom-offset: 0px;
}
.tt-assistant *, .tt-assistant *::before, .tt-assistant *::after { box-sizing: border-box; }
.tt-assistant-svg { display: block; flex-shrink: 0; }
.tt-assistant-link .tt-assistant-svg, .tt-assistant-whatsapp .tt-assistant-svg { display: inline-block; }

.tt-assistant { position: fixed; right: 20px; bottom: 20px; z-index: 1030; font-family: var(--as-font); }
.tt-assistant-launcher {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 18px 12px 14px;
  background: var(--as-gradient); color: #fff;
  font-family: var(--as-font-heading); font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 20px rgba(91, 84, 196, .32);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tt-assistant-launcher i { font-size: 18px; }
.tt-assistant-launcher:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91, 84, 196, .38); }
.tt-assistant-launcher:focus-visible { outline: 3px solid rgba(127, 119, 221, .45); outline-offset: 3px; }
.tt-assistant.is-open .tt-assistant-launcher-label { display: none; }
.tt-assistant.is-open .tt-assistant-launcher { padding: 12px; }

.tt-assistant-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: 380px; height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--as-surface); border: 1px solid var(--as-border);
  border-radius: var(--as-radius); box-shadow: var(--as-shadow); overflow: hidden;
}
.tt-assistant-panel[hidden] { display: none; }
.tt-assistant-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  border-bottom: 1px solid var(--as-border-light);
}
.tt-assistant-header > div { flex: 1; min-width: 0; }
.tt-assistant-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--as-gradient); display: inline-flex; align-items: center; justify-content: center;
}
.tt-assistant-avatar img { width: 20px; height: 20px; }
.tt-assistant-title { font-family: var(--as-font-heading); font-size: 15px; font-weight: 700; margin: 0; color: var(--as-text); }
.tt-assistant-subtitle { font-size: 12.5px; color: var(--as-text-muted); margin: 0; }
.tt-assistant-icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 0; flex-shrink: 0;
  background: transparent; color: var(--as-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.tt-assistant-icon-btn:hover { background: var(--as-surface-2); color: var(--as-text); }

.tt-assistant-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--as-bg); overscroll-behavior: contain; }
.tt-assistant-msg { display: flex; flex-direction: column; gap: 8px; max-width: 88%; }
.tt-assistant-msg.is-user { align-self: flex-end; align-items: flex-end; }
.tt-assistant-bubble {
  padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--as-text);
  background: var(--as-surface); border: 1px solid var(--as-border-light); border-top-left-radius: 4px;
  overflow-wrap: anywhere;
}
.tt-assistant-msg.is-user .tt-assistant-bubble {
  background: var(--as-gradient); color: #fff; border: 0;
  border-top-left-radius: 14px; border-top-right-radius: 4px; white-space: pre-wrap;
}
.tt-assistant-bubble p { margin: 0 0 8px; }
.tt-assistant-bubble p:last-child, .tt-assistant-bubble ul:last-child { margin-bottom: 0; }
.tt-assistant-bubble ul { margin: 0 0 8px; padding-left: 18px; }
.tt-assistant-bubble li + li { margin-top: 3px; }
.tt-assistant-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-family: var(--as-font-heading); font-weight: 700; font-size: 13px; color: #5B54C4; text-decoration: none;
}
.tt-assistant-link:hover { text-decoration: underline; }

.tt-assistant-chips, .tt-assistant-feedback { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tt-assistant-feedback > span { font-size: 12.5px; color: var(--as-text-muted); margin-right: 2px; }
.tt-assistant-chip {
  border: 1px solid #D9D6F5; background: var(--as-surface); color: #4B45B0;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; line-height: 1.3; text-align: left;
}
.tt-assistant-chip:hover { background: #F1F0FC; border-color: #B9B4EE; }
.tt-assistant-chip.is-ghost { color: var(--as-text-muted); border-color: var(--as-border); }

.tt-assistant-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.tt-assistant-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--as-text-light); animation: tt-assistant-dot 1s infinite ease-in-out; }
.tt-assistant-typing span:nth-child(2) { animation-delay: .15s; }
.tt-assistant-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tt-assistant-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tt-assistant-typing span { animation: none; } .tt-assistant-launcher { transition: none; } }

.tt-assistant-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--as-border-light); }
.tt-assistant-input {
  flex: 1; resize: none; max-height: 120px; border: 1px solid var(--as-border); border-radius: 12px;
  padding: 9px 12px; font-size: 14px; font-family: var(--as-font); color: var(--as-text);
}
.tt-assistant-input:focus { outline: none; border-color: #B9B4EE; box-shadow: 0 0 0 3px rgba(127, 119, 221, .15); }
.tt-assistant-send {
  width: 40px; height: 40px; border-radius: 12px; border: 0; flex-shrink: 0;
  background: var(--as-gradient); color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.tt-assistant-send:disabled { opacity: .5; }

.tt-assistant-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px 12px; font-size: 11.5px; color: var(--as-text-muted);
}
.tt-assistant-whatsapp {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 10px; border-radius: 999px; background: #E9F8EF; color: #12733F;
  font-family: var(--as-font-heading); font-weight: 700; font-size: 12.5px; text-decoration: none;
}
.tt-assistant-whatsapp:hover { background: #D5F2E0; }

/* Celular: sobre la barra inferior, y el panel a pantalla casi completa
   (la barra inferior aparece desde 768 px, ver .tt-bottom-nav). */
@media (max-width: 768px) {
  .tt-assistant { right: 12px; bottom: calc(var(--as-bottom-offset) + 12px); }
  .tt-assistant-launcher-label { display: none; }
  .tt-assistant-launcher { padding: 13px; }
  .tt-assistant-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(var(--as-bottom-offset) + 76px); height: min(560px, calc(100dvh - var(--as-bottom-offset) - 100px));
  }
}

/* Panel: en celular, sobre la barra inferior (64 px). Landing: sobre la
   barra fija de "Probar gratis" (ver .ms-sticky-cta). */
@media (max-width: 768px) {
  .tt-assistant--panel { --as-bottom-offset: 64px; }
  .tt-assistant--landing { --as-bottom-offset: 72px; }
}
.tt-assistant-privacy { color: inherit; text-decoration: underline; text-underline-offset: 2px; }