/* ==========================================================================
   recite-extras.css — 背诵模块两个新功能的样式
     ① 「📷 拍照录入」里的「📄 导入 Word / txt」那一行（recite-word-import.js）
     ② 断点续背的"上次背到第 X 段 / 从头开始"弹层（recite-position.js）

   约定：
     · 颜色全部走 chat.css 的 CSS 变量 → 深色主题自动跟随（html[data-theme="dark"]）
     · 不改 chat.css / 不动别处的类名，整个文件只新增 .rcw-* / .rcp-* 两套
     · 375 宽是主要目标：按钮可以换行、卡片不超过 92vw
   ========================================================================== */

/* ---------- ① Word / txt 导入 ---------- */

.rcw-box {
  margin: 2px 0 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line, #e6e8ee);
  border-radius: 11px;
  background: var(--bg-side, #f7f8fa);
}

.rcw-btn {
  width: 100%;
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  border: 1px solid var(--line, #e6e8ee);
  font-weight: 600;
}

.rcw-btn:hover { background: var(--bg-hover, #eceef2); border-color: var(--brand, #4d6bfe); }
.rcw-btn:disabled { opacity: .6; cursor: default; }

.rcw-tip {
  margin: 7px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted, #8b93a7);
}

.rcw-msg {
  margin: 6px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--brand, #4d6bfe);
  word-break: break-word;
}

.rcw-msg.is-err { color: var(--danger, #d93025); }

.rcw-over { color: var(--danger, #d93025); }

/* 「这篇很大，拆句会比较久」的提示。
 *
 * 为什么用橙色而不是红色：
 *   红色留给**错误**（超上限、文件读不了）。
 *   这条只是**提醒**，材料是合法的、可以正常保存 —— 用红色会让用户
 *   以为出错了，反而不敢点。
 *
 * 为什么带一点背景色：
 *   它出现在一串导入结果文案的末尾，纯文字容易被当成"又一句说明"跳过。
 *   加一个浅浅的底色，视觉上"跳"出来，才会被读到。 */
.rcw-slow {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--warn-bg, #fff4e5);
  color: var(--warn, #b45309);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.5;
}
/* 深色模式：浅橙底在深色背景上会刺眼，换成半透明橙 */
html[data-theme="dark"] .rcw-slow {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

/* ---------- ② 断点续背弹层 ---------- */

.rcp-modal {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* 背诵本 60 / 背诵训练 65 / 背作文 68 —— 都要盖住 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  background: rgba(17, 20, 32, .46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.rcp-modal[hidden] { display: none !important; }

.rcp-card {
  width: min(92vw, 400px);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 20px 18px;
  border-radius: 16px;
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  border: 1px solid var(--line, #e6e8ee);
  box-shadow: 0 18px 50px -18px rgba(16, 22, 44, .45);
  text-align: center;
}

.rcp-emoji { font-size: 30px; line-height: 1; margin-bottom: 8px; }

.rcp-title {
  margin: 0 0 6px;
  font-size: 1.06rem;
  line-height: 1.45;
}

.rcp-meta {
  margin: 0 0 4px;
  font-size: .82rem;
  color: var(--muted, #8b93a7);
}

.rcp-mat {
  margin: 0 0 10px;
  font-size: .84rem;
  color: var(--ink-soft, #4a5163);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcp-lead {
  margin: 0 0 16px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted, #8b93a7);
}

.rcp-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* .btn-primary 在 chat.css 里是 width:100% —— 弹层里两个按钮要并排，必须收回来 */
.rcp-acts .btn {
  flex: 1 1 150px;
  width: auto;
  min-height: 44px;            /* 手机上好点 */
  padding: 10px 14px;
  font-size: .9rem;
}

.rcp-acts .rcp-btn[data-rcp="continue"] { white-space: nowrap; }

/* 「从头开始」是次要动作：用主题色，别用浏览器默认的白底（深色主题下会刺眼） */
.rcp-acts .btn[data-rcp="restart"] {
  background: var(--bg, #fff);
  color: var(--ink, #1b1e28);
  border: 1px solid var(--line, #e6e8ee);
}
.rcp-acts .btn[data-rcp="restart"]:hover { background: var(--bg-hover, #eceef2); }

/* 375 宽：两个按钮各占一半会挤掉字，改成上下两行（拇指更好点） */
@media (max-width: 380px) {
  .rcp-acts { flex-direction: column; }
  .rcp-acts .btn { flex: 1 1 auto; width: 100%; }
  .rcp-card { padding: 20px 16px 16px; }
}

/* 深色主题：卡片用变量已经跟着变了，这里只把遮罩压深一点 */
html[data-theme="dark"] .rcp-modal { background: rgba(4, 6, 12, .62); }
html[data-theme="dark"] .rcp-card { box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .8); }