/* =========================================
   Houzez LLM Chatbot — CLEAN CSS (sprite)
   ========================================= */

/* --- Chat overlay (backdrop) --- */
.houzez-llm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  z-index: 10000; /* above button */
}
.houzez-llm-modal[aria-hidden="false"] { display: block; }

/* --- Chat popup sheet --- */
.houzez-llm-sheet {
  position: absolute;
  right: 20px;
  left: auto;
  bottom: 100px;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 16px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  z-index: 10001; /* sheet ABOVE everything */
}

/* --- Header --- */
.houzez-llm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

/* --- Results area --- */
.houzez-llm-results {
  padding: 12px;
  max-height: 420px;
  overflow: auto;
}
.houzez-llm-chips { display:flex; flex-wrap:wrap; gap:6px; padding: 0 12px 8px 12px; }
.hz-chip { font-size:12px; padding:4px 8px; border:1px solid #ddd; border-radius:999px; background:#fafafa; white-space:nowrap; }

/* --- Form row --- */
#houzez-llm-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid #eee;
}
#houzez-llm-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
#houzez-llm-form button {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #111; color:#fff;
  border: 0; padding: 10px 14px; border-radius: 8px;
  cursor: pointer;
}

/* =========================================
   Character sprite button (replaces bubble)
   ========================================= */

/* 3‑frame idle cycle */
@keyframes hz-char-anim {
  0%   { background-position:   0% 0; }
  33%  { background-position:  50% 0; }
  66%  { background-position: 100% 0; }
  100% { background-position:   0% 0; }
}

.houzez-llm-button {
  position: fixed;
  bottom: 5px;
  right: 5px;
  /* size of ONE frame (tweak as you like) */
  width: 100px;
  height: 200px;

  background: transparent;
  border: none; border-radius: 0;
  background-image: var(--hz-sprite-url);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 0% 0%;

  animation: hz-char-anim 2.2s steps(1) infinite;
  transform-origin: 50% 100%;
  cursor: pointer;
  z-index: 9999; /* below overlay/sheet */
  transition: opacity .2s ease; /* for dimming */
}

/* Hide any old icon inside the button */
#houzez-llm-button svg,
#houzez-llm-button img { display: none !important; }

/* When chat opens, JS adds .pause-anim → dim & pause */
.houzez-llm-button.pause-anim {
  animation-play-state: paused;
  opacity: 0.5; /* 50% while open */
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .houzez-llm-button { animation: none !important; }
}