<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>DZ Assistant - AI Sales Chat</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- Markdown and Syntax Highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="DZ Assistant">
    <meta name="description" content="Your Lightspeed sales assistant powered by Grok">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="apple-touch-icon" href="/static/icon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/icon-512.png">
    <link rel="apple-touch-startup-image" href="/static/icon-512.png">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="manifest" href="/manifest.json">
    <style>
        /* CSS Variables for xAI Brand Colors with Liquid Glass Support */
        :root {
            --bg-primary: #000000;
            --bg-secondary: #1a1a1a;
            --bg-tertiary: #2a2a2a;
            --text-primary: #ffffff;
            --text-secondary: #b0b0b0;
            --accent: #0055ff;
            --accent-hover: #0040cc;
            --border: #333333;
            --success: #00d4aa;
            --warning: #ff9500;
            --error: #ff3b30;
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --border-radius: 8px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

            /* Liquid Glass Variables */
            --liquid-glass-blur: 20px;
            --liquid-glass-opacity: 0.8;
            --liquid-glass-refraction: 1.2;
            --liquid-glass-border: rgba(255, 255, 255, 0.1);
            --liquid-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            --liquid-glass-user-bg: rgba(0, 85, 255, 0.1); /* xAI blue with transparency */
            --liquid-glass-assistant-bg: rgba(26, 26, 26, 0.8); /* Dark gray for assistant */
            --liquid-glass-user-text: var(--text-primary);
            --liquid-glass-assistant-text: var(--text-primary);
            --liquid-glass-user-border: rgba(0, 85, 255, 0.2);
            --liquid-glass-assistant-border: rgba(255, 255, 255, 0.1);
            --liquid-glass-chat-bg: transparent;
        }

        /* Liquid Glass Transparency Modes */
        [data-liquid-glass="clear"] {
            --liquid-glass-blur: 30px;
            --liquid-glass-opacity: 0.6;
            --liquid-glass-border: rgba(255, 255, 255, 0.05);
            --liquid-glass-user-bg: rgba(0, 85, 255, 0.05); /* More transparent in clear mode */
            --liquid-glass-assistant-bg: rgba(26, 26, 26, 0.6);
            --liquid-glass-user-border: rgba(0, 85, 255, 0.1);
            --liquid-glass-assistant-border: rgba(255, 255, 255, 0.05);
        }

        [data-liquid-glass="tinted"] {
            --liquid-glass-blur: 10px;
            --liquid-glass-opacity: 0.9;
            --liquid-glass-border: rgba(255, 255, 255, 0.2);
            --liquid-glass-user-bg: rgba(0, 85, 255, 0.15); /* More opaque in tinted mode */
            --liquid-glass-assistant-bg: rgba(26, 26, 26, 0.9);
            --liquid-glass-user-border: rgba(0, 85, 255, 0.3);
            --liquid-glass-assistant-border: rgba(255, 255, 255, 0.2);
        }

        /* Light mode override with Liquid Glass */
        [data-theme="light"] {
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --bg-tertiary: #e9ecef;
            --text-primary: #000000;
            --text-secondary: #666666;
            --accent: #0055ff;
            --accent-hover: #0040cc;
            --border: #dee2e6;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            /* Light mode Liquid Glass */
            --liquid-glass-blur: 20px;
            --liquid-glass-opacity: 0.85;
            --liquid-glass-border: rgba(0, 0, 0, 0.1);
            --liquid-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            --liquid-glass-user-bg: rgba(0, 85, 255, 0.08); /* Lighter blue for light mode */
            --liquid-glass-assistant-bg: rgba(248, 249, 250, 0.9); /* Light gray background */
            --liquid-glass-user-text: var(--text-primary);
            --liquid-glass-assistant-text: var(--text-primary);
            --liquid-glass-user-border: rgba(0, 85, 255, 0.15);
            --liquid-glass-assistant-border: rgba(0, 0, 0, 0.1);
            --liquid-glass-chat-bg: transparent;
        }

        [data-theme="light"][data-liquid-glass="clear"] {
            --liquid-glass-blur: 30px;
            --liquid-glass-opacity: 0.7;
            --liquid-glass-border: rgba(0, 0, 0, 0.05);
            --liquid-glass-user-bg: rgba(0, 85, 255, 0.04); /* Very light in clear mode */
            --liquid-glass-assistant-bg: rgba(248, 249, 250, 0.7);
            --liquid-glass-user-border: rgba(0, 85, 255, 0.08);
            --liquid-glass-assistant-border: rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"][data-liquid-glass="tinted"] {
            --liquid-glass-blur: 10px;
            --liquid-glass-opacity: 0.95;
            --liquid-glass-border: rgba(0, 0, 0, 0.15);
            --liquid-glass-user-bg: rgba(0, 85, 255, 0.12); /* More visible in tinted mode */
            --liquid-glass-assistant-bg: rgba(248, 249, 250, 0.95);
            --liquid-glass-user-border: rgba(0, 85, 255, 0.25);
            --liquid-glass-assistant-border: rgba(0, 0, 0, 0.15);
        }

        /* Sidebar Styles */
        .sidebar {
            position: fixed;
            top: 0;
            left: -320px;
            width: 300px;
            height: 100vh;
            background-color: var(--bg-primary);
            border-right: 1px solid var(--border);
            z-index: 1000;
            transition: left 0.3s ease;
            display: flex;
            flex-direction: column;
            /* Temporarily hide sidebar to debug */
            display: none !important;
        }

        .sidebar.open {
            left: 0;
        }

        .sidebar-header {
            padding: 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sidebar-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .sidebar-close-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            padding: 4px;
            border-radius: var(--border-radius);
            transition: background-color 0.2s ease;
        }

        .sidebar-close-btn:hover {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
        }

        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }

        .sidebar-new-chat-btn {
            width: 100%;
            background-color: var(--accent);
            color: white;
            border: none;
            padding: 12px 16px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            margin-bottom: 16px;
            transition: background-color 0.2s ease;
        }

        .sidebar-new-chat-btn:hover {
            background-color: var(--accent-hover);
        }

        .sidebar-chat-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sidebar-chat-item {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--border-radius);
            padding: 12px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
        }

        .sidebar-chat-item:hover {
            background-color: var(--bg-tertiary);
            border-color: var(--accent);
        }

        .sidebar-chat-item.active {
            background-color: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .sidebar-chat-title {
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 4px;
            color: inherit;
        }

        .sidebar-chat-preview {
            font-size: 12px;
            color: var(--text-secondary);
            opacity: 0.8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none;
            transition: all 0.3s ease;
            /* Temporarily hide overlay to debug */
            display: none !important;
        }

        .sidebar-overlay.active {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto;
        }

        /* Desktop sidebar (always visible) */
        @media (min-width: 769px) {
            .sidebar {
                position: relative;
                left: 0;
                width: 280px;
                flex-shrink: 0;
            }

            .sidebar-toggle,
            .sidebar-overlay {
                display: none;
            }

            .container {
                display: flex;
            }

            .main-content {
                flex: 1;
                display: flex !important;
                flex-direction: column;
                visibility: visible !important;
            }
        }


        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: var(--bg-primary);
            font-family: var(--font-family);
            font-size: 16px;
            line-height: 1.5;
            color: var(--text-primary);
            -webkit-user-select: text;
            user-select: text;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        .container {
            flex: 1;
            display: flex;
            flex-direction: column;
            max-width: 100%;
            margin: 0;
            padding: 0;
            height: 100dvh; /* Use dynamic viewport height for mobile compatibility */
            background-color: var(--bg-primary);
            position: relative;
            z-index: 1;
        }

        .header {
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: calc(12px + env(safe-area-inset-top)) 16px 12px; /* iMessage: 12px top/bottom, 16px sides */
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
            min-height: 44px; /* iMessage: 44px header height */

            /* Liquid Glass Effects */
            backdrop-filter: blur(var(--liquid-glass-blur));
            -webkit-backdrop-filter: blur(var(--liquid-glass-blur));
            background: rgba(var(--bg-secondary-rgb, 26, 26, 26), var(--liquid-glass-opacity));
            border-bottom: 1px solid var(--liquid-glass-border);
            box-shadow: var(--liquid-glass-shadow);
        }

        .header #conversations-btn {
            position: absolute;
            left: 16px;
        }

        .header-title {
            text-align: center;
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
        }

        .header-actions {
            position: absolute;
            right: 16px;
            display: flex;
            gap: 8px;
        }

        .header-title {
            flex: 1;
            text-align: center;
            font-weight: 600;
            font-size: 17px; /* iMessage: 17px header text */
            color: var(--accent);
            margin: 0 8px; /* Add margin to prevent overlap with buttons */
        }

        .header-actions {
            display: flex;
            gap: 8px; /* Space between buttons */
        }

        .header-btn {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 16px; /* iMessage: 16px button text */
            padding: 8px 12px; /* iMessage: 8px vertical, 12px horizontal */
            cursor: pointer;
            border-radius: 8px; /* iMessage: 8px button radius */
            transition: background-color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
        }

        .header-btn:hover {
            background-color: var(--bg-tertiary);
        }

        .chat-history {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;

            /* Liquid Glass Effects */
            backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.3));
            -webkit-backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.3));
            background: var(--liquid-glass-chat-bg);
        }

        .chat-history::-webkit-scrollbar {
            display: none;
        }

        .message {
            margin: 8px 0; /* iMessage: 8px between bubbles */
            padding: 12px; /* iMessage: 12px padding */
            border-radius: 18px; /* iMessage: 18px border radius */
            word-wrap: break-word;
            animation: liquidGlassFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            line-height: 1.2; /* iMessage: tighter line height */
            max-width: 100%;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* iMessage: subtle shadow */
            white-space: pre-wrap;
            font-size: 16px; /* iMessage: 16px body text */

            /* Liquid Glass Effects */
            backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.5));
            -webkit-backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.5));
            border: 1px solid var(--liquid-glass-border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Fluid animation */
        }

        .message:hover {
            transform: translateY(-1px);
            animation: liquidGlassPulse 2s infinite;
        }

        .message h1, .message h2, .message h3, .message h4, .message h5, .message h6 {
            color: var(--accent);
            font-weight: 600;
            margin: 16px 0 8px 0;
            font-size: 18px;
        }

        .message h4 {
            font-size: 16px;
        }

        .message ul, .message ol {
            margin: 12px 0;
            padding-left: 20px;
        }

        .message li {
            margin: 6px 0;
            line-height: 1.5;
        }

        .message li strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .message p {
            margin: 12px 0;
            line-height: 1.6;
        }

        .message em {
            color: var(--text-secondary);
            font-style: italic;
        }

        .message code {
            background-color: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 14px;
        }

        .message pre {
            background-color: var(--bg-tertiary);
            padding: 12px;
            border-radius: var(--border-radius);
            overflow-x: auto;
            margin: 12px 0;
        }

        .message pre code {
            background: none;
            padding: 0;
        }

        .message img {
            max-width: 100%;
            height: auto;
            border-radius: var(--border-radius);
            margin: 12px 0;
        }

        .message table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0;
            background-color: var(--bg-secondary);
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .message th, .message td {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        .message th {
            background-color: var(--bg-tertiary);
            font-weight: 600;
        }

        .message-timestamp {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
            display: block;
        }

        .user-message .message-timestamp {
            text-align: right;
        }

        .assistant-message .message-timestamp {
            text-align: left;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .user-message {
            background: var(--liquid-glass-user-bg);
            color: var(--liquid-glass-user-text);
            margin-left: auto;
            margin-right: 12px; /* iMessage: 12px right margin */
            max-width: 75%; /* iMessage: max 75% width */
            text-align: left;
            align-self: flex-end;
            border-radius: 18px 18px 4px 18px; /* iMessage tail: smaller bottom-right radius */

            /* Liquid Glass Effects */
            backdrop-filter: blur(var(--liquid-glass-blur));
            -webkit-backdrop-filter: blur(var(--liquid-glass-blur));
            border: 1px solid var(--liquid-glass-user-border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), /* iMessage: enhanced shadow */
                        0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .assistant-message {
            background: var(--liquid-glass-assistant-bg);
            color: var(--liquid-glass-assistant-text);
            margin-right: auto;
            margin-left: 12px; /* iMessage: 12px left margin */
            max-width: 85%; /* iMessage: 85% max width */
            text-align: left;
            align-self: flex-start;
            border-radius: 18px 18px 18px 4px; /* iMessage tail: smaller bottom-left radius */

            /* Liquid Glass Effects */
            backdrop-filter: blur(var(--liquid-glass-blur));
            -webkit-backdrop-filter: blur(var(--liquid-glass-blur));
            border: 1px solid var(--liquid-glass-assistant-border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), /* iMessage: enhanced shadow */
                        0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .history-message {
            background-color: var(--bg-tertiary);
            color: var(--text-primary);
            margin: 8px auto;
            padding: 12px 16px;
            border-radius: var(--border-radius);
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            max-width: 90%;
            clear: both;
            transition: background-color 0.2s ease;
        }

        .history-message:hover {
            background-color: var(--bg-secondary);
        }

        .loading-message {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            margin-right: auto;
            margin-left: 0;
            padding: 12px 16px;
            border-radius: var(--border-radius);
            display: inline-flex;
            align-items: center;
            max-width: 120px;
            box-shadow: var(--shadow);
            float: left;
            clear: both;
            width: auto;
        }

        .dot {
            width: 6px;
            height: 6px;
            background-color: var(--accent);
            border-radius: 50%;
            margin: 0 2px;
            animation: blink 1.4s infinite both;
        }

        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }

        .input-container {
            background-color: var(--bg-primary);
            flex: 0 0 auto;
            box-sizing: border-box;
            padding: 2px 12px; /* iMessage: minimal vertical padding, 12px horizontal */
            margin-bottom: env(safe-area-inset-bottom);
            border-top: 1px solid var(--border);
            min-height: 44px; /* iMessage: exact 44px input bar height */

            /* Liquid Glass Effects */
            backdrop-filter: blur(var(--liquid-glass-blur));
            -webkit-backdrop-filter: blur(var(--liquid-glass-blur));
            background: rgba(var(--bg-primary-rgb, 0, 0, 0), var(--liquid-glass-opacity));
            border-top: 1px solid var(--liquid-glass-border);
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
        }

        .input-group {
            display: flex;
            align-items: center;
            background-color: var(--bg-secondary);
            border-radius: 22px; /* iMessage exact radius: 22px */
            padding: 2px 12px; /* iMessage: minimal padding */
            gap: 8px; /* iMessage: 8px gap between input and button */
            min-height: 36px; /* Ensure proper height within 44px container */

            /* Liquid Glass Effects */
            backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.8));
            -webkit-backdrop-filter: blur(calc(var(--liquid-glass-blur) * 0.8));
            background: rgba(var(--bg-secondary-rgb, 26, 26, 26), calc(var(--liquid-glass-opacity) * 0.9));
            border: 1px solid var(--liquid-glass-border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Fluid animation */
        }

        #user-input {
            border: none;
            outline: none;
            flex: 1;
            padding: 8px 0; /* iMessage: 8px top/bottom padding in input */
            font-size: 16px; /* iMessage: 16px font size */
            background: transparent;
            color: var(--text-primary);
            font-family: var(--font-family);
            -webkit-appearance: none;
            appearance: none;
            resize: none;
            min-height: 20px; /* iMessage: minimum 20px height */
            max-height: 72px; /* iMessage: max ~3 lines at 24px line height */
            overflow-y: auto;
            line-height: 1.2; /* iMessage: tighter line height */
        }

        #user-input:focus {
            outline: none;
        }

        #user-input::placeholder {
            color: var(--text-secondary);
        }

        #send-btn {
            background: none;
            border: none;
            color: var(--accent);
            font-size: 16px;
            padding: 8px;
            cursor: pointer;
            border-radius: var(--border-radius);
            transition: background-color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
        }

        #send-btn:hover {
            background-color: var(--bg-tertiary);
        }

        .suggestion-btn {
            background-color: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 8px 16px;
            margin: 4px 8px 4px 0;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 14px;
            font-family: var(--font-family);
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .suggestion-btn:hover {
            background-color: var(--accent);
            color: #000000;
            border-color: var(--accent);
        }

        .message-suggestions {
            margin: 8px 0;
            padding: 8px 16px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            clear: both;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes blink {
            0% { opacity: 0.3; }
            20% { opacity: 1; }
            100% { opacity: 0.3; }
        }

        /* Liquid Glass Fluid Animations */
        @keyframes liquidGlassFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.95);
                backdrop-filter: blur(0px);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                backdrop-filter: blur(var(--liquid-glass-blur));
            }
        }

        @keyframes liquidGlassPulse {
            0% {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }
            50% {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
            }
            100% {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }
        }

        /* Mobile Optimizations */
        @media (max-width: 768px) {
            .header {
                padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
                font-size: 16px;
            }

            .message {
                margin: 8px 0; /* iMessage: 8px between bubbles on mobile */
                padding: 12px; /* iMessage: 12px padding on mobile */
                font-size: 16px; /* iMessage: 16px on mobile */
                max-width: 100%;
            }

            .message h3, .message h4 {
                font-size: 17px; /* iMessage: 17px headers on mobile */
                margin: 8px 0 4px 0; /* iMessage: tighter header margins */
            }

            .message h4 {
                font-size: 16px;
            }

            .user-message {
                max-width: 75%; /* iMessage: 75% on mobile */
                margin-right: 8px;
            }

            .assistant-message {
                max-width: 85%; /* iMessage: 85% on mobile */
                margin-left: 8px;
            }

            .input-container {
                padding: 2px 12px; /* iMessage: minimal padding on mobile */
            }

            .input-group {
                padding: 2px 12px; /* iMessage: consistent padding */
                border-radius: 22px; /* iMessage radius */
            }

            #user-input {
                font-size: 16px; /* iMessage: 16px font size */
                padding: 8px 0; /* iMessage: input padding */
                line-height: 1.2; /* iMessage: line height */
            }

            #send-btn {
                padding: 4px; /* iMessage: minimal button padding */
                font-size: 16px;
            }

            .chat-history {
                padding: 6px 8px;
            }
        }

        /* iOS Safe Area Handling */
        @supports (-webkit-touch-callout: none) {
            .input-container {
                margin-bottom: env(safe-area-inset-bottom);
            }

            .header {
                padding-top: calc(12px + env(safe-area-inset-top));
            }

            /* iOS PWA Optimizations */
            html, body {
                /* Prevent zoom on input focus */
                -webkit-text-size-adjust: 100%;
                /* Smooth scrolling */
                -webkit-overflow-scrolling: touch;
                /* Prevent bounce scrolling in PWA mode */
                overscroll-behavior: none;
            }

            /* Better touch feedback */
            * {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
                -webkit-touch-callout: none;
                -webkit-user-select: text;
                user-select: text;
            }

            /* Disable text selection on UI elements */
            button, .header-btn, .suggestion-btn {
                -webkit-user-select: none;
                user-select: none;
                -webkit-touch-callout: none;
            }

            /* Smooth animations for iOS */
            .message {
                will-change: transform;
                transform: translateZ(0); /* Force hardware acceleration */
            }

            /* iOS input handling */
            #user-input {
                /* Prevent zoom on focus */
                font-size: 16px; /* iOS won't zoom if font-size >= 16px */
                /* Better keyboard handling */
                -webkit-appearance: none;
                appearance: none;
                border-radius: 0;
            }

            /* iOS scrollbar styling */
            ::-webkit-scrollbar {
                width: 4px;
                height: 4px;
            }

            ::-webkit-scrollbar-track {
                background: transparent;
            }

            ::-webkit-scrollbar-thumb {
                background: var(--border);
                border-radius: 2px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--text-secondary);
            }

            /* iOS status bar styling for PWA */
            .header {
                /* Ensure proper spacing from status bar */
                padding-top: max(2px, env(safe-area-inset-top));
            }

            /* iOS gesture improvements */
            .chat-history {
                /* Enable momentum scrolling */
                -webkit-overflow-scrolling: touch;
                /* Prevent horizontal scroll */
                overflow-x: hidden;
            }

            /* iOS modal improvements */
            .conversations-modal {
                /* Better backdrop for iOS */
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
        }

        /* Additional Mobile Optimizations */
        @media (max-width: 768px) and (max-height: 900px) {
            /* Compact layout for smaller screens */
            .header {
                padding: calc(1px + env(safe-area-inset-top)) 6px 1px;
                min-height: 32px; /* Very tight for iMessage-like feel */
            }

            .header-btn {
                min-width: 32px;
                min-height: 32px;
                padding: 4px;
            }

            .message {
                margin: 4px 0;
                padding: 10px 12px;
                font-size: 15px;
                line-height: 1.4;
            }

            .input-container {
                padding: 2px 6px;
            }

            .input-group {
                padding: 2px 6px;
            }

            .suggestion-btn {
                padding: 6px 12px;
                font-size: 13px;
                margin: 2px 4px 2px 0;
            }
        }

        /* iOS Dark Mode Support */
        @media (prefers-color-scheme: dark) {
            :root {
                --bg-primary: #000000;
                --bg-secondary: #1a1a1a;
                --bg-tertiary: #2a2a2a;
                --text-primary: #ffffff;
                --text-secondary: #b0b0b0;
                --accent: #0055ff;
                --border: #333333;
            }
        }

        /* Performance optimizations for mobile */
        .message, .input-group, .header {
            contain: layout style paint;
        }

        /* Reduce motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Mobile keyboard handling */
        body.keyboard-visible .input-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }

        body.keyboard-visible .chat-history {
            margin-bottom: 80px; /* Space for fixed input */
        }

        /* Dynamic viewport height for mobile browsers */
        .container {
            min-height: calc(var(--vh, 1vh) * 100);
        }

        /* iOS PWA specific ultra-tight spacing */
        body.ios-pwa {
            margin: 0 !important;
            padding: 0 !important;
            height: 100vh !important;
            height: 100dvh !important; /* Dynamic viewport height for mobile */
        }

        body.ios-pwa html {
            margin: 0 !important;
            padding: 0 !important;
            height: 100vh !important;
            height: 100dvh !important;
        }

        body.ios-pwa .header {
            padding: calc(12px + env(safe-area-inset-top)) 16px 12px; /* iMessage: 12px top/bottom, 16px sides */
            min-height: 44px; /* iMessage: 44px header height */
        }

        /* Force input to bottom edge for iOS PWA - iMessage exact dimensions */
        body.ios-pwa .input-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2px 12px; /* iMessage: 2px top/bottom, 12px sides */
            margin-bottom: 0px; /* Override default margin */
            z-index: 10;
        }

        body.ios-pwa .container {
            height: 100vh;
            height: 100dvh;
            /* Ensure chat-history can scroll properly with fixed input */
            position: relative;
        }

        /* iMessage exact input group styling for iOS PWA */
        body.ios-pwa .input-group {
            border-radius: 22px; /* iMessage exact radius */
            padding: 2px 12px; /* iMessage minimal padding */
            gap: 8px; /* iMessage gap */
        }

        body.ios-pwa #user-input {
            padding: 8px 0; /* iMessage input padding */
            line-height: 1.2; /* iMessage line height */
            font-size: 16px; /* iMessage font size */
        }

        /* iMessage exact message styling for iOS PWA */
        body.ios-pwa .message {
            margin: 8px 0; /* iMessage: 8px between bubbles */
            padding: 12px; /* iMessage: 12px padding */
            border-radius: 18px; /* iMessage: 18px border radius */
            line-height: 1.2; /* iMessage: tighter line height */
            font-size: 16px; /* iMessage: 16px body text */
        }

        body.ios-pwa .user-message {
            margin-right: 8px; /* iMessage: 8px right margin */
            max-width: 75%; /* iMessage: 75% max width */
        }

        body.ios-pwa .assistant-message {
            margin-left: 8px; /* iMessage: 8px left margin */
            max-width: 85%; /* iMessage: 85% max width */
        }

        body.ios-pwa .chat-history {
            padding: 2px;
            /* Add bottom padding to account for fixed input container */
            padding-bottom: calc(44px + env(safe-area-inset-bottom));
            /* Ensure proper scrolling in PWA mode */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;
        }

        /* Try to get even closer to edges for iOS PWA */
        body.ios-pwa .container {
            padding-top: 0;
            padding-bottom: 0;
        }

        body.ios-pwa {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            margin: 0 !important;
        }

        body.ios-pwa html {
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Conversations Modal */
        .conversations-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000;
            backdrop-filter: blur(2px);
        }

        .conversations-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .conversations-content {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            max-width: 400px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .conversations-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .conversations-header h3 {
            margin: 0;
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
        }

        .conversations-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-primary);
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            transition: background-color 0.2s;
        }

        .conversations-close:hover {
            background: var(--bg-tertiary);
        }

        .conversation-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            margin-bottom: 8px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .conversation-item:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent);
        }

        .conversation-item.active {
            border-color: var(--accent);
            background: var(--accent);
            color: white;
        }

        .conversation-preview {
            flex: 1;
            min-width: 0;
        }

        .conversation-title {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .conversation-item.active .conversation-title {
            color: white;
        }

        .conversation-date {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .conversation-item.active .conversation-date {
            color: rgba(255, 255, 255, 0.8);
        }

        .conversation-delete {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s;
            margin-left: 8px;
        }

        .conversation-delete:hover {
            color: #ff4444;
            background: rgba(255, 68, 68, 0.1);
        }

        .no-conversations {
            text-align: center;
            color: var(--text-secondary);
            padding: 40px 20px;
            font-style: italic;
        }
    </style>
</head>
<body>
        <div class="container">
            <div class="header">
                <button id="conversations-btn" class="header-btn" title="Conversations">☰</button>
                <div class="header-title">DZ Assistant</div>
                <div class="header-actions">
                    <button id="new-chat-btn" class="header-btn" title="New Chat">+</button>
                </div>
            </div>
                <div id="chat-history" class="chat-history">
                    <!-- Bottom spacer/anchor ensures scroll target sits above input bar -->
                    <div id="chat-bottom-anchor" style="height: 8px;"></div>
                </div>
        <div class="input-container">
            <div class="input-group">
                <textarea id="user-input" placeholder="ask anything" autocomplete="off" rows="1"></textarea>
                <button id="send-btn">➤</button>
            </div>
        </div>
    </div>

    <!-- Conversations Modal -->
    <div id="conversations-modal" class="conversations-modal">
        <div class="conversations-content">
            <div class="conversations-header">
                <h3>Conversations</h3>
                <button class="conversations-close" id="conversations-close">&times;</button>
            </div>
            <div id="conversations-list">
                <!-- Conversations will be populated here -->
            </div>
        </div>
    </div>

    <script>
        // Load conversation history (welcome message) on page load
        window.onload = function() {
            initializeConversations();
            initializeTheme();
            initializeLiquidGlass();
            
            // Check if we have saved conversations with messages
            const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
            const currentId = localStorage.getItem('currentConversationId');
            const currentConversation = conversations.find(c => c.id === currentId);
            
            if (conversations.length > 0 && currentConversation && currentConversation.messages.length > 0) {
                // Load existing conversation with messages from localStorage
                loadCurrentConversation();
            } else {
                // No conversations or current conversation is empty, show welcome message
                fetchConversationHistory();
            }

            // Attach all button event listeners after DOM is ready
            document.getElementById('send-btn').addEventListener('click', sendMessage);
            document.getElementById('user-input').addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            document.getElementById('user-input').addEventListener('input', function() {
                autoResizeTextarea(this);
            });
            document.getElementById('new-chat-btn').addEventListener('click', startNewConversation);
            document.getElementById('conversations-btn').addEventListener('click', openConversationsModal);
            document.getElementById('conversations-close').addEventListener('click', closeConversationsModal);

            // Close modal when clicking outside
            document.getElementById('conversations-modal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeConversationsModal();
                }
            });
        };

        // Theme management
        function initializeConversations() {
            if (!localStorage.getItem('conversations')) {
                localStorage.setItem('conversations', JSON.stringify([]));
            }
            if (!localStorage.getItem('currentConversationId')) {
                startNewConversation();
            }
        }

        function startNewConversation() {
            const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
            const newId = Date.now().toString();
            const newConversation = {
                id: newId,
                title: 'New Chat',
                messages: [],
                created: new Date().toISOString()
            };
            conversations.push(newConversation);
            localStorage.setItem('conversations', JSON.stringify(conversations));
            localStorage.setItem('currentConversationId', newId);
            
            // Clear chat and show welcome message for new conversations
            const chatHistory = document.getElementById('chat-history');
            chatHistory.innerHTML = '';
            fetchConversationHistory();
        }

        function loadCurrentConversation() {
            const currentId = localStorage.getItem('currentConversationId');
            if (currentId) {
                loadConversation(currentId);
            } else {
                startNewConversation();
            }
        }

        function loadConversation(conversationId) {
            const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
            const conversation = conversations.find(c => c.id === conversationId);
            if (conversation) {
                const chatHistory = document.getElementById('chat-history');
                chatHistory.innerHTML = '';
                conversation.messages.forEach(msg => {
                    appendMessage(msg.role, msg.content, false); // Don't save when loading
                });
                localStorage.setItem('currentConversationId', conversationId);
                // Force scroll to bottom after loading all messages
                setTimeout(() => scrollToBottom(true), 100);
            }
        }

        function saveCurrentConversation() {
            const currentId = localStorage.getItem('currentConversationId');
            if (!currentId) return;
            
            const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
            const conversation = conversations.find(c => c.id === currentId);
            if (conversation) {
                // Get current messages from DOM
                const messageElements = document.querySelectorAll('.message');
                conversation.messages = [];
                messageElements.forEach(el => {
                    const isUser = el.classList.contains('user-message');
                    const timestamp = el.querySelector('.message-timestamp')?.textContent || '';
                    const content = el.innerHTML.replace(/<span class="message-timestamp">.*?<\/span>/, '').trim();
                    conversation.messages.push({
                        role: isUser ? 'user' : 'assistant',
                        content: content,
                        timestamp: timestamp
                    });
                });
                localStorage.setItem('conversations', JSON.stringify(conversations));
            }
        }

        // Conversations modal functions
        function openConversationsModal() {
            const modal = document.getElementById('conversations-modal');
            const list = document.getElementById('conversations-list');
            const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
            const currentId = localStorage.getItem('currentConversationId');

            list.innerHTML = '';

            if (conversations.length === 0) {
                list.innerHTML = '<div class="no-conversations">No conversations yet. Start a new chat!</div>';
            } else {
                conversations.forEach(conv => {
                    const item = document.createElement('div');
                    item.className = 'conversation-item';
                    if (conv.id === currentId) {
                        item.classList.add('active');
                    }

                    const firstMessage = conv.messages.find(m => m.role === 'user');
                    const title = firstMessage ? firstMessage.content.substring(0, 40) + (firstMessage.content.length > 40 ? '...' : '') : 'New Chat';
                    const date = new Date(conv.created).toLocaleDateString();

                    item.innerHTML = `
                        <div class="conversation-preview">
                            <div class="conversation-title">${title}</div>
                            <div class="conversation-date">${date}</div>
                        </div>
                        <button class="conversation-delete" onclick="deleteConversation('${conv.id}', event)">🗑️</button>
                    `;

                    item.addEventListener('click', (e) => {
                        if (!e.target.classList.contains('conversation-delete')) {
                            loadConversation(conv.id);
                            closeConversationsModal();
                        }
                    });

                    list.appendChild(item);
                });
            }

            modal.classList.add('show');
        }

        function closeConversationsModal() {
            const modal = document.getElementById('conversations-modal');
            modal.classList.remove('show');
        }

        function deleteConversation(conversationId, event) {
            event.stopPropagation();
            if (confirm('Are you sure you want to delete this conversation?')) {
                const conversations = JSON.parse(localStorage.getItem('conversations') || '[]');
                const filtered = conversations.filter(c => c.id !== conversationId);
                localStorage.setItem('conversations', JSON.stringify(filtered));

                const currentId = localStorage.getItem('currentConversationId');
                if (currentId === conversationId) {
                    if (filtered.length > 0) {
                        loadConversation(filtered[0].id);
                    } else {
                        startNewConversation();
                    }
                }

                openConversationsModal(); // Refresh the modal
            }
        }

        function setTheme(theme) {
            console.log('Setting theme to:', theme);
            // Apply to both <html> and <body> to maximize selector coverage
            document.documentElement.setAttribute('data-theme', theme);
            if (document.body) document.body.setAttribute('data-theme', theme);
            localStorage.setItem('theme', theme);
            console.log('Theme set to:', document.documentElement.getAttribute('data-theme'));
        }

        function initializeTheme() {
            const savedTheme = localStorage.getItem('theme') || 'dark';
            setTheme(savedTheme);
        }

        function initializeLiquidGlass() {
            const savedMode = localStorage.getItem('liquid-glass-mode') || 'tinted';
            setLiquidGlassMode(savedMode);

            // Detect iOS 26 Liquid Glass transparency changes
            if (window.visualViewport) {
                window.visualViewport.addEventListener('resize', () => {
                    // iOS 26 may change transparency based on content
                    const isKeyboardVisible = window.innerHeight < window.visualViewport.height;
                    const newMode = isKeyboardVisible ? 'clear' : 'tinted';
                    setLiquidGlassMode(newMode);
                });
            }
        }

        // Liquid Glass Transparency Mode Handling
        function setLiquidGlassMode(mode) {
            console.log('Setting Liquid Glass mode to:', mode);
            document.documentElement.setAttribute('data-liquid-glass', mode);
            if (document.body) document.body.setAttribute('data-liquid-glass', mode);
            localStorage.setItem('liquid-glass-mode', mode);
            console.log('Liquid Glass mode set to:', mode);
        }

        function showInfo() {
            // Show app info or settings
            alert('GrokSpeed AI Assistant\nPowered by xAI Grok\nLightspeed POS Integration');
        }

        function showMessageActions(messageDiv, role, content) {
            // Create action menu like iMessage
            const actions = ['Copy', 'Reply'];
            if (role === 'user') {
                actions.push('Edit');
            }
            actions.push('Delete');
            
            // Simple alert for now - could be enhanced with a proper modal
            const action = prompt('Message Actions:\n' + actions.map((a, i) => `${i + 1}. ${a}`).join('\n') + '\n\nEnter number:');
            
            if (action) {
                const actionNum = parseInt(action) - 1;
                if (actions[actionNum]) {
                    performMessageAction(actions[actionNum], messageDiv, content);
                }
            }
        }

        function performMessageAction(action, messageDiv, content) {
            switch (action) {
                case 'Copy':
                    navigator.clipboard.writeText(content).then(() => {
                        showToast('Copied to clipboard');
                    });
                    break;
                case 'Reply':
                    const replyInput = document.getElementById('user-input');
                    replyInput.focus();
                    // Could add reply prefix here
                    break;
                case 'Edit':
                    const editInput = document.getElementById('user-input');
                    editInput.value = content;
                    editInput.focus();
                    break;
                case 'Delete':
                    if (confirm('Delete this message?')) {
                        messageDiv.remove();
                        saveCurrentConversation();
                    }
                    break;
            }
        }

        function showToast(message) {
            // Simple toast notification
            const toast = document.createElement('div');
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 12px 24px;
                border-radius: 8px;
                z-index: 10000;
                font-size: 14px;
            `;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        }

        function toggleTheme() {
            const currentTheme = document.documentElement.getAttribute('data-theme') || 'dark';
            console.log('Current theme:', currentTheme);
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            console.log('Switching to theme:', newTheme);
            setTheme(newTheme);
        }

        function autoResizeTextarea(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }

        function sendMessageFromButton(message) {
            var input = document.getElementById('user-input');
            input.value = message;
            sendMessage();
        }

        function generateSuggestions(content) {
            var suggestions = [];
            var lowerContent = content.toLowerCase();
            
            if (lowerContent.includes('sales') || lowerContent.includes('revenue')) {
                suggestions.push('Show hourly breakdown');
                suggestions.push('Compare to last week');
                suggestions.push('Top performing outlets');
            }
            
            if (lowerContent.includes('outlet') || lowerContent.includes('location')) {
                suggestions.push('Rank all outlets');
                suggestions.push('Show trends over time');
            }
            
            if (lowerContent.includes('today') || lowerContent.includes('yesterday')) {
                suggestions.push('Compare to last month');
                suggestions.push('Show payment methods');
            }
            
            // Default suggestions if none match
            if (suggestions.length === 0) {
                suggestions.push('Tell me more');
                suggestions.push('Show examples');
            }
            
            return suggestions.slice(0, 3); // Max 3 suggestions
        }

        // Sidebar initialization with error prevention - TEMPORARILY DISABLED
        function initializeSidebar() {
            console.log('Sidebar initialization disabled for debugging');
            // Temporarily disabled to test if main content appears
        }

        // Sidebar management
        function openSidebar() {
            console.log('Opening sidebar...');
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            if (sidebar) {
                sidebar.classList.add('open');
                console.log('Sidebar opened');
            }
            if (overlay) {
                overlay.classList.add('active');
                console.log('Overlay activated');
            }
            loadSidebarChatHistory();
        }

        function closeSidebar() {
            console.log('Closing sidebar...');
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            if (sidebar) {
                sidebar.classList.remove('open');
                console.log('Sidebar closed');
            }
            if (overlay) {
                overlay.classList.remove('active');
                console.log('Overlay deactivated');
            }
        }

        function loadSidebarChatHistory() {
            fetch('/api/chat_history', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                const chatList = document.getElementById('sidebar-chat-list');
                chatList.innerHTML = '';

                if (data.history && data.history.length > 0) {
                    data.history.forEach((conversation, index) => {
                        const chatItem = document.createElement('div');
                        chatItem.className = 'sidebar-chat-item';
                        chatItem.dataset.conversationId = index;

                        // Get the first user message as preview
                        const firstUserMessage = conversation.find(msg => msg.role === 'user');
                        const preview = firstUserMessage ?
                            firstUserMessage.content.substring(0, 50) + (firstUserMessage.content.length > 50 ? '...' : '') :
                            'New conversation';

                        chatItem.innerHTML = `
                            <div class="sidebar-chat-title">Chat ${index + 1}</div>
                            <div class="sidebar-chat-preview">${preview}</div>
                        `;

                        chatItem.addEventListener('click', function() {
                            loadConversation(index);
                            closeSidebar();
                        });

                        chatList.appendChild(chatItem);
                    });
                } else {
                    chatList.innerHTML = '<div class="sidebar-chat-item">No previous conversations</div>';
                }
            })
            .catch(error => {
                console.error('Error loading sidebar chat history:', error);
                const chatList = document.getElementById('sidebar-chat-list');
                chatList.innerHTML = '<div class="sidebar-chat-item">Error loading chat history</div>';
            });
        }

        function fetchConversationHistory() {
            fetch('/api/init', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.response) {
                    appendMessage('assistant', data.response, false);
                }
            })
            .catch(error => {
                appendMessage('assistant', 'Oops, something went wrong loading the conversation!');
                console.error('Fetch error:', error);
            });
        }

        // Removed history-btn code to fix console error




        function sendMessage() {
            var input = document.getElementById('user-input');
            var message = input.value.trim();
            if (!message) return;

            appendMessage('user', message);
            input.value = '';
            input.focus();

            var loading = appendLoadingMessage();

            fetch('/api/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message: message })
            })
            .then(response => response.json())
            .then(data => {
                removeMessage(loading);
                appendMessage('assistant', data.response);
            })
            .catch(error => {
                removeMessage(loading);
                appendMessage('assistant', 'Error: Could not send message');
            });
        }

        function scrollToBottom(force = false) {
            const chatHistory = document.getElementById('chat-history');
            const bottom = document.getElementById('chat-bottom-anchor');
            if (!chatHistory || !bottom) return;

            const isIOSPWA = document.body.classList.contains('ios-pwa');

            // iMessage behavior: only auto-scroll if user is near bottom (unless forced)
            if (!force) {
                const scrollTop = chatHistory.scrollTop;
                const scrollHeight = chatHistory.scrollHeight;
                const clientHeight = chatHistory.clientHeight;
                const distanceFromBottom = scrollHeight - scrollTop - clientHeight;

                // In PWA mode, account for fixed input overlay (reduce threshold)
                const threshold = isIOSPWA ? 50 : 100; // Smaller threshold for PWA

                // Only auto-scroll if within threshold of bottom (like iMessage)
                if (distanceFromBottom > threshold) {
                    return; // User has scrolled up, don't auto-scroll
                }
            }

            // iMessage-style smooth scrolling with momentum
            const startPosition = chatHistory.scrollTop;
            let targetPosition = bottom.offsetTop - chatHistory.clientHeight + bottom.clientHeight;

            // In PWA mode, adjust scroll target to account for fixed input overlay
            if (isIOSPWA) {
                // The chat-history has bottom padding for the input, so scroll to just above that padding
                const inputContainer = document.querySelector('.input-container');
                if (inputContainer) {
                    const inputHeight = Math.ceil(inputContainer.getBoundingClientRect().height);
                    targetPosition = bottom.offsetTop - inputHeight - 8; // 8px buffer
                }
            }

            const distance = targetPosition - startPosition;

            if (Math.abs(distance) < 1) return; // Already at bottom

            // Use smooth momentum scrolling like iMessage
            chatHistory.scrollTo({
                top: targetPosition,
                behavior: 'smooth'
            });
        }

        function appendMessage(role, content, saveToStorage = true) {
            var chatHistory = document.getElementById('chat-history');
            var bottomAnchor = document.getElementById('chat-bottom-anchor');
            if (!bottomAnchor) {
                bottomAnchor = document.createElement('div');
                bottomAnchor.id = 'chat-bottom-anchor';
                bottomAnchor.style.height = '8px';
                chatHistory.appendChild(bottomAnchor);
            }
            
            // Add clearfix div before message to ensure proper spacing
            var clearDiv = document.createElement('div');
            clearDiv.classList.add('clearfix');
            chatHistory.insertBefore(clearDiv, bottomAnchor);
            
            var messageDiv = document.createElement('div');
            messageDiv.classList.add('message', role + '-message');
            
            // Add iMessage-style long-press for message actions
            let longPressTimer;
            let isLongPress = false;
            
            messageDiv.addEventListener('contextmenu', function(e) {
                e.preventDefault();
                showMessageActions(messageDiv, role, content);
            });
            
            messageDiv.addEventListener('touchstart', function(e) {
                isLongPress = false;
                longPressTimer = setTimeout(function() {
                    isLongPress = true;
                    showMessageActions(messageDiv, role, content);
                    // Add haptic feedback if available
                    if (navigator.vibrate) {
                        navigator.vibrate(50);
                    }
                }, 500); // 500ms for long press
            }, { passive: true });
            
            messageDiv.addEventListener('touchend', function(e) {
                clearTimeout(longPressTimer);
                if (!isLongPress) {
                    // Normal tap - could add reply functionality here
                }
            }, { passive: true });
            
            messageDiv.addEventListener('touchmove', function(e) {
                clearTimeout(longPressTimer);
            }, { passive: true });
            
            if (role === 'assistant') {
                let parsedContent = marked.parse(content);
                // Parse [BUTTONS] markers into clickable buttons
                parsedContent = parsedContent.replace(/\[BUTTONS\](.*?)\[\/BUTTONS\]/g, (match, buttonText) => {
                    return `<button class="suggestion-btn" onclick="sendMessageFromButton('${buttonText.replace(/'/g, '\\\'')}')">${buttonText}</button>`;
                });
                messageDiv.innerHTML = parsedContent;
                hljs.highlightAll();
            } else {
                messageDiv.innerHTML = content;
            }
            
            // Add timestamp after content
            var timestamp = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
            var timestampSpan = document.createElement('span');
            timestampSpan.classList.add('message-timestamp');
            timestampSpan.textContent = timestamp;
            messageDiv.appendChild(timestampSpan);
            
            // Add suggestion buttons for assistant messages inside the message
            if (role === 'assistant') {
                var suggestionsDiv = document.createElement('div');
                suggestionsDiv.classList.add('message-suggestions');
                var suggestions = generateSuggestions(content);
                suggestions.forEach(function(suggestion) {
                    var btn = document.createElement('button');
                    btn.classList.add('suggestion-btn');
                    btn.textContent = suggestion;
                    btn.onclick = function() {
                        sendMessageFromButton(suggestion);
                    };
                    suggestionsDiv.appendChild(btn);
                });
                messageDiv.appendChild(suggestionsDiv);
            }
            
            chatHistory.insertBefore(messageDiv, bottomAnchor);
            
            // Add another clearfix after message
            var clearAfterDiv = document.createElement('div');
            clearAfterDiv.classList.add('clearfix');
            chatHistory.insertBefore(clearAfterDiv, bottomAnchor);

            if (saveToStorage) {
                saveCurrentConversation();
            }

            // Robust scroll to bottom anchor after render
            // Force scroll for user messages and assistant messages (active conversation)
            // Use setTimeout to ensure DOM is fully rendered
            setTimeout(() => scrollToBottom(role === 'user' || role === 'assistant'), 50);

            const img = messageDiv.querySelector('img[src^="data:image/svg+xml"]');
            if (img && !img.complete) {
                img.onerror = () => console.error('SVG image failed to load:', img.src);
            }
            return messageDiv;
        }

        function appendLoadingMessage() {
            var chatHistory = document.getElementById('chat-history');
            var bottomAnchor = document.getElementById('chat-bottom-anchor');
            if (!bottomAnchor) {
                bottomAnchor = document.createElement('div');
                bottomAnchor.id = 'chat-bottom-anchor';
                bottomAnchor.style.height = '8px';
                chatHistory.appendChild(bottomAnchor);
            }
            var loadingDiv = document.createElement('div');
            loadingDiv.classList.add('message', 'loading-message');
            loadingDiv.innerHTML = '<div class="dot"></div><div class="dot"></div><div class="dot"></div>';
            chatHistory.insertBefore(loadingDiv, bottomAnchor);
            scrollToBottom(true); // Force scroll for loading indicator
            return loadingDiv;
        }

        function removeMessage(element) {
            if (element && element.parentNode) {
                element.parentNode.removeChild(element);
                scrollToBottom(true); // Force scroll when removing loading messages
            }
        }

        // PWA Service Worker Registration
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(reg => console.log('Service Worker registered:', reg))
                    .catch(err => console.error('Service Worker registration failed:', err));
            });
        }

        // Mobile PWA Enhancements
        (function() {
            // iOS PWA detection
            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
            const isInStandaloneMode = ('standalone' in window.navigator) && (window.navigator.standalone);

            if (isIOS && isInStandaloneMode) {
                console.log('Running as iOS PWA');
                document.body.classList.add('ios-pwa');

                // Prevent zoom on input focus for iOS PWA
                const viewport = document.querySelector('meta[name=viewport]');
                if (viewport) {
                    viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';
                }

                // iOS-specific touch optimizations
                document.addEventListener('touchstart', function() {}, { passive: true });

                // Handle iOS keyboard show/hide
                let initialViewportHeight = window.innerHeight;
                window.addEventListener('resize', function() {
                    const currentViewportHeight = window.innerHeight;
                    const heightDiff = initialViewportHeight - currentViewportHeight;

                    // If height difference is significant, keyboard is likely shown
                    if (heightDiff > 150) {
                        document.body.classList.add('keyboard-visible');
                    } else {
                        document.body.classList.remove('keyboard-visible');
                        initialViewportHeight = currentViewportHeight;
                    }
                });

                // iOS haptic feedback simulation (limited support)
                function triggerHapticFeedback() {
                    if ('vibrate' in navigator) {
                        navigator.vibrate(10);
                    }
                }

                // Add haptic feedback to buttons
                document.addEventListener('touchstart', function(e) {
                    if (e.target.matches('button, .header-btn, .suggestion-btn')) {
                        triggerHapticFeedback();
                    }
                }, { passive: true });
            }

            // Performance optimizations for mobile
            let scrollTimeout;
            const chatHistory = document.getElementById('chat-history');

            if (chatHistory) {
                // Throttle scroll events for better performance
                chatHistory.addEventListener('scroll', function() {
                    clearTimeout(scrollTimeout);
                    scrollTimeout = setTimeout(function() {
                        // Force layout recalculation less frequently
                        chatHistory.style.transform = 'translateZ(0)';
                    }, 16); // ~60fps
                }, { passive: true });

                // Auto-scroll to bottom when new messages arrive (mobile optimized)
                const autoScrollObserver = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                            // Use debounced scroll to prevent conflicts with height recalculation
                            debouncedScroll();
                        }
                    });
                });

                autoScrollObserver.observe(chatHistory, {
                    childList: true,
                    subtree: true
                });
            }

            // Mobile viewport height fix for iOS Safari
            function setVH() {
                const vh = window.innerHeight * 0.01;
                document.documentElement.style.setProperty('--vh', `${vh}px`);
            }

            setVH();
            window.addEventListener('resize', setVH);
            window.addEventListener('orientationchange', function() {
                setTimeout(setVH, 100);
            });

            // Dynamic height calculation for chat history to prevent overlap with fixed input
            function getVisualViewportHeight() {
                if (window.visualViewport && typeof window.visualViewport.height === 'number') {
                    return window.visualViewport.height;
                }
                return window.innerHeight;
            }

            // Debounce function to prevent timing conflicts
            function debounce(func, wait) {
                let timeout;
                return function executedFunction(...args) {
                    const later = () => {
                        clearTimeout(timeout);
                        func(...args);
                    };
                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                };
            }

            // Debounced versions to prevent conflicts between height recalc and scrolling
            const debouncedSetHeight = debounce(() => {
                setChatHistoryHeight();
                // Only scroll after height is set, with small delay for DOM update
                setTimeout(() => scrollToBottom(), 50);
            }, 100);

            const debouncedScroll = debounce(() => scrollToBottom(), 50);

            function measureInputHeight() {
                const inputContainer = document.querySelector('.input-container');
                if (!inputContainer) return 52; // fallback to iMessage input height
                // Include borders and any dynamic growth from textarea rows
                return Math.ceil(inputContainer.getBoundingClientRect().height);
            }

            function setChatHistoryHeight() {
                const header = document.querySelector('.header');
                const chatHistory = document.getElementById('chat-history');
                if (!header || !chatHistory) return;

                const isMobile = window.innerWidth <= 768;
                const isIOSPWA = document.body.classList.contains('ios-pwa');
                console.log('setChatHistoryHeight: isMobile =', isMobile, 'isIOSPWA =', isIOSPWA, 'window.innerWidth =', window.innerWidth);

                // PWA mode: input is fixed, so use full height minus header only
                if (isIOSPWA) {
                    const headerHeight = Math.ceil(header.getBoundingClientRect().height);
                    const vh = getVisualViewportHeight();
                    const availableHeight = Math.max(0, vh - headerHeight);
                    chatHistory.style.height = availableHeight + 'px';
                    console.log('PWA mode: Set chatHistory height to:', chatHistory.style.height);
                    return;
                }

                // Desktop: use flexbox, clear explicit height
                if (!isMobile) {
                    chatHistory.style.height = '';
                    return;
                }

                // Mobile (non-PWA): calculate height accounting for input
                const headerHeight = Math.ceil(header.getBoundingClientRect().height);
                const inputHeight = measureInputHeight();
                const vh = getVisualViewportHeight();
                // Input already accounts for safe area with margin-bottom
                const availableHeight = Math.max(0, vh - headerHeight - inputHeight);
                console.log('Mobile mode: headerHeight:', headerHeight, 'inputHeight:', inputHeight, 'vh:', vh, 'availableHeight:', availableHeight);
                chatHistory.style.height = availableHeight + 'px';
                console.log('Set chatHistory height to:', chatHistory.style.height);
            }

            // Set initial height and update on resize/orientation change and viewport changes
            setChatHistoryHeight();
            // Initial scroll to ensure proper positioning
            setTimeout(() => scrollToBottom(true), 100);
            window.addEventListener('resize', debouncedSetHeight);
            window.addEventListener('orientationchange', function() {
                setTimeout(debouncedSetHeight, 100);
            });
            if (window.visualViewport) {
                window.visualViewport.addEventListener('resize', debouncedSetHeight);
                window.visualViewport.addEventListener('scroll', debouncedSetHeight);
            }

            // Recompute when textarea grows/shrinks (but not in PWA mode where input is fixed)
            const userInput = document.getElementById('user-input');
            if (userInput && !document.body.classList.contains('ios-pwa')) {
                userInput.addEventListener('input', debouncedSetHeight);
            }

        })();
    </script>
</body>
</html>