/* Playit — the IDE chat "build-buddy" styling. STRICT RULE: everything visual about the buddy lives
   here (and its behaviour in ide_buddy.js) — one file to change the buddy. Loaded by html/ide/index.html.

   The buddy is a small pixel bot overlaid on the BOTTOM of the chat's scroll: messages scroll behind it
   and fade into it, so there's no hard box edge. It shows the file being touched (a marquee) + a
   sweeping "working" bar to the right of its head, and NO status word (the animation is the tell). */

/* the stage: an overlay pinned to the bottom of the scroll area (.ide-chat-scroll, see ide_chat.css).
   pointer-events:none so the scroll works THROUGH it; only the canvas re-enables clicks. */
.ide-buddy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 12px 0 4px;
  pointer-events: none;
  /* the fade: messages dissolve into the buddy's zone instead of hitting a hard edge */
  background: linear-gradient(
    to top,
    var(--color-ink) 0%,
    var(--color-ink) 44%,
    rgba(11, 10, 36, 0.72) 68%,
    transparent 100%
  );
}

/* the pixel canvas — nearest-neighbour scaling (crisp), and the one clickable part of the stage */
.ide-buddy-canvas {
  flex: none;
  width: 92px;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  pointer-events: auto;
  cursor: pointer;
}

/* the readout next to the head — the file + timer + sweeping bar. Hidden unless a file is being touched. */
.ide-buddy-status {
  flex: 1;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ide-buddy:not(.is-working) .ide-buddy-status { visibility: hidden; }

.ide-buddy-fileline { display: flex; align-items: center; gap: 7px; }
.ide-buddy-dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--ide-buddy-tone, var(--color-cyan));
}
.ide-buddy-fname { flex: 1; min-width: 0; overflow: hidden; }
.ide-buddy-fname-inner {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.05;
  color: var(--ide-soft);
}
/* only scroll when the name would be clipped (JS adds .is-scroll + sets the two custom props) */
.ide-buddy-fname.is-scroll .ide-buddy-fname-inner {
  animation: ide-buddy-marquee var(--ide-buddy-dur, 6s) ease-in-out infinite alternate;
}
.ide-buddy-timer {
  flex: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted-2);
  font-variant-numeric: tabular-nums;
}
.ide-buddy-track {
  height: 5px;
  position: relative;
  overflow: hidden;
  background: var(--ide-main-bg);
  border: 2px solid #24243f;
}
/* a short glowing-free dash sweeping across — "working", not "this much done" */
.ide-buddy-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  background: var(--ide-buddy-tone, var(--color-cyan));
  animation: ide-buddy-sweep 1.1s linear infinite;
}

@keyframes ide-buddy-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}
@keyframes ide-buddy-marquee {
  0%, 14% { transform: translateX(0); }
  86%, 100% { transform: translateX(var(--ide-buddy-shift, 0)); }
}

/* The "into the game" dissolve. When a write finishes (the create/edit flash), ide_buddy.js clones the
   filename readout's letters onto this fixed, click-through layer — each clone sits exactly over its
   original letter, lights up in the activity tone, then flies off into the GAME box, shrinking and
   fading out on the way. The layer sits over both panels (60) but under menus, tips, and modals (70+).
   Each letter's own path arrives as --fx/--fy (set by JS); the stagger is its animation-delay. */
.ide-buddy-fly {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}
/* a row of clones, pinned (by JS) to where the readout's text sits — same font, so the letters line up */
.ide-buddy-fly-row {
  position: absolute;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.05;
  color: var(--ide-buddy-tone, var(--color-cyan));
}
.ide-buddy-fly-char {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
  animation: ide-buddy-fly-char 0.95s cubic-bezier(0.45, 0, 0.85, 0.45) both;
}
/* a small lift first (the letter "comes loose"), then a dive into the box that fades to nothing */
@keyframes ide-buddy-fly-char {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  18% { transform: translate(calc(var(--fx) * 0.1), calc(var(--fy) * 0.1 - 16px)) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--fx), var(--fy)) scale(0.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ide-buddy-fill { animation: none; }
  .ide-buddy-fname.is-scroll .ide-buddy-fname-inner { animation: none; }
}

/* the tip thank-you's dancing buddy (celebrate(), play/partial/tip_thanks.html): the pixel canvas alone,
   centred above the title — no marquee, no fade strip */
.ide-buddy-party {
  display: block;
  width: 120px;
  height: 96px;
  margin: -6px auto 10px;
  image-rendering: pixelated;
}