/* ---------------------------------------------------------------------------
   Asistente Virtual — Empresa de Aseo de Pereira S.A.S. E.S.P.
   Mipyme S.A.S. — 2026
   Para cambiar el color corporativo, edite --asi-verde mas abajo.
   --------------------------------------------------------------------------- */

#mipyme-asistente {
  --asi-verde:       #1F7A45;
  --asi-verde-osc:   #14562F;
  --asi-verde-claro: #E9F4ED;
  --asi-texto:       #1D2721;
  --asi-suave:       #5C6B62;
  --asi-borde:       #DCE5DF;
  --asi-fondo:       #F7FAF8;
  --asi-radio:       16px;
  --asi-sombra:      0 12px 40px rgba(15, 45, 28, .18), 0 2px 8px rgba(15, 45, 28, .08);

  position: fixed; inset: auto 0 0 auto; z-index: 99990;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--asi-texto);
}

#mipyme-asistente *, #mipyme-asistente *::before, #mipyme-asistente *::after { box-sizing: border-box; }

/* ---------- boton flotante ---------- */
.asi-lanzador {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--asi-verde), var(--asi-verde-osc));
  color: #fff; font: inherit; font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--asi-sombra);
  transition: transform .18s ease, box-shadow .18s ease;
}
.asi-lanzador:hover  { transform: translateY(-2px); }
.asi-lanzador:active { transform: translateY(0); }
.asi-lanzador:focus-visible { outline: 3px solid #FFCE3B; outline-offset: 3px; }
.asi-lanzador svg { width: 24px; height: 24px; flex: 0 0 auto; }
.asi-lanzador[hidden] { display: none; }
.asi-lanzador .asi-punto {
  position: absolute; top: 12px; right: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFCE3B; box-shadow: 0 0 0 3px rgba(255, 206, 59, .35);
  animation: asi-late 2.4s ease-in-out infinite;
}
@keyframes asi-late { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.35); opacity: .65 } }

/* ---------- panel ---------- */
.asi-panel {
  position: fixed; right: 20px; bottom: 20px;
  width: 392px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--asi-radio); box-shadow: var(--asi-sombra);
  transform-origin: bottom right;
  animation: asi-abrir .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes asi-abrir { from { opacity: 0; transform: translateY(14px) scale(.97) } to { opacity: 1; transform: none } }
.asi-panel[hidden] { display: none; }

/* ---------- cabecera ---------- */
.asi-cab {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px;
  background: linear-gradient(135deg, var(--asi-verde), var(--asi-verde-osc)); color: #fff;
}
.asi-cab-ico {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .18);
}
.asi-cab-ico svg { width: 21px; height: 21px; }
.asi-cab-txt { min-width: 0; flex: 1; }
.asi-cab-txt strong { display: block; font-size: 15px; font-weight: 650; }
.asi-cab-txt span { display: block; font-size: 12.5px; opacity: .85; }
.asi-cerrar {
  width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center;
  transition: background .15s ease;
}
.asi-cerrar:hover { background: rgba(255, 255, 255, .28); }
.asi-cerrar:focus-visible { outline: 2px solid #FFCE3B; outline-offset: 2px; }
.asi-cerrar svg { width: 17px; height: 17px; }

/* ---------- conversacion ---------- */
.asi-hilo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 8px; background: var(--asi-fondo);
  scrollbar-width: thin; scrollbar-color: #C6D4CB transparent;
}
.asi-hilo::-webkit-scrollbar { width: 8px }
.asi-hilo::-webkit-scrollbar-thumb { background: #C6D4CB; border-radius: 8px }

.asi-msg { display: flex; margin-bottom: 12px; }
.asi-msg.yo { justify-content: flex-end; }
.asi-burbuja {
  max-width: 86%; padding: 11px 14px; border-radius: 15px;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.asi-msg.bot .asi-burbuja {
  background: #fff; border: 1px solid var(--asi-borde); border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(20, 60, 38, .05);
}
.asi-msg.yo .asi-burbuja {
  background: var(--asi-verde); color: #fff; border-bottom-right-radius: 5px;
}
.asi-burbuja p       { margin: 0 0 .6em }
.asi-burbuja p:last-child { margin-bottom: 0 }
.asi-burbuja strong  { font-weight: 650 }
.asi-burbuja ul      { margin: .3em 0 .5em; padding-left: 1.15em }
.asi-burbuja li      { margin-bottom: .28em }
.asi-burbuja a       { color: var(--asi-verde); text-decoration: underline; text-underline-offset: 2px; word-break: break-all }
.asi-msg.yo .asi-burbuja a { color: #fff }

/* ---------- escribiendo ---------- */
.asi-puntos { display: inline-flex; gap: 5px; padding: 4px 2px }
.asi-puntos i {
  width: 7px; height: 7px; border-radius: 50%; background: #9BAFA2;
  animation: asi-rebote 1.3s ease-in-out infinite;
}
.asi-puntos i:nth-child(2) { animation-delay: .18s }
.asi-puntos i:nth-child(3) { animation-delay: .36s }
@keyframes asi-rebote { 0%,60%,100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-5px); opacity: 1 } }

/* ---------- sugerencias ---------- */
.asi-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 2px 12px }
.asi-chip {
  border: 1px solid var(--asi-verde); background: var(--asi-verde-claro); color: var(--asi-verde-osc);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background .15s ease;
}
.asi-chip:hover { background: #D7EADE }
.asi-chip:focus-visible { outline: 2px solid var(--asi-verde); outline-offset: 2px }

/* ---------- redaccion ---------- */
.asi-pie { border-top: 1px solid var(--asi-borde); background: #fff; padding: 10px 12px 8px }
.asi-fila { display: flex; align-items: flex-end; gap: 8px }
.asi-campo {
  flex: 1; resize: none; max-height: 116px; min-height: 42px;
  padding: 11px 13px; border: 1px solid var(--asi-borde); border-radius: 12px;
  font: inherit; font-size: 15px; line-height: 1.4; color: var(--asi-texto); background: var(--asi-fondo);
}
.asi-campo:focus { outline: none; border-color: var(--asi-verde); background: #fff; box-shadow: 0 0 0 3px rgba(31, 122, 69, .12) }
.asi-campo::placeholder { color: #8A9A90 }
.asi-enviar {
  width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--asi-verde); color: #fff; display: grid; place-items: center;
  transition: background .15s ease, opacity .15s ease;
}
.asi-enviar:hover:not(:disabled) { background: var(--asi-verde-osc) }
.asi-enviar:disabled { opacity: .4; cursor: not-allowed }
.asi-enviar:focus-visible { outline: 2px solid var(--asi-verde-osc); outline-offset: 2px }
.asi-enviar svg { width: 19px; height: 19px }
.asi-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }

.asi-aviso { margin: 7px 2px 0; font-size: 11.5px; line-height: 1.35; color: var(--asi-suave); text-align: center }
.asi-aviso a { color: var(--asi-suave) }

/* ---------- celular ---------- */
@media (max-width: 520px) {
  .asi-panel {
    right: 0; bottom: 0; width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .asi-lanzador { right: 14px; bottom: 14px; height: 54px; padding: 0 18px 0 15px }
  .asi-lanzador span { display: none }
  .asi-lanzador { padding: 0; width: 54px; justify-content: center }
}

@media (prefers-reduced-motion: reduce) {
  #mipyme-asistente *, #mipyme-asistente *::before { animation: none !important; transition: none !important }
}