/* ==================== 移动端优化样式 ==================== */

/* 超小屏幕 (手机竖屏) - 320px-575px */
@media (max-width: 575px) {
    /* ===== 全局样式 ===== */
    body {
        font-size: 14px;
        line-height: 1.5;
    }

    /* ===== 导航栏优化 ===== */
    .navbar {
        padding: 0.5rem 0;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .navbar .nav-link {
        padding: 0.5rem !important;
        font-size: 0.9rem;
    }

    .badge {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.7rem !important;
    }

    /* ===== 卡片优化 ===== */
    .card {
        margin-bottom: 0.75rem;
    }

    .card-header {
        padding: 0.75rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    /* ===== 表单优化 ===== */
    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    textarea {
        font-size: 16px !important; /* 防止iOS放大 */
        padding: 0.5rem 0.75rem;
        height: auto;
        min-height: 44px; /* 触摸按钮最小高度 */
    }

    .form-check {
        margin-bottom: 0.5rem;
    }

    .form-check-label {
        font-size: 0.9rem;
        padding-left: 0.25rem;
    }

    /* ===== 按钮优化 ===== */
    .btn {
        min-height: 44px; /* 触摸按钮最小高度 */
        min-width: 44px;
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem;
    }

    .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
        width: 100%;
    }

    .btn-sm {
        min-height: 36px;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    .btn-group-sm > .btn {
        min-height: 36px;
    }

    /* ===== 表单行布局优化 ===== */
    .row {
        margin-right: -0.375rem;
        margin-left: -0.375rem;
    }

    .col-6,
    .col-md-2,
    .col-lg-2,
    .col-lg-1,
    .col-md-3,
    .col-md-6 {
        padding-right: 0.375rem;
        padding-left: 0.375rem;
    }

    /* 手机上强制每行一个或两个 */
    .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ===== 表格优化 ===== */
    .table-responsive {
        border: none;
        margin: 0 -0.75rem;
    }

    .bazi-table,
    .dayun-table {
        font-size: 0.75rem;
        word-break: break-word;
    }

    .bazi-table th,
    .bazi-table td {
        padding: 0.3rem 0.2rem;
    }

    .dayun-table th,
    .dayun-table td {
        padding: 0.15rem 0.1rem;
    }

    /* ===== 聊天界面优化 ===== */
    .chat-messages {
        max-height: 40vh;
        padding: 0.5rem;
        border-radius: 0.25rem;
    }

    .message {
        margin-bottom: 0.5rem;
    }

    .message-content {
        max-width: 85%;
        min-width: 100px;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .message-avatar {
        width: 28px;
        height: 28px;
        font-size: 14px;
        min-width: 28px;
    }

    /* ===== 快捷问题按钮 ===== */
    .quick-questions .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        min-height: 40px;
        flex-grow: 1;
        flex-shrink: 1;
    }

    /* ===== 响应式网格 ===== */
    .wuxing-scores {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;
    }

    .wuxing-item {
        padding: 0.3rem;
        font-size: 0.75rem;
    }

    /* ===== 输入框组 ===== */
    .input-group {
        gap: 0.25rem;
    }

    .input-group > .form-control {
        font-size: 16px !important;
        min-height: 44px;
    }

    .input-group > .btn {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* ===== 历史记录面板 ===== */
    #history-sidebar {
        display: none !important;
    }

    .history-list {
        max-height: 50vh;
    }

    .history-item {
        padding: 0.5rem;
        gap: 0.25rem;
    }

    .history-item-content {
        flex: 1;
    }

    .history-item-title {
        font-size: 0.9rem;
        margin-bottom: 0.2rem;
    }

    .history-item-date {
        font-size: 0.7rem;
    }

    .history-item-actions {
        display: flex;
        gap: 0.25rem;
        opacity: 1;
    }

    .history-item-actions .btn {
        padding: 0.25rem 0.4rem;
        min-height: 32px;
        min-width: 32px;
    }

    /* ===== 模态框优化 ===== */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 0.25rem;
    }

    .modal-header {
        padding: 0.75rem;
    }

    .modal-body {
        padding: 0.75rem;
    }

    .modal-footer {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    /* ===== 容器优化 ===== */
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* ===== 间距优化 ===== */
    .mb-3 { margin-bottom: 0.75rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mt-4 { margin-top: 1rem !important; }

    /* ===== 隐藏不必要的元素 ===== */
    .d-none-mobile {
        display: none !important;
    }
}

/* 小屏幕 (手机横屏) - 576px-767px */
@media (min-width: 576px) and (max-width: 767px) {
    .btn {
        min-height: 40px;
    }

    .form-control {
        font-size: 15px !important;
        min-height: 40px;
    }

    .chat-messages {
        max-height: 50vh;
    }

    .message-content {
        max-width: 80%;
    }

    .quick-questions .btn {
        font-size: 0.8rem;
    }

    #history-sidebar {
        display: none !important;
    }
}

/* 平板设备 - 768px-1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .btn {
        min-height: 40px;
    }

    .form-control {
        font-size: 14px !important;
    }

    /* 平板上也可能需要隐藏左侧面板，根据需要显示 */
    #history-sidebar {
        display: none !important;
    }

    #main-content {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .chat-messages {
        max-height: 60vh;
    }
}

/* 深色模式支持（可选） */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
    }

    .card {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }

    .card-header {
        background-color: #333;
        border-bottom-color: #444;
    }

    .form-control,
    .form-select {
        background-color: #333;
        color: #e0e0e0;
        border-color: #444;
    }

    .table {
        color: #e0e0e0;
    }

    .message.assistant .message-content {
        background-color: #333;
        border-color: #444;
        color: #e0e0e0;
    }
}

/* 横屏模式特殊处理 */
@media (orientation: landscape) and (max-height: 500px) {
    .navbar {
        padding: 0.25rem 0;
    }

    .navbar-brand {
        font-size: 0.9rem;
    }

    .card {
        margin-bottom: 0.5rem;
    }

    .card-header {
        padding: 0.5rem;
    }

    .card-body {
        padding: 0.5rem;
    }

    .chat-messages {
        max-height: 30vh;
    }

    .form-control {
        height: 36px;
        font-size: 14px !important;
    }

    .btn {
        min-height: 36px;
        padding: 0.35rem 0.6rem;
    }
}

/* 触摸优化 - 增加可点击区域 */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备 */
    a,
    button,
    .btn,
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }

    /* 移除悬停效果，改用活跃状态 */
    button:active,
    .btn:active,
    a:active {
        opacity: 0.8;
    }

    /* 禁用长按菜单 */
    .message-content {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
}

/* ===== 指纹友好样式 ===== */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
    /* 防止iOS自动放大 */
    font-size: 16px !important;
}

/* ===== 虚拟键盘处理 ===== */
@media (max-height: 500px) {
    .chat-messages {
        max-height: 20vh;
    }

    #ai-section,
    #feedback-section {
        margin-top: 0 !important;
    }
}

/* ===== 打印样式 ===== */
@media print {
    .navbar,
    .btn,
    #send-message,
    #start-ai-fortune,
    .card-header .d-flex,
    .input-group {
        display: none !important;
    }

    .card {
        page-break-inside: avoid;
    }

    .chat-messages {
        max-height: none;
    }
}