* { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Poppins', sans-serif;
            background: #eef2f7;
            min-height: 100vh;
            padding: 20px;
            overflow-x: hidden;
        }

        /* Floating Chat Button */
        .chat-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 65px;
            height: 65px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4CAF50, #2e8b57);
            color: #fff;
            font-size: 28px;
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            z-index: 10000;
            transition: all .3s ease;
        }

        .chat-toggle.hidden { opacity: 0; pointer-events: none; }

        /* Chat Popup */
        .chat-popup {
            display: none;
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100vw;
            height: 100dvh;
            background: #fff;
            flex-direction: column;
            z-index: 9999;
            animation: slideUp .3s ease;
        }

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

        /* Desktop Mode */
        @media (min-width: 768px) {
            .chat-popup {
                width: 420px;
                height: 600px;
                border-radius: 20px;
                right: 20px;
                bottom: 90px;
                left: auto;
                top: auto;
                border: 1px solid #ddd;
                box-shadow: 0 20px 60px rgba(0,0,0,.3);
            }
        }

        /* Header */
        .chat-header {
            background: linear-gradient(135deg, #4CAF50, #2e8b57);
            padding: 15px 20px;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 20px 20px 0 0;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            background: #8bc34a;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        /* Chat Log */
        .chat-log {
            flex: 1;
            padding: 18px;
            background: #f7f7f7;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .chat-bubble {
            max-width: 80%;
            padding: 12px 18px;
            border-radius: 18px;
            font-size: 15px;
            line-height: 1.4;
        }

        .bot {
            align-self: flex-start;
            background: #fff;
            border: 1px solid #e8e8e8;
        }

        .user {
            align-self: flex-end;
            background: #4CAF50;
            color: #fff;
        }

        /* Input Area */
        .chat-input {
            display: flex;
            padding: 14px;
            border-top: 1px solid #ddd;
            background: #fff;
        }

        .chat-input input {
            flex: 1;
            padding: 13px 18px;
            border-radius: 25px;
            border: 1.5px solid #ccc;
            outline: none;
            font-size: 15px;
        }

        .chat-input button {
            margin-left: 12px;
            width: 50px;
            height: 50px;
            background: #4CAF50;
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        /* Desktop: never hide the toggle button */
        @media (min-width: 768px) {
            .chat-toggle.hidden {
                opacity: 1 !important;
                pointer-events: auto !important;
            }
        }