/* ====================================================
   前台懸浮按鈕統一設計（FSFixedButton）
   modern simple 風格 + 站台主色互動
   ==================================================== */

/* CSS 變數：可被各按鈕覆寫 */
:root {
    --fs-fixed-btn-size: 60px;
    --fs-fixed-btn-gap: 12px;
    --fs-fixed-btn-margin-bottom: 24px;
    --fs-fixed-btn-margin-right: 24px;
    --fs-fixed-btn-radius: 50%;
    /* 預設按鈕：背景色 + 透明度（可由後台 WebPatternSetting 覆寫） */
    --fs-fixed-btn-bg-default: #f0f0f0;
    --fs-fixed-btn-bg-default-hover: #e0e0e0;
    --fs-fixed-btn-opacity: 0.7;
    --fs-fixed-btn-color-default: #555555;
    --fs-fixed-btn-border-default: 1px solid rgba(0, 0, 0, 0.08);
    /* 站台主色（會員展開、未來其他 active 狀態用） */
    --fs-fb-accent-color: #6DC2A5;
    --fs-fb-accent-color-hover: #5fb094;
    /* 陰影 */
    --fs-fixed-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    --fs-fixed-btn-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.1);
    --fs-fixed-btn-z: 9900;
    --fs-fixed-btn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 長方形圖片廣告（自訂，堆在 Y 軸圓形按鈕最上方） */
    --fs-fb-rect-w: 95px;
    --fs-fb-rect-h: 120px;
}

/* 裝置顯示控制 */
@media (min-width: 769px) {
    .fs-fb-hide-on-pc { display: none !important; }
    .fs-fb-mobile-only { display: none !important; }
}
@media (max-width: 768px) {
    .fs-fb-hide-on-mobile { display: none !important; }
    .fs-fb-pc-only { display: none !important; }
}

/* 隱藏狀態（用於 ScrollTop 滾動偵測等動態顯隱）— 平滑漸隱 */
.fs-fb-hidden.fs-fb-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.8);
}

/* 容器：fixed 在右下角，作為所有 fs-fixed-button 的定位基準 */
.fs-fixed-button-container {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    z-index: var(--fs-fixed-btn-z);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 按鈕基底（所有 fs-fixed-button 都套這個）
   注意：用雙重 class 選擇器 .fs-fixed-button.fs-fixed-button 提升 specificity 到 (0,0,2,0)，
   強制覆寫各按鈕原本 CSS（如 .ai-cs-float-button 的 min-width、height、padding 等） */
.fs-fixed-button.fs-fixed-button {
    position: fixed;
    width: var(--fs-fixed-btn-size);
    min-width: var(--fs-fixed-btn-size);
    max-width: var(--fs-fixed-btn-size);
    height: var(--fs-fixed-btn-size);
    min-height: var(--fs-fixed-btn-size);
    max-height: var(--fs-fixed-btn-size);
    border-radius: var(--fs-fixed-btn-radius);
    background: var(--fs-fixed-btn-bg-default);
    color: var(--fs-fixed-btn-color-default);
    border: var(--fs-fixed-btn-border-default);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--fs-fixed-btn-shadow);
    transition: var(--fs-fixed-btn-transition);
    pointer-events: auto;
    text-decoration: none;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    opacity: var(--fs-fixed-btn-opacity);
}

.fs-fixed-button.fs-fixed-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--fs-fixed-btn-shadow-hover);
    background: var(--fs-fixed-btn-bg-default-hover);
    color: var(--fs-fixed-btn-color-default);
    text-decoration: none;
    opacity: 1;
}

.fs-fixed-button.fs-fixed-button:active {
    transform: translateY(0) scale(0.98);
}

/* 按鈕內 SVG 圖示 */
.fs-fixed-button.fs-fixed-button .fs-fb-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* 按鈕內圖檔（自訂按鈕用） */
.fs-fixed-button.fs-fixed-button .fs-fb-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* 按鈕內中文字（AI 客服「客服」/「問」）
   字體稍小，讓「客服」二字在 60×60 圓內舒適呈現 */
.fs-fixed-button.fs-fixed-button .fs-fb-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0;
}

/* 變體：強調色（藍色漸層） — 給 AI 客服 */
.fs-fixed-button.fs-fixed-button--accent-blue {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #ffffff;
    border: none;
    overflow: visible; /* badge 需超出圓形邊界 */
}
.fs-fixed-button.fs-fixed-button--accent-blue:hover {
    background: linear-gradient(135deg, #5aa0f2 0%, #4286c8 100%);
    color: #ffffff;
}

/* 變體：強調色（紫色漸層） — 給商品詢價 */
.fs-fixed-button.fs-fixed-button--accent-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border: none;
    overflow: visible; /* badge 需超出圓形邊界 */
}
.fs-fixed-button.fs-fixed-button--accent-purple:hover {
    background: linear-gradient(135deg, #768af0 0%, #855bb0 100%);
    color: #ffffff;
}

/* ====================================================
   位置定位：依 AxisType 與 Position 計算 bottom/right
   原點 (右下角) = ScrollTop
   X 軸往左偏移：right = base + (size + gap) * pos
   Y 軸往上偏移：bottom = base + (size + gap) * pos
   所有按鈕 60×60 統一寬度，公式單一
   ==================================================== */

/* 原點：ScrollTop */
.fs-fixed-button.fs-fixed-button[data-axis="ScrollTop"] {
    bottom: var(--fs-fixed-btn-margin-bottom);
    right: var(--fs-fixed-btn-margin-right);
}

/* X 軸（往左延伸） */
.fs-fixed-button.fs-fixed-button[data-axis="X"] {
    bottom: var(--fs-fixed-btn-margin-bottom);
    right: calc(var(--fs-fixed-btn-margin-right) + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * var(--fs-fb-pos, 1));
}

/* Y 軸（往上延伸） */
.fs-fixed-button.fs-fixed-button[data-axis="Y"] {
    right: var(--fs-fixed-btn-margin-right);
    bottom: calc(var(--fs-fixed-btn-margin-bottom) + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * var(--fs-fb-pos, 1));
}

/* ====================================================
   長方形圖片廣告（自訂懸浮鈕，堆在 Y 軸圓形按鈕最上方，最多 2 個）
   定位錨：--fs-fb-ycount（可見圓形 Y 按鈕數，由 VC 算）、--fs-fb-rect-index（0=最下 / 1=往上）
   bottom = margin + (size+gap)*(ycount+1) + (rectH+gap)*index → 疊在最上面那顆圓形 Y 按鈕之上
   ==================================================== */
.fs-fb-rect {
    position: fixed;
    right: var(--fs-fixed-btn-margin-right);
    bottom: calc(var(--fs-fixed-btn-margin-bottom)
                 + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * (var(--fs-fb-ycount, 0) + 1)
                 + (var(--fs-fb-rect-h) + var(--fs-fixed-btn-gap)) * var(--fs-fb-rect-index, 0));
    width: var(--fs-fb-rect-w);
    height: var(--fs-fb-rect-h);
    z-index: var(--fs-fixed-btn-z);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--fs-fixed-btn-shadow);
    transition: var(--fs-fixed-btn-transition);
    pointer-events: auto;
    display: block;
    text-decoration: none;
    background: transparent;
    padding: 0;
}

.fs-fb-rect:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--fs-fixed-btn-shadow-hover);
}

.fs-fb-rect img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ====================================================
   會員按鈕（含子選單展開）
   ==================================================== */
.fs-fb-member-wrap {
    position: fixed;
    pointer-events: auto;
    width: var(--fs-fixed-btn-size);
    height: var(--fs-fixed-btn-size);
}

/* X 軸的會員按鈕容器位置 */
.fs-fb-member-wrap[data-axis="X"] {
    bottom: var(--fs-fixed-btn-margin-bottom);
    right: calc(var(--fs-fixed-btn-margin-right) + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * var(--fs-fb-pos, 1));
}

/* Y 軸的會員按鈕容器位置 */
.fs-fb-member-wrap[data-axis="Y"] {
    right: var(--fs-fixed-btn-margin-right);
    bottom: calc(var(--fs-fixed-btn-margin-bottom) + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * var(--fs-fb-pos, 1));
}

/* 容器內的 toggle 按鈕：position static 才不會被基底 fixed 干擾 */
.fs-fb-member-wrap .fs-fb-member-toggle.fs-fixed-button {
    position: static;
    width: 100%;
    height: 100%;
}

/* 子選單預設隱藏 */
.fs-fb-member-submenu {
    position: absolute;
    display: none;
    gap: 8px;
    pointer-events: auto;
}

.fs-fb-member-wrap.is-open .fs-fb-member-submenu {
    display: flex;
}

/* X 軸 member：子選單往上展開（垂直堆疊） */
.fs-fb-member-wrap[data-axis="X"] .fs-fb-member-submenu {
    bottom: calc(100% + 8px);
    right: 0;
    flex-direction: column-reverse;
}

/* Y 軸 member：子選單往左展開（水平堆疊） */
.fs-fb-member-wrap[data-axis="Y"] .fs-fb-member-submenu {
    right: calc(100% + 8px);
    bottom: 0;
    flex-direction: row-reverse;
}

/* 子選單內的按鈕：靜態定位（容器內排列） */
.fs-fb-member-submenu .fs-fixed-button.fs-fixed-button {
    position: static;
    width: var(--fs-fixed-btn-size);
    height: var(--fs-fixed-btn-size);
}

/* 會員按鈕展開時：toggle 變站台主色 + 白色 icon */
.fs-fb-member-wrap.is-open .fs-fb-member-toggle.fs-fixed-button {
    background: var(--fs-fb-accent-color);
    color: #ffffff;
    border-color: var(--fs-fb-accent-color);
}
.fs-fb-member-wrap.is-open .fs-fb-member-toggle.fs-fixed-button:hover {
    background: var(--fs-fb-accent-color-hover);
    color: #ffffff;
}

/* ====================================================
   AI 客服提醒泡泡位置 — 跟隨按鈕
   X 軸按鈕 → 泡泡顯示在按鈕上方（箭頭朝下）
   Y 軸按鈕 → 泡泡顯示在按鈕左方（箭頭朝右）
   用 [data-axis] 與 .ai-cs-reminder-bubble.ai-cs-reminder-bubble 雙重 class 提升 specificity
   ==================================================== */

/* X 軸：泡泡在按鈕正上方 */
.ai-cs-reminder-bubble.ai-cs-reminder-bubble[data-axis="X"] {
    bottom: calc(var(--fs-fixed-btn-margin-bottom) + var(--fs-fixed-btn-size) + 12px);
    right: calc(var(--fs-fixed-btn-margin-right) + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * var(--fs-fb-pos, 1));
    top: auto;
    left: auto;
}
/* X 軸箭頭朝下（指向下方按鈕） */
.ai-cs-reminder-bubble.ai-cs-reminder-bubble[data-axis="X"]::after {
    bottom: -8px;
    right: calc(var(--fs-fixed-btn-size) / 2 - 8px);
    top: auto;
    left: auto;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
    border-bottom: none;
}

/* Y 軸：泡泡在按鈕正左方 */
.ai-cs-reminder-bubble.ai-cs-reminder-bubble[data-axis="Y"] {
    right: calc(var(--fs-fixed-btn-margin-right) + var(--fs-fixed-btn-size) + 12px);
    bottom: calc(var(--fs-fixed-btn-margin-bottom) + (var(--fs-fixed-btn-size) + var(--fs-fixed-btn-gap)) * var(--fs-fb-pos, 1));
    top: auto;
    left: auto;
}
/* Y 軸箭頭朝右（指向右方按鈕） */
.ai-cs-reminder-bubble.ai-cs-reminder-bubble[data-axis="Y"]::after {
    right: -8px;
    bottom: calc(var(--fs-fixed-btn-size) / 2 - 8px);
    top: auto;
    left: auto;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ffffff;
    border-right: none;
}

/* ====================================================
   手機版 RWD
   ==================================================== */
@media (max-width: 768px) {
    :root {
        --fs-fixed-btn-size: 52px;
        --fs-fixed-btn-gap: 8px;
        --fs-fixed-btn-margin-bottom: 16px;
        --fs-fixed-btn-margin-right: 16px;
        /* 長方形廣告手機縮小（維持 95:120 比例） */
        --fs-fb-rect-w: 70px;
        --fs-fb-rect-h: 88px;
    }

    .fs-fixed-button.fs-fixed-button .fs-fb-icon {
        width: 20px;
        height: 20px;
    }

    .fs-fixed-button.fs-fixed-button .fs-fb-text {
        font-size: 16px;
        letter-spacing: 0;
    }
}

/* ========== 社群媒體按鈕品牌色 ========== */
.fs-fixed-button.fs-fixed-button[data-social="LINE"] {
    background: #06C755;
    color: #ffffff;
    border-color: #06C755;
}
.fs-fixed-button.fs-fixed-button[data-social="LINE"]:hover {
    background: #05b34c;
}

.fs-fixed-button.fs-fixed-button[data-social="Facebook"] {
    background: #1877F2;
    color: #ffffff;
    border-color: #1877F2;
}
.fs-fixed-button.fs-fixed-button[data-social="Facebook"]:hover {
    background: #1565d8;
}

.fs-fixed-button.fs-fixed-button[data-social="Instagram"] {
    background: #E4405F;
    color: #ffffff;
    border-color: #E4405F;
}
.fs-fixed-button.fs-fixed-button[data-social="Instagram"]:hover {
    background: #d63050;
}

.fs-fixed-button.fs-fixed-button[data-social="LinkedIn"] {
    background: #0A66C2;
    color: #ffffff;
    border-color: #0A66C2;
}
.fs-fixed-button.fs-fixed-button[data-social="LinkedIn"]:hover {
    background: #0958a8;
}

.fs-fixed-button.fs-fixed-button[data-social="YouTube"] {
    background: #FF0000;
    color: #ffffff;
    border-color: #FF0000;
}
.fs-fixed-button.fs-fixed-button[data-social="YouTube"]:hover {
    background: #e60000;
}

.fs-fixed-button.fs-fixed-button[data-social="Twitter"] {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.fs-fixed-button.fs-fixed-button[data-social="Twitter"]:hover {
    background: #333333;
}

/* ====================================================
   手機版懸浮按鈕縮放鈕（原點位置取代至頂鈕，fs-fb-mobile-only 常駐）
   body.fs-float-collapsed = 收合狀態（隱藏規則僅手機生效）
   ==================================================== */

/* 圖示狀態：預設顯示「收合」chevron-down，收合後顯示「展開」chevron-up */
.fs-fb-collapse-toggle .fs-fb-collapse-icon--expand {
    display: none;
}

body.fs-float-collapsed .fs-fb-collapse-toggle .fs-fb-collapse-icon--collapse {
    display: none;
}

body.fs-float-collapsed .fs-fb-collapse-toggle .fs-fb-collapse-icon--expand {
    display: block;
}

@media (max-width: 768px) {
    /* 收合：隱藏所有右下懸浮元素（縮放鈕除外）與左下 AI 小助手 launcher（.fs-float-collapsible 標記） */
    body.fs-float-collapsed .fs-fixed-button.fs-fixed-button:not(.fs-fb-collapse-toggle),
    body.fs-float-collapsed .fs-fb-rect,
    body.fs-float-collapsed .ai-cs-reminder-bubble,
    body.fs-float-collapsed .ai-cs-mini-button,
    body.fs-float-collapsed .fs-float-collapsible {
        display: none !important;
    }

    /* 收合狀態下縮放鈕降透明度示意 */
    body.fs-float-collapsed .fs-fb-collapse-toggle.fs-fb-collapse-toggle {
        opacity: 0.5;
    }

    body.fs-float-collapsed .fs-fb-collapse-toggle.fs-fb-collapse-toggle:hover {
        opacity: 1;
    }
}