.task-media-panel { flex: 1; min-height: 0; padding: 20px 22px; overflow-y: auto; }
.task-media-panel[hidden] { display: none !important; }
@media (max-width: 800px) {
  .task-media-panel { flex: 0 0 auto; padding: 16px 12px; overflow: visible; }
}
.task-audio-editor { display: grid; gap: 20px; margin: 0; padding: 20px; border: 1px solid #dce7e2; border-radius: 14px; background: #fafcfb; font-size: 14px; }
.task-audio-details { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.task-audio-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 12px; color: var(--green, #16775c); background: #e7f2ec; }
.task-audio-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.task-audio-info { display: grid; gap: 5px; min-width: 0; }
.task-audio-info h3 { margin: 0; color: #243b32; font-size: 16px; line-height: 1.4; font-weight: 700; }
.task-audio-info small { color: #586963; font-size: 12px; line-height: 1.5; }
.task-audio-editor [data-audio-name] { color: #344d42; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.task-audio-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.task-audio-actions .button { min-height: 42px; padding: 10px 16px; border-radius: 9px; font-size: 14px; }
.task-audio-editor.has-audio [data-audio-choose] { color: var(--green, #16775c); background: #fff; border: 1px solid #b8d1c5; box-shadow: none; }
.task-audio-editor.has-audio [data-audio-choose]:hover { background: #edf5f0; }
.task-audio-editor [data-audio-remove] { color: #586963; }
.task-audio-editor [data-audio-remove]:hover { color: #a33131; background: #fbeeee; }
.task-audio-actions .button:focus-visible { outline: 3px solid #b4d8c9; outline-offset: 3px; }
.task-audio-actions .button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 800px) {
  .task-audio-editor { padding: 16px; }
  .task-audio-actions .button { min-height: 44px; }
}
.task-audio-player { display: grid; gap: 4px; box-sizing: border-box; width: min(100%, 440px); margin: 0 auto 16px; padding: 8px 12px; border: 1px solid #dce4df; border-radius: 10px; background: transparent; min-width: 0; color: #243b32; font-size: 14px; }
.task-audio-player audio { display: block; width: 100%; max-width: 100%; min-width: 0; }
.task-audio-player button { justify-self: start; padding: 8px 12px; font: inherit; cursor: pointer; }
.task-audio-player [hidden], .task-audio-editor [hidden] { display: none !important; }
.task-audio-player [role="status"]:empty { display: none; }
/* Shared playback controls keep elapsed audio distinct from the remaining track. */
.task-audio-metadata { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 6px 0; }
.task-audio-metadata div { display: grid; gap: 3px; }
.task-audio-metadata dt { color: #586963; font-size: 12px; }
.task-audio-metadata dd { margin: 0; color: #243b32; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Both heading states share a fixed footprint; loading never covers the controls. */
.task-audio-heading { display: grid; align-items: center; min-width: 0; }
.task-audio-heading > * { grid-area: 1 / 1; margin: 0; line-height: 1.5; }
.task-audio-heading .task-audio-loading { visibility: hidden; color: #53615b; font-size: 12px; }
.task-audio-player[aria-busy="true"] .task-audio-loading { visibility: visible; }
.task-audio-player[aria-busy="true"] .task-audio-heading > b { visibility: hidden; }
.task-audio-controls { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-audio-player .task-audio-toggle { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid #b8c9c0; border-radius: 50%; background: #fff; color: #344d42; }
.task-audio-player .task-audio-toggle { background: #146448; color: #fff; border-color: #146448; }
.task-audio-player .task-audio-toggle:hover { background: #104e38; }
.task-audio-controls svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.task-audio-player button:focus-visible, .task-audio-seek:focus-visible { outline: 3px solid #16775c; outline-offset: 4px; }
.task-audio-player button:disabled { cursor: wait; }
.task-audio-timeline { flex: 1; min-width: 0; }
.task-audio-times { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.task-audio-elapsed { color: #124f3b; }
.task-audio-elapsed strong { font-size: 14px; }
.task-audio-total { color: #53615b; }
.task-audio-seek { --audio-progress: 0; --audio-thumb-size: 18px; --audio-fill-end: calc(var(--audio-thumb-size) / 2 + (100% - var(--audio-thumb-size)) * var(--audio-progress)); appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 28px; padding: 0; margin: 0 0 3px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.task-audio-seek::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, #146448 0 var(--audio-fill-end), #cbd3ce var(--audio-fill-end) 100%); }
.task-audio-seek::-moz-range-track { height: 8px; border-radius: 999px; background: #cbd3ce; }
.task-audio-seek[data-complete="true"]::-webkit-slider-runnable-track { background: #146448; }
.task-audio-seek[data-complete="true"]::-moz-range-track { background: #146448; }
.task-audio-seek::-moz-range-progress { height: 8px; border-radius: 999px; background: #146448; }
.task-audio-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: var(--audio-thumb-size); height: var(--audio-thumb-size); margin-top: -5px; border: 3px solid #fff; border-radius: 50%; background: #146448; box-shadow: 0 0 0 1px #146448; }
.task-audio-seek::-moz-range-thumb { box-sizing: border-box; width: var(--audio-thumb-size); height: var(--audio-thumb-size); border: 3px solid #fff; border-radius: 50%; background: #146448; box-shadow: 0 0 0 1px #146448; }
.task-audio-seek:disabled { opacity: .5; cursor: default; }
@media (max-width: 480px) {
  .task-audio-total { text-align: right; }
}
@media (forced-colors: active) {
  .task-audio-seek { appearance: auto; }
}