/* Canvas Action Chip Styling
 * Appears below assistant messages when canvas opportunities are detected.
 */

.message-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.canvas-action-button {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: none !important;
    font-weight: 500;
}

.canvas-action-button:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.2);
}

.canvas-action-button .mud-button-icon-start {
    margin-right: 6px;
}

/* Dark mode support */
.mud-theme-dark .canvas-action-button {
    border-color: var(--mud-palette-primary);
}

.mud-theme-dark .canvas-action-button:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* Responsive: smaller buttons on mobile */
@media (max-width: 600px) {
    .canvas-action-button {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .canvas-action-button .mud-button-icon-start {
        font-size: 1rem;
    }
}