/* ========================================
 * 移动端聊天界面 - 彻底重构版本
 * 目标：简洁、稳定、响应式
 * ======================================== */
:root{ --vh: 1vh; }

/* 基础重置 - 确保移动端干净的布局基础 */
body.mobile-device {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    font-size: 14px !important;
}

body.mobile-device * {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 隐藏桌面端元素 */
body.mobile-device .sidebar,
body.mobile-device #sendBtn,
body.mobile-device .input-actions,
body.mobile-device .quick-actions,
body.mobile-device #quickActions,
body.mobile-device .chat-subtitle {
    display: none !important;
}

/* ========================================
 * 整体布局容器
 * ======================================== */
body.mobile-device .chat-main {
    width: 100vw !important;
    height: calc(var(--vh) * 100) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
}

/* ========================================
 * 头部区域
 * ======================================== */
body.mobile-device .chat-header {
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    background: #fff !important;
    border-bottom: 1px solid #e1e8ed !important;
    text-align: center !important;
    position: relative !important;
    z-index: 10 !important;
}

body.mobile-device .chat-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ========================================
 * 消息区域
 * ======================================== */
body.mobile-device .chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    padding-bottom: 80px !important; /* 为输入栏留空间 */
    scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    scrollbar-gutter: stable both-edges !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* 消息基础样式 - 保持原有格式不变 */
body.mobile-device .message {
    margin-bottom: 16px !important;
}

body.mobile-device .message:last-child {
    margin-bottom: 0 !important;
}

/* ========================================
 * 输入区域 - 固定底部
 * ======================================== */
body.mobile-device .chat-input-area {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top: 1px solid #e1e8ed !important;
    padding: 12px 16px !important;
    min-height: auto !important;
    max-height: none !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 输入容器 - Flexbox 布局，输入框占最大空间，按钮紧贴右侧 */
body.mobile-device .input-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* 输入框包装器 */
body.mobile-device .input-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    order: 1 !important;
}

body.mobile-device .input-wrapper input {
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    outline: none !important;
    background: #f9fafb !important;
    transition: border-color 0.2s ease !important;
}

body.mobile-device .input-wrapper input:focus {
    border-color: #667eea !important;
    background: #fff !important;
}

/* 示例按钮 */
body.mobile-device .mobile-example-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid #d1d5db !important;
    background: #f9fafb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

body.mobile-device .mobile-example-btn:hover {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}

body.mobile-device .mobile-example-btn span {
    display: none !important;
}

body.mobile-device .mobile-example-btn i {
    font-size: 16px !important;
    color: #6b7280 !important;
}

/* 发送按钮 */
body.mobile-device .mobile-send-btn,
body.mobile-device #mobileSendBtn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #667eea !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    flex-shrink: 0 !important;
    order: 3 !important;
}

body.mobile-device .mobile-send-btn:hover,
body.mobile-device #mobileSendBtn:hover {
    background: #5a67d8 !important;
}

body.mobile-device .mobile-send-btn i,
body.mobile-device #mobileSendBtn i {
    font-size: 14px !important;
}

/* ========================================
 * 响应式适配
 * ======================================== */

/* 小屏幕优化 */
@media (max-width: 375px) {
    body.mobile-device .chat-messages {
        padding: 12px !important;
        padding-bottom: 80px !important;
    }
    
    body.mobile-device .chat-input-area {
        padding: 10px 12px !important;
    }
    
    body.mobile-device .input-container {
        gap: 6px !important;
    }
    
    body.mobile-device .mobile-example-btn,
    body.mobile-device .mobile-send-btn,
    body.mobile-device #mobileSendBtn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* 极小屏幕优化 */
@media (max-width: 320px) {
    body.mobile-device .chat-header {
        padding: 10px 12px !important;
    }
    
    body.mobile-device .chat-header h3 {
        font-size: 14px !important;
    }
    
    body.mobile-device .input-wrapper input {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    body.mobile-device .mobile-example-btn,
    body.mobile-device .mobile-send-btn,
    body.mobile-device #mobileSendBtn {
        width: 32px !important;
        height: 32px !important;
    }
    
    body.mobile-device .mobile-example-btn i {
        font-size: 14px !important;
    }
    
    body.mobile-device .mobile-send-btn i,
    body.mobile-device #mobileSendBtn i {
        font-size: 12px !important;
    }
}

/* ========================================
 * 移动端输入区域 - 最终修复版 (Flexbox解决方案)
 * ======================================== */

@media (max-width: 1024px) {

    /* 隐藏桌面端元素 */
    .sidebar,
    #sendBtn,
    .input-actions,
    .quick-actions {
        display: none !important;
    }

    /* 为固定输入栏留出空间 */
    .chat-messages {
        padding-bottom: 80px !important; 
    }

    /* 输入栏固定在底部 */
    body.mobile-device .input-area,
    .input-area {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #fff !important;
        border-top: 1px solid #e1e8ed !important;
        padding: 12px 16px !important;
        z-index: 1000 !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* 强制重置输入容器的所有可能样式 */
    body.mobile-device .input-container,
    .input-container {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        width: 100% !important;
        display: block !important;
    }

    /* 
     * 真正的Flex容器现在是 .input-wrapper 
     * 使用最高优先级确保生效
     */
    body.mobile-device .input-wrapper,
    .input-wrapper,
    body .input-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px 12px !important;
        border-radius: 25px !important;
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        box-sizing: border-box !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
  
    /* 输入框本身 (textarea) */
    body.mobile-device #messageInput,
    #messageInput {
        flex: 1 !important;
        min-width: 0 !important;
        border: none !important;
        background: transparent !important;
        padding: 8px !important;
        resize: none !important;
        outline: none !important;
        font-size: 16px !important; /* 防止 iOS 聚焦缩放 */
        line-height: 1.4 !important;
        max-height: 35vh !important; /* 聚焦前的最大高度 */
        overflow-y: auto !important; /* 内容超出时内部滚动 */
    }

    body.mobile-device #messageInput:focus,
    #messageInput:focus {
        border-color: #667eea !important;
        background: #fff !important;
    }

    body.mobile-device .input-wrapper:focus-within #messageInput {
        max-height: 50vh !important; /* 聚焦后允许更高 */
    }
  
    /* 两个按钮 (关键修复!) */
    body.mobile-device .mobile-example-btn,
    body.mobile-device .mobile-send-btn,
    body.mobile-device #mobileSendBtn,
    .mobile-example-btn,
    .mobile-send-btn,
    #mobileSendBtn {
        flex-shrink: 0 !important; /* 防止被压缩 */
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    body.mobile-device .mobile-example-btn,
    .mobile-example-btn {
        background: #e9ecef !important;
        border: none !important;
    }

    /* 单独设置发送按钮的背景色 */
    body.mobile-device .mobile-send-btn,
    body.mobile-device #mobileSendBtn,
    .mobile-send-btn,
    #mobileSendBtn {
        background: #667eea !important;
        border: none !important;
        color: white !important;
    }
  
    body.mobile-device .mobile-send-btn i,
    body.mobile-device #mobileSendBtn i,
    .mobile-send-btn i,
    #mobileSendBtn i {
         color: white !important;
    }
  
    /* 隐藏不必要的页脚 */
    .input-footer {
        display: none !important;
    }

    /* ========================================
     * 移动端消息内容卡片样式修复
     * ======================================== */

    /* 通用消息内容调整 */
    .message-content {
        max-width: 100% !important; /* 解除桌面端的宽度限制 */
        width: 100% !important;
    }

    /* 针对所有卡片的基础样式 */
    .company-list-card, 
    .analysis-card, 
    .advantages-card, 
    .risks-card, 
    .opportunities-card,
    .qixin-basic-info-card {
        width: 100% !important;
        max-width: none !important; /* 覆盖桌面端的max-width */
        padding: 12px !important; /* 调整内边距以适应小屏幕 */
        box-sizing: border-box !important;
    }

    /* 列表项的内边距也需要调整 */
    .company-list-card .company-item {
        padding: 10px !important;
    }

    /* 深度分析卡片中的列表 */
    .analysis-card ul, .advantages-card ul, .risks-card ul, .opportunities-card ul {
        padding-left: 20px !important;
    }

    /* 移除三卡片布局的父容器样式，消除第二层嵌套 */
    .analysis-card {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* 卡片之间的间距 */
    }

    /* 调整三张卡片本身的样式，使其不再像独立卡片 */
    .analysis-card .advantages-card,
    .analysis-card .risks-card,
    .analysis-card .opportunities-card {
        padding: 12px !important;
        border: 1px solid #eef0f2 !important;
        border-radius: 12px !important;
        background: #f8f9fa !important;
        box-shadow: none !important;
    }
}

/* 新增：移动端内容溢出与代码块适配 */
body.mobile-device .chat-messages pre,
body.mobile-device .message-content pre,
body.mobile-device .markdown-body pre {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  overflow: auto !important;
  background: #f6f8fa !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

body.mobile-device code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

body.mobile-device .chat-messages img,
body.mobile-device .chat-messages table {
  max-width: 100% !important;
  height: auto !important;
}

/* ========================================
 * 视口与安全区适配（移动端）
 * ======================================== */
@supports (height: 100dvh) {
  body.mobile-device .chat-main {
    height: 100dvh !important; /* 避免地址栏伸缩导致跳动 */
  }
}

@supports (height: 100svh) {
  body.mobile-device .chat-main {
    height: 100svh !important; /* 优先使用更稳定的svh */
  }
}

body.mobile-device .chat-input-area {
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; /* 适配底部安全区 */
}

body.mobile-device .chat-messages {
  padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; /* 让内容不被输入栏遮挡 */
}

/* ========================================
 * 登录覆盖层样式（最小实现）
 * ======================================== */
.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
}

.login-card {
  width: min(90vw, 360px);
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  text-align: center;
}

.login-card h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #111827;
}

.login-input {
  width: 100%;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.login-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.login-btn {
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border: none;
  border-radius: 8px;
  background: #667eea;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.login-btn:hover {
  background: #5a67d8;
}

.login-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.login-error {
  display: none;
  margin-top: 8px;
  color: #dc2626;
  font-size: 13px;
}

/* ========================================
 * 移动端发送按钮可用性（保留并美化 #sendBtn）
 * ======================================== */
body.mobile-device .input-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 隐藏非发送类按钮，仅保留发送 */
body.mobile-device .input-actions .input-btn:not(#sendBtn) {
  display: none !important;
}

/* 发送按钮强化（44px 可触达） */
body.mobile-device #sendBtn {
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #667eea !important;
  color: #fff !important;
  border: none !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

body.mobile-device #sendBtn i {
  color: #fff !important;
  font-size: 16px !important;
}