/* Dedicated subtitle workspace. The style is scoped to V4 WordSub only. */
/* A transformed/forwards-filled animated view contains position:fixed children.
   Keep this view untransformed so its mobile action bar anchors to the viewport. */
#view-wordsub { --wordsub-border: rgba(56, 105, 77, .18); animation:none; transform:none; }
#view-wordsub .view-head > .btn-quiet { flex:0 0 auto; align-self:flex-start; }
#view-wordsub .mobile-section-title { display:block; margin:26px 0 12px; font-size:17px; line-height:1.5; color:var(--text); }
#view-wordsub .wordsub-source-note { display:flex; align-items:flex-start; gap:15px; margin:0 0 24px; padding:15px 18px; border:1px solid var(--signal-mid); border-radius:14px; background:var(--signal-dim, #e9f7ed); color:var(--text-soft); line-height:1.65; }
#view-wordsub .wordsub-source-note b { flex-shrink:0; color:var(--signal); }
#view-wordsub #wsDrop { min-height:168px; width:100%; }
#view-wordsub #wsDrop:focus-visible { outline:3px solid var(--signal); outline-offset:4px; }
#view-wordsub #wsDrop:disabled { cursor:wait; }
#view-wordsub .wordsub-selection { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:10px 0 22px; }
#view-wordsub .wordsub-file { margin:0; color:var(--muted); overflow-wrap:anywhere; line-height:1.7; }
#view-wordsub .wordsub-selection button { flex-shrink:0; }
#view-wordsub .wordsub-burn-choice { display:flex; align-items:center; gap:14px; padding:18px; margin-bottom:16px; border:1px solid var(--wordsub-border); border-radius:14px; cursor:pointer; background:var(--panel); }
#view-wordsub .wordsub-burn-choice:has(input:checked:not(:disabled)) { border-color:var(--signal); background:var(--signal-dim, #e9f7ed); }
#view-wordsub .wordsub-burn-choice:has(input:disabled) { cursor:default; }
#view-wordsub .wordsub-burn-choice small { display:block; color:var(--muted); font-size:12px; line-height:1.65; margin-top:4px; }
#view-wordsub .wordsub-burn-choice input, #view-wordsub .wordsub-outputs input { width:20px; height:20px; margin:0; accent-color:var(--signal); flex-shrink:0; }
#view-wordsub .wordsub-outputs { display:flex; flex-wrap:wrap; gap:8px 26px; margin:0 0 20px; padding:8px 16px 14px; border:1px solid var(--wordsub-border); border-radius:14px; }
#view-wordsub .wordsub-outputs legend, #view-wordsub .wordsub-style-options legend { padding:0 5px; font-size:13px; color:var(--muted); }
#view-wordsub .wordsub-outputs label { display:inline-flex; align-items:center; min-height:44px; gap:9px; cursor:pointer; font-size:14px; }
#view-wordsub .wordsub-outputs label:has(input:disabled) { opacity:.55; cursor:default; }
#view-wordsub .wordsub-style-options { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:18px; margin:0 0 22px; padding:14px 18px 18px; border:1px solid var(--wordsub-border); border-radius:14px; background:var(--panel); }
#view-wordsub .wordsub-style-options > label { display:flex; flex-direction:column; gap:8px; color:var(--text-soft); font-size:13px; min-width:0; }
#view-wordsub .wordsub-style-options select { width:100%; min-height:44px; border-radius:9px; border:1px solid var(--line-hi); padding:9px 11px; font:inherit; color:var(--text); background:var(--panel); }
#view-wordsub .wordsub-style-options.is-inactive { opacity:.62; }
#view-wordsub .wordsub-position { display:grid; grid-template-columns:1fr auto; align-content:start; }
#view-wordsub .wordsub-position output { color:var(--signal); font-size:12px; }
#view-wordsub .wordsub-position input { width:100%; min-height:44px; accent-color:var(--signal); }
#view-wordsub .wordsub-progress { margin:16px 0; padding:12px 14px; color:var(--signal); border:1px solid var(--signal-mid); border-radius:12px; background:var(--signal-dim,#e9f7ed); font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
#view-wordsub .qmsg { max-height:8em; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:9px; line-height:1.8; }
#view-wordsub .qacts { margin-top:13px; gap:8px; display:flex; flex-wrap:wrap; }
#view-wordsub .qacts a { min-height:40px; font-size:12px; }
#view-wordsub .wordsub-primary-download { border-color:var(--signal); color:var(--signal); }
#view-wordsub .wordsub-state { display:inline-block; margin:8px 0 0; padding:4px 10px; border-radius:20px; font-size:12px; background:var(--signal-dim, #e9f7ed); color:var(--signal); }
#view-wordsub .is-error .wordsub-state { color:var(--err); background:rgba(255,107,107,.1); }
#view-wordsub .wordsub-player { width:100%; max-height:440px; display:block; margin:14px 0 8px; border-radius:12px; background:#0e1b15; }
#view-wordsub .wordsub-audio-note, #view-wordsub .wordsub-job-id { color:var(--muted); font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
#view-wordsub .wordsub-job-id { display:block; margin-top:12px; }
#view-wordsub .wordsub-sticky-footer { display:none; }
#view-wordsub .wordsub-sticky-footer[hidden] { display:none !important; }
@media (max-width:680px) {
  #view-wordsub { padding-bottom:105px; }
  #view-wordsub .view-head { gap:8px; }
  #view-wordsub .view-head > .btn-quiet { display:none; }
  #view-wordsub .wordsub-source-note { flex-direction:column; gap:2px; padding:12px 14px; font-size:12px; }
  #view-wordsub .wordsub-selection { align-items:flex-start; gap:10px; }
  #view-wordsub .wordsub-file { font-size:12px; }
  #view-wordsub .wordsub-selection button { padding:8px 10px; font-size:11px; }
  #view-wordsub .wordsub-burn-choice { padding:14px; gap:12px; }
  #view-wordsub .wordsub-burn-choice b { font-size:14px; }
  #view-wordsub .wordsub-outputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 10px; }
  #view-wordsub .wordsub-style-options { grid-template-columns:1fr 1fr; gap:14px 10px; padding:12px 14px; }
  #view-wordsub .wordsub-position { grid-column:1/-1; }
  #view-wordsub .wordsub-style-options select { font-size:16px; }
  #view-wordsub .wordsub-sticky-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; position:fixed; z-index:25; left:0; right:0; bottom:calc(var(--studio-nav-height,72px) + var(--studio-nav-safe,0px)); min-height:74px; padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); border-top:1px solid var(--line-hi); background:var(--panel); box-shadow:0 -5px 20px rgba(20,58,39,.07); }
  #view-wordsub .wordsub-sticky-footer p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0; min-width:0; font-size:11px; color:var(--muted); line-height:1.5; }
  #view-wordsub .wordsub-sticky-footer .go { width:auto; max-width:55vw; min-height:46px; min-width:132px; padding:10px 14px; justify-content:center; font-size:13px; }
  #view-wordsub .wordsub-player { max-height:360px; }
  #view-wordsub .auto-bar { display:none; }
  #view-wordsub .qrow { padding:14px 10px; }
  #view-wordsub .qthumb { width:26px; min-width:26px; height:26px; }
  #view-wordsub .qacts a { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) { #view-wordsub * { scroll-behavior:auto; } }