/* ============================================================
   Cron/Schedules Panel Styles
   ============================================================ */

.cron-panel {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-bg-primary);
  overflow: hidden;
}

/* ---- Toolbar ---- */
.cron-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.cron-toolbar-title {
  font-size: 16px; font-weight: 700; color: var(--c-text-primary);
}
.cron-toolbar-spacer { flex: 1; }
.cron-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--c-border); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.cron-btn-primary {
  background: var(--c-accent); color: var(--c-text-inverse); border-color: var(--c-accent);
}
.cron-btn-primary:hover { background: var(--c-accent-hover); }
.cron-btn-ghost { background: transparent; color: var(--c-text-secondary); }
.cron-btn-ghost:hover { background: var(--c-bg-hover); color: var(--c-text-primary); }
.cron-btn-danger { color: var(--c-rose); }
.cron-btn-danger:hover { background: rgba(244,63,94,0.1); }
.cron-btn-sm { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
.cron-btn-icon { width: 30px; height: 30px; padding: 0; border-radius: 6px; justify-content: center; }

/* ---- List --- */
.cron-list { flex: 1; overflow-y: auto; padding: 8px 16px; }

.cron-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--c-border);
  margin-bottom: 6px;
  transition: all 0.15s;
  background: var(--c-bg-surface);
}
.cron-item:hover { border-color: var(--c-border-light); }
.cron-item.active { border-color: var(--c-accent); box-shadow: 0 0 8px var(--c-accent-glow); }

.cron-item-status {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.cron-item-status.enabled { background: var(--c-green); box-shadow: 0 0 6px var(--c-green-glow); }
.cron-item-status.disabled { background: var(--c-text-tertiary); }

.cron-item-icon {
  font-size: 20px; flex-shrink: 0; width: 32px; text-align: center;
}

.cron-item-body { flex: 1; min-width: 0; }
.cron-item-title { font-size: 14px; font-weight: 600; color: var(--c-text-primary); margin-bottom: 2px; }
.cron-item-meta {
  font-size: 11px; color: var(--c-text-tertiary);
  display: flex; align-items: center; gap: 8px;
}
.cron-item-cron {
  font-size: 11px; font-family: "JetBrains Mono", "Fira Code", monospace;
  padding: 1px 6px; border-radius: 4px;
  background: var(--c-bg-deep); color: var(--c-accent); white-space: nowrap;
}

.cron-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

.cron-item-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.cron-item-badge.running { background: rgba(0,212,255,0.15); color: var(--c-accent); }
.cron-item-badge.idle    { background: var(--c-bg-deep); color: var(--c-text-tertiary); }
.cron-item-badge.failed  { background: rgba(244,63,94,0.12); color: var(--c-rose); }

/* ---- Empty state ---- */
.cron-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; color: var(--c-text-tertiary); gap: 12px;
}
.cron-empty-icon { font-size: 48px; opacity: 0.3; }
.cron-empty-title { font-size: 16px; font-weight: 600; color: var(--c-text-secondary); }
.cron-empty-desc { font-size: 13px; }

/* ---- Form ---- */
.cron-form-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 500;
}
.cron-form {
  background: var(--c-bg-surface); border: 1px solid var(--c-border);
  border-radius: 16px; width: 560px; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.cron-form-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--c-border);
}
.cron-form-header h3 { font-size: 16px; font-weight: 700; }
.cron-form-close {
  width: 28px; height: 28px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  color: var(--c-text-tertiary); background: transparent; border: none; cursor: pointer;
}
.cron-form-close:hover { background: var(--c-bg-hover); }

.cron-form-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.cron-form-group { margin-bottom: 14px; }
.cron-form-label { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.cron-form-input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-bg-deep);
  color: var(--c-text-primary); font-size: 13px;
  font-family: inherit; outline: none; transition: border-color 0.15s;
  box-sizing: border-box;
}
.cron-form-input:focus { border-color: var(--c-accent); }
.cron-form-textarea {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-bg-deep);
  color: var(--c-text-primary); font-size: 13px; font-family: inherit;
  resize: vertical; min-height: 80px; outline: none;
  box-sizing: border-box;
}
.cron-form-textarea:focus { border-color: var(--c-accent); }
.cron-form-select {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-bg-deep);
  color: var(--c-text-primary); font-size: 13px;
  font-family: inherit; outline: none; cursor: pointer;
  box-sizing: border-box;
}

.cron-form-row { display: flex; gap: 10px; }
.cron-form-row > * { flex: 1; }

.cron-form-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--c-border);
}

/* ---- Trigger picker ---- */
.cron-trigger-tabs {
  display: flex; gap: 2px; margin-bottom: 10px;
  background: var(--c-bg-deep); border-radius: 8px; padding: 3px;
}
.cron-trigger-tab {
  flex: 1; padding: 6px 8px; text-align: center;
  font-size: 12px; font-weight: 500; border-radius: 6px;
  color: var(--c-text-secondary); cursor: pointer;
  transition: all 0.12s; border: none; background: transparent;
}
.cron-trigger-tab.active { background: var(--c-bg-surface); color: var(--c-accent); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.cron-presets {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.cron-preset {
  font-size: 11px; padding: 3px 8px; border-radius: 12px;
  border: 1px solid var(--c-border); cursor: pointer;
  background: transparent; color: var(--c-text-secondary);
  transition: all 0.1s;
}
.cron-preset:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ---- History ---- */
.cron-history { padding: 8px 16px; }
.cron-history-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--c-border);
  font-size: 12px;
}
.cron-history-status {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
}
.cron-history-status.completed { background: var(--c-green); }
.cron-history-status.failed { background: var(--c-rose); }
.cron-history-status.running { background: var(--c-accent); }
.cron-history-body { flex: 1; min-width: 0; }
.cron-history-meta { color: var(--c-text-tertiary); font-size: 11px; }
.cron-history-output {
  color: var(--c-text-secondary); margin-top: 4px;
  white-space: pre-wrap; word-break: break-all;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  max-height: 80px; overflow-y: auto;
  background: var(--c-bg-deep); padding: 6px 8px; border-radius: 6px;
}

/* ---- Workflow Editor (Dify-style canvas) ---- */
.wf-shell {
  border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg-deep); overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 550px;
}
.wf-tb {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.wf-tb-title { font-size: 13px; font-weight: 700; color: var(--c-text-primary); margin-right: 8px; }
.wf-tb-sep { flex: 1; }
.wf-tb-cat {
  font-size: 10px; font-weight: 600; color: var(--c-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 0 4px; opacity: 0.6;
}
.wf-hint { font-size: 11px; color: var(--c-text-tertiary); padding: 8px 0; line-height: 1.5; }

.wf-body { display: flex; flex: 1; min-height: 55vh; position: relative; }
.wf-viewport { transform-origin: 0 0; }
.wf-canvas {
  flex: 1; overflow: auto; position: relative;
  cursor: grab;
  background:
    radial-gradient(circle, var(--c-border) 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: var(--c-bg-primary);
}
.wf-canvas:active { cursor: grabbing; }
.wf-svg {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1;
}
.wf-svg path { pointer-events: auto; }
.wf-nodes { position: relative; z-index: 3; }
.wf-node-body { position: relative; z-index: 1; }

/* Edge styles */
.wf-edge {
  fill: none; stroke: var(--c-accent); stroke-width: 2;
  cursor: pointer; opacity: 0.7; transition: opacity 0.15s;
}
.wf-edge:hover { opacity: 1; stroke-width: 3; }
.wf-edge.sel { opacity: 1; stroke-width: 3; stroke: var(--c-amber); }
.wf-edge-drawing {
  fill: none; stroke: var(--c-accent); stroke-width: 2;
  stroke-dasharray: 6 4; opacity: 0.6; pointer-events: none;
}

/* Node cards */
.wf-node {
  position: absolute; display: flex; align-items: center;
  background: var(--c-bg-surface); border: 2px solid var(--c-border);
  border-radius: 10px; cursor: grab; user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  height: 52px;
}
.wf-node:hover { border-color: var(--c-border-light); }
.wf-node.sel { box-shadow: 0 0 12px var(--c-accent-glow); }

/* Execution status on canvas nodes */
.wf-node.wf-exec-running {
  border-color: var(--c-amber); box-shadow: 0 0 10px rgba(245,158,11,0.45);
  animation: wf-node-pulse 0.8s ease-in-out infinite;
}
.wf-node.wf-exec-ok { border-color: var(--c-green); box-shadow: 0 0 6px var(--c-green-glow); }
.wf-node.wf-exec-failed { border-color: var(--c-rose); box-shadow: 0 0 6px rgba(244,63,94,0.25); }
.wf-node.wf-exec-pending { opacity: 0.4; }
@keyframes wf-node-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(245,158,11,0.35); }
  50% { box-shadow: 0 0 18px rgba(245,158,11,0.7); }
}

.wf-node-body {
  display: flex; align-items: center; gap: 6px; flex: 1;
  padding: 0 8px; min-width: 0;
}
.wf-node-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; }
.wf-node-text { min-width: 0; }
.wf-node-type {
  font-size: 9px; font-weight: 700; color: var(--c-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.3px; display: block;
}
.wf-node-name {
  font-size: 11px; color: var(--c-text-primary); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}

/* Connection handles */
.wf-handle {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-bg-surface); border: 2px solid var(--c-accent);
  flex-shrink: 0; cursor: crosshair; transition: transform 0.1s;
}
.wf-handle:hover { transform: scale(1.3); }
.wf-handle.wf-in { margin-left: -6px; }
.wf-handle.wf-out { margin-right: -6px; }

/* Side panel */
.wf-side {
  width: 260px; border-left: 1px solid var(--c-border);
  background: var(--c-bg-surface); display: flex; flex-direction: column;
  flex-shrink: 0; overflow-y: auto;
}
.wf-side-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--c-border);
  font-size: 13px; font-weight: 700;
}
.wf-side-close {
  width: 24px; height: 24px; border-radius: 4px; display: flex;
  align-items: center; justify-content: center; font-size: 16px;
  color: var(--c-text-tertiary); background: none; border: none; cursor: pointer;
}
.wf-side-close:hover { background: var(--c-bg-hover); }
.wf-side-bd { padding: 12px 14px; flex: 1; overflow-y: auto; }
.wf-side-ft {
  padding: 10px 14px; border-top: 1px solid var(--c-border);
  display: flex; gap: 8px; justify-content: flex-end;
}
.wf-field-label {
  font-size: 11px; font-weight: 600; color: var(--c-text-secondary);
  display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Edge hint bar */
.wf-edge-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-top: 1px solid var(--c-border);
  font-size: 12px; color: var(--c-text-secondary);
  background: var(--c-bg-surface);
}

/* ---- Live execution tracking ---- */
.wf-live {
  margin: 8px 16px; border-radius: 10px;
  background: var(--c-bg-surface); border: 1px solid var(--c-accent);
  overflow: hidden;
}
.wf-live-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}
.wf-live-body {
  padding: 6px 10px; max-height: 400px; overflow-y: auto;
}
.wf-live-item {
  padding: 8px 10px; border-radius: 6px; margin-bottom: 4px;
  background: var(--c-bg-deep); font-size: 12px;
  border-left: 3px solid transparent;
}
.wf-live-item.running {
  border-left-color: var(--c-amber);
  animation: wf-pulse 1.5s ease-in-out infinite;
}
.wf-live-item.ok { border-left-color: var(--c-green); }
.wf-live-item.failed { border-left-color: var(--c-rose); }
@keyframes wf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.wf-live-icon { width: 20px; text-align: center; flex-shrink: 0; }
.wf-live-label { flex: 1; color: var(--c-text-primary); font-weight: 500; }
.wf-live-type { font-size: 10px; color: var(--c-text-tertiary); margin: 0 8px; text-transform: uppercase; }
.wf-live-status { font-size: 10px; font-weight: 600; min-width: 40px; }
.wf-live-item.running .wf-live-status { color: var(--c-accent); }
.wf-live-item.ok .wf-live-status { color: var(--c-green); }
.wf-live-item.failed .wf-live-status { color: var(--c-rose); }
.wf-live-time { font-size: 10px; color: var(--c-text-tertiary); font-family: monospace; min-width: 50px; text-align: right; }
.wf-live-out {
  margin-top: 6px; padding: 6px 8px; border-radius: 4px;
  background: var(--c-bg-primary); font-size: 11px; color: var(--c-text-secondary);
  white-space: pre-wrap; word-break: break-all; max-height: 80px; overflow-y: auto;
}
.wf-live-err {
  margin-top: 6px; padding: 6px 8px; border-radius: 4px;
  background: rgba(244,63,94,0.08); font-size: 11px; color: var(--c-rose);
  white-space: pre-wrap; word-break: break-all;
}

/* ---- Node Manager ---- */
.node-mgr { display: flex; flex-direction: column; height: 100%; }
.node-mgr-list { flex: 1; overflow-y: auto; padding: 8px 16px; }
.node-mgr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--c-border); margin-bottom: 4px;
  background: var(--c-bg-surface);
}
.node-mgr-icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.node-mgr-body { flex: 1; min-width: 0; }
.node-mgr-name { font-size: 13px; font-weight: 600; color: var(--c-text-primary); }
.node-mgr-meta { font-size: 11px; color: var(--c-text-tertiary); display: block; margin-top: 1px; }
.node-mgr-field-row { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }

/* ---- Workflow log in trigger result ---- */
.wf-log { margin-top: 8px; }
.wf-log-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 11px; border-bottom: 1px solid var(--c-border);
}
.wf-log-node { color: var(--c-accent); font-weight: 600; min-width: 28px; }
.wf-log-status { color: var(--c-text-tertiary); }
.wf-log-status.ok { color: var(--c-green); }
.wf-log-status.failed { color: var(--c-rose); }
.wf-log-time { color: var(--c-text-tertiary); margin-left: auto; font-family: monospace; }

/* ---- Execution Monitor ---- */
.monitor-view {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}

.monitor-tb {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.monitor-tb-title { font-size: 14px; font-weight: 700; color: var(--c-text-primary); }
.monitor-tb-count { font-size: 11px; color: var(--c-text-tertiary); }

/* Monitor list */
.monitor-list { flex: 1; overflow-y: auto; padding: 8px 16px; }
.monitor-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--c-border); margin-bottom: 6px;
  background: var(--c-bg-surface); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.monitor-row:hover { border-color: var(--c-accent); box-shadow: 0 0 8px var(--c-accent-glow); }
.monitor-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.monitor-dot.completed { background: var(--c-green); box-shadow: 0 0 6px var(--c-green-glow); }
.monitor-dot.failed { background: var(--c-rose); box-shadow: 0 0 6px rgba(244,63,94,0.3); }
.monitor-dot.running { background: var(--c-amber); box-shadow: 0 0 8px rgba(245,158,11,0.5); animation: wf-node-pulse 0.8s ease-in-out infinite; }
.monitor-row-body { flex: 1; min-width: 0; }
.monitor-row-name { font-size: 14px; font-weight: 600; color: var(--c-text-primary); margin-bottom: 2px; }
.monitor-row-meta { font-size: 11px; color: var(--c-text-tertiary); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.monitor-row-sep { opacity: 0.4; }
.monitor-row-arrow { font-size: 18px; color: var(--c-text-tertiary); flex-shrink: 0; }
.monitor-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
  white-space: nowrap; flex-shrink: 0;
}
.monitor-badge.completed { background: rgba(34,197,94,0.12); color: var(--c-green); }
.monitor-badge.failed { background: rgba(244,63,94,0.12); color: var(--c-rose); }
.monitor-badge.running { background: rgba(245,158,11,0.12); color: var(--c-amber); }

/* Monitor detail */
.monitor-detail-view { gap: 0; }
.monitor-detail-body {
  flex: 1; min-height: 0; display: flex; gap: 0;
}

/* Left: timeline — takes remaining space */
.monitor-timeline {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  overflow-y: auto;
}
.monitor-timeline--full { border-right: none; }
.monitor-timeline-hd {
  font-size: 12px; font-weight: 700; color: var(--c-text-secondary);
  padding: 10px 16px; border-bottom: 1px solid var(--c-border);
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.monitor-timeline-list {
  flex: 1; overflow-y: auto; padding: 8px 12px;
}
.monitor-step {
  padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
  background: var(--c-bg-surface); border-left: 3px solid var(--c-border);
  font-size: 12px; transition: border-color 0.2s;
  cursor: pointer;
}
.monitor-step:hover { background: var(--c-bg-hover); }
.monitor-step.ok { border-left-color: var(--c-green); }
.monitor-step.failed { border-left-color: var(--c-rose); background: rgba(244,63,94,0.04); }
.monitor-step.running { border-left-color: var(--c-amber); }
.monitor-step-head {
  display: flex; align-items: center; gap: 8px;
}
.monitor-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-bg-deep); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--c-text-tertiary); flex-shrink: 0;
}
.monitor-step.ok .monitor-step-num { background: rgba(34,197,94,0.12); color: var(--c-green); }
.monitor-step.failed .monitor-step-num { background: rgba(244,63,94,0.12); color: var(--c-rose); }
.monitor-step-icon { font-size: 14px; flex-shrink: 0; }
.monitor-step-label { font-weight: 600; color: var(--c-text-primary); }
.monitor-step-type {
  font-size: 10px; color: var(--c-text-tertiary); text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: var(--c-bg-deep);
}
.monitor-step-status {
  font-size: 11px; font-weight: 600; margin-left: auto;
}
.monitor-step-status.ok { color: var(--c-green); }
.monitor-step-status.failed { color: var(--c-rose); }
.monitor-step-status.running { color: var(--c-amber); }
.monitor-step-time {
  font-size: 11px; color: var(--c-text-tertiary); font-family: monospace;
  min-width: 50px; text-align: right;
}
.monitor-step-chevron {
  font-size: 10px; color: var(--c-text-tertiary); transition: transform 0.2s;
  flex-shrink: 0; margin-left: 2px;
}
.monitor-step-chevron.open { transform: rotate(180deg); }
.monitor-step-output {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: var(--c-bg-deep); font-size: 11px; color: var(--c-text-secondary);
  white-space: pre-wrap; word-break: break-all; max-height: 300px; overflow-y: auto;
  line-height: 1.5; font-family: "JetBrains Mono", "Fira Code", monospace;
}

/* Right: canvas — fixed width, hideable */
.monitor-canvas {
  width: 300px; min-width: 0; display: flex; flex-direction: column;
  background: var(--c-bg-primary); border-left: 1px solid var(--c-border);
  transition: width 0.25s ease;
  flex-shrink: 0;
}
.monitor-canvas-hd {
  font-size: 11px; font-weight: 700; color: var(--c-text-secondary);
  padding: 10px 14px; border-bottom: 1px solid var(--c-border);
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.monitor-canvas .wf-shell { border: none; border-radius: 0; min-height: 0; }
.monitor-canvas .wf-body { min-height: 0; }

/* Canvas in live execution (right sidebar) */
.monitor-canvas-live {
  width: 280px; min-width: 0; display: flex; flex-direction: column;
  background: var(--c-bg-primary); border-left: 1px solid var(--c-border);
  transition: width 0.25s ease;
  flex-shrink: 0;
}
.monitor-canvas-live .wf-shell { border: none; border-radius: 0; min-height: 0; }
.monitor-canvas-live .wf-body { min-height: 0; }
.monitor-canvas-live .monitor-canvas-hd {
  font-size: 11px; font-weight: 700; color: var(--c-text-secondary);
  padding: 8px 14px; border-bottom: 1px solid var(--c-border);
  text-transform: uppercase; letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Deliverables section — inside timeline area */
.monitor-deliverables {
  border-top: 2px solid var(--c-border); margin: 16px 12px 8px; padding-top: 4px;
  position: relative; z-index: 1;
}
.monitor-deliverables-hd {
  font-size: 13px; font-weight: 700; color: var(--c-text-primary);
  padding: 12px 16px 8px; border-bottom: 1px solid var(--c-border-subtle);
}
.monitor-deliverables-body {
  padding: 8px 16px 16px;
}
.monitor-file-list {
  display: flex; flex-direction: column; gap: 4px;
}
.monitor-file-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; background: var(--c-bg-surface);
  font-size: 12px;
}
.monitor-file-icon { font-size: 16px; }
.monitor-file-name { flex: 1; font-weight: 500; color: var(--c-text-primary); }
.monitor-file-size { color: var(--c-text-tertiary); font-size: 11px; }
.monitor-output-full {
  background: var(--c-bg-deep); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 12px 16px; font-size: 12px;
  line-height: 1.6; white-space: pre-wrap; max-height: 300px;
  overflow-y: auto; color: var(--c-text-primary); margin: 0;
  font-family: var(--font-mono, 'SF Mono','Fira Code',monospace);
}

/* AI background config banner */
.cron-ai-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin: 0 0 1px 0;
  font-size: 12px; color: #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 0;
}
.cron-ai-banner-done {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.cron-ai-banner b { color: #fff; }
.cron-ai-banner .cron-btn { color: #fff; border-color: rgba(255,255,255,0.4); }
.cron-ai-banner .cron-btn:hover { background: rgba(255,255,255,0.15); }

/* Session picker highlight */
.cron-item-active { background: var(--c-bg-surface); border: 1px solid var(--c-accent); }

/* Meeting cards */
.meeting-card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: all .15s;
}
.meeting-card:hover { border-color: var(--c-accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.meeting-card-active { border-left: 3px solid var(--c-green); }
.meeting-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.meeting-card-title { font-size:14px; font-weight:700; color:var(--c-text-primary); }
.meeting-card-badge { font-size:10px; color:#fff; padding:2px 8px; border-radius:10px; }
.meeting-card-topic { font-size:12px; color:var(--c-text-secondary); margin-bottom:8px; }
.meeting-card-members { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.meeting-card-member { display:flex; align-items:center; gap:3px; background:var(--c-bg-surface); padding:2px 6px; border-radius:6px; }
.meeting-card-meta { display:flex; gap:12px; font-size:10px; color:var(--c-text-tertiary); }