/* ===================================
   佳裕农业APP H5版本样式修复
   修复图标重叠、比例协调、语音播报、卫星云图问题
   =================================== */

/* ===================================
   1. 修复TabBar图标重叠问题
   =================================== */
uni-tabbar {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    background: #fff !important;
    height: 60px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

uni-tabbar .uni-tabbar__item {
    padding: 6px 0 !important;
    min-height: 50px !important;
}

uni-tabbar .uni-tabbar__bd {
    padding: 4px 0 !important;
}

uni-tabbar .uni-tabbar__icon {
    margin-top: 0 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

uni-tabbar .uni-tabbar__icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

uni-tabbar .uni-tabbar__label {
    font-size: 11px !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
}

/* 修复tabbar的flex布局 */
uni-tabbar .uni-tabbar {
    display: flex;
    justify-content: space-around;
}

/* ===================================
   2. 修复首页图标和卡片比例
   =================================== */
.page-container[data-v-d83df2c3] {
    font-size: 14px !important;
    -webkit-text-size-adjust: 100%;
}

/* 天气卡片优化 */
.weather-card-v2[data-v-d83df2c3] {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
}

.weather-icon-large[data-v-d83df2c3] {
    font-size: 40px !important;
}

.temp-value[data-v-d83df2c3] {
    font-size: 32px !important;
}

/* 快捷服务图标 */
.service-tile[data-v-d83df2c3] {
    padding: 10px 6px !important;
}

.tile-icon[data-v-d83df2c3] {
    font-size: 22px !important;
}

.tile-icon-wrap[data-v-d83df2c3] {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 6px !important;
}

.tile-name[data-v-d83df2c3] {
    font-size: 12px !important;
}

/* AI模型卡片 */
.ai-logo-circle[data-v-d83df2c3] {
    width: 44px !important;
    height: 44px !important;
}

.ai-logo-icon[data-v-d83df2c3] {
    font-size: 24px !important;
}

.feature-icon-wrap[data-v-d83df2c3] {
    width: 36px !important;
    height: 36px !important;
}

.feature-icon[data-v-d83df2c3] {
    font-size: 18px !important;
}

.feature-name[data-v-d83df2c3] {
    font-size: 11px !important;
}

/* 监测中心节点 */
.node-circle[data-v-d83df2c3] {
    width: 44px !important;
    height: 44px !important;
}

.node-icon[data-v-d83df2c3] {
    font-size: 20px !important;
}

.node-label[data-v-d83df2c3] {
    font-size: 12px !important;
}

.radar-center[data-v-d83df2c3] {
    width: 56px !important;
    height: 56px !important;
}

.center-crop-icon[data-v-d83df2c3] {
    font-size: 26px !important;
}

.center-label[data-v-d83df2c3] {
    font-size: 10px !important;
}

/* 农场信息卡片 */
.farm-icon[data-v-d83df2c3] {
    font-size: 20px !important;
}

.farm-name[data-v-d83df2c3] {
    font-size: 16px !important;
}

.stat-number[data-v-d83df2c3] {
    font-size: 20px !important;
}

.stat-unit[data-v-d83df2c3] {
    font-size: 12px !important;
}

/* 预警面板 */
.alert-type-badge[data-v-d83df2c3] {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
}

.alert-field[data-v-d83df2c3],
.alert-problem[data-v-d83df2c3] {
    font-size: 13px !important;
}

/* ===================================
   3. 修复动态天气/卫星云图页面
   =================================== */
.page-container[data-v-26dbfd8b] {
    font-size: 14px !important;
}

/* 卫星云图容器 */
.cloud-map-container[data-v-26dbfd8b] {
    height: 200px !important;
    background: #e8f5e9 !important;
}

/* 禁用地图组件时显示提示 */
.typhoon-map[data-v-26dbfd8b],
uni-map {
    display: none !important;
}

/* 当地图不可用时显示占位符 */
.map-container[data-v-26dbfd8b]:before {
    content: "🗺️ 地图功能在H5环境下需要更高版本API支持";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* ===================================
   4. 修复AI助手(丰收小子)语音功能
   =================================== */
.page-container[data-v-2d59def7] {
    font-size: 14px !important;
}

.chat-avatar[data-v-2d59def7] {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
}

.chat-bubble[data-v-2d59def7] {
    max-width: 75% !important;
    padding: 10px 14px !important;
}

.chat-text[data-v-2d59def7] {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.voice-btn[data-v-2d59def7] {
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
}

.send-btn[data-v-2d59def7] {
    width: 40px !important;
    height: 40px !important;
}

.quick-item[data-v-2d59def7] {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* ===================================
   5. 通用样式修复
   =================================== */
body {
    font-size: 14px !important;
    -webkit-text-size-adjust: 100%;
}

uni-page-body {
    font-size: 14px !important;
}

/* 统一emoji图标大小 */
[class*="icon"]:not(img) {
    font-size: inherit;
}

/* 修复flex布局 */
.flex, .flex-center, .flex-between {
    flex-shrink: 0;
}

/* 文字溢出处理 */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================================
   6. 响应式优化
   =================================== */
@media screen and (max-width: 375px) {
    .service-tile {
        padding: 8px 4px !important;
    }
    
    .tile-name {
        font-size: 11px !important;
    }
    
    .tile-icon {
        font-size: 20px !important;
    }
}

/* ===================================
   7. 隐藏不支持的功能提示
   =================================== */
.h5-unsupported-hint {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-left: 3px solid #ff9800;
    padding: 12px 16px;
    margin: 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #e65100;
}

.h5-unsupported-hint::before {
    content: "💡 ";
}

/* ===================================
   8. Tabbar替换图标显示
   =================================== */
/* 修复emoji在tabbar中的显示 */
uni-tabbar .uni-tabbar__icon {
    line-height: 1;
}

uni-tabbar .uni-tabbar__icon::before {
    font-size: 24px;
}

/* ===================================
   额外修复：TabBar图标
   =================================== */

/* 修复uni-tabbar */
uni-tabbar {
    display: flex !important;
    height: 56px !important;
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

uni-tabbar .uni-tabbar__item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    position: relative !important;
}

uni-tabbar .uni-tabbar__bd {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

uni-tabbar .uni-tabbar__icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

uni-tabbar .uni-tabbar__icon img,
uni-tabbar .uni-tabbar__icon uni-image img {
    width: 24px !important;
    height: 24px !important;
}

uni-tabbar .uni-tabbar__label {
    font-size: 10px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
    color: #999 !important;
}

/* 修复page-container中的tab-bar（如果有自定义tabbar） */
.tab-bar[data-v-d83df2c3] {
    height: 56px !important;
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.tab-item[data-v-d83df2c3] {
    padding: 4px 8px !important;
}

.tab-icon[data-v-d83df2c3] {
    font-size: 22px !important;
    line-height: 1 !important;
}

.tab-label[data-v-d83df2c3] {
    font-size: 11px !important;
}

/* ===================================
   修复天气卡片中的图标
   =================================== */
.weather-icon-large[data-v-d83df2c3] {
    font-size: 42px !important;
    line-height: 1 !important;
}

/* ===================================
   修复服务卡片中的图标
   =================================== */
.tile-icon[data-v-d83df2c3] {
    font-size: 22px !important;
    line-height: 1 !important;
}

/* ===================================
   修复监测中心图标
   =================================== */
.node-icon[data-v-d83df2c3] {
    font-size: 18px !important;
    line-height: 1 !important;
}

.center-crop-icon[data-v-d83df2c3] {
    font-size: 24px !important;
    line-height: 1 !important;
}

/* ===================================
   修复动态天气页面TabBar
   =================================== */
.tab-bar[data-v-26dbfd8b] {
    padding: 6px !important;
}

.tab-item[data-v-26dbfd8b] {
    padding: 6px 0 !important;
}

.tab-icon[data-v-26dbfd8b] {
    font-size: 22px !important;
    line-height: 1 !important;
}

.tab-label[data-v-26dbfd8b] {
    font-size: 12px !important;
}

/* 修复丰收小子AI页面输入框和按钮 */
.ai-chat-page, .ai-page, [class*="ai-index"] {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 确保输入区域可见 */
.ai-input-area, .chat-input-area, [class*="input-area"],
.ai-footer, .chat-footer, [class*="chat-footer"] {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    padding: 10px 15px !important;
    border-top: 1px solid #eee !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 100 !important;
}

/* 输入框 */
.ai-input-area input, .chat-input-area input,
[class*="chat-input"] input, [class*="message-input"] {
    flex: 1 !important;
    height: 40px !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    display: block !important;
    visibility: visible !important;
}

/* 发送按钮 */
.ai-send-btn, .send-btn, [class*="send-btn"], button[class*="send"] {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #2E7D32 !important;
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

/* 语音按钮 */
.ai-voice-btn, .voice-btn, [class*="voice-btn"], button[class*="voice"], .mic-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #4CAF50 !important;
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* 消息列表区域 */
.ai-messages, .chat-messages, [class*="messages-list"] {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 15px !important;
    padding-bottom: 80px !important;
}

/* 快捷问题 */
.quick-questions, [class*="quick-question"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
}

.quick-questions span, [class*="question-item"] {
    background: #E8F5E9 !important;
    color: #2E7D32 !important;
    padding: 8px 12px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    cursor: pointer !important;
}