/* 体验优化附加样式：新手横幅、推荐原因徽章、错题页增强、宽屏两列题库列表。本文件只新增规则，不动移动端（<900px）原有布局。 */

/* ---------- 新手横幅（题库页） ---------- */
.onboarding-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}
.onboarding-banner span { flex: 1; }
.onboarding-close {
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.onboarding-close:hover { color: var(--text); background: rgba(37, 99, 235, 0.08); }

/* ---------- 今日任务推荐理由徽章 ---------- */
.rec-reason {
  margin-left: 8px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--code-bg);
  color: var(--text-2);
  white-space: nowrap;
}
.rec-reason-review { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.rec-reason-mistake { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.rec-reason-assisted { background: #e0e7ff; border-color: #c7d2fe; color: #3730a3; }
.rec-reason-new { background: #e8f7ee; border-color: #bfe6cd; color: #166534; }

/* ---------- 错题页汇总条与行内补充信息 ---------- */
.mistakes-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-2);
}
.mistake-reason {
  display: inline-block;
  max-width: 32em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-size: 11px;
  padding: 0 7px;
  border-radius: 4px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.mistake-note { color: var(--text-2); }
.mistake-related a { font-weight: 500; }

/* ---------- 宽屏（≥1600px）题库平铺列表两列 ----------
   只作用于题库页平铺视图（#plist-wrap 里的 .plist），
   分组视图、错题页和知识页列表不受影响。 */
@media (min-width: 1600px) {
  #plist-wrap > .plist { display: grid; grid-template-columns: 1fr 1fr; }
  #plist-wrap > .plist > .plist-row { border-bottom: 1px solid var(--border); }
  #plist-wrap > .plist > .plist-row:nth-child(odd) { border-right: 1px solid var(--border); }
  /* 末行不显示分隔线：奇数行时最后一行，偶数行时最后两行 */
  #plist-wrap > .plist > .plist-row:last-child,
  #plist-wrap > .plist > .plist-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  #plist-wrap > .plist > .empty-tip { grid-column: 1 / -1; }
}

/* ---------- 暗色主题 ---------- */
[data-theme='dark'] .onboarding-banner { background: #1e3a8a; border-color: #1e40af; }
[data-theme='dark'] .onboarding-close:hover { background: rgba(59, 130, 246, 0.2); }
[data-theme='dark'] .rec-reason-review { background: #451a03; border-color: #78350f; color: #fcd34d; }
[data-theme='dark'] .rec-reason-mistake { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
[data-theme='dark'] .rec-reason-assisted { background: #312e81; border-color: #4338ca; color: #c7d2fe; }
[data-theme='dark'] .rec-reason-new { background: #052e16; border-color: #14532d; color: #86efac; }
[data-theme='dark'] .mistake-reason { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }

/* ---------- AI 助手悬浮窗 ---------- */
.ai-tab, .progress-tab { width:28px; box-sizing:border-box; }
.ai-tab {
  position: fixed; right: 0; top: 45%; z-index: 1000;
  padding: 10px 7px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 8px 0 0 8px;
  font-size: 13px; line-height: 1.2; cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
}
.ai-tab:hover { background: var(--primary-hover); }

.ai-panel {
  position: fixed; right: 16px; bottom: 76px; z-index: 1100;
  width: 380px; height: min(560px, 72vh);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
/* hidden 属性会被 display:flex/grid 覆盖，这里显式补回 */
.ai-panel[hidden], .ai-ctx[hidden] { display: none; }

.ai-head {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.ai-title { flex: 1; font-weight: 600; font-size: 14px; }
.ai-icon-btn {
  border: 1px solid var(--border); background: transparent; color: var(--text);
  border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1;
}
.ai-icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.ai-icon-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.ai-config { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.ai-config-tip { color: var(--text-2); font-size: 12px; margin: 0 0 8px; }
.ai-config label { display: block; margin-bottom: 6px; color: var(--text-2); }
.ai-config input, .ai-config select {
  display: block; width: 100%; margin-top: 2px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-size: 13px;
}
.ai-config input:focus, .ai-config select:focus { outline: none; border-color: var(--primary); }
.ai-config .btn { margin-top: 4px; }
.ai-config-msg { margin: 6px 0 0; font-size: 12px; color: var(--fail); }
.ai-proxy-tip { margin: -2px 0 6px; font-size: 12px; color: var(--medium); }

.ai-msgs {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-msg { max-width: 88%; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.6; }
.ai-msg.user { align-self: flex-end; background: var(--primary); color: #fff; white-space: pre-wrap; }
.ai-msg.assistant { align-self: flex-start; background: var(--code-bg); }
.ai-msg.assistant.error { background: transparent; border: 1px solid var(--fail); color: var(--fail); }
.ai-msg.assistant p { margin: 0 0 6px; }
.ai-msg.assistant p:last-child { margin-bottom: 0; }
.ai-msg.assistant pre { overflow-x: auto; font-size: 12px; margin: 6px 0; }
.ai-msg.assistant pre code { white-space: pre; }
.ai-typing { color: var(--text-2); }
.ai-stopped { margin-top: 4px; font-size: 12px; color: var(--text-2); }

.ai-input { border-top: 1px solid var(--border); padding: 8px 10px; }
.ai-ctx { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.ai-ctx.disabled { opacity: 0.55; }
.ai-ctx input { accent-color: var(--primary); }
.ai-input textarea {
  width: 100%; resize: none; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font-size: 13px; font-family: inherit;
}
.ai-input textarea:focus { outline: none; border-color: var(--primary); }
.ai-input .btn { margin-top: 6px; width: 100%; }
.ai-input .btn.streaming { background: var(--fail); border-color: var(--fail); }

@media (max-width: 640px) {
  .ai-panel { width: calc(100vw - 32px); }
}

/* 做题页头部：力扣官方原题链接 */
.lc-link {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; color: var(--primary); border: 1px solid var(--border);
  background: var(--card); white-space: nowrap;
}
.lc-link:hover { border-color: var(--primary); }

.progress-tab {
  position:fixed; right:0; top:calc(45% + 76px); z-index:1000;
  padding:10px 7px; border:none;
  border-radius:8px 0 0 8px; background:var(--card); color:var(--text);
  font-size:13px; line-height:1.2; cursor:pointer;
  box-shadow:-2px 2px 8px rgba(0,0,0,.1);
}
.progress-tab:hover { border-color:var(--primary); color:var(--primary); }
.progress-tab.needs-attention::after {
  content:''; position:absolute; top:4px; left:4px; width:7px; height:7px;
  border-radius:50%; background:var(--fail, #dc2626);
}
.progress-panel {
  position:fixed; right:16px; bottom:76px; z-index:1100;
  width:min(360px, calc(100vw - 32px)); max-height:calc(100dvh - 100px);
  overflow-y:auto; border:1px solid var(--border); border-radius:12px;
  background:var(--card); color:var(--text); box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.progress-panel[hidden] { display:none; }
.progress-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); }
.progress-intro { margin:14px 16px 0; font-size:13px; color:var(--muted); line-height:1.6; }
.local-progress { display:flex; flex-direction:column; gap:10px; padding:14px 16px 16px; font-size:13px; }
.local-progress span { line-height:1.7; overflow-wrap:anywhere; }
.local-progress .btn { width:100%; white-space:normal; }
.local-progress .btn[hidden] { display:none; }
.local-progress .btn { font-size:12px; }
.practice-reason { font-size:12px; color:var(--muted, #666); margin-top:4px; white-space:normal; line-height:1.6; }
/* 配置较长时单独滚动，保证手机上的发送按钮始终可见。 */
.ai-head, .ai-input { flex-shrink:0; }
.ai-config { min-height:0; max-height:52%; flex-shrink:1; overflow-y:auto; }
.ai-msgs { min-height:0; }
@media (max-width:640px) {
  .ai-panel { bottom:60px; height:min(640px, 82dvh); }
}
/* 为右侧入口留出空隙，展开后仍可直接切换侧栏。 */
.ai-panel, .progress-panel { right:44px; max-width:calc(100vw - 60px); }

/* 知识正文中的题目引用：按需预览，不改变文章滚动位置。 */
.problem-preview-tip { color:var(--muted); font-size:12px; margin:0 0 16px; }
.problem-reference, .problem-preview-link {
  border:0; background:transparent; color:var(--primary); font:inherit;
  padding:0; cursor:pointer; text-decoration:underline; text-decoration-style:dotted;
  text-underline-offset:3px;
}
.problem-reference:hover, .problem-preview-link:hover { text-decoration-style:solid; }
.problem-reference:focus-visible, .problem-preview-link:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:2px; }
.problem-preview-link { font-size:12px; white-space:nowrap; margin-left:6px; }
.problem-preview {
  margin:auto; inset:0;
  width:min(680px, calc(100vw - 32px)); max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--border);
  border-radius:14px; color:var(--text); background:var(--card);
  box-shadow:0 12px 48px rgba(0,0,0,.25); overflow:hidden;
}
.problem-preview::backdrop { background:rgba(15,23,42,.35); }
.problem-preview-layout { display:flex; flex-direction:column; max-height:calc(100dvh - 42px); }
.problem-preview-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; flex-shrink:0; }
.problem-preview-head { border-bottom:1px solid var(--border); }
.problem-preview-head h2 { margin:4px 0 0; font-size:18px; line-height:1.5; }
.problem-preview-eyebrow { font-size:12px; color:var(--muted); }
.problem-preview-head .btn { flex-shrink:0; }
.problem-preview-body { padding:8px 20px 20px; overflow-y:auto; overscroll-behavior:contain; min-height:0; overflow-wrap:anywhere; }
.problem-preview-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.problem-preview-actions .btn.primary:hover { background:var(--primary-hover); }
@media (max-width:640px) {
  .problem-preview-head { padding:12px 14px; gap:10px; flex-wrap:wrap; }
  .problem-preview-actions { margin-left:auto; }
  .problem-preview-body { padding:4px 14px 14px; }
}

.progress-summary { padding:16px 16px 0; }
.progress-summary-label { display:flex; justify-content:space-between; font-size:13px; }
.progress-summary-count { font-variant-numeric:tabular-nums; color:var(--muted); }

.ai-msg.assistant { min-width:0; overflow-wrap:anywhere; }
.ai-msg.assistant h1, .ai-msg.assistant h2, .ai-msg.assistant h3,
.ai-msg.assistant h4, .ai-msg.assistant h5, .ai-msg.assistant h6 { margin:12px 0 6px; line-height:1.45; }
.ai-msg.assistant h1 { font-size:19px; }
.ai-msg.assistant h2 { font-size:17px; }
.ai-msg.assistant h3 { font-size:15px; }
.ai-msg.assistant h4, .ai-msg.assistant h5, .ai-msg.assistant h6 { font-size:13px; }
.ai-msg.assistant > :first-child { margin-top:0; }
.ai-msg.assistant hr { border:0; border-top:1px solid var(--border); margin:12px 0; }
.ai-msg.assistant ul, .ai-msg.assistant ol { padding-left:22px; margin:6px 0; }
.ai-msg.assistant li { margin:3px 0; }
.ai-msg.assistant table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:8px 0; }
.ai-msg.assistant th, .ai-msg.assistant td { border:1px solid var(--border); padding:5px 8px; }