/* Brand accents — mirrors the --brand-* palette in styles/brand.css (the
   logo/marketing/auth pages) so the lesson screen's floating toolbar reads as
   the same product instead of the unrelated green/amber "chalkboard" palette
   it used before. Kept self-contained here since app.html doesn't load
   brand.css (that file also carries marketing-page layout rules it doesn't
   need). Danger actions (End, Record) intentionally stay red — the universal
   video-call convention — rather than being forced onto the brand palette. */
:root {
  --tb-panel: rgba(10, 22, 45, 0.72);      /* brand ink (#0a1930), glassy */
  --tb-panel-soft: rgba(10, 22, 45, 0.6);
  --tb-panel-strong: rgba(10, 22, 45, 0.88);
  --tb-border: rgba(255, 255, 255, 0.14);
  --tb-text: #e9edf7;
  --tb-text-muted: #b9c4dc;
  --tb-teal: #12e0c6;
  --tb-blue: #3e9bfd;
  --tb-blue-hover: #63b3ff;
  --tb-violet: #8b5cf6;
  --tb-pink: #f924c2;
  --tb-amber: #fdb13a;
  --tb-gradient: linear-gradient(135deg, var(--tb-teal) 0%, var(--tb-blue) 33%, var(--tb-violet) 66%, var(--tb-pink) 100%);
}

/* ---- mascot: an interactive AI teacher companion (scripts/mascot.js) -----
   Also the only actually-visible connection-status readout — #statusDot/
   #statusText (dom-state.js) are permanently display:none (see .app-defaults
   in base.css), so setStatus() drives this instead via data-state. */
.mascot {
  position: fixed;
  top: 86px;
  right: 24px;
  width: 94px;
  height: 94px;
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}
.mascot-svg { width: 100%; height: 100%; overflow: visible; }
.mascot-svg * { transform-box: fill-box; transform-origin: center; }

.mascot-glow {
  opacity: 0.2;
  filter: blur(8px);
  animation: mascot-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes mascot-glow-pulse {
  0%, 100% { opacity: 0.16; transform: scale(0.96); }
  50% { opacity: 0.34; transform: scale(1.07); }
}

.mascot-body { animation: mascot-bob 2.6s ease-in-out infinite; }
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.mascot-mouth { transition: transform 0.15s ease; }
.mascot-eyes, .mascot-brow-left, .mascot-brow-right, .mascot-head { transition: transform 0.18s ease; }
.mascot-status-dot {
  position: absolute;
  right: 10px;
  bottom: 13px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--tb-text-muted);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(10, 25, 48, 0.22);
}
.mascot-bubble {
  position: absolute;
  right: 82px;
  top: 12px;
  width: 178px;
  min-height: 42px;
  padding: 10px 13px;
  border-radius: 16px 16px 4px 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(10, 25, 48, 0.12);
  box-shadow: 0 18px 42px rgba(10, 25, 48, 0.16);
  color: var(--tb-panel-strong);
  font: 800 13px/1.28 "Inter", sans-serif;
  opacity: 0;
  transform: translateX(8px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.mascot-bubble::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 22px;
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.96);
}
.mascot:hover .mascot-bubble,
.mascot:focus-visible .mascot-bubble,
.mascot.show-bubble .mascot-bubble {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.mascot:focus-visible .mascot-svg {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 10px rgba(62, 155, 253, 0.55));
}
.mascot:hover .mascot-head,
.mascot:focus-visible .mascot-head { transform: rotate(-2deg) translateY(-1px); }
.mascot.nudge .mascot-body { animation: mascot-nudge 0.65s ease; }
@keyframes mascot-nudge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  28% { transform: translateY(-6px) rotate(-3deg); }
  58% { transform: translateY(0) rotate(3deg); }
}

/* listening: eyes widen a touch, like leaning in to hear better */
.mascot[data-state="listening"] .mascot-eyes { transform: scale(1.15); }
.mascot[data-state="listening"] .mascot-brow-left { transform: translateY(-2px) rotate(-4deg); }
.mascot[data-state="listening"] .mascot-brow-right { transform: translateY(-2px) rotate(4deg); }
.mascot[data-state="listening"] .mascot-status-dot { background: var(--tb-teal); animation: mascot-status-pulse 1.1s ease-in-out infinite; }
@keyframes mascot-status-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(18, 224, 198, 0.34); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 9px rgba(18, 224, 198, 0); }
}

/* speaking: mouth "talks" — quick open/close loop */
.mascot[data-state="speaking"] .mascot-mouth { animation: mascot-talk 0.32s ease-in-out infinite; }
.mascot[data-state="speaking"] .mascot-status-dot { background: var(--tb-blue); }
@keyframes mascot-talk {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(2); }
}

/* paused: eyes shut, bob stops — the mascot is "resting" too */
.mascot[data-state="paused"] .mascot-eyes { transform: scaleY(0.12); }
.mascot[data-state="paused"] .mascot-body { animation-play-state: paused; }
.mascot[data-state="paused"] .mascot-status-dot { background: var(--tb-amber); }
.mascot[data-state="connected"] .mascot-status-dot { background: var(--tb-violet); }

/* Board work overlays the connection state: preparing looks thoughtful;
   writing keeps the pointer raised toward the live chalk movement. */
.mascot.board-preparing .mascot-head { animation: mascot-think 1.2s ease-in-out infinite; }
.mascot.board-preparing .mascot-eyes { transform: translate(-1px, 1px); }
.mascot.board-preparing .mascot-status-dot {
  background: var(--tb-amber);
  animation: mascot-status-pulse 1.1s ease-in-out infinite;
}
@keyframes mascot-think {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-2px); }
}

.mascot.board-writing .mascot-hand-right {
  transform: translate(8px, -14px) rotate(-16deg);
  animation: mascot-teach-point 1.1s ease-in-out infinite;
}
.mascot.board-writing .mascot-pointer { animation: mascot-pointer-glint 1.1s ease-in-out infinite; }
.mascot.board-writing .mascot-status-dot {
  background: var(--tb-teal);
  animation: mascot-status-pulse 1.1s ease-in-out infinite;
}
@keyframes mascot-teach-point {
  0%, 100% { transform: translate(7px, -13px) rotate(-14deg); }
  50% { transform: translate(10px, -17px) rotate(-20deg); }
}

/* Deliberate-error challenge: the mascot stays above the worksheet, looks
   uncertain, and brings one glove toward its chin while the learner checks
   the work. */
.mascot.mistake-challenge { z-index: 84; }
.mascot.mistake-challenge .mascot-head { transform: rotate(-5deg) translateY(1px); }
.mascot.mistake-challenge .mascot-brow-left { transform: translateY(-3px) rotate(-8deg); }
.mascot.mistake-challenge .mascot-brow-right { transform: translateY(1px) rotate(-8deg); }
.mascot.mistake-challenge .mascot-mouth { transform: scaleY(-0.7) translateY(-2px); }
.mascot.mistake-challenge .mascot-hand-left { transform: translate(21px, -17px) rotate(18deg); }
.mascot.mistake-challenge .mascot-status-dot { background: var(--tb-amber); animation: mascot-status-pulse 1.1s ease-in-out infinite; }
.mascot.mistake-thinking .mascot-head { animation: mascot-mistake-think 0.8s ease-in-out infinite; }
@keyframes mascot-mistake-think {
  0%, 100% { transform: rotate(-5deg) translateY(1px); }
  50% { transform: rotate(3deg) translateY(-2px); }
}

/* sparkles: hidden until a correct answer fires .celebrate (see
   celebrateMascot() in mascot.js) */
.mascot-sparkles { opacity: 0; }
.mascot-sparkle { fill: var(--tb-amber); }

.mascot.celebrate .mascot-body { animation: mascot-bounce 0.6s ease; }
@keyframes mascot-bounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-14px) scale(1.12); }
  55% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-5px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.mascot.celebrate .mascot-sparkles { animation: mascot-sparkles-fade 0.9s ease forwards; }
@keyframes mascot-sparkles-fade { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.mascot.celebrate .mascot-sparkle { animation: mascot-sparkle-burst 0.9s ease forwards; }
@keyframes mascot-sparkle-burst {
  0% { transform: scale(0.3) translateY(0); }
  40% { transform: scale(1.2) translateY(-6px); }
  100% { transform: scale(0.4) translateY(-14px); }
}
.mascot.celebrate .mascot-sparkle.s2, .mascot.celebrate .mascot-sparkle.s4 { animation-delay: 0.08s; }

.mascot-hand { transition: transform 0.15s ease; }

/* point: circling/re-tracing something already on the board — see
   highlight_term/emphasize_figure handlers in lesson-session.js */
.mascot.point .mascot-hand-right { animation: mascot-point 0.6s ease; }
.mascot.point .mascot-pointer { animation: mascot-pointer-glint 0.6s ease; }
@keyframes mascot-point {
  0% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(8px, -14px) rotate(-18deg); }
  70% { transform: translate(8px, -14px) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes mascot-pointer-glint {
  0%, 100% { stroke: var(--tb-amber); }
  45% { stroke: var(--tb-teal); }
}

/* clap: a badge was just newly earned — see clapMascot() in mascot.js */
.mascot.clap .mascot-hand-left { animation: mascot-clap-left 0.5s ease-in-out 2; }
.mascot.clap .mascot-hand-right { animation: mascot-clap-right 0.5s ease-in-out 2; }
@keyframes mascot-clap-left {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, -8px); }
}
@keyframes mascot-clap-right {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, -8px); }
}

/* thumbs-up: layers onto the existing correct-answer bounce/sparkles above —
   the right glove's "thumb" nub rotates upright. */
.mascot.celebrate .mascot-hand-right { animation: mascot-thumbsup 0.9s ease; }
@keyframes mascot-thumbsup {
  0% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(5px, -14px) rotate(-72deg); }
  70% { transform: translate(5px, -14px) rotate(-72deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* The mascot's animations are all decorative/looping, never essential to
   understanding its state (every state also has a non-animated visual —
   status-dot color, head/hand rotation, sparkle opacity) — so all of them can
   simply be turned off, same pattern as index.html/progress.html. */
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot * { animation: none !important; }
}

@media (max-width: 760px) {
  .mascot { width: 66px; height: 66px; top: 66px; right: 10px; }
  .mascot-bubble {
    right: 58px;
    top: 3px;
    width: min(172px, calc(100vw - 92px));
    font-size: 12px;
  }
  .mascot-status-dot {
    right: 6px;
    bottom: 8px;
    width: 11px;
    height: 11px;
  }
}

/* ---- floating control bar (shown while connected) ---- */
  #toolbar {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 12px;
    align-items: center;
    padding: 8px;
    background: var(--tb-panel);
    backdrop-filter: blur(8px);
    border: 1px solid var(--tb-border);
    border-radius: 999px;
    z-index: 30;
  }
  #toolbar.visible { display: flex; }
  .ctl {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: background 0.15s, transform 0.1s;
  }
  .ctl:hover { background: rgba(255,255,255,0.12); }
  .ctl:active { transform: scale(0.93); }
  .ctl svg { width: 22px; height: 22px; }
  #pauseBtn { background: var(--tb-blue); }
  #pauseBtn:hover { background: var(--tb-blue-hover); }
  #pauseBtn.paused { background: var(--tb-amber); }
  #endBtn { background: #8a2b2b; }
  #endBtn:hover { background: #a83434; }

  #recordBtn { color: #ff6b6b; background: rgba(255,255,255,0.08); }
  #recordBtn:hover { background: rgba(255,255,255,0.16); }
  #recordBtn.recording { color: #fff; background: #c0392b; animation: recpulse 1.4s ease-in-out infinite; }
  @keyframes recpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.5); } 50% { box-shadow: 0 0 0 7px rgba(192,57,43,0); } }

  /* mode toggle pill */
  #modeBtn {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--tb-text);
    font-size: 13px;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    white-space: nowrap;
  }
  #modeBtn:hover { background: rgba(255,255,255,0.16); }

  /* push-to-talk mic button: only shown in PTT mode */
  #talkBtn { background: var(--tb-blue); display: none; touch-action: none; user-select: none; }
  #talkBtn:hover { background: var(--tb-blue-hover); }
  #talkBtn.recording {
    background: #b02a2a;
    box-shadow: 0 0 0 5px rgba(176,42,42,0.3);
  }
  #toolbar.ptt #pauseBtn { display: none; }
  #toolbar.ptt #talkBtn { display: flex; }

  /* hamburger that reveals the quick-reply pills — mobile only (see the
     mobile block below); on desktop the pills already float above the
     toolbar with room to spare, so this stays hidden and unused there. */
  #quickReplyToggle { display: none; }

  /* quick-reply pills, floating above the toolbar while connected */
  #quickReplies {
    position: absolute;
    bottom: 132px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: min(92vw, 560px);
    z-index: 29;
  }
  #quickReplies.visible { display: flex; }
  .quick-reply {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--tb-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--tb-panel);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.16);
    transition: background 0.15s, transform 0.1s;
  }
  .quick-reply:hover { background: rgba(255,255,255,0.16); }
  .quick-reply:active { transform: scale(0.95); }

  /* typed messages to the teacher — studdyai-style floating input, shown
     alongside the voice toolbar while connected */
  #messageBar {
    position: absolute;
    right: 24px;
    bottom: 22px;
    z-index: 30;
    display: none;
    align-items: center;
    gap: 6px;
    width: min(340px, 34vw);
    padding: 6px 6px 6px 16px;
    background: var(--tb-panel);
    backdrop-filter: blur(8px);
    border: 1px solid var(--tb-border);
    border-radius: 999px;
  }
  #messageBar.visible { display: flex; }

  /* collapsed = just the round keyboard icon; tapping expands the input */
  #messageToggle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tb-text);
    cursor: pointer;
    transition: background 0.15s;
  }
  #messageToggle:hover { background: rgba(255,255,255,0.14); }
  #messageToggle svg { width: 20px; height: 20px; }
  #messageBar.collapsed {
    width: auto;
    padding: 6px;
  }
  #messageBar.collapsed #messageInput,
  #messageBar.collapsed #messageSend { display: none; }

  #messageInput {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--tb-text);
    font: 500 14px/1.3 "Inter", sans-serif;
  }
  #messageInput::placeholder { color: rgba(233,237,247,0.55); }
  #messageSend {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--tb-gradient);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
  }
  #messageSend:hover { filter: brightness(1.1); }
  #messageSend:active { transform: scale(0.93); }
  #messageSend svg { width: 17px; height: 17px; }

  @media (max-width: 1024px) {
    #messageBar { right: 12px; left: 12px; width: auto; bottom: 84px; }
    #messageBar.collapsed { left: auto; }

    /* smaller, narrower control bar so it doesn't dominate a phone screen */
    #toolbar { gap: 6px; padding: 6px; }
    .ctl { width: 38px; height: 38px; }
    .ctl svg { width: 17px; height: 17px; }
    #modeBtn { height: 34px; padding: 0 12px; font-size: 12px; }

    /* push-to-talk's hold-to-speak button is the one control a thumb has to
       land on repeatedly mid-lesson — keep it the largest target in the dock
       instead of shrinking uniformly with the rest of .ctl. */
    #talkBtn { width: 56px; height: 56px; }
    #talkBtn svg { width: 23px; height: 23px; }
    #quickReplyToggle { display: flex; }
    #quickReplyToggle svg { width: 18px; height: 18px; }

    /* quick replies are opened via the hamburger instead of always shown —
       overlapping the board otherwise (see the screenshot this was reported
       from); .expanded is toggled by quickReplyToggle in lesson-session.js
       and cleared again once a reply is tapped. */
    #quickReplies.visible { display: none; }
    #quickReplies.visible.expanded {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      bottom: 76px;
      max-width: calc(100vw - 24px);
    }
    #quickReplies .quick-reply { width: 100%; text-align: left; }

    /* Google-Maps-style pan control isn't needed on a phone: the board is
       already full-width per column there (see #boardCols mobile override in
       base.css), so there's nothing to pan sideways to. */
    #boardNavPad.visible { display: none; }
  }

  /* hint caption above the toolbar in PTT mode */
  #talkHint {
    position: absolute;
    bottom: 84px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--tb-text-muted);
    background: var(--tb-panel);
    padding: 5px 12px;
    border-radius: 999px;
    display: none;
    white-space: nowrap;
    z-index: 30;
  }
  #talkHint.visible { display: block; }

  /* lesson reel: sidebar deck of every board shown this lesson (whiteboard.js
     addReelEntry()/selectReelBoard()) */
  #lessonReel {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 96px;
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px 8px;
    background: var(--tb-panel-soft);
    backdrop-filter: blur(6px);
    border-right: 1px solid rgba(255,255,255,0.1);
    z-index: 20;
    transition: width .25s ease;
    overflow: hidden;
  }
  #lessonReel.visible { display: flex; }
  #lessonReel.collapsed { width: 40px; }
  #lessonReel.collapsed #reelList { display: none; }

  #reelToggle {
    width: 28px; height: 28px;
    flex: none;
    align-self: flex-start;
    border-radius: 8px;
    color: var(--tb-text);
    background: rgba(255,255,255,0.1);
  }
  #reelToggle:hover { background: rgba(255,255,255,0.18); }
  #reelList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* flex items default to min-height:auto, which stops them
      shrinking below their content size — without this the list just grows
      past its container instead of scrolling once it's full */
  }
  .reel-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    border: 2px solid transparent;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    text-align: center;
  }
  .reel-item:hover { background: rgba(255,255,255,0.12); }
  .reel-item.active { border-color: var(--tb-amber); }
  .reel-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .reel-label {
    font-size: 10px;
    color: var(--tb-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* lesson roadmap: the upfront Phase 1 blueprint plan, shown above the
     per-board reel (renderRoadmap()/markSubtopicAdvanced() in whiteboard.js) */
  #roadmapList {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 4px;
  }
  #lessonReel.collapsed #roadmapList { display: none; }
  .roadmap-step { display: flex; flex-direction: column; }
  /* boards drawn for this step (addReelEntry), indented right under it */
  .roadmap-step-boards {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 2px 12px;
    padding-left: 6px;
    border-left: 2px solid rgba(255,255,255,0.12);
  }
  .roadmap-step-boards:empty { display: none; }
  .roadmap-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 6px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    opacity: .55;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity .2s ease, background .2s ease, border-color .2s ease;
  }
  .roadmap-item:hover { opacity: .85; background: rgba(255,255,255,0.1); }
  .roadmap-item.current { opacity: 1; background: rgba(253,177,58,0.16); border-color: rgba(253,177,58,0.5); }
  .roadmap-item.done { opacity: .4; }
  .roadmap-item.done:hover { opacity: .7; }
  /* which board is actually on screen right now — independent of teaching
     progress, since you can browse an earlier step while the live lesson
     has already moved past it */
  .roadmap-item.viewing { box-shadow: 0 0 0 2px var(--tb-teal) inset; }
  /* nothing drawn for this step yet (jumpToSubtopic() found no board) */
  .roadmap-item.empty-flash { background: rgba(251,113,133,0.28); }
  .roadmap-num {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: var(--tb-text);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .roadmap-item.current .roadmap-num { background: var(--tb-amber); color: #1c2420; }
  .roadmap-title {
    font-size: 10px;
    color: var(--tb-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* passive-review banner: shown while looking at an older reel board
     (showReviewBanner()/hideReviewBanner() in whiteboard.js) */
  #reviewBanner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 92%;
    padding: 8px 14px;
    background: var(--tb-panel-strong);
    color: var(--tb-text);
    border-radius: 999px;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }
  #reviewBanner[hidden] { display: none; }
  #reviewBanner button {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    white-space: nowrap;
  }
  #reviewBanner button:hover { background: rgba(255,255,255,0.26); }
  #reviewNewBadge { background: var(--tb-blue); }
  #reviewNewBadge[hidden] { display: none; }