/**
 * GuideCharacter Neo-Brutalism Overrides
 * ======================================
 * 只在 body.landing-page 作用域下把 ChatDialog / FAB / Drawer 切到 v3 brutal 風格。
 * 不影響 body.chat-page 等 app 頁面的 Friendly Minimalism 樣式。
 *
 * 依賴：public-variables-v3.css (--brand-v3-*)
 * 須在 guide-character.css 之後載入。
 */

/* ============================================================
 * 1. Dialog 容器
 * ============================================================ */
body.landing-page .chat-dialog {
    background: var(--brand-v3-cream);
    border: 2.5px solid var(--brand-v3-navy);
    border-radius: 20px;
    box-shadow: 5px 5px 0 var(--brand-v3-navy);
    width: 380px;
    height: min(72vh, 640px);
    max-height: min(72vh, 640px);
}

/* ============================================================
 * 2. Header（品牌化標題列）
 * ============================================================ */
body.landing-page .chat-dialog__header,
body.landing-page .chat-dialog__header--branded {
    background: var(--brand-v3-butter);
    border-bottom: 2px solid var(--brand-v3-navy);
    padding: 14px 16px;
}

body.landing-page .chat-dialog__header-avatar {
    background: var(--brand-v3-paper);
    border: 2px solid var(--brand-v3-navy);
    padding: 4px;
    box-shadow: 2px 2px 0 var(--brand-v3-navy);
}

body.landing-page .chat-dialog__title,
body.landing-page .chat-dialog__header--branded .chat-dialog__title {
    font-family: var(--brand-v3-display);
    font-weight: 700;
    color: var(--brand-v3-navy);
    font-size: 1rem;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 24, "wdth" 95;
}

body.landing-page .chat-dialog__subtitle {
    font-family: var(--brand-v3-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-v3-ink-soft);
    font-weight: 500;
}

body.landing-page .chat-dialog__close {
    border: 2px solid var(--brand-v3-navy);
    border-radius: 10px;
    background: var(--brand-v3-paper);
    color: var(--brand-v3-navy);
    box-shadow: 2px 2px 0 var(--brand-v3-navy);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.landing-page .chat-dialog__close:hover {
    background: var(--brand-v3-navy);
    color: var(--brand-v3-cream);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
}

/* ============================================================
 * 3. Body（訊息區）
 * ============================================================ */
body.landing-page .chat-dialog__body {
    background: var(--brand-v3-cream);
    padding: 18px;
}

/* ============================================================
 * 4. 用戶訊息（navy 底 cream 字）
 * ============================================================ */
body.landing-page .chat-dialog__messages .message-user .message-content {
    font-family: var(--brand-v3-sans);
    background: var(--brand-v3-navy);
    color: var(--brand-v3-cream);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 16px 16px 4px 16px;
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
    padding: 10px 14px;
}

/* ============================================================
 * 5. AI 訊息（paper 底 + navy 粗邊 + 硬陰影）
 * ============================================================ */
body.landing-page .chat-dialog__messages .message-avatar,
body.landing-page .chat-dialog__messages .thinking-avatar-placeholder.thinking-avatar--active {
    background: var(--brand-v3-butter);
    border: 2px solid var(--brand-v3-navy);
    box-shadow: 2px 2px 0 var(--brand-v3-navy);
    color: var(--brand-v3-navy);
    padding: 3px;
}

body.landing-page .chat-dialog__messages .message-text {
    font-family: var(--brand-v3-sans);
    color: var(--brand-v3-ink);
    background: var(--brand-v3-paper);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 3px 3px 0 var(--brand-v3-navy);
    padding: 12px 14px;
    line-height: 1.65;
}

/* italic em 用 orange Fraunces */
body.landing-page .chat-dialog__messages .message-text em {
    font-family: var(--brand-v3-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--brand-v3-orange);
    font-variation-settings: "opsz" 144;
}

/* 列表 / 標題沿用父字型 */
body.landing-page .chat-dialog__messages .message-text strong {
    color: var(--brand-v3-navy);
    font-weight: 700;
}

body.landing-page .chat-dialog__messages .message-text code {
    font-family: var(--brand-v3-mono);
    font-size: 0.92em;
    background: var(--brand-v3-butter);
    border: 1.5px solid var(--brand-v3-navy);
    border-radius: 4px;
    padding: 0 4px;
}

body.landing-page .chat-dialog__messages .message-text pre {
    background: var(--brand-v3-navy);
    color: var(--brand-v3-cream);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: var(--brand-v3-mono);
    font-size: 12.5px;
    line-height: 1.55;
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
    margin: 0.6rem 0;
    overflow-x: auto;
}
body.landing-page .chat-dialog__messages .message-text pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

/* 串流逐字 fade 用 orange 取代預設紫，融入 brutal palette */
body.landing-page .chat-dialog__messages .message-text .streaming-char {
    animation-name: streamingCharFadeInBrutal;
}
@keyframes streamingCharFadeInBrutal {
    0% {
        opacity: 0;
        color: var(--brand-v3-orange);
    }
    60% {
        opacity: 1;
        color: var(--brand-v3-orange);
    }
    100% {
        opacity: 1;
        color: inherit;
    }
}

/* ============================================================
 * 6. 建議問題按鈕（pill + butter 底 + hard shadow）
 * ============================================================ */
body.landing-page .chat-dialog__suggestions-dynamic {
    padding-left: calc(32px + 0.625rem);
}

body.landing-page .chat-dialog__suggestions-header {
    font-family: var(--brand-v3-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-v3-navy);
    font-weight: 700;
    gap: 6px;
}

body.landing-page .chat-dialog__suggestions-header svg {
    stroke: var(--brand-v3-orange);
}

body.landing-page .chat-dialog__suggest-btn {
    font-family: var(--brand-v3-sans);
    font-weight: 600;
    font-size: 13px;
    color: var(--brand-v3-navy);
    background: var(--brand-v3-butter);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 2px 2px 0 var(--brand-v3-navy);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease, color 0.2s ease;
}

body.landing-page .chat-dialog__suggest-btn:hover {
    background: var(--brand-v3-navy);
    color: var(--brand-v3-cream);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
}

body.landing-page .chat-dialog__suggest-btn:active {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 var(--brand-v3-navy);
}

body.landing-page .chat-dialog__suggest-btn svg {
    stroke: currentColor;
}

/* ============================================================
 * 7. Footer + Input
 * ============================================================ */
body.landing-page .chat-dialog__footer {
    background: var(--brand-v3-butter);
    border-top: 2px solid var(--brand-v3-navy);
    padding: 12px 14px;
}

body.landing-page .chat-input-wrapper {
    background: var(--brand-v3-paper);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 14px;
    box-shadow: 2px 2px 0 var(--brand-v3-navy);
    padding: 8px 10px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body.landing-page .chat-input-wrapper:focus-within {
    border-color: var(--brand-v3-navy);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
}

body.landing-page .chat-dialog__input {
    font-family: var(--brand-v3-sans);
    color: var(--brand-v3-ink);
    font-size: 14px;
}

body.landing-page .chat-dialog__input::placeholder {
    color: var(--brand-v3-muted);
}

body.landing-page .chat-dialog__send {
    width: 36px;
    height: 36px;
    background: var(--brand-v3-navy);
    color: var(--brand-v3-cream);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--brand-v3-orange-deep);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.landing-page .chat-dialog__send:hover:not(:disabled) {
    background: var(--brand-v3-navy);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
}

body.landing-page .chat-dialog__send:active:not(:disabled) {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0 var(--brand-v3-orange-deep);
}

body.landing-page .chat-dialog__send:disabled {
    background: var(--brand-v3-off);
    color: var(--brand-v3-muted);
    border-color: var(--brand-v3-muted);
    box-shadow: none;
}

/* ============================================================
 * 8. Sticker bubble（AI 貼圖氣泡）
 * ============================================================ */
body.landing-page .chat-dialog__messages .gc-sticker-bubble {
    background: var(--brand-v3-paper);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 3px 3px 0 var(--brand-v3-navy);
    padding: 6px;
}

/* ============================================================
 * 9. Typing indicator（舊版 fallback）— 換成 orange 點
 * ============================================================ */
body.landing-page .typing-indicator span {
    background: var(--brand-v3-orange);
}

/* ============================================================
 * 10. Initial 建議問題區塊（進入對話第一眼看到的那組）
 * ============================================================ */
body.landing-page .suggested-question {
    font-family: var(--brand-v3-sans);
    font-weight: 600;
    font-size: 12.5px;
    background: var(--brand-v3-paper);
    border: 2px solid var(--brand-v3-navy);
    border-radius: 999px;
    color: var(--brand-v3-navy);
    box-shadow: 2px 2px 0 var(--brand-v3-navy);
    padding: 7px 13px;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease, color 0.2s ease;
}

body.landing-page .suggested-question:hover {
    background: var(--brand-v3-navy);
    color: var(--brand-v3-cream);
    border-color: var(--brand-v3-navy);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
}

body.landing-page .suggestions-label {
    font-family: var(--brand-v3-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-v3-navy);
    font-weight: 700;
}

/* ============================================================
 * 11. FAB / Drawer（手機浮動按鈕 + 底部抽屜）
 * ============================================================ */
body.landing-page .guide-character__fab {
    background: var(--brand-v3-navy);
    border: 2.5px solid var(--brand-v3-navy);
    box-shadow: 3px 3px 0 var(--brand-v3-orange-deep);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.landing-page .guide-character__fab:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--brand-v3-orange-deep);
}

body.landing-page .guide-character__drawer {
    background: var(--brand-v3-cream);
    border-top: 2.5px solid var(--brand-v3-navy);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 0 var(--brand-v3-navy);
}

body.landing-page .guide-character__drawer .chat-dialog {
    background: var(--brand-v3-cream);
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* ============================================================
 * 12. Reduced Motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.landing-page .chat-dialog__messages .message-text .streaming-char {
        animation: none !important;
        opacity: 1 !important;
        color: inherit !important;
    }
    body.landing-page .chat-dialog,
    body.landing-page .chat-dialog__close,
    body.landing-page .chat-dialog__send,
    body.landing-page .chat-dialog__suggest-btn,
    body.landing-page .suggested-question,
    body.landing-page .guide-character__fab {
        transition: none !important;
    }
}

/* ============================================================
 * 13. 手機端 — 抽屜內對話框填滿全寬全高 + 隱藏狀態完全不可見
 * ============================================================
 * 第 1 條把 .chat-dialog 寫死 380px / 72vh，是 desktop 浮層尺寸；
 * 手機端走 .guide-character__drawer 從底部滑出的全寬抽屜，
 * 必須把對話框拉到 100% 寬 + 85vh 高才會填滿抽屜。
 *
 * 抽屜在 collapsed 狀態靠 transform: translateY(100%) 推到視窗外，
 * 但 border-top / box-shadow 在某些渲染情況下可能殘留 1-2px 在底部
 * （看起來像一條深藍細線）。加 visibility 切換徹底排除此可能。
 */
@media (max-width: 768px) {
    body.landing-page .guide-character__drawer .chat-dialog {
        width: 100%;
        height: 85vh;
        max-height: 85vh;
        border-radius: 0;
    }

    body.landing-page .guide-character__drawer {
        visibility: hidden;
        transition: transform var(--duration-slow, 0.3s) var(--ease-out, ease-out),
                    visibility 0s linear var(--duration-slow, 0.3s);
    }

    body.landing-page .guide-character--chatting .guide-character__drawer {
        visibility: visible;
        transition: transform var(--duration-slow, 0.3s) var(--ease-out, ease-out),
                    visibility 0s linear 0s;
    }
}