:root {
        --chat-accent: #d6a900;
        --chat-accent-light: #fff8dc;
        --chat-accent-hover: #bd9500;

        --chat-dark: #252525;
        --chat-text: #333333;
        --chat-muted: #8a8a8a;

        --chat-bg: #f7f7f5;
        --chat-panel: #ffffff;
        --chat-border: #e8e8e3;

        --chat-user-bg: #2e2e2e;
        --chat-ai-bg: #f1f1ee;

        --chat-shadow:
            0 16px 45px
            rgba(0, 0, 0, 0.13);
    }


    * {
        box-sizing: border-box;
    }


    /* ========================================
       AI 客服視窗
    ======================================== */

    .chat-box {
        position: fixed;
        right: 15px;
        bottom: 15px;
        z-index: 9999998;

        width: 430px;
        max-width: calc(100vw - 32px);

        height: 800px !important;
        max-height: calc(100vh - 130px) !important;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        background:
            var(--chat-panel);

        border:
            1px solid
            rgba(0, 0, 0, 0.06);

        border-radius:
            20px;

        box-shadow:
            0 18px 55px
            rgba(0, 0, 0, 0.20);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform:
            translateY(16px)
            scale(0.97);

        transform-origin:
            right bottom;

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            "Noto Sans TC",
            Arial,
            sans-serif;
    }


    .chat-box.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);
    }


    /* ========================================
       頂部 Header
    ======================================== */

    .chat-header {
        position: relative;

        display: flex;
        align-items: center;
        gap: 12px;

        padding:
            17px 18px;

        color:
            #ffffff;

        background:
            linear-gradient(
                135deg,
                #2d2d2d 0%,
                #202020 100%
            );

        border-bottom:
            3px solid
            var(--chat-accent);
    }


    .chat-header-icon {
        position: relative;

        width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        color:
            var(--chat-dark);

        background:
            var(--chat-accent);

        border-radius:
            14px;

        font-size:
            17px;

        font-weight:
            800;

        letter-spacing:
            -1px;

        box-shadow:
            0 5px 14px
            rgba(214, 169, 0, 0.28);
    }


    .chat-header-content {
        min-width: 0;
        flex: 1;
    }


    .chat-header-title {
        margin-bottom:
            3px;

        font-size:
            17px;

        font-weight:
            700;

        letter-spacing:
            0.4px;
    }


    .chat-header-status {
        display: flex;
        align-items: center;
        gap: 6px;

        color:
            rgba(255, 255, 255, 0.72);

        font-size:
            12px;

        font-weight:
            400;
    }


    .chat-status-dot {
        width: 8px;
        height: 8px;

        display:
            inline-block;

        background:
            #65d88a;

        border-radius:
            50%;

        box-shadow:
            0 0 0 4px
            rgba(101, 216, 138, 0.12);
    }


    /* ========================================
       訊息區
    ======================================== */

    .chat-messages {
        flex: 1;

        padding:
            20px 16px;

        overflow-y:
            auto;

        background:
            linear-gradient(
                180deg,
                #fbfbfa 0%,
                var(--chat-bg) 100%
            );

        scroll-behavior:
            smooth;
    }


    .chat-messages::-webkit-scrollbar {
        width:
            6px;
    }


    .chat-messages::-webkit-scrollbar-track {
        background:
            transparent;
    }


    .chat-messages::-webkit-scrollbar-thumb {
        background:
            #d1d1cc;

        border-radius:
            10px;
    }


    .message-group {
        display: flex;
        flex-direction: column;

        max-width:
            84%;

        margin-bottom:
            15px;
    }


    .message-group.user-group {
        margin-left:
            auto;

        align-items:
            flex-end;
    }


    .message-group.ai-group {
        margin-right:
            auto;

        align-items:
            flex-start;
    }


    .message {
        padding:
            11px 14px;

        border-radius:
            15px;

        font-size:
            15px;

        line-height:
            1.7;

        white-space:
            pre-wrap;

        word-break:
            break-word;

        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }


    .message-group .message {
        max-width:
            100%;

        margin-bottom:
            4px;
    }


    .user-message {
        color:
            #ffffff;

        background:
            linear-gradient(
                135deg,
                #393939 0%,
                #262626 100%
            );

        border-bottom-right-radius:
            5px;

        box-shadow:
            0 5px 12px
            rgba(0, 0, 0, 0.10);
    }


    .ai-message {
        color:
            var(--chat-text);

        background:
            var(--chat-ai-bg);

        border:
            1px solid
            rgba(0, 0, 0, 0.035);

        border-bottom-left-radius:
            5px;

        box-shadow:
            0 4px 10px
            rgba(0, 0, 0, 0.045);
    }


    .message-time {
        padding:
            0 5px;

        color:
            var(--chat-muted);

        font-size:
            13px;

        line-height:
            1.5;

        letter-spacing:
            0.2px;
    }


    /* ========================================
       AI 等待動畫
    ======================================== */

    .loading-message {
        position:
            relative;

        padding-right:
            34px;

        color:
            #777777;

        font-size:
            14px;
    }


    .loading-message::after {
        position:
            absolute;

        right:
            12px;

        content:
            "...";

        color:
            var(--chat-accent);

        font-size:
            16px;

        font-weight:
            700;

        letter-spacing:
            2px;

        animation:
            chatLoading
            1.15s
            infinite;
    }


    @keyframes chatLoading {

        0% {
            opacity:
                0.3;
        }

        50% {
            opacity:
                1;
        }

        100% {
            opacity:
                0.3;
        }

    }


    /* ========================================
       固定回答打字游標
    ======================================== */

    .ai-message.is-typing::after {
        display:
            inline-block;

        width:
            2px;

        height:
            1em;

        margin-left:
            3px;

        vertical-align:
            -2px;

        content:
            "";

        background:
            var(--chat-accent);

        animation:
            aiTypingCursor
            0.8s
            steps(1)
            infinite;
    }


    @keyframes aiTypingCursor {

        0%,
        48% {
            opacity:
                1;
        }

        49%,
        100% {
            opacity:
                0;
        }

    }


    /* ========================================
       快速提問 FAQ 卡片
    ======================================== */

    .preset-question-group {
        width:
            100%;

        max-width:
            100%;

        margin:
            4px 0
            18px 0;

        padding:
            13px;

        background:
            rgba(255, 255, 255, 0.82);

        border:
            1px solid
            rgba(214, 169, 0, 0.18);

        border-radius:
            15px;

        box-shadow:
            0 5px 15px
            rgba(0, 0, 0, 0.04);

        animation:
            presetQuestionFadeIn
            0.28s ease;
    }


    .preset-question-title {
        display:
            flex;

        align-items:
            center;

        gap:
            7px;

        margin-bottom:
            11px;

        padding:
            0 3px;

        color:
            #77746b;

        font-size:
            14px;

        font-weight:
            600;

        letter-spacing:
            0.4px;
    }


    .preset-question-title::before {
        display:
            inline-block;

        width:
            7px;

        height:
            7px;

        content:
            "";

        background:
            var(--chat-accent);

        border-radius:
            50%;

        box-shadow:
            0 0 0 4px
            rgba(214, 169, 0, 0.12);
    }


    .preset-question-list {
        display:
            flex;

        flex-direction:
            column;

        gap:
            8px;
    }


    .preset-question-button {
        width:
            100%;

        display:
            flex;

        align-items:
            center;

        gap:
            9px;

        padding:
            11px 12px;

        color:
            #494536;

        background:
            #ffffff;

        border:
            1px solid
            #ebe6d8;

        border-radius:
            11px;

        cursor:
            pointer;

        font-size:
            16px;

        line-height:
            1.55;

        text-align:
            left;

        transition:
            color 0.18s ease,
            background 0.18s ease,
            border-color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }


    .preset-question-button:hover {
        color:
            #5f4c00;

        background:
            #fffaf0;

        border-color:
            rgba(214, 169, 0, 0.62);

        transform:
            translateX(3px);

        box-shadow:
            0 4px 11px
            rgba(214, 169, 0, 0.11);
    }


    .preset-question-button:active {
        transform:
            translateX(1px);
    }


    .preset-question-button:disabled {
        opacity:
            0.52;

        cursor:
            not-allowed;

        transform:
            none;

        box-shadow:
            none;
    }


    .preset-question-text {
        min-width:
            0;

        flex:
            1;
    }


    .preset-question-arrow {
        flex-shrink:
            0;

        color:
            #b5a466;

        font-size:
            21px;

        font-weight:
            300;

        line-height:
            1;

        transition:
            color 0.18s ease,
            transform 0.18s ease;
    }


    .preset-question-button:hover
    .preset-question-arrow {
        color:
            var(--chat-accent-hover);

        transform:
            translateX(2px);
    }


    @keyframes presetQuestionFadeIn {

        from {
            opacity:
                0;

            transform:
                translateY(5px);
        }

        to {
            opacity:
                1;

            transform:
                translateY(0);
        }

    }


    /* ========================================
       底部輸入區
    ======================================== */

    .chat-input-area {
        display:
            flex;

        align-items:
            center;

        gap:
            9px;

        padding:
            13px;

        background:
            #ffffff;

        border-top:
            1px solid
            var(--chat-border);
    }


    #chatInput {
        min-width:
            0;

        flex:
            1;

        padding:
            12px 13px;

        color:
            var(--chat-text);

        background:
            #fafafa;

        border:
            1px solid
            #deded9;

        border-radius:
            11px;

        outline:
            none;

        font-size:
            15px;

        transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease,
            background 0.18s ease;
    }


    #chatInput::placeholder {
        color:
            #aaaaa5;
    }


    #chatInput:focus {
        background:
            #ffffff;

        border-color:
            var(--chat-accent);

        box-shadow:
            0 0 0 4px
            rgba(214, 169, 0, 0.13);
    }


    #chatSend {
        width:
            48px;

        height:
            44px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-shrink:
            0;

        padding:
            0;

        color:
            #2c2c2c;

        background:
            var(--chat-accent);

        border:
            0;

        border-radius:
            11px;

        cursor:
            pointer;

        transition:
            background 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease;
    }


    #chatSend:hover {
        background:
            var(--chat-accent-hover);

        transform:
            translateY(-1px);

        box-shadow:
            0 5px 12px
            rgba(214, 169, 0, 0.24);
    }


    #chatSend:active {
        transform:
            translateY(0);
    }


    #chatSend:disabled {
        opacity:
            0.48;

        cursor:
            not-allowed;

        transform:
            none;

        box-shadow:
            none;
    }


    #chatSend svg {
        width:
            20px;

        height:
            20px;
    }


    /* ========================================
       右下角 AI 啟動按鈕
    ======================================== */

    .chat-launcher {
        position:
            fixed;

        right:
            23px;

        bottom:
            34px;

        z-index:
            9999;

        width:
            50px;

        height:
            50px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0;

        color:
            #282828;

        background:
            linear-gradient(
                135deg,
                #e0b800 0%,
                #c99e00 100%
            );

        border:
            0;

        border-radius:
            50%;

        cursor:
            pointer;

        box-shadow: 2px 2px 7px  rgba(0,0,0,.35); 

        transition:
			opacity 0.2s ease,
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
    }

	.chat-launcher.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

    .chat-launcher:hover {
        transform:
            translateY(-3px)
            scale(1.04);

        box-shadow:
            0 14px 28px
            rgba(0, 0, 0, 0.24);
    }


    .chat-launcher:active {
        transform:
            translateY(0)
            scale(0.98);
    }


	

	.chat-launcher-img {
		width: 110%;
		height: 110%;
		display: block;
		object-fit: contain;
	}
    .chat-launcher-dot {
        position:
            absolute;

        right:
            1px;

        top:
            1px;

        width:
            13px;

        height:
            13px;

        background:
            #63d889;

        border:
            2px solid
            #ffffff;

        border-radius:
            50%;

        box-shadow:
            0 0 0 3px
            rgba(99, 216, 137, 0.18);
    }


    /* ========================================
       手機版
    ======================================== */

    @media screen and (max-width: 520px) {
		
		#chatInput,
		.chat-contact-input {
			font-size:
				16px;
		}

        .chat-launcher {
            right:
                18px;
        }


        .chat-box {
			margin: 0 auto;
            right:
                0;
            left:
                0;

			top: 80px;

            bottom:
                auto;

            width:
                95%;

            max-width:
                95%;

            height:
                min(
                    690px,
                    calc(100vh - 90px)
                )
                !important;

            max-height:
                calc(100vh - 210px)
                !important;

            border-radius:
                17px;
        }


        .chat-header {
            padding:
                14px 15px;
        }


        .chat-messages {
            padding:
                16px 13px;
        }


        .message-group {
            max-width:
                88%;
        }


        .preset-question-group {
            padding:
                11px;

            border-radius:
                13px;
        }


        .preset-question-button {
            padding:
                11px 10px;

            font-size:
                15px;
        }

    }

	/* ========================================
	   Header 操作按鈕
	======================================== */

	.chat-header-actions {
		display:
			flex;

		align-items:
			center;

		gap:
			6px;

		margin-left:
			auto;
	}


	.chat-fullscreen,
	.chat-close {
		width:
			34px;

		height:
			34px;

		display:
			flex;

		align-items:
			center;

		justify-content:
			center;

		flex-shrink:
			0;

		padding:
			0;

		color:
			rgba(255, 255, 255, 0.78);

		background:
			rgba(255, 255, 255, 0.07);

		border:
			0;

		border-radius:
			9px;

		cursor:
			pointer;

		transition:
			color 0.18s ease,
			background 0.18s ease,
			transform 0.18s ease;
	}


	.chat-fullscreen:hover,
	.chat-close:hover {
		color:
			#ffffff;

		background:
			rgba(255, 255, 255, 0.16);
	}


	.chat-fullscreen:active,
	.chat-close:active {
		transform:
			scale(0.94);
	}


	.chat-fullscreen svg {
		width:
			17px;

		height:
			17px;
	}


	.chat-close {
		font-size:
			25px;

		font-weight:
			300;

		line-height:
			1;
	}


	/* 預設只顯示放大圖示 */
	.icon-collapse {
		display:
			none;
	}


	/* ========================================
	   全螢幕狀態
	======================================== */

	.chat-box.is-fullscreen {
		inset:
			0;

		right:
			auto;

		bottom:
			auto;

		width:
			100vw;

		max-width:
			none;

		height:
			100vh
			!important;

		height:
			100dvh
			!important;

		max-height:
			none
			!important;

		border:
			0;

		border-radius:
			0;

		transform:
			none;
	}


	.chat-box.is-fullscreen
	.icon-expand {
		display:
			none;
	}


	.chat-box.is-fullscreen
	.icon-collapse {
		display:
			block;
	}


	/* 全螢幕時隱藏右下角圓形 Icon */
	body.ai-chat-fullscreen-open
	.chat-launcher {
		opacity:
			0;

		visibility:
			hidden;

		pointer-events:
			none;
	}


	/* 避免客服視窗開啟時背景頁面滾動 */
	body.ai-chat-open {
		overflow:
			hidden !important;
	}


	/* 避免全螢幕時背景頁面滾動 */
	body.ai-chat-fullscreen-open {
		overflow:
			hidden;
	}


	/* 全螢幕時訊息區稍微增加左右留白 */
	.chat-box.is-fullscreen
	.chat-messages {
		padding:
			24px
			max(
				18px,
				calc((100vw - 900px) / 2)
			);
	}


	.chat-box.is-fullscreen
	.chat-input-area {
		padding:
			16px
			max(
				18px,
				calc((100vw - 900px) / 2)
			);
	}


	/* 全螢幕時不要讓訊息泡泡過寬 */
	.chat-box.is-fullscreen
	.message-group {
		max-width:
			min(
				760px,
				88%
			);
	}


	.chat-box.is-fullscreen
	.chat-contact-form {
		width:
			min(
				760px,
				88%
			);

		max-width:
			min(
				760px,
				88%
			);
	}

	.html-answer img {
		display:
			block;

		max-width:
			100%;

		height:
			auto;

		margin:
			10px auto;

		border-radius:
			8px;
	}


	.html-answer a {
		color:
			#8a6b00;

		text-decoration:
			underline;

		text-underline-offset:
			3px;
	}

	/* ========================================
	   聯絡表單
	======================================== */

	.chat-contact-form {
		display:
			none;

		width:
			min(
				100%,
				360px
			);

		max-width:
			84%;

		margin:
			0
			auto
			15px
			0;

		padding:
			14px;

		background:
			#ffffff;

		border:
			1px solid
			var(--chat-border);

		border-radius:
			15px;

		border-bottom-left-radius:
			5px;

		box-shadow:
			0 4px 10px
			rgba(0, 0, 0, 0.045);
	}


	.chat-contact-form.is-open {
		display:
			block;
	}


	.chat-contact-form-header {
		display:
			flex;

		align-items:
			flex-start;

		justify-content:
			space-between;

		gap:
			12px;

		margin-bottom:
			12px;
	}


	.chat-contact-form-title {
		color:
			#333333;

		font-size:
			16px;

		font-weight:
			700;
	}


	.chat-contact-form-description {
		margin-top:
			4px;

		color:
			#888888;

		font-size:
			13px;

		line-height:
			1.6;
	}


	.chat-contact-form-close {
		width:
			28px;

		height:
			28px;

		display:
			flex;

		align-items:
			center;

		justify-content:
			center;

		flex-shrink:
			0;

		padding:
			0;

		color:
			#777777;

		background:
			#f3f3f0;

		border:
			0;

		border-radius:
			8px;

		cursor:
			pointer;

		font-size:
			20px;

		line-height:
			1;
	}


	.chat-contact-form-close:hover {
		color:
			#333333;

		background:
			#e9e9e5;
	}


	.chat-contact-form-body {
		display:
			flex;

		flex-direction:
			column;

		gap:
			7px;
	}


	.chat-contact-label {
		margin-top:
			3px;

		color:
			#555555;

		font-size:
			13px;

		font-weight:
			600;
	}


	.chat-contact-input {
		width:
			100%;

		padding:
			10px 11px;

		color:
			#333333;

		background:
			#fafafa;

		border:
			1px solid
			#deded9;

		border-radius:
			9px;

		outline:
			none;

		font-size:
			15px;
	}


	.chat-contact-input:focus {
		background:
			#ffffff;

		border-color:
			var(--chat-accent);

		box-shadow:
			0 0 0 3px
			rgba(214, 169, 0, 0.12);
	}


	.chat-contact-error {
		min-height:
			18px;

		color:
			#c74444;

		font-size:
			13px;

		line-height:
			1.5;
	}


	.chat-contact-submit {
		width:
			100%;

		padding:
			11px 14px;

		color:
			#2c2c2c;

		background:
			var(--chat-accent);

		border:
			0;

		border-radius:
			9px;

		cursor:
			pointer;

		font-size:
			15px;

		font-weight:
			700;
	}


	.chat-contact-submit:hover {
		background:
			var(--chat-accent-hover);
	}

	.chat-contact-submit:disabled {
		opacity:
			0.55;

		cursor:
			not-allowed;
	}

	.chat-messages {
		min-height: 0;
		flex: 1 1 auto;
		overflow-y: auto;
	}


	.chat-input-area {
		flex-shrink: 0;
	}


.line-qrcode-message {
    white-space: normal;
}

.chat-line-qrcode-text {
    margin-bottom: 12px;
    line-height: 1.7;
}

.chat-line-qrcode-wrap {
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 190px;
}

.chat-line-qrcode-img {
    display: block;
    width: 151px;
    height: 150px;
    border-radius: 8px;
}

.chat-line-qrcode-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #06c755;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.chat-line-qrcode-link:hover {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
}