/* character-overlay.css — Phase 1 + 2 + 3 animations
   Drives idle/walk/working states keyed by classes added by character-overlay.js. */

.char-sprite {
  pointer-events: none;
  transform-origin: 0 0;
  transform-box: fill-box;
}

/* idle states */
.char-sprite.char-working {
  animation: char-bob 0.7s ease-in-out infinite;
}
@keyframes char-bob {
  0%, 100% { transform: translate(0, -22px); }
  50%      { transform: translate(0, -24.5px); }
}
.char-sprite.char-awake {
  animation: char-breathe 2.4s ease-in-out infinite;
}
@keyframes char-breathe {
  0%, 100% { transform: translate(0, -22px) scale(1); }
  50%      { transform: translate(0, -22px) scale(1.05); }
}
.char-sprite.char-idle {
  animation: char-sway 4s ease-in-out infinite;
  opacity: 0.78;
}
@keyframes char-sway {
  0%, 100% { transform: translate(-0.6px, -22px) rotate(-2deg); }
  50%      { transform: translate(0.6px, -22px) rotate(2deg); }
}
.char-sprite.char-asleep {
  opacity: 0.42;
  filter: grayscale(0.5);
}

/* specials */
.char-sprite[data-special="ghost"] {
  opacity: 0.28;
  filter: blur(0.4px);
  animation: char-ghost 5s ease-in-out infinite;
}
@keyframes char-ghost {
  0%, 100% { opacity: 0.18; transform: translate(0, -22px); }
  50%      { opacity: 0.36; transform: translate(0, -23.5px); }
}
.char-sprite[data-special="flicker"] {
  opacity: 0.55;
  animation: char-flicker 3.6s ease-in-out infinite;
}
@keyframes char-flicker {
  0%, 12%, 20%, 100% { opacity: 0.55; }
  15%                { opacity: 0.20; }
  50%                { opacity: 0.70; }
  52%                { opacity: 0.30; }
  54%                { opacity: 0.62; }
}
.char-sprite[data-special="command"] { opacity: 0.95; }

/* walking — overrides idle while transitioning */
.char-sprite.char-walking {
  animation: none !important;
}

/* Phase 3.C thinking bubbles — hidden by default, shown when working */
.char-sprite .char-bubbles { opacity: 0; }
.char-sprite.char-working .char-bubbles { opacity: 1; }
.char-sprite.char-working .char-bubbles circle {
  animation: bubble-fade 0.9s ease-in-out infinite;
}
@keyframes bubble-fade {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1.0;  transform: translateY(-1px); }
}

/* Phase 3.A inbox tray + badge */
.desk-inbox {
  pointer-events: none;
}
.desk-inbox .inbox-badge {
  transition: r 0.3s ease-in-out;
}

/* Agent deep-desk overlay — right-side panel that slides in OVER the
   architecture diagram, keeping the diagram visible on the left for spatial
   context. CEO ratify msg 7020. Sized up + shifted right per CEO msg 7060
   so agent switcher tabs stay clear. */
.agent-desk-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(48vw, 720px);
  background: #f4efe4;
  z-index: 99998;
  display: none;
  flex-direction: column;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35);
  border-left: 1px solid #cdc5af;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}
.agent-desk-overlay.open {
  display: flex;
  transform: translateX(0);
}
.agent-desk-overlay .ado-close {
  align-self: flex-end;
  margin: 10px 14px 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #cdc5af;
  background: #faf6ec;
  color: #1f2a22;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  cursor: pointer;
  z-index: 2;
}
.agent-desk-overlay .ado-close:hover {
  background: #fff;
  border-color: #1f2a22;
}
.agent-desk-overlay .ado-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #f4efe4;
}
@media (max-width: 720px) {
  .agent-desk-overlay { width: 100vw; }
}

/* War Room cluster bigger/bolder header (CEO msg 7093) */
g.cluster.cluster-green text.cluster-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  fill: #1e3f29 !important;
}

/* Work Orders ticker pulse — pulsing red dot beside the node */
g[data-id="topic_wo"] rect {
  stroke: #c4564f;
  stroke-width: 1.8px;
}
g[data-id="topic_wo"]::after {
  content: "";
}