/* Shared editing workspace. Header/actions stay outside the scrolling tools. */
.gi-video-editor {
  --ve-surface: var(--gi-color-surface, #fff);
  --ve-text: var(--gi-color-text, #17243b);
  --ve-muted: var(--gi-color-text-soft, #4b5563);
  --ve-border: var(--gi-color-border, #dde3eb);
  --ve-brand: var(--gi-color-primary, #1d426f);
  --ve-soft: var(--gi-brand-50, #f4f7fb);
  --ve-success: var(--gi-color-success-strong, #15803d);
  --ve-danger: var(--gi-color-danger-strong, #b91c1c);
  box-sizing: border-box;
  width: min(1240px, 96vw);
  max-width: 96vw;
  height: min(900px, 94dvh);
  max-height: 94dvh;
  padding: 0;
  border: 0;
  border-radius: var(--gi-radius-2xl, 24px);
  background: var(--ve-surface);
  color: var(--ve-text);
  font: 400 15px/1.6 Tajawal, system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: var(--gi-shadow-xl, 0 24px 80px rgb(0 0 0 / 24%));
}
.gi-video-editor[open] { display: flex; flex-direction: column; }
.gi-video-editor *, .gi-video-editor *::before, .gi-video-editor *::after { box-sizing: border-box; }
.gi-video-editor::backdrop { background: rgb(9 18 31 / 72%); backdrop-filter: blur(6px); }
.gi-video-editor h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; }
.gi-video-editor h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.gi-ve-header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--ve-border); }
.gi-ve-eyebrow { display: block; margin-bottom: 4px; color: var(--ve-muted); font-size: 12px; }
.gi-ve-workflow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--ve-muted); font-size: 12px; }
.gi-ve-workflow > * { display: flex; align-items: center; gap: 8px; }
.gi-ve-workflow [aria-current=step] { color: var(--ve-brand); font-weight: 600; }
.gi-ve-workflow > * + *::before { content: '/'; color: var(--ve-border); font-weight: 400; }
.gi-ve-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .7fr); overflow: hidden; }
.gi-ve-body > * { min-width: 0; min-height: 0; }
.gi-ve-preview { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--ve-soft); overflow: auto; }
.gi-ve-preview-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.gi-ve-compare { display: inline-flex; gap: 4px; padding: 4px; background: var(--ve-surface); border-radius: var(--gi-radius-pill, 999px); box-shadow: var(--gi-shadow-xs, 0 1px 3px rgb(15 23 42 / 7%)); }
.gi-ve-badge { max-width: 100%; font-size: 12px; color: var(--ve-muted); }
.gi-ve-badge[data-ready=true] { color: var(--ve-success); }
.gi-ve-badge[data-ready=true]::before { content: '✓ '; }
.gi-ve-screen { flex: 1 1 auto; min-height: 160px; display: grid; place-items: center; width: 100%; border-radius: var(--gi-radius-lg, 16px); background: var(--gi-brand-900, #0d1f33); overflow: hidden; }
.gi-ve-screen video { width: 100%; height: 100%; min-height: 0; max-height: 100%; object-fit: contain; }
.gi-ve-caption { font-size: 12px; color: var(--ve-muted); margin: 8px 0 16px; line-height: 1.6; }
.gi-ve-preview > .gi-ve-caption { flex: 0 0 auto; margin: 0; }
.gi-ve-preview > .gi-button { align-self: flex-start; flex: 0 0 auto; }
.gi-ve-summary { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; padding: 16px; background: var(--ve-surface); border-radius: var(--gi-radius-lg, 16px); }
.gi-ve-summary > span { font-size: 12px; color: var(--ve-muted); }
.gi-ve-summary > span + span { border-inline-start: 1px solid var(--ve-border); padding-inline-start: 16px; }
.gi-ve-summary strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 600; color: var(--ve-text); font-variant-numeric: tabular-nums; text-align: start; }
.gi-ve-inspector { display: flex; flex-direction: column; padding: 0; border-inline-start: 1px solid var(--ve-border); overflow: hidden; }
.gi-ve-tabs { flex: 0 0 auto; display: flex; gap: 4px; margin: 0; padding: 12px 16px 0; border-bottom: 1px solid var(--ve-border); }
.gi-ve-tabs [role=tab] { flex: 1; min-width: 0; min-height: 48px; padding: 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ve-muted); font: inherit; font-size: 13px; cursor: pointer; }
.gi-ve-tabs [aria-selected=true] { border-bottom-color: var(--ve-brand); color: var(--ve-brand); font-weight: 600; }
.gi-ve-inspector > form { flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto; padding: 20px 24px; scrollbar-gutter: stable; overscroll-behavior: contain; scroll-padding-block: 16px; }
.gi-ve-panel-intro { margin-bottom: 20px; }
.gi-ve-panel-intro h3 { margin-bottom: 4px; }
.gi-ve-panel-intro p { margin: 0; color: var(--ve-muted); font-size: 13px; }
.gi-video-editor fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.gi-ve-fields { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.gi-ve-field { display: block; min-width: 0; margin-bottom: 16px; font-size: 13px; }
.gi-ve-field > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.gi-video-editor .gi-input { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ve-border); border-radius: var(--gi-radius-md, 12px); background: var(--ve-surface); color: var(--ve-text); font: inherit; }
.gi-video-editor textarea { resize: vertical; min-height: 128px; max-height: 240px; }
.gi-video-editor input[type=number] { direction: ltr; font-variant-numeric: tabular-nums; }
.gi-video-editor input[type=range] { direction: ltr; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; accent-color: var(--ve-brand); cursor: pointer; background: transparent; }
.gi-video-editor output { font-size: 12px; color: var(--ve-muted); font-variant-numeric: tabular-nums; direction: ltr; }
.gi-ve-field output { padding: 0 8px; border-radius: var(--gi-radius-sm, 8px); background: var(--ve-soft); }
/* Single time axis: hatched areas are removed; the framed segment is kept. */
.gi-ve-trimmer { padding: 16px 12px; margin-bottom: 12px; border: 1px solid var(--ve-border); border-radius: 16px; background: var(--ve-soft); }
.gi-ve-trim-readout { display: grid; grid-template-columns: 1fr 1.3fr 1fr; direction: ltr; gap: 6px; text-align: center; font-size: 12px; }
.gi-ve-trim-readout > span { direction: rtl; }
.gi-ve-trim-readout strong { display: block; color: var(--ve-text); font-size: 17px; font-variant-numeric: tabular-nums; }
.gi-ve-trim-readout > span:nth-child(2) strong { color: var(--ve-brand); }
.gi-ve-trim-rail { margin: 20px 0 0; padding: 0 44px; }
.gi-ve-trim-track { position: relative; height: 64px; background: repeating-linear-gradient(135deg,#e4e8ef 0 6px,#f6f7fa 6px 12px); border-block: 1px solid var(--ve-border); }
.gi-ve-trim-kept { position: absolute; top: -1px; bottom: -1px; left: 0; width: 100%; background: #dae9fb; border-block: 4px solid var(--ve-brand); }
.gi-video-editor .gi-ve-trim-grip { position: absolute; top: -1px; width: 44px; height: 64px; padding: 4px 0; border: 0; border-radius: 8px 0 0 8px; background: var(--ve-brand); color: #fff; font: inherit; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; user-select: none; }
.gi-ve-trim-grip b { font-size: 22px; line-height: 1.2; }
.gi-ve-trim-grip--start { left: 0; transform: translateX(-100%); }
.gi-video-editor .gi-ve-trim-grip--end { left: 100%; border-radius: 0 8px 8px 0; }
.gi-video-editor .gi-ve-trim-grip:focus-visible { outline: 3px solid #bd5800; outline-offset: 3px; z-index: 2; }
.gi-ve-trim-scale { display: flex; justify-content: space-between; margin: 6px 44px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.gi-ve-trim-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 12px; }
.gi-ve-trim-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gi-ve-trim-legend i { display: inline-block; width: 18px; height: 12px; border-radius: 2px; }
.gi-ve-legend-kept { background: #dae9fb; border: 2px solid var(--ve-brand); }
.gi-ve-legend-removed { background: repeating-linear-gradient(135deg,#c3cad5 0 3px,#f6f7fa 3px 6px); border: 1px solid #c3cad5; }
.gi-video-editor .gi-ve-whole { display: flex; margin: 10px auto 0; min-height: 44px; font-size: 12px; }
.gi-ve-precise { margin-top: 8px; }
.gi-ve-precise summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-size: 13px; color: var(--ve-brand); }
.gi-ve-precise[open] summary { margin-bottom: 8px; }
.gi-ve-markers { display: flex; flex-wrap: wrap; gap: 8px; }
.gi-ve-markers > button { flex: 1; }
.gi-ve-divider { border-top: 1px solid var(--ve-border); margin: 20px 0; }
.gi-ve-audio { display: flex; align-items: center; gap: 16px; }
.gi-ve-audio label { flex: 1; min-width: 0; margin-bottom: 0; }
.gi-ve-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.gi-ve-history { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 12px 24px; border-top: 1px solid var(--ve-border); background: var(--ve-surface); }
.gi-video-editor .gi-button, .gi-manual-edit-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ve-border, var(--gi-color-border, #dde3eb)); border-radius: var(--gi-radius-pill, 999px); background: var(--ve-surface, var(--gi-color-surface, #fff)); color: var(--ve-brand, var(--gi-color-primary, #1d426f)); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.6; cursor: pointer; }
.gi-video-editor .gi-button:hover:not(:disabled) { background: var(--ve-soft); }
.gi-video-editor .gi-button--primary, .gi-video-editor .gi-button[aria-pressed=true] { background: var(--ve-brand); color: var(--gi-color-on-primary, #fff); border-color: var(--ve-brand); }
.gi-video-editor .gi-button--primary:hover:not(:disabled), .gi-video-editor .gi-button[aria-pressed=true]:hover:not(:disabled) { background: var(--gi-color-primary-strong, #173659); }
.gi-video-editor button:disabled { cursor: default; background: var(--gi-color-surface-muted, #eef1f5); border-color: transparent; color: var(--ve-muted); }
.gi-video-editor fieldset:disabled input, .gi-video-editor fieldset:disabled textarea, .gi-video-editor fieldset:disabled select { color: var(--ve-muted); }
.gi-ve-status { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; }
.gi-ve-status p { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gi-ve-status [data-status-icon] { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--ve-soft); font-weight: 600; }
.gi-ve-status[data-kind=error] { color: var(--ve-danger); }
.gi-ve-status[data-kind=success] { color: var(--ve-success); }
.gi-ve-status progress { width: 80px; max-width: 20%; accent-color: var(--ve-brand); }
.gi-ve-footer { flex: 0 0 auto; position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 12px 24px 16px; border-top: 1px solid var(--ve-border); background: var(--ve-surface); }
.gi-ve-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.gi-ve-footer > .gi-ve-status { flex: 1 0 100%; font-size: 12px; }
.gi-ve-footer .gi-ve-caption { margin: 0; }
.gi-ve-footer > div:last-child { margin-inline-start: auto; }
.gi-ve-footer .gi-button--primary { min-width: 152px; }
.gi-ve-discard { position: absolute; z-index: 8; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--ve-border); border-radius: var(--gi-radius-xl, 20px); background: var(--ve-surface); box-shadow: 0 0 0 100vmax rgb(9 18 31 / 55%); }
.gi-ve-discard h3, .gi-ve-discard p { margin: 0 0 16px; }
.gi-ve-discard button { margin-inline-end: 8px; }
.gi-video-editor :focus-visible { outline: var(--gi-focus-ring-width, 2px) solid var(--gi-focus-ring-color, #4672a3); outline-offset: var(--gi-focus-ring-offset, 2px); }
.gi-video-editor [hidden] { display: none !important; }
.gi-manual-edit-button { position: relative; z-index: 3; }
.gi-media-stage__slide > .gi-manual-edit-button { position: absolute; top: 48px; inset-inline-start: 12px; max-width: calc(100% - 24px); }
@media (max-width: 760px) {
  .gi-video-editor { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; inset: 0; margin: 0; border-radius: 0; }
  .gi-ve-header { padding: 12px 16px; gap: 12px; }
  .gi-ve-header h2 { font-size: 17px; }
  .gi-ve-eyebrow { margin-bottom: 0; }
  .gi-ve-workflow { display: none; }
  .gi-ve-body { display: block; overflow: auto; overscroll-behavior: contain; scroll-padding-block: 16px; }
  .gi-ve-preview { padding: 16px; gap: 12px; overflow: visible; }
  .gi-ve-screen { flex: none; height: clamp(176px, 30dvh, 280px); min-height: 0; border-radius: var(--gi-radius-md, 12px); }
  .gi-ve-summary { padding: 12px 16px; gap: 16px; }
  .gi-ve-summary strong { font-size: 17px; margin-top: 0; }
  .gi-ve-inspector { overflow: visible; border-inline-start: 0; border-top: 1px solid var(--ve-border); }
  .gi-ve-tabs { padding: 0 12px; }
  .gi-ve-inspector > form { overflow: visible; padding: 20px 16px; }
  .gi-ve-history { padding: 12px 16px; }
  .gi-ve-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); gap: 8px; }
  .gi-ve-footer > .gi-ve-caption { display: none; }
  .gi-ve-footer > div:last-child { flex: 1 0 100%; }
  .gi-ve-footer button { flex: 1; min-width: 0; }
  .gi-ve-status [data-status-icon] { display: none; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .gi-video-editor { height: 96dvh; max-height: 96dvh; }
  .gi-ve-header { padding-block: 12px; }
  .gi-ve-preview { padding: 16px; gap: 12px; }
  .gi-ve-summary { padding: 8px 16px; }
  .gi-ve-summary strong { font-size: 17px; margin: 0; }
  .gi-ve-preview > .gi-ve-caption { max-width: 64ch; }
}
@media (max-height: 480px) { .gi-ve-eyebrow, .gi-ve-workflow { display: none; } .gi-ve-header { padding-block: 8px; } }
@media (pointer: coarse) { .gi-video-editor input[type=range], .gi-video-editor button, .gi-manual-edit-button { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) { .gi-video-editor .gi-button { transition: background-color var(--gi-transition-fast, .15s), color var(--gi-transition-fast, .15s); } }
/* The live canvas is sized by the editor to match the selected output aspect. */
.gi-ve-screen { position: relative; }
.gi-ve-canvas { position: relative; display: grid; place-items: center; max-width: 100%; max-height: 100%; overflow: hidden; background: #000; }
.gi-ve-canvas video { display: block; width: 100%; height: 100%; object-fit: contain; }
.gi-ve-live-text { position: absolute; inset-inline: 5%; z-index: 2; pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; line-height: 1.4; font-weight: 600; text-shadow: 0 1px 4px #000, 0 0 2px #000; }
.gi-ve-loading { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: var(--gi-brand-900, #0d1f33); color: var(--gi-color-on-primary, #fff); font-size: 13px; text-align: center; }
.gi-ve-preview > [data-play-selection] { align-self: stretch; }
@media (max-width: 760px) {
  .gi-ve-compare { width: 100%; }
  .gi-ve-compare > .gi-button { flex: 1; min-width: 0; padding-inline: 12px; }
}
.gi-ve-live-text { font-weight: 400; }
.gi-ve-live-text[data-position=top] { top: 6.667%; bottom: auto; transform: none; }
.gi-ve-live-text[data-position=middle] { top: 50%; bottom: auto; transform: translateY(-50%); }
.gi-ve-live-text[data-position=bottom] { top: auto; bottom: 6.667%; transform: none; }
.gi-ve-loading { flex-direction: column; }
.gi-ve-loading::before { content: ''; display: block; width: 28px; height: 28px; border: 2px solid var(--gi-brand-700, #173659); border-top-color: var(--gi-color-on-primary, #fff); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .gi-ve-loading::before { animation: gi-ve-loading-turn 1s linear infinite; } }
@keyframes gi-ve-loading-turn { to { transform: rotate(360deg); } }
/* Phone workspace: keep a compact live canvas visible while tools scroll. */
@media (max-width: 760px) and (min-height: 700px) {
  .gi-ve-body { display: flex; flex-direction: column; overflow: hidden; }
  .gi-ve-preview { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, .5fr); align-items: center; padding: 12px 16px; gap: 8px 12px; }
  .gi-ve-preview-bar, .gi-ve-screen, .gi-ve-preview > .gi-ve-caption, .gi-ve-preview > .gi-button:not([data-play-selection]) { grid-column: 1 / -1; }
  .gi-ve-preview-bar { display: block; }
  .gi-ve-badge { display: none; }
  .gi-ve-screen { height: clamp(120px, 19dvh, 164px); }
  .gi-ve-preview > .gi-ve-caption { line-height: 1.5; }
  .gi-ve-summary { padding: 0; gap: 8px; background: transparent; border-radius: 0; }
  .gi-ve-summary > span + span { padding-inline-start: 8px; }
  .gi-ve-summary strong { font-size: 13px; }
  .gi-ve-preview > [data-play-selection] { width: 100%; min-width: 0; padding: 8px; font-size: 12px; }
  .gi-ve-inspector { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .gi-ve-inspector > form { min-height: 0; overflow: auto; padding: 16px; }
  .gi-ve-history { padding: 8px 16px; }
  .gi-ve-panel-intro { font-size: 13px; margin: 0 0 16px; }
}

.gi-video-editor .gi-ve-expand { position: absolute; z-index: 4; top: 8px; inset-inline-end: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px; border-color: var(--gi-brand-500, #4672a3); background: var(--gi-brand-900, #0d1f33); color: var(--gi-color-on-primary, #fff); font-size: 12px; }
.gi-video-editor .gi-ve-expand:hover:not(:disabled) { background: var(--gi-brand-700, #173659); }
.gi-ve-screen:fullscreen { width: 100vw; height: 100dvh; min-height: 0; max-width: none; max-height: none; border-radius: 0; }

.gi-ve-lock-note { flex: 0 0 auto; padding: 12px 16px; background: #fff5df; color: #513d19; border-bottom: 1px solid #ead6ab; font-size: 13px; }
.gi-ve-lock-note p { margin: 0 0 8px; }
.gi-ve-lock-note .gi-button { width: 100%; background: #fff; }

.gi-ve-frame-label { position: absolute; top: 12px; right: 12px; max-width: calc(100% - 80px); padding: 6px 10px; border-radius: 8px; background: #102138e8; color: #fff; font-size: 13px; z-index: 2; pointer-events: none; }
.gi-ve-fine { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12px; }
.gi-ve-fine > div { display: flex; gap: 6px; direction: ltr; }

/* Compact phone workspace leaves room for the trim handles below the canvas. */
@media (max-width: 760px) and (min-height: 600px) {
  .gi-ve-header { padding-block: 8px; }
  .gi-ve-preview { gap: 6px 12px; padding-block: 10px; }
  .gi-ve-screen { height: clamp(112px, 16dvh, 136px); }
  .gi-ve-preview > .gi-ve-caption { font-size: 12px; line-height: 1.4; }
  .gi-ve-summary > span { font-size: 12px; }
  .gi-ve-history { padding-block: 6px; }
  .gi-ve-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, auto); align-items: center; padding-block: 8px max(8px, env(safe-area-inset-bottom)); gap: 8px 12px; }
  .gi-ve-footer > .gi-ve-status { min-width: 0; font-size: 12px; line-height: 1.5; }
  .gi-ve-footer > div:last-child { grid-column: 2; grid-row: 1; margin-inline-start: 0; }
  .gi-ve-footer > div:last-child button { width: 100%; min-height: 44px; }
  .gi-video-editor[data-status-kind=error] .gi-ve-body { display: block; overflow: auto; }
  .gi-video-editor[data-status-kind=error] .gi-ve-footer { max-height: 35dvh; overflow: auto; }
  .gi-ve-footer > .gi-ve-status[data-kind=error] { grid-column: 1 / -1; }
  .gi-ve-footer > .gi-ve-status[data-kind=error] ~ div:last-child { grid-row: 2; }
}