/**
 * Nuvoton Direct — LiveChat 啟動按鈕
 *
 * 按鈕外觀採用客戶提供之版本：純 CSS 手刻對話框圖示，不依賴任何字型檔。
 * 搭配 themes/modez/js/autoload/90-livechat-gate.js（點擊才載入 LiveChat）。
 */

#nvt-lc-launch-btn {
    --red: #d00600;

    position: fixed;
    left: 12px;
    bottom: 10px;
    z-index: 30;

    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}

#nvt-lc-launch-btn:hover { --red: #b00500; }

#nvt-lc-launch-btn:focus-visible {
    outline: 3px solid #f6a21d;
    outline-offset: 2px;
}

/* ========= 對話框圖示（白色，純 CSS 組成） ========= */
#nvt-lc-launch-btn .logo {
    --s: 33px;                  /* 圖示大小 */
    --c: #ffffff;               /* 圖示：白色 */
    --bg: var(--red);           /* 鏤空／缺口：跟紅圈同色 */
    position: relative;
    width: var(--s);
    height: var(--s);
}

#nvt-lc-launch-btn .logo > * { position: absolute; }

#nvt-lc-launch-btn .logo .body {          /* 本體：圓角方形 */
    left: 0; top: 0;
    width: 100%; height: 84%;
    background: var(--c);
    border-radius: calc(var(--s) * 0.23);
    z-index: 1;
}

#nvt-lc-launch-btn .logo .tail {          /* 尾巴 */
    inset: 0;
    background: var(--c);
    clip-path: polygon(37.8% 62%, 100% 62%, 40% 98.5%);
    z-index: 2;
}

#nvt-lc-launch-btn .logo .hole {          /* 中間鏤空 */
    left: 16.3%; top: 16.3%;
    width: 67.4%; height: 49.7%;
    background: var(--bg);
    border-radius: calc(var(--s) * 0.11);
    z-index: 3;
}

#nvt-lc-launch-btn .logo .notch {         /* V 形缺口 */
    inset: 0;
    background: var(--bg);
    clip-path: polygon(37.2% 65.2%, 62.8% 65.2%, 37.2% 85.5%);
    z-index: 4;
}

/* ========= 載入中：圖示換成轉圈、鎖住重複點擊 ========= */
#nvt-lc-launch-btn.is-loading {
    pointer-events: none;
    cursor: default;
}

#nvt-lc-launch-btn.is-loading .logo { visibility: hidden; }

#nvt-lc-launch-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: nvt-lc-spin .9s linear infinite;
}

@keyframes nvt-lc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #nvt-lc-launch-btn.is-loading::after {
        animation: none;
        border-style: dotted;
    }
}

/* 已載入後隱藏自製按鈕的備用狀態（保留給日後切換用，預設不套用） */
#nvt-lc-launch-btn.is-hidden { display: none; }