/* ==========================================================================
   Meta AI: halaman percakapan gaya WhatsApp, mengikuti tema TELEBUILD
   (neobrutalism, Share Tech Mono, variabel tema: --paper --card --ink --acc --bd --bw).
   Semua class memakai prefix "mx-" supaya tidak bentrok dengan CSS AI Build (.ai, .me, dst).
   Tata letak memakai blok biasa di area pesan (bukan flex column) agar bubble tidak pernah melar.
   ========================================================================== */

/* ---------- tombol melayang (di atas FAB utama) ---------- */
html:root body .tb-fab.mini.mx-fab{
  position:absolute;right:25px;bottom:calc(var(--tb-nav-h,76px) + 16px + 58px + 14px);z-index:5;
  width:46px;height:46px;background:var(--card,#fff);color:var(--ink,#111);
  border:var(--bw,3px) solid var(--bd,#111);border-radius:15px;box-shadow:3px 3px 0 var(--bd,#111)}
html:root body .tb-fab.mini.mx-fab.hide{display:none}
.mx-fab svg{display:block;color:#1d9bf0}

/* ---------- layer ---------- */
.gp.mx{--mx-blue:#1d9bf0;--mx-r:16px}
html body .gp.mx .gp-body{padding:0!important;margin:0!important;gap:0;width:100%!important;max-width:none!important;overflow:hidden;display:flex;flex-direction:column;background:var(--paper,#fff1d6)!important;background-image:none!important}
.gp.mx .gp-body>*{flex-shrink:1}

/* header */
.gp.mx .gp-t{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15;min-width:0;flex:1}
.gp.mx .mx-nm{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:17px}
.gp.mx .mx-vb{flex:none;display:block}
.gp.mx .mx-st{font-size:12px;font-weight:500;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gp.mx .mx-st.on{color:#0a7a3d;opacity:1;font-weight:700}
.mx-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin:0 10px 0 2px;color:#fff;
  background:linear-gradient(145deg,#38b6ff,#1d6fe0);border:2px solid var(--bd,#111)}
.mx-av svg{width:22px;height:22px}
.mx-hb{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:transparent;border:0;color:inherit;padding:0}
.mx-hb:active{background:rgba(0,0,0,.08)}

/* ---------- area pesan ---------- */
.mx-chat{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.mx-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:10px 10px 6px;display:block;scroll-behavior:smooth;
  background-image:radial-gradient(rgba(17,17,17,.10) 1.2px,transparent 1.4px);background-size:18px 18px}
html.dark .mx-scroll{background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.4px)}
.mx-day{display:flex;justify-content:center;margin:10px 0 8px}
.mx-day span{font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--card,#fff);color:var(--ink,#111);
  border:2px solid var(--bd,#111);letter-spacing:.02em}

.mx-row{display:flex;width:100%;margin:2px 0}
.mx-row.out{justify-content:flex-end}
.mx-row.in{justify-content:flex-start}
.mx-row.gap{margin-top:9px}

.mx-bub{position:relative;max-width:86%;min-width:64px;height:auto;padding:7px 11px 5px;
  border:2px solid var(--bd,#111);border-radius:var(--mx-r);font-size:15px;line-height:1.5;
  color:var(--ink,#111);word-wrap:break-word;overflow-wrap:anywhere;box-shadow:2px 2px 0 var(--bd,#111);
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:none}
.mx-row.new .mx-bub{animation:mxIn .18s ease-out both}
.mx-row.out .mx-bub{background:var(--acc,#ffd83d);color:#111}
.mx-row.in .mx-bub{background:var(--card,#fff)}
.mx-row.out.first .mx-bub{border-top-right-radius:4px}
.mx-row.in.first .mx-bub{border-top-left-radius:4px}
@keyframes mxIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

.mx-bub.err{background:#ffd3d8!important;color:#7a0010!important}
.mx-retry{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 12px;border-radius:999px;border:2px solid #7a0010;background:#fff;color:#7a0010;font:inherit;font-weight:800;font-size:13px}

/* teks bubble */
.mx-tx>*:first-child{margin-top:0}.mx-tx>*:last-child{margin-bottom:0}
.mx-tx p{margin:6px 0}.mx-tx ul,.mx-tx ol{margin:6px 0;padding-left:22px}.mx-tx li{margin:3px 0}
.mx-tx .mx-h{margin:10px 0 4px;font-size:1.05em;line-height:1.3}
.mx-tx blockquote{margin:8px 0;padding:3px 10px;border-left:4px solid var(--mx-blue);background:rgba(29,155,240,.08);border-radius:0 8px 8px 0}
.mx-tx a{color:#1d6fe0;text-decoration:underline;word-break:break-all}
.mx-tx hr{border:0;border-top:2px solid var(--bd,#111);margin:10px 0;opacity:.25}
.mx-ic{padding:1px 5px;border-radius:6px;background:rgba(127,127,127,.2);font-family:ShareTechMono,ui-monospace,Menlo,Consolas,monospace;font-size:.92em}

/* waktu + centang */
.mx-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px;font-size:11px;line-height:1;opacity:.62;user-select:none}
.mx-tick{display:inline-flex;width:17px;height:11px}
.mx-tick svg{width:100%;height:100%}
.mx-tick.read{color:var(--mx-blue)}
.mx-tick.read{opacity:1}
.mx-cp{display:inline-grid;place-items:center;width:22px;height:22px;margin:-6px 0 -5px -4px;padding:0;border:0;background:transparent;color:inherit;border-radius:6px;opacity:.9}
.mx-cp:active{background:rgba(0,0,0,.1)}
.mx-cp svg{width:15px;height:15px}

/* mengetik */
.mx-bub.typing{padding:11px 14px;min-width:0}
.mx-dots{display:inline-flex;gap:5px;align-items:center;height:12px}
.mx-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;animation:mxDot 1s infinite}
.mx-dots i:nth-child(2){animation-delay:.16s}.mx-dots i:nth-child(3){animation-delay:.32s}
@keyframes mxDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.95;transform:translateY(-3px)}}

/* blok kode */
.mx-code{margin:8px 0;border:2px solid var(--bd,#111);border-radius:12px;overflow:hidden;background:#14161b;color:#e6e9ef;max-width:100%}
.mx-ch{display:flex;align-items:center;justify-content:space-between;padding:5px 8px 5px 12px;background:#23262e;color:#aab1c0;font-size:12px;letter-spacing:.04em}
.mx-ch button{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:8px;padding:5px 10px;background:#363a45;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.mx-ch button:active{background:#4a4f5d}
.mx-code pre{margin:0;padding:10px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:transparent}
.mx-code code{display:block;white-space:pre;color:#e6e9ef;background:transparent;font-family:ShareTechMono,ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;tab-size:2}
.mx-code i{font-style:normal}.mx-code .c{color:#7d8799}.mx-code .s{color:#9fe38a}.mx-code .n{color:#f6b26b}.mx-code .k{color:#ff7ab2}.mx-code .f{color:#6cc4ff}.mx-code .o{color:#ffd866}
.mx-tw{overflow-x:auto;margin:8px 0}.mx-tw table{border-collapse:collapse;font-size:13.5px}
.mx-tw th,.mx-tw td{border:1.5px solid var(--bd,#111);padding:4px 8px;text-align:left}.mx-tw th{background:rgba(127,127,127,.18)}

/* ---------- sambutan (pengganti pesan otomatis) ---------- */
.mx-empty{padding:26px 8px 10px;text-align:center;color:var(--ink,#111)}
.mx-empty .mx-big{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#38b6ff,#1d6fe0);border:var(--bw,3px) solid var(--bd,#111);box-shadow:4px 4px 0 var(--bd,#111)}
.mx-empty .mx-big svg{width:38px;height:38px}
.mx-empty h3{margin:0 0 4px;font-size:20px;display:inline-flex;align-items:center;gap:6px}
.mx-empty p{margin:0 auto 16px;max-width:290px;font-size:13.5px;line-height:1.55;opacity:.75}
.mx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mx-chip{padding:9px 13px;border-radius:999px;border:2px solid var(--bd,#111);background:var(--card,#fff);color:var(--ink,#111);
  font:inherit;font-size:13.5px;font-weight:700;box-shadow:2px 2px 0 var(--bd,#111)}
.mx-chip:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--bd,#111)}

/* tombol ke bawah */
.mx-jump{position:absolute;right:14px;bottom:12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0;
  background:var(--card,#fff);color:var(--ink,#111);border:2px solid var(--bd,#111);box-shadow:2px 2px 0 var(--bd,#111);
  opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .15s,transform .15s}
.mx-jump.on{opacity:1;transform:none;pointer-events:auto}

/* ---------- kolom ketik ---------- */
.mx-bar{flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 10px);
  background:var(--paper,#fff1d6);border-top:2px solid var(--bd,#111)}
.mx-field{flex:1;min-width:0;display:flex;align-items:flex-end;border:2px solid var(--bd,#111);border-radius:24px;background:var(--card,#fff);padding:0 6px 0 14px}
html body .mx-field textarea#mxT{box-sizing:border-box!important;flex:1;min-width:0;width:100%;max-height:132px;min-height:40px!important;resize:none;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;
  background:transparent!important;color:var(--ink,#111)!important;font:inherit;font-size:15px;line-height:22px;padding:9px 0!important;margin:0!important;display:block;overflow-y:auto}
.mx-field textarea::placeholder{color:var(--ink,#111);opacity:.45}
.mx-send{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--bd,#111);padding:0;display:grid;place-items:center;
  background:#c9c9c9;color:#555;transition:background .15s,color .15s,transform .1s}
.mx-send.ready{background:var(--mx-blue);color:#fff}
.mx-send:active{transform:scale(.92)}
.mx-send svg{width:22px;height:22px;margin-left:2px}