/* =========================
   字型與全域設定
   - 設定全站字型
========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
}

/* =========================
   主要區塊樣式
   - 主要背景、卡片陰影、分隔線
========================= */
.gradient-bg {
    background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
}
.main-bg {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}
.card-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.custom-divider, .decorative-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, #d6d3d1, transparent);
    margin: 0 auto;
}

/* =========================
   元件樣式
   - 輸入框、標籤、按鈕、動畫進場
========================= */
.emotion-input {
    transition: all 0.3s ease;
}
.emotion-input:focus {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.1);
}

/* =========================
   波紋動畫
   - 心情標籤點擊時的回饋效果
========================= */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-effect 500ms linear;
    background-color: rgba(245, 158, 11, 0.18); /* 橙色半透明 */
    pointer-events: none;
    z-index: 1;
}
@keyframes ripple-effect {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}
.mood-tag {
    position: relative; /* 讓波紋定位於按鈕內 */
    overflow: hidden;
    transition: all 0.2s ease;
}
.mood-tag:hover {
    transform: scale(1.05);
}
.mood-tag.active {
    background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
    color: white;
    border-color: transparent;
}
.btn-primary {
    transition: all 0.2s ease;
}
.btn-primary:hover {
    transform: scale(1.02);
}
.btn-primary:active {
    transform: scale(0.98);
}

/* =========================
   卡片進場彈跳動畫
   - 主要卡片進場更有生命力
========================= */
.card-appear {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition: all 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}
.card-appear.animate-in {
    transform: translateY(32px) scale(0.96);
    opacity: 0;
}
.card-appear.active {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.loading-dot {
    animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }

/* =========================
   動畫
   - 進場、跳動
========================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* =========================
   微互動動畫
   - 慶祝效果、確認動畫、成功回饋
========================= */
@keyframes celebrate {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes pulse-success {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes float-up {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.celebrate-animation {
    animation: celebrate 0.8s ease-in-out;
}

.pulse-success {
    animation: pulse-success 1s ease-out;
}

.float-up {
    animation: float-up 1s ease-out forwards;
}

.shimmer-effect {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* 成功提示圖標 */
.success-icon {
    display: inline-block;
    position: relative;
}

.success-icon::after {
    content: '✨';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px;
    animation: float-up 1s ease-out infinite;
}

/* =========================
   情感色彩主題
   - 根據心情動態調整界面色彩
========================= */
.mood-theme-開心 {
    --mood-primary: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --mood-accent: #fbbf24;
    --mood-bg: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    --mood-light: #fef3c7;
    --mood-dark: linear-gradient(135deg, #451a03 0%, #7c2d12 100%);
}

.mood-theme-難過 {
    --mood-primary: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    --mood-accent: #60a5fa;
    --mood-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --mood-light: #dbeafe;
    --mood-dark: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

.mood-theme-焦慮 {
    --mood-primary: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
    --mood-accent: #fb7185;
    --mood-bg: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    --mood-light: #fce7f3;
    --mood-dark: linear-gradient(135deg, #881337 0%, #9f1239 100%);
}

.mood-theme-憤怒 {
    --mood-primary: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --mood-accent: #ef4444;
    --mood-bg: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    --mood-light: #fee2e2;
    --mood-dark: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
}

.mood-theme-困惑 {
    --mood-primary: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    --mood-accent: #a855f7;
    --mood-bg: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    --mood-light: #f3e8ff;
    --mood-dark: linear-gradient(135deg, #581c87 0%, #6b21a8 100%);
}

.mood-theme-疲憊 {
    --mood-primary: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    --mood-accent: #6b7280;
    --mood-bg: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    --mood-light: #f9fafb;
    --mood-dark: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}

.mood-theme-興奮 {
    --mood-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --mood-accent: #10b981;
    --mood-bg: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    --mood-light: #d1fae5;
    --mood-dark: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
}

.mood-theme-平靜 {
    --mood-primary: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --mood-accent: #06b6d4;
    --mood-bg: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    --mood-light: #cffafe;
    --mood-dark: linear-gradient(135deg, #164e63 0%, #155e75 100%);
}

/* 應用情感色彩的元素 */
.mood-themed .gradient-bg {
    background: var(--mood-primary) !important;
}

.mood-themed .main-bg {
    background: var(--mood-bg) !important;
}

.mood-themed .btn-primary {
    background: var(--mood-primary) !important;
}

.mood-themed .ai-response {
    background: var(--mood-light) !important;
    border-color: var(--mood-accent) !important;
}

html.dark .mood-themed .main-bg {
    background: var(--mood-dark) !important;
}

html.dark .mood-themed .ai-response {
    background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%) !important;
    border-color: var(--mood-accent) !important;
}

/* =========================
   色盲友善設計
   - 為色盲用戶提供額外的視覺指示器
========================= */

/* 為心情標籤添加形狀和圖案指示器 */
.mood-tag::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 1;
}

/* 不同心情的視覺指示器 */
.mood-tag[data-mood="開心"]::before {
    background: repeating-linear-gradient(45deg, #fbbf24, #fbbf24 2px, transparent 2px, transparent 4px);
    border-radius: 0;
    width: 12px;
    height: 12px;
}

.mood-tag[data-mood="難過"]::before {
    background: #60a5fa;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #60a5fa;
}

.mood-tag[data-mood="焦慮"]::before {
    background: #fb7185;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 0;
    width: 10px;
    height: 10px;
}

.mood-tag[data-mood="憤怒"]::before {
    background: #ef4444;
    transform: rotate(45deg);
    border-radius: 0;
    width: 8px;
    height: 8px;
}

.mood-tag[data-mood="困惑"]::before {
    background: radial-gradient(circle, #a855f7 30%, transparent 30%);
    background-size: 3px 3px;
    border-radius: 0;
    width: 12px;
    height: 12px;
}

.mood-tag[data-mood="疲憊"]::before {
    background: linear-gradient(135deg, #6b7280 25%, transparent 25%, transparent 75%, #6b7280 75%);
    background-size: 4px 4px;
    border-radius: 0;
    width: 12px;
    height: 12px;
}

.mood-tag[data-mood="興奮"]::before {
    background: #10b981;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
    width: 12px;
    height: 12px;
}

.mood-tag[data-mood="平靜"]::before {
    background: #06b6d4;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #06b6d4;
}

/* 色盲友善的狀態指示器 */
.mood-tag.active::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: -2px;
    color: white;
    background: #059669;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid white;
    z-index: 2;
}

/* 回饋按鈕的色盲友善設計 */
.feedback-btn[data-feedback="helpful"]::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-weight: bold;
    color: #059669;
}

.feedback-btn[data-feedback="not-helpful"]::before {
    content: '−';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-weight: bold;
    color: #dc2626;
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
    .mood-tag {
        border-width: 3px !important;
        font-weight: 600 !important;
    }

    .mood-tag::before {
        border: 2px solid currentColor;
    }

    .btn-primary, .feedback-btn {
        border-width: 3px !important;
        font-weight: 600 !important;
    }
}

/* 減少動畫模式支援 */
@media (prefers-reduced-motion: reduce) {
    .mood-tag, .btn-primary, .card-appear, .celebrate-animation,
    .pulse-success, .float-up, .shimmer-effect {
        animation: none !important;
        transition: none !important;
    }

    .mood-tag:hover {
        transform: none !important;
    }
}

/* 焦點指示器增強 */
.mood-tag:focus, .btn-primary:focus, button:focus {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px white, 0 0 0 5px #3b82f6 !important;
}

/* 色盲測試模式（開發時使用） */
.colorblind-test {
    filter: grayscale(100%);
}

.colorblind-test-protanopia {
    filter: url('#protanopia-filter');
}

.colorblind-test-deuteranopia {
    filter: url('#deuteranopia-filter');
}

.colorblind-test-tritanopia {
    filter: url('#tritanopia-filter');
}

/* =========================
   深色模式
   - 所有 .dark 相關樣式集中管理
========================= */
html.dark .main-bg {
    background: linear-gradient(135deg, #1e1b4b 0%, #581c87 50%, #7c2d12 100%);
}
html.dark .gradient-bg {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
}
html.dark .card-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
html.dark .custom-divider, html.dark .decorative-divider {
    background: linear-gradient(to right, transparent, #57534e, transparent);
}
/* 歡迎訊息標題在深色模式下強制白色 */
html.dark .welcome-title {
    color: white !important;
}

/* =========================
   其他自訂
   - 圖表提示、AI回應區塊、裝飾性元素
========================= */
.chartjs-tooltip {
    background: rgba(0,0,0,0.7) !important;
}
.ai-response {
    animation: fadeInUp 0.5s ease-out;
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
}

/* =========================
   流動裝飾元素
   - 模仿設計圖中的有機形狀
========================= */
.main-bg::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(251, 146, 60, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.main-bg::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -5%;
    width: 50%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
    border-radius: 60% 40% 30% 70%;
    pointer-events: none;
    z-index: 0;
}

/* 深色模式的裝飾元素 */
html.dark .main-bg::before {
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
}

html.dark .main-bg::after {
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
}

/* 確保內容在裝飾元素之上 */
.main-bg > * {
    position: relative;
    z-index: 1;
}

/* =========================
   移動端優化與水平滾動防護
   - 防止水平滾動和晃動
   - 模態框滾動優化
========================= */

/* 全域防止水平滾動 */
html, body {
    overflow-x: hidden; /* 防止水平滾動 */
    max-width: 100vw; /* 限制最大寬度 */
}

/* 確保所有容器不會超出螢幕寬度 */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* 防止文字和元素造成水平滾動 */
.container {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    /* 強化防水平滾動措施 */
    html, body {
        overflow-x: hidden !important;
        position: relative;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 確保主要容器不會造成水平滾動 */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-x: hidden;
    }

    /* 防止卡片內容超出 */
    .bg-white, .dark\\:bg-stone-800 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* 防止長文字造成水平滾動 */
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* 模態框容器優化 */
    .fixed.inset-0 {
        -webkit-overflow-scrolling: touch; /* iOS 滾動優化 */
        overflow-x: hidden; /* 防止模態框水平滾動 */
    }

    /* 模態框內容區域優化 */
    .max-h-\[90vh\] {
        max-height: 85vh; /* 在手機上稍微減少高度 */
    }

    /* =========================
       移動端觸控優化
       - 更大的觸控區域、更好的手勢支援
    ========================= */

    /* 確保按鈕在手機上容易點擊 - 增強版 */
    button {
        min-height: 48px; /* 加大到 48px，比 iOS 建議更大 */
        min-width: 48px;
        padding: 12px 20px; /* 增加內邊距 */
        touch-action: manipulation; /* 防止雙擊縮放 */
        -webkit-tap-highlight-color: transparent; /* 移除點擊高亮 */
    }

    /* 心情標籤移動端優化 */
    .mood-tag {
        min-height: 52px; /* 更大的觸控區域 */
        padding: 12px 20px !important;
        font-size: 16px; /* 防止 iOS 自動縮放 */
        margin: 8px 4px; /* 增加間距 */
        transition: all 0.2s ease;
        transform: scale(1);
    }

    /* 心情標籤容器優化 - 智能響應式佈局 */
    #moodTags {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        overflow-x: hidden;
        padding: 8px;
        margin: 0 -8px; /* 抵消內邊距 */
    }

    /* 小螢幕下的標籤佈局優化 */
    @media (max-width: 480px) {
        #moodTags {
            justify-content: space-between;
            gap: 4px;
        }

        .mood-tag {
            flex: 1 1 calc(50% - 4px); /* 兩列佈局 */
            min-width: 140px;
            max-width: 180px;
            text-align: center;
            justify-content: center;
        }
    }

    /* 中等螢幕的標籤佈局 */
    @media (min-width: 481px) and (max-width: 600px) {
        .mood-tag {
            flex: 1 1 calc(33.333% - 8px); /* 三列佈局 */
            min-width: 120px;
            max-width: 160px;
        }
    }

    /* 大螢幕移動設備 */
    @media (min-width: 601px) and (max-width: 768px) {
        .mood-tag {
            flex: 1 1 calc(25% - 12px); /* 四列佈局 */
            min-width: 100px;
            max-width: 140px;
        }
    }

    /* 主要輸入區域優化 */
    #moodInput {
        font-size: 16px !important; /* 防止 iOS 自動縮放 */
        min-height: 120px;
        padding: 16px !important;
        line-height: 1.5;
        touch-action: manipulation;
    }

    /* 滑桿控制優化 */
    #moodIntensity {
        height: 40px; /* 增加觸控區域 */
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        outline: none;
    }

    #moodIntensity::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: #3b82f6;
        cursor: pointer;
        border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    #moodIntensity::-moz-range-thumb {
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: #3b82f6;
        cursor: pointer;
        border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    /* 導航按鈕優化 */
    nav button {
        min-height: 48px;
        min-width: 48px;
        padding: 12px;
        border-radius: 12px;
    }

    /* 選擇器優化 */
    select {
        font-size: 16px !important; /* 防止 iOS 自動縮放 */
        min-height: 48px;
        padding: 12px 16px !important;
        background-size: 20px;
        background-position: right 12px center;
    }

    /* 主要提交按鈕加強 */
    #submitBtn {
        min-height: 56px; /* 更大的主要操作按鈕 */
        font-size: 18px;
        font-weight: 600;
        border-radius: 16px;
        margin-top: 20px;
    }

    /* 回饋按鈕優化 */
    .feedback-btn {
        min-height: 44px;
        padding: 10px 16px;
        margin: 4px;
    }

    /* 模態框按鈕優化 */
    .prose button, #disclaimerModal button, #settingsModal button {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 20px;
        border-radius: 12px;
    }

    /* 卡片間距優化 */
    .card-appear {
        margin-bottom: 20px;
        padding: 24px !important;
    }

    /* 模態框內文字大小優化 */
    .prose {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* 免責聲明模態框特別優化 */
    #disclaimerModal .prose {
        font-size: 0.9rem;
    }

    /* 導航列防止超出 */
    nav {
        overflow-x: hidden;
        padding: 16px !important;
    }

    /* 圖表容器防止超出 */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* =========================
       手勢支援增強
    ========================= */

    /* 可滑動元素增強 */
    .mood-tag:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* 長按防止選擇文字 */
    .mood-tag, button, nav {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* 提升滾動體驗 */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* 防止意外縮放 */
    input[type="range"], textarea, select {
        touch-action: manipulation;
    }
}