            #unishine-shop-assist-container {
                position: fixed;
                <?php echo esc_attr(strpos($position, 'right') !== false ? 'right: 20px;' : 'left: 20px;'); ?>
                <?php echo esc_attr(strpos($position, 'bottom') !== false ? 'bottom: 20px;' : 'top: 20px;'); ?>
                z-index: 9999;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            }
            #unishine-shop-assist-button {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: <?php echo esc_attr($primary_color); ?>;
                color: white;
                border: none;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                transition: all 0.3s;
            }
            #unishine-shop-assist-button:hover {
                transform: scale(1.1);
                box-shadow: 0 6px 16px rgba(0,0,0,0.2);
            }
            #unishine-shop-assist-window {
                display: none;
                position: fixed;
                <?php echo esc_attr(strpos($position, 'right') !== false ? 'right: 20px;' : 'left: 20px;'); ?>
                <?php echo esc_attr(strpos($position, 'bottom') !== false ? 'bottom: 90px;' : 'top: 90px;'); ?>
                width: 380px;
                height: 600px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 8px 24px rgba(0,0,0,0.15);
                flex-direction: column;
                overflow: hidden;
            }
            #unishine-shop-assist-window.active {
                display: flex;
            }
            .unishine-shop-assist-header {
                color: white;
                padding: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .unishine-shop-assist-header h3 {
                margin: 0;
                font-size: 16px;
            }
            .unishine-shop-assist-close {
                background: none;
                border: none;
                color: white;
                font-size: 20px;
                cursor: pointer;
                padding: 0;
                width: 24px;
                height: 24px;
            }
            .unishine-shop-assist-messages {
                flex: 1;
                overflow-y: auto;
                padding: 16px;
                background: #f5f5f5;
            }
            .unishine-shop-assist-message {
                margin-bottom: 12px;
                display: flex;
                gap: 8px;
            }
            .unishine-shop-assist-message.user {
                justify-content: flex-end !important;
            }
            .unishine-shop-assist-message-content {
                max-width: 70%;
                padding: 10px 14px;
                border-radius: 12px;
                word-wrap: break-word;
            }
            .unishine-shop-assist-message.bot .unishine-shop-assist-message-content {
                background: white;
                color: #333;
            }
            .unishine-shop-assist-message.user .unishine-shop-assist-message-content {
                background: <?php echo esc_attr($primary_color); ?>;
                color: white;
            }
            .unishine-shop-assist-input-area {
                padding: 16px;
                border-top: 1px solid #e8e8e8;
                display: flex;
                gap: 8px;
            }
            .unishine-shop-assist-input {
                flex: 1;
                padding: 10px 14px;
                border: 1px solid #d9d9d9;
                border-radius: 8px;
                font-size: 14px;
                outline: none;
            }
            .unishine-shop-assist-input:focus {
                border-color: <?php echo esc_attr($primary_color); ?>;
            }
            .unishine-shop-assist-send {
                padding: 10px 20px;
                background: <?php echo esc_attr($primary_color); ?>;
                color: white;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-size: 14px;
            }
            .unishine-shop-assist-send:hover {
                opacity: 0.9;
            }
            .unishine-shop-assist-send:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        </style>
        
        <div id="unishine-shop-assist-container" class="unishine-theme-<?php echo esc_attr($theme); ?>">
            <button id="unishine-shop-assist-button" onclick="wpAiChatbotToggle()">💬</button>
            
            <div id="unishine-shop-assist-window" class="unishine-theme-<?php echo esc_attr($theme); ?>">
                <div class="unishine-shop-assist-header">
                    <h3><?php echo esc_html($title); ?></h3>
                    <button class="unishine-shop-assist-close" onclick="wpAiChatbotToggle()">×</button>
                </div>
                
                <!-- Tab Navigation -->
                <div class="unishine-shop-assist-tabs">
                    <button class="wp-ai-tab-button active" data-tab="chat">
                        <span class="wp-ai-tab-icon">💬</span> Chat
                    </button>
                    <button class="wp-ai-tab-button" data-tab="history">
                        <span class="wp-ai-tab-icon">📝</span> History
                    </button>
                    <button class="wp-ai-tab-button" data-tab="settings">
                        <span class="wp-ai-tab-icon">⚙️</span> Settings
                    </button>
                </div>
                
                <!-- Chat Tab -->
                <div id="chat-tab" class="wp-ai-tab-content active">
                    <div class="unishine-shop-assist-body">
                        <div class="unishine-shop-assist-messages" id="unishine-shop-assist-messages">
                            <div class="unishine-shop-assist-message bot">
                                <div class="unishine-shop-assist-message-content">
                                    Hello! I'm your AI assistant. How can I help you today?
                                    <div class="wp-ai-message-time"><?php echo esc_html(gmdate("m/d/Y, g:i A")); ?></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="unishine-shop-assist-input-area">
                            <input type="text" class="unishine-shop-assist-input" id="unishine-shop-assist-input" placeholder="Type your question...">
                            <button class="unishine-shop-assist-send">Send</button>
                        </div>
                    </div>
                </div>
                
                <!-- History Tab -->
                <div id="history-tab" class="wp-ai-tab-content">
                    <div class="wp-ai-history-header">
                        <button class="wp-ai-export-btn" onclick="wpAiExportHistory()">📥 Export</button>
                        <button class="wp-ai-clear-btn" onclick="wpAiClearHistory()">🗑️ Clear</button>
                    </div>
                    <div class="wp-ai-history-list" id="wp-ai-history-list">
                        <p style="text-align: center; color: #999; padding: 20px;">No chat history yet</p>
                    </div>
                </div>
                
                <!-- Settings Tab -->
                <div id="settings-tab" class="wp-ai-tab-content">
                    <div class="wp-ai-settings-content">
                        <div class="wp-ai-setting-item">
                            <label for="unishine-theme-setting">🎨 Theme</label>
                            <select id="unishine-theme-setting" class="wp-ai-select">
                                <option value="blue">Blue</option>
                                <option value="green">Green</option>
                                <option value="purple">Purple</option>
                                <option value="red">Red</option>
                                <option value="dark">Dark</option>
                            </select>
                        </div>
                        
                        <div class="wp-ai-setting-item">
                            <label for="wp-ai-position-setting">📍 Position</label>
                            <select id="wp-ai-position-setting" class="wp-ai-select">
                                <option value="bottom-right">Bottom Right</option>
                                <option value="bottom-left">Bottom Left</option>
                                <option value="top-right">Top Right</option>
                                <option value="top-left">Top Left</option>
                            </select>
                        </div>
                        
                        <div class="wp-ai-setting-item">
                            <label>
                                <input type="checkbox" id="wp-ai-sound-enabled" checked>
                                <span>🔔 Sound Notification</span>
                            </label>
                        </div>
                        
                        <div class="wp-ai-setting-item">
                            <label>
                                <input type="checkbox" id="wp-ai-history-enabled" checked>
                                <span>📝 Save Chat History</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
    
    public function shortcode() {
        return '<div id="unishine-shop-assist-shortcode-placeholder"></div>';
    }
}

// Initialize plugin
new Shop_Assist_AI_Free();
