/* ---------------------------------------------------------------------------
   Cloud workspace: Bots, Bot detail, Jobs, Runs, run details. Uses the --bz-* tokens.
--------------------------------------------------------------------------- */

.bz-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bz-search-box {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; min-width: 200px;
    border: 1px solid var(--bz-border); border-radius: 6px; background: var(--bz-well); color: var(--mud-palette-text-secondary);
}
.bz-search-box:focus-within { border-color: var(--bz-accent); }
.bz-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--mud-palette-text-primary); font: inherit; font-size: .86rem; }

.bz-pill {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--bz-accent) 16%, transparent); color: var(--bz-accent); font-size: .72rem; font-weight: 700;
}
.bz-pill.muted { background: var(--bz-card); color: var(--mud-palette-text-secondary); }

.bz-section-label { margin-bottom: 8px; color: var(--mud-palette-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Status dot + label */
.bz-run-status { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.bz-run-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tone-ok.bz-run-status, .bz-run-status.tone-ok { color: var(--bz-ok); }
.bz-run-status.tone-bad { color: var(--bz-bad); }
.bz-run-status.tone-live { color: var(--bz-accent); }
.bz-run-status.tone-live .dot { animation: bz-pulse 1.2s ease-in-out infinite; }
.bz-run-status.tone-wait { color: var(--bz-warn-icon); }
.bz-run-status.tone-warn { color: var(--bz-warn-icon); }
.bz-run-status.tone-neutral { color: var(--mud-palette-text-secondary); }

/* Empty states */
.bz-empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; }
.bz-empty-state.compact { padding: 28px 16px; }
.bz-empty-mascot { width: 56px; height: 56px; margin-bottom: 6px; opacity: .9; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); animation: bz-bob 3.2s ease-in-out infinite; }
.bz-empty-state.compact .bz-empty-mascot { width: 40px; height: 40px; }
.bz-empty-title { font-size: 1rem; font-weight: 600; }
.bz-empty-text { max-width: 420px; color: var(--mud-palette-text-secondary); font-size: .86rem; }
.bz-empty-actions { display: flex; gap: 8px; margin-top: 10px; }
@keyframes bz-bob { 50% { transform: translateY(-4px); } }

/* Bot cards */
.bz-bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bz-bot-skeleton { height: 150px; }
.bz-bot-card { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.bz-bot-card:hover, .bz-bot-card:focus-visible { border-color: var(--bz-accent); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); outline: 0; }
.bz-bot-card header { display: flex; align-items: flex-start; gap: 12px; }
.bz-bot-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, hsl(var(--hue) 62% 52%), hsl(calc(var(--hue) + 40) 62% 42%));
    color: #fff; font-weight: 700; font-size: 1rem;
}
.bz-bot-title { flex: 1; min-width: 0; }
.bz-bot-title h2 { margin: 0; font-size: .98rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-bot-title span { display: block; color: var(--mud-palette-text-secondary); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-run-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.bz-run-strip span { height: 8px; border-radius: 2px; background: var(--bz-line); }
.bz-run-strip .tone-ok { background: var(--bz-ok); }
.bz-run-strip .tone-bad { background: var(--bz-bad); }
.bz-run-strip .tone-live { background: var(--bz-accent); animation: bz-pulse 1.2s ease-in-out infinite; }
.bz-run-strip .tone-wait { background: var(--bz-warn-icon); }
.bz-run-strip .tone-warn { background: var(--bz-warn-icon); }
.bz-run-strip .tone-neutral { background: var(--mud-palette-text-secondary); }
/* Picking Bots to delete: a checkbox on each card and a bar with the count and actions. */
.bz-bot-card.picked { border-color: var(--bz-accent); background: color-mix(in srgb, var(--bz-accent) 10%, var(--bz-card)); }
.bz-bot-check { display: inline-flex; flex: none; margin: 7px -4px 0 -2px; }
.bz-select-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--bz-accent); border-radius: 8px; background: color-mix(in srgb, var(--bz-accent) 8%, var(--bz-card)); position: sticky; top: 8px; z-index: 5; }
.bz-select-bar strong { font-size: .88rem; }
.bz-owner-select { min-width: 200px; max-width: 280px; }
.bz-bot-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.bz-bot-meta { display: flex; align-items: center; gap: 6px; color: var(--mud-palette-text-secondary); font-size: .78rem; }
/* A Bot that runs on its own: its next run, linking to the Schedules tab. */
.bz-bot-schedule { display: flex; align-items: center; gap: 6px; margin: -4px 0 -2px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--bz-accent) 10%, transparent); color: var(--mud-palette-text-primary); font-size: .78rem; text-decoration: none; min-width: 0; }
.bz-bot-schedule span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-bot-schedule .mud-icon-root { color: var(--bz-accent); flex: none; }
.bz-bot-schedule:hover { background: color-mix(in srgb, var(--bz-accent) 18%, transparent); }
.bz-bot-schedule.paused { background: var(--bz-card); color: var(--mud-palette-text-secondary); }
.bz-bot-schedule.paused .mud-icon-root { color: var(--mud-palette-text-secondary); }
.bz-bot-schedule.problem .mud-icon-root { color: var(--bz-warn-icon); }

/* Bot detail */
.bz-detail-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bz-tabs .mud-tabs-tabbar { background: transparent; border-bottom: 1px solid var(--bz-border); }
.bz-tabs .mud-tab { min-height: 42px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.bz-tile-value-sm { font-size: 1.25rem; padding-top: 6px; }

.bz-list { display: flex; flex-direction: column; gap: 8px; }
.bz-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--bz-border); border-radius: 8px; background: var(--bz-panel); }
.bz-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bz-list-main strong { font-size: .9rem; font-weight: 600; }
.bz-list-main span { color: var(--mud-palette-text-secondary); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-version { min-width: 44px; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Run rows */
.bz-run-rows { display: flex; flex-direction: column; }
.bz-run-day { padding: 14px 6px 6px; color: var(--mud-palette-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.bz-run-row {
    display: grid; grid-template-columns: 54px minmax(0, 1fr) 104px 74px 110px 74px auto; align-items: center; gap: 12px;
    padding: 9px 10px; margin: 0 -4px; border-radius: 6px; border-left: 3px solid transparent; cursor: pointer;
}
.bz-run-row + .bz-run-row { border-top: 1px solid var(--bz-line); }
.bz-run-row:hover { background: var(--bz-card); }
.bz-run-row:focus-visible { outline: 2px solid var(--bz-accent); outline-offset: -2px; }
.bz-run-row.selected { background: var(--bz-selection); color: var(--bz-selection-text); }
.bz-run-row.tone-live { border-left-color: var(--bz-accent); }
.bz-run-row.tone-bad { border-left-color: var(--bz-bad); }
.bz-run-row.tone-wait { border-left-color: var(--bz-warn-icon); }
.bz-run-row.tone-warn { border-left-color: var(--bz-warn-icon); }
.bz-run-id { color: var(--mud-palette-text-secondary); font-size: .8rem; font-variant-numeric: tabular-nums; }
.bz-run-name { display: flex; flex-direction: column; min-width: 0; }
.bz-run-name strong { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-run-name span { color: var(--mud-palette-text-secondary); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-run-duration, .bz-run-when { font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bz-run-when { color: var(--mud-palette-text-secondary); text-align: right; }
.bz-run-resources { display: flex; align-items: center; gap: 6px; color: var(--mud-palette-text-secondary); font-size: .74rem; white-space: nowrap; }
.bz-meter { width: 36px; height: 5px; border-radius: 3px; background: var(--bz-line); overflow: hidden; }
.bz-meter span { display: block; height: 100%; background: var(--bz-accent); }
/* Peak CPU and memory are admin-only. */
.bz-run-row.no-resources { grid-template-columns: 54px minmax(0, 1fr) 104px 74px 74px auto; }

@media (max-width: 900px) {
    .bz-run-row, .bz-run-row.no-resources { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; }
    .bz-run-row .bz-run-state { grid-column: 3; grid-row: 1; }
    .bz-run-duration { grid-column: 2; grid-row: 2; color: var(--mud-palette-text-secondary); }
    .bz-run-when { grid-column: 3; grid-row: 2; }
    .bz-run-resources { display: none; }
}

/* Runs page */
.bz-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bz-filter-row .bz-search-box { margin-left: auto; }
.bz-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--bz-border); border-radius: 15px;
    background: var(--bz-card); color: var(--mud-palette-text-primary); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.bz-chip:hover { border-color: var(--bz-accent); }
.bz-chip.selected { border-color: var(--bz-accent); background: color-mix(in srgb, var(--bz-accent) 18%, var(--bz-card)); }
.bz-chip .count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bz-accent); color: #fff; font-size: .7rem; text-align: center; }

.bz-master-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.bz-master-detail.has-detail { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); }
.bz-master-detail.has-detail .bz-run-row { grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; }
.bz-master-detail.has-detail .bz-run-state { grid-column: 3; grid-row: 1; }
.bz-master-detail.has-detail .bz-run-duration { grid-column: 2; grid-row: 2; color: var(--mud-palette-text-secondary); }
.bz-master-detail.has-detail .bz-run-when { grid-column: 3; grid-row: 2; }
.bz-master-detail.has-detail .bz-run-resources { display: none; }
.bz-master { max-height: calc(100vh - 210px); overflow-y: auto; }
.bz-detail { position: sticky; top: 64px; max-height: calc(100vh - 90px); overflow-y: auto; padding: 8px 16px 16px; }
.bz-detail-close { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 4px; }
.bz-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 10px; color: var(--mud-palette-text-secondary); font-size: .8rem; }
.bz-skeleton-stack { display: flex; flex-direction: column; gap: 8px; }
.bz-skeleton-stack .bz-shimmer { height: 44px; }
@media (max-width: 1199px) { .bz-master-detail.has-detail { grid-template-columns: minmax(0, 1fr); } .bz-detail { position: static; max-height: none; } }

/* Jobs */
.bz-job-cell { display: flex; align-items: center; gap: 4px; }
.bz-job-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.bz-job-option {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--bz-border); border-radius: 8px;
    background: var(--bz-card); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bz-job-option strong { font-size: .88rem; }
.bz-job-option span { color: var(--mud-palette-text-secondary); font-size: .76rem; }
.bz-job-option.selected { border-color: var(--bz-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bz-accent) 20%, transparent); }
.bz-run-note { display: flex; gap: 8px; align-items: flex-start; color: var(--mud-palette-text-secondary); font-size: .8rem; }
/* Schedule time zone list: the zone, then its offset and the time there now. */
.bz-zone-option { display: flex; justify-content: space-between; gap: 16px; width: 100%; }
.bz-zone-now { color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Run details: timeline and gallery */
.bz-timeline { position: relative; margin: 0; padding: 0 0 0 4px; list-style: none; }
.bz-timeline li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 6px 0 6px 18px; }
.bz-timeline li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--bz-line); }
.bz-timeline li::after { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--bz-panel); border: 2px solid var(--bz-accent); box-sizing: border-box; }
.bz-timeline li.level-error::after { border-color: var(--bz-bad); background: var(--bz-bad); }
.bz-timeline li.level-warning::after { border-color: var(--bz-warn-icon); }
.bz-timeline li.level-success::after { border-color: var(--bz-ok); background: var(--bz-ok); }
.bz-timeline time { color: var(--mud-palette-text-secondary); font: .76rem/1.6 Consolas, "Cascadia Mono", monospace; }
.bz-timeline-source { display: block; font-size: .78rem; font-weight: 600; }
.bz-timeline-source em { margin-left: 6px; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: .66rem; letter-spacing: .05em; }
.level-error .bz-timeline-source em { color: var(--bz-bad); }
.level-warning .bz-timeline-source em { color: var(--bz-warn-icon); }
.bz-timeline-message { display: block; font-size: .84rem; word-break: break-word; }

.bz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.bz-gallery figure { margin: 0; overflow: hidden; border: 1px solid var(--bz-border); border-radius: 8px; background: var(--bz-well); }
.bz-gallery img, .bz-gallery .bz-shimmer { display: block; width: 100%; height: 130px; object-fit: cover; border-radius: 0; }
.bz-gallery figcaption { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; font-size: .76rem; }
.bz-gallery figcaption span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .bz-empty-mascot, .bz-run-strip .tone-live, .bz-run-status.tone-live .dot { animation: none; }
    .bz-bot-card:hover { transform: none; }
}

/* Tab counts sit inline after the label as quiet pills, not as overlapping corner badges. */
.bz-tabs .mud-badge-root { display: inline-flex; align-items: center; position: static; }
.bz-tabs .mud-badge-wrapper { position: static; inset: auto; display: inline-flex; transform: none; }
.bz-tabs .mud-badge-wrapper .mud-badge {
    position: static; inset: auto; transform: none; min-width: 20px; height: 18px; margin-left: 8px; padding: 0 6px; border-radius: 9px;
    background: var(--bz-card); color: var(--mud-palette-text-secondary); border: 1px solid var(--bz-border); font-size: .7rem; font-weight: 700;
}
.bz-tabs .mud-badge-wrapper .mud-badge.mud-badge-success { background: color-mix(in srgb, var(--bz-ok) 18%, transparent); color: var(--bz-ok); border-color: transparent; }

/* Confirm dialog */
.bz-confirm-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; }
.bz-confirm-title .mud-icon-root { color: var(--bz-bad); }
.bz-confirm-body { font-size: .9rem; }
.bz-confirm-list { margin: 10px 0 0; padding-left: 18px; color: var(--mud-palette-text-secondary); font-size: .84rem; }
.bz-confirm-list li { padding: 2px 0; }

/* Run details: the outcome strip, inputs/outputs, the final screenshot and the folded details */
.app-strip-ok { background: color-mix(in srgb, var(--bz-ok) 10%, transparent); border-color: color-mix(in srgb, var(--bz-ok) 40%, transparent); }
.app-strip-ok > .mud-icon-root { color: var(--bz-ok); }
.app-strip-info { background: var(--bz-card); border-color: var(--bz-line); }
.app-strip-info > .mud-icon-root { color: var(--bz-accent); }
.bz-outcome { margin-bottom: 0; padding-top: 8px; padding-bottom: 8px; }
.bz-outcome-detail { display: block; margin-top: 2px; font-weight: 400; opacity: .9; overflow-wrap: anywhere; }
.bz-kv { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 6px 16px; margin: 0; font-size: .86rem; }
.bz-kv dt { color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.bz-kv dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.bz-final-shot { margin: 0 0 12px; }
.bz-final-shot img { display: block; max-width: 100%; max-height: 640px; margin: 0 auto; border: 1px solid var(--bz-line); border-radius: 8px; }
.bz-final-shot figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; color: var(--mud-palette-text-secondary); font-size: .8rem; }
.bz-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; }
.bz-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bz-facts span { color: var(--mud-palette-text-secondary); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.bz-facts strong { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.bz-details-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.bz-schedule-problem { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--bz-warn-icon); font-size: .8rem; }
.bz-schedule-main > span { white-space: normal; }
.bz-schedule-main .bz-run-status { display: inline-flex; vertical-align: middle; }