/* ═══════════════════════════════════════════════════════════
   Koop Shared Widget Theme
   Original floating AI assistant widget aligned with the Nishanth Konsultancy dark UI.
   This is styling only; wire behavior through assets/koop/koop.js.
   ═══════════════════════════════════════════════════════════ */

:root {
  --koop-z: 9999;
  --koop-width: 360px;
  --koop-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.koop {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: var(--koop-z);
  font-family: inherit;
}

.koop__bubble {
  position: absolute;
  right: 4rem;
  bottom: 1.1rem;
  max-width: 240px;
  background: var(--nk-surface);
  color: var(--nk-muted);
  border: 1px solid var(--nk-border);
  border-radius: 14px 14px 4px 14px;
  padding: .65rem .8rem;
  font-size: .65rem;
  line-height: 1.5;
  box-shadow: var(--koop-shadow);
}

.koop__bubble strong { color: var(--nk-text); }

.koop__button {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid rgba(124, 92, 191, .45);
  background:
    radial-gradient(circle at 30% 20%, rgba(155, 125, 212, .45), transparent 42%),
    var(--nk-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 42px var(--pg);
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.koop__button:hover {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 18px 50px var(--pg);
}

.koop__icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.koop__panel {
  position: absolute;
  right: 0;
  bottom: 4.2rem;
  width: var(--koop-width);
  max-height: min(620px, calc(100vh - 6rem));
  display: none;
  grid-template-rows: auto 1fr auto;
  background: var(--nk-surface);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius-lg);
  box-shadow: var(--koop-shadow);
  overflow: hidden;
}

.koop.is-open .koop__panel { display: grid; }
.koop.is-open .koop__bubble { display: none; }

.koop__header {
  padding: .85rem 1rem;
  background: var(--nk-surface-2);
  border-bottom: 1px solid var(--nk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.koop__title {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.koop__title strong {
  color: #fff;
  font-size: .75rem;
}

.koop__title span {
  color: var(--nk-faint);
  font-size: .55rem;
}

.koop__close {
  background: transparent;
  border: 1px solid var(--nk-border);
  color: var(--nk-muted);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  cursor: pointer;
}

.koop__messages {
  padding: .85rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.koop__message {
  max-width: 86%;
  padding: .58rem .72rem;
  border-radius: 12px;
  font-size: .65rem;
  line-height: 1.55;
}

.koop__message--bot {
  align-self: flex-start;
  background: var(--nk-surface-2);
  color: var(--nk-muted);
  border: 1px solid var(--nk-border);
  border-bottom-left-radius: 4px;
}

.koop__message--user {
  align-self: flex-end;
  background: var(--nk-accent-panel);
  color: var(--nk-text);
  border: 1px solid rgba(124, 92, 191, .35);
  border-bottom-right-radius: 4px;
}

.koop__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .5rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: var(--nk-accent);
  color: #fff !important;
  font-size: .58rem;
  font-weight: 800;
  text-decoration: none;
}

.koop__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .45rem;
  padding: .75rem;
  border-top: 1px solid var(--nk-border);
  background: rgba(15, 17, 23, .45);
}

.koop__input {
  min-width: 0;
  background: var(--nk-surface-3);
  color: var(--nk-text);
  border: 1px solid var(--nk-border);
  border-radius: 999px;
  padding: .58rem .75rem;
  font-size: .65rem;
}

.koop__send {
  border: 0;
  border-radius: 999px;
  background: var(--nk-accent);
  color: #fff;
  padding: 0 .85rem;
  font-size: .62rem;
  font-weight: 800;
  cursor: pointer;
}

.koop__notice {
  color: var(--nk-faint);
  font-size: .5rem;
  line-height: 1.4;
  padding: 0 .85rem .7rem;
  background: rgba(15, 17, 23, .45);
}

@media (max-width: 520px) {
  .koop {
    right: .75rem;
    bottom: .75rem;
  }
  .koop__bubble { display: none; }
  .koop__panel {
    width: calc(100vw - 1.5rem);
    right: 0;
    bottom: 4rem;
    max-height: calc(100vh - 5rem);
  }
}


/* Animated robot assistant treatment */
.koop__button {
  animation: koop-float 3.2s ease-in-out infinite;
}

.koop__button::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(155,125,212,.22);
  animation: koop-ping 2.6s ease-out infinite;
  pointer-events: none;
}

.koop__button { position: relative; overflow: visible; }

.koop__button:hover .koop__icon,
.koop.is-open .koop__icon {
  animation: koop-bob .8s ease-in-out infinite alternate;
}

.koop__bubble {
  animation: koop-bubble 4s ease-in-out infinite;
}

@keyframes koop-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes koop-ping {
  0% { transform: scale(.94); opacity: .6; }
  70% { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

@keyframes koop-bob {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-2px) rotate(3deg); }
}

@keyframes koop-bubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .koop__button,
  .koop__button::after,
  .koop__icon,
  .koop__bubble {
    animation: none !important;
  }
}


/* Sprite-based Koop robot
   Pattern inspired by lightweight game UI animation:
   - a cropped sprite viewport
   - state classes for emotes
   - JS-spawned transient effects
*/
.koop__robot {
  width: 3.2rem;
  height: 3.2rem;
  position: relative;
  display: grid;
  place-items: center;
  image-rendering: auto;
}

.koop__sprite {
  width: 64px;
  height: 64px;
  transform: scale(.78);
  transform-origin: center;
  display: block;
  background-image: url("../koop/koop-sprite.svg");
  background-repeat: no-repeat;
  background-size: 384px 64px;
  background-position: 0 0;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
}

.koop__sprite[data-emote="idle"] { background-position: 0 0; }
.koop__sprite[data-emote="blink"] { background-position: -64px 0; }
.koop__sprite[data-emote="talk"] { background-position: -128px 0; }
.koop__sprite[data-emote="think"] { background-position: -192px 0; }
.koop__sprite[data-emote="happy"] { background-position: -256px 0; }
.koop__sprite[data-emote="alert"] { background-position: -320px 0; }

.koop__sprite.is-idle {
  animation: koop-sprite-idle 4.8s steps(1, end) infinite;
}

.koop__sprite.is-talking {
  animation: koop-sprite-talk .42s steps(1, end) infinite;
}

.koop__sprite.is-thinking {
  background-position: -192px 0;
  animation: koop-think-tilt 1.2s ease-in-out infinite;
}

.koop__sprite.is-happy {
  background-position: -256px 0;
  animation: koop-happy-hop .52s ease-out 1;
}

.koop__sprite.is-alert {
  background-position: -320px 0;
  animation: koop-alert-shake .34s ease-in-out 2;
}

@keyframes koop-sprite-idle {
  0%, 78%, 100% { background-position: 0 0; }
  82%, 86% { background-position: -64px 0; }
}

@keyframes koop-sprite-talk {
  0%, 100% { background-position: 0 0; }
  50% { background-position: -128px 0; }
}

@keyframes koop-think-tilt {
  0%, 100% { transform: scale(.78) rotate(-3deg); }
  50% { transform: scale(.78) rotate(3deg); }
}

@keyframes koop-happy-hop {
  0% { transform: scale(.78) translateY(0); }
  45% { transform: scale(.78) translateY(-6px); }
  100% { transform: scale(.78) translateY(0); }
}

@keyframes koop-alert-shake {
  0%, 100% { transform: scale(.78) translateX(0); }
  25% { transform: scale(.78) translateX(-2px); }
  75% { transform: scale(.78) translateX(2px); }
}

/* Battle-style transient effects */
.koop-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.koop-fx__spark {
  position: absolute;
  width: .38rem;
  height: .38rem;
  border-radius: 999px;
  background: #ffcfef;
  box-shadow: 0 0 14px rgba(255, 207, 239, .85);
  animation: koop-spark .72s ease-out forwards;
}

.koop-fx__spark:nth-child(1) { left: 76%; top: 12%; animation-delay: 0s; }
.koop-fx__spark:nth-child(2) { left: 18%; top: 18%; animation-delay: .06s; }
.koop-fx__spark:nth-child(3) { left: 70%; top: 72%; animation-delay: .1s; }

@keyframes koop-spark {
  0% { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate3d(0, -12px, 0) scale(1.6); opacity: 0; }
}

.koop-fx__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: #cdbdff;
  box-shadow: 0 0 18px rgba(205, 189, 255, .9);
  animation: koop-orb-pop .62s ease-out forwards;
}

@keyframes koop-orb-pop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  70% { transform: translate(-50%, -170%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -170%) scale(2.8); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .koop__sprite,
  .koop-fx__spark,
  .koop-fx__orb {
    animation: none !important;
  }
}