<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>404 - Page Not Found | ChatBot</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow: hidden;
        }

        .error-container {
            background: white;
            max-width: 600px;
            width: 100%;
            padding: 60px 40px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            text-align: center;
            position: relative;
            animation: slideUp 0.6s ease-out;
        }

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

        .error-code {
            font-size: 120px;
            font-weight: 700;
            color: #667eea;
            line-height: 1;
            margin-bottom: 20px;
            text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        .error-title {
            font-size: 32px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .error-message {
            font-size: 18px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .error-description {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }

        .error-description h3 {
            color: #333;
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .error-description p {
            color: #666;
            font-size: 16px;
            line-height: 1.5;
        }

        .suggestions {
            text-align: left;
            margin-bottom: 30px;
        }

        .suggestions h4 {
            color: #333;
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .suggestions ul {
            list-style: none;
            padding: 0;
        }

        .suggestions li {
            color: #666;
            margin-bottom: 8px;
            padding-left: 20px;
            position: relative;
            font-size: 15px;
        }

        .suggestions li:before {
            content: "→";
            color: #667eea;
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }

        .btn {
            padding: 14px 28px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            min-width: 140px;
            justify-content: center;
        }

        .btn-primary {
            background: #667eea;
            color: white;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .btn-primary:hover {
            background: #5a67d8;
            box-shadow: 0 6px 16px rgba(90, 103, 216, 0.4);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #4a5568;
            border: 1px solid #cbd5e0;
        }

        .btn-secondary:hover {
            background: #cbd5e0;
            transform: translateY(-2px);
        }

        .btn-outline {
            background: transparent;
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-outline:hover {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .chatbot-info {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px;
            border-radius: 12px;
            margin-top: 20px;
        }

        .chatbot-info h4 {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .chatbot-info p {
            font-size: 15px;
            opacity: 0.9;
            line-height: 1.5;
        }

        .footer-links {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: #667eea;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .shape {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 6s infinite ease-in-out;
        }

        .shape:nth-child(1) {
            width: 80px;
            height: 80px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .shape:nth-child(2) {
            width: 60px;
            height: 60px;
            top: 20%;
            right: 15%;
            animation-delay: 2s;
        }

        .shape:nth-child(3) {
            width: 40px;
            height: 40px;
            bottom: 20%;
            left: 20%;
            animation-delay: 4s;
        }

        .shape:nth-child(4) {
            width: 100px;
            height: 100px;
            bottom: 10%;
            right: 10%;
            animation-delay: 1s;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
                opacity: 0.7;
            }
            50% {
                transform: translateY(-20px) rotate(180deg);
                opacity: 0.3;
            }
        }

        @media (max-width: 768px) {
            .error-container {
                padding: 40px 20px;
                margin: 10px;
            }

            .error-code {
                font-size: 80px;
            }

            .error-title {
                font-size: 24px;
            }

            .error-message {
                font-size: 16px;
            }

            .action-buttons {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 300px;
            }

            .footer-links {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
        }

        @media (max-width: 480px) {
            .error-code {
                font-size: 60px;
            }

            .error-title {
                font-size: 20px;
            }

            .suggestions {
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- Floating background shapes -->
    <div class="floating-shapes">
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
    </div>

    <div class="error-container">
        <div class="error-code">404</div>

        <h1 class="error-title">Oops! Page Not Found</h1>

        <p class="error-message">
            The page you're looking for seems to have wandered off into the digital void.
            Don't worry, even the best explorers sometimes take a wrong turn!
        </p>

        <div class="error-description">
            <h3>🤔 What happened?</h3>
            <p>
                The requested URL was not found on this server. This could be due to a
                mistyped URL, a moved page, or a link that's no longer valid.
            </p>
        </div>

        <div class="suggestions">
            <h4>Here's what you can try:</h4>
            <ul>
                <li>Check the URL for any typos or spelling errors</li>
                <li>Use your browser's back button to return to the previous page</li>
                <li>Visit our homepage and navigate from there</li>
                <li>Try searching for what you're looking for</li>
                <li>Contact support if you believe this is an error</li>
            </ul>
        </div>

        <div class="action-buttons">
            <a href="{{ url_for('home') }}" class="btn btn-primary">
                🏠 Go Home
            </a>

            {% if current_user %}
                <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">
                    📊 Dashboard
                </a>
            {% else %}
                <a href="{{ url_for('login') }}" class="btn btn-secondary">
                    🔐 Login
                </a>
            {% endif %}

            <a href="javascript:history.back()" class="btn btn-outline">
                ↩️ Go Back
            </a>
        </div>

        <div class="chatbot-info">
            <h4>🤖 ChatBot Application</h4>
            <p>
                You're currently using our ChatBot platform. If you were trying to access
                a specific chat or feature, please navigate through the main menu or
                contact our support team for assistance.
            </p>
        </div>

        <div class="footer-links">
            <a href="{{ url_for('home') }}">Home</a>
            {% if current_user %}
                <a href="{{ url_for('dashboard') }}">Dashboard</a>
                <a href="{{ url_for('profile') }}">Profile</a>
            {% else %}
                <a href="{{ url_for('login') }}">Login</a>
                <a href="{{ url_for('register') }}">Register</a>
            {% endif %}
            <a href="mailto:support@chatbot.com">Support</a>
        </div>
    </div>

    <script>
        // Add some interactivity
        document.addEventListener('DOMContentLoaded', function() {
            // Add a subtle shake animation to the 404 code when clicked
            const errorCode = document.querySelector('.error-code');
            errorCode.addEventListener('click', function() {
                this.style.animation = 'none';
                setTimeout(() => {
                    this.style.animation = 'bounce 0.5s ease-in-out 3';
                }, 10);
            });

            // Add random movement to floating shapes
            const shapes = document.querySelectorAll('.shape');
            shapes.forEach((shape, index) => {
                shape.addEventListener('animationiteration', function() {
                    const randomX = Math.random() * 100;
                    const randomY = Math.random() * 100;
                    this.style.left = randomX + '%';
                    this.style.top = randomY + '%';
                });
            });

            // Show a fun message in console
            console.log(`
    🤖 ChatBot 404 Error
    ════════════════════

    Looks like you've discovered our 404 page!
    If you're a developer, here are some debug details:

    • URL: ${window.location.href}
    • Referrer: ${document.referrer || 'Direct access'}
    • User Agent: ${navigator.userAgent}
    • Timestamp: ${new Date().toISOString()}

    Need help? Contact our development team!
            `);
        });
    </script>
</body>
</html>