/* The queue controls: counters and buttons on the tab line, the settings in the composer, the two notes above the list, the
   prompt-box tools (import + counter) and the popovers they open.
   Same tokens as ui.css / setup.css: panel #131517, surface #1c1e20, gold #f0ba2e, text #f7f7f8, muted #898a8b. */
/* The tab line: tabs | counters ... buttons. It wraps: counters take their own line when the window is narrow. */
.cv-maintabs { flex-wrap: wrap; row-gap: 8px; }
.cv-tabs-stats { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-left: 14px; }
.cv-tabs-actions { display: flex; gap: 6px; margin-left: auto; }

/* The two notes (paused / last message) above the list; the box is gone when both are hidden. */
.qt-notes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.qt-notes:not(:has(> :not([hidden]))) { display: none; }

/* counters */
.qt-counts { display: contents; }
.qt-count { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; white-space: nowrap;
  background: #1c1e20; border: 1px solid rgba(217, 217, 217, 0.04); border-radius: 8px; }
.qt-count span { font-size: 12px; color: #898a8b; }
.qt-count b { font-size: 15px; font-weight: 700; color: #f7f7f8; font-variant-numeric: tabular-nums; }
.qt-count--running.qt-count--hot b { color: #f0ba2e; }
.qt-count--done.qt-count--hot b { color: #53c546; }
.qt-count--failed.qt-count--hot b { color: #e5837d; }

/* buttons */
.qt-actions { display: flex; gap: 6px; }
.qt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #f7f7f8; background: rgba(255, 255, 255, .07); cursor: pointer;
  transition: background .15s, filter .15s; }
.qt-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.qt-btn:disabled { opacity: .5; cursor: progress; }
.qt-btn--gold { color: #14151a; background: #f0ba2e; box-shadow: inset 0 -2px rgba(0, 0, 0, .3); }
.qt-btn--gold:hover:not(:disabled) { background: #f0ba2e; filter: brightness(1.06); }
.qt-btn:focus-visible, .qs-row:focus-visible, .qt-chipbtn:focus-visible { outline: 2px solid rgba(240, 186, 46, .6); outline-offset: 1px; }

/* settings in the composer (under duration + ratio): rows like the Model row, a switch, the machine line */
.qs-set { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.qs-title { margin: 0; padding: 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #898a8b; }
.qs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qs-row .cv-frow-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.qs-row .cv-frow-text { padding-right: 6px; }
.qs-row--warn { box-shadow: inset 0 0 0 1px rgba(229, 131, 125, .6); }
.qs-row--warn .cv-frow-value { color: #e5837d; }
.qs-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; min-height: 48px;
  background: #1c1e20; border-radius: 6px; cursor: pointer; }
.qs-toggle:hover { background: #23262a; }
.qs-toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qs-toggle-name { font-size: 14px; color: #f7f7f8; }
.qs-toggle-desc { font-size: 11px; line-height: 1.35; color: #898a8b; }
.qs-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qs-sw { position: relative; flex: 0 0 auto; width: 34px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .15s; }
.qs-sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.qs-check:checked + .qs-sw { background: #f0ba2e; }
.qs-check:checked + .qs-sw i { transform: translateX(16px); }
.qs-check:focus-visible + .qs-sw { outline: 2px solid rgba(240, 186, 46, .6); outline-offset: 2px; }
/* "Lưu video vào": the folder of the tasks added from now on, under the settings; the small button next to it opens the folder */
.qs-dir { display: flex; gap: 8px; }
.qs-dir-pick { flex: 1 1 auto; min-width: 0; }
.qs-dir-pick .cv-frow-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13px; }
.qs-dir-pick .cv-frow-text { min-width: 0; padding-right: 6px; }
.qs-dir-open { flex: 0 0 auto; display: grid; place-items: center; width: 48px; border: 0; border-radius: 6px; background: #1c1e20; color: #f7f7f8; cursor: pointer; }
.qs-dir-open:hover:not(:disabled) { background: #23262a; color: #f0ba2e; }
.qs-dir-pick:disabled, .qs-dir-open:disabled { opacity: .5; cursor: progress; }
.qs-dir-msg { margin: 6px 2px 0; font-size: 12px; line-height: 1.4; color: #e5837d; overflow-wrap: anywhere; }
.qs-dir-msg:empty { display: none; }
.qt-machine { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 0 2px; font-size: 12px; line-height: 1.4; color: #a8a8a8; }
.qt-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #898a8b; }
.qt-machine--strong .qt-dot { background: #53c546; box-shadow: 0 0 0 3px rgba(83, 197, 70, .18); }
.qt-machine--fair .qt-dot { background: #f0ba2e; box-shadow: 0 0 0 3px rgba(240, 186, 46, .18); }
.qt-machine--weak .qt-dot { background: #e5837d; box-shadow: 0 0 0 3px rgba(229, 131, 125, .18); }
.qt-msg { margin: 0; padding: 6px 10px; font-size: 12px; line-height: 1.45; color: #c9c9cc; background: rgba(255, 255, 255, .05); border-radius: 8px; overflow-wrap: anywhere; }
.qt-msg--bad { color: #e5837d; background: rgba(229, 131, 125, .1); }
.qt-wait { margin: 0; padding: 6px 10px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #f0ba2e; background: rgba(240, 186, 46, .1); border-radius: 8px; }

/* Not tall: the composer is scrolled and every row counts, so the settings lose their title and the switch its explanation (still in the tooltip). */
@media (max-height: 1100px) {
  .qs-title, .qs-toggle-desc { display: none; }
  .qs-toggle { min-height: 40px; }
  .qs-set { gap: 6px; padding-top: 0; }
  .qs-grid { gap: 6px; }
  .qt-machine { align-items: center; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qt-machine span { overflow: hidden; text-overflow: ellipsis; }
  .qt-dot { margin-top: 0; }
}

/* Narrower windows. Below ~1400 px the buttons keep only their icon (tooltip and aria-label stay); below ~1130 px the counters take
   their own line under the tabs instead of squeezing them. */
@media (max-width: 1400px) {
  .qt-btn { width: 32px; padding: 0; }
  .qt-btn span { display: none; }
}
@media (max-width: 1130px) {
  .cv-tabs-stats { order: 3; flex: 1 0 100%; margin-left: 0; }
}

/* popovers (thread count, distribution, account picker) reuse .cv-pop / .cv-model-item from history.css */
.qt-opt-desc { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.4; color: #898a8b; }
.qt-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 6px 4px 2px; }
.qt-chipbtn { height: 34px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; font-size: 13px; font-weight: 600; color: #f7f7f8;
  background: #1c1e20; cursor: pointer; }
.qt-chipbtn:hover { background: #292c2f; }
.qt-chipbtn--on { color: #f0ba2e; border-color: rgba(240, 186, 46, .5); background: rgba(240, 186, 46, .08); }

/* prompt box tools: import a .txt / .csv, and "N lệnh" */
.cv-prompt-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, .08); }
.cv-import { padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #f0ba2e; background: rgba(240, 186, 46, .1); cursor: pointer;
  transition: background .15s; }
.cv-import:hover { background: rgba(240, 186, 46, .2); }
.cv-prompt-count { font-size: 12px; color: #898a8b; font-variant-numeric: tabular-nums; text-align: right; }
.cv-prompt-count--bad { color: #e5837d; }