/* ═══════════════════════════════════════════════════════════════════════════
   AI AGENT MODULE — design-system global (di-generate dari adesign/ai-agent-studio.css)
   Modul: BarantumChat › aichat_v2. Prefix kelas: .ais-*
   SCOPING: semua rule komponen di-scope di bawah root ".ais-app" — root ini
   DIPASANG PER-REGION/LEAF saat diport (rail, tiap SFC daun, region builder),
   TIDAK PERNAH membungkus anak yang belum diport → nol collision dgn SFC lama.
   GLOBAL (tak di-scope): :root vars, @keyframes, .ais-selpop* (popover teleport ke <body>).
   DIBUANG dari prototipe: .ais-proto* (dev switcher) + override chrome .brtm-* (proto-bar).
   Regenerate: node scratchpad/prefix-ais.mjs (jangan edit tangan bila masih mengikuti prototipe).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   AI AGENT STUDIO — full-module redesign prototype
   Modul: BarantumChat › aichat_v2 (AI Agent + AI Credit + Workflow/Performa beta)
   Prefix kelas: .ais-*   ·   Acuan DNA: Broadcast Template/Campaign
   Design tokens dari modul asli: biru #1B6FBE, hijau #00B87A, ungu #7C5CFC
   Self-contained di atas barantum.css (chrome) + Bootstrap Icons + Inter.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ais-primary:#1B6FBE; --ais-primary-d:#155a9c; --ais-primary-l:#e8f1fb; --ais-primary-l2:#f2f7fd;
  --ais-green:#00B87A;  --ais-green-l:#e6f8f1;
  --ais-purple:#7C5CFC; --ais-purple-l:#efeafe;
  --ais-amber:#f59e0b;  --ais-amber-l:#fef3e2;
  --ais-sky:#0ea5e9;    --ais-sky-l:#e4f5fd;
  --ais-red:#e5484d;    --ais-red-l:#fdecec;
  --ais-wa:#25D366;
  --ais-ink:#0f1b2d;    --ais-ink2:#516079;  --ais-ink3:#8494ab;
  --ais-line:#e6ebf2;   --ais-line2:#eef2f7;
  --ais-bg:#f4f6fa;     --ais-card:#ffffff;
  --ais-radius:14px;    --ais-radius-sm:10px;
  --ais-shadow:0 1px 2px rgba(16,27,45,.04), 0 6px 22px rgba(16,27,45,.06);
  --ais-shadow-lg:0 12px 40px rgba(16,27,45,.16);
  --ais-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── reset lokal ─────────────────────────────────────────────────────────── */
.ais-app *{box-sizing:border-box}
.ais-app{font-family:var(--ais-font);color:var(--ais-ink);background:var(--ais-bg);
  -webkit-font-smoothing:antialiased;font-size:13.5px;line-height:1.5}
.ais-app :where(button){font-family:inherit;cursor:pointer;border:0;background:none}
.ais-app a{text-decoration:none;color:inherit}
.ais-app input,.ais-app textarea,.ais-app select{font-family:inherit;font-size:13px;color:var(--ais-ink)}
.ais-app ::-webkit-scrollbar{width:9px;height:9px}
.ais-app ::-webkit-scrollbar-thumb{background:#cfd8e6;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.ais-app ::-webkit-scrollbar-thumb:hover{background:#b6c2d6;background-clip:padding-box}
.ais-hidden{display:none !important}

/* ═══ CHROME — pakai design system Barantum (barantum.css) ════════════════ */
/* proto-bar 44px + topbar 56px → kompensasi tinggi wrapper & icon-sidebar */
/* area modul aichat_v2 (rail + konten) di dalam main-wrapper */
.ais-app .ais-module{flex:1;min-width:0;display:flex;overflow:hidden}

/* ═══ PROTO SWITCHER (bar peta layar — bukan bagian produk) ════════════════ */

/* ═══ RAIL MODUL (.ais-subnav) — kolom kiri modul aichat_v2 ════════════════ */
.ais-app .ais-subnav{width:176px;flex-shrink:0;background:#fff;border-right:1px solid var(--ais-line);
  padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.ais-app .ais-subnav-lbl{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ais-ink3);padding:8px 10px 4px}
.ais-app .ais-nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  font-size:13px;font-weight:550;color:var(--ais-ink2);transition:.14s;position:relative;cursor:pointer;white-space:nowrap}
.ais-app .ais-nav-item i{font-size:16px;color:var(--ais-ink3);flex:none}
.ais-app .ais-nav-item:hover{background:var(--ais-primary-l2);color:var(--ais-ink)}
.ais-app .ais-nav-item.on{background:var(--ais-primary-l);color:var(--ais-primary-d)}
.ais-app .ais-nav-item.on i{color:var(--ais-primary)}
.ais-app .ais-nav-item.beta{opacity:.72}
.ais-app .ais-nav-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:.3px}
.ais-app .ais-nav-badge.new{background:var(--ais-green-l);color:#068a5b}
.ais-app .ais-nav-badge.soon{background:#eef1f6;color:#8494ab}
.ais-app .ais-nav-credit{margin-left:auto;flex:none;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--ais-primary-l);color:var(--ais-primary-d);letter-spacing:.1px;font-variant-numeric:tabular-nums}
.ais-app .ais-nav-credit-item{align-items:center}
.ais-app .ais-nav-credit-txt{display:flex;flex-direction:column;gap:1px;line-height:1.25;min-width:0}
.ais-app .ais-nav-credit-txt .l{font-size:12px;font-weight:500;color:var(--ais-ink2)}
.ais-app .ais-nav-credit-txt .v{font-size:13.5px;font-weight:750;color:var(--ais-primary-d);font-variant-numeric:tabular-nums;letter-spacing:.1px}
.ais-app .ais-nav-item.on .ais-nav-credit-txt .l{color:var(--ais-primary-d)}
.ais-app .ais-nav-item.on .ais-nav-credit{background:#fff}
.ais-app .ais-subnav-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--ais-line2)}
.ais-app .ais-reload{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;width:100%;
  font-size:12.5px;font-weight:550;color:var(--ais-ink2)}
.ais-app .ais-reload:hover{background:var(--ais-line2)}
.ais-app .ais-reload i{font-size:15px}
.ais-app .ais-reload i.spin{animation:ais-spin .7s linear infinite}
@keyframes ais-spin{to{transform:rotate(360deg)}}

/* kolom konten modul */
.ais-app .ais-content{flex:1;min-width:0;background:var(--ais-bg);overflow:auto}
.ais-app .ais-view{display:none}
.ais-app .ais-view.on{display:block;height:100%}
.ais-app .ais-wrap{max-width:1600px;margin:0 auto;padding:22px 26px 60px}
.ais-app .ais-wrap-wide{max-width:none;margin:0;padding:22px 26px 60px}

/* ═══ SUBHEADER (judul modul + aksi kanan) ════════════════════════════════ */
.ais-app .ais-subhead{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ais-app .ais-subhead-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:19px;
  background:linear-gradient(135deg,#1B6FBE,#3d8fdd);box-shadow:0 4px 12px rgba(27,111,190,.28);flex-shrink:0}
.ais-app .ais-subhead h1{font-size:19px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px}
.ais-app .ais-subhead p{margin:2px 0 0;font-size:12.5px;color:var(--ais-ink2)}
.ais-app .ais-subhead-r{margin-left:auto;display:flex;align-items:center;gap:9px}

/* ═══ TOMBOL ══════════════════════════════════════════════════════════════ */
.ais-app .ais-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-size:12.5px;
  font-weight:600;transition:.14s;white-space:nowrap;border:1px solid transparent}
.ais-app .ais-btn i{font-size:14px}
.ais-app .ais-btn-pri{background:var(--ais-primary);color:#fff;box-shadow:0 2px 8px rgba(27,111,190,.28)}
.ais-app .ais-btn-pri:hover{background:var(--ais-primary-d)}
.ais-app .ais-btn-grn{background:linear-gradient(135deg,#00B87A,#00a06b);color:#fff;box-shadow:0 2px 8px rgba(0,184,122,.28)}
.ais-app .ais-btn-grn:hover{filter:brightness(.95)}
.ais-app .ais-btn-gho{background:#fff;border-color:var(--ais-line);color:var(--ais-ink2)}
.ais-app .ais-btn-gho:hover{border-color:#c7d2e2;color:var(--ais-ink);background:#fbfcfe}
.ais-app .ais-btn-soft{background:var(--ais-primary-l);color:var(--ais-primary-d)}
.ais-app .ais-btn-soft:hover{background:#dcebfa}
.ais-app .ais-btn-sm{padding:6px 10px;font-size:11.5px}
.ais-app .ais-btn-lg{padding:11px 20px;font-size:13.5px}
.ais-app .ais-btn-ic{width:34px;height:34px;padding:0;justify-content:center;border-radius:9px;background:#fff;border:1px solid var(--ais-line);color:var(--ais-ink2)}
.ais-app .ais-btn-ic:hover{border-color:#c7d2e2;color:var(--ais-ink)}
.ais-app .ais-btn-ic i{font-size:15px}

/* pill saldo/credit */
.ais-app .ais-credit-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ais-line);
  border-radius:22px;padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600}
.ais-app .ais-credit-pill i{color:var(--ais-green)}
.ais-app .ais-credit-pill b{color:var(--ais-ink)}
.ais-app .ais-credit-pill .ais-plus{width:23px;height:23px;border-radius:50%;background:var(--ais-green-l);color:#068a5b;
  display:grid;place-items:center;font-size:13px}
.ais-app .ais-credit-pill .ais-plus:hover{background:var(--ais-green);color:#fff}

/* ═══ BADGE / CHIP / PILL ═════════════════════════════════════════════════ */
.ais-app .ais-badge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.4px;
  padding:2px 7px;border-radius:20px;text-transform:uppercase}
.ais-app .ais-badge.new{background:var(--ais-green-l);color:#068a5b}
.ais-app .ais-badge.beta{background:var(--ais-purple-l);color:#5b3fd6}
.ais-app .ais-badge.pop{background:var(--ais-amber-l);color:#b26a00}
.ais-app .ais-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.ais-app .ais-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ais-app .ais-status.aktif{background:var(--ais-green-l);color:#068a5b}
.ais-app .ais-status.draft{background:#eef1f6;color:#6b7a90}
.ais-app .ais-status.err{background:var(--ais-red-l);color:#c93b40}
.ais-app .ais-status.pend{background:var(--ais-amber-l);color:#b26a00}
.ais-app .ais-status.info{background:var(--ais-primary-l);color:var(--ais-primary-d)}
.ais-app .ais-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:550;color:var(--ais-ink2);
  background:#fff;border:1px solid var(--ais-line);border-radius:8px;padding:4px 9px}
.ais-app .ais-chip i{font-size:12px}
.ais-app .ais-chip.sm{padding:2px 7px;font-size:10.5px;border-radius:6px}
.ais-app .ais-chip.ghost{background:var(--ais-line2);border-color:transparent}
.ais-app .ais-fu-timing{display:inline-flex;align-items:center;gap:7px;flex-wrap:nowrap;font-size:12px;color:var(--ais-ink2)}
.ais-app .ais-fu-timing .ais-fu-timectx{color:var(--ais-ink3);white-space:nowrap}
/* editor waktu-mulai followup (popover) */
.ais-app .ais-fu-timepop{padding:12px}
.ais-app .ais-fu-timepop-hd{font-size:11px;font-weight:700;color:var(--ais-ink3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:9px}
.ais-app .ais-fu-timepop-row{display:flex;align-items:center;gap:8px}
.ais-app .ais-fu-timenum{width:62px;flex-shrink:0;text-align:center}
.ais-app .ais-fu-timeunit{flex:1}
.ais-app .ais-fu-timepop-ctx{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ais-ink3);margin-top:10px}
.ais-app .ais-fu-timepop-ctx i{color:var(--ais-primary)}

/* channel dot/chip */
.ais-app .ais-chch{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px}
.ais-app .ais-chdot{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:9px;flex-shrink:0}

/* ═══ STAT BAND (4 tile — DNA Broadcast) ══════════════════════════════════ */
.ais-app .ais-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.ais-app .ais-stat{background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);padding:15px 17px;
  box-shadow:var(--ais-shadow);position:relative;overflow:hidden}
.ais-app .ais-stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--_c,var(--ais-primary))}
.ais-app .ais-stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.ais-app .ais-stat-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;
  background:var(--_cl,var(--ais-primary-l));color:var(--_c,var(--ais-primary))}
.ais-app .ais-stat-trend{font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:2px}
.ais-app .ais-stat-trend.up{color:#068a5b}.ais-app .ais-stat-trend.dn{color:#c93b40}
.ais-app .ais-stat-val{font-size:24px;font-weight:750;letter-spacing:-.5px;line-height:1.1}
.ais-app .ais-stat-lbl{font-size:11.5px;color:var(--ais-ink2);margin-top:3px;font-weight:500}
.ais-app .ais-stat.c-green{--_c:var(--ais-green);--_cl:var(--ais-green-l)}
.ais-app .ais-stat.c-purple{--_c:var(--ais-purple);--_cl:var(--ais-purple-l)}
.ais-app .ais-stat.c-amber{--_c:var(--ais-amber);--_cl:var(--ais-amber-l)}
.ais-app .ais-stat.c-sky{--_c:var(--ais-sky);--_cl:var(--ais-sky-l)}

/* ═══ TOOLBAR + FILTER CHIPS ══════════════════════════════════════════════ */
.ais-app .ais-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.ais-app .ais-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ais-line);border-radius:9px;
  padding:7px 12px;min-width:240px;flex:1;max-width:340px}
.ais-app .ais-search i{color:var(--ais-ink3);font-size:14px}
.ais-app .ais-search input{border:0;outline:0;width:100%;background:none}
.ais-app .ais-seg{display:inline-flex;background:#eef2f7;border-radius:9px;padding:3px;gap:2px}
.ais-app .ais-seg button{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:600;color:var(--ais-ink2)}
.ais-app .ais-seg button.on{background:#fff;color:var(--ais-primary-d);box-shadow:0 1px 3px rgba(16,27,45,.12)}
.ais-app .ais-seg button .ct{margin-left:5px;font-size:10.5px;opacity:.7}
.ais-app .ais-select{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ais-line);border-radius:9px;
  padding:7px 11px;font-size:12px;font-weight:550;color:var(--ais-ink2);transition:.14s;cursor:pointer}
.ais-app .ais-select:hover{border-color:#c7d2e2}
.ais-app .ais-select.open{border-color:var(--ais-primary);box-shadow:0 0 0 3px rgba(27,111,190,.1)}
.ais-app .ais-select i{font-size:13px;color:var(--ais-ink3);transition:transform .15s}
.ais-app .ais-select.open i.bi-chevron-down{transform:rotate(180deg)}

/* ═══ POPOVER DROPDOWN generik (dibuat JS, dipasang di <body> — DI LUAR scope .ais-app,
   jadi butuh reset sendiri: tombol di sini tidak mewarisi reset border/bg dari .ais-app) ═══ */
.ais-selpop, .ais-selpop *{box-sizing:border-box;font-family:var(--ais-font)}
.ais-selpop{position:fixed;z-index:5000;background:#fff;border:1px solid var(--ais-line);border-radius:11px;
  box-shadow:var(--ais-shadow-lg);padding:6px;max-height:300px;overflow-y:auto;animation:ais-pop .14s ease}
.ais-selpop button{border:0;background:none;cursor:pointer;font:inherit;color:inherit;margin:0}
.ais-selpop-grp{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ais-ink3);padding:8px 10px 4px}
.ais-selpop-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border-radius:7px;
  font-size:12.5px;color:var(--ais-ink);white-space:nowrap}
.ais-selpop-item:hover{background:var(--ais-primary-l2)}
.ais-selpop-item.on{background:var(--ais-primary-l);color:var(--ais-primary-d);font-weight:600}
.ais-selpop-item .ck{width:15px;height:15px;border-radius:4px;border:1.5px solid #c4cedb;flex-shrink:0;display:grid;place-items:center}
.ais-selpop-item.on .ck{background:var(--ais-primary);border-color:var(--ais-primary);position:relative}
.ais-selpop-item.on .ck::after{content:"\F26E";font-family:'bootstrap-icons';color:#fff;font-size:9px}
.ais-selpop-item .tx{flex:1}
.ais-selpop-item i.bi-check2{color:var(--ais-primary);font-size:13px}
.ais-selpop-ft{padding:6px 4px 2px;border-top:1px solid var(--ais-line2);margin-top:4px}
.ais-selpop-ft .ais-btn{width:100%;justify-content:center}
.ais-app .ais-tb-spring{flex:1}

/* bulk bar */
.ais-app .ais-bulk{display:flex;align-items:center;gap:12px;background:var(--ais-primary);color:#fff;border-radius:11px;
  padding:9px 16px;margin-bottom:14px;font-size:12.5px;font-weight:600;box-shadow:0 4px 14px rgba(27,111,190,.3)}
.ais-app .ais-bulk .ais-bulk-x{margin-left:auto;display:flex;gap:8px}
.ais-app .ais-bulk .ais-bulk-x button{background:rgba(255,255,255,.16);color:#fff;padding:6px 12px;border-radius:7px;font-weight:600;font-size:12px}
.ais-app .ais-bulk .ais-bulk-x button:hover{background:rgba(255,255,255,.28)}

/* ═══ TABEL ═══════════════════════════════════════════════════════════════ */
.ais-app .ais-tablewrap{background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);overflow:hidden;box-shadow:var(--ais-shadow)}
.ais-app .ais-table{width:100%;border-collapse:collapse;font-size:12.5px}
.ais-app .ais-table thead th{background:var(--ais-primary-l2);text-align:left;padding:11px 14px;font-size:11px;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;color:var(--ais-ink2);border-bottom:1px solid var(--ais-line)}
.ais-app .ais-table tbody td{padding:12px 14px;border-bottom:1px solid var(--ais-line2);vertical-align:middle}
.ais-app .ais-table tbody tr:last-child td{border-bottom:0}
.ais-app .ais-table tbody tr:hover{background:var(--ais-primary-l2)}
/* The legacy dial-pad rule `.num` in style.css paints a white pill (border +
   19px radius + 53px height) — it must not leak into numeric table cells. */
.ais-app .ais-table .num{text-align:right;font-variant-numeric:tabular-nums;
  border-radius:0;height:auto;background-color:transparent;cursor:inherit;color:inherit}
.ais-app .ais-table thead th.num{border-width:0 0 1px;border-color:var(--ais-line)}
.ais-app .ais-table tbody td.num{border-width:0 0 1px;border-color:var(--ais-line2)}
.ais-app .ais-table tbody tr:last-child td.num{border-width:0}
.ais-app .ais-table .num:hover{background-color:transparent;color:inherit}
.ais-app .ais-table .neg{color:#c93b40;font-weight:600}
.ais-app .ais-table .pos{color:#068a5b;font-weight:600}
.ais-app .ais-td-main{font-weight:600;color:var(--ais-ink)}
.ais-app .ais-td-sub{font-size:11px;color:var(--ais-ink3);margin-top:1px}
.ais-app .ais-check{width:15px;height:15px;border:1.5px solid #c7d2e2;border-radius:4px;flex-shrink:0;display:inline-grid;place-items:center}
.ais-app .ais-check.on{background:var(--ais-primary);border-color:var(--ais-primary);color:#fff}
.ais-app .ais-check-toggle:hover .ais-check{border-color:var(--ais-primary)}
.ais-app .ais-avatar{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}

/* pagination */
.ais-app .ais-pager{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--ais-line2);font-size:12px;color:var(--ais-ink2)}
.ais-app .ais-pager-btns{display:flex;gap:5px}
.ais-app .ais-pager-btns button{width:30px;height:30px;border-radius:8px;border:1px solid var(--ais-line);background:#fff;color:var(--ais-ink2);font-weight:600;font-size:12px}
.ais-app .ais-pager-btns button.on{background:var(--ais-primary);color:#fff;border-color:var(--ais-primary)}
.ais-app .ais-pager-btns button:hover:not(.on){background:var(--ais-line2)}

/* ═══ KARTU AGENT (listing grid) ══════════════════════════════════════════ */
.ais-app .ais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.ais-app .ais-acard{background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);padding:17px;box-shadow:var(--ais-shadow);
  transition:.16s;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:12px}
.ais-app .ais-acard:hover{border-color:#bcd4ee;box-shadow:0 8px 26px rgba(27,111,190,.12);transform:translateY(-2px)}
.ais-app .ais-acard-top{display:flex;align-items:flex-start;gap:11px}
.ais-app .ais-acard-av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;color:#fff;flex-shrink:0}
.ais-app .ais-acard-nm{font-size:15px;font-weight:700;margin:0;line-height:1.25}
.ais-app .ais-acard-role{font-size:11.5px;color:var(--ais-ink2);margin-top:2px;display:flex;align-items:center;gap:5px}
.ais-app .ais-acard-desc{font-size:12px;color:var(--ais-ink2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.ais-app .ais-acard-chn{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.ais-app .ais-acard-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--ais-line2);margin-top:auto}
.ais-app .ais-acard-meta{font-size:11px;color:var(--ais-ink3);display:inline-flex;align-items:center;gap:4px}
.ais-app .ais-acard-act{margin-left:auto;display:flex;gap:6px}
.ais-app .ais-acard-act button{width:30px;height:30px;border-radius:8px;background:var(--ais-line2);color:var(--ais-ink2);display:grid;place-items:center;font-size:14px}
.ais-app .ais-acard-act button:hover{background:var(--ais-primary-l);color:var(--ais-primary)}
.ais-app .ais-acard-act .go:hover{background:var(--ais-primary);color:#fff}
/* new card */
.ais-app .ais-acard-new{border:2px dashed #cdd9ea;background:var(--ais-primary-l2);align-items:center;justify-content:center;
  text-align:center;min-height:214px;gap:10px}
.ais-app .ais-acard-new:hover{border-color:var(--ais-primary);background:var(--ais-primary-l)}
.ais-app .ais-acard-new .pl{width:52px;height:52px;border-radius:14px;background:#fff;color:var(--ais-primary);display:grid;place-items:center;font-size:26px;box-shadow:var(--ais-shadow)}
.ais-app .ais-acard-new h3{font-size:14px;font-weight:700;margin:0}
.ais-app .ais-acard-new p{font-size:11.5px;color:var(--ais-ink2);margin:0;max-width:200px}

/* ═══ EMPTY / LOADING / SKELETON ══════════════════════════════════════════ */
.ais-app .ais-empty{background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);padding:52px 30px;text-align:center;box-shadow:var(--ais-shadow)}
.ais-app .ais-empty-ic{width:66px;height:66px;border-radius:18px;background:var(--ais-primary-l);color:var(--ais-primary);
  display:grid;place-items:center;font-size:31px;margin:0 auto 16px}
.ais-app .ais-empty h3{font-size:16px;font-weight:700;margin:0 0 6px}
.ais-app .ais-empty p{font-size:12.5px;color:var(--ais-ink2);max-width:400px;margin:0 auto 18px;line-height:1.6}
.ais-app .ais-skel{background:linear-gradient(90deg,#eef2f7 25%,#f6f8fb 50%,#eef2f7 75%);background-size:200% 100%;
  animation:ais-shim 1.3s infinite;border-radius:7px}
@keyframes ais-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ais-app .ais-dim{opacity:.5;pointer-events:none}

/* ═══ PANEL / CARD KONTEN GENERIK ═════════════════════════════════════════ */
.ais-app .ais-panel{background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);box-shadow:var(--ais-shadow)}
.ais-app .ais-panel-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ais-line2)}
.ais-app .ais-panel-h h3{font-size:14px;font-weight:700;margin:0}
.ais-app .ais-panel-h p{font-size:11.5px;color:var(--ais-ink2);margin:1px 0 0}
.ais-app .ais-panel-h .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.ais-app .ais-panel-b{padding:18px}
.ais-app .ais-callout{display:flex;gap:11px;background:var(--ais-primary-l2);border:1px solid #d9e8f8;border-radius:11px;padding:13px 15px;font-size:12px;color:var(--ais-ink2);line-height:1.55}
.ais-app .ais-callout i{color:var(--ais-primary);font-size:17px;flex-shrink:0;margin-top:1px}
.ais-app .ais-callout.warn{background:var(--ais-amber-l);border-color:#f6dca6}
.ais-app .ais-callout.warn i{color:#b26a00}
.ais-app .ais-callout.grn{background:var(--ais-green-l);border-color:#b9ead6}
.ais-app .ais-callout.grn i{color:#068a5b}
/* Auto-save status (Opsi A) */
.ais-app .ais-autosave{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#068a5b;transition:color .2s}
.ais-app .ais-autosave i{font-size:13px}
.ais-app .ais-autosave.saving{color:var(--ais-muted,#8a94a6)}
.ais-app .ais-autosave.saving i{color:var(--ais-primary)}

/* ═══ FORM ════════════════════════════════════════════════════════════════ */
.ais-app .ais-field{margin-bottom:16px}
.ais-app .ais-label{display:block;font-size:12px;font-weight:650;margin-bottom:6px;color:var(--ais-ink)}
.ais-app .ais-label .req{color:var(--ais-red)}
.ais-app .ais-label .opt{font-weight:500;color:var(--ais-ink3);font-size:11px}
.ais-app .ais-hint{font-size:11px;color:var(--ais-ink3);margin-top:5px;line-height:1.5}
.ais-app .ais-input,.ais-app .ais-textarea{width:100%;border:1px solid var(--ais-line);border-radius:9px;padding:9px 12px;background:#fff;transition:.14s}
.ais-app .ais-input:focus,.ais-app .ais-textarea:focus{outline:0;border-color:var(--ais-primary);box-shadow:0 0 0 3px rgba(27,111,190,.12)}
.ais-app .ais-textarea{resize:vertical;min-height:74px;line-height:1.55}
.ais-app .ais-textarea.mono{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.ais-app .ais-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ais-app .ais-inputgrp{display:flex;align-items:center;border:1px solid var(--ais-line);border-radius:9px;overflow:hidden;background:#fff}
.ais-app .ais-inputgrp input{border:0;padding:9px 12px;flex:1;min-width:0}
.ais-app .ais-inputgrp .suf{padding:0 12px;font-size:11.5px;color:var(--ais-ink3);background:var(--ais-line2);align-self:stretch;display:flex;align-items:center;font-weight:600;flex-shrink:0;white-space:nowrap}
/* toggle */
.ais-app .ais-toggle{position:relative;width:40px;height:22px;border-radius:22px;background:#cdd8e6;transition:.16s;flex-shrink:0}
.ais-app .ais-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.16s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ais-app .ais-toggle.on{background:var(--ais-green)}
.ais-app .ais-toggle.on::after{transform:translateX(18px)}
.ais-app .ais-togline{display:flex;align-items:center;gap:12px;padding:13px 0}
.ais-app .ais-togline .tx{flex:1}
.ais-app .ais-togline .tx b{font-size:13px;font-weight:650;display:block}
.ais-app .ais-togline .tx span{font-size:11.5px;color:var(--ais-ink2)}
/* segmented pill toggle */
.ais-app .ais-segpill{display:inline-flex;background:#eef2f7;border-radius:9px;padding:3px}
.ais-app .ais-segpill button{padding:7px 15px;border-radius:7px;font-size:12px;font-weight:600;color:var(--ais-ink2)}
.ais-app .ais-segpill button.on{background:var(--ais-primary);color:#fff;box-shadow:0 1px 4px rgba(27,111,190,.3)}
/* chip select (tone/lang) */
.ais-app .ais-chipsel{display:flex;flex-wrap:wrap;gap:7px}
.ais-app .ais-chipsel button{padding:6px 13px;border-radius:20px;font-size:12px;font-weight:550;border:1px solid var(--ais-line);background:#fff;color:var(--ais-ink2)}
.ais-app .ais-chipsel button.on{background:var(--ais-primary-l);border-color:var(--ais-primary);color:var(--ais-primary-d)}
.ais-app .ais-chipsel button.on::before{content:"\F26E";font-family:'bootstrap-icons';margin-right:5px;font-size:10px}

/* ═══ PHONE MOCK (WhatsApp-style, skinnable) ══════════════════════════════ */
.ais-app .ais-phone{width:296px;background:#fff;border-radius:26px;box-shadow:0 20px 50px rgba(16,27,45,.24);overflow:hidden;border:7px solid #0d1728;flex-shrink:0}
.ais-app .ais-phone-hd{background:var(--_ch,#075E54);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.ais-app .ais-phone-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:700;font-size:14px}
.ais-app .ais-phone-nm{font-size:13px;font-weight:650;line-height:1.2}
.ais-app .ais-phone-st{font-size:10px;opacity:.85;display:flex;align-items:center;gap:4px}
.ais-app .ais-phone-st::before{content:"";width:5px;height:5px;border-radius:50%;background:#8ef0a8}
.ais-app .ais-phone-hd .sp{margin-left:auto;display:flex;gap:14px;opacity:.85;font-size:15px}
.ais-app .ais-phone-bd{background:#e5ddd5;background-image:linear-gradient(rgba(229,221,213,.6),rgba(229,221,213,.6)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23d4c9bd'/%3E%3C/svg%3E");
  padding:14px 12px;min-height:320px;max-height:430px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.ais-app .ais-bub{max-width:80%;padding:7px 11px;border-radius:11px;font-size:12px;line-height:1.45;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.07)}
.ais-app .ais-bub.in{background:#fff;align-self:flex-start;border-top-left-radius:3px}
.ais-app .ais-bub.out{background:var(--_bo,#dcf8c6);align-self:flex-end;border-top-right-radius:3px}
.ais-app .ais-bub .tm{font-size:9px;color:#7d8a97;text-align:right;margin-top:3px;display:block}
.ais-app .ais-bub-tag{font-size:9px;font-weight:700;color:var(--ais-primary);display:inline-flex;align-items:center;gap:3px;margin-bottom:3px}
.ais-app .ais-typing{align-self:flex-start;background:#fff;padding:9px 13px;border-radius:11px;border-top-left-radius:3px;display:flex;gap:3px}
.ais-app .ais-typing span{width:6px;height:6px;border-radius:50%;background:#b0bcc9;animation:ais-bounce 1.2s infinite}
.ais-app .ais-typing span:nth-child(2){animation-delay:.2s}.ais-app .ais-typing span:nth-child(3){animation-delay:.4s}
@keyframes ais-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ais-app .ais-phone-qr{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.ais-app .ais-phone-qr button{background:#fff;border:1px solid #cfe3d6;color:#075E54;border-radius:16px;padding:5px 11px;font-size:11px;font-weight:550}
.ais-app .ais-phone-ft{background:#f0f2f5;padding:8px 10px;display:flex;align-items:center;gap:8px}
.ais-app .ais-phone-ft .box{flex:1;background:#fff;border-radius:18px;padding:7px 13px;font-size:11.5px;color:#9aa6b2}
.ais-app .ais-phone-ft .snd{width:34px;height:34px;border-radius:50%;background:var(--_ch,#075E54);color:#fff;display:grid;place-items:center;font-size:15px;flex-shrink:0}

/* ═══ GALLERY (create wizard template grid) ═══════════════════════════════ */
.ais-app .ais-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ais-app .ais-tpl{background:#fff;border:1.5px solid var(--ais-line);border-radius:var(--ais-radius);padding:16px;cursor:pointer;transition:.15s;position:relative;text-align:left}
.ais-app .ais-tpl:hover{border-color:#bcd4ee;box-shadow:0 8px 24px rgba(27,111,190,.1);transform:translateY(-2px)}
.ais-app .ais-tpl.on{border-color:var(--ais-primary);box-shadow:0 0 0 3px rgba(27,111,190,.14)}
.ais-app .ais-tpl.on::after{content:"\F26E";font-family:'bootstrap-icons';position:absolute;top:12px;right:12px;width:22px;height:22px;background:var(--ais-primary);color:#fff;border-radius:50%;display:grid;place-items:center;font-size:11px}
.ais-app .ais-tpl-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:23px;margin-bottom:11px}
.ais-app .ais-tpl h4{font-size:14px;font-weight:700;margin:0 0 5px;display:flex;align-items:center;gap:7px}
.ais-app .ais-tpl p{font-size:11.5px;color:var(--ais-ink2);line-height:1.5;margin:0 0 10px;min-height:35px}
.ais-app .ais-tpl-tags{display:flex;flex-wrap:wrap;gap:5px}
.ais-app .ais-tpl.blank{border-style:dashed;background:var(--ais-primary-l2);align-items:center;text-align:center;display:flex;flex-direction:column;justify-content:center}
/* channel picker aside (create step 1) */
.ais-app .ais-chsel{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.ais-app .ais-chcard{background:#fff;border:1.5px solid var(--ais-line);border-radius:12px;padding:14px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:11px;position:relative}
.ais-app .ais-chcard:hover{border-color:#bcd4ee}
.ais-app .ais-chcard.on{border-color:var(--ais-primary);background:var(--ais-primary-l2)}
.ais-app .ais-chcard.on::after{content:"\F26E";font-family:'bootstrap-icons';position:absolute;top:9px;right:9px;color:var(--ais-primary);font-size:14px}
.ais-app .ais-chcard-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:18px;flex-shrink:0}
.ais-app .ais-chcard b{font-size:12.5px;font-weight:650;display:block}
.ais-app .ais-chcard span{font-size:10.5px;color:var(--ais-ink3)}

/* wizard header/stepper */
.ais-app .ais-wizhd{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ais-app .ais-wizback{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--ais-line);display:grid;place-items:center;font-size:16px;color:var(--ais-ink2)}
.ais-app .ais-steps{display:flex;align-items:center;gap:8px;margin-left:auto}
.ais-app .ais-step{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ais-ink3)}
.ais-app .ais-step .n{width:22px;height:22px;border-radius:50%;background:#eef2f7;color:var(--ais-ink3);display:grid;place-items:center;font-size:11px;font-weight:700}
.ais-app .ais-step.on{color:var(--ais-primary-d)}.ais-app .ais-step.on .n{background:var(--ais-primary);color:#fff}
.ais-app .ais-step.done .n{background:var(--ais-green);color:#fff}
.ais-app .ais-step-line{width:34px;height:2px;background:var(--ais-line)}

/* ═══ BUILDER (detail full-page) ═══════════════════════════════════════════ */
.ais-app .ais-builder{display:flex;flex-direction:column;height:100%}
.ais-app .ais-bld-top{display:flex;align-items:center;gap:13px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--ais-line);flex-shrink:0}
.ais-app .ais-bld-back{width:34px;height:34px;border-radius:9px;background:var(--ais-line2);display:grid;place-items:center;font-size:16px;color:var(--ais-ink2)}
.ais-app .ais-bld-back:hover{background:#e2e8f1}
.ais-app .ais-bld-av{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;color:#fff}
.ais-app .ais-bld-nm{font-size:16px;font-weight:700;border:1px solid transparent;border-radius:7px;padding:2px 7px;margin-left:-7px}
.ais-app .ais-bld-nm:hover{border-color:var(--ais-line);background:#fbfcfe}
.ais-app .ais-bld-sub{font-size:11px;color:var(--ais-ink3);display:flex;align-items:center;gap:7px;margin-top:1px;padding-left:1px}
.ais-app .ais-bld-save{font-size:11px;color:var(--ais-ink3);display:flex;align-items:center;gap:5px}
.ais-app .ais-bld-top .r{margin-left:auto;display:flex;align-items:center;gap:9px}
.ais-app .ais-bld-body{flex:1;display:flex;min-height:0}
/* rail tab */
.ais-app .ais-bld-rail{width:210px;flex-shrink:0;background:#fff;border-right:1px solid var(--ais-line);padding:14px 10px;overflow-y:auto}
.ais-app .ais-bld-grp{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ais-ink3);padding:11px 11px 5px}
.ais-app .ais-bld-tab{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:12.5px;font-weight:550;color:var(--ais-ink2);position:relative;transition:.14s;cursor:pointer}
.ais-app .ais-bld-tab i{font-size:15px;color:var(--ais-ink3);width:17px;text-align:center}
.ais-app .ais-bld-tab:hover{background:var(--ais-primary-l2)}
.ais-app .ais-bld-tab.on{background:var(--ais-primary-l);color:var(--ais-primary-d)}
.ais-app .ais-bld-tab.on i{color:var(--ais-primary)}
.ais-app .ais-bld-tab .dot{margin-left:auto;width:7px;height:7px;border-radius:50%}
.ais-app .ais-bld-tab .dot.aktif{background:var(--ais-green)}
.ais-app .ais-bld-tab .dot.off{background:#cdd8e6}
.ais-app .ais-bld-tab .mini{margin-left:auto;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--ais-primary);color:#fff}
/* middle pane */
.ais-app .ais-bld-mid{flex:1;min-width:0;overflow-y:auto;background:var(--ais-bg);padding:22px 26px}
.ais-app .ais-bld-mid-in{min-height:100%}
/* AI Training: daftar mengisi ruang, pager menempel paling bawah */
.ais-app #bp-training.on{display:flex;flex-direction:column;min-height:100%}
.ais-app #bp-training #trainList{flex:1 1 auto}
.ais-app #bp-training #trainPager{flex:none}
.ais-app .ais-bld-h2{font-size:16px;font-weight:700;margin:0 0 3px;display:flex;align-items:center;gap:9px}
.ais-app .ais-bld-p{font-size:12.5px;color:var(--ais-ink2);margin:0 0 18px;line-height:1.55}
.ais-app .ais-sec{background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);padding:18px;margin-bottom:16px;box-shadow:var(--ais-shadow)}
.ais-app .ais-sec-h{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.ais-app .ais-sec-h i{width:30px;height:30px;border-radius:8px;background:var(--ais-primary-l);color:var(--ais-primary);display:grid;place-items:center;font-size:15px}
.ais-app .ais-sec-h h4{font-size:13.5px;font-weight:700;margin:0}
.ais-app .ais-sec-h p{font-size:11px;color:var(--ais-ink2);margin:1px 0 0}
/* uji AI panel (right) */
.ais-app .ais-test{width:344px;flex-shrink:0;background:#f7f9fc;border-left:1px solid var(--ais-line);display:flex;flex-direction:column;min-height:0;position:relative}
.ais-app .ais-test-cr{padding:8px 14px;background:#fff;border-bottom:1px solid var(--ais-line2);display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600}
.ais-app .ais-test-cr i{color:var(--ais-green)}
.ais-app .ais-test-cr .r{margin-left:auto}
.ais-app .ais-test-hd{padding:11px 14px;background:#fff;border-bottom:1px solid var(--ais-line);display:flex;align-items:center;gap:9px}
.ais-app .ais-test-hd .av{width:30px;height:30px;border-radius:8px;background:var(--ais-wa);color:#fff;display:grid;place-items:center;font-size:15px}
.ais-app .ais-test-hd b{font-size:13px;font-weight:700}
.ais-app .ais-test-chips{display:flex;gap:5px;padding:9px 14px;background:#fff;border-bottom:1px solid var(--ais-line2);overflow-x:auto}
.ais-app .ais-test-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(rgba(229,221,213,.35),rgba(229,221,213,.35))}
.ais-app .ais-test-msg{max-width:86%;padding:8px 12px;border-radius:11px;font-size:12px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.ais-app .ais-test-msg.in{background:#fff;align-self:flex-start;border-top-left-radius:3px}
.ais-app .ais-test-msg.out{background:#dcf8c6;align-self:flex-end;border-top-right-radius:3px}
.ais-app .ais-test-meta{align-self:flex-start;display:flex;gap:8px;flex-wrap:wrap;font-size:9.5px;color:var(--ais-ink3);margin-top:-4px;padding-left:3px}
.ais-app .ais-test-meta span{display:inline-flex;align-items:center;gap:3px}
.ais-app .ais-trace{align-self:flex-start;background:#eef4fb;border:1px solid #d9e8f8;border-radius:9px;padding:7px 10px;font-size:10px;color:var(--ais-ink2);max-width:86%}
.ais-app .ais-trace b{color:var(--ais-primary-d);font-size:9.5px;text-transform:uppercase;letter-spacing:.4px}
.ais-app .ais-trace .t{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid #d9e8f8;border-radius:6px;padding:2px 7px;margin:3px 3px 0 0;font-weight:600}
.ais-app .ais-test-ft{background:#f0f2f5;padding:9px 12px;border-top:1px solid var(--ais-line)}
.ais-app .ais-test-in{display:flex;align-items:center;gap:8px;background:#fff;border-radius:20px;padding:6px 8px 6px 10px}
.ais-app .ais-test-in input{flex:1;border:0;outline:0}
.ais-app .ais-test-in .snd{width:32px;height:32px;border-radius:50%;background:var(--ais-wa);color:#fff;display:grid;place-items:center;font-size:14px;cursor:pointer;flex-shrink:0}
.ais-app .ais-test-attach-btn{width:26px;height:26px;display:grid;place-items:center;color:var(--ais-ink3);flex-shrink:0;font-size:15px;border-radius:50%;transition:.14s}
.ais-app .ais-test-attach-btn:hover{color:var(--ais-primary);background:var(--ais-primary-l2)}
.ais-app .ais-test-attach-btn:disabled{opacity:.4;pointer-events:none}
.ais-app .ais-varbar{background:#fff;border:1px solid var(--ais-line2);border-radius:9px;padding:8px 11px;margin-bottom:8px;font-size:11px}
/* preview lampiran (maks 3, muncul di atas kotak ketik) */
.ais-app .ais-test-attach{display:none;gap:6px;flex-wrap:wrap;padding:0 2px 8px}
.ais-app .ais-test-attach.on{display:flex}
.ais-app .ais-test-attach-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--ais-line);border-radius:8px;padding:5px 8px;font-size:11px;color:var(--ais-ink2)}
.ais-app .ais-test-attach-chip .x{width:16px;height:16px;border-radius:50%;background:var(--ais-line2);color:var(--ais-ink3);display:grid;place-items:center;font-size:10px;flex-shrink:0}
.ais-app .ais-test-attach-chip .x:hover{background:var(--ais-red-l);color:var(--ais-red)}

/* pane toggle builder */
.ais-app .bld-pane{display:none}.ais-app .bld-pane.on{display:block}
/* capability (tools) */
.ais-app .ais-cap{border:1px solid var(--ais-line);border-radius:11px;padding:13px 15px;margin-bottom:10px;transition:.14s}
.ais-app .ais-cap.on{border-color:#bcd4ee;background:var(--ais-primary-l2)}
.ais-app .ais-cap-top{display:flex;align-items:flex-start;gap:11px}
.ais-app .ais-cap-ic{width:34px;height:34px;border-radius:9px;background:var(--ais-line2);color:var(--ais-ink2);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.ais-app .ais-cap.on .ais-cap-ic{background:var(--ais-primary-l);color:var(--ais-primary)}
.ais-app .ais-cap b{font-size:13px;font-weight:650;display:flex;align-items:center;gap:7px}
.ais-app .ais-cap p{font-size:11.5px;color:var(--ais-ink2);margin:2px 0 0;line-height:1.5}
.ais-app .ais-cap code{font-family:'SF Mono',ui-monospace,monospace;font-size:10.5px;background:#eef2f7;padding:1px 6px;border-radius:5px;color:#5b3fd6}
.ais-app .ais-pill-rw{font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.3px}
.ais-app .ais-pill-rw.read{background:#e4f5fd;color:#0284c7}.ais-app .ais-pill-rw.write{background:var(--ais-amber-l);color:#b26a00}
.ais-app .ais-pill-rw.shield{background:var(--ais-green-l);color:#068a5b}
/* doc row (training) */
.ais-app .ais-docrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ais-line);border-radius:11px;margin-bottom:8px;background:#fff}
.ais-app .ais-docrow:hover{border-color:#c7d2e2}
.ais-app .ais-docic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
/* followup step */
.ais-app .ais-fustep{border:1px solid var(--ais-line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.ais-app .ais-fustep-h{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--ais-primary-l2);border-bottom:1px solid var(--ais-line2)}
.ais-app .ais-fustep-n{width:24px;height:24px;border-radius:7px;background:var(--ais-primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.ais-app .ais-fustep-b{padding:14px}
.ais-app .ais-fustep-del{color:var(--ais-ink3)}
.ais-app .ais-fustep-del:hover:not(:disabled){color:var(--ais-red);border-color:#f3c9ca;background:var(--ais-red-l)}
.ais-app .ais-fustep-del:disabled{opacity:.35;pointer-events:none}
.ais-app .ais-fu-body{transition:opacity .15s}
.ais-app .ais-fu-disabled{opacity:.5;pointer-events:none;user-select:none}
.ais-app .ais-dashadd{width:100%;border:1.5px dashed #c7d2e2;border-radius:11px;padding:12px;background:var(--ais-primary-l2);color:var(--ais-primary-d);font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:7px}
.ais-app .ais-dashadd:hover{border-color:var(--ais-primary);background:var(--ais-primary-l)}
/* panel per-mode "Aksi Interaktif WhatsApp" (Teks/Tombol Balas/Daftar Pilihan) */
.ais-app .fu-seg-pane{display:none}
.ais-app .fu-seg-pane.on{display:block}
/* kartu template interaktif yang sedang dipilih di langkah followup */
.ais-app .ais-fu-tplcard{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ais-line);border-radius:11px;padding:11px 13px}
/* tombol balas WhatsApp di pratinjau ponsel (mock quick-reply/list) */
.ais-app .ais-fu-wabtn{align-self:stretch;background:#fff;border-radius:9px;color:#00a5f4;text-align:center;font-size:12px;font-weight:600;padding:8px;box-shadow:0 1px 1px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;gap:6px}
/* panel per jenis sumber di modal "Tambah Sumber Pengetahuan" (Dokumen/Teks/FAQ/Website/Sitemap) */
.ais-app .src-pane{display:none}
.ais-app .src-pane.on{display:block}
.ais-app .ais-fubtn-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ais-app .ais-fubtn-row .ais-input{flex:1}
.ais-app .ais-fubtn-row .ais-btn-ic{width:36px;height:36px;flex-shrink:0;color:var(--ais-ink3)}
.ais-app .ais-fubtn-row .ais-btn-ic:hover{color:var(--ais-red);border-color:#f3c9ca;background:var(--ais-red-l)}
.ais-app .ais-fubtn-row .ais-btn-ic:disabled{opacity:.35;pointer-events:none}
.ais-app .ais-dashadd:disabled{opacity:.45;pointer-events:none;background:var(--ais-line2);color:var(--ais-ink3)}
/* pasangan Tanya-Jawab FAQ (Tambah Sumber modal) — bisa ditambah bebas, hapus per-pasangan */
.ais-app .faq-qa-item{position:relative;padding-top:14px;margin-top:14px;border-top:1px dashed var(--ais-line)}
.ais-app .faq-qa-item:first-child{padding-top:0;margin-top:0;border-top:0}
.ais-app .faq-qa-item .faq-qa-del{position:absolute;top:10px;right:0;font-size:11px;color:var(--ais-ink3);display:flex;align-items:center;gap:4px}
.ais-app .faq-qa-item .faq-qa-del:hover{color:var(--ais-red)}
.ais-app .faq-qa-item:first-child .faq-qa-del{display:none}
.ais-app .ais-charcount{font-size:10.5px;color:var(--ais-ink3);flex-shrink:0;width:34px;text-align:right;font-variant-numeric:tabular-nums}
.ais-app .ais-charcount.warn{color:var(--ais-amber);font-weight:700}
/* mini KPI (csat) */
.ais-app .ais-mkpi{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.ais-app .ais-mkpi>div{background:#fff;border:1px solid var(--ais-line);border-radius:11px;padding:13px;text-align:center}
.ais-app .ais-mkpi .v{font-size:22px;font-weight:750;letter-spacing:-.5px}
.ais-app .ais-mkpi .l{font-size:10.5px;color:var(--ais-ink2);margin-top:2px;font-weight:550}

/* ═══ MODAL ═══════════════════════════════════════════════════════════════ */
.ais-app .ais-overlay{position:fixed;inset:0;background:rgba(13,23,40,.55);backdrop-filter:blur(2px);z-index:3000;
  display:none;align-items:center;justify-content:center;padding:30px}
.ais-app .ais-overlay.on{display:flex}
.ais-app .ais-modal{background:#fff;border-radius:18px;box-shadow:var(--ais-shadow-lg);width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;animation:ais-pop .18s ease}
@keyframes ais-pop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.ais-app .ais-modal.wide{max-width:860px}
.ais-app .ais-modal.xwide{max-width:1040px}
.ais-app .ais-modal-h{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--ais-line)}
.ais-app .ais-modal-h .ic{width:36px;height:36px;border-radius:10px;background:var(--ais-primary-l);color:var(--ais-primary);display:grid;place-items:center;font-size:17px}
.ais-app .ais-modal-h h3{font-size:15px;font-weight:700;margin:0}
.ais-app .ais-modal-h p{font-size:11.5px;color:var(--ais-ink2);margin:1px 0 0}
.ais-app .ais-modal-h .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:18px;color:var(--ais-ink3)}
.ais-app .ais-modal-h .x:hover{background:var(--ais-line2);color:var(--ais-ink)}
.ais-app .ais-modal-b{padding:20px;overflow-y:auto;flex:1}
.ais-app .ais-modal-f{display:flex;align-items:center;gap:9px;padding:14px 20px;border-top:1px solid var(--ais-line);background:#fbfcfe}
.ais-app .ais-modal-f .sp{flex:1}
.ais-app .ais-modal-split{display:flex;min-height:0}
.ais-app .ais-modal-split .l{width:340px;border-right:1px solid var(--ais-line);overflow-y:auto;padding:16px}
.ais-app .ais-modal-split .r{flex:1;overflow-y:auto;padding:16px;background:#f7f9fc}

/* ═══ GALLERY MODAL "Buat AI Agent" — DNA broadcast .btpl-gal ═════════════ */
.ais-app .ais-modal.gal{max-width:900px;width:100%;height:min(660px,90vh);flex-direction:row;padding:0;overflow:hidden}
.ais-app .ais-gal-aside{width:264px;flex-shrink:0;background:#f7f9fc;border-right:1px solid var(--ais-line);padding:20px 16px;overflow-y:auto;display:flex;flex-direction:column}
.ais-app .ais-gal-brand{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.ais-app .ais-gal-brand .ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#1B6FBE,#3d8fdd);color:#fff;display:grid;place-items:center;font-size:21px;flex-shrink:0}
.ais-app .ais-gal-brand b{font-size:14px;font-weight:750;display:block;line-height:1.2}
.ais-app .ais-gal-brand span{font-size:11px;color:var(--ais-ink3)}
.ais-app .ais-gal-sec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ais-ink3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ais-app .ais-gal-sec i{color:var(--ais-green);font-size:12px}
.ais-app .ais-gal-chitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--ais-line);border-radius:10px;background:#fff;margin-bottom:7px;cursor:pointer;transition:.14s;width:100%;text-align:left}
.ais-app .ais-gal-chitem:hover{border-color:#bcd4ee}
.ais-app .ais-gal-chitem.on{border-color:var(--ais-primary);background:var(--ais-primary-l2);box-shadow:0 0 0 3px rgba(27,111,190,.08)}
.ais-app .ais-gal-chitem .av{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:15px;flex-shrink:0}
.ais-app .ais-gal-chitem .nm{font-size:12.5px;font-weight:650;line-height:1.2}
.ais-app .ais-gal-chitem .no{font-size:10.5px;color:var(--ais-ink3)}
.ais-app .ais-gal-chitem .rb{margin-left:auto;width:17px;height:17px;border-radius:50%;border:1.5px solid #c4cedb;display:grid;place-items:center;color:#fff;font-size:9px;flex-shrink:0}
.ais-app .ais-gal-chitem.on .rb{background:var(--ais-primary);border-color:var(--ais-primary)}
.ais-app .ais-gal-tip{margin-top:auto;font-size:11px;color:var(--ais-ink2);background:#fff;border:1px solid var(--ais-line);border-radius:10px;padding:11px;line-height:1.5;display:flex;gap:8px}
.ais-app .ais-gal-tip i{color:var(--ais-amber);font-size:14px;flex-shrink:0;margin-top:1px}
.ais-app .ais-gal-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--ais-bg)}
.ais-app .ais-gal-head{padding:20px 26px 16px;position:relative;background:#fff;border-bottom:1px solid var(--ais-line)}
.ais-app .ais-gal-head h2{font-size:20px;font-weight:750;margin:0;letter-spacing:-.01em}
.ais-app .ais-gal-head p{font-size:12.5px;color:var(--ais-ink2);margin:6px 0 0;max-width:620px;line-height:1.5}
.ais-app .ais-gal-head .x{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:9px;background:#f5f7fb;color:var(--ais-ink2);font-size:17px;display:grid;place-items:center}
.ais-app .ais-gal-head .x:hover{background:#e9eef5}
.ais-app .ais-gal-toolbar{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.ais-app .ais-gal-srch{position:relative;flex:0 1 340px;min-width:220px}
.ais-app .ais-gal-srch i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9aa9bd;font-size:14px}
.ais-app .ais-gal-srch input{width:100%;height:36px;border:1px solid var(--ais-line);border-radius:10px;padding:0 12px 0 34px;font-size:12.5px;outline:none;background:#fff}
.ais-app .ais-gal-srch input:focus{border-color:var(--ais-primary);box-shadow:0 0 0 3px rgba(27,111,190,.1)}
.ais-app .ais-gal-tabs{display:flex;gap:7px;flex-wrap:wrap}
.ais-app .ais-gtab{font-size:12px;font-weight:600;color:var(--ais-ink2);padding:7px 13px;border-radius:99px;background:#fff;border:1px solid var(--ais-line)}
.ais-app .ais-gtab .c{font-size:10px;font-weight:700;background:#eef2f7;color:var(--ais-ink3);padding:0 6px;border-radius:99px;margin-left:5px}
.ais-app .ais-gtab.on{background:var(--ais-primary);color:#fff;border-color:var(--ais-primary)}
.ais-app .ais-gtab.on .c{background:rgba(255,255,255,.25);color:#fff}
.ais-app .ais-gbody{flex:1;min-height:0;padding:18px 26px 26px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));grid-auto-rows:max-content;gap:14px}
.ais-app .ais-bp{position:relative;background:#fff;border:1px solid var(--ais-line);border-radius:14px;padding:15px;text-align:left;transition:.16s;display:flex;flex-direction:column;box-shadow:var(--ais-shadow);cursor:pointer}
.ais-app .ais-bp:hover{border-color:#bcd4ee;box-shadow:0 12px 26px rgba(27,111,190,.13);transform:translateY(-2px)}
.ais-app .ais-bp-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px}
.ais-app .ais-bp-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:21px;flex-shrink:0}
.ais-app .ais-bp-name{font-size:13.5px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:6px}
.ais-app .ais-bp-use{font-size:10.5px;color:var(--ais-ink3);margin-top:3px;font-weight:600}
.ais-app .ais-bp-prev{background:#e5ddd5;border-radius:10px;padding:9px;margin-bottom:11px;flex:1}
.ais-app .ais-bp-bub{background:#fff;border-radius:8px;padding:7px 9px;box-shadow:0 1px 1px rgba(0,0,0,.1);font-size:11px;line-height:1.45;color:#1f2a37}
.ais-app .ais-bp-bub2{background:#dcf8c6;border-radius:8px;padding:6px 9px;font-size:11px;margin:5px 0 0 18px;line-height:1.4;color:#1f2a37}
.ais-app .ais-bp-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.ais-app .ais-bp-foot{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:11px;border-top:1px dashed var(--ais-line);font-size:10.5px;color:var(--ais-ink3)}
.ais-app .ais-bp-go{margin-left:auto;color:var(--ais-primary);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.ais-app .ais-bp.blank{border:1.5px dashed #c2d0e2;background:var(--ais-primary-l2);box-shadow:none;align-items:center;justify-content:center;text-align:center;min-height:236px}
.ais-app .ais-bp.blank .bic{width:50px;height:50px;border-radius:14px;background:#eef2f7;color:#94a3b8;display:grid;place-items:center;font-size:24px;margin-bottom:11px}
.ais-app .ais-bp.blank:hover{border-color:var(--ais-primary);background:var(--ais-primary-l);box-shadow:none}
.ais-app .ais-bp.blank:hover .bic{background:var(--ais-primary-l);color:var(--ais-primary)}
.ais-app .ais-bp.blank h4{font-size:13.5px;font-weight:700;margin:0}
.ais-app .ais-bp.blank p{font-size:11px;color:var(--ais-ink3);margin:5px 0 0;max-width:160px}

/* ═══ KNOWLEDGE WELCOME MODAL "Ajari AI-mu" (muncul di Studio) ═════════════ */
.ais-app .ais-kn-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:6px}
.ais-app .ais-kn-tile{border:1.5px solid var(--ais-line);border-radius:13px;padding:16px;background:#fff;transition:.15s;display:flex;flex-direction:column}
.ais-app .ais-kn-tile.on{border-color:var(--ais-primary);background:var(--ais-primary-l2);box-shadow:0 0 0 3px rgba(27,111,190,.07)}
.ais-app .ais-kn-tile-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ais-app .ais-kn-tile-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.ais-app .ais-kn-tile-h b{font-size:13px;font-weight:700;display:block;line-height:1.2}
.ais-app .ais-kn-tile-h span{font-size:10.5px;color:var(--ais-ink3)}
.ais-app .ais-kn-drop{border:1.5px dashed #c7d2e2;border-radius:10px;padding:22px 12px;text-align:center;background:#fbfdff;font-size:11px;color:var(--ais-ink2);cursor:pointer;flex:1;display:flex;flex-direction:column;justify-content:center}
.ais-app .ais-kn-drop:hover{border-color:var(--ais-primary);background:var(--ais-primary-l2)}
.ais-app .ais-kn-drop i{font-size:21px;color:var(--ais-primary);display:block;margin-bottom:5px}
.ais-app .ais-orline{display:flex;align-items:center;gap:12px;margin:16px 0 12px}
.ais-app .ais-orline::before,.ais-app .ais-orline::after{content:"";flex:1;height:1px;background:var(--ais-line2)}
.ais-app .ais-orline span{font-size:11px;color:var(--ais-ink3);font-weight:600;white-space:nowrap}
.ais-app .ais-kn-crm{display:flex;flex-wrap:wrap;gap:8px}
.ais-app .ais-kn-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--ais-line);border-radius:10px;padding:8px 11px;background:#fff;cursor:pointer;font-size:12px;transition:.14s}
.ais-app .ais-kn-chip:hover{border-color:#bcd4ee}
.ais-app .ais-kn-chip.on{border-color:var(--ais-primary);background:var(--ais-primary-l2)}
.ais-app .ais-kn-chip .ck{width:16px;height:16px;border-radius:5px;border:1.5px solid #c4cedb;display:grid;place-items:center;color:#fff;font-size:9px;flex-shrink:0}
.ais-app .ais-kn-chip.on .ck{background:var(--ais-primary);border-color:var(--ais-primary)}
.ais-app .ais-kn-chip b{font-weight:650}
.ais-app .ais-kn-chip .mt{color:var(--ais-ink3);font-size:10.5px;margin-left:2px}

/* confirm modal */
.ais-app .ais-confirm .ais-modal{max-width:400px;text-align:center}
.ais-app .ais-confirm-ic{width:56px;height:56px;border-radius:16px;background:var(--ais-red-l);color:var(--ais-red);display:grid;place-items:center;font-size:26px;margin:6px auto 14px}

/* ═══ progress bar / distribusi ═══════════════════════════════════════════ */
.ais-app .ais-prog{height:8px;border-radius:6px;background:var(--ais-line2);overflow:hidden}
.ais-app .ais-prog>i{display:block;height:100%;border-radius:6px;background:var(--ais-primary)}
.ais-app .ais-distrow{display:flex;align-items:center;gap:11px;margin-bottom:9px;font-size:12px}
.ais-app .ais-distrow .lb{width:74px;color:var(--ais-ink2);font-weight:550}
.ais-app .ais-distrow .bar{flex:1;height:9px;border-radius:6px;background:var(--ais-line2);overflow:hidden}
.ais-app .ais-distrow .bar>i{display:block;height:100%;border-radius:6px}
.ais-app .ais-distrow .vl{width:52px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}

/* misc utilities */
.ais-app .ais-flex{display:flex}.ais-app .ais-ac{align-items:center}.ais-app .ais-jc{justify-content:center}.ais-app .ais-jb{justify-content:space-between}
.ais-app .ais-gap6{gap:6px}.ais-app .ais-gap10{gap:10px}.ais-app .ais-gap14{gap:14px}.ais-app .ais-wrapf{flex-wrap:wrap}
.ais-app .ais-mt8{margin-top:8px}.ais-app .ais-mt14{margin-top:14px}.ais-app .ais-mb0{margin-bottom:0}
.ais-app .ais-muted{color:var(--ais-ink3)}.ais-app .ais-b{font-weight:700}.ais-app .ais-sm{font-size:11.5px}
.ais-app .ais-divider{height:1px;background:var(--ais-line2);margin:16px 0}
.ais-app .ais-kbd{font-family:inherit;font-size:10px;font-weight:700;background:#eef2f7;border:1px solid #d5deeb;border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ais-ink2)}

@media(max-width:1200px){
  .ais-app .ais-stats{grid-template-columns:repeat(2,1fr)}
  .ais-app .ais-test{width:300px}
}

/* ═══ Empty state hero .aih-* (agent-empty.vue) — same visual language as the Integration
   empty state (.wai-hero / .wai-hiw in set_webhook.vue), rewritten with --ais-* tokens because
   .wai-* only lives inside that SFC's <style>. ═══ */
.ais-app .aih-hero{background:#fff;border:1px solid var(--ais-line);border-radius:20px;padding:32px 40px;box-shadow:var(--ais-shadow);display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;overflow:hidden;position:relative;margin-bottom:22px}
.ais-app .aih-hero::before{content:"";position:absolute;top:-120px;right:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.12),transparent 70%);pointer-events:none}
.ais-app .aih-hero>*{position:relative;z-index:1}
.ais-app .aih-eyebrow{font-size:11px;font-weight:700;color:var(--ais-primary);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:7px}
.ais-app .aih-eyebrow i{font-size:14px}
#barantumchat-style .ais-app .aih-hero h2,.ais-app .aih-hero h2{font-size:26px;font-weight:800;color:var(--ais-ink);margin:12px 0 0;line-height:1.2;letter-spacing:-.02em}
.ais-app .aih-desc{font-size:13.5px;color:var(--ais-ink2);margin:10px 0 0;line-height:1.6;max-width:480px}
.ais-app .aih-pts{margin:18px 0 22px;display:flex;flex-direction:column;gap:10px;padding:0;list-style:none}
.ais-app .aih-pts li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ais-ink);font-weight:550}
.ais-app .aih-pts i{color:var(--ais-primary);font-size:17px;margin-top:-1px;flex-shrink:0}
.ais-app .aih-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ais-app .aih-trust{display:flex;align-items:center;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ais-line2);flex-wrap:wrap}
.ais-app .aih-ti{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--ais-ink2)}
.ais-app .aih-ti i{font-size:15px;color:var(--ais-primary)}
.ais-app .aih-mock{background:#fff;border:1px solid var(--ais-line);border-radius:22px;box-shadow:0 18px 50px rgba(16,39,68,.18);overflow:hidden;max-width:300px;margin:0 auto}
.ais-app .aih-mock-bar{background:var(--ais-primary);color:#fff;padding:13px 16px;display:flex;align-items:center;gap:10px}
.ais-app .aih-mock-av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:15px}
.ais-app .aih-mock-nm{font-size:13px;font-weight:700;line-height:1.2}
.ais-app .aih-mock-st{font-size:10.5px;opacity:.85}
.ais-app .aih-mock-bd{background:#f0f2f5;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.ais-app .aih-b{max-width:84%;padding:8px 11px;border-radius:12px;font-size:12px;line-height:1.45;color:var(--ais-ink)}
.ais-app .aih-b.in{background:#fff;align-self:flex-start;border-top-left-radius:4px;box-shadow:0 1px 1px rgba(16,27,45,.06)}
.ais-app .aih-b.out{background:var(--ais-primary-l);align-self:flex-end;border-top-right-radius:4px}
.ais-app .aih-tag{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--ais-purple);margin-bottom:2px}
.ais-app .aih-handoff{align-self:center;font-size:10.5px;color:var(--ais-ink3);background:#fff;border:1px solid var(--ais-line);border-radius:99px;padding:3px 10px;display:inline-flex;gap:5px;align-items:center}
#barantumchat-style .ais-app .aih-hiw-tit,.ais-app .aih-hiw-tit{font-size:13px;font-weight:750;color:var(--ais-ink);margin:0 0 14px;line-height:1.4;display:flex;align-items:center;gap:9px}
.ais-app .aih-hiw-tit::after{content:"";flex:1;height:1px;background:var(--ais-line)}
.ais-app .aih-hiw{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0;margin:0}
.ais-app .aih-hiw li{background:#fff;border:1px solid var(--ais-line);border-radius:16px;padding:20px 18px;box-shadow:var(--ais-shadow);position:relative}
.ais-app .aih-hiw .n{width:34px;height:34px;border-radius:10px;background:var(--ais-primary-l);color:var(--ais-primary);font-size:15px;font-weight:800;display:grid;place-items:center;margin-bottom:13px}
.ais-app .aih-hiw .ic{position:absolute;top:18px;right:18px;font-size:20px;color:#cdd9e6}
#barantumchat-style .ais-app .aih-hiw h4,.ais-app .aih-hiw h4{font-size:14px;font-weight:750;color:var(--ais-ink);margin:0 0 6px}
.ais-app .aih-hiw p{font-size:12px;color:var(--ais-ink2);margin:0;line-height:1.55}
@media(max-width:1100px){.ais-app .aih-hero{grid-template-columns:1fr}.ais-app .aih-art{display:none}}
@media(max-width:820px){.ais-app .aih-hiw{grid-template-columns:1fr}}
@media(max-width:640px){.ais-app .aih-hero{padding:22px 18px}#barantumchat-style .ais-app .aih-hero h2,.ais-app .aih-hero h2{font-size:21px}}

/* Create AI Agent modal: create_gallery renders its toolbar OUTSIDE .ais-gal-head, and
   .ais-gal-toolbar has no padding → search box sat flush against the modal edge. */
.ais-app .ais-modal.gal .ais-gal-toolbar{padding:16px 26px 0;margin-top:0}
.ais-app .ais-modal.gal .ais-gal-srch{flex:1 1 260px;max-width:360px}

/* Knowledge onboarding modal header: global h3 (barantum-shared) overrode weight/size and the
   icon was centred against a two-line block → align to top, restore the .ais-* type scale. */
.ais-app .ais-modal-h.kn-h{align-items:flex-start;gap:12px;padding:18px 20px 16px}
.ais-app .ais-modal-h.kn-h .ic{flex:0 0 36px}
#barantumchat-style .ais-app .ais-modal-h.kn-h h3,.ais-app .ais-modal-h.kn-h h3{font-size:16px;font-weight:700;line-height:1.3;color:var(--ais-ink);margin:1px 0 0}
.ais-app .ais-modal-h.kn-h p{font-size:12.5px;line-height:1.5;margin:3px 0 0}
.ais-app .ais-modal-h.kn-h .x{flex-shrink:0;margin-top:-2px}

/* Builder nav: "Beta" badge pinned to the right edge of the tab */
.ais-app .ais-bld-tab .ais-bld-beta{margin-left:auto}

/* Card header: the global #barantumchat-style h4/p margins outrank .ais-app — reset them */
#barantumchat-style .ais-app .ais-sec-h h4,.ais-app .ais-sec-h h4{margin:0;line-height:1.3}
#barantumchat-style .ais-app .ais-sec-h p,.ais-app .ais-sec-h p{margin:2px 0 0;line-height:1.45}

/* File Training — empty-state hero (shown before any knowledge source exists) */
.ais-app .t2-hero{flex:1 0 auto;justify-content:center;background:#fff;border:1px solid var(--ais-line);border-radius:var(--ais-radius);box-shadow:var(--ais-shadow);padding:44px 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ais-app .t2-hero-ic{width:56px;height:56px;border-radius:16px;background:var(--ais-primary-l);color:var(--ais-primary);display:grid;place-items:center;font-size:26px;margin-bottom:16px}
.ais-app .t2-hero-h{font-size:17px;font-weight:700;color:var(--ais-ink);margin:0 0 6px}
.ais-app .t2-hero-p{font-size:13px;color:var(--ais-ink2);max-width:440px;line-height:1.55;margin:0 0 24px}
.ais-app .t2-hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:640px;margin-bottom:22px}
.ais-app .t2-hero-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:1px solid var(--ais-line);border-radius:12px;padding:16px;cursor:pointer;transition:.15s}
.ais-app .t2-hero-card:hover{border-color:var(--ais-primary);box-shadow:0 6px 18px rgba(27,111,190,.10);transform:translateY(-1px)}
.ais-app .t2-hero-card:focus-visible{outline:2px solid var(--ais-primary);outline-offset:2px}
.ais-app .t2-hero-card-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;margin-bottom:4px;background:var(--ais-line2);color:var(--ais-ink2)}
.ais-app .t2-hero-card:hover .t2-hero-card-ic{background:var(--ais-primary-l);color:var(--ais-primary)}
.ais-app .t2-hero-card-h{font-size:13px;font-weight:650;color:var(--ais-ink)}
.ais-app .t2-hero-card-p{font-size:11.5px;color:var(--ais-ink2);line-height:1.5}
@media (max-width:900px){.ais-app .t2-hero-grid{grid-template-columns:1fr}}
/* Informational (non-clickable) hero card variant — used by the AI Capabilities tab */
.ais-app .t2-hero-card.is-static{cursor:default}
.ais-app .t2-hero-card.is-static:hover{border-color:var(--ais-line);box-shadow:none;transform:none}
.ais-app .t2-hero-card.is-static .t2-hero-card-ic,.ais-app .t2-hero-card.is-static:hover .t2-hero-card-ic{background:var(--ais-primary-l);color:var(--ais-primary)}