/* ════════════════════════════════════════════════════════════
   Sim mode: actors over the building layer, their speech bubbles, the
   clock/events bar, and the three event looks (confetti, shake, dark).
   Actors are positioned like .visitor: --x/--y in cell units against
   --cell, so zoom and fit cost nothing. --step is the walk transition.
   ════════════════════════════════════════════════════════════ */

/* while the sim runs the desk keeps its name and share, the head is the actor */
body.simulating .seat[data-person] > .px-avatar, body.simulating .seat[data-person] > .face-disc { visibility: hidden; }

.actor {
  --step: 250ms;
  position: absolute; z-index: 35;
  left: calc((var(--x) - .5) * var(--cell)); top: calc((var(--y) - .5) * var(--cell));
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  cursor: pointer; user-select: none;
  transition: left var(--step) linear, top var(--step) linear, opacity .3s;
}
.actor img { image-rendering: pixelated; width: 32px; height: 32px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)); pointer-events: none; }
.actor.face-left img { transform: scaleX(-1); }
.actor:hover { z-index: 37; }
.actor.is-selected { z-index: 38; }
.actor.is-selected::before {
  content: ''; position: absolute; inset: 2px; border: 2px dashed #fff; border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.5); animation: actor-ring 1s steps(2) infinite;
}
@keyframes actor-ring { 50% { border-color: var(--accent-bright, #0284c7); } }
.actor-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: 'Silkscreen', 'Press Start 2P', ui-monospace, Menlo, monospace; font-size: 9px; line-height: 1; color: #fff;
  background: var(--ink, #0b1020); padding: 2px 4px; border: 1px solid rgba(255,255,255,.4); pointer-events: none; display: none;
}
.actor:hover .actor-tag, .actor.is-selected .actor-tag, .actor.is-away .actor-tag { display: block; }
.actor:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.actor.is-out { opacity: .35; filter: grayscale(.8); cursor: default; }
.actor.is-working img { animation: actor-type 1.2s steps(2) infinite; }
@keyframes actor-type { 50% { transform: translateY(1px); } }
.actor.is-working.face-left img { animation: actor-type-left 1.2s steps(2) infinite; }
@keyframes actor-type-left { 50% { transform: scaleX(-1) translateY(1px); } }
.actor.is-dancing img { animation: actor-dance .5s steps(2) infinite; }
@keyframes actor-dance { 50% { transform: translateY(-4px); } }
.actor.is-dancing.face-left img { animation: actor-dance-left .5s steps(2) infinite; }
@keyframes actor-dance-left { 50% { transform: scaleX(-1) translateY(-4px); } }
.actor.is-panic { animation: actor-panic .25s steps(2) infinite; }
@keyframes actor-panic { 50% { margin-left: 2px; } }
.actor.is-responder img { filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 3px #f87171); }
.actor.is-guest .actor-tag { display: block; background: #f4efe6; color: var(--ink, #0b1020); }
.actor.is-waving img { animation: actor-wave .35s steps(2) 5; }
@keyframes actor-wave { 50% { transform: translateY(-3px) rotate(-8deg); } }
.actor.is-waving.face-left img { animation: actor-wave-left .35s steps(2) 5; }
@keyframes actor-wave-left { 50% { transform: scaleX(-1) translateY(-3px) rotate(8deg); } }
.actor.is-clapping img { animation: actor-dance .4s steps(2) 2; }
.actor.is-clapping.face-left img { animation: actor-dance-left .4s steps(2) 2; }
.actor.is-presenting img { filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 5px #fbbf24); }
.actor.is-presenting .actor-tag { display: block; background: #fbbf24; color: var(--ink, #0b1020); }

/* speech bubble: pixel font, ink box, small tail */
.bubble {
  position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-30%);
  font-family: 'Silkscreen', 'Press Start 2P', ui-monospace, Menlo, monospace; font-size: 9px; line-height: 1; white-space: nowrap;
  color: var(--ink, #0b1020); background: #fff; padding: 3px 5px; border: 2px solid var(--ink, #0b1020);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5); pointer-events: none; z-index: 2; animation: bubble-in .12s steps(2);
}
.bubble::after { content: ''; position: absolute; left: 8px; bottom: -6px; width: 4px; height: 4px; background: #fff; border: 2px solid var(--ink, #0b1020); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.bubble[hidden] { display: none; }
@keyframes bubble-in { from { transform: translateX(-30%) translateY(3px); } }

/* events */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 45; }
.confetti i {
  position: absolute; top: -10px; left: var(--x); width: 6px; height: 6px; background: var(--c);
  animation: confetti-fall var(--t) linear var(--d) infinite;
}
@keyframes confetti-fall { 0% { transform: translateY(-10px) rotate(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(calc(var(--rows, 20) * var(--cell) + 20px)) rotate(540deg); opacity: 0; } }
.building-layer.is-shaking { animation: quake .12s steps(2) infinite; }
.building-layer.is-shaking .room { animation: quake-room .18s steps(2) infinite; }
@keyframes quake { 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -1px) rotate(.2deg); } }
@keyframes quake-room { 50% { transform: translate(1px, -1px); } }
.building-layer.is-dark::after {
  content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: rgba(5, 7, 15, .55); animation: lights .9s steps(2) infinite;
}
@keyframes lights { 50% { background: rgba(5, 7, 15, .62); } }
.building-layer.is-dark .room.is-alarm {
  z-index: 31 !important; border-color: #f87171; box-shadow: inset 0 0 0 2px rgba(248,113,113,.4), 0 0 18px rgba(248,113,113,.55);
  animation: alarm .6s steps(2) infinite;
}
@keyframes alarm { 50% { border-color: #fca5a5; box-shadow: inset 0 0 0 2px rgba(248,113,113,.7), 0 0 26px rgba(248,113,113,.8); } }

/* the bar under the toolbar (same voice as the versions bar) */
.sim-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 6px var(--space-4); border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,.02);
}
.sb-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-bright, var(--accent)); }
.sb-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-key { font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sb-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; min-height: 30px;
  font: inherit; font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
  transition: border-color var(--dur), background var(--dur);
}
.sb-chip:hover { border-color: var(--accent-bright, var(--accent)); color: var(--text-primary); }
.sb-chip[aria-pressed="true"] { border-color: var(--accent-bright, var(--accent)); color: #fff; background: color-mix(in srgb, var(--accent) 35%, var(--surface-1)); }
.sb-chip--calm { border-color: #f87171; color: #fecaca; }
.sim-bar input[type="range"] { width: 150px; accent-color: var(--accent-bright, var(--accent)); }
.sb-clock { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 150px; }
.sb-status { font-size: var(--text-xs); color: var(--text-muted); flex: 1 1 220px; }
.sb-status kbd { font-size: 10px; }
body.embed .sim-bar { display: none !important; }
.puzzle-bar .sb-label { color: #fbbf24; }
.puzzle-bar .sb-status { flex: 1 1 320px; color: var(--text-secondary); }
.sb-dim { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .actor { transition: opacity .3s; }
  .actor.is-working img, .actor.is-dancing img, .actor.is-working.face-left img, .actor.is-dancing.face-left img, .actor.is-panic, .actor.is-selected::before, .actor.is-waving img, .actor.is-waving.face-left img, .actor.is-clapping img, .actor.is-clapping.face-left img { animation: none; }
  .confetti i { animation: none; top: auto; bottom: 4px; }
  .building-layer.is-shaking, .building-layer.is-shaking .room { animation: none; outline: 3px solid #fbbf24; }
  .building-layer.is-dark::after, .building-layer.is-dark .room.is-alarm { animation: none; }
}
@media print { .sim-bar, .actor, .confetti { display: none !important; } }

/* Small screens: the bar was seven wrapped rows on a phone. Drop the labels
   and the hint, keep each group on one scrollable row. */
@media (max-width: 640px) {
  .sim-bar { gap: 6px var(--space-3); padding: 6px var(--space-3); }
  .sb-key, .sb-status { display: none; }
  .sim-bar input[type="range"] { width: 84px; }
  .sb-clock { min-width: 0; }
  .sb-group { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .sb-group::-webkit-scrollbar { display: none; }
  .sb-chip { flex: 0 0 auto; }
}