/* ═══ LavaMalis — UI Polish ═══ */

.auth-card {
    animation: cardSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.auth-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.auth-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.auth-field input:focus {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card,
.checkout-card {
    animation: cardSlideUp 0.45s ease backwards;
}

.pricing-card:nth-child(2) { animation-delay: 0.06s; }
.pricing-card:nth-child(3) { animation-delay: 0.12s; }

/* Notifications */
.notification {
    animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(12px);
}

.notification.success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.notification.error {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.notification.info {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Action buttons feedback */
.action-btn,
.tool-btn,
.restore-btn,
.pricing-btn,
.copy-btn {
    transition: transform 0.15s ease, box-shadow 0.2s, background 0.2s;
}

.action-btn:active,
.tool-btn:active {
    transform: scale(0.92);
}

/* Smooth link transitions */
a, button {
    -webkit-tap-highlight-color: transparent;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Health status badges */
.health-ok { color: #10b981; }
.health-warn { color: #f59e0b; }
.health-fail { color: #ef4444; }

/* Responsive message content styling for index/preview modals */
#previewBody,
.message-content,
.message-body.expanded {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

#previewBody *,
.message-content *,
.message-body.expanded * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure tables inside messages are responsive */
#previewBody table,
.message-content table,
.message-body.expanded table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

/* Ensure images inside messages scale down correctly */
#previewBody img,
.message-content img,
.message-body.expanded img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Force preformatted text or code blocks to wrap */
#previewBody pre,
.message-content pre,
.message-body.expanded pre,
#previewBody code,
.message-content code,
.message-body.expanded code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    display: block !important;
}