/* ===== Read aloud (Text-to-Speech) ===== */
.read-aloud-box {
  margin: 24px 0;
  padding: 12px 16px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef4ff, #fff);
}

.read-aloud-box .ra-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.read-aloud-box .ra-row + .ra-row {
  margin-top: 10px;
}

.read-aloud-box .ra-voice {
  font-size: 0.82rem;
  color: #666;
}

.read-aloud-box .ra-voice select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 320px;
  border: 1px solid #d0d4da;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.8rem;
  background: #fff;
  cursor: pointer;
}

.read-aloud-box .ra-hint {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #b9770c;
  background: #fff7e6;
  border: 1px solid #ffe1a8;
  border-radius: 8px;
  padding: 7px 10px;
}

.read-aloud-box .ra-hint a { color: #b9770c; text-decoration: underline; }

.read-aloud-box .ra-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}

.read-aloud-box .ra-btn {
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
}

.read-aloud-box .ra-play  { background: #4361ee; color: #fff; }
.read-aloud-box .ra-play:hover  { background: #3a53d0; transform: scale(1.04); }
.read-aloud-box .ra-stop  { background: #f1f3f5; color: #555; }
.read-aloud-box .ra-stop:hover  { background: #e3e6ea; }
.read-aloud-box .ra-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.read-aloud-box .ra-rate {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #666;
}

.read-aloud-box .ra-rate select {
  border: 1px solid #d0d4da;
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 0.8rem;
  background: #fff;
  cursor: pointer;
}

/* Highlight of the sentence currently being spoken */
.ra-speaking {
  background: rgba(67, 97, 238, 0.16);
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.16);
}

/* Dark mode */
body.dark-mode .read-aloud-box {
  border-color: #30363d;
  background: linear-gradient(135deg, #161d2b, #161b22);
}
body.dark-mode .read-aloud-box .ra-label { color: #c9d1d9; }
body.dark-mode .read-aloud-box .ra-stop { background: #21262d; color: #c9d1d9; }
body.dark-mode .read-aloud-box .ra-stop:hover { background: #2c333c; }
body.dark-mode .read-aloud-box .ra-rate { color: #8b949e; }
body.dark-mode .read-aloud-box .ra-rate select { background: #21262d; border-color: #30363d; color: #c9d1d9; }
body.dark-mode .read-aloud-box .ra-voice { color: #8b949e; }
body.dark-mode .read-aloud-box .ra-voice select { background: #21262d; border-color: #30363d; color: #c9d1d9; }
body.dark-mode .read-aloud-box .ra-hint { color: #e3b341; background: #2b2410; border-color: #4d3c12; }
body.dark-mode .read-aloud-box .ra-hint a { color: #e3b341; }
body.dark-mode .ra-speaking { background: rgba(108, 140, 255, 0.22); box-shadow: 0 0 0 2px rgba(108, 140, 255, 0.22); }