/* css/whiteboard-engine.css — the whiteboard lesson player (js/whiteboard/whiteboard-engine.js). Shared: the Android app
   ships a byte-for-byte copy in app/src/main/assets/whiteboard/. Colours come from the app's variables, with fallbacks. */
.wbx { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; color: var(--text-primary, #1f2933); font-family: inherit; }

/* the board: a real whiteboard in its aluminium frame */
.wbx-stage { position: relative; width: 100%; border-radius: 14px; padding: 8px; background: linear-gradient(145deg, #e2e8f0, #94a3b8 48%, #cbd5e1); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6); box-sizing: border-box; }
.wbx-board { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 640; max-height: 74vh; margin: 0 auto; border-radius: 8px; background: #fdfdfb; box-shadow: inset 0 0 40px rgba(148, 163, 184, 0.25); user-select: none; -webkit-user-select: none; }

/* a scene ends: the board is wiped */
.wbx-wipe { position: absolute; top: 8px; bottom: 8px; left: 8px; width: 0; border-radius: 8px; background: #fdfdfb; pointer-events: none; opacity: 0; }
.wbx-wipe.go { animation: wbx-wipe 0.76s ease-in-out forwards; }
@keyframes wbx-wipe { 0% { width: 0; opacity: 1; } 50% { width: calc(100% - 16px); opacity: 1; } 100% { width: calc(100% - 16px); opacity: 0; } }

/* Lixa is writing the scene */
.wbx-cover { position: absolute; inset: 8px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; background: rgba(253, 253, 251, 0.94); text-align: center; padding: 1rem; }
.wbx-cover[hidden] { display: none; }
.wbx-cover-text { margin: 0; font-size: 1.05rem; font-weight: 600; color: #334155; max-width: 30rem; }
.wbx-spin { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid rgba(15, 118, 110, 0.18); border-top-color: #0f766e; animation: wbx-spin 0.9s linear infinite; }
@keyframes wbx-spin { to { transform: rotate(360deg); } }

.wbx-bigplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.5rem 0.9rem 1.2rem; border: 0; border-radius: 999px; background: #0f766e; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(15, 118, 110, 0.4); }
.wbx-bigplay[hidden] { display: none; }
.wbx-bigplay:hover { filter: brightness(1.08); }
.wbx-bigplay svg { width: 26px; height: 26px; }

/* captions, as on a video */
.wbx-caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 48px); padding: 0.45rem 0.9rem; border-radius: 10px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 1rem; line-height: 1.45; text-align: center; pointer-events: none; }
.wbx-caption[hidden] { display: none; }

/* the controls */
.wbx-controls { display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem; background: var(--surface, #fff); border: 1px solid var(--border-light, #e3e6ea); border-radius: 0.9rem; box-shadow: var(--shadow-sm, none); }
.wbx-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.4rem; border: 0; border-radius: 0.7rem; background: transparent; color: var(--text-primary, #1f2933); cursor: pointer; font: inherit; }
.wbx-btn:hover:not(:disabled) { background: var(--accent-soft, #00968814); }
.wbx-btn:disabled { opacity: 0.35; cursor: default; }
.wbx-btn.on { color: var(--accent, #009688); }
.wbx-btn:focus-visible, .wbx-chip:focus-visible, .wbx-bigplay:focus-visible, .wbx-askgo:focus-visible { outline: 2px solid var(--accent, #009688); outline-offset: 2px; }
.wbx-main { background: var(--accent, #009688); color: #fff; min-width: 3rem; }
.wbx-main:hover:not(:disabled) { background: var(--accent, #009688); filter: brightness(1.08); }
.wbx-where { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 0.5rem; line-height: 1.25; }
.wbx-where b { font-size: 0.74rem; font-weight: 700; color: var(--accent, #009688); text-transform: uppercase; letter-spacing: 0.04em; }
.wbx-where span { font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the scenes */
.wbx-scenes { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: thin; }
.wbx-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem; max-width: 15rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; border: 1px solid var(--border-light, #e3e6ea); border-radius: 999px; background: var(--surface, #fff); color: var(--text-primary, #1f2933); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbx-chip i { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent-soft, #00968814); color: var(--accent, #009688); font-style: normal; font-size: 0.75rem; }
.wbx-chip em { font-style: normal; font-weight: 500; color: var(--text-secondary, #6b7280); }
.wbx-chip.on { border-color: var(--accent, #009688); background: var(--accent-soft, #00968814); }
.wbx-chip.on i { background: var(--accent, #009688); color: #fff; }
.wbx-chip.wbx-failed { opacity: 0.6; }

/* asking Lixa */
.wbx-ask { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.3rem 0.3rem 0.7rem; background: var(--surface, #fff); border: 1px solid var(--border-light, #e3e6ea); border-radius: 0.9rem; }
.wbx-ask:focus-within { border-color: var(--accent, #009688); }
.wbx-ask-ico { display: inline-flex; color: var(--accent, #009688); }
.wbx-ask input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 0.95rem; color: var(--text-primary, #1f2933); padding: 0.55rem 0.2rem; }
.wbx-askgo { border: 0; border-radius: 0.7rem; padding: 0.6rem 1.1rem; background: var(--accent, #009688); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 560px) {
  .wbx-stage { padding: 5px; border-radius: 10px; }
  .wbx-wipe { top: 5px; bottom: 5px; left: 5px; }
  .wbx-cover { inset: 5px; }
  .wbx-btn { min-width: 2.3rem; height: 2.3rem; }
  .wbx-caption { font-size: 0.82rem; bottom: 10px; padding: 0.35rem 0.6rem; }
  .wbx-bigplay { font-size: 0.95rem; padding: 0.7rem 1.1rem 0.7rem 0.9rem; }
  .wbx-where span { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .wbx-wipe.go { animation-duration: 0.01s; } }