/* The bottom action bar and the audio panel it expands into.
 *
 * Moved verbatim out of style.css on 7 Oct 2026 so the Catch Up page wears the
 * reader's own player rather than a look-alike. Loaded straight after
 * style.css, so its rules keep exactly the place in the cascade they had.
 * The dark-mode background below is the one rule that lived later in
 * style.css; it moves with the rest so it still wins.
 */

/* ===============================================
   ACTIONS BAR
   =============================================== */

.actions {
  position: fixed;
  /* Fixed pixel offset, not a percentage. A percentage `bottom` resolves
     against iOS's large layout viewport while the pill paints in the visual
     viewport, which strands it far up the screen when iOS Chrome's dynamic
     toolbar expands at the end of a scroll. */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: calc(var(--button-size) + 12px); /* Fixed height based on regular button size */
  padding: 6px var(--space-md);
  overflow: visible; /* Allow hero button to overflow */
  background: light-dark(rgba(255, 255, 255, 0.95), rgba(40, 40, 40, 0.95));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
              0 0 0 1px light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.08));
  border-radius: 36px;
  z-index: 10;
  transition: background-color 600ms ease-in-out, box-shadow 600ms ease-in-out, border-color 600ms ease-in-out;
}

.actions-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  padding: 0;
}

/* Mobile-specific styles */
@media not all and (hover: hover) and (pointer: fine) {
  .actions-inner {
    gap: 20px;
  }
}

/* Desktop-specific styles */
@media (hover: hover) and (pointer: fine) {
  .actions {
    height: calc(var(--button-size) + 16px); /* Fixed height for desktop */
    padding: 8px var(--space-lg);
  }
  .actions-inner {
    gap: 1.2rem;
    justify-content: center;
    padding: 0;
  }
}

/* Action Buttons */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45));
  cursor: pointer;
  transition: transform var(--motion-standard), box-shadow var(--motion-standard), background-color 600ms ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  /* Size based on device type */
  width: var(--button-size);
  height: var(--button-size);
}

.action-btn:focus-visible {
  outline: 3px solid light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45));
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .action-btn {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
}

@media (hover: hover) {
  .action-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    background: var(--dynamic-color-primary-hover, light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45)));
  }

  .action-btn:hover img {
    transform: scale(1.1);
  }

  /* Close button hover — subtle, no lift/scale */
  .actions--expanded .action-btn--active:hover {
    background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.18));
    transform: none;
    box-shadow: none;
  }
  .actions--expanded .action-btn--active:hover img {
    transform: none;
  }
}

.action-btn:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.actions--expanded .action-btn--active:active {
  transform: scale(0.9);
  box-shadow: none;
}

/* Notes are private and cannot be shared, so the share button is disabled
   while viewing one. Dimmed rather than hidden, so the control does not jump
   around as you move between articles. */
.action-btn--disabled,
.action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.action-btn--primary {
  background: light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45));
  box-shadow: 0 4px 12px var(--dynamic-shadow-primary, rgba(218, 67, 11, 0.3));
}

@media (hover: hover) and (pointer: fine) {
  .action-btn--primary {
    box-shadow: 0 6px 16px var(--dynamic-shadow-primary, rgba(218, 67, 11, 0.4));
  }
}

@media (hover: hover) {
  .action-btn--primary:hover {
    background: var(--dynamic-color-primary-hover, color-mix(in srgb, light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45)) 85%, black));
    box-shadow: 0 8px 20px var(--dynamic-shadow-primary-hover, rgba(218, 67, 11, 0.5));
  }
}

.action-btn--primary:active {
  background: color-mix(in srgb, light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45)) 70%, black);
}

.action-btn--primary.celebrating {
  animation: button-celebrate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Hero button - Mark as read gets special prominence */
#mark-read-btn {
  width: var(--hero-button-size);
  height: var(--hero-button-size);
  /* Elevated hero design */
  background: light-dark(var(--dynamic-color-primary, #d44009), var(--dynamic-color-primary-dark, #ff7a45));
  /* Explicitly remove all borders and outlines */
  border: none !important;
  outline: none !important;
  -webkit-appearance: none;
  /* Mobile: Very subtle shadow - clean and minimal for touch */
  box-shadow: 0 4px 12px var(--dynamic-shadow-primary, light-dark(rgba(218, 67, 11, 0.18), rgba(255, 122, 69, 0.18)));
  /* Smooth theme transitions matching other buttons */
  transition: all var(--motion-standard), background-color 600ms ease-in-out, box-shadow 600ms ease-in-out;
  /* Allow button to peek over action bar edges with negative margins */
  z-index: 2;
  position: relative;
  margin-top: calc((var(--button-size) - var(--hero-button-size)) / 2);
  margin-bottom: calc((var(--button-size) - var(--hero-button-size)) / 2);
  /* No constant animation - clean and still */
  animation: none;
}

/* Removed pulse animation - keeping it clean and still */

/* Simple scale animation on article change */
@keyframes hero-button-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Class to trigger pop animation once */
#mark-read-btn.shimmer {
  animation: hero-button-pop 0.4s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  #mark-read-btn {
    /* Strong desktop shadow - hero prominence, theme-aware */
    box-shadow: 0 10px 30px var(--dynamic-shadow-primary, light-dark(rgba(218, 67, 11, 0.4), rgba(255, 122, 69, 0.4)));
  }
}

@media (hover: hover) {
  #mark-read-btn:hover {
    /* Hero hover - dramatic lift and glow, theme-aware */
    box-shadow: 0 12px 36px var(--dynamic-shadow-primary-hover, light-dark(rgba(218, 67, 11, 0.5), rgba(255, 122, 69, 0.5)));
    /* Pause breathing animation on hover */
    animation-play-state: paused;
    /* Confident lift on hover with slight scale */
    transform: translateY(-4px) scale(1.02);
  }
}

#mark-read-btn:active {
  /* Pressed state - slightly smaller but still elevated */
  transform: scale(0.96) translateY(1px);
  /* Mobile: Minimal shadow when pressed, theme-aware */
  box-shadow: 0 2px 6px var(--dynamic-shadow-primary, light-dark(rgba(218, 67, 11, 0.15), rgba(255, 122, 69, 0.15)));
  /* Pause breathing animation */
  animation-play-state: paused;
}

.action-btn img {
  filter: invert(1);
  pointer-events: none;
  transition: transform var(--motion-standard), filter 600ms ease-in-out, opacity 200ms ease;
  display: block;
  width: 60%;
  height: 60%;
}

/* Hero button icon - larger checkmark for better visibility */
#mark-read-btn img {
  width: 68%;
  height: 68%;
}

/* Share button icon - slightly smaller and offset for better centering */
#share-btn img {
  width: 57.5%;
  height: 57.5%;
  transform: translateY(-2px);
}

@media (hover: hover) {
  #share-btn:hover img {
    transform: translateY(-2px) scale(1.1);
  }
}

/* ===============================================
   ACTION BAR — EXPANDING DOCK
   =============================================== */

/* Button icon → X morph (opacity cross-fade, no rotation — avoids fighting FLIP) */
.action-btn__icon {
  transition: opacity 150ms ease;
}

.action-btn__close {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease;
  pointer-events: none;
  color: light-dark(#ffffff, #ffffff);
}

.action-btn--active .action-btn__icon {
  opacity: 0;
}

.action-btn--active .action-btn__close {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Expanded action bar — stays floating with bottom gap, like the collapsed pill */
.actions.actions--expanded {
  flex-direction: column;
  align-items: center;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
  z-index: 200;
  width: min(400px, 90vw);
  height: auto;
  padding: 0;
  overflow: hidden;
  /* CRITICAL: Override `.actions { transform: translateX(-50%) }` here. iOS
     Chrome has a longstanding bug where touch events fail to deliver
     correctly to a scrollable descendant of a `position: fixed` ancestor
     that ALSO has a transform applied — touch hit-testing miscomputes the
     coordinate mapping and scroll gestures get dropped (~90% of drags fail
     to initiate scroll). We center via auto-margin instead, leaving no
     transform on the scroll container's fixed-positioned ancestor. */
  transform: none;
  left: 0;
  right: 0;
  margin-inline: auto;
}

/* Desktop: stay floating instead of edge-anchored */
@media (hover: hover) and (pointer: fine) {
  .actions.actions--expanded {
    bottom: 2%;
    border-radius: 16px;
  }
}

/* Non-active buttons vanish instantly (no transition — avoids fighting bar morph) */
.actions--expanded .action-btn:not(.action-btn--active) {
  width: 0;
  height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  box-shadow: none;
}

/* Active button flies to top-right as close button */
.actions--expanded .action-btn--active {
  position: absolute;
  top: 5px;
  right: 12px;
  z-index: 10;
  margin: 0;
  width: 36px;
  height: 36px;
  background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
  box-shadow: none;
}

.actions--expanded .action-btn--active .action-btn__close {
  color: light-dark(#333, #ccc);
}

/* Button row hidden when expanded (active button is absolutely positioned) */
.actions--expanded .actions-inner {
  border-top: none;
  padding: 0;
  order: 2;
  gap: 0;
  height: 0;
  overflow: hidden;
}

/* Panel container. Audio is the only panel the bar carries now that Settings
   is its own page at /settings, and its content is short enough not to need a
   scroller — so there is deliberately no overflow-y here. */
.actions__panel {
  display: none;
  flex-direction: column;
  order: 1;
  flex: 1;
  min-height: 0;
  background: light-dark(#ffffff, #181818);
  width: 100%;
}

.actions--expanded .actions__panel--active {
  display: flex;
}

/* Panel height constraints */
#panel-audio {
  max-height: calc(80dvh - 80px);
}

@media (hover: none) and (pointer: coarse) {
  #panel-audio {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 80px);
  }
}

/* Hero button overflow: visible only when collapsed */
.actions:not(.actions--expanded) {
  overflow: visible;
}

/* Panel header (audio) */
.panel-header {
  display: flex;
  align-items: center;
  padding: 12px 56px 12px 20px;
  background: light-dark(#f8f9fa, #252525);
  border-bottom: 1px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
  flex-shrink: 0;
}

.panel-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-header__logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.panel-header__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .action-btn__icon,
  .action-btn__close {
    transition: none !important;
  }
}

/* Was in style.css's DARK MODE OVERRIDES. */
@media (prefers-color-scheme: dark) {
  .actions {
    background: light-dark(rgba(255, 255, 255, 0.95), rgba(40, 40, 40, 0.95));
  }
}