/*
 * 站內 AI 小助手浮動視窗樣式。
 *
 * 關鍵 UX（不可像 kryslink 用大 iframe / overlay 鎖住整頁）：
 *   - 外層容器 .ai-assistant 為 pointer-events:none，背景永遠可點。
 *   - 只有 .ai-fab（機器人按鈕）與 .ai-panel（聊天視窗）為 pointer-events:auto，
 *     確保「只有聊天視窗與按鈕攔截點擊」，背景主選單 / 按鈕不被透明層攔截。
 *   - 點視窗外部關閉、Esc 關閉由 JS 處理（不靠 overlay 攔截）。
 *   - 手機版面板寬度受限於視窗寬度，避免水平溢出。
 */

.ai-assistant {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 9990;
    /* 背景永遠可點：容器不攔截，僅子元素（按鈕 / 面板）攔截 */
    pointer-events: none;
    font-family: var(--jj-font, "Noto Sans TC", system-ui, sans-serif);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
}

.ai-assistant *,
.ai-assistant *::before,
.ai-assistant *::after {
    box-sizing: border-box;
}

/* ---- 浮動機器人按鈕 / 角色形象 ---- */
.ai-fab {
    pointer-events: auto;
    order: 2; /* 永遠在面板下方（面板在上） */
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 20px 9px 9px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 255, 255, .46), transparent 30%),
        linear-gradient(135deg, #ff4b68 0%, var(--jj-red, #C8102E) 48%, #7f0b1d 100%);
    color: #fff;
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(127, 11, 29, .34), 0 4px 14px rgba(21, 24, 29, .18);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ai-fab::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -2;
    border-radius: inherit;
    background: radial-gradient(circle at 35% 45%, rgba(255, 75, 104, .38), transparent 62%);
    filter: blur(9px);
    opacity: .9;
    animation: ai-glow 2.6s ease-in-out infinite;
}

.ai-fab-glow {
    position: absolute;
    inset: 5px 16px auto auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 0 16px rgba(255, 255, 255, .9);
}

.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(127, 11, 29, .38), 0 5px 18px rgba(21, 24, 29, .20); filter: saturate(1.08); }
.ai-fab:hover .ai-mascot-fab { transform: translateY(-2px) rotate(-3deg); }
.ai-fab:active { transform: scale(.96); }
.ai-fab:focus-visible { outline: 3px solid rgba(200, 16, 46, .35); outline-offset: 3px; }

.ai-fab-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ai-fab-label { white-space: nowrap; letter-spacing: .01em; }
.ai-fab-sub { font-size: 11px; font-weight: 600; opacity: .86; white-space: nowrap; }
.ai-fab-status {
    position: absolute;
    left: 47px;
    bottom: 9px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #27d67d;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(39, 214, 125, .18);
}

.ai-mascot {
    position: relative;
    flex: none;
    width: 42px;
    height: 42px;
    display: inline-block;
    transition: transform .18s ease;
}
.ai-mascot-face {
    position: absolute;
    inset: 8px 4px 4px;
    border-radius: 15px 15px 14px 14px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .92), transparent 17%),
        linear-gradient(160deg, #fff7f9 0%, #ffd4dc 48%, #ff8fa4 100%);
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: inset 0 -3px 0 rgba(127, 11, 29, .12), 0 5px 12px rgba(127, 11, 29, .18);
}
.ai-mascot-antenna {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    transform: translateX(-50%);
}
.ai-mascot-antenna::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ffe86b;
    box-shadow: 0 0 14px rgba(255, 232, 107, .78);
    transform: translateX(-50%);
}
.ai-mascot-ear {
    position: absolute;
    top: 20px;
    width: 7px;
    height: 12px;
    border-radius: 999px;
    background: #ffe4ea;
    border: 1px solid rgba(255, 255, 255, .86);
}
.ai-mascot-ear-left { left: 0; }
.ai-mascot-ear-right { right: 0; }
.ai-mascot-eye {
    position: absolute;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #641022;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .65);
    animation: ai-blink 4.8s infinite;
}
.ai-mascot-eye-left { left: 10px; }
.ai-mascot-eye-right { right: 10px; }
.ai-mascot-smile {
    position: absolute;
    left: 50%;
    top: 23px;
    width: 13px;
    height: 6px;
    border-bottom: 2px solid #641022;
    border-radius: 0 0 999px 999px;
    transform: translateX(-50%);
}

/* 開啟時微調按鈕（提示可關閉） */
.ai-assistant.is-open .ai-fab { filter: saturate(1.08); }
.ai-assistant.is-open .ai-mascot-fab { animation: ai-wave 1.4s ease-in-out infinite; }

/* ---- 聊天視窗 ---- */
.ai-panel {
    pointer-events: auto;
    order: 1;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--jj-gray-200, #E5E8EC);
    border-radius: 16px;
    box-shadow: 0 12px 44px rgba(21, 24, 29, .30);
    overflow: hidden;
    animation: ai-pop .16s ease-out;
}

.ai-panel[hidden] { display: none; }

@keyframes ai-pop {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ai-glow {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes ai-wave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-2px) rotate(-5deg); }
    70% { transform: translateY(1px) rotate(4deg); }
}

@keyframes ai-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(.16); }
}

.ai-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .22), transparent 32%),
        linear-gradient(135deg, #d91838 0%, var(--jj-red, #C8102E) 52%, #771022 100%);
    color: #fff;
}

.ai-panel-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ai-mascot-head { width: 34px; height: 34px; }
.ai-mascot-head .ai-mascot-face { inset: 7px 4px 3px; border-radius: 13px 13px 12px 12px; }
.ai-mascot-head .ai-mascot-eye { top: 10px; width: 5.5px; height: 5.5px; }
.ai-mascot-head .ai-mascot-eye-left { left: 8px; }
.ai-mascot-head .ai-mascot-eye-right { right: 8px; }
.ai-mascot-head .ai-mascot-smile { top: 19px; width: 11px; }
.ai-mascot-head .ai-mascot-ear { top: 17px; width: 6px; height: 10px; }
.ai-panel-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-panel-title { font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.ai-panel-subtitle { font-size: 11px; font-weight: 600; opacity: .82; white-space: nowrap; }

.ai-panel-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
.ai-panel-close:hover { background: rgba(255, 255, 255, .18); }

.ai-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    background: var(--jj-gray-100, #F4F5F7);
}

.ai-panel-foot {
    padding: 8px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--jj-gray-600, #5B6470);
    background: #fff;
    border-top: 1px solid var(--jj-gray-200, #E5E8EC);
}

.ai-view[hidden] { display: none; }

/* ---- 表單（登入 / 聯絡） ---- */
.ai-intro { margin: 0 0 12px; font-size: 14px; color: var(--jj-gray-600, #5B6470); }

.ai-auth-options { display: grid; gap: 8px; margin-bottom: 10px; }
.ai-auth-btn {
    width: 100%;
    border: 1px solid #E3E7EE;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-weight: 800;
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}
.ai-auth-btn:hover:not(:disabled) { border-color: var(--jj-red, #C8102E); color: var(--jj-red, #C8102E); }
.ai-auth-btn:disabled { opacity: .48; cursor: not-allowed; background: #F5F7FA; }
.ai-auth-line:not(:disabled) { border-color: #06C755; color: #06A846; }
.ai-auth-note { font-size: 12px; color: #6B7280; text-align: center; }
.ai-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0; color: #8A94A6; font-size: 12px; }
.ai-divider::before, .ai-divider::after { content: ''; flex: 1; height: 1px; background: #E5E7EB; }

.ai-form { display: flex; flex-direction: column; gap: 10px; }

.ai-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--jj-gray-900, #2B313A);
}

.ai-field input,
.ai-field textarea,
.ai-input-row input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--jj-gray-200, #E5E8EC);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    background: #fff;
    color: var(--jj-black, #15181D);
}

.ai-field input:focus,
.ai-field textarea:focus,
.ai-input-row input:focus {
    outline: none;
    border-color: var(--jj-red, #C8102E);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}

.ai-field textarea { resize: vertical; min-height: 48px; }

.req { color: var(--jj-red, #C8102E); }

.ai-hint { font-size: 12px; color: var(--jj-gray-600, #5B6470); }

.ai-error {
    font-size: 13px;
    color: var(--jj-red, #C8102E);
    min-height: 0;
}
.ai-error:empty { display: none; }

.ai-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 400;
    background: #fff;
    border: 1px solid var(--jj-gray-200, #E5E8EC);
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
}
.ai-check-inline { width: 100%; border-radius: 8px; }
.ai-actions { display: flex; gap: 8px; justify-content: space-between; }

/* honeypot：對使用者隱藏，對爬蟲可見 */
.ai-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ---- 按鈕 ---- */
.ai-btn {
    border: 1px solid var(--jj-gray-200, #E5E8EC);
    background: #fff;
    color: var(--jj-gray-900, #2B313A);
    border-radius: 8px;
    padding: 9px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ai-btn:hover { background: var(--jj-gray-100, #F4F5F7); }
.ai-btn-primary {
    background: var(--jj-red, #C8102E);
    border-color: var(--jj-red, #C8102E);
    color: #fff;
}
.ai-btn-primary:hover { background: var(--jj-red-dark, #A00D24); }
.ai-btn[disabled] { opacity: .6; cursor: progress; }

/* ---- 對話（泡泡與來源由 ai-assistant.js 動態產生，class 須對應） ---- */
.ai-profile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #E7EBF2;
    border-radius: 12px;
    background: #F8FAFC;
    font-size: 12px;
    color: #4B5563;
}
.ai-profile-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-relogin {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--jj-red, #C8102E);
    font-weight: 800;
    cursor: pointer;
    padding: 3px 4px;
}
.ai-relogin:hover { text-decoration: underline; }

.ai-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.ai-msg { max-width: 88%; display: flex; flex-direction: column; }
.ai-msg-user { align-self: flex-end; align-items: flex-end; }
.ai-msg-assistant { align-self: flex-start; align-items: flex-start; }

.ai-bubble {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-msg-user .ai-bubble { background: var(--jj-red, #C8102E); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-assistant .ai-bubble { background: #fff; color: var(--jj-black, #15181D); border: 1px solid var(--jj-gray-200, #E5E8EC); border-bottom-left-radius: 4px; }
.ai-typing .ai-bubble { color: var(--jj-gray-400, #9AA3AE); font-style: italic; }

/* 來源清單（.ai-sources > .ai-sources-label + ul > li > a） */
.ai-sources {
    margin-top: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px dashed var(--jj-gray-200, #E5E8EC);
    border-radius: 10px;
    width: 100%;
}
.ai-sources-label { display: block; font-size: 12px; font-weight: 700; color: var(--jj-gray-600, #5B6470); margin-bottom: 4px; }
.ai-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-sources a { font-size: 13px; color: var(--jj-red, #C8102E); text-decoration: none; word-break: break-word; }
.ai-sources a:hover { text-decoration: underline; }

/* 站內無資料 / AI 失敗時的引導留資按鈕 */
.ai-inline-cta { margin-top: 6px; align-self: flex-start; }

/* 快捷按鈕 */
.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ai-chip {
    border: 1px solid var(--jj-gray-200, #E5E8EC);
    background: #fff;
    color: var(--jj-gray-900, #2B313A);
    border-radius: 999px;
    padding: 6px 11px;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.ai-chip:hover { border-color: var(--jj-red, #C8102E); color: var(--jj-red, #C8102E); }
.ai-chip-cta {
    background: var(--jj-red-light, #FBE9EC);
    border-color: var(--jj-red, #C8102E);
    color: var(--jj-red-dark, #A00D24);
    font-weight: 700;
}

/* 輸入列 */
.ai-input-row { display: flex; gap: 6px; }
.ai-input-row input { flex: 1; }
.ai-input-row .ai-btn { flex: none; padding: 9px 14px; }

.ai-contact-title { margin: 0 0 10px; font-size: 16px; }
.ai-done {
    background: #e8f5ec;
    color: #1d7a3a;
    border: 1px solid #b8e0c4;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
}
.ai-done[hidden] { display: none; }

/* ---- 手機版：避免水平溢出，按鈕縮為圓形圖示 ---- */
@media (max-width: 480px) {
    .ai-assistant { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
    .ai-fab-copy { display: none; }
    .ai-fab { min-height: 56px; padding: 8px; }
    .ai-fab-status { left: auto; right: 8px; bottom: 8px; }
    .ai-panel {
        width: calc(100vw - 24px);
        max-height: min(70vh, calc(100vh - 96px));
    }
}

/* 偏好減少動態 */
@media (prefers-reduced-motion: reduce) {
    .ai-panel,
    .ai-fab::before,
    .ai-assistant.is-open .ai-mascot-fab,
    .ai-mascot-eye { animation: none; }
    .ai-fab,
    .ai-mascot { transition: none; }
}