/* v3.7.299: Reposition the open audio bar from centered-bottom-pill
   to anchored panel near the speaker icon in the upper right.
   Overrides v3.7.283 relayout. */

.wtpp-tts-bar.wtpp-tts-bar-open {
  left: auto !important;
  right: 12px !important;
  bottom: auto !important;
  top: 58px !important;
  transform: none !important;
  width: auto !important;
  max-width: min(560px, calc(100vw - 24px)) !important;
  box-shadow: 0 8px 24px var(--ov-black-15),
              0 2px 6px var(--ov-black-06) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border, var(--ov-black-10)) !important;
  border-top: 3px solid var(--red, var(--red)) !important;
}

/* Arrow connector pointing up to the speaker icon */
.wtpp-tts-bar.wtpp-tts-bar-open::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: var(--paper, var(--paper));
  border-top: 1px solid var(--border, var(--ov-black-10));
  border-left: 1px solid var(--border, var(--ov-black-10));
  transform: rotate(45deg);
  z-index: 1;
}

html[data-theme="dark"] .wtpp-tts-bar.wtpp-tts-bar-open::before {
  background: var(--paper, var(--ink));
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .wtpp-tts-bar.wtpp-tts-bar-open::before {
    background: var(--paper, var(--ink));
  }
}

.wtpp-tts-badge { cursor: pointer; }

/* Mobile: full-width below header */
@media (max-width: 540px) {
  .wtpp-tts-bar.wtpp-tts-bar-open {
    top: 52px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: none !important;
    padding: 10px 12px !important;
  }
  .wtpp-tts-bar.wtpp-tts-bar-open::before {
    right: 14px;
  }
}