/* Training with Bot */

.tr-hero {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.tr-hero h1 { margin: 0 0 0.4rem; font-size: 1.6rem; }
.tr-hero p { margin: 0 0 0.9rem; }

.tr-bot-big { flex-shrink: 0; width: 104px; height: 114px; }

/* Lotus Bot (classroom/lotus-bot.js) */
.lb-robot { display: block; width: 100%; height: 100%; overflow: visible; }
.lb-all { transform-box: view-box; transform-origin: 60px 130px; animation: lb-float 3.2s ease-in-out infinite; }
.lb-head { fill: #d9b46a; stroke: #a8823c; stroke-width: 2; }
.lb-ear, .lb-neck { fill: #a8823c; }
.lb-face { fill: #1d2230; }
.lb-eye { fill: #7fe3ff; }
.lb-shine { fill: #fff; }
.lb-eyes { transform-box: view-box; transform-origin: 60px 56px; animation: lb-blink 4.6s infinite; }
.lb-happy-eyes { fill: none; stroke: #7fe3ff; stroke-width: 3.5; stroke-linecap: round; opacity: 0; }
.lb-cheek { fill: #f08aa8; opacity: 0.75; }
.lb-mouth { fill: #7fe3ff; transform-box: fill-box; transform-origin: center; }
.lb-antenna { stroke: #a8823c; stroke-width: 3; stroke-linecap: round; }
.lb-bulb { fill: #e86a9a; }
.lb-chest { fill: #d9b46a; stroke: #a8823c; stroke-width: 2; }
.lb-light { fill: #e86a9a; }

.lb-robot.talking .lb-mouth { animation: lb-talk 0.26s ease-in-out infinite alternate; }
.lb-robot.talking .lb-bulb,
.lb-robot.talking .lb-light { animation: lb-glow 0.4s ease-in-out infinite alternate; }
.lb-robot.happy .lb-all { animation: lb-jump 0.55s ease-out 2; }
.lb-robot.happy .lb-eyes { opacity: 0; }
.lb-robot.happy .lb-happy-eyes { opacity: 1; }
.lb-robot.sad .lb-all { animation: lb-shake 0.45s ease-in-out 2; }
.lb-robot.sad .lb-mouth { transform: scaleX(0.6); }

@keyframes lb-float { 50% { transform: translateY(-3px); } }
@keyframes lb-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes lb-talk { from { transform: scale(0.85, 0.45); } to { transform: scale(1.05, 2.2); } }
@keyframes lb-glow { to { fill: #ffd27a; } }
@keyframes lb-jump { 40% { transform: translateY(-14px) scale(1.04); } }
@keyframes lb-shake { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

@media (prefers-reduced-motion: reduce) {
  .lb-all, .lb-robot.happy .lb-all, .lb-robot.sad .lb-all { animation: none; }
}

/* Language and sound */
.tr-controls { display: flex; align-items: center; gap: 0.4rem; }
.tr-controls[hidden] { display: none; }
.tr-lang { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.tr-lang button,
.tr-mute,
.tr-again {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.tr-lang button { padding: 0.35rem 0.75rem; color: var(--muted); }
.tr-lang button.on { background: var(--gold); color: #1b1d22; font-weight: 600; }
.tr-mute { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); font-size: 1rem; }
.tr-again { align-self: flex-start; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); font-size: 0.95rem; flex-shrink: 0; }
.tr-again:hover, .tr-mute:hover { border-color: var(--gold); }

@media (max-width: 600px) {
  .training .brand span { display: none; }
  .training .cr-nav-actions { gap: 0.4rem; }
}

:lang(ta) body, [lang="ta"] { font-family: "Noto Sans Tamil", Inter, system-ui, sans-serif; }

.tr-overall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
}

.tr-voice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 0.8rem; }
.tr-voice-row [hidden] { display: none; }
.tr-voice-pick { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.tr-voice-note { display: grid; gap: 0.4rem; justify-items: start; }
.tr-voice-note [hidden] { display: none; }

.tr-help { width: min(620px, calc(100% - 2rem)); }
.tr-help ol { margin: 0.6rem 0 0.8rem; padding-left: 1.3rem; display: grid; gap: 0.45rem; line-height: 1.5; }
.tr-help h3 { margin: 1rem 0 0; font-size: 1rem; }
.tr-help-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tr-help-links:empty { display: none; }
.tr-help-other { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.tr-help-other summary { cursor: pointer; color: var(--gold-light); font-size: 0.9rem; }
.tr-help-result { min-height: 1.4em; margin: 0.8rem 0 0; font-weight: 600; }
.tr-help-result.good { color: #7fcf9a; }
.tr-help-result.bad { color: #e88b8b; }
.ad-main .tr-voice-pick select { width: auto; max-width: 100%; height: 34px; font-size: 0.85rem; }
.tr-back { flex-shrink: 0; }

.tr-overall-stars { font-weight: 600; color: var(--gold-light); }

.tr-bar {
  flex-basis: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.tr-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #7fcf9a);
}

.tr-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.8rem;
}

.tr-chapter {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.tr-chapter:hover { border-color: var(--gold); transform: translateY(-1px); }
.tr-chapter.next { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tr-chapter.done { border-color: rgba(127, 207, 154, 0.55); }

.tr-chapter-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.5rem;
}

.tr-chapter-icon img { width: 38px; height: 38px; }
.tr-title-icon { margin-right: 0.45rem; }
.tr-title-icon img { width: 1.6em; height: 1.6em; vertical-align: -0.4em; }

.tr-chapter-text { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.tr-chapter-text small { color: var(--muted); font-size: 0.8rem; }
.tr-chapter-score { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; color: var(--gold-light); white-space: nowrap; }
.tr-chapter.done .tr-chapter-score { color: #7fcf9a; }

/* A chapter */

.tr-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "head head"
    "board bubble"
    "board side";
  gap: 1rem 1.5rem;
  width: min(1100px, 100% - 2rem);
  margin: 1rem auto 3rem;
  align-items: start;
}

.tr-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.tr-head h1 { margin: 0; font-size: 1.35rem; }

.tr-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.tr-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.tr-dot.info { width: 8px; height: 8px; align-self: center; }
.tr-dot.past { background: rgba(127, 207, 154, 0.75); }
.tr-dot.now { background: var(--gold); box-shadow: 0 0 0 2px rgba(201, 164, 92, 0.35); }

.tr-board-col { grid-area: board; display: flex; justify-content: center; }
.tr-board-wrap { width: min(100%, calc(100svh - 72px - 6rem)); min-width: 260px; }

.tr-bubble {
  grid-area: bubble;
  position: relative;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(201, 164, 92, 0.5);
}

.tr-bot { flex-shrink: 0; width: 70px; height: 77px; margin: -0.3rem 0 -0.3rem -0.2rem; }

.tr-speech { flex: 1; min-width: 0; display: grid; gap: 0.4rem; }
.tr-bubble p { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.tr-bubble .tr-voice-note { font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
.tr-bubble .tr-voice-note[hidden] { display: none; }
.tr-bubble strong { color: var(--gold-light); }

.tr-side { grid-area: side; display: grid; gap: 0.8rem; }

.tr-choices { display: grid; gap: 0.5rem; }
.tr-choices[hidden] { display: none; }

.tr-choice {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.tr-choice:hover:not(:disabled) { border-color: var(--gold); }
.tr-choice.right { border-color: #7fcf9a; background: rgba(127, 207, 154, 0.18); }
.tr-choice.wrong { border-color: #e06c6c; background: rgba(224, 108, 108, 0.12); opacity: 0.75; cursor: default; }

.tr-feedback { margin: 0; min-height: 1.5em; font-weight: 600; font-size: 1rem; }
.tr-feedback.good { color: #7fcf9a; }
.tr-feedback.bad { color: #e88b8b; }
.tr-feedback strong { color: inherit; text-decoration: underline; }

@media (max-width: 900px) {
  .tr-lesson {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "head" "bubble" "board" "side";
    gap: 0.7rem;
    margin-top: 0.7rem;
  }
  .tr-dots { margin-left: 0; flex-basis: 100%; }
  .tr-board-wrap { width: min(100%, 520px); }
  .tr-bubble { padding: 0.7rem 0.8rem; }
  .tr-bubble p { font-size: 1rem; }
  .tr-bot { width: 54px; height: 60px; }
  .tr-hero { flex-direction: column; gap: 0.4rem; }
  .tr-bot-big { width: 70px; height: 77px; }
  .tr-chapter-score { white-space: normal; max-width: 5.5rem; text-align: right; }
  .tr-hero h1 { font-size: 1.3rem; }
  .tr-lang button { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
  .tr-chapters { grid-template-columns: 1fr; }
}