/* ==========================================================================
   Yeh TTS module  (window.YehTTS)  -  styles
   Inherits page tokens: --yh-ink --yh-paper --yh-accent --yh-accent-2
   --yh-muted --yh-radius --yh-serif --yh-sans --yh-shadow (all with fallbacks).
   Optional overrides:  --yh-tts-bottom (bar offset, default 14px)
   Every control carries data-theme="light|dark" (auto-detected from the
   surface it sits on; override with data-tts-theme on any ancestor).
   All stacking is below the chat (2147482000 < 2147483000).
   ========================================================================== */

.yh-tts-ui, .yh-tts-groupbar, .yh-tts-bar, .yh-tts-panel, .yh-tts-chip {
  --tts-ink: var(--yh-ink, #2b1a1f);
  --tts-paper: var(--yh-paper, #faf6ef);
  --tts-accent: var(--yh-accent, #8c1d3a);
  --tts-gold: var(--yh-accent-2, #b8923a);
  --tts-gold-lt: #e8c97e;
  --tts-muted: var(--yh-muted, #6f6258);
  --tts-radius: var(--yh-radius, 14px);
  --tts-sans: var(--yh-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --tts-serif: var(--yh-serif, Georgia, "Times New Roman", serif);
  box-sizing: border-box;
}
.yh-tts-ui *, .yh-tts-groupbar *, .yh-tts-bar *, .yh-tts-panel *, .yh-tts-chip * { box-sizing: border-box; }

/* ---- unsupported browsers: nothing may show --------------------------- */
.yh-tts-off [data-tts-playall],
.yh-tts-off [data-tts-settings],
.yh-tts-off .yh-tts-ui,
.yh-tts-off .yh-tts-groupbar { display: none !important; }

@media print {
  .yh-tts-ui, .yh-tts-groupbar, .yh-tts-bar, .yh-tts-panel, .yh-tts-chip { display: none !important; }
}

/* ---- shared button base ------------------------------------------------ */
.yh-tts-b {
  --fg: var(--tts-accent);
  --on: var(--tts-paper);
  --wash: rgba(140, 29, 58, .07);
  --wash-2: rgba(140, 29, 58, .14);
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-width: 44px; min-height: 44px; margin: 0;
  padding: 0 1.1em 0 .95em;
  border: 1.5px solid var(--fg); border-radius: 999px;
  background: var(--wash); color: var(--fg);
  font: 600 .9rem/1 var(--tts-sans); font-style: normal; text-transform: none;
  letter-spacing: .02em; text-indent: 0; text-align: center; text-decoration: none;
  white-space: nowrap; vertical-align: middle;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.yh-tts-b[data-theme="dark"] {
  --fg: var(--yh-accent-2, var(--tts-gold-lt));
  --on: var(--yh-ink, #2b1a1f);
  --wash: rgba(255, 255, 255, .07);
  --wash-2: rgba(255, 255, 255, .14);
}
.yh-tts-b:hover { background: var(--wash-2); transform: translateY(-1px); }
.yh-tts-b:active { transform: scale(.97); }
.yh-tts-b:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.yh-tts-b[aria-pressed="true"] { background: var(--fg); color: var(--on); border-color: var(--fg); }
.yh-tts-b[aria-pressed="true"]:hover { transform: none; }
.yh-tts-ico { font-size: 1.1em; line-height: 1; font-style: normal; }
.yh-tts-b[aria-pressed="true"] > .yh-tts-ico { display: none; }
.yh-tts-lbl { display: inline-block; }

/* ---- soundwave --------------------------------------------------------- */
.yh-tts-wave { display: none; align-items: center; justify-content: center; gap: 2.5px; width: 20px; height: 16px; flex: none; }
.yh-tts-wave i {
  display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor;
  transform: scaleY(.3); transform-origin: 50% 50%;
  animation: yhTtsWave 1s ease-in-out infinite;
}
.yh-tts-wave i:nth-child(2) { animation-duration: .8s;  animation-delay: -.25s; }
.yh-tts-wave i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.5s; }
.yh-tts-wave i:nth-child(4) { animation-duration: .9s;  animation-delay: -.15s; }
.yh-tts-b[aria-pressed="true"] > .yh-tts-wave,
.yh-tts-bar .yh-tts-wave { display: inline-flex; }
@keyframes yhTtsWave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }

/* ---- per-quote wrapper -------------------------------------------------- */
.yh-tts-ui {
  display: block; margin: .9em 0 0; padding: 0;
  font-style: normal; text-indent: 0; text-transform: none; letter-spacing: normal; line-height: 1;
  text-align: inherit;
}
.yh-tts-ui::before, .yh-tts-ui::after { content: none !important; }

/* ---- play-all control row ---------------------------------------------- */
.yh-tts-groupbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px;
  margin: 0 auto 1.25rem; padding: 0;
}
.yh-tts-playall { min-height: 48px; padding: 0 1.35em 0 1.15em; font-size: .95rem; background: var(--fg); color: var(--on); }
.yh-tts-playall:hover { background: var(--fg); filter: brightness(1.08); }
.yh-tts-playall[aria-pressed="true"] { background: var(--wash); color: var(--fg); }
.yh-tts-playall[aria-pressed="true"]:hover { background: var(--wash-2); }
.yh-tts-gear { padding: 0 1em 0 .85em; font-weight: 600; font-size: .9rem; border-color: transparent; background: transparent; }
.yh-tts-gear > span[aria-hidden] { font-size: 1.25em; line-height: 1; }
.yh-tts-gear:hover { background: var(--wash); }
.yh-tts-gear[aria-expanded="true"] { background: var(--wash-2); }

/* "Voice settings" link under a page-supplied play-all row */
.yh-tts-vrow { display: flex; justify-content: center; margin: -6px 0 8px; }
.yh-tts-vlink {
  --fg: var(--tts-accent);
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; margin: 0; padding: 0 .9em;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg); opacity: .85;
  font: 500 .82rem/1 var(--tts-sans); letter-spacing: .04em; text-transform: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity .2s ease, background-color .2s ease;
}
.yh-tts-vlink > span:last-child { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.yh-tts-vlink > span:first-child { font-size: 1.15em; }
.yh-tts-vlink[data-theme="dark"] { --fg: var(--yh-accent-2, var(--tts-gold-lt)); }
.yh-tts-vlink:hover, .yh-tts-vlink[aria-expanded="true"] { opacity: 1; background: rgba(127, 127, 127, .14); }
.yh-tts-vlink:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }

/* page-supplied <button data-tts-playall>: we only toggle state hooks */
[data-tts-playall].is-playing { cursor: pointer; }

/* ---- the quote being read ---------------------------------------------- */
[data-tts].yh-tts-speaking {
  --yh-tts-wash: rgba(184, 146, 58, .13);
  --yh-tts-ring: rgba(184, 146, 58, .55);
  --yh-tts-hl: rgba(222, 172, 58, .42);
  box-shadow: inset 0 0 0 999px var(--yh-tts-wash), 0 0 0 2px var(--yh-tts-ring), 0 12px 36px -12px var(--yh-tts-ring) !important;
}
[data-tts].yh-tts-speaking[data-yh-tts-theme="dark"] {
  --yh-tts-wash: rgba(232, 201, 126, .12);
  --yh-tts-ring: rgba(232, 201, 126, .6);
  --yh-tts-hl: rgba(232, 201, 126, .36);
}
::highlight(yh-tts-word) { background-color: var(--yh-tts-hl, rgba(222, 172, 58, .42)); color: inherit; }

/* ---- mini player -------------------------------------------------------- */
.yh-tts-bar {
  position: fixed; left: 50%; z-index: 2147481000;
  bottom: calc(var(--yh-tts-bottom, 14px) + env(safe-area-inset-bottom, 0px) + var(--yh-tts-lift, 0px));
  display: flex; align-items: center; gap: 4px;
  width: max-content; max-width: calc(100vw - 24px); min-height: 56px;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--tts-ink); color: var(--tts-paper);
  box-shadow: var(--yh-shadow, 0 16px 40px -14px rgba(0, 0, 0, .55)), 0 0 0 1px rgba(255, 255, 255, .1);
  font: 500 .85rem/1.2 var(--tts-sans);
  visibility: hidden; opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
}
.yh-tts-bar[data-open="true"] {
  visibility: visible; opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.yh-tts-bar[data-theme="dark"] {
  background: var(--tts-paper); color: var(--tts-ink);
  box-shadow: var(--yh-shadow, 0 16px 40px -14px rgba(0, 0, 0, .7)), 0 0 0 1px rgba(0, 0, 0, .12);
}
.yh-tts-bar .yh-tts-wave { color: var(--tts-gold-lt); margin-right: 8px; }
.yh-tts-bar[data-theme="dark"] .yh-tts-wave { color: var(--tts-accent); }
.yh-tts-bar-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; padding-right: 6px; }
.yh-tts-bar-title { font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.yh-tts-bar-name { font-size: .75rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.yh-tts-bar-name:empty { display: none; }
.yh-tts-bar[data-flash="true"] .yh-tts-wave,
.yh-tts-bar[data-flash="true"] .yh-tts-bar-btn { display: none; }
.yh-tts-bar-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 44px; min-height: 44px; margin: 0; padding: 0 .9em;
  border: 0; border-radius: 999px; background: transparent; color: inherit;
  font: 700 .85rem/1 var(--tts-sans); letter-spacing: .03em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s ease, transform .2s ease;
}
.yh-tts-bar-btn:hover { background: rgba(127, 127, 127, .22); }
.yh-tts-bar-btn:active { transform: scale(.96); }
.yh-tts-bar-btn:focus-visible { outline: 3px solid var(--tts-gold-lt); outline-offset: 1px; }
.yh-tts-bar[data-theme="dark"] .yh-tts-bar-btn:focus-visible { outline-color: var(--tts-accent); }
.yh-tts-bar-gear { padding: 0; font-size: 1.15rem; }
.yh-tts-bar-gl { display: none; font-size: .78rem; font-weight: 600; letter-spacing: .03em; margin-left: .35em; }
@media (min-width: 560px) { .yh-tts-bar-gear { padding: 0 .8em 0 .7em; } .yh-tts-bar-gl { display: inline; } }
.yh-tts-bar-stop { background: var(--tts-gold-lt); color: #2b1a1f; }
.yh-tts-bar-stop:hover { background: var(--tts-gold-lt); filter: brightness(1.07); }
.yh-tts-bar[data-theme="dark"] .yh-tts-bar-stop { background: var(--tts-accent); color: var(--tts-paper); }
.yh-tts-bar[data-theme="dark"] .yh-tts-bar-stop:hover { background: var(--tts-accent); }

/* ---- voice panel -------------------------------------------------------- */
.yh-tts-panel {
  position: fixed; left: 50%; z-index: 2147481001;
  bottom: calc(var(--yh-tts-bottom, 14px) + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow: auto;
  padding: 16px 18px 14px; border-radius: calc(var(--tts-radius) + 4px);
  background: var(--tts-paper); color: var(--tts-ink);
  border: 1px solid rgba(43, 26, 31, .14);
  box-shadow: var(--yh-shadow, 0 22px 60px -18px rgba(0, 0, 0, .55));
  font: 400 .9rem/1.4 var(--tts-sans);
  --fg: var(--tts-accent); --track: rgba(43, 26, 31, .18);
  visibility: hidden; opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s;
}
.yh-tts-panel[data-open="true"] {
  visibility: visible; opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.yh-tts-panel[data-theme="dark"] {
  background: var(--yh-ink, #2b1a1f); color: var(--yh-paper, #faf6ef);
  border-color: rgba(255, 255, 255, .2);
  --fg: var(--yh-accent-2, var(--tts-gold-lt)); --track: rgba(255, 255, 255, .25);
}
.yh-tts-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.yh-tts-panel-title { margin: 0; font: 600 1.1rem/1.2 var(--tts-serif); letter-spacing: .01em; }
.yh-tts-x {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.yh-tts-x:hover { background: rgba(127, 127, 127, .18); }
.yh-tts-x:focus-visible, .yh-tts-select:focus-visible, .yh-tts-range:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.yh-tts-field { display: block; margin: 8px 0 0; }
.yh-tts-field > span { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.yh-tts-field output { font-variant-numeric: tabular-nums; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .85; }
.yh-tts-select {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 0 38px 0 12px;
  border: 1.5px solid var(--track); border-radius: 12px;
  background-color: transparent; color: inherit;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  font: 400 16px/1.2 var(--tts-sans); text-overflow: ellipsis;
}
.yh-tts-select option { color: #2b1a1f; background: #fff; }
.yh-tts-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.yh-tts-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--track); }
.yh-tts-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--track); }
.yh-tts-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--fg); border: 3px solid var(--tts-paper); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.yh-tts-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--fg); border: 3px solid var(--tts-paper); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.yh-tts-panel[data-theme="dark"] .yh-tts-range::-webkit-slider-thumb { border-color: var(--yh-ink, #2b1a1f); }
.yh-tts-panel[data-theme="dark"] .yh-tts-range::-moz-range-thumb { border-color: var(--yh-ink, #2b1a1f); }
.yh-tts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.yh-tts-actions .yh-tts-b { font-size: .88rem; }
.yh-tts-testbtn { background: var(--fg); color: var(--on); }
.yh-tts-panel .yh-tts-testbtn { --on: var(--tts-paper); }
.yh-tts-panel[data-theme="dark"] .yh-tts-testbtn { --on: var(--yh-ink, #2b1a1f); }
.yh-tts-testbtn:hover { background: var(--fg); filter: brightness(1.08); }
.yh-tts-testbtn[aria-pressed="true"] { background: var(--wash); color: var(--fg); }
.yh-tts-reset { border-color: transparent; background: transparent; font-weight: 500; }
.yh-tts-hint { margin: 10px 0 0; font-size: .76rem; opacity: .7; }

/* ---- optional floating chip (window.YEH_TTS_CHIP = true  or  ?tts=chip) --- */
.yh-tts-chip {
  position: fixed; left: 12px; z-index: 2147481000;
  bottom: calc(var(--yh-tts-bottom, 14px) + env(safe-area-inset-bottom, 0px));
  background: var(--tts-ink); color: var(--tts-paper); border-color: rgba(255, 255, 255, .25);
  box-shadow: var(--yh-shadow, 0 10px 28px -10px rgba(0, 0, 0, .5));
}
.yh-tts-chip[data-theme="dark"] { background: var(--tts-paper); color: var(--tts-ink); border-color: rgba(0, 0, 0, .2); }
.yh-tts-chip:hover { background: var(--tts-ink); }
.yh-tts-chip[data-theme="dark"]:hover { background: var(--tts-paper); }

/* ---- visually-hidden live region --------------------------------------- */
.yh-tts-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}

/* ---- small phones -------------------------------------------------------- */
@media (max-width: 420px) {
  .yh-tts-bar { padding-left: 14px; }
  .yh-tts-bar-name { max-width: 15ch; }
  .yh-tts-bar-btn { padding: 0 .75em; }
  .yh-tts-bar-gear { padding: 0; }
  .yh-tts-playall { width: 100%; max-width: 340px; }
  .yh-tts-groupbar { gap: 4px 10px; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .yh-tts-wave i { animation: none; }
  .yh-tts-wave i:nth-child(1) { transform: scaleY(.45); }
  .yh-tts-wave i:nth-child(2) { transform: scaleY(.9); }
  .yh-tts-wave i:nth-child(3) { transform: scaleY(.6); }
  .yh-tts-wave i:nth-child(4) { transform: scaleY(.8); }
  .yh-tts-b, .yh-tts-bar, .yh-tts-panel, .yh-tts-bar-btn { transition: none !important; }
  .yh-tts-b:hover, .yh-tts-b:active { transform: none; }
}

/* ---- test hook (window.__YEH_TEST === true): no transitions/animations --- */
.yh-tts-testing .yh-tts-b, .yh-tts-testing .yh-tts-bar, .yh-tts-testing .yh-tts-panel, .yh-tts-testing .yh-tts-bar-btn { transition: none !important; }
.yh-tts-testing .yh-tts-wave i { animation: none !important; }