/* AI Button Styling - Minimal and visible */
div[id*="ai-button"] {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 100 !important;
  cursor: pointer !important;
  background-color: var(--background-white) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition-standard) !important;
  border: 1px solid var(--border-color) !important;
}

div[id*="ai-button"]:hover {
  background-color: var(--background-muted) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: scale(1.05);
}

div[id*="ai-button"]:active {
  transform: scale(0.95);
}

div[id*="ai-button"] span {
  font-size: 16px !important;
  cursor: pointer !important;
  display: inline-block !important;
  line-height: 1 !important;
  color: var(--text-dark) !important;
}

/* Ensure AI button is visible on all chart backgrounds */
.js-plotly-plot ~ div[id*="ai-button"],
.dcc.Graph ~ div[id*="ai-button"] {
  background-color: var(--background-white) !important;
  border: 1px solid var(--border-strong) !important;
}