/* =============================================================
   chatbot.css — Asistente IA de Roser Cleaning
   Usa los mismos tokens de color y tipografía de styles.css
   ============================================================= */

.rcs-chat {
  --edge: clamp(1rem, 3vw, 1.8rem);
  --wa: 58px;              /* alto del botón de WhatsApp que hay debajo */
  --gap: 14px;
  font-family: var(--sans, "Inter", system-ui, sans-serif);
}

/* ---------- Botón burbuja ---------- */
.rcs-launcher {
  position: fixed;
  right: var(--edge);
  bottom: calc(var(--edge) + var(--wa) + var(--gap));
  z-index: 91;
  width: 58px; height: 58px;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent, #12a3a0), var(--accent-deep, #0c7d7b));
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(18, 163, 160, 0.42);
  transition: transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1)), box-shadow .4s ease;
}
.rcs-launcher:hover { transform: scale(1.08) translateY(-2px); }
.rcs-launcher:focus-visible { outline: 3px solid var(--accent-deep, #0c7d7b); outline-offset: 3px; }
.rcs-launcher svg { width: 28px; height: 28px; transition: opacity .25s ease, transform .25s ease; }
.rcs-launcher .rcs-ico-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
.rcs-chat.is-open .rcs-launcher .rcs-ico-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.rcs-chat.is-open .rcs-launcher .rcs-ico-close { opacity: 1; transform: none; }

/* Puntito de aviso */
.rcs-dot {
  position: absolute; top: 2px; right: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold, #cfae74); border: 2px solid #fff;
  transition: opacity .3s ease, transform .3s ease;
}
.rcs-chat.is-open .rcs-dot, .rcs-chat.is-seen .rcs-dot { opacity: 0; transform: scale(.4); }

/* ---------- Panel ---------- */
.rcs-panel {
  position: fixed;
  right: var(--edge);
  bottom: calc(var(--edge) + var(--wa) + var(--gap) + 58px + 12px);
  z-index: 92;
  width: min(388px, calc(100vw - 2 * var(--edge)));
  height: min(560px, calc(100vh - var(--edge) * 2 - 150px));
  display: flex; flex-direction: column;
  background: var(--paper, #fff);
  border: 1px solid var(--glass-brd, rgba(255,255,255,.75));
  border-radius: var(--radius, 22px);
  box-shadow: var(--sh-lg, 0 30px 70px rgba(18,51,49,.16));
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .32s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              transform .32s var(--ease-out, cubic-bezier(.16,1,.3,1)),
              visibility .32s;
}
.rcs-chat.is-open .rcs-panel { opacity: 1; visibility: visible; transform: none; }

/* ---------- Cabecera ---------- */
.rcs-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, var(--accent, #12a3a0), var(--accent-deep, #0c7d7b));
  color: #fff; flex: none;
}
.rcs-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: grid; place-items: center;
}
.rcs-avatar svg { width: 21px; height: 21px; }
.rcs-head-txt { min-width: 0; flex: 1; }
.rcs-head-txt strong {
  display: block; font-family: var(--display, "Manrope", sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcs-status { display: flex; align-items: center; gap: .35rem; font-size: .74rem; opacity: .9; }
.rcs-status i {
  width: 7px; height: 7px; border-radius: 50%; background: #7df5c4;
  box-shadow: 0 0 0 0 rgba(125,245,196,.7); animation: rcsPulse 2.2s infinite;
}
@keyframes rcsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(125,245,196,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(125,245,196,0); }
  100% { box-shadow: 0 0 0 0 rgba(125,245,196,0); }
}
.rcs-close {
  border: 0; background: rgba(255,255,255,.16); color: #fff;
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; transition: background .25s ease;
}
.rcs-close:hover { background: rgba(255,255,255,.3); }
.rcs-close svg { width: 15px; height: 15px; }

/* ---------- Mensajes ---------- */
.rcs-body {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--bg, #eef4f4);
  overscroll-behavior: contain;
}
.rcs-body::-webkit-scrollbar { width: 7px; }
.rcs-body::-webkit-scrollbar-thumb { background: rgba(18,51,49,.18); border-radius: 99px; }

.rcs-msg {
  max-width: 84%; padding: .62rem .85rem;
  font-size: .89rem; line-height: 1.5;
  border-radius: 16px; white-space: pre-wrap; word-wrap: break-word;
  animation: rcsIn .34s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
@keyframes rcsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rcs-msg.bot {
  align-self: flex-start; background: var(--paper, #fff);
  color: var(--ink, #123331); border: 1px solid var(--line-2, rgba(18,51,49,.07));
  border-bottom-left-radius: 5px; box-shadow: var(--sh-sm, 0 2px 10px rgba(18,51,49,.06));
}
.rcs-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent, #12a3a0), var(--accent-deep, #0c7d7b));
  color: #fff; border-bottom-right-radius: 5px;
}
.rcs-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rcs-msg.bot a { color: var(--accent-deep, #0c7d7b); font-weight: 600; }

/* Escribiendo… */
.rcs-typing { display: flex; gap: 4px; align-items: center; padding: .8rem .9rem; }
.rcs-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute, #607a77); animation: rcsBlink 1.3s infinite;
}
.rcs-typing span:nth-child(2) { animation-delay: .18s; }
.rcs-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes rcsBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Sugerencias ---------- */
.rcs-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .2rem; background: var(--bg, #eef4f4); }
.rcs-chips:empty { display: none; }
.rcs-chip {
  border: 1px solid var(--accent, #12a3a0); background: transparent;
  color: var(--accent-deep, #0c7d7b);
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: .4rem .7rem; border-radius: 99px; cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.rcs-chip:hover { background: var(--accent, #12a3a0); color: #fff; transform: translateY(-1px); }

/* ---------- Entrada ---------- */
.rcs-foot {
  flex: none; padding: .7rem .8rem .5rem;
  background: var(--paper, #fff); border-top: 1px solid var(--line-2, rgba(18,51,49,.07));
}
.rcs-form { display: flex; gap: .5rem; align-items: flex-end; }
.rcs-input {
  flex: 1; resize: none; border: 1px solid var(--line, rgba(18,51,49,.12));
  border-radius: 14px; padding: .6rem .75rem;
  font: inherit; font-size: .88rem; line-height: 1.4; color: var(--ink, #123331);
  background: var(--bg-2, #e3edec);
  max-height: 96px; min-height: 40px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rcs-input:focus {
  outline: 0; border-color: var(--accent, #12a3a0);
  box-shadow: 0 0 0 3px rgba(18,163,160,.16);
}
.rcs-send {
  flex: none; width: 40px; height: 40px; border: 0; cursor: pointer;
  border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--accent, #12a3a0), var(--accent-deep, #0c7d7b));
  display: grid; place-items: center;
  transition: transform .25s ease, opacity .25s ease;
}
.rcs-send:hover:not(:disabled) { transform: translateY(-2px); }
.rcs-send:disabled { opacity: .4; cursor: not-allowed; }
.rcs-send svg { width: 18px; height: 18px; }
.rcs-note {
  margin: .45rem 0 0; text-align: center;
  font-size: .68rem; color: var(--ink-mute, #607a77);
}

/* ---------- Móvil ---------- */
@media (max-width: 560px) {
  .rcs-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%; height: 88dvh; max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    transform-origin: bottom center;
  }
  .rcs-msg { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .rcs-launcher, .rcs-panel, .rcs-msg { transition-duration: .01ms; animation: none; }
  .rcs-status i { animation: none; }
}