/* ============================================================
   Kuchu Puchu avatar overhaul — chat laptop scene (CSS micro-motion)
   + order celebration (js/celebration.js, v4 minimal — no robot).
   White + golden theme.
   ============================================================ */

/* ---------- Chat header DP — the owner's laptop picture ----------
   ONE picture inside the chat header: the robot at his laptop
   (assets/assistant/kuchu-laptop.png, owner-supplied, used as-is).
   At rest (idle / speaking) the DP stays ALIVE on a real-motion idle
   clip inside the same slot — kuchu-idle-coffee.webm or
   kuchu-idle-nocoffee.webm, one picked per chat session (eyes blink,
   face looks around; the mug has coffee in one variant, is empty in
   the other). While the bot composes a reply, the typing clip
   (assets/assistant/kuchu-typing.webm) takes over the slot; when the
   reply is sent the typing clip pauses and the idle clip returns.
   There is NO separate laptop scene anywhere below the header. */
.kp-dp {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 14px; overflow: hidden; border: 2px solid #fff;
  background: #fff; box-shadow: 0 2px 8px rgba(122, 92, 16, 0.25);
}
.kp-dp .kp-dp-img, .kp-dp .kp-dp-idle, .kp-dp .kp-dp-clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
.kp-dp .kp-dp-idle, .kp-dp .kp-dp-clip { opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
.kp-dp.kp-idle .kp-dp-idle { opacity: 1; }
.kp-dp.kp-typing .kp-dp-idle { opacity: 0; }
.kp-dp.kp-typing .kp-dp-clip { opacity: 1; }
/* Fallback if the typing clip is unavailable: a very subtle scale/ring
   pulse on the still picture while the bot is composing. */
.kp-dp.kp-typing.kp-noclip { animation: kp-dp-pulse 0.9s ease-in-out infinite; }
@keyframes kp-dp-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(122, 92, 16, 0.25), 0 0 0 0 rgba(201, 162, 39, 0.45); }
  50% { transform: scale(1.05); box-shadow: 0 2px 8px rgba(122, 92, 16, 0.25), 0 0 0 6px rgba(201, 162, 39, 0); }
}

/* ---------- Order celebration overlay (confirm page) — v4 MINIMAL ----------
   Owner's FINAL design (2026-10-23): NO robot at all at order
   confirmation — no circle, no video, no poster, no character media
   of any kind. The celebration is only the owner's short recorded
   "Thank you for your order!" voice, one soft petal burst, and this
   TEXT bubble. This CSS only frames the stage + the bubble. */
.lwc-overlay {
  position: fixed; inset: 0; z-index: 1200; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 0.3s ease;
}
.lwc-overlay.lwc-in { opacity: 1; }
.lwc-overlay.lwc-out { opacity: 0; }
.lwc-stage {
  position: absolute; right: 0; bottom: 0; width: min(620px, 100vw);
  height: 190px;
}
.lwc-bubble {
  position: absolute; z-index: 3;
  /* Bottom-right of the stage — text only, nothing beside it. */
  right: 20px;
  bottom: 26px;
  max-width: 240px; background: #fff; border: 2px solid var(--gold, var(--gold));
  border-radius: 16px; border-bottom-right-radius: 4px;
  padding: 10px 14px; box-shadow: 0 10px 26px rgba(166, 124, 26, 0.28);
  opacity: 0; transform: translateY(8px) scale(0.92);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: inherit;
}
.lwc-bubble.show { opacity: 1; transform: none; }
.lwc-bubble .lwc-b1 { font-weight: 800; color: var(--gold-darker); font-size: 1.02rem; line-height: 1.3; }
.lwc-bubble .lwc-b2 { color: #5c4a1e; font-size: 0.86rem; margin-top: 2px; }
@media (max-width: 700px) {
  .lwc-bubble { right: auto; left: 8px; }
}
@media (max-width: 480px) {
  .lwc-stage { height: 170px; }
  .lwc-bubble { bottom: 20px; max-width: 210px; }
}

/* ---------- Compact in-chat celebration ---------- */
.lwc-chat {
  position: relative; height: 112px; border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--gold, var(--gold));
  background: linear-gradient(180deg, #fffdf6, var(--gold-pale));
  align-self: stretch;
}
.lwc-chat .lwc-bubble {
  right: auto; left: 10px; bottom: auto; top: 14px; max-width: calc(100% - 20px);
  border-bottom-right-radius: 16px; border-bottom-left-radius: 4px;
}
.lwc-chat .lwc-bubble .lwc-b1 { font-size: 0.92rem; }
.lwc-chat .lwc-bubble .lwc-b2 { font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .kp-dp { animation: none !important; }
  .kp-dp .kp-dp-idle, .kp-dp .kp-dp-clip { display: none; }
  .lwc-overlay { transition: none; }
}