/**
 * Layout Chat Template Styles
 *
 * 模板聊天區樣式 - 當 LayoutRenderer 套用時會使用這些樣式
 * 與 EditorCanvas.js renderChatPreview() 保持一致
 *
 * @author Claude Code
 * @date 2025-01-16
 */

/* ===== 🆕 縮放補償變數預設值 ===== */
:root {
    /* 由 LayoutRenderer.js 動態設定，預設為 1 (無補償) */
    --scale-font-compensation: 1;
    --scale-spacing-compensation: 1;
}

/* ===== 模板模式：Header ===== */
.layout-template-mode .visitor-chat-header {
    /* 🆕 間距補償：縮放時保持視覺比例 */
    padding: calc(16px * var(--scale-spacing-compensation, 1)) calc(20px * var(--scale-spacing-compensation, 1));
    border-bottom: var(--header-border-bottom, 1px solid var(--chat-border-color, rgba(0, 0, 0, 0.08)));
    display: flex;
    align-items: center;
    gap: calc(12px * var(--scale-spacing-compensation, 1));
    background: var(--header-bg-color, var(--chat-bg, transparent));
    flex-shrink: 0;
    z-index: 10;
}

.layout-template-mode .header-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--avatar-bg, var(--primary, #FF6B35));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.layout-template-mode .header-avatar i,
.layout-template-mode .header-avatar svg {
    width: 20px;
    height: 20px;
    color: white;
}

/* 自訂頭像圖片樣式 (Google 圓形風格) */
.layout-template-mode .header-avatar.has-image {
    background-color: var(--chat-bg, #f5f5f5);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--avatar-border-color, var(--primary, #FF6B35));
}

.layout-template-mode .header-avatar.has-image i,
.layout-template-mode .header-avatar.has-image svg {
    display: none;
}

.layout-template-mode .share-info-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.layout-template-mode .share-title {
    font-weight: 600;
    /* 🆕 字體補償：縮放時保持可讀性 */
    font-size: calc(var(--header-title-font-size, 16px) * var(--scale-font-compensation, 1));
    color: var(--header-title-color, var(--chat-text-color, #333333));
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(0.5rem * var(--scale-spacing-compensation, 1));
}

.layout-template-mode .share-title i {
    display: none; /* 隱藏原本的 icon，因為有 header-avatar */
}

.layout-template-mode .share-description {
    /* 🆕 字體補償 */
    font-size: calc(var(--header-desc-font-size, 12px) * var(--scale-font-compensation, 1));
    color: var(--header-desc-color, var(--chat-subtext-color, #6B7280));
    margin: 0;
}

.layout-template-mode .share-description:empty {
    display: none;
}

/* ===== 模板模式：訊息區域 ===== */
.layout-template-mode .visitor-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    /* 🆕 間距補償 */
    padding: calc(20px * var(--scale-spacing-compensation, 1))
             calc(20px * var(--scale-spacing-compensation, 1))
             calc(36px * var(--scale-spacing-compensation, 1))
             calc(20px * var(--scale-spacing-compensation, 1));
    display: flex;
    flex-direction: column;
    gap: calc(var(--message-gap, 16px) * var(--scale-spacing-compensation, 1));
    scroll-behavior: smooth;
    background: var(--chat-bg, transparent);
}

/* 訊息容器 */
.layout-template-mode .messages-container {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--message-gap, 16px);
}

/* Scroll Spacer - 防止被 flex 容器壓縮 (僅訪客聊天頁面) */
.visitor-chat-body .layout-template-mode .scroll-spacer {
    flex-shrink: 0 !important;
    flex-grow: 0;
    min-height: 0;
    box-sizing: border-box;
}

/* 🔧 修復：覆蓋 chat.css 的 .messages-container padding-bottom: 0 */
/* 確保訊息區塊底部有足夠空間，即使 scroll-spacer 被移除 */
.visitor-chat-body .layout-template-mode .messages-container {
    padding-bottom: 24px !important;
}

/* 訊息對容器 */
.layout-template-mode .message-pair {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 新消息動畫 */
.layout-template-mode .message-pair.new-message {
    animation: slideInNewMessage 0.4s ease-out;
}

@keyframes slideInNewMessage {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 個別訊息基礎 */
.layout-template-mode .message {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

/* ===== 模板模式：訊息氣泡 - AI ===== */
.layout-template-mode .message-assistant {
    display: flex;
    gap: 10px;
    max-width: var(--max-bubble-width, 85%);
    align-self: flex-start;
}

.layout-template-mode .message-assistant .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--avatar-bg, var(--primary, #FF6B35));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.layout-template-mode .message-assistant .message-avatar i,
.layout-template-mode .message-assistant .message-avatar svg {
    width: 16px;
    height: 16px;
    color: white;
}

/* 有自訂頭像時（header avatar 設定），AI 訊息頭像一併換圖
 * 依賴 visitor-chat.js 設定的 body.has-embed-avatar + --embed-avatar-url
 * 作用於所有 visitor 模式（一般分享頁 + embed + fullscreen）
 */
body.has-embed-avatar .layout-template-mode .message-assistant .message-avatar,
body.has-embed-avatar .layout-template-mode .message-loading .message-avatar {
    background-image: var(--embed-avatar-url);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
}

body.has-embed-avatar .layout-template-mode .message-assistant .message-avatar i,
body.has-embed-avatar .layout-template-mode .message-assistant .message-avatar svg,
body.has-embed-avatar .layout-template-mode .message-loading .message-avatar i,
body.has-embed-avatar .layout-template-mode .message-loading .message-avatar svg,
body.has-embed-avatar .layout-template-mode .message-loading .message-avatar .avatar-loading {
    display: none;
}

.layout-template-mode .message-assistant .message-content {
    flex: 1;
    min-width: 0;
    width: 100%; /* 確保內容有明確寬度 */
    max-width: none; /* 🔧 覆蓋 visitor-presentation.css 的 .message-content max-width: 80% */
}

.layout-template-mode .message-assistant .message-header {
    display: none; /* 隱藏訊息標頭，保持簡潔 */
}

.layout-template-mode .message-assistant .message-text {
    background: var(--assistant-bubble-color, rgba(0, 0, 0, 0.04));
    /* 🆕 間距補償 */
    padding: calc(12px * var(--scale-spacing-compensation, 1)) calc(16px * var(--scale-spacing-compensation, 1));
    /* 🔧 移除 border-top-left-radius 覆蓋，讓編輯器的四角設定生效 */
    border-radius: var(--assistant-bubble-border-radius, 18px);
    /* 🆕 字體補償 */
    font-size: calc(var(--message-font-size, 14px) * var(--scale-font-compensation, 1));
    line-height: 1.5;
    color: var(--assistant-text-color, #333333);
    border: none;
    word-wrap: break-word;
    word-break: break-word;
    box-shadow: var(--assistant-bubble-box-shadow, none);
}

/* ===== 模板模式：訊息氣泡 - 用戶 ===== */
/* 🔧 移除強制的 flex-direction 和 align-self，由 layout-chat-alignment-* class 控制 */
.layout-template-mode .message-visitor {
    display: flex;
    gap: 10px;
    max-width: var(--max-bubble-width, 85%);
    /* 預設同側排列 (左側)，不設置 align-self 和 flex-direction */
}

/* 用戶訊息不顯示頭像（與編輯器預覽一致） */
.layout-template-mode .message-visitor .message-avatar {
    display: none;
}

.layout-template-mode .message-visitor .message-content {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none; /* 覆蓋 chat.css 的 max-width: 70% */
}

.layout-template-mode .message-visitor .message-header {
    display: none; /* 隱藏訊息標頭 */
}

.layout-template-mode .message-visitor .message-text {
    background: var(--visitor-bubble-color, var(--primary, #FF6B35));
    /* 🆕 間距補償 */
    padding: calc(12px * var(--scale-spacing-compensation, 1)) calc(16px * var(--scale-spacing-compensation, 1));
    /* 🔧 移除 border-top-right-radius 覆蓋，讓編輯器的四角設定生效 */
    border-radius: var(--visitor-bubble-border-radius, 18px);
    /* 🆕 字體補償 */
    font-size: calc(var(--message-font-size, 14px) * var(--scale-font-compensation, 1));
    line-height: 1.5;
    color: var(--visitor-text-color, #FFFFFF);
    border: none;
    word-wrap: break-word;
    word-break: break-word;
    width: max-content;
    max-width: 100%;
    box-shadow: var(--visitor-bubble-box-shadow, none);
}

/* ===== 模板模式：輸入區域 ===== */
/* 🆕 Footer 容器使用獨立的 --footer-bg-color 變數 */
.layout-template-mode .visitor-input-container {
    background: var(--footer-bg-color, var(--chat-bg, rgba(255, 255, 255, 0.95)));
    border-top: 1px solid var(--footer-border-color, var(--chat-border-color, rgba(0, 0, 0, 0.08)));
    /* 🆕 間距補償 */
    padding: calc(16px * var(--scale-spacing-compensation, 1)) calc(20px * var(--scale-spacing-compensation, 1));
    flex-shrink: 0;
    z-index: var(--z-dropdown);
}

.layout-template-mode .input-controls {
    display: flex;
    /* 🆕 間距補償 */
    gap: calc(12px * var(--scale-spacing-compensation, 1));
    align-items: center;
    max-width: none;
    margin: 0;
}

/* 模板模式：輸入框 - 圓角膠囊狀 */
.layout-template-mode .input-wrapper {
    flex: 1;
    background: var(--input-area-bg-color, var(--chat-input-bg, rgba(0, 0, 0, 0.04)));
    border-radius: var(--input-area-border-radius, 24px);
    border: 1px solid var(--input-area-border-color, transparent);
    /* 🆕 間距補償 */
    padding: calc(12px * var(--scale-spacing-compensation, 1)) calc(20px * var(--scale-spacing-compensation, 1));
    display: flex;
    align-items: center;
}

.layout-template-mode .message-input {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    /* 🆕 字體補償 */
    font-size: calc(var(--input-font-size, 14px) * var(--scale-font-compensation, 1));
    color: var(--input-text-color, var(--chat-text-color, #333333));
    resize: none;
    padding: 0;
    min-height: auto;
    line-height: 1.5;
}

.layout-template-mode .message-input::placeholder {
    color: var(--input-placeholder-color, var(--chat-subtext-color, #6B7280));
}

/* 模板模式：發送按鈕 - 圓形 */
/* 🔧 使用更高特異性覆蓋 .btn-primary 的樣式 */
.layout-template-mode .send-btn,
.layout-template-mode .send-btn.btn-primary,
.layout-template-mode .btn.btn-primary.send-btn {
    /* 🆕 間距補償 */
    width: calc(44px * var(--scale-spacing-compensation, 1));
    height: calc(44px * var(--scale-spacing-compensation, 1));
    min-width: calc(44px * var(--scale-spacing-compensation, 1));
    padding: 0;
    background: var(--send-button-color, var(--primary, #FF6B35));
    border: none;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
    box-shadow: none;
}

.layout-template-mode .send-btn:hover:not(:disabled),
.layout-template-mode .send-btn.btn-primary:hover:not(:disabled),
.layout-template-mode .btn.btn-primary.send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    background: var(--send-button-color, var(--primary, #FF6B35));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--send-button-color, var(--primary, #FF6B35)) 40%, transparent);
}

.layout-template-mode .send-btn:disabled,
.layout-template-mode .send-btn.btn-primary:disabled,
.layout-template-mode .btn.btn-primary.send-btn:disabled {
    background: var(--chat-input-bg, rgba(0, 0, 0, 0.1));
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Demo 預覽模式：disabled 也保留原色（用戶要看設計色），只是不能按 */
body.slm-preview-demo .layout-template-mode .send-btn:disabled,
body.slm-preview-demo .layout-template-mode .send-btn.btn-primary:disabled,
body.slm-preview-demo .layout-template-mode .btn.btn-primary.send-btn:disabled {
    background: var(--send-button-color, var(--primary, #FF6B35));
    cursor: not-allowed;
    transform: none;
}

/* Demo 預覽模式：placeholder 文字稍小於 input，保持比例
 * 桌面版會 scale-fit，需要用 --scale-font-compensation 抵消縮放；
 * 手機版 compensation = 1，效果等於 13px。
 */
body.slm-preview-demo .layout-template-mode .message-input::placeholder {
    font-size: calc(13px * var(--scale-font-compensation, 1));
    font-weight: 400;
    opacity: 0.7;
}

.layout-template-mode .send-btn i,
.layout-template-mode .send-btn svg,
.layout-template-mode .send-btn.btn-primary i,
.layout-template-mode .send-btn.btn-primary svg {
    /* 🆕 間距補償 */
    width: calc(20px * var(--scale-spacing-compensation, 1));
    height: calc(20px * var(--scale-spacing-compensation, 1));
    color: var(--send-button-icon-color, white);
}

/* 隱藏發送按鈕的文字 */
.layout-template-mode .send-btn span {
    display: none;
}

/* ===== 響應式調整 ===== */
/* 對齊 JS LayoutRenderer._detectViewport()
   mobile (<768) + tablet-portrait (768-1024 且直式) + 手機橫放 (高度≤430px) = vertical 模式 */
@media (max-width: 767.98px),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
       (max-height: 430px) and (orientation: landscape) {
    .layout-template-mode .visitor-chat-header {
        padding: 12px 16px;
    }

    .layout-template-mode .header-avatar {
        width: 36px;
        height: 36px;
    }

    .layout-template-mode .header-avatar i,
    .layout-template-mode .header-avatar svg {
        width: 18px;
        height: 18px;
    }

    .layout-template-mode .share-title {
        font-size: var(--mobile-header-title-font-size, 14px);
    }

    .layout-template-mode .share-description {
        font-size: var(--mobile-header-desc-font-size, 12px);
    }

    .layout-template-mode .visitor-chat-messages {
        padding: 16px 16px 28px 16px;
        gap: 12px;
    }

    .layout-template-mode .visitor-input-container {
        padding: 12px 16px;
    }

    .layout-template-mode .send-btn,
    .layout-template-mode .send-btn.btn-primary,
    .layout-template-mode .btn.btn-primary.send-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .layout-template-mode .send-btn i,
    .layout-template-mode .send-btn svg,
    .layout-template-mode .send-btn.btn-primary i,
    .layout-template-mode .send-btn.btn-primary svg {
        width: 18px;
        height: 18px;
    }

    .layout-template-mode .input-wrapper {
        padding: 10px 16px;
    }

    .layout-template-mode .message-assistant,
    .layout-template-mode .message-visitor {
        max-width: 90%;
    }

    .layout-template-mode .message-assistant .message-avatar {
        width: 28px;
        height: 28px;
    }

    .layout-template-mode .message-assistant .message-avatar i,
    .layout-template-mode .message-assistant .message-avatar svg {
        width: 14px;
        height: 14px;
    }

    .layout-template-mode .message-assistant .message-text,
    .layout-template-mode .message-visitor .message-text {
        padding: 10px 14px;
        font-size: var(--mobile-message-font-size, 13px);
    }

    .layout-template-mode .message-input {
        font-size: var(--mobile-input-font-size, 16px);
    }

    /* 建議問題字體跟隨訊息字體設定 */
    .layout-template-mode .suggested-questions-header {
        font-size: calc(var(--mobile-message-font-size, 13px) - 1px);
    }

    .layout-template-mode .suggested-question-btn {
        font-size: var(--mobile-message-font-size, 13px);
    }
}

/* 小手機 + 手機橫放進一步縮小 */
@media (max-width: 480px),
       (max-height: 430px) and (orientation: landscape) {
    .layout-template-mode .visitor-chat-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .layout-template-mode .header-avatar {
        width: 32px;
        height: 32px;
    }

    .layout-template-mode .visitor-chat-messages {
        padding: 12px 12px 24px 12px;
        gap: 10px;
    }

    .layout-template-mode .visitor-input-container {
        padding: 10px 12px;
    }

    .layout-template-mode .input-controls {
        /* 🔧 覆蓋 chat.css 的 flex-direction: column，保持橫向排列 */
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
    }

    .layout-template-mode .input-wrapper {
        flex: 1;
        min-width: 0; /* 允許縮小 */
        padding: 8px 14px;
        border-radius: var(--radius-2xl);
    }

    .layout-template-mode .send-btn,
    .layout-template-mode .send-btn.btn-primary,
    .layout-template-mode .btn.btn-primary.send-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-shrink: 0; /* 固定寬度不縮小 */
        align-self: center !important; /* 覆蓋 chat.css 的 flex-end */
    }

    .layout-template-mode .send-btn i,
    .layout-template-mode .send-btn svg,
    .layout-template-mode .send-btn.btn-primary i,
    .layout-template-mode .send-btn.btn-primary svg {
        width: 18px;
        height: 18px;
    }

    /* 隱藏按鈕文字，只顯示圖標 */
    .layout-template-mode .send-btn span {
        display: none;
    }
}

/* ===== 訪客頁面專用：高特異性樣式覆蓋 ===== */
/* 覆蓋 chat.css 和 visitor-presentation.css 的 .message-content max-width 限制 */
.visitor-chat-body .layout-template-mode .message-visitor .message-content,
.visitor-chat-body .layout-template-mode .message-assistant .message-content {
    max-width: none;
    width: auto;
}

/* 確保訊息氣泡有足夠寬度，避免文字垂直顯示 */
.visitor-chat-body .layout-template-mode .message-visitor .message-text {
    width: max-content;
    max-width: 100%;
}

/* 🆕 使用 CSS 變數控制訊息顏色（支援用戶自訂） */
/* AI 助手訊息 - 統一所有 Markdown 元素顏色 */
.visitor-chat-body .layout-template-mode .message-assistant .message-text,
.visitor-chat-body .layout-template-mode .message-assistant .message-text p,
.visitor-chat-body .layout-template-mode .message-assistant .message-text h1,
.visitor-chat-body .layout-template-mode .message-assistant .message-text h2,
.visitor-chat-body .layout-template-mode .message-assistant .message-text h3,
.visitor-chat-body .layout-template-mode .message-assistant .message-text h4,
.visitor-chat-body .layout-template-mode .message-assistant .message-text h5,
.visitor-chat-body .layout-template-mode .message-assistant .message-text h6,
.visitor-chat-body .layout-template-mode .message-assistant .message-text strong,
.visitor-chat-body .layout-template-mode .message-assistant .message-text em,
.visitor-chat-body .layout-template-mode .message-assistant .message-text li,
.visitor-chat-body .layout-template-mode .message-assistant .message-text blockquote,
.visitor-chat-body .layout-template-mode .message-assistant .message-text th,
.visitor-chat-body .layout-template-mode .message-assistant .message-text td {
    color: var(--assistant-text-color, #333333);
}

/* AI 助手訊息 - 列表符號顏色 */
.visitor-chat-body .layout-template-mode .message-assistant .message-text ul li::before,
.visitor-chat-body .layout-template-mode .message-assistant .message-text ol li::marker {
    color: var(--assistant-text-color, #333333);
}

/* 訪客訊息 - 統一所有 Markdown 元素顏色 */
.visitor-chat-body .layout-template-mode .message-visitor .message-text,
.visitor-chat-body .layout-template-mode .message-visitor .message-text p,
.visitor-chat-body .layout-template-mode .message-visitor .message-text h1,
.visitor-chat-body .layout-template-mode .message-visitor .message-text h2,
.visitor-chat-body .layout-template-mode .message-visitor .message-text h3,
.visitor-chat-body .layout-template-mode .message-visitor .message-text h4,
.visitor-chat-body .layout-template-mode .message-visitor .message-text h5,
.visitor-chat-body .layout-template-mode .message-visitor .message-text h6,
.visitor-chat-body .layout-template-mode .message-visitor .message-text strong,
.visitor-chat-body .layout-template-mode .message-visitor .message-text em,
.visitor-chat-body .layout-template-mode .message-visitor .message-text li,
.visitor-chat-body .layout-template-mode .message-visitor .message-text blockquote,
.visitor-chat-body .layout-template-mode .message-visitor .message-text th,
.visitor-chat-body .layout-template-mode .message-visitor .message-text td {
    color: var(--visitor-text-color, #FFFFFF);
}

/* 訪客訊息 - 列表符號顏色 */
.visitor-chat-body .layout-template-mode .message-visitor .message-text ul li::before,
.visitor-chat-body .layout-template-mode .message-visitor .message-text ol li::marker {
    color: var(--visitor-text-color, #FFFFFF);
}

/* 確保 p 標籤正常排版，不受 base.css 影響 */
.visitor-chat-body .layout-template-mode .message-text p {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

.visitor-chat-body .layout-template-mode .message-text p:not(:last-child) {
    margin-bottom: 0.5em;
}