@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html, body {
    background-color: #f8fafc;
    color: #1e293b;
    scroll-behavior: smooth;
}

.dark html, .dark body {
    background-color: #020617;
    color: #f1f5f9;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    overscroll-behavior-y: contain; 
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #0f172a;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #f8fafc;
    }
}

@media (min-width: 1024px) { 
    body { 
        padding-bottom: 2.5rem; 
    } 
}

/* Voorkomt iOS auto-zoom én geeft staartletters (g, j, p, q, y) volledige ademruimte */
.mobile-fix-input { 
    box-sizing: border-box !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    display: block !important; 
    font-size: 16px !important; 
    line-height: 1.4 !important; 
    min-height: 44px !important; 
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    -webkit-appearance: none; 
}

@media (min-width: 640px) {
    .mobile-fix-input {
        font-size: 0.8125rem !important;
        min-height: 38px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* Scrollbar helpers */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.emoji-scrollbar::-webkit-scrollbar { width: 4px; }
.emoji-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.emoji-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Micro-animaties */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(-6px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.animate-pop { animation: pop 0.25s ease-out; }

#splash-screen { 
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out; 
}

/* Bottom Sheets */
.bottom-sheet-overlay { 
    overscroll-behavior-y: none;
    touch-action: none;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.35) !important; 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s; 
}

.bottom-sheet-overlay.hidden-sheet { 
    opacity: 0; 
    pointer-events: none; 
    visibility: hidden; 
    transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.3s; 
}

.bottom-sheet-content { 
    will-change: transform; 
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); 
    touch-action: pan-y;
}

.bottom-sheet-content.dragging {
    transition: none !important;
}

@media (min-width: 640px) {
    .bottom-sheet-overlay.hidden-sheet .bottom-sheet-content { 
        transform: scale(0.95) translateY(10px); 
    }
}

/* Swipe-to-delete wrapper voor maaltijden */
.swipe-item-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.swipe-item-content {
    transition: transform 0.2s ease-out;
    background: inherit;
    position: relative;
    z-index: 2;
}

/* SVG Macro Donut Ringen */
.ring-circle {
    transition: stroke-dashoffset 0.65s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Pull to Refresh Indicator (hersteld) */
#pull-to-refresh-indicator { 
    position: fixed; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%) translateY(-150%); 
    opacity: 0;
    z-index: 100; 
    background: #4f46e5; 
    color: white; 
    padding: 6px 16px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 600; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    transition: transform 0.2s ease, opacity 0.2s ease; 
    pointer-events: none; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-custom { animation: spin 1s linear infinite; }

/* Microfoon opname animatie */
@keyframes pulse-mic { 
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 
}

.mic-recording { 
    animation: pulse-mic 1.5s infinite; 
    background-color: #ef4444 !important; 
    color: white !important; 
}

button svg {
    flex-shrink: 0;
}

@layer base {
  img, svg {
    display: inline-block;
  }
}

.html2canvas-strict-text {
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
}

/* Toast Notificaties Container */
#toast-container { 
    top: calc(env(safe-area-inset-top, 20px) + 1.25rem); 
}

/* Nieuwe Toast Styling */
.toast-base {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px;
    padding: 14px 20px; 
    border-radius: 16px; 
    font-weight: 700; 
    font-size: 0.875rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid transparent; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(1rem); 
    opacity: 0; 
    background: #ffffff;
}

.dark .toast-base { 
    background: #1e293b; 
}

.toast-success { border-color: #10b981; color: #059669; }
.dark .toast-success { border-color: #34d399; color: #34d399; }

.toast-error { border-color: #e11d48; color: #e11d48; }
.dark .toast-error { border-color: #fb7185; color: #fb7185; }

.toast-warning { border-color: #f59e0b; color: #d97706; }
.dark .toast-warning { border-color: #fbbf24; color: #fbbf24; }

.toast-info { border-color: #2563eb; color: #2563eb; }
.dark .toast-info { border-color: #60a5fa; color: #60a5fa; }