/*!
 * coach-chat-buttons.css — 方案 B：教练并进板块聊天后的 4 个快捷按钮
 *
 * 只有两样东西：
 *   · .coach-quickbar   输入框上方那一行小胶囊（数竞 / 信竞才出现）
 *   · .coach-merge-hint 空态里那句定位说明（「要讲透整道题点 🎯；问概念直接聊」）
 *
 * 约定：
 *   · 颜色全走 chat.css 的 CSS 变量（深色主题自动生效），变量缺失时有浅色兜底
 *   · 375 宽必须**换行**、绝不横向滚动（flex-wrap + 每个胶囊 max-width:100%）
 *   · [hidden] 兜底必须带 !important（.dsh-tools/check-hidden-css.mjs 会查）
 *   · 不做 sticky / fixed：它就在输入框上面，跟着输入区一起走
 */

/* ── 那一行胶囊 ───────────────────────────────────────────────── */
.coach-quickbar {
  max-width: 820px;
  margin: 0 auto 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.coach-quick {
  flex: 0 1 auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 999px;
  background: var(--bg-side, #f7f8fa);
  color: var(--ink-soft, #4a5163);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.coach-quick:hover {
  background: var(--bg-hover, #eceef2);
  color: var(--ink, #1b1e28);
  border-color: #d6dae4;
}
.coach-quick:active { transform: scale(.97); }
.coach-quick:focus-visible {
  outline: 2px solid var(--brand, #4d6bfe);
  outline-offset: 2px;
}

/* 讲透模式开着：明显高亮（学生一眼能看出"现在不是普通聊天"） */
.coach-quick.is-on,
.coach-quick[aria-pressed="true"] {
  background: var(--bubble-user, #eff3ff);
  border-color: var(--brand, #4d6bfe);
  color: var(--brand, #4d6bfe);
  font-weight: 700;
}
.coach-quick.is-on:hover,
.coach-quick[aria-pressed="true"]:hover {
  background: var(--bubble-user, #eff3ff);
  color: var(--brand-strong, #3a56e0);
}

/* ── 第 5 个胶囊：🆘 卡住了（陪做模式）─────────────────────────
   和 🎯 是一对**互斥**的开关：一个"讲透给你听"，一个"陪你自己做出来"。
   颜色故意不一样（🆘 用暖红/橙）：学生一眼能看出"现在这个模式不给答案"。
   深色主题靠 chat.css 的变量自动生效（变量缺失时有浅色兜底）。 */
.coach-quick-tutor {
  border-style: dashed;
}
.coach-quick-tutor.is-on,
.coach-quick-tutor[aria-pressed="true"] {
  background: var(--warn-soft, #fff3ec);
  border-color: var(--warn, #e2683c);
  border-style: solid;
  color: var(--warn-strong, #c14a22);
  font-weight: 700;
}
.coach-quick-tutor.is-on:hover,
.coach-quick-tutor[aria-pressed="true"]:hover {
  background: var(--warn-soft, #fff3ec);
  color: var(--warn-strong, #c14a22);
}

/* ── 空态那句定位说明 ─────────────────────────────────────────── */
.coach-merge-hint {
  max-width: 52ch;
  margin: -12px auto 22px;
  padding: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--muted, #8b93a7);
  text-align: center;
}
.coach-merge-hint b {
  color: var(--ink-soft, #4a5163);
  font-weight: 600;
}

/* ── 手机上再小一点，保证 5 个胶囊两行内放得下 ───────────────── */
@media (max-width: 560px) {
  .coach-quickbar { gap: 5px; }
  .coach-quick { font-size: 12px; padding: 4px 9px; }
}
@media (max-width: 380px) {
  /* 375 宽时 5 个胶囊一定会换行：让它们贴着左边排，不横向溢出 */
  .coach-quickbar { gap: 4px; }
  .coach-quick { font-size: 11.5px; padding: 4px 8px; }
}

/* [hidden] 兜底：作者样式的 display:flex 会覆盖浏览器默认规则 */
[hidden] { display: none !important; }