/* Ask AI floating button + 聊天室視窗（全站右下角）
   按鈕外觀對齊新版首頁 vendor/css/homepage_20261103.css 的 .adl-ask-ai；聊天室畫面依 widget.html 示意（Rowan）。
   右側角落預留給 CRM 的 FORM icon（首頁現為 .adl-feedback，寬 52px、right 36px、間距 16px → 本按鈕 right 104px）。
   搭配 Controls/Layout/AskAI.ascx 與 script/Custom/askai.js 使用。 */

/* 站上全域 clearfix 會在 div 加上 ::before/::after，變成 flex 容器的多餘項目導致跑版，這裡全部拔掉 */
#askAiRoot div::before,
#askAiRoot div::after {
    content: none !important;
}

/* 站上 normalize 對 button/input 的預設值，在面板內統一重設 */
#askAiRoot button,
#askAiRoot input {
    margin: 0;
    font: inherit;
    box-sizing: border-box;
}

#askAiRoot button {
    line-height: normal;
}

/* ---------- 浮動按鈕 ---------- */
.askAiBtn {
    position: fixed;
    right: 104px;
    bottom: 32px;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #d0343a;
    color: #fff;
    font-family: "Ubuntu", Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    padding: 5px 25px 5px 5px; /* 高 52px（5 + 42 + 5），同首頁浮動按鈕 */
    border-radius: 32px;
    box-shadow: 0 4px 11px rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.askAiBtn:hover {
    background: #b8232c;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.askAiBtn i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ff7a3a;
    border: 3px solid #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease;
}

.askAiBtn:hover i {
    background: #ff8a50;
}

.askAiBtn svg {
    display: block;
    width: 58%;
    height: 58%;
}

/* 按鈕 icon 雙態：預設顯示聊天泡泡；聊天室開啟時換成向下箭頭 */
.askAiBtn .askAiIcArrow {
    display: none;
}

.askAiOpen .askAiBtn .askAiIcChat {
    display: none;
}

.askAiOpen .askAiBtn .askAiIcArrow {
    display: block;
}

/* ---------- 聊天室視窗 ---------- */
.askAiPanel {
    position: fixed;
    right: 36px;
    bottom: 96px; /* 按鈕上方：32 + 52 + 12 */
    z-index: 100001;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #1d2329;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    font-family: "Ubuntu", Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.askAiOpen .askAiPanel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* 標題列 */
.askAiPanelHead {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #d0343a;
    color: #fff;
    padding: 12px 12px 12px 16px;
    flex: 0 0 auto;
}

.askAiAvatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #d0343a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.askAiAvatar svg {
    display: block;
    width: 22px;
    height: 22px;
}

.askAiHeadText {
    flex: 1 1 auto;
    min-width: 0;
}

.askAiTitle {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.askAiStatus {
    font-size: 12px;
    line-height: 1.3;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.askAiStatus::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    margin-right: 5px;
    vertical-align: 1px;
}

.askAiReset {
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    opacity: .85;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, opacity .2s ease;
}

.askAiReset:hover {
    background: rgba(255, 255, 255, .2);
    opacity: 1;
}

.askAiPanelClose {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.askAiPanelClose:hover {
    background: rgba(255, 255, 255, .25);
}

.askAiPanelClose .fa {
    font-size: 18px;
    line-height: 1;
}

/* 對話區 */
.askAiLog {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    background: #f7f9fb;
    -webkit-overflow-scrolling: touch;
}

.askAiMsg {
    display: flex;
    margin: 10px 0;
}

.askAiMsg:first-child {
    margin-top: 0;
}

.askAiMe {
    justify-content: flex-end;
}

.askAiBubble {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.askAiMe .askAiBubble {
    background: #d0343a;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.askAiBot .askAiBubble {
    background: #fff;
    color: #1d2329;
    border: 1px solid #dfe3e8;
    border-bottom-left-radius: 4px;
}

.askAiBubble a {
    color: #b8232c;
    font-weight: 600;
    text-decoration: none;
}

.askAiBubble a:hover {
    text-decoration: underline;
}

.askAiMe .askAiBubble a {
    color: #fff;
}

.askAiBubble .askAiH {
    display: block;
    font-weight: 700;
    margin-top: 4px;
}

.askAiLogId {
    font-size: 11px;
    color: #a0a8b2;
    margin-top: 6px;
    text-align: right;
}

/* 範例問題 */
.askAiChips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
}

.askAiChips button {
    border: 1px solid #d6dbe1;
    color: #3a4550;
    background: #fff;
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.askAiChips button:hover {
    border-color: #d0343a;
    color: #d0343a;
    background: #fff7f7;
}

/* 等待中 */
.askAiTyping {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.askAiTyping i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9aa5b1;
    animation: askAiBlink 1.2s infinite;
}

.askAiTyping i:nth-child(2) {
    animation-delay: .2s;
}

.askAiTyping i:nth-child(3) {
    animation-delay: .4s;
}

@keyframes askAiBlink {
    0%, 80%, 100% { opacity: .3; }
    40% { opacity: 1; }
}

.askAiWait {
    font-size: 12px;
    color: #6b7682;
    margin-left: 8px;
}

/* Email 列 */
.askAiEmailBar {
    flex: 0 0 auto;
    border-top: 1px solid #dfe3e8;
    background: #f8f9fb;
    padding: 8px 10px 6px;
}

.askAiEmailTitle {
    font-size: 12.5px;
    color: #3a4550;
    margin-bottom: 6px;
}

.askAiEmailRow {
    display: flex;
    gap: 6px;
}

.askAiEmailRow input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #d6dbe1;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    height: auto;
    background: #fff;
    outline: none;
}

.askAiEmailRow input:focus {
    border-color: #b8232c;
}

.askAiEmailRow button {
    flex: 0 0 auto;
    border: 1px solid #d0343a;
    background: #fff;
    color: #d0343a;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.askAiEmailRow button:hover {
    background: #d0343a;
    color: #fff;
}

.askAiEmailRow button:disabled {
    opacity: .5;
    cursor: default;
}

.askAiEmailErr {
    display: none;
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
}

.askAiEmailNote {
    font-size: 10.5px;
    color: #6b7682;
    margin-top: 4px;
}

.askAiEmailDone {
    padding: 7px 10px;
    font-size: 12.5px;
    color: #1e7a46;
    background: #effaf3;
}

/* 輸入列 */
.askAiFooter {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #dfe3e8;
    background: #fff;
}

.askAiFooter input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #dfe3e8;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 14px;
    height: auto;
    background: #fff;
    outline: none;
}

.askAiFooter input:focus {
    border-color: #b8232c;
}

.askAiFooter button {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d0343a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}

.askAiFooter button:hover {
    background: #b8232c;
}

.askAiFooter button:disabled {
    opacity: .4;
    cursor: default;
}

.askAiFooter button svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* 免責聲明 */
.askAiDisclaimer {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.4;
    color: #6b7682;
    text-align: center;
    padding: 0 10px 8px;
    background: #fff;
}

/* ---------- 手機版 ---------- */
@media (max-width: 768px) {
    .askAiBtn {
        right: 68px; /* 14 + 44 + 10，同首頁手機版間距 */
        bottom: 16px;
        font-size: 13px;
        gap: 9px;
        padding: 5px 17px 5px 5px; /* 高 44px */
    }

    .askAiBtn i {
        width: 34px;
        height: 34px;
        border-width: 2px;
    }

    .askAiPanel {
        left: 14px;
        right: 14px;
        width: auto;
        bottom: 76px; /* 16 + 44 + 16 */
        max-height: calc(100vh - 110px);
    }
}

/* 隱藏 Intercom 聊天 icon（載入邏輯保留；正式移除清單見 Ask AI 需求文件） */
.intercom-lightweight-app,
#intercom-container,
.intercom-launcher {
    display: none !important;
}

/* 蓋掉新版首頁 CMS 內容裡的靜態 Ask AI（無功能），全站統一改用本按鈕 */
.adl-float .adl-ask-ai {
    display: none !important;
}