/*
 * Subtitle Studio — layout for the caption editor only.
 * Everything else comes from tool-theme.css and media-tools.css; these rules
 * cover the media stage, the segment rows and the two overlays that have no
 * shared equivalent. All selectors are prefixed .sub- so nothing leaks.
 */

.sub-side-inner {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 102px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- media stage ---------- */

.sub-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 17px;
  background: #17171a;
}

.sub-video {
  display: block;
  width: 100%;
  max-height: min(52vh, 460px);
  background: #17171a;
}

.sub-stage.is-audio {
  padding: 22px 20px 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--media-accent) 16%, #f6f3ec), #f4f0e7);
}

.sub-audio-shell {
  display: grid;
  width: 100%;
  gap: 13px;
  justify-items: center;
}

.sub-audio-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  color: var(--media-accent-dark);
  background: color-mix(in srgb, var(--media-soft) 80%, white);
}

.sub-audio-icon svg { width: 26px; height: 26px; }
.sub-audio { width: min(100%, 520px); }

.sub-overlay {
  position: absolute;
  bottom: 54px;
  left: 50%;
  max-width: min(86%, 620px);
  padding: 7px 13px;
  border-radius: 9px;
  color: #fff;
  background: rgba(14, 14, 16, .78);
  font-size: clamp(.82rem, 1.9vw, 1.02rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  text-wrap: balance;
  transform: translateX(-50%);
  white-space: pre-line;
  pointer-events: none;
}

.sub-stage.is-audio .sub-overlay {
  position: static;
  margin-top: 14px;
  color: var(--media-ink);
  background: rgba(255, 253, 248, .9);
  text-shadow: none;
  transform: none;
}

/* ---------- file bar and track header ---------- */

.sub-filebar,
.sub-trackhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sub-filebar { margin-top: 13px; }
.sub-fileinfo { min-width: 0; }

.sub-trackhead {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--media-line);
}

.sub-trackhead h2 { margin: 0; font-size: .95rem; letter-spacing: -.025em; }

.sub-hint {
  margin: 8px 0 0;
  color: #8a857c;
  font-size: .68rem;
  line-height: 1.5;
}

.sub-warnbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid var(--media-line);
  border-radius: 11px;
  background: rgba(248, 245, 238, .7);
}

.sub-warnbar-label {
  color: #6d6960;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------- segment list ---------- */

.sub-list {
  position: relative; /* rows are scrolled to by offsetTop, so be their offset parent */
  display: grid;
  gap: 8px;
  max-height: min(66vh, 720px);
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.sub-empty {
  margin: 12px 0 0;
  padding: 34px 12px;
  border: 1px dashed var(--media-line);
  border-radius: 12px;
  color: #89847a;
  font-size: .72rem;
  text-align: center;
}

.sub-seg {
  padding: 10px 11px;
  border: 1px solid var(--media-line);
  border-radius: 13px;
  background: #fffdf8;
  cursor: pointer;
}

/* A finger leaves :hover behind on the row it last tapped. */
@media (hover: hover) {
  .sub-seg:hover { border-color: #bbb3a7; }
}

.sub-seg.is-active {
  border-color: var(--media-accent);
  background: color-mix(in srgb, var(--media-soft) 34%, #fffdf8);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--media-accent) 11%, transparent);
}

.sub-seg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sub-index {
  min-width: 26px;
  color: #98938a;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .63rem;
}

.sub-time {
  width: 92px;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid var(--media-line);
  border-radius: 8px;
  outline: 0;
  background: #fffdf8;
  cursor: text;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .66rem;
  text-align: center;
}

.sub-arrow { color: #a9a49a; font-size: .7rem; }

.sub-dur {
  color: #8f8a81;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .6rem;
}

.sub-seg-actions {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

.sub-mini {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #6f6b62;
  background: transparent;
  cursor: pointer;
  font-size: .64rem;
  font-weight: 700;
}

@media (hover: hover) {
  .sub-mini:hover:not(:disabled) {
    border-color: var(--media-line);
    color: var(--media-accent-dark);
    background: #fff;
  }

  .sub-mini.is-danger:hover:not(:disabled) { color: #b73f31; }
}
.sub-mini:disabled { opacity: .35; cursor: not-allowed; }

.sub-text {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid var(--media-line);
  border-radius: 9px;
  outline: 0;
  overflow: hidden;
  background: #fffdf8;
  cursor: text;
  font-family: inherit;
  font-size: .79rem;
  line-height: 1.5;
  resize: none;
}

.sub-warns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.sub-warn {
  padding: 3px 7px;
  border-radius: 6px;
  color: #7d6a44;
  background: #f2e9d8;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .57rem;
  letter-spacing: .01em;
}

.sub-warn.is-hot { color: #9a4433; background: #f9e2db; }

/* ---------- sidebar tool rows ---------- */

.sub-tool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px auto;
  gap: 7px;
  align-items: center;
  margin-top: 12px;
}

.sub-tool-label { color: #625f58; font-size: .68rem; font-weight: 700; }
.sub-tool-input { min-height: 38px; font-family: "DM Mono", ui-monospace, monospace; font-size: .7rem; text-align: right; }
.sub-tool-btn { min-height: 38px; padding: 0 11px; font-size: .68rem; }

.sub-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

/* ---------- confirm modal and toast ---------- */

.sub-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(24, 22, 18, .42);
  backdrop-filter: blur(4px);
}

.sub-modal-card {
  width: min(400px, 100%);
  padding: 22px;
  border: 1px solid var(--media-line);
  border-radius: 18px;
  background: var(--surface, #fffdf8);
  box-shadow: 0 30px 70px rgba(35, 30, 22, .28);
}

.sub-modal-card h2 { margin: 0 0 8px; font-size: 1.02rem; letter-spacing: -.025em; }
.sub-modal-card p { margin: 0; color: var(--media-muted); font-size: .77rem; line-height: 1.55; }

.sub-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.sub-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: 70;
  padding: 10px 16px;
  border-radius: 11px;
  color: #fdfcf9;
  background: rgba(25, 25, 24, .93);
  box-shadow: 0 14px 34px rgba(25, 25, 24, .26);
  font-size: .73rem;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.sub-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 840px) {
  .sub-side-inner { position: static; max-height: none; overflow: visible; }

  /* One column puts the captions before the sidebar, and a list left at full
     length pushed Export a few hundred rows down and scrolled the player away
     while a caption was edited. So the player is pinned, the list fills the
     screen under it and scrolls itself (which is also what following the
     playhead scrolls), and scrolling on past its end carries on to the
     sidebar, where Export now comes before the tools. */
  .media-panel { overflow: visible; overflow: clip; } /* hidden would make the panel the pinned player's scroller */
  .sub-stage { position: sticky; top: 0; z-index: 4; }
  .sub-video { max-height: 34vh; max-height: 34svh; }
  .sub-list {
    max-height: calc(100vh - var(--sub-stage-h, 0px) - 12px);
    max-height: calc(100svh - var(--sub-stage-h, 0px) - 12px);
    overscroll-behavior: auto;
  }
  .sub-side-inner { display: flex; flex-direction: column; }
  .sub-later { order: 1; }

  /* The model and Transcribe, moved here from the sidebar (subtitles.js). */
  .sub-phone-slot { margin: 16px 0 20px; }
}

.sub-phone-slot:empty { display: none; }

@media (max-width: 520px) {
  /* nav.js puts its 42px home mark at 8px. Pinned at the very top, the player
     ran under it, and a tap on the corner of the picture left the page. So it
     pins below the mark, and a band of the panel's colour, painted with a
     shadow because the stage clips its own children, hides what scrolls past
     above it. */
  .sub-stage { top: 58px; box-shadow: 0 -52px 0 19px #fffdf8; }
  .sub-list {
    max-height: calc(100vh - var(--sub-stage-h, 0px) - 70px);
    max-height: calc(100svh - var(--sub-stage-h, 0px) - 70px);
  }
}

@media (pointer: coarse) {
  .sub-mini { min-width: 36px; height: 36px; }
  .sub-time { min-height: 36px; }
}

@media (max-width: 540px) {
  .sub-filebar, .sub-trackhead { align-items: stretch; flex-direction: column; }
  .sub-trackhead .toolbar-actions .btn { flex: 1; }
  .sub-time { width: 84px; }
  .sub-seg-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
  .sub-tool-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sub-tool-label { grid-column: 1 / -1; }
}