/* ===================== 移动端专用样式 ===================== */
/* 解决移动端访问与触控体验问题：
   - 安全区域适配（刘海屏、底部 Home 条）
   - 触控目标 ≥44px（iOS HIG / Material Design 推荐）
   - 100dvh 替代 100vh，避免 URL 栏导致的视口跳动
   - 禁用文字长按选中菜单（按钮/图标上）
   - 优化滚动行为（momentum scrolling）
   - 触摸反馈（active 态高亮）
   - 输入框聚焦时自动滚动可见
   - PWA 桌面模式下的独立窗口样式
*/

/* ---------- 全局基础 ---------- */
* {
  -webkit-tap-highlight-color: rgba(154, 123, 31, 0.15);
  -webkit-touch-callout: none; /* 禁用长按菜单 */
}

html {
  /* iOS Safari 安全区适配 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* 平滑滚动 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  /* 100dvh 解决移动端 100vh 跳变问题 */
  min-height: 100vh;
  min-height: 100dvh;
  /* 防止 iOS Safari 缩放后的字体放大 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 字体渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 防止横向滚动 */
  overflow-x: hidden;
  /* 触摸操作优化 */
  touch-action: manipulation;
}

/* ---------- 触控目标优化（按钮 ≥44px） ---------- */
button,
.btn-divine,
.btn-reset,
.btn-save,
.btn-history,
.btn-feedback,
.btn-export-report,
.quick-btn,
.floating-history-btn,
.settings-btn-float,
.cd-entry-btn,
.q-tag,
.chat-sugg,
.chat-sugg-key,
.chat-sugg-topic,
.chat-sugg-new,
.chat-smart-sugg,
.follow-up-link {
  /* 最小触控尺寸 44×44px */
  min-height: 44px;
  min-width: 44px;
  /* 触摸反馈 */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* 过渡动画 */
  transition: transform 0.1s ease-out, background-color 0.15s, box-shadow 0.15s;
}

/* 按钮按下反馈 */
button:active,
.btn-divine:active,
.btn-save:active,
.btn-history:active,
.quick-btn:active,
.q-tag:active,
.floating-history-btn:active,
.settings-btn-float:active,
.cd-entry-btn:active,
.chat-sugg:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* ---------- 输入框聚焦优化 ---------- */
input,
textarea,
select {
  /* 字号 ≥16px 防止 iOS Safari 自动放大 */
  font-size: 16px;
  /* 聚焦时高亮 */
  -webkit-appearance: none;
  appearance: none;
}

/* 输入框聚焦时自动滚动到可见区域 */
input:focus,
textarea:focus,
select:focus {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 80px;
}

/* ---------- 防止横向溢出 ---------- */
.container,
.panel,
.advanced-panel,
.advanced-content,
.chat-area,
.chat-messages,
.history-modal,
.feedback-modal,
.settings-modal,
.cd-history-modal {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 表格横向滚动 */
.pan-chart,
.pan-chart-enhanced,
table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 长按禁用图片保存 ---------- */
img,
.coin,
.hexagram-display {
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- 链接颜色与点击区域 ---------- */
a {
  min-height: 44px;
  display: inline-block;
}

/* ---------- 滚动条隐藏（移动端原生体验） ---------- */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- 平板优化（768px ~ 1024px） ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
  }
  .divination-area {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .coin {
    width: 70px;
    height: 70px;
  }
  .coins-container {
    gap: 28px;
  }
}

/* ---------- 大屏手机优化（414px ~ 768px） ---------- */
@media (min-width: 415px) and (max-width: 768px) {
  .container {
    padding: 0 12px;
  }
  .panel {
    padding: 16px;
  }
  .title-main {
    font-size: 1.7rem;
  }
  .coin {
    width: 64px;
    height: 64px;
  }
}

/* ---------- 小屏手机优化（≤414px） ---------- */
@media (max-width: 414px) {
  .title-main {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
  }
  .title-sub {
    font-size: 0.8rem;
    letter-spacing: 0.3em;
  }
  .title-desc {
    font-size: 0.78rem;
    line-height: 1.6;
  }
  .container {
    padding: 0 8px;
  }
  .panel {
    padding: 12px;
    border-radius: 6px;
  }
  .coin {
    width: 54px;
    height: 54px;
    font-size: 1.1rem;
  }
  .coins-container {
    gap: 16px;
    margin: 16px 0;
  }
  .btn-divine {
    font-size: 1.1rem;
    padding: 12px 36px;
    min-height: 48px;
  }
  .quick-toolbar {
    gap: 4px;
    padding: 4px;
  }
  .quick-btn {
    font-size: 0.72rem;
    padding: 6px 10px;
    min-height: 36px;
  }
  /* 浮动按钮缩小到 40px，但保持 ≥40px 触控目标 */
  .floating-history-btn,
  .settings-btn-float,
  .cd-entry-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  /* 排盘表格字号缩小 */
  .pan-chart table {
    font-size: 0.72rem;
  }
  .pan-chart th,
  .pan-chart td {
    padding: 4px 6px;
  }
}

/* ---------- 超小屏优化（≤360px） ---------- */
@media (max-width: 360px) {
  .title-main {
    font-size: 1.25rem;
  }
  .coin {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
  .coins-container {
    gap: 12px;
  }
  .quick-btn {
    font-size: 0.68rem;
    padding: 5px 8px;
  }
  .q-tag {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
}

/* ---------- 横屏模式优化 ---------- */
@media (max-width: 900px) and (orientation: landscape) {
  header {
    padding: 8px 0;
  }
  .title-main {
    font-size: 1.3rem;
  }
  .title-desc {
    display: none;
  }
  .bagua-deco {
    margin-bottom: 4px;
  }
  .container {
    padding: 0 8px;
  }
  .panel {
    padding: 10px;
  }
  /* 横屏时浮动按钮移到左下，避免遮挡内容 */
  .floating-history-btn {
    right: auto;
    left: 12px;
    bottom: 12px;
  }
  .settings-btn-float {
    right: auto;
    left: 12px;
    bottom: 60px;
  }
  .cd-entry-wrap {
    right: auto;
    left: 12px;
    bottom: 108px;
  }
  .floating-countdown {
    right: 0;
    left: auto;
    bottom: 48px;
    max-width: 200px;
  }
}

/* ---------- 深色模式适配 ---------- */
@media (prefers-color-scheme: dark) {
  html[data-theme="light"] {
    /* 保持浅色主题，但允许 status bar 适配深色 */
  }
}

/* ---------- PWA 桌面模式（display: standalone） ---------- */
@media (display-mode: standalone) {
  body {
    /* PWA 应用模式下的用户选择优化 */
    user-select: none;
  }
  /* 允许输入框选择文本 */
  input,
  textarea {
    user-select: text;
  }
  /* 隐藏桌面端的 hover 效果，使用 active 替代 */
  .floating-history-btn:hover,
  .settings-btn-float:hover,
  .cd-entry-btn:hover {
    transform: none;
  }
}

/* ---------- 动画降级（尊重用户偏好） ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 大字体模式（用户系统设置） ---------- */
@media (min-resolution: 2dppx) and (min-width: 768px) {
  body {
    font-size: 1rem;
  }
}

/* ---------- 移动端固定底栏布局（防键盘遮挡） ---------- */
body:has(.chat-input-area:focus-within) {
  /* 当聊天输入框聚焦时，调整布局 */
  scroll-padding-bottom: 300px;
}

/* ---------- iOS Safari 单独优化 ---------- */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari 专用 */
  body {
    /* 修复 iOS 100vh 问题 */
    height: 100%;
  }
  .chat-messages {
    /* iOS 滚动惯性 */
    -webkit-overflow-scrolling: touch;
    /* 修复 iOS 滚动穿透 */
    overscroll-behavior: contain;
  }
  .history-modal,
  .feedback-modal,
  .settings-modal,
  .cd-history-modal {
    /* 修复 iOS 模态框滚动穿透 */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* iOS 输入框聚焦固定位置 */
  input,
  textarea {
    /* 防止 iOS 聚焦时页面滚动 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* ---------- Android Chrome 优化 ---------- */
@supports not (-webkit-touch-callout: none) {
  /* Android 设备 */
  body {
    /* Android Chrome 100vh 修复 */
    height: auto;
  }
  /* 修复 Android 输入框键盘遮挡 */
  .chat-input-area {
    position: sticky;
    bottom: 0;
  }
}

/* ---------- 触摸手势反馈（振动 API） ---------- */
@media (hover: none) and (pointer: coarse) {
  /* 触摸设备（手机/平板）专用 */
  button:active,
  .btn-divine:active,
  .q-tag:active {
    /* 触觉反馈通过 JS 触发 navigator.vibrate(10) */
    transform: scale(0.95);
  }
  /* 禁用 hover 状态 */
  *:hover {
    transition: none;
  }
}

/* ---------- 打印优化 ---------- */
@media print {
  .floating-history-btn,
  .settings-btn-float,
  .cd-entry-wrap,
  .floating-countdown,
  .chat-area,
  .quick-toolbar,
  .action-bar {
    display: none !important;
  }
  body {
    background: white;
    color: black;
  }
}