/* ---------- the prompt coach (composer/coach.js) ---------- */

/* The ✎ row stands out from earlier prompts: its text is an action, not a match. */
#suggest li.coach .txt { color: var(--accent); }
#suggest li.coach .ico { color: var(--accent); }

/* The questions under the message box: one row per question, its choices as chips.
   The design system question (composer/ds-ask.js) looks the same, above the box. */
#coach, #ds-ask {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px);
  animation: coach-in 0.25s var(--ease) both;
}
@keyframes coach-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #coach, #ds-ask { animation: none; } }
:is(#coach, #ds-ask) .coach-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
:is(#coach, #ds-ask) .coach-label { flex: none; min-width: 10em; color: var(--muted); font-size: 13px; }
:is(#coach, #ds-ask) .chips { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#coach, #ds-ask) .chip {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
:is(#coach, #ds-ask) .chip:hover, :is(#coach, #ds-ask) .chip:focus-visible { border-color: var(--accent); outline: none; }
#coach .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
#coach .coach-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
#coach .coach-close:hover, #coach .coach-close:focus-visible { background: var(--surface-2); color: var(--fg); outline: none; }

/* Ask mode: above the message box, with Send and Do it anyway; a question left unanswered after a try is marked. */
#coach.ask { margin: 0 0 10px; }
:is(#coach, #ds-ask) .coach-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
:is(#coach, #ds-ask) .coach-actions button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#coach .coach-actions .primary { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
#coach .coach-actions .primary:disabled { opacity: 0.45; cursor: default; }
:is(#coach, #ds-ask) .coach-actions button:not(:disabled):hover, :is(#coach, #ds-ask) .coach-actions button:focus-visible { border-color: var(--accent); outline: none; }
#coach .coach-q.missing .coach-label { color: var(--danger, #c0392b); font-weight: 600; }

/* The design system question: above the box like ask mode, each chip with its first color. */
#ds-ask { margin: 0 0 10px; padding-right: 14px; }
#ds-ask .chip { display: inline-flex; align-items: center; gap: 6px; }
#ds-ask .ds-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); }