/* Custom CSS for Chainlit Career Assessment App */

/* Target all action button containers in steps */
.step:has([data-testid]) > div > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    width: 100% !important;
}

/* Target button containers more directly */
div[class*="MuiBox"] > button[role="button"] {
    margin-bottom: 12px !important;
}

/* Make buttons full width with proper spacing */
.step button[role="button"] {
    width: 100% !important;
    max-width: 600px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin: 6px 0 !important;
    display: block !important;
}

/* Ensure buttons don't display inline */
.step > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Make System author messages lighter/subtle for toast-like messages */
[data-author="System"] {
    color: #999 !important;
    font-style: italic !important;
    opacity: 0.8 !important;
}