/* Asisten AI — panel chat bersama POS, Office & BG STAFF (dipindah dari bo.css 23 Okt) */
/* ---- Asisten AI (modul 7) ---- */
#aiBtn { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: var(--head); border: 0; border-radius: 999px;
  padding: 6px 12px 6px 10px; margin-left: 6px; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
#aiBtn span { font-size: 16px; line-height: 1; } #aiBtn b { font-weight: 800; }
@media (max-width: 380px) { #aiBtn b { display: none; } }
body.aiOn { overflow: hidden; }
#aiPanel { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg);
  transform: translateY(100%); transition: transform .18s ease-out; }
#aiPanel.open { transform: none; }
@media (min-width: 900px) { #aiPanel { left: auto; width: 460px; box-shadow: -8px 0 24px rgba(0,0,0,.18); transform: translateX(100%); } #aiPanel.open { transform: none; } body.aiOn { overflow: auto; } }
.aiTop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; background: var(--head); color: #fff;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; }
.aiTop b { text-align: center; font-size: 16px; }
.aiTop button { background: none; border: 0; color: #fff; font: inherit; font-size: 15px; padding: 8px 6px; min-height: 40px; }
.aiTb { display: flex; gap: 2px; }
.aiBody { flex: 1; overflow-y: auto; padding: 12px 12px 4px; -webkit-overflow-scrolling: touch; }
.aim { max-width: 88%; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; line-height: 1.45; font-size: 15px; word-wrap: break-word; }
.aim p { margin: 0 0 6px; } .aim p:last-of-type { margin-bottom: 0; }
.aim ul, .aim ol { margin: 4px 0 6px; padding-left: 20px; } .aim li { margin: 2px 0; }
.aim code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 4px; font-size: 13px; }
.aim a { color: var(--brand); font-weight: 600; }
.aim.u { margin-left: auto; background: var(--head); color: #fff; border-bottom-right-radius: 4px; }
.aim.u img { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; margin-bottom: 6px; }
.aim.a { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.aim.a.err { border-color: var(--bad); color: var(--bad); }
.aih { font-weight: 700; margin: 8px 0 4px !important; }
.aitag { font-size: 13px; opacity: .85; margin-bottom: 4px; }
.aimod { margin-top: 6px; font-size: 11px; color: var(--muted); }
a.aiAct { display: block; margin: 8px 0 0; padding: 11px 12px; border-radius: 10px; background: var(--ok); color: #fff !important; text-decoration: none; text-align: center; font-weight: 700; }
.aim.busy { display: flex; gap: 5px; width: 64px; }
.aim.busy span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: aiDot 1s infinite; }
.aim.busy span:nth-child(2) { animation-delay: .15s; } .aim.busy span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.aiHello { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; font-size: 15px; }
.aiHello p { margin: 0 0 8px; }
.aiSug { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.aiSug button, .aiList button { text-align: left; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.aiList { display: flex; flex-direction: column; gap: 8px; }
.aiList button.on { border-color: var(--head); }
.aiList small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.aiList .aiBack { text-align: center; }
.aiFoot { border-top: 1px solid var(--line); background: var(--card); padding: 8px 10px calc(8px + var(--safe-b)); }
.aiRow { display: flex; align-items: flex-end; gap: 8px; }
.aiRow textarea { flex: 1; resize: none; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 18px; max-height: 140px; background: #fff; }
.aiCam { font-size: 24px; padding: 6px 2px; cursor: pointer; }
.aiSend { background: var(--ok); color: #fff; border: 0; border-radius: 18px; padding: 10px 16px; font: inherit; font-weight: 700; min-height: 44px; }
#aiImg { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
#aiImg img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
#aiImg button { margin-left: auto; background: none; border: 0; font-size: 18px; color: var(--muted); padding: 6px; }
.aiInfo { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; }
.aiInfo.err { color: var(--bad); }


/* Tombol 💬 di #aiSlot (POS & STAFF): jadi ikon saja bila halaman punya tombol aksi */
header .hr:has(#aiSlot) { align-items: center; gap: 6px; }
#aiSlot { display: inline-flex; }
#aiSlot #aiBtn { margin-left: 0; }
#topAction:not(:empty) ~ #aiSlot #aiBtn b, #who:not([hidden]) ~ #aiSlot #aiBtn b { display: none; }
#topAction:not(:empty) ~ #aiSlot #aiBtn, #who:not([hidden]) ~ #aiSlot #aiBtn { padding: 6px 9px; }