.ai-narration {
  --ai-narration-border: color-mix(in srgb, currentColor 18%, transparent);
  --ai-narration-surface: color-mix(in srgb, currentColor 3%, transparent);
  --ai-narration-accent: currentColor;
  box-sizing: border-box;
  width: calc(100% - 20px);
  margin: 1.5rem 10px 2rem;
  padding: .55rem 1rem .5rem;
  color: var(--ai-narration-color, #8f959e);
  font: inherit;
  font-weight: 400;
  background: var(--ai-narration-background, var(--ai-narration-surface));
  border: 1px solid var(--ai-narration-border-color, var(--ai-narration-border));
  border-radius: var(--ai-narration-radius, 22px);
}

.ai-narration *,
.ai-narration *::before,
.ai-narration *::after {
  box-sizing: border-box;
}

.ai-narration__controls {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-width: 0;
}

.ai-narration button,
.ai-narration select {
  font: inherit;
}

.ai-narration__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  appearance: none;
}

.ai-narration__play:disabled {
  cursor: wait;
  opacity: .68;
}

.ai-narration__play:focus-visible,
.ai-narration__skip:focus-visible {
  outline: 2px solid var(--ai-narration-accent);
  outline-offset: 3px;
}

.ai-narration__icon {
  width: 1.38rem;
  height: 1.38rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.ai-narration__icon--play {
  width: 1.5rem;
  height: 1.5rem;
}

.ai-narration__icon--pause {
  display: none;
}

.ai-narration.is-playing .ai-narration__icon--play {
  display: none;
}

.ai-narration.is-playing .ai-narration__icon--pause {
  display: block;
}

.ai-narration.is-loading .ai-narration__icon,
.ai-narration.is-buffering .ai-narration__icon {
  display: none;
}

.ai-narration__spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.35;
	stroke-linecap: round;
}

.ai-narration.is-loading .ai-narration__spinner,
.ai-narration.is-buffering .ai-narration__spinner {
	display: block;
}

.ai-narration__timeline {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.ai-narration__play,
.ai-narration__timeline {
  transition: opacity 180ms ease-out;
}

.ai-narration.is-completion-resetting .ai-narration__play,
.ai-narration.is-completion-resetting .ai-narration__timeline {
  opacity: 0;
  transition-timing-function: ease-in;
}

.ai-narration__status {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.4rem;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: .96rem;
  font-weight: 400;
  line-height: 1.4rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-narration__title {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-narration__timeline.is-idle .ai-narration__title {
  display: flex;
  align-items: center;
  flex: 0 0 3rem;
  width: 3rem;
  min-height: 2.35rem;
  line-height: 1;
}

.ai-narration__idle-meta {
  display: none;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.35rem;
  color: inherit;
}

.ai-narration.has-idle-duration .ai-narration__timeline.is-idle:not(.has-status) .ai-narration__idle-meta {
  display: flex;
}

.ai-narration.has-idle-duration .ai-narration__timeline.is-idle:not(.has-status) .ai-narration__title {
  flex: 0 0 3rem;
  width: 3rem;
}

.ai-narration.has-idle-duration .ai-narration__timeline.is-idle:not(.has-status),
.ai-narration.is-ready .ai-narration__timeline:not(.has-status) {
  flex: 0 0 auto;
}

.ai-narration__idle-duration {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 3rem;
  min-height: 2.35rem;
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ai-narration__timeline.has-status .ai-narration__status {
  display: block;
}

.ai-narration__transport {
  display: none;
  align-items: center;
  gap: 0;
  min-width: 0;
  transform: translateX(-1ch);
}

.ai-narration.is-ready .ai-narration__timeline:not(.has-status) .ai-narration__transport {
  display: flex;
}

.ai-narration__skip-group {
  display: grid;
  grid-template-columns: 2.55rem 1px 2.55rem;
  column-gap: .22rem;
  align-items: center;
  justify-content: center;
  justify-items: center;
  min-height: 2.35rem;
  margin-left: .3rem;
  transform: translateX(-8px);
}

.ai-narration__skip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .14rem;
  width: 2.55rem;
  min-width: 2.55rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 100ms ease-out;
  appearance: none;
}

.ai-narration__skip:disabled {
  cursor: default;
  opacity: .45;
}

.ai-narration__skip-icon {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  align-self: center;
  overflow: visible;
  fill: currentColor;
  stroke: none;
}

.ai-narration__skip-divider {
  flex: 0 0 1px;
  width: 1px;
  height: .92rem;
  margin: 0;
  background: var(--ai-narration-border-color, var(--ai-narration-border));
  opacity: 1;
}

.ai-narration__skip--forward .ai-narration__skip-icon {
  transform: scaleX(-1);
}

.ai-narration__time {
  flex: 0 0 3rem;
  width: 3rem;
  min-width: 0;
  margin-left: 0;
  overflow: visible;
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.ai-narration__idle-divider,
.ai-narration__transport-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 1.55rem;
  background: var(--ai-narration-border-color, var(--ai-narration-border));
  opacity: 1;
}

.ai-narration__idle-divider {
  margin: 0 .45rem 0 .35rem;
}

.ai-narration__transport-divider {
  margin: 0 .35rem 0 calc(.35rem + 1ch);
}

/*
 * Elementor kits and themes commonly restyle bare buttons after this
 * stylesheet loads. Keep the play control visually icon-only in every
 * pointer state while retaining its full, accessible hit area.
 */
body .ai-narration button.ai-narration__play,
body .ai-narration button.ai-narration__play:hover,
body .ai-narration button.ai-narration__play:focus,
body .ai-narration button.ai-narration__play:active {
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  text-decoration: none !important;
  transform: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

body .ai-narration button.ai-narration__play:focus-visible {
  outline: 2px solid var(--ai-narration-accent) !important;
  outline-offset: 3px !important;
}

body .ai-narration button.ai-narration__play::before,
body .ai-narration button.ai-narration__play::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

body .ai-narration button.ai-narration__skip,
body .ai-narration button.ai-narration__skip:hover,
body .ai-narration button.ai-narration__skip:focus,
body .ai-narration button.ai-narration__skip:active {
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

body .ai-narration button.ai-narration__skip:focus-visible {
  outline: 2px solid var(--ai-narration-accent) !important;
  outline-offset: 1px !important;
}

body .ai-narration button.ai-narration__skip::before,
body .ai-narration button.ai-narration__skip::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

body .ai-narration button.ai-narration__skip:active,
body .ai-narration button.ai-narration__skip.is-pressed {
	color: #c2c7ce !important;
}

.ai-narration__disclosure {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 30rem;
  min-height: 2.35rem;
  overflow: hidden;
  color: inherit;
  font-size: .96rem;
  font-weight: 400;
  line-height: 1;
  margin-left: auto;
  margin-right: .95rem;
  opacity: 1;
  text-align: right;
  text-overflow: ellipsis;
  transition: opacity 180ms ease;
  white-space: nowrap;
}

.ai-narration__disclosure.is-changing {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ai-narration__disclosure {
    transition: none;
  }

  .ai-narration__play,
  .ai-narration__timeline {
    transition: none;
  }
}

.ai-narration.is-error .ai-narration__status {
  color: #a12622;
  font-weight: 600;
}

.ai-narration .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ai-narration__native-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 700px) {
  .ai-narration {
    padding: .5rem .8rem .45rem;
  }

  .ai-narration__controls {
    gap: .45rem;
  }
}

@media (max-width: 460px) {
  .ai-narration__play {
    width: 2.65rem;
    min-width: 2.65rem;
    height: 2.65rem;
    min-height: 2.65rem;
  }

  .ai-narration__controls {
    gap: .35rem;
  }

  .ai-narration__title,
  .ai-narration__idle-duration,
  .ai-narration__status {
    font-size: .88rem;
  }

  .ai-narration__transport {
    gap: 0;
  }

  .ai-narration__skip-group {
    grid-template-columns: 2.3rem 1px 2.3rem;
    column-gap: .16rem;
    min-height: 2.3rem;
    margin-left: .18rem;
    transform: translateX(-4px);
  }

  .ai-narration__skip {
    gap: .1rem;
    width: 2.3rem;
    min-width: 2.3rem;
    height: 2.3rem;
  }

  .ai-narration__skip-icon {
    width: 1.1rem;
    height: 1.1rem;
  }

  .ai-narration__skip-divider {
    height: .82rem;
    margin: 0;
  }

  .ai-narration__time {
    flex-basis: 2.75rem;
    width: 2.75rem;
    min-width: 0;
    margin-left: 0;
    font-size: .88rem;
  }

  .ai-narration__idle-duration {
    min-width: 2.75rem;
    margin-left: 0;
    font-size: .88rem;
  }

  .ai-narration__idle-divider {
    height: 1.35rem;
    margin: 0 .3rem 0 .18rem;
  }

  .ai-narration__timeline.is-idle .ai-narration__title {
    flex-basis: 2.75rem;
    width: 2.75rem;
  }

  .ai-narration.has-idle-duration .ai-narration__timeline.is-idle:not(.has-status) .ai-narration__title {
    flex-basis: 2.75rem;
    width: 2.75rem;
  }

  .ai-narration__transport-divider {
    height: 1.35rem;
    margin: 0 .18rem 0 calc(.18rem + 1ch);
  }

  .ai-narration__disclosure {
    font-size: .88rem;
    margin-right: .9rem;
  }

  /* WebKit uses different native line metrics on iOS.
   * Give every visible item the same vertical box instead of relying on
   * baseline alignment, which keeps idle and playing states optically level. */
  .ai-narration.is-ios .ai-narration__controls,
  .ai-narration.is-ios .ai-narration__timeline {
    min-height: 2.65rem;
  }

  .ai-narration.is-ios .ai-narration__timeline.is-idle .ai-narration__title,
  .ai-narration.is-ios .ai-narration__timeline.has-status .ai-narration__status,
  .ai-narration.is-ios .ai-narration__disclosure {
    display: flex;
    align-items: center;
    height: 2.65rem;
    line-height: 1;
  }

  .ai-narration.is-ios .ai-narration__disclosure {
    justify-content: flex-end;
  }

  .ai-narration.is-ios .ai-narration__idle-meta {
    height: 2.65rem;
  }

  /* Preserve the established iOS correction for the active time display. */
  .ai-narration.is-ios.is-ready.has-estimated-time .ai-narration__duration {
    transform: translateY(-1px);
  }
}