/* Approved amber active-line TTS highlight (#2760) */

.chat-message.received.ss-reading-active {
  background-color: transparent !important;
  background-image: none !important;
}

.chat-bubble.chat-tts-block-playing {
  background-color: transparent !important;
  background-image: none !important;
}

/* The highlight must never change the text's own width. The old
   `padding: 2px 8px` did, because `max-width: 100%` + border-box sizing made
   those 16px come OUT of the text: a line that fitted at rest re-wrapped the
   moment it was read (a one-line answer became two lines under the amber, and
   the bubble jumped a few px wider). Same lesson as .ss-sentence in the
   advanced reader (#ryk-fix).
   The look is unchanged: the left pad that carries the accent bar stays, but a
   matching negative margin plus a max-width that grants those 8px back keeps
   the text at its resting width, and the pill's remaining breathing room is a
   box-shadow spread, which is painted outside layout. */
.chat-message.received .chat-tts-active-block {
  display: inline-block !important;
  width: fit-content !important;
  box-sizing: border-box !important;
  background-color: rgba(232, 168, 110, 0.18) !important;
  background-image: none !important;
  border-radius: 5px !important;
  transition:
    background-color 140ms ease,
    box-shadow       140ms ease !important;
}

/* Everything that is not a list row (paragraphs, headings, quotes, and the
   own-line span inside a nested list item). The 8px left pad hosts the 3px
   accent bar; -8px margin + `calc(100% + 8px)` hand that space back, so the
   text keeps exactly the width it had at rest. */
.chat-message.received .chat-tts-active-block:not(li) {
  max-width: calc(100% + 8px) !important;
  padding: 0 0 0 8px !important;
  margin-inline-start: -8px !important;
  box-shadow:
    0 0 0 4px rgba(232, 168, 110, 0.18),
    inset 3px 0 0 rgba(212, 130, 60, 0.55) !important;
}

/* A list row keeps ITS OWN padding in both states — it already carries a left
   pad wide enough for the bar. Overriding that padding (the old 2px 8px) or
   zeroing it moved the row's text sideways the moment it was highlighted, so
   this rule touches nothing but the paint. No spread ring here: the row is
   full-width and the pad already gives the band its shape. */
.chat-message.received li.chat-tts-active-block {
  display: list-item !important;
  width: auto !important;
  max-width: 100% !important;
  margin-inline-start: 0 !important;
  border-radius: 5px !important;
  box-shadow: inset 3px 0 0 rgba(212, 130, 60, 0.55) !important;
}

/* The own-line span inside a list item that owns a nested list (chat-tts.js
   _wrapOwnLine). Decoration is inherited from the rule above; this only keeps
   it INLINE so a long parent line can still break across lines and get the pill
   on each fragment — an inline-block could not. */
.chat-message.received .chat-tts-line.chat-tts-active-block {
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: reduce) {
  .chat-message.received .chat-tts-active-block {
    transition: none !important;
  }
}