/* 
 * 移动端显示修复样式
 * 专门修复快捷操作按钮文字垂直排列问题
 */

/* 防止主题切换闪烁：添加全局颜色过渡 */
html, body, * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
}

/* 修复深色模式下的颜色闪烁 */
html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .border-gray-100 {
    border-color: #2d3748 !important;
}

/* 在主题切换时停止过渡动画，防止闪烁 */
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
    transition: none !important;
    animation: none !important;
}

/* 确保在初始加载时应用正确的颜色 - 防止FOUC */
html:not(.light):not(.dark) {
    visibility: hidden;
}

html.light, html.dark {
    visibility: visible;
}

/* 修复深色模式下的其他常见元素 */
html.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark .message-user {
    background-color: #2d3748 !important;
}

html.dark .message-assistant {
    background-color: #1e293b !important;
}

html.dark input, 
html.dark textarea {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

/* 修复移动端快捷操作样式 */
@media (max-width: 768px) {
    /* 修复快捷操作按钮 */
    .shortcut-item {
        width: auto !important;
        height: auto !important;
        min-height: 44px;
        display: flex !important;
        flex-direction: row !important;
        text-align: left !important;
    }
    
    /* 修复快捷操作按钮文字 */
    .shortcut-text {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: nowrap !important;
        text-align: left !important;
        width: auto !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* 确保文字和图标正确对齐 */
    .shortcut-icon {
        flex-shrink: 0;
        margin-right: 10px;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* 快捷操作容器 */
    .grid.grid-cols-1 .shortcut-item,
    .grid.grid-cols-2 .shortcut-item {
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* ===== 移动端查询结果样式优化 ===== */
    
    /* 查询结果基础优化 */
    .message-assistant .message-content {
        padding: 0 !important;
    }
    
    /* 域名信息卡片样式优化 */
    .message-content .bg-white {
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
        margin-bottom: 1rem !important;
    }
    
    /* 深色模式适配 */
    .dark .message-content .bg-white {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
    }
    
    /* 表格式数据显示优化 */
    .message-content .grid {
        row-gap: 0.5rem !important;
    }
    
    /* 信息标签与数据间的间距 */
    .message-content .grid > span:first-child {
        font-size: 0.7rem !important;
        opacity: 0.8 !important;
    }
    
    /* 信息数据值优化 */
    .message-content .grid > span:last-child {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    
    /* 查询结果头部样式优化 */
    .message-content .flex.items-center.mb-4 {
        align-items: flex-start !important;
    }
    
    /* 域名状态标签样式优化 */
    .message-content .inline-flex.items-center.px-2\.5 {
        white-space: nowrap !important;
        margin-top: 2px !important;
    }
    
    /* 改进详细结果面板 */
    .message-content .details-panel {
        border-radius: 8px !important;
        padding: 0.75rem !important;
    }
    
    /* 操作按钮栏样式优化 */
    .message-content .flex.flex-wrap.gap-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
    }
    
    /* 操作按钮样式优化 */
    .message-content .flex.flex-wrap.gap-3 button {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.75rem !important;
        white-space: nowrap !important;
        flex-grow: 1 !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 描述性文本优化 */
    .message-content .bg-blue-50 {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        padding: 0.6rem !important;
    }
    
    /* 优化结果中的表格布局 */
    .message-content .grid.grid-cols-2 {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .message-content .grid.grid-cols-2 > div {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* 优化结果中的表格标题 */
    .message-content .text-gray-500.text-xs {
        margin-bottom: 0.1rem !important;
    }
    
    /* 优化详情中的网格布局 */
    .message-content .grid.grid-cols-3 {
        grid-template-columns: 30% 70% !important;
    }
} 

/* 优化聊天界面中的查询结果显示 */
@media (max-width: 428px) {
    /* 优化整体消息容器 */
    .message-assistant, .message-user {
        max-width: 100% !important;
        padding: 0.5rem !important;
    }
    
    /* 优化输出结果表格 */
    .message-content table {
        font-size: 0.8rem !important;
        width: 100% !important;
    }
    
    /* 优化域名结果头部布局 */
    .message-content h3.text-lg {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin-right: 0.5rem !important;
    }
    
    /* 深色模式文字颜色优化 */
    .dark .message-content p,
    .dark .message-content div,
    .dark .message-content span:not(.bg-green-100):not(.bg-blue-100):not(.bg-amber-100):not(.bg-red-100) {
        color: #e2e8f0 !important;
    }
    
    /* 优化各种标签颜色在深色模式下的对比度 */
    .dark .message-content .bg-blue-50 {
        background-color: rgba(59, 130, 246, 0.15) !important;
        border: 1px solid rgba(59, 130, 246, 0.2) !important;
    }
    
    .dark .message-content .text-blue-800 {
        color: #90cdf4 !important;
    }
    
    /* 改进查询结果按钮的触摸体验 */
    .message-content button,
    .suggestion-chip {
        min-height: 36px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 添加触摸反馈效果 */
    .message-content button:active,
    .suggestion-chip:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
        transition: transform 0.1s ease, opacity 0.1s ease !important;
    }
    
    /* 调整字体大小，确保不会被iOS自动放大 */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* 优化域名查询结果中的状态标签 */
    .message-content .inline-flex.items-center {
        display: inline-flex !important;
        align-items: center !important;
        height: auto !important;
        font-size: 0.7rem !important;
        margin-top: 4px !important;
    }
    
    /* 优化按钮大小和间距 */
    .message-content .flex.flex-wrap.gap-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    /* 改进结果描述区域 */
    .message-content .mt-4.p-3.bg-blue-50 {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 8px !important;
    }
}

/* 添加动画过渡效果 */
.message-content .bg-white {
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* 优化深色模式下的图标颜色 */
.dark .message-content svg,
.dark .shortcut-icon {
    color: #90cdf4 !important;
}

/* 优化底部输入区的移动端样式 */
@media (max-width: 428px) {
    /* 输入框区域优化 */
    .border-t.border-gray-100.p-2 {
        padding: 0.5rem !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* 确保输入框足够大 */
    #message-input {
        height: 42px !important;
    }
    
    /* 优化发送按钮触摸区域 */
    #send-button {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}