:root {
  --microbit-electric: #25d8f2;
  --microbit-lime: #c8f04a;
  --microbit-ink: #061b31;
  --microbit-panel: #eef8fb;
}

.microbit-lab-hero {
  position: relative;
  overflow: hidden;
}

.microbit-lab-hero::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  bottom: -130px;
  border: 22px solid rgba(37, 216, 242, 0.16);
  border-radius: 38px;
  transform: rotate(18deg);
  pointer-events: none;
}

.microbit-lab-nav { position: relative; z-index: 1; }
.microbit-lab-loop { margin: 1rem 0 0; line-height: 1.8; }
.microbit-lab-loop strong { color: var(--microbit-electric); }
.microbit-access { max-width: 840px; margin-inline: auto; }

.microbit-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.microbit-workspace[hidden] { display: none; }

.microbit-project-rail,
.microbit-chat-column {
  border: 1px solid rgba(8, 67, 105, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(1, 34, 61, 0.1);
}

.microbit-project-rail { padding: 1.2rem; position: sticky; top: 1rem; }
.microbit-project-marker { padding: 1rem; margin-bottom: 1.35rem; border-radius: 16px; background: var(--microbit-ink); color: white; }
.microbit-project-marker span { display: block; color: var(--microbit-electric); font: 700 0.72rem/1.3 "Space Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.microbit-project-marker strong { display: block; margin-top: 0.45rem; }
.microbit-starter-list { display: grid; gap: 0.55rem; }
.microbit-starter-list button,
.microbit-thread-button {
  width: 100%;
  border: 1px solid rgba(8, 67, 105, 0.18);
  border-radius: 13px;
  padding: 0.8rem;
  text-align: left;
  color: #07345a;
  background: #f5fbfd;
  font: 700 0.88rem/1.35 "Manrope", sans-serif;
  cursor: pointer;
}
.microbit-starter-list button:hover,
.microbit-starter-list button:focus-visible,
.microbit-thread-button:hover,
.microbit-thread-button:focus-visible { border-color: #0875a5; background: #e8f8fc; transform: translateY(-1px); }
.microbit-privacy-note { margin: 1.35rem 0 0; color: #496477; font-size: 0.82rem; }
.microbit-chat-column { min-height: 680px; overflow: hidden; }
.microbit-chat-thread { display: grid; gap: 1rem; max-height: 650px; min-height: 430px; overflow-y: auto; padding: 1.25rem; background: linear-gradient(150deg, #edf8fb, #ffffff 48%, #f4f8eb); }
.microbit-message { max-width: 88%; padding: 1rem 1.1rem; border-radius: 18px; box-shadow: 0 8px 22px rgba(1, 34, 61, 0.08); }
.microbit-message p { white-space: pre-wrap; }
.microbit-message--student { justify-self: end; background: #064a78; color: white; border-bottom-right-radius: 5px; }
.microbit-message--helper { justify-self: start; background: white; border: 1px solid rgba(8, 67, 105, 0.15); border-bottom-left-radius: 5px; }
.microbit-message--system { justify-self: center; background: #fff1d6; color: #713e00; }
.microbit-message__label { display: block; margin-bottom: 0.55rem; color: #0a7898; font: 700 0.72rem/1.3 "Space Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; }
.microbit-message--student .microbit-message__label { color: var(--microbit-lime); }
.microbit-message h3 { margin: 0 0 0.65rem; color: #07345a; }
.microbit-message h4 { margin: 1rem 0 0.4rem; color: #07345a; }
.microbit-message ol { margin-bottom: 0; padding-left: 1.25rem; }
.microbit-code-wrap { margin-top: 1rem; overflow: hidden; border-radius: 14px; background: #061b31; color: #e8fbff; }
.microbit-code-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.14); color: var(--microbit-electric); font: 700 0.7rem/1.3 "Space Mono", monospace; }
.microbit-code-header button { border: 1px solid rgba(255,255,255,0.28); border-radius: 9px; padding: 0.4rem 0.65rem; background: transparent; color: white; cursor: pointer; }
.microbit-code-wrap pre { margin: 0; padding: 1rem; overflow-x: auto; font: 0.82rem/1.55 "Space Mono", monospace; white-space: pre; }
.microbit-next-step { display: grid; gap: 0.25rem; margin-top: 1rem; padding: 0.8rem; border-left: 4px solid #7da500; background: #f3f9df; color: #243b00; }
.microbit-composer { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgba(8, 67, 105, 0.15); background: white; }
.microbit-composer label { display: block; margin-bottom: 0.5rem; font-weight: 800; color: #07345a; }
.microbit-composer textarea { width: 100%; min-height: 105px; resize: vertical; border: 1px solid #8baabc; border-radius: 14px; padding: 0.9rem; font: inherit; }
.microbit-composer textarea:focus { outline: 3px solid rgba(37, 216, 242, 0.3); border-color: #0875a5; }
.microbit-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.microbit-composer-actions p { margin: 0; }

.microbit-teacher-workspace { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.6fr); gap: 1.25rem; align-items: start; }
.microbit-thread-list-panel { position: sticky; top: 1rem; }
.microbit-teacher-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.microbit-teacher-heading h2 { margin-top: 0; }
.microbit-thread-search { display: grid; gap: 0.35rem; margin-bottom: 1rem; font-weight: 700; }
.microbit-thread-search input { padding: 0.7rem; border: 1px solid #8baabc; border-radius: 10px; }
.microbit-thread-list { display: grid; gap: 0.6rem; max-height: 620px; overflow-y: auto; }
.microbit-thread-button strong,
.microbit-thread-button span { display: block; }
.microbit-thread-button span { margin-top: 0.25rem; color: #587184; font-size: 0.75rem; font-weight: 500; }
.microbit-transcript { display: grid; gap: 0.8rem; max-height: 720px; overflow-y: auto; padding-right: 0.3rem; }
.microbit-transcript-message { border-radius: 14px; padding: 0.9rem; border: 1px solid rgba(8,67,105,0.14); }
.microbit-transcript-message--student { margin-left: 10%; background: #eaf6fb; }
.microbit-transcript-message--helper { margin-right: 5%; background: #f8faef; }
.microbit-transcript-message__top { display: flex; justify-content: space-between; gap: 1rem; color: #07345a; }
.microbit-transcript-message__top span { color: #627889; font-size: 0.75rem; }
.microbit-transcript-message pre { margin: 0.8rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.82rem/1.55 "Space Mono", monospace; color: #172b3b; }
.microbit-teacher-flag { margin: 0.8rem 0 0; padding: 0.65rem; border-left: 4px solid #b75600; background: #fff1dc; color: #6e3300; font-weight: 700; }

@media (max-width: 860px) {
  .microbit-workspace,
  .microbit-teacher-workspace { grid-template-columns: 1fr; }
  .microbit-project-rail,
  .microbit-thread-list-panel { position: static; }
  .microbit-chat-column { min-height: 0; }
  .microbit-chat-thread { min-height: 360px; }
  .microbit-message { max-width: 96%; }
}

@media (max-width: 560px) {
  .microbit-composer-actions,
  .microbit-teacher-heading { align-items: stretch; flex-direction: column; }
  .microbit-composer-actions button { width: 100%; }
  .microbit-transcript-message--student,
  .microbit-transcript-message--helper { margin-inline: 0; }
}