/* ============================================================
 * ET+ AI Tutor — AI Whiteboard (Phase 8 MVP, 2026-05-22h)
 *
 * Implements the spec at
 *   docs/design/et-plus-ai-tutor/flagship-spec-2026-05-22.md
 *   §2 (AI Whiteboard)
 *
 * Surfaces:
 *   - whiteboard.html     (full-page, instructor solo)
 *   - tutor.html via Cmd-W toggle (split view — chat + iframe)
 *   - huddle.html         (projector composition — Phase 9 deferred)
 *
 * Scale gating:
 *   - hero/classroom only (matches the arm-group convention in
 *     etp-character.css §11). At convo/chrome the avatar is too
 *     small to be a useful collaborator.
 *
 * Tokens reused:
 *   --etp-body-highlight / -mid / -shadow / -deep (surface fills)
 *   --etp-light-* (toolbar glow + selected primitive)
 *   --etp-mouth (text rendering colour)
 *
 * Brand palette (per the 3-colour constraint in spec §2.3):
 *   #96D35F  primary green   (stroke + filled shapes)
 *   #000000  secondary black (default stroke)
 *   #4BAEE8  avatar iris blue (selected + AI-contribution)
 * ============================================================ */

:root {
  --wb-bg:               #FFFFFF;
  --wb-grid:             rgba(0, 0, 0, 0.04);
  --wb-toolbar-bg:       rgba(255, 255, 255, 0.92);
  --wb-toolbar-border:   rgba(0, 0, 0, 0.08);
  --wb-toolbar-shadow:   0 2px 18px rgba(0, 0, 0, 0.06);
  --wb-button-hover:     rgba(150, 211, 95, 0.10);
  --wb-button-active:    rgba(150, 211, 95, 0.20);
  --wb-button-stroke:    rgba(0, 0, 0, 0.20);
  --wb-ai-contribution:  rgba(75, 174, 232, 0.10);
  --wb-status-success:   #2A9D5F;
  --wb-status-error:     #C04141;
  --wb-status-info:      #4BAEE8;
}

/* ============================================================
 * 1. Page layout — whiteboard.html
 * ============================================================ */

body.etp-whiteboard-page {
  margin: 0;
  padding: 0;
  background: #F2F5F8;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

.etp-wb-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: 64px 1fr 32px;
  grid-template-areas:
    "toolbar avatar"
    "canvas  avatar"
    "status  status";
  height: 100vh;
  height: 100dvh;
  width: 100vw;
}

.etp-wb-shell--tutor-embedded {
  /* When mounted inside tutor.html split view, the toolbar
     simplifies and the avatar rail collapses (the parent
     tutor.html already shows ET+ in its own surface). */
  grid-template-columns: 1fr;
  grid-template-areas:
    "toolbar"
    "canvas"
    "status";
}

.etp-wb-toolbar {
  grid-area: toolbar;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  background: var(--wb-toolbar-bg);
  border-bottom: 1px solid var(--wb-toolbar-border);
  box-shadow: var(--wb-toolbar-shadow);
  z-index: 2;
  overflow-x: auto;
  overflow-y: hidden;
}

.etp-wb-toolbar__title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: #1A1F2E;
  margin-right: 24px;
  letter-spacing: -0.01em;
}

.etp-wb-toolbar__group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-right: 1px solid var(--wb-toolbar-border);
  height: 40px;
}

.etp-wb-toolbar__group:last-child {
  border-right: none;
  margin-left: auto;
}

.etp-wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #1A1F2E;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
}

.etp-wb-btn:hover {
  background: var(--wb-button-hover);
}

.etp-wb-btn[aria-pressed="true"],
.etp-wb-btn--active {
  background: var(--wb-button-active);
  border-color: rgba(150, 211, 95, 0.45);
}

.etp-wb-btn:focus-visible {
  outline: 2px solid #4BAEE8;
  outline-offset: 2px;
}

.etp-wb-btn__icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etp-wb-btn--filled .etp-wb-btn__icon {
  fill: currentColor;
  stroke: none;
}

.etp-wb-toolbar__swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
  padding: 0;
}

.etp-wb-toolbar__swatch:hover {
  transform: scale(1.08);
}

.etp-wb-toolbar__swatch[aria-pressed="true"] {
  border-color: #1A1F2E;
}

.etp-wb-toolbar__swatch--green  { background: #96D35F; }
.etp-wb-toolbar__swatch--black  { background: #000000; }
.etp-wb-toolbar__swatch--blue   { background: #4BAEE8; }

.etp-wb-toolbar__divider {
  width: 1px;
  height: 24px;
  background: var(--wb-toolbar-border);
  margin: 0 4px;
}

/* ============================================================
 * 2. Canvas area
 * ============================================================ */

.etp-wb-canvas-wrap {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
  background: var(--wb-bg);
  background-image:
    linear-gradient(var(--wb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--wb-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

.etp-wb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;  /* CRITICAL: lets touchmove run without page-scroll fighting */
}

.etp-wb-canvas--tool-text   { cursor: text; }
.etp-wb-canvas--tool-select { cursor: default; }
.etp-wb-canvas--tool-eraser { cursor: not-allowed; }
.etp-wb-canvas--tool-pan    { cursor: grab; }

/* Inline-edit text overlay: a positioned <input type="text">
   that appears over the canvas when the text tool is active. */
.etp-wb-text-input {
  position: absolute;
  border: 1px dashed rgba(75, 174, 232, 0.6);
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 6px;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  color: #1A1F2E;
  border-radius: 3px;
  outline: none;
  min-width: 80px;
  z-index: 3;
}

/* ============================================================
 * 3. Avatar right-rail panel
 * ============================================================ */

.etp-wb-avatar {
  grid-area: avatar;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg,
    rgba(232, 244, 255, 0.5) 0%,
    rgba(191, 220, 242, 0.3) 100%);
  border-left: 1px solid var(--wb-toolbar-border);
  z-index: 1;
}

.etp-wb-avatar__name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1F2E;
  margin: 0;
}

.etp-wb-avatar__mount {
  width: 150px;
  height: 150px;
}

.etp-wb-avatar__activity {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: rgba(26, 31, 46, 0.7);
  text-align: center;
  line-height: 1.5;
  max-width: 200px;
}

.etp-wb-avatar__activity strong {
  color: #1A1F2E;
  font-weight: 600;
}

/* Hide the right-rail when embedded in tutor.html split view */
.etp-wb-shell--tutor-embedded .etp-wb-avatar { display: none; }

/* ============================================================
 * 4. Status bar
 * ============================================================ */

.etp-wb-status {
  grid-area: status;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid var(--wb-toolbar-border);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: rgba(26, 31, 46, 0.6);
}

.etp-wb-status__msg[data-tone="success"] { color: var(--wb-status-success); }
.etp-wb-status__msg[data-tone="error"]   { color: var(--wb-status-error); }
.etp-wb-status__msg[data-tone="info"]    { color: var(--wb-status-info); }

.etp-wb-status__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
 * 5. AI contribution animation — Section 2.4 (30 ops/s cadence)
 *
 * When ET+ emits a draw envelope, each operation renders with a
 * brief tinted overlay so the instructor can SEE what ET+ drew
 * rather than having to spot a sudden new shape.
 * ============================================================ */

@keyframes etp-wb-ai-contribution-flash {
  0%   { background: var(--wb-ai-contribution); }
  100% { background: transparent; }
}

.etp-wb-canvas-wrap[data-etp-wb-ai-drawing="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wb-ai-contribution);
  pointer-events: none;
  animation: etp-wb-ai-contribution-flash 800ms ease-out forwards;
}

/* ============================================================
 * 6. Reduced motion — Section 2.7
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .etp-wb-canvas-wrap[data-etp-wb-ai-drawing="true"]::after {
    animation: none;
    background: transparent;
  }
  .etp-wb-toolbar__swatch:hover { transform: none; }
}

/* ============================================================
 * 7. High contrast — Section 2.7
 * ============================================================ */

@media (prefers-contrast: more) {
  :root {
    --wb-toolbar-border: rgba(0, 0, 0, 0.4);
    --wb-button-stroke:  rgba(0, 0, 0, 0.6);
  }
  .etp-wb-btn { border-color: var(--wb-button-stroke); }
}

/* ============================================================
 * 8. Mobile responsive — narrow viewports
 * ============================================================ */

@media (max-width: 768px) {
  .etp-wb-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 54px minmax(160px, 1fr) minmax(118px, auto) 30px;
    grid-template-areas:
      "toolbar"
      "canvas"
      "avatar"
      "status";
  }
  .etp-wb-avatar {
    display: block;
    padding: 8px 12px;
    border-left: 0;
    border-top: 1px solid var(--wb-toolbar-border);
    max-height: min(240px, 32dvh);
    overflow-y: auto;
  }
  .etp-wb-avatar__name,
  .etp-wb-avatar__mount,
  .etp-wb-avatar__activity { display: none; }
  .etp-wb-prompt { margin-top: 0; padding-top: 0; border-top: 0; }
  .etp-wb-prompt__field { min-height: 48px; }
  .etp-wb-toolbar { padding: 0 8px; gap: 2px; }
  .etp-wb-toolbar { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .etp-wb-toolbar__group { flex: 0 0 auto; scroll-snap-align: start; }
  .etp-wb-toolbar__title { display: none; }
  .etp-wb-toolbar__group { padding: 0 4px; }
}

@media (max-width: 420px) {
  .etp-wb-status { padding: 0 8px; font-size: 9px; }
  .etp-wb-status__count { display: none; }
  .etp-wb-prompt__field { min-height: 40px; max-height: 76px; resize: none; }
}

@media print {
  body.etp-whiteboard-page { overflow: visible; background: #fff; }
  .etp-wb-shell { display: block; width: 100%; height: auto; }
  .etp-wb-toolbar, .etp-wb-avatar, .etp-wb-status { display: none !important; }
  .etp-wb-canvas-wrap { width: 100%; height: 90vh; break-inside: avoid; }
}

/* ============================================================
 * 9. Phase 9 — equation primitive
 *    9.1 Overlay layer for committed equations
 *    9.2 Modal LaTeX input
 *    9.3 Cursor for the equation tool
 * ============================================================ */

/* Equation overlay layer — absolutely positioned over the canvas
 * wrap, pointer-events:none so it never steals canvas drag input.
 * Each .etp-wb-equation child is absolutely positioned and DOES
 * accept pointer events for future click-to-edit support. */
.etp-wb-equation-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.etp-wb-equation {
  position: absolute;
  pointer-events: auto;
  cursor: default;
  /* KaTeX brings its own line-height; reset the local default so
   * the baseline matches the click anchor. */
  line-height: 1;
  /* Subtle hover affordance — Phase 9+ adds click-to-edit. */
  transition: outline-color 120ms ease;
  outline: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  user-select: text;
}

.etp-wb-equation:hover {
  outline-color: rgba(150, 211, 95, 0.55);
}

/* Equation tool cursor */
.etp-wb-canvas--tool-equation { cursor: cell; }

/* Modal for LaTeX input + live preview */
.etp-wb-equation-modal {
  position: absolute;
  z-index: 10;
  width: 340px;
  background: #0A0B0F;
  border: 1px solid rgba(150, 211, 95, 0.42);
  border-radius: 10px;
  padding: 14px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(150, 211, 95, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #C7D0E0;
  font-family: 'Outfit', system-ui, sans-serif;
}

.etp-wb-equation-modal__label {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8B9AB5;
}

.etp-wb-equation-modal__input {
  background: #050609;
  border: 1px solid rgba(150, 211, 95, 0.28);
  border-radius: 6px;
  color: #E8F4FF;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  padding: 8px 10px;
  line-height: 1.4;
  min-height: 64px;
  resize: vertical;
  outline: none;
}

.etp-wb-equation-modal__input:focus {
  border-color: rgba(150, 211, 95, 0.7);
  box-shadow: 0 0 0 2px rgba(150, 211, 95, 0.18);
}

.etp-wb-equation-modal__preview {
  min-height: 48px;
  padding: 10px;
  background: #ffffff;
  color: #0A0B0F;
  border-radius: 6px;
  text-align: center;
  font-size: 18px;
  overflow-x: auto;
  overflow-y: hidden;
}

.etp-wb-equation-modal__preview--error {
  background: #2A1414;
  color: #FFB3B3;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-align: left;
}

.etp-wb-equation-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.etp-wb-equation-modal__cancel,
.etp-wb-equation-modal__commit {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Outfit', system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: #C7D0E0;
}

.etp-wb-equation-modal__cancel {
  border-color: rgba(199, 208, 224, 0.25);
}
.etp-wb-equation-modal__cancel:hover {
  border-color: rgba(199, 208, 224, 0.5);
}

.etp-wb-equation-modal__commit {
  background: linear-gradient(135deg, #96D35F, #7FBF4A);
  color: #0A0B0F;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(150, 211, 95, 0.35);
}
.etp-wb-equation-modal__commit:hover {
  box-shadow: 0 0 18px rgba(150, 211, 95, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .etp-wb-equation { transition: none; }
}

/* ===========================================================
 * Phase 2 PR-A (2026-05-25) — canvas core extension
 *   - 4 selectable backgrounds (galaxy / circuit / white / slate)
 *   - snap-assist grid overlay
 *   - cyan-glow active stroke indicator
 *   - pan-mode cursor states
 *   - laser pointer overlay layer
 *   - sticky-note input overlay
 * =========================================================== */

.etp-wb-canvas-wrap[data-wb-background="galaxy"] {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(123, 70, 233, 0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 213, 255, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #0E1126 0%, #050714 100%);
  color: #E7E9F3;
}
.etp-wb-canvas-wrap[data-wb-background="circuit"] {
  background-color: #0F2538;
  background-image:
    linear-gradient(rgba(0, 213, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 213, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 30% 30%, rgba(0, 213, 255, 0.15) 0%, transparent 55%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}
.etp-wb-canvas-wrap[data-wb-background="white"] {
  background: #FBFCFD;
  color: #11161E;
}
.etp-wb-canvas-wrap[data-wb-background="slate"] {
  background: #1B2230;
  color: #D9DEE9;
}

/* Snap-assist grid overlay — additive over background. */
.etp-wb-canvas-wrap[data-wb-grid="on"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(150, 211, 95, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 211, 95, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 1;
}

/* Cyan-glow active stroke indicator — canvas wrap glows softly
   while a pen / highlighter stroke is in flight. Honest visual
   feedback that the system is recording the stroke. */
.etp-wb-canvas-wrap.etp-wb-stroking {
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.45),
    inset 0 0 28px rgba(0, 229, 255, 0.18);
  transition: box-shadow 120ms ease-out;
}

/* Pan-mode cursors: spacebar held = pannable; actively panning = grabbing. */
.etp-wb-canvas-wrap.etp-wb-pannable { cursor: grab; }
.etp-wb-canvas-wrap.etp-wb-panning  { cursor: grabbing; }

/* Laser pointer transient overlay — dots fade over 1500 ms.
   Primary dot (current pointer position) is red-hot; trail dots
   are cyan. Both fade + scale on the same keyframe. */
.etp-wb-laser-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.etp-wb-laser-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 229, 255, 0.85) 0%,
                                       rgba(0, 229, 255, 0.45) 40%,
                                       rgba(0, 229, 255, 0) 100%);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.7);
  animation: etp-wb-laser-fade 1500ms forwards ease-out;
}
.etp-wb-laser-dot--primary {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, rgba(255, 80, 80, 0.95) 0%,
                                       rgba(255, 80, 80, 0.55) 35%,
                                       rgba(255, 80, 80, 0) 100%);
  box-shadow: 0 0 26px rgba(255, 80, 80, 0.8);
}
@keyframes etp-wb-laser-fade {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  60%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
  .etp-wb-laser-dot { animation-duration: 800ms; }
}

/* Sticky-note input overlay — floating textarea that becomes a
   committed sticky-note op on blur. Palette-tinted background. */
.etp-wb-sticky-input {
  position: absolute;
  z-index: 8;
  width: 160px;
  height: 100px;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.etp-wb-sticky-input[data-palette="amber"] { background: #FFE08A; border: 1px solid #E5A93B; }
.etp-wb-sticky-input[data-palette="cyan"]  { background: #9FE3F3; border: 1px solid #3FB9D1; }
.etp-wb-sticky-input[data-palette="rose"]  { background: #FFC1D6; border: 1px solid #E07A9B; }
.etp-wb-sticky-input[data-palette="lime"]  { background: #C8F0A4; border: 1px solid #7BB85B; }
.etp-wb-sticky-input__field {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  font: 14px / 1.25 "DM Sans", system-ui, sans-serif;
}
.etp-wb-sticky-input[data-palette="amber"] .etp-wb-sticky-input__field { color: #3B2A12; }
.etp-wb-sticky-input[data-palette="cyan"]  .etp-wb-sticky-input__field { color: #0F3A45; }
.etp-wb-sticky-input[data-palette="rose"]  .etp-wb-sticky-input__field { color: #52132A; }
.etp-wb-sticky-input[data-palette="lime"]  .etp-wb-sticky-input__field { color: #1F3C12; }

/* ===========================================================
 * Phase 2 PR-B (2026-05-25) — ET+ generative integration
 *   - quiz-card input modal
 *   - code-block input modal
 *   - right-rail prompt composer
 * =========================================================== */

.etp-wb-quiz-modal,
.etp-wb-code-modal {
  position: absolute;
  z-index: 10;
  width: 360px;
  background: rgba(14, 19, 33, 0.96);
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5),
              0 0 22px rgba(0, 229, 255, 0.15);
  color: #E7E9F3;
  font: 13px / 1.4 "DM Sans", system-ui, sans-serif;
}
.etp-wb-code-modal { width: 420px; }
.etp-wb-quiz-modal__label,
.etp-wb-code-modal__label {
  font: 600 11px "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  color: #9FE3F3;
  text-transform: uppercase;
}
.etp-wb-quiz-modal__question,
.etp-wb-quiz-modal__options,
.etp-wb-code-modal__code {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(127, 140, 170, 0.35);
  border-radius: 6px;
  padding: 8px 10px;
  color: #E7E9F3;
  font: 13px / 1.4 "DM Sans", system-ui, sans-serif;
  resize: vertical;
  outline: none;
}
.etp-wb-code-modal__code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.etp-wb-quiz-modal__correct,
.etp-wb-code-modal__lang {
  width: 90px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(127, 140, 170, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  color: #E7E9F3;
  font: 13px "DM Sans", system-ui, sans-serif;
  outline: none;
}
.etp-wb-code-modal__lang { width: 180px; }
.etp-wb-quiz-modal__question:focus,
.etp-wb-quiz-modal__options:focus,
.etp-wb-quiz-modal__correct:focus,
.etp-wb-code-modal__code:focus,
.etp-wb-code-modal__lang:focus {
  border-color: rgba(0, 229, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18);
}
.etp-wb-quiz-modal__actions,
.etp-wb-code-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.etp-wb-quiz-modal__cancel,
.etp-wb-code-modal__cancel,
.etp-wb-quiz-modal__commit,
.etp-wb-code-modal__commit {
  font: 600 12px "DM Sans", system-ui, sans-serif;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.etp-wb-quiz-modal__cancel,
.etp-wb-code-modal__cancel {
  background: transparent;
  color: #9AA6BD;
  border-color: rgba(127, 140, 170, 0.35);
}
.etp-wb-quiz-modal__commit,
.etp-wb-code-modal__commit {
  background: #96D35F;
  color: #0E1126;
}
.etp-wb-quiz-modal__commit:hover,
.etp-wb-code-modal__commit:hover {
  box-shadow: 0 0 18px rgba(150, 211, 95, 0.55);
}

/* --- Right-rail prompt composer ---
   The whiteboard.html right rail gains a small ET+ chat input below
   the avatar mount. POSTs to /api/v1/ai-tutor/chat; the response
   passes through etp-whiteboard-bridge.parseMessage(), and any
   whiteboard-draw or concept-map envelope renders to the canvas. */
.etp-wb-prompt {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(127, 140, 170, 0.2);
  min-height: 0;
}
.etp-wb-prompt__label {
  font: 600 10px "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9FE3F3;
  opacity: 0.7;
}
.etp-wb-prompt__field {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(127, 140, 170, 0.35);
  border-radius: 6px;
  padding: 8px 10px;
  color: #1A1F2E;
  font: 12px / 1.4 "DM Sans", system-ui, sans-serif;
  resize: vertical;
  min-height: 56px;
  outline: none;
}
.etp-wb-prompt__field:focus {
  border-color: rgba(0, 229, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18);
}
/* 2026-06-05 docx Issue 6 fix — placeholder visibility on dark panel.
 * Browser default placeholder opacity (~50%) rendered the "Ask ET+ to
 * draw…" hint nearly invisible against the dark whiteboard panel.
 * Lift to 65% of the field colour for legible-at-rest contrast. */
.etp-wb-prompt__field::placeholder {
  color: rgba(26, 31, 46, 0.55);
  opacity: 1; /* override Firefox default 0.54 */
}
.etp-wb-prompt__send {
  align-self: flex-end;
  font: 600 11px "DM Sans", system-ui, sans-serif;
  background: #96D35F;
  color: #0E1126;
  border: 0;
  border-radius: 5px;
  padding: 5px 14px;
  cursor: pointer;
}
.etp-wb-prompt__send:hover {
  box-shadow: 0 0 14px rgba(150, 211, 95, 0.55);
}
.etp-wb-prompt__send[disabled] {
  background: rgba(127, 140, 170, 0.4);
  color: #6E7895;
  cursor: not-allowed;
  box-shadow: none;
}
.etp-wb-prompt__status {
  font: 11px "DM Sans", system-ui, sans-serif;
  color: #1A1F2E;
  min-height: 14px;
  word-break: break-word;
  max-height: clamp(120px, 24vh, 240px);
  overflow-y: auto;
  white-space: pre-wrap;
}
.etp-wb-prompt__status[data-tone="error"] { color: #FF8A8A; }
.etp-wb-prompt__status[data-tone="ok"]    { color: #96D35F; }
.etp-wb-prompt__hint {
  font: 10px / 1.4 "DM Sans", system-ui, sans-serif;
  color: #6E7895;
}

@media (max-width: 768px) {
  .etp-wb-prompt { margin-top: 0; padding-top: 0; border-top: 0; }
  .etp-wb-prompt__field { min-height: 48px; }
  .etp-wb-prompt__status { max-height: 120px; }
}

/* ----------------------------------------------------------------
   2026-05-31 — a11y skip-link (WCAG 2.4.1 / SC 2.4.13 compliant).
   Sr-only by default; slides into view ONLY on keyboard focus.
   The link targets #wb-canvas (the canvas element at line 229).
   ---------------------------------------------------------------- */
.etp-skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  background: #00D4E8;
  color: #001318;
  padding: 10px 18px;
  border-radius: 6px;
  font: 600 13px / 1.2 "DM Sans", system-ui, sans-serif;
  text-decoration: none;
  z-index: 9999;
  transition: top 140ms cubic-bezier(.2, .9, .3, 1);
  box-shadow: 0 4px 16px rgba(0, 212, 232, 0.35);
}
.etp-skip-link:focus,
.etp-skip-link:focus-visible {
  top: 12px;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .etp-skip-link { transition: none; }
}