/**
 * mobile-chat-sheet.css - 手機雙層模式樣式
 *
 * 用於訪客頁面的手機/平板直式模式
 * Landing Mode (招呼氣泡) + Conversation Mode (對話抽屜)
 *
 * @author Claude Code
 * @date 2025-01-29
 * @version 1.0.0
 */

/* ============================================================================
   雙層模式基礎設定
   ============================================================================ */

.layout-dual-layer-mode {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* 🆕 由 JavaScript 控制 #visitorChatPage 的顯示
   使用多種選擇器確保優先級足夠高 */
.layout-dual-layer-mode #visitorChatPage.dual-layer-hidden,
.layout-dual-layer-mode .visitor-chat-page.dual-layer-hidden,
.layout-dual-layer-mode .dual-layer-chat-container.dual-layer-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* 🆕 雙層模式下的背景穿透 - 讓 body 背景可見 */
.layout-dual-layer-mode,
.layout-dual-layer-mode .visitor-chat-body,
.layout-dual-layer-mode .visitor-chat-page,
.layout-dual-layer-mode #visitorChatPage {
    background: transparent !important;
}

/* ============================================================================
   畫布層 (Canvas Layer) - 展示設計元素
   使用「安全區域 + Scale」架構，與編輯器保持一致
   ============================================================================ */

.mobile-canvas-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
}

/* 安全區域容器 - 寬度固定，高度動態，整體縮放 */
.mobile-safe-zone {
    position: relative;
    flex-shrink: 0;
    pointer-events: none;
    overflow: visible;
    border-radius: 0; /* 可由主題自定義 */
    margin: 0 auto;
}

/* 畫布層在對話模式下添加模糊效果 */
.conversation-mode .mobile-canvas-layer {
    filter: blur(4px);
    opacity: 0.7;
    transition: filter var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out);
}

.landing-mode .mobile-canvas-layer {
    filter: none;
    opacity: 1;
    transition: filter var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out);
}

/* 安全區域內的裝飾元素 */
.mobile-safe-zone .layout-element {
    pointer-events: none;
}

/* ============================================================================
   招呼氣泡 (Greeting Bubble)
   ============================================================================ */

.greeting-bubble {
    position: fixed;
    z-index: var(--z-dropdown);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.greeting-bubble:active {
    transform: scale(0.95) !important;
}

/* 氣泡尾巴動畫 */
.greeting-bubble .bubble-tail {
    transition: transform var(--duration-normal) var(--ease-out);
}

.greeting-bubble:hover .bubble-tail {
    transform: translateX(-50%) translateY(2px);
}

/* 氣泡文字 */
.greeting-bubble .bubble-text {
    display: block;
    line-height: 1.5;
    word-break: break-word;
}

/* ============================================================================
   對話抽屜 (Chat Sheet)
   ============================================================================ */

.chat-sheet-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown);
    pointer-events: none;
}

.chat-sheet-container.show {
    pointer-events: auto;
}

/* 背景遮罩 */
.chat-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: all;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
}

.chat-sheet-container.show .chat-sheet-backdrop {
    opacity: 1;
}

/* 抽屜主體 */
.chat-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    pointer-events: all;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform var(--duration-slow) cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.chat-sheet-container.show .chat-sheet {
    transform: translateY(0);
}

/* 拖拽手柄 */
.chat-sheet-handle {
    width: 100%;
    padding: 12px 0 8px;
    display: flex;
    justify-content: center;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
}

.chat-sheet-handle:active {
    cursor: grabbing;
}

.chat-sheet-handle-bar {
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xs);
}

/* 抽屜內容區 */
.chat-sheet-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 抽屜內的訊息區域 */
.chat-sheet-content .visitor-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px;
}

/* 抽屜內的輸入區域 */
.chat-sheet-content .visitor-input-container {
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: inherit;
    /* 🆕 確保輸入區域有適當的 padding */
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

/* 🆕 雙層模式下重置字體補償（不使用 Scale Fit 的補償） */
.layout-dual-layer-mode .layout-template-mode {
    --scale-font-compensation: 1 !important;
    --scale-spacing-compensation: 1 !important;
}

/* ============================================================================
   訊息樣式覆寫（抽屜內）
   ============================================================================ */

.chat-sheet-content .messages-container {
    padding-bottom: 16px;
}

.chat-sheet-content .message {
    margin-bottom: 12px;
}

.chat-sheet-content .message-content {
    max-width: 85%;
}

/* 🆕 抽屜內部包裝器樣式 */
.chat-sheet-inner-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chat-sheet-inner-content .visitor-chat-messages,
.chat-sheet-inner-content #visitorMessages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.chat-sheet-inner-content .visitor-input-container,
.chat-sheet-inner-content #visitorInputContainer {
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

/* 🆕 抽屜內的輸入框樣式調整 */
.chat-sheet-inner-content .chat-input-container {
    padding: 0;
}

.chat-sheet-inner-content .message-input {
    font-size: var(--mobile-input-font-size, var(--text-base)); /* 優先使用響應式字體，回退到 16px 防止 iOS 縮放 */
}

/* ============================================================================
   狀態過渡動畫
   ============================================================================ */

/* Landing → Conversation 過渡 */
.landing-mode .greeting-bubble {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.conversation-mode .greeting-bubble {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* ============================================================================
   響應式調整
   ============================================================================ */

/* 小手機 */
@media (max-width: 374px) {
    .greeting-bubble {
        max-width: 90%;
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    .chat-sheet {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }

    .chat-sheet-handle {
        padding: 10px 0 6px;
    }
}

/* 平板直式 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .greeting-bubble {
        max-width: 70%;
        font-size: 16px !important;
    }

    /* 🆕 平板直式：對話抽屜全寬（與編輯器一致） */
    .chat-sheet {
        max-width: none;
        width: 100%;
        left: 0;
        right: 0;
        transform: translateY(100%);
    }

    .chat-sheet-container.show .chat-sheet {
        transform: translateY(0);
    }

    /* 🆕 平板直式：調整輸入區域 padding */
    .chat-sheet-content .visitor-input-container {
        padding: 16px 24px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }
}

/* ============================================================================
   安全區域適配 (iPhone X 及更新機型)
   ============================================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .greeting-bubble[data-position="bottom"],
    .greeting-bubble[data-position="bottom-left"],
    .greeting-bubble[data-position="bottom-right"] {
        bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .chat-sheet-content .visitor-input-container {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================================================
   深色模式支援
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .chat-sheet {
        background: rgba(30, 30, 30, 0.98);
    }

    .chat-sheet-handle-bar {
        background: rgba(255, 255, 255, 0.3);
    }

    .chat-sheet-backdrop {
        background: rgba(0, 0, 0, 0.5);
    }

    .chat-sheet-content .visitor-input-container {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
}

/* ============================================================================
   無障礙 (Accessibility)
   ============================================================================ */

/* 減少動畫 */
@media (prefers-reduced-motion: reduce) {
    .greeting-bubble,
    .chat-sheet,
    .chat-sheet-backdrop,
    .mobile-canvas-layer {
        transition: none !important;
    }
}

/* 焦點樣式 */
.greeting-bubble:focus-visible {
    outline: 2px solid var(--theme-primary, #FF6B35);
    outline-offset: 4px;
}

.chat-sheet-handle:focus-visible {
    outline: 2px solid var(--theme-primary, #FF6B35);
    outline-offset: 2px;
}