/* Shared by every page that renders the existing AI customer-service widget. */
#chat-widget-container {
    --chat-ink: #302f2b;
    --chat-muted: #726e66;
    --chat-paper: #f7f6f2;
    --chat-line: #e5e2dc;
    --chat-accent: #806346;
    right: 28px;
    bottom: 108px;
    font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: var(--chat-ink);
}
#chat-bubble {
    width: 62px;
    height: 62px;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: #fff;
    color: var(--chat-ink);
    border: 1px solid var(--chat-line);
    box-shadow: 0 5px 24px #302f2b12;
}
#chat-bubble i { font-size: 23px; line-height: 1.1; }
#chat-bubble span { font-size: 9px; letter-spacing: .5px; white-space: nowrap; }
#chat-bubble:hover { background: var(--chat-paper); border-color: var(--chat-accent); box-shadow: 0 8px 28px #302f2b1a; transform: translateY(-2px); }
#chat-window {
    width: min(370px, calc(100vw - 36px));
    height: min(540px, calc(100dvh - 140px));
    border: 1px solid var(--chat-line);
    border-radius: 12px;
    box-shadow: 0 18px 65px #302f2b22;
    animation-duration: .25s;
}
#chat-header { background: #fff; color: var(--chat-ink); border-bottom: 1px solid var(--chat-line); padding: 20px; gap: 12px; flex-shrink: 0; }
.chat-header-mark { width: 35px; height: 35px; border: 1px solid var(--chat-line); border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--chat-accent); }
.chat-heading { flex: 1; }
.chat-heading small { display: block; color: var(--chat-muted); font-size: 8px; letter-spacing: 1.5px; margin-bottom: 5px; }
#chat-header h5 { font-size: 16px; font-weight: 500; letter-spacing: 1px; }
#close-chat-btn { color: var(--chat-muted); width: 36px; height: 36px; padding: 0; border-radius: 50%; }
#close-chat-btn:hover { color: var(--chat-ink); background: var(--chat-paper); }
#chat-body { background: var(--chat-paper); padding: 20px 16px; min-height: 0; }
#chat-widget-container .message-content { border-radius: 10px; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
#chat-widget-container .assistant-message .message-content { background: #fff; color: var(--chat-ink); border: 1px solid var(--chat-line); border-top-left-radius: 2px; }
#chat-widget-container .user-message .message-content { background: var(--chat-ink); color: #fff; border-top-right-radius: 2px; }
#chat-widget-container .assistant-message .message-content a { color: var(--chat-accent); }
#chat-widget-container .assistant-message .message-content blockquote { border-color: var(--chat-accent); }
#chat-footer { background: #fff; border-color: var(--chat-line); padding: 12px; flex-shrink: 0; }
#chat-input { background: var(--chat-paper); border: 1px solid var(--chat-line); border-radius: 6px; font-size: 14px; color: var(--chat-ink); }
#chat-input:focus { box-shadow: 0 0 0 2px #80634625; border-color: var(--chat-accent); }
#chat-send-btn { color: #fff; background: var(--chat-ink); border-radius: 6px; font-size: 17px; }
#chat-send-btn:hover { background: var(--chat-accent); color: #fff; }
#chat-widget-container button:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 3px; }
#chat-widget-container #typing-indicator span { background: var(--chat-accent); }
@media(max-width:767px) {
    #chat-widget-container { right: 18px; bottom: 88px; }
    #chat-bubble { width: 55px; height: 55px; }
    #chat-bubble i { font-size: 21px; }
    #chat-window { width: min(370px, calc(100vw - 36px)); height: min(520px, calc(100dvh - 118px)); position: static; border-radius: 12px; }
    #chat-input { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) {
    #chat-widget-container *, #chat-widget-container *::before, #chat-widget-container *::after { animation: none !important; transition: none !important; }
    #chat-bubble:hover { transform: none; }
}