/* ============================================================
   DeepSeek Code Assistant 中文版 — 响应式层（responsive.css）

   Copyright 2026 辉夜(Huiye) 项目组 · Apache License 2.0

   为什么单独有一层：
     在此之前，响应式是**各页零散写的** —— 全项目出现 11 个互不相干的断点
     （480/560/640/720/760/780/820/900/960/1080/1280），且反复出现同一批
     移动端缺陷：禁用缩放、缺 viewport-fit、100vh 被地址栏遮挡、
     输入框字号 <16px 触发 iOS 自动放大、表格横向溢出、触控目标过小、
     依赖 :hover 的操作在触屏上点不到。

     本文件把这些**统一成一层**：一致的断点刻度 + 移动安全原语 + 桌面增强。
     由 dsca_css() 保证它**始终最后加载**，因此可以安全地做兜底覆盖。

   ── 断点刻度（全站只用这四个）──────────────────────────────
     sm   ≤ 480px   小屏手机（竖屏）
     md   ≤ 768px   手机横屏 / 小平板
     lg   ≤ 1024px  竖屏平板 / 小笔记本
     xl   ≥ 1440px  宽屏桌面

   ── 适配的两个维度（不只是宽度）────────────────────────────
     · 指针类型：hover:hover / pointer:fine  → 桌面鼠标
                 hover:none  / pointer:coarse → 触屏
     · 视口高度：使用 dvh，避免移动端地址栏伸缩导致布局跳动
   ============================================================ */

/* ============================================================
   一、全局安全原语（所有尺寸都生效）
   ============================================================ */

:root {
    /* 动态视口高度：地址栏收起/展开时自动跟随，比 100vh 可靠。
       不支持 dvh 的浏览器由下一行的 100vh 兜底。 */
    --app-vh: 100vh;
    --app-vh: 100dvh;

    /* 安全区（刘海屏 / 手势条）统一成变量，避免每处都写 env() */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* 触控目标最小尺寸（WCAG 2.5.8 建议 24，Apple/Google 建议 44） */
    --tap-min: 40px;
}

/* 防止移动端因长单词/代码块把整页顶出横向滚动 */
html {
    -webkit-text-size-adjust: 100%;   /* 横屏时 iOS 不再擅自放大字号 */
    text-size-adjust: 100%;
}
body {
    overflow-x: hidden;               /* 兜底：个别元素溢出时不出现整页横滑 */
    min-height: var(--app-vh);
}

/* 点击高亮：触屏上默认会闪一块蓝灰，视觉很脏 */
* { -webkit-tap-highlight-color: transparent; }

/* 图片/画布/表格永远不撑破容器 */
img, svg, canvas, video { max-width: 100%; height: auto; }

/* 代码块与长串：允许换行而不是撑宽页面 */
pre, code { overflow-wrap: anywhere; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 细滚动条在触屏上不该占位 */
@media (hover: none) {
    ::-webkit-scrollbar { width: 0; height: 0; }
}

/* ============================================================
   二、触屏设备（pointer: coarse）—— 与屏幕宽度无关
   有些平板很宽但仍是触屏，只按宽度做适配会漏掉它们
   ============================================================ */

@media (pointer: coarse) {
    /* 触控目标放大到可点范围 */
    button,
    .btn,
    .primary-btn,
    .ghost-btn,
    .icon-btn,
    a.btn,
    [role="button"],
    select,
    input[type="checkbox"],
    input[type="radio"],
    input[type="submit"] {
        min-height: var(--tap-min);
    }
    .icon-btn { min-width: var(--tap-min); }

    /* 触屏没有 hover 状态：把「靠 hover 才出现」的元素常显，
       否则用户根本发现不了（典型：卡片上的操作按钮） */
    .hover-only { opacity: 1 !important; pointer-events: auto !important; }

    /* 长按选中会干扰滚动/拖拽，只对可交互控件禁用 */
    button, .btn, .icon-btn, .chip, .badge { -webkit-user-select: none; user-select: none; }

    /* 滚动更跟手 */
    .file-tree, .log, .msg-list, .panel-scroll { -webkit-overflow-scrolling: touch; }
}

/* hover 效果只在真有鼠标的设备上生效 —— 触屏点击后不会「粘住」hover 样式 */
@media (hover: none) {
    .btn:hover, .ghost-btn:hover, .icon-btn:hover,
    .card:hover, .chip:hover, .stat:hover {
        filter: none;
        background-color: inherit;
    }
}

/* ============================================================
   三、小屏手机（≤480）
   ============================================================ */

@media (max-width: 480px) {
    /* 顶部/底部固定条贴合安全区 */
    .topbar {
        padding-top: var(--safe-top);
        padding-left: max(10px, var(--safe-left));
        padding-right: max(10px, var(--safe-right));
    }

    /* 内容边距收紧，把宽度还给内容 */
    .card { padding: 14px 13px; border-radius: var(--ds-radius-lg); }
    .page-top { padding-left: 13px; padding-right: 13px; }

    /* 按钮独占一行在窄屏更好点 */
    .modal-actions,
    .modal .mrow { flex-direction: column-reverse; }
    .modal-actions > *,
    .modal .mrow > * { width: 100%; justify-content: center; }
}

/* ============================================================
   四、手机 / 小平板（≤768）
   ============================================================ */

@media (max-width: 768px) {
    /* ── 表单控件字号 ≥16px ──────────────────────────────────
       低于 16px 时 iOS Safari 聚焦会**自动放大整页**，用户每点一次输入框
       页面就跳一下，是移动端最影响观感的顽疾之一。
       用 !important 是因为页面里多为 `.modal input[type=text]` 这类
       更高优先级的选择器（13.5px），普通规则压不住。 */
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* ── 弹窗：手机端改为底部全屏抽屉 ─────────────────────────
       居中弹窗在小屏上会顶到地址栏、被软键盘遮挡，且内容一长就要在小框里滚。
       全屏化后内容区可滚动、底部按钮固定且避开手势条。 */
    .modal-overlay,
    .overlay {
        align-items: flex-end;          /* 从底部升起，拇指可达 */
        padding: 0;
    }
    .modal-box,
    .modal,
    .ask-box,
    .donate-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(var(--app-vh) - var(--safe-top) - 8px) !important;
        margin: 0;
        border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
        display: flex;
        flex-direction: column;
    }
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;                  /* 关键：允许 flex 子项真正收缩并滚动 */
    }
    .modal-foot,
    .modal-actions,
    .modal .mrow {
        flex: 0 0 auto;
        padding-bottom: max(12px, var(--safe-bottom));
    }
    .modal-title { position: sticky; top: 0; z-index: 1; }

    /* ── 表格：横向滚动而不是撑破布局 ─────────────────────────
       直接给 table 加 overflow 是无效的（display:table 不裁剪），
       必须用包裹层。无包裹层时用 display:block 兜底。 */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll > .table { min-width: 560px; }   /* 保持列不挤成一团 */

    table.table { font-size: 13px; }
    .table th, .table td { padding: 8px 10px; white-space: nowrap; }

    /* ── 横向排布的键值行：窄屏改为纵向堆叠 ──────────────── */
    .row { flex-wrap: wrap; }
    .row > * { min-width: 0; }

    /* ── 底部固定元素避开手势条 ──────────────────────────── */
    .composer-wrap,
    .bottom-bar {
        padding-bottom: max(10px, var(--safe-bottom));
    }
}

/* ============================================================
   五、竖屏平板 / 小笔记本（≤1024）
   ============================================================ */

@media (max-width: 1024px) {
    /* 网格类布局降低列数，避免每列被压得难以阅读 */
    .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ============================================================
   六、桌面端增强（≥1025）
   ============================================================ */

@media (min-width: 1025px) {
    /* 鼠标设备才启用 hover 反馈（触屏下这些会让元素「粘住」） */
    @media (hover: hover) {
        .card { transition: border-color var(--ds-dur) var(--ds-ease); }
        .card:hover { border-color: var(--ds-border-strong); }
    }

    /* 长表格给表头吸顶，滚动时始终知道列含义 */
    .table-scroll { overflow-y: auto; }
    .table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--panel);
        backdrop-filter: blur(6px);
    }
}

/* 宽屏桌面：把过去为 860/1180 设计的窄栏适度放宽，
   否则 2K/4K 屏两侧会空掉大半，信息密度过低 */
@media (min-width: 1440px) {
    .page-top,
    .card-wrap,
    .container { max-width: 1360px; }
    .card { padding: 22px 28px; }
}

@media (min-width: 1800px) {
    .page-top,
    .card-wrap,
    .container { max-width: 1560px; }
}

/* ============================================================
   七、横屏手机（高度很小）—— 按宽度适配会漏掉这一类
   ============================================================ */

@media (max-height: 480px) and (orientation: landscape) {
    /* 竖排布局在横屏矮窗口里会把内容挤没，改回横向并压紧留白 */
    .page-top { padding-top: 8px; }
    .modal-box { max-height: calc(var(--app-vh) - 8px); }
    .card { padding: 12px 14px; }
}

/* ============================================================
   八、可打印（顺手修掉：深色背景打印会糊成一片黑）
   ============================================================ */

@media print {
    body { background: #fff !important; color: #000 !important; }
    .topbar, .composer-wrap, .icon-btn, .btn { display: none !important; }
    .card { border: 1px solid #ccc !important; break-inside: avoid; }
}