/* =============================================================================
   前台 AI 客服 — 內嵌 Widget Chat 樣式
   仿後台 AITrainerEmbeddedChat.css 設計,改用 .ai-cs-* 命名空間
   只在新版啟用(AICustomerServiceNewDocumentFunctionIO=true)時載入
   ============================================================================= */

:root {
    /* dialog 寬度(拖曳 20~80vw,localStorage AICSDialogWidth 持久化)
       預設 50vw。Mobile <768px 強制 100vw(於 @media 內 override) */
    --ai-cs-dialog-width: 50vw;
}

/* =============================================================================
   外框統一(2026 廠商回饋 #2):機器人(非 chat-mode)與 AI(chat-mode)共用同一外框
   尺寸/位置/可拖寬從 .chat-mode 提升到基底 .ai-cs-dialog → 兩模式一致(蓋過 FixedChatButton 的 400×600)
   chat-mode 只再負責「內部 body 切換 + AI 專屬鈕(關鍵字/全螢幕/縮小)」
   ============================================================================= */
.ai-cs-dialog {
    width: var(--ai-cs-dialog-width, 50vw) !important;
    min-width: 320px;
    height: 80vh;
    /* 100dvh fallback(三件式,後台第九輪修正:手機 100vh 與工具列重疊)*/
    height: 80dvh;
    max-height: 80dvh;
    bottom: 90px;
    right: 24px;
}

/* chat-mode 標題列避開 iPhone 瀏海/島嶼 + Android 全螢幕瀏覽器工具列(safe-area-inset)
   桌面瀏覽器 env() 預設 0 不影響;mobile 才實際生效 */
.ai-cs-dialog.chat-mode .ai-cs-dialog-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

/* chat-mode 啟用時隱藏既有 quickReply UI(整個 dialog-body 容器 + footer)
   bug 修正(2026):之前只隱藏 dialog-body 內子元素(welcome / quick-replies / reply-content),
   但 dialog-body 自己仍是 flex:1,跟 chat-section 各分 50% → chat 區只佔半個 dialog
   解法:直接隱藏整個 .ai-cs-dialog-body,讓 chat-section 100% 佔滿剩餘空間 */
.ai-cs-dialog.chat-mode .ai-cs-dialog-body,
.ai-cs-dialog.chat-mode .ai-cs-dialog-footer {
    display: none !important;
}

/* 非 chat-mode 時隱藏新版 chat section */
.ai-cs-dialog:not(.chat-mode) .ai-cs-chat-section {
    display: none !important;
}

/* chat-mode 啟用時顯示新版 chat section */
.ai-cs-dialog.chat-mode .ai-cs-chat-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #F8F9FA;
}

/* =============================================================================
   標題列 — chat-mode 額外按鈕(返回快速回覆/全螢幕/縮小)
   ============================================================================= */

/* 標題列額外按鈕共用樣式(預設 display:flex,chat-mode 專屬按鈕由下方 :not(.chat-mode) 覆蓋為 none) */
.ai-cs-header-action-button {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    /* 間距改由容器 .ai-cs-header-actions gap 統一處理(原 margin-left 漏掉關閉鈕/字級包裝 → X 與左鄰緊貼) */
}

/* 非 chat-mode 時隱藏 chat-mode 專屬按鈕(specificity 0,2,1 蓋過 .ai-cs-header-action-button 的 0,1,0)
   修正 bug:之前用單 class 隱藏被後寫的 .ai-cs-header-action-button display:flex 覆蓋,導致 quickReply 模式下「返回快速回覆」按鈕仍顯示 */
.ai-cs-dialog:not(.chat-mode) .ai-cs-return-quickreply-button,
.ai-cs-dialog:not(.chat-mode) .ai-cs-fullscreen-button,
.ai-cs-dialog:not(.chat-mode) .ai-cs-minimize-button,
.ai-cs-dialog:not(.chat-mode) .ai-cs-keywords-button {
    display: none;
}

/* =============================================================================
   關鍵字選擇面板 — 從左側 slide-in
   - desktop:左側 300px 絕對定位,動畫滑入
   - mobile <768px:覆蓋全屏 100%
   - 點面板 × 才能關(點外面不會關,避免訪客誤觸)
   ============================================================================= */
.ai-cs-keywords-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    background: #ffffff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    overflow: hidden;
}

.ai-cs-keywords-panel.open {
    transform: translateX(0);
}

.ai-cs-keywords-panel-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* 加 safe-area-inset-top:mobile 全屏時避開瀏海/工具列 */
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

.ai-cs-keywords-panel-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.ai-cs-keywords-panel-close {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    padding: 0;
}

.ai-cs-keywords-panel-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ai-cs-keywords-panel-close svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

.ai-cs-keywords-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    background: #F8F9FA;
}

.ai-cs-keywords-panel-body::-webkit-scrollbar {
    width: 6px;
}

.ai-cs-keywords-panel-body::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

.ai-cs-keywords-panel-loading {
    padding: 16px;
    color: #9CA3AF;
    font-size: 13px;
    text-align: center;
}

.ai-cs-keywords-category {
    margin-bottom: 14px;
}

.ai-cs-keywords-category-title {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    margin-bottom: 6px;
    padding: 0 4px;
    letter-spacing: 0.5px;
}

/* 關鍵字 chip — 點擊自動填入問句並送出 */
.ai-cs-keywords-chip {
    display: inline-block;
    padding: 5px 12px;
    margin: 3px;
    background: #ffffff;
    color: #1F2937;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.ai-cs-keywords-chip:hover {
    background: #4A90E2;
    color: #ffffff;
    border-color: #4A90E2;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2);
}

.ai-cs-header-action-button:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ai-cs-header-action-button svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
}

/* 標題列右側按鈕群組容器 */
.ai-cs-header-actions {
    display: flex;
    align-items: center;
    /* 用 gap 統一所有子元素間距(含關閉鈕、字級包裝),避免 X 與左鄰按鈕緊貼 */
    gap: 4px;
}

/* 返回快速回覆按鈕在最左側,稍微分隔 */
.ai-cs-return-quickreply-button {
    margin-right: 8px;
    margin-left: 0;
}

/* =============================================================================
   字級調整(2026 廠商回饋):標題列 icon + 點開的小拉軸面板
   ============================================================================= */
.ai-cs-fontsize-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 大小 A icon(SVG text 用 currentColor,繼承標題列白字) */
.ai-cs-fontsize-button svg {
    width: 22px;
    height: 22px;
}

/* 點開的小面板:錨在 icon 正下方右對齊,白底深字(標題列為漸層底) */
.ai-cs-fontsize-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
    z-index: 20;
}

.ai-cs-fontsize-popover.open {
    display: flex;
}

.ai-cs-fontsize-popover-min,
.ai-cs-fontsize-popover-max {
    font-size: 12px;
    color: #6B7280;
}

.ai-cs-fontsize-slider {
    width: 120px;
    accent-color: #4A90E2;
    cursor: pointer;
}

.ai-cs-fontsize-value {
    font-size: 12px;
    color: #374151;
    min-width: 34px;
    text-align: right;
}

/* =============================================================================
   訊息流區
   ============================================================================= */
.ai-cs-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ai-cs-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-cs-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-cs-chat-messages::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 3px;
}

.ai-cs-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* 訊息泡泡:訪客 vs AI */
.ai-cs-chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    line-height: 1.55;
    word-break: break-word;
}

.ai-cs-chat-message-bot {
    align-self: flex-start;
}

.ai-cs-chat-message-user {
    align-self: flex-end;
}

.ai-cs-chat-message-sender {
    font-size: 11px;
    color: #6B7280;
    margin-bottom: 4px;
    padding: 0 4px;
}

.ai-cs-chat-message-user .ai-cs-chat-message-sender {
    text-align: right;
}

.ai-cs-chat-message-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    /* 字級拉軸(2026 廠商回饋):基準字級吃 CSS var(預設 14px),markdown 子元素改 em → 整則回答等比縮放 */
    font-size: var(--ai-cs-font-size, 14px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble {
    background: #ffffff;
    color: #1F2937;
    border-bottom-left-radius: 4px;
}

.ai-cs-chat-message-user .ai-cs-chat-message-bubble {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

/* =============================================================================
   Markdown 元素樣式(AI 回覆內 HTML)
   範圍鎖定:.ai-cs-chat-message-bot .ai-cs-chat-message-bubble
   ============================================================================= */
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h1,
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h2,
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h3,
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h4 {
    margin: 8px 0 4px 0;
    font-weight: 700;
    color: #111827;
}

/* 子元素改 em(相對氣泡基準字級),隨拉軸等比縮放 */
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h1 { font-size: 1.214em; }
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h2 { font-size: 1.143em; }
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h3 { font-size: 1.071em; }
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble h4 { font-size: 1em; }

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble p {
    margin: 4px 0;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble ul,
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble ol {
    margin: 6px 0;
    padding-left: 22px;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble li {
    margin: 2px 0;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble strong {
    font-weight: 700;
    color: #111827;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble em {
    font-style: italic;
    color: #4B5563;
}

/* 內聯 code (綠 pill 樣式,仿後台) */
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble code {
    display: inline-block;
    padding: 1px 6px;
    background: #10B981;
    color: #ffffff;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.929em;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble blockquote {
    margin: 6px 0;
    padding: 6px 12px;
    border-left: 3px solid #4A90E2;
    background: #F3F4F6;
    color: #4B5563;
    font-style: italic;
}

/* table 邊線(GFM pipe table 用) */
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.929em;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble th,
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble td {
    border: 1px solid #D1D5DB;
    padding: 6px 10px;
    text-align: left;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble th {
    background: #F3F4F6;
    font-weight: 700;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble tr:nth-child(even) td {
    background: #FAFBFC;
}

/* 連結 — 綠 pill + 外部箭頭 icon(訪客可點擊頁面跳轉) */
.ai-cs-chat-message-bot .ai-cs-chat-message-bubble a {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #10B981;
    color: #ffffff !important;
    border-radius: 6px;
    text-decoration: none;
    margin: 0 2px;
    font-size: 0.929em;
    transition: background 0.15s ease;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble a:hover {
    background: #059669;
}

.ai-cs-chat-message-bot .ai-cs-chat-message-bubble a::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><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>");
    background-size: contain;
    background-repeat: no-repeat;
}

/* =============================================================================
   達上限橫幅(訊息流頂部)
   ============================================================================= */
.ai-cs-chat-limit-banner {
    background: #FEF2F2;
    color: #B91C1C;
    padding: 8px 14px;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #FEE2E2;
}

/* =============================================================================
   不可用狀態(點數不足/今日達上限合併)— 取代輸入區的客戶視角友善訊息 + 聯絡我們
   歷史仍可看,只是不能送訊息(獨立頁將淘汰,chat 框自給自足)
   ============================================================================= */
.ai-cs-chat-unavailable {
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #6B7280;
}

.ai-cs-chat-unavailable-contact {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 10px;
    background: #4A90E2;
    color: #ffffff !important;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.15s ease;
}

.ai-cs-chat-unavailable-contact:hover {
    background: #357ABD;
    text-decoration: none;
}

/* =============================================================================
   輸入區
   ============================================================================= */
.ai-cs-chat-input-area {
    padding: 12px 14px 14px 14px;
    /* 加 safe-area-inset-bottom:iPhone 全螢幕瀏覽器底部 home indicator 避讓 */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ai-cs-chat-input {
    flex: 1;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    padding: 10px 14px;
    /* 16px:避免 iOS Safari 聚焦 <16px 輸入框時自動放大整頁(與訊息字級拉軸 var 無關,不衝突) */
    font-size: 16px;
    resize: none;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 120px;
    transition: border-color 0.15s ease;
}

.ai-cs-chat-input:focus {
    border-color: #4A90E2;
}

.ai-cs-chat-input:disabled {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}

.ai-cs-chat-send-button {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.ai-cs-chat-send-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(74, 144, 226, 0.3);
}

.ai-cs-chat-send-button:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ai-cs-chat-send-button svg {
    width: 18px;
    height: 18px;
}

/* 打字中指示 */
.ai-cs-chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    max-width: 80px;
}

.ai-cs-chat-typing span {
    width: 6px;
    height: 6px;
    background: #9CA3AF;
    border-radius: 50%;
    animation: aiCsTypingDot 1.4s infinite;
}

.ai-cs-chat-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-cs-chat-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aiCsTypingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* =============================================================================
   Mini Button(縮小狀態的半透明小按鈕)
   仿後台 AITrainerMiniButton 設計:opacity 0.5 + 圖示 + 文字
   位置策略:替換 floatButton 的位置(floatButton 在 chat-mode 啟用時已 hide,位置空出)
   - 既有 floatButton 用 --fs-fb-pos CSS variable + data-axis 定位
   - mini button 模仿相同定位策略,避免跟其他懸浮按鈕重疊
   - 寬高跟 floatButton 對齊(60×60 圓形)→ 但 mini 用扁長膠囊更明顯
   ============================================================================= */
.ai-cs-mini-button {
    /* 預設右下角(覆蓋 floatButton 位置,跟 .ai-cs-float-button 對齊) */
    position: fixed;
    bottom: 24px;
    right: 24px;
    min-width: 100px;
    height: 40px;
    padding: 0 14px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.55;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
    transition: opacity 0.2s ease, transform 0.15s ease;
}

/* 當 mini button 帶 data-axis 屬性時,跟 floatButton 用同一個 CSS variable 定位
   (JS 端在 SSR / showMiniButton() 時把 floatButton 的 data-axis / --fs-fb-pos 同步給 mini button) */
.ai-cs-mini-button[data-axis="X"] {
    right: calc(24px + (60px + 16px) * (var(--fs-fb-pos, 1) - 1));
    bottom: 24px;
}
.ai-cs-mini-button[data-axis="Y"] {
    right: 24px;
    bottom: calc(24px + (60px + 16px) * (var(--fs-fb-pos, 1) - 1));
}

.ai-cs-mini-button:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.ai-cs-mini-button svg {
    width: 18px;
    height: 18px;
}

/* =============================================================================
   Resize Handle(拖曳調寬 20~80vw)
   仿後台:左側 6px 透明條,中央 35px 灰線,hover 紫;mobile 隱藏
   ============================================================================= */
.ai-cs-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
    display: none; /* 預設隱藏,只在 chat-mode 顯示 */
}

.ai-cs-resize-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 35px;
    background: #CBD5E1;
    border-radius: 1px;
    transition: background 0.15s ease;
}

.ai-cs-resize-handle:hover,
.ai-cs-resize-handle.dragging {
    background: rgba(74, 144, 226, 0.25);
}

.ai-cs-resize-handle:hover::before,
.ai-cs-resize-handle.dragging::before {
    background: rgba(255, 255, 255, 0.85);
}

/* resize handle 兩模式都顯示(外框統一 #2:機器人也可拖寬) */
.ai-cs-dialog .ai-cs-resize-handle {
    display: block;
}

/* 半透明 buffer 防抖(拉到極窄 ≤20vw 自動半透明,>22vw 移除) */
.ai-cs-dialog.translucent {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* =============================================================================
   Mobile RWD
   <768px:強制 100vw,隱藏 resize handle,height 100dvh
   <360px:隱藏全螢幕按鈕(空間不夠,後台 Y4 修正)
   ============================================================================= */
@media (max-width: 768px) {
    .ai-cs-dialog {
        /* 寬度 100vw 貼齊全屏(2026 廠商回饋 #3,原 95vw 留邊);兩模式共用 */
        width: 100vw !important;
        left: 0;
        /* 高度可調:吃 var(預設 80dvh,JS 拖曳改 40~80dvh,localStorage AICSDialogHeightMobile) */
        height: var(--ai-cs-dialog-height-mobile, 80dvh);
        max-height: 80dvh;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

    /* 手機版 resize handle 改「上緣水平」拖曳調高度(桌機是左緣垂直拖寬);bottom-sheet 往上長/往下縮 */
    .ai-cs-dialog .ai-cs-resize-handle {
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 12px;
        cursor: ns-resize;
    }

    .ai-cs-dialog .ai-cs-resize-handle::before {
        width: 36px;
        height: 3px;
    }

    /* 關鍵字面板 mobile:覆蓋全屏 */
    .ai-cs-keywords-panel {
        width: 100%;
        border-radius: 0;
    }

    .ai-cs-mini-button {
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 360px) {
    .ai-cs-fullscreen-button {
        display: none !important;
    }
}

/* =============================================================================
   V3 思考中輪播小文 — 放寬 typing 寬度 + 重置文字 span(避免被 .ai-cs-chat-typing span 圓點樣式套用)
   ============================================================================= */
.ai-cs-chat-typing {
    max-width: none;
}
/* 特異度需贏過 .ai-cs-chat-typing span (0,1,1) → 用 .ai-cs-chat-typing .ai-cs-typing-text (0,2,0),
   否則文字 span 會被圓點樣式套用(變灰點 + width:6px 強迫直排)*/
.ai-cs-chat-typing .ai-cs-typing-text {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    animation: none;
    margin-left: 8px;
    color: #9CA3AF;
    font-size: 12px;
    white-space: nowrap;
}

/* =============================================================================
   V1 你可能想問(可點按鈕)— 前台藍色系 #4A90E2 / #357ABD
   ============================================================================= */
.ai-cs-suggested-wrap {
    align-self: flex-start;
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 2px 0 4px;
}
.ai-cs-suggested-question {
    text-align: left;
    padding: 8px 12px;
    background: #eaf2fb;
    border: 1px solid #4A90E2;
    border-radius: 14px;
    color: #357ABD;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.ai-cs-suggested-question:hover {
    background: #d6e6f7;
    border-color: #357ABD;
}

/* 思考逾時 40 秒後的「重整」小鈕(附在思考指示器旁) */
.ai-cs-typing-retry {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    background: #4A90D9;
    border: 1px solid #4A90D9;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
}

    .ai-cs-typing-retry:hover {
        background: #357ABD;
        border-color: #357ABD;
    }