/* ================================================================
   ALLNATURALS SPEAKEASY — APOTHECARY AUDIO PLAYER
   Brand palette: rose · amethyst · gold · forest green
   ================================================================ */

:root {
  --sk-pink:   #6cb384;
  --sk-rose:   #4f9d69;
  --sk-deep:   #3d8557;
  --sk-purple: #426e78;
  --sk-smoke:  #2f4f58;
  --sk-gold:   #f4c95d;
  --sk-warm:   #fff3de;
  --sk-forest: #2d7a4a;
}

/* ── Outer Container ──────────────────────────────────────────── */
.speakeasy-media-player {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  /* Breathing room between the card edge and the player (giat.farm) */
  margin: 1.5rem 0 1.25rem;
  padding: 10px 14px 10px 50px;
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;

  /* Warm petal gradient */
  background: linear-gradient(145deg, #f2f8f4 0%, #f2f8f4 55%, #fffde8 100%);

  /* Pill shape with gradient ring */
  border-radius: 60px;
  /* THEME OVERRIDE (2026-08-16): the 2px border stays for the geometry, but the gradient
     now fills it. It was transparent with the background clipped to the padding box, so a
     2px band all the way round the pill showed whatever was behind it — and once the bar
     is pinned, "behind it" is the page scrolling past. Text and photographs bled through
     that band and read as though they were passing in front of the player's border.
     Aviad found it the same way: "this is the culprit: border: 2px solid transparent".
     Clipping to the border box fixes the bleed without moving anything by a pixel. */
  border: 2px solid transparent;
  background-clip: border-box;

  box-shadow:
    0 0 0 2px rgba(224, 122, 159, 0.38),
    0 6px 28px rgba(155, 89, 182, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);

  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

/* A touch more breathing room between the left controls (play / pause / stop),
   on top of the player's base 6px gap. */
.speakeasy-media-player #speakeasy-play-button,
.speakeasy-media-player #speakeasy-pause-button {
  margin-right: 5px;
}

.speakeasy-media-player:hover,
.speakeasy-media-player:focus-within {
  box-shadow:
    0 0 0 2.5px var(--sk-rose),
    0 10px 32px rgba(155, 89, 182, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* THEME OVERRIDE (2026-08-17): no transform on hover, on any site. The bar must not
     move under the pointer — pinned, a 1px shift reads as the whole player twitching, and
     the buttons feel like they are dodging the cursor. Ring and shadow are the feedback. */
}

/* ── Botanical glyph (left) ───────────────────────────────────── */
.speakeasy-media-player::before {
  content: '🌿';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  pointer-events: none;
  animation: leafSway 4.5s ease-in-out infinite;
  line-height: 1;
  z-index: 1;
}

@keyframes leafSway {
  0%, 100% { transform: translateY(-50%) rotate(-7deg) scale(1);    }
  50%       { transform: translateY(-55%) rotate(7deg) scale(1.07); }
}

/* ── Shimmer sweep on hover ───────────────────────────────────── */
.speakeasy-media-player::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -130%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transition: left 1.1s ease;
  pointer-events: none;
  z-index: 0;
}

.speakeasy-media-player:hover::after {
  left: 170%;
}

/* ── All in-player buttons — base ─────────────────────────────── */
.speakeasy-media-player .speakeasy-button {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

/* ▶ Play — rose-to-amethyst glow orb ─────────────────────────── */
#speakeasy-play-button {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(
    135deg,
    var(--sk-pink),
    var(--sk-deep),
    var(--sk-purple)
  ) !important;
  box-shadow:
    0 4px 16px rgba(155, 89, 182, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#speakeasy-play-button:hover:not([disabled]) {
  transform: scale(1.16) translateY(-1px);
  box-shadow:
    0 8px 26px rgba(155, 89, 182, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Radiant pulse ring while actively speaking */
.speakeasy-media-player.speakeasy-state-playing #speakeasy-play-button {
  animation: orbRadiance 2.2s ease-in-out infinite;
}

@keyframes orbRadiance {
  0%   { box-shadow: 0 4px 16px rgba(155,89,182,0.52), 0 0 0 0   rgba(224,122,159,0.6); }
  60%  { box-shadow: 0 4px 16px rgba(155,89,182,0.52), 0 0 0 14px rgba(224,122,159,0);  }
  100% { box-shadow: 0 4px 16px rgba(155,89,182,0.52), 0 0 0 0   rgba(224,122,159,0);  }
}

/* ⏸ Pause — warm gold orb ───────────────────────────────────── */
#speakeasy-pause-button:not([disabled]) {
  background: linear-gradient(135deg, #f7d870, #e8a020) !important;
  box-shadow: 0 4px 16px rgba(232, 160, 32, 0.52);
}

#speakeasy-pause-button:not([disabled]):hover {
  transform: scale(1.14) translateY(-1px);
  box-shadow: 0 8px 22px rgba(232, 160, 32, 0.68);
}

/* ⏹ Stop — deep amethyst orb ────────────────────────────────── */
#speakeasy-stop-button:not([disabled]) {
  background: linear-gradient(135deg, var(--sk-purple), var(--sk-smoke)) !important;
  box-shadow: 0 4px 16px rgba(95, 74, 139, 0.48);
}

#speakeasy-stop-button:not([disabled]):hover {
  transform: scale(1.14) translateY(-1px);
  box-shadow: 0 8px 22px rgba(95, 74, 139, 0.65);
}

/* ⚙ Settings — ghost pill (not a circle) ────────────────────── */
#speakeasy-settings-toggle {
  border-radius: 16px !important;
  width: auto !important;
  min-width: 38px;
  padding: 0 10px !important;
  background: rgba(95, 74, 139, 0.07) !important;
  border: 1.5px solid rgba(155, 89, 182, 0.22) !important;
}

#speakeasy-settings-toggle:hover {
  background: rgba(155, 89, 182, 0.15) !important;
  border-color: var(--sk-rose) !important;
}

/* ── SVG icon fills ───────────────────────────────────────────── */
#speakeasy-play-button svg,
#speakeasy-pause-button:not([disabled]) svg,
#speakeasy-stop-button:not([disabled]) svg {
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
  width: 18px !important;
  height: 18px !important;
}

#speakeasy-pause-button[disabled] svg,
#speakeasy-stop-button[disabled] svg {
  fill: rgba(155, 89, 182, 0.28);
}

#speakeasy-settings-toggle svg {
  fill: var(--sk-smoke);
  width: 20px !important;
  height: 20px !important;
  transition: fill 0.25s ease, transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#speakeasy-settings-toggle:hover svg {
  fill: var(--sk-rose);
  transform: rotate(65deg) scale(1.1);
}

/* ── Disabled state ───────────────────────────────────────────── */
.speakeasy-media-player .speakeasy-button[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── State lighting ───────────────────────────────────────────
   One button carries full colour at a time: the one that names the state the player is
   actually in. Everything else keeps its own colour but drops back, so a glance tells you
   whether it is reading without reading any text.
     playing -> Play is lit, Pause and Stop step back
     paused  -> Pause is lit, Play and Stop step back
     idle    -> Play is lit; Pause and Stop are disabled already, which dims them
   Hover and keyboard focus always restore the full orb, so a dimmed button never looks
   dead. The arrows are deliberately left alone: they are not states, they work in every
   one. Expressed in opacity and filter only, so each site keeps its own palette. */
.speakeasy-media-player.speakeasy-state-playing #speakeasy-pause-button:not([disabled]),
.speakeasy-media-player.speakeasy-state-playing #speakeasy-stop-button:not([disabled]),
.speakeasy-media-player.speakeasy-state-paused #speakeasy-play-button:not([disabled]),
.speakeasy-media-player.speakeasy-state-paused #speakeasy-stop-button:not([disabled]) {
  opacity: 0.45;
  filter: grayscale(0.4);
  box-shadow: none !important;
}

.speakeasy-media-player.speakeasy-state-playing #speakeasy-pause-button:not([disabled]):hover,
.speakeasy-media-player.speakeasy-state-playing #speakeasy-stop-button:not([disabled]):hover,
.speakeasy-media-player.speakeasy-state-paused #speakeasy-play-button:not([disabled]):hover,
.speakeasy-media-player.speakeasy-state-paused #speakeasy-stop-button:not([disabled]):hover {
  opacity: 1;
  filter: none;
}

/* A dimmed button must still be reachable by keyboard, and visibly so. */
.speakeasy-media-player .speakeasy-button:not([disabled]):focus-visible {
  opacity: 1;
  filter: none;
}

/* ── Focus ring ──────────────────────────────────────────────── */
.speakeasy-media-player .speakeasy-button:focus-visible {
  outline: 3px solid var(--sk-pink);
  outline-offset: 3px;
  border-radius: 50%;
}

#speakeasy-settings-toggle:focus-visible {
  border-radius: 16px;
}

/* ── "Listen to this page" label ─────────────────────────────── */
.speakeasy-label {
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sk-smoke);
  letter-spacing: 0.4px;
  white-space: nowrap;
  opacity: 0.72;
  flex-shrink: 0;
  transition: opacity 0.4s ease;
  user-select: none;
  z-index: 1;
}

/* Re-reveal the in-player label. speakeasy-float.css hides it globally with
   ".speakeasy-label { display: none }"; this higher-specificity rule
   (.speakeasy-media-player .speakeasy-label) shows it inside the player. */
.speakeasy-media-player .speakeasy-label {
  display: inline-block;
}

/* Fade the label once speaking starts */
.speakeasy-media-player.speakeasy-state-playing .speakeasy-label,
.speakeasy-media-player.speakeasy-state-paused .speakeasy-label {
  opacity: 0.28;
}

/* ── Animated EQ bars ─────────────────────────────────────────── */
.speakeasy-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  flex-shrink: 0;
  z-index: 1;
}

/* The bars are a state light, not decoration: they only ever move while the voice is
   actually speaking, and they sit dim and colourless the rest of the time. */
.speakeasy-eq-bar {
  width: 3px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(to top, var(--sk-rose) 0%, var(--sk-gold) 100%);
  transform-origin: bottom center;
  animation: eqDance 0.95s ease-in-out infinite;
  animation-play-state: paused;
  opacity: 0.26;
  filter: grayscale(0.65);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Only the playing state moves them, and only it gives them their colour back. */
.speakeasy-media-player.speakeasy-state-playing .speakeasy-eq-bar {
  animation-play-state: running;
  opacity: 1;
  filter: none;
}

.speakeasy-eq-bar:nth-child(1) { height: 7px;  animation-delay: 0s;     }
.speakeasy-eq-bar:nth-child(2) { height: 15px; animation-delay: 0.17s;  }
.speakeasy-eq-bar:nth-child(3) { height: 10px; animation-delay: 0.34s;  }
.speakeasy-eq-bar:nth-child(4) { height: 19px; animation-delay: 0.085s; }
.speakeasy-eq-bar:nth-child(5) { height: 12px; animation-delay: 0.255s; }
.speakeasy-eq-bar:nth-child(6) { height: 8px;  animation-delay: 0.425s; }

@keyframes eqDance {
  0%,  100% { transform: scaleY(0.3); }
  50%        { transform: scaleY(1);   }
}

/* ── Progress slider ─────────────────────────────────────────── */
.speakeasy-progress {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 50px;
  /* THEME OVERRIDE (2026-08-16): this is a seek line, so it should look like one.
     A native range input already jumps to wherever you click — only the affordance was
     missing, at 5px and 16% alpha. Taller, with a hairline edge so it reads as a track on
     any background, and the part already read is filled in from --se-progress, which
     tts.js sets wherever it moves the handle. */
  height: 7px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background:
    linear-gradient(
      to right,
      var(--sk-rose) 0%,
      var(--sk-rose) var(--se-progress, 0%),
      rgba(155, 89, 182, 0.18) var(--se-progress, 0%),
      rgba(155, 89, 182, 0.18) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.30);
  accent-color: var(--sk-rose);
  transition: height 0.2s ease;
  outline: none;
}

/* THEME OVERRIDE (2026-08-17): the rail keeps ONE height, always. Growing it on hover
   made the whole bar taller by 3px, and since the pill is a centred flex row everything
   in it slid down as the pointer arrived — the player "moves low on hover". A control
   that shifts under the cursor is unusable; the hover feedback is the shadow instead. */
.speakeasy-progress:hover,
.speakeasy-progress:focus-visible {
  height: 7px;
  box-shadow: inset 0 0 0 1px currentColor;
}

.speakeasy-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, var(--sk-gold), var(--sk-rose));
  box-shadow: 0 2px 9px rgba(209, 95, 138, 0.6);
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.speakeasy-progress:hover::-webkit-slider-thumb {
  transform: scale(1.45);
}

.speakeasy-progress::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, var(--sk-gold), var(--sk-rose));
  box-shadow: 0 2px 9px rgba(209, 95, 138, 0.6);
  border: none;
  cursor: pointer;
}

/* ── Settings panel ──────────────────────────────────────────── */
.speakeasy-settings {
  position: relative;
  margin-top: 10px;
  padding: 18px 22px 18px;
  background: linear-gradient(145deg, #f2f8f4, #f6fbf7);
  border-radius: 24px;
  border: 1.5px solid rgba(224, 122, 159, 0.26);
  box-shadow:
    0 4px 20px rgba(155, 89, 182, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px;
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  overflow: visible;
}

/* Ornamental divider notch */
.speakeasy-settings::before {
  content: '✦  ·  🌿  ·  ✦';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--sk-rose);
  background: #f6fbf7;
  padding: 0 12px;
  white-space: nowrap;
  pointer-events: none;
}

.speakeasy-setting {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.speakeasy-settings label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--sk-smoke);
  margin: 0;
}

/* Voice select pill */
.speakeasy-voice-select {
  padding: 9px 34px 9px 16px;
  border: 1.5px solid rgba(155, 89, 182, 0.28);
  border-radius: 32px;
  background: #fff;
  color: var(--sk-smoke);
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 200px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%239b59b6' d='M5 7L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.speakeasy-voice-select:focus,
.speakeasy-voice-select:hover {
  border-color: var(--sk-rose);
  box-shadow: 0 0 0 3px rgba(224, 122, 159, 0.14);
}

/* Speed slider */
#speakeasy-speed {
  width: 145px;
  height: 4px;
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--sk-purple) 0%,
    rgba(155, 89, 182, 0.2) 100%
  );
  accent-color: var(--sk-purple);
  cursor: pointer;
  outline: none;
}

#speakeasy-speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, var(--sk-purple), var(--sk-smoke));
  box-shadow: 0 2px 10px rgba(95, 74, 139, 0.52);
  border: 2.5px solid #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#speakeasy-speed:hover::-webkit-slider-thumb {
  transform: scale(1.3);
}

#speakeasy-speed::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, var(--sk-purple), var(--sk-smoke));
  box-shadow: 0 2px 10px rgba(95, 74, 139, 0.52);
  border: 2.5px solid #fff;
  cursor: pointer;
}

/* ── Link-style output ───────────────────────────────────────── */
.speakeasy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sk-rose);
  text-decoration: none;
  border-bottom: 2px dotted rgba(209, 95, 138, 0.5);
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s;
}

.speakeasy-link:hover {
  color: var(--sk-purple);
  border-color: var(--sk-purple);
}

.speakeasy-link.speaking {
  color: var(--sk-forest);
  font-weight: 800;
  border-bottom-style: solid;
  border-color: var(--sk-forest);
}

/* Highlighted text while reading */
.speakeasy-current {
  background: linear-gradient(
    135deg,
    rgba(244, 201, 93, 0.38),
    rgba(224, 122, 159, 0.2)
  );
  border-radius: 3px;
  padding: 0 3px;
  transition: background 0.3s;
}

/* ── Standalone listen button (default / button mode) ─────────── */
.speakeasy-button:not(.speakeasy-media-player .speakeasy-button) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, var(--sk-pink), var(--sk-deep), var(--sk-purple));
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(155, 89, 182, 0.35);
  transition: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.speakeasy-button:not(.speakeasy-media-player .speakeasy-button):hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 30px rgba(155, 89, 182, 0.48);
  background: linear-gradient(135deg, var(--sk-forest), #1a4a2e);
}

.speakeasy-button:not(.speakeasy-media-player .speakeasy-button):active {
  transform: scale(0.97);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .speakeasy-media-player {
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 8px 12px;
    gap: 6px;
  }

  /* Hide leaf on mobile — not enough room */
  .speakeasy-media-player::before {
    display: none;
  }

  /* The hover shimmer (::after) is useless on touch screens — repurpose
     it as a zero-height full-width flex item that forces the wrap between
     row 1 (controls · label · EQ · arrow) and row 2 (time chip · progress).
     Without it the label just shrinks to nothing and rows never wrap. */
  .speakeasy-media-player::after {
    content: '';
    position: static;
    flex-basis: 100%;
    width: auto;
    height: 0;
    order: 9;
    background: none;
    transition: none;
  }

  /* Contrib speakeasy-default.css re-margins buttons at this breakpoint;
     keep them tight (2026-07-15, same compaction as organiclove/itoldu). */
  .speakeasy-media-player .speakeasy-button {
    margin: 0;
  }

  /* Row 1: play / pause / stop · label · time chip · EQ · expand arrow.
     The label drops its nowrap and folds to two short lines instead of
     pushing the chip, EQ, and arrow onto rows of their own. */
  .speakeasy-media-player .speakeasy-label {
    white-space: normal;
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.25;
    font-size: 0.72rem;
    /* fold at spaces only — never split words like "Liste-n" */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Slim the time chip and move it to the bottom row, before the bar */
  .speakeasy-media-player .speakeasy-time {
    font-size: 0.66rem;
    padding: 2px 6px;
    order: 10;
  }

  /* Row 2: time chip + progress bar share the bottom row —
     "~ 1 min ————————" reads as a duration track and frees row 1
     so the label folds to two lines instead of four. */
  .speakeasy-progress {
    flex: 1 1 0;
    width: auto;
    min-width: 50px;
    order: 11;
  }

  /* EQ stays on row 1, between the time chip and the expand arrow */
  .speakeasy-eq {
    order: 0;
  }

  .speakeasy-settings {
    border-radius: 18px;
  }

  .speakeasy-voice-select {
    min-width: unset;
    width: 100%;
  }

  #speakeasy-speed {
    width: 100%;
  }
}

/* ── Accessibility ──────────────────────────────────────────── */
.speakeasy-button:focus,
.speakeasy-link:focus {
  outline: 3px solid var(--sk-pink);
  outline-offset: 3px;
}

/* ── Estimated listen time chip (inside the player pill) ───────────
   Populated by speakeasy-float.js (speakeasyReadTime behavior). Shows
   how long the page takes to hear at the currently selected speed, so
   it updates live as the Speed slider moves. */
.speakeasy-media-player .speakeasy-time {
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--sk-smoke);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.85;
  z-index: 1;
}
.speakeasy-media-player .speakeasy-time[hidden] { display: none; }

/* ================================================================
   COLLAPSED (SPACE-SAVING) STATE — 2026-07-16
   Inline player starts as just the play button (minimum footprint);
   expands to the full pill on first press. Deferred to the sticky
   float layer when it takes over (.se-expanded).
   ================================================================ */
.speakeasy-container:not(.se-expanded) .speakeasy-media-player.speakeasy-collapsed {
  display: inline-flex;
  width: auto;
  max-width: max-content;
  gap: 0;
  /* Drop the 50px left pad that reserved room for the botanical glyph;
     tight, even padding gives the minimum height around the play orb. */
  padding: 5px;
}

/* Hide the botanical glyph + its reserved space while collapsed. */
.speakeasy-container:not(.se-expanded) .speakeasy-media-player.speakeasy-collapsed::before {
  display: none;
}

/* Show ONLY the play button; suppress pause, stop, label, time,
   progress, EQ and settings toggle until expanded. */
/* THEME OVERRIDE (2026-08-17): the X is exempt. Collapsed, this rule hides every child
   except Play — which meant the only way to dismiss the pinned bar was to expand it
   first. If you can see the bar, you can dismiss it. */
.speakeasy-container:not(.se-expanded) .speakeasy-media-player.speakeasy-collapsed > *:not(#speakeasy-play-button):not(.speakeasy-hide-btn) {
  display: none !important;
}

.speakeasy-container:not(.se-expanded) .speakeasy-media-player.speakeasy-collapsed #speakeasy-play-button {
  margin: 0 !important;
}