/* Timed content stays on the paper; the editor reuses the original form controls. */
.h3-timed-tracks { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; max-width: 38%; overflow-x: auto; }
.h3-timed-track { display: flex; flex-direction: column; flex: 1 0 auto; color: #684778; }
.h3-timed-add { position: relative; width: 40px; height: 44px; flex: 0 0 40px; border: 0; background: transparent; color: #684778; padding: 3px; cursor: pointer; }
.h3-timed-symbol { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #b69ac7; border-radius: 7px; background: #80539e; color: #fff; font-size: 18px; overflow: hidden; }
.h3-timed-symbol.is-portrait { border-radius: 50%; }
.h3-timed-symbol img { width: 100%; height: 100%; object-fit: cover; }
.h3-timed-add-bubble { position: absolute; right: -8px; top: -7px; z-index: 1; width: 23px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid #80539e; border-radius: 6px; color: #684778; background: #eee2f2; }
.h3-timed-add-bubble::after { content: ''; position: absolute; bottom: -4px; left: 4px; border-top: 5px solid #eee2f2; border-right: 5px solid transparent; }
.h3-timed-add-bubble b { font-size: 16px; line-height: 1; font-weight: 600; position: relative; }
.h3-timed-add-bubble.is-burst { width: 29px; height: 29px; top: -10px; right: -8px; border: 0; background: transparent; color: #59411a; }
.h3-timed-add-bubble.is-burst::after { display: none; }
.h3-timed-add-bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #f3d77d; stroke: #8d713c; stroke-width: 1.2; }
.h3-timed-add:hover .h3-timed-symbol { border-color: #684778; background: #684778; }
.h3-timed-columns { display: flex; flex: 1; min-height: 320px; }
.h3-timed-column { position: relative; flex: 1 0 48px; background: linear-gradient(#c5b3cf,#c5b3cf) center / 1px 100% no-repeat; }
.h3-timed-bar { position: absolute; left: 50%; width: 28px; transform: translateX(-50%); min-height: 24px; background: #e2cdec; border: 1px solid #a383b7; border-radius: 6px; }
.h3-timed-bar.active { background: #c9a7dc; box-shadow: 0 0 0 2px #80539e; }
.h3-timed-track.is-captions .h3-timed-bar { background: #d1e5e5; border-color: #76a2a2; }
.h3-timed-track.is-soundscapes .h3-timed-bar { background: #e7dbb6; border-color: #ad9959; }
.h3-timed-text { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; color: #402b50; touch-action: none; cursor: grab; overflow: hidden; }
.h3-timed-text span { display: block; position: absolute; left: 50%; top: 20px; transform: rotate(90deg); transform-origin: 0 50%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16px; }
.h3-timed-grip { position: absolute; z-index: 1; width: 100%; height: 18px; left: 0; padding: 0; border: 0; background: transparent; cursor: ns-resize; touch-action: none; }
.h3-timed-grip::after { content: ''; display: block; width: 14px; height: 3px; border-radius: 3px; margin: auto; background: #735782; }
.h3-timed-grip.is-start { top: 0; }.h3-timed-grip.is-end { bottom: 0; }
.h3-timed-editor { position: fixed; z-index: 1075; border: 1px solid #b89acb; border-radius: 8px; color: #3d2a16; background: #f4ebd5; box-shadow: 0 8px 30px #0006; display: flex; flex-direction: column; }
.h3-timed-editor::before { content: ''; position: absolute; left: -10px; top: var(--timed-arrow-top, 20px); border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #b89acb; }
.h3-timed-editor > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #d5c39e; font-size: 13px; }
.h3-timed-editor > header .h3-timed-remove { border: 1px solid #c98780; background: #f9e8df; color: #b72d26; border-radius: 5px; min-width: 32px; min-height: 32px; padding: 2px 6px; }
.h3-timed-editor-body { padding: 12px; overflow-y: auto; min-height: 0; }
.h3-timed-editor-body label { display: block; margin: 12px 0 0; font-size: 12px; color: #684778; }
.h3-timed-editor-body input[type=range] { display: block; width: 100%; border: 0; background: transparent; box-shadow: none; accent-color: #80539e; }
.h3-shot-page .h3-timed-editor-body .ai-h3-script-say-row, .h3-shot-page .h3-timed-editor-body .ai-h3-script-caption-row { display: flex; flex-wrap: wrap; gap: 8px; }
.h3-shot-page .h3-timed-editor-body textarea { width: 100%; min-width: 0; min-height: 110px; flex: 1 0 100%; order: 2; }
.h3-timed-track button:focus { outline: none; }.h3-timed-track button:focus-visible { outline: 2px solid #80539e; outline-offset: 2px; }
.h3-shot-paper .is-what textarea, .h3-shot-paper .ai-h3-guide-what textarea { min-height: 160px; }
@media (min-width: 600px) and (max-width: 767px) {
 .h3-shot-page > .h3-shot-paper { flex-basis: 280px; }
}
@media (max-width: 599px) {
 .h3-shot-page { flex-wrap: wrap; }
 .h3-shot-page > .h3-shot-rail, .h3-shot-page > .h3-cues { min-height: 340px; }
 .h3-timed-tracks { flex: 1; max-width: none; min-width: 0; }
 .h3-shot-page > .h3-shot-paper { flex: 1 0 100%; padding-left: 0; margin-top: 12px; }
 .h3-timed-columns { min-height: 260px; }
 /* Empty shots keep the duration control but do not reserve a blank media timeline. */
 .h3-shot-page.is-empty-timeline { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: stretch; }
 .h3-shot-page.is-empty-timeline > .h3-shot-rail { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
 .h3-shot-page.is-empty-timeline > .h3-cues { grid-column: 2; min-height: 0; }
 .h3-shot-page.is-empty-timeline > .h3-cues > .h3-cue-track { display: none; }
 .h3-shot-page.is-empty-timeline > .h3-shot-paper { grid-column: 2; margin-top: 8px; }
 .h3-shot-page.is-empty-timeline .h3-cue-add { width: auto; align-self: flex-start; padding: 7px 12px; }

}

.h3-timed-editor-body .ai-h3-dialogue-card { margin: 0; padding: 0; border: 0; background: transparent; }
.h3-timed-editor-body .ai-h3-caption-text-row { display: flex; flex-wrap: wrap; }
.h3-timed-editor-body input[type=range]:focus { outline: none; }
.h3-timed-editor-body input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid #80539e; outline-offset: 2px; }
.h3-shot-paper .is-what .ai-h3-script-what-row { flex-wrap: wrap; align-items: flex-start; }
.ai-h3-script-page .h3-shot-paper .is-what .ai-h3-shot-prompt-wrap { flex: 1 0 100%; width: 100%; order: 1; }

/* Add controls belong to the shot form; empty timing tracks have no width. */
.h3-shot-page .h3-shot-add-controls, .ai-h3-script-page.is-notebook .h3-shot-page .h3-shot-add-controls { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 8px 0 0; }
.h3-shot-add-controls .h3-timed-add { margin: 0 12px 8px 0; }
.h3-timed-caption-symbol { font-size: 12px; font-weight: 700; white-space: nowrap; }
.h3-shot-page .h3-shot-paper .h3-shot-assist-icon { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ad8bc3; border-radius: 9px; background: #f0e4f3; color: #684778; min-height: 38px; padding: 6px 12px; max-width: 100%; }
.h3-shot-page .h3-shot-paper .h3-shot-assist-icon > i { font-size: 18px; margin-right: 7px; flex-shrink: 0; }
.h3-shot-page .h3-shot-paper .h3-shot-assist-icon > span { white-space: normal; overflow-wrap: anywhere; }
.h3-shot-page .h3-shot-paper .h3-shot-assist-icon:hover, .h3-shot-page .h3-shot-paper .h3-shot-assist-icon.is-on { background: #e2cdec; border-color: #80539e; }
.h3-shot-add-controls button:focus, .h3-shot-assist-icon:focus { outline: none; box-shadow: none; }
.h3-shot-add-controls button:focus-visible, .h3-shot-assist-icon:focus-visible { outline: 2px solid #80539e; outline-offset: 3px; }
.h3-shot-assist-toolbar { display: flex; flex-wrap: wrap; margin-bottom: 8px; }
.h3-shot-assist-toolbar > button { margin: 0 8px 8px 0; }

.h3-shot-page .ai-h3-script-field.is-effects { order: 6; }

/* Speaker identity stays upright while dialogue text follows the vertical track. */
.h3-timed-speaker { position:absolute; top:16px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; overflow:hidden; background:#fff; color:#80539e; display:flex; align-items:center; justify-content:center; font-size:12px; }
.h3-timed-speaker img { width:100%; height:100%; object-fit:cover; }
.h3-timed-text.has-portrait { overflow: visible; }
.h3-timed-text.has-portrait > span { top:68px; }