/* Audio Editor keeps its controls local; shared tool fields provide row alignment. */
.ae-intro {margin: 0 0 18px; color: #475569; line-height: 1.7;}
.ae-editor {position: relative; min-width: 0; border: 1px solid #dbe2ec; border-radius: 12px; background: #fff; color: #1e293b; overflow: hidden;}
.ae-editor button, .ae-editor input, .ae-editor select {font: inherit;}
.ae-editor button {cursor: pointer;}
.ae-editor button:disabled {opacity: .45; cursor: not-allowed;}
.ae-editor :focus-visible {outline: 2px solid #2563eb; outline-offset: 2px;}
.ae-topbar, .ae-editbar, .ae-toolbar-group, .ae-action-row, .ae-export-actions, .ae-play-controls {display: flex; align-items: center; gap: 8px;}
.ae-topbar {justify-content: space-between; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;}
.ae-toolbar-group {flex-wrap: wrap; min-width: 0;}
.ae-button {display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #334155; font-size: 14px; line-height: 1.35; white-space: nowrap;}
.ae-button:hover:not(:disabled) {background: #eff6ff; border-color: #93c5fd;}
.ae-button.ae-primary {border-color: #2563eb; color: #fff; background: #2563eb; font-weight: 700;}
.ae-button.ae-primary:hover:not(:disabled) {background: #1d4ed8;}
.ae-button.is-active, .ae-button[aria-pressed="true"] {background: #dbeafe; border-color: #3b82f6; color: #1d4ed8;}
.ae-button.ae-danger {color: #b91c1c;}
.ae-icon {font-size: 18px; line-height: 1;}
.ae-empty {padding: 24px;}
.ae-drop-zone {display: flex; width: 100%; min-height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; border: 2px dashed #cbd5e1; border-radius: 10px; color: #475569; background: #f8fafc; text-align: center;}
.ae-drop-zone:hover, .ae-drop-zone.is-dragover {border-color: #3b82f6; background: #eff6ff;}
.ae-drop-zone strong {font-size: 18px; color: #1e293b;}
.ae-drop-zone span:last-child {max-width: 580px; font-size: 14px; line-height: 1.65;}
.ae-drop-icon {display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; border-radius: 14px; background: #dbeafe; color: #2563eb; font-size: 34px;}
.ae-editbar {flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid #e2e8f0;}
.ae-editbar .ae-button {min-height: 36px; padding: 7px 10px; font-size: 13px;}
.ae-timeline-container {position: relative; min-width: 0; background: #f1f5f9;}
.ae-timeline-scroll {position: relative; width: 100%; max-height: 490px; min-height: 180px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-x pan-y;}
.ae-timeline {position: relative; min-width: 100%; min-height: 180px; background: #f8fafc; user-select: none;}
.ae-ruler {position: sticky; top: 0; z-index: 6; height: 30px; border-bottom: 1px solid #cbd5e1; background: #eef2f7; color: #64748b; font-size: 11px;}
.ae-ruler-mark {position: absolute; bottom: 0; height: 18px; padding-left: 3px; border-left: 1px solid #94a3b8; white-space: nowrap;}
.ae-track {position: relative; min-width: 0; border-bottom: 1px solid #dbe2ec;}
.ae-track.is-selected {background: #eff6ff;}
.ae-track-header {position: sticky; left: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(100%, 100vw); min-height: 38px; padding: 6px 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-size: 13px;}
.ae-track-header strong, .ae-track-name {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ae-track-controls {display: flex; align-items: center; gap: 4px; flex-shrink: 0;}
.ae-track-controls .ae-button {min-height: 28px; padding: 4px 7px; font-size: 12px;}
.ae-track-lane {position: relative; min-height: 96px; overflow: hidden; background-image: linear-gradient(to right, rgba(148,163,184,.13) 1px, transparent 1px); background-size: 80px 100%;}
.ae-track-lane.is-muted {opacity: .45;}
.ae-clip {position: absolute; top: 6px; bottom: 6px; min-width: 2px; border: 1px solid #60a5fa; border-radius: 5px; background: #dbeafe; overflow: hidden; cursor: grab; touch-action: none;}
.ae-clip.is-selected {border: 2px solid #2563eb; background: #bfdbfe;}
.ae-clip.is-silent, .ae-clip.is-silence {border-color: #94a3b8; background: #e2e8f0;}
.ae-clip-label, .ae-clip-name {position: absolute; top: 3px; left: 6px; right: 6px; z-index: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e40af; font-size: 11px; line-height: 18px; pointer-events: none;}
.ae-waveform, .ae-clip canvas {display: block; width: 100%; height: 100%; pointer-events: none;}
.ae-selection {position: absolute; top: 0; bottom: 0; z-index: 3; border-right: 2px solid #3b82f6; border-left: 2px solid #3b82f6; background: rgba(59,130,246,.13); pointer-events: none;}
.ae-playhead {position: absolute; top: 0; bottom: 0; z-index: 7; width: 2px; background: #ef4444; pointer-events: none;}
.ae-playhead::before {content: ''; position: absolute; top: 0; left: -4px; border-top: 8px solid #ef4444; border-left: 5px solid transparent; border-right: 5px solid transparent;}
.ae-marker {position: absolute; z-index: 5; top: 1px; max-width: 150px; height: 20px; padding: 2px 5px; border: 1px solid #fbbf24; border-radius: 4px; color: #92400e; background: #fef3c7; font-size: 11px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ae-marker-label {padding: 2px 5px; color: #92400e; background: #fef3c7; font-size: 11px; white-space: nowrap;}
.ae-transport {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #e2e8f0; background: #fff;}
.ae-play-controls {min-width: 0; flex-wrap: wrap;}
.ae-time {color: #475569; font: 13px ui-monospace, SFMono-Regular, monospace; white-space: nowrap;}
.ae-loop-control {display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap;}
.ae-zoom-control {display: flex; align-items: center; gap: 8px; min-width: 120px; max-width: 240px; margin-left: auto; font-size: 13px;}
.ae-zoom-control input {width: 120px; min-width: 60px;}
.ae-position-panel, .ae-effects-section, .ae-export-section, .ae-settings-section {padding: 14px; border-bottom: 1px solid #e2e8f0;}
.ae-editor summary {font-weight: 700; font-size: 14px; line-height: 1.6; cursor: pointer; overflow-wrap: anywhere;}
.ae-editor details[open] > summary {margin-bottom: 14px;}
.ae-fields {grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px;}
.ae-editor .tool-label {font-size: 13px;}
.ae-editor .tool-input, .ae-editor .tool-select {font-size: 14px; padding: 10px;}
.ae-editor .tool-help {color: #64748b; font-size: 12px; line-height: 1.7; margin: 10px 0 0;}
.ae-editor .tool-form-grid-aligned .tool-help {margin: 0;}
.ae-settings-layout {display: grid; grid-template-columns: 1fr 1fr;}
.ae-settings-section:first-child {border-right: 1px solid #e2e8f0;}
.ae-track-panel, .ae-effect-panel {min-width: 0;}
.ae-effect-panel {margin-top: 16px;}
.ae-effect-panel .tool-form-grid, .ae-track-panel .tool-form-grid {grid-template-columns: repeat(auto-fit, minmax(160px,1fr));}
.ae-range-control, .ae-checkbox-control {display: flex; align-items: center; gap: 10px; min-height: 46px;}
.ae-range-control input {flex: 1; min-width: 0;}
.ae-range-control output {min-width: 48px; text-align: right; white-space: nowrap; font-size: 13px;}
.ae-checkbox-control {padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px;}
.ae-action-row {flex-wrap: wrap; margin-top: 14px;}
.ae-markers {display: flex; flex-wrap: wrap; gap: 8px;}
.ae-marker-item, .ae-marker-entry {display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid #fcd34d; border-radius: 6px; background: #fffbeb; font-size: 13px;}
.ae-marker-item button, .ae-marker-entry button {padding: 2px 4px; border: 0; background: none; color: #92400e;}
.ae-metadata {margin-top: 18px;}
.ae-export-actions {flex-wrap: wrap; padding: 16px 14px; background: #f8fafc;}
.ae-export-actions .ae-primary {min-width: 150px;}
.ae-progress {padding: 0 14px 14px; background: #f8fafc;}
.ae-progress-track {height: 8px; border-radius: 4px; overflow: hidden; background: #e2e8f0;}
#ae-progress-bar {height: 100%; border-radius: 4px; background: #2563eb; transition: width .2s;}
.ae-progress-footer {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px;}
.ae-status {margin: 0; padding: 0 14px 12px; color: #475569; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere;}
.ae-status:empty {padding: 0;}
.ae-status.is-error, .ae-status.error {color: #b91c1c;}
.ae-privacy {margin-top: 12px; color: #64748b; font-size: 12px; line-height: 1.7;}
.ae-faq details {padding: 14px 0; border-bottom: 1px solid #e2e8f0;}
.ae-faq summary {font-weight: 700; line-height: 1.6; cursor: pointer;}
.ae-faq p {margin-top: 10px; line-height: 1.8;}
.ae-dialog-backdrop, .ae-modal-backdrop {position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.45);}
.ae-dialog, .ae-modal {width: min(540px,100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 22px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; box-shadow: 0 16px 60px rgba(15,23,42,.25);}
.ae-dialog h2, .ae-modal h2 {margin-bottom: 18px; font-size: 18px; font-weight: 700;}
.ae-dialog .tool-form-grid, .ae-modal .tool-form-grid {grid-template-columns: repeat(auto-fit,minmax(160px,1fr));}
.ae-editor:fullscreen, .ae-editor.is-fullscreen {position: fixed; inset: 0; z-index: 10000; width: 100%; height: var(--ae-viewport-height, 100dvh); max-width: none; max-height: none; border: 0; border-radius: 0; display: flex; flex-direction: column; overflow: auto; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); background: #fff;}
.ae-editor:fullscreen #ae-workspace, .ae-editor.is-fullscreen #ae-workspace {display: flex; flex-direction: column; flex: 1; min-height: 0;}
.ae-editor:fullscreen #ae-workspace.hidden, .ae-editor.is-fullscreen #ae-workspace.hidden {display: none;}
.ae-editor:fullscreen .ae-timeline-container, .ae-editor.is-fullscreen .ae-timeline-container {flex: 1; min-height: 180px;}
.ae-editor:fullscreen .ae-timeline-scroll, .ae-editor.is-fullscreen .ae-timeline-scroll {max-height: none; height: 100%;}
.ae-editor:fullscreen .ae-empty, .ae-editor.is-fullscreen .ae-empty {flex: 1; display: flex;}
.ae-editor:fullscreen .ae-empty.hidden, .ae-editor.is-fullscreen .ae-empty.hidden {display: none;}
.ae-editor .hidden {display: none !important;}
@media (max-width: 900px) {
 .ae-topbar {gap: 8px;}
 .ae-topbar .ae-button {padding: 8px 10px;}
 .ae-fields {grid-template-columns: repeat(2,minmax(0,1fr));}
 .ae-settings-layout {grid-template-columns: 1fr;}
 .ae-settings-section:first-child {border-right: 0;}
 .ae-editbar {flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;}
 .ae-editbar .ae-button {flex-shrink: 0;}
 .ae-project-actions [data-ae-command="save"] .ae-button-label, .ae-project-actions [data-ae-command="open"] .ae-button-label, .ae-project-actions [data-ae-command="reset"] .ae-button-label {display: inline;}
}
@media (max-width: 600px) {
 .ae-topbar {flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 8px; gap: 6px;}
 .ae-toolbar-group {flex-wrap: nowrap; gap: 6px; flex-shrink: 0;}
 .ae-topbar .ae-button {min-height: 38px; padding: 7px 9px; font-size: 12px;}
 .ae-topbar .ae-button:has(.ae-icon) .ae-button-label {display: none;}
 .ae-topbar .ae-button:has(.ae-icon) {min-width: 38px;}
 .ae-topbar .ae-icon {font-size: 19px;}
 .ae-empty {padding: 14px;}
 .ae-drop-zone {min-height: 200px; padding: 18px;}
 .ae-drop-zone strong {font-size: 16px;}
 .ae-drop-zone span:last-child {font-size: 13px;}
 .ae-editbar {padding: 8px; gap: 6px;}
 .ae-transport {padding: 8px; gap: 8px;}
 .ae-play-controls {width: 100%; gap: 6px;}
 .ae-play-controls .ae-button {min-height: 36px; padding: 7px 9px; font-size: 12px;}
 .ae-time {margin-left: auto; font-size: 11px;}
 .ae-zoom-control {margin-left: auto; max-width: 190px;}
 .ae-track-header {padding: 5px 8px;}
 .ae-track-lane {min-height: 88px;}
 .ae-position-panel, .ae-effects-section, .ae-export-section, .ae-settings-section {padding: 12px;}
 .ae-fields, .ae-effect-panel .tool-form-grid, .ae-track-panel .tool-form-grid {grid-template-columns: 1fr; gap: 10px;}
 .ae-action-row .ae-button {flex: 1; font-size: 12px; padding: 8px;}
 .ae-dialog, .ae-modal {padding: 18px; max-height: calc(100dvh - 24px);}
 .ae-dialog-backdrop, .ae-modal-backdrop {align-items: flex-end; padding: 12px; padding-bottom: max(12px,env(safe-area-inset-bottom));}
 .ae-editor:fullscreen details[open], .ae-editor.is-fullscreen details[open] {max-height: 42dvh; overflow: auto; flex-shrink: 0;}
 .ae-editor:fullscreen .ae-effects-section:not([open]), .ae-editor.is-fullscreen .ae-effects-section:not([open]) {padding: 8px 12px;}
}
@media (max-height: 500px) and (orientation: landscape) {
 .ae-topbar, .ae-editbar {padding: 6px 10px;}
 .ae-topbar .ae-button, .ae-editbar .ae-button {min-height: 32px; padding: 6px 9px; font-size: 12px;}
 .ae-transport {padding: 6px 10px;}
 .ae-editor:fullscreen .ae-timeline-container, .ae-editor.is-fullscreen .ae-timeline-container {min-height: 100px;}
 .ae-editor:fullscreen .ae-position-panel, .ae-editor.is-fullscreen .ae-position-panel, .ae-editor:fullscreen .ae-settings-section, .ae-editor.is-fullscreen .ae-settings-section {padding: 6px 10px;}
}

.ae-clip-name {pointer-events: auto; cursor: grab; touch-action: none;}
.ae-clip-name:active {cursor: grabbing;}
.ae-clip-fades {position: absolute; inset: 21px 0 0; background: rgba(30,64,175,.12); pointer-events: none;}
.ae-track-title {max-width: 65%; min-width: 0; padding: 2px 0; border: 0; color: #334155; background: transparent; font-weight: 700; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ae-track-toggle {min-height: 28px; padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 5px; color: #475569; background: #fff; font-size: 12px; line-height: 18px;}
.ae-track-toggle.is-active {background: #dbeafe; border-color: #3b82f6; color: #1d4ed8;}
.ae-track-properties-head {margin-bottom: 12px; color: #475569; font-weight: 700; font-size: 13px; overflow-wrap: anywhere;}
.ae-track-properties {grid-template-columns: repeat(auto-fit,minmax(160px,1fr));}
.ae-checkbox {display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; line-height: 1.6;}
.ae-checkbox input[type="checkbox"] {flex-shrink: 0;}
.ae-draft-banner {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px; border: 1px solid #93c5fd; border-radius: 7px; color: #1e40af; background: #eff6ff; font-size: 13px;}
.ae-draft-banner span {flex: 1; min-width: 130px;}
.ae-editor.is-drag-over .ae-drop-zone {border-color: #3b82f6; background: #eff6ff;}
dialog.ae-modal {position: fixed; inset: 0; margin: auto; color: #1e293b;}
dialog.ae-modal::backdrop {background: rgba(15,23,42,.45);}
dialog.ae-modal .tool-field-control {min-height: 46px;}
.ae-modal-actions {display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px;}
#ae-progress-bar.ae-indeterminate {animation: ae-progress-indeterminate 1.4s ease-in-out infinite; transform-origin: left;}
@keyframes ae-progress-indeterminate {0% {transform: translateX(-75%) scaleX(.35);} 50% {transform: translateX(25%) scaleX(.5);} 100% {transform: translateX(110%) scaleX(.35);}}
@media (prefers-reduced-motion: reduce) {#ae-progress-bar.ae-indeterminate {animation: none; opacity: .65;} #ae-progress-bar {transition: none;}}
@media (max-width:600px) {.ae-track-properties {grid-template-columns: 1fr;} dialog.ae-modal {inset: auto 0 max(12px,env(safe-area-inset-bottom)); width: calc(100% - 24px); margin: 0 auto;} dialog.ae-modal .tool-form-grid {grid-template-columns: 1fr;}}
@media (max-width:600px) {.ae-topbar .ae-button[data-ae-command="record"] .ae-button-label {display: inline;}}
.ae-topbar [data-ae-command="record"][aria-pressed="true"] {color: #b91c1c; background: #fee2e2; border-color: #fca5a5;}
/* Fixed control sections must keep their intrinsic height on short viewports. */
.ae-editor:fullscreen > :not(#ae-workspace):not(.ae-empty), .ae-editor.is-fullscreen > :not(#ae-workspace):not(.ae-empty) {flex-shrink: 0;}
.ae-editor:fullscreen #ae-workspace, .ae-editor.is-fullscreen #ae-workspace {flex: 1 0 auto;}
.ae-editor:fullscreen #ae-workspace > :not(.ae-timeline-container), .ae-editor.is-fullscreen #ae-workspace > :not(.ae-timeline-container) {flex: 0 0 auto;}
.ae-editor:fullscreen .ae-timeline-container, .ae-editor.is-fullscreen .ae-timeline-container {flex: 1 0 180px; min-height: 180px;}
.ae-editor:fullscreen .ae-timeline-scroll, .ae-editor.is-fullscreen .ae-timeline-scroll {min-height: 180px;}
/* WebKit native selects ignore a minimum height unless height is explicit. */
.ae-editor select.tool-field-control, .ae-modal select.tool-field-control {height: 46px; min-height: 46px;}