/* ============================================================
   W4Y MENTOR VISUALS — shared stylesheet
   Include this ONE file on every lesson page, across every
   track/profession. Do not duplicate these styles per lesson.
   ============================================================ */

:root{
  --mv-ink:#0B0B0D;
  --mv-paper:#EDEAE3;
  --mv-amber:#E8A33D;
  --mv-teal:#3F6B66;
  --mv-ember:#D9502C;
  --mv-line:#2A2A2E;
  --mv-panel:#151517;
}

.mv-card{
  background:var(--mv-panel);
  color:var(--mv-paper);
  border:1px solid var(--mv-line);
  border-radius:4px;
  overflow:hidden;
  font-family:'Inter',sans-serif;
}

/* --- Mentor avatar + speaking ring --- */
.mv-mentor-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px 16px;
}
.mv-avatar-wrap{
  position:relative;
  width:64px;height:64px;
  flex:0 0 auto;
}
.mv-avatar-ring{
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid var(--mv-amber);
  opacity:0;
  transform:scale(.9);
  transition:opacity .2s ease, transform .2s ease;
}
.mv-avatar-wrap.speaking .mv-avatar-ring{
  opacity:1;
  animation:mvPulseRing 1.1s ease-out infinite;
}
@keyframes mvPulseRing{
  0%{ transform:scale(.92); opacity:.9; }
  70%{ transform:scale(1.18); opacity:0; }
  100%{ transform:scale(1.18); opacity:0; }
}
.mv-avatar{
  width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(160deg, #24343a, #142023);
  border:1px solid var(--mv-line);
  overflow:hidden;
}
.mv-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.mv-mentor-name{
  font-family:'Oswald',sans-serif;
  font-size:17px;
  letter-spacing:.02em;
}
.mv-mentor-role{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#8b877e;
  margin-top:2px;
}
.mv-mentor-role .mv-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:#5a564d;
  margin-right:6px;
}
.mv-avatar-wrap.speaking ~ .mv-mentor-meta .mv-dot{
  background:var(--mv-amber);
  box-shadow:0 0 6px var(--mv-amber);
}

/* --- Controls row: language select + play button --- */
.mv-controls{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 24px 18px;
  flex-wrap:wrap;
}
.mv-controls select, .mv-play{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  background:var(--mv-ink);
  color:var(--mv-paper);
  border:1px solid var(--mv-line);
  border-radius:3px;
  padding:8px 10px;
  cursor:pointer;
}
.mv-play{
  display:flex;align-items:center;gap:8px;
  color:var(--mv-ink);
  background:var(--mv-amber);
  border:none;
  font-weight:600;
  padding:9px 16px;
}
.mv-play:active{transform:translateY(1px);}
.mv-play svg{width:12px;height:12px;}

/* --- Narration text block, karaoke highlight --- */
.mv-narration{
  margin:18px 24px 24px;
  padding:16px 18px;
  background:var(--mv-ink);
  border-left:3px solid var(--mv-amber);
  border-radius:0 3px 3px 0;
  font-size:15px;
  line-height:1.7;
  color:#c9c5bc;
}
.mv-narration .mv-word{
  transition:color .15s ease, background .15s ease;
  border-radius:2px;
  padding:0 1px;
}
.mv-narration .mv-word.active{
  color:var(--mv-ink);
  background:var(--mv-amber);
}

/* --- Visual mount point: renderer draws inside here --- */
.mv-visual{
  padding:4px 24px 8px;
}
.mv-visual-label{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#8b877e;
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

/* Shared "shot strip" frame styling, used by pacingCompare */
.mv-strip{
  display:flex;
  gap:2px;
  height:64px;
  align-items:stretch;
  background:var(--mv-ink);
  padding:6px;
  border-radius:3px;
  overflow:hidden;
}
.mv-frame{
  flex:1 1 auto;
  background:linear-gradient(160deg, #26262a, #1c1c1f);
  border:1px solid #38383c;
  border-radius:2px;
  transition:flex-grow .25s ease, background .25s ease, border-color .25s ease;
}
.mv-frame.hit{
  background:linear-gradient(160deg, var(--mv-amber), #c07f28);
  border-color:var(--mv-amber);
}

.mv-scrubber{ padding:14px 24px 4px; }
.mv-scrubber input[type=range]{ width:100%; accent-color:var(--mv-amber); }
.mv-scrubber-labels{
  display:flex;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#8b877e;
  margin-top:2px;
}

.mv-readout{ display:flex; gap:18px; padding:16px 24px 4px; }
.mv-stat{flex:1;}
.mv-stat .mv-n{ font-family:'Oswald',sans-serif; font-size:22px; color:var(--mv-amber); }
.mv-stat .mv-l{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#8b877e;
}
.mv-mood{ font-family:'Oswald',sans-serif; font-size:22px; }
.mv-mood.calm{color:var(--mv-teal);}
.mv-mood.urgent{color:var(--mv-ember);}

/* --- Generic timeline visual type --- */
.mv-timeline{
  display:flex;
  align-items:center;
  gap:0;
  background:var(--mv-ink);
  border-radius:3px;
  padding:20px 16px;
}
.mv-timeline .mv-tl-track{
  flex:1;
  height:2px;
  background:var(--mv-line);
  position:relative;
}
.mv-timeline .mv-tl-dot{
  width:12px;height:12px;
  border-radius:50%;
  background:var(--mv-amber);
  border:2px solid var(--mv-ink);
  margin:0 -6px;
  position:relative;
  z-index:1;
}
.mv-timeline .mv-tl-label{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:#8b877e;
  text-align:center;
  margin-top:8px;
}

/* --- Generic before/after visual type --- */
.mv-before-after{
  display:flex;
  gap:2px;
  background:var(--mv-ink);
  border-radius:3px;
  overflow:hidden;
}
.mv-before-after .mv-ba-pane{
  flex:1;
  padding:20px 14px;
  text-align:center;
}
.mv-before-after .mv-ba-pane.before{ background:#1c1c1f; }
.mv-before-after .mv-ba-pane.after{ background:linear-gradient(160deg,#26343a,#182225); }
.mv-before-after .mv-ba-title{
  font-family:'JetBrains Mono',monospace;
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#8b877e;
  margin-bottom:8px;
}
.mv-before-after .mv-ba-value{
  font-family:'Oswald',sans-serif;
  font-size:26px;
  color:var(--mv-paper);
}

/* --- Generic build-up (stacking) visual type --- */
.mv-buildup{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:90px;
  background:var(--mv-ink);
  border-radius:3px;
  padding:14px;
}
.mv-buildup .mv-bu-bar{
  flex:1;
  background:linear-gradient(180deg, var(--mv-amber), #b57a2c);
  border-radius:2px 2px 0 0;
  transition:height .3s ease;
}

.mv-note{
  padding:0 24px 22px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#6f6b63;
  line-height:1.6;
  border-top:1px solid var(--mv-line);
  padding-top:14px;
}
.mv-note code{color:var(--mv-amber);}

/* ============================================================
   MENTOR Q&A — post-lesson "Ask [Mentor]" panel
   ============================================================ */
.mq-card{ margin-top:18px; }
.mq-thread{
  max-height:280px;
  overflow-y:auto;
  padding:0 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mq-bubble{
  max-width:82%;
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.5;
}
.mq-bubble.student{
  align-self:flex-end;
  background:var(--mv-amber);
  color:var(--mv-ink);
  border-bottom-right-radius:3px;
}
.mq-bubble.mentor{
  align-self:flex-start;
  background:var(--mv-ink);
  color:var(--mv-paper);
  border:1px solid var(--mv-line);
  border-bottom-left-radius:3px;
}
.mq-bubble.thinking{
  display:flex;
  gap:4px;
  padding:14px;
}
.mq-bubble.thinking span{
  width:6px;height:6px;border-radius:50%;
  background:var(--mv-amber);
  animation:mqBounce 1s infinite ease-in-out;
}
.mq-bubble.thinking span:nth-child(2){animation-delay:.15s;}
.mq-bubble.thinking span:nth-child(3){animation-delay:.3s;}
@keyframes mqBounce{
  0%,80%,100%{ transform:translateY(0); opacity:.5; }
  40%{ transform:translateY(-5px); opacity:1; }
}

.mq-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 24px 22px;
}
.mq-input-row input[type="text"]{
  flex:1;
  font-family:'Inter',sans-serif;
  font-size:14px;
  background:var(--mv-ink);
  color:var(--mv-paper);
  border:1px solid var(--mv-line);
  border-radius:20px;
  padding:10px 16px;
}
.mq-input-row input[type="text"]::placeholder{ color:#6f6b63; }
.mq-send{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:600;
  background:var(--mv-amber);
  color:var(--mv-ink);
  border:none;
  border-radius:20px;
  padding:10px 18px;
  cursor:pointer;
}
.mq-mic{
  width:38px;height:38px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--mv-ink);
  border:1px solid var(--mv-line);
  color:var(--mv-paper);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.mq-mic svg{width:16px;height:16px;}
.mq-mic.listening{
  background:var(--mv-ember);
  border-color:var(--mv-ember);
  animation:mqMicPulse 1s infinite ease-in-out;
}
@keyframes mqMicPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(217,80,44,.5); }
  50%{ box-shadow:0 0 0 8px rgba(217,80,44,0); }
}