/* Video speech to WeChat article workbench. */
.wagif-tool { --wagif-accent:#0f766e; --wagif-soft:#ecfdf5; display:grid; gap:14px; }
.wagif-file-input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.wagif-intro { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid #99f6e4; border-radius:var(--radius-md); background:linear-gradient(135deg,#f0fdfa,#f8fafc); }
.wagif-intro span { display:inline-flex; flex:none; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; color:#115e59; background:#ccfbf1; font-size:12px; font-weight:800; }
.wagif-intro p { margin:0; color:#334155; font-size:14px; line-height:1.65; }
.wagif-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; margin:0; list-style:none; counter-reset:none; }
.wagif-steps li { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-areas:"number copy" "state state"; gap:8px 10px; min-width:0; padding:12px; border:1px solid var(--color-border); border-radius:var(--radius-md); color:#475569; background:#fff; box-shadow:var(--shadow-sm); transition:border-color .18s ease,background .18s ease; }
.wagif-step-number { grid-area:number; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#475569; background:#e2e8f0; font-size:13px; font-weight:800; }
.wagif-step-copy { grid-area:copy; display:grid; min-width:0; gap:3px; }
.wagif-step-copy strong { color:#1e293b; font-size:13px; line-height:1.35; overflow-wrap:anywhere; }
.wagif-step-copy small { color:#64748b; font-size:11px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.wagif-step-state { grid-area:state; display:inline-flex; align-items:center; justify-self:start; gap:6px; min-width:0; padding:4px 7px; border-radius:999px; color:#64748b; background:#f1f5f9; font-size:11px; font-weight:800; }
.wagif-step-state i { width:7px; height:7px; border-radius:50%; background:#94a3b8; }
.wagif-steps li.is-current { border-color:#5eead4; background:#f0fdfa; }
.wagif-steps li.is-current .wagif-step-number { color:#fff; background:var(--wagif-accent); }
.wagif-steps li.is-working { border-color:#67e8f9; background:#ecfeff; }
.wagif-steps li.is-working .wagif-step-number { color:#0e7490; background:#cffafe; }
.wagif-steps li.is-working .wagif-step-state { color:#0e7490; background:#cffafe; }
.wagif-steps li.is-working .wagif-step-state i { background:#06b6d4; animation:wagif-pulse 1.1s ease-in-out infinite; }
.wagif-steps li.is-complete { border-color:#86efac; background:#f0fdf4; }
.wagif-steps li.is-complete .wagif-step-number { color:#fff; background:#16a34a; }
.wagif-steps li.is-complete .wagif-step-state { color:#166534; background:#dcfce7; }
.wagif-steps li.is-complete .wagif-step-state i { background:#16a34a; }
.wagif-steps li.is-attention { border-color:#fdba74; background:#fff7ed; }
.wagif-steps li.is-attention .wagif-step-number { color:#9a3412; background:#ffedd5; }
.wagif-steps li.is-attention .wagif-step-state { color:#9a3412; background:#ffedd5; }
.wagif-steps li.is-attention .wagif-step-state i { background:#ea580c; }
@keyframes wagif-pulse { 50% { opacity:.35; transform:scale(.72); } }
.wagif-panel { min-width:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-sm); }
.wagif-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid var(--color-border); }
.wagif-panel-head h2 { margin:0; color:#0f172a; font-size:16px; }
.wagif-panel-head p { margin:4px 0 0; color:var(--color-muted); font-size:13px; line-height:1.55; }
.wagif-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wagif-video-drop { display:grid; min-height:240px; margin:14px; overflow:hidden; border:1px dashed #5eead4; border-radius:var(--radius-md); background:#f8fffe; cursor:pointer; transition:.18s ease; }
.wagif-video-drop:hover,.wagif-video-drop:focus,.wagif-video-drop.is-dragover { border-color:var(--wagif-accent); background:var(--wagif-soft); box-shadow:0 0 0 3px rgba(13,148,136,.12); outline:0; }
.wagif-video-drop video { display:block; width:100%; max-height:480px; background:#0f172a; }
.wagif-video-drop [data-wagif-empty] { display:grid; place-content:center; justify-items:center; gap:10px; padding:30px; color:#475569; text-align:center; }
.wagif-video-drop [data-wagif-empty] svg { width:32px; height:32px; color:var(--wagif-accent); }
.wagif-video-drop [data-wagif-empty] strong { color:#0f172a; font-size:16px; }
.wagif-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; border-top:1px solid var(--color-border); background:var(--color-border); }
.wagif-meta div { min-width:0; padding:10px 14px; background:#fff; }
.wagif-meta dt { color:#64748b; font-size:11px; font-weight:800; text-transform:uppercase; }
.wagif-meta dd { overflow:hidden; margin:4px 0 0; color:#1e293b; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.wagif-local-note { display:flex; align-items:flex-start; gap:8px; margin:14px 16px 0; padding:10px 12px; border:1px solid #bbf7d0; border-radius:var(--radius-sm); color:#166534; background:#f0fdf4; font-size:13px; line-height:1.55; }
.wagif-local-note svg { flex:none; width:17px; }
.wagif-textarea-label,.wagif-key-grid label,.wagif-gif-settings label,.wagif-article-fields label { display:grid; gap:6px; min-width:0; color:#475569; font-size:12px; font-weight:800; }
.wagif-textarea-label { padding:14px 16px; }
.wagif-tool textarea,.wagif-tool input,.wagif-tool select { box-sizing:border-box; width:100%; min-height:38px; border:1px solid #cbd5e1; border-radius:var(--radius-sm); padding:8px 10px; color:#1e293b; background:#fff; font:inherit; font-weight:600; }
.wagif-tool textarea { min-height:66px; line-height:1.5; resize:vertical; }
.wagif-tool input:focus,.wagif-tool textarea:focus,.wagif-tool select:focus { border-color:#2dd4bf; outline:0; box-shadow:0 0 0 3px rgba(45,212,191,.16); }
.wagif-final-transcript { border-top:1px solid var(--color-border); background:#f8fbff; }
.wagif-final-transcript-head { padding:14px 16px 0; }
.wagif-final-transcript-head h3 { margin:0; color:#0f172a; font-size:14px; }
.wagif-final-transcript-head p { margin:4px 0 0; color:#64748b; font-size:12px; line-height:1.55; }
.wagif-transcript-list { display:grid; gap:9px; padding:12px 16px 16px; }
.wagif-transcript-row { display:grid; grid-template-columns:128px minmax(0,1fr); gap:8px; align-items:start; padding:10px; border:1px solid #dbeafe; border-radius:var(--radius-sm); background:#fff; }
.wagif-transcript-row time { display:block; padding-top:10px; color:#0369a1; font-size:12px; font-weight:800; }
.wagif-key-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.35fr) auto; gap:10px; align-items:end; padding:14px 16px 0; }
.wagif-key-grid .wagif-remember { display:flex; align-items:center; gap:7px; min-height:38px; white-space:nowrap; }
.wagif-key-grid .wagif-remember input,.wagif-loop input { width:auto; min-height:auto; margin:0; }
.wagif-key-help { margin:10px 16px 0; color:#64748b; font-size:12px; line-height:1.55; }
.wagif-proofread-panel .wagif-actions { padding:14px 16px; }
.wagif-key-summary { color:#64748b; font-size:12px; font-weight:700; }
.wagif-timeline { position:relative; height:86px; margin:16px 16px 0; overflow:hidden; border:1px solid #cbd5e1; border-radius:var(--radius-sm); background:repeating-linear-gradient(90deg,#f8fafc 0,#f8fafc calc(10% - 1px),#e2e8f0 calc(10% - 1px),#e2e8f0 10%); touch-action:none; }
.wagif-ruler { position:absolute; inset:0 0 auto; height:25px; border-bottom:1px solid #cbd5e1; }
.wagif-ruler span { position:absolute; top:4px; transform:translateX(-50%); color:#64748b; font-size:10px; font-weight:700; white-space:nowrap; }
.wagif-ruler span:first-child { transform:none; }
.wagif-ruler span:last-child { transform:translateX(-100%); }
.wagif-playhead { position:absolute; top:25px; bottom:0; z-index:3; width:2px; background:#dc2626; pointer-events:none; }
.wagif-clips { position:absolute; inset:31px 4px 6px; }
.wagif-clip { position:absolute; display:flex; align-items:center; justify-content:space-between; min-width:8px; height:36px; overflow:hidden; border:1px solid #0f766e; border-radius:5px; color:#fff; background:rgba(13,148,136,.85); cursor:grab; user-select:none; }
.wagif-clip:not(.is-selected) { opacity:.36; }
.wagif-clip span { overflow:hidden; padding:0 3px; font-size:10px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.wagif-clip-handle { flex:none; width:8px; height:100%; border:0; padding:0; background:rgba(255,255,255,.7); cursor:ew-resize; }
.wagif-timeline-hint { margin:7px 16px 0; color:#64748b; font-size:12px; }
.wagif-clip-list { display:grid; gap:8px; padding:14px 16px; }
.wagif-clip-row { display:grid; grid-template-columns:auto 72px minmax(112px,.6fr) minmax(112px,.6fr) auto; gap:8px; align-items:end; padding:9px; border:1px solid #e2e8f0; border-radius:var(--radius-sm); background:#fff; }
.wagif-clip-row > input { width:auto; min-height:auto; margin:0 0 10px; }
.wagif-clip-row strong { padding-bottom:10px; color:#0f172a; font-size:13px; }
.wagif-clip-row label { display:grid; gap:5px; color:#64748b; font-size:11px; font-weight:800; }
.wagif-clip-row input { min-height:34px; }
.wagif-clip-row .icon-button { width:34px; min-width:34px; min-height:34px; border:1px solid #fecaca; border-radius:var(--radius-sm); color:#b91c1c; background:#fff; cursor:pointer; font-size:19px; line-height:1; }
.wagif-gif-settings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 16px 14px; }
.wagif-loop { display:flex !important; align-items:center; gap:7px; padding-top:25px; }
.wagif-segments-panel > .wagif-actions { padding:0 16px 14px; }
.wagif-progress { margin:0 16px 14px; padding:10px; border-radius:var(--radius-sm); background:#f1f5f9; color:#334155; font-size:12px; font-weight:800; }
.wagif-asr-progress { margin-top:14px; }
.wagif-progress > div { height:7px; margin-top:8px; overflow:hidden; border-radius:99px; background:#cbd5e1; }
.wagif-progress i { display:block; height:100%; border-radius:99px; background:var(--wagif-accent); transition:width .16s ease; }
.wagif-cancel-transcribe { margin-top:10px; min-height:32px; font-size:12px; }
.wagif-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:12px; padding:0 16px 16px; }
.wagif-empty-results { grid-column:1/-1; margin:0; padding:18px; border:1px dashed #cbd5e1; border-radius:var(--radius-sm); color:#64748b; text-align:center; }
.wagif-result-card { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:start; padding:9px; border:1px solid #e2e8f0; border-radius:var(--radius-sm); background:#fff; }
.wagif-result-card img { grid-column:1/-1; display:block; width:100%; max-height:180px; object-fit:contain; border-radius:4px; background:#f1f5f9; }
.wagif-result-card input { width:auto; min-height:auto; margin:3px 0; }
.wagif-result-card p { margin:0; color:#475569; font-size:11px; font-weight:700; }
.wagif-result-card a { grid-column:1/-1; justify-content:center; min-height:32px; font-size:12px; }
.wagif-article-fields { display:grid; grid-template-columns:1fr; gap:12px; padding:14px 16px; }
.wagif-article-summary { margin:0; padding:0 16px 12px; color:#64748b; font-size:13px; }
.wagif-section-heading { display:grid; gap:6px; margin:0 16px 12px; color:#0f766e; font-size:12px; font-weight:800; }
.wagif-article-preview { margin:0 16px 14px; padding:22px clamp(16px,4vw,42px); border:1px solid #e2e8f0; border-radius:var(--radius-sm); background:#fff; }
.wagif-copy-actions { padding:0 16px 8px; }
.wagif-upload-note { margin:0; padding:0 16px 16px; color:#64748b; font-size:12px; line-height:1.6; }
.wagif-status.is-error { color:#b91c1c; }
.wagif-status { margin:0; }
.wagif-tool.is-busy .wagif-panel { opacity:.83; }
@media (max-width:760px) { .wagif-panel-head { display:grid; } .wagif-steps { grid-template-columns:1fr; } .wagif-meta,.wagif-key-grid,.wagif-gif-settings { grid-template-columns:1fr; } .wagif-key-grid .wagif-remember { padding-top:0; } .wagif-transcript-row { grid-template-columns:1fr; } .wagif-transcript-row time { padding:0; } .wagif-clip-row { grid-template-columns:auto 1fr auto; } .wagif-clip-row label { grid-column:2/3; } .wagif-clip-row .icon-button { grid-column:3; grid-row:1; } .wagif-result-card { min-width:0; } }