/* Bystander Effect lesson. All rules scoped under .bys-* */
.bys-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bys-open { flex: 1; justify-content: center; padding: 0 16px; }

/* the phone */
.bys-phone { position: relative; width: 100%; max-width: 320px; min-height: 300px; padding: 0 0 14px; border-radius: 28px; background: #0f1220; border: 3px solid #2c3146; box-shadow: 0 16px 34px rgba(0,0,0,.45); overflow: hidden; }
.bys-top { display: flex; flex-direction: column; align-items: center; padding: 14px 10px 10px; background: #181c2e; border-bottom: 1px solid #2c3146; }
.bys-top b { font: 800 15px var(--sans); color: #f2f3f7; }
.bys-top small { font: 600 12.5px var(--sans); color: #8d93a8; }
.bys-msgs { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 0; }
.bys-msg { max-width: 82%; padding: 9px 12px; border-radius: 18px; font: 600 15px/1.3 var(--sans); animation: bysIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bysIn { from { opacity: 0; translate: 0 8px; scale: .96; } }
.bys-msg.in { align-self: flex-start; background: #262b40; color: #f2f3f7; border-bottom-left-radius: 6px; }
.bys-msg.out { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 6px; }
.bys-from { display: block; font: 800 12.5px var(--sans); color: var(--gold); margin-bottom: 2px; }
.bys-seen { align-self: flex-start; font: 700 12.5px var(--sans); color: #8d93a8; padding: 0 4px; }
.bys-seen b { color: #f2f3f7; font-variant-numeric: tabular-nums; }
.bys-none { align-self: center; margin-top: 8px; padding: 4px 12px; border-radius: 10px; background: rgba(255,255,255,.06); font: 700 13px var(--sans); color: #8d93a8; }
.bys-clock { position: absolute; right: 14px; top: 16px; font: 700 12.5px var(--sans); color: #8d93a8; font-variant-numeric: tabular-nums; }

/* the intercom and the rooms */
.bys-lab { width: 100%; max-width: 350px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bys-spk { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.bys-spk i { width: 5px; height: 14px; border-radius: 3px; background: var(--dim); }
.bys-spk b { margin-left: 8px; font: 700 14px/1.2 var(--serif); color: var(--dim); }
.bys-lab.live .bys-spk i { background: var(--gold); animation: bysWave .4s ease-in-out infinite alternate; }
.bys-lab.live .bys-spk i:nth-child(2) { animation-delay: .13s; }
.bys-lab.live .bys-spk i:nth-child(3) { animation-delay: .26s; }
.bys-lab.live .bys-spk b { color: var(--gold); }
@keyframes bysWave { to { scale: 1 2; } }
.bys-doors { display: grid; grid-template-columns: repeat(10, 26px); gap: 8px 6px; justify-content: center; }
.bys-door { position: relative; display: block; width: 26px; height: 40px; border-radius: 4px 4px 0 0; background: #3a3f52; border: 2px solid #565c73; perspective: 60px; }
.bys-door::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#5d6480, #474d65); transform-origin: left center; transition: transform .35s ease-out; }
.bys-door::after { content: ''; position: absolute; left: 50%; bottom: 3px; translate: -50% 0; width: 10px; height: 22px; border-radius: 5px 5px 2px 2px; background: var(--gold); opacity: 0; transition: opacity .3s .15s; }
.bys-door.open { border-color: var(--gold); background: #f6d68a; }
.bys-door.open::before { transform: rotateY(-70deg); }
.bys-door.open::after { opacity: 1; }
.bys-tally { font: 700 14px var(--sans); color: var(--dim); }
.bys-tally b { font: 800 20px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.bys-note { font: 600 12.5px var(--sans); color: var(--faint); }

/* one student thinking */
.bys-think { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bys-me { display: flex; flex-direction: column; align-items: center; padding: 16px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); }
.bys-me i { width: 34px; height: 54px; border-radius: 4px 4px 0 0; background: #3a3f52; border: 2px solid #565c73; }
.bys-me span { margin-top: 6px; font: 700 12.5px var(--sans); color: var(--dim); }
.bys-think p { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--raised); font: 600 16px/1.3 var(--serif); color: var(--text); }

/* the camera */
.bys-cam { position: relative; width: 100%; max-width: 340px; padding: 12px; border-radius: 12px; background: #11141c; border: 2px solid #2c3146; }
.bys-rec { position: absolute; left: 12px; top: 10px; font: 800 12px var(--mono); color: #ff5a4a; letter-spacing: .1em; }
.bys-rec::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #ff5a4a; animation: bysBlink 1s steps(2) 3; }
@keyframes bysBlink { 50% { opacity: 0; } }
.bys-street { height: 90px; margin: 18px 0 10px; border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px), linear-gradient(#2a3040, #1b1f2b); filter: grayscale(1); }
.bys-street svg { display: block; width: 100%; height: 100%; }
.bys-curb { fill: #3a4050; }
.bys-p { fill: #8a90a2; }
.bys-p.bys-fight { fill: #c9ced9; }
.bys-p.bys-step { fill: #8a90a2; transition: fill .4s; }
.bys-cam.done .bys-p.bys-step { fill: var(--mint); }
.bys-bar { height: 14px; border-radius: 7px; background: #262b3c; overflow: hidden; }
.bys-bar i { display: block; height: 100%; width: 0; background: var(--mint); transition: width 1s ease-out; }
.bys-cam.done .bys-bar i { width: 90%; }
.bys-cap { margin-top: 6px; font: 700 12.5px var(--sans); color: #8d93a8; text-align: center; }

.bys-art { display: block; width: 100%; max-width: 320px; filter: drop-shadow(0 10px 18px rgba(123,92,253,.28)); }

@media (max-height: 700px) {
  .bys-phone { min-height: 250px; }
  .bys-msg { font-size: 14px; }
  .bys-doors { gap: 6px 5px; }
  .bys-door { height: 34px; }
  .bys-street { height: 60px; }
  .bys-art { max-width: 250px; }
}