html,
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;

            background:
                linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.92)),
                url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=1800&auto=format&fit=crop');

            background-size: cover;
            background-position: center;

            color: #f5f5f5;
            font-family: Arial, sans-serif;
        }

        /* TOP BAR */

        .topbar {
            height: 70px;
            background: rgba(0,0,0,0.78);
            backdrop-filter: blur(10px);

            border-bottom: 1px solid #242424;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 24px;

            position: fixed;
            top: 0;
            left: 0;
            right: 0;

            z-index: 1000;
        }

        .brand {
            font-size: 1.4rem;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .brand i {
            color: #ff0066;
        }

        .bot-status {
            color: #ff8ab5;
            font-size: 0.95rem;
        }

        /* MAIN CHAT */

        .chat-wrapper {
            height: 100vh;
            padding-top: 70px;

            display: flex;
            justify-content: center;
        }

        .chat-container {
            width: 100%;
            max-width: 1000px;

            display: flex;
            flex-direction: column;

            background: rgba(10,10,10,0.72);
            backdrop-filter: blur(14px);

            border-left: 1px solid #1f1f1f;
            border-right: 1px solid #1f1f1f;
        }

        /* CHAT MESSAGES */

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 30px 20px 120px 20px;
        }

        .message {
            display: flex;
            margin-bottom: 22px;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message.ai {
            justify-content: flex-start;
        }

        .bubble {
            max-width: 78%;
            padding: 16px 18px;
            border-radius: 20px;
            line-height: 1.5;
            font-size: 1rem;
            position: relative;
        }

        /* USER BUBBLE */

        .message.user .bubble {
            background: linear-gradient(135deg, #ff0066, #ff3b89);
            color: white;

            border-bottom-right-radius: 6px;

            box-shadow: 0 0 18px rgba(255,0,102,0.25);
        }

        /* AI BUBBLE */

        .message.ai .bubble {
            background: rgba(255,255,255,0.06);

            border: 1px solid rgba(255,255,255,0.08);

            color: #f0f0f0;

            border-bottom-left-radius: 6px;
        }

        /* AI HEADER */

        .ai-header {
            display: flex;
            align-items: center;
            gap: 10px;

            margin-bottom: 8px;

            color: #ff8ab5;
            font-size: 0.85rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .ai-header i {
            color: #ff0066;
        }

        /* INPUT AREA */

        .chat-input-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;

            padding: 20px;

            background:
                linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.75));

            backdrop-filter: blur(12px);
        }

        .input-wrapper {
            max-width: 1000px;
            margin: auto;
        }

        .chat-form {
            display: flex;
            gap: 12px;
        }

        .chat-input {
            flex: 1;

            background: rgba(255,255,255,0.07) !important;

            border: 1px solid rgba(255,255,255,0.08) !important;

            color: white !important;

            border-radius: 16px !important;

            padding: 14px 18px !important;

            font-size: 1rem;
        }

        .chat-input:focus {
            box-shadow: 0 0 0 0.2rem rgba(255,0,102,0.18) !important;
            border-color: #ff0066 !important;
        }

        .chat-input::placeholder {
            color: #9d9d9d;
        }

        .send-btn {
            background: #ff0066;
            border: none;

            color: white;

            border-radius: 14px;

            width: 60px;

            font-size: 1.2rem;

            transition: 0.3s;
        }

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

        /* GLITCH TITLE */

        .glitch {
            position: relative;
            display: inline-block;
        }

        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            width: 100%;
            overflow: hidden;
        }

        .glitch::before {
            color: #ff0066;
            z-index: -1;
            animation: glitchTop 1.3s infinite linear alternate-reverse;
        }

        .glitch::after {
            color: #00d9ff;
            z-index: -2;
            animation: glitchBottom 1.7s infinite linear alternate-reverse;
        }

        @keyframes glitchTop {

            0% {
                clip-path: inset(0 0 70% 0);
                transform: translate(-2px, -2px);
            }

            100% {
                clip-path: inset(0 0 5% 0);
                transform: translate(2px, 2px);
            }

        }

        @keyframes glitchBottom {

            0% {
                clip-path: inset(70% 0 0 0);
                transform: translate(2px, 2px);
            }

            100% {
                clip-path: inset(5% 0 0 0);
                transform: translate(-2px, -2px);
            }

        }

        /* SCROLLBAR */

        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #111;
        }

        ::-webkit-scrollbar-thumb {
            background: #2a2a2a;
            border-radius: 20px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #444;
        }

        /* MOBILE */

        @media(max-width: 768px) {

            .topbar {
                padding: 0 16px;
            }

            .brand {
                font-size: 1.1rem;
            }

            .bot-status {
                display: none;
            }

            .bubble {
                max-width: 92%;
                font-size: 0.95rem;
            }

            .chat-messages {
                padding: 20px 14px 130px 14px;
            }

            .chat-input-area {
                padding: 14px;
            }

        }