/*
 * Think Macro — AI Automations Page
 * page-automations.css
 *
 * Page-specific styles for /ai-automations/ only.
 * Shared components live in tm-styles.css.
 */

/* ── FLOW WIDGET (hero) ───────────────────────────────── */
.flow-widget {
  background: rgba(8,13,23,.97);
  border: 1px solid var(--teal-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,.5), 0 0 0 1px rgba(65,190,176,.06);
}
.flow-head { background: #050A14; padding: 13px 18px; border-bottom: 1px solid var(--teal-border); display: flex; align-items: center; gap: 9px; }
.flow-head-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); animation:blink 2s infinite; }
.flow-head-title { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); }
.flow-head-badge { margin-left: auto; font-family:'JetBrains Mono',monospace; font-size:9px; color: #22c55e; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); border-radius: 20px; padding: 2px 9px; }
.flow-body { padding: 18px 16px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }

.flow-step { background: var(--card-bg); border: 1px solid var(--teal-border); border-radius: 12px; padding: 11px 13px; display: flex; align-items: center; gap: 11px; transition: border-color .4s, box-shadow .4s; }
.flow-step-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--teal-glow); border: 1px solid var(--teal-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.flow-step-info { flex: 1; min-width: 0; }
.flow-step-type { font-family:'JetBrains Mono',monospace; font-size: 8px; font-weight: 500; letter-spacing: .12em; margin-bottom: 2px; }
.fst-trigger { color: var(--teal); }
.fst-action { color: var(--steel); }
.fst-result { color: #22c55e; }
.flow-step-name { font-size: 12px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-step-tag { font-size: 10px; color: var(--steel); }
.flow-step-right { flex-shrink: 0; }
.fsp { font-family:'JetBrains Mono',monospace; font-size: 9px; padding: 2px 8px; border-radius: 20px; }
.fsp-trigger { color:var(--teal); background:rgba(65,190,176,.1); }
.fsp-action { color:var(--steel); background:rgba(58,66,82,.25); }
.fsp-result { color:#22c55e; background:rgba(34,197,94,.1); }

/* Connector between steps */
.flow-conn { width: 1px; height: 24px; background: var(--teal-border); margin: 0 auto; position: relative; overflow: visible; }
.flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(65,190,176,.9), 0 0 20px rgba(65,190,176,.4); position: absolute; left: -3px; top: -4px; animation: dot-travel 8s ease-in-out infinite; opacity: 0; }
.fc1 .flow-dot { animation-delay: 0.3s; }
.fc2 .flow-dot { animation-delay: 1.9s; }
.fc3 .flow-dot { animation-delay: 3.5s; }
.fc4 .flow-dot { animation-delay: 5.1s; }
@keyframes dot-travel { 0%{transform:translateY(0);opacity:0} 3%{opacity:1} 15%{transform:translateY(24px);opacity:1} 18%{transform:translateY(24px);opacity:0} 100%{transform:translateY(0);opacity:0} }

/* step glow synced to pulse arriving */
@keyframes step-glow { 0%,100%{border-color:var(--teal-border);box-shadow:none} 50%{border-color:var(--teal-strong);box-shadow:0 0 18px rgba(65,190,176,.18)} }
.fs1 { animation: step-glow 8s ease-in-out infinite; animation-delay: 0s; }
.fs2 { animation: step-glow 8s ease-in-out infinite; animation-delay: 1.6s; }
.fs3 { animation: step-glow 8s ease-in-out infinite; animation-delay: 3.2s; }
.fs4 { animation: step-glow 8s ease-in-out infinite; animation-delay: 4.8s; }
.fs5 { animation: step-glow 8s ease-in-out infinite; animation-delay: 6.4s; }

/* ── NOTIFICATION FEED WIDGET ─────────────────────────── */
.notif-widget { background:var(--navy-2); border:1px solid var(--teal-border); border-radius:20px; overflow:hidden; box-shadow:0 32px 96px rgba(0,0,0,.6),0 0 0 1px rgba(65,190,176,.12),0 0 80px rgba(65,190,176,.05); transition:transform .3s,box-shadow .3s; }
.notif-widget:hover { transform:translateY(-3px); box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(65,190,176,.2),0 0 120px rgba(65,190,176,.09); }
.widget-head { background:#080F1C; padding:13px 18px; border-bottom:1px solid var(--teal-border); display:flex; align-items:center; gap:9px; }
.widget-head-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); animation:blink 2s infinite; }
.widget-head-title { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); }
.widget-head-sub { font-size:10px; color:var(--steel); margin-left:auto; }
.notif-body { padding:16px; display:flex; flex-direction:column; gap:9px; }
.notif-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--teal-border); border-radius:10px; background:rgba(10,18,30,.7); opacity:0; animation:notif-in .45s ease forwards; }
.ni-1 { animation-delay: .3s; }
.ni-2 { animation-delay: 1.5s; }
.ni-3 { animation-delay: 2.7s; }
.ni-4 { animation-delay: 3.9s; }
.ni-5 { animation-delay: 5.1s; }
@keyframes notif-in { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.notif-icon { width:28px; height:28px; border-radius:7px; background:var(--teal-glow); border:1px solid var(--teal-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.notif-text { flex:1; }
.notif-title { font-size:11px; font-weight:600; color:var(--white); margin-bottom:2px; }
.notif-meta { font-size:10px; color:var(--steel); }
.notif-time { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--steel); flex-shrink:0; padding-top:1px; }

/* ── SEQUENCE WIDGET ──────────────────────────────────── */
.seq-widget { background:var(--navy-2); border:1px solid var(--teal-border); border-radius:20px; overflow:hidden; box-shadow:0 32px 96px rgba(0,0,0,.6),0 0 0 1px rgba(65,190,176,.12),0 0 80px rgba(65,190,176,.05); transition:transform .3s,box-shadow .3s; }
.seq-widget:hover { transform:translateY(-3px); box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(65,190,176,.2),0 0 120px rgba(65,190,176,.09); }
.seq-body { padding:18px 16px; }
.seq-item { display:flex; gap:12px; padding-bottom:14px; position:relative; }
.seq-item:not(:last-child)::before { content:''; position:absolute; left:12px; top:26px; bottom:0; width:1px; background:linear-gradient(180deg,var(--teal-border) 60%,transparent); }
.seq-node { width:24px; height:24px; border-radius:50%; border:1px solid var(--teal-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--teal); background:rgba(65,190,176,.07); }
.seq-content { flex:1; padding-top:2px; }
.seq-when { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--teal); letter-spacing:.06em; margin-bottom:3px; }
.seq-title { font-size:12px; font-weight:600; color:var(--white); margin-bottom:2px; }
.seq-detail { font-size:11px; color:var(--steel); line-height:1.5; }
.seq-badge { display:inline-block; margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:9px; padding:2px 7px; border-radius:20px; color:#22c55e; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); }

/* ── DASHBOARD WIDGET ─────────────────────────────────── */
.dash-widget { background:var(--navy-2); border:1px solid var(--teal-border); border-radius:20px; overflow:hidden; box-shadow:0 32px 96px rgba(0,0,0,.6),0 0 0 1px rgba(65,190,176,.12),0 0 80px rgba(65,190,176,.05); transition:transform .3s,box-shadow .3s; }
.dash-widget:hover { transform:translateY(-3px); box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 0 1px rgba(65,190,176,.2),0 0 120px rgba(65,190,176,.09); }
.dash-body { padding:18px 16px; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.dash-stat { background:rgba(10,18,30,.8); border:1px solid rgba(58,66,82,.5); border-radius:10px; padding:14px; }
.dash-val { font-family:'Montserrat',sans-serif; font-weight:900; font-size:26px; color:var(--teal); line-height:1; }
.dash-lbl { font-size:10px; color:var(--steel); margin-top:4px; line-height:1.4; }
.dash-divider { font-size:10px; font-weight:600; color:var(--steel); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; }
.dash-bars { display:flex; flex-direction:column; gap:9px; }
.dash-bar-row { display:flex; align-items:center; gap:10px; }
.dash-bar-name { font-size:11px; color:var(--mist); width:130px; flex-shrink:0; }
.dash-bar-track { flex:1; height:4px; background:rgba(58,66,82,.5); border-radius:3px; overflow:hidden; }
.dash-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--teal-dark),var(--teal)); animation:bar-grow 1.4s ease forwards; }
@keyframes bar-grow { from{width:0%} }
.dash-bar-pct { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--teal); width:32px; text-align:right; flex-shrink:0; }

/* ── BEFORE / AFTER CARD GRID ─────────────────────────── */
.ba-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.ba-card { border-radius:16px; overflow:hidden; border:1px solid var(--teal-border); background:var(--card-bg); transition:transform .2s,border-color .2s; }
.ba-card:hover { transform:translateY(-4px); border-color:var(--teal-strong); }
.ba-card-header { padding:14px 16px 12px; border-bottom:1px solid rgba(58,66,82,.35); display:flex; align-items:center; gap:9px; }
.ba-card-icon { width:28px; height:28px; border-radius:7px; background:var(--teal-glow); border:1px solid var(--teal-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ba-card-title { font-size:12px; font-weight:600; color:var(--white); line-height:1.3; }
.ba-halves { display:grid; grid-template-columns:1fr 1fr; }
.ba-before { padding:14px 14px 16px; border-right:1px solid rgba(58,66,82,.35); background:rgba(239,68,68,.03); position:relative; }
.ba-before::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#ef4444,#dc2626); }
.ba-after { padding:14px 14px 16px; background:rgba(65,190,176,.04); position:relative; }
.ba-after::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--teal-dark),var(--teal)); }
.ba-half-label { font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.ba-before .ba-half-label { color:#ef4444; }
.ba-after .ba-half-label { color:var(--teal); }
.ba-stat { font-family:'Montserrat',sans-serif; font-weight:900; font-size:22px; line-height:1.1; margin-bottom:5px; }
.ba-before .ba-stat { color:#ef4444; }
.ba-after .ba-stat { color:var(--teal); }
.ba-desc { font-size:10px; color:var(--steel); line-height:1.45; }
.ba-footer { padding:10px 16px; background:rgba(65,190,176,.06); border-top:1px solid var(--teal-border); display:flex; align-items:center; justify-content:space-between; }
.ba-footer-label { font-size:9px; color:var(--steel); letter-spacing:.04em; }
.ba-footer-value { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); }
.ba-total { margin-top:20px; display:flex; align-items:center; justify-content:space-between; padding:22px 28px; background:rgba(65,190,176,.07); border:1px solid var(--teal-border); border-radius:14px; }
.ba-total-label { font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; color:var(--white); }
.ba-total-value { font-family:'Montserrat',sans-serif; font-weight:900; font-size:26px; color:var(--teal); }
.ba-total-value sup { font-size:14px; font-weight:400; color:var(--steel); margin-left:6px; }