/* AI 客服 widget 樣式 — 2026-07-28 從 chatbot-widget.js 抽出來的複本。
 *
 * 為什麼要有這份複本：
 * widget 本體用 `document.createElement("style")` 注入樣式，那是 inline style，
 * 而 J656 把首頁的 CSP 收成 `style-src 'self'`（沒有 'unsafe-inline'）——
 * 於是樣式被瀏覽器擋掉，整組零件以裸 HTML 攤在頁尾。Joey 2026-07-28 回報。
 *
 * 修法選了「把樣式搬成同源 CSS 檔」而不是「把 'unsafe-inline' 加回去」：
 * 前者不動安全性（同源檔案本來就在 'self' 允許範圍內），後者等於把 J656 收掉的洞開回來。
 * 也不必重新部署 ai-agent 那個服務。
 *
 * ⚠️ 這是複本，會漂移：widget 本體（src/static/chatbot-widget.js）改樣式時，這份不會自動跟著改。
 * 真正的根治是讓 widget 改用 <link> 載外部 CSS，那要動到那個服務，另外排。
 *
 * brandColor 已代入首頁設定值 #f97316（原檔是 ${brandColor} 模板插值）。
 */
#joey-chatbot-btn {
      position: fixed; bottom: 24px; right: 24px; z-index: 99999;
      width: 56px; height: 56px; border-radius: 50%;
      background: #f97316; color: #fff; border: none; cursor: pointer;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      font-size: 24px; display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #joey-chatbot-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,0.2); }
    #joey-chatbot-badge {
      position: absolute; top: -2px; right: -2px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #ef4444; border: 2px solid #fff;
      display: none;
    }
    #joey-chatbot-box {
      position: fixed; bottom: 92px; right: 24px; z-index: 99999;
      width: 360px; max-height: 520px; border-radius: 16px;
      background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,0.12);
      display: none; flex-direction: column; overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      animation: joey-slide-up 0.3s ease;
    }
    @keyframes joey-slide-up {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    #joey-chatbot-box.open { display: flex; }
    #joey-chatbot-header {
      padding: 16px; background: #f97316; color: #fff;
      display: flex; align-items: center; gap: 10px;
    }
    #joey-chatbot-header-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
    #joey-chatbot-header-title { font-size: 14px; font-weight: 600; }
    #joey-chatbot-header-sub { font-size: 12px; opacity: 0.8; }
    #joey-chatbot-close {
      margin-left: auto; background: none; border: none; color: #fff;
      font-size: 18px; cursor: pointer; opacity: 0.7;
    }
    #joey-chatbot-close:hover { opacity: 1; }
    #joey-chatbot-messages {
      flex: 1; overflow-y: auto; padding: 16px; display: flex;
      flex-direction: column; gap: 8px; max-height: 360px;
    }
    .joey-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
    .joey-msg-bot { background: #f3f4f6; color: #1f2937; align-self: flex-start; border-bottom-left-radius: 4px; }
    .joey-msg-user { background: #f97316; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
    .joey-msg-typing { background: #f3f4f6; color: #9ca3af; align-self: flex-start; border-bottom-left-radius: 4px; }
    .joey-typing-dots span {
      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
      background: #9ca3af; margin: 0 2px;
      animation: joey-dot-bounce 1.2s infinite;
    }
    .joey-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .joey-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes joey-dot-bounce {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-6px); }
    }
    .joey-msg-time { font-size: 10px; color: #9ca3af; align-self: flex-end; margin-top: -4px; }
    #joey-chatbot-input-area {
      padding: 12px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px;
    }
    #joey-chatbot-input {
      flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px;
      font-size: 13px; outline: none; resize: none;
    }
    #joey-chatbot-input:focus { border-color: #f97316; }
    #joey-chatbot-send {
      background: #f97316; color: #fff; border: none; border-radius: 8px;
      padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 500;
      white-space: nowrap;
    }
    #joey-chatbot-send:disabled { opacity: 0.5; cursor: not-allowed; }
    #joey-chatbot-powered {
      text-align: center; padding: 6px; font-size: 12px; color: #ccc;
      border-top: 1px solid #f3f4f6;
    }
    #joey-chatbot-powered a { color: #9ca3af; text-decoration: none; }
    .joey-quick-replies {
      display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; margin-top: 4px;
    }
    .joey-quick-btn {
      padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 500;
      border: 1px solid #f97316; color: #f97316; background: #fff;
      cursor: pointer; transition: all .2s; white-space: nowrap;
    }
    .joey-quick-btn:hover { background: #f97316; color: #fff; }
    @media (max-width: 420px) {
      #joey-chatbot-box { width: calc(100vw - 32px); right: 16px; bottom: 84px; max-height: 70vh; }
    }

/* widget 用 innerHTML 塞了一個 style="pointer-events:none" 屬性在表情符號上。
   style 屬性同樣受 style-src 管，沒有 'unsafe-inline' 就會被擋——在這裡補回來。
   （實務影響很小：點在子元素上本來就會冒泡到按鈕；補上是為了行為完全一致。） */
#joey-chatbot-btn span { pointer-events: none; }