kiku-agent 1.0.11 → 1.2.0

package/server/web-chat/ui/templates/body.html

@@ -0,0 +1,796 @@
+<div class="ambient-glow aura-1"></div>
+  <div class="ambient-glow aura-2"></div>
+  <canvas id="petal-canvas" aria-hidden="true"></canvas>
+  <button type="button" class="sidebar-backdrop" id="sidebar-backdrop" onclick="toggleAppSidebar(false)" aria-label="ปิดแถบเมนู"></button>
+
+  <aside class="app-sidebar" id="app-sidebar" aria-label="KIKU AGENT navigation">
+    <div class="sidebar-brand-row">
+      <button type="button" class="sidebar-brand" onclick="createNewChatSession()" aria-label="KIKU AGENT — เริ่มแชทใหม่">
+        <span class="brand-spark"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2-4.5-4.4 6.2-.9z"/></svg></span>
+        <span class="brand-text">
+          <strong class="brand-name-wrap">KIKU AGENT</strong>
+        </span>
+      </button>
+      <button type="button" class="sidebar-icon-button sidebar-collapse-button" id="btn-sidebar-collapse" onclick="toggleAppSidebar()" title="ย่อ/ขยายแถบเมนู" aria-label="ย่อ/ขยายแถบเมนู" aria-expanded="true">
+        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+      </button>
+    </div>
+
+    <div class="sidebar-scroll-region">
+      <nav class="sidebar-nav" aria-label="เครื่องมือหลักและการสำรวจ">
+        <div class="sidebar-section-heading static">
+          <span data-sidebar-i18n="exploreHeading">Explore &amp; Features</span>
+        </div>
+        <button type="button" class="sidebar-nav-item" onclick="openSessionsModal()" title="ค้นหาประวัติการสนทนา">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          <span data-sidebar-i18n="search">Search Chat</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" id="sidebar-music-button" onclick="openMusicModal()" title="คลังเพลงและ Jukebox">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+          <span data-sidebar-i18n="music">Music Jukebox</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="openQuizModal()" title="เกมทายปัญหาแฟนคลับ">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.45 1-1 1H7.5a1.5 1.5 0 0 0 0 3h9a1.5 1.5 0 0 0 0-3H15c-.55 0-1-.45-1-1v-2.34"/><path d="M18 4H6v7a6 6 0 0 0 12 0V4Z"/></svg>
+          <span data-sidebar-i18n="quiz">Fan Quiz Challenge</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="renderTimelineModal()" title="ไทม์ไลน์เส้นทางอาชีพ">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/><line x1="4" y1="20" x2="20" y2="20"/></svg>
+          <span data-sidebar-i18n="timeline">Career Timeline</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="toggleSuggestionsDrawer()" title="หัวข้อคำถามแนะนำ">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
+          <span data-sidebar-i18n="prompts">Suggested Prompts</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="toggleSavedPrompts()" title="พรอมต์ที่บันทึกไว้">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+          <span data-sidebar-i18n="saved">Saved Prompts</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="openSponsorsModal()" title="ผู้สนับสนุนโครงการ (Sponsors & Ads)">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
+          <span data-sidebar-i18n="sponsors">Sponsors &amp; Ads</span>
+        </button>
+      </nav>
+
+      <section class="sidebar-section sidebar-history" aria-labelledby="history-section-title">
+        <div class="sidebar-section-heading static">
+          <span id="history-section-title" data-sidebar-i18n="history">Chats</span>
+          <button type="button" onclick="openSessionsModal()" title="ดูประวัติทั้งหมด" aria-label="ดูประวัติทั้งหมด">
+            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 2"/><circle cx="12" cy="12" r="9"/></svg>
+          </button>
+        </div>
+        <div class="sidebar-session-list" id="sidebar-session-list" aria-live="polite"></div>
+        <div class="sidebar-empty-chat-state" id="sidebar-empty-chat-state">
+          <div class="empty-state-circle"></div>
+          <div class="empty-state-title" data-sidebar-i18n="emptyTitle">No chat history</div>
+          <div class="empty-state-sub" data-sidebar-i18n="emptySub">Type a message to start a new chat...</div>
+        </div>
+      </section>
+
+      <!-- Sponsor Spotlight Section (Matching Kiku CLI Ads) -->
+      <section class="sidebar-section sidebar-sponsors" aria-label="ผู้สนับสนุนโครงการ">
+        <div class="sidebar-section-heading static" style="display:flex; justify-content:space-between; align-items:center;">
+          <span style="display:flex; align-items:center; gap:6px; font-weight:700; font-size:11px; letter-spacing:0.04em;">
+            <span style="color:#f472b6;">📢</span>
+            <span data-sidebar-i18n="sponsorsHeading">Sponsor Spotlight</span>
+          </span>
+          <div style="display:flex; gap:4px; align-items:center;">
+            <button type="button" class="btn-sidebar-heading-action" onclick="cycleSidebarAd(event)" title="หมุนเวียนโฆษณา (Next Sponsor)" aria-label="หมุนเวียนโฆษณา">
+              <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
+            </button>
+            <button type="button" class="btn-sidebar-heading-action" onclick="openSponsorsModal(event)" title="ดูผู้สนับสนุนทั้งหมด" aria-label="ดูผู้สนับสนุนทั้งหมด">
+              <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            </button>
+          </div>
+        </div>
+        <div class="sidebar-ad-card" id="sidebar-ad-card" onclick="openSponsorsModal(event)" onkeydown="if(event.key==='Enter'||event.key===' '){openSponsorsModal(event);}" role="button" tabindex="0" title="คลิกเพื่อดูรายละเอียดผู้สนับสนุนทั้งหมด">
+          <!-- Dynamically populated by renderSidebarAd() -->
+        </div>
+      </section>
+
+      <section class="sidebar-section sidebar-controls" aria-label="การตั้งค่าและระบบ">
+        <div class="sidebar-section-heading static">
+          <span data-sidebar-i18n="controlsHeading">System Controls</span>
+        </div>
+        <button type="button" class="sidebar-nav-item" onclick="exportChat()" title="ส่งออกบทสนทนาเป็นไฟล์ Markdown">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <span data-sidebar-i18n="export">Export Chat</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="togglePetals()" title="เปิด/ปิด กลีบดอกซากุระ">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2a4 4 0 0 0-4 4c0 3 4 5 4 5s4-2 4-5a4 4 0 0 0-4-4Z"/><path d="M12 22a4 4 0 0 0 4-4c0-3-4-5-4-5s-4 2-4 5a4 4 0 0 0 4 4Z"/><path d="M2 12a4 4 0 0 0 4 4c3 0 5-4 5-4s-2-4-5-4a4 4 0 0 0-4 4Z"/><path d="M22 12a4 4 0 0 0-4-4c-3 0-5 4-5 4s2 4 5 4a4 4 0 0 0 4-4Z"/></svg>
+          <span id="sidebar-petals-label" data-sidebar-i18n="petals">Sakura Petals</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="toggleTheme()" title="สลับโหมด กลางวัน / กลางคืน">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
+          <span id="sidebar-theme-label" data-sidebar-i18n="theme">Theme Mode</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="toggleSound()" title="เปิด/ปิด เสียงเอฟเฟกต์">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+          <span id="sidebar-sound-label" data-sidebar-i18n="sound">Sound FX</span>
+        </button>
+        <button type="button" class="sidebar-nav-item" onclick="cycleLanguage()" title="เปลี่ยนภาษา (TH / 中文 / EN)">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+          <span id="sidebar-lang-label" data-sidebar-i18n="lang">Language (TH)</span>
+        </button>
+      </section>
+    </div>
+  </aside>
+
+  <header class="workspace-toolbar">
+    <div class="toolbar-leading">
+      <button type="button" class="toolbar-sidebar-button" id="toolbar-sidebar-button" onclick="toggleAppSidebar()" title="เปิด/ปิดแถบเมนู (Sidebar)" aria-label="เปิดแถบเมนู" aria-expanded="false">
+        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
+      </button>
+    </div>
+  </header>
+
+  <div class="settings-drawer" id="settings-drawer">
+    <div class="settings-container">
+      <div class="settings-header-row">
+        <div class="settings-title-group">
+          <span class="settings-title-icon">⚙️</span>
+          <div>
+            <h4 class="settings-title">AI Engine &amp; Model Configuration</h4>
+            <p class="settings-subtitle">กำหนดค่า AI Provider, Model ID, และพารามิเตอร์การประมวลผล</p>
+          </div>
+        </div>
+        <div class="settings-status-pill" id="settings-status-pill">
+          <span class="status-dot-pulse"></span>
+          <span id="settings-provider-badge">LM Studio (Local)</span>
+        </div>
+      </div>
+
+      <div class="settings-grid-cards">
+        
+        <div class="settings-card">
+          <div class="settings-card-label">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
+            <span>โมเดลและผู้ให้บริการ (AI Provider &amp; Model)</span>
+          </div>
+          <div class="settings-card-body">
+            <div class="form-group">
+              <label for="cfg-provider" id="lbl-cfg-provider">AI Provider</label>
+              <div class="form-control-wrap">
+                <select id="cfg-provider" class="form-control" onchange="onProviderChange()">
+                  <option value="lmstudio">LM Studio (Local gemma-4-e4b / Qwen)</option>
+                  <option value="gemini">Google Gemini (Gemini 3.7 Flash / Pro)</option>
+                  <option value="openai">OpenAI (GPT-4o / o1 / o3)</option>
+                  <option value="groq">Groq (Llama 3.3 70B Fast)</option>
+                  <option value="deepseek">DeepSeek AI (V3 / R1)</option>
+                  <option value="openrouter">OpenRouter (Unified Gateway)</option>
+                </select>
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="cfg-model" id="lbl-cfg-model">Model Name / ID</label>
+              <div class="form-control-wrap">
+                <input type="text" id="cfg-model" class="form-control" placeholder="google/gemma-4-e4b" value="google/gemma-4-e4b" onchange="autoSaveSettings()">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="settings-card">
+          <div class="settings-card-label">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            <span>คีย์และการประมวลผล (Security &amp; Inference)</span>
+          </div>
+          <div class="settings-card-body">
+            <div class="form-group" id="group-cfg-apikey">
+              <label for="cfg-apikey" id="lbl-cfg-apikey">Cloud API Key</label>
+              <div class="form-control-wrap with-toggle">
+                <input type="password" id="cfg-apikey" class="form-control" placeholder="sk-... / AIza... (เว้นว่างหากใช้ LM Studio)" onchange="autoSaveSettings()">
+                <button type="button" id="btn-toggle-apikey-vis" class="btn-input-icon" onclick="toggleApiKeyVisibility()" title="แสดง/ซ่อน API Key">
+                  <svg aria-hidden="true" id="eye-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                </button>
+              </div>
+              <div id="cfg-apikey-help" class="form-help-text">🔒 ไม่จำเป็นต้องใส่หากใช้ Local LM Studio</div>
+            </div>
+
+            <div class="form-row-dual">
+              <div class="form-group" style="flex: 1;">
+                <label for="cfg-thinking" id="lbl-cfg-thinking">Thinking Mode</label>
+                <div class="form-control-wrap">
+                  <select id="cfg-thinking" class="form-control" onchange="autoSaveSettings()">
+                    <option value="show">แสดงทั้งหมด (Deep Thinking)</option>
+                    <option value="collapse">ย่อเริ่มต้น (Auto Collapse)</option>
+                    <option value="hide">ซ่อนทั้งหมด (Direct Answer)</option>
+                  </select>
+                </div>
+              </div>
+              <div class="form-group" style="flex: 1;">
+                <div class="label-with-badge">
+                  <label for="cfg-temperature" id="lbl-cfg-temp">Creativity</label>
+                  <span class="temp-badge" id="temp-val">0.7</span>
+                </div>
+                <div class="form-control-wrap slider-wrap">
+                  <input type="range" id="cfg-temperature" min="0" max="1" step="0.05" value="0.7" class="form-slider" oninput="document.getElementById('temp-val').textContent = this.value; autoSaveSettings();">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <main class="main-chat-workspace" id="main-chat-workspace">
+    <div class="main-inner">
+      <div id="chat-container">
+        <div class="welcome-hero" id="welcome-hero">
+          <section class="hero-media" aria-label="แกลเลอรีภาพจวีจิ้งอี">
+            <figure class="hero-media-frame hero-media-primary">
+              <img src="/images/0040jbadgy1id6am4yxqfj61s82dn1kx02.jpg" alt="จวีจิ้งอีในลุคชุดสีครีม" width="690" height="903" fetchpriority="high" decoding="async">
+            </figure>
+            <figure class="hero-media-frame hero-media-secondary">
+              <img src="/images/008ET7Legy1ig9s8bab6sj30i20o7go1.jpg" alt="ภาพพอร์ตเทรตจวีจิ้งอีกลางแสงธรรมชาติ" width="650" height="871" decoding="async">
+            </figure>
+            <figure class="hero-media-frame hero-media-poster">
+              <img src="/images/008ET7Legy1ig9s8cbxkzj30i20mxmzh.jpg" alt="โปสเตอร์ซีรีส์ In Blossom" width="1000" height="1778" decoding="async">
+            </figure>
+            <div class="hero-media-mark" aria-hidden="true">
+              <strong>JU JINGYI</strong>
+              <span>VISUAL ARCHIVE</span>
+            </div>
+          </section>
+
+          <div class="hero-copy">
+            <div class="hero-kicker"><span></span>KIKU AGENT</div>
+            <div class="hero-title-area">
+              <h2 class="hero-main-title">สวัสดีชาวมี่จวี (Miju)</h2>
+              <p id="hero-subtitle">วันนี้อยากร่วมเดินทางและค้นหาเรื่องราวของเสี่ยวจวีเรื่องไหนดี?</p>
+            </div>
+            <p class="hero-body" id="hero-body-text">ถามเรื่องผลงานซีรีส์ เพลงเพราะๆ สเตจในความทรงจำ หรือสวมบทบาทพูดคุยกับตัวละครโปรดได้เลย</p>
+          </div>
+        </div>
+      </div>
+
+      <button type="button" id="btn-scroll-bottom" class="btn-scroll-bottom" onclick="scrollToBottomSmooth(true)" title="เลื่อนลงล่างสุด">
+        <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M19 12l-7 7-7-7"/></svg>
+        <span>เลื่อนลงล่างสุด</span>
+      </button>
+
+      <div class="suggestions-drawer" id="suggestions-drawer">
+        <div class="suggestions-header-bar">
+          <span class="suggestions-title">
+            <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            <span id="suggestions-title-text">หัวข้อคำถามแนะนำ</span>
+          </span>
+          <span class="suggestions-header-actions">
+            <button type="button" class="btn-ai-suggest" id="btn-ai-suggest" onclick="requestAiSuggestions()" title="ให้ KIKU AI สร้างคำถาม">
+              <span id="btn-ai-suggest-label">✨ AI สร้างคำถาม</span>
+            </button>
+            <button type="button" class="btn-toggle-drawer" onclick="toggleSuggestionsDrawer()">
+              <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              <span id="suggestions-close-label">ย่อเก็บ</span>
+            </button>
+          </span>
+        </div>
+        <div class="category-tabs" id="category-tabs"></div>
+        <div class="chips-container" id="chips-container"></div>
+      </div>
+
+      <div id="attachment-tray" class="attachment-tray" style="display: none;"></div>
+
+      <!-- Futuristic Glassmorphic Voice HUD (การรับฟังเสียง AI โฉมใหม่) -->
+      <div id="voice-hud" class="voice-hud luxury-voice-hud" style="display: none;" role="region" aria-label="อินเทอร์เฟซการรับฟังเสียง">
+        <div class="voice-hud-inner">
+          <!-- Top Row: Status, Dynamic Orb, Language Controls -->
+          <div class="voice-hud-header">
+            <div class="voice-hud-identity">
+              <div class="voice-live-orb" title="ไมโครโฟนทำงานอยู่">
+                <span class="voice-orb-ring ring-1"></span>
+                <span class="voice-orb-ring ring-2"></span>
+                <span class="voice-orb-core">
+                  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+                </span>
+              </div>
+              <div class="voice-identity-meta">
+                <div class="voice-identity-title-row">
+                  <span class="voice-live-title">กำลังรับฟังเสียงสด...</span>
+                  <span id="voice-lang-badge" class="voice-lang-badge" title="ภาษาที่ตรวจพบขณะนี้">🇹🇭 ภาษาไทย</span>
+                </div>
+                <span class="voice-live-sub">พูดคำถามหรือเรื่องที่ต้องการค้นหาเกี่ยวกับจวีจิ้งอี</span>
+              </div>
+            </div>
+
+            <!-- Language Pills Bar -->
+            <div class="voice-lang-pills">
+              <button type="button" class="voice-pill active" id="vpill-th" onclick="setVoiceRecognitionLang('th-TH')" title="ภาษาไทย">🇹🇭 ไทย</button>
+              <button type="button" class="voice-pill" id="vpill-zh" onclick="setVoiceRecognitionLang('zh-CN')" title="ภาษาจีน (中文)">🇨🇳 中文</button>
+              <button type="button" class="voice-pill" id="vpill-en" onclick="setVoiceRecognitionLang('en-US')" title="English">🇺🇸 EN</button>
+            </div>
+          </div>
+
+          <!-- Middle Row: Interactive Waveform Canvas + Live Transcript Bubble -->
+          <div class="voice-hud-body">
+            <div class="voice-visualizer-wrap">
+              <canvas id="voice-canvas" class="voice-canvas" width="540" height="42" aria-hidden="true"></canvas>
+            </div>
+
+            <div class="voice-transcript-card" id="voice-transcript-card">
+              <div class="voice-transcript-content">
+                <span id="voice-hud-text" class="voice-transcript-text">“กำลังรับฟังเสียงสด... กรุณาพูดคำถามของคุณ”</span>
+                <span class="voice-streaming-cursor" aria-hidden="true"></span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Bottom Row: Quick Actions -->
+          <div class="voice-hud-footer">
+            <div class="voice-hud-hint">
+              <span class="voice-hint-bullet">●</span>
+              <span>พูดเสร็จแล้วคลิกนำไปใช้ หรือส่งคำถามทันที</span>
+            </div>
+
+            <div class="voice-hud-actions">
+              <button type="button" class="btn-voice-action btn-voice-discard" onclick="cancelSpeechRecognition()" title="ยกเลิกการบันทึกเสียง">
+                <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                <span>ยกเลิก</span>
+              </button>
+
+              <button type="button" class="btn-voice-action btn-voice-finish" onclick="toggleSpeechRecognition()" title="เสร็จสิ้น นำข้อความลงในช่องพิมพ์">
+                <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="20 6 9 17 4 12"/></svg>
+                <span>นำไปใช้</span>
+              </button>
+
+              <button type="button" class="btn-voice-action btn-voice-send" id="btn-voice-send" onclick="sendVoiceQueryDirectly()" title="ส่งคำถามนี้ไปยัง AI ทันที">
+                <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+                <span>ส่งคำถามทันที</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Chat-Integrated Mini Player Dock (ผนวกเข้ากับ UX/UI ช่องแชท) -->
+      <aside id="mini-player-dock" class="mini-player-draggable-dock chat-integrated-dock" aria-label="Ju Jingyi Mini Player">
+        <div class="mini-player-card" id="mini-player-card">
+          <div class="mini-card-drag-bar" id="mini-player-drag-handle" title="แถบสถานะเครื่องเล่นเพลง" aria-label="สถานะเครื่องเล่นเพลง">
+            <div class="drag-bar-pill"></div>
+          </div>
+
+          <div class="mini-card-video-wrap" id="mini-card-video-wrap">
+            <div id="mini-player-video-frame-container"></div>
+          </div>
+
+          <div class="mini-card-horizontal-main">
+            <div class="mini-vinyl-art-wrap">
+              <div class="mini-vinyl-art-disc" id="mini-vinyl-art-disc">
+                <img id="mini-player-poster" class="mini-card-poster" src="https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg" alt="Poster" onerror="this.onerror=null;this.src='https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg';" />
+                <div class="mini-vinyl-center-pin"></div>
+              </div>
+              <div class="poster-glow-aura" id="mini-poster-glow"></div>
+            </div>
+
+            <div class="mini-card-details">
+              <div class="mini-card-top-meta">
+                <span class="mini-card-title-cn font-calligraphy" id="mini-player-title-cn">月鳞绮纪 · 不苦</span>
+                <span class="mini-card-badge">
+                  <span class="sound-wave-equalizer" id="mini-player-equalizer" aria-hidden="true">
+                    <span class="eq-bar eq-1"></span>
+                    <span class="eq-bar eq-2"></span>
+                    <span class="eq-bar eq-3"></span>
+                    <span class="eq-bar eq-4"></span>
+                  </span>
+                  <span class="badge-text" id="mini-player-track-tag">Now Playing</span>
+                </span>
+              </div>
+              <div class="mini-card-title" id="mini-player-track-title">FIND THE WAY (2026)</div>
+              <div class="mini-card-artist" id="mini-player-track-artist">鞠婧祎 (Ju Jingyi)</div>
+            </div>
+
+            <div class="mini-card-actions">
+              <div class="mini-volume-control-wrap" id="mini-volume-wrap">
+                <button type="button" class="mini-card-btn-icon" id="btn-mini-vol" onclick="toggleMiniPlayerMute()" title="ปรับระดับเสียง" aria-label="ปรับระดับเสียง">
+                  <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+                </button>
+                <div class="mini-volume-slider-popup" id="mini-volume-popup">
+                  <input type="range" id="mini-player-volume-slider" min="0" max="100" value="100" oninput="setMiniPlayerVolume(this.value)" aria-label="Volume">
+                </div>
+              </div>
+              <button type="button" class="mini-card-btn-icon" id="btn-mini-video-toggle" onclick="toggleMiniPlayerVideo()" title="สลับดูวิดีโอ MV">
+                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="15" x="2" y="5" rx="2"/><polygon points="10 9 15 12.5 10 16 10 9"/></svg>
+              </button>
+              <button type="button" class="mini-card-btn-icon" onclick="openMusicModal()" title="เปิดคลังเพลงทั้งหมด (46 บทเพลง)">
+                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+              </button>
+              <button type="button" class="mini-card-btn-icon" onclick="setMiniPlayerExpanded(false)" title="ย่อขนาด">
+                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              </button>
+              <button type="button" class="mini-card-btn-icon" onclick="closeMiniPlayer()" title="ปิดเครื่องเล่น">
+                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="mini-card-progress-section">
+            <span class="mini-time-text" id="mini-player-cur-time">0:00</span>
+            <div class="mini-progress-bar-bg" id="mini-player-progressbar" role="slider" aria-label="Playback progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" tabindex="0" onclick="seekMiniPlayerProgress(event)" onkeydown="seekMiniPlayer(event)">
+              <div class="mini-progress-bar-val" id="mini-player-progressbar-fill"></div>
+              <div class="mini-progress-thumb" id="mini-player-progressbar-thumb"></div>
+            </div>
+            <span class="mini-time-text" id="mini-player-dur-time">3:30</span>
+          </div>
+
+          <div class="mini-card-controls-row">
+            <button type="button" class="btn-mini-ctl" id="btn-mini-shuffle" onclick="toggleMiniPlayerShuffle()" title="สลับโหมดสุ่มเพลง">
+              <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+            </button>
+            <button type="button" class="btn-mini-ctl" onclick="prevMiniPlayerTrack()" title="เพลงก่อนหน้า">
+              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" y1="19" x2="5" y2="5" stroke="currentColor" stroke-width="2"/></svg>
+            </button>
+            <button type="button" class="btn-mini-main-play" id="btn-mini-main-play" onclick="toggleMiniPlayerPlay()" title="เล่น/หยุด">
+              <span id="icon-mini-play"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg></span>
+              <span id="icon-mini-pause" style="display:none;"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg></span>
+            </button>
+            <button type="button" class="btn-mini-ctl" onclick="nextMiniPlayerTrack()" title="เพลงถัดไป">
+              <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19" stroke="currentColor" stroke-width="2"/></svg>
+            </button>
+            <button type="button" class="btn-mini-ctl" id="btn-mini-repeat" onclick="toggleMiniPlayerRepeat()" title="โหมดวนซ้ำ">
+              <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <button type="button" class="mini-player-disc-badge" id="btn-mini-disc" onclick="handleMiniDiscClick()" title="คลิกเพื่อขยายเครื่องเล่นเพลง">
+          <div class="mini-disc-graphic-wrap">
+            <span class="disc-radar-pulse" id="mini-disc-radar-pulse"></span>
+            <svg aria-hidden="true" class="mini-disc-progress-ring" viewBox="0 0 72 72">
+              <circle class="mini-disc-progress-bg" cx="36" cy="36" r="34"></circle>
+              <circle class="mini-disc-progress-val" id="mini-disc-progress-circle" cx="36" cy="36" r="34"></circle>
+            </svg>
+            <img id="mini-disc-thumb" class="mini-disc-thumb" src="https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg" alt="Disc" onerror="this.onerror=null;this.src='https://img.youtube.com/vi/9AeErG03SZw/hqdefault.jpg';" />
+            <div class="mini-disc-overlay">
+              <span id="mini-disc-icon"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg></span>
+            </div>
+          </div>
+          <div class="mini-disc-label-pill">
+            <span class="mini-disc-pill-title" id="mini-disc-pill-title">FIND THE WAY (2026)</span>
+            <span class="mini-disc-pill-hint">กำลังเล่นเพลง • คลิกเพื่อขยาย</span>
+          </div>
+          <div class="mini-disc-expand-icon">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+          </div>
+        </button>
+      </aside>
+
+      <div class="input-box" id="input-box-container">
+        <div class="input-box-top">
+          <textarea id="prompt-input" rows="1" placeholder="ถามอะไรเกี่ยวกับจวีจิ้งอีก็ได้... (กด Enter เพื่อส่ง, Shift + Enter เพื่อขึ้นบรรทัดใหม่)" onkeydown="handleInputKeyDown(event)" oninput="autoGrowTextarea(this)" aria-label="พิมพ์ข้อความถาม AI"></textarea>
+        </div>
+
+        <div class="input-box-bottom">
+          <div class="input-actions-left quick-actions-anchor">
+            <button type="button" id="btn-quick-actions" class="btn-quick-actions" title="เปิดเมนูเครื่องมือด่วน" onclick="toggleQuickActions()" aria-label="เปิดเมนูเครื่องมือด่วน" aria-expanded="false">
+              <span class="btn-quick-icon">
+                <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              </span>
+            </button>
+            <div class="quick-action-menu" id="quick-action-menu" role="menu" aria-label="เครื่องมือด่วน">
+              <button type="button" role="menuitem" onclick="handleImageUpload(); closeQuickActions()"><span class="quick-item-icon"></span><span>แนบรูปภาพ / ไฟล์</span></button>
+              <button type="button" role="menuitem" onclick="toggleSpeechRecognition(); closeQuickActions()"><span class="quick-item-icon"></span><span>สั่งงานด้วยเสียง</span></button>
+              <button type="button" role="menuitem" onclick="openQuizModal(); closeQuickActions()"><span class="quick-item-icon"></span><span>Fan Quiz Challenge</span></button>
+              <button type="button" role="menuitem" onclick="openMusicModal(); closeQuickActions()"><span class="quick-item-icon"></span><span>คลังเพลง Jukebox</span></button>
+            </div>
+
+            <button type="button" id="btn-attach" class="btn-input-tool" title="แนบรูปภาพ" onclick="handleImageUpload()">
+              <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+            </button>
+            <button type="button" id="btn-mic" class="btn-input-tool btn-mic" title="สั่งงานด้วยเสียง" onclick="toggleSpeechRecognition()">
+              <svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>
+            </button>
+          </div>
+
+          <div class="input-actions-right">
+            <button type="button" id="btn-stop" class="btn-stop" title="หยุดสร้างคำตอบ" onclick="stopGeneration()" aria-label="หยุดการสร้างคำตอบ">
+              <span class="btn-stop-icon">
+                <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>
+              </span>
+            </button>
+            <button type="button" id="btn-send" class="btn-send" title="ส่งข้อความ (Enter)" onclick="submitQuery()" aria-label="ส่งข้อความ">
+              <span class="btn-send-icon">
+                <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <p class="input-disclaimer" id="input-disclaimer">🌸 Kiku Official Fan AI Assistant • ข้อมูลอาจมีความคลาดเคลื่อน โปรดอ้างอิงจากข้อมูลอย่างเป็นทางการ</p>
+    </div>
+  </main>
+
+  <div class="modal-backdrop" id="music-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeMusicModal()" onkeydown="if(event.key==='Escape') closeMusicModal()">
+    <div class="modal-dialog jukebox-modal-dialog">
+      <div class="jukebox-header">
+        <h3>
+          <span class="svg-icon"></span>
+          <span>คลังเพลงจวีจิ้งอี (Ju Jingyi Jukebox)</span>
+          <span id="jukebox-song-count" style="font-size: 12px; font-weight: normal; color: var(--text-muted); margin-left: 8px;">44 บทเพลง</span>
+        </h3>
+        <div class="jukebox-header-actions">
+          <button type="button" class="btn-random-song" onclick="playRandomSongFromJukebox()" title="สุ่มเลือกบทเพลงมาฟัง">
+            <span></span>
+            <span>สุ่มเพลง</span>
+          </button>
+          <button type="button" class="btn-close-drawer" onclick="closeMusicModal()" title="ปิดหน้าต่าง">
+            <span style="font-size: 16px; font-weight: 700; line-height: 1;">✕</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="jukebox-toolbar">
+        <div class="jukebox-search-box">
+          <span class="search-icon">
+            <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          </span>
+          <input type="text" id="music-search-input" placeholder="ค้นหาชื่อเพลง, ซีรีส์, หรือปีที่ปล่อย (เช่น In Blossom, 2026, 叹云兮, Everyday)..." oninput="filterJukeboxList(); if(typeof toggleMusicSearchClear==='function') toggleMusicSearchClear(this);" />
+          <button type="button" class="jukebox-search-clear" id="music-search-clear" onclick="clearMusicSearch()" title="ล้างการค้นหา">✕</button>
+        </div>
+        <div class="music-tabs">
+          <button type="button" class="music-tab-pill active" id="pill-music-all" onclick="setJukeboxCategory('all')">ทั้งหมด</button>
+          <button type="button" class="music-tab-pill" id="pill-music-new" onclick="setJukeboxCategory('new')"> New 2026-2024</button>
+          <button type="button" class="music-tab-pill" id="pill-music-ost" onclick="setJukeboxCategory('ost')"> เพลงซีรีส์ (OST)</button>
+          <button type="button" class="music-tab-pill" id="pill-music-single" onclick="setJukeboxCategory('single')"> ซิงเกิลเดี่ยว</button>
+          <button type="button" class="music-tab-pill" id="pill-music-stage" onclick="setJukeboxCategory('stage')"> สเตจพิเศษ</button>
+        </div>
+      </div>
+
+      <div class="jukebox-list-body" id="music-playlist-container">
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="quiz-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeQuizModal()" onkeydown="if(event.key==='Escape') closeQuizModal()">
+    <div class="modal-dialog" style="max-width: 580px;">
+      <div class="modal-header">
+        <h3>
+          <span class="svg-icon"></span>
+          Ju Jingyi Trivia Quiz Challenge
+        </h3>
+        <button type="button" class="btn-close-drawer" onclick="closeQuizModal()">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="modal-body" id="quiz-modal-body">
+        
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="sessions-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeSessionsModal()" onkeydown="if(event.key==='Escape') closeSessionsModal()">
+    <div class="modal-dialog" style="max-width: 660px;">
+      <div class="modal-header">
+        <h3>
+          <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          <span>ค้นหาประวัติการสนทนา (Search Chat History)</span>
+        </h3>
+        <button type="button" class="btn-close-drawer" onclick="closeSessionsModal()">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="modal-body" style="padding: 18px 22px;">
+        <div class="search-modal-box" style="margin-bottom: 14px; position: relative;">
+          <input type="text" id="sessions-search-input" class="form-control" style="width: 100%; padding-left: 38px; padding-right: 14px; border-radius: 12px; height: 42px; font-size: 13.5px;" placeholder="ค้นหาตามชื่อแชท หรือข้อความในบทสนทนา (เช่น In Blossom, Versace, 2026)..." oninput="filterSessions(this.value)">
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 12px; top: 13px; color: var(--text-dim); pointer-events: none;"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+        </div>
+
+        <div class="sessions-toolbar" style="display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;">
+          <button type="button" class="btn-action" style="flex:1; justify-content:center;" onclick="createNewChatSession(); closeSessionsModal();">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            <span>สร้างแชทใหม่</span>
+          </button>
+          <button type="button" class="btn-action" style="justify-content:center;" onclick="exportChat()">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            <span>ส่งออกประวัติ</span>
+          </button>
+          <button type="button" class="btn-action" style="justify-content:center; color: #ef4444;" onclick="clearAllChatSessions()">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
+            <span>ล้างทั้งหมด</span>
+          </button>
+        </div>
+
+        <div id="sessions-list-container" class="sessions-list" style="display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow-y: auto;">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="saved-prompts-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeSavedPromptsModal()" onkeydown="if(event.key==='Escape') closeSavedPromptsModal()">
+    <div class="modal-dialog" style="max-width: 720px;">
+      <div class="modal-header">
+        <h3>
+          <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+          <span>คลังพรอมต์ &amp; บุ๊กมาร์ก (Saved Prompts &amp; Bookmarks)</span>
+        </h3>
+        <button type="button" class="btn-close-drawer" onclick="closeSavedPromptsModal()">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="modal-body" style="padding: 18px 22px;">
+        <div class="modal-tabs">
+          <button type="button" id="tab-btn-prompts" class="modal-tab-btn active" onclick="switchSavedPromptsTab('prompts')">
+            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+            <span>คลังพรอมต์แม่แบบ (Prompt Library)</span>
+          </button>
+          <button type="button" id="tab-btn-bookmarks" class="modal-tab-btn" onclick="switchSavedPromptsTab('bookmarks')">
+            <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            <span>คำตอบที่ปักหมุดไว้ (Bookmarked Answers)</span>
+          </button>
+        </div>
+
+        <div id="tab-content-prompts">
+          <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+            <div style="flex: 1; position: relative;">
+              <input type="text" id="prompts-search-input" class="form-control" style="width: 100%; padding-left: 36px; border-radius: 10px; height: 38px; font-size: 13px;" placeholder="ค้นหาตามชื่อพรอมต์ หรือคีย์เวิร์ด..." oninput="filterSavedPrompts(this.value)">
+              <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 11px; top: 12px; color: var(--text-dim); pointer-events: none;"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+            </div>
+            <button type="button" class="btn-action" onclick="openCreatePromptModal()" style="background: rgba(255,117,140,0.18); border-color: var(--primary); color: var(--primary);">
+              <span>สร้างพรอมต์</span>
+            </button>
+          </div>
+          <div id="saved-prompts-list" style="display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto;">
+          </div>
+        </div>
+
+        <div id="tab-content-bookmarks" style="display: none;">
+          <div style="margin-bottom: 12px; position: relative;">
+            <input type="text" id="bookmarks-search-input" class="form-control" style="width: 100%; padding-left: 36px; border-radius: 10px; height: 38px; font-size: 13px;" placeholder="ค้นหาข้อความที่ปักหมุดไว้..." oninput="filterBookmarks(this.value)">
+            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 11px; top: 12px; color: var(--text-dim); pointer-events: none;"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+          </div>
+          <div id="bookmarks-list" style="display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto;">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="create-prompt-modal" role="dialog" aria-modal="true" tabindex="-1" onclick="if(event.target===this) closeCreatePromptModal()" onkeydown="if(event.key==='Escape') closeCreatePromptModal()">
+    <div class="modal-dialog" style="max-width: 520px;">
+      <div class="modal-header">
+        <h3>
+          <span>➕ บันทึกพรอมต์ใหม่ (Create Saved Prompt)</span>
+        </h3>
+        <button type="button" class="btn-close-drawer" onclick="closeCreatePromptModal()">
+          <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        </button>
+      </div>
+      <div class="modal-body" style="padding: 18px 20px;">
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <div>
+            <label for="new-prompt-title" style="font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; display: block;">ชื่อพรอมต์ (Prompt Title)</label>
+            <input type="text" id="new-prompt-title" class="form-control" style="width: 100%;" placeholder="เช่น วิเคราะห์บทบาทใน In Blossom...">
+          </div>
+          <div>
+            <label for="new-prompt-cat" style="font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; display: block;">หมวดหมู่ (Category)</label>
+            <select id="new-prompt-cat" class="form-control" style="width: 100%;">
+              <option value="ซีรีส์ &amp; การแสดง"> ซีรีส์ &amp; การแสดง</option>
+              <option value="เพลง &amp; เวที"> เพลง &amp; เวที</option>
+              <option value="แฟชั่น &amp; แบรนด์"> แฟชั่น &amp; แบรนด์</option>
+              <option value="ประวัติ &amp; เกร็ดความรู้"> ประวัติ &amp; เกร็ดความรู้</option>
+              <option value="ทั่วไป"> ทั่วไป</option>
+            </select>
+          </div>
+          <div>
+            <label for="new-prompt-text" style="font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; display: block;">ข้อความคำสั่ง (Prompt Text)</label>
+            <textarea id="new-prompt-text" class="form-control" rows="4" style="width: 100%; resize: vertical;" placeholder="พิมพ์ข้อความคำสั่งที่ต้องการให้ AI ตอบ..."></textarea>
+          </div>
+          <button type="button" class="btn-action" style="margin-top: 8px; justify-content: center; background: var(--primary); color: #fff; border: none; padding: 10px;" onclick="saveNewCustomPrompt()">
+            <span>💾 บันทึกพรอมต์</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Spotlight Command Palette (Ctrl+K / Cmd+K) -->
+  <div class="command-palette-backdrop" id="command-palette-modal" onclick="handleCommandPaletteBackdrop(event)" onkeydown="if(event.key==='Escape') closeCommandPalette()" style="display:none;" role="dialog" aria-modal="true" aria-label="Command Palette" tabindex="-1">
+    <div class="command-palette-box">
+      <div class="command-palette-header">
+        <svg aria-hidden="true" class="command-palette-search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.4-3.4"/></svg>
+        <input type="text" id="command-palette-input" placeholder="ค้นหาฟีเจอร์, คำสั่งลัด, เพลง, หรือเครื่องมือ AI... (ESC เพื่อปิด)" oninput="filterCommandPalette(this.value)" onkeydown="handleCommandPaletteKeyDown(event)" autocomplete="off" />
+        <kbd class="palette-kbd">ESC</kbd>
+      </div>
+      <div class="command-palette-results" id="command-palette-results" role="listbox"></div>
+      <div class="command-palette-footer">
+        <span><kbd>↑</kbd> <kbd>↓</kbd> นำทาง</span>
+        <span><kbd>Enter</kbd> เลือก</span>
+        <span><kbd>Ctrl+K</kbd> เปิด/ปิด</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Social Share Card Modal -->
+  <div class="modal-backdrop" id="share-card-modal" onclick="handleShareCardBackdrop(event)" onkeydown="if(event.key==='Escape') closeShareCardModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="Social Share Card" tabindex="-1">
+    <div class="share-card-dialog">
+      <div class="modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-spark">🌸</span>
+          <h3>สร้างการ์ดแชร์บทสนทนา (Share Card)</h3>
+        </div>
+        <button type="button" class="btn-close-drawer" onclick="closeShareCardModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>
+      <div class="share-card-preview-area" id="share-card-canvas-container"></div>
+      <div class="share-card-actions">
+        <button type="button" class="btn-share-download" onclick="downloadShareCardImage(this)">
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <span>ดาวน์โหลดรูปภาพ (PNG)</span>
+        </button>
+        <button type="button" class="btn-share-copy" onclick="copyShareCardToClipboard(this)">
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+          <span>คัดลอกข้อความ</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Quote Card Modal -->
+  <div class="modal-backdrop" id="quote-card-modal" onclick="if(event.target===this)closeQuoteCardModal()" onkeydown="if(event.key==='Escape') closeQuoteCardModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="Quote Card" tabindex="-1">
+    <div class="share-card-dialog" style="max-width:640px;">
+      <div class="modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-spark">🌸</span>
+          <h3>สร้างการ์ดคำคม (Quote Card)</h3>
+        </div>
+        <button type="button" class="btn-close-drawer" onclick="closeQuoteCardModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>
+      <div class="modal-body" style="padding:16px 20px; display:flex; flex-direction:column; align-items:center; gap:14px;">
+        <canvas id="quote-canvas" width="600" height="340" style="max-width:100%; height:auto; border-radius:18px; box-shadow:0 12px 32px rgba(0,0,0,0.4); border:1px solid rgba(255,117,140,0.3);"></canvas>
+        <div style="width:100%; max-width:600px; display:flex; flex-direction:column; gap:6px;">
+          <textarea id="quote-text-editor" class="quote-text-editor" maxlength="220" rows="3" oninput="updateQuoteText(this.value)" placeholder="แก้ไขข้อความคำคม..." style="width:100%; border-radius:12px; padding:10px 14px; font-size:13.5px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,117,140,0.25); color:var(--text); resize:vertical; outline:none;"></textarea>
+          <div style="display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--text-muted);">
+            <span>ปรับแต่งข้อความคำคมของจวีจิ้งอีได้ตามต้องการ</span>
+            <span id="quote-char-count">0 / 220</span>
+          </div>
+        </div>
+      </div>
+      <div class="share-card-actions">
+        <button type="button" class="btn-share-download" id="btn-quote-download" onclick="downloadQuoteCard(this)">
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <span>ดาวน์โหลดรูปภาพ (PNG)</span>
+        </button>
+        <button type="button" class="btn-share-copy" id="btn-quote-copy" onclick="copyQuoteCardImage(this)">
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+          <span>คัดลอกรูปภาพ</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Drama & Song Comparison Modal -->
+  <div class="modal-backdrop" id="compare-modal" onclick="handleCompareBackdrop(event)" onkeydown="if(event.key==='Escape') closeCompareModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="Compare Works" tabindex="-1">
+    <div class="modal-dialog" style="max-width:760px; max-height:85vh; overflow-y:auto;">
+      <div class="modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-spark">⚔️</span>
+          <h3>เปรียบเทียบผลงานซีรีส์ &amp; เพลง (Comparison Matrix)</h3>
+        </div>
+        <button type="button" class="btn-close-drawer" onclick="closeCompareModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>
+      <div class="modal-body" id="compare-modal-body"></div>
+    </div>
+  </div>
+
+  <!-- Sponsors & Ads Modal -->
+  <div class="modal-backdrop" id="sponsors-modal" onclick="if(event.target===this)closeSponsorsModal()" onkeydown="if(event.key==='Escape') closeSponsorsModal()" style="display:none;" role="dialog" aria-modal="true" aria-label="Sponsors and Partners" tabindex="-1">
+    <div class="modal-dialog sponsors-modal-dialog">
+      <div class="modal-header">
+        <div class="modal-title-wrap">
+          <span class="modal-spark">📢</span>
+          <div>
+            <h3 style="margin:0; font-size:16px; font-weight:700;">SPONSOR SPOTLIGHT</h3>
+            <p style="margin:2px 0 0; font-size:12px; color:var(--text-muted);">ผู้สนับสนุนโครงการและระบบนิเวศ Kiku Agent (Matching CLI /ads)</p>
+          </div>
+        </div>
+        <button type="button" class="btn-close-drawer" onclick="closeSponsorsModal()" aria-label="ปิด"><svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+      </div>
+      <div class="modal-body sponsors-modal-body" id="sponsors-modal-body">
+        <!-- Dynamically rendered by renderSponsorsModal() -->
+      </div>
+      <div class="modal-footer sponsors-modal-footer">
+        <span>🌸 สนับสนุนการพัฒนา Open-Source AI Agent Ecosystem</span>
+        <button type="button" class="btn-msg-action" onclick="closeSponsorsModal()" style="padding:6px 14px; border-radius:8px;">ปิด</button>
+      </div>
+    </div>
+  </div>