:root {
  --jobsie-live-green-a: rgba(34, 197, 94, 0.96);
  --jobsie-live-green-b: rgba(21, 128, 61, 0.98);
  --jobsie-live-red-a: rgba(239, 68, 68, 0.96);
  --jobsie-live-red-b: rgba(185, 28, 28, 0.98);
  --jobsie-live-blue-a: rgba(12, 23, 45, 0.82);
  --jobsie-live-blue-b: rgba(6, 13, 27, 0.88);
  --jobsie-live-line: rgba(125, 211, 252, 0.22);
  --jobsie-live-ink: #e2e8f0;
}

.jobsie-live-layer,
.jobsie-live-layer * {
  box-sizing: border-box;
}

.jobsie-live-layer {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 9999;
  width: 68px;
  height: 68px;
  pointer-events: none;
}

.jobsie-live-power,
.jobsie-live-bubble {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
}

.jobsie-live-power {
  position: absolute;
  right: calc(100% + 26px);
  top: calc(50% + 16px);
  width: 34px;
  height: 34px;
  border: 1px solid rgba(187, 247, 208, 0.42);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(180deg, var(--jobsie-live-green-a), var(--jobsie-live-green-b));
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(21, 128, 61, 0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(10px) scale(0.92);
  transition:
    transform 240ms cubic-bezier(.22, .9, .24, 1),
    border-color 200ms ease,
    box-shadow 220ms ease,
    opacity 180ms ease,
    background 220ms ease;
}

.jobsie-live-power::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  display: block;
}

.jobsie-live-power::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 2px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.jobsie-live-power:hover,
.jobsie-live-power:focus-visible {
  transform: translateY(-50%) translateX(0) scale(1.1);
  border-color: rgba(220, 252, 231, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 28px rgba(21, 128, 61, 0.28);
  outline: none;
}

.jobsie-live-layer:hover .jobsie-live-power,
.jobsie-live-layer.is-listening .jobsie-live-power,
.jobsie-live-layer.is-off .jobsie-live-power {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) scale(1);
}

.jobsie-live-layer.is-listening .jobsie-live-power {
  animation: jobsie-live-power-float 2.2s ease-in-out infinite, jobsie-live-power-glow-on 1.8s ease-in-out infinite;
}

.jobsie-live-layer.is-off .jobsie-live-power {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(180deg, var(--jobsie-live-red-a), var(--jobsie-live-red-b));
  border-color: rgba(254, 202, 202, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(127, 29, 29, 0.22);
  animation: jobsie-live-power-float 2.5s ease-in-out infinite, jobsie-live-power-glow-off 2s ease-in-out infinite;
}

.jobsie-live-bubble {
  position: relative;
  right: auto;
  bottom: auto;
  width: 68px;
  height: 68px;
  border: 1px solid var(--jobsie-live-line);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, var(--jobsie-live-blue-a), var(--jobsie-live-blue-b));
  color: #eff6ff;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.22);
  cursor: grab;
  overflow: visible;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.jobsie-live-bubble.is-idle {
  animation: jobsie-live-float 2.8s ease-in-out infinite;
}

.jobsie-live-bubble.is-sleeping {
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
  filter: saturate(0.9);
}

.jobsie-live-layer.is-dragging .jobsie-live-bubble {
  animation: none !important;
  border-color: rgba(125, 211, 252, 0.34);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
  cursor: grabbing;
  transform: scale(1.04);
}

.jobsie-live-bubble::before,
.jobsie-live-bubble::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  border: 2px solid rgba(125, 211, 252, 0.58);
  opacity: 0;
  transform: scale(0.84);
  pointer-events: none;
}

.jobsie-live-bubble::before {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.24), rgba(59, 130, 246, 0.16) 46%, transparent 70%);
  filter: blur(12px);
  border: 0;
}

.jobsie-live-bubble::after {
  inset: -22px;
  border-color: rgba(168, 85, 247, 0.54);
}

.jobsie-live-bubble.is-speaking::before,
.jobsie-live-bubble.is-speaking::after {
  animation: jobsie-live-wave 1.15s ease-out infinite;
  opacity: 1;
}

.jobsie-live-bubble.is-speaking::after {
  animation-delay: 0.2s;
}

.jobsie-live-bubble.is-listening {
  border-color: rgba(34, 197, 94, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(21, 128, 61, 0.18);
}

.jobsie-live-rings {
  position: absolute;
  inset: -38px;
  pointer-events: none;
}

.jobsie-live-rings span {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(96, 165, 250, 0.42);
  border-radius: 999px;
  box-shadow:
    0 0 24px rgba(56, 189, 248, 0.28),
    inset 0 0 12px rgba(96, 165, 250, 0.12);
  opacity: 0;
  transform: scale(0.62);
}

.jobsie-live-rings span:nth-child(2) { border-color: rgba(168, 85, 247, 0.44); }
.jobsie-live-rings span:nth-child(3) { border-color: rgba(244, 114, 182, 0.44); }
.jobsie-live-rings span:nth-child(4) { border-color: rgba(34, 197, 94, 0.42); }
.jobsie-live-rings span:nth-child(5) { border-color: rgba(250, 204, 21, 0.42); }
.jobsie-live-rings span:nth-child(6) { border-color: rgba(59, 130, 246, 0.44); }

.jobsie-live-bubble.is-speaking .jobsie-live-rings span {
  animation: jobsie-live-wave-soft 1.45s ease-out infinite;
  opacity: 1;
}

.jobsie-live-bubble.is-speaking .jobsie-live-rings span:nth-child(2) { animation-delay: 0.16s; }
.jobsie-live-bubble.is-speaking .jobsie-live-rings span:nth-child(3) { animation-delay: 0.32s; }
.jobsie-live-bubble.is-speaking .jobsie-live-rings span:nth-child(4) { animation-delay: 0.48s; }
.jobsie-live-bubble.is-speaking .jobsie-live-rings span:nth-child(5) { animation-delay: 0.64s; }
.jobsie-live-bubble.is-speaking .jobsie-live-rings span:nth-child(6) { animation-delay: 0.80s; }

.jobsie-live-orbit {
  position: absolute;
  inset: -26px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      rgba(125, 211, 252, 0) 0deg,
      rgba(59, 130, 246, 0) 34deg,
      rgba(125, 211, 252, 0.8) 76deg,
      rgba(168, 85, 247, 0.18) 122deg,
      rgba(244, 114, 182, 0.62) 164deg,
      rgba(34, 197, 94, 0) 214deg,
      rgba(250, 204, 21, 0.68) 266deg,
      rgba(59, 130, 246, 0.56) 322deg,
      rgba(125, 211, 252, 0) 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 59%, black 68%, transparent 76%);
  mask: radial-gradient(circle, transparent 59%, black 68%, transparent 76%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

.jobsie-live-bubble.is-speaking .jobsie-live-orbit {
  animation: jobsie-live-orbit 1.9s linear infinite;
  opacity: 1;
}

.jobsie-live-sparkles {
  position: absolute;
  inset: -26px;
  opacity: 0;
  pointer-events: none;
}

.jobsie-live-sparkles span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(125, 211, 252, 0.64) 52%, transparent 74%);
  box-shadow: 0 0 20px rgba(125, 211, 252, 0.48);
  transform: scale(0.6);
}

.jobsie-live-sparkles span:nth-child(2) {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(244, 114, 182, 0.66) 52%, transparent 74%);
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.42);
}

.jobsie-live-sparkles span:nth-child(3) {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(250, 204, 21, 0.66) 52%, transparent 74%);
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.38);
}

.jobsie-live-sparkles span:nth-child(4) {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98), rgba(168, 85, 247, 0.66) 52%, transparent 74%);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.jobsie-live-sparkles span:nth-child(1) { top: 8px; left: 18px; }
.jobsie-live-sparkles span:nth-child(2) { top: 18px; right: 10px; }
.jobsie-live-sparkles span:nth-child(3) { bottom: 14px; left: 10px; }
.jobsie-live-sparkles span:nth-child(4) { right: 20px; bottom: 8px; }

.jobsie-live-bubble.is-speaking .jobsie-live-sparkles {
  opacity: 1;
}

.jobsie-live-bubble.is-speaking .jobsie-live-sparkles span:nth-child(1) { animation: jobsie-live-sparkle 1.15s ease-in-out infinite; }
.jobsie-live-bubble.is-speaking .jobsie-live-sparkles span:nth-child(2) { animation: jobsie-live-sparkle 1.15s ease-in-out infinite 0.18s; }
.jobsie-live-bubble.is-speaking .jobsie-live-sparkles span:nth-child(3) { animation: jobsie-live-sparkle 1.15s ease-in-out infinite 0.36s; }
.jobsie-live-bubble.is-speaking .jobsie-live-sparkles span:nth-child(4) { animation: jobsie-live-sparkle 1.15s ease-in-out infinite 0.54s; }

.jobsie-live-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: transparent;
}

.jobsie-live-bubble:not(.has-avatar) .jobsie-live-avatar {
  display: none;
}

.jobsie-live-fallback {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb 55%, #0f172a 100%);
  color: #eff6ff;
  font: 700 24px/1 "Segoe UI", system-ui, sans-serif;
}

.jobsie-live-bubble.has-avatar .jobsie-live-fallback {
  display: none;
}

.jobsie-live-bubble.is-speaking .jobsie-live-avatar,
.jobsie-live-bubble.is-speaking .jobsie-live-fallback {
  animation: jobsie-live-bob 0.92s ease-in-out infinite;
  filter:
    drop-shadow(0 0 10px rgba(125, 211, 252, 0.34))
    drop-shadow(0 0 18px rgba(168, 85, 247, 0.24))
    drop-shadow(0 0 26px rgba(244, 114, 182, 0.18))
    saturate(1.12)
    contrast(1.03);
}

.jobsie-live-bars {
  position: absolute;
  inset: auto 50% -12px auto;
  display: flex;
  gap: 5px;
  padding: 9px 12px;
  border: 1px solid rgba(125, 211, 252, 0.18);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(5, 13, 25, 0.86), rgba(8, 15, 31, 0.94));
  box-shadow:
    0 0 22px rgba(168, 85, 247, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%);
  transition: opacity 180ms ease;
}

.jobsie-live-bubble.is-speaking .jobsie-live-bars,
.jobsie-live-bubble.is-listening .jobsie-live-bars {
  opacity: 1;
}

.jobsie-live-bars span {
  width: 4px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e0f2fe, #7dd3fc 38%, #2563eb 100%);
  box-shadow: 0 0 10px rgba(125, 211, 252, 0.22);
  transform-origin: center bottom;
  animation: jobsie-live-eq 0.78s ease-in-out infinite;
}

.jobsie-live-bars span:nth-child(2) {
  background: linear-gradient(180deg, #f3e8ff, #c084fc 38%, #7c3aed 100%);
  animation-delay: 0.18s;
}

.jobsie-live-bars span:nth-child(3) {
  background: linear-gradient(180deg, #ffe4f1, #fb7185 38%, #db2777 100%);
  animation-delay: 0.36s;
}

.jobsie-live-bars span:nth-child(4) {
  background: linear-gradient(180deg, #fef9c3, #facc15 38%, #d97706 100%);
  animation-delay: 0.54s;
}

.jobsie-live-status {
  position: absolute;
  right: calc(100% + 74px);
  top: 50%;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(8, 15, 31, 0.92);
  color: var(--jobsie-live-ink);
  white-space: nowrap;
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.jobsie-live-bubble:hover .jobsie-live-status,
.jobsie-live-bubble.is-awake:hover .jobsie-live-status,
.jobsie-live-bubble.is-listening .jobsie-live-status,
.jobsie-live-bubble.is-speaking .jobsie-live-status,
.jobsie-live-bubble.is-state-idle.is-awake .jobsie-live-status,
.jobsie-live-bubble.is-state-sending .jobsie-live-status,
.jobsie-live-bubble.is-state-thinking .jobsie-live-status,
.jobsie-live-bubble.is-state-speaking .jobsie-live-status,
.jobsie-live-bubble.is-state-interrupted .jobsie-live-status,
.jobsie-live-bubble.is-state-reconnecting .jobsie-live-status,
.jobsie-live-bubble.is-state-error .jobsie-live-status {
  opacity: 1;
}

.jobsie-live-bubble.is-state-error .jobsie-live-status {
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
}

.jobsie-live-bubble.is-state-reconnecting .jobsie-live-status,
.jobsie-live-bubble.is-state-interrupted .jobsie-live-status {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
}

@keyframes jobsie-live-wave {
  0% { transform: scale(0.84); opacity: 0.55; }
  100% { transform: scale(1.42); opacity: 0; }
}

@keyframes jobsie-live-wave-soft {
  0% { transform: scale(0.62); opacity: 0.34; }
  100% { transform: scale(1.74); opacity: 0; }
}

@keyframes jobsie-live-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes jobsie-live-bob {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.04) translateY(-1px); }
}

@keyframes jobsie-live-orbit {
  0% { transform: scale(0.92) rotate(0deg); }
  100% { transform: scale(1.04) rotate(360deg); }
}

@keyframes jobsie-live-sparkle {
  0%, 100% { transform: scale(0.55); opacity: 0.35; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes jobsie-live-eq {
  0%, 100% { transform: scaleY(0.45); }
  35% { transform: scaleY(1.95); }
  68% { transform: scaleY(0.9); }
}

@keyframes jobsie-live-power-float {
  0%, 100% { transform: translateY(-50%) translateX(0) scale(1); }
  50% { transform: translateY(calc(-50% - 2px)) translateX(-1px) scale(1.03); }
}

@keyframes jobsie-live-power-glow-on {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 14px 30px rgba(21, 128, 61, 0.24),
      0 0 0 0 rgba(34, 197, 94, 0.16);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 16px 34px rgba(21, 128, 61, 0.3),
      0 0 0 8px rgba(34, 197, 94, 0.05);
  }
}

@keyframes jobsie-live-power-glow-off {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 10px 22px rgba(127, 29, 29, 0.22),
      0 0 0 0 rgba(239, 68, 68, 0.14);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 13px 28px rgba(127, 29, 29, 0.28),
      0 0 0 8px rgba(239, 68, 68, 0.05);
  }
}

@media (max-width: 640px) {
  .jobsie-live-layer {
    right: 14px;
    bottom: 14px;
  }

  .jobsie-live-status {
    display: none;
  }
}