/* Minimal, unified styling focused on action buttons.
   Follow Chainlit guidance: keep colors in theme.json (HSL), use minimal overrides. */

/* Primary action buttons: bright and clear on dark backgrounds */
[data-testid="action-button"],
.chainlit-button-primary {
    background: hsl(0 0% 100%) !important; /* white for strong contrast */
    color: hsl(var(--primary)) !important; /* ensure visible on white in dark mode */
    border: 1px solid hsl(var(--primary)) !important;
    border-radius: var(--radius);
    padding: 0.5rem 0.875rem;
    font-weight: 500;
    box-shadow: 0 2px 6px hsl(var(--foreground) / 0.15);
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

[data-testid="action-button"]:hover,
.chainlit-button-primary:hover {
    background: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px hsl(var(--primary) / 0.30);
}

[data-testid="action-button"]:focus-visible,
.chainlit-button-primary:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Secondary buttons: outlined for clear hierarchy */
.chainlit-button-secondary {
    background: transparent !important;
    color: hsl(var(--primary)) !important;
    border: 1px solid hsl(var(--primary)) !important;
}

.chainlit-button-secondary:hover {
    background: hsl(var(--accent)) !important;
}

/* Ensure the top header Readme/User Guide tab text is visible in dark mode */
[data-testid="header-readme-button"],
[aria-label~="Readme"],
[aria-label~="User"],[aria-label~="Guide"] {
    color: hsl(var(--primary-foreground)) !important;
    font-weight: 500;
}
[data-testid="header-readme-button"] span {
    color: inherit !important;
}