/* ============================================================
   今日记事 · 深度 UI/UX 优化
   依据 ui-ux-pro-max（SaaS 设计系统）+ Taste/官方 frontend-design 设计原则
   手段：在编译后的应用上注入全局样式覆盖（不改源码）
   原则：令牌化、统一层次、150-300ms 平滑动效、可见聚焦、尊重 reduced-motion
   ============================================================ */

/* ---------- 1. 字体与文本渲染（精致系统字体栈，优化中文显示）---------- */
html, body, input, textarea, button, [contenteditable] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB",
    system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
code, pre, kbd, samp, [class*="font-mono"], [class*="codeblock"], [class*="code-block"] {
  font-family: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas,
    "Liberation Mono", Menlo, monospace !important;
}

/* ---------- 2. 精致滚动条 ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.32) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(100,116,139,.30);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(100,116,139,.55); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 3. 文本选区品牌色 ---------- */
::selection { background: rgba(22,119,255,.20); }

/* ---------- 4. 平滑过渡 + 微交互（仅交互元素）---------- */
button, a, [role="button"], [role="menuitem"], [role="tab"],
[role="option"], [class*="cursor-pointer"], summary {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .2s ease, transform .12s ease, opacity .18s ease !important;
}
/* 按钮按下轻微反馈 */
button:active:not([disabled]) { transform: translateY(0.5px) scale(0.992); }

/* ---------- 5. 键盘聚焦可见环（无障碍）---------- */
:focus-visible {
  outline: 2px solid var(--fill-default, #1677ff) !important;
  outline-offset: 2px !important;
}

/* ---------- 6. 顶栏：细分隔线营造层次 ---------- */
.appflowy-top-bar {
  box-shadow: inset 0 -1px 0 rgba(15,23,42,.06);
}

/* ---------- 7. 弹出层 / 菜单 / 对话框：统一柔和阴影 + 圆角 ---------- */
[class*="popover"], [role="menu"], [role="listbox"], [role="dialog"], [role="tooltip"] {
  box-shadow: 0 12px 40px rgba(15,23,42,.15), 0 2px 10px rgba(15,23,42,.07) !important;
}
[role="menu"], [class*="popover"] { border-radius: 12px !important; }
[role="menuitem"] { border-radius: 8px !important; }

/* ---------- 8. 输入框聚焦态：品牌色光晕 ---------- */
input:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(22,119,255,.14) !important;
}

/* ---------- 9. 进入动效：浮层淡入上浮（轻量，仅一次性）---------- */
@keyframes tplPopIn {
  from { opacity: 0; transform: translateY(4px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[role="menu"], [class*="popover"], [role="dialog"] {
  animation: tplPopIn .16s cubic-bezier(.16,1,.3,1);
}

/* ---------- 10. 尊重 reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   应用内部深度优化 v2（侧边栏 / 列表 / 正文 / 层次）
   ============================================================ */

/* 11. 列表 & 侧边栏：选中/悬停改为品牌蓝色调，导航定位更清晰（令牌覆盖，安全） */
:root, html, body {
  --fill-list-active: #e8f1ff !important;        /* 选中项：品牌浅蓝 */
  --fill-list-hover: rgba(22,119,255,.07) !important; /* 悬停：极浅品牌蓝 */
  --fill-content-hover: rgba(22,119,255,.06) !important; /* 次级悬停 */
}

/* 12. 侧边栏行：更舒适的高度与圆角、平滑过渡 */
.min-h-\[30px\].cursor-pointer {
  min-height: 33px !important;
  border-radius: 9px !important;
}

/* 13. 文档正文：更舒适的阅读行高 */
[contenteditable="true"] {
  line-height: 1.75 !important;
}

/* 14. 顶栏：去除粗重感，细腻分隔（v1 已加 inset 线，这里补背景虚化质感） */
.appflowy-top-bar {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(1.1) blur(8px);
}

/* 15. 文本输入/文本域统一更柔和的圆角 */
input, textarea {
  border-radius: 10px !important;
}

/* 16. 卡片/弹层 hover 轻微抬升（已在浮层加阴影，这里给可点击卡片轻交互） */
[class*="rounded"][class*="border"][class*="cursor-pointer"]:hover {
  border-color: rgba(22,119,255,.35) !important;
}