/* ==========================================================================
   苹果端输入框遮挡问题修复
   ========================================================================== */

/**
 * 专门针对苹果端输入框被浏览器键盘遮挡的修复方案
 * 解决Safari和iOS设备上输入框被键盘遮挡、缩小等问题
 */

/* CSS变量定义 */
:root {
    --vh: 1vh;
    --keyboard-height: 0px;
    --input-offset: 0px;
}

/* ==========================================================================
   基础修复 - 防止输入框缩小和遮挡
   ========================================================================== */

/* 苹果设备输入框基础修复 */
.ios-device #text,
.safari-browser #text {
    /* 关键：强制16px字体防止iOS自动缩放 */
    font-size: 16px !important;
    
    /* 确保最小高度，防止被压缩 */
    min-height: 44px !important;
    max-height: 120px !important;
    
    /* 强制显示属性 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* 布局属性 */
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* 防止iOS缩放的CSS属性 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    
    /* 触摸优化 */
    -webkit-tap-highlight-color: rgba(7, 193, 96, 0.1) !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    
    /* 滚动优化 */
    -webkit-overflow-scrolling: touch !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* 输入框容器修复 */
.ios-device #input,
.safari-browser #input {
    /* 关键：固定定位防止被键盘遮挡 */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    
    /* 确保在键盘之上 */
    z-index: 1001 !important;
    
    /* 背景和边框 */
    background: #fff !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1) !important;
    
    /* 布局 */
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    
    /* 防止缩放 */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* ==========================================================================
   键盘打开状态的特殊处理
   ========================================================================== */

/* 键盘打开时的输入框状态 */
body.keyboard-open.ios-device #input,
body.keyboard-open.safari-browser #input {
    /* 确保固定定位 */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1002 !important; /* 提高z-index确保在最上层 */
    
    /* 调整内边距适应键盘 */
    padding: 12px 16px !important;
    
    /* 增强边框和阴影 */
    border-top: 2px solid var(--primary-color) !important;
    box-shadow: 0 -2px 8px rgba(7, 193, 96, 0.2) !important;
}

/* 键盘打开时的输入框状态 */
body.keyboard-open.ios-device #text,
body.keyboard-open.safari-browser #text {
    /* 强制字体大小防止缩小 */
    font-size: 16px !important;
    
    /* 确保最小高度 */
    min-height: 44px !important;
    max-height: 100px !important; /* 键盘打开时限制最大高度 */
    
    /* 调整内边距 */
    padding: 10px 12px !important;
    
    /* 增强焦点样式 */
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.15) !important;
    
    /* 确保背景色 */
    background-color: #fff !important;
    
    /* 防止iOS的各种缩放 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}

/* ==========================================================================
   焦点状态的特殊处理
   ========================================================================== */

/* 输入框获得焦点时的处理 */
.ios-device #text:focus,
.safari-browser #text:focus {
    /* 关键：强制16px字体，防止iOS缩放 */
    font-size: 16px !important;
    
    /* 确保输入框可见 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* 增强焦点样式 */
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.15) !important;
    outline: none !important;
    
    /* 确保背景色 */
    background-color: #fff !important;
    
    /* 防止iOS的各种缩放和调整 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    
    /* 触摸反馈 */
    -webkit-tap-highlight-color: rgba(7, 193, 96, 0.1) !important;
}

/* ==========================================================================
   工具栏和按钮的修复
   ========================================================================== */

/* 工具按钮修复 */
body.keyboard-open.ios-device .tool-btn,
body.keyboard-open.safari-browser .tool-btn {
    /* 确保最小触摸目标 */
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    
    /* 防止缩放 */
    font-size: 18px !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}

/* 发送按钮修复 */
body.keyboard-open.ios-device #sentBtn,
body.keyboard-open.safari-browser #sentBtn {
    /* 确保最小触摸目标 */
    height: 44px !important;
    min-height: 44px !important;
    
    /* 防止缩放 */
    font-size: 14px !important;
    padding: 0 15px !important;
    
    /* 确保可见性 */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   消息区域调整
   ========================================================================== */

/* 键盘打开时调整消息区域 */
body.keyboard-open.ios-device #msg,
body.keyboard-open.safari-browser #msg {
    /* 调整底部边距，避免被输入框遮挡 */
    padding-bottom: 120px !important;
    margin-bottom: 0 !important;
    
    /* 确保滚动正常 */
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    
    /* iOS特殊处理：确保内容不被键盘遮挡 */
    height: calc(100vh - 120px) !important;
    height: calc(var(--vh, 1vh) * 100 - 120px) !important;
}

/* iOS键盘打开时的视口调整 */
body.keyboard-open.ios-device,
body.keyboard-open.safari-browser {
    /* 防止页面滚动到奇怪的位置 */
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    overflow: hidden !important;
}

/* iOS键盘打开时主界面调整 */
body.keyboard-open.ios-device #main,
body.keyboard-open.safari-browser #main {
    /* 调整主界面高度适应键盘 */
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    overflow: hidden !important;
}

/* iOS键盘打开时右侧区域调整 */
body.keyboard-open.ios-device #right,
body.keyboard-open.safari-browser #right {
    /* 调整右侧区域高度 */
    height: calc(100vh - 80px) !important;
    height: calc(var(--vh, 1vh) * 100 - 80px) !important;
    padding-bottom: 80px !important;
}

/* 动态键盘高度调整 */
body.keyboard-open.ios-device #input,
body.keyboard-open.safari-browser #input {
    /* 根据键盘高度动态调整 */
    bottom: var(--keyboard-height, 0px) !important;
    padding-bottom: calc(16px + var(--input-offset, 0px)) !important;
}

/* 动态消息区域调整 */
body.keyboard-open.ios-device #msg,
body.keyboard-open.safari-browser #msg {
    /* 根据键盘高度动态调整底部间距 */
    padding-bottom: calc(120px + var(--keyboard-height, 0px) + var(--input-offset, 0px)) !important;
    height: calc(100vh - 120px - var(--keyboard-height, 0px)) !important;
    height: calc(var(--vh, 1vh) * 100 - 120px - var(--keyboard-height, 0px)) !important;
}

/* iOS特殊视口修复 */
@supports (-webkit-touch-callout: none) {
    /* 仅在iOS设备上生效 */
    .ios-device body,
    .safari-browser body {
        /* 防止iOS Safari的缩放和跳动 */
        position: fixed;
        width: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }
    
    /* iOS键盘打开时的特殊处理 */
    body.keyboard-open.ios-device,
    body.keyboard-open.safari-browser {
        /* 保持固定定位防止跳动 */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--vh, 1vh) * 100 !important;
    }
}

/* 小屏幕设备特殊处理 */
@media screen and (max-width: 375px) {
    body.keyboard-open.ios-device #input,
    body.keyboard-open.safari-browser #input {
        /* 小屏幕时减少内边距 */
        padding: 8px 12px !important;
        padding-bottom: calc(8px + var(--input-offset, 0px)) !important;
    }
    
    body.keyboard-open.ios-device #msg,
    body.keyboard-open.safari-browser #msg {
        /* 小屏幕时调整间距 */
        padding-bottom: calc(100px + var(--keyboard-height, 0px) + var(--input-offset, 0px)) !important;
    }
}

/* ==========================================================================
   视口和布局修复
   ========================================================================== */

/* iOS设备视口修复 */
.ios-device body,
.safari-browser body {
    /* 修复iOS Safari的100vh问题 */
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    
    /* 防止页面缩放 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    
    /* 触摸优化 */
    -webkit-overflow-scrolling: touch !important;
    touch-action: manipulation !important;
}

/* 主界面修复 */
.ios-device #main,
.safari-browser #main {
    /* 确保主界面使用正确的视口高度 */
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    
    /* 防止布局问题 */
    position: relative !important;
    overflow: hidden !important;
}

/* ==========================================================================
   占位符修复
   ========================================================================== */

/* 输入框占位符修复 */
.ios-device #text::placeholder,
.safari-browser #text::placeholder {
    /* 确保占位符字体大小 */
    font-size: 16px !important;
    
    /* 修复iOS Safari占位符透明度问题 */
    opacity: 1 !important;
    -webkit-opacity: 1 !important;
    
    /* 占位符颜色 */
    color: #999 !important;
}

/* ==========================================================================
   滚动条优化
   ========================================================================== */

/* 输入框滚动条优化 */
.ios-device #text::-webkit-scrollbar,
.safari-browser #text::-webkit-scrollbar {
    width: 6px !important;
}

.ios-device #text::-webkit-scrollbar-track,
.safari-browser #text::-webkit-scrollbar-track {
    background: transparent !important;
}

.ios-device #text::-webkit-scrollbar-thumb,
.safari-browser #text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 3px !important;
}

/* ==========================================================================
   特殊情况处理
   ========================================================================== */

/* 横屏模式特殊处理 */
@media screen and (orientation: landscape) {
    .ios-device #input,
    .safari-browser #input {
        /* 横屏时调整内边距 */
        padding: 8px 16px !important;
    }
    
    .ios-device #text,
    .safari-browser #text {
        /* 横屏时限制高度 */
        max-height: 80px !important;
        min-height: 36px !important;
    }
}

/* 小屏幕设备特殊处理 */
@media screen and (max-width: 375px) {
    .ios-device #input,
    .safari-browser #input {
        /* 小屏幕时减少内边距 */
        padding: 10px 12px !important;
    }
    
    .ios-device #text,
    .safari-browser #text {
        /* 小屏幕时调整字体和高度 */
        font-size: 16px !important; /* 保持16px防止缩放 */
        min-height: 40px !important;
        padding: 8px 10px !important;
    }
}

/* ==========================================================================
   调试和验证样式
   ========================================================================== */

/* 调试模式 - 可视化输入框边界（开发时启用） */
/*
.ios-device #input,
.safari-browser #input {
    border: 2px solid red !important;
}

.ios-device #text,
.safari-browser #text {
    border: 2px solid blue !important;
}
*/

/* ==========================================================================
   动画和过渡
   ========================================================================== */

/* 平滑过渡 */
.ios-device #text,
.safari-browser #text,
.ios-device #input,
.safari-browser #input {
    /* 确保过渡效果不会影响布局 */
    transition: all 0.2s ease !important;
    -webkit-transition: all 0.2s ease !important;
}

/* 防止动画过程中的闪烁 */
.ios-device #text:focus,
.safari-browser #text:focus {
    /* 禁用动画防止焦点时的闪烁 */
    animation: none !important;
    -webkit-animation: none !important;
}

/* ==========================================================================
   兼容性修复
   ========================================================================== */

/* 旧版本Safari兼容性 */
@supports (-webkit-appearance: none) {
    .ios-device #text,
    .safari-browser #text {
        -webkit-appearance: none !important;
        -webkit-border-radius: 8px !important;
    }
}

/* iOS 13+ 特殊优化 */
@supports (padding: max(0px)) {
    .ios-device #input,
    .safari-browser #input {
        /* 适配iOS 13+的安全区域 */
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
}