/* Orki · el asistente de LOBO antitermita (Plataforma por Orkia).
   La cara de Orki, el personaje de Orkia, siempre en el morado de Orkia (el resto
   del sistema usa el azul de LOBO). Vive abajo a la derecha,
   discreto: flota, parpadea y de vez en cuando saluda o mira alrededor. */

.orki { position: fixed; right: 22px; bottom: 22px; z-index: 270; font-family: var(--lbo-font); }

/* ── Burbuja con el personaje ─────────────────────── */
.orki-boton {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(111, 92, 246, .2);
  background: radial-gradient(circle at 50% 30%, #F1EEFE 0%, #DCD6FB 75%, #CBC2F8 100%);
  box-shadow: 0 14px 34px -14px rgba(67, 83, 255, .55), 0 2px 6px rgba(19, 26, 46, .08);
  cursor: pointer;
  padding: 0;
  display: grid; place-items: center;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
.orki-boton:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 38px -14px rgba(67, 83, 255, .65), 0 2px 6px rgba(19, 26, 46, .08); }
.orki-boton:focus-visible { outline: 3px solid rgba(111, 92, 246, .35); outline-offset: 3px; }
.orki-boton svg.orki-bot { width: 54px; height: 54px; overflow: visible; }
.orki.abierto .orki-boton { transform: scale(.92); }

/* Personaje: piezas animables */
.orki-bot .o-cuerpo { animation: orki-flotar 3.6s ease-in-out infinite; transform-origin: 32px 40px; }
.orki-bot .o-ojos { transform-origin: 32px 33px; animation: orki-parpadeo 5.2s infinite; }
.orki-bot .o-ojos-dir { transition: transform .35s ease; }
.orki-bot .o-luz { animation: orki-luz 2.8s ease-in-out infinite; }
.orki-bot .o-oreja-i { transform-origin: 9px 35px; }
.orki-bot .o-oreja-d { transform-origin: 55px 35px; }
.orki-bot .o-luz { transform-origin: 32px 7px; }
.orki-bot .o-boca rect { animation: orki-led 2.4s ease-in-out infinite; }
.orki-bot .o-boca rect:nth-child(2) { animation-delay: .15s; }
.orki-bot .o-boca rect:nth-child(3) { animation-delay: .3s; }
.orki-bot .o-boca rect:nth-child(4) { animation-delay: .45s; }
@keyframes orki-led { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.orki-bot .o-mano { transform-origin: 55px 52px; transform: rotate(40deg) scale(0); transition: transform .3s; }
.orki-bot .o-sombra { animation: orki-sombra 3.6s ease-in-out infinite; transform-origin: 32px 61px; }
.orki-bot .o-feliz { opacity: 0; }

@keyframes orki-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes orki-sombra { 0%, 100% { transform: scaleX(1); opacity: .22; } 50% { transform: scaleX(.86); opacity: .14; } }
@keyframes orki-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes orki-luz { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Saluda: aparece la manita y se mueve; las orejas se paran */
.orki[data-gesto="saluda"] .o-mano { animation: orki-saludo 1.6s ease-in-out; }
.orki[data-gesto="saluda"] .o-oreja-i { animation: orki-oreja-i .5s ease-in-out 2; }
.orki[data-gesto="saluda"] .o-oreja-d { animation: orki-oreja-d .5s ease-in-out 2; }
@keyframes orki-saludo {
  0% { transform: rotate(40deg) scale(0); }
  15% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-22deg) scale(1); }
  45% { transform: rotate(10deg) scale(1); }
  60% { transform: rotate(-22deg) scale(1); }
  75% { transform: rotate(6deg) scale(1); }
  100% { transform: rotate(40deg) scale(0); }
}
@keyframes orki-oreja-i { 50% { transform: scale(1.12); } }
@keyframes orki-oreja-d { 50% { transform: scale(1.12); } }

/* Mira a los lados */
.orki[data-gesto="mira"] .o-ojos-dir { animation: orki-mirar 2.2s ease-in-out; }
@keyframes orki-mirar { 0%, 100% { transform: translateX(0); } 25%, 40% { transform: translateX(-3px); } 60%, 80% { transform: translateX(3px); } }

/* Feliz (al tocarlo): ojos ^ ^ y un brinquito con giro de antena */
.orki[data-gesto="feliz"] .o-ojos { opacity: 0; animation: none; }
.orki[data-gesto="feliz"] .o-feliz { opacity: 1; }
.orki[data-gesto="feliz"] .orki-boton svg.orki-bot { animation: orki-brinco .6s cubic-bezier(.34, 1.56, .64, 1); }
.orki[data-gesto="feliz"] .o-antena { animation: orki-antena .6s ease-in-out; transform-origin: 32px 12px; }
@keyframes orki-brinco { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.06, .96); } 70% { transform: translateY(1px) scale(.98, 1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes orki-antena { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg); } 65% { transform: rotate(14deg); } }

/* Pensando: la antena cambia de color y los ojos van de un lado a otro */
.orki.pensando .o-luz { fill: #B49BFF; animation: orki-estrella 1.2s linear infinite; }
@keyframes orki-estrella { to { transform: rotate(360deg); } }
.orki.pensando .o-ojos-dir { animation: orki-mirar 1.4s ease-in-out infinite; }

/* Globo de saludo */
.orki-globo {
  position: absolute; right: 76px; bottom: 14px;
  width: max-content; max-width: 230px;
  padding: 10px 14px;
  background: var(--lbo-white);
  border: 1px solid var(--lbo-gray-200);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 14px 34px -14px rgba(19, 26, 46, .35);
  color: var(--lbo-gray-800);
  font-size: 14.5px; line-height: 1.4;
  cursor: pointer;
  opacity: 0; transform: translateX(8px) scale(.96); transform-origin: right bottom;
  pointer-events: none;
  transition: opacity .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.orki-globo b { color: #6F5CF6; }
.orki-globo.visible { opacity: 1; transform: none; pointer-events: auto; }
.orki.abierto .orki-globo { display: none; }

/* ── Panel de chat ─────────────────────────────────── */
.orki-panel {
  position: absolute; right: 0; bottom: 78px;
  width: 392px; height: min(620px, calc(100vh - 120px)); height: min(620px, calc(100dvh - 120px));
  display: flex; flex-direction: column;
  background: var(--lbo-white);
  border: 1px solid var(--lbo-gray-200);
  border-radius: 22px;
  box-shadow: 0 30px 70px -24px rgba(19, 26, 46, .45);
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.97); transform-origin: right bottom;
  pointer-events: none; visibility: hidden;
  transition: opacity .2s, transform .25s cubic-bezier(.34, 1.3, .64, 1), visibility 0s .25s;
}
.orki.abierto .orki-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }

.orki-cabeza {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid var(--lbo-gray-200);
  background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 100%);
}
.orki-cabeza .orki-avatar { width: 42px; height: 42px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #F1EEFE, #DCD6FB); border: 1px solid var(--lbo-gray-200); display: grid; place-items: center; flex-shrink: 0; }
.orki-cabeza .orki-avatar svg { width: 36px; height: 36px; overflow: visible; }
.orki-cabeza b { display: block; font-size: 16px; color: var(--lbo-gray-900); }
.orki-cabeza small { display: block; font-size: 12.5px; color: var(--lbo-gray-500); }
.orki-cabeza small::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; margin-right: 6px; vertical-align: 1px; }
.orki.pensando .orki-cabeza small::before { background: #F59E0B; }
.orki-cabeza .orki-acciones { margin-left: auto; display: flex; gap: 4px; }
.orki-icono {
  width: 38px; height: 38px; border-radius: 11px;
  border: none; background: none; cursor: pointer;
  color: var(--lbo-gray-500);
  display: grid; place-items: center;
}
.orki-icono:hover { background: var(--lbo-gray-100); color: var(--lbo-gray-800); }
.orki-icono svg { width: 19px; height: 19px; }

.orki-mensajes { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; background: var(--lbo-bg); scroll-behavior: smooth; }
.orki-mensajes > * { flex-shrink: 0; }
.orki-msg { max-width: 88%; font-size: 15px; line-height: 1.5; color: var(--lbo-gray-800); }
.orki-msg.bot { align-self: flex-start; }
.orki-msg.yo { align-self: flex-end; }
.orki-msg .orki-texto { padding: 10px 13px; border-radius: 16px; word-wrap: break-word; }
.orki-msg.bot .orki-texto { background: var(--lbo-white); border: 1px solid var(--lbo-gray-200); border-bottom-left-radius: 5px; }
.orki-msg.yo .orki-texto { background: var(--lbo-gradient); color: #fff; border-bottom-right-radius: 5px; }
.orki-texto p { margin: 0 0 6px; } .orki-texto p:last-child { margin-bottom: 0; }
.orki-texto ol, .orki-texto ul { margin: 4px 0 6px; padding-left: 20px; }
.orki-texto li { margin: 3px 0; }
.orki-texto strong { color: var(--lbo-gray-900); }
.orki-msg.yo .orki-texto strong { color: #fff; }
.orki-texto a { color: var(--lbo-blue-dark); font-weight: 600; }

.orki-sugerencias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.orki-sugerencia {
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(12, 132, 204, .3); background: var(--lbo-white);
  color: var(--lbo-blue-dark); font-size: 14px; font-weight: 600; cursor: pointer;
}
.orki-sugerencia:hover { background: var(--lbo-blue-light); }

.orki-ir {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 9px 14px; border-radius: 11px; border: none; cursor: pointer;
  background: var(--lbo-gradient); color: #fff; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(12, 132, 204, .7);
}

/* Tarjeta de confirmación (solicitud a Orkia) */
.orki-tarjeta { align-self: stretch; background: var(--lbo-white); border: 1px solid rgba(12, 132, 204, .35); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px -16px rgba(10, 95, 152, .6); }
.orki-tarjeta-tit { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--lbo-blue-light); font-weight: 700; font-size: 14.5px; color: var(--lbo-blue-dark); }
.orki-tarjeta dl { margin: 0; padding: 10px 14px 4px; display: grid; gap: 7px; }
.orki-tarjeta dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lbo-gray-400); }
.orki-tarjeta dd { margin: 0; font-size: 14.5px; color: var(--lbo-gray-800); }
.orki-tarjeta-aviso { padding: 4px 14px 10px; font-size: 13px; color: var(--lbo-gray-500); }
.orki-tarjeta-botones { display: flex; gap: 8px; padding: 0 14px 14px; }
.orki-tarjeta-botones .lbo-btn { flex: 1; justify-content: center; }
.orki-tarjeta.resuelta .orki-tarjeta-botones { display: none; }
.orki-tarjeta-estado { padding: 0 14px 12px; font-size: 13.5px; font-weight: 600; color: var(--lbo-gray-500); }

.orki-escribiendo { align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 12px 14px; background: var(--lbo-white); border: 1px solid var(--lbo-gray-200); border-radius: 16px; border-bottom-left-radius: 5px; }
.orki-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--lbo-blue); animation: orki-punto 1.2s infinite; }
.orki-escribiendo span:nth-child(2) { animation-delay: .15s; }
.orki-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes orki-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.orki-barra { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--lbo-gray-200); background: var(--lbo-white); }
.orki-barra textarea {
  flex: 1; resize: none; max-height: 120px; min-height: 44px;
  padding: 11px 13px; border-radius: 14px;
  border: 1.5px solid var(--lbo-gray-200); background: var(--lbo-gray-50);
  font: inherit; font-size: 15px; color: var(--lbo-gray-900); line-height: 1.4;
}
.orki-barra textarea:focus { outline: none; border-color: var(--lbo-blue); background: #fff; box-shadow: var(--lbo-ring); }
.orki-enviar { width: 44px; height: 44px; border-radius: 13px; border: none; cursor: pointer; background: var(--lbo-gradient); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.orki-enviar:disabled { opacity: .45; cursor: default; }
.orki-enviar svg, .orki-mic svg { width: 19px; height: 19px; }
.orki-mic { width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--lbo-gray-200); background: #fff; color: var(--lbo-gray-600); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.orki-mic.escuchando { color: #fff; background: #DC2626; border-color: #DC2626; animation: orki-luz 1s infinite; }
.orki-pie { padding: 0 12px 10px; font-size: 11.5px; color: var(--lbo-gray-400); text-align: center; background: #fff; }

/* No estorbar: sube cuando hay un formulario de pantalla completa con su barra abajo */
body:has(.lbo-modal-overlay.ux-pantalla) .orki:not(.abierto) { bottom: 96px; }
body:has(.lbo-modal-overlay.ux-pantalla) .orki:not(.abierto) .orki-boton { width: 52px; height: 52px; }
body:has(.lbo-modal-overlay.ux-pantalla) .orki:not(.abierto) .orki-boton svg.orki-bot { width: 44px; height: 44px; }
body.drawer-open .orki { display: none; }
@media print { .orki { display: none !important; } }

/* ── Celular ───────────────────────────────────────── */
@media (max-width: 767px) {
  .orki { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:has(.lbo-inicio-fab) .orki:not(.abierto) { bottom: calc(162px + env(safe-area-inset-bottom)); }
  body:has(.lbo-modal-overlay.ux-pantalla) .orki:not(.abierto) { bottom: 92px; }
  .orki-boton { width: 54px; height: 54px; }
  .orki-boton svg.orki-bot { width: 46px; height: 46px; }
  .orki-globo { right: 64px; bottom: 6px; max-width: 240px; font-size: 14px; }
  .orki.abierto { inset: 0; right: 0; bottom: 0; }
  .orki.abierto .orki-boton { display: none; }
  .orki-panel { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; border: none; bottom: 0; }
  .orki-msg { max-width: 92%; }
}

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

/* Celular: al bajar, Orki y el "+" de Inicio se apartan para no tapar lo que se lee (app.js). */
@media (max-width: 767px) {
  .orki:not(.abierto), .lbo-inicio-fab { transition: transform .25s ease, opacity .25s ease; }
  body.ux-bajando .orki:not(.abierto), body.ux-bajando .lbo-inicio-fab {
    transform: translateX(120px); opacity: 0; pointer-events: none;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .orki:not(.abierto), .lbo-inicio-fab { transition: opacity .2s; }
  body.ux-bajando .orki:not(.abierto), body.ux-bajando .lbo-inicio-fab { transform: none; }
}