/* ================================================================
   SPEAKEASY STICKY + COLLAPSIBLE PLAYER
   The real player (.speakeasy-container) pins below the header once
   scrolled past. The full transport (play / pause / stop / seek) is
   always visible; an injected toggle opens the voice/speed settings
   below the bar, and the open/closed choice persists (localStorage).
   ================================================================ */

/* ── Collapse model ──────────────────────────────────────────────── */
/* The module's gear is replaced by our expand toggle. */
#speakeasy-settings-toggle { display: none !important; }

/* While collapsed, the whole bar is a click target to open the full player. */
.speakeasy-container:not(.se-expanded) .speakeasy-media-player { cursor: pointer; }

/* Drop every "Listen to the Description" label — the in-bar text span and the
   block's <h2> title — the player itself makes its purpose obvious. Also pull
   the player up tight to the content above it. */
.speakeasy-label { display: none; }
/* …but reveal it (styled as a notice) when it carries the "audio not supported"
   message — e.g. DuckDuckGo/Brave block the Web Speech API. */
.speakeasy-label.speakeasy-label--notice {
  display: block !important;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(209, 95, 138, 0.10);
  color: var(--sk-smoke, #2f4f58);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  /* Override the base label's nowrap so the message wraps instead of being
     clipped in the narrow player bar on mobile. */
  white-space: normal;
  opacity: 1 !important;
}
.speakeasy-container .block__title { display: none; }
.speakeasy-container { margin-top: 0; }

/* Collapsed (default): the full transport — play / pause / stop / seek — and
   the toggle stay visible. Only the voice/speed settings tuck away. */
.speakeasy-container #speakeasy-settings.speakeasy-settings {
  display: none;
}

/* Expanded: reveal the voice/speed settings. The panel carries an inline
   style="display:none" from the template, so its reveal needs !important. */
.speakeasy-container.se-expanded #speakeasy-settings.speakeasy-settings {
  display: flex !important;
}

/* Expand / collapse toggle (injected by speakeasy-float.js). */
.speakeasy-expand-toggle {
  flex-shrink: 0;
  margin-left: auto;            /* sit at the right edge of the bar */
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sk-smoke, #2f4f58);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.speakeasy-expand-toggle:hover { background: rgba(155, 89, 182, 0.12); }
.speakeasy-expand-toggle:focus-visible {
  outline: 2px solid var(--sk-rose, #4f9d69);
  outline-offset: 2px;
}
.speakeasy-expand-toggle svg { transition: transform 0.22s ease; }
.speakeasy-container.se-expanded .speakeasy-expand-toggle svg { transform: rotate(90deg); }

/* Expanded: the voice/speed panel sits as its own full-width row attached
   directly to the bar (no gap) so the bar's width never changes, with a clear
   border framing the section. The ✦ notch is dropped since it straddled the
   old gap. */
.speakeasy-container.se-expanded #speakeasy-settings.speakeasy-settings {
  margin-top: 0;
  border: 2px solid var(--sk-rose, #4f9d69);
}
.speakeasy-container.se-expanded #speakeasy-settings.speakeasy-settings::before {
  display: none;
}

/* ── Pinned (sticky) state — all widths ──────────────────────────── */
/* position / top / left / width are set inline by speakeasy-float.js. */
.speakeasy-container.sf-stuck {
  z-index: 900;
  animation: sf-drop 0.18s ease-out;
}
/* Pinned, the bar floats over whatever is scrolling underneath it — photographs
   included. The ring used to be 38% alpha and the drop shadow 28%, so over an image the
   picture simply showed through the edge: the bar looked as though the photo were passing
   in FRONT of its border while the body of the bar covered it. Nothing was stacked wrongly
   — the edge was translucent. Pinned, the ring is opaque and the shadow is deep enough to
   separate the bar from any background. The in-flow player keeps its softer edge. */
.speakeasy-container.sf-stuck .speakeasy-media-player {
  box-shadow:
    0 0 0 2px rgba(209, 95, 138, 0.98),
    0 12px 34px rgba(95, 74, 139, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@keyframes sf-drop {
  from { transform: translateY(-8px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

.speakeasy-sticky-spacer {
  pointer-events: none;
}

/* ── Hide (X) button ─────────────────────────────────────────────── */
/* A small dismiss icon, only shown while the bar is pinned. Lets the
   reader clear the floating bar off the top of the viewport. */
.speakeasy-hide-btn {
  display: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sk-smoke, #2f4f58);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.speakeasy-container.sf-stuck .speakeasy-hide-btn { display: inline-flex; }
.speakeasy-hide-btn:hover { background: rgba(209, 95, 138, 0.14); }
.speakeasy-hide-btn:focus-visible {
  outline: 2px solid var(--sk-rose, #4f9d69);
  outline-offset: 2px;
}

/* ── Speakeasy text highlight — high-contrast yellow ─────────────── */
.speakeasy-current {
  background-color: #fde047 !important;
  color: #1a1a1a !important;
  border-radius: 3px;
  padding: 0 2px;
  transition: background-color 0.15s;
}

/* Paused: the reader keeps their place, but the page stops shouting it. Same yellow at a
   third of the strength — the text colour is untouched, so contrast never suffers. */
body.speakeasy-highlight-paused .speakeasy-current {
  background-color: rgba(253, 224, 71, 0.34) !important;
}

/* ── Read-aloud support gate ──────────────────────────────────────────────
   The player is hidden until speakeasy-tts.js confirms this browser can
   actually speak, and stays hidden on the ones that cannot (DuckDuckGo,
   Firefox Focus/Klar, in-app webviews, Chromium with no speech engine).
   Hidden is also the right default without JavaScript: the player is
   entirely script-driven, so it would do nothing anyway. */
.speakeasy-container:not(.speakeasy-supported) { display: none !important; }
.speakeasy-container:not(.speakeasy-supported) + .speakeasy-sticky-spacer { display: none !important; }

/* Pinned, the bar's in-flow margins are not spacing any more — they are a gap between it
   and whatever it is pinned under. itoldu.css sets margin-top: 1rem on the block, which
   is exactly the gap Aviad saw below the navbar on Windows. Zero them while stuck; the
   spacer already holds the space open in the flow. */
.speakeasy-container.sf-stuck,
.block-speakeasy-block.sf-stuck {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* THEME OVERRIDE (2026-08-17): the X shows whenever the bar is pinned, collapsed or not —
   matching the other four sites. It was hidden in the collapsed state here, which is the
   state the bar is usually in, so the only way to dismiss it was to expand it first. If
   you can see the bar you can dismiss it. */
.speakeasy-container.sf-stuck .speakeasy-hide-btn,
.speakeasy-container.sf-stuck .speakeasy-media-player.speakeasy-collapsed .speakeasy-hide-btn {
  display: inline-flex !important;
}

/* The way back after the X: a small tab at the top edge, shown only while the player is
   dismissed AND scrolled out of reach. Deliberately quiet — it is an offer, not a bar. */
.speakeasy-restore-tab {
  position: fixed;
  top: 0;
  right: 18px;
  z-index: 901;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #fff;
  color: #333;
  font: 700 0.76rem/1 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.speakeasy-restore-tab:hover { opacity: 1; }

.speakeasy-restore-tab:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

@media print { .speakeasy-restore-tab { display: none !important; } }