/* ============================================================
   NEXORA · TTS / UI styles — apple minimal, theme-aware
   ============================================================ */
.tts-overlay{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:1.25rem; }
.tts-overlay[hidden]{ display:none !important; }
.tts-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.32); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.tts-modal{ position:relative; width:min(100%, 520px); background:var(--bg-elevated); border:1px solid var(--border); border-radius:28px; padding:1.5rem; box-shadow:var(--shadow-lg); max-height:calc(100dvh - 2rem); overflow:auto; }
.tts-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.tts-modal-head h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-0.02em; color:var(--text-1); margin:0; }
.tts-close{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); border:none; color:var(--text-2); cursor:pointer; }
.tts-close:hover{ background:var(--surface-3); color:var(--text-1); }
.tts-facts{ display:grid; gap:0.7rem; margin-top:1rem; padding:0.9rem; background:var(--surface-2); border-radius:16px; border:1px solid var(--border); }
.tts-facts div{ display:flex; justify-content:space-between; gap:1rem; font-size:0.88rem; }
.tts-facts b{ color:var(--text-2); font-weight:500; font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; }
.tts-facts span{ color:var(--text-1); font-weight:500; text-align:right; }
.tts-status{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 0.8rem; border-radius:999px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; }
.tts-status.ok{ background:var(--surface-2); color:var(--text-1); border:1px solid var(--border); }
[data-theme="dark"] .tts-status.ok{ background:var(--surface); }
.tts-status.ok .dot{ width:8px; height:8px; border-radius:999px; background:var(--success); display:inline-block; }
.tts-status.loading{ background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); }
.tts-status.error{ background:var(--danger-soft); color:var(--danger-text); border:1px solid var(--danger-border); }
.tts-spinner{ width:14px; height:14px; border:2px solid var(--border-strong); border-top-color:var(--text-1); border-radius:999px; display:inline-block; animation:tts-spin 0.7s linear infinite; }
@keyframes tts-spin{ to{ transform:rotate(360deg); } }
.tts-actions{ display:flex; flex-wrap:wrap; gap:0.6rem; }

/* AI dock TTS button — polished pill at bottom of bubble */
.ai-msg{ position:relative; }
.ai-bubble{ position:relative; padding-bottom:2.2rem; } /* space for pill */
.ai-bubble .ai-tts-btn{
  position:absolute; bottom:0.45rem; right:0.45rem;
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.32rem 0.65rem; min-height:28px;
  border-radius:999px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-2);
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition: transform 0.18s, background 0.2s, color 0.2s, border-color 0.2s;
}
.ai-bubble .ai-tts-btn:hover{ transform:translateY(-1px); background:var(--bg-elevated); color:var(--text-1); border-color:var(--border-strong); }
.ai-bubble .ai-tts-btn[aria-pressed="true"]{ background:var(--text-1); color:var(--bg-page); border-color:var(--text-1); }
.ai-bubble .ai-tts-btn .icon{ width:14px; height:14px; display:block; }
.ai-bubble .ai-tts-controls{ display:flex; gap:0.4rem; margin-top:0.6rem; position:absolute; bottom:0.45rem; left:0.6rem; }
.ai-tts-mini{ padding:0.32rem 0.6rem; border-radius:999px; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase; background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); cursor:pointer; }
.ai-tts-mini:hover{ background:var(--text-1); color:var(--bg-page); }
.ai-tts-mini.is-active{ background:var(--text-1); color:var(--bg-page); }

/* Lesson TTS */
.le-tts-btn{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.35rem 0.7rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--text-2); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  cursor:pointer; transition: background 0.18s, color 0.18s, transform 0.18s;
}
.le-tts-btn:hover{ background:var(--bg-elevated); color:var(--text-1); border-color:var(--border-strong); transform:translateY(-1px); }
.le-tts-btn[aria-pressed="true"]{ background:var(--text-1); color:var(--bg-page); border-color:var(--text-1); }
.le-tts-btn .icon{ width:14px; height:14px; }
.le-block{ position:relative; }
.le-block-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:0.8rem; margin-bottom:0.6rem; }
.le-block-head h3{ flex:1; }
.lsn-actions{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.8rem; }
.lsn-tts-btn{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.5rem 0.9rem; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-2); font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer;
}
.lsn-tts-btn:hover{ background:var(--text-1); color:var(--bg-page); border-color:var(--text-1); }
.lsn-tts-btn[aria-pressed="true"]{ background:var(--text-1); color:var(--bg-page); }

/* Settings — voice section */
.tts-settings-grid{ display:grid; gap:1rem; margin-top:0.8rem; }
.tts-setting-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.8rem 0; border-bottom:1px solid var(--border); }
.tts-setting-row:last-child{ border-bottom:none; }
.tts-setting-label{ display:grid; gap:0.2rem; }
.tts-setting-label b{ font-size:0.95rem; font-weight:600; color:var(--text-1); }
.tts-setting-label span{ font-size:0.82rem; color:var(--text-3); line-height:1.5; }
.tts-voice-select{ min-width:140px; padding:0.55rem 0.8rem; border-radius:12px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-1); font-size:0.9rem; }
.tts-range{ width:160px; accent-color:var(--text-1); }
.tts-status-card{ display:flex; flex-wrap:wrap; gap:0.6rem 1.2rem; padding:0.9rem; background:var(--surface-2); border-radius:16px; border:1px solid var(--border); margin-top:0.6rem; }
.tts-status-card span{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.82rem; color:var(--text-2); }
.tts-status-card b{ color:var(--text-1); font-weight:600; }
.tts-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.tts-dot.ok{ background:var(--success); }
.tts-dot.warn{ background:var(--warning); }
.tts-dot.error{ background:var(--danger); }

/* Screen-reader only */
.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; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tts-spinner{ animation:none; }
  .ai-tts-btn{ transition:none; }
}