/* =============================================================================
 * recall-shell.css — AI 智能录音纪要的「外壳」样式（integration 维护）
 *
 * 只负责：
 *  1. 文件夹页新容器 #recall-home 的宽度/安全区/底部让位（滚动仍由 #page-history 负责，
 *     不要在这里给容器设置 overflow，否则 RecallHome 的 sticky 顶栏会失效）；
 *  2. 全屏详情页 #recall-detail 的固定定位、层级、背景、安全区；
 *  3. body.recall-detail-open 的滚动锁定；
 *  4. 旧历史列表 DOM 的隐藏（仅在 recall 模块真正就绪时生效，页面不会白屏）。
 *
 * 主题：现有 App 用 document.documentElement[data-theme="dark|light"]，
 *       本文件深色规则一律写 [data-theme="dark"]，不重定义任何全局变量。
 * 兼容：Android 10 WebView（Chrome 80）——不用 :has / 可选链 / inset 简写。
 * 设计 token（--bg/--surface/--ink…）由 recall-home.css / recall-detail.css
 * 在各自容器子树内作用域覆盖，本文件不碰全局 :root。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 文件夹页容器（#page-history 是滚动容器）
 * ------------------------------------------------------------------------ */
#recall-home {
  position: relative;
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
  min-height: 100%;
  box-sizing: border-box;
  /* 底部导航 + 手势条让位（外壳兜底，新首页自身也可再留白） */
  padding-bottom: calc(var(--nav-h, 67px) + var(--safe-bottom, 0px) + 16px);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 新首页启用后：页面底色改为设计参考的浅灰蓝（详情页同色），保证卡片/留白一致 */
html.recall-ready #page-history {
  background: #f8f9fc;
}
html.recall-ready[data-theme="dark"] #page-history {
  background: #11151d;
}

/* 旧历史列表 / 搜索 / 多选栏 / 旧详情浮层：模块就绪后隐藏（仍保留 DOM，避免破坏 app.js 旧逻辑） */
html.recall-ready #page-history .recall-legacy {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 2. 全屏 AI 纪要详情页
 *    detail 模块自己往 #recall-detail 里渲染；打开时给 body 加 recall-detail-open。
 *    为兼容不同实现，以下任一条件都会显示：.open / aria-hidden="false" / body 类。
 * ------------------------------------------------------------------------ */
.recall-detail-page {
  position: fixed;
  top: var(--inset-top, env(safe-area-inset-top, 0px));
  right: 0;
  bottom: var(--inset-bottom, env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 60;                 /* 高于底部导航(5)/弹层(20)；toast 同为 60 且在其后，仍可见 */
  display: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #f8f9fc;
  color: #202633;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .recall-detail-page {
  background: #11151d;
  color: #f0f2f7;
}

.recall-detail-page.open,
.recall-detail-page[aria-hidden="false"],
body.recall-detail-open .recall-detail-page,
html.recall-detail-open .recall-detail-page {
  display: block;
}

/* 详情打开时锁住底层页面滚动（返回值列表后恢复） */
body.recall-detail-open,
html.recall-detail-open body {
  overflow: hidden !important;
}

/* 登录门禁 / 启动闪屏必须盖住全屏详情（避免登录态失效时被详情遮住无法重新登录）。
 * 只在 recall 外壳就绪时生效，不影响其它页面。 */
html.recall-ready .auth-gate { z-index: 70; }
html.recall-ready .boot-splash { z-index: 80; }

/* 详情页内部滚动条不占位（与 .page 一致） */
.recall-detail-page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.recall-detail-page {
  scrollbar-width: none;
}

/* ---------------------------------------------------------------------------
 * 3. 外壳通用工具类（统一 recall- 前缀，避免与现有 .page/.tab/.sheet 冲突）
 * ------------------------------------------------------------------------ */

/* 隐藏（比 .hidden 更明确地表明用途） */
.recall-hidden { display: none !important; }

/* 仅供读屏 */
.recall-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 页面级顶部固定栏兜底（模块可复用；sticky 相对 #page-history 生效） */
.recall-shell-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #f8f9fc;
  padding-top: 4px;
}
[data-theme="dark"] .recall-shell-topbar {
  background: #11151d;
}

/* 安全区辅助（详情页内部如需再留白时使用） */
.recall-safe-top { padding-top: env(safe-area-inset-top, 0px); }
.recall-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 无横向溢出的长文本兜底（标题/摘要） */
.recall-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}