.read-aloud-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.read-aloud-player-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.read-aloud-play-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.read-aloud-play-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.read-aloud-play-btn:active {
  transform: scale(0.95);
}

.read-aloud-play-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.read-aloud-label {
  color: #acb0b5;
  font-size: 0.9rem;
}

.read-aloud-separator {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
}

.read-aloud-duration {
  color: #acb0b5;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  min-width: 45px;
}



.reading-highlight {
  background-color: rgba(97, 121, 255, 0.3);
  padding: 2px 0;
  border-radius: 3px;
  transition: background-color 0.2s ease;
  color: #b8c5ff;
}

.copy-link-text {
  background: transparent;
  border: none;
  color: #acb0b5;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  user-select: none;
  position: relative;
  overflow: hidden;
  height: 22px;
}

.copy-link-text span {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transform-origin: left center;
}

.copy-link-text:hover { color: #fff; }
.copy-link-text:active { opacity: 0.7; }
.copy-link-text svg { width: 16px; height: 16px; pointer-events: none; flex-shrink: 0; transition: transform 0.3s ease; }

.copy-link-text.copied, .copy-link-text.copied:hover { color: #4ade80; }
.copy-link-text.copied svg { color: #4ade80; }

.copy-link-text.copied span {
  transform: translateY(110%) scale(0.9);
  opacity: 0;
}

.copy-link-text::after {
  content: 'Link copied';
  position: absolute;
  left: 24px;
  top: 0;
  transform: translateY(-110%) scale(0.9);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  white-space: nowrap;
  font-weight: 500;
  pointer-events: none;
  transform-origin: left center;
}

.copy-link-text.copied::after {
  transform: translateY(0) scale(1);
  opacity: 1;
}

@media (max-width: 768px) {
  .read-aloud-player {
    gap: 0.5rem;
  }
}