/* Taleclip — Audio > Compress tab styles
 * Reuses .enh-card / .enh-drop / .enh-btn / .enh-select / .enh-row / .enh-muted
 * from enhance.css. This file scopes those reused styles to #audioPanel-compress
 * and adds the file-list row visuals.
 */

#audioPanel-compress {
    color: #e0e0e0;
    font-size: 0.92em;
}

/* Mirror enhance.css scoping for the structural classes that ARE scoped there */
#audioPanel-compress .enh-card {
    background: #141414;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 16px;
}
#audioPanel-compress .enh-card h3 {
    margin: 0 0 12px;
    font-size: 1.0em;
    color: #e0e0e0;
    font-weight: 600;
    letter-spacing: 0.2px;
}
#audioPanel-compress .enh-muted { color: #888; font-size: 0.85em; }
#audioPanel-compress .enh-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* File list */
#audioPanel-compress .cmp-file-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
#audioPanel-compress .cmp-row-meta {
    flex: 1 1 auto;
    min-width: 0;
}
#audioPanel-compress .cmp-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
#audioPanel-compress .cmp-row-remove:hover {
    color: #f87171 !important;
}

/* Dropzone is-dragover (mirror .enh-drop.dragover hover state) */
#audioPanel-compress .enh-drop.is-dragover {
    border-color: #00d4ff;
    background: rgba(0,212,255,0.04);
}