/**
 * AequiLex Mobile Optimization FIX
 * 修復移動端樣式影響桌面版的問題
 * Version: v3.5.0.1
 * Date: 2026-01-09
 * 新增：登入頁面和對話頁面的移動端優化
 */

/* ========== 重要：所有移動端樣式只在小屏幕生效 ========== */

/* 確保桌面版不受影響 - 添加更具體的媒體查詢 */

/* ========== 基礎移動端優化（僅 480px 以下）========== */

@media only screen and (max-width: 480px) {
    
    /* 防止內容溢出 */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* 優化根字體大小 */
    html {
        font-size: 14px;
    }
    
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
    }
}

/* ========== 首頁移動端優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 主容器優化 - 只在移動端生效 */
    body.simplified-home .homepage-container {
        padding: 20px 16px;
    }
    
    /* 標題優化 */
    body.simplified-home .homepage-title,
    body.simplified-home .hero-title {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 12px;
    }
    
    body.simplified-home .homepage-subtitle,
    body.simplified-home .hero-subtitle {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 32px;
    }
    
    /* 搜索框容器優化 */
    body.simplified-home .search-section {
        padding: 0;
        margin-bottom: 24px;
    }
    
    /* 輸入框優化 */
    body.simplified-home .main-input-wrapper {
        padding: 16px;
    }
    
    body.simplified-home .main-input {
        font-size: 15px;
        min-height: 50px;
        padding: 12px 16px;
        line-height: 1.5;
    }
    
    body.simplified-home .main-input::placeholder {
        font-size: 14px;
    }
    
    /* 提交按鈕優化 */
    body.simplified-home .submit-btn {
        padding: 14px 24px;
        font-size: 15px;
        min-height: 48px;
        border-radius: 12px;
    }
    
    /* AI 模型選擇器優化 */
    body.simplified-home .ai-model-selector {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }
    
    /* 查詢模式選擇器優化 */
    body.simplified-home .query-mode-selector {
        gap: 8px;
    }
    
    body.simplified-home .mode-option {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 42px;
    }
    
    /* 範例查詢優化 */
    body.simplified-home .examples-grid {
        gap: 10px;
    }
    
    body.simplified-home .example-card {
        padding: 12px 14px;
        font-size: 13px;
    }
    
    /* 底部操作按鈕優化 */
    body.simplified-home .bottom-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 24px;
    }
    
    body.simplified-home .action-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
    }
    
    /* 語言切換按鈕 - 保持在右上角 */
    body.simplified-home .language-switcher {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
    }
}

/* 超小屏幕優化（僅小型手機） */
@media only screen and (max-width: 375px) {
    
    body.simplified-home .homepage-title,
    body.simplified-home .hero-title {
        font-size: 28px;
    }
    
    body.simplified-home .homepage-subtitle,
    body.simplified-home .hero-subtitle {
        font-size: 14px;
    }
    
    body.simplified-home .main-input {
        font-size: 14px;
    }
    
    body.simplified-home .submit-btn {
        font-size: 14px;
        padding: 12px 20px;
    }
}

/* ========== 對話頁面移動端優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 對話容器優化 */
    .conversation-container {
        padding: 16px 12px;
        gap: 16px;
    }
    
    /* 消息優化 */
    .message {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    /* 頭像優化 */
    .message-avatar {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    
    .judge-wig-avatar svg {
        width: 36px;
        height: 36px;
    }
    
    /* 用戶消息氣泡優化 */
    .user-message .message-content {
        max-width: 80%;
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 16px 16px 4px 16px;
    }
    
    /* AI 消息氣泡優化 */
    .ai-message .message-content {
        max-width: 85%;
        padding: 14px 16px;
        font-size: 15px;
        border-radius: 16px 16px 16px 4px;
    }
    
    /* 消息文本優化 */
    .message-text {
        font-size: 15px;
        line-height: 1.6;
        word-break: break-word;
    }
    
    /* 時間戳優化 */
    .message-time,
    .message-timestamp {
        font-size: 11px;
        margin-top: 6px;
    }
    
    /* 操作按鈕優化 */
    .message-actions {
        gap: 8px;
        margin-top: 10px;
    }
    
    .action-btn {
        padding: 8px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .action-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* 思考狀態優化 */
    .ai-thinking {
        gap: 10px;
        padding: 12px;
    }
    
    .thinking-bubble {
        padding: 12px 16px;
    }
    
    .thinking-text {
        font-size: 14px;
    }
    
    /* 空狀態優化 */
    .empty-state {
        padding: 40px 20px;
    }
    
    .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    
    .empty-title {
        font-size: 20px;
        margin-bottom: 8px;
    }
    
    .empty-desc {
        font-size: 14px;
    }
}

/* 超小屏幕對話優化 */
@media only screen and (max-width: 375px) {
    
    .user-message .message-content,
    .ai-message .message-content {
        max-width: 90%;
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .message-text {
        font-size: 14px;
    }
    
    .message-avatar {
        width: 32px;
        height: 32px;
    }
    
    .judge-wig-avatar svg {
        width: 32px;
        height: 32px;
    }
}

/* ========== 側邊欄移動端優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 漢堡菜單優化 */
    .hamburger-menu {
        width: 85%;
        max-width: 320px;
    }
    
    .menu-header {
        padding: 20px 16px;
    }
    
    .menu-title {
        font-size: 20px;
    }
    
    .menu-close-btn {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
    
    /* 菜單項目優化 */
    .menu-item {
        padding: 14px 16px;
        font-size: 15px;
        min-height: 50px;
    }
    
    .menu-item svg {
        width: 20px;
        height: 20px;
    }
    
    /* 用戶信息優化 */
    .user-info {
        padding: 12px 16px;
    }
    
    .user-name {
        font-size: 15px;
    }
    
    .user-email {
        font-size: 12px;
    }
}

/* ========== 漢堡按鈕優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    .hamburger-btn {
        width: 44px;
        height: 44px;
        padding: 10px;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 100;
        background: var(--bg-card, white);
        border: 1px solid var(--border, #e0e0e0);
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .hamburger-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* ========== URL 鏈接優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 案例鏈接優化 */
    .case-link {
        display: inline-block;
        word-break: break-word;
        max-width: 100%;
        font-size: 14px;
        padding: 2px 0;
    }
    
    /* 確保鏈接在小屏幕上可點擊 */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        touch-action: manipulation;
    }
}

/* ========== 輸入框優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 防止 iOS Safari 縮放 */
    input,
    textarea,
    select {
        font-size: 16px; /* iOS Safari 不會縮放 16px 以上的字體 */
    }
    
    /* 優化輸入框觸控區域 */
    button,
    .btn,
    [role="button"] {
        min-height: 44px; /* iOS 推薦的最小觸控尺寸 */
        min-width: 44px;
        touch-action: manipulation;
    }
}

/* ========== 滾動優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 平滑滾動 */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 隱藏滾動條但保持功能 */
    .conversation-container::-webkit-scrollbar,
    .menu-nav::-webkit-scrollbar {
        width: 3px;
    }
    
    .conversation-container::-webkit-scrollbar-thumb,
    .menu-nav::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }
}

/* ========== 橫屏模式優化（僅 768px 以下 + 橫屏）========== */

@media only screen and (max-width: 768px) and (orientation: landscape) {
    
    /* 橫屏時減少垂直間距 */
    body.simplified-home .homepage-container {
        padding: 16px 12px;
    }
    
    body.simplified-home .homepage-title,
    body.simplified-home .hero-title {
        font-size: 28px;
        margin-bottom: 8px;
    }
    
    body.simplified-home .homepage-subtitle,
    body.simplified-home .hero-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .conversation-container {
        padding: 12px;
    }
    
    .message {
        margin-bottom: 12px;
    }
}

/* ========== 觸控友好優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 移除 hover 效果（觸控設備） */
    @media (hover: none) and (pointer: coarse) {
        *:hover {
            /* 移除 hover 樣式，避免觸控後殘留 */
            transition: none;
        }
    }
    
    /* 優化觸控反饋 */
    button:active,
    .btn:active,
    [role="button"]:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
}

/* ========== 特定設備優化 ========== */

/* iPhone SE / 小型 Android 手機（僅 375px 以下）*/
@media only screen and (max-width: 375px) {
    
    body.simplified-home .homepage-container {
        padding: 16px 12px;
    }
    
    .hamburger-menu {
        width: 90%;
    }
}

/* iPhone 12/13/14 Pro Max / 大型 Android 手機（僅 400-480px）*/
@media only screen and (min-width: 400px) and (max-width: 480px) {
    
    .user-message .message-content {
        max-width: 75%;
    }
    
    .ai-message .message-content {
        max-width: 80%;
    }
}

/* ========== 性能優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 減少動畫以提升性能 */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms;
            animation-iteration-count: 1;
            transition-duration: 0.01ms;
        }
    }
    
    /* GPU 加速 */
    .message,
    .hamburger-menu,
    .menu-overlay {
        transform: translateZ(0);
        will-change: transform;
    }
}

/* ========== 安全區域適配（iPhone X 及以上，僅 768px 以下）========== */

@supports (padding: max(0px)) {
    @media only screen and (max-width: 768px) {
        
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .hamburger-btn {
            top: max(16px, env(safe-area-inset-top));
            left: max(16px, env(safe-area-inset-left));
        }
        
        .conversation-container {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
}

/* ========== Dark Mode 支持（僅 768px 以下）========== */

@media only screen and (max-width: 768px) and (prefers-color-scheme: dark) {
    
    .hamburger-btn {
        background: #1a1a1a;
        border-color: #333;
    }
    
    .case-link {
        color: #4da6ff;
    }
}

/* ========== 字體優化（僅 768px 以下）========== */

@media only screen and (max-width: 768px) {
    
    /* 優化中文字體渲染 */
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* 英文數字使用系統字體 */
    .message-text {
        font-feature-settings: "tnum" 1; /* 等寬數字 */
    }
}