/* ============================================================
   ReOri 通用交互层（js/ui.js 的样式）
   ------------------------------------------------------------
   弱网（100~1000KB/s）下每一个异步操作都必须"看得见"：
   顶部进度条 / 骨架屏 / 加载态 / 失败态+重试 / 按钮忙碌态 / 轻提示。
   全部使用 reori- 前缀，避免与各页面既有样式冲突。
   ============================================================ */

:root {
  --reori-accent: var(--theme-color, #399fff);
  --reori-text: #333;
  --reori-muted: #7a7f8c;
  --reori-surface: #ffffff;
  --reori-surface-2: #f1f3f8;
  --reori-border: rgba(15, 23, 42, .09);
  --reori-shadow: 0 10px 30px rgba(15, 23, 42, .14);
  --reori-danger: #e5484d;
  --reori-ok: #2f9e63;
  --reori-skel-a: rgba(15, 23, 42, .07);
  --reori-skel-b: rgba(15, 23, 42, .13);
}

[data-theme="dark"] {
  --reori-text: #d7d9e6;
  --reori-muted: #8f93a8;
  --reori-surface: #1d1f2e;
  --reori-surface-2: #262939;
  --reori-border: rgba(255, 255, 255, .1);
  --reori-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  --reori-skel-a: rgba(255, 255, 255, .07);
  --reori-skel-b: rgba(255, 255, 255, .14);
}

/* ---------- 通用工具 ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 页面首次加载进度条（纯 CSS，不需要等 JS） ---------- */
#reori-bootbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483600;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  transition: opacity .35s ease;
}

#reori-bootbar > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  transform: translateX(-110%);
  background: linear-gradient(90deg, rgba(57, 159, 255, 0), var(--reori-accent) 60%, #86d3ff);
  box-shadow: 0 0 10px rgba(57, 159, 255, .6);
  animation: reori-boot-run 1.15s cubic-bezier(.45, .05, .55, .95) infinite;
}

#reori-bootbar.is-done {
  opacity: 0;
}

@keyframes reori-boot-run {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* ---------- 请求进度条（js/ui.js 动态创建） ---------- */
#reori-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483600;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  contain: strict;
  transition: opacity .18s linear .12s;
}

#reori-topbar.is-active {
  opacity: 1;
}

#reori-topbar.is-done {
  opacity: 0;
  transition-delay: 0s;
}

#reori-topbar .reori-topbar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  opacity: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, rgba(57, 159, 255, 0), var(--reori-accent) 55%, #7cd0ff);
  box-shadow: 0 0 8px rgba(57, 159, 255, .55);
  /* 完成时从当前进度"扫到"100%，比硬跳更有完成感 */
  transition: transform .22s ease-out, width .22s ease-out, opacity .18s linear;
}

#reori-topbar.is-active .reori-topbar__fill {
  opacity: 1;
  animation: reori-bar-run 1.25s cubic-bezier(.45, .05, .55, .95) infinite;
}

#reori-topbar.is-slow .reori-topbar__fill {
  animation-duration: 2.1s;
  background: linear-gradient(90deg, rgba(255, 176, 32, 0), #ffb020 55%, #ffd27a);
}

#reori-topbar.is-done .reori-topbar__fill {
  animation: none;
  width: 100%;
  transform: none;
  opacity: 1;
}

/* 可量化进度（上传大文件）：一条从 0 铺满的实心条，宽度由 JS 按已发送字节数缩放。
   和上面的「来回跑」互斥，所以这里把动画彻底停掉，避免两个 transform 打架。 */
#reori-topbar.is-determinate .reori-topbar__fill {
  width: 100%;
  opacity: 1;
  animation: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s linear, opacity .15s linear;
}

@keyframes reori-bar-run {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}

/* ---------- 轻提示 ---------- */
#reori-toasts {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483610;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92vw, 460px);
  pointer-events: none;
  font-family: 'Segoe UI', 'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
}

.reori-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--reori-border);
  background: var(--reori-surface);
  color: var(--reori-text);
  box-shadow: var(--reori-shadow);
  font-size: 14px;
  line-height: 1.45;
  animation: reori-toast-in .26s cubic-bezier(.2, .9, .3, 1);
  will-change: transform, opacity;
}

.reori-toast.is-out {
  animation: reori-toast-out .2s ease forwards;
}

.reori-toast--error { border-color: rgba(229, 72, 77, .38); }
.reori-toast--success { border-color: rgba(47, 158, 99, .38); }

/* 图标统一用内联 SVG 线稿：emoji 在不同系统/字体下形状与配色差异太大，
   而且彩色 emoji 和站内冷静的浅色风格不搭。这里只负责尺寸与颜色。 */
.reori-toast__ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--reori-accent);
}

.reori-toast__ico svg {
  display: block;
  width: 18px;
  height: 18px;
}

.reori-toast--error .reori-toast__ico { color: var(--reori-danger); }
.reori-toast--success .reori-toast__ico { color: var(--reori-ok); }
.reori-toast--warn .reori-toast__ico { color: #e8a021; }

.reori-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.reori-toast__action {
  flex: 0 0 auto;
  border: 1px solid var(--reori-border);
  background: var(--reori-surface-2);
  color: var(--reori-accent);
  font: inherit;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.reori-toast__action:hover { filter: brightness(1.05); }

.reori-toast__x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--reori-muted);
  line-height: 1;
  padding: 3px;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reori-toast__x svg {
  display: block;
  width: 14px;
  height: 14px;
}

.reori-toast__x:hover { color: var(--reori-text); }

@keyframes reori-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes reori-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(6px) scale(.99); }
}

/* ---------- 旋转指示器 ---------- */
.reori-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  opacity: .75;
  animation: reori-spin .75s linear infinite;
}

.reori-spinner--lg {
  width: 26px;
  height: 26px;
  border-width: 3px;
}

@keyframes reori-spin {
  to { transform: rotate(360deg); }
}

/* ---------- 骨架屏 ---------- */
.reori-skel {
  background-color: var(--reori-skel-a);
  background-image: linear-gradient(90deg, transparent 20%, var(--reori-skel-b) 40%, transparent 60%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  border-radius: 7px;
  animation: reori-shimmer 1.5s ease-in-out infinite;
}

@keyframes reori-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -60% 0; }
}

.reori-skel--text { height: 12px; margin-bottom: 9px; }
.reori-skel--title { height: 18px; width: 46%; margin-bottom: 12px; border-radius: 6px; }
.reori-skel--cover { width: 100%; height: 148px; border-radius: 0; }

/* 与首页 .blog-card 一致：封面在上，正文在下 */
.reori-skel-blog {
  display: block;
  padding: 0;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--reori-border);
  background: var(--reori-surface);
  overflow: hidden;
}

.reori-skel-blog__body { padding: 16px 20px 20px; }
.reori-skel-blog__body .reori-skel--text:nth-of-type(2) { width: 88%; }
.reori-skel-blog__body .reori-skel--text:last-of-type { margin-bottom: 0; width: 62%; }
.reori-skel-blog__meta { margin-top: 16px; height: 10px; width: 34%; }

.reori-skel-line { height: 10px; margin-bottom: 8px; }

@media (max-width: 768px) {
  .reori-skel--cover { height: 112px; }
  .reori-skel-blog__body { padding: 14px; }
}

/* ---------- 内联状态块（加载 / 失败 / 空） ---------- */
.reori-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 38px 16px;
  text-align: center;
  color: var(--reori-muted);
  font-size: 14px;
  font-family: 'Segoe UI', 'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
}

.reori-state--loading { color: var(--reori-muted); }

.reori-state__ico {
  font-size: 26px;
  line-height: 1;
  color: var(--reori-muted);
  display: inline-flex;
}

.reori-state__ico svg {
  display: block;
  width: 1em;
  height: 1em;
}

.reori-state--error .reori-state__ico { color: var(--reori-danger); }

.reori-state__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--reori-text);
}

.reori-state__desc {
  font-size: 13px;
  color: var(--reori-muted);
  max-width: 34em;
}

.reori-state__btn {
  margin-top: 4px;
  border: 1px solid var(--reori-border);
  background: var(--reori-surface);
  color: var(--reori-accent);
  font: inherit;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 9px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.reori-state__btn:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .09); }
.reori-state__btn:active { transform: scale(.98); }

/* ---------- 按钮忙碌态 ---------- */
.reori-busy {
  position: relative !important;
  pointer-events: none !important;
  cursor: progress !important;
  color: transparent !important;
  opacity: .82;
}

.reori-busy > * { visibility: hidden; }

.reori-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--reori-busy-fg, #fff);
  border-right-color: transparent;
  border-radius: 50%;
  animation: reori-spin .75s linear infinite;
  visibility: visible;
}

/* ---------- 微交互 ---------- */
/* 原则：只动 transform / opacity / filter —— 这三样走合成器，不触发布局与重绘，
   所以哪怕在弱机上也不会因为"好看一点"而卡顿。缓动统一用下面这套变量。 */
:root {
  --reori-ease-out: cubic-bezier(.22, .61, .36, 1);
  --reori-ease-spring: cubic-bezier(.2, .9, .25, 1.06);
  --reori-dur-1: .14s;
  --reori-dur-2: .22s;
}

/* 键盘聚焦环：只在"用键盘/读屏"操作时出现，鼠标点击不会闪一下蓝框 */
:focus-visible {
  outline: 2px solid var(--reori-accent, #399fff);
  outline-offset: 2px;
}

/* 按压反馈用 brightness 而不是 transform：不少按钮自带 rotate/scale，
   改 transform 会把它们的姿态顶掉，brightness 叠上去永远是安全的。 */
button:not(:disabled):active,
.reori-btn:not(:disabled):active,
.bbs-topic-delete-btn:active {
  filter: brightness(.92);
  transition: filter .08s linear;
}

/* ---------- 低配：只降规格，不砍效果 ---------- */
/* 背景网格与毛玻璃是观感的一部分，任何档位都不整体关闭（曾经在这里 display:none
   掉 #bg-canvas、并对所有元素 backdrop-filter:none，结果普通 4 核机器上整站变"素"）。
   真正耗时的部分改由 js/bg.js 按档位降：像素比、网格密度、帧率；
   这里只把"纯装饰、持续重绘"的循环动画放慢，减轻合成器负担。 */
html.reori-lite .reori-skel { animation-duration: 2.2s; }
html.reori-ultra-lite .reori-skel { animation-duration: 3s; }

html.reori-reduced-motion {
  scroll-behavior: auto;
}

/* ---------- 无障碍：尊重"减少动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  #reori-bootbar > i,
  #reori-topbar .reori-topbar__fill {
    animation: none !important;
    width: 100%;
    transform: none;
  }

  .reori-skel {
    animation: none !important;
    background-image: none;
  }

  .reori-toast,
  .reori-toast.is-out {
    animation-duration: 1ms !important;
  }
}

@media (max-width: 640px) {
  #reori-toasts {
    width: calc(100vw - 24px);
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .reori-toast { font-size: 13.5px; padding: 10px; }

  .reori-skel--cover { width: 92px; height: 76px; }
}