/* ET+ AI Tutor — rich-response formatter styles (Phase 4 / 4.6).
 *
 * Brand-aligned card styles for the structural blocks detected by
 * etp-rich-format.js. All selectors live under `.message__content`
 * descendants — never touch global typography.
 *
 * Palette + tokens reuse the canonical cyberpunk-futuristic shell
 * (background #061224, primary #00C8FF cyan, secondary #00FF88 lime,
 * accent #A78BFA violet, warning #FF8A65 amber, danger #FF5252 coral).
 *
 * Reduced-motion guard at the bottom: every transition + animation
 * disables when the user's OS prefers-reduced-motion is set.
 */

/* ---- Code block ------------------------------------------------- */

.message__content .etp-rich-code {
  margin: 12px 0;
  background: rgba(6, 18, 36, 0.92);
  border: 1px solid rgba(0, 200, 255, 0.32);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(0, 200, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.message__content .etp-rich-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 200, 255, 0.07);
  border-bottom: 1px solid rgba(0, 200, 255, 0.18);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00C8FF;
}
.message__content .etp-rich-code__lang { font-weight: 700; }
.message__content .etp-rich-code__copy {
  background: transparent;
  border: 1px solid rgba(0, 200, 255, 0.45);
  color: #00C8FF;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.message__content .etp-rich-code__copy:hover {
  background: rgba(0, 200, 255, 0.18);
  border-color: #00C8FF;
}
.message__content .etp-rich-code__pre {
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #E5F3FF;
  overflow-x: auto;
  white-space: pre;
}
.message__content .etp-rich-code__pre code { background: transparent; padding: 0; color: inherit; }

.message__content .rf-tok-keyword  { color: #FF8A65; font-weight: 600; }
.message__content .rf-tok-string   { color: #00FF88; }
.message__content .rf-tok-number   { color: #C792EA; }
.message__content .rf-tok-comment  { color: #6E7B8F; font-style: italic; }

/* ---- Generic semantic-card scaffold ----------------------------- */

.message__content .etp-rich-concept,
.message__content .etp-rich-example,
.message__content .etp-rich-quiz,
.message__content .etp-rich-steps,
.message__content .etp-rich-vocab,
.message__content .etp-rich-misconception {
  position: relative;
  margin: 14px 0;
  padding: 14px 16px 12px 16px;
  background: rgba(6, 18, 36, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.message__content .etp-rich-concept       { border-left: 4px solid #A78BFA; box-shadow: 0 0 24px rgba(167, 139, 250, 0.10); }
.message__content .etp-rich-example       { border-left: 4px solid #00FF88; box-shadow: 0 0 24px rgba(0, 255, 136, 0.10); }
.message__content .etp-rich-quiz          { border-left: 4px solid #00C8FF; box-shadow: 0 0 24px rgba(0, 200, 255, 0.12); }
.message__content .etp-rich-steps         { border-left: 4px solid #00C8FF; }
.message__content .etp-rich-vocab         { border-left: 4px solid #C792EA; }
.message__content .etp-rich-misconception { border-left: 4px solid #FF5252; background: rgba(60, 18, 18, 0.45); }

.message__content .etp-rich-pill {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
}
.message__content .etp-rich-concept       .etp-rich-pill { color: #A78BFA; background: rgba(167, 139, 250, 0.14); }
.message__content .etp-rich-example       .etp-rich-pill { color: #00FF88; background: rgba(0, 255, 136, 0.12); }
.message__content .etp-rich-quiz          .etp-rich-pill { color: #00C8FF; background: rgba(0, 200, 255, 0.14); }
.message__content .etp-rich-steps         .etp-rich-pill { color: #00C8FF; background: rgba(0, 200, 255, 0.14); }
.message__content .etp-rich-vocab         .etp-rich-pill { color: #C792EA; background: rgba(199, 146, 234, 0.14); }
.message__content .etp-rich-misconception .etp-rich-pill { color: #FF5252; background: rgba(255, 82, 82, 0.14); }

/* Inner element tidy-up so the existing markdown's paragraph margin
 * doesn't double up inside the card. */
.message__content .etp-rich-concept > p,
.message__content .etp-rich-example > p,
.message__content .etp-rich-quiz > p,
.message__content .etp-rich-misconception > p { margin: 4px 0 8px 0; }

/* ---- Steps list — cyan numbered bullets ------------------------- */

.message__content .etp-rich-steps ol {
  counter-reset: rf-step;
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
}
.message__content .etp-rich-steps li {
  counter-increment: rf-step;
  position: relative;
  padding: 4px 0 4px 36px;
  margin: 6px 0;
}
.message__content .etp-rich-steps li::before {
  content: counter(rf-step);
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 200, 255, 0.12);
  border: 1px solid rgba(0, 200, 255, 0.50);
  color: #00C8FF;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}

/* ---- Vocabulary card grid --------------------------------------- */

.message__content .etp-rich-vocab ul,
.message__content .etp-rich-vocab dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.message__content .etp-rich-vocab li,
.message__content .etp-rich-vocab dt {
  padding: 8px 12px;
  background: rgba(199, 146, 234, 0.07);
  border: 1px solid rgba(199, 146, 234, 0.22);
  border-radius: 8px;
  font-size: 14px;
}

/* ---- Quiz answer choices ---------------------------------------- */

.message__content .etp-rich-quiz ol,
.message__content .etp-rich-quiz ul {
  list-style: none;
  padding-left: 0;
  counter-reset: rf-choice;
}
.message__content .etp-rich-quiz li {
  counter-increment: rf-choice;
  position: relative;
  padding: 6px 8px 6px 36px;
  margin: 4px 0;
  background: rgba(0, 200, 255, 0.04);
  border: 1px solid rgba(0, 200, 255, 0.18);
  border-radius: 8px;
}
.message__content .etp-rich-quiz li::before {
  content: counter(rf-choice, upper-alpha);
  position: absolute;
  left: 8px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 200, 255, 0.18);
  color: #00C8FF;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}

/* ---- Table wrap ------------------------------------------------- */

.message__content .etp-rich-table {
  margin: 12px 0;
  overflow-x: auto;
  border: 1px solid rgba(0, 200, 255, 0.22);
  border-radius: 10px;
}
.message__content .etp-rich-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.message__content .etp-rich-table thead {
  background: rgba(0, 200, 255, 0.08);
}
.message__content .etp-rich-table th,
.message__content .etp-rich-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

/* ---- Reduced-motion guard --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .message__content .etp-rich-code__copy { transition: none; }
}