/* Agent Office — "Blue hour" reskin (v5). DROP-IN replacement for the live style.css.
   Every selector office.js / rig.js relies on is kept; only paint, type and placement changed.
   Status is light: amber = idle (lamp-lit lounge), cyan = working (monitor glow).
   Cyan is reserved for "working" and is not used anywhere else in the scene. */
:root {
  /* weekly palette: written inline on :root by office.js applyPalette() from theme.json.
     These are only fallbacks. They are now TINTS over fixed bases (see "palette governor"). */
  --break-room-bg: #DDF1E8;
  --work-floor-bg: #D8E4EA;
  --accent: #F2A23A;
  --wall-trim: #34515E;
  --floor-break-room: #F4D7A1;
  --floor-work-floor: #9FC6C3;
  --ink: #1B2744;
  --paper: #FFF8EE;

  /* fixed design tokens (never weekly) */
  --ao-ink: #1B2744;
  --ao-ink-2: #3A4566;
  --ao-page: #F5F2EC;
  --ao-paper: #FFF8EE;
  --ao-scene: #141C33;
  --ao-scene-line: #0B1022;
  --ao-working: #6FF3FF;
  --ao-idle: #FFB547;
  --ao-matrix: #3DF59A;
  --ao-offline: #8895A2;
  --ao-label: #E9ECF7;
  --ao-radius: 18px;
  --ao-font-ui: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ao-font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --ao-base-wall-break: #2A3254;
  --ao-base-wall-work: #232C4C;
  --ao-base-wood: #6B4630;
  --ao-base-carpet: #2F3A58;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ao-font-ui);
  background: var(--ao-page);
  color: var(--ao-ink);
}

.office-header {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.25rem;
  text-align: center;
}
.office-header h1 {
  font-family: var(--ao-font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 600;
  margin: 0 0 0.6rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.office-sub {
  font-family: var(--ao-font-display);
  font-size: 1.1rem;
  margin: 0 auto 1rem;
  max-width: 62ch;
  color: #3A4566;
  line-height: 1.55;
}
.office-legend {
  display: inline-block;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 1.4rem;
  line-height: 1.8;
  background: var(--ao-scene);
  color: var(--ao-label);
  font-size: 0.86rem;
  font-weight: 500;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: -1px;
  box-shadow: 0 0 0 2px var(--ao-scene), 0 0 8px currentColor;
}
.dot-idle { background: var(--ao-idle); color: var(--ao-idle); }
.dot-active { background: var(--ao-working); color: var(--ao-working); }

/* The wrap becomes a small column: toolbar (fullscreen) / scene / status line.
   The fullscreen button no longer floats over the scene (it used to hide "GB10 Lab"). */
#office-canvas-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1rem;
  overflow-x: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}
#office-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ao-radius);
  background: var(--ao-scene);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px -18px rgba(27, 39, 68, 0.45), 0 0 0 1px rgba(27, 39, 68, 0.25);
  min-width: 640px;
  font-family: var(--ao-font-ui);
}

.fullscreen-btn {
  position: sticky;
  right: 0;
  align-self: flex-end;
  order: -1;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin: 0 0 0.6rem;
  padding: 0 1rem;
  background: var(--ao-ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--ao-font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fullscreen-btn:hover { background: #2A3A66; }
.fullscreen-btn:focus-visible { outline: 3px solid var(--ao-ink); outline-offset: 3px; box-shadow: 0 0 0 2px var(--ao-page) inset; }
.fullscreen-btn-icon { flex-shrink: 0; }

#office-canvas-wrap:fullscreen {
  max-width: none;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0E1428;
  padding: 1.5rem;
}
#office-canvas-wrap:fullscreen .fullscreen-btn { align-self: flex-end; background: #2A3A66; }
#office-canvas-wrap:fullscreen #office-canvas {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: calc(100vh - 7rem);
}
#office-canvas-wrap:fullscreen .office-status-line { color: #C9D0E4; }

.office-status-line {
  position: sticky;
  left: 0;
  text-align: center;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: #4A5578;
  margin: 0.8rem 0 0;
}

.office-footer {
  max-width: 680px;
  margin: 1.75rem auto 3rem;
  padding: 0 1.25rem;
  text-align: center;
  font-size: 0.88rem;
  color: #4A5578;
  line-height: 1.6;
}

/* --- SVG scene elements --- */
/* Zone backgrounds are now illustrated wall patterns (defined in rig.js defsMarkup). */
.zone-break-room { fill: url(#wallBreak); }
.zone-work-floor { fill: url(#wallWork); }
.floor-break-room { fill: var(--floor-break-room); }
.floor-work-floor { fill: var(--floor-work-floor); }

/* Palette governor: theme.json still picks the week's colors, but they are mixed into
   fixed low-chroma bases so the room never floods with saturated color and the
   characters (and the cyan "working" light) always stay the brightest things on screen.
   The plain fill line is the fallback for browsers without color-mix(). */
.wall-paint-break { fill: var(--ao-base-wall-break); fill: color-mix(in oklab, var(--break-room-bg) 16%, var(--ao-base-wall-break)); }
.wall-paint-work  { fill: var(--ao-base-wall-work);  fill: color-mix(in oklab, var(--work-floor-bg) 14%, var(--ao-base-wall-work)); }
.floor-wood       { fill: var(--ao-base-wood);       fill: color-mix(in oklab, var(--floor-break-room) 20%, var(--ao-base-wood)); }
.floor-carpet     { fill: var(--ao-base-carpet);     fill: color-mix(in oklab, var(--floor-work-floor) 16%, var(--ao-base-carpet)); }

.wall-trim { stroke: #0E1428; stroke: color-mix(in oklab, var(--wall-trim) 35%, #0E1428); stroke-width: 6; }
.baseboard { fill: #0E1428; fill: color-mix(in oklab, var(--wall-trim) 30%, #0E1428); opacity: 0.9; }
.gb10-partition {
  fill: rgba(13, 22, 44, 0.55);
  stroke: rgba(160, 190, 255, 0.35);
  stroke-width: 2;
  stroke-dasharray: none;
}
.zone-label {
  font-family: var(--ao-font-ui);
  font-size: 15px;
  font-weight: 600;
  fill: var(--ao-label);
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 0.92;
  paint-order: stroke;
  stroke: #0B1022;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.decor-icon { pointer-events: none; }
.server-light { fill: #4FD08A; }

/* Desks: dark screen when idle, cyan screen + floor light pool when the agent is working. */
.monitor-screen { fill: #22304F; transition: fill 0.4s ease, filter 0.4s ease; }
.monitor-screen.is-lit { fill: var(--ao-working); filter: drop-shadow(0 0 6px var(--ao-working)); }
.screen-ui rect { fill: #0B3B4A; }
.screen-ui { opacity: 0; transition: opacity 0.4s ease; }
.desktop-rig:has(.monitor-screen.is-lit) .screen-ui { opacity: 0.85; }
.glow-stop-working { stop-color: var(--ao-working); }
.desk-glow { fill: url(#screenGlow); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.desktop-rig:has(.monitor-screen.is-lit) .desk-glow { opacity: 1; }
.desktop-rig.is-lit-matrix .desk-glow { fill: url(#matrixGlow); opacity: 1; }

/* Neo and Trinity's screens: green code rain instead of the cyan glow. Every desk
   carries the streak rects; only .is-lit-matrix animates them. */
.desktop-rig.is-lit-matrix .monitor-screen {
  fill: #031008;
  filter: drop-shadow(0 0 6px var(--ao-matrix));
  transition: fill 0.4s ease, filter 0.4s ease;
}
.matrix-streak {
  opacity: 0;
  transform-box: fill-box;
}
.desktop-rig.is-lit-matrix .matrix-streak {
  animation: matrix-rain 1.3s linear infinite;
}
.matrix-streak-1 { animation-delay: -0.15s; }
.matrix-streak-2 { animation-delay: -0.6s; }
.matrix-streak-3 { animation-delay: -1s; }
@keyframes matrix-rain {
  0% { opacity: 0; transform: translateY(-8px); }
  15% { opacity: 0.95; }
  80% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(20px); }
}

/* --- Trinity's mainframe (GB10) --- */
.mainframe-shadow { fill: #000000; opacity: 0.4; }
.mainframe-aura { fill: var(--ao-idle); opacity: 0.06; transition: opacity 0.6s ease, fill 0.6s ease; }
.mainframe.is-active .mainframe-aura { fill: var(--ao-matrix); opacity: 0.16; }
.mainframe.is-offline .mainframe-aura { opacity: 0; }

.mainframe-light {
  fill: var(--ao-idle);
  opacity: 0.3;
  animation: mainframe-blink 2.6s ease-in-out infinite;
}
.mainframe.is-active .mainframe-light { fill: var(--ao-matrix); animation-duration: 0.9s; }
.mainframe.is-offline .mainframe-light { fill: var(--ao-offline); opacity: 0.18; animation: none; }
@keyframes mainframe-blink {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.9; }
}

.mainframe-fan {
  transform-box: fill-box;
  transform-origin: center;
  animation: mainframe-spin 6s linear infinite;
}
.mainframe.is-active .mainframe-fan { animation-duration: 1.1s; }
.mainframe.is-offline .mainframe-fan { animation-play-state: paused; }
@keyframes mainframe-spin { to { transform: rotate(360deg); } }

.mainframe-reel {
  transform-box: fill-box;
  transform-origin: center;
  animation: mainframe-spin 9s linear infinite;
}
.mainframe-reel-b { animation-direction: reverse; animation-duration: 11s; }
.mainframe.is-active .mainframe-reel { animation-duration: 2.4s; }
.mainframe.is-offline .mainframe-reel { animation-play-state: paused; }

.mainframe-bar {
  fill: var(--ao-matrix);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: mainframe-bar-idle 2.4s ease-in-out infinite;
}
.mainframe-bar-1 { animation-delay: 0.3s; }
.mainframe-bar-2 { animation-delay: 0.6s; }
.mainframe.is-active .mainframe-bar { animation: mainframe-bar-active 0.6s ease-in-out infinite; }
.mainframe.is-offline .mainframe-bar { animation: none; transform: scaleY(0.25); fill: #2B3339; }
@keyframes mainframe-bar-idle {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
@keyframes mainframe-bar-active {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.8); }
}

/* --- Trinity's companion robot --- */
.robot-companion {
  transition: transform 2.2s cubic-bezier(.45,0,.4,1);
}
.robot-body { animation: idle-bob 2.4s ease-in-out infinite; }
.robot-companion.robot-moving .robot-body { animation: walk-bob 0.35s ease-in-out infinite; }
.robot-companion.robot-moving .robot-wheel { transform-box: fill-box; transform-origin: center; animation: mainframe-spin 0.4s linear infinite; }
.robot-eye {
  fill: #FFE3A0;
  animation: mainframe-blink 2s ease-in-out infinite;
}
.robot-panel-light {
  fill: var(--ao-matrix);
  opacity: 0.6;
  animation: mainframe-blink 1.6s ease-in-out infinite;
}
.robot-companion .caption-bubble {
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: drop-shadow(0 4px 6px rgba(5, 9, 22, 0.45));
}
.robot-companion.is-chatting .caption-bubble {
  opacity: 1;
}

/* --- character --- */
.character {
  transition: transform 3.2s cubic-bezier(.45,0,.4,1);
}
.char-shadow {
  fill: #050916;
  opacity: 0.42;
}
.char-halo { fill: var(--ao-working); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.character.is-active .char-halo { opacity: 0.07; }
.name-tag-bg {
  fill: var(--ao-paper);
  stroke: var(--ao-ink);
  stroke-width: 1.6;
  opacity: 1;
}
.character .name-tag {
  font-family: var(--ao-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--ao-ink);
  text-anchor: middle;
}

.face-active { display: none; }
.character.is-active .face-idle { display: none; }
.character.is-active .face-active { display: block; }
.eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s ease-in-out infinite; }
.character .status-blip {
  stroke: var(--ao-ink);
  stroke-width: 1.4;
  transition: fill 0.4s ease;
}
.character.is-active .status-blip { fill: var(--ao-working); animation: blip-pulse 1.4s ease-in-out infinite; }
.character.is-idle .status-blip { fill: var(--ao-idle); }

.character .caption-bubble {
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: drop-shadow(0 4px 6px rgba(5, 9, 22, 0.45));
}
.character.is-active .caption-bubble,
.character.is-chatting .caption-bubble {
  opacity: 1;
}
/* Unscoped on purpose: the robot's bubble uses the same element (see original note). */
.caption-text {
  font-family: var(--ao-font-ui);
  font-size: 12.5px;
  font-weight: 500;
  fill: var(--ao-ink);
  text-anchor: middle;
}
.caption-bubble-bg {
  fill: var(--ao-paper);
  stroke: var(--ao-ink);
  stroke-width: 1.6;
  opacity: 1;
}
.caption-bubble-tail {
  fill: var(--ao-paper);
  stroke: var(--ao-ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
/* A working agent's bubble gets a deep-teal border so live-work captions read apart from chatter. */
.character.is-active .caption-bubble-bg { stroke: #0F6F7A; stroke-width: 2; }

.limb { transform-box: fill-box; }

@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes idle-arm-sip {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-18deg); }
  60% { transform: rotate(-18deg); }
}
@keyframes idle-arm-pour {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(22deg); }
  55% { transform: rotate(22deg); }
}
@keyframes idle-arcade-jitter {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-6deg); }
}
@keyframes smoke-rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  18% { opacity: 0.55; }
  100% { transform: translate(5px, -32px) scale(2.1); opacity: 0; }
}
@keyframes walk-leg-a {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-18deg); }
}
@keyframes walk-leg-b {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(18deg); }
}
@keyframes walk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes desk-type {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg); }
}
@keyframes desk-hunch {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(2px) rotate(2deg); }
}
@keyframes blip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.12); }
}

.pose-idle-body .body-bob { animation: idle-bob 2.6s ease-in-out infinite; }
.pose-idle-sip .body-bob { animation: idle-bob 2.6s ease-in-out infinite; }
.pose-idle-sip .arm-r { transform-origin: top center; animation: idle-arm-sip 3.2s ease-in-out infinite; }
.pose-idle-pour .body-bob { animation: idle-bob 2.6s ease-in-out infinite; }
.pose-idle-pour .arm-r { transform-origin: top center; animation: idle-arm-pour 2.4s ease-in-out infinite; }
.pose-idle-arcade .body-bob { animation: idle-bob 2.2s ease-in-out infinite; }
.pose-idle-arcade .arm-r { transform-origin: top center; animation: idle-arcade-jitter 0.9s ease-in-out infinite; }
.pose-idle-arcade .arm-l { transform-origin: top center; animation: idle-arcade-jitter 0.9s ease-in-out infinite reverse; }

/* Smoke wisps: atmosphere, not status. Always animating. */
.smoke-wisp { pointer-events: none; }
.smoke-puff {
  fill: #D9DEEA;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: smoke-rise 3.6s ease-out infinite;
}
.smoke-puff-1 { animation-delay: 0s; }
.smoke-puff-2 { animation-delay: 1.2s; }
.smoke-puff-3 { animation-delay: 2.4s; }
.smoke-wisp-ambient .smoke-puff-1 { animation-delay: 0.6s; }
.smoke-wisp-ambient .smoke-puff-2 { animation-delay: 1.8s; }
.smoke-wisp-ambient .smoke-puff-3 { animation-delay: 3s; }

.pose-walking .body-bob { animation: walk-bob 0.45s ease-in-out infinite; }
.pose-walking .leg-l { transform-origin: top center; animation: walk-leg-a 0.45s ease-in-out infinite; }
.pose-walking .leg-r { transform-origin: top center; animation: walk-leg-b 0.45s ease-in-out infinite; }
.pose-walking .arm-l { transform-origin: top center; animation: walk-leg-b 0.45s ease-in-out infinite; }
.pose-walking .arm-r { transform-origin: top center; animation: walk-leg-a 0.45s ease-in-out infinite; }

.pose-at-desk .body-bob { animation: desk-hunch 2.2s ease-in-out infinite alternate; }
.pose-at-desk .arm-r { transform-origin: top center; animation: desk-type 0.5s ease-in-out infinite; }
.pose-at-desk .arm-l { transform-origin: top center; animation: desk-type 0.6s ease-in-out infinite reverse; }

/* kept from the original sheet (office.js never adds .is-active to the blip itself;
   the live pulse is driven by .character.is-active .status-blip above) */
.status-blip.is-active { animation: blip-pulse 1.4s ease-in-out infinite; }

/* --- small screens --- */
/* The scene keeps its full 1760x900 layout (positions are behavior), so on phones it
   scrolls sideways. It is drawn bigger than before (names were ~4.7px tall at 640px)
   and a hint says it scrolls. */
@media (max-width: 720px) {
  .office-header { padding: 1.75rem 1.1rem 1rem; }
  .office-sub { font-size: 1rem; }
  #office-canvas-wrap { padding: 0 0.75rem; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  #office-canvas { min-width: 1040px; scroll-snap-align: start; }
  #office-canvas-wrap::before {
    content: "Swipe sideways to explore";
    max-width: calc(100% - 10.5rem);
    line-height: 44px;
    position: sticky;
    left: 0;
    order: -2;
    align-self: flex-start;
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4A5578;
  }
  .fullscreen-btn { margin-top: -44px; left: calc(100% - 9.6rem); right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .character, .pose-idle-body .body-bob, .pose-idle-sip .body-bob, .pose-idle-sip .arm-r,
  .pose-idle-pour .body-bob, .pose-idle-pour .arm-r, .pose-idle-arcade .body-bob,
  .pose-idle-arcade .arm-r, .pose-idle-arcade .arm-l, .pose-walking .body-bob,
  .pose-walking .leg-l, .pose-walking .leg-r, .pose-walking .arm-l, .pose-walking .arm-r,
  .pose-at-desk .body-bob, .pose-at-desk .arm-r, .pose-at-desk .arm-l, .status-blip.is-active,
  .character.is-active .status-blip,
  .eyes, .smoke-puff, .mainframe-light, .mainframe-fan, .mainframe-reel, .mainframe-bar,
  .robot-companion, .robot-body, .robot-companion.robot-moving .robot-wheel, .robot-eye,
  .robot-panel-light, .matrix-streak, .desk-glow, .screen-ui, .char-halo, .mainframe-aura,
  .monitor-screen, .caption-bubble {
    animation: none !important;
    transition: none !important;
  }
  .smoke-puff { opacity: 0 !important; }
  .mainframe-light { opacity: 0.6 !important; }
  .robot-eye, .robot-panel-light { opacity: 0.7 !important; }
  .matrix-streak { opacity: 0.7 !important; }
}