{% load static %}

<!-- 引入 CSS (假设你已按上一步在 static/blog/css/ 创建了 ai_chat.css) -->
<link rel="stylesheet" href="{% static 'blog/css/ai_chat.css' %}">

<!-- 悬浮球 -->
<div id="aiChatBtn" class="ai-chat-btn" title="点击咨询技术助手">
    <svg viewBox="0 0 24 24">
        <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A2,2 0 0,1 14,8A2,2 0 0,1 12,10A2,2 0 0,1 10,8A2,2 0 0,1 12,6M12,18A2,2 0 0,1 10,16A2,2 0 0,1 12,14A2,2 0 0,1 14,16A2,2 0 0,1 12,18Z" />
    </svg>
</div>

<!-- 聊天窗口 -->
<div id="aiChatWindow" class="ai-chat-window">
    <div class="ai-header">
        <span>DeepSeek 技术助手</span>
        <span class="close-btn">&times;</span>
    </div>
    <div id="aiMessages" class="ai-messages">
        <div class="message ai">你好！我是本站的技术助手，有什么可以帮你的吗？</div>
    </div>
    <div class="ai-input-area">
        <input type="text" id="aiUserInput" placeholder="输入你的问题..." autocomplete="off">
        <button id="aiSendBtn">发送</button>
    </div>
</div>

<!-- 引入 JS (假设你已按上一步在 static/blog/js/ 创建了 ai_chat.js) -->
<script src="{% static 'blog/js/ai_chat.js' %}"></script>