/* ============================================================
   mdqp v4.33 全端适配层（手机 / 平板 / 桌面 / 横屏 / PWA / 打印）
   加载顺序：style.css → redesign.css → responsive.css（本文件最后，优先级最高）
   原则：
     ① 只做覆盖，不改原文件结构；状态类（sidebar-collapsed / nav-open /
        chat-page / chat-conv-open / sidebar-peek）一律不碰，避免打断原逻辑。
     ② 断点沿用原有 860px（侧栏转抽屉），新增 640 / 430 / 360 三档细化。
     ③ 用 dvh 优先、vh 兜底，处理移动端浏览器地址栏伸缩导致的 100vh 溢出。
   ============================================================ */

/* ---------- ⓪ 全局基线 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 横向滚动兜底：万一某处内容超宽，不要让整页跟着左右晃。
     用 clip 而不是 hidden —— hidden 会让根元素变成滚动容器，可能打断 sticky 顶栏。 */
  overflow-x: clip;
}
body { overflow-x: clip; }
/* 媒体元素永远不超过容器 */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* 长串（URL / 邀请码 / 无空格英文）在窄屏必然顶破容器，统一给断行策略 */
.markdown-body, .read-content, .card-preview, .notif-item-body, .ticket-body,
.chat-bubble, .err-msg, .notice, .announcement-bar, .draft-bar-actions {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.markdown-body a, .read-content a, .announcement-bar a, .chat-bubble a {
  word-break: break-all;
}

/* 触屏横向滚动统一加惯性，并避免把整页的滚动传导出去 */
.admin-table-wrap, .markdown-body table, .read-content pre, .markdown-body pre {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* 原生控件（滚动条 / 输入框 / 日期选择器 / 自动填充底色）跟随站点主题。
   否则暗色模式下浏览器仍给一条亮白滚动条，手机上尤其刺眼。 */
html:not([data-theme]),
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }

/* ---------- ① 修真实溢出 bug ---------- */

/* 公告条：原来是 display:flex，而内容是「📢 + 内联 markdown + 关闭按钮」直接塞进去的，
   flex 会把每个文本段/内联元素都变成独立 flex item —— 长 URL 撑爆宽度（手机上整页横向滚动），
   粗体标题被压到一行一个字。改成块级 + 关闭按钮绝对定位，两个毛病一起解决。 */
.announcement-bar {
  display: block;
  position: relative;
  padding-right: 42px;
  max-width: 100%;
}
.announcement-bar .markdown-body { display: block; flex: none; min-width: 0; max-width: 100%; }
.announcement-bar .markdown-body > *:first-child { margin-top: 0; }
.announcement-bar .markdown-body > *:last-child { margin-bottom: 0; }
.announcement-close {
  position: absolute; top: 6px; right: 6px;
  margin: 0; padding: 4px 6px; min-width: 28px; min-height: 28px;
  border-radius: 8px; line-height: 1;
}
.announcement-close:hover { background: var(--surface-2); }

/* Toast：长文案（含错误信息/URL）原来不换行、宽度只由内容决定 → 窄屏溢出屏幕 */
.toast {
  max-width: calc(100vw - 28px);
  white-space: normal;
  text-align: center;
  line-height: 1.5;
  border-radius: 14px;
  overflow-wrap: anywhere;
}

/* 新版本提示卡（内联样式写了 top/width/max-height，只能用 !important 盖） */
@media (max-width: 640px) {
  .version-toast {
    top: calc(8px + env(safe-area-inset-top)) !important;
    max-height: 84dvh !important;
    padding: 14px !important;
  }
  .version-toast .vt-content { max-height: 50dvh; }
  .version-toast .vt-acts { align-self: stretch; }
  .version-toast .vt-acts .btn { flex: 1; justify-content: center; min-height: 38px; }
}

/* 通知面板：固定 right:12 + width min(380,100vw-24) 在窄屏贴边，且底部可能被安全区挡住 */
.notif-panel { max-height: min(70dvh, 560px); }

/* 自动修复弹窗：固定 left/bottom 24px，窄屏直接把内容顶出屏幕 */
@media (max-width: 760px) {
  #fixerModal { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; }
  #fixerModal .modal-panel { max-height: calc(100dvh - 90px); }
  #fixerModal .modal-body { padding: 14px; }
}

/* ---------- ② 触控设备：收敛 hover、放大点击目标 ---------- */
@media (hover: none) and (pointer: coarse) {
  /* 触屏没有 hover，卡片上浮效果会「粘住」，关掉 */
  .clip-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .tpl-card:hover, .chat-pick:hover { background: var(--surface); }
  .btn:active, .icon-btn:active, .nav-item:active, .se-node:active { transform: scale(.97); }
  .icon-btn { width: 38px; height: 38px; }
  /* iOS 上 -webkit-tap-highlight 默认蓝框，统一去掉 */
  a, button, .nav-item, .chat-item, .se-node, .ff-item { -webkit-tap-highlight-color: transparent; }
}

/* ---------- ③ 弹窗：手机上改为底部抽屉 ---------- */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  /* #fixerModal 结构特殊（.modal-backdrop + .modal-panel），单独走上面的规则 */
  .modal:not(#fixerModal) {
    width: 100%; max-width: none;
    max-height: 92dvh;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    animation: sheetUp .22s cubic-bezier(.22, .61, .36, 1);
  }
  .modal:not(#fixerModal) > .modal-head {
    flex: none; position: sticky; top: 0; z-index: 3;
    background: var(--surface);
    padding: 14px 16px;
  }
  /* 拖拽提示条（纯装饰） */
  .modal:not(#fixerModal) > .modal-head::before {
    content: ''; position: absolute; top: 6px; left: 50%;
    width: 36px; height: 4px; margin-left: -18px; border-radius: 999px;
    background: var(--border);
  }
  .modal-head h3 { font-size: 15.5px; }
  .modal:not(#fixerModal) > .modal-body {
    flex: 1; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .modal:not(#fixerModal) > .modal-foot {
    flex: none; position: sticky; bottom: 0; z-index: 3;
    background: var(--surface);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  /* 底部按钮拉通，拇指友好 */
  .modal-foot .btn { flex: 1; justify-content: center; min-height: 42px; }
  .modal-close { width: 34px; height: 34px; }
  /* 权限 / 功能开关网格：两列在手机上文字挤成两行，改单列 */
  .ff-grid { grid-template-columns: 1fr; }
  .perm-group { padding: 8px 10px; }
  .ff-item { padding: 9px 10px; }
  /* 聊天弹窗没有 .modal-foot，底部内边距已经在 .modal-body 上兜住 */
  .chat-modal-body, .chat-modal { max-height: 92dvh; }
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- ④ 手机 / 窄屏（≤860：侧栏已转抽屉，这里补细节） ---------- */
@media (max-width: 860px) {
  /* 抽屉：宽度随屏幕、刘海安全区、打开时锁住背景滚动 */
  .sidebar {
    width: min(280px, 84vw);
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body.nav-open { overflow: hidden; }
  .sidebar .nav-item { padding: 12px; }

  .topbar { gap: 10px; }
  .topbar-center { min-width: 0; }
  /* 搜索胶囊在手机上缩成图标，但保持 38px 触控区 */
  .search-trigger { padding: 8px 9px; min-width: 38px; height: 38px; justify-content: center; }
  .menu-toggle, .icon-btn { height: 38px; }

  #app { padding: 14px 14px 8px; }
  main { padding-bottom: 44px; }

  /* 首页 Hero 用流体字号，320~430 屏都不至于顶满 */
  .hero { padding: 20px 0 24px; }
  .hero h1 { font-size: clamp(21px, 7vw, 27px); }
  .hero-sub { font-size: 14px; }
  .hero-stats { font-size: 12.5px; gap: 14px; }

  /* 卡片网格：minmax 加 min() 兜底，超窄屏（<300px）也不会溢出 */
  .clip-grid { grid-template-columns: repeat(auto-fill, minmax(min(282px, 100%), 1fr)); }
  .list-head h2 { font-size: 16px; }
  .clip-title { font-size: 21px; }

  /* 详情页操作行、分享行在窄屏堆叠 */
  .crumb { margin-bottom: 14px; gap: 8px; }
  .crumb-right { gap: 6px; flex-wrap: wrap; }
  .share-row .input { min-width: 0; }
  .gate { margin: 32px auto; padding: 26px 20px; }
  .gate-row { flex-direction: column; }

  /* 编辑器：工具栏按钮放大到能点，输入区降高，动作栏吸顶 */
  .editor-toolbar { padding: 6px; gap: 3px; border-radius: 10px; border-bottom: 1px solid var(--border); }
  .editor-toolbar button { min-width: 34px; height: 34px; padding: 0 9px; font-size: 14px; }
  .title-input { font-size: 17px; }
  .editor-split, .editor-area { min-height: 300px; }
  .editor-area { padding: 14px; font-size: 14px; }
  .preview-pane { padding: 14px; max-height: none; }
  .adv { padding: 10px 12px; }
  /* 「← 取消 / 发布」吸顶，长文档滚到深处也能一键发布 */
  #view-edit .crumb {
    position: sticky; top: 54px; z-index: 16;
    margin: 0 0 12px; padding: 8px 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  #view-edit .crumb-right .btn { min-height: 36px; }

  /* 后台表格：横向滚动 + 首列吸附，滑动时不至于忘了在看谁 */
  .admin-table { min-width: 620px; font-size: 12.5px; }
  .admin-table th, .admin-table td { padding: 9px 10px; }
  .admin-table th:first-child,
  .admin-table td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .admin-table th:first-child { background: var(--surface-2); }
  .admin-table .btn-sm { min-height: 30px; }
  .admin-search { max-width: none; margin-left: 0; }
  .admin-tabs { gap: 6px; }
  .admin-tabs .btn { flex: 1 1 auto; justify-content: center; }

  /* 站点编辑器（qsites 工作台） */
  .se-layout { min-height: calc(100dvh - 140px); }
  .se-side { max-height: 200px; }
  .se-toolbar { flex-wrap: wrap; row-gap: 6px; }
  .se-editor { min-height: 260px; font-size: 12.5px; }
  .se-preview { height: 40%; min-height: 160px; }
  .se-tools .btn-sm { min-height: 32px; }
  .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 45%), 1fr)); }

  /* 聊天：气泡更宽、输入区避开 Home 指示条、头像缩小 */
  .chat-msgs { padding: 12px; gap: 10px; }
  .chat-msg { max-width: 88%; }
  .chat-head { padding: 8px 10px; }
  .chat-head .avatar { width: 34px; height: 34px; }
  .chat-composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .chat-composer .btn-primary { height: 38px; padding: 0 14px; }
  .chat-input { min-height: 38px; max-height: 120px; }
  .chat-sidebar-head { padding: 8px; }
  .chat-item { padding: 10px; }

  /* 个人主页 / 设置 */
  .profile-top { gap: 12px; }
  .profile-edit { gap: 12px; }
  .avatar-preview, .avatar-preview .avatar, .avatar-preview .avatar-emoji { width: 56px; height: 56px; }
  .avatar-preview { flex-basis: 56px; }
  .cp-card-img { max-width: 100%; }
  .cp-stat { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .sec-row { flex-wrap: wrap; gap: 8px 12px; }
  .settings-tabs { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }

  /* 工单 / 站内页 */
  .page-article { max-width: none; }
  .tickets-tools, .tickets-filters { flex-wrap: wrap; }
  .sites-head { flex-wrap: wrap; gap: 8px; }
  .sites-form .input { min-width: 0; flex: 1 1 100%; }

  /* 正文里的表格 / 代码块：手机上收紧一点，横向空间留给内容 */
  .markdown-body table { font-size: 13px; }
  .markdown-body th, .markdown-body td { padding: 6px 9px; }
  .markdown-body pre { padding: 12px; }
  .markdown-body pre code { font-size: 12.5px; }
  .markdown-body blockquote { padding: .3em .8em; }
  .markdown-body ul, .markdown-body ol { padding-left: 1.35em; }

  /* 权益 / 对比表：横向可滑，别硬挤 */
  .tier-table, .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- ⑤ 窄手机（≤430）：单列 + 字号收敛 ---------- */
@media (max-width: 430px) {
  .clip-grid { grid-template-columns: 1fr; }
  .clip-card { padding: 14px; }
  #app { padding: 12px 12px 8px; }
  .topbar { padding: 8px 12px; }
  .hero-jump .btn { width: 100%; justify-content: center; }
  .list-head { margin: 20px 0 12px; }
  .read-article { padding: 22px 14px 90px; }
  .read-content { font-size: 15.5px; }
  .read-title { font-size: 1.6em; }
  .footer { font-size: 12.5px; }
  .tpl-grid { grid-template-columns: 1fr 1fr; }
  .emoji-row .emoji-pick { font-size: 20px; padding: 5px 6px; }
}

/* ---------- ⑥ 超窄（≤360）：顶栏极限压缩 ---------- */
@media (max-width: 360px) {
  .topbar { gap: 6px; padding: 8px 10px; }
  .topbar-actions { gap: 5px; }
  .guest-chip { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #navAuth .btn { padding: 7px 10px; font-size: 13px; }
  .hero h1 { font-size: 20px; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
}

/* ---------- ⑦ iOS 输入框防自动放大（字号 <16px 会被 Safari 强制 zoom） ---------- */
@media (max-width: 640px) {
  .input, input.input, select.input, textarea.input,
  .chat-input, .editor-area, .title-input,
  input[type='text'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], textarea {
    font-size: 16px;
  }
  /* 小号输入框仍保持视觉紧凑，只抬到 16px 的最小可读线 */
  .input-sm { font-size: 16px; padding: 8px 11px; }
}

/* ---------- ⑧ 横屏手机（高度极小） ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 10px 0 16px; }
  .hero h1 { font-size: 20px; }
  .hero-stats { margin-top: 8px; }
  .modal:not(#fixerModal) { max-height: 96dvh; }
  .read-toc { display: none; }        /* 横屏没地方放目录 */
  .chat-composer { padding-bottom: 8px; }
  .sidebar { padding-top: 10px; padding-bottom: 10px; }
  .sidebar .nav-item { padding: 9px 12px; }
}

/* ---------- ⑨ 平板 / 小笔记本（861~1180）：桌面侧栏在但留白收紧 ---------- */
@media (min-width: 861px) and (max-width: 1180px) {
  #app { padding: 18px 20px 8px; }
  .topbar { padding: 10px 20px; }
  .clip-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
  .chat-sidebar { width: 264px; }
  .se-layout { grid-template-columns: 224px minmax(0, 1fr); }
  .read-toc { width: 220px; }
  .admin-table { min-width: 660px; }
}

/* ---------- ⑩ 大屏（≥1600）：内容不无限拉宽，但多给一点横向空间 ---------- */
@media (min-width: 1600px) {
  main { max-width: 1120px; }
  #app { padding: 26px 34px 8px; }
  .read-article { max-width: 820px; }
}

/* ---------- ⑪ PWA / 刘海屏安全区 ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .toast { bottom: calc(28px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  /* 横屏时刘海在左右两侧，内容要躲开 */
  #app {
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  .topbar {
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  @media (min-width: 861px) {
    #app {
      padding-left: calc(26px + env(safe-area-inset-left));
      padding-right: calc(26px + env(safe-area-inset-right));
    }
    .topbar {
      padding-left: calc(26px + env(safe-area-inset-left));
      padding-right: calc(26px + env(safe-area-inset-right));
    }
  }
}
/* 以独立窗口（安装到桌面 / 添加到主屏）运行时，顶栏要给状态栏让位 */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  @media (max-width: 860px) {
    .topbar { padding-top: calc(8px + env(safe-area-inset-top)); }
    #view-edit .crumb { top: calc(54px + env(safe-area-inset-top)); }
    .editor-toolbar { top: calc(54px + env(safe-area-inset-top)); }
  }
}

/* ---------- ⑫ 打印：只留正文 ---------- */
@media print {
  .sidebar, .topbar, .footer, .nav-overlay, .toast, .notif-panel,
  .read-topbar, .read-toc, .share-box, .card-pin, .announcement-close,
  #fixerModal, .modal-overlay { display: none !important; }
  .main-col { margin-left: 0 !important; }
  #app { padding: 0 !important; }
  main { max-width: none !important; padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .markdown-body a { color: #000; text-decoration: underline; }
  .markdown-body pre, .markdown-body table, .markdown-body img { break-inside: avoid; }
  .view { display: none !important; }
  .view.active { display: block !important; }
}

/* ---------- ⑬ 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .modal:not(#fixerModal) { animation: none; }
  .btn:active, .icon-btn:active, .nav-item:active, .se-node:active { transform: none; }
}