/* English Nest — Speaking V1 / Da Vinci */
:root{
  --speak-navy:#0b2a55;
  --speak-navy-2:#123b71;
  --speak-ink:#102848;
  --speak-muted:#7f8da0;
  --speak-gold:#caa66a;
  --speak-gold-soft:#eadcc4;
  --speak-ivory:#faf7f1;
  --speak-cream:#f1ece3;
  --speak-white:#fff;
  --speak-line:#e6dfd4;
  --speak-green:#2f8f68;
  --speak-red:#c95757;
}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.speaking-hero{
  width:min(1200px,calc(100% - 48px));
  margin:14px auto 96px;
  min-height:430px;
  border-radius:36px;
  background:linear-gradient(135deg,var(--navy,#0b2a55),#0c2b58);
  color:#fff;
  padding:72px 7%;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:54px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.speaking-hero:before{
  content:"";position:absolute;width:460px;height:460px;left:-150px;bottom:-270px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,169,108,.28),transparent 68%);
}
.speaking-hero:after{
  content:"";position:absolute;width:210px;height:210px;left:72px;bottom:-105px;border:1px solid rgba(255,255,255,.07);border-radius:50%;
}
.speaking-hero-copy{position:relative;z-index:2}
.speaking-kicker{display:inline-block;color:#ead9b9;font-size:12px;font-weight:800;letter-spacing:.08em;margin-bottom:20px}
.speaking-hero h1{margin:0;font-size:clamp(48px,5.7vw,72px);line-height:1.06;letter-spacing:-.045em}
.speaking-hero h1 span{color:#ead9b9}
.speaking-hero p{max-width:680px;margin:26px 0 0;color:#ccd7e6;font-size:17px;line-height:1.95}

.speaking-visual{height:230px;display:grid;place-items:center;position:relative;z-index:2}
.mic-card{width:190px;height:190px;border:1px solid rgba(255,255,255,.13);border-radius:32px;background:rgba(255,255,255,.035);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
.mic-card svg{width:112px;height:112px;stroke:#e6c98f;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.speaking-section{width:min(1200px,calc(100% - 48px));margin:0 auto 110px}
.speaking-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.speaking-level-card{
  min-height:250px;background:#fff;border:1px solid #e4ddd2;border-radius:22px;padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:.22s ease;
  box-shadow:0 8px 24px rgba(19,43,74,.035);
}
.speaking-level-card:hover,.speaking-level-card:focus{transform:translateY(-4px);border-color:#d6c6aa;box-shadow:0 16px 34px rgba(19,43,74,.08);outline:none}
.level-top{display:flex;align-items:center;justify-content:space-between;direction:ltr}
.level-code{border-radius:999px;background:#f6f0e5;border:1px solid #e6d9c2;padding:7px 10px;color:#18365d;font-size:10px;font-weight:900}
.level-number{font-size:11px;font-weight:800;color:#a8b2c0;letter-spacing:.12em}
.speaking-level-card h3{margin:24px 0 10px;color:var(--speak-navy);font-size:24px}
.speaking-level-card p{margin:0;color:#8793a2;line-height:1.9;font-size:13px}
.level-link{margin-top:24px;padding-top:17px;border-top:1px solid #edf0f3;color:var(--speak-navy);font-weight:800;font-size:12px;display:flex;justify-content:space-between}

.speaking-flow-shell{margin-top:42px;padding:32px;border:1px solid #e2dbcf;border-radius:26px;background:#f2eee6}
.speaking-flow-header{margin-bottom:24px!important}
.speaking-flow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.flow-card{background:#fff;border:1px solid #e7e0d6;border-radius:18px;padding:20px;min-height:160px;position:relative}
.flow-no{position:absolute;left:18px;top:17px;color:#c49c58;font-size:11px;font-weight:900}
.flow-icon{width:42px;height:42px;border:1px solid #e7dcc9;border-radius:13px;display:grid;place-items:center;color:#12365f}
.flow-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow-card h3{margin:18px 0 8px;color:var(--speak-navy);font-size:16px}
.flow-card p{margin:0;color:#8b96a3;line-height:1.75;font-size:11px}

.studio-wrap{width:min(1200px,calc(100% - 48px));margin:22px auto 90px}
.studio-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:18px;direction:ltr}
.studio-back,.studio-reset{
  appearance:none;border:1px solid #d8dfe7;background:#fff;color:var(--speak-navy);border-radius:999px;padding:10px 16px;
  font:700 11px/1 inherit;cursor:pointer;width:max-content;transition:.2s;
}
.studio-back:hover,.studio-reset:hover{border-color:#c9a969;background:#faf7f1}
.studio-back{justify-self:start;direction:rtl}.studio-reset{justify-self:end;direction:rtl}
.studio-title-meta{display:flex;align-items:center;gap:9px;direction:ltr;color:#263c5c}
.studio-title-meta span{background:#f6f0e5;border:1px solid #e5d7bf;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800}
.studio-title-meta strong{font-size:12px}

.studio-intro-card{
  min-height:200px;border-radius:30px;background:linear-gradient(135deg,#0a2852,#123c72);color:#fff;padding:42px 50px;
  display:flex;align-items:center;gap:28px;position:relative;overflow:hidden;margin-bottom:20px
}
.studio-intro-card:before{content:"";position:absolute;width:240px;height:240px;left:-95px;bottom:-150px;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.davinci-mark{width:78px;height:78px;border:1px solid rgba(255,255,255,.14);border-radius:22px;display:grid;place-items:center;color:#e7ca91;font:700 36px Georgia,serif;background:rgba(255,255,255,.04);flex:0 0 auto}
.studio-intro-card h1{margin:6px 0 8px;font-size:clamp(28px,4vw,42px)}
.studio-intro-card p{margin:0;color:#c9d4e2;font-size:13px;line-height:1.8}

.studio-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px;direction:ltr}
.topic-panel,.voice-shell{background:#fff;border:1px solid #e3ddd3;border-radius:24px;box-shadow:0 14px 34px rgba(24,48,79,.045)}
.topic-panel{direction:rtl;padding:26px;height:max-content}
.topic-panel-head h2{font-size:26px;color:var(--speak-navy);margin:4px 0 8px}
.topic-panel-head p{color:#8b96a4;font-size:12px;line-height:1.8;margin:0 0 20px}
.topic-list{display:grid;gap:8px}
.topic-chip{
  width:100%;border:1px solid #e6dfd4;background:#fbf9f5;color:#263d5c;border-radius:15px;padding:13px 14px;
  text-align:right;font-family:inherit;cursor:pointer;transition:.2s;line-height:1.55;font-size:12px;font-weight:700
}
.topic-chip:hover{background:#f4eee3;border-color:#dfd1bb;transform:translateX(-2px)}
.davinci-rule-note{margin-top:22px;padding-top:19px;border-top:1px solid #edf0f3;display:grid;gap:5px}
.davinci-rule-note strong{color:var(--speak-navy);font-size:12px}
.davinci-rule-note span{color:#8a96a5;font-size:11px;line-height:1.65}

.voice-shell{overflow:hidden;min-height:690px;display:flex;flex-direction:column;direction:ltr}
.voice-head{height:76px;padding:0 24px;border-bottom:1px solid #edf0f3;display:flex;align-items:center;justify-content:space-between;gap:18px}
.voice-identity{display:flex;align-items:center;gap:10px}
.online-dot{width:10px;height:10px;border-radius:50%;background:#4aae83;box-shadow:0 0 0 4px rgba(74,174,131,.11)}
.voice-identity div{display:flex;flex-direction:column}
.voice-head strong{color:var(--speak-navy);font-size:15px}
.voice-head small{color:#9aa5b2;font-size:10px}
.voice-head>span{border-radius:999px;background:#f6f0e5;border:1px solid #e6d9c2;padding:7px 10px;color:#637087;font-size:10px;font-weight:800}

.voice-messages{flex:1;min-height:370px;max-height:500px;overflow:auto;padding:26px;background:linear-gradient(#fff,#fdfcf9)}
.voice-row{display:flex;margin-bottom:18px}.voice-row.user{justify-content:flex-end}.voice-row.ai{justify-content:flex-start}
.voice-card{width:min(78%,560px);border-radius:20px;padding:14px 15px;border:1px solid #e4ded3;background:#f3efe7;color:#24364d}
.voice-row.user .voice-card{background:var(--speak-navy);border-color:var(--speak-navy);color:#fff}
.voice-card-head{display:flex;align-items:center;gap:10px}
.play-mini{
  width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:var(--speak-navy);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 12px rgba(14,37,67,.08);flex:0 0 auto
}
.voice-row.ai .play-mini{background:var(--speak-navy);color:#fff}
.play-mini svg{width:17px;height:17px;fill:currentColor}
.voice-line{flex:1;height:4px;border-radius:999px;background:rgba(130,144,161,.25);overflow:hidden;position:relative}
.voice-line:after{content:"";display:block;width:42%;height:100%;border-radius:inherit;background:currentColor;opacity:.4}
.voice-time{font-size:10px;opacity:.7;min-width:32px;text-align:right}
.voice-card-label{font-size:9px;opacity:.62;margin-top:6px}
.voice-text-details{margin-top:10px;border-top:1px solid rgba(134,146,161,.2);padding-top:8px}
.voice-text-details summary{cursor:pointer;font-size:10px;opacity:.7;list-style:none}
.voice-text-details summary::-webkit-details-marker{display:none}
.voice-text-details p{font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.55;margin:8px 0 0;white-space:pre-wrap}
.typing-voice{display:inline-flex;gap:5px;align-items:center;padding:12px 15px;background:#f3efe7;border:1px solid #e5ddd0;border-radius:18px}
.typing-voice i{width:6px;height:6px;border-radius:50%;background:#97a1ae;animation:dvBounce 1.1s infinite ease-in-out}
.typing-voice i:nth-child(2){animation-delay:.12s}.typing-voice i:nth-child(3){animation-delay:.24s}
@keyframes dvBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

.recorder-zone{border-top:1px solid #edf0f3;padding:24px;display:flex;flex-direction:column;align-items:center;gap:11px;background:#fff}
.recorder-status{font-size:12px;color:#738096;font-weight:700;text-align:center;min-height:18px}
.record-button{position:relative;width:92px;height:92px;border:0;background:transparent;cursor:pointer;padding:0}
.record-ring{position:absolute;inset:0;border-radius:50%;border:1px solid #e2d6c2;background:#fbf7ef;transition:.2s}
.record-core{position:absolute;inset:12px;border-radius:50%;background:var(--speak-navy);color:#fff;display:grid;place-items:center;transition:.2s;box-shadow:0 8px 22px rgba(11,42,85,.2)}
.record-core svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.record-button:hover .record-core{transform:scale(1.03)}
.record-button.recording .record-ring{border-color:#e9b8b8;background:#fff1f1;animation:ringPulse 1.25s infinite}
.record-button.recording .record-core{background:#bd4f52}
.record-button.busy{cursor:wait;opacity:.65}
@keyframes ringPulse{0%{transform:scale(.98);opacity:1}70%{transform:scale(1.12);opacity:.2}100%{transform:scale(.98);opacity:1}}
.recorder-meta{display:flex;gap:12px;color:#a0aab7;font-size:10px;direction:rtl}
#recordTimer{font-variant-numeric:tabular-nums;color:#637087;font-weight:800}
.voice-error{width:min(100%,680px);border:1px solid #f0caca;background:#fff5f5;color:#b85454;border-radius:13px;padding:10px 12px;text-align:center;font-size:11px;direction:rtl}

@media (max-width:900px){
  .speaking-hero{grid-template-columns:1fr;gap:22px;padding:52px 9%;min-height:0}
  .speaking-visual{height:160px}.mic-card{width:145px;height:145px}.mic-card svg{width:85px;height:85px}
  .speaking-level-grid,.speaking-flow-grid{grid-template-columns:1fr}
  .studio-grid{grid-template-columns:1fr}.topic-panel{order:2}.voice-shell{order:1}
  .studio-topbar{grid-template-columns:1fr 1fr}.studio-title-meta{grid-column:1/-1;grid-row:1;justify-self:center}.studio-back{grid-row:2}.studio-reset{grid-row:2}
}
@media (max-width:620px){
  .speaking-hero,.speaking-section,.studio-wrap{width:min(100% - 24px,1200px)}
  .speaking-hero{border-radius:26px;margin-bottom:54px;padding:42px 26px}
  .speaking-hero h1{font-size:43px}.speaking-hero p{font-size:14px}
  .speaking-flow-shell{padding:18px}
  .studio-intro-card{padding:30px 24px;align-items:flex-start}.davinci-mark{width:62px;height:62px;border-radius:18px;font-size:28px}
  .voice-messages{padding:16px}.voice-card{width:90%}.voice-shell{min-height:620px}
  .topic-panel{padding:20px}
}


/* =========================================================
   English Nest — Idea 06: Da Vinci Conversation Motion
   Motion feedback only. No layout/size redesign.
   ========================================================= */

/* New voice messages arrive softly */
#speaking-page .voice-row.dv-enter{
  animation:dv-message-enter .34s cubic-bezier(.22,1,.36,1) both;
}

@keyframes dv-message-enter{
  from{opacity:0;transform:translateY(8px) scale(.992)}
  to{opacity:1;transform:none}
}

/* Mic: stronger but still calm recording feedback */
#speaking-page .record-button.recording .record-core{
  animation:dv-mic-breathe 1.05s ease-in-out infinite;
}

#speaking-page .record-button.recording .record-ring{
  animation:dv-record-ring 1.25s ease-out infinite;
}

@keyframes dv-mic-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}

@keyframes dv-record-ring{
  0%{transform:scale(.98);opacity:1;box-shadow:0 0 0 0 rgba(189,79,82,.16)}
  70%{transform:scale(1.11);opacity:.28;box-shadow:0 0 0 10px rgba(189,79,82,0)}
  100%{transform:scale(.98);opacity:1;box-shadow:0 0 0 0 rgba(189,79,82,0)}
}

/* Busy state: the three-dot icon inside the mic gently breathes */
#speaking-page .record-button.busy .record-core svg{
  animation:dv-busy-breathe .9s ease-in-out infinite;
}

@keyframes dv-busy-breathe{
  0%,100%{opacity:.48;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.05)}
}

/* Status text gets a small response when its state changes */
#speaking-page .recorder-status.dv-status-pop{
  animation:dv-status-pop .28s ease-out;
}

@keyframes dv-status-pop{
  from{opacity:.42;transform:translateY(3px)}
  to{opacity:1;transform:none}
}

/* Voice playback: make the existing line feel alive */
#speaking-page .voice-card.dv-playing{
  box-shadow:0 10px 24px rgba(13,49,95,.08);
  transition:box-shadow .2s ease,border-color .2s ease;
}

#speaking-page .voice-card.dv-playing .voice-line::after{
  width:34%;
  animation:dv-voice-flow 1.15s ease-in-out infinite alternate;
}

#speaking-page .voice-card.dv-playing .play-mini{
  animation:dv-play-pulse 1.25s ease-in-out infinite;
}

@keyframes dv-voice-flow{
  from{transform:translateX(-12%);opacity:.32}
  to{transform:translateX(165%);opacity:.72}
}

@keyframes dv-play-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.055)}
}

/* Existing thinking dots become a little more fluid */
#speaking-page .typing-voice{
  animation:dv-thinking-enter .24s ease-out both;
}

#speaking-page .typing-voice i{
  animation-duration:.95s;
}

@keyframes dv-thinking-enter{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

/* Online dot feels alive without being distracting */
#speaking-page .online-dot{
  animation:dv-online 2.6s ease-in-out infinite;
}

@keyframes dv-online{
  0%,100%{box-shadow:0 0 0 4px rgba(74,174,131,.11)}
  50%{box-shadow:0 0 0 7px rgba(74,174,131,.045)}
}

@media (prefers-reduced-motion:reduce){
  #speaking-page .voice-row.dv-enter,
  #speaking-page .record-button.recording .record-core,
  #speaking-page .record-button.recording .record-ring,
  #speaking-page .record-button.busy .record-core svg,
  #speaking-page .recorder-status.dv-status-pop,
  #speaking-page .voice-card.dv-playing .voice-line::after,
  #speaking-page .voice-card.dv-playing .play-mini,
  #speaking-page .typing-voice,
  #speaking-page .typing-voice i,
  #speaking-page .online-dot{
    animation:none !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   English Nest — Idea 06.1
   Live microphone waveform + real audio progress
   + 2-minute recording progress ring
   ========================================================= */

/* Live waveform: visible only while the student is recording */
#speaking-page .dv-live-waveform{
  width:156px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  opacity:.18;
  transition:opacity .2s ease;
  pointer-events:none;
}

#speaking-page .dv-live-waveform i{
  width:3px;
  height:6px;
  border-radius:999px;
  background:#8d9bae;
  transform:scaleY(1);
  transform-origin:center;
  transition:height .055s linear, background-color .18s ease;
}

#speaking-page .recorder-zone.dv-wave-active .dv-live-waveform{
  opacity:1;
}

#speaking-page .recorder-zone.dv-wave-active .dv-live-waveform i{
  background:#bd4f52;
}

/* The outer mic ring becomes a real 0–120s progress indicator */
#speaking-page .record-button{
  --dv-record-progress:0deg;
}

#speaking-page .record-button.recording .record-ring{
  border-color:transparent;
  background:
    conic-gradient(
      #bd4f52 0deg,
      #bd4f52 var(--dv-record-progress),
      #f2e8dc var(--dv-record-progress),
      #f2e8dc 360deg
    );
}

#speaking-page .record-button.recording .record-ring::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:#fff7f2;
  border:1px solid rgba(189,79,82,.12);
}

/* Keep the mic core above the progress ring */
#speaking-page .record-core{
  z-index:2;
}

/* Real playback progress. The JS updates --dv-audio-progress. */
#speaking-page .voice-line::after{
  width:var(--dv-audio-progress,0%);
  transform:none;
  opacity:.62;
  transition:width .08s linear;
}

#speaking-page .voice-card.dv-playing .voice-line::after{
  width:var(--dv-audio-progress,0%);
  animation:none;
  transform:none;
  opacity:.82;
}

/* Tiny finishing feedback when a voice message reaches 100% */
#speaking-page .voice-card.dv-audio-finished .voice-line::after{
  animation:dv-audio-finished .32s ease-out 1;
}

@keyframes dv-audio-finished{
  0%{opacity:.82}
  50%{opacity:1}
  100%{opacity:.62}
}

@media (prefers-reduced-motion:reduce){
  #speaking-page .dv-live-waveform,
  #speaking-page .dv-live-waveform i,
  #speaking-page .voice-line::after,
  #speaking-page .voice-card.dv-audio-finished .voice-line::after{
    transition:none !important;
    animation:none !important;
  }
}