/* ==========================================================
   Spoken English page — chat hero, Sentence Builder and
   Listen & Speak cards. Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.talk-scene{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; }
.talk-scene .bubble rect, .talk-scene .bubble path{ fill:#fff; }
.talk-scene .bubble text{ font-family: var(--font-display); font-weight:700; font-size:15px; fill: var(--navy); text-anchor:middle; }
.talk-scene .floater{ font-family: var(--font-accent); font-style:italic; font-size:26px; fill: rgba(255,255,255,.35); }
.talk-scene .wave{ fill: var(--gold); }

/* ---------- Sentence Builder ---------- */
.sb-prompt{ background: var(--paper); border-radius: var(--radius-md); padding:1rem 1.2rem; margin-bottom:1rem; border-left:4px solid var(--coaching-accent); }
.sb-prompt-label{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--slate); }
.sb-hindi{ font-size:1.35rem; font-weight:600; color: var(--navy); margin:.2rem 0 0; line-height:1.5; }

.sb-answer{
  min-height:62px; border:2px dashed var(--line); border-radius: var(--radius-md); padding:.5rem; display:flex; flex-wrap:wrap; gap:.45rem;
  align-items:center; transition: border-color .25s ease, background .25s ease;
}
.sb-answer:empty::before{ content: attr(data-empty); color:#A9A190; font-size:.85rem; padding:.4rem; }
.sb-answer.is-correct{ border-style:solid; border-color: var(--study-accent); background: rgba(31,122,99,.07); }
.sb-answer.is-wrong{ border-color:#D9796A; animation: sbShake .4s ease; }
@keyframes sbShake{ 25%{ transform: translateX(-5px); } 50%{ transform: translateX(5px); } 75%{ transform: translateX(-2px); } }
.sb-bank{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; min-height:44px; }

.word-tile{
  border:none; background: var(--navy); color:#fff; font-weight:700; font-size:.95rem; border-radius:10px; padding:.5rem .85rem;
  box-shadow: 0 4px 0 #0A1426; transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.word-tile:hover{ background: var(--royal); }
.word-tile:active{ transform: translateY(3px); box-shadow: 0 1px 0 #0A1426; }
.sb-bank .word-tile{ background:#fff; color: var(--navy); border:1.5px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.sb-bank .word-tile:hover{ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.sb-answer.is-correct .word-tile{ background: var(--study-accent); box-shadow: 0 4px 0 #11503F; }
.sb-score{ font-family: var(--font-display); font-weight:800; font-size:1.2rem; color: var(--gold-deep); }

/* ---------- Listen & Speak ---------- */
.phrase-list{ display:flex; flex-direction:column; gap:.6rem; max-height:430px; overflow-y:auto; padding-right:.2rem; }
.phrase-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius: var(--radius-md);
  padding:.7rem .8rem; background:#fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.phrase-card:hover{ border-color: rgba(217,114,44,.45); }
.phrase-card.is-listening{ border-color: var(--coaching-accent); box-shadow: 0 0 0 3px rgba(217,114,44,.18); }
.phrase-text{ flex:1 1 180px; min-width:0; }
.phrase-text b{ display:block; color: var(--navy); font-size:.95rem; }
.phrase-hi{ font-size:.82rem; color: var(--slate); }
.phrase-tag{ font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--coaching-accent); }
.phrase-actions{ display:flex; gap:.35rem; }
.phrase-actions button{
  width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color: var(--navy);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; transition:.2s;
}
.phrase-actions button:hover{ background: var(--coaching-accent); border-color: var(--coaching-accent); color:#fff; }
.phrase-card.is-listening .phrase-mic{ background:#D9412C; border-color:#D9412C; color:#fff; animation: micPulse 1s ease infinite; }
@keyframes micPulse{ 50%{ box-shadow: 0 0 0 8px rgba(217,65,44,.18); } }
.phrase-result{ flex-basis:100%; margin:0; font-size:.8rem; font-weight:600; color: var(--slate); }
.phrase-result:empty{ display:none; }
.phrase-result.ok{ color: var(--study-accent); }
.phrase-result.mid{ color: var(--gold-deep); }
.phrase-result.err{ color:#B8422E; }
.phrase-note{ font-size:.75rem; color: var(--slate); margin-top:.8rem; }
.no-tts .phrase-listen, .no-mic .phrase-mic{ display:none; }