/**
 * Samsung Now Bar-Inspired Theme for J.A.M.E.S.
 * Enhanced visual design with premium card aesthetics
 */

/* ====================================
   ENHANCED CARD SYSTEM
   ==================================== */

/* Base card enhancements */
.james-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    box-shadow: 
        0 4px 20px -4px rgba(0, 0, 0, 0.4),
        0 8px 32px -8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.james-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 
        0 12px 40px -8px rgba(0, 0, 0, 0.5),
        0 16px 56px -12px rgba(14, 165, 233, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Card headers with gradient accents */
.james-card-header {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(99, 102, 241, 0.12)) !important;
}

/* Enhanced icons */
.james-card-header .icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
    filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.4)) !important;
}

/* Card content spacing */
.james-card-content {
    padding: 1.25rem !important;
}

/* ====================================
   CARD TYPE SPECIFIC STYLING
   ==================================== */

/* Weather Card */
.weather-card {
    background: linear-gradient(135deg, 
        rgba(14, 165, 233, 0.08), 
        rgba(6, 182, 212, 0.05)) !important;
}

.weather-card .james-card-header {
    background: linear-gradient(135deg, 
        rgba(14, 165, 233, 0.25), 
        rgba(6, 182, 212, 0.15)) !important;
    border-bottom-color: rgba(14, 165, 233, 0.2) !important;
}

/* Email Card */
.email-card {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.08), 
        rgba(99, 102, 241, 0.05)) !important;
}

.email-card .james-card-header {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.25), 
        rgba(99, 102, 241, 0.15)) !important;
    border-bottom-color: rgba(139, 92, 246, 0.2) !important;
}

/* Calendar Card */
.calendar-card {
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.08), 
        rgba(139, 92, 246, 0.05)) !important;
}

.calendar-card .james-card-header {
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.25), 
        rgba(139, 92, 246, 0.15)) !important;
    border-bottom-color: rgba(99, 102, 241, 0.2) !important;
}

/* Navigation Card */
.navigation-card {
    background: linear-gradient(135deg, 
        rgba(6, 182, 212, 0.08), 
        rgba(14, 165, 233, 0.05)) !important;
}

.navigation-card .james-card-header {
    background: linear-gradient(135deg, 
        rgba(6, 182, 212, 0.25), 
        rgba(14, 165, 233, 0.15)) !important;
    border-bottom-color: rgba(6, 182, 212, 0.2) !important;
}

/* News Card */
.news-card {
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.08), 
        rgba(239, 68, 68, 0.05)) !important;
}

.news-card .james-card-header {
    background: linear-gradient(135deg, 
        rgba(249, 115, 22, 0.25), 
        rgba(239, 68, 68, 0.15)) !important;
    border-bottom-color: rgba(249, 115, 22, 0.2) !important;
}

/* Tasks Card */
.tasks-card {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.08), 
        rgba(16, 185, 129, 0.05)) !important;
}

.tasks-card .james-card-header {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.25), 
        rgba(16, 185, 129, 0.15)) !important;
    border-bottom-color: rgba(34, 197, 94, 0.2) !important;
}

/* ====================================
   TYPOGRAPHY ENHANCEMENTS
   ==================================== */

/* Large data displays (temperatures, counts, etc.) */
.data-display-large {
    font-size: 4.5rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}

.data-display-medium {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.data-display-small {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Gradient text for emphasis */
.text-gradient-blue {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-cyan {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ====================================
   INTERACTIVE ELEMENTS
   ==================================== */

/* Pill badges */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pill-badge:hover {
    transform: scale(1.05);
}

/* Avatar circles */
.avatar-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-center;
    font-weight: 700;
    font-size: 1rem;
    color: white;
    box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.4);
}

/* Timeline dots */
.timeline-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    position: relative;
}

.timeline-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.2;
}

/* ====================================
   ANIMATIONS
   ==================================== */

/* Card entry animation */
@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.james-card {
    animation: cardSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Shimmer loading effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(51, 65, 85, 0.4) 0%,
        rgba(71, 85, 105, 0.6) 50%,
        rgba(51, 65, 85, 0.4) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* Pulse animation for live indicators */
@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.pulse-indicator {
    animation: pulse-ring 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* ====================================
   RESPONSIVE ENHANCEMENTS
   ==================================== */

@media (max-width: 768px) {
    .james-card {
        border-radius: 12px !important;
    }
    
    .data-display-large {
        font-size: 3rem !important;
    }
    
    .data-display-medium {
        font-size: 1.875rem !important;
    }
}

/* ====================================
   GLASSMORPHISM VARIANTS
   ==================================== */

.glass-light {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.glass-dark {
    background: rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.glass-blue {
    background: rgba(59, 130, 246, 0.1) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* ====================================
   UTILITY CLASSES
   ==================================== */

.shadow-glow-blue {
    box-shadow: 0 0 24px -4px rgba(59, 130, 246, 0.5) !important;
}

.shadow-glow-purple {
    box-shadow: 0 0 24px -4px rgba(139, 92, 246, 0.5) !important;
}

.shadow-glow-cyan {
    box-shadow: 0 0 24px -4px rgba(6, 182, 212, 0.5) !important;
}

/* Divider with gradient */
.divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(148, 163, 184, 0.3), 
        transparent);
}

/* ====================================
   BUTTON ENHANCEMENTS
   ==================================== */

.button-premium {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 
        0 4px 16px -4px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-premium:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px -4px rgba(59, 130, 246, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button-premium:active {
    transform: translateY(0);
}

/* ====================================
   SCROLL ENHANCEMENTS
   ==================================== */

/* Custom scrollbar for card content */
.james-card-content::-webkit-scrollbar {
    width: 6px;
}

.james-card-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.james-card-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
}

.james-card-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb, #7c3aed);
}

/* ====================================
   ENHANCED ANIMATIONS & TRANSITIONS
   ==================================== */

/* Smooth entry animations */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply animations to cards */
.james-card {
    animation: cardSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Stagger animation for multiple cards */
.james-card:nth-child(1) { animation-delay: 0.05s; }
.james-card:nth-child(2) { animation-delay: 0.1s; }
.james-card:nth-child(3) { animation-delay: 0.15s; }
.james-card:nth-child(4) { animation-delay: 0.2s; }
.james-card:nth-child(5) { animation-delay: 0.25s; }

/* Enhanced hover transitions for interactive elements */
.james-card a,
.james-card button,
.timeline-event,
.email-details {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.james-card a:hover,
.james-card button:hover {
    transform: translateX(4px) !important;
}

.timeline-event:hover {
    background: rgba(16, 185, 129, 0.05) !important;
    border-left-color: #34d399 !important;
}

/* Pulse animation for important elements */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.avatar-circle {
    animation: fadeInScale 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Temperature display enhancement */
.enhanced-temp {
    animation: fadeInScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.temp-value {
    transition: all 0.3s ease !important;
    text-shadow: 0 4px 20px rgba(14, 165, 233, 0.3) !important;
}

.temp-value:hover {
    transform: scale(1.05) !important;
    text-shadow: 0 6px 30px rgba(14, 165, 233, 0.5) !important;
}

/* Timeline dot pulse effect */
.timeline-dot {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Smooth list item transitions */
.james-card li {
    transition: all 0.2s ease !important;
}

.james-card li:hover {
    background: rgba(148, 163, 184, 0.05) !important;
    transform: translateX(4px) !important;
}

/* Icon glow animation */
@keyframes iconGlow {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.6));
    }
}

.james-card-header .icon {
    animation: iconGlow 3s ease-in-out infinite !important;
}

/* Card entrance from bottom */
@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply to newly added cards */
.james-card.new-card {
    animation: slideInFromBottom 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ====================================
   NEWS CARD ENHANCEMENTS
   ==================================== */

.james-card[data-card-type="news"] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(30, 41, 59, 0.95)) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.news-item {
    position: relative;
}

.news-item:hover .news-indicator {
    transform: scaleY(1.1);
    box-shadow: 0 0 12px currentColor;
}

.news-badge {
    backdrop-filter: blur(8px);
}

/* ====================================
   TASKS CARD ENHANCEMENTS
   ==================================== */

.james-card[data-card-type="tasks"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(30, 41, 59, 0.95)) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.task-checkbox:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px currentColor;
}

.task-item:active .task-checkbox {
    transform: scale(0.95);
}

.priority-badge {
    animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

/* Task completion animation */
@keyframes taskComplete {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        opacity: 0.5;
        transform: translateX(8px);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

.task-item.completed {
    animation: taskComplete 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ====================================
   🌟 PREMIUM DAILY BRIEFING CARD 🌟
   The Crown Jewel of J.A.M.E.S.
   ==================================== */

.briefing-card {
    position: relative;
    overflow: visible !important;
}

/* Exclusive glow effect for briefing card */
.briefing-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
    border-radius: 18px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
    animation: rotateBorder 8s linear infinite;
}

.briefing-card:hover::before {
    opacity: 0.6;
}

@keyframes rotateBorder {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Enhanced header with gradient text */
.briefing-card .james-card-header {
    position: relative;
    overflow: hidden;
}

.briefing-card .james-card-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Premium intro section */
.briefing-intro {
    position: relative;
    overflow: hidden;
}

.briefing-intro::before {
    content: '✨';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    opacity: 0.3;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* Weather section enhancements */
.briefing-weather {
    position: relative;
    overflow: hidden;
}

.briefing-weather::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    animation: weatherPulse 4s ease-in-out infinite;
}

@keyframes weatherPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Alert section urgency effect */
.briefing-alerts {
    animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1);
    }
}

/* Events timeline connector */
.briefing-events {
    position: relative;
}

/* Tasks section hover effect */
.briefing-tasks {
    transition: all 0.3s ease;
}

.briefing-tasks:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
}

/* News section typography enhancement */
.briefing-news a {
    position: relative;
}

.briefing-news a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    transition: width 0.3s ease;
}

.briefing-news a:hover::before {
    width: 100%;
}

/* Overall card entrance animation */
.briefing-card {
    animation: briefingEntrance 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes briefingEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Exclusive section divider */
.briefing-card .james-card-content > div:not(:last-child) {
    position: relative;
}

/* Premium gradient borders between sections */
.briefing-weather,
.briefing-alerts,
.briefing-events,
.briefing-tasks {
    box-shadow: 
        0 4px 16px -4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Responsive scaling for mobile */
@media (max-width: 640px) {
    .briefing-card .james-card-header {
        font-size: 1.25rem !important;
    }
    
    .briefing-weather {
        padding: 16px;
    }
}

/* ====================================
   🗺️ PREMIUM NAVIGATION CARD
   ==================================== */

.james-card[data-card-type="navigation"] {
    overflow: hidden !important;
}

/* Navigation header gradient text effect */
.james-card[data-card-type="navigation"] .james-card-header {
    position: relative;
}

/* Map image zoom effect */
.james-card[data-card-type="navigation"] img {
    will-change: transform;
}

/* Stats cards pulse animation */
@keyframes statsPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
}

/* Premium button with ripple effect */
.james-card[data-card-type="navigation"] a {
    position: relative;
    overflow: hidden;
}

.james-card[data-card-type="navigation"] a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.james-card[data-card-type="navigation"] a:hover::before {
    width: 300px;
    height: 300px;
}

/* Destination header animation */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.james-card[data-card-type="navigation"] h3 {
    animation: slideInFromLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stats grid entrance */
.james-card[data-card-type="navigation"] [style*="grid-template-columns"] > div:first-child {
    animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.james-card[data-card-type="navigation"] [style*="grid-template-columns"] > div:last-child {
    animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
}

/* Button entrance */
.james-card[data-card-type="navigation"] a[href*="maps"] {
    animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
    position: relative;
    z-index: 1;
}

/* Gradient overlay animation */
@keyframes overlayFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Route icon pulse */
@keyframes routeIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.james-card[data-card-type="navigation"] a:hover svg:first-of-type {
    animation: routeIconPulse 0.6s ease-in-out;
}

/* Card entrance with map reveal */
.james-card[data-card-type="navigation"] {
    animation: mapCardEntrance 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes mapCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) rotateX(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* Premium glow on hover */
.james-card[data-card-type="navigation"]:hover {
    box-shadow: 
        0 12px 40px -8px rgba(59, 130, 246, 0.4),
        0 16px 56px -12px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ====================================
   💬 PREMIUM CHAT RESPONSE CARD
   ==================================== */

/* Chat card subtle animation */
.james-card[data-card-type="chat"] {
    animation: chatCardEntrance 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes chatCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Icon breathing animation */
@keyframes iconBreathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.8));
    }
}

/* Background accent pulse */
@keyframes accentPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2) rotate(45deg);
        opacity: 0.6;
    }
}

/* Text fade up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ready indicator pulse */
.james-card[data-card-type="chat"] [style*="pulse"] {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
}

/* Chat card hover effect */
.james-card[data-card-type="chat"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 32px -4px rgba(99, 102, 241, 0.3),
        0 12px 48px -8px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ====================================
   ⚠️ ERROR CARD STYLING
   ==================================== */

.james-card[data-card-type="error"] {
    animation: errorShake 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Error icon shake */
@keyframes shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
}

/* Error card hover - less lift, more warning glow */
.james-card[data-card-type="error"]:hover {
    box-shadow: 
        0 8px 32px -4px rgba(239, 68, 68, 0.4),
        0 12px 48px -8px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Error text box pulse */
.james-card[data-card-type="error"] [style*="border-left: 4px"] {
    animation: errorPulse 2s ease-in-out infinite;
}

@keyframes errorPulse {
    0%, 100% {
        border-left-color: #ef4444;
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
        border-left-color: #f87171;
        box-shadow: -4px 0 12px rgba(239, 68, 68, 0.3);
    }
}

/* Smooth text rendering */
.james-card[data-card-type="chat"] p,
.james-card[data-card-type="error"] p {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ====================================
   ☁️ ENHANCED PREMIUM WEATHER CARD
   ==================================== */

/* Weather card exclusive styling */
.james-card[data-card-type="weather"] {
    position: relative;
}

/* Floating weather background */
@keyframes weatherFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.3;
    }
    33% {
        transform: translate(10%, -10%) rotate(5deg);
        opacity: 0.5;
    }
    66% {
        transform: translate(-10%, 10%) rotate(-5deg);
        opacity: 0.4;
    }
}

/* Weather icon floating animation */
@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}

/* Weather icon header float */
@keyframes weatherIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Icon glow pulse effect */
@keyframes iconGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

/* Slide in from left animation */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Temperature hover effect */
.james-card[data-card-type="weather"] [style*="font-size: 96px"]:hover {
    transform: scale(1.05);
    text-shadow: 
        0 0 60px rgba(14, 165, 233, 0.6),
        0 0 120px rgba(14, 165, 233, 0.3) !important;
}

/* Stats grid hover */
.james-card[data-card-type="weather"] [style*="grid-template-columns: repeat(3"] > div {
    transition: all 0.2s ease;
}

.james-card[data-card-type="weather"] [style*="grid-template-columns: repeat(3"] > div:hover {
    transform: translateY(-3px);
    background: rgba(14, 165, 233, 0.15);
}

/* Weather card entrance */
.james-card[data-card-type="weather"] {
    animation: weatherCardEntrance 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes weatherCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(8px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Premium hover glow for weather card */
.james-card[data-card-type="weather"]:hover {
    box-shadow: 
        0 12px 48px -8px rgba(14, 165, 233, 0.5),
        0 20px 80px -12px rgba(14, 165, 233, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-4px) !important;
}

/* Icon container shimmer */
.james-card[data-card-type="weather"] [style*="width: 120px"] {
    position: relative;
    overflow: hidden;
}

.james-card[data-card-type="weather"] [style*="width: 120px"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmerPass 3s infinite;
}

@keyframes shimmerPass {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .james-card[data-card-type="weather"] [style*="font-size: 96px"] {
        font-size: 72px !important;
    }
    
    .james-card[data-card-type="weather"] [style*="grid-template-columns: 1fr auto"] {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================
   📸 CAMERA & IMAGE RECOGNITION UI
   ==================================== */

/* Camera button animation */
.camera-button {
    position: relative;
    overflow: hidden;
}

.camera-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.camera-button:hover::before {
    width: 100px;
    height: 100px;
}

.camera-button:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(14, 165, 233, 0.15)) !important;
    border-color: #06b6d4 !important;
    transform: scale(1.1) !important;
}

.camera-button:active {
    transform: scale(0.95) !important;
}

/* Camera button pulse when active */
@keyframes cameraPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(6, 182, 212, 0);
    }
}

.camera-button.active {
    animation: cameraPulse 1.5s infinite;
}

/* Image preview container */
#image-preview-container {
    animation: fadeInSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image preview styling */
#image-preview {
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.3);
}

#image-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 48px rgba(6, 182, 212, 0.5);
}

/* Remove button styling */
#remove-image-btn {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

#remove-image-btn:hover {
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.6);
}

/* File upload button enhancement */
#file-upload-btn:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15)) !important;
    border-color: #3b82f6 !important;
}


/* ============================================
   LIVE CAMERA MODAL
   ============================================ */

#live-camera-modal {
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

#live-camera-video {
    max-height: 60vh;
    border-radius: 12px;
}

#capture-photo-btn {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .8;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Live Camera Button Styling */
#live-camera-btn {
    position: relative;
    overflow: hidden;
}

#live-camera-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

#live-camera-btn:hover::before {
    width: 200%;
    height: 200%;
}

#live-camera-btn svg {
    position: relative;
    z-index: 1;
}

/* Recording indicator animation */
@keyframes recording {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
}

.recording {
    animation: recording 2s infinite;
}