Add the Bot-tab backfill control room and media strip rules

poc/public/media.css

@@ -541,3 +541,202 @@
     color: #fff;
     font: 600 9px/1 ui-monospace, Menlo, monospace;
 }
+
+/* Bot tab: backfill jobs, stats, and settings. */
+
+.vk-media-bot {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.vk-media-bot[hidden] {
+    display: none;
+}
+
+.vk-bot-limited {
+    padding: 8px 10px;
+    border-radius: 6px;
+    font: 500 11px/1.4 ui-monospace, Menlo, monospace;
+    color: #ffb0b0;
+    background: color-mix(in srgb, #ff5555 14%, transparent);
+    border: 1px solid color-mix(in srgb, #ff5555 35%, transparent);
+}
+
+.vk-bot-limited[hidden] {
+    display: none;
+}
+
+.vk-bot-section {
+    border: 1px solid var(--color-divider);
+    border-radius: 6px;
+    padding: 8px 10px;
+    background: var(--color-surface);
+}
+
+.vk-bot-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.vk-bot-title {
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.vk-bot-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.vk-bot-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-bottom: 8px;
+}
+
+.vk-bot-summary-line {
+    font: 400 11px/1.5 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-300);
+}
+
+.vk-bot-jobs {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.vk-bot-empty {
+    font: 400 11px/1.5 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-500);
+}
+
+.vk-bot-job {
+    border: 1px solid var(--color-neutral-800);
+    border-radius: 5px;
+    padding: 6px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.vk-bot-job-running {
+    border-color: color-mix(in srgb, var(--color-accent, #4f8cff) 45%, transparent);
+}
+
+.vk-bot-job-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.vk-bot-job-title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 11px;
+}
+
+.vk-bot-job-meta {
+    font: 400 11px/1.4 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+}
+
+.vk-bot-state {
+    font: 600 10px/1.4 ui-monospace, Menlo, monospace;
+    text-transform: uppercase;
+    padding: 0 5px;
+    border-radius: 3px;
+    background: var(--color-neutral-800);
+    color: var(--color-neutral-300);
+}
+
+.vk-bot-state-running {
+    background: color-mix(in srgb, var(--color-accent, #4f8cff) 25%, transparent);
+    color: var(--color-accent-300, #9fc1ff);
+}
+
+.vk-bot-state-paused {
+    background: color-mix(in srgb, #ffaa33 20%, transparent);
+    color: #ffc880;
+}
+
+.vk-bot-state-done {
+    background: color-mix(in srgb, #44cc88 20%, transparent);
+    color: #8fe0b8;
+}
+
+.vk-bot-job-member {
+    font: 400 10px/1.5 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+    word-break: break-all;
+}
+
+.vk-bot-progress {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--color-neutral-800);
+    overflow: hidden;
+}
+
+.vk-bot-progress-fill {
+    height: 100%;
+    background: var(--color-accent-400, #4f8cff);
+}
+
+.vk-bot-job-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.vk-bot-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.vk-bot-group-title {
+    cursor: pointer;
+    font: 600 11px/1.6 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-300);
+}
+
+.vk-bot-group-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px 0 2px 12px;
+}
+
+.vk-bot-field {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.vk-bot-field-label {
+    font: 400 11px/1.4 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+}
+
+.vk-bot-save {
+    align-self: flex-start;
+    margin-top: 4px;
+}
+
+.vk-media-limited {
+    color: #ff8080;
+}
+
+.vk-media-done-note {
+    color: color-mix(in srgb, var(--color-neutral-400) 55%, transparent);
+    font-style: italic;
+}