/* Shared AI action marker. Button colors and shapes still come from the selected theme. */
:root {
  --ai-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m10 3 2.2 6.8L19 12l-6.8 2.2L10 21l-2.2-6.8L1 12l6.8-2.2L10 3ZM19 2l.9 2.6 2.6.9-2.6.9L19 9l-.9-2.6-2.6-.9 2.6-.9L19 2Z' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-style][data-theme] button[data-ai-action]:not([hidden]):not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
:root[data-style][data-theme] button[data-ai-action][hidden] { display: none !important; }
/* Only dashboard actions use compact geometry; admin actions follow their toolbar sizing.
   Keep the surface scope neutral so dashboard toolbar height overrides still win. */
:root[data-style][data-theme]:where([data-dashboard-surface="web"]) button[data-ai-action]:not([data-ai-icon="info"]) {
  --ai-action-height: 26px;
  --control-height: var(--ai-action-height);
  --action-btn-height: var(--ai-action-height);
  --ent-control-height: var(--ai-action-height);
  box-sizing: border-box;
  height: var(--ai-action-height);
  min-height: var(--ai-action-height);
  min-width: 0;
  padding: 0 7px;
  font-size: 12px;
  line-height: 16px;
}
:root[data-style][data-theme]:where([data-dashboard-surface="web"]) button[data-ai-action="icon"]:not([data-ai-icon="info"]) {
  width: var(--ai-action-height);
  min-width: var(--ai-action-height);
  padding: 0;
}
:root[data-style][data-theme] button[data-ai-action]::before {
  content: "";
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: currentColor;
  mask: var(--ai-action-icon) center / contain no-repeat;
  pointer-events: none;
}
/* The compact overview entry keeps its familiar information glyph. */
:root[data-style][data-theme] button[data-ai-action][data-ai-icon="info"]::before {
  content: "i";
  flex: 0 0 auto;
  width: auto;
  height: auto;
  background: none;
  mask: none;
  font: 900 clamp(12px, .95vw, 14px) / 1 Arial, Helvetica, sans-serif;
  transform: translateY(-0.5px);
}
:root[data-style][data-theme] button[data-ai-action="icon"][aria-busy="true"]::before {
  animation: aiActionPulse 1.2s ease-in-out infinite;
}
@keyframes aiActionPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-style][data-theme] button[data-ai-action="icon"][aria-busy="true"]::before { animation: none; }
}