/* ==========================================================================
   BanRay AI Office — Living Computer Companion & Acoustic Voice Stage
   100% GPU-Composited (transform/opacity only) · Zero CPU Inference Overhead
   Uniform across Desktop (Tauri/Electron), Web, iOS, and Android
   ========================================================================== */

:root {
  --br-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --br-spring-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --br-glass-surface: rgba(255, 253, 249, 0.82);
  --br-glass-strong: rgba(255, 253, 249, 0.92);
  --br-hairline: rgba(168, 134, 102, 0.22);
  --br-shadow-ambient: 0 20px 46px -14px rgba(51, 41, 33, 0.08), 0 4px 12px -2px rgba(51, 41, 33, 0.04);
  --br-shadow-elevated: 0 28px 60px -14px rgba(138, 72, 38, 0.16), 0 6px 18px -4px rgba(51, 41, 33, 0.06);
}

/* --------------------------------------------------------------------------
   1. Cupertino Frosted Glass Navigation, Header & Surfaces
   -------------------------------------------------------------------------- */
body {
  background: radial-gradient(circle at 82% 8%, rgba(238, 214, 184, 0.28), transparent 42%),
              radial-gradient(circle at 18% 88%, rgba(212, 224, 206, 0.24), transparent 45%),
              #faf7f1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sidebar,
.office-workbench-sidebar {
  background: linear-gradient(180deg, rgba(242, 237, 228, 0.88), rgba(235, 229, 218, 0.94)) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-right: 1px solid rgba(214, 198, 178, 0.55) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.65);
}

.sidebar select,
.office-workbench-sidebar select {
  background: rgba(255, 253, 249, 0.85) !important;
  border: 1px solid rgba(206, 188, 166, 0.65) !important;
  box-shadow: 0 2px 8px rgba(51, 41, 33, 0.04), inset 0 1px 0 #fff;
  border-radius: 12px !important;
  transition: border-color 0.22s var(--br-spring), box-shadow 0.22s var(--br-spring), transform 0.22s var(--br-spring);
}

.sidebar select:hover {
  border-color: #b98b63 !important;
  box-shadow: 0 6px 16px rgba(145, 92, 52, 0.09), inset 0 1px 0 #fff;
}

.sidebar nav button,
.office-workbench-sidebar nav a {
  position: relative;
  border-radius: 13px !important;
  transition: transform 0.24s var(--br-spring), background 0.24s var(--br-spring), color 0.2s ease, box-shadow 0.24s var(--br-spring) !important;
}

.sidebar nav button:hover:not(.active),
.office-workbench-sidebar nav a:hover:not(.active) {
  background: rgba(255, 252, 246, 0.68) !important;
  transform: translateX(3px);
}

.sidebar nav button.active,
.office-workbench-sidebar nav a.active {
  background: linear-gradient(135deg, #3a3028, #28201a) !important;
  color: #fff9f0 !important;
  box-shadow: 0 10px 24px -6px rgba(42, 32, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

main > header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(250, 247, 241, 0.78) !important;
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  border-bottom: 1px solid rgba(222, 209, 192, 0.55) !important;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(235, 242, 230, 0.88) !important;
  border: 1px solid rgba(154, 179, 138, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px rgba(72, 98, 60, 0.06);
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   2. UIverse Tactile Buttons & CTAs
   -------------------------------------------------------------------------- */
.primary.galaxy-cta,
.primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg, #cf7446 0%, #b34827 52%, #963619 100%) !important;
  box-shadow: 0 12px 28px -6px rgba(175, 72, 40, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  transition: transform 0.32s var(--br-spring), box-shadow 0.32s var(--br-spring) !important;
}

.primary.galaxy-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.26) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--br-spring);
  pointer-events: none;
}

.primary.galaxy-cta:hover::before {
  transform: translateX(120%);
}

.primary.galaxy-cta:hover,
.primary:hover {
  transform: translateY(-3px) scale(1.015) !important;
  box-shadow: 0 18px 36px -6px rgba(175, 72, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.primary.galaxy-cta:active,
.primary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* --------------------------------------------------------------------------
   3. The Chief Companion Hero (AI Dog Mascot & Ambient Gyro Stage)
   -------------------------------------------------------------------------- */
.office-art {
  perspective: 1000px;
}

.banray-hero-companion {
  position: relative;
  width: min(440px, 94%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transition: transform 0.38s var(--br-spring);
  will-change: transform;
  user-select: none;
}

.hero-dog-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: br-hero-float 6.5s ease-in-out infinite;
  transform-style: preserve-3d;
}

.hero-dog-render {
  width: 88%;
  height: 88%;
  object-fit: contain;
  border-radius: 36px;
  filter: drop-shadow(0 28px 50px rgba(138, 72, 38, 0.22));
  user-select: none;
  pointer-events: none;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 2;
}

.hero-dog-ambient-aura {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 202, 164, 0.6) 0%, rgba(237, 210, 188, 0.22) 55%, transparent 75%);
  pointer-events: none;
  animation: br-hero-breathe 6.5s ease-in-out infinite;
  z-index: 1;
}

.hero-dog-gyro {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  pointer-events: none;
  animation: br-spin-cw 34s linear infinite;
  transform-origin: 200px 200px;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   4. The 20 Living Computer Companions
   -------------------------------------------------------------------------- */
.banray-companion-container {
  position: relative;
  display: grid;
  place-items: center;
  user-select: none;
  transition: transform 0.35s var(--br-spring);
  will-change: transform;
}

.banray-companion-container svg.banray-companion-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 14px 28px rgba(120, 68, 32, 0.16));
}

.banray-companion-container.size-stage {
  width: min(310px, 66vw);
  height: min(310px, 66vw);
  margin: 0 auto;
}

.member-avatar.has-companion-bust {
  width: 64px !important;
  height: 64px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
  position: relative;
}

.member-avatar.has-companion-bust::after {
  display: none !important;
}

.banray-companion-container.size-bust {
  width: 64px;
  height: 64px;
}

.banray-companion-container.size-bust svg.banray-companion-svg {
  filter: drop-shadow(0 6px 14px rgba(120, 68, 32, 0.18));
}

.teammate-card:hover .banray-companion-container.size-bust {
  transform: translateY(-4px) scale(1.08);
}

/* --------------------------------------------------------------------------
   5. Interactive 5-State Life-Cycle System
   -------------------------------------------------------------------------- */
.comp-eyes-happy,
.comp-eyes-thinking,
.comp-eyes-puzzled,
.comp-mouth-happy,
.comp-mouth-thinking,
.comp-mouth-speaking,
.comp-twinkle-star {
  display: none;
}

.comp-eyes-normal,
.comp-mouth-normal {
  display: block;
}

/* 5.1 Ready */
.comp-floating-body {
  animation: br-companion-float 5.4s ease-in-out infinite;
  transform-origin: 100px 100px;
}

.comp-shadow {
  animation: br-companion-shadow 5.4s ease-in-out infinite;
  transform-origin: 100px 180px;
}

.comp-aura {
  animation: br-aura-breathe 6s ease-in-out infinite;
  transform-origin: 100px 100px;
}

.comp-eyes-normal {
  animation: br-eye-blink 4.2s infinite;
  transform-origin: 100px 88px;
}

/* 5.2 Working */
#call[data-avatar-state="working"] .comp-floating-body,
.banray-companion-container[data-avatar-state="working"] .comp-floating-body {
  animation: br-companion-thinking 2.2s ease-in-out infinite alternate !important;
}

#call[data-avatar-state="working"] .comp-eyes-normal,
.banray-companion-container[data-avatar-state="working"] .comp-eyes-normal,
#call[data-avatar-state="working"] .comp-mouth-normal,
.banray-companion-container[data-avatar-state="working"] .comp-mouth-normal {
  display: none !important;
}

#call[data-avatar-state="working"] .comp-eyes-thinking,
.banray-companion-container[data-avatar-state="working"] .comp-eyes-thinking,
#call[data-avatar-state="working"] .comp-mouth-thinking,
.banray-companion-container[data-avatar-state="working"] .comp-mouth-thinking {
  display: block !important;
}

#call[data-avatar-state="working"] .comp-spin-cw,
.banray-companion-container[data-avatar-state="working"] .comp-spin-cw {
  animation: br-spin-cw 2.4s linear infinite;
  transform-origin: 80px 88px;
}

#call[data-avatar-state="working"] .comp-spin-ccw,
.banray-companion-container[data-avatar-state="working"] .comp-spin-ccw {
  animation: br-spin-ccw 2.4s linear infinite;
  transform-origin: 120px 88px;
}

#call[data-avatar-state="working"] .comp-radar-sweep,
.banray-companion-container[data-avatar-state="working"] .comp-radar-sweep {
  animation: br-scan-sweep 1.4s ease-in-out infinite alternate;
  transform-origin: 100px 88px;
}

#call[data-avatar-state="working"] .acc-antenna,
.banray-companion-container[data-avatar-state="working"] .acc-antenna {
  animation: br-antenna-pulse 1.1s ease-in-out infinite;
}

/* 5.3 Responding */
#call[data-avatar-state="responding"] .comp-floating-body,
.banray-companion-container[data-avatar-state="responding"] .comp-floating-body {
  animation: br-companion-speaking 1.2s ease-in-out infinite alternate !important;
}

#call[data-avatar-state="responding"] .comp-mouth-normal,
.banray-companion-container[data-avatar-state="responding"] .comp-mouth-normal {
  display: none !important;
}

#call[data-avatar-state="responding"] .comp-mouth-speaking,
.banray-companion-container[data-avatar-state="responding"] .comp-mouth-speaking {
  display: block !important;
}

.comp-mouth-bar.b1 { animation: br-bar-bounce 0.42s ease-in-out infinite alternate; transform-origin: 91px 106px; }
.comp-mouth-bar.b2 { animation: br-bar-bounce 0.58s ease-in-out 0.12s infinite alternate; transform-origin: 97px 106px; }
.comp-mouth-bar.b3 { animation: br-bar-bounce 0.49s ease-in-out 0.2s infinite alternate; transform-origin: 103px 106px; }
.comp-mouth-bar.b4 { animation: br-bar-bounce 0.64s ease-in-out 0.06s infinite alternate; transform-origin: 109px 106px; }

/* 5.4 Finished */
#call[data-avatar-state="finished"] .banray-companion-container,
.banray-companion-container[data-avatar-state="finished"] {
  animation: br-companion-hop 0.75s var(--br-spring) both;
}

#call[data-avatar-state="finished"] .comp-eyes-normal,
.banray-companion-container[data-avatar-state="finished"] .comp-eyes-normal,
#call[data-avatar-state="finished"] .comp-mouth-normal,
.banray-companion-container[data-avatar-state="finished"] .comp-mouth-normal {
  display: none !important;
}

#call[data-avatar-state="finished"] .comp-eyes-happy,
.banray-companion-container[data-avatar-state="finished"] .comp-eyes-happy,
#call[data-avatar-state="finished"] .comp-mouth-happy,
.banray-companion-container[data-avatar-state="finished"] .comp-mouth-happy,
#call[data-avatar-state="finished"] .comp-twinkle-star,
.banray-companion-container[data-avatar-state="finished"] .comp-twinkle-star {
  display: block !important;
}

.comp-twinkle-star {
  animation: br-twinkle 1.8s ease-in-out infinite;
  transform-origin: 148px 46px;
}

/* 5.5 Error */
#call[data-avatar-state="error"] .comp-floating-body,
.banray-companion-container[data-avatar-state="error"] .comp-floating-body {
  transform: rotate(6deg) translateY(-2px) !important;
  animation: none !important;
}

#call[data-avatar-state="error"] .comp-eyes-normal,
.banray-companion-container[data-avatar-state="error"] .comp-eyes-normal {
  display: none !important;
}

#call[data-avatar-state="error"] .comp-eyes-puzzled,
.banray-companion-container[data-avatar-state="error"] .comp-eyes-puzzled {
  display: block !important;
}

/* --------------------------------------------------------------------------
   6. Bespoke Hardware Tool Micro-Animations
   -------------------------------------------------------------------------- */
.comp-waving-arm { animation: br-arm-wave 3.4s ease-in-out infinite; transform-origin: 158px 96px; }
.comp-gear-spin { animation: br-spin-cw 18s linear infinite; transform-origin: 100px 32px; }
.comp-laser-scan { animation: br-laser-sweep 2.2s ease-in-out infinite alternate; }
.comp-pendulum-swing { animation: br-pendulum-swing 2.2s ease-in-out infinite alternate; transform-origin: 100px 132px; }
.comp-broadcast-arc { animation: br-broadcast-pulse 2.2s ease-in-out infinite; transform-origin: 100px 20px; }
.comp-needle-sweep { animation: br-needle-sweep 3.2s ease-in-out infinite alternate; transform-origin: 15px 9px; }
.comp-scanner-beam { animation: br-scanner-sweep 2.4s ease-in-out infinite alternate; }
.comp-beacon-glow { animation: br-beacon-pulse 1.8s ease-in-out infinite; }
.comp-gem-spin { animation: br-spin-cw 14s linear infinite; transform-origin: 0 0; }

/* --------------------------------------------------------------------------
   7. Redefined Navigation Bar (.canvas-heading) — Zero Overlap Architecture
   -------------------------------------------------------------------------- */
.canvas-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  padding: 14px 0 !important;
  background: rgba(250, 248, 243, 0.88) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(220, 204, 184, 0.55) !important;
}

/* Tactile Back to Office Pill */
.canvas-home.canvas-home-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: auto !important;
  height: auto !important;
  padding: 7px 15px !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 246, 0.9) !important;
  border: 1px solid rgba(212, 196, 176, 0.72) !important;
  box-shadow: 0 2px 8px rgba(51, 41, 33, 0.04), inset 0 1px 0 #ffffff !important;
  color: #7d5a42 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-right: 18px !important;
  flex-shrink: 0 !important;
  transition: all 0.22s var(--br-spring) !important;
}

.canvas-home.canvas-home-pill:hover {
  background: #ffffff !important;
  border-color: #b84d27 !important;
  color: #b84d27 !important;
  transform: translateX(-3px) !important;
  box-shadow: 0 6px 14px rgba(184, 77, 39, 0.14), inset 0 1px 0 #ffffff !important;
}

.canvas-home.canvas-home-pill svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2 !important;
}

.canvas-identity {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-right: auto !important;
}

.canvas-identity.has-companion .banray-companion-container.size-bust {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}

.canvas-identity-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.canvas-identity-text .canvas-tag {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #a48265 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.canvas-identity-text strong#canvas-role {
  font: 700 18px/1.2 Manrope, system-ui, sans-serif !important;
  letter-spacing: -0.5px !important;
  color: #30241b !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

.specialist-given-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #b84d27 !important;
}

.canvas-state-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 1px !important;
  padding: 2.5px 9px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: rgba(255, 252, 246, 0.92) !important;
  border: 1px solid rgba(212, 196, 176, 0.65) !important;
  color: #87694f !important;
  box-shadow: 0 2px 6px rgba(51, 41, 33, 0.04) !important;
}

.canvas-state-pill .pill-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #609c58 !important;
  display: inline-block !important;
}

/* Glass Actions Buttons on Right */
#canvas-memory,
#canvas-context {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  padding: 8px 15px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(255, 252, 246, 0.85) !important;
  border: 1px solid rgba(212, 196, 176, 0.65) !important;
  color: #735944 !important;
  box-shadow: 0 2px 8px rgba(51, 41, 33, 0.04), inset 0 1px 0 #fff !important;
  margin-left: 8px !important;
  cursor: pointer !important;
  transition: all 0.22s var(--br-spring) !important;
}

#canvas-memory:hover,
#canvas-context:hover {
  background: #ffffff !important;
  border-color: #b84d27 !important;
  color: #b84d27 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(184, 77, 39, 0.12), inset 0 1px 0 #fff !important;
}

#canvas-context span {
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-left: 2px !important;
}

/* --------------------------------------------------------------------------
   8. The Redefined Acoustic Voice Stage (.specialist-acoustic-stage)
   -------------------------------------------------------------------------- */
.specialist-acoustic-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 32px 16px 120px !important;
  max-width: 740px !important;
  margin: 0 auto !important;
  user-select: none !important;
}

.acoustic-stage-core {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* Department Color Palette Token Injections */
.specialist-acoustic-stage[data-palette="copper"] {
  --stage-accent: #b84d27;
  --stage-ripple: rgba(184, 77, 39, 0.35);
  --stage-pill-bg: rgba(184, 77, 39, 0.09);
}
.specialist-acoustic-stage[data-palette="sage"] {
  --stage-accent: #496e56;
  --stage-ripple: rgba(73, 110, 86, 0.35);
  --stage-pill-bg: rgba(73, 110, 86, 0.09);
}
.specialist-acoustic-stage[data-palette="amber"] {
  --stage-accent: #9e642a;
  --stage-ripple: rgba(158, 100, 42, 0.35);
  --stage-pill-bg: rgba(158, 100, 42, 0.09);
}
.specialist-acoustic-stage[data-palette="slate"] {
  --stage-accent: #466178;
  --stage-ripple: rgba(70, 97, 120, 0.35);
  --stage-pill-bg: rgba(70, 97, 120, 0.09);
}
.specialist-acoustic-stage[data-palette="plum"] {
  --stage-accent: #7d4b65;
  --stage-ripple: rgba(125, 75, 101, 0.35);
  --stage-pill-bg: rgba(125, 75, 101, 0.09);
}

/* Concentric Acoustic Voice Soundwave Ripples */
.acoustic-ripple-field {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
  z-index: 0;
}

.voice-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--stage-ripple, rgba(184, 77, 39, 0.35));
  pointer-events: none;
}

.voice-ripple.r1 {
  inset: 22%;
  animation: br-voice-wave 4.4s ease-out infinite;
}
.voice-ripple.r2 {
  inset: 10%;
  animation: br-voice-wave 4.4s ease-out 1.45s infinite;
}
.voice-ripple.r3 {
  inset: 0%;
  animation: br-voice-wave 4.4s ease-out 2.9s infinite;
}

/* When Working: Accelerated Thinking Orbit */
.specialist-acoustic-stage[data-avatar-state="working"] .voice-ripple.r1,
.specialist-acoustic-stage[data-avatar-state="working"] .voice-ripple.r2,
.specialist-acoustic-stage[data-avatar-state="working"] .voice-ripple.r3 {
  animation-duration: 2.2s !important;
  border-style: dashed;
}

/* When Responding: Vocal Modulation Flare */
.specialist-acoustic-stage[data-avatar-state="responding"] .voice-ripple {
  animation: br-voice-speaking 0.9s ease-in-out infinite alternate !important;
}

/* Avatar Mount in Acoustic Stage */
.acoustic-companion-mount {
  position: relative;
  z-index: 2;
  width: 145px;
  height: 145px;
  margin-bottom: 6px;
  display: grid;
  place-items: center;
}

.acoustic-companion-mount .banray-companion-container {
  width: 140px;
  height: 140px;
}

/* 8-Bar Kinetic Audio Equalizer Voice Meter */
.acoustic-voice-meter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  height: 22px;
  margin: 8px 0 16px;
  position: relative;
  z-index: 2;
}

.acoustic-voice-meter .meter-bar {
  width: 3.2px;
  border-radius: 999px;
  background: var(--stage-accent, #b84d27);
  display: inline-block;
  transform-origin: center bottom;
}

.acoustic-voice-meter .b1 { height: 7px; animation: br-meter-bounce 0.65s ease-in-out infinite alternate; }
.acoustic-voice-meter .b2 { height: 13px; animation: br-meter-bounce 0.52s ease-in-out 0.12s infinite alternate; }
.acoustic-voice-meter .b3 { height: 18px; animation: br-meter-bounce 0.72s ease-in-out 0.24s infinite alternate; }
.acoustic-voice-meter .b4 { height: 21px; animation: br-meter-bounce 0.48s ease-in-out 0.08s infinite alternate; }
.acoustic-voice-meter .b5 { height: 17px; animation: br-meter-bounce 0.61s ease-in-out 0.18s infinite alternate; }
.acoustic-voice-meter .b6 { height: 19px; animation: br-meter-bounce 0.55s ease-in-out 0.3s infinite alternate; }
.acoustic-voice-meter .b7 { height: 12px; animation: br-meter-bounce 0.68s ease-in-out 0.14s infinite alternate; }
.acoustic-voice-meter .b8 { height: 6px; animation: br-meter-bounce 0.44s ease-in-out 0.22s infinite alternate; }

.specialist-acoustic-stage[data-avatar-state="responding"] .acoustic-voice-meter .meter-bar {
  animation-duration: 0.35s !important;
  transform: scaleY(1.4);
}

/* Stage Typography & Metadata */
.acoustic-stage-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acoustic-dept-pill {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stage-accent, #b84d27);
  background: var(--stage-pill-bg, rgba(184, 77, 39, 0.09));
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.acoustic-hero-name {
  font: 700 clamp(30px, 4vw, 42px)/1.15 Manrope, system-ui, sans-serif;
  letter-spacing: -1.4px;
  color: #2b2017;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.acoustic-hero-name small {
  font-size: 0.58em;
  font-weight: 500;
  color: #876f5a;
  letter-spacing: -0.5px;
}

.acoustic-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: #796654;
  max-width: 520px;
  margin: 0 0 14px;
}

.acoustic-voice-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 252, 246, 0.95);
  border: 1px solid rgba(212, 196, 176, 0.7);
  color: #87694f;
  box-shadow: 0 2px 8px rgba(51, 41, 33, 0.04);
  margin-bottom: 24px;
}

.acoustic-voice-status .voice-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5da354;
  animation: br-beacon-pulse 1.8s infinite;
}

/* Interactive Topic Carousel */
.acoustic-starter-carousel {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  background: linear-gradient(155deg, rgba(255, 253, 249, 0.96) 0%, rgba(246, 238, 228, 0.92) 100%);
  border: 1px solid rgba(220, 204, 184, 0.85);
  border-radius: 26px;
  padding: 24px 28px;
  box-shadow: 0 20px 46px -12px rgba(60, 42, 28, 0.1), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-eyebrow {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a48265;
  display: block;
  margin-bottom: 12px;
}

.acoustic-starter-carousel .starter-question {
  font: 600 clamp(18px, 2.2vw, 23px)/1.35 Manrope, system-ui, sans-serif;
  letter-spacing: -0.6px;
  color: #30231a;
  margin: 0 0 20px;
  min-height: 58px;
  display: grid;
  place-items: center;
}

.acoustic-starter-carousel .starter-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.starter-btn-prev,
.starter-btn-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(212, 196, 176, 0.75);
  background: #ffffff;
  color: #6d5440;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.22s var(--br-spring);
  box-shadow: 0 2px 6px rgba(51, 41, 33, 0.04);
}

.starter-btn-prev:hover,
.starter-btn-next:hover {
  border-color: #b84d27;
  color: #b84d27;
  background: #fffdf9;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(184, 77, 39, 0.12);
}

.starter-try {
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(130deg, #cf7446 0%, #b34827 52%, #963619 100%);
  color: #ffffff;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px -4px rgba(175, 72, 40, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.22s var(--br-spring), box-shadow 0.22s var(--br-spring);
}

.starter-try:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 26px -4px rgba(175, 72, 40, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   9. Specialist Cards & Interactive Hover Spotlight
   -------------------------------------------------------------------------- */
.teammate-card,
.department-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 253, 249, 0.92) 0%, rgba(244, 237, 226, 0.86) 100%) !important;
  border: 1px solid rgba(218, 202, 182, 0.72) !important;
  border-radius: 22px !important;
  box-shadow: var(--br-shadow-ambient), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  transition: transform 0.36s var(--br-spring), box-shadow 0.36s var(--br-spring), border-color 0.3s ease !important;
  will-change: transform;
}

.teammate-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(188, 136, 94, 0.78) !important;
  box-shadow: var(--br-shadow-elevated), inset 0 1.5px 0 #ffffff !important;
}

.teammate-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    360px circle at var(--mx, 85%) var(--my, 15%),
    rgba(255, 255, 255, 0.65),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.teammate-card:hover::before { opacity: 1; }
.teammate-card > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   10. Pure GPU Keyframe Animations
   -------------------------------------------------------------------------- */
@keyframes br-voice-wave {
  0% { transform: scale(0.65); opacity: 0.8; }
  60% { opacity: 0.35; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes br-voice-speaking {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.85; filter: drop-shadow(0 0 6px var(--stage-accent, #b84d27)); }
}

@keyframes br-meter-bounce {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1.35); }
}

@keyframes br-companion-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@keyframes br-companion-shadow {
  0%, 100% { transform: scale(1); opacity: 0.16; }
  50% { transform: scale(0.85); opacity: 0.08; }
}

@keyframes br-aura-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.35; }
  50% { transform: scale(1.04); opacity: 0.6; }
}

@keyframes br-eye-blink {
  0%, 93%, 97%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

@keyframes br-companion-thinking {
  0% { transform: translateY(-2px) rotate(1.5deg); }
  100% { transform: translateY(-5px) rotate(-1.5deg); }
}

@keyframes br-companion-speaking {
  0% { transform: translateY(-2px); }
  100% { transform: translateY(-6px); }
}

@keyframes br-companion-hop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-12px) scale(1.05); }
  65% { transform: translateY(-3px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes br-bar-bounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.4); }
}

@keyframes br-spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes br-spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes br-scan-sweep {
  0% { transform: translateY(-8px); opacity: 0.3; }
  100% { transform: translateY(8px); opacity: 0.85; }
}

@keyframes br-twinkle {
  0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.15) rotate(180deg); opacity: 1; }
}

@keyframes br-antenna-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; filter: drop-shadow(0 0 4px #ffc375); }
}

@keyframes br-arm-wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(18deg); }
  50% { transform: rotate(-6deg); }
  75% { transform: rotate(14deg); }
}

@keyframes br-laser-sweep {
  0% { transform: translateY(-16px); opacity: 0.3; }
  100% { transform: translateY(16px); opacity: 0.95; }
}

@keyframes br-pendulum-swing {
  0% { transform: rotate(-18deg); }
  100% { transform: rotate(18deg); }
}

@keyframes br-broadcast-pulse {
  0% { transform: scale(0.85); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.95; }
  100% { transform: scale(0.85); opacity: 0.4; }
}

@keyframes br-needle-sweep {
  0% { transform: rotate(-24deg); }
  100% { transform: rotate(24deg); }
}

@keyframes br-scanner-sweep {
  0% { transform: translateY(-14px); opacity: 0.3; }
  100% { transform: translateY(14px); opacity: 0.85; }
}

@keyframes br-beacon-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; filter: drop-shadow(0 0 6px #ffbe54); }
}

@keyframes br-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes br-hero-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.45; }
  50% { transform: scale(1.04); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .comp-floating-body,
  .comp-shadow,
  .comp-aura,
  .comp-eyes-normal,
  .hero-dog-stage,
  .hero-dog-gyro,
  .comp-waving-arm,
  .comp-gear-spin,
  .voice-ripple,
  .acoustic-voice-meter .meter-bar {
    animation: none !important;
    transform: none !important;
  }
}