/* The text reader of the Nội dung tabs (frontend/panel/content/reader/).
   Sizes and colours are the values content-reading.md reads from the
   reference (cited per block); the rules are this port's own. */

/* The text reader (read#72–#123; md:L1560–2010; ix:L116272–116950, L126724–127448) ---- */

.rd {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rd-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 48px;
  padding: 0 8px;
  border-bottom: 1px solid var(--bg);
  background: var(--surface);
}

.rd-back {
  display: inline-flex;
  flex-shrink: 0;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--wovia-blue) 60%, transparent);
  cursor: pointer;
}

.rd-back:hover {
  background: color-mix(in srgb, var(--wovia-blue) 8%, transparent);
  color: var(--wovia-blue);
}

.rd-playlist-avatar {
  width: 34px;
  height: 34px;
  margin: 0 0 0 16px;
  border-radius: 50%;
}

.rd-doc-nav {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  min-width: 36px;
  padding: 3px 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--accent-soft);
  cursor: pointer;
}

.rd-doc-nav:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
}

.rd-doc-nav:disabled {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  cursor: default;
}

.rd-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: 400 15px/1.5 var(--font);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.rd-title:hover {
  background: var(--hover);
}

.rd-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-title-icon {
  opacity: 0.7;
}

.rd-frame {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

.rd-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  border-bottom: 3px solid color-mix(in srgb, var(--ink) 6.7%, transparent);
}

.rd-head-side {
  display: flex;
  flex: 1 1 0;
}

.rd-head-side.is-end {
  justify-content: flex-end;
}

/* The search's marks lie over the list's right edge (panel.css .ss-marks). */
.rd-marks {
  display: contents;
}

.rd-pages {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.rd-page-arrow {
  display: inline-flex;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-strong);
  cursor: pointer;
}

.rd-page-arrow:hover:not(:disabled) {
  background: var(--hover);
}

.rd-page-arrow:disabled {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  cursor: default;
}

.rd-page-field {
  width: 42px;
  margin: 0 2px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 70%, transparent);
  background: transparent;
  color: var(--text-strong);
  font: 400 16px/1.4 var(--font);
  text-align: center;
}

.rd-page-field:focus {
  border-bottom: 2px solid var(--accent-soft);
  outline: none;
}

.rd-page-total {
  padding: 0 1px 0 4px;
  opacity: 0.4;
  white-space: nowrap;
}

.rd-list-wrap {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
}

.rd-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.rd-space-top {
  height: 80px;
}

.rd-space-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 160px;
  padding-top: 16px;
}

/* 90 px on each side on the reader's big screen only; a recording's rows fill their list (keyboard.js
   rowHasSideRoom; ix:L116768). */
.rd-block.has-side-room {
  padding: 0 90px;
}

.rd-block-inner {
  max-width: 715px;
  margin: 0 auto;
}

.rd-block:has(.layout-show_translations_horiz) .rd-block-inner {
  max-width: 1100px;
}

.rd-row {
  position: relative;
  margin: 4px 0 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  transition: background-color 0.3s;
  cursor: pointer;
}

.rd-row.is-current {
  background: linear-gradient(var(--selected), var(--selected)), var(--surface);
}

.rd-row.round-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.rd-row.round-bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.rd-sentence {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.rd-play {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  color: var(--text-strong);
  opacity: 0;
  pointer-events: none;
}

.rd-row:hover .rd-play,
.rd-play.is-visible {
  opacity: 1;
}

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

.rd-cell {
  width: 100%;
  padding: 4px 0;
}

.layout-show_translations_horiz .rd-cell {
  width: 50%;
  padding-right: 16px;
}

.rd-text {
  width: 100%;
  color: var(--text-strong);
  line-height: 29px;
}

.rd-text.is-heading {
  font-size: 1.2em;
  line-height: normal;
}

.rd-trans-side {
  display: flex;
  align-self: stretch;
  align-items: center;
  width: 50%;
  padding: 4px 0 4px 22px;
  background: color-mix(in srgb, var(--bg) 46.7%, transparent);
  font-size: 16px;
  line-height: 27px;
}

.rd-trans-under {
  padding: 4px 43px 4px 48px;
  background: color-mix(in srgb, var(--bg) 46.7%, transparent);
  font-size: 15px;
  line-height: 26px;
}

.rd-trans-text {
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.rd-trans-loading {
  color: var(--text-muted);
}

.rd-side {
  display: flex;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
}

.layout-show_translations_horiz .rd-side {
  background: color-mix(in srgb, var(--bg) 46.7%, transparent);
}

.rd-image-wrap {
  text-align: center;
}

.rd-image {
  width: auto;
  max-width: 240px;
  max-height: 180px;
  margin: 6px 0 0;
  border: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 6px;
  object-fit: contain;
  object-position: left top;
  cursor: zoom-in;
}

.rd-image-viewer {
  max-width: 90vw;
  max-height: 90vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.rd-image-viewer img {
  max-width: 90vw;
  max-height: 90vh;
}

.rd-image-viewer::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.rd-divider {
  margin: 8px 0 8px 36px;
  border: 0;
}

.rd-audio-badge {
  position: absolute;
  top: 65px;
  left: 25px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--wovia-blue-deep);
  color: color-mix(in srgb, var(--on-accent) 66.7%, transparent);
  font-size: 15px;
}

.rd-audio-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.rd-autoscroll {
  position: absolute;
  top: 45px;
  right: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  /* The page's ground cut out of the blue, as catalogue.css .ct-top. */
  color: var(--bg);
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.rd-autoscroll:hover,
.rd-big-play:hover {
  transform: scale(1.05);
}

.rd-big-play {
  position: absolute;
  right: 27px;
  bottom: 45px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background: var(--wovia-blue);
  color: var(--on-accent);
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.rd-big-play.is-armed {
  background: #388e3c;
}

.rd-big-play.is-held {
  background: #d32f2f;
}

.rd-ap-on {
  color: var(--accent-soft);
}

/* More info (read#76; md:L1085–1540) */
.rd-info {
  position: fixed;
  z-index: 1500;
  width: 90vw;
  max-width: 500px;
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 4px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
}

.rd-info-picture {
  width: 100%;
  height: 160px;
  object-fit: cover;
  vertical-align: top;
}

.rd-info-body {
  position: relative;
  padding: 16px 40px 16px 16px;
}

.rd-info-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.rd-info-close:hover {
  background: var(--hover);
}

.rd-info-title-row,
.rd-info-author-row,
.rd-info-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rd-info-title-row {
  margin-bottom: 12px;
}

.rd-info-icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.rd-info-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

.rd-info-translated {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 8px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 14px;
  font-style: italic;
}

.rd-info-author-row {
  align-items: center;
  margin-bottom: 4px;
}

.rd-info-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 50%;
}

.rd-info-avatar.is-person {
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.rd-info-author {
  font-size: 14px;
  font-weight: 700;
}

/* A podcast's feed title opens the feed's list: the theme's primary white, underlined under the pointer (read#76; md:L1345–1353). */
.rd-info-author.is-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-strong);
  font-family: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.rd-info-author.is-link:hover {
  text-decoration: underline;
}

.rd-info-meta {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 12px;
}

/* A video's "Watch on youtube.com" (md:L1441–1470): a small outlined button 12 px under the rest, its border red at
   40 %, the YouTube picture red, a faint red under the pointer. */
.rd-info-youtube {
  height: 30px;
  margin-top: 12px;
  padding: 0 10px;
  border-color: rgba(255, 0, 0, 0.4);
  font-size: 13px;
}

.rd-info-youtube:hover {
  border-color: #ff0000;
  background: rgba(255, 0, 0, 0.08);
}

.rd-info-youtube-icon {
  color: #ff0000;
}

/* The AI summary (read#77; md:L983–1083): a caption with a 14 px spinner while it is written, then an overline with the
   sparkle icon and "Show in <language>" at the right, the synopsis, and the plot behind a small text button. */
.rd-info-summary {
  margin-top: 12px;
}

.rd-info-summary.is-loading,
.rd-info-summary.is-failed {
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font-size: 12px;
}

.rd-info-summary.is-failed {
  align-items: flex-start;
  line-height: 1.4;
}

.spinner.rd-info-summary-spinner {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--ink) 15%, transparent);
  border-top-color: currentColor;
}

.rd-info-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.rd-info-summary-icon {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.rd-info-summary-about {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rd-info-summary-button {
  min-width: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.75;
  cursor: pointer;
}

.rd-info-summary-button:hover {
  background: var(--hover);
}

.rd-info-summary-button.is-language {
  margin-left: auto;
}

.rd-info-summary-button.is-plot {
  padding: 0 4px;
}

.rd-info-summary-text,
.rd-info-summary-plot {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.rd-info-summary-more {
  margin-top: 6px;
}

.rd-info-summary-plot {
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.rd-info-summary-plot[hidden],
.rd-info-summary-more[hidden] {
  display: none;
}

.rd-info-summary-note {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font-size: 12px;
}

.rd-info-desc {
  padding: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.rd-info-desc p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.rd-info-desc-row.is-translation {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.rd-info-desc-row.is-translation p {
  font-style: italic;
}

@media (max-width: 900px) {
  .rd-block.has-side-room {
    padding: 0;
  }

  .rd-play {
    flex-basis: 33px;
  }

  .rd-trans-under {
    padding-left: 10px;
  }
}

/* Stars over a long pause between timed lines, in the room the pause takes (read#131; ix:L116729–116750). */
.rd-pause {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: color-mix(in srgb, var(--ink) 33.3%, transparent);
  font-size: 15px;
  letter-spacing: 6px;
  text-indent: 6px;
  pointer-events: none;
  user-select: none;
}

.rd-pause.is-top {
  top: 0;
}

.rd-pause.is-bottom {
  bottom: 0;
}