/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Enhanced Error Messages Styles
 * Clear, actionable error messages based on bot feedback
 */

/* Error container */
.error-container,
.message-container {
    position: fixed;
    top: calc(var(--spacing-lg) * 1.25);
    right: calc(var(--spacing-lg) * 1.25);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 400px;
    pointer-events: none;

.error-container > *,
.message-container > * {
    pointer-events: all;

/* Enhanced error message */
.enhanced-error-message {
    background: var(--color-bg-primary, #1a1a1a);
    border: 2px solid var(--color-error, #dc3545);
    border-radius: var(--radius-lg, var(--radius-md));
    padding: var(--spacing-md, var(--spacing-lg));
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    position: relative;
    animation: slideInRight 0.3s ease;

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;

    to {
        transform: translateX(0);
        opacity: 1;

.enhanced-error-message.fade-out {
    animation: fadeOut 0.3s ease forwards;

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(100%);

.error-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;

.error-icon {
    font-size: 1.25rem;

.error-title {
    font-weight: 600;
    color: var(--color-text-primary, var(--color-text-primary));
    font-size: 1rem;

.error-suggestion {
    color: var(--color-text-secondary, #aaa);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;

.error-action-btn {
    background: var(--color-error, #dc3545);
    color: var(--color-text-primary);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, var(--radius-sm));
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s ease;

.error-action-btn:hover {
    background: #c82333;

.error-dismiss {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-secondary, #aaa);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background 0.2s ease, color 0.2s ease;

.error-dismiss:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    color: var(--color-text-primary, var(--color-text-primary));

/* Success message */
.enhanced-success-message {
    background: var(--color-bg-primary, #1a1a1a);
    border: 2px solid var(--color-success, #28a745);
    border-radius: var(--radius-lg, var(--radius-md));
    padding: var(--spacing-md, var(--spacing-lg));
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    animation: slideInRight 0.3s ease;

.enhanced-success-message.fade-out {
    animation: fadeOut 0.3s ease forwards;

.success-icon {
    font-size: 1.25rem;
    color: var(--color-success, #28a745);

.success-text {
    flex: 1;
    color: var(--color-text-primary, var(--color-text-primary));
    font-size: 0.875rem;

.success-dismiss {
    background: none;
    border: none;
    color: var(--color-text-secondary, #aaa);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background 0.2s ease, color 0.2s ease;

.success-dismiss:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    color: var(--color-text-primary, var(--color-text-primary));

/* Info message */
.enhanced-info-message {
    background: var(--color-bg-primary, #1a1a1a);
    border: 2px solid var(--color-info, #4a90e2);
    border-radius: var(--radius-lg, var(--radius-md));
    padding: var(--spacing-md, var(--spacing-lg));
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    animation: slideInRight 0.3s ease;

.enhanced-info-message.fade-out {
    animation: fadeOut 0.3s ease forwards;

.info-icon {
    font-size: 1.25rem;
    color: var(--color-info, #4a90e2);

.info-text {
    flex: 1;
    color: var(--color-text-primary, var(--color-text-primary));
    font-size: 0.875rem;

.info-dismiss {
    background: none;
    border: none;
    color: var(--color-text-secondary, #aaa);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    width: calc(var(--spacing-lg) * 1.25);
    height: calc(var(--spacing-lg) * 1.25);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: background 0.2s ease, color 0.2s ease;

.info-dismiss:hover {
    background: rgba(var(--color-text-primary-rgb, 224, 224, 224), 0.1);
    color: var(--color-text-primary, var(--color-text-primary));

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}