/* Make the messaging card more prominent */
.message-card-prominent {
    border: 3px solid var(--tblr-primary, #206bc4) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.3) !important;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%) !important;
    animation: subtle-pulse 2s ease-in-out infinite;
    position: relative;
    margin-top: 16px !important;
}

/* Dark theme support for message card */
[data-bs-theme="dark"] .message-card-prominent {
    background: linear-gradient(135deg, rgba(32, 107, 196, 0.15) 0%, rgba(32, 107, 196, 0.05) 100%) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.4) !important;
}

.message-card-prominent::before {
    content: var(--card-badge-text, "⭐ PREFERRED COMMUNICATION");
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tblr-warning, #ffc107);
    color: #000;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
    z-index: 10;
}

/* Add a subtle pulse animation */
@keyframes subtle-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(32, 107, 196, 0.3);
    }
    50% {
        box-shadow: 0 6px 16px rgba(32, 107, 196, 0.5);
    }
}

[data-bs-theme="dark"] .message-card-prominent,
[data-bs-theme="dark"] .quotation-message-card-prominent {
    animation: subtle-pulse-dark 2s ease-in-out infinite;
}

@keyframes subtle-pulse-dark {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(32, 107, 196, 0.4);
    }
    50% {
        box-shadow: 0 6px 16px rgba(32, 107, 196, 0.6);
    }
}

/* Add attention banner */
.message-attention-banner {
    background: var(--tblr-warning-lt, #fff3cd);
    border-left: 4px solid var(--tblr-warning, #ffc107);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    color: #856404;
}

/* Ensure proper text color in light mode */
.message-attention-banner,
.message-attention-banner strong {
    color: #856404 !important;
}

/* Dark theme support for attention banner */
[data-bs-theme="dark"] .message-attention-banner {
    background: rgba(255, 193, 7, 0.15);
}

[data-bs-theme="dark"] .message-attention-banner,
[data-bs-theme="dark"] .message-attention-banner strong {
    color: var(--tblr-warning, #ffc107) !important;
}

.message-attention-banner i {
    color: var(--tblr-warning, #ffc107);
    margin-right: 0.5rem;
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Make send message button more prominent */
.btn-send-message-prominent {
    background: linear-gradient(135deg, var(--tblr-primary, #206bc4) 0%, #1a5a9e 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.95rem !important;
    box-shadow: 0 2px 8px rgba(32, 107, 196, 0.4) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-send-message-prominent:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(32, 107, 196, 0.6) !important;
    color: white !important;
}

/* Dark theme button adjustments */
[data-bs-theme="dark"] .btn-send-message-prominent {
    background: linear-gradient(135deg, #4299e1 0%, var(--tblr-primary, #206bc4) 100%) !important;
    box-shadow: 0 2px 8px rgba(66, 153, 225, 0.5) !important;
}

[data-bs-theme="dark"] .btn-send-message-prominent:hover {
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.7) !important;
}

.btn-send-message-prominent i {
    margin-right: 0.5rem;
}