/* chats-auto.css — Supabot's Automations (chats-auto.js, p21/features slice A). Every rule is under html[data-look="chats"].
   Tokens (p21 SPEC §3.2): page #070707, one centred column min(760px, pane − 32px), agent bubble #222, 14/20 text, secondary
   #9a9a9a, primary button white on black, secondary #2b2b2b, quiet text; amber #f5b544, red #ff5f57, green #3ddc97. */

/* ------------------------------------------------------------------ the page */
html[data-look="chats"] .surf-pane[data-surf="automations"]{background:#070707}
html[data-look="chats"] .chauto-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 16px 40px;background:#070707}
html[data-look="chats"] .chauto-col{width:min(760px,100%);margin:0 auto;color:#ececec;font-size:14px;line-height:20px}
html[data-look="chats"] .chauto-lead{margin:6px 0 14px;font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chauto-loading,html[data-look="chats"] .chauto-noton{margin:48px 0 0;text-align:center;font-size:14px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chauto-err{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:24px 0 0;padding:12px 14px;border:1px solid rgba(255,95,87,.35);
  border-radius:14px;background:rgba(255,95,87,.06);font-size:13.5px;color:#ececec}
html[data-look="chats"] .chauto-err>span{flex:1 1 260px}

/* buttons: primary white on black, secondary #2b2b2b, quiet text (SPEC §3.2) */
html[data-look="chats"] .chauto-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 14px;border:0;border-radius:999px;
  font:inherit;font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;flex:none}
html[data-look="chats"] .chauto-btn.primary{background:#fff;color:#000}
html[data-look="chats"] .chauto-btn.primary:hover:not(:disabled){background:#e9e9e9}
html[data-look="chats"] .chauto-btn.secondary{background:#2b2b2b;color:#fff}
html[data-look="chats"] .chauto-btn.secondary:hover:not(:disabled){background:#363636}
html[data-look="chats"] .chauto-btn.quiet{background:none;color:#a0a0a0;padding:0 8px}
html[data-look="chats"] .chauto-btn.quiet:hover:not(:disabled){color:#ececec}
html[data-look="chats"] .chauto-btn.quiet.danger{color:#ff7a73}
html[data-look="chats"] .chauto-btn.quiet.danger:hover:not(:disabled){color:#ff9a94}
html[data-look="chats"] .chauto-btn.small{height:24px;padding:0;font-size:12.5px}
html[data-look="chats"] .chauto-btn:disabled{opacity:.55;cursor:default}
html[data-look="chats"] .chauto-btn:focus-visible,html[data-look="chats"] .chauto-row:focus-visible,html[data-look="chats"] .chauto-sw:focus-visible,
html[data-look="chats"] .chauto-sug:focus-visible,html[data-look="chats"] .chauto-crumb:focus-visible,html[data-look="chats"] .chauto-qlink:focus-visible,
html[data-look="chats"] .chauto-reclink:focus-visible,html[data-look="chats"] .chauto-waitname:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}

/* the head: ‹ back to the list */
html[data-look="chats"] .chauto-crumb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:28px;margin-left:-6px;padding:0;border:0;
  border-radius:8px;background:none;color:#8c8c8c;cursor:pointer}
html[data-look="chats"] .chauto-crumb:hover{background:#1a1a1a;color:#ececec}

/* the On switch */
html[data-look="chats"] .chauto-sw{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0;border:0;background:none;
  color:#ececec;font:inherit;font-size:13.5px;cursor:pointer}
html[data-look="chats"] .chauto-sw::before{content:"";display:block;width:34px;height:20px;border-radius:999px;background:#3a3a3a;transition:background .15s ease}
html[data-look="chats"] .chauto-swknob{position:absolute;left:2px;top:6px;width:16px;height:16px;border-radius:50%;background:#bdbdbd;transition:left .15s ease,background .15s ease}
html[data-look="chats"] .chauto-sw[aria-checked="true"]::before{background:#3ddc97}
html[data-look="chats"] .chauto-sw[aria-checked="true"] .chauto-swknob{left:16px;background:#fff}
html[data-look="chats"] .chauto-sw:disabled{cursor:default;opacity:.6}
html[data-look="chats"] .chauto-sw.head{height:32px;padding:0 10px 0 4px}
html[data-look="chats"] .chauto-sw.head .chauto-swknob{left:6px;top:8px}
html[data-look="chats"] .chauto-sw.head[aria-checked="true"] .chauto-swknob{left:20px}
html[data-look="chats"] .chauto-swword{color:#cfcfcf}

/* ------------------------------------------------------------------ waiting for you */
html[data-look="chats"] .chauto-waiting{margin:0 0 16px}
html[data-look="chats"] .chauto-waith{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12px;line-height:16px;font-weight:600;color:#bdbdbd}
html[data-look="chats"] .chauto-amber{width:7px;height:7px;border-radius:50%;background:#f5b544}
html[data-look="chats"] .chauto-wait{padding:12px 14px;border:1px solid rgba(245,181,68,.28);border-radius:16px;background:#14120c}
html[data-look="chats"] .chauto-wait+.chauto-wait{margin-top:8px}
html[data-look="chats"] .chauto-waitline{margin:0;font-size:14px;line-height:20px;color:#e6e6e6;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-waitname{padding:0;border:0;background:none;color:#fff;font:inherit;font-weight:600;cursor:pointer;text-align:left}
html[data-look="chats"] .chauto-waitname:hover{text-decoration:underline}
html[data-look="chats"] .chauto-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
html[data-look="chats"] .chauto-note{font-size:13px;line-height:20px;color:#9a9a9a}

/* ------------------------------------------------------------------ the list */
html[data-look="chats"] .chauto-list{border:1px solid #1f1f1f;border-radius:16px;background:#121212;overflow:hidden}
html[data-look="chats"] .chauto-row{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 14px 12px 12px;cursor:pointer;outline:none}
html[data-look="chats"] .chauto-row+.chauto-row{border-top:1px solid #1a1a1a}
html[data-look="chats"] .chauto-row:hover{background:#171717}
html[data-look="chats"] .chauto-av{flex:none;width:40px;height:40px;display:grid;place-items:center}
html[data-look="chats"] .chauto-av.bolt{border-radius:12px;background:#1c1c1c;color:#e8e8e8}
html[data-look="chats"] .chauto-rtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html[data-look="chats"] .chauto-namerow{display:flex;align-items:baseline;gap:8px;min-width:0}
html[data-look="chats"] .chauto-name{min-width:0;font-size:14.5px;line-height:20px;font-weight:600;color:#f4f4f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chauto-tag{flex:none;padding:1px 6px;border-radius:999px;background:#242424;color:#9a9a9a;font-size:10.5px;line-height:15px;letter-spacing:.02em}
html[data-look="chats"] .chauto-tag.warn{background:rgba(245,181,68,.16);color:#f5b544}
html[data-look="chats"] .chauto-rline{font-size:13px;line-height:20px;color:#c9c9c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chauto-facts{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;line-height:16px;color:#8f8f8f;white-space:nowrap;overflow:hidden}
html[data-look="chats"] .chauto-facts>svg{flex:none;color:#8a8a8a}
html[data-look="chats"] .chauto-facts>span{flex:none}
html[data-look="chats"] .chauto-facts>span:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chauto-sep{color:#555}
html[data-look="chats"] .chauto-st.warn{color:#f5b544}
html[data-look="chats"] .chauto-st.bad{color:#ff7a73}
html[data-look="chats"] .chauto-row[data-state="off"] .chauto-name,html[data-look="chats"] .chauto-row[data-state="off"] .chauto-rline{color:#8f8f8f}
html[data-look="chats"] .chauto-row[data-state="off"] .chauto-av{opacity:.55}
html[data-look="chats"] .chauto-go{flex:none;display:grid;color:#6a6a6a;margin-left:-4px}

/* the tiny flow: the canvas's shapes at 20 px (n8n-look greys) */
html[data-look="chats"] .chauto-mini{flex:none;display:flex;align-items:center}
html[data-look="chats"] .chauto-mn{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:#1f1f1f;border:1px solid #2e2e2e;color:#b9b9b9}
html[data-look="chats"] .chauto-mn.trig{border-radius:10px 6px 6px 10px}
html[data-look="chats"] .chauto-mn.ok{border-color:rgba(61,220,151,.45)}
html[data-look="chats"] .chauto-mn.warn{border-color:rgba(245,181,68,.6);color:#f5b544}
html[data-look="chats"] .chauto-mini>i{width:8px;height:1.5px;background:#343434}
html[data-look="chats"] .chauto-mini>i.ok{background:rgba(61,220,151,.55)}
html[data-look="chats"] .chauto-more{font-size:11px;line-height:20px;color:#8f8f8f;padding-left:2px}
html[data-look="chats"] .chauto-row[data-state="off"] .chauto-mini{opacity:.5}

/* under the list: where "+ New" would be, you ask instead */
html[data-look="chats"] .chauto-foot{display:flex;align-items:center;gap:14px;margin-top:12px;padding:16px 16px 16px 14px;border:1px dashed #2c2c2c;border-radius:16px}
html[data-look="chats"] .chauto-foottile{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#1c1c1c;color:#e8e8e8}
html[data-look="chats"] .chauto-foottxt{flex:1;min-width:0}
html[data-look="chats"] .chauto-footname{font-size:14px;line-height:20px;font-weight:600;color:#ececec}
html[data-look="chats"] .chauto-footline{font-size:13px;line-height:19px;color:#9a9a9a}

/* ------------------------------------------------------------------ the empty list */
html[data-look="chats"] .chauto-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(40px,14vh,150px)}
html[data-look="chats"] .chauto-emptytile{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:#161616;border:1px solid #262626;color:#f0f0f0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html[data-look="chats"] .chauto-emptyh{margin:18px 0 6px;font-size:20px;line-height:28px;font-weight:600;color:#f4f4f4}
html[data-look="chats"] .chauto-emptyp{margin:0;max-width:470px;text-wrap:balance;font-size:14px;line-height:21px;color:#9a9a9a}
html[data-look="chats"] .chauto-emptyp.member{margin-top:14px;color:#cfcfcf}
html[data-look="chats"] .chauto-try{margin-top:26px;width:100%;max-width:520px;display:flex;flex-direction:column;gap:8px}
html[data-look="chats"] .chauto-trylabel{padding-left:4px;font-size:12px;line-height:16px;font-weight:600;color:#7c7c7c;text-align:left}
html[data-look="chats"] .chauto-sug{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 14px 10px 12px;border:1px solid #232323;border-radius:14px;
  background:#121212;color:#e6e6e6;font:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}
html[data-look="chats"] .chauto-sug:hover{background:#181818;border-color:#2e2e2e}
html[data-look="chats"] .chauto-sugic{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#1f1f1f;color:#bdbdbd}
html[data-look="chats"] .chauto-sugtext{flex:1;min-width:0}
html[data-look="chats"] .chauto-suggo{flex:none;display:grid;color:#6a6a6a}
html[data-look="chats"] .chauto-emptyfoot{margin-top:22px;display:flex;align-items:center;gap:10px}
html[data-look="chats"] .chauto-emptynote{margin:14px 0 0;font-size:12px;line-height:16px;color:#7c7c7c}

/* ------------------------------------------------------------------ one automation */
html[data-look="chats"] .chauto-problem{margin:8px 0 12px;padding:10px 14px;border:1px solid rgba(245,181,68,.3);border-radius:14px;background:#14120c;color:#f5d38e;font-size:13.5px;line-height:20px}
html[data-look="chats"] .chauto-sentence{margin:8px 0 14px;font-size:14px;line-height:20px;color:#d6d6d6;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-grid{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0 0 22px;padding:14px 16px;border:1px solid #1f1f1f;
  border-radius:16px;background:#121212;font-size:13px;line-height:20px}
html[data-look="chats"] .chauto-grid dt{color:#8f8f8f}
html[data-look="chats"] .chauto-grid dd{margin:0;color:#ececec;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-h{margin:0 0 8px;font-size:12px;line-height:16px;font-weight:600;color:#9a9a9a;letter-spacing:.01em}
html[data-look="chats"] .chauto-steps{list-style:none;margin:0 0 22px;padding:6px 0;border:1px solid #1f1f1f;border-radius:16px;background:#121212}
html[data-look="chats"] .chauto-step{display:flex;align-items:flex-start;gap:12px;padding:8px 14px}
html[data-look="chats"] .chauto-step.line{padding:5px 14px 5px 50px}
html[data-look="chats"] .chauto-stepg{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#1b1b1b;border:1px solid #2a2a2a;color:#e6e6e6}
html[data-look="chats"] .chauto-step.line .chauto-stepg{width:24px;height:24px;border-radius:7px}
html[data-look="chats"] .chauto-steptxt{flex:1;min-width:0;padding-top:4px}
html[data-look="chats"] .chauto-step.line .chauto-steptxt{padding-top:2px}
html[data-look="chats"] .chauto-stephead{font-size:14px;line-height:20px;color:#ececec;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-step.job>.chauto-steptxt>.chauto-stephead{font-weight:600}
html[data-look="chats"] .chauto-stepsub{font-size:13px;line-height:20px;color:#9a9a9a;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-task{white-space:pre-line;color:#c9c9c9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-look="chats"] .chauto-task.all{display:block;-webkit-line-clamp:unset}
html[data-look="chats"] .chauto-none{margin:0;padding:8px 14px;font-size:13px;line-height:20px;color:#8f8f8f}
html[data-look="chats"] .chauto-runs{margin:0 0 18px;padding:4px 0;border:1px solid #1f1f1f;border-radius:16px;background:#121212}
html[data-look="chats"] .chauto-run{display:flex;align-items:flex-start;gap:12px;padding:10px 14px}
html[data-look="chats"] .chauto-run+.chauto-run{border-top:1px solid #1a1a1a}
html[data-look="chats"] .chauto-rundot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#5a5a5a}
html[data-look="chats"] .chauto-run[data-state="ok"] .chauto-rundot{background:#3ddc97}
html[data-look="chats"] .chauto-run[data-state="bad"] .chauto-rundot{background:#ff5f57}
html[data-look="chats"] .chauto-run[data-state="wait"] .chauto-rundot{background:#f5b544}
html[data-look="chats"] .chauto-runtxt{flex:1;min-width:0}
html[data-look="chats"] .chauto-runhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
html[data-look="chats"] .chauto-runlabel{font-size:13.5px;line-height:20px;font-weight:600;color:#ececec}
html[data-look="chats"] .chauto-runwhen{margin-left:auto;font-size:12px;line-height:20px;color:#7c7c7c}
html[data-look="chats"] .chauto-runline{font-size:13px;line-height:20px;color:#9a9a9a;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-runline.warn{color:#f5d38e}
html[data-look="chats"] .chauto-runerr{font-size:13px;line-height:20px;color:#ff9a94;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-detailfoot{display:flex;justify-content:flex-start;margin:4px 0 0}
html[data-look="chats"] .chauto-gone{margin:48px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#9a9a9a}
html[data-look="chats"] .chauto-gone p{margin:0}

/* ------------------------------------------------------------------ in the chats: the plan card (a p21 plan bubble) */
html[data-look="chats"] .chauto-cardwrap{align-self:flex-start;width:100%;max-width:min(640px,100%);display:flex}
html[data-look="chats"] .chauto-card{min-width:0;max-width:100%;padding:10px 14px 12px;border-radius:18px;background:#222;color:#fff;font-size:14px;line-height:20px}
html[data-look="chats"] .chauto-cardkind{display:flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chauto-cardkind>svg{color:#f5b544}
html[data-look="chats"] .chauto-cardname{margin-top:2px;font-size:14px;line-height:20px;font-weight:600;color:#fff;overflow-wrap:anywhere}
html[data-look="chats"] .chauto-cardtask{margin-top:4px;white-space:pre-line;color:#e6e6e6;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html[data-look="chats"] .chauto-cardtask.all{display:block;-webkit-line-clamp:unset}
html[data-look="chats"] .chauto-more-btn{margin-top:2px;padding:0;border:0;background:none;color:#a0a0a0;font:inherit;font-size:13px;cursor:pointer}
html[data-look="chats"] .chauto-more-btn:hover{color:#ececec}
html[data-look="chats"] .chauto-cardfacts{margin-top:8px;font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chauto-carderr{margin-top:8px;font-size:13px;line-height:20px;color:#ff9a94}
html[data-look="chats"] .chauto-cardnote{margin-top:8px;font-size:13px;line-height:20px;color:#9a9a9a}
html[data-look="chats"] .chauto-cardacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* made / replaced: one record line (a closed bubble, SPEC §2.7) */
html[data-look="chats"] .chauto-rec{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;min-height:36px;padding:8px 12px;border-radius:18px;background:#222;
  font-size:14px;line-height:20px;color:#a2a2a2}
html[data-look="chats"] .chauto-rectext{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look="chats"] .chauto-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:#2b2b2b;color:#a7a7a7;font-size:12.5px}
html[data-look="chats"] .chauto-chipdot{width:6px;height:6px;border-radius:50%;background:#7a7a7a}
html[data-look="chats"] .chauto-chip.on .chauto-chipdot{background:#3ddc97}
html[data-look="chats"] .chauto-reclink,html[data-look="chats"] .chauto-qlink{flex:none;padding:0;border:0;background:none;color:#cfcfcf;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
html[data-look="chats"] .chauto-reclink:hover,html[data-look="chats"] .chauto-qlink:hover{color:#fff;text-decoration:underline}
/* the queued run in a chat's lane (A.20): the same quiet line, with its link */
html[data-look="chats"] .chauto-qline .chauto-qlink{font-size:13px;color:#dcdcdc}

/* ------------------------------------------------------------------ narrower */
@media (max-width:800px){
  html[data-look="chats"] .chauto-scroll{padding:4px 12px 32px}
  html[data-look="chats"] .chauto-row{gap:12px;padding:12px 12px 12px 10px}
  html[data-look="chats"] .chauto-grid{grid-template-columns:minmax(0,1fr);gap:2px}
  html[data-look="chats"] .chauto-grid dd{margin-bottom:8px}
  html[data-look="chats"] .chauto-foot{flex-wrap:wrap;align-items:flex-start}
  html[data-look="chats"] .chauto-foottxt{flex:1 1 calc(100% - 54px)}
  html[data-look="chats"] .chauto-foot>.chauto-btn{margin-left:54px}
}
@media (max-width:480px){
  html[data-look="chats"] .chauto-mini{display:none}
  /* the facts wrap on a phone: its state ("today's job waits for you to send it") is never cut off */
  html[data-look="chats"] .chauto-facts{display:block;white-space:normal;overflow:visible}
  html[data-look="chats"] .chauto-facts>svg{display:inline-block;vertical-align:-2px;margin-right:6px}
  html[data-look="chats"] .chauto-facts>span,html[data-look="chats"] .chauto-facts>span:last-child{overflow:visible}
  html[data-look="chats"] .chauto-sep{margin:0 5px}
  html[data-look="chats"] .chauto-bit{display:inline-block;max-width:100%}
  html[data-look="chats"] .chauto-nm{white-space:nowrap}
  html[data-look="chats"] .chauto-stsep{display:none}
  html[data-look="chats"] .chauto-facts>.chauto-st{display:block}
  html[data-look="chats"] .chauto-av{width:34px;height:34px}
  html[data-look="chats"] .chauto-go{display:none}
  html[data-look="chats"] .chauto-step.line{padding-left:40px}
}
@media (prefers-reduced-motion:reduce){
  html[data-look="chats"] .chauto-sw::before,html[data-look="chats"] .chauto-swknob{transition:none}
}