/* =========================================================
   VITAL BOT — chatbot personalizado
   ========================================================= */
.vtbot-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 300; width: 60px; height: 60px; border-radius: 50%;
  background: var(--forest, #0b2a24); border: 1.5px solid var(--brand); box-shadow: 0 12px 40px -8px rgba(224,191,90,.45);
  display: grid; place-items: center; transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.vtbot-launcher:hover { transform: scale(1.07); }
.vtbot-launcher img { width: 44px; height: 44px; object-fit: contain; }
/* Indicadores naturales: en línea, escribiendo y no leído */
.vtbot-online { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; border-radius: 50%; background: #4ade80; border: 2.5px solid #0b2a24; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.vtbot-launcher__badge {
  position: absolute; right: calc(100% + 12px); top: 50%; display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px;
  border-radius: 18px 18px 4px 18px; background: rgba(15,42,34,.96); border: 1px solid rgba(224,191,90,.28);
  box-shadow: 0 10px 30px -10px #000; transform: translateY(-50%) translateX(8px) scale(.85); transform-origin: right center; opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.4,.4,1); pointer-events: none;
}
.vtbot-launcher__badge.is-on { opacity: 1; transform: translateY(-50%); }
.vtbot-launcher__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted, #9fb3aa); animation: vtTyping 1.3s ease-in-out infinite; }
.vtbot-launcher__badge i:nth-child(2) { animation-delay: .18s; } .vtbot-launcher__badge i:nth-child(3) { animation-delay: .36s; }
@keyframes vtTyping { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.vtbot-teaser {
  position: fixed; right: 86px; bottom: 26px; z-index: 300; max-width: 260px; padding: 12px 15px; border-radius: 18px 18px 4px 18px; line-height: 1.45;
  background: rgba(15,42,34,.97); border: 1px solid rgba(224,191,90,.28); font-size: .88rem; box-shadow: 0 18px 40px -16px #000;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .5s, transform .5s;
}
.vtbot-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }

.vtbot {
  position: fixed; right: 16px; bottom: 88px; z-index: 301; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100svh - 120px));
  display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--bg-2); border: 1px solid rgba(224,191,90,.28); box-shadow: 0 40px 100px -30px #000;
  transform-origin: bottom right; transform: scale(.85) translateY(20px); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s, visibility .45s;
}
.vtbot.is-open { transform: none; opacity: 1; visibility: visible; }
.vtbot__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--forest, #0b2a24), var(--surface)); border-bottom: 1px solid var(--line); }
.vtbot__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg); border: 1px solid var(--brand); display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; }
.vtbot__avatar img { width: 34px; height: 34px; object-fit: contain; }
.vtbot__title { flex: 1; line-height: 1.25; }
.vtbot__title strong { display: block; font-family: var(--font-display); }
.vtbot__title small { color: var(--brand); font-size: .75rem; display: inline-flex; align-items: center; gap: 6px; }
.vtbot__title small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.vtbot__close { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.vtbot__close:hover { background: var(--surface-2); color: var(--text); }
.vtbot__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scrollbar-width: thin; }
.vtbot__msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; animation: vtIn .35s cubic-bezier(.22,1,.36,1); white-space: pre-line; }
.vtbot__msg a { color: var(--brand); text-decoration: underline; }
.vtbot__msg--bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.vtbot__msg--user { align-self: flex-end; background: var(--brand); color: #1a1405; border-bottom-right-radius: 4px; }
.vtbot__typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.vtbot__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: vtDot 1.2s infinite; }
.vtbot__typing i:nth-child(2) { animation-delay: .15s; } .vtbot__typing i:nth-child(3) { animation-delay: .3s; }
.vtbot__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.vtbot__quick button { padding: 8px 12px; border-radius: 999px; font-size: .8rem; border: 1px solid rgba(224,191,90,.35); color: var(--brand); background: rgba(224,191,90,.06); transition: background .3s; }
.vtbot__quick button:hover { background: rgba(224,191,90,.16); }
.vtbot__cta { display: inline-flex; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: var(--brand); color: #1a1405 !important; text-decoration: none !important; font-weight: 600; font-size: .84rem; }
.vtbot__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.vtbot__form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; }
.vtbot__form input:focus { outline: none; border-color: var(--brand); }
.vtbot__form button { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #1a1405; display: grid; place-items: center; flex: 0 0 auto; }
.vtbot__form svg { width: 18px; height: 18px; }
.vtbot__foot { text-align: center; font-size: .68rem; color: var(--muted); padding: 0 12px 10px; background: var(--surface); }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vtDot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 520px) {
  .vtbot { right: 0; bottom: 0; width: 100vw; height: 100svh; border-radius: 0; }
  .vtbot-teaser { right: 16px !important; bottom: 152px !important; max-width: min(300px, calc(100vw - 32px)); font-size: .86rem; padding: 12px 14px; border-radius: 18px 18px 4px 18px; }
}