/* AI Model indicator - for all screen sizes */
.ai-indicator {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.4px !important;
    display: block !important;
    position: absolute !important;
    left: 52px !important;
    top: 43px !important;
    opacity: 0.6 !important;
}

/* Brand text animation for all screen sizes */
.brand-text {
    background: linear-gradient(45deg, #ffd7d7, #ff9ecd, #e6c8ff, #c8e6ff) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shine 3s linear infinite, floatText 3s ease-in-out infinite !important;
    font-family: 'Mystery Quest', cursive !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
}

/* Shine animation for brand text */
@keyframes shine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Floating animation for brand text */
@keyframes floatText {
    0%, 100% {
        transform: translateY(0) !important;
    }
    50% {
        transform: translateY(-2px) !important;
    }
}

/* Brand dot animation */
.brand-dot {
    color: #ff9ecd !important;
    text-shadow: 0 0 10px rgba(212, 108, 108, 0.5) !important;
    animation: twinkle 2s infinite !important;
}

/* Add sparkle effect */
.brand-text::before,
.brand-text::after {
    content: '' !important;
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    animation: sparkle 2s ease-in-out infinite !important;
    pointer-events: none !important;
}

.brand-text::before {
    top: -2px !important;
    left: -2px !important;
    animation-delay: 0.5s !important;
}

.brand-text::after {
    bottom: -2px !important;
    right: -2px !important;
}

@keyframes sparkle {
    0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1) rotate(180deg); opacity: 1; }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    /* Fix body height issue on mobile */
    html, body {
        height: auto !important;
        min-height: 100% !important;
    }

    /* Ensure body background covers full content on mobile */
    body {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
    
    body {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Simplify container */
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-top: 0.5rem !important;
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Flatten card design */
    .card {
        width: 100% !important;
        margin: 0.75rem auto !important;
        background: rgba(61, 67, 94, 0.3) !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Simplify navbar */
    .navbar {
        margin-bottom: 0.5rem !important;
        background: rgba(61, 67, 94, 0.4) !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Hide decorative background elements */
    .mystical-background {
        display: none !important;
    }

    /* More compact slogan spacing with glow effect */
    .display-2 {
        font-size: 2.4rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.1 !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
                    0 0 20px rgba(255, 255, 255, 0.2) !important;
        animation: softGlow 3s ease-in-out infinite !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: 'Mystery Quest', cursive !important;
        margin-top: 1rem !important;
    }

    /* Add glow animation */
    @keyframes softGlow {
        0%, 100% {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
                        0 0 20px rgba(255, 255, 255, 0.2);
        }
        50% {
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
                        0 0 25px rgba(255, 255, 255, 0.3);
        }
    }

    .lead {
        font-size: 1.2rem !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.2 !important;
        color: rgba(255, 255, 255, 0.75) !important;
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.1) !important;
    }

    p.text-center {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        line-height: 1.4 !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-family: 'Quicksand', 'Mystery Quest', var(--bs-font-sans-serif) !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
    }

    /* Simplify form elements */
    .form-control, .form-control-lg, textarea.form-control {
        padding: 0.75rem !important;
        min-height: 100px !important;
        backdrop-filter: none !important;
        background: rgba(61, 67, 94, 0.4) !important;
    }

    /* Flatten interpretation section but keep animations */
    .interpretation-section {
        margin-bottom: 1rem !important;
        padding: 0.75rem !important;
        background: rgba(71, 78, 109, 0.3) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    /* Keep interpretation animations and ensure text visibility */
    #interpretationContainer {
        color: rgba(255, 255, 255, 0.95) !important;
        text-align: justify !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }

    #interpretationContainer p {
        animation: fadeInUp 0.5s ease-out forwards !important;
        opacity: 1 !important;
        animation-fill-mode: forwards !important;
        color: rgba(255, 255, 255, 0.95) !important;
        margin-bottom: 1rem !important;
        text-align: justify !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }

    #interpretationContainer i {
        animation: floatingStar 4s infinite !important;
        opacity: 0.6 !important;
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Keep sequential animation delays */
    #interpretationContainer p:nth-child(1) { animation-delay: 0.1s !important; }
    #interpretationContainer p:nth-child(2) { animation-delay: 0.3s !important; }
    #interpretationContainer p:nth-child(3) { animation-delay: 0.5s !important; }
    #interpretationContainer p:nth-child(4) { animation-delay: 0.7s !important; }
    #interpretationContainer p:nth-child(5) { animation-delay: 0.9s !important; }

    /* Simplify button */
    .btn-primary {
        padding: 0.6rem 1.5rem !important;
        box-shadow: none !important;
        background: rgba(147, 155, 200, 0.3) !important;
    }

    .btn-primary:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Simplify navbar brand */
    .navbar-brand {
        font-size: 1.3rem !important;
        padding: 6px 10px !important;
    }

    .navbar-brand:hover {
        transform: none !important;
    }

    /* Mobile-specific brand text adjustments */
    .brand-text {
        font-size: 1.2rem !important;
    }

    /* Simplify language selector */
    .lang-button {
        padding: 6px 12px !important;
    }

    .modern-dropdown {
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Magical Footer - Preserved */
    .dream-footer {
        padding: 1rem 0 !important;
        margin-top: 2rem !important;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1)) !important;
    }

    .footer-stars {
        display: flex !important;
        gap: 1rem !important;
        justify-content: center !important;
    }

    .footer-stars i {
        font-size: 1rem !important;
        opacity: 0.8 !important;
        animation: twinkle 3s infinite !important;
    }

    .footer-text p {
        font-size: 1rem !important;
        font-family: 'Dancing Script', cursive !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .footer-quote {
        font-size: 0.9rem !important;
        font-style: italic !important;
        opacity: 0.8 !important;
    }

    /* Keep footer star animations */
    .footer-stars i:nth-child(1) { animation: twinkle 3s infinite !important; }
    .footer-stars i:nth-child(2) { animation: twinkle 3s infinite 1s !important; }
    .footer-stars i:nth-child(3) { animation: twinkle 3s infinite 2s !important; }

    /* Remove other animations */
    .interpretation-title i,
    .card-title i,
    .navbar-brand i {
        animation: none !important;
    }

    /* Adjust AI indicator position for mobile */
    .ai-indicator {
        left: 48px !important;
        top: 35px !important;
        font-size: 0.6rem !important; /* Slightly smaller on mobile */
    }

    /* Stats counter styles */
    .stats-container {
        gap: 1.5rem !important;
        padding: 0.4rem !important;
    }

    .stat-item {
        min-width: 140px !important;
    }

    .stat-content {
        gap: 0.6rem !important;
        margin-left: 1.5rem !important;
    }

    .stat-icon {
        font-size: 1rem !important;
    }

    .stat-number {
        font-size: 1rem !important;
    }

    .stat-label {
        font-size: 0.6rem !important;
    }
}

/* Stats counter styles - outside media query for all screens */
.stats-container {
    display: flex !important;
    justify-content: center !important;
    gap: 2rem !important;
    margin: -0.5rem auto 1rem auto !important;
    font-family: 'Quicksand', sans-serif !important;
    padding: 0.5rem !important;
    max-width: 800px !important;
}

.stat-item {
    text-align: left !important;
    min-width: 180px !important;
}

.stat-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

.stat-icon {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    background: linear-gradient(120deg, #fff, #e0e0ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)) !important;
}

.stat-text {
    display: flex !important;
    flex-direction: column !important;
}

.stat-number {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.1rem !important;
    background: linear-gradient(120deg, #fff, #e0e0ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.stat-label {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.3px !important;
    font-weight: 400 !important;
}

.stat-icon i {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2)) !important;
} 

/* Trust Badges Mobile Styling */
@media (max-width: 768px) {
    .trust-badges {
        gap: 0.5rem !important;
        margin: 1rem auto !important;
        padding: 0 0.5rem !important;
    }

    .trust-badge {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        backdrop-filter: none !important;
    }

    .trust-badge i {
        font-size: 0.9rem !important;
    }

    .trust-badge:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Dream Categories Mobile Styling */
    .dream-categories {
        margin: 1.5rem auto !important;
        padding: 0 0.5rem !important;
    }

    .category-tags {
        gap: 0.5rem !important;
        margin: 0.75rem 0 !important;
    }

    .category-tag {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
        border-radius: 20px !important;
        backdrop-filter: none !important;
    }

    .category-tag:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .category-tag.active {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(147, 155, 200, 0.3) !important;
        background: rgba(147, 155, 200, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    .category-tag.active::before {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        top: -4px !important;
        right: -4px !important;
    }

    /* Emotion Pills Mobile Styling */
    .emotion-selection-container {
        margin: 1rem auto !important;
        padding: 0 0.5rem !important;
    }

    .emotion-pills {
        gap: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }

    .emotion-pill {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
        border-radius: 20px !important;
        backdrop-filter: none !important;
    }

    .emotion-pill:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .emotion-pill.active {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(147, 155, 200, 0.3) !important;
        background: rgba(147, 155, 200, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    .emotion-pill.active::after {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        top: -4px !important;
        right: -4px !important;
    }

    .emotion-pill i {
        font-size: 0.9rem !important;
    }

    /* Emotion-specific colors when active on mobile */
    .emotion-pill[data-emotion="happy"].active {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.4), rgba(255, 193, 7, 0.2)) !important;
        border-color: rgba(255, 193, 7, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4) !important;
    }

    .emotion-pill[data-emotion="sad"].active {
        background: linear-gradient(135deg, rgba(108, 117, 125, 0.4), rgba(108, 117, 125, 0.2)) !important;
        border-color: rgba(108, 117, 125, 0.8) !important;
        box-shadow: 0 2px 8px rgba(108, 117, 125, 0.4) !important;
    }

    .emotion-pill[data-emotion="angry"].active {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.4), rgba(220, 53, 69, 0.2)) !important;
        border-color: rgba(220, 53, 69, 0.8) !important;
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4) !important;
    }

    .emotion-pill[data-emotion="scared"].active {
        background: linear-gradient(135deg, rgba(102, 16, 242, 0.4), rgba(102, 16, 242, 0.2)) !important;
        border-color: rgba(102, 16, 242, 0.8) !important;
        box-shadow: 0 2px 8px rgba(102, 16, 242, 0.4) !important;
    }

    .emotion-pill[data-emotion="excited"].active {
        background: linear-gradient(135deg, rgba(255, 69, 0, 0.4), rgba(255, 69, 0, 0.2)) !important;
        border-color: rgba(255, 69, 0, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 69, 0, 0.4) !important;
    }

    .emotion-pill[data-emotion="confused"].active {
        background: linear-gradient(135deg, rgba(255, 165, 0, 0.4), rgba(255, 165, 0, 0.2)) !important;
        border-color: rgba(255, 165, 0, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4) !important;
    }

    .emotion-pill[data-emotion="peaceful"].active {
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.4), rgba(40, 167, 69, 0.2)) !important;
        border-color: rgba(40, 167, 69, 0.8) !important;
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4) !important;
    }

    /* Ensure peaceful pill starts in default state on mobile */
    .emotion-pill[data-emotion="peaceful"]:not(.active) {
        background: rgba(61, 67, 94, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .emotion-pill[data-emotion="anxious"].active {
        background: linear-gradient(135deg, rgba(255, 105, 180, 0.4), rgba(255, 105, 180, 0.2)) !important;
        border-color: rgba(255, 105, 180, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 105, 180, 0.4) !important;
    }

    .emotion-pill[data-emotion="nostalgic"].active {
        background: linear-gradient(135deg, rgba(75, 0, 130, 0.4), rgba(75, 0, 130, 0.2)) !important;
        border-color: rgba(75, 0, 130, 0.8) !important;
        box-shadow: 0 2px 8px rgba(75, 0, 130, 0.4) !important;
    }

    .emotion-pill[data-emotion="empowered"].active {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.2)) !important;
        border-color: rgba(255, 215, 0, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4) !important;
    }

    .emotion-pill[data-emotion="lonely"].active {
        background: linear-gradient(135deg, rgba(128, 128, 128, 0.4), rgba(128, 128, 128, 0.2)) !important;
        border-color: rgba(128, 128, 128, 0.8) !important;
        box-shadow: 0 2px 8px rgba(128, 128, 128, 0.4) !important;
    }

    .emotion-pill[data-emotion="curious"].active {
        background: linear-gradient(135deg, rgba(0, 191, 255, 0.4), rgba(0, 191, 255, 0.2)) !important;
        border-color: rgba(0, 191, 255, 0.8) !important;
        box-shadow: 0 2px 8px rgba(0, 191, 255, 0.4) !important;
    }

    .emotion-pill[data-emotion="surprised"].active {
        background: linear-gradient(135deg, rgba(255, 20, 147, 0.4), rgba(255, 20, 147, 0.2)) !important;
        border-color: rgba(255, 20, 147, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 20, 147, 0.4) !important;
    }

    .emotion-pill[data-emotion="relieved"].active {
        background: linear-gradient(135deg, rgba(50, 205, 50, 0.4), rgba(50, 205, 50, 0.2)) !important;
        border-color: rgba(50, 205, 50, 0.8) !important;
        box-shadow: 0 2px 8px rgba(50, 205, 50, 0.4) !important;
    }

    .emotion-pill[data-emotion="hopeful"].active {
        background: linear-gradient(135deg, rgba(255, 255, 0, 0.4), rgba(255, 255, 0, 0.2)) !important;
        border-color: rgba(255, 255, 0, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 255, 0, 0.4) !important;
    }

    .emotion-pill[data-emotion="frustrated"].active {
        background: linear-gradient(135deg, rgba(255, 69, 0, 0.4), rgba(255, 69, 0, 0.2)) !important;
        border-color: rgba(255, 69, 0, 0.8) !important;
        box-shadow: 0 2px 8px rgba(255, 69, 0, 0.4) !important;
    }
}