/* ============================================================
   StreetQuants — Toshi dock + lesson film (ported from pixel academy)
   Palette matched to the Quant Trek navy theme (css/trek.css).
   ============================================================ */

/* ---------------- lesson screen shell ---------------- */
.trek-lesson-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
  position: relative;
}
.trek-lesson.has-film .trek-lesson-main { padding-right: 0; }

/* film layout: stage + dock column (like pixel academy's lesson-film-wrap) */
.trek-lesson.has-film .trek-lesson-screen {
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
}
.trek-lesson.has-film .trek-lesson-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.trek-lesson.has-film .trek-lesson-dockside {
  flex: 0 0 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 4px;
}
@media (max-width: 900px) {
  .trek-lesson.has-film .trek-lesson-screen { flex-direction: column; }
  .trek-lesson.has-film .trek-lesson-dockside { flex: 0 0 auto; }
}

/* ---------------- film player ---------------- */
.lesson-film {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
}
.lesson-video-frame {
  position: relative;
  flex: 1;
  min-height: 220px;
  border: 2px solid var(--trek-line, #1c2c5e);
  border-radius: 14px;
  background: #04070f;
  overflow: hidden;
  box-shadow: 0 0 24px rgba(0, 0, 0, .55), inset 0 0 60px rgba(20, 40, 90, .18);
}
.lesson-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.lesson-video-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(2, 5, 14, .82);
  cursor: pointer;
  border: 0;
  color: var(--trek-txt, #e9efff);
  font-family: inherit;
}
.lesson-video-veil:hover { background: rgba(4, 10, 26, .74); }
.lesson-video-play {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 3px solid var(--trek-cyan, #22d9ff);
  border-radius: 16px;
  background: rgba(34, 217, 255, .1);
  color: var(--trek-cyan, #22d9ff);
  font-size: 26px;
  box-shadow: 0 0 24px rgba(34, 217, 255, .35);
}
.lesson-video-veil:hover .lesson-video-play { background: rgba(34, 217, 255, .22); }
.lesson-video-veil-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--trek-cyan, #22d9ff);
}
.lesson-video-veil-sub { font-size: 11px; letter-spacing: .08em; color: var(--trek-mut, #8d9bca); }
.lesson-video-pause,
.lesson-video-skip {
  position: absolute;
  top: 10px;
  border: 2px solid var(--trek-line2, #24376f);
  background: rgba(4, 8, 22, .85);
  color: var(--trek-mut, #8d9bca);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.lesson-video-pause { right: 10px; }
.lesson-video-skip { right: 10px; top: 44px; }
.lesson-video-pause:hover, .lesson-video-skip:hover {
  border-color: var(--trek-cyan, #22d9ff);
  color: var(--trek-cyan, #22d9ff);
}
.seg-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: rgba(10, 20, 48, .9);
  border-top: 1px solid var(--trek-line, #1c2c5e);
}
.seg-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--trek-cyan, #22d9ff);
  box-shadow: 0 0 8px rgba(34, 217, 255, .45);
  transition: width .2s linear;
}

/* synced voice subtitles */
.lesson-subs {
  border: 2px solid var(--trek-line, #1c2c5e);
  border-radius: 12px;
  background: rgba(8, 14, 34, .9);
  padding: 12px 14px;
  min-height: 64px;
  max-height: 108px;
  overflow: auto;
  box-shadow: inset 0 0 40px rgba(20, 40, 90, .2);
}
.lesson-subs p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--trek-mut2, #6b7bab); }
.subs-spoken { color: var(--trek-txt, #e9efff); font-weight: 700; }
.bubble-caret { animation: toshi-caret 1s steps(2) infinite; color: var(--trek-cyan, #22d9ff); }
@keyframes toshi-caret { 50% { opacity: 0; } }

/* ---------------- Toshi dock ---------------- */
.lesson-dock {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: start;
  width: 100%;
  max-width: 280px;
  min-width: 0;
  z-index: 30;
  font-family: inherit;
}
.lesson-dock.is-floating { position: fixed; z-index: 9000; max-width: 300px; }
.lesson-dock.is-dragging { opacity: .92; }
.lesson-dock .dock-avatar-wrap { display: flex; justify-content: flex-start; }
.lesson-dock.is-closed .dock-avatar-wrap { margin-bottom: 0; }

.dock-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: grab;
  overflow: visible;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .6));
  touch-action: none;
  user-select: none;
}
.dock-avatar:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 10px rgba(34, 217, 255, .38)) drop-shadow(3px 3px 0 rgba(0, 0, 0, .6));
}
.dock-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.dock-avatar-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #061020;
  background: var(--trek-green, #2dffa8);
  color: #04220f;
  font-size: 10px;
  border-radius: 999px;
  cursor: pointer;
}
.dock-avatar-badge.speaking {
  background: #ff3b2f;
  color: #fff;
  animation: toshi-glow 1s ease-in-out infinite;
}
@keyframes toshi-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 59, 47, .5); }
  50% { box-shadow: 0 0 14px rgba(255, 59, 47, .9); }
}

.dock-bubble-wrap { position: relative; width: 100%; max-width: 280px; }
.toshi-bubble {
  position: relative;
  width: 100%;
  max-width: 280px;
  padding: 10px 12px;
  border: 2px solid var(--trek-line2, #24376f);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: rgba(10, 20, 48, .96);
  color: var(--trek-txt, #e9efff);
  font-size: 13.5px;
  line-height: 1.42;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .45), 0 0 12px rgba(0, 0, 0, .4);
  overflow-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
.toshi-bubble p { margin: 0 0 6px; overflow-wrap: break-word; }
.toshi-bubble p:last-child { margin-bottom: 0; }
.toshi-para { margin-top: 6px; }
.bubble-visible { color: var(--trek-txt, #e9efff); }
.bubble-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--trek-mut2, #6b7bab); }
.bubble-skip {
  margin-top: 6px;
  background: none;
  border: 1px solid var(--trek-line2, #24376f);
  border-radius: 6px;
  color: var(--trek-cyan, #22d9ff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 3px 8px;
  cursor: pointer;
}
.bubble-skip:hover { border-color: var(--trek-cyan, #22d9ff); }
.bubble-back {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 6px;
  color: var(--trek-cyan, #22d9ff);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline dashed;
}
.bubble-tail {
  position: absolute;
  left: 14px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--trek-line2, #24376f);
}
.bubble-history {
  display: grid;
  gap: 6px;
  max-height: 130px;
  overflow: auto;
  margin-bottom: 8px;
  padding-right: 2px;
}
.bubble-row { display: block; }
.bubble-user {
  display: inline-block;
  background: rgba(47, 123, 255, .18);
  border: 1px solid var(--trek-blue, #2f7bff);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  color: var(--trek-txt, #e9efff);
}
.bubble-history-toshi { font-size: 12.5px; color: var(--trek-mut, #8d9bca); }
.blink { animation: toshi-blink 1.1s steps(2) infinite; color: var(--trek-mut, #8d9bca); }
@keyframes toshi-blink { 50% { opacity: .35; } }

.dock-bar {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  align-items: center;
}
.dock-input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--trek-line2, #24376f);
  border-radius: 10px;
  background: rgba(6, 12, 34, .95);
  color: var(--trek-txt, #e9efff);
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}
.dock-input::placeholder { color: var(--trek-mut2, #6b7bab); }
.dock-input:focus { border-color: var(--trek-cyan, #22d9ff); box-shadow: 0 0 0 2px rgba(34, 217, 255, .15); }
.dock-mic, .dock-send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--trek-line2, #24376f);
  border-radius: 10px;
  background: rgba(10, 20, 48, .95);
  color: var(--trek-txt, #e9efff);
  font-size: 15px;
  cursor: pointer;
}
.dock-mic:hover, .dock-send:hover { border-color: var(--trek-cyan, #22d9ff); color: var(--trek-cyan, #22d9ff); }
.dock-mic.live {
  border-color: #ff3b2f;
  color: #ff3b2f;
  animation: toshi-glow 1s ease-in-out infinite;
}
.dock-listening {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #ff3b2f;
  animation: toshi-blink 1.2s steps(2) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dock-avatar-badge.speaking, .dock-mic.live, .bubble-caret, .blink, .dock-listening { animation: none; }
}