/* HTMX loading indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Hide default content during HTMX request */
.htmx-request .default-text {
    display: none;
}

/* Disable button during request */
button.htmx-request {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Fade out animation for deleted elements */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Highlight animation for newly added elements */
@keyframes highlight-fade {
    from { background-color: rgb(209 250 229); } /* emerald-100 */
    to { background-color: transparent; }
}

.highlight-new {
    animation: highlight-fade 1.5s ease-out;
}

/* Skeleton loading animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* Markdown rendered content */
.prose-advice h1 { font-size: 1.25rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; color: #0f172a; }
.prose-advice h2 { font-size: 1.125rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.375rem; color: #1e293b; }
.prose-advice h3 { font-size: 1rem; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.25rem; color: #334155; }
.prose-advice p { margin-bottom: 0.5rem; color: #475569; line-height: 1.625; }
.prose-advice ul { list-style-type: disc; padding-left: 1.25rem; margin-bottom: 0.5rem; color: #475569; }
.prose-advice ol { list-style-type: decimal; padding-left: 1.25rem; margin-bottom: 0.5rem; color: #475569; }
.prose-advice li { margin-bottom: 0.25rem; }
.prose-advice strong { font-weight: 600; color: #1e293b; }
.prose-advice em { font-style: italic; }
.prose-advice code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
.prose-advice blockquote { border-left: 3px solid #10b981; padding-left: 0.75rem; margin: 0.5rem 0; color: #64748b; font-style: italic; }

/* Chat bubble styles */
.chat-question {
    background: #059669;
    color: white;
    border-radius: 1rem 1rem 0.25rem 1rem;
}

.chat-answer {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem 1rem 1rem 0.25rem;
}

/* Tabular numbers for consistent digit widths */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Chevron rotation transition for meal card toggle */
.meal-card [id$="-chevron"] {
    transition: transform 0.2s ease;
}

/* Safe area for mobile bottom nav */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}