/* Mobile specific styles for FiresAI homepage */

@media screen and (max-width: 767px) {
  /* 强制整页固定，不可垂直滚动 */
  html, body {
    height: 100vh !important;
    width: 100% !important;
    position: fixed !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 主容器同样固定高度 */
  #app, .ds-wrapper {
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* 完全移除汉堡按钮和侧边栏 */
  .hamburger-btn{display:none !important;}
  .side-nav{display:none !important;}

  /* 主容器保持流式布局，允许滚动 */
  #app, .ds-wrapper {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 内容区域样式 */
  .content-area {
    width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    height: 100vh !important; /* 确保内容区域占满全屏 */
  }

  /* 主体内容区样式 - 允许整体滚动 */
  .ds-main {
    padding: 0 !important; /* 移除左右内边距，确保贴边 */
    box-sizing: border-box !important;
    height: 100% !important; /* 确保主体内容区域占满全屏 */
    position: relative !important;
    overflow: hidden !important; /* 禁止自身滚动，保留内部聊天滚动 */
  }

  /* 首页主体内容区域 - 去除顶部空间 */
  .ds-main > div:first-child {
    margin-top: 0 !important; /* 移除顶部空间 */
    padding-bottom: 120px !important; /* 为输入框预留空间 */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Logo和描述文字居中显示 */
  .hero-icon, .hero-title, .hero-sub {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .hero-icon {
    margin-bottom: 5px !important;
    margin-top: 20px !important; /* 添加适当的顶部边距 */
  }
  
  .hero-icon img {
    width: 140px !important;
    margin: 0 auto !important;
    display: block !important;
  }
  
  .hero-title {
    position: relative !important;
    display: inline-block !important;
    font-size: 22px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
  
  .hero-sub {
    font-size: 14px !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .free-tag {
    position: absolute !important;
    top: -10px !important;
    right: 49px !important;
    display: inline-block !important;
    border: 1px solid #FF4D6D !important;
    color: #FF4D6D !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    background: #fff !important;
    font-weight: normal !important;
  }

  /* === 固定底部输入框（所有页面） === */
  .search-bubble {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 0 32px 0 !important;
    /* 加深渐变边框：玫红 → 橙色 */
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(135deg, rgba(255, 77, 109, 0.7), rgba(255, 150, 113, 0.7)) border-box !important;
    border: 2px solid transparent !important;
    /* 增强外部阴影 */
    box-shadow: 0 -4px 15px rgba(255, 77, 109, 0.25) !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* 输入框内部文本域 */
  .search-bubble textarea {
    min-height: 100px !important;
    border: none !important;
    background: white !important;
    padding: 5px 60px 5px 16px !important;
    font-size: 15px !important;
    vertical-align: top !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    resize: none !important;
    max-height: 150px !important;
    line-height: 1.4 !important;
    border-radius: 20px !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* 输入框占位符文字 */
  .search-bubble textarea::placeholder {
    padding-top: 0 !important;
    vertical-align: top !important;
    text-indent: 0 !important;
  }
  
  /* 调整文本区域右侧留白避免被按钮遮住 */
  .input-with-cursor textarea {
    padding-right: 80px !important;
  }

  /* 发送按钮 */
  .send-btn {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    position: absolute !important;
    bottom: 34px !important;
    right: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
  }
  
  .send-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* 标签按钮 */
  .quick-tags {
    flex-direction: row !important;
    align-items: center !important;
    bottom: 12px !important;
  }
  
  .quick-tags .tag {
    font-size: 12px !important;
    padding: 3px 8px !important;
    height: 23px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 聊天模式（发送消息后）样式 */
  .bottom-search {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: none !important;
    z-index: 9999 !important;
  }
  
  .bottom-search .search-bubble {
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 0 32px 0 !important;
    /* 加深渐变边框：玫红 → 橙色 */
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(135deg, rgba(255, 77, 109, 0.7), rgba(255, 150, 113, 0.7)) border-box !important;
    border: 2px solid transparent !important;
    /* 增强外部阴影 */
    box-shadow: 0 -4px 15px rgba(255, 77, 109, 0.25) !important;
    border-radius: 20px 20px 0 0 !important;
  }
  
  /* 开启新对话按钮 - 放在联网搜索旁边 */
  .bottom-search .new-chat-btn.bottom-btn {
    left: auto !important;
    right: 20px !important;
    top: 12px !important;
    bottom: auto !important;
    padding: 4px 12px !important;
    height: 24px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .bottom-search .new-chat-btn.bottom-btn svg {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
    margin-left: 0 !important;
  }

  /* 聊天页内容区 - 不设置独立滚动，使用整体滚动 */
  .chat-area {
    padding: 0 0 160px 0 !important; /* 垂直内边距；水平去掉 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important; /* 允许内部滚动 */
    height: 100vh !important; /* 填充视口，高度固定 */
  }

  /* 让消息气泡宽度根据内容自适应，最大 80% */
  .chat-area .message .message-content {
    width: auto !important;
    max-width: 80% !important;
  }

  /* 调整最后一条消息与输入框间距 */
  .chat-area .message:last-child {
    margin-bottom: 0 !important; /* 重置底部外边距 */
  }

  /* 用户消息气泡贴右侧 */
  .message.user {
    justify-content: flex-end !important;
    padding: 5px 0 !important; /* 移除所有内边距 */
    display: flex !important;
    text-align: right !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  
  .message.user .message-content {
    display: inline-block !important;
    background: linear-gradient(135deg, #FF4D6D, #FF9671) !important;
    border: none !important;
    border-radius: 18px 4px 18px 18px !important;
    padding: 12px 16px !important;
    color: white !important;
    max-width: 98% !important;
    text-align: left !important;
    box-shadow: 0 2px 5px rgba(255, 77, 109, 0.2) !important;
    margin-right: 0 !important; /* 确保完全贴右边 */
  }

  /* AI消息气泡贴左侧 */
  .message.assistant {
    display: flex !important;
    align-items: flex-start !important;
    padding: 5px 0 !important; /* 移除所有内边距 */
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: 2px !important; /* 进一步贴边 */
  }
  
  .message.assistant .avatar {
    width: 36px !important;
    height: 36px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    margin-right: 5px !important; /* 减半左右间距 */
    margin-left: 0 !important; /* 确保头像完全贴左 */
    background: linear-gradient(135deg, #FF4D6D, #FF9671) !important;
    background-image: url('/static/firesai/images/ai.png') !important;
    background-size: cover !important;
    border: 2px solid #FF4D6D !important;
    box-shadow: 0 0 5px rgba(255, 77, 109, 0.3) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }
  
  .message.assistant .message-content {
    color: #333333 !important;
    padding: 8px 0 !important;
    max-width: 98% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  /* 资源卡片样式 - 确保贴边显示、移除外部边框 */
  .resource-card {
    margin: 8px 0 !important;
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important; /* 确保不超出屏幕 */
  }
  
  /* 覆盖任何可能的包装容器 */
  .resource-list,
  .resource-results,
  .api-search-results,
  .api-results,
  .local-results {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .resource-card .card-title {
    font-size: 14px !important;
    padding: 12px !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* 允许标题换行 */
    overflow: hidden !important;
  }
  
  .resource-card .card-actions {
    padding: 10px 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .resource-card .card-actions a,
  .resource-card .card-actions button {
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    background: #f5f5f5 !important;
    color: #666 !important;
    border: none !important;
    margin: 0 3px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  
  /* 资源卡片边框：淡玫红→橙色 / 绿色→蓝色 渐变 */
  .resource-card.local {
    background: linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(135deg, rgba(255,77,109,0.25), rgba(255,150,113,0.25)) border-box !important;
    border: 1px solid transparent !important;
  }

  .resource-card.online {
    background: linear-gradient(#ffffff, #ffffff) padding-box,
                linear-gradient(135deg, rgba(82,196,26,0.25), rgba(24,144,255,0.25)) border-box !important;
    border: 1px solid transparent !important;
  }

  .resource-card a.resource-link {
    color: #1890ff !important;
    text-decoration: none !important;
  }
  
  .resource-card.local a.resource-link {
    color: #FF4D6D !important;
  }
  
  .resource-card.online a.resource-link {
    color: #40a9ff !important;
  }
  
  /* 移除资源卡片和按钮间的分隔线 */
  .api-resource-separator,
  .resource-footer {
    display: none !important;
  }
  
  /* 确保消息内容贴边显示 */
  .message-content {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 移除所有聊天区域内的外边距 */
  .message-content > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 添加底部安全区域边距，兼容全面屏手机 */
  @supports (padding: env(safe-area-inset-bottom)) {
    .search-bubble,
    .bottom-search .search-bubble {
      padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
    }
  }

  /* 让聊天头部、聊天区域以及每条消息占满屏宽 */
  .chat-header,
  .chat-area {
    max-width: 100% !important;
  }

  .chat-area .message {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 仅移动端：移除包裹资源卡片的外层边框/背景 */
  .resource-recommendations {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }

  /* 移除卡片标题左侧竖条 */
  .resource-card .resource-title {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* 首条资源卡片突出背景（与PC保持一致） */
  .resource-list .resource-card.local:first-child {
    background: linear-gradient(135deg,#eccad6 0%, #ffffff 100%) !important;
  }
  .resource-list .resource-card.online:first-child {
    background: linear-gradient(135deg,#b2e5e1 0%, #ffffff 100%) !important;
  }

  /* 恢复卡片底部标签（PC 同步显示） */
  .resource-footer {
    display: flex !important;
  }

  /* 移动端隐藏"查看详情"按钮 */
  .resource-card .resource-link {
    display: none !important;
  }

  /* 缩小标签尺寸 */
  .resource-card .tag {
    font-size: 11px !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
  }
}