.speaking-recording-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
}
.speaking-recording-controls[hidden] { display: none !important; }
.speaking-recording-toggle, .speaking-recording-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #26394d;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(12,24,38,.08);
}
.speaking-recording-toggle .recording-dot { width: 8px; height: 8px; border-radius: 50%; background: #a3aab4; }
.speaking-recording-toggle.is-recording { color: #9f2534; background: rgba(255,241,242,.95); }
.speaking-recording-toggle.is-recording .recording-dot { background: #d53c52; box-shadow: 0 0 0 3px rgba(213,60,82,.1); }
.speaking-recording-toggle:focus-visible, .speaking-recording-link:focus-visible { outline: 3px solid #7eaff3; outline-offset: 3px; }
.speaking-recording-hint { flex-basis: 100%; margin: 0; font-size: 11px; color: #435a6d; }
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-controls {
  position: fixed;
  z-index: 16;
  left: max(16px, env(safe-area-inset-left));
  top: calc(max(16px, env(safe-area-inset-top)) + 40px);
  max-width: 270px;
  margin: 0;
  gap: 6px;
}
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-toggle,
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-link {
  background: rgba(22,38,52,.2);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.76);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-toggle .recording-dot {
  background: rgba(255,255,255,.45);
}
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-toggle.is-recording {
  background: rgba(125,34,52,.2);
  color: rgba(255,224,229,.92);
}
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-toggle.is-recording .recording-dot {
  background: #ff8595;
  box-shadow: 0 0 0 3px rgba(255,133,149,.12);
}
@media (hover: hover) {
  .speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-toggle:hover,
  .speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-link:hover {
    background: rgba(22,38,52,.32);
    color: rgba(255,255,255,.94);
  }
}
.speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-hint {
  background: rgba(255,255,255,.88);
  border-radius: 10px;
  padding: 5px 8px;
}
.reading-recording-result {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border: 1px solid #e6eaf0;
  border-radius: 24px;
  background: #fff;
  color: #172c40;
  padding: 25px;
  box-shadow: 0 25px 100px rgba(8,22,38,.25);
}
.reading-recording-result::backdrop { background: rgba(9,24,40,.48); backdrop-filter: blur(4px); }
.recording-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.recording-result-head p { margin: 0 0 8px; font-size: 12px; color: #5478b6; }
.recording-result-head h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.recording-result-head button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1f4f7; color: #526574; font-size: 24px; flex: 0 0 auto; }
.recording-result-meta, .recording-result-note { color: #687a8b; font-size: 13px; line-height: 1.6; }
.reading-recording-result audio { width: 100%; margin: 8px 0 16px; }
.recording-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.recording-result-actions button { flex: 1 1 130px; min-height: 44px; padding: 10px 12px; border: 1px solid #dfe6ef; border-radius: 12px; background: #f7f9fc; color: #274059; font-weight: 700; }
.recording-result-actions button:first-child { background: #315f9f; color: #fff; border-color: #315f9f; }
.recording-result-actions button:disabled { opacity: .5; }
@media (max-width: 640px) {
  .speaking-modal-dialog.is-immersive-reading-mode .speaking-recording-controls { left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 40px); max-width: 240px; }
  .speaking-recording-toggle, .speaking-recording-link { min-height: 38px; padding: 0 10px; font-size: 11px; }
  .reading-recording-result { padding: 20px; }
}

.reading-camera-preview {
  position: fixed;
  z-index: 15;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 64px);
  width: clamp(104px, 16vw, 184px);
  aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 50%;
  overflow: hidden;
  background: #152635;
  box-shadow: 0 8px 32px #0005;
  pointer-events: none;
}
.reading-camera-preview[hidden] { display: none; }
.reading-camera-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.reading-camera-preview span { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 10px; color: #fff; text-shadow: 0 1px 4px #000; }
@media (max-width: 640px) {
  .reading-camera-preview { right: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px); }
  .speaking-modal-dialog.is-recording-reading-mode .speaking-recording-controls { max-width: calc(100vw - 100px); }
}
@media (max-width: 640px) {
  .speaking-modal-dialog.is-recording-reading-mode .speaking-modal-top { left: 70px; right: 58px; }
  .speaking-modal-dialog.is-recording-reading-mode .speaking-modal-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .speaking-modal-dialog.is-recording-reading-mode.has-immersive-font-picker .speaking-font-toggle { position: static; min-width: 0; font-size: 10px; padding: 0 4px; }
  .speaking-modal-dialog.is-recording-reading-mode .speaking-mode-picker { min-width: 0; }
  .speaking-modal-dialog.is-recording-reading-mode .speaking-mode-picker select { width: 100%; min-width: 0; font-size: 11px; padding: 0 4px; }
  .speaking-modal-dialog.is-recording-reading-mode .speaking-modal-close { position: absolute; right: -48px; top: 0; }
  .speaking-modal-dialog.is-recording-reading-mode .speaking-recording-controls { top: calc(max(10px, env(safe-area-inset-top)) + 98px); max-width: calc(100vw - 20px); }
  .reading-camera-preview { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 156px); }
}