/*
 * DeepAIChat 论坛 — 手机端适配补丁（2026-11-02）
 * 大部分规则只在 768px 以下生效；文件开头的"通用修正"桌面和手机都生效。由 index.html 在主样式之后引入。
 * 前端源码不在服务器上，这里按打包后的类名覆盖；如果以后重新打包，
 * 记得在新的 index.html 里保留 <link rel="stylesheet" href="/mobile.css">。
 */

/* ---------- 通用修正（桌面 + 手机） ---------- */

/* 首页群聊：消息区单独加一个固定边框，消息只在框内滚动，不再顶到标题下面 */
.chat-card .chat-head { padding-bottom: 10px; margin-bottom: 0 !important; border-bottom: 1px solid var(--forum-border); }
.chat-card .chat-box .messages { margin: 10px 0; padding: 10px 6px; border: 1px solid var(--forum-border); border-radius: 10px;
  background: var(--el-fill-color-lighter); overscroll-behavior: contain; }
.chat-card .chat-box .messages .message:not(.mine) .bubble { background: #fff; box-shadow: 0 0 0 1px var(--forum-border); }
.chat-card .chat-box .composer { padding-top: 0; border-top: 0; }

@media (max-width: 768px) {
  /* ---------- 全局 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
  .page-container { padding: 12px; }
  .card { padding: 16px; border-radius: 14px; }

  /* iOS Safari 输入框字号小于 16px 时聚焦会自动放大页面 */
  input, textarea, .el-input__inner, .el-textarea__inner { font-size: 16px !important; }

  /* 表单：标签放在输入框上方，控件占满整行 */
  .el-form:not(.el-form--inline) .el-form-item--label-right,
  .el-form:not(.el-form--inline) .el-form-item--label-left { flex-direction: column; align-items: stretch; }
  .el-form:not(.el-form--inline) .el-form-item--label-right > .el-form-item__label,
  .el-form:not(.el-form--inline) .el-form-item--label-left > .el-form-item__label {
    width: auto !important; justify-content: flex-start; height: auto; line-height: 1.5; margin-bottom: 6px; padding-right: 0;
  }
  .el-form:not(.el-form--inline) .el-form-item__content { margin-left: 0 !important; }
  .el-form .el-select, .el-form .el-input, .el-form .el-input-number, .el-form .el-date-editor { width: 100% !important; max-width: 100%; }

  /* 弹窗、确认框、抽屉 */
  .el-dialog { width: calc(100vw - 24px) !important; --el-dialog-width: calc(100vw - 24px) !important; margin: 6vh auto !important; border-radius: 14px; }
  .el-dialog__body { max-height: 70vh; overflow-y: auto; }
  .el-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .el-dialog__footer .el-button + .el-button { margin-left: 0; }
  .el-message-box { width: calc(100vw - 32px) !important; max-width: 420px; border-radius: 14px; }
  .el-drawer.ltr, .el-drawer.rtl { width: min(300px, 84vw) !important; }
  .el-message { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }

  /* 分页：去掉每页条数和跳页，允许换行 */
  .el-pagination { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .el-pagination .el-pagination__sizes, .el-pagination .el-pagination__jump { display: none !important; }

  /* 标签页：横向滑动 */
  .el-tabs__item { padding: 0 14px !important; }
  .el-tabs__item.is-top:nth-child(2), .el-tabs__item.is-top:last-child { padding: 0 14px !important; }

  /* 按钮组（如通知分类）：一行放不下时横向滑动，而不是折成两行 */
  .el-radio-group { flex-wrap: nowrap !important; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .el-radio-group::-webkit-scrollbar { display: none; }
  .el-radio-group > .el-radio-button { flex: none; }

  /* 签到宠物：缩小并贴边，避免挡住内容 */
  .checkin-pet { right: 6px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .checkin-pet .pet { width: 50px !important; height: 50px !important; }
  /* 发帖页和聊天页底部有输入区，宠物会挡住按钮，直接隐藏 */
  body:has(.md-editor) .checkin-pet, body:has(.chat-page) .checkin-pet { display: none !important; }
  .checkin-pet .panel { width: min(260px, calc(100vw - 24px)); }

  /* 顶栏与页脚 */
  .layout > .header .header-inner { height: 54px; }
  .layout > .header .post-btn { height: 34px; }
  .footer-inner { padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); font-size: 12px; gap: 6px; text-align: center; }

  /* ---------- 帖子正文（Markdown） ---------- */
  .markdown-body { overflow-wrap: anywhere; font-size: 15px; line-height: 1.75; }
  .markdown-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .markdown-body th, .markdown-body td { padding: 6px 10px; white-space: nowrap; }
  .markdown-body pre { padding: 12px 14px; font-size: 12.5px; border-radius: 8px; }
  .markdown-body img, .markdown-body video { max-width: 100%; height: auto; }
  .markdown-body h1 { font-size: 1.35em; }
  .markdown-body h2 { font-size: 1.2em; }

  /* ---------- 首页 ---------- */
  .home .toolbar { gap: 8px; }
  .home .chat-box { height: 300px !important; }

  /* ---------- 帖子列表项 ---------- */
  .post-item, .post-list-item { padding-left: 0; padding-right: 0; }

  /* ---------- 帖子详情 ---------- */
  .post .title { font-size: 21px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  .post .meta { gap: 8px 12px !important; }
  .post .toolbar { gap: 10px !important; }
  .post .toolbar .ops { flex-wrap: wrap; }
  .replies { padding-left: 10px !important; }

  /* ---------- 发帖 / 编辑 ---------- */
  .board-select { width: 100% !important; }
  .md-editor { height: 380px !important; }
  .md-editor-toolbar-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .md-editor-toolbar-wrapper::-webkit-scrollbar { display: none; }
  .md-editor-toolbar { flex-wrap: nowrap !important; width: max-content; }
  .md-editor-toolbar-left, .md-editor-toolbar-right { flex-wrap: nowrap !important; }
  .card > .el-form > .actions { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 94%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--forum-border);
    border-radius: 0 0 14px 14px; display: flex; gap: 8px; }
  .card > .el-form > .actions .el-button { flex: 1; margin-left: 0 !important; }

  /* ---------- 个人主页 ---------- */
  .profile { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 14px 14px !important; align-items: center; }
  .profile > .el-avatar { width: 64px !important; height: 64px !important; font-size: 22px; }
  .profile > .info .name { font-size: 18px; }
  .profile > .stats { grid-column: 1 / -1; justify-content: space-around; gap: 0 !important; padding: 12px 0 2px; border-top: 1px solid var(--forum-border); }
  .profile > .ops { grid-column: 1 / -1; display: flex; gap: 8px; }
  .profile > .ops .el-button { flex: 1; margin-left: 0 !important; }
  .users { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ---------- 设置页 ---------- */
  .avatar-row { flex-wrap: wrap; gap: 12px; }

  /* ---------- 聊天 ---------- */
  .chat-panel .content { max-width: 82%; }
  /* iOS 的 100vh 包含地址栏，输入框会被挤到屏幕外，改用动态视口高度 */
  .chat-page { height: calc(100vh - 54px - 24px) !important; height: calc(100dvh - 54px - 24px) !important; }

  /* ---------- 登录注册等独立页 ---------- */
  .auth-card, .blank-card { width: 100% !important; max-width: 420px; }

  /* =====================================================
   * 管理后台：侧边栏改成顶部可横向滑动的菜单条
   * ===================================================== */
  .admin-layout { flex-direction: column !important; min-height: 100vh; }
  .admin-layout > .el-container.is-vertical { display: contents; }

  .admin-layout .el-header.header { order: 1; position: sticky; top: 0; z-index: 30; height: 52px; padding: 0 8px 0 4px; gap: 6px;
    background: rgb(255 255 255 / 94%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .admin-layout .el-header.header > .el-tag { display: none; }
  .admin-layout .el-header.header .who { font-size: 13px; white-space: nowrap; }

  .admin-layout > .aside { order: 2; width: 100% !important; position: sticky; top: 52px; z-index: 29; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--forum-border); background: rgb(255 255 255 / 96%); }
  .admin-layout > .aside .brand { display: none; }
  .admin-layout > .aside .menu { display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 12px !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .admin-layout > .aside .menu::-webkit-scrollbar { display: none; }
  .admin-layout > .aside .menu .el-menu-item { flex: none; height: 34px !important; line-height: 34px !important; margin: 0 !important;
    padding: 0 14px !important; border-radius: 999px !important; font-size: 13px; background: var(--el-fill-color-light); }
  .admin-layout > .aside .menu .el-menu-item .el-icon { width: auto; margin-right: 4px; font-size: 15px; }
  .admin-layout > .aside .menu .el-menu-item.is-active { background: var(--el-color-primary) !important; color: #fff !important; }
  .admin-layout > .aside .menu .menu-badge { margin-left: 4px; }

  .admin-layout .el-main.main { order: 3; padding: 12px !important; overflow: visible; }
  .admin-layout .el-main .el-card { border-radius: 12px; }
  .admin-layout .el-main .el-card__header { padding: 12px 14px; }
  .admin-layout .el-main .el-card__header > div, .admin-layout .el-main .el-card__header > span { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .admin-layout .el-main .el-card__body { padding: 12px 14px; }

  /* 筛选区：两列网格，搜索框占满一行 */
  .admin-layout .filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-bottom: 12px; }
  .admin-layout .filters > * { width: 100% !important; min-width: 0; margin: 0 !important; }
  .admin-layout .filters > .el-input:first-child { grid-column: 1 / -1; }
  .admin-layout .filters > .el-checkbox { grid-column: 1 / -1; height: 28px; }
  .admin-layout .filters > .el-date-editor { grid-column: 1 / -1; }

  /* 表格：在卡片内部横向滑动，页面本身不再左右晃 */
  .admin-layout .el-table { font-size: 13px; }
  .admin-layout .el-table .cell { padding: 0 8px; }
  .admin-layout .el-table__body-wrapper .el-scrollbar__bar.is-horizontal { height: 4px; }

  /* 数据概览 */
  .admin-layout .cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .admin-layout .cards .stat .el-card__body { padding: 12px 14px; }
  .admin-layout .cards .value { font-size: 22px; }
  .admin-layout .block { margin-top: 12px !important; }
  .admin-layout .legend { flex-wrap: wrap; gap: 6px 14px !important; }
}

/* 更窄的屏幕（iPhone SE 等） */
@media (max-width: 380px) {
  .page-container { padding: 10px; }
  .card { padding: 14px; }
  .layout > .header .post-btn span { font-size: 13px; }
}