/* 网页版专属样式：同步状态入口、右侧走廊宽度、窄屏排版与渐进降级 */

/* 现代布局的右侧走廊：桌面版这里是「4 个工具按钮 + 3 个窗口操作键」共 280px，
   网页版没有窗口操作键可排，却多一个同步状态入口，因此按这一组的实际宽度收窄。
   只有这两个变量的取值不同，styles/mode.css 的排版规则与桌面版逐条一致。 */
html.modern-layout {
    --modern-corridor: 226px;
    --modern-tools: 226px;
    /* 悬浮按钮组离屏缘的距离：桌面版这一段由那 3 枚窗口操作键占着，
       网页版改留一道带子，与经典布局标题栏的右内边距同值；走廊宽度随之加宽同样数值 */
    --modern-edge-gap: 12px;
}
html.modern-layout .titlebar {
    padding-right: var(--modern-edge-gap);
}

/* 图标字体加载失败时（离线部署且未放本地字体）退回界面字体：
   字形里的文字仍可读，不会因为缺字变成一串方框 */
.ms-icon {
    font-family: 'Material Symbols Rounded', var(--font-sans);
}

/* 标题栏右侧的同步状态入口 */
.sync-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: var(--item-hover);
    color: var(--text-secondary);
    font-size: 11.5px;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
.sync-chip:hover {
    background: var(--item-active);
    color: var(--text-primary);
}
.sync-chip.state-online {
    color: var(--accent);
}
.sync-chip.state-error {
    color: var(--danger);
}
.sync-chip.state-busy .ms-icon {
    animation: syncSpin 1s linear infinite;
}
@keyframes syncSpin {
    to { transform: rotate(360deg); }
}

/* 连接信息里的一行小字 */
.settings-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 680px;
}
.settings-hint.is-error {
    color: var(--danger);
}
.settings-hint.is-warning {
    color: var(--warning);
}

/* 连接服务端：盖在应用之上的一层卡片 */
.gate-mask {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    background-color: var(--bg-body);
}
.gate-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px;
    background: var(--bg-list);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
/* 右上的关闭键：与标题栏那组图标按钮同一样式（.btn-action-icon），只定位在这里 */
.gate-close {
    position: absolute;
    top: 12px;
    right: 12px;
}
.gate-brand {
    font-family: 'Mohave', var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-fg);
    letter-spacing: 0.4px;
}
.gate-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}
.gate-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.gate-hint {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
}
.gate-hint:empty { display: none; }
.gate-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gate-field-label {
    font-size: 12px;
    color: var(--text-secondary);
}
.gate-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--item-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    user-select: text;
    transition: border-color .15s;
}
.gate-input.mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.gate-input:hover { border-color: var(--text-muted); }
.gate-input:focus { border-color: var(--accent); }
.gate-input::placeholder { color: var(--text-muted); }
.gate-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.form-msg {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    min-height: 16px;
}
.form-msg[data-tone="error"] { color: var(--danger); }
.form-msg[data-tone="ok"] { color: var(--accent); }

/* 空状态里的一行引导：只在本地为空且未连接服务端时出现 */
.empty-placeholder p.empty-hint {
    margin-top: 4px;
    max-width: 320px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

/* ==========================================================================
   移动端适配：平板与手机
   三档递进，桌面端的取值一律不变：
     1) ≤1180px（平板横屏）：三栏仍然并排，只是逐档收窄；
     2) ≤860px（手机与竖屏平板）：三栏改成一栏一层——侧边栏整条收起（分类走列表表头
        那一枚「筛选」，设置 / 导入文件 / 深浅色在顶栏右端的菜单里，尾部分别见
        styles/mobile.css 与 scripts/app.js），列表占满整栏，打开条目时工作区整屏盖上，
        AI 助手与小本本同样整屏铺开；
     3) 触摸设备（pointer: coarse）：放大点击目标，并把「悬停才出现」的操作改为常显。
   ========================================================================== */

/* 列表表头：搜索框一行占满（窄屏那一枚「筛选」排在框内右端，见 styles/mobile.css） */
.notes-panel-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notes-panel-bar .search-box {
    flex: 1;
    min-width: 0;
}

/* 安全区：内容不钻进刘海与圆角屏的边角。
   桌面浏览器里 env() 一律为 0，取值与桌面版逐条一致 */
.app-container {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

/* ---------------- 1. 平板：三栏并排，逐档收窄 ---------------- */
@media (max-width: 1180px) {
    .sidebar {
        width: 190px;
    }
    .notes-panel {
        width: 248px;
    }
    .settings-sidebar {
        width: 170px;
    }
    .settings-content {
        padding: 24px 28px;
    }
}

/* ---------------- 2. 手机与竖屏平板：一栏一层 ---------------- */
@media (max-width: 860px) {
    /* 2.1 顶部工具按钮组：收成一行图标，下面各栏各自让出这一行 */
    html.modern-layout .titlebar {
        /* 窄屏这条顶栏重新摊开成一条真顶栏，右端留白由 .titlebar-actions 自己给 */
        --modern-edge-gap: 0px;
        height: calc(44px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        padding-bottom: 2px;
        align-items: flex-end;
    }
    html.modern-layout .titlebar-actions {
        height: auto;
        gap: 2px;
        padding-right: 4px;
    }
    html.modern-layout .titlebar-actions .btn-action-icon {
        width: 32px;
        height: 32px;
    }
    /* 同步状态在窄屏只留图标：文字挤不下，状态由图标与图标颜色表达 */
    html.modern-layout .sync-chip {
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
    }
    html.modern-layout #sync-chip-text {
        display: none;
    }
    /* 经典布局的标题栏同样只留入口：标签栏收进笔记列表里 */
    html:not(.modern-layout) .titlebar-tabs,
    .titlebar-title {
        display: none;
    }

    /* 2.2 侧边栏整条收起：手机端不再有导航抽屉，因此抽屉的位移、遮罩与边缘手势
       一并撤掉（见 scripts/app.js）。分类筛选在列表表头那一枚「筛选」里，
       设置、导入文件与深浅色在顶栏右端的菜单里，两者都只在窄屏排出来 */
    .sidebar {
        display: none;
    }
    /* 浮层菜单（自绘下拉与右键菜单默认 300，见 styles/overlays.css）：窄屏的层级另有一套，
       见 styles/mobile.css 第 3 节与 §1.7 */
    .dropdown-menu,
    .context-menu {
        z-index: 335;
    }

    /* 2.3 列表占满整栏 */
    .notes-panel {
        width: auto;
        flex: 1;
        min-width: 0;
        border-right: none;
    }
    /* 标签栏整条收起：窄屏顶部留给悬浮按钮，多个条目改在列表里切换 */
    html.modern-layout .workspace-tabs {
        display: none;
    }
    /* 标签栏不再占位：那一行整行让给悬浮的工具按钮 */
    html.modern-layout {
        --modern-tabs-height: 0px;
    }
    html.modern-layout .notes-panel-header {
        min-height: 0;
        padding: 52px 10px 10px 10px;
    }
    .notes-list {
        padding: 8px 10px calc(12px + env(safe-area-inset-bottom)) 10px;
    }

    /* 2.4 打开条目时，工作区整屏盖在列表上 */
    .app-body > .workspace {
        display: none;
    }
    .app-body > .workspace:has(#editor-topbar:not(.hidden)) {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 340;
        padding-top: calc(44px + env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* 返回：各布局下都固定在左上角，与工具按钮同处一行 */
    html .app-body .tabs-back {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(4px + env(safe-area-inset-top));
        left: calc(4px + env(safe-area-inset-left));
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background: var(--bg-titlebar);
        color: var(--text-secondary);
        opacity: 1;
        transform: none;
        pointer-events: auto;
        z-index: 345;
    }
    html .app-body .tabs-back:active {
        background: var(--item-active);
        color: var(--text-primary);
    }
    /* 经典布局的标题栏在文档流里占着一行，工作区从它下面开始铺 */
    html:not(.modern-layout) .app-body > .workspace:has(#editor-topbar:not(.hidden)) {
        inset: calc(40px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom) 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* 2.5 编辑器：各段收窄；正文到 16px（手机上 13.5px 偏小，
       且 iOS 会在聚焦小于 16px 的输入框时把整页放大） */
    .editor-topbar {
        padding: 0 8px;
        gap: 6px;
    }
    /* 视角切换与完成按钮不被压缩，可收缩的是左侧的文件夹与标签 */
    .editor-actions {
        flex-shrink: 0;
    }
    .select-folder {
        max-width: 96px;
    }
    .view-btn {
        padding: 2px 6px;
    }
    .editor-toolbar {
        padding: 0 8px;
    }
    .editor-title-area {
        padding: 12px 12px 6px 12px;
    }
    .editor-title-input {
        font-size: 18px;
    }
    .editor-textarea,
    .markdown-body {
        font-size: 16px;
    }
    /* 分屏在窄屏改上下两段：左右各半会挤成两条 */
    .editor-content-area {
        flex-direction: column;
    }
    .editor-pane {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .editor-pane,
    .preview-pane {
        padding: 8px 12px 12px 12px;
    }
    .editor-footer {
        padding: 0 10px;
    }

    /* 2.6 AI 助手：从右侧滑入并整屏铺开 */
    .ai-panel,
    .ai-panel.ai-collapsed {
        position: fixed;
        inset: 0;
        width: auto;
        border-left: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 360;
        transform: translateX(100%);
        transition: transform var(--motion-slow) var(--ease-out);
    }
    .ai-panel:not(.ai-collapsed) {
        transform: none;
    }
    .ai-panel-header,
    .ai-messages,
    .ai-composer {
        min-width: 0;
    }
    html.modern-layout .ai-panel-drag-strip {
        height: 0;
        margin-right: 0;
    }
    html.modern-layout .ai-drawer {
        top: 40px;
    }
    .ai-input {
        min-height: 76px;
        font-size: 16px;
    }
    .ai-msg-body,
    .ai-msg-body .markdown-body {
        font-size: 15px;
    }

    /* 2.7 设置页：两级 —— 第一级是分类列表，点进去才是该分类的面板。
       层级写在 #settings-view 的 .is-subpage 上（见 scripts/settings.js），两栏因此只排出一栏；
       桌面端两栏并排，这一节不生效（那一侧只有 .settings-crumb 等窄屏专属元素被收起）。
       第一级的行高向底栏那几页靠拢，一屏扫得完也点得中。
       这一页自己就是整屏铺开的，右上角那组悬浮按钮会压住分类条，索性收起 */
    html:has(#settings-view:not(.hidden)) #app-titlebar {
        display: none;
    }
    .settings-view {
        flex-direction: column;
    }
    /* 第一级：整屏的分类列表。行贴两侧，内边距交给行自己；
       上下安全区由 .app-container 统一让开（见本文件第一档），这里不再重复算 */
    .settings-sidebar {
        width: 100%;
        flex: 1;
        min-height: 0;
        border-right: none;
        border-bottom: none;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    /* 第一级顶端那条：左边「返回」回笔记列表，右边就是这一页的名字 */
    .settings-nav-head {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 48px;
        padding: 0 8px;
    }
    html.modern-layout .settings-back,
    html:not(.modern-layout) .settings-back {
        display: flex;
        align-items: center;
        gap: 6px;
        width: auto;
        height: 36px;
        padding: 0 8px;
        margin-bottom: 0;
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-size: 13px;
    }
    html .settings-nav-title {
        display: inline-flex;
        align-items: center;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .settings-nav {
        flex-direction: column;
        gap: 0;
    }
    /* 行：48px 高、14.5px 正文。内边距要带 `html ` 前缀 —— 触摸档那条 .nav-item
       晚于本节出现，同权重会把它压回 10px */
    html .settings-nav-item {
        width: 100%;
        height: 48px;
        flex-shrink: 0;
        padding: 0 14px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-light);
        font-size: 14.5px;
    }
    html .settings-nav-item:last-child {
        border-bottom: none;
    }
    html .settings-nav-item:active {
        background-color: var(--item-active);
    }
    /* 行尾的箭头：触摸设备没有悬停，靠它交代「点进去还有一层」 */
    html .settings-nav-chevron {
        display: inline-flex;
        color: var(--text-muted);
    }
    /* 第二级：该分类的面板占满整屏，顶端一条导航栏 —— 左边回分类列表，右边是当前分类 */
    .settings-view:not(.is-subpage) .settings-main {
        display: none;
    }
    .settings-view.is-subpage .settings-sidebar {
        display: none;
    }
    /* 这一条必须带 `html ` 前缀：mobile.css 顶部那份「桌面端不排出来」名单里有 .settings-crumb，
       而它在本文件之后加载，同权重时会把下面这个 display: flex 压回去 —— 那样第二级就没有返回键 */
    html .settings-crumb {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        height: 48px;
        padding: 0 8px;
        border-bottom: 1px solid var(--border-color);
        background-color: var(--bg-editor);
    }
    .settings-crumb-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
    }
    .settings-crumb-back:active {
        background-color: var(--item-active);
        color: var(--text-primary);
    }
    .settings-crumb-title {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
    }
    .settings-crumb-title .ms-icon {
        color: var(--text-secondary);
    }
    html.modern-layout .settings-view .settings-content,
    html.modern-layout body.is-fullscreen .settings-view .settings-content {
        padding: 16px;
        padding-top: 0;
    }
    html.modern-layout .settings-view .settings-header,
    html:not(.modern-layout) .settings-view .settings-header {
        /* 名称已在那条导航栏上，这一块只剩说明文字：贴导航栏留一点空即可，不再画分隔线 */
        padding: 12px 0 0;
        border-bottom: none;
    }
    /* 顶端渐隐（见 styles/settings.css）跟着上内边距收窄：16px 的留白里放不下 32px 的渐隐 */
    .settings-content {
        --settings-top-inset: 16px;
    }
    /* 面板里的字号整体压一档：内容区原本照搬桌面端（分类名 20px、设置项 14px），
       手机上一屏只放得下三四项。正文 13.5px、说明 11.5px，分类名交给导航栏 */
    html .settings-view .settings-title {
        display: none;
    }
    html .settings-view .settings-section-title {
        font-size: 13px;
    }
    html .settings-view .settings-row-label {
        font-size: 13.5px;
    }
    html .settings-view .settings-row-desc {
        font-size: 11.5px;
        line-height: 1.5;
    }
    html .settings-view .settings-desc {
        margin-top: 0;
        font-size: 12.5px;
    }
    /* 按钮也收回来：触摸档按「放大点击目标」给了 36px 高，设置页里那几枚
       （重新连接、清空本地副本…）在手机上比旁边的字号大出一圈 */
    html .settings-view .settings-btn {
        height: 30px;
        padding: 0 12px;
        font-size: 12px;
    }
    /* 分类面板里的盒子不再是卡片：设置项与「自定义主题色」那两块（原本都是 --bg-list 底 +
       描边 + 圆角，Alom 风格下还带一层投影）在窄屏一律摊平成列表项 —— 圆角、描边、
       底色与投影全去掉，项与项之间只留一条细线（末行不画）。
       选择器多带一级 .settings-content 是为了压过 Alom 那份同族规则（它重 3 个类） */
    html .settings-view .settings-content .settings-row,
    html .settings-view .settings-content .accent-custom {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-width: none;
    }
    html .settings-view .settings-content .settings-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 11px 0;
        border-bottom: 1px solid var(--border-light);
    }
    html .settings-view .settings-content .settings-row:last-child {
        border-bottom: none;
    }
    html .settings-view .settings-content .accent-custom {
        padding: 12px 0;
    }
    /* 段内因此不再靠 gap 拉开：设置项紧挨着排，不是设置项的那些块（段标题、色板、
       滑块、说明、快捷键表…）各自带上边距 —— 漏一条就会有一块贴上去 */
    .settings-section {
        gap: 0;
    }
    .settings-section-title {
        margin-bottom: 8px;
    }
    .settings-section > * + *:not(.settings-row) {
        margin-top: 12px;
    }
    /* 控件行高收到 34px：正文仍是 16px（触摸档那条防 iOS 聚焦放大整页，见本文件第三档），
       不让它顶着上下边框、看着比旁边的字大一圈 */
    .settings-select,
    .settings-input,
    .accent-hex-input {
        min-width: 0;
        width: 100%;
        max-width: none;
        height: 34px;
        padding: 0 10px;
        font-size: 16px;
    }

    /* 2.9 浮层：弹窗与提示条按屏宽铺开 */
    .dialog-mask,
    .gate-mask {
        padding: 16px;
        padding-top: calc(16px + env(safe-area-inset-top));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .dialog-box,
    .gate-card {
        max-width: none;
    }
    .toast-box {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        align-items: stretch;
    }
    .toast-item {
        max-width: none;
    }

    /* 2.10 各滚动容器滚到两端时，不把整页带着一起滚 */
    .notes-list,
    .folder-list,
    .tag-list,
    .settings-sidebar,
    .settings-content,
    .ai-messages,
    .ai-chat-list,
    .preview-pane,
    .editor-textarea {
        overscroll-behavior: contain;
    }
}

/* ---------------- 3. 触摸设备：放大点击目标 ---------------- */
@media (hover: none) and (pointer: coarse) {
    /* 触摸没有悬停：点一下就停住的悬停态会留在屏幕上。
       把「悬停才出现」的操作改为常显，反馈交给 :active */
    .ai-chat-item-actions,
    .ai-msg-actions {
        opacity: 1;
    }

    .btn-action-icon,
    .sidebar-bottom .btn-clear-trash,
    .sidebar-bottom .btn-sidebar-bottom {
        width: 36px;
        height: 36px;
    }
    .titlebar-actions .btn-action-icon,
    .ai-panel-header .btn-action-icon {
        width: 32px;
        height: 32px;
    }
    .ai-chat-action {
        width: 28px;
        height: 28px;
    }
    /* 同步状态入口在桌面只有 26px 高，触摸设备上抬到 34px */
    .sync-chip {
        height: 34px;
        padding: 0 12px;
    }
    .ai-send-btn {
        width: 32px;
        height: 32px;
    }
    .ai-drawer-new {
        height: 32px;
    }
    .tab-item {
        height: 34px;
    }
    .tab-close-btn {
        width: 26px;
        height: 26px;
    }
    .nav-item {
        padding: 10px 10px;
    }
    .note-card {
        padding: 12px;
    }
    .todo-check {
        width: 26px;
        height: 26px;
    }
    .fmt-btn {
        width: 32px;
        height: 32px;
    }
    .view-btn {
        padding: 5px 10px;
    }
    .tag-pill {
        padding: 4px 10px;
    }
    .context-menu-item,
    .dropdown-option {
        padding: 10px 12px;
    }
    .settings-btn {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }
    .switch {
        width: 48px;
        height: 26px;
    }
    .switch .slider:before {
        width: 20px;
        height: 20px;
    }
    .switch input:checked + .slider:before {
        transform: translateX(22px);
    }
    .accent-swatch {
        width: 36px;
        height: 36px;
    }

    /* 输入框一律 ≥16px：iOS 聚焦时不会把整页放大 */
    .search-box input,
    .select-folder,
    .notes-panel-info select,
    .ai-input,
    .ai-scope-select,
    .settings-input,
    .settings-input.mono,
    .settings-select,
    .accent-hex-input,
    .dialog-input,
    .gate-input {
        font-size: 16px;
    }

    /* 列表卡片不可选中：触摸设备上长按卡片是「打开条目菜单」的手势，不拦的话
       系统会顺手把标题 / 摘要选上、弹出选择手柄（iOS 还会再叠一层放大镜与「拷贝」菜单）。
       只拦这一层：正文、输入框与设置里的路径等等仍可选中（见 styles/base.css 的同一句话），
       鼠标环境下列表也照旧可选 */
    .notes-list {
        -webkit-user-select: none;
        user-select: none;
        /* iOS：关掉长按弹出的系统菜单（拷贝 / 查询） */
        -webkit-touch-callout: none;
    }

    /* 触摸设备上按压反馈必须立刻可见，这里去掉点击时浏览器补的灰色高亮块 */
    html {
        -webkit-tap-highlight-color: transparent;
    }
}