.MarketingAgentButton-marketingAgentPopover-idbf2 {
  width: 314px;
}

.MarketingAgentButton-popoverAnchor-ze_6D {
  position: absolute;
  bottom: 16px;
  left: 6px;
}

.MarketingAgentButton-actions-fcdmN {
  position: relative;
}

.MarketingAgentButton-gotItButton-vt_C2 {
  border-color: var(--color-border-primary-inverse-base) !important;
}

/**
 * MarketingAgentButton - Custom button styling for marketing agent interfaces
 * Overrides secondary button styles with marketing agent specific design tokens
 * The component is designed to have smooth transitions for all interactive states
 * It uses shared highlight styles for the glowing state and overrides
 * the default background and text colors for the marketing agent button
 * Background gradients aren't animatable so we use the pseudo-elements to create a smooth transition
 */

/* Define animatable angle properties for smooth gradient rotation */
@property --gradient-angle-border {
  syntax: '<angle>';
  initial-value: 75deg;
  inherits: false;
}

/* Keyframe animation for rotating border gradient with exact timing segments */
@keyframes MarketingAgentButton-rotateBorderGradient-uvfuB {
  0% {
    --gradient-angle-border: 75deg; /* Start slow */
  }
  50% {
    --gradient-angle-border: 105deg; /* End slow phase */
  }
  65% {
    --gradient-angle-border: 255deg; /* End slow phase (15% duration) */
  }
  75% {
    --gradient-angle-border: 285deg; /* End slow phase (15% duration) */
  }
  100% {
    --gradient-angle-border: 435deg; /* End speed phase (35% duration) */
  }
}

button.MarketingAgentButton-marketingAgentButton-H6YJo {
  /* ============================================
   * DEFAULT STATE STYLES
   * ============================================ */

  /* Border and border radius */
  border-radius: 24px;
  border: 1px solid var(--color-border-secondary-base);

  /* Background (inherit from secondary variant) */
  background: inherit;

  /* Ensure button maintains structure for transitions */
  position: relative;
  overflow: hidden;

  /* Smooth transitions for all interactive states */
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;

  /* ============================================
   * TEXT STYLES (DEFAULT STATE)
   * ============================================ */

  /* Override text color and typography for default state */
  color: var(--color-typography-secondary-base);
  font-family: var(--typography-UI2-font-family);
  font-size: var(--typography-UI2-font-size);
  font-weight: var(--typography-UI2-emphasis-font-weight);
  line-height: var(--typography-UI2-line-height);
}

/* Ensure text content stays above pseudo-elements */

button.MarketingAgentButton-marketingAgentButton-H6YJo > * {
    position: relative;
    z-index: 10;
  }

/* Create overlay layers for smooth background transitions */

button.MarketingAgentButton-marketingAgentButton-H6YJo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fcfaff;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 1;
    padding: 1.5px;
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f0ff;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 2;
  }

/* ============================================
   * HOVER STATE STYLES
   * ============================================ */

button.MarketingAgentButton-marketingAgentButton-H6YJo:hover {
    /* Border changes */
    border: 1px solid var(--color-border-intelligence-subtle-focused);
    box-shadow: 0 4px 6px 0 rgba(210, 85, 147, 0.06),
      0 10px 18px 0 rgba(210, 85, 147, 0.06),
      0 18px 56px 0 rgba(210, 85, 147, 0.08);

    /* Text color change for hover state */
    color: var(--typography-intelligence-subtle-base, #4620b6);
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo:hover::before {
    opacity: 1;
  }

/* ============================================
   * FOCUS STATE STYLES
   * ============================================ */

button.MarketingAgentButton-marketingAgentButton-H6YJo:focus-visible {
    /* Maintain hover styles for focus state */
    border: 1px solid var(--color-border-intelligence-subtle-focused);
    box-shadow: 0 4px 6px 0 rgba(210, 85, 147, 0.06),
      0 10px 18px 0 rgba(210, 85, 147, 0.06),
      0 18px 56px 0 rgba(210, 85, 147, 0.08);
    color: var(--typography-intelligence-subtle-base, #4620b6);
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo:focus-visible::before {
    opacity: 1;
  }

/* ============================================
   * ACTIVE/PRESSED STATE STYLES
   * ============================================ */

button.MarketingAgentButton-marketingAgentButton-H6YJo:active {
    border: 1px solid var(--color-border-intelligence-subtle-focused);
    box-shadow: 0 2px 4px 0 rgba(210, 85, 147, 0.08),
      0 6px 12px 0 rgba(210, 85, 147, 0.08),
      0 12px 32px 0 rgba(210, 85, 147, 0.12);
    color: var(--typography-intelligence-subtle-base, #4620b6);
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo:active::after {
    opacity: 1;
  }

/* ============================================
 * SELECTED STATE STYLES
 * ============================================ */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-selected-CZdjz {
  /* Selected state overrides */
  border: 1px solid var(--color-border-secondary-base);
  background: #ebe4ff;
  color: var(--color-typography-primary-base);
  font-family: var(--typography-UI2-font-family);
  font-size: var(--typography-UI2-font-size);
  line-height: var(--typography-UI2-line-height);
}

/* Override pseudo-elements for selected state */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-selected-CZdjz::before,
  button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-selected-CZdjz::after {
    opacity: 0;
  }

/* Override hover state when selected */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-selected-CZdjz:hover {
    border: 1px solid var(--color-border-secondary-base);
    color: var(--color-typography-primary-base);
    /* Remove box-shadow for selected state */
    box-shadow: none;
  }

/* Override focus state when selected */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-selected-CZdjz:focus-visible {
    border: 1px solid var(--color-border-secondary-base);
    color: var(--color-typography-primary-base);
    box-shadow: none;
  }

/* Override active state when selected */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-selected-CZdjz:active {
    border: 1px solid var(--color-border-secondary-base);
    color: var(--color-typography-primary-base);
    box-shadow: none;
  }

/* ============================================
 * HOVERED STATE STYLES
 * ============================================ */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-hovered-srXuo {
  /* Apply hover state styles programmatically */
  border: 1px solid var(--color-border-intelligence-subtle-focused);
  box-shadow: 0 4px 6px 0 rgba(210, 85, 147, 0.06),
    0 10px 18px 0 rgba(210, 85, 147, 0.06),
    0 18px 56px 0 rgba(210, 85, 147, 0.08);
  color: var(--typography-intelligence-subtle-base, #4620b6);
}

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-hovered-srXuo::before {
  opacity: 1;
}

/* ============================================
 * GLOWING STATE STYLES
 * ============================================ */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP {
  /* Glowing state overrides - keep original background, no animated background */
  background: #fcfaff !important;
  border: none; /* Remove border to not conflict with highlighted border */

  /* Bright glow box-shadow */
  box-shadow: 0 4px 6px 0 rgba(210, 85, 147, 0.06),
    0 10px 18px 0 rgba(210, 85, 147, 0.06),
    0 18px 56px 0 rgba(210, 85, 147, 0.08);

  /* Text styling for glowing state */
  color: var(--typography-intelligence-subtle-base, #4620b6);
  font-family: var(--typography-UI2-font-family);
  font-size: var(--typography-UI2-font-size);
  font-weight: var(--typography-UI2-emphasis-font-weight);
  line-height: var(--typography-UI2-line-height);
}

/* Override pseudo-elements for glowing state */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP::before {
    /* Custom rotating border gradient */
    background: conic-gradient(
      from var(--gradient-angle-border, 0deg),
      rgba(233, 116, 81, 0),
      rgba(233, 116, 81, 0.8),
      rgba(210, 85, 147, 0.8),
      rgba(196, 163, 246, 0.8),
      rgba(196, 163, 246, 0.8),
      rgba(196, 163, 246, 0.8),
      rgba(196, 163, 246, 0.8),
      rgba(210, 85, 147, 0.8),
      rgba(233, 116, 81, 0.8),
      rgba(233, 116, 81, 0)
    );
    animation: MarketingAgentButton-rotateBorderGradient-uvfuB 4s linear infinite !important;
    padding: 1.5px;
    opacity: 1; /* Always visible for glowing effect */
    z-index: 1;
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP::after {
    /* Keep active state pseudo-element but make it invisible */
    opacity: 0;
    z-index: 2;
  }

/* Override hover state when highlighted */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP:hover {
    background: #fcfaff;
    border: none;
    box-shadow: 0 4px 6px 0 rgba(210, 85, 147, 0.06),
      0 10px 18px 0 rgba(210, 85, 147, 0.06),
      0 18px 56px 0 rgba(210, 85, 147, 0.08);
    color: var(--typography-intelligence-subtle-base, #4620b6);
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP:hover::before {
    opacity: 1; /* Maintain glowing effect on hover */
  }

/* Override focus state when highlighted */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP:focus-visible {
    background: #fcfaff;
    border: none;
    box-shadow: 0 4px 6px 0 rgba(210, 85, 147, 0.06),
      0 10px 18px 0 rgba(210, 85, 147, 0.06),
      0 18px 56px 0 rgba(210, 85, 147, 0.08);
    color: var(--typography-intelligence-subtle-base, #4620b6);
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP:focus-visible::before {
    opacity: 1; /* Maintain glowing effect on focus */
  }

/* Override active state when highlighted */

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP:active {
    background: #f5f0ff;
    border: none;
    box-shadow: 0 2px 4px 0 rgba(210, 85, 147, 0.08),
      0 6px 12px 0 rgba(210, 85, 147, 0.08),
      0 12px 32px 0 rgba(210, 85, 147, 0.12);
    color: var(--typography-intelligence-subtle-base, #4620b6);
  }

button.MarketingAgentButton-marketingAgentButton-H6YJo.MarketingAgentButton-highlighted-kWmsP:active::after {
    opacity: 1; /* Show pressed state overlay */
  }

/* Marketing Agent Educational Popover Styles */
.EducationalPopover-marketingAgentPopover-FDte8 {
  /* Base styles for the marketing agent variant */
  --ma-popover-bg: rgba(255, 255, 255, 0.95);
  --ma-popover-border: rgba(0, 0, 0, 0.1);
  --ma-popover-text: #1a1a1a;
  --ma-popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --ma-popover-accent: #3b82f6;
  --ma-popover-accent-light: rgba(59, 130, 246, 0.1);

  background: var(--ma-popover-bg);
  border: 1px solid var(--ma-popover-border);
  box-shadow: var(--ma-popover-shadow);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

/* Blueprint variant - gradient theme */
.EducationalPopover-blueprint-ZnflS {
  --ma-popover-bg: linear-gradient(90.8deg, #f96353 0%, #eb6fb7 100%);
  --ma-popover-accent: #f96353;
  --ma-popover-accent-light: rgba(249, 99, 83, 0.1);
  --ma-popover-text: var(--color-text-secondary-inverse);
}

.EducationalPopover-marketingAgentPopover-FDte8 [class*='EducationalPopover-target']::before {
  border-color: var(--ma-popover-accent);
}

.EducationalPopover-marketingAgentPopover-FDte8 [class*='EducationalPopover-innerTarget'] {
  background: var(--ma-popover-bg);
  border: 2px solid white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.EducationalPopover-marketingAgentPopover-FDte8 [class*='EducationalPopover-content'] {
  color: var(--ma-popover-text);
}

.EducationalPopover-marketingAgentPopover-FDte8 [class*='EducationalPopover-header'] {
  padding-bottom: 0.5rem;
}

.NotificationsLoader-panel-szFNH {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.NotificationsLoader-notification-SBBah {
  padding: var(--unit-space-100) 0px;
}

.NotificationsLoader-badgeContainer-qzJjs {
  float: left;
  width: var(--unit-space-50);
  padding: var(--unit-space-50) 0px 0px var(--unit-space-75);
}

.NotificationsLoader-text-UUdps {
  padding-left: 1.75rem;
}

/* Need some magic numbers here to space the text loaders as if they had line height */
.NotificationsLoader-heading-V6Uk6 {
  margin-top: var(--unit-space-25);
}

.NotificationsLoader-description-NjvKm {
  margin: 7px 0px 6px;
}

.NotificationsLoader-date-tXimA {
  margin-bottom: 3px;
}