/* =========================================================================
   序 XU · Responsive
   Mobile First：默认即移动布局，≥860 提升为桌面（侧栏 + 详情抽屉）。
   断点：860（桌面/移动分界）、640、520
   ========================================================================= */

/* ---------- 移动优先默认（<860）：隐藏侧栏，启用底部导航 ---------- */
.app { grid-template-columns: 1fr; }
.sidebar { display: none; }
.bottomnav {
  display: flex; align-items: stretch; justify-content: space-around;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-top: 1px solid var(--line);
}
.bottomnav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: .04em;
  transition: color var(--dur-1) var(--ease);
}
.bottomnav__item span { font-size: 1.15rem; line-height: 1; }
.bottomnav__item.is-active { color: var(--accent); }
.bottomnav__item--center {
  flex: 0 0 auto; align-self: center;
  width: 52px; height: 52px; margin-top: -14px;
  background: var(--ink); color: var(--paper); border-radius: 50%;
  box-shadow: var(--shadow); font-size: 1.6rem;
  transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.bottomnav__item--center:active { transform: scale(.96); background: var(--accent); }
.bottomnav__item--center.is-active { background: var(--accent); }

.view { padding-bottom: calc(var(--sp-5) + var(--bottomnav-h)); }

/* 详情面板在移动端 = 底部抽屉 */
.panel {
  top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto;
  max-height: 92vh; border-left: 0; border-top: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%);
}
.panel.is-open { transform: translateY(0); }
.toast { bottom: calc(var(--bottomnav-h) + 16px); }

/* ---------- ≥860：桌面布局（侧栏 + 右侧详情抽屉） ---------- */
@media (min-width: 860px) {
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .sidebar { display: flex; }
  .bottomnav { display: none; }
  .view { padding-bottom: calc(var(--sp-6)); }
  .panel {
    top: 0; bottom: auto; left: auto; right: 0; width: min(420px, 94vw);
    height: 100vh; max-height: none;
    border-top: 0; border-left: 1px solid var(--line);
    border-radius: 0; transform: translateX(100%);
  }
  .panel.is-open { transform: translateX(0); }
  .toast { bottom: 24px; }
}

/* ---------- ≤1366：顶栏收敛一档（文档日志收进「更多」，分段控件收窄） ---------- */
@media (max-width: 1366px) {
  #docLogBtn { display: none; }
  .viewswitch__btn { padding: 0 .65rem; }
}

/* ---------- ≤1120：顶栏收敛二档（分段控件改图标、隐藏头像组，可见性标签与权限按钮只留图标） ---------- */
@media (max-width: 1120px) {
  .viewswitch__btn span.lbl { display: none; }
  .topbar .row-gap { display: none; }
  .xu-vis-tag span { display: none; }
  #shareBtn .btn__txt { display: none; }
  #shareBtn { padding: 0 .6rem; }
}

/* ---------- ≤640：标题与切换更紧凑 ---------- */
@media (max-width: 640px) {
  .topbar { padding: 0 var(--sp-3); gap: .5rem; }
  .topbar__title h1 { font-size: var(--fs-body); }
  .topbar__title .eyebrow { display: none; }
  .topbar__sub { display: none; }
  .viewswitch__btn { padding: 0 .6rem; }
  .viewswitch__btn span.lbl { display: none; }
  /* 撤销 / 重做主要服务于键盘操作，小屏顶栏空间有限则隐藏 */
  .hist-btn { display: none; }
  .editor-head { flex-direction: column; gap: var(--sp-2); }
  .xu-grid { grid-template-columns: 1fr; }
  .view { padding-inline: var(--sp-3); }
  /* 设置页：小屏下标签与控件垂直堆叠，避免分段控件被挤窄 */
  .settings__row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .settings__row .seg { display: flex; width: 100%; }
  .settings__row .seg__btn { flex: 1 1 0; text-align: center; }
  .settings__row--theme { align-items: stretch; }
  .theme-options { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .theme-opt { min-width: 0; padding: .65rem .3rem .55rem; }
}

/* ---------- ≤520：进一步收紧 ---------- */
@media (max-width: 520px) {
  .topbar { gap: .35rem; padding: 0 var(--sp-2); }
  .topbar__actions .btn__txt { display: none; }
  .topbar__actions .icon-btn .lbl { display: none; }
  .topbar .row-gap { display: none; }
  #shareBtn { padding: 0 .55rem; }
  #shareBtn .btn__txt { display: none; }
  .viewswitch__btn { height: 28px; padding: 0 .5rem; }
  .viewswitch__btn .icon { width: 14px; height: 14px; }
  .xu-vis-tag { height: 28px; padding: 0 .45rem; }
  .xu-vis-tag .icon { width: 13px; height: 13px; }
  .xu-vis-tag span { display: none; }
  .icon-btn { width: 32px; height: 32px; }
  .badge { font-size: var(--fs-micro); padding: .15rem .45rem; }
  /* 小屏：把次要的顶栏按钮收进「更多」下拉，顶栏只保留 返回 / 状态 / 视图切换 / 公开标记 / 更多 */
  #shareBtn, #docLogBtn, #themeToggle { display: none; }
}

/* ---------- 弹层在移动端可滚动、不溢出（登录 / 注册 / 分享 / 新建） ---------- */
@media (max-width: 859px) {
  .modal {
    display: flex; align-items: stretch; justify-content: center;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--sp-2);
  }
  .modal__card {
    width: min(480px, 100%);
    max-height: calc(100vh - 2 * var(--sp-2));
    overflow-y: auto;
    margin: auto;
  }
  .auth-card { width: 100%; }
}

@media (max-width: 520px) {
  .modal { padding: var(--sp-2) var(--sp-1); }
  .modal__card { padding: var(--sp-3) var(--sp-2); }
  .auth-field { margin-bottom: var(--sp-2); }
}

/* ---------- 移动端新建悬浮球（仅 <860px 显示，桌面端隐藏） ---------- */
.fab {
  display: none;
}
@media (max-width: 859px) {
  .fab {
    display: grid; place-items: center;
    position: fixed; right: 18px;
    bottom: calc(var(--bottomnav-h) + 18px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    font-size: 1.7rem; line-height: 1; border: 0;
    box-shadow: var(--shadow-2); z-index: 85;
    transition: background-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .fab:active { transform: scale(.94); background: var(--accent); }
}