/* app.css - UI Polish & Smart Features */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* --- Glassmorphism --- */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Smart Add Animations --- */
@keyframes sparkle {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.sparkle-icon {
    position: relative;
}

.sparkle-icon::before, .sparkle-icon::after {
    content: '✨';
    position: absolute;
    font-size: 10px;
    animation: sparkle 1.5s infinite;
    pointer-events: none;
}

.sparkle-icon::before { top: -8px; left: -8px; animation-delay: 0s; }
.sparkle-icon::after { bottom: -8px; right: -8px; animation-delay: 0.7s; }

/* AI "Thinking" Gradient Pulse */
.ai-thinking {
    background: linear-gradient(270deg, #6366f1, #a855f7, #ec4899);
    background-size: 600% 600%;
    animation: ai-gradient 2s ease infinite;
    color: white !important;
    border: none !important;
}

@keyframes ai-gradient {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

/* --- Priority Badges --- */
.priority-high {
    background-color: #fee2e2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.priority-medium {
    background-color: #ffedd5;
    color: #f97316;
    border: 1px solid #fed7aa;
}

.priority-low {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* --- Tag Pills --- */
.tag-pill {
    background-color: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(156, 163, 175, 0.8); }

/* --- Background Blobs Animation --- */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Checkbox Bounce */
input[type="checkbox"]:checked { animation: bounce 0.3s; }
@keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

/* --- Mobile Utilities --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.app-select-none { -webkit-user-select: none; user-select: none; }
.tap-highlight-transparent { -webkit-tap-highlight-color: transparent; }