/* ================= Subtitles, streaming status and version history ================= */

/* Player: language menu and the caption line under audio */
.msub__menu { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.msub__menu select { font: inherit; font-weight: 500; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; background: var(--surface); }
.msub__line { min-height: 1.5em; margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #11111f; color: #fff; font-size: 14px; line-height: 1.4; text-align: center; }
.msub__line:empty { background: transparent; }

/* Editor: subtitles of a video or audio block */
.msub { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.msub summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.msub__list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.msub__item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.msub__source { color: var(--muted); }
.msub__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.msub__label { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }

/* Editor: adaptive streaming status of an uploaded video */
.mstream { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.mstream--busy { background: var(--tint-brand); color: var(--brand-ink); }
.mstream--ready { background: var(--tint-success); color: var(--success-ink); }
.mstream--failed { background: var(--tint-warn); color: var(--warn-ink); }
.mstream__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: mstreamPulse 1.2s ease-in-out infinite; }
@keyframes mstreamPulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mstream__dot { animation: none; } }

/* Editor: History panel */
.mhist { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; width: 420px; max-width: 100vw; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(17, 17, 31, .14); padding: 16px 18px 28px; }
.mhist__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mhist__title { font-size: 17px; font-weight: 700; margin: 0; }
.mhist__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mhist__card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mhist__card--open { background: var(--surface); margin-bottom: 14px; }
.mhist__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.mhist__when { font-weight: 700; color: var(--ink); }
.mhist__who { color: var(--muted); }
.mhist__current { background: var(--tint-success); color: var(--success-ink); }
.mhist__named { background: var(--tint-warn); color: var(--warn-ink); }
.mhist__changes { list-style: none; margin: 0; padding: 0; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.mhist__add { color: var(--success-ink); }
.mhist__del { color: var(--danger, var(--danger-ink)); }
.mhist__chg { color: var(--ink-3); }
.mhist__muted { color: var(--muted); }
.mhist__empty { color: var(--muted); font-size: 13px; padding: 20px 0; }
.mhist__back { margin-bottom: 10px; }
.mhist__section-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.mhist__name { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 12.5px; font-weight: 600; }
.mhist__name-row { display: flex; gap: 6px; }
.mhist__name-row .fld__input { flex: 1; min-width: 0; }
.mhist__preview { border-top: 1px solid var(--line); padding-top: 10px; }
.mhist__readonly { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mhist__ptitle { font-size: 16px; margin: 0 0 4px; }
.mhist__pdesc { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; white-space: pre-line; }
.mhist__psec { font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
.mhist__pch { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; font-size: 13px; }
.mhist__pch summary { cursor: pointer; font-weight: 600; }
.mhist__rte { font-size: 13px; margin: 6px 0; overflow-wrap: anywhere; }
.mhist__rte img { max-width: 100%; }
.mhist__pblock { font-size: 12.5px; color: var(--ink-3); margin: 6px 0; overflow-wrap: anywhere; }
.mhist__pq { font-size: 13px; margin: 10px 0; }
.mhist__pq ul { margin: 4px 0 0; padding-left: 18px; }
.mhist__ok { color: var(--success-ink); font-weight: 600; }

@media (max-width: 640px) {
    .mhist { width: 100vw; border-left: none; }
}