/* AI Video Studio – scoped styles (work in wp-admin and inside any theme) */
.aivs {
  --aivs-ink: #1d2327;
  --aivs-muted: #646970;
  --aivs-line: #dcdcde;
  --aivs-paper: #ffffff;
  --aivs-canvas: #f6f7f7;
  --aivs-primary: #2271b1;
  --aivs-primary-ink: #135e96;
  --aivs-mat: #1d2327;
  --aivs-mat-line: #3c434a;
  --aivs-work: #b26200;
  --aivs-wait: #5b3cc4;
  --aivs-done: #00803d;
  --aivs-fail: #b32d2e;
  --aivs-idle: #8c8f94;
  --aivs-radius: 8px;
  color: var(--aivs-ink);
  font-size: 14px;
  line-height: 1.55;
  max-width: 1280px;
}
.aivs *, .aivs *::before, .aivs *::after { box-sizing: border-box; }
.aivs a { color: var(--aivs-primary); }
.aivs :focus-visible { outline: 2px solid var(--aivs-primary); outline-offset: 2px; }
.aivs h1, .aivs h2, .aivs h3 { color: var(--aivs-ink); margin: 0; line-height: 1.3; }
.aivs--front { margin: 0 auto; }
.aivs-loading, .aivs-muted { color: var(--aivs-muted); }
.aivs-fine { color: var(--aivs-muted); font-size: 12.5px; margin: 8px 0 0; }

/* header */
.aivs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--aivs-line); margin: 8px 0 20px; }
.aivs-brand { font-size: 22px; font-weight: 600; padding-bottom: 12px; }
.aivs-tabs { display: flex; gap: 4px; }
.aivs-tabs a { display: block; padding: 10px 14px; text-decoration: none; color: var(--aivs-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; }
.aivs-tabs a:hover { color: var(--aivs-ink); }
.aivs-tabs a.is-current { color: var(--aivs-ink); border-bottom-color: var(--aivs-primary); }

.aivs-banner { background: #f0f6fc; border: 1px solid #c5d9ed; border-radius: var(--aivs-radius); padding: 10px 14px; margin: 0 0 16px; }
.aivs-banner--warn { background: #fcf9e8; border-color: #f0d898; }
.aivs-error { background: #fcf0f1; border: 1px solid #f1c0c2; border-radius: var(--aivs-radius); padding: 12px 14px; margin: 12px 0; color: #8a1f1f; }
.aivs-error p { margin: 6px 0 10px; }
.aivs-link { margin-left: 12px; }

/* buttons */
.aivs .aivs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border-radius: 6px; border: 1px solid #8c8f94; background: var(--aivs-paper); color: var(--aivs-ink); font: inherit; font-weight: 500;
  cursor: pointer; text-decoration: none; line-height: 1.2; }
.aivs .aivs-btn:hover { border-color: var(--aivs-ink); }
.aivs .aivs-btn[disabled] { opacity: .5; cursor: not-allowed; }
.aivs .aivs-btn--primary { background: var(--aivs-primary); border-color: var(--aivs-primary); color: #fff; }
.aivs .aivs-btn--primary:hover { background: var(--aivs-primary-ink); border-color: var(--aivs-primary-ink); color: #fff; }
.aivs .aivs-btn--quiet { border-color: transparent; background: transparent; color: var(--aivs-muted); }
.aivs .aivs-btn--quiet:hover { color: var(--aivs-fail); border-color: transparent; }
.aivs .aivs-btn--small { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.aivs .aivs-btn--wide { width: 100%; min-height: 44px; font-size: 15px; }
.aivs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aivs-actions--stack { flex-direction: column; align-items: stretch; }

/* form */
.aivs-new { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.aivs-form { min-width: 0; }
.aivs-field { margin: 0 0 22px; border: 0; padding: 0; min-width: 0; }
.aivs-label { display: block; font-weight: 600; margin-bottom: 8px; padding: 0; }
.aivs textarea, .aivs .aivs-input, .aivs select { width: 100%; font: inherit; color: var(--aivs-ink); background: var(--aivs-paper);
  border: 1px solid #8c8f94; border-radius: 6px; padding: 8px 10px; max-width: none; box-shadow: none; }
.aivs select { min-height: 38px; }
.aivs #aivs-idea { font-size: 16px; line-height: 1.6; padding: 12px 14px; resize: vertical; min-height: 130px; }
.aivs textarea:focus, .aivs .aivs-input:focus, .aivs select:focus { border-color: var(--aivs-primary); box-shadow: 0 0 0 1px var(--aivs-primary); outline: none; }
.aivs-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.aivs .aivs-chip { border: 1px solid var(--aivs-line); background: var(--aivs-paper); border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--aivs-ink); }
.aivs .aivs-chip:hover { border-color: var(--aivs-primary); color: var(--aivs-primary); }
.aivs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.aivs-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aivs .aivs-format { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px; border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius);
  background: var(--aivs-paper); font: inherit; color: var(--aivs-ink); cursor: pointer; }
.aivs .aivs-format strong { display: block; font-size: 15px; }
.aivs .aivs-format small { color: var(--aivs-muted); }
.aivs .aivs-format.is-on { border-color: var(--aivs-primary); box-shadow: inset 0 0 0 1px var(--aivs-primary); background: #f5f9fd; }
.aivs-ratio { flex: none; display: block; border: 2px solid currentColor; border-radius: 3px; color: var(--aivs-muted); }
.aivs-ratio--short { width: 22px; height: 38px; }
.aivs-ratio--film { width: 44px; height: 25px; }
.aivs-format.is-on .aivs-ratio { color: var(--aivs-primary); background: rgba(34, 113, 177, .12); }

.aivs-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aivs .aivs-seg button { border: 1px solid var(--aivs-line); background: var(--aivs-paper); color: var(--aivs-ink); border-radius: 6px; padding: 6px 12px; font: inherit; cursor: pointer; }
.aivs .aivs-seg button:hover { border-color: var(--aivs-ink); }
.aivs .aivs-seg button.is-on { background: var(--aivs-ink); border-color: var(--aivs-ink); color: #fff; }

.aivs-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.aivs-checks legend { grid-column: 1 / -1; }
.aivs-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.aivs-check input { margin: 3px 0 0; flex: none; }
.aivs-check strong { display: block; font-weight: 500; }
.aivs-check small { display: block; color: var(--aivs-muted); font-size: 12.5px; line-height: 1.45; }
.aivs-more summary { cursor: pointer; color: var(--aivs-primary); margin-bottom: 12px; }

.aivs-summary { position: sticky; top: 46px; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); padding: 18px; }
.aivs-summary h2 { font-size: 15px; margin-bottom: 10px; }
/* v1.9.10: a long file name (no spaces) used to widen the value column past the card; labels wrapped word by word */
.aivs-summary { min-width: 0; }
.aivs-summary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0 0 6px; }
.aivs-summary dt { color: var(--aivs-muted); white-space: nowrap; }
.aivs-summary dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.aivs-summary .aivs-cost { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aivs-summary .aivs-costbox, .aivs-summary .aivs-costlines { min-width: 0; overflow-wrap: anywhere; }
.aivs-summary .aivs-btn--wide { margin-top: 16px; }

/* status pills */
.aivs-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--aivs-ink); }
.aivs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aivs-idle); flex: none; }
.aivs-tone-work .aivs-dot { background: var(--aivs-work); animation: aivs-pulse 1.4s ease-in-out infinite; }
.aivs-tone-wait .aivs-dot { background: var(--aivs-wait); }
.aivs-tone-done .aivs-dot { background: var(--aivs-done); }
.aivs-tone-fail .aivs-dot { background: var(--aivs-fail); }
.aivs-tone-work { color: var(--aivs-work); }
.aivs-tone-wait { color: var(--aivs-wait); }
.aivs-tone-done { color: var(--aivs-done); }
.aivs-tone-fail { color: var(--aivs-fail); }
@keyframes aivs-pulse { 50% { opacity: .35; } }

.aivs-bar { height: 8px; background: #e6e7e8; border-radius: 99px; overflow: hidden; }
.aivs-bar span { display: block; height: 100%; background: var(--aivs-primary); border-radius: 99px; transition: width .6s ease; }
.aivs-bar.is-live span { background-image: linear-gradient(90deg, var(--aivs-primary), #4f94d4, var(--aivs-primary)); background-size: 200% 100%; animation: aivs-flow 2s linear infinite; }
.aivs-bar--thin { height: 4px; }
@keyframes aivs-flow { to { background-position: -200% 0; } }

/* job list */
.aivs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.aivs .aivs-card { display: flex; flex-direction: column; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius);
  overflow: hidden; text-decoration: none; color: var(--aivs-ink); }
.aivs .aivs-card:hover { border-color: var(--aivs-ink); color: var(--aivs-ink); }
.aivs-card__media { background: var(--aivs-mat); display: grid; place-items: center; overflow: hidden; }
.aivs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aivs-media--short { aspect-ratio: 4 / 5; }
.aivs-media--film { aspect-ratio: 4 / 5; }
.aivs-media--film img { object-fit: contain; }
.aivs-media__empty { color: #a7aaad; font-size: 13px; }
.aivs-card__body { padding: 10px 12px 12px; display: grid; gap: 6px; }
.aivs-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aivs-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--aivs-line); border-radius: var(--aivs-radius); }

/* job detail */
.aivs-back { display: inline-block; margin-bottom: 10px; text-decoration: none; }
.aivs-jobhead h2 { font-size: 24px; font-weight: 600; margin-bottom: 8px; }
.aivs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aivs-tag { border: 1px solid var(--aivs-line); border-radius: 4px; padding: 1px 8px; font-size: 12.5px; color: var(--aivs-muted); background: var(--aivs-paper); }
.aivs-logline { margin: 12px 0 0; max-width: 72ch; font-size: 15px; }
.aivs-status { margin: 18px 0; padding: 14px 16px; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); }
.aivs-status__line { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.aivs-status__pct { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }

.aivs-result { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; margin: 0 0 24px; }
.aivs-result video { width: 100%; background: #000; border-radius: var(--aivs-radius); display: block; }
.aivs-result--short { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.aivs-result__side { max-width: 380px; }
.aivs-result__side h3 { font-size: 17px; margin-bottom: 4px; }

.aivs-approve { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 18px; margin: 0 0 24px;
  border: 1px solid #cdc3f0; background: #f8f6ff; border-radius: var(--aivs-radius); }
.aivs-approve h3 { font-size: 17px; margin-bottom: 6px; }
.aivs-approve p { margin: 0; max-width: 70ch; }
.aivs-costs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.aivs-costs caption { text-align: left; font-weight: 600; margin-bottom: 6px; }
.aivs-costs th { text-align: left; font-weight: 400; color: var(--aivs-muted); padding: 3px 0; }
.aivs-costs td { text-align: right; padding: 3px 0; }
.aivs-costs tfoot th, .aivs-costs tfoot td { border-top: 1px solid #cdc3f0; padding-top: 8px; font-weight: 600; color: var(--aivs-ink); font-size: 16px; }

.aivs-cast { margin: 0 0 24px; }
.aivs-cast h3, .aivs-sheet-title { font-size: 15px; margin-bottom: 10px; }
.aivs-cast__list { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.aivs-person { margin: 0; width: 150px; flex: none; }
.aivs-person img, .aivs-person__ph { width: 150px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: grid; place-items: center; background: var(--aivs-canvas); color: var(--aivs-muted); font-size: 12px; }
.aivs-person figcaption { font-size: 12.5px; margin-top: 6px; }
.aivs-person figcaption small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--aivs-muted); }

/* timeline: one segment per shot, width = shot length */
.aivs-timeline { display: flex; align-items: stretch; gap: 2px; height: 30px; margin: 0 0 4px; background: var(--aivs-mat); padding: 3px; border-radius: 6px; position: relative; }
.aivs .aivs-tl { flex-basis: 0; min-width: 14px; display: grid; place-items: center; border-radius: 3px; text-decoration: none; font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, .85); background: #50575e; font-variant-numeric: tabular-nums; }
.aivs .aivs-tl:hover { outline: 2px solid #fff; outline-offset: -2px; }
.aivs .aivs-tl--ready { background: #6b5bb5; }
.aivs .aivs-tl--work { background: var(--aivs-work); animation: aivs-pulse 1.4s ease-in-out infinite; }
.aivs .aivs-tl--done { background: var(--aivs-done); }
.aivs .aivs-tl--fail { background: var(--aivs-fail); }
.aivs-timeline__total { position: absolute; right: 0; top: 100%; font-size: 12px; color: var(--aivs-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* storyboard contact sheet */
.aivs-sheet { display: grid; gap: 14px; margin: 26px 0 24px; }
.aivs-sheet--short { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.aivs-sheet--film { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.aivs-shot { background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); overflow: hidden; display: flex; flex-direction: column; }
.aivs-shot.has-error { border-color: var(--aivs-fail); }
.aivs-shot.is-deleted { opacity: .45; }
.aivs-shot.is-deleted .aivs-frame { filter: grayscale(1); }
.aivs-frame { position: relative; background: var(--aivs-mat); display: grid; place-items: center; border-bottom: 4px solid var(--aivs-mat); }
.aivs-sheet--short .aivs-frame { aspect-ratio: 9 / 16; }
.aivs-sheet--film .aivs-frame { aspect-ratio: 16 / 9; }
.aivs-frame a, .aivs-frame img { display: block; width: 100%; height: 100%; }
.aivs-frame img { object-fit: cover; }
.aivs-frame__ph { color: #a7aaad; font-size: 13px; }
.aivs-frame__no, .aivs-frame__tc { position: absolute; font-size: 12px; font-weight: 600; color: #fff; background: rgba(29, 35, 39, .82); border-radius: 4px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.aivs-frame__no { top: 8px; left: 8px; }
.aivs-frame__tc { bottom: 8px; right: 8px; font-weight: 500; }
.aivs-shot__body { padding: 10px 12px 12px; display: grid; gap: 8px; align-content: start; flex: 1; }
.aivs-shot__narr { margin: 0; font-size: 14px; }
.aivs-shot__err { margin: 0; color: var(--aivs-fail); font-size: 12.5px; }
.aivs-steps { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--aivs-muted); }
.aivs-step { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.aivs-step--done .aivs-dot { background: var(--aivs-done); }
.aivs-step--working { color: var(--aivs-work); }
.aivs-step--working .aivs-dot { background: var(--aivs-work); animation: aivs-pulse 1.4s ease-in-out infinite; }
.aivs-step--pending .aivs-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--aivs-idle); }
.aivs-step--skip { text-decoration: line-through; opacity: .6; }
.aivs-mini { display: grid; gap: 4px; font-size: 12.5px; color: var(--aivs-muted); }
.aivs-mini textarea { font-size: 13.5px; padding: 6px 8px; color: var(--aivs-ink); resize: vertical; }
.aivs-mini--inline { grid-template-columns: auto 1fr; align-items: center; }
.aivs-mini--inline select { min-height: 30px; padding: 2px 6px; font-size: 13px; }
.aivs-shot__more summary { cursor: pointer; font-size: 13px; color: var(--aivs-primary); margin-bottom: 8px; }
.aivs-shot__more { display: grid; gap: 8px; }
.aivs-shot__more[open] { gap: 8px; }
.aivs-shot__tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aivs-regen { display: grid; gap: 8px; padding: 10px; background: var(--aivs-canvas); border-radius: 6px; }
.aivs-regen__targets { display: grid; gap: 4px; font-size: 13px; }

.aivs-log { margin: 8px 0 32px; }
.aivs-log summary { cursor: pointer; color: var(--aivs-muted); }
.aivs-log ol { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; max-height: 260px; overflow: auto; }
.aivs-log li { padding: 3px 0; border-bottom: 1px solid #f0f0f1; margin: 0; }
.aivs-log time { color: var(--aivs-muted); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* voices */
.aivs-voicepick { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.aivs-voicepick select { min-width: 0; flex: 1; font-size: 13px; min-height: 32px; padding: 4px 6px; }
.aivs .aivs-play { flex: none; min-width: 52px; }
.aivs .aivs-play.is-playing { background: var(--aivs-ink); border-color: var(--aivs-ink); color: #fff; }
.aivs-person { width: 180px; }
.aivs-person img, .aivs-person__ph { width: 180px; }
.aivs-person__mic { aspect-ratio: 3 / 4; background: var(--aivs-mat); color: #c3c4c7; font-size: 13px; }
.aivs-person__look { margin-top: 2px; }
.aivs-check.is-disabled { opacity: .55; cursor: not-allowed; }
.aivs-field--wide { min-width: 0; }

/* voice track lines */
.aivs-lines { display: grid; gap: 8px; }
.aivs-line { display: grid; gap: 4px; padding: 6px; background: var(--aivs-canvas); border-radius: 6px; }
.aivs-line__head { display: flex; gap: 6px; align-items: center; }
.aivs .aivs-line__head select { width: auto; min-height: 28px; padding: 2px 6px; font-size: 12.5px; flex: 1; min-width: 0; }
.aivs .aivs-line__head .aivs-line__emo { flex: 0 1 auto; }
.aivs-line__who-static { font-size: 12.5px; color: var(--aivs-muted); flex: 1; }
.aivs .aivs-line__del { border: 0; background: transparent; color: var(--aivs-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.aivs .aivs-line__del:hover { color: var(--aivs-fail); }
.aivs .aivs-line textarea { font-size: 13.5px; padding: 6px 8px; resize: vertical; }
.aivs .aivs-line__add { justify-self: start; }
.aivs-saylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.aivs-saylist li { margin: 0; }
.aivs-saylist strong { color: #8a5a00; font-weight: 600; }
.aivs-saylist strong.is-narrator { color: var(--aivs-muted); }
.aivs-emo { color: var(--aivs-muted); font-style: normal; font-size: 12px; }

/* Thai text: signs in the scene + on-screen text */
.aivs-textbox { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--aivs-line); border-radius: 6px; }
.aivs .aivs-textbox .aivs-input, .aivs .aivs-ovline .aivs-input { min-height: 32px; padding: 4px 8px; font-size: 13.5px; }
.aivs-ovrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.aivs .aivs-ovstyle { width: auto; min-height: 32px; padding: 2px 6px; font-size: 12.5px; max-width: 16em; }
.aivs-textbox .aivs-ovrow { grid-template-columns: 1fr; }
.aivs .aivs-textbox .aivs-ovstyle { width: 100%; max-width: none; }
.aivs-textinfo { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.aivs-textinfo li { margin: 0; }
.aivs-textinfo .aivs-tag { font-size: 11.5px; padding: 0 6px; color: #8a5a00; border-color: #e8c98a; background: #fff8e6; }
.aivs-textinfo .aivs-tag--ov { color: var(--aivs-primary); border-color: #b9d3ea; background: #eef5fb; }
.aivs-overlays { margin: 0 0 24px; padding: 14px 18px; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); }
.aivs-overlays summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.aivs-overlays summary small { font-weight: 400; }
.aivs-overlays__list { display: grid; gap: 8px; margin: 12px 0; }
.aivs-ovline { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.aivs-ovline__no { display: grid; font-size: 13px; font-weight: 600; }
.aivs-ovline__no small { font-weight: 400; color: var(--aivs-muted); font-size: 11.5px; }

/* attachments in the new-job form */
.aivs-attach { display: grid; gap: 14px; }
.aivs-attach__group { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--aivs-line); border-radius: var(--aivs-radius); background: var(--aivs-paper); }
.aivs-attach__group > .aivs-btn { justify-self: start; }
.aivs-attach__head { display: grid; gap: 2px; }
.aivs-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.aivs-ref, .aivs-clip { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border: 1px solid var(--aivs-line); border-radius: 6px; background: var(--aivs-canvas); }
.aivs-ref.has-error, .aivs-clip.has-error { border-color: var(--aivs-fail); }
.aivs-ref > img { width: 72px; height: 96px; object-fit: cover; border-radius: 4px; background: var(--aivs-mat); }
.aivs-ref__body { display: grid; gap: 6px; min-width: 0; }
.aivs-ref__row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.aivs .aivs-ref__row select { width: auto; flex: 1; min-height: 30px; padding: 2px 6px; font-size: 13px; }
.aivs .aivs-ref .aivs-input, .aivs .aivs-clip .aivs-input { min-height: 30px; padding: 3px 8px; font-size: 13px; }
.aivs-clip__icon { width: 72px; height: 54px; border-radius: 4px; background: var(--aivs-mat); color: #fff; display: grid; place-items: center; font-size: 20px; }
.aivs-clip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.aivs .aivs-link-btn { border: 0; background: none; color: var(--aivs-primary); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.aivs-rights { padding: 10px 12px; border-radius: 6px; background: #fff8e6; border: 1px solid #e8c98a; }

/* attachments on the job page */
.aivs-attachview { margin: 0 0 24px; padding: 14px 18px; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); }
.aivs-attachview > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.aivs-attachview[open] > summary { margin-bottom: 12px; }
.aivs-refs--view { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 12px; }
.aivs-refcard { margin: 0; }
.aivs-refcard img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: var(--aivs-canvas); display: block; }
.aivs-refcard figcaption { font-size: 12.5px; margin-top: 6px; display: grid; gap: 2px; }
.aivs-refcard figcaption small { color: var(--aivs-muted); }
.aivs-refcard .aivs-tag { justify-self: start; font-size: 11.5px; padding: 0 6px; }
.aivs-brief { display: grid; gap: 12px; }
.aivs-brief__frames { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.aivs-brief__frames img { height: 84px; border-radius: 4px; flex: none; background: var(--aivs-mat); }
.aivs-brief__dl { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13.5px; }
.aivs-brief__dl dt { color: var(--aivs-muted); }
.aivs-brief__dl dd { margin: 0; }
.aivs-person { position: relative; }
.aivs-person__badge { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.aivs-person figcaption small.aivs-person__why { color: #5b3cc4; margin-top: 4px; -webkit-line-clamp: 4; }

.aivs-hookedit { margin-top: 12px; max-width: 520px; }
.aivs .aivs-hookedit .aivs-input { min-height: 34px; font-size: 14px; }
.aivs-ovline__hint { font-size: 12px; }

/* social pack */
.aivs-social { margin: 0 0 24px; padding: 18px; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); }
.aivs-social--empty { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aivs-social--empty p { margin: 4px 0 0; max-width: 70ch; }
.aivs-social h3 { font-size: 17px; }
.aivs-social__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.aivs-social__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.aivs-social__cover { display: grid; gap: 8px; }
.aivs-social__cover img { width: 100%; display: block; border-radius: 6px; background: var(--aivs-mat); }
.aivs-social__fields { display: grid; gap: 10px; }
.aivs-copyfield { display: grid; gap: 4px; }
.aivs-copyfield__head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--aivs-muted); font-weight: 600; }
.aivs .aivs-copyfield textarea { font-size: 13.5px; background: var(--aivs-canvas); resize: vertical; }

/* toast */
.aivs-toast { position: fixed; z-index: 100010; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 6px;
  background: #1d2327; color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); transition: opacity .4s, transform .4s; }
.aivs-toast--err { background: #8a1f1f; }
.aivs-toast.is-out { opacity: 0; transform: translateY(8px); }
.aivs-notice { padding: 12px 16px; border: 1px solid #dcdcde; border-radius: 8px; }

/* responsive: react to the space the app actually gets (wp-admin or a narrow theme column) */
.aivs { container-type: inline-size; container-name: aivs; }
@container aivs (max-width: 1000px) {
  .aivs-new { grid-template-columns: 1fr; }
  .aivs-summary { position: static; }
  .aivs-approve { grid-template-columns: 1fr; }
}
@container aivs (max-width: 720px) {
  .aivs-row, .aivs-checks, .aivs-formats { grid-template-columns: 1fr; }
  .aivs-social__grid { grid-template-columns: 1fr; }
  .aivs-ovline { grid-template-columns: minmax(0, 1fr) 11em; }
  .aivs-refs { grid-template-columns: 1fr; }
  .aivs-brief__dl { grid-template-columns: 1fr; gap: 2px; }
  .aivs-brief__dl dd { margin-bottom: 8px; }
  .aivs-ovline__no { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
  .aivs-ovrow { grid-template-columns: 1fr; }
  .aivs .aivs-ovstyle { max-width: none; width: 100%; }
  .aivs-result, .aivs-result--short { grid-template-columns: 1fr; }
  .aivs-result--short video { max-width: 360px; margin: 0 auto; }
  .aivs-sheet--short { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .aivs-sheet--film { grid-template-columns: 1fr; }
  .aivs-tabs a { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .aivs *, .aivs-toast { animation: none !important; transition: none !important; }
}

/* v1.4: acting direction + listen per line, voice intensity */
.aivs-line__act { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.aivs-line__act .aivs-line__delivery { flex: 1; min-width: 0; font-size: 12px; padding: 4px 8px; }
.aivs-label--sub { display: block; margin-top: 10px; font-size: 13px; }
.aivs-intensity { margin: 4px 0 12px; }
.aivs-intensity .aivs-seg button[disabled]:not(.is-on) { opacity: .55; }

/* v1.5: Google Flow */
.aivs-flowopts { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(232, 93, 4, .07); }
.aivs-flowhint { color: #b04500; }
.aivs-flowbox { margin: 12px 0; padding: 14px 16px; border: 1px solid #e85d04; border-radius: 12px; background: rgba(232, 93, 4, .05); }
.aivs-flowbox h3 { margin: 0 0 6px; }
.aivs-flowsteps { margin: 6px 0 10px 20px; padding: 0; }
.aivs-flowfb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aivs-flowfb select { max-width: 260px; }

/* v1.7 voice lock */
.aivs-lockbox { margin-top: 12px; padding: 10px 12px; border: 1px dashed #c7c2f0; border-radius: 10px; background: #f7f6ff; }
.aivs-lockbox .aivs-btn { margin-top: 6px; }

/* v1.8 Dreamina hand-off */
.aivs-dreamina { border-color: #0f766e; background: rgba(15, 118, 110, .05); }
.aivs-dreamina > summary { cursor: pointer; font-weight: 600; }
.aivs-dshot { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--aivs-line); border-radius: 10px; background: var(--aivs-paper); }
.aivs-dshot.is-done { border-color: #9fd8b5; }
.aivs-dshot__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aivs-dshot__head strong { margin-right: 4px; }
.aivs-dshot__imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.aivs-dshot__imgs figure { margin: 0; width: 132px; }
.aivs-dshot__imgs img { width: 132px; height: 132px; object-fit: contain; background: var(--aivs-canvas); border: 1px solid var(--aivs-line); border-radius: 6px; display: block; }
.aivs-dshot__imgs figcaption { display: grid; gap: 4px; font-size: 12px; margin-top: 4px; }
.aivs-dshot__imgs figcaption .aivs-btn { justify-self: start; }
.aivs-dshot__up { display: grid; gap: 6px; justify-items: start; }
.aivs-dshot__up .aivs-bar { width: 100%; max-width: 360px; }

/* v1.8 library */
.aivs-libpick { display: flex; flex-wrap: wrap; gap: 8px; }
.aivs-libchip { display: flex; gap: 8px; align-items: center; padding: 6px 10px 6px 6px; border: 1px solid var(--aivs-line); border-radius: 10px; background: var(--aivs-paper); cursor: pointer; }
.aivs-libchip.is-on { border-color: var(--aivs-primary); box-shadow: 0 0 0 1px var(--aivs-primary); }
.aivs-libchip img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.aivs-libchip span { display: grid; line-height: 1.25; }
.aivs-libchip small { color: var(--aivs-muted); font-size: 11.5px; }
.aivs-libsec { margin: 0 0 28px; }
.aivs-libsec__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.aivs-libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.aivs-libcard { margin: 0; padding: 10px; border: 1px solid var(--aivs-line); border-radius: 10px; background: var(--aivs-paper); display: grid; gap: 8px; align-content: start; }
.aivs-libcard img, .aivs-libcard__noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--aivs-canvas); border-radius: 6px; display: grid; place-items: center; color: var(--aivs-muted); font-size: 12px; }
.aivs-libcard figcaption { display: grid; gap: 3px; font-size: 13px; }
.aivs-libcard__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.aivs-libedit { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; margin-top: 12px; padding: 14px; border: 1px solid var(--aivs-primary); border-radius: 10px; background: #f6faff; }
.aivs-libedit__img { display: grid; gap: 8px; align-content: start; justify-items: start; }
.aivs-libedit__img img, .aivs-libedit__img .aivs-libcard__noimg { width: 180px; aspect-ratio: 3 / 4; object-fit: contain; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: 6px; }
.aivs-libedit__body { display: grid; gap: 10px; }
.aivs-libedit__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aivs-libfield { display: grid; gap: 4px; font-size: 13px; }
.aivs-lesson > summary { cursor: pointer; font-weight: 600; }
.aivs-lesson textarea { margin: 6px 0; }
@media (max-width: 700px) {
  .aivs-libedit { grid-template-columns: 1fr; }
  .aivs-libedit__row { grid-template-columns: 1fr; }
}

/* v1.9.1 voice lock: re-sync + per-line timing */
.aivs-sync { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--aivs-line); border-radius: 12px; background: var(--aivs-paper); }
.aivs-sync h3 { margin: 0 0 4px; font-size: 16px; }
.aivs-sync > .aivs-actions { margin: 8px 0 4px; }
.aivs-sync__shot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--aivs-line); }
.aivs-sync__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aivs-tag--warn { color: #9a3b00; border-color: #f0b98a; background: #fff3e8; }
.aivs-sync__lines { margin: 8px 0 6px; padding-left: 20px; display: grid; gap: 6px; }
.aivs-sync__lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.aivs-sync__who { font-weight: 600; min-width: 60px; }
.aivs-sync__text { flex: 1 1 220px; color: var(--aivs-muted); overflow-wrap: anywhere; }
.aivs-sync__at { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.aivs-sync__btns { display: inline-flex; gap: 4px; }
@media (max-width: 600px) { .aivs-sync { padding: 12px; } .aivs-sync__btns { width: 100%; } }

/* v1.9.11 voice lock timeline (aivs-synctl; aivs-tl is the shot strip of the job list): the clip, the places where its own voice is heard, one draggable bar per line */
.aivs-synctl { margin-top: 10px; }
.aivs-synctl__top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.aivs-synctl__top .aivs-media { flex: 0 0 auto; max-width: 100%; }
.aivs-synctl__video { max-height: 240px; max-width: min(100%, 420px); background: var(--aivs-mat); border-radius: 8px; }
.aivs-synctl__ctl { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aivs-synctl__ctl .aivs-fine { flex-basis: 100%; margin: 0; }
.aivs-synctl__opt { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.aivs-synctl__status { font-size: 13px; }
.aivs-synctl__strip { position: relative; margin: 10px 0 4px; border: 1px solid var(--aivs-line); border-radius: 8px; background: var(--aivs-canvas); overflow: hidden; user-select: none; }
.aivs-synctl__ruler { position: relative; height: 18px; border-bottom: 1px solid var(--aivs-line); cursor: pointer; }
.aivs-synctl__tick { position: absolute; top: 0; font-size: 10px; color: var(--aivs-muted); padding-left: 3px; border-left: 1px solid var(--aivs-line); height: 100%; line-height: 18px; }
.aivs-synctl__row { position: relative; height: 34px; border-bottom: 1px dashed var(--aivs-line); cursor: pointer; }
.aivs-synctl__row:last-of-type { border-bottom: 0; }
.aivs-synctl__row--clip { height: 22px; background: repeating-linear-gradient(90deg, transparent 0, transparent 9px, rgba(0,0,0,0.025) 9px, rgba(0,0,0,0.025) 10px); }
.aivs-synctl__rowlabel { position: absolute; left: 3px; top: 3px; z-index: 1; font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,0.85); color: var(--aivs-muted); pointer-events: none; }
.aivs-synctl__seg { position: absolute; top: 5px; height: 12px; background: #b7bcc2; border-radius: 3px; }
.aivs-synctl__seg--own { background: #8a9099; }
.aivs-synctl__bar { position: absolute; top: 4px; height: 26px; min-width: 6px; background: var(--aivs-primary); color: #fff; border-radius: 6px; cursor: grab; touch-action: none; box-sizing: border-box; overflow: hidden; }
.aivs-synctl__bar.is-drag { cursor: grabbing; background: var(--aivs-primary-ink); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--aivs-primary); }
.aivs-synctl__bar.is-over { background: var(--aivs-work); }
.aivs-synctl__bar.is-silent { background: var(--aivs-idle); cursor: not-allowed; }
.aivs-synctl__piece { position: absolute; top: 0; height: 100%; background: rgba(255,255,255,0.22); border-left: 1px solid rgba(255,255,255,0.5); pointer-events: none; }
.aivs-synctl__bartext { position: relative; display: block; padding: 0 8px; font-size: 12px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.aivs-synctl__head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--aivs-fail); pointer-events: none; }
.aivs-synctl__head::before { content: ''; position: absolute; top: 0; left: -4px; border: 5px solid transparent; border-top: 7px solid var(--aivs-fail); }
.aivs-synctl__time { width: 86px; padding: 4px 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.aivs-synctl__timelab { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.aivs-sync__hist { display: inline-flex; gap: 4px; margin-left: auto; }
@media (max-width: 600px) { .aivs-synctl__video { max-height: 180px; } .aivs-synctl__row { height: 38px; } .aivs-synctl__bar { height: 30px; } .aivs-synctl__bartext { line-height: 30px; } }
/* a finger, not a mouse: every control at least 44 x 44 CSS px, the bars tall enough to grab, no page scroll while dragging a bar */
@media (pointer: coarse) {
  .aivs-synctl__row { height: 52px; }
  .aivs-synctl__bar { top: 4px; height: 44px; }
  .aivs-synctl__bartext { line-height: 44px; }
  .aivs-synctl__row--clip { height: 26px; }
  .aivs-sync .aivs-btn--small, .aivs-synctl__time, .aivs-synctl__opt { min-height: 44px; }
  .aivs-sync .aivs-btn--small { min-width: 44px; padding-left: 12px; padding-right: 12px; }
  .aivs-synctl__opt input[type=checkbox] { width: 24px; height: 24px; }
  .aivs-sync__btns { gap: 8px; flex-wrap: wrap; }
}

/* v1.9.2 wardrobe + continuity warnings */
.aivs-person__outfit { display: block; color: var(--aivs-muted); font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aivs-shot__wear { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.aivs-shot__warn { margin: 6px 0 0; padding: 6px 8px; border-radius: 6px; background: #fff3e8; border: 1px solid #f0b98a; color: #8a3a00; font-size: 12.5px; line-height: 1.45; }
.aivs-libcard__nooutfit { color: #9a3b00; font-size: 12px; }

/* v1.9.3 random idea button */
.aivs-ideatool { margin-top: 10px; padding: 12px; border: 1px dashed var(--aivs-line); border-radius: 10px; background: var(--aivs-paper); display: grid; gap: 6px; }
.aivs-ideatool__row { display: grid; grid-template-columns: minmax(150px, 200px) 1fr auto; gap: 8px; align-items: center; }
.aivs-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 4px; }
.aivs-idea { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 10px 12px; border: 1px solid var(--aivs-line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.aivs-idea:hover, .aivs-idea:focus-visible { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; }
.aivs-idea__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aivs-idea__text { font-size: 13px; line-height: 1.55; color: #3c434a; }
.aivs-idea__use { align-self: flex-end; font-size: 12.5px; color: #2271b1; font-weight: 600; }
@media (max-width: 700px) { .aivs-ideatool__row { grid-template-columns: 1fr; } }

/* v1.9.5 lip sync + voice changer */
.aivs-lipwrap { display: grid; gap: 10px; margin: 10px 0 4px; }
.aivs-lipbox { padding: 10px 12px; border: 1px dashed #c7c2f0; border-radius: 10px; background: #f7f6ff; }
.aivs-lipbox .aivs-actions { margin-top: 6px; }
.aivs-lipselect { width: auto; min-width: 220px; }

.aivs-lipshots { max-width: 230px; }

.aivs-dubinfo { display: grid; gap: 6px; }
.aivs-dubnote { border-left: 3px solid var(--aivs-warn, #c77700); padding-left: 10px; }

.aivs-testclip { display: grid; gap: 6px; }
.aivs-testclip video { width: 100%; max-height: 260px; background: #000; border-radius: 6px; }

/* v1.9.8: statuses, money, decisions, review, conflicts, trial takes and the before/after player */
.aivs-tag--ok { background: #e6f4ea; color: var(--aivs-done); border-color: #b7dfc3; }
.aivs-tag--warn { background: #fff4e5; color: #8a4b00; border-color: #f0c98a; }
.aivs-statuschips { margin-top: 10px; }
.aivs-moneyline { margin-top: 6px; }
.aivs-decision, .aivs-review, .aivs-conflicts { border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); background: var(--aivs-paper); padding: 16px; margin: 16px 0; }
.aivs-decision { border-color: #c9b8f5; background: #f7f3ff; }
.aivs-decision h3, .aivs-review h3, .aivs-conflicts h3 { margin-bottom: 8px; }
.aivs-unknown { list-style: none; margin: 8px 0; padding: 0; }
.aivs-unknown li { border-top: 1px solid var(--aivs-line); padding: 8px 0; }
.aivs-unknown .aivs-input { max-width: 260px; }
.aivs-input--short { width: 90px !important; display: inline-block; }
.aivs-conflicts.is-open { border-color: #f0c98a; background: #fffaf2; }
.aivs-conflicts ul { margin: 6px 0 0; padding-left: 18px; }
.aivs-conflicts li { margin: 6px 0; }
.aivs-issues { margin: 8px 0; padding-left: 18px; }
.aivs-issue--blocked { color: var(--aivs-fail); font-weight: 600; }
.aivs-issue--needs_review { color: #8a4b00; }
.aivs-review .aivs-input { max-width: 340px; }
.aivs-confirm { margin: 10px 0; }
.aivs-costbox .aivs-cost { font-size: 18px; font-weight: 700; }
.aivs-costbox__prep { display: block; }
.aivs-costlines summary { cursor: pointer; font-size: 12.5px; color: var(--aivs-primary); margin-top: 6px; }
.aivs-costlines ul { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; }
.aivs-listen { display: grid; gap: 6px; margin: 8px 0; }
.aivs-listen__item span { display: block; font-size: 12.5px; color: var(--aivs-muted); }
.aivs-listen audio { width: 100%; height: 34px; }
.aivs-media video, .aivs-media audio { max-width: 100%; display: block; }
.aivs-try { border: 1px dashed var(--aivs-primary); border-radius: var(--aivs-radius); padding: 10px 12px; margin: 10px 0; background: #f4f8fc; }
.aivs-takes { margin: 10px 0; }
.aivs-takes > summary { cursor: pointer; font-weight: 600; }
.aivs-take { border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); padding: 10px; margin: 8px 0; background: var(--aivs-paper); }
.aivs-take.is-used { border-color: #b7dfc3; box-shadow: 0 0 0 1px #b7dfc3 inset; }
.aivs-take__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aivs-take__info { margin: 6px 0; padding-left: 16px; font-size: 12.5px; color: var(--aivs-muted); }
.aivs-cmp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.aivs-cmp__item { margin: 0; }
.aivs-cmp__item figcaption { font-size: 12px; color: var(--aivs-muted); margin-bottom: 2px; }
.aivs-cmp__item video { width: 100%; background: #000; border-radius: 6px; }
.aivs-cmp__bar { align-items: center; }
.aivs-cmp__radio { font-size: 12.5px; }
.aivs-dublines textarea { width: 100%; }
.aivs-resultvideo video { width: 100%; }

/* v1.9.9: the film shown is older than the chosen clips */
.aivs-warn { color: #8a4b00; background: #fff4e5; border-left: 3px solid #f0a020; padding: 6px 10px; }

/* v1.9.9 dub card: the lip target and per-line speaker selects stay readable in a narrow card */
.aivs-dubinfo .aivs-mini--inline { grid-template-columns: 1fr; }
.aivs-dubinfo .aivs-mini--inline select { width: 100%; }
.aivs-dublines .aivs-line__head { flex-wrap: wrap; }
.aivs .aivs-dublines .aivs-line__head select.aivs-line__who { flex: 1 1 9em; min-width: 9em; }
.aivs-framecheck ul { margin: 4px 0 6px 18px; }

/* v1.9.10 */
.aivs-framecheck--note { border-color: #e9c46a; }
.aivs-resultcheck { margin: 8px 0; }
.aivs-resultcheck ul, .aivs-framecheck ul { margin: 6px 0 6px 18px; }
.aivs-check-ok { color: #1a7f37; }
.aivs-lipwarn { margin-top: 6px; }
.aivs-reopen .aivs-btn { margin-top: 4px; }
.aivs-libcard__warn { margin-top: 6px; padding: 6px 8px; border: 1px solid #e9c46a; background: #fff8e6; border-radius: 6px; font-size: 12px; }
.aivs-libcard__warn ul { margin: 4px 0 4px 16px; }

/* v1.9.12 edit page (#edit/<id>): shots | preview | tools, timeline below - dark like an editor, laid out per screen */
.aivs-root--edit .aivs-main { max-width: none; }
.aivs-ed { --ed-bg: #0f1115; --ed-panel: #171a20; --ed-panel2: #1f242c; --ed-line: #2a2f38; --ed-ink: #e7e9ee; --ed-muted: #8b93a1; --ed-accent: #22c1b7; --ed-accent-ink: #062a27; --ed-warn: #f0a35e; --ed-cut: #f05a5a;
  color: var(--ed-ink); background: var(--ed-bg); border-radius: 12px; overflow: hidden; margin-top: 8px; font-size: 14px; }
.aivs-ed a { color: var(--ed-accent); }
.aivs-ed .aivs-btn { background: var(--ed-panel2); border-color: var(--ed-line); color: var(--ed-ink); }
.aivs-ed .aivs-btn:hover { border-color: var(--ed-muted); }
.aivs-ed .aivs-btn--primary { background: var(--ed-accent); border-color: var(--ed-accent); color: var(--ed-accent-ink); font-weight: 600; }
.aivs-ed .aivs-btn--primary:hover { background: #3fd6cc; border-color: #3fd6cc; color: var(--ed-accent-ink); }
.aivs-ed .aivs-btn--quiet { background: transparent; border-color: transparent; color: var(--ed-muted); }
.aivs-ed .aivs-btn--quiet:hover { color: var(--ed-ink); }
.aivs-ed .aivs-fine { color: var(--ed-muted); }
.aivs-ed input[type=number], .aivs-ed select { background: var(--ed-panel2); color: var(--ed-ink); border: 1px solid var(--ed-line); border-radius: 6px; padding: 4px 6px; }
.aivs-ed__empty { padding: 40px 20px; text-align: center; }
.aivs-ed__grid { display: grid; grid-template-columns: 224px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(200px, 1fr) minmax(0, auto);
  grid-template-areas: "top top top" "shots stage tools" "tl tl tl"; height: calc(100vh - 120px); min-height: 480px; }
/* v1.9.15 (14 Oct, "มันล้นจอ"): the grid has a definite height - a 1fr row of a grid without one grows to its tallest
   item (the tools panel), which pushed the timeline below the window. Now the shots, the tools and the timeline
   scroll inside their own panels and the preview takes what is left. */
.aivs-ed__top { grid-area: top; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--ed-line); background: var(--ed-panel); flex-wrap: wrap; }
.aivs-ed__back { text-decoration: none; font-weight: 600; white-space: nowrap; }
.aivs-ed__title { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.aivs-ed__title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aivs-ed__chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--ed-panel2); color: var(--ed-muted); white-space: nowrap; }
.aivs-ed__chip.is-dirty { background: #3b2f12; color: var(--ed-warn); }
.aivs-ed__topbtns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aivs-ed__ib { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--ed-line); background: var(--ed-panel2); color: var(--ed-ink); border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.aivs-ed__ib:hover { border-color: var(--ed-muted); }
.aivs-ed__ib[disabled] { opacity: .4; cursor: not-allowed; }
.aivs-ed__ib.is-on { background: var(--ed-accent); color: var(--ed-accent-ink); border-color: var(--ed-accent); }
.aivs-ed__play { width: 48px; height: 40px; font-size: 18px; background: var(--ed-accent); color: var(--ed-accent-ink); border-color: var(--ed-accent); }
.aivs-ed__tools-toggle, .aivs-ed__tools-close { display: none; }
.aivs-ed__shots { grid-area: shots; overflow: auto; border-right: 1px solid var(--ed-line); padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--ed-bg); }
.aivs-ed__shot { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--ed-panel); color: var(--ed-ink); text-align: left; cursor: pointer; position: relative; min-height: 64px; }
.aivs-ed__shot:hover { border-color: var(--ed-muted); }
.aivs-ed__shot.is-current { border-color: var(--ed-accent); box-shadow: 0 0 0 1px var(--ed-accent) inset; }
.aivs-ed__shot img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #000; }
.aivs-ed__noimg { width: 56px; height: 56px; border-radius: 6px; background: #000; display: block; }
.aivs-ed__shotno { color: var(--ed-muted); font-size: 12px; font-weight: 600; }
.aivs-ed__shotmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aivs-ed__shotdur { font-size: 12px; color: var(--ed-muted); font-variant-numeric: tabular-nums; }
.aivs-ed__shotline { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aivs-ed__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ed-warn); }
.aivs-ed__stage { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.aivs-ed__screen { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; background: #000; min-height: 160px; cursor: pointer; position: relative; overflow: hidden; }
/* every shot's box covers the whole screen (only the current clip is shown); the clip fits inside it */
.aivs-ed__screen .aivs-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.aivs-ed__screen .aivs-media > * { pointer-events: auto; }
.aivs-ed__video { max-height: 100%; max-width: 100%; height: auto; display: block; background: #000; }
/* v1.9.14: the edit page fills the browser window (the WordPress menus and the page around it are covered) */
.aivs-ed.is-full { position: fixed; inset: 0; z-index: 100001; margin: 0; border-radius: 0; overflow: hidden; }   /* above the WordPress toolbar (99999) */
.aivs-ed.is-full .aivs-ed__grid { height: 100vh; height: 100dvh; min-height: 0; }
body.aivs-ed-full { overflow: hidden; }
.aivs-ed__label { cursor: grab; touch-action: none; user-select: none; }
.aivs-ed__label--ruler { cursor: default; }
.aivs-ed__grip { display: inline-block; width: 10px; margin-right: 2px; color: var(--ed-muted); font-size: 12px; letter-spacing: -2px; }
.aivs-ed__label.is-drag { cursor: grabbing; background: var(--ed-panel2); position: relative; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.aivs-ed__label.is-target { box-shadow: 0 -2px 0 var(--ed-accent) inset; }
.aivs-ed__video[hidden] { display: none; }
.aivs-ed__transport { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--ed-line); background: var(--ed-panel); flex-wrap: wrap; }
.aivs-ed__time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ed-muted); margin: 0 6px; white-space: nowrap; }
.aivs-ed__status { font-size: 12px; color: var(--ed-warn); }
.aivs-ed__opt { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ed-muted); white-space: nowrap; }
.aivs-ed__opt input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ed-accent); }
.aivs-ed__zoom { margin-left: auto; }
.aivs-ed__zoom input { width: 110px; accent-color: var(--ed-accent); }
.aivs-ed__tools { grid-area: tools; border-left: 1px solid var(--ed-line); padding: 12px; overflow: auto; background: var(--ed-panel); display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.aivs-ed__toolhead { display: flex; align-items: center; justify-content: space-between; }
.aivs-ed__line { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--ed-line); }
.aivs-ed__who { display: flex; align-items: center; gap: 8px; }
.aivs-ed__who select { flex: 1; min-width: 0; }
.aivs-ed__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ed-accent); color: var(--ed-accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.aivs-ed__text { color: var(--ed-ink); line-height: 1.4; }
.aivs-ed__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ed-muted); }
.aivs-ed__val { color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.aivs-ed__slider { width: 100%; accent-color: var(--ed-accent); height: 28px; }
.aivs-ed__btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aivs-ed__timelab { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ed-muted); white-space: nowrap; }
.aivs-ed__time-in { width: 82px; font-variant-numeric: tabular-nums; }
.aivs-ed .aivs-ed__loopbtn { width: 100%; min-height: 44px; }
.aivs-ed__speed { align-items: center; gap: 8px; margin-top: 4px; }
.aivs-ed__speedsel { flex: 1; min-width: 0; max-width: 220px; }
.aivs-ed__overnote { color: #c2410c; }
.aivs-ed__revoice .aivs-btn { flex: 1 1 45%; min-height: 40px; }
.aivs-ed__editbox { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--ed-line); border-radius: 8px; background: rgba(255,255,255,.04); }
.aivs-ed__edittext-in { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font: inherit; line-height: 1.4; }
.aivs-ed__sect { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--ed-line); }
.aivs-ed__sect--save { border-bottom: 0; margin-top: auto; }
.aivs-ed__selbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--ed-accent); border-radius: 8px; background: rgba(34,193,183,.1); font-size: 13px; }
.aivs-ed__cuts { display: flex; flex-direction: column; gap: 4px; }
.aivs-ed__cut { display: flex; align-items: center; gap: 6px; }
.aivs-ed__cut.is-picked .aivs-ed__cutname { border-color: var(--ed-cut); color: #ffd0d0; }
.aivs-ed__cutname { flex: 1; text-align: left; background: var(--ed-panel2); border: 1px solid var(--ed-line); color: var(--ed-ink); border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.aivs-ed__tl { grid-area: tl; display: grid; grid-template-columns: 128px minmax(0, 1fr); border-top: 1px solid var(--ed-line); background: var(--ed-panel); max-height: 46vh; min-height: 0; overflow-y: auto; }
.aivs-ed__labels { display: flex; flex-direction: column; border-right: 1px solid var(--ed-line); }
.aivs-ed__label { height: 44px; display: flex; align-items: center; padding: 0 8px; font-size: 12px; color: var(--ed-muted); border-bottom: 1px dashed var(--ed-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aivs-ed__label--ruler { height: 22px; border-bottom: 1px solid var(--ed-line); }
.aivs-ed__label--ro { opacity: .6; }
.aivs-ed__scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
.aivs-ed__tlinner { position: relative; min-width: 100%; user-select: none; }
.aivs-ed__ruler { position: relative; height: 22px; border-bottom: 1px solid var(--ed-line); cursor: pointer; background: var(--ed-panel2); }
.aivs-ed__tick { position: absolute; top: 0; height: 100%; padding-left: 3px; font-size: 10px; line-height: 22px; color: var(--ed-muted); border-left: 1px solid var(--ed-line); }
.aivs-ed__track { position: relative; height: 44px; border-bottom: 1px dashed var(--ed-line); }
.aivs-ed__track--video { background-color: #000; cursor: pointer; }
/* v1.9.13: the whole film - one block per shot on the video row */
.aivs-ed__clipblk { position: absolute; top: 0; bottom: 0; background-size: auto 100%; background-repeat: repeat-x; background-color: #111; border-right: 2px solid var(--ed-bg); box-sizing: border-box; overflow: hidden; }
.aivs-ed__clipblk.is-current { box-shadow: 0 0 0 2px var(--ed-accent) inset; }
.aivs-ed__natseg { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,.25); pointer-events: none; }
.aivs-ed__natseg.is-off { background: repeating-linear-gradient(-45deg, rgba(120,120,120,.25) 0 4px, rgba(0,0,0,.35) 4px 8px); }
.aivs-ed__cutline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(255,255,255,.25); pointer-events: none; }
.aivs-ed__bar.is-other { opacity: .72; }
.aivs-ed__shot.is-mute .aivs-ed__shotline { color: var(--ed-muted); font-style: italic; }
.aivs-ed__clipname { position: absolute; left: 6px; top: 4px; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; pointer-events: none; }
.aivs-ed__track--voice { background: repeating-linear-gradient(90deg, transparent 0, transparent 9px, rgba(255,255,255,.025) 9px, rgba(255,255,255,.025) 10px); }
.aivs-ed__bar { position: absolute; top: 5px; height: 34px; min-width: 8px; background: #1b8f88; color: #fff; border-radius: 6px; cursor: grab; touch-action: none; overflow: hidden; box-sizing: border-box; border: 2px solid transparent; }
.aivs-ed__bar.is-sel { background: var(--ed-accent); border-color: #fff; }
.aivs-ed__bar.is-drag { cursor: grabbing; box-shadow: 0 0 0 2px var(--ed-accent); }
.aivs-ed__bar.is-over { background: var(--ed-warn); }
.aivs-ed__bar.is-silent { background: #4a4f58; cursor: not-allowed; }
.aivs-ed__wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.aivs-ed__bartext { position: relative; padding: 0 8px; font-size: 12px; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; text-shadow: 0 0 4px rgba(0,0,0,.7); }
.aivs-ed__track--native { cursor: crosshair; touch-action: none; background: #15181d; }
.aivs-ed__track--native.is-off { opacity: .35; }
.aivs-ed__env { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.aivs-ed__own { position: absolute; top: 2px; height: 5px; background: var(--ed-warn); border-radius: 2px; pointer-events: none; opacity: .9; }
.aivs-ed__cutblk { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(240,90,90,.35) 0 6px, rgba(240,90,90,.12) 6px 12px); border-left: 1px solid var(--ed-cut); border-right: 1px solid var(--ed-cut); color: #ffd0d0; font-size: 11px; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; box-sizing: border-box; }
.aivs-ed__cutblk.is-picked { outline: 2px solid #fff; outline-offset: -2px; }
.aivs-ed__sel { position: absolute; top: 0; bottom: 0; background: rgba(34,193,183,.25); border: 1px solid var(--ed-accent); pointer-events: none; box-sizing: border-box; }
.aivs-ed__track--ro { opacity: .5; display: flex; align-items: center; padding-left: 8px; font-size: 12px; color: var(--ed-muted); }
.aivs-ed__head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff4d4d; pointer-events: none; z-index: 3; }
.aivs-ed__head::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid #ff4d4d; }
@media (pointer: coarse) {
  .aivs-ed__ib { min-width: 44px; height: 44px; }
  .aivs-ed__track { height: 52px; }
  .aivs-ed__bar { height: 42px; }
  .aivs-ed__bartext { line-height: 38px; }
  .aivs-ed__label { height: 52px; }
  .aivs-ed .aivs-btn, .aivs-ed .aivs-btn--small { min-height: 44px; }
  .aivs-ed__slider { height: 44px; }
}
/* tablet: preview + timeline first, the shots as a strip, the tools beside the preview */
@media (max-width: 1100px) {
  .aivs-ed__grid { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto minmax(260px, 1fr) auto; grid-template-areas: "top top" "shots shots" "stage tools" "tl tl"; }
  .aivs-ed__shots { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--ed-line); overflow-x: auto; overflow-y: hidden; }
  .aivs-ed__shot { flex: 0 0 200px; }
}
/* phone / tablet portrait: everything stacked, the tools open as a sheet from the bottom */
@media (max-width: 760px) {
  .aivs-ed { border-radius: 0; margin: 0 -10px; }
  .aivs-ed__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "top" "shots" "stage" "tl"; height: auto; min-height: 0; }
  .aivs-ed.is-full { overflow: auto; }                     /* stacked: the page scrolls, the preview keeps a fixed height */
  .aivs-ed.is-full .aivs-ed__grid { height: auto; min-height: 100dvh; }
  .aivs-ed__screen { height: 38vh; min-height: 160px; flex: 0 0 auto; }
  .aivs-ed__tl { max-height: none; overflow-y: visible; }
  .aivs-ed__shot { flex: 0 0 150px; grid-template-columns: 22px 44px minmax(0, 1fr); min-height: 52px; }
  .aivs-ed__shot img, .aivs-ed__noimg { width: 44px; height: 44px; }
  .aivs-ed__tools-toggle { display: inline-block; }
  .aivs-ed__tools { display: none; position: fixed; left: 0; right: 0; bottom: 0; max-height: 72vh; z-index: 9999; border-left: 0; border-top: 1px solid var(--ed-line); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
  .aivs-ed__tools.is-open { display: flex; }
  .aivs-ed__tools-close { display: inline-block; }
  .aivs-ed__tl { grid-template-columns: 84px minmax(0, 1fr); }
  .aivs-ed__label { font-size: 11px; padding: 0 4px; }
  .aivs-ed__save { font-size: 13px; }
  .aivs-ed__export { display: none; }
  .aivs-ed__zoom { margin-left: 0; }
}

/* v1.9.15: kept ranges (the clip's own sound never turned down), clip groups, carry-over bars */
.aivs-ed__keepblk { position: absolute; top: 0; bottom: 0; background: rgba(34,197,94,.22); border-left: 2px solid #22c55e; border-right: 2px solid #22c55e; cursor: pointer; }
.aivs-ed__keep .aivs-ed__cutname { color: #86efac; }
.aivs-ed .aivs-ed__keepbtn { border-color: #22c55e; color: #86efac; }
.aivs-ed__clipgrp { position: absolute; top: 0; height: 14px; line-height: 14px; font-size: 10px; padding: 0 6px; box-sizing: border-box; border-top: 2px solid #a78bfa; border-left: 2px solid #a78bfa; border-right: 2px solid #a78bfa; color: #ddd6fe; background: rgba(167,139,250,.12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.aivs-ed__clipgrp.is-cont { border-color: #22c55e; color: #bbf7d0; background: rgba(34,197,94,.12); }
.aivs-ed__track--video.has-clips .aivs-ed__clipname { top: 17px; }
.aivs-ed__bar.is-carry { outline: 2px dashed #22c55e; outline-offset: -2px; }
.aivs-ed__cont { white-space: nowrap; }
.aivs-ed__ownnote { color: #bbf7d0; }

/* v1.9.15 a film cut with the original clips because the lip sync failed: said in the headline */
.aivs-result--lipfail { outline: 2px solid #f0b98a; outline-offset: 2px; border-radius: 8px; }
.aivs-result__lipfail { color: #8a3a00; }

/* v1.9.15 (14 Oct): each row of the timeline can be hidden (a thin strip with its name stays, to bring it back) */
.aivs-ed__lbtext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aivs-ed__eye { margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ed-muted); cursor: pointer; font-size: 13px; line-height: 22px; flex: 0 0 auto; touch-action: auto; }
.aivs-ed__eye:hover { background: var(--ed-panel2); color: var(--ed-ink); }
.aivs-ed__label.is-hidden, .aivs-ed__track.is-hidden { height: 20px !important; }
.aivs-ed__label.is-hidden { color: var(--ed-muted); opacity: .75; font-size: 11px; }
.aivs-ed__label.is-hidden .aivs-ed__eye { opacity: .6; line-height: 20px; height: 20px; }
.aivs-ed__track.is-hidden > * { display: none !important; }
.aivs-ed__track.is-hidden { background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.04) 6px 12px); cursor: default; }
/* the save row of the tools panel stays in view while the rest of the panel scrolls (the panel is taller than the window now) */
.aivs-ed__sect--save { position: sticky; bottom: -12px; margin: auto -12px -12px; padding: 10px 12px 12px; background: var(--ed-panel); border-top: 1px solid var(--ed-line); z-index: 2; }

/* v1.9.17 the job page in a fixed order: the result, what needs you now, the shots (small cards), the rest folded */
.aivs-fold { margin: 16px 0; background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: var(--aivs-radius); }
.aivs-fold > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.aivs-fold > summary::-webkit-details-marker { display: none; }
.aivs-fold > summary::before { content: "▸"; color: var(--aivs-muted); transition: transform .15s; }
.aivs-fold[open] > summary::before { transform: rotate(90deg); }
.aivs-fold[open] > summary { border-bottom: 1px solid var(--aivs-line); }
.aivs-fold > :not(summary) { margin: 12px 16px; }
.aivs-fold--cast > .aivs-cast { border: 0; padding: 0; background: none; }
.aivs-fold--cast > .aivs-cast > h3 { display: none; }
.aivs-fold--tools > section, .aivs-fold--tools > div, .aivs-fold--tools > details { margin-bottom: 14px; }
.aivs-shots { margin: 22px 0; }
.aivs-shots__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.aivs-shots__head h3 { margin: 0; font-size: 15px; flex: 1 1 auto; }
.aivs-shots__head h3 .aivs-muted { font-weight: 400; font-size: 13px; }
.aivs-shots__view { margin: 0; }
.aivs-shots .aivs-sheet { margin-top: 14px; }
.aivs-sheet--compact.aivs-sheet--short { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.aivs-sheet--compact.aivs-sheet--film { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.aivs-shot--mini { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.aivs-shot--mini:hover, .aivs-shot--mini:focus-visible { border-color: var(--aivs-primary); box-shadow: 0 0 0 1px var(--aivs-primary); outline: none; }
.aivs-shot--mini.has-warn { border-color: #f0b98a; }
.aivs-shot--mini .aivs-shot__body { padding: 8px 10px 10px; gap: 6px; }
.aivs-mini__dots { display: flex; gap: 5px; }
.aivs-dot--done { background: var(--aivs-done); }
.aivs-dot--working { background: var(--aivs-work); animation: aivs-pulse 1.4s ease-in-out infinite; }
.aivs-dot--pending { background: transparent; box-shadow: inset 0 0 0 1.5px var(--aivs-idle); }
.aivs-dot--skip { opacity: .3; }
.aivs-mini__line { margin: 0; font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aivs-mini__flags { display: flex; flex-wrap: wrap; gap: 4px; }
.aivs-flag { font-size: 11px; line-height: 1.3; padding: 1px 6px; border-radius: 999px; background: var(--aivs-canvas); color: var(--aivs-muted); }
.aivs-flag--warn { background: #fff3e8; color: #8a3a00; }
.aivs-flag--err { background: #fcf0f1; color: var(--aivs-fail); }
.aivs-flag--edit { background: #f0f6fc; color: var(--aivs-primary); }
.aivs-flag--info { background: #edfaef; color: var(--aivs-done); }
.aivs-mini__open { font-size: 12px; color: var(--aivs-primary); margin-top: auto; }
/* one card opened in the compact view: the whole row, picture on the left */
.aivs-sheet--compact .aivs-shot.is-open { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; border-color: var(--aivs-primary); }
.aivs-sheet--compact.aivs-sheet--short .aivs-shot.is-open .aivs-frame { flex: 0 0 220px; border-bottom: 0; }
.aivs-sheet--compact.aivs-sheet--film .aivs-shot.is-open .aivs-frame { flex: 0 0 360px; border-bottom: 0; }
.aivs-shot__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aivs-openedit { font-weight: 600; }
@media (max-width: 700px) {
  .aivs-sheet--compact.aivs-sheet--short { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .aivs-sheet--compact .aivs-shot.is-open { flex-direction: column; }
  .aivs-sheet--compact.aivs-sheet--short .aivs-shot.is-open .aivs-frame, .aivs-sheet--compact.aivs-sheet--film .aivs-shot.is-open .aivs-frame { flex: none; width: 100%; max-width: 260px; align-self: center; }
  .aivs-mini__line { font-size: 12px; }
}
.aivs-issues__more > summary { cursor: pointer; color: var(--aivs-primary); font-size: 13px; margin: 2px 0 6px; }

/* v1.9.17 edit page: the shot tools moved from the job page (lip sync, voices, make again, music again) */
.aivs-ed textarea, .aivs-ed input[type=text] { background: var(--ed-panel2); color: var(--ed-ink); border: 1px solid var(--ed-line); border-radius: 6px; padding: 6px 8px; font: inherit; }
.aivs-ed__more { gap: 8px; }
.aivs-ed__more > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; list-style: none; padding: 2px 0; }
.aivs-ed__more > summary::-webkit-details-marker { display: none; }
.aivs-ed__more > summary::before { content: '▸'; color: var(--ed-muted); font-size: 11px; width: 10px; transition: transform .15s; }
.aivs-ed__more[open] > summary::before { transform: rotate(90deg); }
.aivs-ed__more > summary:hover { color: #fff; }
.aivs-ed__more[open] > summary { margin-bottom: 4px; }
.aivs-ed__badge { margin-left: auto; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--ed-panel2); color: var(--ed-muted); border: 1px solid var(--ed-line); white-space: nowrap; }
.aivs-ed__more--regen .aivs-ed__badge { color: var(--ed-warn); border-color: rgba(240,163,94,.5); }
.aivs-ed__more--voice .aivs-ed__badge { color: var(--ed-warn); border-color: rgba(240,163,94,.5); }
.aivs-ed__lipstate.is-done { color: #86efac; }
.aivs-ed__lipsel { flex: 1 1 140px; min-width: 0; max-width: 100%; }
.aivs-ed__voices { display: flex; flex-direction: column; gap: 8px; }
.aivs-ed__vrow { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; }
.aivs-ed__vrow.is-focus { border-color: var(--ed-accent); background: rgba(34,193,183,.07); }
.aivs-ed__vrow.is-changed .aivs-ed__vname::after { content: ' • ยังไม่ใช้'; color: var(--ed-warn); font-weight: 400; font-size: 11px; }
.aivs-ed__vname { font-size: 13px; font-weight: 600; }
.aivs-ed__vrow .aivs-voicepick { display: flex; gap: 6px; align-items: center; }
.aivs-ed__vrow .aivs-voice-select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.aivs-ed__ints { display: flex; flex-direction: column; gap: 4px; }
.aivs-ed__seg { display: flex; flex-wrap: wrap; gap: 4px; }
.aivs-ed__seg button { flex: 1 1 auto; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ed-line); background: var(--ed-panel2); color: var(--ed-ink); cursor: pointer; font: inherit; font-size: 12px; }
.aivs-ed__seg button.is-on { background: var(--ed-accent); border-color: var(--ed-accent); color: var(--ed-accent-ink); font-weight: 600; cursor: default; }
.aivs-ed__seg button:disabled:not(.is-on) { opacity: .5; cursor: default; }
.aivs-ed__targets { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.aivs-ed__field { display: flex; flex-direction: column; gap: 4px; }
.aivs-ed__regen-in { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.4; font-size: 12.5px; }
.aivs-ed__warnnote { margin: 0; padding: 6px 8px; border-radius: 6px; background: rgba(240,163,94,.12); border: 1px solid rgba(240,163,94,.45); color: #fcd9b6; font-size: 12.5px; line-height: 1.45; }
/* the row's action button (🗣 / ↻) looks like the 👁 button but is its own element (selectors for 👁 stay exact) */
.aivs-ed__lbact { margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ed-muted); cursor: pointer; font-size: 13px; line-height: 22px; flex: 0 0 auto; touch-action: auto; }
.aivs-ed__lbact:hover:not(:disabled) { background: var(--ed-panel2); color: var(--ed-ink); }
.aivs-ed__lbact + .aivs-ed__eye { margin-left: 2px; }
.aivs-ed__lbact:disabled { opacity: .4; cursor: default; }
.aivs-ed__label--ro { opacity: 1; }
.aivs-ed__label--ro .aivs-ed__lbtext, .aivs-ed__label--ro .aivs-ed__grip { opacity: .6; }
.aivs-ed__label.is-hidden .aivs-ed__lbact { display: none; }
.aivs .aivs-ed .aivs-input, .aivs .aivs-ed select, .aivs .aivs-ed textarea { color: var(--ed-ink); background-color: var(--ed-panel2); border-color: var(--ed-line); }
.aivs .aivs-ed .aivs-voicepick .aivs-voice-select { width: auto; flex: 1 1 auto; min-width: 0; }
.aivs-ed__tl { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 760px) {
  .aivs-ed__tl { grid-template-columns: 96px minmax(0, 1fr); }
  .aivs-ed__lbact[data-key^="sp:"] { display: none; }      /* the voices are in the tools sheet (⚙) on a phone */
}

/* v1.9.17 create page: the essentials up front, the rest folded with a one-line summary */
.aivs-more--settings { border: 1px solid var(--aivs-line); border-radius: 10px; padding: 12px 16px; margin: 4px 0 20px; background: var(--aivs-canvas); }
.aivs .aivs-more--settings > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; list-style: none; color: var(--aivs-ink); }
.aivs-more--settings > summary::-webkit-details-marker { display: none; }
.aivs-more--settings[open] > summary { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--aivs-line); }
.aivs-more__title { font-weight: 600; color: var(--aivs-primary); }
.aivs-more__title::before { content: '▸'; display: inline-block; width: 1em; transition: transform .15s; }
.aivs-more--settings[open] .aivs-more__title::before { transform: rotate(90deg); }
.aivs-more__sum { color: var(--aivs-muted); font-size: 12.5px; line-height: 1.5; }
.aivs-field--model { margin-bottom: 4px; }

/* v1.10 studio (the app served by the worker itself): who is logged in, the owner's settings page */
.aivs-usermenu { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-bottom: 8px; font-size: 13px; color: var(--aivs-muted); }
.aivs-usermenu__name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aivs--studio .aivs-head { align-items: center; }
.aivs--studio .aivs-head .aivs-tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
.aivs--studio .aivs-head .aivs-tabs::-webkit-scrollbar { display: none; }
.aivs--studio .aivs-head .aivs-tabs a { white-space: nowrap; }
.aivs--studio .aivs-brand { padding-bottom: 4px; }
.aivs-settings2 { display: flex; flex-direction: column; gap: 16px; }
.aivs-panel { background: var(--aivs-paper); border: 1px solid var(--aivs-line); border-radius: 10px; padding: 16px 18px; }
.aivs-panel > h2 { font-size: 16px; margin: 0 0 10px; }
.aivs-panel h4 { font-size: 14px; margin: 16px 0 6px; }
.aivs-kv { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.aivs-kv th, .aivs-kv td { border-bottom: 1px solid var(--aivs-line); padding: 7px 8px; text-align: left; vertical-align: top; }
.aivs-kv th { color: var(--aivs-muted); font-weight: 600; white-space: nowrap; width: 1%; }
.aivs-kv--grid th { width: auto; background: var(--aivs-canvas); }
.aivs-kv:not(.aivs-kv--grid) { table-layout: fixed; }
.aivs-kv:not(.aivs-kv--grid) th { width: 170px; white-space: normal; }
.aivs-kv:not(.aivs-kv--grid) td { overflow-wrap: anywhere; }
.aivs-kv td.is-ok, .aivs-kv .is-ok { color: var(--aivs-done); font-weight: 600; }
.aivs-kv td.is-bad, .aivs-kv .is-bad { color: var(--aivs-fail); font-weight: 600; }
.aivs-kv .is-skip { color: var(--aivs-muted); }
.aivs-kv tr.is-off td { color: var(--aivs-muted); }
.aivs-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aivs-members td { white-space: nowrap; }
.aivs-members__acts { display: flex; gap: 6px; }
.aivs .aivs-input--auto { width: auto; }
.aivs .aivs-input--num { width: 90px; display: inline-block; }
.aivs-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aivs-linkbox { margin-top: 12px; padding: 12px; border: 1px solid #b6d4ee; background: #f2f8fd; border-radius: 8px; }
.aivs-linkbox p { margin: 0; }
.aivs-linkbox__url { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.aivs-plainlist { margin: 0; padding-left: 18px; font-size: 13.5px; }
.aivs-plainlist li { margin: 4px 0; }
.aivs-settings2 .aivs-actions > .aivs-input:not(.aivs-input--auto):not(.aivs-input--num) { flex: 1 1 220px; width: auto; }
@media (max-width: 760px) {
  .aivs-row--3 { grid-template-columns: minmax(0, 1fr); }
  .aivs-usermenu__name { max-width: 140px; }
  .aivs-panel { padding: 14px 12px; }
  .aivs-kv:not(.aivs-kv--grid) th { width: 34%; padding-left: 4px; }
  /* the tab row scrolls sideways on a phone: fade its right edge so the hidden tabs (ตั้งค่า) are found */
  .aivs--studio .aivs-head .aivs-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); padding-right: 32px; }
  .aivs-kv th, .aivs-kv td { padding: 7px 6px; }
}