/* ===================================================================
   FLOWTRIG — ai-chatbot.css   (section: canvas-free live chat sim)
   Text left-aligned · demo window on the left.
   =================================================================== */
.ac-sec{ position:relative; overflow:hidden; }
.ac-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,64px); align-items:center; }
@media(max-width:940px){ .ac-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---- demo window ---- */
.ac-stage-wrap{ display:flex; justify-content:center; align-items:stretch; width:100%; }
.ac-window{ width:100%; height:100%; display:flex; flex-direction:column; border-radius:20px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow), 0 0 70px -34px rgba(43,232,129,.5); }
.ac-window::after{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(43,232,129,.6), transparent); z-index:3; }
.ac-winbar{ display:flex; align-items:center; gap:13px; padding:11px 15px; border-bottom:1px solid var(--line); background:var(--surface-2); position:relative; z-index:2; }
.ac-winbar .dots{ display:flex; gap:7px; }
.ac-winbar .dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.ac-winbar .dots i:nth-child(1){ background:#FF5F57; } .ac-winbar .dots i:nth-child(2){ background:#FEBC2E; } .ac-winbar .dots i:nth-child(3){ background:#28C840; }
.ac-winbar .url{ flex:1; text-align:center; font-size:11.5px; color:var(--tx-mute); font-family:var(--font-m); }
.ac-winbar .url b{ color:var(--tx-soft); font-weight:500; }
.ac-winbar .wlive{ font-size:11px; color:var(--neon); display:inline-flex; gap:6px; align-items:center; }
.ac-winbar .wlive::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon); animation:pulse 1.8s infinite; }

.ac-stage{ position:relative; flex:1; width:100%; min-height:452px; display:flex; flex-direction:column;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--neon) 7%, var(--bg-2)), var(--bg-2)); }

/* assistant header */
.acx-head{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--line-2); }
.acx-av{ width:38px; height:38px; border-radius:11px; flex:0 0 38px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#2EE57F,#0E7C42); box-shadow:0 6px 16px -6px rgba(43,232,129,.7); }
.acx-av svg{ width:21px; height:21px; color:#fff; }
.acx-id{ flex:1; min-width:0; line-height:1.25; }
.acx-id b{ font-size:13.5px; font-weight:700; }
.acx-id span{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tx-mute); }
.acx-id span .dot{ width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 7px var(--neon); }
.acx-kb{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--neon);
  background:var(--green-soft); border:1px solid rgba(43,232,129,.22); padding:5px 10px; border-radius:999px; transition:box-shadow .3s, transform .3s; }
.acx-kb.ping{ box-shadow:0 0 0 4px rgba(43,232,129,.18); transform:scale(1.04); }
.acx-kb.ping::after{ content:""; position:absolute; inset:0; border-radius:999px; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); animation:acx-scan .9s ease; }
.acx-kb{ position:relative; overflow:hidden; }
@keyframes acx-scan{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.acx-kb svg{ width:12px; height:12px; }
/* live stat strip */
.acx-stat{ display:flex; align-items:center; gap:8px; padding:8px 16px; border-bottom:1px solid var(--line-2); font-size:11px; color:var(--tx-mute); }
.acx-stat .lz{ width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 7px var(--neon); animation:pulse 1.8s infinite; }
.acx-stat b{ color:var(--neon-dim); font-weight:700; font-variant-numeric:tabular-nums; }
.acx-stat .sep{ margin:0 2px; opacity:.5; }

/* thread */
.acx-body{ flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.acx-row{ display:flex; }
.acx-row.in{ justify-content:flex-start; } .acx-row.out{ justify-content:flex-end; }
.acx-msg{ max-width:78%; font-size:12.5px; line-height:1.4; padding:9px 12px; border-radius:14px; position:relative;
  opacity:0; transform:translateY(8px); animation:acx-pop .32s cubic-bezier(.2,1,.4,1) forwards; box-shadow:0 2px 8px -4px rgba(0,0,0,.25); }
@keyframes acx-pop{ to{ opacity:1; transform:none; } }
.acx-row.in .acx-msg{ background:var(--surface-3); color:var(--tx); border-top-left-radius:5px; }
[data-theme="light"] .acx-row.in .acx-msg{ background:#EAEFEC; }
.acx-row.out .acx-msg{ background:linear-gradient(160deg,rgba(43,232,129,.22),rgba(31,168,85,.16)); border:1px solid rgba(43,232,129,.3); color:var(--tx); border-top-right-radius:5px; }
.acx-msg .src{ display:block; margin-top:6px; font-size:9.5px; color:var(--neon); font-weight:600; opacity:.9; }
.acx-msg .tm{ font-size:9px; color:var(--tx-mute); float:right; margin:4px 0 -2px 8px; }
/* typing */
.acx-typing{ display:inline-flex; gap:4px; align-items:center; padding:11px 13px; }
.acx-typing i{ width:6px; height:6px; border-radius:50%; background:var(--neon); animation:acx-td 1.1s infinite; }
.acx-typing i:nth-child(2){ animation-delay:.15s; } .acx-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes acx-td{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

/* multi-chat strip at bottom: shows it replies to many at once */
.acx-foot{ display:flex; gap:7px; padding:11px 16px 14px; border-top:1px solid var(--line-2); }
.acx-mini{ flex:1; display:flex; align-items:center; gap:7px; padding:7px 9px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-2); }
.acx-mini .mav{ width:18px; height:18px; border-radius:50%; flex:0 0 18px; background:linear-gradient(135deg,#19C2A8,#0E7C6E); }
.acx-mini .ml{ flex:1; height:5px; border-radius:3px; background:var(--fill-2); overflow:hidden; position:relative; }
.acx-mini .ml::after{ content:""; position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--neon),var(--green)); border-radius:3px; }
.acx-mini.done .ml::after{ width:100%; transition:width .5s ease; }
.acx-mini .mc{ width:14px; height:14px; border-radius:50%; flex:0 0 14px; display:flex; align-items:center; justify-content:center; background:var(--fill-2); color:var(--tx-mute); }
.acx-mini.done .mc{ background:var(--green-soft); color:var(--neon); }
.acx-mini .mc svg{ width:9px; height:9px; }

/* ---- right column copy (LEFT-aligned content) ---- */
.ac-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; text-align:left; }
.ac-copy h2{ margin:0; font-size:clamp(28px,3.3vw,46px); line-height:1.08; letter-spacing:-.03em; }
.ac-copy .sub{ margin:0; max-width:48ch; }
.ac-kicker{ display:inline-flex; align-items:center; gap:11px; }
.ac-kicker .ki{ width:34px; height:34px; border-radius:10px; background:var(--green-soft); border:1px solid rgba(43,232,129,.22); color:var(--neon); display:flex; align-items:center; justify-content:center; }
.ac-kicker .kt{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-soft); }
.ac-kicker .kl{ width:36px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--neon),transparent); }
.ac-list{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:11px; margin-top:6px; }
.ac-item{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:15px 17px; border-radius:16px;
  border:1px solid var(--line); background:color-mix(in oklab, var(--surface) 66%, transparent); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  text-align:left; transition:transform .26s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .26s; overflow:hidden; }
.ac-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--neon),var(--green)); transform:scaleY(0); transform-origin:top; transition:transform .3s; }
.ac-item:hover{ transform:translateX(5px); border-color:rgba(43,232,129,.4); box-shadow:0 18px 40px -26px rgba(0,0,0,.6); }
.ac-item:hover::before{ transform:scaleY(1); }
.ac-item .ai{ flex:0 0 42px; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--green-soft); border:1px solid rgba(43,232,129,.2); color:var(--neon); }
.ac-item .ai svg{ width:21px; height:21px; }
.ac-item h4{ margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.ac-item p{ margin:5px 0 0; font-size:12.5px; color:var(--tx-mute); line-height:1.48; }

@media(prefers-reduced-motion: reduce){ .acx-msg{ animation:none; opacity:1; transform:none; } }