/* 口语陪练独立样式：不影响知识库、计划、题库、上传和宠物模块。 */
.speaking-page {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.speaking-mobile-home {
  margin-bottom: 12px;
}

.speaking-workspace {
  overflow: hidden;
  border: 1px solid rgba(196, 210, 238, 0.9);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, rgba(105, 139, 230, 0.16), transparent 27%),
    radial-gradient(circle at 96% 4%, rgba(120, 205, 222, 0.14), transparent 25%),
    linear-gradient(145deg, rgba(250, 252, 255, 0.98), rgba(239, 245, 255, 0.98));
  box-shadow: 0 28px 70px rgba(43, 65, 118, 0.12);
}

.speaking-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 32px 36px 26px;
}

.speaking-eyebrow,
.speaking-round-heading > div > span,
.speaking-review-card header span {
  display: block;
  color: #5572c4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.speaking-hero h2 {
  margin: 9px 0 8px;
  color: #12203d;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
}

.speaking-hero p {
  max-width: 760px;
  margin: 0;
  color: #667590;
  font-size: 15px;
  line-height: 1.8;
}

.speaking-engine-card {
  display: flex;
  gap: 13px;
  align-items: center;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid rgba(193, 208, 238, 0.92);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

.speaking-engine-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: #e09a44;
  box-shadow: 0 0 0 7px rgba(224, 154, 68, 0.13);
}

.speaking-engine-card.ready .speaking-engine-dot {
  background: #39a982;
  box-shadow: 0 0 0 7px rgba(57, 169, 130, 0.13);
}

.speaking-engine-card.error .speaking-engine-dot {
  background: #db6270;
  box-shadow: 0 0 0 7px rgba(219, 98, 112, 0.13);
}

.speaking-engine-card div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.speaking-engine-card small {
  color: #8290aa;
  font-size: 11px;
  font-weight: 800;
}

.speaking-engine-card strong {
  overflow: hidden;
  color: #294579;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaking-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(180px, 0.34fr);
  gap: 14px;
  align-items: end;
  padding: 18px 36px;
  border-top: 1px solid rgba(207, 219, 242, 0.82);
  border-bottom: 1px solid rgba(207, 219, 242, 0.82);
  background: rgba(255, 255, 255, 0.56);
}

.speaking-field {
  display: grid;
  gap: 7px;
}

.speaking-field > span {
  color: #657590;
  font-size: 11px;
  font-weight: 850;
}

.speaking-field select {
  width: 100%;
  height: 48px;
  padding: 0 42px 0 15px;
  border: 1px solid #cfdbf1;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.94);
  color: #223654;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.speaking-field select:focus {
  border-color: #7d99eb;
  box-shadow: 0 0 0 4px rgba(87, 121, 220, 0.12);
}

.speaking-reset-button {
  height: 48px;
  padding: 0 21px;
  border: 1px solid #cdd9ee;
  border-radius: 15px;
  background: #fff;
  color: #34518b;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.speaking-reset-button:hover {
  border-color: #8ea5e9;
  box-shadow: 0 8px 22px rgba(50, 78, 137, 0.11);
}

.speaking-scene-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 0.58fr);
  gap: 22px;
  align-items: center;
  margin: 22px 26px 0;
  padding: 22px 24px;
  border: 1px solid rgba(199, 213, 240, 0.9);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 34px rgba(55, 77, 128, 0.08);
}

.speaking-scene-number {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #6582dc, #4265c5);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(67, 99, 192, 0.2);
}

.speaking-scene-copy {
  min-width: 0;
}

.speaking-scene-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.speaking-scene-title-row h3 {
  margin: 0;
  color: #172540;
  font-size: 21px;
}

.speaking-scene-title-row span {
  padding: 5px 10px;
  border-radius: 999px;
  background: #edf2ff;
  color: #4968be;
  font-size: 11px;
  font-weight: 900;
}

.speaking-scene-copy > p {
  margin: 8px 0 0;
  color: #6a7892;
  font-size: 13px;
  line-height: 1.65;
}

.speaking-scene-copy .speaking-scene-goal {
  color: #3e5583;
  font-weight: 700;
}

.speaking-grammar-box {
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid #dde5f4;
}

.speaking-grammar-box > span {
  display: block;
  margin-bottom: 9px;
  color: #7b89a2;
  font-size: 11px;
  font-weight: 850;
}

#speaking-grammar-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.speaking-grammar-chip {
  max-width: 100%;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid #d4def1;
  border-radius: 9px;
  background: #f7f9fe;
  color: #4f6287;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaking-round-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 26px 0;
  padding: 7px;
  border: 1px solid #d6e0f1;
  border-radius: 19px;
  background: rgba(232, 238, 250, 0.72);
}

.speaking-round-tabs button {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #60708e;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.speaking-round-tabs button span {
  color: #8292ad;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.speaking-round-tabs button.active {
  background: #fff;
  color: #23447f;
  box-shadow: 0 8px 20px rgba(50, 74, 130, 0.1);
}

.speaking-round {
  margin: 18px 26px 26px;
  padding: 25px;
  border: 1px solid rgba(201, 214, 239, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
}

.speaking-round[hidden] {
  display: none !important;
}

.speaking-round-heading {
  display: flex;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.speaking-round-heading h3 {
  margin: 5px 0 0;
  color: #172640;
  font-size: 23px;
}

.speaking-round-heading > p,
.speaking-round-heading-actions > p {
  max-width: 620px;
  margin: 0;
  color: #71809a;
  font-size: 13px;
  line-height: 1.65;
  text-align: right;
}

.speaking-round-heading-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
}

.speaking-round-heading-actions .speaking-reset-button {
  flex: 0 0 auto;
}

.speaking-chat-board {
  display: grid;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid #e0e7f4;
  border-radius: 22px;
  background:
    linear-gradient(rgba(248, 251, 255, 0.94), rgba(244, 248, 255, 0.94)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(95, 121, 184, 0.04) 31px 32px);
}

.speaking-drill-progress {
  display: grid;
  gap: 12px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e1e8f4;
}

.speaking-drill-progress > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #293d61;
  font-size: 12px;
}

.speaking-drill-progress > div:first-child span {
  color: #71809a;
  font-weight: 800;
}

.speaking-progress-dots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.speaking-progress-dots button {
  height: 7px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dfe6f2;
  color: transparent;
  cursor: pointer;
}

.speaking-progress-dots button.complete {
  background: #77c6a8;
}

.speaking-progress-dots button.active {
  background: #5575d4;
  box-shadow: 0 0 0 3px rgba(85, 117, 212, 0.12);
}

.speaking-focus-turn {
  display: grid;
  gap: 20px;
  min-height: 390px;
  padding: clamp(22px, 5vw, 46px);
  border: 1px solid #dce5f3;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(47, 72, 127, 0.08);
}

.speaking-focus-turn.learner {
  border-color: #c9e3d9;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(240, 250, 246, 0.96));
}

.speaking-focus-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.speaking-focus-meta span,
.speaking-focus-meta small {
  color: #5671ba;
  font-size: 11px;
  font-weight: 900;
}

.speaking-focus-turn.learner .speaking-focus-meta span {
  color: #248064;
}

.speaking-focus-meta small {
  color: #8794aa;
}

.speaking-focus-sentence {
  display: grid;
  gap: 13px;
  align-content: center;
  min-height: 122px;
  text-align: center;
}

.speaking-focus-sentence strong {
  color: #182843;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.35;
}

.speaking-focus-sentence span {
  color: #78869d;
  font-size: 13px;
}

.speaking-focus-actions {
  justify-content: center;
}

.speaking-focus-actions button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 13px;
}

.speaking-drill-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.speaking-drill-footer span {
  color: #75839b;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.speaking-drill-footer button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #d2ddef;
  border-radius: 12px;
  background: #fff;
  color: #48608e;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.speaking-drill-footer button.primary {
  border-color: #6685df;
  background: #5575d4;
  color: #fff;
}

.speaking-drill-footer button.primary.ready {
  box-shadow: 0 0 0 5px rgba(85, 117, 212, 0.12);
}

.speaking-drill-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.speaking-loading-card {
  padding: 32px;
  color: #7786a0;
  text-align: center;
}

.speaking-chat-turn {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.speaking-chat-turn.learner {
  flex-direction: row-reverse;
}

.speaking-chat-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 13px;
  background: #e8eefc;
  color: #3c5cab;
  font-size: 11px;
  font-weight: 900;
}

.speaking-chat-turn.learner .speaking-chat-avatar {
  background: #e4f5ef;
  color: #237b63;
}

.speaking-bubble-wrap {
  display: grid;
  gap: 8px;
  max-width: min(72%, 650px);
}

.speaking-chat-turn.learner .speaking-bubble-wrap {
  justify-items: end;
}

.speaking-chat-bubble {
  padding: 13px 15px;
  border: 1px solid #d8e2f4;
  border-radius: 6px 17px 17px;
  background: #fff;
  color: #1f2f4a;
  box-shadow: 0 7px 18px rgba(56, 78, 127, 0.07);
}

.speaking-chat-turn.learner .speaking-chat-bubble {
  border-color: #bcdccb;
  border-radius: 17px 6px 17px 17px;
  background: #dcf3e9;
}

.speaking-chat-bubble strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.55;
}

.speaking-chat-bubble span {
  display: block;
  color: #75829a;
  font-size: 11px;
  line-height: 1.5;
}

.speaking-line-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.speaking-chat-turn.learner .speaking-line-actions {
  justify-content: flex-end;
}

.speaking-line-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d3def1;
  border-radius: 11px;
  background: #fff;
  color: #3f5684;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.speaking-line-actions button.primary {
  border-color: #7691e4;
  background: #5575d4;
  color: #fff;
}

.speaking-line-actions button.recording {
  border-color: #df6977;
  background: #df6977;
  color: #fff;
  animation: speaking-record-pulse 1s ease-in-out infinite;
}

.speaking-line-actions button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.speaking-line-feedback {
  width: min(100%, 560px);
  padding: 12px 13px;
  border: 1px solid #d8e2f4;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.9);
}

.speaking-line-feedback.good {
  border-color: #b7dfd1;
  background: #f0faf6;
}

.speaking-line-feedback.retry {
  border-color: #ecc2c8;
  background: #fff5f6;
}

.speaking-feedback-score {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 7px;
}

.speaking-feedback-score strong {
  color: #3457b1;
  font-size: 22px;
}

.speaking-feedback-score span,
.speaking-line-feedback p,
.speaking-line-feedback li {
  color: #63728e;
  font-size: 11px;
  line-height: 1.6;
}

.speaking-line-feedback p,
.speaking-line-feedback ul {
  margin: 5px 0 0;
}

.speaking-word-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.speaking-word-row span {
  padding: 3px 5px;
  border-radius: 6px;
  color: #365347;
  font-size: 11px;
  font-weight: 750;
}

.speaking-word-row span.retry,
.speaking-word-row span.missing {
  background: #ffe5e8;
  color: #b63a4b;
  text-decoration: underline wavy rgba(182, 58, 75, 0.65);
}

.speaking-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.95fr);
  gap: 18px;
}

.speaking-call-card,
.speaking-review-card {
  min-height: 570px;
  overflow: hidden;
  border: 1px solid #d3def1;
  border-radius: 23px;
  background: rgba(250, 252, 255, 0.95);
}

.speaking-call-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 68px 30px 36px;
  text-align: center;
}

.speaking-call-topline {
  position: absolute;
  inset: 22px 23px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.speaking-call-state,
.speaking-call-topline time {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #d2ddf0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #536581;
  font-size: 11px;
  font-weight: 900;
}

.speaking-call-state i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #99a7bd;
}

.speaking-call-card.listening .speaking-call-state i {
  background: #37a87f;
  box-shadow: 0 0 0 6px rgba(55, 168, 127, 0.12);
}

.speaking-call-card.thinking .speaking-call-state i,
.speaking-call-card.speaking .speaking-call-state i {
  background: #5576d6;
  box-shadow: 0 0 0 6px rgba(85, 118, 214, 0.12);
}

.speaking-call-card.error .speaking-call-state i {
  background: #df6675;
  box-shadow: 0 0 0 6px rgba(223, 102, 117, 0.12);
}

.speaking-orbit {
  position: relative;
  display: grid;
  width: 250px;
  height: 250px;
  place-items: center;
  margin-bottom: 19px;
}

.speaking-orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(101, 132, 220, 0.18);
  border-radius: 50%;
}

.speaking-orbit-ring.ring-two {
  inset: 30px;
}

.speaking-call-card.listening .ring-one,
.speaking-call-card.speaking .ring-one {
  animation: speaking-orbit-pulse 2.1s ease-out infinite;
}

.speaking-call-card.speaking .ring-two {
  animation: speaking-orbit-pulse 1.45s ease-out infinite 0.2s;
}

.speaking-voice-core {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 42%;
  background: linear-gradient(145deg, #6d8be0, #3e61bd);
  box-shadow:
    0 22px 45px rgba(61, 92, 181, 0.27),
    inset 12px 12px 24px rgba(255, 255, 255, 0.14);
}

.speaking-voice-core i {
  display: block;
  width: 5px;
  height: 25px;
  border-radius: 999px;
  background: #c9fbff;
}

.speaking-call-card.speaking .speaking-voice-core i:nth-child(1),
.speaking-call-card.speaking .speaking-voice-core i:nth-child(5) {
  animation: speaking-wave 0.68s ease-in-out infinite;
}

.speaking-call-card.speaking .speaking-voice-core i:nth-child(2),
.speaking-call-card.speaking .speaking-voice-core i:nth-child(4) {
  animation: speaking-wave 0.52s ease-in-out infinite 0.1s;
}

.speaking-call-card.speaking .speaking-voice-core i:nth-child(3) {
  animation: speaking-wave 0.44s ease-in-out infinite 0.18s;
}

.speaking-call-card > h3 {
  margin: 0 0 7px;
  color: #172640;
  font-size: 23px;
}

.speaking-call-card > p {
  max-width: 460px;
  min-height: 44px;
  margin: 0;
  color: #71809a;
  font-size: 13px;
  line-height: 1.7;
}

.speaking-call-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 19px 0 13px;
}

.speaking-live-button,
.speaking-mute-button {
  min-height: 48px;
  padding: 0 21px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.speaking-live-button {
  border: 0;
  background: linear-gradient(145deg, #5e7ddb, #3d60bf);
  color: #fff;
  box-shadow: 0 12px 22px rgba(62, 95, 189, 0.22);
}

.speaking-live-button.stop {
  background: linear-gradient(145deg, #dc7480, #c64e60);
}

.speaking-mute-button {
  border: 1px solid #d2ddf0;
  background: #fff;
  color: #42577f;
}

.speaking-mute-button.muted {
  border-color: #e8bdc4;
  background: #fff4f5;
  color: #b24151;
}

.speaking-mute-button:disabled,
.speaking-live-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.speaking-call-card > small {
  color: #8996ac;
  font-size: 11px;
  line-height: 1.6;
}

/* finesse · component: call-guidance · register=product
 * states: idle · connecting · connected · muted · noisy · error
 * tokens: inherited brand palette; no page redesign */
.speaking-call-guidance {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: min(100%, 400px);
  min-height: 82px;
  margin-top: 8px;
  padding: 13px 15px;
  border: 1px solid var(--ui-border, var(--brand-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-action, var(--brand-blue)) 4%, transparent);
  color: var(--text, var(--brand-ink));
  text-align: left;
}
.speaking-call-guidance > div { min-width: 0; }
.speaking-call-guidance strong { display: block; font-size: 13px; line-height: 1.6; }
.speaking-call-guidance small { display: block; margin-top: 2px; color: var(--ui-muted, var(--brand-muted)); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.speaking-guidance-icon { flex: 0 0 22px; height: 22px; margin-top: 2px; color: var(--ui-action, var(--brand-blue)); }
.speaking-guidance-icon svg { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.speaking-call-guidance:is([data-kind="headphones"], [data-kind="muted"]) .guidance-headphones,
.speaking-call-guidance:is([data-kind="connecting"], [data-kind="error"]) .guidance-signal,
.speaking-call-guidance[data-kind="noise"] .guidance-noise { display: block; }
.speaking-call-guidance:is([data-kind="noise"], [data-kind="error"]) { border-color: var(--ui-muted, var(--brand-muted)); }
.speaking-call-guidance[data-kind="connecting"] .guidance-signal { animation: speaking-health-pulse 1.4s ease-in-out infinite; }
.speaking-call-card.connecting .speaking-call-state i { background: var(--ui-action, var(--brand-blue)); }
.speaking-call-actions button { white-space: nowrap; }
.speaking-call-actions button:focus-visible { outline: 3px solid var(--ui-action, var(--brand-blue)); outline-offset: 3px; }
.speaking-call-actions button:not(:disabled):active { transform: translateY(1px); }
@media (hover: hover) {
  .speaking-call-actions button:not(:disabled):hover { filter: brightness(.96); }
}
@keyframes speaking-health-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .speaking-call-guidance[data-kind="connecting"] .guidance-signal { animation: none; }
}

.speaking-review-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.speaking-review-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #dce4f2;
}

.speaking-review-card header h3 {
  margin: 5px 0 0;
  color: #172640;
  font-size: 21px;
}

.speaking-review-card header strong {
  padding: 7px 11px;
  border-radius: 999px;
  background: #edf2ff;
  color: #4c69bc;
  font-size: 11px;
}

.speaking-live-transcript {
  height: 100%;
  max-height: 490px;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

.speaking-transcript-empty {
  display: grid;
  min-height: 390px;
  place-content: center;
  color: #71809a;
  text-align: center;
}

.speaking-transcript-empty strong {
  color: #455a81;
  font-size: 14px;
}

.speaking-transcript-empty p {
  margin: 7px 0 0;
  font-size: 11px;
}

.speaking-live-turn {
  padding: 17px 0;
  border-bottom: 1px solid #e3e9f4;
}

.speaking-live-turn.pending {
  opacity: 0.64;
}

.speaking-live-turn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.speaking-live-turn-meta strong {
  color: #34518a;
  font-size: 11px;
}

.speaking-live-turn.user .speaking-live-turn-meta strong {
  color: #268069;
}

.speaking-live-turn-meta time {
  color: #9aa6b9;
  font-size: 10px;
}

.speaking-live-turn > p {
  margin: 0;
  color: #263752;
  font-size: 14px;
  line-height: 1.7;
}

.speaking-live-turn mark {
  padding: 1px 3px;
  border-radius: 4px;
  background: #ffe0e4;
  color: #b53143;
  text-decoration: underline wavy rgba(181, 49, 67, 0.6);
}

.speaking-live-issues {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.speaking-live-issue {
  padding: 8px 10px;
  border-left: 3px solid #df6574;
  border-radius: 7px;
  background: #fff3f5;
  color: #78444d;
  font-size: 10px;
  line-height: 1.55;
}

.speaking-inline-error {
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid #ecc0c7;
  border-radius: 12px;
  background: #fff4f5;
  color: #a43d4c;
  font-size: 11px;
  line-height: 1.6;
}

.speaking-history-card {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #d1dcf1;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.88);
}

.speaking-history-card > header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid #e0e7f4;
}

.speaking-history-card h3 {
  margin: 0;
  color: #182844;
  font-size: 18px;
}

.speaking-history-card header p {
  margin: 5px 0 0;
  color: #75839b;
  font-size: 11px;
  line-height: 1.6;
}

.speaking-history-card header button,
.speaking-history-selection button {
  min-width: 88px;
  height: 38px;
  border: 1px solid #cfdbef;
  border-radius: 12px;
  background: #fff;
  color: #3b568b;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.speaking-history-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.speaking-history-card header button.danger,
.speaking-history-selection button {
  border-color: #ecc4ca;
  color: #a54150;
}

.speaking-history-card button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.speaking-history-selection {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid #e3e9f4;
  background: #f8faff;
}

.speaking-history-selection[hidden] {
  display: none !important;
}

.speaking-history-selection label {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #465b82;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.speaking-history-selection input,
.speaking-history-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #5575d4;
}

.speaking-history-selection > span {
  flex: 1;
  color: #74839c;
  font-size: 11px;
}

.speaking-history-selection button {
  height: 34px;
}

.speaking-history-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.speaking-history-empty {
  padding: 28px 18px;
  color: #8390a7;
  font-size: 12px;
  text-align: center;
}

.speaking-history-session {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #dce4f2;
  border-radius: 15px;
  background: #fbfcff;
}

.speaking-history-check {
  display: grid;
  align-self: stretch;
  padding: 0 4px 0 14px;
  place-items: center;
  cursor: pointer;
}

.speaking-history-session.open {
  border-color: #aebfe8;
  box-shadow: 0 10px 24px rgba(55, 79, 133, 0.08);
}

.speaking-history-session.selected {
  border-color: #7895e1;
  background: #f5f8ff;
}

.speaking-history-summary {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.speaking-history-delete-one {
  min-width: 54px;
  height: 34px;
  margin-right: 12px;
  border: 1px solid #e9c5ca;
  border-radius: 10px;
  background: #fff;
  color: #a44150;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.speaking-history-card.deleting .speaking-history-session,
.speaking-history-card.deleting .speaking-history-selection {
  pointer-events: none;
  opacity: 0.62;
}

.speaking-history-index {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #edf2ff;
  color: #5772bd;
  font-size: 11px;
  font-weight: 900;
}

.speaking-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.speaking-history-copy strong {
  color: #2c3e5d;
  font-size: 12px;
}

.speaking-history-copy small {
  overflow: hidden;
  color: #77859b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speaking-history-count {
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f4fc;
  color: #60749a;
  font-size: 10px;
  font-weight: 850;
}

.speaking-history-turns {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  padding: 0 16px 12px;
  border-top: 1px solid #e5ebf5;
  background: #fff;
}

.speaking-history-turns[hidden] {
  display: none;
}

@keyframes speaking-record-pulse {
  50% { box-shadow: 0 0 0 7px rgba(223, 105, 119, 0.13); }
}

@keyframes speaking-orbit-pulse {
  from { opacity: 0.8; transform: scale(0.78); }
  to { opacity: 0; transform: scale(1.08); }
}

@keyframes speaking-wave {
  50% { height: 51px; }
}

@media (max-width: 980px) {
  .speaking-hero,
  .speaking-scene-card,
  .speaking-live-grid {
    grid-template-columns: 1fr;
  }

  .speaking-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.42fr);
  }

  .speaking-grammar-box {
    padding: 16px 0 0;
    border-top: 1px solid #dde5f4;
    border-left: 0;
  }

  .speaking-call-card,
  .speaking-review-card {
    min-height: 520px;
  }
}

@media (max-width: 720px) {
  .speaking-workspace {
    border-radius: 22px;
  }

  .speaking-hero {
    gap: 18px;
    padding: 24px 19px 20px;
  }

  .speaking-hero h2 {
    font-size: 35px;
  }

  .speaking-toolbar {
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }

  .speaking-reset-button {
    width: 100%;
  }

  .speaking-scene-card {
    gap: 14px;
    margin: 16px 14px 0;
    padding: 18px;
  }

  .speaking-scene-number {
    width: 46px;
    height: 46px;
  }

  .speaking-round-tabs {
    margin: 14px 14px 0;
  }

  .speaking-round-tabs button {
    flex-direction: column;
    gap: 2px;
    min-height: 58px;
  }

  .speaking-round {
    margin: 14px;
    padding: 17px;
  }

  .speaking-round-heading {
    display: grid;
    gap: 9px;
  }

  .speaking-round-heading > p {
    text-align: left;
  }

  .speaking-round-heading-actions {
    display: grid;
    gap: 10px;
    justify-content: stretch;
  }

  .speaking-round-heading-actions > p {
    text-align: left;
  }

  .speaking-chat-board {
    padding: 15px 11px;
  }

  .speaking-focus-turn {
    gap: 16px;
    min-height: 360px;
    padding: 21px 16px;
  }

  .speaking-focus-sentence strong {
    font-size: clamp(23px, 8vw, 31px);
  }

  .speaking-focus-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .speaking-focus-actions button {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
  }

  .speaking-drill-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .speaking-drill-footer span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .speaking-drill-footer button {
    grid-row: 2;
  }

  .speaking-bubble-wrap {
    max-width: calc(100% - 49px);
  }

  .speaking-chat-bubble strong {
    font-size: 14px;
  }

  .speaking-live-grid {
    gap: 14px;
  }

  .speaking-call-card,
  .speaking-review-card {
    min-height: 500px;
    border-radius: 18px;
  }

  .speaking-call-card {
    padding: 72px 18px 26px;
  }

  .speaking-orbit {
    width: 210px;
    height: 210px;
  }

  .speaking-voice-core {
    width: 115px;
    height: 115px;
  }

  .speaking-call-actions {
    width: 100%;
  }

  .speaking-live-button,
  .speaking-mute-button {
    min-width: 0;
    flex: 1;
    padding: 0 12px;
  }

  .speaking-live-transcript {
    max-height: 430px;
  }

  .speaking-history-card > header {
    display: grid;
    align-items: flex-start;
    padding: 17px;
  }

  .speaking-history-header-actions {
    width: 100%;
  }

  .speaking-history-header-actions button {
    flex: 1;
  }

  .speaking-history-selection {
    flex-wrap: wrap;
    padding: 10px 13px;
  }

  .speaking-history-selection > span {
    min-width: 80px;
  }

  .speaking-history-session {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .speaking-history-delete-one {
    grid-column: 2;
    width: calc(100% - 12px);
    margin: 0 12px 11px 0;
  }

  .speaking-history-summary {
    padding: 13px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speaking-call-card * {
    animation: none !important;
  }
}

/* Realtime workspace: persistent session navigation and independent review pane. */
#app .speaking-conversation-workspace {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid #d9e2f4;
  border-radius: 24px;
  background: #fff;
  overflow: clip;
  container-type: inline-size;
}
#app .speaking-session-sidebar {
  min-width: 0;
  padding: 24px 16px;
  border: 0;
  border-right: 1px solid #d9e2f4;
  border-radius: 0;
  background: #f5f7ff;
}
#app .speaking-session-sidebar > .speaking-reset-button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #e8eeff;
  border-color: #d9e2fc;
  color: #3156b9;
  font-size: 14px;
}
#app .speaking-session-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .7; }
#app .speaking-session-search { position: relative; display: flex; align-items: center; margin: 12px 0 24px; }
#app .speaking-session-search > img { position: absolute; left: 12px; width: 16px; height: 16px; opacity: .7; pointer-events: none; }
#app .speaking-session-search input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 10px 10px 38px; border: 1px solid #d9e2f4; border-radius: 11px; background: #fff; color: #203454; font: inherit; font-size: 13px; }
#app .speaking-session-search input::placeholder { color: #65779a; opacity: 1; }
#app #speaking-session-notice { margin: -8px 4px 16px; color: #435c89; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#app #speaking-session-notice:empty { display: none; }
#app .speaking-session-sidebar .speaking-history-card { margin-top: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
#app .speaking-history-card > summary { padding: 0 10px; color: #65779a; font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
#app .speaking-history-card > summary::-webkit-details-marker { display: none; }
#app .speaking-session-sidebar .speaking-history-header-actions { display: flex; gap: 8px; margin-top: 12px; }
#app .speaking-session-sidebar .speaking-history-header-actions button { min-width: 0; flex: 1; min-height: 36px; padding: 6px 8px; font-size: 12px; border-radius: 10px; }
#app .speaking-session-sidebar .speaking-history-selection { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; font-size: 12px; border: 0; }
#app .speaking-session-sidebar .speaking-history-selection button { min-height: 36px; margin-left: auto; font-size: 12px; }
#app .speaking-session-sidebar .speaking-history-list { min-height: 130px; max-height: 480px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bccae5 transparent; padding: 12px 0 4px; gap: 4px; }
#app .speaking-session-sidebar .speaking-history-empty { padding: 20px 10px; color: #536987; font-size: 13px; line-height: 1.8; }
#app .speaking-session-sidebar .speaking-history-session { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 0; border: 0; border-radius: 0; background: transparent; }
#app .speaking-session-sidebar .speaking-history-check { display: none; padding: 14px 0 0; }
#app .speaking-session-sidebar .managing .speaking-history-session { grid-template-columns: 24px minmax(0, 1fr) 44px; }
#app .speaking-session-sidebar .managing .speaking-history-check { display: block; }
#app .speaking-session-sidebar .speaking-history-summary { display: flex; align-items: center; min-width: 0; width: 100%; min-height: 44px; gap: 8px; padding: 10px; border: 0; border-radius: 11px; color: #435c89; background: transparent; text-align: left; }
#app .speaking-session-sidebar .speaking-history-summary:hover { background: #edf2ff; }
#app .speaking-session-sidebar .speaking-history-session.reviewing .speaking-history-summary { background: #e4ebff; color: #284fb2; }
#app .speaking-session-sidebar .speaking-history-copy { flex: 1; min-width: 0; }
#app .speaking-session-sidebar .speaking-history-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 13px; font-weight: 600; }
#app .speaking-session-pinned { flex-shrink: 0; color: #4261a0; font-size: 10px; }
#app .speaking-session-more { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 11px; background: transparent; color: #4261a0; cursor: pointer; }
#app .speaking-session-more svg { width: 20px; height: 20px; fill: currentColor; }
#app .speaking-session-more:is(:hover, [aria-expanded="true"]) { background: #e4ebff; }
#app .speaking-session-rename { grid-column: 1 / -1; padding: 12px 4px; }
#app .speaking-session-rename label { display: grid; gap: 8px; color: #435c89; font-size: 13px; }
#app .speaking-session-rename input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 1px solid #b8c9ee; border-radius: 8px; background: #fff; color: #29436f; font: inherit; font-size: 16px; }
#app .speaking-session-rename > div { display: flex; gap: 8px; margin-top: 12px; }
#app .speaking-session-rename button { flex: 1; min-height: 44px; border: 1px solid #dce5fa; border-radius: 8px; background: #fff; color: #29436f; font: inherit; font-size: 13px; cursor: pointer; }
#app .speaking-session-rename button[type="submit"] { background: #4564dc; border-color: #4564dc; color: #fff; }
#app .speaking-session-rename button:hover { filter: brightness(.95); }
#app .speaking-session-rename :disabled { opacity: .55; cursor: wait; }
#app .speaking-session-rename .speaking-rename-error { margin: 8px 0 0; color: #a53232; font-size: 12px; line-height: 1.6; }
#app .speaking-history-manage { margin-top: 20px; padding: 12px 4px 0; border-top: 1px solid #d9e2f4; }
#app .speaking-history-manage > summary { font-size: 12px; color: #65779a; cursor: pointer; }
#app #speaking-history-limit { margin: 8px 4px; font-size: 12px; line-height: 1.6; color: #536987; }
#app .speaking-session-sidebar .speaking-inline-error { overflow-wrap: anywhere; padding: 12px 8px; }
#app .speaking-session-sidebar .speaking-inline-error button { display: block; min-height: 36px; margin-top: 8px; padding: 6px 10px; border: 1px solid #d9e2f4; border-radius: 8px; background: #fff; color: #435c89; }
#app .speaking-history-list :is(button, input):focus-visible { outline-offset: -2px; }
#app .speaking-conversation-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
#app .speaking-conversation-workspace .speaking-conversation-main > .speaking-round-heading { display: grid; gap: 8px; margin: 0; padding: 24px 28px; border-bottom: 1px solid #e5ebf6; }
#app .speaking-conversation-main .speaking-round-heading h3 { margin: 0; font-size: 21px; }
#app .speaking-conversation-main .speaking-round-heading p { margin: 0; color: #536987; font-size: 13px; line-height: 1.7; }
#app .speaking-conversation-main .speaking-live-grid { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
#app .speaking-conversation-main :is(.speaking-call-card, .speaking-review-card) { border: 0; border-radius: 0; background: #fff; box-shadow: none; }
#app .speaking-conversation-workspace .speaking-conversation-main .speaking-call-card { min-height: 560px; padding: 72px 20px 28px; }
#app .speaking-conversation-main .speaking-review-card { min-width: 0; min-height: 560px; border-left: 1px solid #e5ebf6; grid-template-rows: auto minmax(0, 1fr); }
#app .speaking-conversation-main .speaking-call-actions { flex-wrap: wrap; gap: 8px; }
#app .speaking-conversation-main .speaking-orbit { width: min(250px, 100%); aspect-ratio: 1; height: auto; flex-shrink: 0; }
#app .speaking-conversation-main .speaking-review-card > header { padding: 20px; gap: 12px; flex-wrap: wrap; }
#app .speaking-conversation-main .speaking-review-card h3 { font-size: 19px; }
#app .speaking-review-context { margin: 6px 0 0; font-size: 12px; color: #536987; }
#app .speaking-review-actions { display: flex; align-items: center; }
#app #speaking-review-current { min-height: 36px; padding: 6px 10px; background: #fff; border: 1px solid #ccd9f3; border-radius: 10px; color: #365997; font-size: 12px; cursor: pointer; }
#app .speaking-conversation-main .speaking-live-transcript { max-height: 480px; padding: 12px 20px 20px; overflow-wrap: anywhere; }
#app .speaking-conversation-workspace [hidden] { display: none !important; }
#app .speaking-conversation-workspace :is(button, input, summary):focus-visible { outline: 3px solid #4162d9; outline-offset: 3px; }
@container (max-width: 940px) {
  #app .speaking-conversation-main .speaking-live-grid { grid-template-columns: minmax(0, 1fr); }
  #app .speaking-conversation-workspace .speaking-conversation-main .speaking-call-card { min-height: 500px; }
  #app .speaking-conversation-main .speaking-review-card { min-height: 380px; border-left: 0; border-top: 1px solid #e5ebf6; }
  #app .speaking-conversation-main .speaking-transcript-empty { min-height: 260px; }
}
@media (max-width: 800px) {
  #app .speaking-conversation-workspace { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  #app .speaking-session-sidebar { padding: 16px; border-right: 0; border-bottom: 1px solid #d9e2f4; }
  #app .speaking-conversation-workspace .speaking-conversation-main > .speaking-round-heading { padding: 20px; }
  #app .speaking-session-sidebar .speaking-history-card { margin-top: 0; }
  #app .speaking-history-card > summary { list-style: disclosure-closed; }
  #app .speaking-history-card[open] > summary { list-style: disclosure-open; }
  #app .speaking-history-card > summary::-webkit-details-marker { display: inline; }
  #app .speaking-session-sidebar .speaking-history-list { max-height: 220px; }
  #app .speaking-session-sidebar .speaking-history-empty { padding: 12px 8px; }
  #app .speaking-session-sidebar .speaking-history-header-actions { justify-content: flex-start; }
  #app .speaking-session-sidebar .speaking-history-header-actions button { flex: none; min-width: 72px; }
  #app .speaking-conversation-workspace .speaking-conversation-main .speaking-call-card { padding-inline: 16px; }
}

/* Permission recovery belongs to the same blue-and-white speaking workspace. */
.speaking-media-help {
  display: block; margin: 14px auto 0; padding: 8px 14px; min-height: 44px;
  color: #365cc8; background: #edf2ff; border: 1px solid #d4dff6;
  border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.speaking-media-help[hidden] { display: none; }
.speaking-media-guide {
  box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px);
  margin: auto; padding: 30px; overflow-y: auto; color: #193252; background: #fbfcff;
  border: 1px solid #d9e3f5; border-radius: 22px; box-shadow: 0 24px 80px #1b356626;
}
.speaking-media-guide::backdrop { background: #142a4c66; }
.speaking-media-guide h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.4; font-weight: 700; }
.speaking-media-guide p { margin: 0; color: #607593; font-size: 15px; line-height: 1.7; }
.speaking-media-guide ol { margin: 22px 0 26px; padding-left: 24px; font-size: 15px; line-height: 1.8; }
.speaking-media-guide li { padding-left: 5px; margin-bottom: 12px; }
.speaking-media-guide li::marker { color: #365cc8; font-weight: 700; }
.speaking-media-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.speaking-media-actions button {
  min-height: 46px; padding: 11px 18px; border-radius: 10px; border: 1px solid #ccd9f2;
  color: #365cc8; background: white; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.speaking-media-actions [data-retry] { flex: 1; color: white; background: #385cda; border-color: #385cda; }
.speaking-media-actions button:focus-visible, .speaking-media-help:focus-visible { outline: 3px solid #8caaf3; outline-offset: 3px; }
@media (max-width: 480px) {
  .speaking-media-guide { padding: 24px 20px; border-radius: 18px; }
  .speaking-media-guide h2 { font-size: 21px; }
}