:root {
  --stagent-launcher-size: 56px;
  --stagent-launcher-size-tablet: 52px;
  --stagent-launcher-size-mobile: 48px;
  --stagent-launcher-offset-bottom: 24px;
  --stagent-launcher-offset-right: 24px;
  --stagent-modal-max-width: 480px;
  --stagent-modal-max-width-tablet: 420px;
  --stagent-modal-max-width-mobile: 360px;
  --stagent-modal-max-height: 90vh;
  --stagent-modal-max-height-tablet: 88vh;
  --stagent-modal-max-height-mobile: 85vh;
  --stagent-modal-border-radius: 12px;
  --stagent-launcher-bg-color: #6366f1;
  --stagent-launcher-fg-color: #ffffff;
  --stagent-launcher-border-color: #6366f1;
  --stagent-launcher-border-width: 0px;
  --stagent-launcher-border-radius: 999px;
  --stagent-launcher-size-current: var(--stagent-launcher-size);
  --stagent-modal-max-width-current: var(--stagent-modal-max-width);
  --stagent-modal-max-height-current: var(--stagent-modal-max-height);
}

@media (max-width: 1023px) {
  :root {
    --stagent-launcher-size-current: var(--stagent-launcher-size-tablet);
    --stagent-modal-max-width-current: var(--stagent-modal-max-width-tablet);
    --stagent-modal-max-height-current: var(--stagent-modal-max-height-tablet);
  }
}

@media (max-width: 767px) {
  :root {
    --stagent-launcher-size-current: var(--stagent-launcher-size-mobile);
    --stagent-modal-max-width-current: var(--stagent-modal-max-width-mobile);
    --stagent-modal-max-height-current: var(--stagent-modal-max-height-mobile);
  }
}

/* Verified 2026-05-21 against Stagent App.vue source map selectors.
 * The widget renders as a custom element with shadow DOM, so these
 * fallback selectors only apply if shadowRoot is disabled upstream.
 */
#stagent-widget stagent-widget > div > button[type="button"] {
  width: var(--stagent-launcher-size-current);
  height: var(--stagent-launcher-size-current);
  min-width: var(--stagent-launcher-size-current);
  min-height: var(--stagent-launcher-size-current);
  gap: calc(var(--stagent-launcher-size-current) * 0.2);
  padding-inline: 0;
  margin: var(--stagent-launcher-offset-bottom) var(--stagent-launcher-offset-right);
  border: var(--stagent-launcher-border-width) solid var(--stagent-launcher-border-color);
  border-radius: var(--stagent-launcher-border-radius);
  background: var(--stagent-launcher-bg-color);
  color: var(--stagent-launcher-fg-color);
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-has-text {
  width: auto;
  min-width: var(--stagent-launcher-size-current);
  padding-inline: calc(var(--stagent-launcher-size-current) * 0.35);
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-logo-right {
  flex-direction: row-reverse;
}

#stagent-widget stagent-widget > div > button[type="button"] svg {
  width: calc(var(--stagent-launcher-size-current) * 0.5);
  height: calc(var(--stagent-launcher-size-current) * 0.5);
  flex-shrink: 0;
  color: var(--stagent-launcher-fg-color);
}

#stagent-widget stagent-widget > div > button[type="button"] .stagent-widget-launcher-text {
  font-size: calc(var(--stagent-launcher-size-current) * 0.3);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-click-pulse,
#stagent-widget stagent-widget > div > button[type="button"].stagent-idle-pulse {
  animation: stagentPulse 700ms ease;
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-click-bounce {
  animation: stagentBounce 700ms ease;
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-click-spin {
  animation: stagentSpin 700ms ease;
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-idle-float {
  animation: stagentFloat 1000ms ease;
}

#stagent-widget stagent-widget > div > button[type="button"].stagent-idle-shake {
  animation: stagentShake 700ms ease;
}

@keyframes stagentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes stagentBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(0); }
}

@keyframes stagentSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes stagentFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes stagentShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#stagent-widget stagent-widget > div > div.absolute.bottom-20.right-4 {
  right: var(--stagent-launcher-offset-right);
  bottom: calc(var(--stagent-launcher-offset-bottom) + var(--stagent-launcher-size-current) + 8px);
  width: var(--stagent-modal-max-width-current);
  max-width: min(var(--stagent-modal-max-width-current), calc(100vw - 2rem));
  max-height: var(--stagent-modal-max-height-current);
  border-radius: var(--stagent-modal-border-radius);
}