/* =============================================================================
   FLOWORK OS — OFFICIAL PROCEDURAL MASCOT STYLESHEET
   Co-authored-by: Flowork OS <agent@floworkos.com>
   ============================================================================= */

:root {
  --mrflow-cyan: #00f2fe;
  --mrflow-blue: #38bdf8;
  --mrflow-purple: #7f00ff;
  --mrflow-glow: rgba(0, 242, 254, 0.45);
}

/* Launcher Boundless 3D Canvas Viewport */
.mascot-3d-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.mascot-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 0 35px rgba(0, 229, 255, 0.28));
  transition: filter 0.3s ease;
}

.mascot-canvas:active {
  cursor: grabbing;
  filter: drop-shadow(0 0 50px rgba(0, 229, 255, 0.5));
}

/* Chat Mascot Canvas & Stage */
.flw-chat-mascot-box {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 6px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.flw-chat-mascot-stage {
  width: 100%;
  height: 310px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  cursor: grab;
}

.flw-chat-mascot-stage:active {
  cursor: grabbing;
}

.flw-chat-mascot-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  outline: none;
  filter: drop-shadow(0 0 30px rgba(0, 242, 254, 0.25));
  transition: filter 0.3s ease;
}

.flw-chat-mascot-canvas:active {
  filter: drop-shadow(0 0 45px rgba(0, 242, 254, 0.45));
}

/* Mascot Pulse & Thruster Keyframes */
@keyframes mrflowPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes mrflowThrusterGlow {
  0%, 100% { filter: drop-shadow(0 0 10px #00f2fe); }
  50% { filter: drop-shadow(0 0 20px #7f00ff); }
}