/* ═══════════════════════ AUTOMATION WORKBENCH (P1) ═══════════════════════
    The Automation tab: a list of automations and an n8n-style editor for one. Drawn in the console's
    own tokens so it inherits light/dark. Node hues (trigger green, agent indigo, store violet) are the
    only local colours. View is scoped under #dash. */

#dash .autov.hide { display: none; }
#dash .autov { display: flex; flex-direction: column; gap: 16px; }

/* ── list ──────────────────────────────────────────────────────────────────────────────────────── */
.auto-top { display: flex; justify-content: flex-end; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.wcard { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px; box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,.04)); display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.wcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.wtop { display: flex; align-items: center; gap: 10px; }
.wname { font-weight: 700; font-size: 15px; flex: 1; }
.wpill { font: 700 10px/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.wpill.on { background: color-mix(in srgb, #10b981 16%, transparent); color: #10b981; }
/* Where a flow came from: an organ shipped it, and the tab should not present it as hand-drawn. */
.wpill.from { background: color-mix(in srgb, #58a6ff 16%, transparent); color: #58a6ff; }
.wpill.run { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); animation: apulse 1.4s infinite; }
.wcard.running { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* list tabs (All / Running) */
.auto-top { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.wtabs { display: flex; gap: 6px; }
.wtab { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 600 13px/1 inherit; cursor: pointer; }
.wtab:hover { color: var(--text); }
.wtab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.wtab .cnt { opacity: .7; font-weight: 700; margin-left: 2px; }
.wtab .cnt.live { color: #fff; background: var(--accent); border-radius: 999px; padding: 0 6px; opacity: 1; }
.wtab.on .cnt.live { background: rgba(255,255,255,.25); }
.wmeta { font-size: 12.5px; color: var(--muted); }
.wacts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.wacts .btn { flex: 0 0 auto; }
.wempty { grid-column: 1/-1; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; line-height: 1.6; }

/* ── editor shell ──────────────────────────────────────────────────────────────────────────────── */
.auto-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* the name is sized, not greedy — it no longer stretches across the whole bar */
.auto-name { flex: 0 1 340px; min-width: 150px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 15px inherit; }
.auto-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* right cluster: switches · divider · actions — pinned right, NEVER shrinks (flex:0 0 auto), so when
   space runs out it wraps as a whole unit to the next line instead of squeezing labels into overlap. */
.auto-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.tool-div { width: 1px; align-self: stretch; min-height: 22px; background: var(--line); margin: 0 4px; }
/* clean toggle switches — just a track + label, no bordered pill */
.auto-switches { display: inline-flex; align-items: center; gap: 16px; }
.asw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; position: relative; }
.asw input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.asw input:focus-visible + .asw-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.asw-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--line); transition: background .15s ease; }
.asw-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .15s ease; }
.asw-txt { font: 600 12.5px inherit; color: var(--muted); white-space: nowrap; }
.asw:hover .asw-txt { color: var(--text); }
.asw.on .asw-track { background: #10b981; }
.asw.on .asw-thumb { translate: translateX(14px); }
.asw.on .asw-txt { color: var(--text); }
.asw.auto.on .asw-track { background: var(--accent); }
/* status is its own pill and only appears when there's a message — never wedged between buttons */
.amsg { flex: 0 0 auto; font: 500 12px inherit; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--faint); }
.amsg:empty { display: none; }
.amsg.ok { color: var(--accent); background: var(--accent-soft); }
.amsg.warn { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }

.auto-main { display: flex; gap: 14px; align-items: stretch; min-height: 420px; }
.auto-canvas {
   flex: 1; position: relative; overflow: auto; border: 1px solid var(--line);
   border-radius: 14px; background: var(--bg); -webkit-overflow-scrolling: touch;
   background-image: radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1.3px, transparent 1.3px);
   background-size: 22px 22px; background-position: 10px 10px; min-height: 340px; max-height: 62vh;
}
.auto-flow { position: relative; height: 300px; min-width: 100%; }
/* The SVG must render 1:1 with the absolutely-positioned nodes. width/height come from its own
   attributes (= the flow bounds); a CSS width:100% would stretch it past its viewBox and drag every
   edge off its ports (they'd float to the right of the nodes). */
.auto-flow svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.aedge { fill: none; stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 2.2; }

/* nodes */
.anode {
   position: absolute; width: 176px; display: flex; align-items: stretch; border-radius: 13px;
   background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(20,22,32,.10);
   cursor: grab; --nc: var(--accent);
   touch-action: none;      /* a touch-drag moves the node, it does not scroll the canvas */
   user-select: none; -webkit-user-select: none;
}
.anode.drag { cursor: grabbing; z-index: 10; box-shadow: 0 14px 34px rgba(20,22,32,.22); }
.anode.tg { --nc: #10b981; } .anode.ag { --nc: var(--accent); } .anode.fl { --nc: #f59e0b; } .anode.br { --nc: #f43f5e; } .anode.st { --nc: #8b5cf6; }
.anode.sel { border-color: var(--nc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc) 24%, transparent), 0 6px 18px rgba(20,22,32,.10); }
.anode .aic { width: 44px; flex: none; border-radius: 12px 0 0 12px; background: var(--nc); color: #fff; display: grid; place-items: center; font-size: 18px; }
.anode .anb { padding: 8px 11px; min-width: 0; }
.anode .ant { font-weight: 700; font-size: 12.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anode .ans { font: 10px ui-monospace, monospace; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aport { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--nc); top: 50%; transform: translateY(-50%); touch-action: none; }
.aport.i { left: -6px; cursor: default; } .aport.o { right: -6px; cursor: crosshair; }
.aport.o:hover { transform: translateY(-50%) scale(1.25); }
/* branch: two stacked output ports, colour-coded true/false */
.anode.br .aport.o.yes { top: 28%; border-color: #10b981; }
.anode.br .aport.o.no  { top: 72%; border-color: var(--bad); }
/* edges: a fat invisible hit-path for click-to-delete under each visible curve */
.aedge-hit { fill: none; stroke: transparent; stroke-width: 15; cursor: pointer; }
.aedge-hit:hover + .aedge { stroke-width: 3.4; }
.aedge.yes { stroke: #10b981; } .aedge.no { stroke: var(--bad); }
.aedge.tmp { stroke: var(--accent); stroke-dasharray: 6 4; opacity: .8; }
.cic.br { background: #f43f5e; }
/* run status ring + dot */
.anode.running { border-color: var(--accent); }
.anode.done { border-color: #10b981; }
.anode.error { border-color: var(--bad); }
.astat { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--panel); }
.astat.running { background: var(--accent); animation: apulse 1s infinite; }
.astat.done { background: #10b981; } .astat.error { background: var(--bad); } .astat.skipped { background: var(--muted); }
@keyframes apulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.aadd { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--muted); background: var(--panel); color: var(--muted); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.aadd:hover { border-color: var(--accent); color: var(--accent); }
.aadd-menu { position: absolute; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: 5px; display: flex; flex-direction: column; }
.aadd-menu button { text-align: left; padding: 8px 12px; border: none; background: none; color: var(--text); font: 500 13px inherit; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.aadd-menu button:hover { background: var(--accent-soft); }

/* ── config drawer ─────────────────────────────────────────────────────────────────────────────── */
.auto-cfg { width: 300px; flex: none; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 16px; overflow-y: auto; max-height: 560px; }
.chint { color: var(--muted); font-size: 13px; }
.chd { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.cic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; color: #fff; background: var(--accent); }
.cic.tg { background: #10b981; } .cic.ag { background: var(--accent); } .cic.fl { background: #f59e0b; } .cic.st { background: #8b5cf6; }
.filt-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
@media (max-width: 400px) { .filt-row { grid-template-columns: 1fr; } }
.chd b { font-size: 14px; } .chd span { display: block; font: 10px ui-monospace, monospace; color: var(--muted); }
.cf { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.cf > label { font: 700 10.5px/1.3 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cf input, .cf select, .cf textarea { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 13px; box-sizing: border-box; }
.cf textarea { resize: vertical; line-height: 1.5; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chint2 { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 11px; }
.chelp { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 2px 0 14px; }
.inserter { display: flex; flex-wrap: wrap; gap=5px; align-items: center; margin-top: 6px; }
.inserter > span { font: 10px ui-monospace, monospace; color: var(--muted); }
.ins { font: 11px ui-monospace, monospace; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent); cursor: pointer; }
.ins:hover { background: var(--accent); color: var(--accent-fg); }
.cf-row { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 10px; border-top: 1px solid var(--line); }

/* ── run panel ─────────────────────────────────────────────────────────────────────────────────── */
.runpanel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.rphd { font: 700 11px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.rphd b.running { color: var(--accent); } .rphd b.done { color: #10b981; } .rphd b.error { color: var(--bad); }
.rstep { display: flex; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line-2, var(--line)); }
.rstep:first-of-type { border-top: none; }
.rdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--muted); }
.rstep.running .rdot { background: var(--accent); animation: apulse 1s infinite; }
.rstep.done .rdot { background: #10b981; } .rstep.error .rdot { background: var(--bad); }
.rlab { font-weight: 600; font-size: 12.5px; }
.rout { font: 11px ui-monospace, monospace; color: var(--muted); margin-top: 2px; word-break: break-word; }

.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.btn.active-on { color: #10b981; border-color: #10b981; }
.btn.auto-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* schedule config row */
.sched-row { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.sched-row input[type=number] { max-width: 90px; }

/* run history list */
.hrun { display: flex; gap=9px; align-items: center; width: 100%; text-align: left; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); cursor: pointer; }
.hrun:hover { border-color: var(--accent); }
.hrun .rdot { background: var(--muted); margin-top: 0; }
.hrun.done .rdot { background: #10b981; } .hrun.error .rdot { background: var(--bad); } .hrun.running .rdot { background: var(--accent); }

@media (max-width: 720px) {
   .auto-main { flex-direction: column; }
   .auto-cfg { width: 100%; max-height: none; }
}

/* ── high-end run-results modal — adapts to whatever records a run produced ─────────────────────── */
.run-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
   padding: 24px; background: rgba(8,10,18,.58); backdrop-filter: blur(6px); }
.run-modal.on { display: flex; }
.run-modal .rrcard { width: min(980px, 95vw); max-height: 90vh; display: flex; flex-direction: column;
   background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.run-modal .rrhd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
   padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.run-modal .rrt { font: 700 18px/1.2 inherit; color: var(--text); }
.run-modal .rrs { margin-top: 3px; font: 500 12px/1 inherit; color: var(--muted); text-transform: capitalize; }
.run-modal .x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; border-radius: 8px; }
.run-modal .x:hover { color: var(--text); background: var(--faint); }
.run-modal .rrbody { padding: 18px 22px 24px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }

/* step flow (trigger → find → reply) */
.sflow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.schip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
   border: 1px solid var(--line); background: var(--faint); font: 600 12px/1 inherit; color: var(--muted); }
.schip .rdot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.schip.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.schip.done .rdot { background: var(--good); }
.schip.running { color: var(--accent); border-color: var(--accent); }
.schip.running .rdot { background: var(--accent); animation: apulse 1.3s infinite; }
.schip.error { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.schip.error .rdot { background: var(--bad); }
.sarr { color: var(--muted); opacity: .5; padding: 0 2px; font-size: 12px; }
.rrsum { font: 500 14px/1.5 inherit; color=var(--muted); }
.rrsum b { color: var(--text); font-weight: 800; }
.rrfilter { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
   background: var(--bg); color: var(--text); font: 500 14px/1 inherit; }
.rrfilter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* a labelled section per collection */
.rsec { display: flex; flex-direction: column; gap: 10px; }
.rsech { display: flex; align-items: center; gap: 10px; font: 700 13px/1 inherit; color=var(--text);
   text-transform: uppercase; letter-spacing: .04em; }
.rsech .rcount { background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 2px 9px; font: 700 12px/1 inherit; letter-spacing: 0; }
.rsech .rfrom { margin-left: auto; color: var(--muted); font=500 11px/1 inherit; text-transform: none; letter-spacing: 0; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap=12px; }
.lcard { display: flex; flex-direction: column; gap=8px; padding=14px; border-radius: var(--radius-sm);
   border: 1px solid var(--line); background: var(--bg); }
.lcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lhd { display: flex; align-items: baseline; justify-content=space-between; gap=10px; }
.lname { font: 700 14px/1.3 inherit; color=var(--text); }
.lwhen { flex: none; font=500 11px/1 inherit; color=var(--muted); }
.lwhy { font=400 13px/1.5 inherit; color=var(--text); opacity=.88; }
.lchips { display: flex; flex-wrap: wrap; gap=6px; }
.lchip { display=inline-flex; gap=5px; align-items=baseline; padding=3px 9px; border-radius=999px;
   background: var(--faint); border=1px solid var(--line-soft); font=500 11px/1.4 inherit; color=var(--text); }
.lchip em { color=var(--muted); font-style=normal; text-transform=uppercase; letter-spacing=.03em; font-size=10px; }
.llink { align-self=flex-start; margin-top=2px; font=600 12px/1 inherit; color=var(--accent); text-decoration=none; }
.llink:hover { text-decoration=underline; }
.tagset { display: flex; flex-wrap: wrap; gap=7px; }
.tagx { padding=5px 11px; border-radius=999px; background=var(--accent-soft); color=var(--accent-ink, var(--accent)); border=1px solid color-mix(in srgb, var(--accent) 25%, transparent); font=500 12px/1 inherit; }
.lempty { padding=22px; text-align=center; color=var(--muted); font=500 13px/1.5 inherit; grid-column=1 / -1; }

/* verbatim quote (what the person actually posted), contact row, secondary links */
.lquote { margin=0; padding=8px 12px; border-left=3px solid color-mix(in srgb, var(--accent) 55%, transparent);
   background=var(--faint); border-radius=0 8px 8px 0; font=italic 400 12.5px/1.5 inherit; color=var(--text); opacity=.82;
   display=-webkit-box; -webkit-line-clamp=4; -webkit-box-orient=vertical; overflow=hidden; }
.lcontacts { display: flex; flex-wrap: wrap; gap=6px; }
.lc-contact { padding=4px 10px; border-radius=999px; background=var(--good-soft, var(--faint)); border=1px solid color-mix(in srgb, var(--good, var(--accent)) 30%, transparent);
   color=var(--good, var(--text)); font=600 11.5px/1.3 inherit; text-decoration=none; }
a.lc-contact:hover { text-decoration=underline; }
.llinks { display: flex; flex-wrap: wrap; align-items=center; gap=14px; margin-top=2px; }
.llink.alt { font-weight=500; opacity=.8; text-transform=capitalize; }

/* ── pending reply approvals — the review queue at the top of the results view ──────────────────── */
.apprsec { display: flex; flex-direction=column; gap=10px; padding=14px; border-radius=var(--radius-sm);
   border=1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background=var(--accent-soft); }
.apprsec.idle { border-style=dashed; border-color=var(--line); background=var(--faint); }
.apprh { display: flex; align-items=center; gap=8px; font=700 13px/1.3 inherit; color=var(--text); }
.apprdot { width=9px; height=9px; border-radius=50%; background=var(--accent); box-shadow=0 0 0 4px var(--accent-soft); }
.apprdot.wait { background=var(--muted); animation=apulse 1.3s infinite; box-shadow=none; }
.appr { display: flex; flex-direction=column; gap=8px; padding=12px; border-radius=var(--radius-sm);
   background=var(--panel); border=1px solid var(--line); }
.appr-ctx { font=500 11.5px/1.4 inherit; color=var(--muted); }
.appr-reply { font=500 14px/1.55 inherit; color=var(--text); white-space=pre-wrap; padding=8px 10px;
   border-left=3px solid var(--accent); background=var(--bg); border-radius=0 8px 8px 0; }
.appr-why { font=italic 400 12px/1.4 inherit; color=var(--muted); }
.appr-acts { display: flex; flex-wrap: wrap; gap=8px; margin-top=2px; }

/* ── NEW AUTOMATION VIEW DESIGN ── */
.auto-header {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 24px 32px;
   border-bottom: 1px solid var(--line);
   background: var(--panel);
}
.auto-title {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin: 0;
}
.auto-title h1 {
   font-size: 22px;
   font-weight: 700;
   color: var(--tx);
   margin: 0;
}
.auto-title span {
   font-size: 14px;
   font-weight: 500;
   color: var(--muted);
   margin-top: 4px;
}
.auto-actions {
   display: flex;
   gap: 12px;
}
.auto-filters {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 32px;
   border-bottom: 1px solid var(--line);
   background: var(--panel);
}
.auto-filter-group {
   display: flex;
   gap: 16px;
}
.auto-filter-tab {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
   border-radius: var(--rs);
   font-weight: 600;
   font-size: 14px;
   color: var(--muted);
   cursor: pointer;
   transition: all .15s;
}
.auto-filter-tab.active {
   background: var(--accent-soft);
   color: var(--accent);
}
.auto-filter-tab .count {
   font-size: 12px;
   color: var(--faint);
   font-weight: 500;
}
.auto-filter-tab .count.live {
   background: var(--accent);
   color: var(--tx);
   border-radius: 999px;
   padding: 2px 6px;
   font-weight: 600;
}
.auto-list {
   flex: 1;
   overflow-y: auto;
   padding: 32px;
}
.auto-item {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 24px;
   border-radius: var(--r);
   background: var(--panel);
   border: 1px solid var(--line);
   transition: all .15s;
   cursor: pointer;
}
.auto-item:hover {
   border-color: var(--accent);
   box-shadow: var(--shadow);
   transform: translateY(-2px);
}
.auto-item--running {
   border-left: 3px solid var(--live);
}
.auto-item-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
}
.auto-item-title {
   font-weight: 600;
   font-size: 16px;
   color: var(--tx);
   flex: 1;
}
.auto-item-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   align-items: center;
   font-size: 14px;
}
.auto-item-body {
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.auto-item-description {
   font-size: 14px;
   line-height: 1.6;
   color: var(--muted);
}
.auto-item-details {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   font-size: 13px;
   color: var(--muted);
}
.auto-detail {
   display: flex;
   align-items: center;
   gap: 8px;
}
.auto-detail-label {
   font-weight: 600;
   color: var(--faint);
}
.auto-item-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 16px;
}
.auto-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 48px 24px;
}
.auto-empty-icon {
   font-size: 48px;
   color: var(--muted);
   margin-bottom: 16px;
}
.auto-empty-title {
   font-size: 20px;
   font-weight: 600;
   color: var(--tx);
   margin-bottom: 8px;
}
.auto-empty-description {
   font-size: 14px;
   line-height: 1.6;
   color: var(--muted);
   max-width: 400px;
}

/* Responsive adjustments for automation view */
@media (max-width: 768px) {
   .auto-header {
      padding: 20px 24px;
   }
   .auto-title h1 {
      font-size: 20px;
   }
   .auto-title span {
      font-size: 13px;
   }
   .auto-filters {
      flex-direction: column;
      gap: 16px;
      align-items: stretch;
   }
   .auto-filter-group {
      width: 100%;
   }
   .auto-actions {
      width: 100%;
      justify-content: space-between;
   }
   .auto-list {
      padding: 24px;
   }
   .auto-item {
      padding: 20px;
   }
   .auto-item-header {
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
   }
   .auto-item-title {
      font-size: 15px;
   }
   .auto-actions {
      margin-top: 12px;
   }
}