/* ToolzMoolz shared conversion queue styles (pairs with assets/convert-queue.js) */

.tzq-list { display: none; margin-top: 1.25rem; }
.tzq-list.visible { display: block; }

.tzq-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 10px; transition: border-color 0.15s;
}
.tzq-card.is-converting { border-color: var(--primary); }
.tzq-card.is-error { border-color: #e63946; }

.tzq-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.tzq-ic { font-size: 22px; flex: 0 0 auto; }
.tzq-txt { min-width: 0; flex: 1; }
.tzq-name { font-size: 13px; font-weight: 700; color: var(--text); word-break: break-all; }
.tzq-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 4px; align-items: center; }
.tzq-status { font-weight: 700; }
.tzq-status.ok { color: #22c55e; }
.tzq-status.err { color: #e63946; }
.tzq-sep { opacity: 0.5; }

.tzq-bar { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.tzq-fill {
    height: 100%; width: 0%; border-radius: 99px;
    background: linear-gradient(90deg, #2563eb, #60a5fa); transition: width 0.12s linear;
}
.tzq-fill.ok { background: linear-gradient(90deg, #16a34a, #4ade80); }

.tzq-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tzq-dl {
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
    padding: 8px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.tzq-dl:hover { background: #e63946; }
.tzq-rm {
    background: transparent; border: none; color: var(--muted);
    font-size: 13px; cursor: pointer; padding: 6px; border-radius: 6px;
}
.tzq-rm:hover { color: #e63946; background: rgba(230, 57, 70, 0.08); }

.tzq-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 1.25rem; }
.tzq-count { font-size: 12px; font-weight: 700; color: var(--muted); }

@media (max-width: 560px) {
    .tzq-card { flex-wrap: wrap; }
    .tzq-right { width: 100%; justify-content: flex-end; }
}