/**
 * AequiLex 移動端增強樣式
 * 專門針對登入頁面和對話頁面的移動端優化
 * Version: v3.5.0.1
 * Date: 2026-01-09
 */

/* ========== 登入頁面移動端優化 ========== */

@media only screen and (max-width: 768px) {
    /* 登入容器 */
    .login-container {
        padding: 16px !important;
        min-height: 100vh;
    }
    
    .login-box {
        padding: 24px 20px !important;
        margin: 0 auto;
        max-width: 100%;
        border-radius: 16px !important;
    }
    
    /* 標題優化 */
    .login-box h1 {
        font-size: 28px !important;
        margin-bottom: 8px !important;
    }
    
    .login-box .subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }
    
    /* 登入按鈕 */
    .login-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .login-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Logo */
    .logo-text {
        font-size: 24px !important;
    }
    
    /* Token 顯示 */
    .features {
        padding: 16px !important;
        margin: 20px 0 !important;
    }
    
    .feature-item {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    /* 分隔線 */
    .divider {
        margin: 20px 0 !important;
        font-size: 13px !important;
    }
    
    /* 登入信息 */
    .login-info {
        padding: 12px !important;
        font-size: 12px !important;
        margin: 16px 0 !important;
    }
}

/* ========== 對話頁面移動端優化 ========== */

@media only screen and (max-width: 768px) {
    /* 對話頁面容器 */
    .chat-page-container {
        height: 100vh;
        overflow: hidden;
    }
    
    /* 頭部優化 */
    .chat-header {
        padding: 12px 16px !important;
        flex-wrap: nowrap;
    }
    
    .chat-title {
        font-size: 18px !important;
    }
    
    /* 漢堡菜單按鈕 */
    .chat-header .hamburger-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        position: static !important;
    }
    
    /* 對話主體 */
    .chat-main {
        padding: 16px 12px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 對話氣泡 */
    .message {
        max-width: 90% !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
    
    .user-message {
        margin-left: auto;
    }
    
    .ai-message {
        margin-right: auto;
    }
    
    /* 輸入區域 */
    .chat-input-area {
        padding: 12px 16px !important;
        background: var(--bg-card, white);
        border-top: 1px solid var(--border, #e0e0e0);
    }
    
    .chat-input-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .chat-input {
        font-size: 15px !important;
        padding: 12px 14px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        resize: none;
        max-height: 150px;
    }
    
    /* 發送按鈕 */
    .chat-submit-btn {
        padding: 12px 20px !important;
        font-size: 15px !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        width: 100%;
    }
    
    /* 字數統計 */
    .char-counter {
        font-size: 12px !important;
        padding: 4px 0;
        text-align: right;
    }
}

/* ========== 超小屏幕優化（480px 以下）========== */

@media only screen and (max-width: 480px) {
    /* 登入頁面 */
    .login-box {
        padding: 20px 16px !important;
    }
    
    .login-box h1 {
        font-size: 24px !important;
    }
    
    .login-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    /* 對話頁面 */
    .chat-header {
        padding: 10px 12px !important;
    }
    
    .chat-title {
        font-size: 16px !important;
    }
    
    .chat-main {
        padding: 12px 8px !important;
    }
    
    .message {
        max-width: 95% !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .chat-input-area {
        padding: 10px 12px !important;
    }
    
    .chat-input {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
}

/* ========== 橫屏模式優化 ========== */

@media only screen and (max-height: 500px) and (orientation: landscape) {
    /* 登入頁面橫屏 */
    .login-container {
        padding: 12px !important;
    }
    
    .login-box {
        padding: 16px !important;
        margin: 20px auto !important;
    }
    
    .login-box h1 {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    
    .features {
        margin: 12px 0 !important;
        padding: 12px !important;
    }
    
    /* 對話頁面橫屏 */
    .chat-header {
        padding: 8px 12px !important;
    }
    
    .chat-main {
        padding: 12px !important;
    }
    
    .chat-input-area {
        padding: 8px 12px !important;
    }
    
    .chat-input {
        min-height: 40px !important;
        max-height: 80px !important;
    }
}

/* ========== 觸控優化 ========== */

@media only screen and (max-width: 768px) {
    /* 確保所有可點擊元素至少 44x44px */
    button,
    .btn,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* 防止雙擊縮放 */
    * {
        touch-action: manipulation;
        -ms-touch-action: manipulation;
    }
    
    /* 優化表單元素觸控體驗 */
    input,
    textarea,
    select {
        font-size: 16px !important; /* 防止 iOS 縮放 */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* 平滑滾動 */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ========== 隱藏桌面端元素 ========== */

@media only screen and (max-width: 768px) {
    /* 隱藏不適合移動端的元素 */
    .desktop-only {
        display: none !important;
    }
    
    /* 顯示移動端專用元素 */
    .mobile-only {
        display: block !important;
    }
}

/* ========== 確保頁面不會縮放 ========== */

@media only screen and (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}