/* The team works inside the rooms; room buttons remain the interaction layer. */
.floorplan-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.floorplan-toolbar h3 { flex: 1 1 180px; margin: 0; }
.plan-motion-toggle {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.plan-motion-toggle:hover { background: var(--aqua); border-color: #9bb6a7; }
.plan-motion-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.plan-motion-toggle:disabled { color: var(--muted); cursor: default; }
.floorplan-map > img { position: relative; z-index: 0; }
.floorplan-cleaners { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floorplan-cleaner { position: absolute; display: block; pointer-events: none; }
.floorplan-cleaner svg { display: block; width: 100%; height: auto; overflow: visible; }
.floorplan-cleaner::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 12%;
  bottom: 1%;
  height: 3.5%;
  border-radius: 50%;
  background: rgba(24, 61, 53, .09);
}
/* All figures use the same .32 scale in the 600-unit plan, independent of tool width. */
.floorplan-cleaner { animation-duration: 22s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.floorplan-cleaner--living { left: 19.667%; top: 60.8%; width: 13.333%; animation-name: plan-roam-living; }
.floorplan-cleaner--kitchen { left: 15.333%; top: 18%; width: 9.867%; animation-name: plan-roam-kitchen; animation-duration: 24s; animation-delay: -4s; }
.floorplan-cleaner--bedroom { left: 69%; top: 27.8%; width: 9.333%; animation-name: plan-roam-bedroom; animation-duration: 26s; animation-delay: -9s; }
.floorplan-cleaner--bathroom { left: 70%; top: 73%; width: 10.667%; animation-name: plan-roam-bathroom; animation-duration: 20s; animation-delay: -5s; }
.floorplan-cleaner--hall { left: 49.167%; top: 33%; width: 7.467%; animation-name: plan-roam-hall; animation-duration: 24s; animation-delay: -12s; }
/* Room-shaped clipping is a final guard: no cleaner or tool can cross a wall. */
.floorplan-cleaner-zone { position: absolute; inset: 0; pointer-events: none; }
.floorplan-fixed-tool { position: absolute; display: block; height: auto; overflow: visible; }
.floorplan-fixed-tool--bin { left: 36%; top: 32%; width: 4.267%; }
.floorplan-fixed-tool--bucket { left: 71.333%; top: 87.6%; width: 3.2%; }
.floorplan-cleaner-zone--living { clip-path: inset(45.2% 56.667% 4.8% 4%); }
.floorplan-cleaner-zone--kitchen { clip-path: inset(4.8% 56.667% 59.6% 4%); }
.floorplan-cleaner-zone--bedroom { clip-path: inset(4.8% 4% 44.8% 62.667%); }
.floorplan-cleaner-zone--bathroom { clip-path: inset(60% 4% 4.8% 62.667%); }
.floorplan-cleaner-zone--hall { clip-path: inset(4.8% 41.333% 4.8% 47.333%); }
/* Pauses at each stop let the task read before the cleaner moves to the next spot. */
@keyframes plan-roam-living {
  0%, 10%, 100% { transform: translate(0, 0); }
  30%, 40% { transform: translate(37.5%, 0%); }
  60%, 70% { transform: translate(37.5%, 32%); }
  88% { transform: translate(0, 71%); }
}
@keyframes plan-roam-kitchen {
  0%, 12%, 100% { transform: translate(0, 0); }
  35%, 46% { transform: translate(105%, 0); }
  67%, 78% { transform: translate(100%, 20%); }
}
@keyframes plan-roam-bedroom {
  0%, 12%, 100% { transform: translate(0, 0); }
  35%, 47% { transform: translate(105%, 0); }
  68%, 80% { transform: translate(55%, 4%); }
}
@keyframes plan-roam-bathroom {
  0%, 12%, 100% { transform: translate(0, 0); }
  35%, 46% { transform: translate(72%, 0); }
  68%, 80% { transform: translate(62%, 14%); }
}
@keyframes plan-roam-hall {
  0%, 10%, 100% { transform: translate(0, 0); }
  35%, 45% { transform: translate(3%, 78%); }
  68%, 78% { transform: translate(-3%, 150%); }
}
.floorplan-map .plan-room { z-index: 2; align-items: flex-start; padding-top: 8px; }
.floorplan-map .plan-room-label { position: relative; z-index: 3; }
.floorplan-map .plan-room--kitchen, .floorplan-map .plan-room--bathroom { justify-content: flex-start; padding-left: 9px; }
.floorplan-map .plan-room--hall { align-items: flex-start; padding-top: 3%; padding-bottom: 0; }

/* Fill-box anchors keep shoulders and hands fixed even with cropped SVG views. */
.floorplan-cleaner .vacuum-action,
.floorplan-cleaner .duster-action,
.floorplan-cleaner .bag-action,
.floorplan-cleaner .mop-action { transform-box: fill-box; }
.floorplan-cleaner .vacuum-action {
  animation: plan-vacuum 3.8s ease-in-out infinite;
}
.floorplan-cleaner .duster-action {
  transform-origin: 0% 87%;
  animation: plan-dust 3.2s ease-in-out infinite;
}
.floorplan-cleaner .bag-action {
  transform-origin: 2% 0%;
  animation: plan-empty-bin 4.8s ease-in-out infinite;
}
.floorplan-cleaner .mop-action {
  transform-origin: 47% 15%;
  animation: plan-mop 4s ease-in-out infinite;
}
.floorplan-cleaner .cleaner-sparkles { animation: plan-clean-sparkle 3.2s ease-in-out infinite; opacity: 0; }
.floorplan-cleaner--hall .vacuum-action { animation-name: plan-hall-vacuum; animation-duration: 4.6s; animation-delay: -.9s; }
.floorplan-cleaner--bedroom .duster-action,
.floorplan-cleaner--bedroom .cleaner-sparkles { animation-delay: -.7s; }
.floorplan-cleaner--kitchen .bag-action { animation-delay: -1.7s; }
.floorplan-cleaner--bathroom .mop-action,
.floorplan-cleaner--bathroom .cleaner-sparkles { animation-delay: -1.2s; }
.floorplan-cleaner,
.floorplan-cleaner [class$="-action"],
.floorplan-cleaner .cleaner-sparkles { animation-play-state: paused; }
.floorplan-map.is-cleaning .floorplan-cleaner,
.floorplan-map.is-cleaning .floorplan-cleaner [class$="-action"],
.floorplan-map.is-cleaning .floorplan-cleaner .cleaner-sparkles { animation-play-state: running; }

@keyframes plan-vacuum {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-13px); }
  65% { transform: translateX(9px); }
}
@keyframes plan-hall-vacuum {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}
@keyframes plan-dust {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(-11deg); }
  48% { transform: rotate(5deg); }
  72% { transform: rotate(-8deg); }
}
@keyframes plan-empty-bin {
  0%, 15%, 100% { transform: rotate(9deg); }
  42%, 60% { transform: rotate(-12deg); }
  77% { transform: rotate(-3deg); }
}
@keyframes plan-mop {
  0%, 100% { transform: rotate(0); }
  28% { transform: rotate(-9deg); }
  67% { transform: rotate(6deg); }
}
@keyframes plan-clean-sparkle {
  0%, 15%, 100% { opacity: 0; }
  35%, 65% { opacity: .85; }
}

@media (max-width: 620px) {
  .floorplan-toolbar { padding: 0 6px; gap: 5px 8px; }
  .floorplan-toolbar h3 { padding: 0; flex-basis: 145px; }
  .plan-motion-toggle { padding: 8px 10px; font-size: .65rem; }
  .floorplan-map .plan-room { padding-top: 4px; }
  .floorplan-map .plan-room-label { font-size: .64rem; padding: 4px 5px; gap: 4px; }
  .floorplan-map .plan-room--hall .plan-room-label { font-size: .57rem; padding: 5px 3px; }
}
@media (max-width: 380px) {
  .floorplan-map .plan-room-label { font-size: .58rem; gap: 3px; }
  .floorplan-map .plan-room--hall .plan-room-label { font-size: .52rem; }
}
@media (prefers-reduced-motion: reduce) {
  .floorplan-cleaner, .floorplan-cleaner *, .floorplan-cleaner::after { animation: none !important; transition: none !important; }
}