/* =========================================================
   AI-ASISTEN.CSS - RSAB-QI
   =========================================================
   TUJUAN:
   - Styling khusus konten halaman ai-asisten.html.
   - Navbar atas, sidebar desktop, drawer mobile, dan bottom nav HP
     tetap mengikuti dashboard.css sebagai acuan utama.
   - Menambahkan style khusus AI Asisten:
     status online, bubble chat, typing bubble, input chat,
     sumber referensi, tombol collapse/expand referensi,
     dan kartu Human Escalation.
   - Menyembunyikan tampilan teknis backend seperti GCP, RAG,
     Gemini, file path teknis, kategori teknis, dan skor mentah.
   - Menyesuaikan perubahan HTML dan JS terbaru:
     "Sumber Knowledge Base" menjadi "Sumber Referensi".
   - Menjaga tampilan tetap responsif pada desktop, tablet, dan HP.

   PERUBAHAN HUMAN ESCALATION:
   - Menambahkan kartu "Butuh bantuan petugas?".
   - Menambahkan tombol "Kirim pertanyaan ke Pesan".
   - Menambahkan status loading/disabled saat pesan dikirim.
   - Menambahkan tampilan level optional/recommended/urgent.
   - Tetap menjaga alur medis: menu Pesan bukan layanan darurat.

   PERUBAHAN FORMAT JAWABAN AI:
   - Bubble jawaban AI sekarang mendukung teks biasa rapi.
   - Line break dari backend ditampilkan dengan baik.
   - Paragraf pendek dan daftar nomor seperti 1., 2., 3. tampil rapi.
   - Tidak mengubah struktur HTML dan JavaScript yang sudah stabil.

   PERUBAHAN BACKUP & DELETE CHAT:
   - Menambahkan style tombol "Hapus chat" di header AI Asisten.
   - Menambahkan style tombol hapus per chat pada setiap bubble.
   - Menambahkan style state loading/disabled saat proses hapus berjalan.
   - Delete hanya untuk riwayat aktif ai_asisten_conversations.
   - Backup audit percakapan tidak dihapus oleh tombol delete.
   ========================================================= */


/* =========================================================
   BASE PAGE SAFETY
========================================================= */
.ai-asisten-page *,
.ai-asisten-page *::before,
.ai-asisten-page *::after{
  box-sizing: border-box;
}

body.dashboard-page.ai-asisten-page{
  visibility: visible !important;
  opacity: 1 !important;
  overflow-x: hidden;
}

/*
 * Background canvas bawaan login/dashboard tidak digunakan
 * di halaman AI Asisten agar tampilan lebih bersih.
 */
.ai-asisten-page #bg,
.ai-asisten-page .ringHint{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   LAYOUT HALAMAN
========================================================= */
.aiAsistenSectionInner{
  width: 100%;
  max-width: 100%;
}

.ai-asisten-page .aiAsistenPageContent{
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 18px;
}

/*
 * Mobile hero disembunyikan di desktop.
 * Akan muncul hanya pada breakpoint HP.
 */
.ai-asisten-page .aiAsistenMobileHeroCard{
  display: none;
}

.ai-asisten-page .aiAsistenMobileHeroProfileMedia{
  flex: 0 0 auto;
}

.ai-asisten-page .aiAsistenMobileHeroPhoto{
  display: block;
  object-fit: cover;
  object-position: center;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.30);
}

.ai-asisten-page .aiAsistenMobileHeroTitle{
  margin: 0;
}

.ai-asisten-page .aiAsistenMobileHeroSub{
  margin: 6px 0 0;
}


/* =========================================================
   CARD DASAR
========================================================= */
.ai-asisten-page .aiAsistenSummaryCard,
.ai-asisten-page .aiAsistenChatCard,
.ai-asisten-page .aiAsistenNoticeCard{
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: var(--neu-out);
  border-radius: 24px;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSummaryCard,
html[data-theme="dark"] .ai-asisten-page .aiAsistenChatCard,
html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCard{
  border-color: rgba(255,255,255,.07);
}


/* =========================================================
   PENGAMAN SUMMARY CARD LAMA
   ---------------------------------------------------------
   Summary card versi lama sudah tidak digunakan di HTML baru.
   Rule ini hanya menjaga jika cache lama masih menampilkan
   komponen lama agar tidak mengganggu layout.
========================================================= */
.ai-asisten-page .aiAsistenSummaryCard,
.ai-asisten-page .aiAsistenSummaryMain,
.ai-asisten-page .aiAsistenSummaryText,
.ai-asisten-page .aiAsistenSummaryIcon,
.ai-asisten-page .aiAsistenSummaryKicker,
.ai-asisten-page .aiAsistenRagBadgeRow,
.ai-asisten-page .aiAsistenRagBadge,
.ai-asisten-page .aiAsistenRagBadgeIcon,
.ai-asisten-page .aiAsistenRagBadgeText{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* =========================================================
   CHAT CARD
========================================================= */
.ai-asisten-page .aiAsistenChatCard{
  padding: 24px;
  display: grid;
  gap: 18px;
}

.ai-asisten-page .aiAsistenChatHead{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.ai-asisten-page .aiAsistenChatAvatar{
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(0,172,170,.16), rgba(255,255,255,.30));
  color: var(--blue);
  box-shadow: var(--neu-out-sm);
  display: grid;
  place-items: center;
}

.ai-asisten-page .aiAsistenChatAvatar i{
  font-size: 21px;
  color: inherit;
}

.ai-asisten-page .aiAsistenChatTitleWrap{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-asisten-page .aiAsistenChatTitleWrap h3{
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.02em;
}


/* =========================================================
   ONLINE STATUS
   ---------------------------------------------------------
   Status publik dibuat sederhana:
   - Online
   - Tidak stabil

   Loading tidak perlu menampilkan "Memproses" karena sudah
   diwakili oleh typing bubble di area chat.
========================================================= */
.ai-asisten-page .aiAsistenOnlineStatus{
  width: fit-content;
  margin: 6px 0 0;
  padding: 0;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -.01em;
}

.ai-asisten-page .aiAsistenOnlineDot,
.ai-asisten-page .aiAsistenConnectionDot{
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  background: #39ff14;
  box-shadow:
    0 0 0 4px rgba(57,255,20,.16),
    0 0 10px rgba(57,255,20,.72);
  display: inline-block;
}

/* Kompatibilitas jika status lama masih berupa p biasa */
.ai-asisten-page .aiAsistenChatTitleWrap p:not(.aiAsistenOnlineStatus){
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 700;
}


/* =========================================================
   CONNECTION BADGE
   ---------------------------------------------------------
   Badge kanan tetap ada, tetapi hanya menampilkan status
   sederhana. Tidak menampilkan GCP, RAG, Gemini, atau mode lokal.
========================================================= */
.ai-asisten-page .aiAsistenConnectionWrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ai-asisten-page .aiAsistenConnectionBadge,
.ai-asisten-page .aiAsistenConnectionStatus{
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(22,163,74,.10);
  color: #15803d;
  box-shadow: var(--neu-out-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
}

.ai-asisten-page .aiAsistenConnectionBadge i{
  display: none;
}

.ai-asisten-page .aiAsistenConnectionStatus::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #39ff14;
  box-shadow:
    0 0 0 4px rgba(57,255,20,.16),
    0 0 10px rgba(57,255,20,.72);
}

.ai-asisten-page .aiAsistenConnectionBadge.is-loading,
.ai-asisten-page .aiAsistenConnectionStatus.is-loading,
.ai-asisten-page .aiAsistenConnectionBadge.is-local,
.ai-asisten-page .aiAsistenConnectionStatus.is-local{
  background: rgba(22,163,74,.10);
  color: #15803d;
}

.ai-asisten-page .aiAsistenConnectionBadge.is-loading .aiAsistenConnectionDot,
.ai-asisten-page .aiAsistenConnectionStatus.is-loading::before,
.ai-asisten-page .aiAsistenConnectionBadge.is-local .aiAsistenConnectionDot,
.ai-asisten-page .aiAsistenConnectionStatus.is-local::before{
  background: #39ff14;
  box-shadow:
    0 0 0 4px rgba(57,255,20,.16),
    0 0 10px rgba(57,255,20,.72);
}

.ai-asisten-page .aiAsistenConnectionBadge.is-error,
.ai-asisten-page .aiAsistenConnectionBadge.is-offline,
.ai-asisten-page .aiAsistenConnectionStatus.is-error,
.ai-asisten-page .aiAsistenConnectionStatus.is-offline{
  background: rgba(220,38,38,.10);
  color: #b91c1c;
}

.ai-asisten-page .aiAsistenConnectionBadge.is-error .aiAsistenConnectionDot,
.ai-asisten-page .aiAsistenConnectionBadge.is-offline .aiAsistenConnectionDot,
.ai-asisten-page .aiAsistenConnectionStatus.is-error::before,
.ai-asisten-page .aiAsistenConnectionStatus.is-offline::before{
  background: #ef4444;
  box-shadow:
    0 0 0 4px rgba(239,68,68,.13),
    0 0 10px rgba(239,68,68,.45);
}


/* =========================================================
   CHAT HEADER ACTIONS - BACKUP & DELETE CHAT
   ---------------------------------------------------------
   Area ini dipakai oleh HTML baru:
   .aiAsistenChatHeadActions
   #btnAiAsistenDeleteAllChat

   Fungsi:
   - Menjaga badge Online tetap rapi.
   - Menambahkan tombol "Hapus chat".
   - Tombol delete all akan aktif hanya jika JS mendeteksi ada
     percakapan aktif pada ai_asisten_conversations.
========================================================= */
.ai-asisten-page .aiAsistenChatHeadActions{
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-asisten-page .aiAsistenDeleteAllBtn{
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background:
    linear-gradient(145deg, rgba(239,68,68,.12), rgba(255,255,255,.38));
  color: #dc2626;
  box-shadow: var(--neu-out-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    opacity .18s ease;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenDeleteAllBtn{
  background:
    linear-gradient(145deg, rgba(239,68,68,.16), rgba(255,255,255,.055));
  color: #f87171;
}

.ai-asisten-page .aiAsistenDeleteAllBtn i{
  font-size: 11px;
  color: inherit;
}

.ai-asisten-page .aiAsistenDeleteAllBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  background:
    linear-gradient(145deg, rgba(239,68,68,.18), rgba(255,255,255,.45));
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenDeleteAllBtn:hover{
  background:
    linear-gradient(145deg, rgba(239,68,68,.22), rgba(255,255,255,.07));
}

.ai-asisten-page .aiAsistenDeleteAllBtn:active{
  transform: translateY(0);
}

.ai-asisten-page .aiAsistenDeleteAllBtn:disabled,
.ai-asisten-page .aiAsistenDeleteAllBtn[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: .48;
  transform: none;
  filter: none;
  box-shadow: var(--neu-in-sm);
}

.ai-asisten-page .aiAsistenDeleteAllBtn.is-loading{
  cursor: wait;
  opacity: .72;
  pointer-events: none;
}

.ai-asisten-page .aiAsistenDeleteAllBtn.is-loading i{
  animation: aiDeleteSpin .85s linear infinite;
}

@keyframes aiDeleteSpin{
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(360deg);
  }
}


/* =========================================================
   MESSAGES AREA
========================================================= */
.ai-asisten-page .aiAsistenMessages{
  position: relative;
  z-index: 1;
  min-height: 360px;
  max-height: 560px;
  padding: 22px;
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.36), rgba(240,245,252,.30));
  border: 1px solid rgba(255,255,255,.36);
  box-shadow: var(--neu-in-sm);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenMessages{
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.06);
}

.ai-asisten-page .aiAsistenMessages::-webkit-scrollbar{
  width: 9px;
}

.ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-track{
  background: transparent;
}

.ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: rgba(100,116,139,.35);
}


/* =========================================================
   MESSAGE BUBBLES
========================================================= */
.ai-asisten-page .aiAsistenMessage{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ai-asisten-page .aiAsistenMessage--bot{
  justify-content: flex-start;
}

.ai-asisten-page .aiAsistenMessage--user{
  justify-content: flex-end;
}

.ai-asisten-page .aiAsistenMessageIcon{
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 13px;
  background: rgba(0,172,170,.12);
  color: var(--blue);
  box-shadow: var(--neu-out-sm);
  display: grid;
  place-items: center;
}

.ai-asisten-page .aiAsistenMessageIcon i{
  font-size: 14px;
  color: inherit;
}

.ai-asisten-page .aiAsistenMessage--user .aiAsistenMessageIcon{
  display: none;
}

.ai-asisten-page .aiAsistenBubble{
  max-width: min(680px, 82%);
  padding: 13px 15px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  color: var(--ink);
  text-align: left;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenBubble{
  border-color: rgba(255,255,255,.06);
}

/*
 * PERUBAHAN FORMAT JAWABAN AI:
 * ---------------------------------------------------------
 * white-space: pre-line membuat enter dan baris kosong dari backend
 * tampil rapi di bubble chat.
 *
 * Ini penting agar jawaban seperti:
 * Halo...
 *
 * Manfaat vaksin:
 * 1. ...
 * 2. ...
 *
 * Catatan...
 *
 * tidak berubah menjadi satu paragraf panjang.
 */
.ai-asisten-page .aiAsistenBubble p{
  margin: 0;
  color: inherit;
  text-align: left;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: 13.2px;
  line-height: 1.68;
  font-weight: 600;
}

.ai-asisten-page .aiAsistenMessage--bot .aiAsistenBubble{
  border-bottom-left-radius: 9px;
}

.ai-asisten-page .aiAsistenMessage--bot .aiAsistenBubble p{
  color: var(--muted);
}

.ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
  max-width: min(620px, 75%);
  background: var(--primaryGrad);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--primaryShadow);
  border-bottom-right-radius: 9px;
}

.ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble p{
  color: #ffffff;
  font-weight: 800;
  line-height: 1.58;
}


/* =========================================================
   DELETE PER CHAT BUTTON
   ---------------------------------------------------------
   Tombol ini akan dibuat dinamis oleh ai-asisten.js pada bubble
   yang berasal dari dokumen aktif:
   users/{uid}/ai_asisten_conversations/{messageId}

   Tombol ini tidak menghapus backup audit.
========================================================= */
.ai-asisten-page .aiAsistenMessageDeleteBtn{
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(239,68,68,.10);
  color: #dc2626;
  box-shadow: var(--neu-out-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity .18s ease,
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenMessageDeleteBtn{
  background: rgba(239,68,68,.15);
  color: #f87171;
}

.ai-asisten-page .aiAsistenMessageDeleteBtn i{
  font-size: 11px;
  color: inherit;
}

.ai-asisten-page .aiAsistenMessage:hover .aiAsistenMessageDeleteBtn,
.ai-asisten-page .aiAsistenMessage:focus-within .aiAsistenMessageDeleteBtn,
.ai-asisten-page .aiAsistenMessageDeleteBtn:focus{
  opacity: 1;
  transform: scale(1);
}

.ai-asisten-page .aiAsistenMessageDeleteBtn:hover{
  background: rgba(239,68,68,.18);
  transform: scale(1.04);
}

.ai-asisten-page .aiAsistenMessageDeleteBtn:active{
  transform: scale(.98);
}

.ai-asisten-page .aiAsistenMessageDeleteBtn:disabled,
.ai-asisten-page .aiAsistenMessageDeleteBtn[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: .46;
  transform: scale(1);
  box-shadow: var(--neu-in-sm);
}

.ai-asisten-page .aiAsistenMessageDeleteBtn.is-loading{
  cursor: wait;
  opacity: .72;
  pointer-events: none;
}

.ai-asisten-page .aiAsistenMessageDeleteBtn.is-loading i{
  animation: aiDeleteSpin .85s linear infinite;
}

/*
 * Untuk pesan user, tombol delete berada di sisi kiri bubble
 * agar tidak bentrok dengan ujung kanan bubble user.
 */
.ai-asisten-page .aiAsistenMessage--user .aiAsistenMessageDeleteBtn{
  order: -1;
}

/*
 * Untuk pesan bot, tombol delete tetap setelah bubble.
 */
.ai-asisten-page .aiAsistenMessage--bot .aiAsistenMessageDeleteBtn{
  order: 3;
}

/*
 * Saat pesan sedang dihapus, bubble dibuat redup agar user tahu
 * proses sedang berjalan.
 */
.ai-asisten-page .aiAsistenMessage.is-deleting{
  opacity: .62;
  pointer-events: none;
}

.ai-asisten-page .aiAsistenMessage.is-deleting .aiAsistenBubble{
  filter: grayscale(.12);
}


/* =========================================================
   EMPTY / HISTORY STATE
   ---------------------------------------------------------
   Dipakai jika nanti ai-asisten.js ingin menampilkan status
   singkat setelah semua chat aktif dihapus.
========================================================= */
.ai-asisten-page .aiAsistenHistoryEmptyState{
  width: min(620px, 90%);
  align-self: center;
  margin: 12px auto;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.40), rgba(240,245,252,.30));
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: var(--neu-in-sm);
  color: var(--muted);
  text-align: center;
  font-size: 12.3px;
  line-height: 1.55;
  font-weight: 750;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenHistoryEmptyState{
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.06);
}


/* =========================================================
   WELCOME BUBBLE - PESAN PEMBUKA AI
========================================================= */
.ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble{
  max-width: 590px;
  padding: 18px 22px;
  border-radius: 18px;
  border-bottom-left-radius: 9px;
}

.ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble p{
  margin: 0;
  color: var(--ink);
  text-align: left;
  white-space: pre-line;
  line-height: 1.68;
  font-size: 13.2px;
  font-weight: 750;
  letter-spacing: -.01em;
}

.ai-asisten-page .aiAsistenMessage--error .aiAsistenBubble{
  background: rgba(220,38,38,.08);
  color: #b91c1c;
  border-color: rgba(220,38,38,.16);
}

.ai-asisten-page .aiAsistenMessage--warning .aiAsistenBubble{
  background: rgba(245,158,11,.10);
  color: #92400e;
  border-color: rgba(245,158,11,.18);
}


/* =========================================================
   HUMAN ESCALATION CARD
   ---------------------------------------------------------
   Kartu ini muncul dari ai-asisten.js jika backend mengirim:
   escalation.enabled === true.

   Fungsi:
   - Memberikan jalur lanjut ke menu Pesan.
   - Tidak menggantikan layanan darurat.
   - Menjadi awal alur user_messages untuk tindak lanjut petugas.
========================================================= */
.ai-asisten-page .aiEscalationCard{
  width: min(680px, 88%);
  align-self: flex-start;
  margin-left: 44px;
  padding: 14px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.70), rgba(229,247,251,.44));
  border: 1px solid rgba(0,172,170,.14);
  box-shadow:
    12px 12px 28px rgba(15,23,42,.08),
    -8px -8px 20px rgba(255,255,255,.62);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  color: var(--ink);
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationCard{
  background:
    linear-gradient(145deg, rgba(0,172,170,.12), rgba(255,255,255,.045));
  border-color: rgba(83,235,232,.18);
  box-shadow:
    12px 12px 28px rgba(0,0,0,.24),
    -8px -8px 20px rgba(255,255,255,.025);
}

.ai-asisten-page .aiEscalationIcon{
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(0,172,170,.18), rgba(255,255,255,.48));
  color: var(--blue);
  box-shadow: var(--neu-out-sm);
  display: grid;
  place-items: center;
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationIcon{
  background:
    linear-gradient(145deg, rgba(0,172,170,.28), rgba(255,255,255,.06));
}

.ai-asisten-page .aiEscalationIcon i{
  font-size: 15px;
  color: inherit;
}

.ai-asisten-page .aiEscalationContent{
  min-width: 0;
}

.ai-asisten-page .aiEscalationContent strong{
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 13.4px;
  line-height: 1.32;
  font-weight: 950;
  letter-spacing: -.01em;
}

.ai-asisten-page .aiEscalationContent p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.4px;
  line-height: 1.55;
  font-weight: 700;
}

.ai-asisten-page .aiEscalationActions{
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.ai-asisten-page .aiEscalationBtn{
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  background: var(--primaryGrad);
  color: #ffffff;
  box-shadow: var(--primaryShadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.01em;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.ai-asisten-page .aiEscalationBtn i{
  font-size: 12px;
  color: inherit;
}

.ai-asisten-page .aiEscalationBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.ai-asisten-page .aiEscalationBtn:active{
  transform: translateY(0);
}

.ai-asisten-page .aiEscalationBtn:disabled,
.ai-asisten-page .aiEscalationBtn[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: .64;
  transform: none;
  filter: none;
}

.ai-asisten-page .aiEscalationNote{
  display: block;
  margin-top: 9px;
  color: rgba(100,116,139,.92);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 750;
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationNote{
  color: rgba(203,213,225,.72);
}

/*
 * Level escalation dari backend:
 * optional, recommended, urgent.
 */
.ai-asisten-page .aiEscalationCard[data-escalation-level="optional"]{
  border-color: rgba(0,172,170,.13);
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="recommended"]{
  border-color: rgba(0,172,170,.18);
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="recommended"] .aiEscalationIcon{
  color: var(--blue);
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"]{
  background:
    linear-gradient(145deg, rgba(255,247,237,.82), rgba(254,242,242,.58));
  border-color: rgba(239,68,68,.20);
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"]{
  background:
    linear-gradient(145deg, rgba(239,68,68,.15), rgba(255,255,255,.045));
  border-color: rgba(248,113,113,.22);
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"] .aiEscalationIcon{
  background:
    linear-gradient(145deg, rgba(239,68,68,.16), rgba(255,255,255,.48));
  color: #dc2626;
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"] .aiEscalationIcon{
  background:
    linear-gradient(145deg, rgba(239,68,68,.25), rgba(255,255,255,.06));
  color: #f87171;
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"] .aiEscalationBtn{
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow:
    0 14px 26px rgba(220,38,38,.25),
    0 8px 18px rgba(239,68,68,.18);
}


/* =========================================================
   QUICK PROMPT REMOVAL
   ---------------------------------------------------------
   Jika versi lama masih punya quick prompt, komponen ini
   tetap disembunyikan agar tidak bentrok dengan desain baru.
========================================================= */
.ai-asisten-page .aiAsistenPromptGrid,
.ai-asisten-page .aiAsistenPromptBtn{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* =========================================================
   FORM INPUT
========================================================= */
.ai-asisten-page .aiAsistenForm{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.ai-asisten-page .aiAsistenInputWrap{
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-in-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap{
  border-color: rgba(255,255,255,.06);
}

.ai-asisten-page .aiAsistenInputWrap i{
  color: var(--muted);
  font-size: 14px;
}

.ai-asisten-page .aiAsistenInput{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 750;
}

.ai-asisten-page .aiAsistenInput::placeholder{
  color: rgba(100,116,139,.85);
}

.ai-asisten-page .aiAsistenInput:disabled{
  cursor: not-allowed;
  opacity: .72;
}

.ai-asisten-page .aiAsistenSendBtn{
  min-width: 84px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: var(--primaryGrad);
  color: #ffffff;
  box-shadow: var(--primaryShadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.01em;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    opacity .18s ease;
}

.ai-asisten-page .aiAsistenSendBtn i{
  font-size: 13px;
}

.ai-asisten-page .aiAsistenSendBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.ai-asisten-page .aiAsistenSendBtn:active{
  transform: translateY(0);
}

.ai-asisten-page .aiAsistenSendBtn:disabled{
  cursor: not-allowed;
  opacity: .62;
  transform: none;
  filter: none;
}


/* =========================================================
   TYPING INDICATOR
========================================================= */
.ai-asisten-page .aiAsistenTypingMessage{
  display: none;
}

.ai-asisten-page .aiAsistenTypingMessage.is-visible{
  display: flex;
}

.ai-asisten-page .aiAsistenTypingBubble{
  width: auto;
  min-width: 58px;
  max-width: 96px;
  min-height: 38px;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: var(--neu-out-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenTypingBubble{
  border-color: rgba(255,255,255,.06);
}

.ai-asisten-page .aiAsistenTypingDot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
  opacity: .38;
  animation: aiTypingPulse 1s ease-in-out infinite;
}

.ai-asisten-page .aiAsistenTypingDot:nth-child(2){
  animation-delay: .14s;
}

.ai-asisten-page .aiAsistenTypingDot:nth-child(3){
  animation-delay: .28s;
}

@keyframes aiTypingPulse{
  0%, 80%, 100%{
    transform: translateY(0);
    opacity: .35;
  }

  40%{
    transform: translateY(-4px);
    opacity: 1;
  }
}




/* =========================================================
   SOURCES / SUMBER REFERENSI
   ---------------------------------------------------------
   Catatan:
   - Section default hidden dari HTML/JS sampai ada sumber.
   - Setelah ada sumber, panel muncul tetapi detail tetap
     collapsed sampai user klik "Lihat referensi".
   - Metadata yang boleh tampil untuk kebutuhan transparansi:
     Status, File, Kategori, Chunk, Kesesuaian, dan Catatan.
========================================================= */
.ai-asisten-page .aiAsistenSources,
.ai-asisten-page .aiAsistenSourcePanel{
  position: relative;
  z-index: 1;
  padding: 14px 16px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.32), rgba(240,245,252,.25));
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: var(--neu-in-sm);
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSources,
html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcePanel{
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.06);
}

.ai-asisten-page .aiAsistenSources[hidden]{
  display: none !important;
}

.ai-asisten-page .aiAsistenSourcesHead,
.ai-asisten-page .aiAsistenSourceHeader{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ai-asisten-page .aiAsistenSourcesIcon,
.ai-asisten-page .aiAsistenSourceIcon{
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 12px;
  background: rgba(0,172,170,.10);
  color: var(--blue);
  box-shadow: var(--neu-out-sm);
  display: grid;
  place-items: center;
}

.ai-asisten-page .aiAsistenSourcesIcon i,
.ai-asisten-page .aiAsistenSourceIcon i{
  font-size: 12px;
}

.ai-asisten-page .aiAsistenSourcesTitleWrap,
.ai-asisten-page .aiAsistenSourceHeaderText{
  min-width: 0;
}

.ai-asisten-page .aiAsistenSourcesHead h4,
.ai-asisten-page .aiAsistenSourceHeaderText h4{
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
}

.ai-asisten-page .aiAsistenSourcesHead p,
.ai-asisten-page .aiAsistenSourceHeaderText p{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 700;
}

.ai-asisten-page .aiAsistenSourcesToggle{
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.48);
  color: var(--blue);
  box-shadow: var(--neu-out-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcesToggle{
  background: rgba(255,255,255,.06);
}

.ai-asisten-page .aiAsistenSourcesToggle:hover{
  transform: translateY(-1px);
  background: rgba(0,172,170,.10);
}

.ai-asisten-page .aiAsistenSourcesToggle:active{
  transform: translateY(0);
}

.ai-asisten-page .aiAsistenSourcesToggle i{
  font-size: 11px;
  transition: transform .22s ease;
}

.ai-asisten-page .aiAsistenSources.is-expanded .aiAsistenSourcesToggle i,
.ai-asisten-page .aiAsistenSources:not(.is-collapsed) .aiAsistenSourcesToggle i{
  transform: rotate(180deg);
}

.ai-asisten-page .aiAsistenSourcesBody{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(100,116,139,.16);
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcesBody{
  border-top-color: rgba(255,255,255,.07);
}

.ai-asisten-page .aiAsistenSourcesBody[hidden],
.ai-asisten-page .aiAsistenSources.is-collapsed .aiAsistenSourcesBody{
  display: none !important;
}

.ai-asisten-page .aiAsistenSources.is-expanded .aiAsistenSourcesBody,
.ai-asisten-page .aiAsistenSources:not(.is-collapsed) .aiAsistenSourcesBody{
  display: block;
}

.ai-asisten-page .aiAsistenSourcesList,
.ai-asisten-page .aiAsistenSourceList{
  display: grid;
  gap: 8px;
}

.ai-asisten-page .aiAsistenSourceItem{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 8px 8px 18px rgba(15,23,42,.05);
  color: var(--ink);
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourceItem{
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.06);
}

.ai-asisten-page .aiAsistenSourceItem[data-source-role="general_support"]{
  border-color: rgba(0,172,170,.16);
}

.ai-asisten-page .aiAsistenSourceItem[data-source-role="supporting"]{
  border-color: rgba(245,158,11,.20);
}

.ai-asisten-page .aiAsistenSourceItem[data-source-role="primary"]{
  border-color: rgba(34,197,94,.16);
}

.ai-asisten-page .aiAsistenSourceItem strong,
.ai-asisten-page .aiAsistenSourceTitle{
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  word-break: break-word;
}

.ai-asisten-page .aiAsistenSourceItem small,
.ai-asisten-page .aiAsistenSourceMeta{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.3px;
  line-height: 1.45;
  font-weight: 700;
  word-break: break-word;
}

/*
 * Badge kecil untuk konteks referensi jika nanti JS/backend
 * menambahkan elemen tambahan. Tetap non-teknis.
 */
.ai-asisten-page .aiAsistenSourceBadge{
  width: fit-content;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0,172,170,.08);
  color: var(--blue);
  font-size: 10.8px;
  line-height: 1;
  font-weight: 900;
}


/* =========================================================
   NOTICE CARD / CATATAN PENTING
========================================================= */
.ai-asisten-page .aiAsistenNoticeCard{
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ai-asisten-page .aiAsistenNoticeIcon{
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(0,172,170,.16), rgba(255,255,255,.30));
  color: var(--blue);
  box-shadow: var(--neu-out-sm);
  display: grid;
  place-items: center;
}

.ai-asisten-page .aiAsistenNoticeIcon i{
  font-size: 21px;
  color: inherit;
}

.ai-asisten-page .aiAsistenNoticeText{
  min-width: 0;
}

.ai-asisten-page .aiAsistenNoticeText h3{
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.02em;
}

.ai-asisten-page .aiAsistenNoticeText p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.7px;
  line-height: 1.62;
  font-weight: 700;
}


/* =========================================================
   MOBILE FOOTER NAV SAFETY
   ---------------------------------------------------------
   Pada HTML terbaru menu mobile footer bertambah menjadi:
   Home, AI, Riwayat, Pesan, Profil.

   Rule ini menjaga agar 5 item tetap muat dan tidak pecah
   pada layar HP.
========================================================= */
.ai-asisten-page .dashboardMobileFooterNav{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ai-asisten-page .dashboardMobileFooterBtn{
  min-width: 0;
}

.ai-asisten-page .dashboardMobileFooterBtn span{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   MOBILE DRAWER SAFETY
   ---------------------------------------------------------
   Tombol burger pada mobile hero sekarang dipakai untuk
   membuka drawer, bukan tombol back.
========================================================= */
.ai-asisten-page .dashboardHeroBurgerBtn{
  cursor: pointer;
}

.ai-asisten-page.dashboard-drawer-open .dashboardMobileBackdrop,
body.dashboard-drawer-open.ai-asisten-page .dashboardMobileBackdrop{
  pointer-events: auto;
}


/* =========================================================
   SCREEN READER ONLY
========================================================= */
.ai-asisten-page .sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */
@media (max-width: 1180px){
  .ai-asisten-page .aiAsistenMessages{
    min-height: 340px;
  }
}

@media (max-width: 900px){
  .ai-asisten-page .aiAsistenChatHead{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ai-asisten-page .aiAsistenChatHeadActions{
    grid-column: 2 / 3;
    justify-content: flex-start;
  }

  .ai-asisten-page .aiAsistenConnectionWrap{
    grid-column: auto;
    justify-content: flex-start;
  }

  .ai-asisten-page .aiAsistenDeleteAllBtn{
    min-height: 30px;
    padding: 0 11px;
    font-size: 10.8px;
  }

  .ai-asisten-page .aiAsistenSourcesHead,
  .ai-asisten-page .aiAsistenSourceHeader{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ai-asisten-page .aiAsistenSourcesToggle{
    grid-column: 2 / 3;
    justify-self: flex-start;
  }

  .ai-asisten-page .aiEscalationCard{
    width: min(680px, 92%);
  }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 740px){
  .ai-asisten-page .aiAsistenSectionInner,
  .ai-asisten-page .aiAsistenPageContent{
    gap: 14px;
  }

  .ai-asisten-page .aiAsistenMobileHeroCard{
    display: block !important;
  }

  .ai-asisten-page .aiAsistenMobileHeroCard .dashboardHeroIntro{
    padding-right: 102px;
  }

  .ai-asisten-page .aiAsistenMobileHeroProfileMedia{
    flex: 0 0 auto;
  }

  .ai-asisten-page .aiAsistenMobileHeroPhoto{
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    border-radius: 18px !important;
  }

  .ai-asisten-page .aiAsistenMobileHeroTitle{
    font-size: clamp(15px, 4.35vw, 19px) !important;
  }

  .ai-asisten-page .aiAsistenMobileHeroSub{
    display: none !important;
  }

  .ai-asisten-page .aiAsistenChatCard,
  .ai-asisten-page .aiAsistenNoticeCard{
    border-radius: 22px;
  }

  .ai-asisten-page .aiAsistenChatCard{
    padding: 15px 13px;
    gap: 13px;
  }

  .ai-asisten-page .aiAsistenChatHead{
    gap: 11px;
  }

  .ai-asisten-page .aiAsistenChatAvatar,
  .ai-asisten-page .aiAsistenNoticeIcon{
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
  }

  .ai-asisten-page .aiAsistenChatAvatar i,
  .ai-asisten-page .aiAsistenNoticeIcon i{
    font-size: 18px;
  }

  .ai-asisten-page .aiAsistenChatTitleWrap h3,
  .ai-asisten-page .aiAsistenNoticeText h3{
    font-size: 14.5px;
  }

  .ai-asisten-page .aiAsistenOnlineStatus{
    margin-top: 5px;
    font-size: 11.4px;
  }

  .ai-asisten-page .aiAsistenOnlineDot,
  .ai-asisten-page .aiAsistenConnectionDot{
    width: 7px;
    height: 7px;
    min-width: 7px;
  }

  .ai-asisten-page .aiAsistenChatTitleWrap p,
  .ai-asisten-page .aiAsistenNoticeText p{
    font-size: 12.4px;
    line-height: 1.52;
  }

  .ai-asisten-page .aiAsistenChatHeadActions{
    width: 100%;
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 9px;
    padding-top: 2px;
  }

  .ai-asisten-page .aiAsistenConnectionBadge,
  .ai-asisten-page .aiAsistenConnectionStatus{
    min-height: 28px;
    padding: 0 10px;
    font-size: 10.5px;
  }

  .ai-asisten-page .aiAsistenDeleteAllBtn{
    min-height: 28px;
    padding: 0 10px;
    gap: 6px;
    font-size: 10.5px;
  }

  .ai-asisten-page .aiAsistenDeleteAllBtn i{
    font-size: 10.5px;
  }

  .ai-asisten-page .aiAsistenMessages{
    min-height: 320px;
    max-height: 420px;
    padding: 13px;
    border-radius: 18px;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width: 86%;
    padding: 11px 12px;
    border-radius: 16px;
  }

  .ai-asisten-page .aiAsistenBubble p{
    font-size: 12.4px;
    line-height: 1.66;
    white-space: pre-line;
  }

  .ai-asisten-page .aiAsistenMessageDeleteBtn{
    width: 27px;
    height: 27px;
    min-width: 27px;
    opacity: .88;
    transform: scale(1);
  }

  .ai-asisten-page .aiAsistenMessageDeleteBtn i{
    font-size: 10.5px;
  }

  .ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width: 86%;
    padding: 14px 16px;
  }

  .ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble p{
    font-size: 12.4px;
    line-height: 1.66;
    white-space: pre-line;
  }

  .ai-asisten-page .aiEscalationCard{
    width: 94%;
    margin-left: 0;
    padding: 12px;
    border-radius: 18px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .ai-asisten-page .aiEscalationIcon{
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 13px;
  }

  .ai-asisten-page .aiEscalationIcon i{
    font-size: 13px;
  }

  .ai-asisten-page .aiEscalationContent strong{
    font-size: 12.8px;
  }

  .ai-asisten-page .aiEscalationContent p{
    font-size: 11.8px;
    line-height: 1.5;
  }

  .ai-asisten-page .aiEscalationBtn{
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 11.6px;
  }

  .ai-asisten-page .aiEscalationNote{
    font-size: 10.7px;
  }

  .ai-asisten-page .aiAsistenSources{
    padding: 13px;
    border-radius: 18px;
  }

  .ai-asisten-page .aiAsistenSourcesHead{
    gap: 9px;
  }

  .ai-asisten-page .aiAsistenSourcesIcon{
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 11px;
  }

  .ai-asisten-page .aiAsistenSourcesHead h4{
    font-size: 12.7px;
  }

  .ai-asisten-page .aiAsistenSourcesHead p{
    font-size: 10.8px;
  }

  .ai-asisten-page .aiAsistenSourcesToggle{
    min-height: 30px;
    padding: 0 10px;
    gap: 7px;
    font-size: 10.5px;
  }

  .ai-asisten-page .aiAsistenSourcesToggleText{
    display: inline-block;
  }

  .ai-asisten-page .aiAsistenSourceItem{
    padding: 9px 10px;
    border-radius: 13px;
  }

  .ai-asisten-page .aiAsistenSourceItem strong{
    font-size: 12.4px;
  }

  .ai-asisten-page .aiAsistenSourceItem small{
    font-size: 10.8px;
  }

  .ai-asisten-page .aiAsistenForm{
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 10px;
  }

  .ai-asisten-page .aiAsistenInputWrap{
    min-height: 44px;
    border-radius: 15px;
  }

  .ai-asisten-page .aiAsistenInput{
    font-size: 13px;
  }

  .ai-asisten-page .aiAsistenSendBtn{
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 15px;
    gap: 0;
  }

  .ai-asisten-page .aiAsistenSendBtn span{
    display: none !important;
  }

  .ai-asisten-page .aiAsistenSendBtn i{
    font-size: 14px;
  }

  .ai-asisten-page .aiAsistenNoticeCard{
    padding: 15px 13px;
    gap: 12px;
  }

  .ai-asisten-page .dashboardMobileFooterBtn i{
    font-size: 17px;
  }

  .ai-asisten-page .dashboardMobileFooterBtn span{
    font-size: 10.5px;
  }
}


/* =========================================================
   RESPONSIVE - EXTRA SMALL MOBILE
========================================================= */
@media (max-width: 420px){
  .ai-asisten-page .dashboardMobileFooterNav{
    gap: 0;
  }

  .ai-asisten-page .dashboardMobileFooterBtn{
    padding-left: 2px;
    padding-right: 2px;
  }

  .ai-asisten-page .dashboardMobileFooterBtn span{
    font-size: 10px;
  }

  .ai-asisten-page .aiEscalationCard{
    width: 100%;
  }

  .ai-asisten-page .aiAsistenDeleteAllBtn span{
    display: none;
  }

  .ai-asisten-page .aiAsistenDeleteAllBtn{
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    border-radius: 999px;
  }
}

@media (max-width: 380px){
  .ai-asisten-page .aiAsistenMobileHeroPhoto{
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 16px !important;
  }

  .ai-asisten-page .aiAsistenChatCard,
  .ai-asisten-page .aiAsistenNoticeCard{
    border-radius: 20px;
  }

  .ai-asisten-page .aiAsistenMessageIcon{
    display: none;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width: 92%;
  }

  .ai-asisten-page .aiAsistenMessageDeleteBtn{
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width: 92%;
    padding: 13px 14px;
  }

  .ai-asisten-page .aiEscalationCard{
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 11px;
  }

  .ai-asisten-page .aiEscalationIcon{
    display: none;
  }

  .ai-asisten-page .aiEscalationContent strong{
    font-size: 12.6px;
  }

  .ai-asisten-page .aiEscalationContent p{
    font-size: 11.6px;
  }

  .ai-asisten-page .aiAsistenSourcesHead{
    grid-template-columns: 1fr;
  }

  .ai-asisten-page .aiAsistenSourcesIcon{
    display: none;
  }

  .ai-asisten-page .aiAsistenSourcesToggle{
    grid-column: auto;
    justify-self: flex-start;
  }

  .ai-asisten-page .aiAsistenConnectionWrap{
    grid-column: auto;
  }

  .ai-asisten-page .aiAsistenForm{
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 9px;
  }

  .ai-asisten-page .aiAsistenSendBtn{
    width: 48px;
    min-width: 48px;
    max-width: 48px;
  }

  .ai-asisten-page .dashboardMobileFooterBtn span{
    font-size: 9.5px;
  }
}

/* =========================================================
   AI-ASISTEN.CSS - FINAL DASHBOARD VISUAL ALIGNMENT
   =========================================================
   BATAS PERUBAHAN:
   - Hanya tampilan, warna, background, border, shadow,
     hover, focus, light mode, dark mode, dan responsive.
   - Tidak mengubah HTML body, ID, class, data attribute,
     route, Firebase, RAG, riwayat chat, backup, delete chat,
     Human Escalation, sumber referensi, atau JavaScript.
   ========================================================= */

/* =========================================================
   TOKEN VISUAL AI ASISTEN
   Mengikuti token dashboard final.
========================================================= */
.ai-asisten-page{
  --ai-surface-glass:rgba(255,255,255,.86);
  --ai-surface-strong:rgba(255,255,255,.95);
  --ai-border:rgba(148,163,184,.22);
  --ai-border-teal:rgba(0,172,170,.16);

  --ai-soft-teal:#e5f7fb;
  --ai-soft-teal-strong:#ecfeff;
  --ai-soft-lime:#f3ffe1;

  --ai-shadow:
    0 18px 44px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.92);

  --ai-shadow-sm:
    0 9px 24px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.92);

  --ai-inset:
    inset 7px 7px 14px rgba(15,23,42,.045),
    inset -7px -7px 14px rgba(255,255,255,.82);

  --ai-message-area:
    radial-gradient(circle at 92% 8%, rgba(0,172,170,.10), transparent 34%),
    radial-gradient(circle at 8% 94%, rgba(195,218,62,.10), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(247,251,252,.90));
}

html[data-theme="dark"] .ai-asisten-page{
  --ai-surface-glass:rgba(11,32,36,.86);
  --ai-surface-strong:rgba(16,43,48,.95);
  --ai-border:rgba(255,255,255,.08);
  --ai-border-teal:rgba(0,214,210,.18);

  --ai-soft-teal:rgba(0,214,210,.10);
  --ai-soft-teal-strong:rgba(0,214,210,.13);
  --ai-soft-lime:rgba(195,218,62,.07);

  --ai-shadow:
    0 22px 50px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);

  --ai-shadow-sm:
    0 12px 28px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055);

  --ai-inset:
    inset 8px 8px 16px rgba(0,0,0,.42),
    inset -8px -8px 16px rgba(255,255,255,.035);

  --ai-message-area:
    radial-gradient(circle at 92% 8%, rgba(0,214,210,.12), transparent 34%),
    radial-gradient(circle at 8% 94%, rgba(195,218,62,.07), transparent 32%),
    linear-gradient(145deg, rgba(16,43,48,.80), rgba(11,32,36,.94));
}

/* =========================================================
   HALAMAN DAN CONTENT
========================================================= */
body.dashboard-page.ai-asisten-page{
  background:transparent !important;
  color:var(--ink) !important;
}

.ai-asisten-page .aiAsistenPageContent{
  gap:18px !important;
}

/* =========================================================
   CARD UTAMA AI + CATATAN PENTING
========================================================= */
.ai-asisten-page .aiAsistenChatCard,
.ai-asisten-page .aiAsistenNoticeCard{
  background:
    radial-gradient(circle at top right, rgba(0,172,170,.08), transparent 34%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.07), transparent 30%),
    var(--ai-surface-glass) !important;
  border:1px solid var(--ai-border) !important;
  box-shadow:var(--ai-shadow) !important;
  backdrop-filter:blur(16px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.10) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenChatCard,
html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCard{
  background:
    radial-gradient(circle at top right, rgba(0,214,210,.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(195,218,62,.06), transparent 30%),
    var(--ai-surface-glass) !important;
}

/* =========================================================
   HEADER AI ASISTEN
========================================================= */
.ai-asisten-page .aiAsistenChatAvatar,
.ai-asisten-page .aiAsistenNoticeIcon{
  background:
    linear-gradient(
      145deg,
      rgba(229,247,251,.98),
      rgba(243,255,225,.96)
    ) !important;
  color:#00acaa !important;
  border:1px solid rgba(0,172,170,.14) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenChatAvatar,
html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeIcon{
  background:
    linear-gradient(
      145deg,
      rgba(0,214,210,.13),
      rgba(195,218,62,.08)
    ) !important;
  color:#53ebe8 !important;
  border-color:rgba(0,214,210,.18) !important;
}

.ai-asisten-page .aiAsistenChatTitleWrap h3,
.ai-asisten-page .aiAsistenNoticeText h3{
  color:var(--ink) !important;
}

.ai-asisten-page .aiAsistenOnlineStatus{
  color:#15803d !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenOnlineStatus{
  color:#4ade80 !important;
}

/* Badge status tetap hijau karena menunjukkan koneksi online */
.ai-asisten-page .aiAsistenConnectionBadge,
.ai-asisten-page .aiAsistenConnectionStatus{
  background:rgba(22,163,74,.10) !important;
  color:#15803d !important;
  border:1px solid rgba(22,163,74,.18) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenConnectionBadge,
html[data-theme="dark"] .ai-asisten-page .aiAsistenConnectionStatus{
  background:rgba(74,222,128,.10) !important;
  color:#4ade80 !important;
  border-color:rgba(74,222,128,.18) !important;
}

/* =========================================================
   TOMBOL HAPUS CHAT
   Tetap merah karena merupakan destructive action.
========================================================= */
.ai-asisten-page .aiAsistenDeleteAllBtn,
.ai-asisten-page .aiAsistenMessageDeleteBtn{
  border:1px solid rgba(239,68,68,.14) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

.ai-asisten-page .aiAsistenDeleteAllBtn:hover,
.ai-asisten-page .aiAsistenMessageDeleteBtn:hover{
  border-color:rgba(239,68,68,.24) !important;
}

/* =========================================================
   AREA PERCAKAPAN
========================================================= */
.ai-asisten-page .aiAsistenMessages{
  background:var(--ai-message-area) !important;
  border:1px solid var(--ai-border) !important;
  box-shadow:var(--ai-inset) !important;
}

.ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-thumb{
  border-radius:999px !important;
  background:
    linear-gradient(
      180deg,
      rgba(195,218,62,.94),
      rgba(0,172,170,.88)
    ) !important;
}

/* =========================================================
   ICON PESAN DAN BUBBLE
========================================================= */
.ai-asisten-page .aiAsistenMessageIcon{
  background:
    linear-gradient(
      145deg,
      rgba(229,247,251,.98),
      rgba(243,255,225,.94)
    ) !important;
  color:#00acaa !important;
  border:1px solid rgba(0,172,170,.14) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenMessageIcon{
  background:
    linear-gradient(
      145deg,
      rgba(0,214,210,.12),
      rgba(195,218,62,.07)
    ) !important;
  color:#53ebe8 !important;
  border-color:rgba(0,214,210,.18) !important;
}

.ai-asisten-page .aiAsistenMessage--bot .aiAsistenBubble,
.ai-asisten-page .aiAsistenTypingBubble{
  background:var(--ai-surface-strong) !important;
  border:1px solid var(--ai-border-teal) !important;
  color:var(--ink) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

.ai-asisten-page .aiAsistenMessage--bot .aiAsistenBubble p{
  color:var(--muted) !important;
}

/* Bubble pembuka */
.ai-asisten-page .aiAsistenMessage--welcome .aiAsistenBubble,
.ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(236,254,255,.93)
    ) !important;
  border-color:rgba(0,172,170,.18) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenMessage--welcome .aiAsistenBubble,
html[data-theme="dark"] .ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,48,.98),
      rgba(20,52,58,.94)
    ) !important;
  border-color:rgba(0,214,210,.20) !important;
}

.ai-asisten-page .aiAsistenMessage--welcome .aiAsistenBubble p,
.ai-asisten-page .aiAsistenMessages > .aiAsistenMessage--bot:first-child .aiAsistenBubble p{
  color:var(--ink) !important;
}

/* Bubble user mengikuti tombol/menu aktif dashboard */
.ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;
  border-color:transparent !important;
  box-shadow:var(--primaryShadow) !important;
}

/* =========================================================
   EMPTY HISTORY STATE
========================================================= */
.ai-asisten-page .aiAsistenHistoryEmptyState{
  background:
    linear-gradient(
      145deg,
      rgba(229,247,251,.72),
      rgba(243,255,225,.56)
    ) !important;
  border:1px solid rgba(0,172,170,.14) !important;
  color:var(--muted) !important;
  box-shadow:var(--ai-inset) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenHistoryEmptyState{
  background:
    linear-gradient(
      145deg,
      rgba(0,214,210,.08),
      rgba(195,218,62,.04)
    ) !important;
  border-color:rgba(0,214,210,.16) !important;
}

/* =========================================================
   HUMAN ESCALATION
   Optional dan recommended memakai teal.
   Urgent tetap merah untuk keselamatan.
========================================================= */
.ai-asisten-page .aiEscalationCard{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.86),
      rgba(229,247,251,.68)
    ) !important;
  border:1px solid rgba(0,172,170,.16) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationCard{
  background:
    linear-gradient(
      145deg,
      rgba(0,214,210,.10),
      rgba(16,43,48,.90)
    ) !important;
  border-color:rgba(0,214,210,.18) !important;
}

.ai-asisten-page .aiEscalationIcon{
  background:
    linear-gradient(
      145deg,
      rgba(229,247,251,.96),
      rgba(243,255,225,.92)
    ) !important;
  color:#00acaa !important;
  border:1px solid rgba(0,172,170,.14) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationIcon{
  background:
    linear-gradient(
      145deg,
      rgba(0,214,210,.13),
      rgba(195,218,62,.07)
    ) !important;
  color:#53ebe8 !important;
  border-color:rgba(0,214,210,.18) !important;
}

.ai-asisten-page .aiEscalationBtn{
  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;
  box-shadow:var(--primaryShadow) !important;
}

/* Kunci urgent agar tetap merah */
.ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"]{
  background:
    linear-gradient(
      145deg,
      rgba(255,247,237,.88),
      rgba(254,242,242,.66)
    ) !important;
  border-color:rgba(239,68,68,.20) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"]{
  background:
    linear-gradient(
      145deg,
      rgba(239,68,68,.15),
      rgba(16,43,48,.90)
    ) !important;
  border-color:rgba(248,113,113,.22) !important;
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"] .aiEscalationIcon{
  background:
    linear-gradient(
      145deg,
      rgba(239,68,68,.16),
      rgba(255,255,255,.48)
    ) !important;
  color:#dc2626 !important;
  border-color:rgba(239,68,68,.20) !important;
}

.ai-asisten-page .aiEscalationCard[data-escalation-level="urgent"] .aiEscalationBtn{
  background:linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow:
    0 14px 26px rgba(220,38,38,.25),
    0 8px 18px rgba(239,68,68,.18) !important;
}

/* =========================================================
   INPUT DAN TOMBOL KIRIM
========================================================= */
.ai-asisten-page .aiAsistenInputWrap{
  background:rgba(255,255,255,.90) !important;
  border:1px solid var(--ai-border) !important;
  box-shadow:
    inset 7px 7px 12px rgba(15,23,42,.045),
    inset -7px -7px 12px rgba(255,255,255,.92) !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap{
  background:rgba(16,43,48,.92) !important;
  box-shadow:
    inset 7px 7px 12px rgba(0,0,0,.52),
    inset -7px -7px 12px rgba(255,255,255,.045) !important;
}

.ai-asisten-page .aiAsistenInputWrap:focus-within{
  background:#FFFFFF !important;
  border-color:rgba(0,172,170,.34) !important;
  box-shadow:
    0 0 0 4px rgba(0,172,170,.10),
    inset 7px 7px 12px rgba(15,23,42,.035),
    inset -7px -7px 12px rgba(255,255,255,.96) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap:focus-within{
  background:rgba(16,43,48,.98) !important;
  border-color:rgba(0,214,210,.34) !important;
  box-shadow:
    0 0 0 4px rgba(0,214,210,.10),
    inset 7px 7px 12px rgba(0,0,0,.48),
    inset -7px -7px 12px rgba(255,255,255,.045) !important;
}

.ai-asisten-page .aiAsistenInputWrap i{
  color:#00acaa !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap i{
  color:#53ebe8 !important;
}

.ai-asisten-page .aiAsistenInput,
.ai-asisten-page .aiAsistenInput::placeholder{
  color:var(--ink) !important;
}

.ai-asisten-page .aiAsistenInput::placeholder{
  opacity:.64 !important;
}

.ai-asisten-page .aiAsistenSendBtn{
  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;
  border:0 !important;
  box-shadow:var(--primaryShadow) !important;
}

.ai-asisten-page .aiAsistenSendBtn:hover{
  transform:translateY(-2px) !important;
  filter:none !important;
  box-shadow:
    0 20px 38px rgba(0,172,170,.26),
    0 8px 18px rgba(10,134,132,.16),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.ai-asisten-page .aiAsistenSendBtn:active{
  transform:translateY(0) !important;
  box-shadow:
    inset 7px 7px 14px rgba(0,0,0,.14),
    inset -7px -7px 14px rgba(255,255,255,.20),
    0 8px 18px rgba(0,172,170,.18) !important;
}

/* =========================================================
   TYPING INDICATOR
========================================================= */
.ai-asisten-page .aiAsistenTypingDot{
  background:#00acaa !important;
}

.ai-asisten-page .aiAsistenTypingDot:nth-child(2){
  background:#0a8684 !important;
}

.ai-asisten-page .aiAsistenTypingDot:nth-child(3){
  background:#c3da3e !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenTypingDot{
  background:#00d6d2 !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenTypingDot:nth-child(2){
  background:#53ebe8 !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenTypingDot:nth-child(3){
  background:#c3da3e !important;
}

/* =========================================================
   SUMBER REFERENSI
   Metadata teknis tetap dipertahankan.
========================================================= */
.ai-asisten-page .aiAsistenSources,
.ai-asisten-page .aiAsistenSourcePanel{
  background:
    radial-gradient(circle at top right, rgba(0,172,170,.10), transparent 38%),
    linear-gradient(
      145deg,
      rgba(229,247,251,.72),
      rgba(243,255,225,.54)
    ) !important;
  border:1px solid rgba(0,172,170,.16) !important;
  box-shadow:var(--ai-inset) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSources,
html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcePanel{
  background:
    radial-gradient(circle at top right, rgba(0,214,210,.12), transparent 38%),
    linear-gradient(
      145deg,
      rgba(0,214,210,.07),
      rgba(195,218,62,.04)
    ) !important;
  border-color:rgba(0,214,210,.18) !important;
}

.ai-asisten-page .aiAsistenSourcesIcon,
.ai-asisten-page .aiAsistenSourceIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.94),
      rgba(229,247,251,.90)
    ) !important;
  color:#00acaa !important;
  border:1px solid rgba(0,172,170,.14) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcesIcon,
html[data-theme="dark"] .ai-asisten-page .aiAsistenSourceIcon{
  background:rgba(16,43,48,.92) !important;
  color:#53ebe8 !important;
  border-color:rgba(0,214,210,.18) !important;
}

.ai-asisten-page .aiAsistenSourcesToggle{
  background:rgba(255,255,255,.90) !important;
  color:#00acaa !important;
  border:1px solid rgba(0,172,170,.14) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

.ai-asisten-page .aiAsistenSourcesToggle:hover{
  background:#ecfeff !important;
  color:#0a8684 !important;
  border-color:rgba(0,172,170,.26) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcesToggle{
  background:rgba(16,43,48,.92) !important;
  color:#53ebe8 !important;
  border-color:rgba(0,214,210,.18) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourcesToggle:hover{
  background:rgba(0,214,210,.11) !important;
  color:#c3da3e !important;
}

.ai-asisten-page .aiAsistenSourceItem{
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(0,172,170,.12) !important;
  box-shadow:var(--ai-shadow-sm) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenSourceItem{
  background:rgba(16,43,48,.90) !important;
  border-color:rgba(0,214,210,.14) !important;
}

.ai-asisten-page .aiAsistenSourceItem strong,
.ai-asisten-page .aiAsistenSourceTitle{
  color:var(--ink) !important;
}

.ai-asisten-page .aiAsistenSourceItem small,
.ai-asisten-page .aiAsistenSourceMeta{
  color:var(--muted) !important;
}

/* =========================================================
   CATATAN PENTING
========================================================= */
.ai-asisten-page .aiAsistenNoticeCard{
  background:
    radial-gradient(circle at 96% 8%, rgba(195,218,62,.14), transparent 34%),
    radial-gradient(circle at 4% 92%, rgba(0,172,170,.08), transparent 30%),
    var(--ai-surface-glass) !important;
  border-color:rgba(0,172,170,.14) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCard{
  background:
    radial-gradient(circle at 96% 8%, rgba(195,218,62,.09), transparent 34%),
    radial-gradient(circle at 4% 92%, rgba(0,214,210,.08), transparent 30%),
    var(--ai-surface-glass) !important;
  border-color:rgba(0,214,210,.16) !important;
}

.ai-asisten-page .aiAsistenNoticeText p{
  color:var(--muted) !important;
}

/* =========================================================
   DRAWER MOBILE - MENU AI AKTIF
========================================================= */
.ai-asisten-page .dashboardMobileDrawerBtn.is-active{
  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;
  border-color:transparent !important;
  box-shadow:var(--primaryShadow) !important;
}

.ai-asisten-page .dashboardMobileDrawerBtn.is-active i,
.ai-asisten-page .dashboardMobileDrawerBtn.is-active span{
  color:#FFFFFF !important;
}

/* =========================================================
   MOBILE HERO
   Mengikuti hero dashboard final.
========================================================= */
@media (max-width:740px){
  .ai-asisten-page .aiAsistenMobileHeroCard{
    background:
      radial-gradient(circle at 88% 14%, rgba(255,255,255,.20), transparent 24%),
      linear-gradient(
        135deg,
        #c3da3e 0%,
        #00acaa 40%,
        #0a8684 100%
      ) !important;
    border-color:rgba(255,255,255,.32) !important;
    box-shadow:
      0 18px 36px rgba(0,172,170,.24),
      0 7px 16px rgba(10,134,132,.16),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -2px 0 rgba(0,0,0,.10) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileHeroCard{
    background:
      radial-gradient(circle at 88% 14%, rgba(255,255,255,.12), transparent 24%),
      linear-gradient(
        135deg,
        #487069 0%,
        #008f8d 42%,
        #075d5c 100%
      ) !important;
    box-shadow:
      0 20px 40px rgba(0,0,0,.36),
      0 8px 18px rgba(0,214,210,.12),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  .ai-asisten-page .aiAsistenMobileHeroCard .dashboardHeroTitle,
  .ai-asisten-page .aiAsistenMobileHeroCard .dashboardWelcomeGreeting,
  .ai-asisten-page .aiAsistenMobileHeroCard .dashboardWelcomeName,
  .ai-asisten-page .aiAsistenMobileHeroCard .dashboardHeroBurgerBtn{
    color:#FFFFFF !important;
  }

  .ai-asisten-page .aiAsistenChatCard,
  .ai-asisten-page .aiAsistenNoticeCard{
    box-shadow:var(--ai-shadow-sm) !important;
  }
}

/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */
.ai-asisten-page .aiAsistenInput:focus-visible{
  outline:none !important;
}

.ai-asisten-page .aiAsistenSendBtn:focus-visible,
.ai-asisten-page .aiAsistenSourcesToggle:focus-visible,
.ai-asisten-page .aiEscalationBtn:focus-visible,
.ai-asisten-page .aiAsistenDeleteAllBtn:focus-visible,
.ai-asisten-page .aiAsistenMessageDeleteBtn:focus-visible{
  outline:3px solid var(--focus) !important;
  outline-offset:3px !important;
}

/* =========================================================
   END FINAL DASHBOARD VISUAL ALIGNMENT
========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN NAVBAR DASHBOARD SYNC V1
   =========================================================
   BATAS PERUBAHAN:
   - Hanya memastikan navbar/header AI Asisten memakai baseline
     visual dashboard final.
   - Tidak menyentuh chat, Firebase, RAG, history, backup,
     delete chat, sumber referensi, escalation, atau form.
   - Struktur lama .aiAsistenMobileHero* sengaja tidak dipakai
     lagi oleh HTML baru, tetapi rule legacy dibiarkan agar aman
     terhadap cache/rollback.
   ========================================================= */

/* Desktop: mobile brand header tetap tidak tampil. */
@media (min-width:741px){
  .ai-asisten-page .dashboardMobileBrandHeader{
    display:none !important;
  }
}

/* HP: gunakan rhythm dashboard final dan jangan beri surface tambahan. */
@media (max-width:740px){
  .ai-asisten-page .aiAsistenSectionInner{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .ai-asisten-page .dashboardMobileBrandHeader{
    /*
     * Dashboard mobile memakai .dashboardLayout padding 12px.
     * Baseline dashboard mengompensasikannya dengan header
     * width calc(100% + 24px) + margin horizontal -12px.
     *
     * Jangan reset menjadi margin:0 karena akan menimbulkan
     * space 12px di sisi kiri navbar AI Asisten.
     */
    margin:0 -12px !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  /*
   * dashboard.css sudah menjadi sumber utama seluruh detail visual:
   * logo, shadow Bumil Ku, identitas RSAB, bell, notification dot,
   * dan neumorphism tombol grid. Tidak diduplikasi di sini agar
   * AI Asisten otomatis mengikuti baseline dashboard berikutnya.
   */
}

/* =========================================================
   END AI ASISTEN NAVBAR DASHBOARD SYNC V1
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN MOBILE BOTTOM NAV DASHBOARD MATCH V3
   =========================================================
   TUJUAN:
   - Menyamakan navbar bawah AI Asisten dengan dashboard final.
   - Menu: Home, Aktivitas, Siaran, Pesan, Profil.
   - Ukuran, radius, spacing, shadow, icon, dan typography
     mengikuti dashboard final.
   - Tidak mengubah fungsi chat AI, Firebase, RAG, history,
     backup, delete chat, source reference, escalation, atau JS.
   ========================================================= */

@media (max-width:740px){
  .ai-asisten-page{
    padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .ai-asisten-page .siteFooter{
    padding:0 10px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .ai-asisten-page .dashboardMobileFooterNav{
    width:min(calc(100% - 0px), 430px) !important;
    max-width:430px !important;
    min-height:66px !important;
    height:66px !important;
    margin:0 auto !important;
    padding:7px !important;
    border-radius:23px !important;
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(15,159,141,.11) !important;
    box-shadow:
      0 16px 34px rgba(16,70,80,.13),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:hidden !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn{
    width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    height:50px !important;
    padding:6px 4px 5px !important;
    border-radius:17px !important;
    gap:3px !important;
    background:transparent !important;
    border:1px solid transparent !important;
    box-shadow:none !important;
    color:#65788a !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
    text-align:center !important;
    line-height:1 !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn i{
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    font-size:19px !important;
    line-height:1 !important;
    color:currentColor !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-size:9.6px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    letter-spacing:-.015em !important;
    color:currentColor !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn:not(.is-active):hover,
  .ai-asisten-page .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#0E9382 !important;
    background:rgba(15,159,141,.085) !important;
    border-color:rgba(15,159,141,.14) !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .dashboardMobileFooterNav{
    background:rgba(11,32,36,.97) !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .dashboardMobileFooterBtn{
    color:#aac8cc !important;
  }

  html[data-theme="dark"] .ai-asisten-page .dashboardMobileFooterBtn:not(.is-active):hover,
  html[data-theme="dark"] .ai-asisten-page .dashboardMobileFooterBtn:not(.is-active):focus-visible{
    color:#53ebe8 !important;
    background:rgba(15,159,141,.10) !important;
    border-color:rgba(83,235,232,.14) !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .dashboardMobileFooterNav{
    min-height:64px !important;
    height:64px !important;
    padding:7px !important;
    border-radius:22px !important;
    gap:5px !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn{
    min-height:50px !important;
    height:50px !important;
    border-radius:16px !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn i{
    font-size:18.5px !important;
  }

  .ai-asisten-page .dashboardMobileFooterBtn span{
    font-size:9.5px !important;
  }
}

/* =========================================================
   END AI ASISTEN MOBILE BOTTOM NAV DASHBOARD MATCH V3
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN MOBILE USER NAVBAR V4
   =========================================================
   TUJUAN:
   - Mengganti bell + tombol grid pada navbar atas HP dengan
     nama pengguna di kiri dan foto profil di paling kanan.
   - Data user tetap berasal dari Firebase melalui ai-asisten.js.
   - Tidak mengubah fungsi AI, RAG, history, backup, delete,
     sources, escalation, auth, atau desktop navbar.
   ========================================================= */

@media (max-width:740px){
  .ai-asisten-page .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    gap:0 !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    min-width:0 !important;
    max-width:132px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    text-decoration:none !important;
    color:inherit !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    min-width:0 !important;
    max-width:78px !important;
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:right !important;
    color:#17384a !important;
    font-size:10.8px !important;
    line-height:1.15 !important;
    font-weight:850 !important;
    letter-spacing:-.02em !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    flex:0 0 38px !important;
    padding:2px !important;
    border-radius:999px !important;
    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.98),
        rgba(232,247,244,.90)
      ) !important;

    border:1px solid rgba(15,159,141,.16) !important;

    box-shadow:
      5px 5px 12px rgba(17,77,82,.14),
      -4px -4px 10px rgba(255,255,255,.96),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    overflow:hidden !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhoto{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:999px !important;
    background:#eef7f6 !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity:active .aiAsistenMobileUserPhotoWrap{
    transform:scale(.97) !important;
    box-shadow:
      inset 4px 4px 8px rgba(17,77,82,.10),
      inset -4px -4px 8px rgba(255,255,255,.90) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileUserName{
    color:#dff8f6 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    background:
      linear-gradient(
        145deg,
        rgba(16,43,48,.96),
        rgba(8,30,34,.94)
      ) !important;

    border-color:rgba(83,235,232,.18) !important;

    box-shadow:
      5px 5px 12px rgba(0,0,0,.34),
      -4px -4px 10px rgba(255,255,255,.035),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenMobileUserIdentity{
    max-width:118px !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:68px !important;
    font-size:10.2px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    flex-basis:36px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMobileUserIdentity{
    max-width:106px !important;
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:60px !important;
    font-size:9.8px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    flex-basis:34px !important;
  }
}

/* =========================================================
   END AI ASISTEN MOBILE USER NAVBAR V4
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN MOBILE COMPACT CHAT V5
   =========================================================
   TUJUAN:
   - Khusus HP: hilangkan header AI Asisten dari layout agar
     area percakapan lebih lega.
   - Fungsi delete all dipindahkan ke menu tiga titik vertikal.
   - Desktop/tablet besar tetap mempertahankan chat head lama.
   - Tidak mengubah fungsi AI, RAG, Firestore history, backup,
     delete per chat, sources, escalation, auth, dan form.
   ========================================================= */

/* Default desktop: mobile menu tidak tampil. */
.ai-asisten-page .aiAsistenMobileChatMenu{
  display:none;
}

@media (max-width:740px){
  /* Header AI Asisten lama benar-benar keluar dari flow layout HP. */
  .ai-asisten-page .aiAsistenChatHead{
    display:none !important;
  }

  /*
   * Card lebih padat karena tidak lagi membutuhkan ruang header.
   * Messages menjadi elemen visual pertama di dalam card.
   */
  .ai-asisten-page .aiAsistenChatCard{
    position:relative !important;
    padding:10px !important;
    gap:10px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    min-height:390px !important;
    max-height:calc(100dvh - 300px) !important;
    padding:14px 12px !important;
    border-radius:19px !important;
  }

  /*
   * Menu tiga titik mengambang. Tidak mengambil tinggi layout,
   * sehingga area chat tetap maksimal.
   */
  .ai-asisten-page .aiAsistenMobileChatMenu{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    z-index:12 !important;
    display:block !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border:1px solid rgba(15,159,141,.13) !important;
    border-radius:12px !important;
    cursor:pointer !important;

    display:grid !important;
    place-items:center !important;

    background:rgba(255,255,255,.92) !important;
    color:#567082 !important;

    box-shadow:
      7px 7px 16px rgba(15,23,42,.08),
      -5px -5px 14px rgba(255,255,255,.94),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    -webkit-tap-highlight-color:transparent;
    transition:
      transform .16s ease,
      color .16s ease,
      background .16s ease,
      box-shadow .16s ease !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn i{
    font-size:16px !important;
    line-height:1 !important;
    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn:active,
  .ai-asisten-page .aiAsistenMobileMoreBtn[aria-expanded="true"]{
    transform:scale(.97) !important;
    color:#0E9382 !important;
    background:#f4fcfa !important;
    box-shadow:
      inset 4px 4px 8px rgba(15,23,42,.06),
      inset -4px -4px 8px rgba(255,255,255,.90) !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreMenu{
    position:absolute !important;
    top:40px !important;
    right:0 !important;
    width:164px !important;
    padding:6px !important;
    border-radius:15px !important;

    background:rgba(255,255,255,.98) !important;
    border:1px solid rgba(148,163,184,.18) !important;

    box-shadow:
      0 16px 34px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    transform-origin:top right;
  }

  .ai-asisten-page .aiAsistenMobileMoreMenu[hidden]{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn{
    width:100% !important;
    min-height:38px !important;
    padding:0 10px !important;
    border:0 !important;
    border-radius:11px !important;
    cursor:pointer !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;

    background:transparent !important;
    color:#dc2626 !important;
    font-family:inherit !important;
    font-size:11.5px !important;
    line-height:1 !important;
    font-weight:850 !important;
    text-align:left !important;

    transition:
      background .16s ease,
      color .16s ease,
      opacity .16s ease !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn i{
    width:16px !important;
    text-align:center !important;
    font-size:12px !important;
    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn:not(:disabled):hover,
  .ai-asisten-page .aiAsistenMobileDeleteAllBtn:not(:disabled):focus-visible{
    background:rgba(239,68,68,.09) !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn:disabled,
  .ai-asisten-page .aiAsistenMobileDeleteAllBtn[aria-disabled="true"]{
    cursor:not-allowed !important;
    opacity:.42 !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn.is-loading{
    cursor:wait !important;
    opacity:.70 !important;
    pointer-events:none !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn.is-loading i{
    animation:aiDeleteSpin .85s linear infinite !important;
  }

  /*
   * Tombol hapus per bubble existing tetap dipertahankan.
   * Tidak mengubah mekanisme delete per pesan.
   */

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn{
    background:rgba(16,43,48,.96) !important;
    color:#b7d2d5 !important;
    border-color:rgba(83,235,232,.12) !important;
    box-shadow:
      7px 7px 16px rgba(0,0,0,.28),
      -5px -5px 14px rgba(255,255,255,.025),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn[aria-expanded="true"]{
    color:#53ebe8 !important;
    background:rgba(0,214,210,.09) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreMenu{
    background:rgba(11,32,36,.98) !important;
    border-color:rgba(255,255,255,.07) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileDeleteAllBtn{
    color:#f87171 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileDeleteAllBtn:not(:disabled):hover,
  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileDeleteAllBtn:not(:disabled):focus-visible{
    background:rgba(239,68,68,.12) !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenChatCard{
    padding:8px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    min-height:400px !important;
    max-height:calc(100dvh - 288px) !important;
    padding:13px 10px !important;
  }

  .ai-asisten-page .aiAsistenMobileChatMenu{
    top:15px !important;
    right:15px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    border-radius:11px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreMenu{
    top:38px !important;
    width:158px !important;
  }
}

/* =========================================================
   END AI ASISTEN MOBILE COMPACT CHAT V5
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN COMPACT NOTICE V6
   =========================================================
   TUJUAN:
   - Mengubah Catatan Penting menjadi satu baris ringkas.
   - Menghapus kebutuhan judul + icon card besar.
   - Tidak menyentuh fungsi AI, chat, history, delete, sources,
     escalation, auth, maupun JavaScript.
   ========================================================= */

.ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
  min-height:36px !important;
  padding:8px 12px !important;
  border-radius:14px !important;
  gap:8px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.88),
      rgba(236,254,255,.72)
    ) !important;

  border:1px solid rgba(0,172,170,.12) !important;

  box-shadow:
    0 8px 20px rgba(15,23,42,.055),
    inset 0 1px 0 rgba(255,255,255,.94) !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.ai-asisten-page .aiAsistenNoticeCompactIcon{
  flex:0 0 auto !important;
  margin:0 !important;
  color:#0E9382 !important;
  font-size:12px !important;
  line-height:1 !important;
}

.ai-asisten-page .aiAsistenNoticeCompactText{
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;

  color:var(--muted) !important;

  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
  background:
    linear-gradient(
      145deg,
      rgba(16,43,48,.94),
      rgba(0,214,210,.07)
    ) !important;

  border-color:rgba(83,235,232,.13) !important;

  box-shadow:
    0 8px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCompactIcon{
  color:#53ebe8 !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCompactText{
  color:#aac8cc !important;
}

@media (max-width:740px){
  .ai-asisten-page .aiAsistenPageContent{
    gap:10px !important;
  }

  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    min-height:32px !important;
    padding:7px 10px !important;
    border-radius:12px !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactIcon{
    font-size:11px !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:10.2px !important;
    line-height:1.15 !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    min-height:30px !important;
    padding:6px 9px !important;
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:9.6px !important;
  }
}

/* =========================================================
   END AI ASISTEN COMPACT NOTICE V6
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN FULLSCREEN CHAT V7
   =========================================================
   TUJUAN:
   - Khusus HP: menghilangkan navbar/footer bawah.
   - Mengembalikan ruang vertikal untuk area percakapan.
   - Notice dibuat strip kecil fixed di bagian paling bawah layar.
   - Desktop footer tetap dipertahankan.
   - Tidak mengubah fungsi AI, Firebase, RAG, history, backup,
     delete chat, sources, escalation, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){
  /*
   * Override reserved space 88px dari bottom nav versi sebelumnya.
   * Hanya sisakan ruang kecil untuk notice fixed + safe area.
   */
  body.dashboard-page.ai-asisten-page,
  .ai-asisten-page{
    padding-bottom:calc(38px + env(safe-area-inset-bottom)) !important;
  }

  /*
   * Mobile footer dihilangkan sepenuhnya.
   * Footer desktop tetap tersedia di breakpoint > 740px.
   */
  .ai-asisten-page .siteFooter{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  /*
   * Karena bottom nav sudah hilang, percakapan mendapat tambahan
   * ruang sekitar 70-90px dibanding versi sebelumnya.
   */
  .ai-asisten-page .aiAsistenMessages{
    min-height:420px !important;
    max-height:calc(100dvh - 220px) !important;
  }

  /*
   * Sisakan ruang kecil di flow agar notice fixed tidak menutupi
   * bagian terbawah konten/form pada layar pendek.
   */
  .ai-asisten-page .aiAsistenPageContent{
    padding-bottom:34px !important;
  }

  /*
   * Notice dipasang ke bagian paling bawah viewport.
   * Sangat tipis, tidak mengambil area percakapan utama.
   */
  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    position:fixed !important;
    left:max(10px, env(safe-area-inset-left)) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
    bottom:max(6px, env(safe-area-inset-bottom)) !important;
    z-index:50 !important;

    width:auto !important;
    max-width:430px !important;
    min-height:27px !important;

    margin:0 auto !important;
    padding:5px 10px !important;
    gap:6px !important;
    border-radius:11px !important;

    background:rgba(249,254,253,.97) !important;
    border:1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 8px 22px rgba(15,23,42,.10),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactIcon{
    font-size:9.5px !important;
    color:#0E9382 !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:750 !important;
    letter-spacing:-.012em !important;
    color:#607786 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    background:rgba(11,32,36,.97) !important;
    border-color:rgba(83,235,232,.13) !important;
    box-shadow:
      0 8px 22px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCompactIcon{
    color:#53ebe8 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenNoticeCompactText{
    color:#aac8cc !important;
  }
}

@media (max-width:420px){
  body.dashboard-page.ai-asisten-page,
  .ai-asisten-page{
    padding-bottom:calc(35px + env(safe-area-inset-bottom)) !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    min-height:430px !important;
    max-height:calc(100dvh - 210px) !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    padding-bottom:31px !important;
  }

  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    left:max(8px, env(safe-area-inset-left)) !important;
    right:max(8px, env(safe-area-inset-right)) !important;
    bottom:max(5px, env(safe-area-inset-bottom)) !important;
    min-height:25px !important;
    padding:4px 9px !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:9.1px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMessages{
    min-height:400px !important;
    max-height:calc(100dvh - 205px) !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:8.8px !important;
  }
}

/* =========================================================
   END AI ASISTEN FULLSCREEN CHAT V7
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN CENTERED NOTICE V8
   =========================================================
   TUJUAN:
   - Notice fixed bawah benar-benar berada di tengah layar.
   - Lebar mengikuti isi, bukan melebar penuh.
   - Ikon + teks tampil sebagai satu grup yang centered.
   - Tidak mengubah fungsi AI, chat, history, delete, sources,
     escalation, Firebase, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){
  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;

    width:max-content !important;
    max-width:calc(100vw - 20px) !important;

    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactText{
    width:auto !important;
    max-width:100% !important;
    text-align:center !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;

    width:max-content !important;
    max-width:calc(100vw - 16px) !important;
  }
}

/* =========================================================
   END AI ASISTEN CENTERED NOTICE V8
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN PROFESSIONAL CHAT + NAVBAR MENU V9
   =========================================================
   TUJUAN:
   - Tombol tiga titik dipindah ke navbar atas, kanan foto profil.
   - Dropdown hapus chat tetap memakai ID/function existing.
   - Area chat HP dibuat lebih menyerupai aplikasi chat profesional.
   - Messages mengisi ruang utama, input menetap di dasar card.
   - Notice tetap centered dan berjarak 15px dari batas bawah layar.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources, escalation, auth, maupun logic JavaScript.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     MOBILE NAVBAR ACTIONS
  ------------------------------------------------------- */
  .ai-asisten-page .dashboardMobileBrandHeader{
    position:relative !important;
    z-index:70 !important;
    overflow:visible !important;
  }

  .ai-asisten-page .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    overflow:visible !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    flex:0 1 auto !important;
  }

  /*
   * Wrapper menu sekarang berada di navbar, bukan di chat card.
   * Position relative membuat dropdown menempel tepat di tombol.
   */
  .ai-asisten-page .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    z-index:90 !important;

    flex:0 0 auto !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:12px !important;

    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.98),
        rgba(238,248,247,.94)
      ) !important;

    color:#577181 !important;
    border:1px solid rgba(15,159,141,.13) !important;

    box-shadow:
      4px 4px 10px rgba(17,77,82,.12),
      -3px -3px 9px rgba(255,255,255,.96),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn i{
    font-size:15px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn:active,
  .ai-asisten-page .aiAsistenMobileMoreBtn[aria-expanded="true"]{
    color:#0E9382 !important;
    background:#f2fbf9 !important;
    box-shadow:
      inset 3px 3px 7px rgba(17,77,82,.08),
      inset -3px -3px 7px rgba(255,255,255,.92) !important;
  }

  /*
   * Dropdown sekarang jatuh dari sisi kanan navbar.
   * Dibuat ringkas seperti contextual menu aplikasi chat.
   */
  .ai-asisten-page .aiAsistenMobileMoreMenu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:0 !important;
    left:auto !important;

    width:168px !important;
    padding:6px !important;
    border-radius:14px !important;

    background:rgba(255,255,255,.985) !important;
    border:1px solid rgba(148,163,184,.18) !important;

    box-shadow:
      0 16px 34px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    z-index:100 !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreMenu[hidden]{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenMobileDeleteAllBtn{
    min-height:38px !important;
    border-radius:10px !important;
    font-size:11.3px !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn{
    background:
      linear-gradient(
        145deg,
        rgba(16,43,48,.96),
        rgba(8,30,34,.94)
      ) !important;
    color:#b7d2d5 !important;
    border-color:rgba(83,235,232,.14) !important;
    box-shadow:
      4px 4px 10px rgba(0,0,0,.28),
      -3px -3px 9px rgba(255,255,255,.025),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreMenu{
    background:rgba(11,32,36,.985) !important;
    border-color:rgba(255,255,255,.07) !important;
  }


  /* -------------------------------------------------------
     PROFESSIONAL MOBILE CHAT LAYOUT
  ------------------------------------------------------- */

  /*
   * Hilangkan reserved padding lama dari bottom navbar.
   * Notice fixed punya ruang sendiri.
   */
  body.dashboard-page.ai-asisten-page,
  .ai-asisten-page{
    padding-bottom:0 !important;
  }

  /*
   * Section memakai tinggi viewport secara proporsional.
   * 15px menjadi batas visual bawah halaman.
   */
  .ai-asisten-page .aiAsistenSectionInner{
    min-height:calc(
      100dvh - 15px - env(safe-area-inset-bottom)
    ) !important;

    display:flex !important;
    flex-direction:column !important;
  }

  .ai-asisten-page .dashboardMobileBrandHeader{
    flex:0 0 auto !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    flex:1 1 auto !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    /*
     * 44px disediakan untuk notice centered di bawah.
     * Tidak ada lagi ruang kosong besar seperti bottom nav sebelumnya.
     */
    padding:10px 0 44px !important;
    gap:0 !important;
  }

  .ai-asisten-page .aiAsistenChatCard{
    flex:1 1 auto !important;
    min-height:0 !important;

    position:relative !important;
    display:flex !important;
    flex-direction:column !important;

    padding:9px !important;
    gap:9px !important;

    border-radius:22px !important;

    background:
      radial-gradient(circle at 100% 0%, rgba(0,172,170,.065), transparent 30%),
      radial-gradient(circle at 0% 100%, rgba(195,218,62,.055), transparent 28%),
      rgba(255,255,255,.88) !important;

    border:1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 14px 32px rgba(15,23,42,.075),
      inset 0 1px 0 rgba(255,255,255,.96) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:hidden !important;
  }

  /*
   * Header desktop tetap ada di DOM untuk fungsi status,
   * tetapi tidak mengambil ruang pada HP.
   */
  .ai-asisten-page .aiAsistenChatHead{
    display:none !important;
  }

  /*
   * Messages menjadi area utama yang fleksibel.
   * Tidak lagi memakai min-height besar yang memaksa layout.
   */
  .ai-asisten-page .aiAsistenMessages{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;

    padding:14px 11px 16px !important;
    border-radius:17px !important;

    scroll-padding-top:14px !important;
    scroll-padding-bottom:18px !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }

  /*
   * Bubble sedikit lebih lapang namun tetap efisien di HP.
   */
  .ai-asisten-page .aiAsistenMessage{
    gap:8px !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:88% !important;
    padding:11px 13px !important;
    border-radius:17px !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:82% !important;
    border-bottom-right-radius:8px !important;
  }

  .ai-asisten-page .aiAsistenMessage--bot .aiAsistenBubble{
    border-bottom-left-radius:8px !important;
  }

  .ai-asisten-page .aiAsistenBubble p{
    font-size:12.5px !important;
    line-height:1.60 !important;
  }

  /*
   * Form menjadi composer yang stabil di dasar chat card.
   */
  .ai-asisten-page .aiAsistenForm{
    flex:0 0 auto !important;
    position:relative !important;
    bottom:auto !important;

    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:8px !important;

    padding:2px 0 0 !important;
    margin:0 !important;
  }

  .ai-asisten-page .aiAsistenInputWrap{
    min-height:44px !important;
    height:44px !important;
    padding:0 13px !important;
    border-radius:15px !important;
  }

  .ai-asisten-page .aiAsistenInput{
    font-size:12.8px !important;
  }

  .ai-asisten-page .aiAsistenSendBtn{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:44px !important;
    min-height:44px !important;
    border-radius:15px !important;
  }

  /*
   * Sumber referensi tetap muncul di atas composer bila tersedia.
   */
  .ai-asisten-page .aiAsistenSources{
    flex:0 0 auto !important;
    margin:0 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenChatCard{
    background:
      radial-gradient(circle at 100% 0%, rgba(0,214,210,.09), transparent 30%),
      radial-gradient(circle at 0% 100%, rgba(195,218,62,.045), transparent 28%),
      rgba(11,32,36,.90) !important;
    border-color:rgba(83,235,232,.11) !important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }


  /* -------------------------------------------------------
     NOTICE: 15PX FROM BOTTOM
  ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    bottom:calc(
      15px + env(safe-area-inset-bottom)
    ) !important;
    z-index:60 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    max-width:104px !important;
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:58px !important;
    font-size:9.9px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    border-radius:11px !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    padding-top:8px !important;
    padding-bottom:42px !important;
  }

  .ai-asisten-page .aiAsistenChatCard{
    padding:8px !important;
    gap:8px !important;
    border-radius:20px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    padding:12px 9px 14px !important;
    border-radius:16px !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:90% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:84% !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMobileUserIdentity{
    max-width:92px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:48px !important;
    font-size:9.4px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:33px !important;
    height:33px !important;
    min-width:33px !important;
    min-height:33px !important;
    flex-basis:33px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    min-height:31px !important;
  }

  .ai-asisten-page .aiAsistenMessageIcon{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:94% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:88% !important;
  }
}

/* =========================================================
   END AI ASISTEN PROFESSIONAL CHAT + NAVBAR MENU V9
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN MOBILE KEYBOARD NATURAL V11
   =========================================================
   TUJUAN:
   - Menghindari double compensation antara browser resize
     dan perhitungan VisualViewport manual.
   - Composer tetap berada di flow chat, tidak dipaksa fixed/top.
   - Saat keyboard aktif, browser mengecilkan visible viewport
     dan JS hanya memastikan composer masuk ke area terlihat.
   - Notice disembunyikan sementara ketika input aktif.
   - Font input HP 16px untuk mencegah auto-zoom iOS Safari.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources, escalation, auth, atau data percakapan.
   ========================================================= */

@media (max-width:740px){

  /*
   * KUNCI UTAMA:
   * Jangan pernah memindahkan composer menggunakan fixed/top.
   * Form tetap menjadi bagian paling bawah dari chat card.
   */
  .ai-asisten-page .aiAsistenForm,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    position:relative !important;
    inset:auto !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:2px 0 0 !important;

    z-index:5 !important;

    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:8px !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    scroll-margin-bottom:12px !important;
  }

  /*
   * Saat keyboard aktif, ruang notice tidak dibutuhkan.
   * Card chat dapat memakai ruang visible viewport yang tersedia.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenPageContent{
    padding-bottom:8px !important;
  }

  /*
   * Notice fixed sementara hilang agar tidak bertabrakan dengan
   * composer atau keyboard.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /*
   * Jangan menambah padding sebesar composer seperti V10.
   * Messages tetap fleksibel dan scrollable.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenMessages{
    padding-bottom:16px !important;
    scroll-padding-bottom:18px !important;
  }

  /*
   * 16px mencegah Safari/iOS melakukan auto-zoom ketika input fokus,
   * yang dapat membuat posisi viewport terlihat meloncat.
   */
  .ai-asisten-page .aiAsistenInput{
    font-size:16px !important;
    line-height:1.2 !important;
  }

  .ai-asisten-page .aiAsistenInputWrap,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap{
    min-height:44px !important;
    height:44px !important;
  }

  .ai-asisten-page .aiAsistenSendBtn,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenSendBtn{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:44px !important;
    min-height:44px !important;
  }

  /*
   * Fokus tetap terlihat profesional tanpa membuat wrapper composer
   * menjadi floating card besar.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap:focus-within{
    border-color:rgba(0,172,170,.34) !important;
    box-shadow:
      0 0 0 3px rgba(0,172,170,.09),
      inset 6px 6px 11px rgba(15,23,42,.035),
      inset -6px -6px 11px rgba(255,255,255,.96) !important;
  }

  html[data-theme="dark"]
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap:focus-within{
    border-color:rgba(0,214,210,.34) !important;
    box-shadow:
      0 0 0 3px rgba(0,214,210,.09),
      inset 6px 6px 11px rgba(0,0,0,.48),
      inset -6px -6px 11px rgba(255,255,255,.045) !important;
  }
}

/* =========================================================
   END AI ASISTEN MOBILE KEYBOARD NATURAL V11
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN WHATSAPP OPEN CHAT V12
   =========================================================
   TUJUAN:
   - Khusus HP: menghilangkan visual card pembungkus percakapan.
   - Struktur .aiAsistenChatCard tetap ada agar DOM/fungsi stabil.
   - Messages + composer terasa langsung berada di area aplikasi.
   - Mengurangi padding/radius/shadow berlapis agar ruang lebih lega.
   - Keyboard-safe natural V11 tetap dipertahankan.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources, escalation, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     PAGE / CONTENT: LEBIH TERBUKA
  ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenPageContent{
    flex:1 1 auto !important;
    min-height:0 !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    /*
     * Hanya sisakan ruang untuk notice fixed bawah.
     * Ruang horizontal outer card dihapus.
     */
    padding:6px 0 44px !important;
    gap:0 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /*
   * OUTER CHAT CARD:
   * Tetap ada di DOM, tetapi seluruh visual card dinetralkan.
   * Hasil visual seperti layar chat aplikasi, bukan card di dalam card.
   */
  .ai-asisten-page .aiAsistenChatCard{
    flex:1 1 auto !important;
    min-height:0 !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;
    gap:8px !important;

    display:flex !important;
    flex-direction:column !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenChatCard{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }


  /* -------------------------------------------------------
     AREA PERCAKAPAN
     Dibuat lebih luas seperti aplikasi chat.
  ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMessages{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:14px 10px 16px !important;

    /*
     * Hanya messages yang memiliki surface ringan.
     * Radius lebih kecil agar tidak terlihat seperti nested card besar.
     */
    border-radius:14px !important;

    border:1px solid rgba(15,159,141,.09) !important;

    box-shadow:
      inset 4px 4px 10px rgba(15,23,42,.025),
      inset -4px -4px 10px rgba(255,255,255,.62) !important;

    scroll-padding-top:14px !important;
    scroll-padding-bottom:18px !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMessages{
    border-color:rgba(83,235,232,.08) !important;
    box-shadow:
      inset 4px 4px 10px rgba(0,0,0,.24),
      inset -4px -4px 10px rgba(255,255,255,.018) !important;
  }


  /* -------------------------------------------------------
     BUBBLE CHAT
     Sedikit lebih lebar agar ruang horizontal maksimal.
  ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMessage{
    width:100% !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:91% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:86% !important;
  }

  .ai-asisten-page .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width:91% !important;
  }


  /* -------------------------------------------------------
     COMPOSER / INPUT
     Berada langsung di bawah messages tanpa outer card.
  ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenForm,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    flex:0 0 auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:8px !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    scroll-margin-bottom:10px !important;
  }

  .ai-asisten-page .aiAsistenInputWrap{
    min-height:46px !important;
    height:46px !important;

    padding:0 14px !important;

    border-radius:17px !important;

    /*
     * Composer sendiri tetap punya card ringan seperti aplikasi chat.
     */
    background:rgba(255,255,255,.96) !important;

    border:1px solid rgba(15,159,141,.11) !important;

    box-shadow:
      0 7px 18px rgba(15,23,42,.065),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap{
    background:rgba(16,43,48,.96) !important;
    border-color:rgba(83,235,232,.10) !important;
    box-shadow:
      0 8px 20px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .ai-asisten-page .aiAsistenSendBtn{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:46px !important;
    min-height:46px !important;

    border-radius:17px !important;
  }


  /* -------------------------------------------------------
     SOURCES
     Jika muncul, tetap proporsional tanpa outer card.
  ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSources{
    flex:0 0 auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    border-radius:14px !important;
  }


  /* -------------------------------------------------------
     KEYBOARD ACTIVE
     Pertahankan perilaku natural V11.
  ------------------------------------------------------- */
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenPageContent{
    padding-top:4px !important;
    padding-bottom:6px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenMessages{
    padding-bottom:14px !important;
    scroll-padding-bottom:16px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap{
    min-height:46px !important;
    height:46px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenSendBtn{
    height:46px !important;
    min-height:46px !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenPageContent{
    padding-top:4px !important;
    padding-bottom:42px !important;
  }

  .ai-asisten-page .aiAsistenChatCard{
    padding:0 !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    padding:12px 8px 14px !important;
    border-radius:13px !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:93% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:88% !important;
  }

  .ai-asisten-page .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width:93% !important;
  }
}

@media (max-width:380px){
  /*
   * Di layar sangat sempit, ikon bot boleh tetap mengikuti rule lama
   * yang menyembunyikannya sehingga bubble memperoleh ruang maksimal.
   */
  .ai-asisten-page .aiAsistenBubble{
    max-width:96% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:92% !important;
  }

  .ai-asisten-page .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width:96% !important;
  }
}

/* =========================================================
   END AI ASISTEN WHATSAPP OPEN CHAT V12
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN CLEAN CHAT V13
   =========================================================
   TUJUAN:
   - Khusus HP: menghilangkan seluruh visual card dari
     #aiAsistenMessages.
   - Messages tetap menjadi scroll container agar fungsi chat aman.
   - Hanya bubble percakapan yang menjadi elemen visual.
   - Composer tetap menggunakan keyboard natural V11.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources, escalation, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /*
   * AREA CHAT BENAR-BENAR CLEAN:
   * Tidak ada card, border, radius, shadow, atau surface.
   */
  .ai-asisten-page .aiAsistenMessages{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:10px 4px 14px !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    scroll-padding-top:10px !important;
    scroll-padding-bottom:16px !important;

    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMessages{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /*
   * Scrollbar dibuat sangat minimal agar tidak terasa seperti
   * container terpisah.
   */
  .ai-asisten-page .aiAsistenMessages::-webkit-scrollbar{
    width:4px !important;
  }

  .ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-track{
    background:transparent !important;
  }

  .ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-thumb{
    background:rgba(100,116,139,.22) !important;
    border-radius:999px !important;
  }

  /*
   * Bubble menjadi satu-satunya surface percakapan.
   * Sedikit tambah ruang horizontal agar komposisi lebih natural.
   */
  .ai-asisten-page .aiAsistenMessage{
    width:100% !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:92% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:86% !important;
  }

  .ai-asisten-page .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width:92% !important;
  }

  /*
   * Karena messages tidak lagi memiliki padding/card tebal,
   * composer dapat mendekat secara proporsional ke area chat.
   */
  .ai-asisten-page .aiAsistenChatCard{
    gap:6px !important;
  }

  /*
   * Placeholder simple, tetap 16px dari V11 untuk mencegah
   * auto zoom Safari ketika fokus.
   */
  .ai-asisten-page .aiAsistenInput::placeholder{
    opacity:.58 !important;
    font-weight:650 !important;
  }

  /*
   * Keyboard aktif: tetap clean tanpa menambah surface lagi.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenMessages{
    padding:8px 4px 12px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    scroll-padding-bottom:14px !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenMessages{
    padding-left:2px !important;
    padding-right:2px !important;
  }

  .ai-asisten-page .aiAsistenBubble{
    max-width:94% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:89% !important;
  }

  .ai-asisten-page .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width:94% !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenBubble{
    max-width:97% !important;
  }

  .ai-asisten-page .aiAsistenMessage--user .aiAsistenBubble{
    max-width:93% !important;
  }

  .ai-asisten-page .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child .aiAsistenBubble{
    max-width:97% !important;
  }
}

/* =========================================================
   END AI ASISTEN CLEAN CHAT V13
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN MOBILE SCROLL FIX V14
   =========================================================
   TUJUAN:
   - Memperbaiki area chat HP yang terasa macet/tidak bisa scroll.
   - Membuat pola layout seperti aplikasi chat:
       navbar tetap
       messages = area scroll utama
       sources = panel tambahan
       composer = tetap di bawah area chat
   - Mengunci rantai flex ke tinggi viewport agar
     #aiAsistenMessages benar-benar memiliki tinggi terbatas.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources logic, escalation, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     VIEWPORT CHAIN
     ------------------------------------------------------- */

  html,
  body.ai-asisten-page{
    min-height:100% !important;
  }

  body.ai-asisten-page{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action:auto !important;
  }

  /*
   * KUNCI UTAMA:
   * Sebelumnya hanya min-height sehingga messages ikut tumbuh
   * mengikuti seluruh isi dan tidak mempunyai scroll range yang stabil.
   *
   * Sekarang section memiliki tinggi viewport yang nyata.
   */
  .ai-asisten-page .aiAsistenSectionInner{
    width:100% !important;
    max-width:100% !important;

    height:calc(
      100dvh - 15px - env(safe-area-inset-bottom)
    ) !important;

    min-height:0 !important;
    max-height:calc(
      100dvh - 15px - env(safe-area-inset-bottom)
    ) !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
  }

  .ai-asisten-page .dashboardMobileBrandHeader{
    flex:0 0 auto !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    padding:4px 0 42px !important;
    gap:0 !important;
  }

  .ai-asisten-page .aiAsistenChatCard{
    flex:1 1 auto !important;

    width:100% !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;
    max-height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    margin:0 !important;
    padding:0 !important;
    gap:6px !important;

    overflow:hidden !important;

    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }


  /* -------------------------------------------------------
     MESSAGES = SATU-SATUNYA SCROLL VIEW UTAMA
     ------------------------------------------------------- */

  .ai-asisten-page .aiAsistenMessages{
    flex:1 1 0 !important;

    /*
     * Sangat penting pada flex child yang overflow:
     * min-height:0 mengizinkan child benar-benar mengecil
     * dan menghasilkan scroll range.
     */
    min-height:0 !important;
    height:0 !important;
    max-height:none !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:10px 4px 16px !important;

    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    /*
     * Touch scrolling mobile.
     */
    touch-action:pan-y !important;
    overscroll-behavior-x:none !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;

    scroll-behavior:auto !important;
    scroll-padding-top:10px !important;
    scroll-padding-bottom:18px !important;

    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    scrollbar-width:thin;
    scrollbar-color:rgba(100,116,139,.22) transparent;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMessages{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenMessages::-webkit-scrollbar{
    width:4px !important;
  }

  .ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-track{
    background:transparent !important;
  }

  .ai-asisten-page .aiAsistenMessages::-webkit-scrollbar-thumb{
    border-radius:999px !important;
    background:rgba(100,116,139,.22) !important;
  }


  /* -------------------------------------------------------
     SOURCES
     Panel sumber tetap di luar messages.
     Saat collapsed hanya memakai tinggi yang dibutuhkan.
     Saat expanded dibatasi agar tidak memakan seluruh chat.
     ------------------------------------------------------- */

  .ai-asisten-page .aiAsistenSources{
    flex:0 0 auto !important;
    min-height:0 !important;
    max-height:42dvh !important;
    overflow:hidden !important;
    margin:0 !important;
  }

  .ai-asisten-page .aiAsistenSources.is-expanded{
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .ai-asisten-page .aiAsistenSources[hidden]{
    display:none !important;
  }


  /* -------------------------------------------------------
     COMPOSER
     ------------------------------------------------------- */

  .ai-asisten-page .aiAsistenForm,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    flex:0 0 auto !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;
    inset:auto !important;

    z-index:5 !important;

    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:8px !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
  }


  /* -------------------------------------------------------
     KEYBOARD ACTIVE
     interactive-widget=resizes-content akan mengecilkan 100dvh.
     Rantai flex akan ikut mengecil secara natural.
     ------------------------------------------------------- */

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenSectionInner{
    height:calc(
      100dvh - 6px - env(safe-area-inset-bottom)
    ) !important;

    max-height:calc(
      100dvh - 6px - env(safe-area-inset-bottom)
    ) !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenPageContent{
    padding-bottom:4px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenMessages{
    flex:1 1 0 !important;
    height:0 !important;
    min-height:0 !important;

    padding:8px 4px 12px !important;

    overflow-y:auto !important;
    touch-action:pan-y !important;

    scroll-padding-bottom:14px !important;
  }

  /*
   * Notice memang disembunyikan oleh V11 ketika keyboard aktif.
   * Pastikan tidak mengambil interaksi/ruang.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenNoticeCard.aiAsistenNoticeCard--compact{
    pointer-events:none !important;
  }
}


@media (max-width:420px){
  .ai-asisten-page .aiAsistenSectionInner{
    height:calc(
      100dvh - 12px - env(safe-area-inset-bottom)
    ) !important;

    max-height:calc(
      100dvh - 12px - env(safe-area-inset-bottom)
    ) !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    padding-top:3px !important;
    padding-bottom:40px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    padding-left:2px !important;
    padding-right:2px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenSectionInner{
    height:calc(
      100dvh - 4px - env(safe-area-inset-bottom)
    ) !important;

    max-height:calc(
      100dvh - 4px - env(safe-area-inset-bottom)
    ) !important;
  }
}


/* =========================================================
   END AI ASISTEN MOBILE SCROLL FIX V14
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN NAVBAR EDGE + TOP FADE V15
   =========================================================
   TUJUAN:
   - Memperbaiki navbar HP yang terpotong di sisi kiri/kanan.
   - Penyebab: .aiAsistenSectionInner V14 memakai overflow:hidden,
     sementara navbar dashboard memakai overhang horizontal.
   - Navbar kembali benar-benar melekat ke tepi viewport.
   - Area percakapan sedikit masuk ke belakang navbar.
   - Bubble/text yang discroll ke atas memudar halus sebelum
     menghilang di belakang navbar.
   - Scroll V14 dan keyboard natural V11 tetap dipertahankan.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources, escalation, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     1. FIX FRAME NAVBAR
     ------------------------------------------------------- */

  /*
   * Jangan clip overhang navbar.
   * Chat tetap aman karena clipping/scroll ditangani oleh
   * .aiAsistenPageContent dan .aiAsistenMessages.
   */
  .ai-asisten-page .aiAsistenSectionInner{
    overflow:visible !important;
  }

  /*
   * Gunakan viewport width agar navbar tetap edge-to-edge
   * walaupun padding parent dashboard berubah di kemudian hari.
   */
  .ai-asisten-page .dashboardMobileBrandHeader{
    width:100vw !important;
    max-width:100vw !important;

    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;

    flex:0 0 auto !important;

    position:relative !important;
    z-index:80 !important;

    background:#ffffff !important;
    background-image:none !important;

    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;

    overflow:visible !important;

    box-shadow:
      0 7px 18px rgba(16,70,80,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .dashboardMobileBrandHeader{
    background:#102b30 !important;
    background-image:none !important;

    box-shadow:
      0 8px 20px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }


  /* -------------------------------------------------------
     2. CONTENT MASUK SEDIKIT KE BELAKANG NAVBAR
     ------------------------------------------------------- */

  /*
   * Overlap 22px membuat bagian paling atas scroll area berada
   * secara fisik di belakang navbar. Karena navbar z-index 80,
   * bubble akan lewat di bawah navbar, bukan berhenti mendadak.
   */
  .ai-asisten-page .aiAsistenPageContent{
    position:relative !important;
    z-index:10 !important;

    margin-top:-22px !important;

    /*
     * Padding bawah tetap mempertahankan ruang notice.
     * Padding atas 0 karena ruang awal diberikan langsung pada
     * messages agar fade bekerja natural.
     */
    padding-top:0 !important;
  }

  .ai-asisten-page .aiAsistenChatCard{
    position:relative !important;
    z-index:1 !important;
  }


  /* -------------------------------------------------------
     3. TOP FADE PADA AREA PESAN
     ------------------------------------------------------- */

  .ai-asisten-page .aiAsistenMessages{
    /*
     * Initial bubble tetap nyaman di bawah navbar.
     * Saat user scroll, bubble bergerak masuk ke zona fade.
     */
    padding-top:34px !important;

    /*
     * Fade hanya di bagian atas.
     * 0-22px berada di area overlap belakang navbar,
     * lalu opacity menjadi penuh secara bertahap.
     */
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.16) 8px,
        rgba(0,0,0,.52) 18px,
        rgba(0,0,0,.86) 27px,
        #000000 36px,
        #000000 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.16) 8px,
        rgba(0,0,0,.52) 18px,
        rgba(0,0,0,.86) 27px,
        #000000 36px,
        #000000 100%
      ) !important;

    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;

    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;

    /*
     * Tidak ubah mekanisme scroll V14.
     */
    overflow-y:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /*
   * Pastikan bubble awal tidak tertutup navbar saat halaman baru
   * dibuka, tetapi tetap dapat masuk ke fade saat discroll.
   */
  .ai-asisten-page .aiAsistenMessages > .aiAsistenMessage:first-child{
    scroll-margin-top:36px !important;
  }


  /* -------------------------------------------------------
     4. KEYBOARD ACTIVE
     ------------------------------------------------------- */

  /*
   * Saat keyboard aktif tetap gunakan overlap yang lebih kecil,
   * supaya composer mendapat ruang maksimum namun fade atas tetap ada.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenPageContent{
    margin-top:-16px !important;
    padding-top:0 !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenMessages{
    padding-top:28px !important;

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.30) 8px,
        rgba(0,0,0,.72) 18px,
        #000000 28px,
        #000000 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.30) 8px,
        rgba(0,0,0,.72) 18px,
        #000000 28px,
        #000000 100%
      ) !important;
  }
}


@media (max-width:420px){
  .ai-asisten-page .dashboardMobileBrandHeader{
    width:100vw !important;
    max-width:100vw !important;

    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }

  .ai-asisten-page .aiAsistenPageContent{
    margin-top:-20px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    padding-top:32px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenPageContent{
    margin-top:-14px !important;
  }
}


/* =========================================================
   END AI ASISTEN NAVBAR EDGE + TOP FADE V15
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN NOTICE REGULAR V16
   =========================================================
   TUJUAN:
   - Notice dibuat lebih singkat dan profesional.
   - Typography regular, tidak bold.
   - Posisi centered + bottom spacing existing tetap dipertahankan.
   - Tidak mengubah navbar, top fade, scroll, keyboard,
     AI, RAG, Firebase, history, backup, delete, sources,
     escalation, auth, atau JavaScript.
   ========================================================= */

.ai-asisten-page .aiAsistenNoticeCompactText{
  font-weight:400 !important;
  letter-spacing:0 !important;
  font-style:normal !important;
}

@media (max-width:740px){
  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:9.4px !important;
    line-height:1.15 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
  }

  .ai-asisten-page .aiAsistenNoticeCompactIcon{
    font-size:9px !important;
    opacity:.88 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:9px !important;
    font-weight:400 !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenNoticeCompactText{
    font-size:8.7px !important;
    font-weight:400 !important;
  }
}

/* =========================================================
   END AI ASISTEN NOTICE REGULAR V16
   ========================================================= */

/* =========================================================
   BUMIL KU - AI ASISTEN MOBILE COMPOSER POLISH V17
   =========================================================
   TUJUAN:
   - Memberi ruang aman di sekeliling input + tombol kirim agar
     shadow tidak terpotong oleh batas area chat.
   - Membuat composer lebih profesional, bersih, dan proporsional.
   - Menjaga keyboard natural V11, scroll V14, navbar/fade V15,
     serta notice V16 tetap utuh.
   - Tidak mengubah HTML structure, AI, RAG, Firebase, history,
     backup, delete, sources, escalation, auth, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     SAFE FRAME COMPOSER
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenForm,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:100% !important;

    /*
     * Safe inset untuk shadow:
     * - 10px kiri/kanan
     * - 6px atas
     * - 9px bawah
     *
     * Shadow input dan tombol sekarang tidak lagi menyentuh
     * batas clipping .aiAsistenChatCard.
     */
    padding:6px 10px 9px !important;
    margin:0 !important;

    grid-template-columns:minmax(0,1fr) 50px !important;
    gap:10px !important;

    align-items:center !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    overflow:visible !important;
  }

  /* -------------------------------------------------------
     INPUT WRAPPER
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenInputWrap,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap{
    min-height:48px !important;
    height:48px !important;

    padding:0 15px !important;
    gap:10px !important;

    border-radius:18px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.985),
        rgba(249,253,253,.965)
      ) !important;

    border:1px solid rgba(15,159,141,.115) !important;

    /*
     * Outer shadow lebih halus dan punya ruang aman dari padding form.
     */
    box-shadow:
      0 7px 18px rgba(16,70,80,.075),
      0 2px 5px rgba(15,23,42,.035),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease !important;
  }

  .ai-asisten-page .aiAsistenInputWrap i{
    flex:0 0 auto !important;
    font-size:14px !important;
    color:#0AA59C !important;
    opacity:.96 !important;
  }

  .ai-asisten-page .aiAsistenInput{
    min-width:0 !important;

    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:600 !important;

    color:#17384A !important;
  }

  .ai-asisten-page .aiAsistenInput::placeholder{
    color:#718696 !important;
    opacity:.88 !important;
    font-weight:500 !important;
    letter-spacing:-.01em !important;
  }

  .ai-asisten-page .aiAsistenInputWrap:focus-within,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap:focus-within{
    background:#FFFFFF !important;
    border-color:rgba(0,172,170,.28) !important;

    /*
     * Focus glow tetap berada di dalam safe inset form.
     */
    box-shadow:
      0 0 0 3px rgba(0,172,170,.075),
      0 9px 20px rgba(16,70,80,.085),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }


  /* -------------------------------------------------------
     SEND BUTTON
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSendBtn,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenSendBtn{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;

    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;

    padding:0 !important;

    border-radius:17px !important;

    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        #20B8AA 0%,
        #079C91 58%,
        #087F78 100%
      ) !important;

    border:1px solid rgba(5,137,127,.20) !important;

    /*
     * Shadow lebih pendek dan proporsional.
     * Safe inset kanan form mencegah shadow terpotong.
     */
    box-shadow:
      0 8px 18px rgba(0,172,170,.20),
      0 3px 7px rgba(8,127,120,.12),
      inset 0 1px 0 rgba(255,255,255,.28) !important;

    transform:none !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease,
      filter .16s ease !important;
  }

  .ai-asisten-page .aiAsistenSendBtn i{
    margin:0 !important;
    font-size:16px !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    transform:translateX(-1px) !important;
  }

  .ai-asisten-page .aiAsistenSendBtn:hover{
    transform:translateY(-1px) !important;
    filter:none !important;

    box-shadow:
      0 10px 21px rgba(0,172,170,.22),
      0 4px 8px rgba(8,127,120,.13),
      inset 0 1px 0 rgba(255,255,255,.30) !important;
  }

  .ai-asisten-page .aiAsistenSendBtn:active{
    transform:translateY(0) scale(.985) !important;

    box-shadow:
      0 4px 10px rgba(0,172,170,.16),
      inset 3px 3px 7px rgba(0,0,0,.10),
      inset -2px -2px 6px rgba(255,255,255,.10) !important;
  }

  .ai-asisten-page .aiAsistenSendBtn:focus-visible{
    outline:none !important;

    box-shadow:
      0 0 0 3px rgba(0,172,170,.11),
      0 9px 20px rgba(0,172,170,.20),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap,
  html[data-theme="dark"]
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap{
    background:
      linear-gradient(
        145deg,
        rgba(16,43,48,.985),
        rgba(11,32,36,.97)
      ) !important;

    border-color:rgba(83,235,232,.11) !important;

    box-shadow:
      0 8px 19px rgba(0,0,0,.26),
      0 2px 5px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenInput{
    color:#E8FBF8 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenInput::placeholder{
    color:#9AB5BA !important;
    opacity:.80 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap i{
    color:#53EBE8 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenInputWrap:focus-within,
  html[data-theme="dark"]
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap:focus-within{
    background:rgba(16,43,48,.995) !important;
    border-color:rgba(83,235,232,.25) !important;

    box-shadow:
      0 0 0 3px rgba(83,235,232,.07),
      0 9px 20px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }


  /* -------------------------------------------------------
     KEYBOARD ACTIVE
     Safe inset dipertahankan agar composer tetap tidak terpotong.
     ------------------------------------------------------- */
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    padding:5px 10px 8px !important;
  }
}


@media (max-width:420px){
  .ai-asisten-page .aiAsistenForm,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    padding:5px 9px 8px !important;
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:9px !important;
  }

  .ai-asisten-page .aiAsistenInputWrap,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenInputWrap{
    min-height:46px !important;
    height:46px !important;
    padding:0 14px !important;
    border-radius:17px !important;
  }

  .ai-asisten-page .aiAsistenSendBtn,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenSendBtn{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    border-radius:16px !important;
  }

  .ai-asisten-page .aiAsistenSendBtn i{
    font-size:15.5px !important;
  }
}


@media (max-width:380px){
  .ai-asisten-page .aiAsistenForm,
  body.ai-asisten-page.ai-mobile-keyboard-open .aiAsistenForm{
    padding-left:8px !important;
    padding-right:8px !important;
    gap:8px !important;
  }
}

/* =========================================================
   END AI ASISTEN MOBILE COMPOSER POLISH V17
   ========================================================= */

/* =========================================================
   BUMIL KU - MOBILE NAVBAR FIRST NAME + CLEAN MORE V18
   =========================================================
   TUJUAN:
   - Navbar HP hanya menampilkan nama depan user.
   - Tombol tiga titik tetap punya touch target yang aman,
     tetapi card/background/border/shadow dihilangkan.
   - Dropdown "Hapus semua chat" tetap berfungsi seperti sebelumnya.
   - Tidak mengubah AI, RAG, Firebase, history, backup, delete,
     sources, escalation, keyboard, scroll, atau navbar desktop.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     NAMA USER: KHUSUS NAVBAR HP
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMobileUserIdentity{
    max-width:none !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    width:auto !important;
    max-width:72px !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    text-align:right !important;

    color:#17384A !important;

    font-size:10.6px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
    letter-spacing:-.015em !important;
  }

  /*
   * Karena sekarang yang tampil hanya nama depan,
   * area teks bisa dibuat lebih natural dan tidak terlihat terpotong.
   */
  .ai-asisten-page .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    gap:5px !important;
  }


  /* -------------------------------------------------------
     TOMBOL TITIK TIGA: TANPA CARD
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMobileMoreBtn{
    /*
     * Touch target tetap nyaman, tetapi seluruh karakter card
     * dihilangkan. Hanya ikon yang terlihat.
     */
    width:30px !important;
    height:36px !important;
    min-width:30px !important;
    min-height:36px !important;

    padding:0 !important;
    margin:0 !important;

    display:grid !important;
    place-items:center !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    color:#607786 !important;

    -webkit-tap-highlight-color:transparent !important;

    transition:
      color .16s ease,
      opacity .16s ease,
      transform .16s ease !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn i{
    margin:0 !important;
    padding:0 !important;

    font-size:17px !important;
    line-height:1 !important;
    color:inherit !important;

    filter:none !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn:hover,
  .ai-asisten-page .aiAsistenMobileMoreBtn:focus-visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#0E9382 !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn:focus-visible{
    outline:2px solid rgba(14,147,130,.28) !important;
    outline-offset:1px !important;
    border-radius:8px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn:active,
  .ai-asisten-page .aiAsistenMobileMoreBtn[aria-expanded="true"]{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#0E9382 !important;
    transform:scale(.94) !important;
  }

  /*
   * Wrapper navbar menu juga harus benar-benar transparan
   * supaya tidak ada sisa visual card dari rule lama.
   */
  .ai-asisten-page .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileUserName{
    color:#DFF8F6 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#A7C3C8 !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn:hover,
  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn:focus-visible,
  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn:active,
  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn[aria-expanded="true"]{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#53EBE8 !important;
  }
}


@media (max-width:420px){
  .ai-asisten-page .aiAsistenMobileUserIdentity{
    max-width:none !important;
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:64px !important;
    font-size:10px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:27px !important;
    min-width:27px !important;
    height:34px !important;
    min-height:34px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn i{
    font-size:16px !important;
  }
}


@media (max-width:380px){
  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:56px !important;
    font-size:9.6px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn{
    width:25px !important;
    min-width:25px !important;
  }
}

/* =========================================================
   END MOBILE NAVBAR FIRST NAME + CLEAN MORE V18
   ========================================================= */

/* =========================================================
   BUMIL KU - MOBILE LONG PRESS DELETE V19
   =========================================================
   TUJUAN:
   - HP: icon hapus per bubble tidak ditampilkan.
   - Long press bubble history membuka contextual action bar.
   - Navbar normal diganti sementara dengan bar "1 pesan dipilih".
   - Desktop tetap mempertahankan delete button existing.
   - Tidak mengubah Firestore delete, backup audit, AI, RAG,
     sources, escalation, keyboard, atau scroll.
   ========================================================= */

.ai-asisten-page .aiAsistenMessageSelectionBar{
  display:none;
}

@media (max-width:740px){

  /* -------------------------------------------------------
     HILANGKAN ICON DELETE PER BUBBLE DI HP
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMessageDeleteBtn{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /*
   * Bubble history tetap interactive untuk long press,
   * tetapi tidak mengganggu gesture scroll vertikal.
   */
  .ai-asisten-page .aiAsistenMessage[data-ai-history-id]{
    -webkit-touch-callout:none !important;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y !important;
  }

  .ai-asisten-page .aiAsistenMessage[data-ai-history-id] .aiAsistenBubble{
    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease,
      filter .16s ease !important;
  }

  /*
   * Selected state ringan agar user tahu bubble mana yang dipilih.
   */
  .ai-asisten-page .aiAsistenMessage.is-selected-for-action .aiAsistenBubble{
    transform:scale(.985) !important;
    border-color:rgba(0,172,170,.38) !important;
    box-shadow:
      0 0 0 3px rgba(0,172,170,.09),
      0 10px 24px rgba(16,70,80,.12) !important;
  }

  .ai-asisten-page .aiAsistenMessage--user.is-selected-for-action .aiAsistenBubble{
    filter:saturate(.92) brightness(.98) !important;
  }


  /* -------------------------------------------------------
     CONTEXTUAL NAVBAR
     ------------------------------------------------------- */
  .ai-asisten-page .dashboardMobileBrandHeader.is-message-selection{
    position:relative !important;
    overflow:visible !important;
  }

  /*
   * Navbar normal disembunyikan hanya saat selection mode aktif.
   * Height header tetap sama karena contextual bar mengisi frame.
   */
  .ai-asisten-page .dashboardMobileBrandHeader.is-message-selection >
  .dashboardMobileBrandLockup,
  .ai-asisten-page .dashboardMobileBrandHeader.is-message-selection >
  .dashboardMobileInstitution,
  .ai-asisten-page .dashboardMobileBrandHeader.is-message-selection >
  .dashboardMobileHeaderActions{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .ai-asisten-page .aiAsistenMessageSelectionBar{
    position:absolute !important;
    inset:0 !important;
    z-index:120 !important;

    width:100% !important;
    height:100% !important;
    min-height:100% !important;

    padding:
      0
      max(12px, env(safe-area-inset-right))
      0
      max(12px, env(safe-area-inset-left)) !important;

    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    background:#FFFFFF !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenMessageSelectionBar[hidden]{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    width:34px !important;
    height:38px !important;
    min-width:34px !important;
    min-height:38px !important;

    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#315565 !important;
    cursor:pointer !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn i{
    font-size:16px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    flex:1 1 auto !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:2px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    margin:0 !important;

    color:#17384A !important;

    font-size:11.2px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    letter-spacing:-.015em !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo span{
    color:#718696 !important;

    font-size:8.9px !important;
    line-height:1.15 !important;
    font-weight:500 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    flex:0 0 auto !important;

    min-height:36px !important;
    padding:0 10px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;

    border:0 !important;
    border-radius:11px !important;

    background:rgba(239,68,68,.075) !important;
    color:#DC2626 !important;

    box-shadow:none !important;

    font-family:inherit !important;
    font-size:9.8px !important;
    line-height:1 !important;
    font-weight:750 !important;

    cursor:pointer !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn i{
    font-size:11px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:active{
    transform:scale(.97) !important;
    background:rgba(239,68,68,.13) !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn:focus-visible,
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:focus-visible{
    outline:2px solid rgba(14,147,130,.24) !important;
    outline-offset:1px !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    background:#102B30 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    color:#CBE7E8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionInfo strong{
    color:#E8FBF8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionInfo span{
    color:#9AB5BA !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    background:rgba(248,113,113,.10) !important;
    color:#F87171 !important;
  }
}


@media (max-width:420px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    padding-left:10px !important;
    padding-right:10px !important;
    gap:8px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    min-height:34px !important;
    padding:0 9px !important;
    font-size:9.4px !important;
  }
}


@media (max-width:360px){
  .ai-asisten-page .aiAsistenSelectionDeleteBtn span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    width:34px !important;
    min-width:34px !important;
    padding:0 !important;
  }
}

/* =========================================================
   END MOBILE LONG PRESS DELETE V19
   ========================================================= */

/* =========================================================
   BUMIL KU - MOBILE MULTI-SELECT DELETE V20
   ========================================================= */

@media (max-width:740px){
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble{
    transform:scale(.985) !important;
    border-color:rgba(0,172,170,.44) !important;
    box-shadow:
      0 0 0 3px rgba(0,172,170,.11),
      0 10px 24px rgba(16,70,80,.13) !important;
  }

  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action::after{
    content:"✓";
    position:absolute !important;
    top:7px !important;
    width:20px !important;
    height:20px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:#0E9382 !important;
    color:#FFFFFF !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    box-shadow:0 5px 12px rgba(14,147,130,.22) !important;
    pointer-events:none !important;
    z-index:4 !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--bot[data-ai-history-id].is-selected-for-action::after{
    right:2px !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--user[data-ai-history-id].is-selected-for-action::after{
    left:2px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:disabled,
  .ai-asisten-page .aiAsistenSelectionDeleteBtn[aria-disabled="true"]{
    opacity:.45 !important;
    cursor:not-allowed !important;
    transform:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn.is-loading{
    opacity:.72 !important;
    cursor:wait !important;
    pointer-events:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn.is-loading i{
    animation:aiDeleteSpin .85s linear infinite !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble{
    border-color:rgba(83,235,232,.42) !important;
    box-shadow:
      0 0 0 3px rgba(83,235,232,.09),
      0 10px 24px rgba(0,0,0,.30) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action::after{
    background:#53EBE8 !important;
    color:#083A3A !important;
  }
}

/* =========================================================
   END MOBILE MULTI-SELECT DELETE V20
   ========================================================= */

/* =========================================================
   BUMIL KU - SELECTION NAVBAR POLISH V21
   ========================================================= */

@media (max-width:740px){

  /* Centang lama pada parent message dimatikan */
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action::after{
    content:none !important;
    display:none !important;
  }

  /* Centang menempel langsung ke bubble */
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble{
    position:relative !important;
    overflow:visible !important;
  }

  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    content:"✓" !important;
    position:absolute !important;
    top:-8px !important;
    right:-8px !important;
    width:20px !important;
    height:20px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:#0E9382 !important;
    color:#FFFFFF !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    box-shadow:
      0 5px 12px rgba(14,147,130,.22),
      0 0 0 2px rgba(255,255,255,.92) !important;
    pointer-events:none !important;
    z-index:6 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    background:#53EBE8 !important;
    color:#083A3A !important;
    box-shadow:
      0 5px 12px rgba(0,0,0,.28),
      0 0 0 2px rgba(16,43,48,.94) !important;
  }

  /* Brand dan institusi tetap terlihat saat mode selection */
  .ai-asisten-page
  .dashboardMobileBrandHeader.is-message-selection >
  .dashboardMobileBrandLockup,
  .ai-asisten-page
  .dashboardMobileBrandHeader.is-message-selection >
  .dashboardMobileInstitution{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Hanya area user normal di kanan yang disembunyikan */
  .ai-asisten-page
  .dashboardMobileBrandHeader.is-message-selection >
  .dashboardMobileHeaderActions{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Grup aksi selection compact di kanan */
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    position:absolute !important;
    top:0 !important;
    right:max(8px, env(safe-area-inset-right)) !important;
    bottom:0 !important;
    left:auto !important;

    width:max-content !important;
    max-width:148px !important;
    min-width:0 !important;
    height:100% !important;
    min-height:100% !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    z-index:120 !important;
    overflow:visible !important;
  }

  .ai-asisten-page .aiAsistenMessageSelectionBar[hidden]{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    flex:0 0 28px !important;
    width:28px !important;
    height:32px !important;
    min-width:28px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.72) !important;
    color:#315565 !important;
    box-shadow:none !important;
    display:grid !important;
    place-items:center !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn i{
    font-size:13px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:72px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    width:auto !important;
    max-width:72px !important;
    margin:0 !important;
    padding:0 !important;
    color:#17384A !important;
    font-size:9.4px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:10px !important;
    display:grid !important;
    place-items:center !important;
    background:rgba(239,68,68,.075) !important;
    color:#DC2626 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn i{
    margin:0 !important;
    font-size:11px !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    background:rgba(16,43,48,.72) !important;
    color:#CBE7E8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionInfo strong{
    color:#E8FBF8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    background:rgba(248,113,113,.10) !important;
    color:#F87171 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:7px !important;
    max-width:136px !important;
    gap:3px !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    flex-basis:26px !important;
    width:26px !important;
    min-width:26px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:66px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:66px !important;
    font-size:9px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    flex-basis:32px !important;
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
  }

  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    top:-7px !important;
    right:-7px !important;
    width:19px !important;
    height:19px !important;
    font-size:9.5px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:5px !important;
    max-width:126px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:58px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:58px !important;
    font-size:8.6px !important;
  }
}

/* =========================================================
   END BUMIL KU - SELECTION NAVBAR POLISH V21
   ========================================================= */

/* =========================================================
   BUMIL KU - SELECTION COUNTER + WHITE NEUMORPH V22
   =========================================================
   TUJUAN:
   - Counter contextual dibuat singkat: "1 Pesan", "2 Pesan", dst.
   - Tombol hapus memakai neumorphism white, bukan merah.
   - Tetap compact di sisi kanan navbar.
   - Tidak mengubah fungsi multi-select, Firestore, backup audit,
     AI, RAG, scroll, keyboard, source, auth, atau struktur DOM.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     COUNTER RINGKAS
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:62px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:62px !important;

    color:#17384A !important;

    font-size:9.6px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.018em !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo span{
    display:none !important;
  }


  /* -------------------------------------------------------
     DELETE BUTTON - WHITE NEUMORPHISM
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;

    padding:0 !important;

    border-radius:11px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,1) 0%,
        rgba(247,251,251,.98) 100%
      ) !important;

    color:#587181 !important;

    border:1px solid rgba(15,159,141,.10) !important;

    box-shadow:
      4px 4px 9px rgba(17,77,82,.12),
      -3px -3px 8px rgba(255,255,255,.98),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    display:grid !important;
    place-items:center !important;

    transition:
      transform .16s ease,
      color .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      background .16s ease !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn i{
    margin:0 !important;
    padding:0 !important;

    font-size:11.5px !important;
    line-height:1 !important;
    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):hover,
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):focus-visible{
    background:
      linear-gradient(
        145deg,
        #FFFFFF 0%,
        #F3FBF9 100%
      ) !important;

    color:#0E9382 !important;

    border-color:rgba(14,147,130,.17) !important;

    box-shadow:
      5px 5px 11px rgba(17,77,82,.13),
      -4px -4px 9px rgba(255,255,255,1),
      inset 0 1px 0 rgba(255,255,255,1) !important;

    transform:translateY(-1px) !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):active{
    background:#F8FCFB !important;
    color:#0E9382 !important;

    transform:translateY(0) scale(.98) !important;

    box-shadow:
      inset 3px 3px 7px rgba(17,77,82,.09),
      inset -3px -3px 7px rgba(255,255,255,.96) !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:disabled,
  .ai-asisten-page .aiAsistenSelectionDeleteBtn[aria-disabled="true"]{
    opacity:.48 !important;
    cursor:not-allowed !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.96),
        rgba(245,249,249,.94)
      ) !important;

    color:#8CA0AC !important;

    border-color:rgba(148,163,184,.10) !important;

    box-shadow:
      inset 2px 2px 5px rgba(17,77,82,.05),
      inset -2px -2px 5px rgba(255,255,255,.92) !important;

    transform:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn.is-loading{
    opacity:.72 !important;
    cursor:wait !important;
    pointer-events:none !important;
  }


  /* -------------------------------------------------------
     CANCEL BUTTON DISESUAIKAN SUPAYA SATU KARAKTER VISUAL
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    background:transparent !important;
    color:#456676 !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn:hover,
  .ai-asisten-page .aiAsistenSelectionCancelBtn:focus-visible{
    color:#0E9382 !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionInfo strong{
    color:#E8FBF8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    background:
      linear-gradient(
        145deg,
        rgba(22,51,56,.98),
        rgba(12,35,39,.98)
      ) !important;

    color:#B7D2D5 !important;

    border-color:rgba(83,235,232,.10) !important;

    box-shadow:
      4px 4px 9px rgba(0,0,0,.30),
      -3px -3px 8px rgba(255,255,255,.025),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):hover,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):focus-visible{
    background:
      linear-gradient(
        145deg,
        rgba(25,57,62,.99),
        rgba(13,38,42,.99)
      ) !important;

    color:#53EBE8 !important;

    border-color:rgba(83,235,232,.18) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):active{
    background:rgba(13,38,42,.99) !important;

    box-shadow:
      inset 3px 3px 7px rgba(0,0,0,.40),
      inset -3px -3px 7px rgba(255,255,255,.025) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    color:#CBE7E8 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:58px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:58px !important;
    font-size:9.2px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    border-radius:10px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:54px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:54px !important;
    font-size:8.9px !important;
  }
}

/* =========================================================
   END BUMIL KU - SELECTION COUNTER + WHITE NEUMORPH V22
   ========================================================= */

/* =========================================================
   BUMIL KU - SELECTION MINIMAL PROFESSIONAL V23
   =========================================================
   TUJUAN:
   - Tombol batal memakai ikon X (xmark), bukan arrow.
   - Counter singkat: "1 Chat", "2 Chat", dst.
   - Tombol hapus tanpa card/background/border/shadow.
   - Icon hapus dibuat lebih besar dan jelas.
   - Touch target tetap nyaman meskipun visual icon-only.
   - Tidak mengubah multi-select, Firestore, backup audit,
     AI, RAG, scroll, keyboard, source, atau auth.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     CONTEXTUAL BAR
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:max(9px, env(safe-area-inset-right)) !important;
    max-width:140px !important;
    gap:7px !important;
  }

  /* -------------------------------------------------------
     CANCEL / XMARK
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    flex:0 0 28px !important;

    width:28px !important;
    height:34px !important;
    min-width:28px !important;
    min-height:34px !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:#587181 !important;

    display:grid !important;
    place-items:center !important;

    transition:
      color .16s ease,
      transform .16s ease,
      opacity .16s ease !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn i{
    margin:0 !important;
    padding:0 !important;

    font-size:16px !important;
    line-height:1 !important;
    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn:hover,
  .ai-asisten-page .aiAsistenSelectionCancelBtn:focus-visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#0E9382 !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn:active{
    transform:scale(.90) !important;
    color:#0E9382 !important;
  }


  /* -------------------------------------------------------
     COUNTER: "2 Chat"
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionInfo{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:58px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    width:auto !important;
    max-width:58px !important;

    margin:0 !important;
    padding:0 !important;

    color:#17384A !important;

    font-size:9.8px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.018em !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo span{
    display:none !important;
  }


  /* -------------------------------------------------------
     DELETE: ICON-ONLY TANPA CARD
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    flex:0 0 32px !important;

    width:32px !important;
    height:36px !important;
    min-width:32px !important;
    min-height:36px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    color:#587181 !important;

    cursor:pointer !important;

    transition:
      color .16s ease,
      transform .16s ease,
      opacity .16s ease !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn i{
    margin:0 !important;
    padding:0 !important;

    font-size:17px !important;
    line-height:1 !important;
    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):hover,
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):focus-visible{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#0E9382 !important;
    transform:scale(1.04) !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):active{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#087F78 !important;
    transform:scale(.90) !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn:disabled,
  .ai-asisten-page .aiAsistenSelectionDeleteBtn[aria-disabled="true"]{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#A4B1BA !important;
    opacity:.48 !important;

    cursor:not-allowed !important;
    transform:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn.is-loading{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    opacity:.68 !important;
    pointer-events:none !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionInfo strong{
    color:#E8FBF8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionCancelBtn,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#B7D2D5 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionCancelBtn:hover,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionCancelBtn:focus-visible,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):hover,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionDeleteBtn:not(:disabled):focus-visible{
    color:#53EBE8 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:7px !important;
    max-width:132px !important;
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    width:26px !important;
    min-width:26px !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn i{
    font-size:15px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:54px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:54px !important;
    font-size:9.3px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    width:30px !important;
    min-width:30px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn i{
    font-size:16px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:5px !important;
    max-width:124px !important;
    gap:5px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:50px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:50px !important;
    font-size:8.9px !important;
  }
}

/* =========================================================
   END BUMIL KU - SELECTION MINIMAL PROFESSIONAL V23
   ========================================================= */

/* =========================================================
   BUMIL KU - SELECTION MARKER + COUNTER POLISH V24
   =========================================================
   TUJUAN:
   - Counter "1 Chat / 2 Chat / dst." dibuat lebih terbaca.
   - Checkmark user menempel di pojok kiri atas bubble user.
   - Checkmark AI/bot tetap di pojok kanan atas bubble.
   - Tidak mengubah multi-select, Firestore, backup audit,
     AI, RAG, scroll, keyboard, source, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     COUNTER LEBIH TERBACA
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    max-width:148px !important;
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:66px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    width:auto !important;
    max-width:66px !important;

    font-size:11.6px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.02em !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }


  /* -------------------------------------------------------
     CHECKMARK MENEMPEL KE BUBBLE
     ------------------------------------------------------- */

  /*
   * Baseline semua bubble:
   * marker tetap menempel di sudut bubble.
   */
  .ai-asisten-page
  .aiAsistenMessage[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    top:-8px !important;

    width:20px !important;
    height:20px !important;

    font-size:10px !important;

    transform:none !important;
  }

  /*
   * CHAT USER:
   * marker pindah ke pojok kiri atas bubble,
   * dekat awal teks pertanyaan.
   */
  .ai-asisten-page
  .aiAsistenMessage--user[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    left:-8px !important;
    right:auto !important;
  }

  /*
   * CHAT AI/BOT:
   * tetap di pojok kanan atas agar arah visual
   * berbeda dari bubble user.
   */
  .ai-asisten-page
  .aiAsistenMessage--bot[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    left:auto !important;
    right:-8px !important;
  }
}


@media (max-width:420px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    max-width:142px !important;
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:62px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:62px !important;
    font-size:11px !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--user[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    top:-7px !important;
    left:-7px !important;
    right:auto !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--bot[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    top:-7px !important;
    left:auto !important;
    right:-7px !important;
  }
}


@media (max-width:380px){
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    max-width:136px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:58px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:58px !important;
    font-size:10.5px !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--user[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    left:-6px !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--bot[data-ai-history-id].is-selected-for-action
  .aiAsistenBubble::after{
    right:-6px !important;
  }
}

/* =========================================================
   END BUMIL KU - SELECTION MARKER + COUNTER POLISH V24
   ========================================================= */

/* =========================================================
   BUMIL KU - MOBILE PROFILE ROUNDED SQUARE V25
   =========================================================
   TUJUAN:
   - Foto profil navbar HP tidak lagi berbentuk lingkaran.
   - Menggunakan rounded-square dengan sudut tumpul profesional.
   - Ukuran foto diperbesar tetapi tetap proporsional.
   - object-fit: cover menjaga foto tidak terdistorsi.
   - Tidak mengubah nama user, menu ⋮, multi-select, AI, RAG,
     Firestore, history, backup, delete, scroll, keyboard, atau JS.
   ========================================================= */

@media (max-width:740px){

  /*
   * Beri sedikit ruang tambahan agar profile image 44px
   * tetap nyaman bersama nama + menu tiga titik.
   */
  .ai-asisten-page
  .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    gap:6px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    gap:8px !important;
  }

  /*
   * WRAPPER:
   * 44 x 44 px, rounded-square, bukan circle.
   */
  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;

    padding:2px !important;

    border-radius:12px !important;

    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.99),
        rgba(242,250,249,.96)
      ) !important;

    border:1px solid rgba(15,159,141,.14) !important;

    box-shadow:
      0 5px 12px rgba(17,77,82,.10),
      0 2px 5px rgba(15,23,42,.035),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    overflow:hidden !important;

    transition:
      transform .16s ease,
      box-shadow .16s ease,
      border-color .16s ease !important;
  }

  /*
   * FOTO:
   * Tetap 1:1, crop proporsional, tidak stretch.
   */
  .ai-asisten-page .aiAsistenMobileUserPhoto{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center !important;

    border-radius:10px !important;

    background:#EEF7F6 !important;

    transform:none !important;
  }

  /*
   * Feedback tekan tetap halus.
   */
  .ai-asisten-page
  .aiAsistenMobileUserIdentity:active
  .aiAsistenMobileUserPhotoWrap{
    transform:scale(.975) !important;

    border-color:rgba(15,159,141,.20) !important;

    box-shadow:
      inset 2px 2px 6px rgba(17,77,82,.07),
      inset -2px -2px 6px rgba(255,255,255,.88) !important;
  }

  /*
   * Dark mode tetap menggunakan rounded-square yang sama.
   */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    background:
      linear-gradient(
        145deg,
        rgba(18,47,52,.98),
        rgba(10,31,35,.97)
      ) !important;

    border-color:rgba(83,235,232,.14) !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.30),
      0 2px 5px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileUserPhoto{
    background:#102B30 !important;
  }
}


@media (max-width:420px){

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    gap:7px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    flex-basis:42px !important;

    border-radius:11px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhoto{
    border-radius:9px !important;
  }
}


@media (max-width:380px){

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex-basis:40px !important;

    border-radius:10px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhoto{
    border-radius:8px !important;
  }
}

/* =========================================================
   END BUMIL KU - MOBILE PROFILE ROUNDED SQUARE V25
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFILE CARD CHAT MENU V26
   =========================================================
   TUJUAN:
   - Hilangkan ikon titik tiga terpisah.
   - Nama + foto profil dibungkus dalam satu card.
   - Tambah tombol chevron-down sebagai pemicu menu percakapan.
   - Dropdown tampil seperti top menu WhatsApp mobile:
     kompak, profesional, muncul dari atas, lebar ± 1/3 layar HP.
   - Ubah aksi menjadi "Bersihkan Obrolan".
   - Tidak mengubah fungsi JS karena id existing tetap dipertahankan.
   ========================================================= */

@media (max-width:740px){

  .ai-asisten-page .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    justify-content:flex-end !important;
    width:auto !important;
    min-width:0 !important;
    gap:0 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard{
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:2px !important;

    min-height:52px !important;
    padding:4px 6px 4px 12px !important;

    border-radius:18px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.985),
        rgba(242,250,249,.965)
      ) !important;

    border:1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 8px 20px rgba(17,77,82,.10),
      0 2px 6px rgba(15,23,42,.04),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    overflow:visible !important;
  }

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard
  .aiAsistenMobileUserIdentity{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    padding:0 !important;
    text-decoration:none !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    font-size:16px !important;
    font-weight:800 !important;
    color:#1E3F52 !important;
    letter-spacing:-0.01em !important;
    line-height:1.1 !important;
    max-width:68px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:right !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--chevron{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    flex:0 0 34px !important;

    display:grid !important;
    place-items:center !important;

    padding:0 !important;
    margin:0 0 0 2px !important;

    border:none !important;
    border-radius:10px !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#5D7283 !important;
  }

  .ai-asisten-page .aiAsistenMobileProfileChevron{
    display:grid !important;
    place-items:center !important;
    width:18px !important;
    height:18px !important;
    transition:transform .18s ease !important;
  }

  .ai-asisten-page .aiAsistenMobileProfileChevron i{
    font-size:14px !important;
    line-height:1 !important;
  }

  .ai-asisten-page
  #btnAiAsistenMobileMore[aria-expanded="true"]
  .aiAsistenMobileProfileChevron{
    transform:rotate(180deg) !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:0 !important;
    left:auto !important;

    width:clamp(132px, 33vw, 168px) !important;
    min-height:52px !important;
    padding:0 !important;

    border-radius:16px !important;
    overflow:hidden !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.995),
        rgba(246,251,250,.985)
      ) !important;

    border:1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 14px 28px rgba(17,77,82,.14),
      0 5px 10px rgba(15,23,42,.06) !important;

    transform-origin:top right !important;
    animation:aiAsistenTopMenuDropV26 .18s ease-out !important;
    z-index:60 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileDeleteAllBtn{
    width:100% !important;
    min-height:52px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;

    padding:14px 16px !important;

    border:none !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#234759 !important;
    font-size:13.5px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    text-align:left !important;
  }

  .ai-asisten-page
  .aiAsistenMobileDeleteAllBtn i{
    font-size:15px !important;
    color:#80909D !important;
    width:16px !important;
    text-align:center !important;
  }

  .ai-asisten-page
  .aiAsistenMobileDeleteAllBtn[disabled]{
    opacity:.72 !important;
    cursor:not-allowed !important;
  }

  .ai-asisten-page
  .aiAsistenMobileDeleteAllBtn:not([disabled]):active{
    background:rgba(15,159,141,.06) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard{
    background:
      linear-gradient(
        145deg,
        rgba(16,43,48,.985),
        rgba(10,31,35,.97)
      ) !important;

    border-color:rgba(83,235,232,.12) !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileUserName{
    color:#EAF6F4 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar{
    background:
      linear-gradient(
        180deg,
        rgba(18,47,52,.99),
        rgba(11,34,38,.98)
      ) !important;

    border-color:rgba(83,235,232,.10) !important;

    box-shadow:
      0 14px 28px rgba(0,0,0,.38),
      0 5px 10px rgba(0,0,0,.22) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileDeleteAllBtn{
    color:#EAF6F4 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileDeleteAllBtn i{
    color:#B9CBD3 !important;
  }
}

@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard{
    min-height:50px !important;
    padding:4px 5px 4px 10px !important;
    border-radius:17px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    font-size:15px !important;
    max-width:60px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar{
    width:clamp(128px, 36vw, 158px) !important;
  }
}

@media (max-width:380px){

  .ai-asisten-page .aiAsistenMobileUserName{
    font-size:14px !important;
    max-width:54px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--chevron{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
  }
}

@keyframes aiAsistenTopMenuDropV26{
  from{
    opacity:0;
    transform:translateY(-8px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* =========================================================
   END BUMIL KU - PROFILE CARD CHAT MENU V26
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFILE CARD EFFICIENT V27
   =========================================================
   TUJUAN:
   - Layout lebih rapi dan efisien.
   - Foto profil dipindah ke sisi paling kanan.
   - Chevron down dipindah ke bawah nama depan.
   - Card profil lebih ringkas, tetap profesional.
   - Dropdown tetap memakai id existing agar JS lama tetap jalan.
   ========================================================= */

@media (max-width:740px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard.aiAsistenMobileProfileMenuCard--efficient{
    position:relative !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:12px !important;

    min-height:54px !important;
    padding:6px 10px 6px 14px !important;
    border-radius:18px !important;
  }

  .ai-asisten-page .aiAsistenMobileProfileTextAction{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:2px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    display:block !important;
    max-width:68px !important;
    font-size:15.5px !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    text-align:left !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoLink{
    display:block !important;
    text-decoration:none !important;
    line-height:0 !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername{
    width:auto !important;
    min-width:0 !important;
    height:18px !important;
    min-height:18px !important;
    padding:0 !important;
    margin:0 !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#6B8190 !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername .aiAsistenMobileProfileChevron{
    width:16px !important;
    height:16px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername .aiAsistenMobileProfileChevron i{
    font-size:12px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername:hover,
  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername:focus-visible{
    color:#0E9382 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar{
    top:calc(100% + 8px) !important;
    right:0 !important;
    width:clamp(136px, 34vw, 170px) !important;
    min-height:52px !important;
    border-radius:15px !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername{
    color:#AFC7CC !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard.aiAsistenMobileProfileMenuCard--efficient{
    column-gap:10px !important;
    padding:6px 8px 6px 12px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:60px !important;
    font-size:15px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:56px !important;
    font-size:14px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername .aiAsistenMobileProfileChevron i{
    font-size:11px !important;
  }
}

/* =========================================================
   END BUMIL KU - PROFILE CARD EFFICIENT V27
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFILE CARD VERTICAL POLISH V28
   =========================================================
   TUJUAN:
   - Nama depan diturunkan sedikit agar lebih seimbang.
   - Chevron di bawah nama ikut turun agar proporsional.
   - Card tetap compact, tidak membesar.
   - Foto profil kanan tetap dipertahankan.
   ========================================================= */

@media (max-width:740px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard.aiAsistenMobileProfileMenuCard--efficient{
    min-height:52px !important;
    padding:5px 10px 5px 14px !important;
  }

  .ai-asisten-page .aiAsistenMobileProfileTextAction{
    justify-content:flex-end !important;
    gap:3px !important;
    padding-top:4px !important;
    padding-bottom:2px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    align-self:flex-start !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    margin-top:2px !important;
    line-height:1 !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername{
    height:16px !important;
    min-height:16px !important;
    margin-top:1px !important;
    margin-bottom:1px !important;
    align-items:flex-start !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername .aiAsistenMobileProfileChevron{
    width:15px !important;
    height:15px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername .aiAsistenMobileProfileChevron i{
    font-size:11.5px !important;
    line-height:1 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard.aiAsistenMobileProfileMenuCard--efficient{
    min-height:50px !important;
    padding:5px 8px 5px 12px !important;
  }

  .ai-asisten-page .aiAsistenMobileProfileTextAction{
    padding-top:4px !important;
    gap:2px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    margin-top:2px !important;
    font-size:14.8px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page .aiAsistenMobileUserName{
    font-size:13.9px !important;
  }

  .ai-asisten-page .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername .aiAsistenMobileProfileChevron i{
    font-size:10.8px !important;
  }
}

/* =========================================================
   END BUMIL KU - PROFILE CARD VERTICAL POLISH V28
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFILE CARD CENTERED V29
   =========================================================
   TUJUAN:
   - Nama depan benar-benar berada di tengah vertikal card.
   - Chevron tetap di bawah nama tetapi lebih dekat ke dasar card.
   - Foto profil tetap paling kanan.
   - Card tetap compact dan proporsional.
   - Tidak mengubah fungsi dropdown/menu maupun JavaScript.
   ========================================================= */

@media (max-width:740px){

  /*
   * Card tetap compact.
   * Tinggi mengikuti foto profil 44px + padding aman.
   */
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard.aiAsistenMobileProfileMenuCard--efficient{
    min-height:54px !important;
    padding:5px 9px 5px 13px !important;
    column-gap:10px !important;
    align-items:center !important;
  }

  /*
   * Text action memakai area tinggi yang sama dengan foto profil.
   * Position relative membuat nama & chevron dapat ditempatkan presisi.
   */
  .ai-asisten-page .aiAsistenMobileProfileTextAction{
    position:relative !important;

    width:68px !important;
    min-width:68px !important;
    height:44px !important;
    min-height:44px !important;

    display:block !important;

    padding:0 !important;
    margin:0 !important;

    align-self:center !important;
  }

  /*
   * Nama ditempatkan di titik tengah vertikal area profil.
   * Sedikit naik 1px dari exact center agar secara optik seimbang
   * dengan chevron yang berada di bawah.
   */
  .ai-asisten-page .aiAsistenMobileUserIdentity{
    position:absolute !important;

    top:50% !important;
    left:0 !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    transform:translateY(-62%) !important;

    display:block !important;
    align-self:auto !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    max-width:68px !important;

    font-size:15.5px !important;
    line-height:1 !important;
    font-weight:800 !important;

    text-align:left !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;

    transform:none !important;
  }

  /*
   * Chevron dipasang mendekati dasar card,
   * bukan mengikuti flow nama.
   * Touch area tetap lebih besar dari ukuran icon.
   */
  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername{
    position:absolute !important;

    left:-3px !important;
    bottom:-1px !important;
    top:auto !important;

    width:26px !important;
    min-width:26px !important;

    height:21px !important;
    min-height:21px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:7px !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#6B8190 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername
  .aiAsistenMobileProfileChevron{
    width:15px !important;
    height:15px !important;

    display:grid !important;
    place-items:center !important;

    transform:none !important;
  }

  .ai-asisten-page
  #btnAiAsistenMobileMore[aria-expanded="true"]
  .aiAsistenMobileProfileChevron{
    transform:rotate(180deg) !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername
  .aiAsistenMobileProfileChevron i{
    font-size:11.5px !important;
    line-height:1 !important;
  }

  /*
   * Foto tetap menjadi anchor visual sisi kanan.
   */
  .ai-asisten-page .aiAsistenMobileUserPhotoLink{
    align-self:center !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileMenuCard.aiAsistenMobileProfileMenuCard--efficient{
    min-height:52px !important;
    padding:5px 8px 5px 12px !important;
    column-gap:9px !important;
  }

  .ai-asisten-page .aiAsistenMobileProfileTextAction{
    width:62px !important;
    min-width:62px !important;

    height:42px !important;
    min-height:42px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserIdentity{
    transform:translateY(-61%) !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:62px !important;
    font-size:14.8px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername{
    left:-3px !important;
    bottom:-1px !important;

    width:25px !important;
    min-width:25px !important;

    height:20px !important;
    min-height:20px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername
  .aiAsistenMobileProfileChevron i{
    font-size:11px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenMobileProfileTextAction{
    width:57px !important;
    min-width:57px !important;

    height:40px !important;
    min-height:40px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:57px !important;
    font-size:13.9px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername{
    bottom:-1px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn.aiAsistenMobileMoreBtn--undername
  .aiAsistenMobileProfileChevron i{
    font-size:10.6px !important;
  }
}

/* =========================================================
   END BUMIL KU - PROFILE CARD CENTERED V29
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFILE INLINE CLEAN V30
   =========================================================
   - Outer profile card removed.
   - Chevron removed.
   - User first name becomes the chat-menu trigger.
   - Profile photo remains a direct link to Profil.
   ========================================================= */

@media (max-width:740px){

  .ai-asisten-page
  .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
    gap:8px !important;

    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    z-index:90 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    position:static !important;

    width:auto !important;
    min-width:0 !important;
    max-width:72px !important;

    height:36px !important;
    min-height:36px !important;

    margin:0 !important;
    padding:0 1px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    color:#17384A !important;
    cursor:pointer !important;
    transform:none !important;

    -webkit-tap-highlight-color:transparent !important;

    transition:
      color .16s ease,
      opacity .16s ease,
      transform .16s ease !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger:hover,
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger:focus-visible,
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger[aria-expanded="true"]{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#0E9382 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger:focus-visible{
    outline:2px solid rgba(14,147,130,.20) !important;
    outline-offset:2px !important;
    border-radius:7px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger:active{
    transform:scale(.97) !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    display:block !important;
    width:auto !important;
    max-width:72px !important;
    margin:0 !important;
    padding:0 !important;

    color:inherit !important;
    font-size:14.5px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.018em !important;
    text-align:right !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    transform:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoLink{
    display:block !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    text-decoration:none !important;
    line-height:0 !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex:0 0 44px !important;

    padding:2px !important;
    border-radius:12px !important;

    display:grid !important;
    place-items:center !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.99),
        rgba(242,250,249,.96)
      ) !important;

    border:1px solid rgba(15,159,141,.13) !important;

    box-shadow:
      0 5px 12px rgba(17,77,82,.09),
      0 2px 5px rgba(15,23,42,.03),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    overflow:hidden !important;
    transform:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhoto{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:10px !important;
    transform:none !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:0 !important;
    left:auto !important;

    width:clamp(138px, 36vw, 170px) !important;
    min-height:52px !important;

    margin:0 !important;
    padding:0 !important;
    border-radius:15px !important;
    transform-origin:top right !important;
    z-index:130 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileProfileMenuCard,
  .ai-asisten-page
  .aiAsistenMobileProfileMenuCard--efficient{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreBtn--chevron,
  .ai-asisten-page
  .aiAsistenMobileMoreBtn--undername,
  .ai-asisten-page
  .aiAsistenMobileProfileChevron{
    display:none !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    color:#EAF6F4 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger:hover,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger:focus-visible,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger[aria-expanded="true"]{
    color:#53EBE8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    background:
      linear-gradient(
        145deg,
        rgba(18,47,52,.98),
        rgba(10,31,35,.97)
      ) !important;

    border-color:rgba(83,235,232,.13) !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }
}

@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    gap:7px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    max-width:64px !important;
    height:34px !important;
    min-height:34px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:64px !important;
    font-size:13.7px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    flex-basis:42px !important;
    border-radius:11px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhoto{
    border-radius:9px !important;
  }
}

@media (max-width:380px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    gap:6px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    max-width:56px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:56px !important;
    font-size:13px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoWrap{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex-basis:40px !important;
    border-radius:10px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhoto{
    border-radius:8px !important;
  }
}

/* =========================================================
   END BUMIL KU - PROFILE INLINE CLEAN V30
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFILE NAVBAR RIGHT V31
   =========================================================
   TUJUAN:
   - Nama + foto profil benar-benar berada di sisi kanan navbar HP.
   - Bumil Ku + institusi tetap di sisi kiri.
   - Tidak menambah card / chevron.
   - Dropdown Bersihkan Obrolan tetap bekerja.
   - Tidak mengubah AI, Firebase, RAG, history, multi-select,
     scroll, keyboard, maupun JavaScript.
   ========================================================= */

@media (max-width:740px){

  /*
   * Pastikan navbar memakai satu baris horizontal yang stabil.
   */
  .ai-asisten-page .dashboardMobileBrandHeader{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100vw !important;
    max-width:100vw !important;

    gap:6px !important;

    padding-left:max(10px, env(safe-area-inset-left)) !important;
    padding-right:max(10px, env(safe-area-inset-right)) !important;

    overflow:visible !important;
  }

  /*
   * Brand Bumil Ku tetap menjadi item kiri.
   */
  .ai-asisten-page .dashboardMobileBrandLockup{
    flex:0 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /*
   * Institusi tetap mengikuti brand.
   */
  .ai-asisten-page .dashboardMobileInstitution{
    flex:0 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /*
   * KUNCI UTAMA:
   * margin-left:auto mendorong seluruh grup nama+foto
   * ke sisi paling kanan navbar.
   */
  .ai-asisten-page
  .dashboardMobileHeaderActions.aiAsistenMobileUserHeader{
    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;

    margin-left:auto !important;
    margin-right:0 !important;

    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:0 !important;

    position:relative !important;
    right:0 !important;

    overflow:visible !important;
  }

  /*
   * Wrapper profil tetap inline dan compact.
   */
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;
    right:0 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /*
   * Nama sedikit dirapikan agar grup kanan terlihat seimbang.
   */
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    flex:0 1 auto !important;
    max-width:64px !important;
    justify-content:flex-end !important;
    text-align:right !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:64px !important;
    text-align:right !important;
  }

  /*
   * Foto menjadi elemen paling kanan dari grup.
   */
  .ai-asisten-page .aiAsistenMobileUserPhotoLink{
    flex:0 0 auto !important;
    order:2 !important;
    margin:0 !important;
  }

  /*
   * Dropdown tetap turun dari sisi kanan profile cluster.
   */
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline{
    right:0 !important;
    left:auto !important;
    transform-origin:top right !important;
  }
}


@media (max-width:420px){

  .ai-asisten-page .dashboardMobileBrandHeader{
    gap:5px !important;

    padding-left:max(8px, env(safe-area-inset-left)) !important;
    padding-right:max(8px, env(safe-area-inset-right)) !important;
  }

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    gap:6px !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger,
  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:58px !important;
  }
}


@media (max-width:380px){

  .ai-asisten-page .dashboardMobileBrandHeader{
    gap:4px !important;

    padding-left:max(7px, env(safe-area-inset-left)) !important;
    padding-right:max(7px, env(safe-area-inset-right)) !important;
  }

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger,
  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:52px !important;
  }
}

/* =========================================================
   END BUMIL KU - PROFILE NAVBAR RIGHT V31
   ========================================================= */

/* =========================================================
   BUMIL KU - MOBILE NAVBAR USER CITY V32
   =========================================================
   TUJUAN:
   - Menampilkan kota dari Profil di bawah nama depan user.
   - Format: icon lokasi + nama kota.
   - Nama tetap menjadi trigger menu Bersihkan Obrolan.
   - Foto tetap berada paling kanan dan membuka halaman Profil.
   - Jika kota kosong, baris lokasi tidak ditampilkan.
   - Tidak mengubah AI, Firebase, RAG, history, delete,
     multi-select, scroll, keyboard, atau layout desktop.
   ========================================================= */

@media (max-width:740px){

  /*
   * Area nama sekarang punya dua baris:
   * 1. nama depan
   * 2. icon lokasi + kota
   */
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    max-width:82px !important;

    height:42px !important;
    min-height:42px !important;

    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .ai-asisten-page .aiAsistenMobileUserText{
    width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;

    gap:4px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    width:100% !important;
    max-width:82px !important;

    font-size:14px !important;
    line-height:1 !important;
    font-weight:800 !important;

    text-align:right !important;
  }

  .ai-asisten-page .aiAsistenMobileUserCity{
    width:auto !important;
    max-width:82px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:3px !important;

    margin:0 !important;
    padding:0 !important;

    color:#738796 !important;

    font-size:8.6px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:-.01em !important;

    white-space:nowrap !important;
    overflow:hidden !important;

    pointer-events:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserCity[hidden]{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserCity i{
    flex:0 0 auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#0E9382 !important;

    font-size:8px !important;
    line-height:1 !important;
  }

  .ai-asisten-page #mobileHeaderUserCityText{
    min-width:0 !important;
    max-width:69px !important;

    display:block !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /*
   * Sedikit rapatkan jarak nama/foto supaya penambahan kota
   * tidak membuat cluster profil terlalu lebar.
   */
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    gap:7px !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileUserCity{
    color:#A7BEC5 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileUserCity i{
    color:#53EBE8 !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    max-width:74px !important;
    height:40px !important;
    min-height:40px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserText{
    gap:3px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:74px !important;
    font-size:13.4px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserCity{
    max-width:74px !important;
    font-size:8px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserCity i{
    font-size:7.5px !important;
  }

  .ai-asisten-page #mobileHeaderUserCityText{
    max-width:62px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    max-width:66px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserName{
    max-width:66px !important;
    font-size:12.8px !important;
  }

  .ai-asisten-page .aiAsistenMobileUserCity{
    max-width:66px !important;
    font-size:7.6px !important;
  }

  .ai-asisten-page #mobileHeaderUserCityText{
    max-width:55px !important;
  }
}

/* =========================================================
   END BUMIL KU - MOBILE NAVBAR USER CITY V32
   ========================================================= */

/* =========================================================
   BUMIL KU - CHAT MESSAGE TIME V33
   =========================================================
   TUJUAN:
   - Menampilkan HH.mm di kanan bawah setiap bubble chat.
   - Berlaku untuk user, AI, welcome, warning, dan error.
   - Waktu menjadi bagian dari bubble, bukan card/badge tambahan.
   - Tampilan dibuat subtle seperti aplikasi chat profesional.
   - Tidak mengubah fungsi chat, Firebase, RAG, history,
     backup, delete, multi-select, scroll, atau keyboard.
   ========================================================= */

/* ---------------------------------------------------------
   BUBBLE: SIAP MENAMPUNG META WAKTU
   --------------------------------------------------------- */
.ai-asisten-page .aiAsistenBubble{
  position:relative !important;

  /*
   * Ruang bawah ekstra agar waktu tidak menimpa teks.
   */
  padding-bottom:26px !important;
}

/* ---------------------------------------------------------
   TIME META
   --------------------------------------------------------- */
.ai-asisten-page .aiAsistenMessageTime{
  position:absolute !important;

  right:12px !important;
  bottom:8px !important;

  margin:0 !important;
  padding:0 !important;

  display:block !important;

  color:rgba(100,116,139,.74) !important;

  font-size:9.5px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:.01em !important;

  white-space:nowrap !important;

  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

/*
 * Bubble user memakai teks waktu putih transparan
 * agar tetap jelas di atas gradient teal.
 */
.ai-asisten-page
.aiAsistenMessage--user
.aiAsistenMessageTime{
  color:rgba(255,255,255,.78) !important;
}

/*
 * Welcome/AI normal menggunakan tone muted.
 */
.ai-asisten-page
.aiAsistenMessage--bot
.aiAsistenMessageTime{
  color:rgba(100,116,139,.72) !important;
}

/*
 * Warning dan error mengikuti tone bubble masing-masing,
 * tetapi tetap dibuat lebih tenang daripada isi pesan.
 */
.ai-asisten-page
.aiAsistenMessage--error
.aiAsistenMessageTime{
  color:rgba(185,28,28,.58) !important;
}

.ai-asisten-page
.aiAsistenMessage--warning
.aiAsistenMessageTime{
  color:rgba(146,64,14,.58) !important;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */
html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage--bot
.aiAsistenMessageTime{
  color:rgba(203,213,225,.62) !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage--user
.aiAsistenMessageTime{
  color:rgba(255,255,255,.78) !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage--error
.aiAsistenMessageTime{
  color:rgba(248,113,113,.68) !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage--warning
.aiAsistenMessageTime{
  color:rgba(251,191,36,.66) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width:740px){

  /*
   * Bubble HP sebelumnya memakai padding 11px 13px.
   * Tambahkan ruang bawah agar jam tetap lega.
   */
  .ai-asisten-page .aiAsistenBubble{
    padding-bottom:25px !important;
  }

  .ai-asisten-page .aiAsistenMessageTime{
    right:11px !important;
    bottom:7px !important;

    font-size:9px !important;
  }

  /*
   * Bubble pembuka memiliki padding khusus dari rule lama.
   * Tetap sisakan area meta waktu.
   */
  .ai-asisten-page
  .aiAsistenMessages >
  .aiAsistenMessage--bot:first-child
  .aiAsistenBubble{
    padding-bottom:27px !important;
  }
}


/* ---------------------------------------------------------
   <= 420px
   --------------------------------------------------------- */
@media (max-width:420px){

  .ai-asisten-page .aiAsistenBubble{
    padding-bottom:24px !important;
  }

  .ai-asisten-page .aiAsistenMessageTime{
    right:10px !important;
    bottom:7px !important;

    font-size:8.7px !important;
  }
}


/* ---------------------------------------------------------
   <= 380px
   --------------------------------------------------------- */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenMessageTime{
    right:9px !important;
    bottom:6px !important;

    font-size:8.4px !important;
  }
}

/* =========================================================
   END BUMIL KU - CHAT MESSAGE TIME V33
   ========================================================= */

/* =========================================================
   BUMIL KU - NATURAL TOP FADE V34
   =========================================================
   TUJUAN:
   - Menghilangkan white haze / shadow di bawah navbar HP.
   - Bubble tetap memudar halus menggunakan mask fade existing.
   - Chat terasa benar-benar lewat di belakang navbar.
   - Navbar tetap solid/bersih tanpa glow putih.
   - Tidak mengubah scroll, keyboard, AI, RAG, Firebase,
     history, backup, delete, selection, atau chat time V33.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     NAVBAR: HILANGKAN SHADOW / HALO BAWAH
     ------------------------------------------------------- */
  .ai-asisten-page .dashboardMobileBrandHeader{
    box-shadow:none !important;

    /*
     * Jangan gunakan filter/backdrop blur pada navbar AI Asisten.
     * Blur dapat menciptakan pita putih saat content lewat di belakang.
     */
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /*
   * Pengaman bila dashboard.css memakai pseudo element untuk
   * highlight/shadow/fade dekoratif pada header.
   */
  .ai-asisten-page .dashboardMobileBrandHeader::before,
  .ai-asisten-page .dashboardMobileBrandHeader::after{
    box-shadow:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /*
   * Jangan tambahkan layer putih transparan di bawah navbar.
   * Jika pseudo-element hanya dekoratif, jadikan transparan.
   */
  .ai-asisten-page .dashboardMobileBrandHeader::after{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
  }


  /* -------------------------------------------------------
     FADE AREA: HANYA ALPHA MASK, TANPA WHITE SURFACE
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenPageContent,
  .ai-asisten-page .aiAsistenChatCard,
  .ai-asisten-page .aiAsistenMessages{
    /*
     * Pastikan zona overlap tidak punya shadow luar yang dapat
     * terbaca sebagai garis/pita putih ketika bubble memudar.
     */
    filter:none !important;
  }

  /*
   * Messages sendiri memang clean/transparan dari V13/V14.
   * Dikunci lagi agar tidak ada surface putih dari rule lebih awal
   * yang muncul di area fade atas.
   */
  .ai-asisten-page .aiAsistenMessages{
    background:transparent !important;
    background-image:none !important;
    border-top:0 !important;
    box-shadow:none !important;
  }

  /*
   * Fade V15 tetap dipertahankan, tetapi dibuat sedikit lebih
   * natural: transparan → semi → penuh tanpa transisi keras.
   */
  .ai-asisten-page .aiAsistenMessages{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.10) 7px,
        rgba(0,0,0,.28) 14px,
        rgba(0,0,0,.56) 22px,
        rgba(0,0,0,.82) 30px,
        #000000 38px,
        #000000 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.10) 7px,
        rgba(0,0,0,.28) 14px,
        rgba(0,0,0,.56) 22px,
        rgba(0,0,0,.82) 30px,
        #000000 38px,
        #000000 100%
      ) !important;
  }


  /* -------------------------------------------------------
     KEYBOARD ACTIVE
     ------------------------------------------------------- */
  body.ai-asisten-page.ai-mobile-keyboard-open
  .dashboardMobileBrandHeader{
    box-shadow:none !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenMessages{
    background:transparent !important;
    box-shadow:none !important;

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.16) 7px,
        rgba(0,0,0,.42) 14px,
        rgba(0,0,0,.74) 21px,
        #000000 29px,
        #000000 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.16) 7px,
        rgba(0,0,0,.42) 14px,
        rgba(0,0,0,.74) 21px,
        #000000 29px,
        #000000 100%
      ) !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .dashboardMobileBrandHeader{
    box-shadow:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMessages{
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }
}


@media (max-width:420px){
  /*
   * Tetap gunakan fade lembut dengan jarak lebih pendek
   * agar proporsional di layar kecil.
   */
  .ai-asisten-page .aiAsistenMessages{
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.12) 6px,
        rgba(0,0,0,.34) 13px,
        rgba(0,0,0,.64) 21px,
        rgba(0,0,0,.88) 28px,
        #000000 35px,
        #000000 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.12) 6px,
        rgba(0,0,0,.34) 13px,
        rgba(0,0,0,.64) 21px,
        rgba(0,0,0,.88) 28px,
        #000000 35px,
        #000000 100%
      ) !important;
  }
}

/* =========================================================
   END BUMIL KU - NATURAL TOP FADE V34
   ========================================================= */

/* =========================================================
   BUMIL KU - NAVBAR OCCLUSION NO HAZE V35
   =========================================================
   TUJUAN:
   - Menghilangkan white haze / kabut putih sepenuhnya.
   - Menghapus mask-image fade pada chat HP.
   - Chat tetap bergerak ke belakang navbar secara fisik.
   - Hilangnya chat terjadi karena tertutup navbar (occlusion),
     bukan karena opacity/mask transparan.
   - Navbar tetap tanpa shadow putih.
   - Tidak mengubah AI, Firebase, RAG, history, backup, delete,
     selection, city profile, chat time, scroll, atau keyboard.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     1. NAVBAR BENAR-BENAR SOLID TANPA SHADOW
     ------------------------------------------------------- */
  .ai-asisten-page .dashboardMobileBrandHeader{
    position:relative !important;
    z-index:100 !important;

    background:#FFFFFF !important;
    background-image:none !important;

    box-shadow:none !important;
    filter:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    overflow:visible !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .dashboardMobileBrandHeader{
    background:#102B30 !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  /*
   * Matikan seluruh pseudo-layer dekoratif di bawah navbar
   * agar tidak ada garis, gradient, blur, atau white halo.
   */
  .ai-asisten-page .dashboardMobileBrandHeader::before,
  .ai-asisten-page .dashboardMobileBrandHeader::after{
    content:none !important;
    display:none !important;

    background:none !important;
    background-image:none !important;

    border:0 !important;
    box-shadow:none !important;
    filter:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }


  /* -------------------------------------------------------
     2. CHAT TETAP MASUK KE BELAKANG NAVBAR
     ------------------------------------------------------- */

  /*
   * Area content tetap overlap ke bawah navbar.
   * Navbar memiliki z-index 100, content z-index 10.
   * Jadi bubble akan benar-benar lewat di belakang navbar.
   */
  .ai-asisten-page .aiAsistenPageContent{
    position:relative !important;
    z-index:10 !important;

    margin-top:-22px !important;
    padding-top:0 !important;

    overflow:hidden !important;
  }

  .ai-asisten-page .aiAsistenChatCard{
    position:relative !important;
    z-index:1 !important;

    overflow:hidden !important;
  }


  /* -------------------------------------------------------
     3. HAPUS MASK / FADE TRANSPARANSI TOTAL
     ------------------------------------------------------- */

  .ai-asisten-page .aiAsistenMessages{
    /*
     * Ini kunci utama V35.
     * Tidak ada lagi alpha mask yang membuat chat memutih.
     */
    -webkit-mask-image:none !important;
    mask-image:none !important;

    -webkit-mask:none !important;
    mask:none !important;

    /*
     * Messages tetap transparan agar tidak muncul surface baru.
     */
    background:transparent !important;
    background-image:none !important;

    border:0 !important;
    border-top:0 !important;

    box-shadow:none !important;
    filter:none !important;

    /*
     * Padding atas menjaga bubble awal tetap berada di posisi
     * nyaman ketika halaman pertama kali dibuka.
     * Saat scroll, bubble bisa naik melewati area ini dan masuk
     * ke belakang navbar.
     */
    padding-top:32px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    touch-action:pan-y !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;

    scroll-padding-top:32px !important;
  }

  /*
   * Bubble pertama tetap nyaman saat halaman baru dibuka.
   */
  .ai-asisten-page
  .aiAsistenMessages >
  .aiAsistenMessage:first-child{
    scroll-margin-top:32px !important;
  }


  /* -------------------------------------------------------
     4. PASTIKAN TIDAK ADA OVERLAY PUTIH LAIN
     ------------------------------------------------------- */

  .ai-asisten-page .aiAsistenPageContent::before,
  .ai-asisten-page .aiAsistenPageContent::after,
  .ai-asisten-page .aiAsistenChatCard::before,
  .ai-asisten-page .aiAsistenChatCard::after,
  .ai-asisten-page .aiAsistenMessages::before,
  .ai-asisten-page .aiAsistenMessages::after{
    content:none !important;
    display:none !important;

    background:none !important;
    background-image:none !important;

    box-shadow:none !important;
    filter:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }


  /* -------------------------------------------------------
     5. KEYBOARD ACTIVE
     ------------------------------------------------------- */

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenPageContent{
    margin-top:-16px !important;
    padding-top:0 !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenMessages{
    -webkit-mask-image:none !important;
    mask-image:none !important;

    -webkit-mask:none !important;
    mask:none !important;

    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    filter:none !important;

    padding-top:26px !important;
    scroll-padding-top:26px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .dashboardMobileBrandHeader{
    box-shadow:none !important;
    filter:none !important;
  }


  /* -------------------------------------------------------
     6. DARK MODE
     ------------------------------------------------------- */

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMessages{
    -webkit-mask-image:none !important;
    mask-image:none !important;

    -webkit-mask:none !important;
    mask:none !important;

    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }
}


@media (max-width:420px){

  .ai-asisten-page .aiAsistenPageContent{
    margin-top:-20px !important;
  }

  .ai-asisten-page .aiAsistenMessages{
    -webkit-mask-image:none !important;
    mask-image:none !important;

    -webkit-mask:none !important;
    mask:none !important;

    padding-top:30px !important;
    scroll-padding-top:30px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenPageContent{
    margin-top:-14px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenMessages{
    padding-top:24px !important;
    scroll-padding-top:24px !important;
  }
}


@media (max-width:380px){

  .ai-asisten-page .aiAsistenMessages{
    padding-top:28px !important;
    scroll-padding-top:28px !important;
  }
}

/* =========================================================
   END BUMIL KU - NAVBAR OCCLUSION NO HAZE V35
   ========================================================= */

/* =========================================================
   BUMIL KU - REFERENCE CARD WIDTH MATCH V36
   =========================================================
   TUJUAN:
   - Lebar horizontal card Sumber Referensi sama dengan
     bubble respons AI pada tampilan HP.
   - Posisi tetap rata kiri mengikuti bubble AI.
   - Expanded / collapsed tidak mengubah lebarnya.
   - Tidak mengubah isi referensi, RAG, Firebase, chat,
     scroll, keyboard, history, delete, atau JavaScript.
   ========================================================= */

@media (max-width:740px){

  /*
   * Bubble AI pada mobile menggunakan max-width 92%.
   * Panel sumber dibuat memakai lebar aktual 92% agar ujung
   * kiri dan kanan selaras dengan bubble respons AI.
   */
  .ai-asisten-page .aiAsistenSources,
  .ai-asisten-page .aiAsistenSourcePanel{
    flex:0 0 auto !important;

    width:92% !important;
    max-width:92% !important;
    min-width:0 !important;

    align-self:flex-start !important;

    margin-left:0 !important;
    margin-right:auto !important;

    box-sizing:border-box !important;
  }

  /*
   * Saat expanded, jangan izinkan width berubah akibat
   * scrollbar atau isi metadata yang panjang.
   */
  .ai-asisten-page .aiAsistenSources.is-expanded,
  .ai-asisten-page .aiAsistenSources:not(.is-collapsed){
    width:92% !important;
    max-width:92% !important;
    align-self:flex-start !important;
  }

  .ai-asisten-page .aiAsistenSourcesHead,
  .ai-asisten-page .aiAsistenSourcesBody,
  .ai-asisten-page .aiAsistenSourcesList{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /*
   * Metadata/file name panjang tetap wrap di dalam card dan
   * tidak memperlebar panel.
   */
  .ai-asisten-page .aiAsistenSourceItem,
  .ai-asisten-page .aiAsistenSourceItem strong,
  .ai-asisten-page .aiAsistenSourceItem small{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }
}


/* =========================================================
   <= 420px
   Bubble AI memakai 94%.
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page .aiAsistenSources,
  .ai-asisten-page .aiAsistenSourcePanel,
  .ai-asisten-page .aiAsistenSources.is-expanded,
  .ai-asisten-page .aiAsistenSources:not(.is-collapsed){
    width:94% !important;
    max-width:94% !important;
  }
}


/* =========================================================
   <= 380px
   Bubble AI memakai 97%.
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenSources,
  .ai-asisten-page .aiAsistenSourcePanel,
  .ai-asisten-page .aiAsistenSources.is-expanded,
  .ai-asisten-page .aiAsistenSources:not(.is-collapsed){
    width:97% !important;
    max-width:97% !important;
  }
}

/* =========================================================
   END BUMIL KU - REFERENCE CARD WIDTH MATCH V36
   ========================================================= */

/* =========================================================
   BUMIL KU - AI TYPING FULL VISIBILITY V37
   =========================================================
   TUJUAN:
   - Loading/typing AI selalu terlihat utuh.
   - Tidak tertutup composer ketika keyboard HP aktif.
   - Bubble typing tidak terkena padding-bottom chat time V33.
   - Area scroll menyediakan safe gap hanya saat AI membalas.
   - Tidak mengubah request AI, RAG, Firebase, history,
     sources, delete, selection, atau keyboard strategy.
   ========================================================= */

.ai-asisten-page .aiAsistenTypingMessage.is-visible{
  flex:0 0 auto !important;

  width:100% !important;
  min-height:44px !important;

  margin:4px 0 8px !important;
  padding:0 4px !important;

  align-items:center !important;

  overflow:visible !important;
  pointer-events:none !important;

  z-index:8 !important;
}

/*
 * Penting:
 * V33 memberi padding-bottom pada semua .aiAsistenBubble.
 * Typing bubble tidak mempunyai timestamp, jadi padding tersebut
 * harus di-reset agar loading tetap compact dan seluruh dot terlihat.
 */
.ai-asisten-page
.aiAsistenTypingMessage
.aiAsistenTypingBubble{
  width:auto !important;
  min-width:62px !important;
  max-width:92px !important;

  min-height:40px !important;
  height:40px !important;

  margin:0 !important;
  padding:10px 14px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;

  border-radius:16px !important;

  overflow:visible !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:740px){

  /*
   * Ketika AI sedang membalas, sediakan ruang kosong setelah
   * item terakhir. scrollMessagesToBottom akan ikut menghitung
   * padding ini sehingga typing bubble tidak berhimpitan dengan
   * composer.
   */
  body.ai-asisten-page.ai-replying
  .aiAsistenMessages{
    padding-bottom:48px !important;
    scroll-padding-bottom:48px !important;
  }

  .ai-asisten-page
  .aiAsistenTypingMessage.is-visible{
    min-height:44px !important;

    margin-top:4px !important;
    margin-bottom:10px !important;

    padding-left:4px !important;
    padding-right:4px !important;
  }

  .ai-asisten-page
  .aiAsistenTypingMessage
  .aiAsistenTypingBubble{
    min-width:62px !important;

    min-height:40px !important;
    height:40px !important;

    padding:9px 14px !important;

    border-radius:16px !important;

    box-shadow:
      0 8px 18px rgba(16,70,80,.08),
      0 2px 5px rgba(15,23,42,.035),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  /*
   * Keyboard aktif:
   * Tambahkan gap sedikit lebih besar karena composer berada tepat
   * di atas keyboard dan shadow composer juga membutuhkan ruang.
   */
  body.ai-asisten-page.ai-mobile-keyboard-open.ai-replying
  .aiAsistenMessages{
    padding-bottom:58px !important;
    scroll-padding-bottom:58px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open
  .aiAsistenTypingMessage.is-visible{
    margin-bottom:14px !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenTypingMessage
  .aiAsistenTypingBubble{
    box-shadow:
      0 8px 18px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  body.ai-asisten-page.ai-replying
  .aiAsistenMessages{
    padding-bottom:46px !important;
    scroll-padding-bottom:46px !important;
  }

  body.ai-asisten-page.ai-mobile-keyboard-open.ai-replying
  .aiAsistenMessages{
    padding-bottom:56px !important;
    scroll-padding-bottom:56px !important;
  }

  .ai-asisten-page
  .aiAsistenTypingMessage
  .aiAsistenTypingBubble{
    min-width:60px !important;
    height:39px !important;
    min-height:39px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  body.ai-asisten-page.ai-mobile-keyboard-open.ai-replying
  .aiAsistenMessages{
    padding-bottom:54px !important;
    scroll-padding-bottom:54px !important;
  }
}

/* =========================================================
   END BUMIL KU - AI TYPING FULL VISIBILITY V37
   ========================================================= */

/* =========================================================
   BUMIL KU - REMOVE AI ROBOT ICON V38
   =========================================================
   - Robot icon pada jawaban AI dihapus konsisten.
   - Tidak lagi tergantung breakpoint <=380px.
   - Typing/loading juga tanpa robot icon.
   - Icon error tetap dipertahankan.
   ========================================================= */

.ai-asisten-page
.aiAsistenMessage--bot:not(.aiAsistenMessage--error)
> .aiAsistenMessageIcon{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
}

.ai-asisten-page
.aiAsistenMessage--bot:not(.aiAsistenMessage--error){
  gap:0 !important;
}

.ai-asisten-page .aiAsistenTypingMessage{
  gap:0 !important;
}

.ai-asisten-page
.aiAsistenTypingMessage
> .aiAsistenMessageIcon{
  display:none !important;
}

@media (max-width:740px){
  .ai-asisten-page
  .aiAsistenMessage--bot:not(.aiAsistenMessage--error)
  > .aiAsistenMessageIcon{
    display:none !important;
  }

  .ai-asisten-page
  .aiAsistenMessage--bot:not(.aiAsistenMessage--error)
  .aiAsistenBubble{
    margin-left:0 !important;
  }

  .ai-asisten-page
  .aiAsistenTypingMessage.is-visible{
    justify-content:flex-start !important;
  }
}

/* =========================================================
   END BUMIL KU - REMOVE AI ROBOT ICON V38
   ========================================================= */

/* =========================================================
   BUMIL KU - SELECTION MORE MENU V40
   =========================================================
   TUJUAN:
   - Menambahkan icon ⋮ di kanan icon hapus saat selection mode.
   - Dropdown turun ke bawah dari sisi kanan navbar.
   - Menu pertama: Bersihkan Obrolan.
   - Tetap compact agar brand + institusi tidak tertimpa.
   - Tidak mengubah long-press V39, multi-select, Firebase,
     backup audit, AI, RAG, scroll, keyboard, dan chat.
   ========================================================= */

.ai-asisten-page .aiAsistenSelectionMoreWrap{
  display:none;
}

@media (max-width:740px){

  /* -------------------------------------------------------
     SELECTION ACTION BAR - COMPACT FOUR ACTIONS
     X | COUNT | DELETE | MORE
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:max(7px, env(safe-area-inset-right)) !important;

    width:max-content !important;
    max-width:142px !important;

    gap:3px !important;
    overflow:visible !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    flex:0 0 24px !important;
    width:24px !important;
    min-width:24px !important;

    height:34px !important;
    min-height:34px !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn i{
    font-size:14px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    flex:0 0 auto !important;

    width:auto !important;
    max-width:46px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    width:auto !important;
    max-width:46px !important;

    font-size:10.8px !important;
    line-height:1 !important;
    font-weight:800 !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    flex:0 0 27px !important;

    width:27px !important;
    min-width:27px !important;

    height:34px !important;
    min-height:34px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn i{
    font-size:15.5px !important;
  }


  /* -------------------------------------------------------
     MORE WRAPPER
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionMoreWrap{
    position:relative !important;

    flex:0 0 24px !important;

    width:24px !important;
    min-width:24px !important;
    height:34px !important;
    min-height:34px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    overflow:visible !important;

    z-index:180 !important;
  }


  /* -------------------------------------------------------
     VERTICAL ELLIPSIS BUTTON
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionMoreBtn{
    width:24px !important;
    height:34px !important;
    min-width:24px !important;
    min-height:34px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    outline:0 !important;
    border-radius:7px !important;

    background:transparent !important;
    background-image:none !important;

    box-shadow:none !important;

    color:#587181 !important;
    cursor:pointer !important;

    -webkit-tap-highlight-color:transparent !important;

    transition:
      color .16s ease,
      transform .16s ease,
      background .16s ease !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreBtn i{
    margin:0 !important;
    padding:0 !important;

    font-size:16px !important;
    line-height:1 !important;

    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreBtn:hover,
  .ai-asisten-page .aiAsistenSelectionMoreBtn:focus-visible,
  .ai-asisten-page
  .aiAsistenSelectionMoreBtn[aria-expanded="true"]{
    color:#0E9382 !important;
    background:rgba(14,147,130,.055) !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreBtn:active{
    transform:scale(.90) !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreBtn:focus-visible{
    outline:2px solid rgba(14,147,130,.22) !important;
    outline-offset:1px !important;
  }


  /* -------------------------------------------------------
     DROPDOWN
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    position:absolute !important;

    top:calc(100% + 7px) !important;
    right:-2px !important;
    left:auto !important;

    width:158px !important;
    min-width:158px !important;

    margin:0 !important;
    padding:6px !important;

    border-radius:13px !important;

    background:rgba(255,255,255,.99) !important;
    border:1px solid rgba(15,159,141,.12) !important;

    box-shadow:
      0 16px 32px rgba(15,23,42,.15),
      0 4px 10px rgba(16,70,80,.06),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    transform-origin:top right !important;

    animation:aiSelectionMoreDropV40 .16s ease-out !important;

    z-index:200 !important;

    overflow:hidden !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreMenu[hidden]{
    display:none !important;
  }


  /* -------------------------------------------------------
     BERSIHKAN OBROLAN ITEM
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSelectionClearChatBtn{
    width:100% !important;

    min-height:42px !important;

    margin:0 !important;
    padding:0 11px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;

    border:0 !important;
    border-radius:9px !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#294B5B !important;

    font-family:inherit !important;
    font-size:11.6px !important;
    line-height:1 !important;
    font-weight:700 !important;

    text-align:left !important;

    cursor:pointer !important;

    transition:
      background .16s ease,
      color .16s ease,
      opacity .16s ease !important;
  }

  .ai-asisten-page .aiAsistenSelectionClearChatBtn i{
    flex:0 0 16px !important;

    width:16px !important;
    margin:0 !important;

    text-align:center !important;

    color:#6B8190 !important;

    font-size:12.5px !important;
    line-height:1 !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionClearChatBtn:not(:disabled):hover,
  .ai-asisten-page
  .aiAsistenSelectionClearChatBtn:not(:disabled):focus-visible{
    background:rgba(14,147,130,.065) !important;
    color:#0E9382 !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionClearChatBtn:not(:disabled):active{
    background:rgba(14,147,130,.095) !important;
  }

  .ai-asisten-page .aiAsistenSelectionClearChatBtn:disabled,
  .ai-asisten-page
  .aiAsistenSelectionClearChatBtn[aria-disabled="true"]{
    cursor:not-allowed !important;
    opacity:.42 !important;
  }

  .ai-asisten-page .aiAsistenSelectionClearChatBtn.is-loading{
    cursor:wait !important;
    opacity:.68 !important;
    pointer-events:none !important;
  }

  .ai-asisten-page .aiAsistenSelectionClearChatBtn.is-loading i{
    animation:aiDeleteSpin .85s linear infinite !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMoreBtn{
    color:#B7D2D5 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMoreBtn:hover,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMoreBtn:focus-visible,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionMoreBtn[aria-expanded="true"]{
    color:#53EBE8 !important;
    background:rgba(83,235,232,.055) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    background:rgba(11,32,36,.99) !important;
    border-color:rgba(83,235,232,.10) !important;

    box-shadow:
      0 16px 32px rgba(0,0,0,.38),
      0 4px 10px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionClearChatBtn{
    color:#DCEDEF !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionClearChatBtn i{
    color:#A7BEC5 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionClearChatBtn:not(:disabled):hover,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionClearChatBtn:not(:disabled):focus-visible{
    background:rgba(83,235,232,.07) !important;
    color:#53EBE8 !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:5px !important;
    max-width:134px !important;
    gap:2px !important;
  }

  .ai-asisten-page .aiAsistenSelectionCancelBtn{
    flex-basis:23px !important;
    width:23px !important;
    min-width:23px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:44px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:44px !important;
    font-size:10.4px !important;
  }

  .ai-asisten-page .aiAsistenSelectionDeleteBtn{
    flex-basis:26px !important;
    width:26px !important;
    min-width:26px !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreWrap,
  .ai-asisten-page .aiAsistenSelectionMoreBtn{
    width:23px !important;
    min-width:23px !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreBtn i{
    font-size:15.5px !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:154px !important;
    min-width:154px !important;
    right:-1px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenMessageSelectionBar{
    right:4px !important;
    max-width:128px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo{
    max-width:41px !important;
  }

  .ai-asisten-page .aiAsistenSelectionInfo strong{
    max-width:41px !important;
    font-size:10px !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:150px !important;
    min-width:150px !important;
  }
}


@keyframes aiSelectionMoreDropV40{
  from{
    opacity:0;
    transform:translateY(-6px) scale(.975);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* =========================================================
   END BUMIL KU - SELECTION MORE MENU V40
   ========================================================= */

/* =========================================================
   BUMIL KU - CHAT TOOLS V41
   =========================================================
   MENU:
   - Pilih Semua
   - Salin Chat
   - Ekspor Obrolan
   - Tentang AI Asisten
   - Bersihkan Obrolan
   ========================================================= */

/* ---------------------------------------------------------
   SELECTION MENU - EXPANDED PROFESSIONAL LIST
   --------------------------------------------------------- */
@media (max-width:740px){

  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:202px !important;
    min-width:202px !important;

    padding:7px !important;

    border-radius:15px !important;

    overflow:hidden !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuItem{
    width:100% !important;
    min-height:40px !important;

    margin:0 !important;
    padding:0 11px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;

    border:0 !important;
    outline:0 !important;
    border-radius:9px !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#294B5B !important;

    font-family:inherit !important;
    font-size:11.5px !important;
    line-height:1.1 !important;
    font-weight:650 !important;

    text-align:left !important;

    cursor:pointer !important;

    transition:
      background .15s ease,
      color .15s ease,
      opacity .15s ease !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuItem i{
    flex:0 0 17px !important;
    width:17px !important;

    margin:0 !important;
    padding:0 !important;

    color:#6B8190 !important;

    font-size:12.5px !important;
    line-height:1 !important;

    text-align:center !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuItem span{
    min-width:0 !important;
    flex:1 1 auto !important;

    white-space:nowrap !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionMenuItem:not(:disabled):hover,
  .ai-asisten-page
  .aiAsistenSelectionMenuItem:not(:disabled):focus-visible{
    background:rgba(14,147,130,.065) !important;
    color:#0E9382 !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionMenuItem:not(:disabled):hover i,
  .ai-asisten-page
  .aiAsistenSelectionMenuItem:not(:disabled):focus-visible i{
    color:#0E9382 !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuItem:disabled,
  .ai-asisten-page
  .aiAsistenSelectionMenuItem[aria-disabled="true"]{
    cursor:not-allowed !important;
    opacity:.42 !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuDivider{
    width:calc(100% - 12px) !important;
    height:1px !important;

    margin:5px 6px !important;

    background:rgba(100,116,139,.14) !important;
    border:0 !important;
  }

  /*
   * Destructive action:
   * default tetap netral; merah hanya saat hover/focus.
   */
  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger{
    color:#445F6E !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger i{
    color:#718696 !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger:not(:disabled):hover,
  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger:not(:disabled):focus-visible{
    background:rgba(239,68,68,.075) !important;
    color:#DC2626 !important;
  }

  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger:not(:disabled):hover i,
  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger:not(:disabled):focus-visible i{
    color:#DC2626 !important;
  }

  /*
   * Compatibility: class V40 lama pada Bersihkan Obrolan.
   */
  .ai-asisten-page .aiAsistenSelectionClearChatBtn{
    width:100% !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMenuItem{
    color:#DCEDEF !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMenuItem i{
    color:#A7BEC5 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSelectionMenuDivider{
    background:rgba(255,255,255,.09) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionMenuItem:not(:disabled):hover,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionMenuItem:not(:disabled):focus-visible{
    background:rgba(83,235,232,.07) !important;
    color:#53EBE8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger{
    color:#C5D8DB !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger:not(:disabled):hover,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenSelectionMenuItem.aiAsistenSelectionMenuItem--danger:not(:disabled):focus-visible{
    background:rgba(248,113,113,.09) !important;
    color:#F87171 !important;
  }
}


/* ---------------------------------------------------------
   ABOUT AI DIALOG
   --------------------------------------------------------- */
.ai-asisten-page .aiAsistenAboutOverlay{
  position:fixed !important;
  inset:0 !important;

  z-index:500 !important;

  display:grid !important;
  place-items:center !important;

  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)) !important;

  background:rgba(15,23,42,.22) !important;

  opacity:0 !important;
  visibility:hidden !important;

  transition:
    opacity .18s ease,
    visibility .18s ease !important;
}

.ai-asisten-page .aiAsistenAboutOverlay[hidden]{
  display:none !important;
}

.ai-asisten-page .aiAsistenAboutOverlay.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}

.ai-asisten-page .aiAsistenAboutDialog{
  width:min(100%, 360px) !important;

  margin:0 !important;
  padding:17px !important;

  border-radius:20px !important;

  background:rgba(255,255,255,.99) !important;
  border:1px solid rgba(15,159,141,.12) !important;

  box-shadow:
    0 24px 56px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.98) !important;

  transform:translateY(8px) scale(.985) !important;

  transition:transform .18s ease !important;
}

.ai-asisten-page
.aiAsistenAboutOverlay.is-visible
.aiAsistenAboutDialog{
  transform:translateY(0) scale(1) !important;
}

.ai-asisten-page .aiAsistenAboutHead{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
}

.ai-asisten-page .aiAsistenAboutHead small{
  display:block !important;

  margin:0 0 4px !important;

  color:#0E9382 !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:700 !important;

  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

.ai-asisten-page .aiAsistenAboutHead h2{
  margin:0 !important;

  color:#17384A !important;

  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.ai-asisten-page .aiAsistenAboutCloseBtn{
  flex:0 0 34px !important;

  width:34px !important;
  height:34px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  border-radius:10px !important;

  background:#F5FAF9 !important;
  color:#607786 !important;

  box-shadow:none !important;

  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenAboutCloseBtn i{
  font-size:14px !important;
}

.ai-asisten-page .aiAsistenAboutBody{
  margin-top:14px !important;

  display:grid !important;
  gap:10px !important;
}

.ai-asisten-page .aiAsistenAboutBody p{
  margin:0 !important;

  color:#657A89 !important;

  font-size:12px !important;
  line-height:1.6 !important;
  font-weight:450 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenAboutOverlay{
  background:rgba(0,0,0,.46) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenAboutDialog{
  background:#102B30 !important;
  border-color:rgba(83,235,232,.11) !important;

  box-shadow:
    0 24px 56px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenAboutHead h2{
  color:#E8FBF8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenAboutBody p{
  color:#A9C0C5 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenAboutCloseBtn{
  background:#16383E !important;
  color:#B7D2D5 !important;
}


/* ---------------------------------------------------------
   ACTION TOAST
   --------------------------------------------------------- */
.ai-asisten-page .aiAsistenActionToast{
  position:fixed !important;

  left:50% !important;
  bottom:calc(54px + env(safe-area-inset-bottom)) !important;

  z-index:550 !important;

  width:max-content !important;
  max-width:calc(100vw - 28px) !important;

  margin:0 !important;
  padding:9px 13px !important;

  border-radius:999px !important;

  background:rgba(23,56,74,.94) !important;
  color:#FFFFFF !important;

  box-shadow:0 10px 24px rgba(15,23,42,.18) !important;

  font-size:10.5px !important;
  line-height:1.15 !important;
  font-weight:600 !important;

  text-align:center !important;

  opacity:0 !important;
  transform:translate(-50%, 7px) !important;

  pointer-events:none !important;

  transition:
    opacity .18s ease,
    transform .18s ease !important;
}

.ai-asisten-page .aiAsistenActionToast[hidden]{
  display:none !important;
}

.ai-asisten-page .aiAsistenActionToast.is-visible{
  opacity:1 !important;
  transform:translate(-50%, 0) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenActionToast{
  background:rgba(225,246,244,.94) !important;
  color:#12383B !important;
}


/* ---------------------------------------------------------
   <= 420
   --------------------------------------------------------- */
@media (max-width:420px){

  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:194px !important;
    min-width:194px !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuItem{
    min-height:39px !important;
    padding-left:10px !important;
    padding-right:10px !important;

    font-size:11.2px !important;
  }

  .ai-asisten-page .aiAsistenAboutDialog{
    width:min(100%, 334px) !important;
    padding:16px !important;
  }
}


/* ---------------------------------------------------------
   <= 380
   --------------------------------------------------------- */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:188px !important;
    min-width:188px !important;
  }

  .ai-asisten-page .aiAsistenSelectionMenuItem{
    font-size:10.9px !important;
  }
}

/* =========================================================
   END BUMIL KU - CHAT TOOLS V41
   ========================================================= */

/* =========================================================
   BUMIL KU - DEFAULT NAVBAR VERTICAL MORE V42
   =========================================================
   TUJUAN:
   - Tombol tiga titik vertikal selalu terlihat pada navbar HP.
   - Posisi tepat di sebelah kanan foto profil.
   - Nama + kota tetap non-card dan tetap tampil.
   - Foto profil tetap menjadi link ke halaman Profil.
   - Tombol ⋮ memakai fungsi menu existing #btnAiAsistenMobileMore.
   - Selection mode V40/V41 tetap memakai tombol ⋮ contextual sendiri.
   - Tidak mengubah AI, Firebase, RAG, history, export, copy,
     backup audit, scroll, keyboard, maupun long-press.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     PROFILE CLUSTER
     Nama | Foto | ⋮
     ------------------------------------------------------- */
  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:6px !important;

    overflow:visible !important;
  }

  /*
   * Nama + kota sekarang hanya informasi visual.
   * Menu utama dipicu oleh tombol ⋮ di kanan foto.
   */
  .ai-asisten-page
  .aiAsistenMobileUserIdentity.aiAsistenMobileUserMenuTrigger{
    order:1 !important;

    cursor:default !important;
    pointer-events:none !important;

    transform:none !important;
  }

  .ai-asisten-page .aiAsistenMobileUserPhotoLink{
    order:2 !important;
  }


  /* -------------------------------------------------------
     DEFAULT VERTICAL MORE BUTTON
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn{
    order:3 !important;

    flex:0 0 25px !important;

    width:25px !important;
    min-width:25px !important;

    height:40px !important;
    min-height:40px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    outline:0 !important;
    border-radius:8px !important;

    background:transparent !important;
    background-image:none !important;

    box-shadow:none !important;

    color:#0E9382 !important;

    cursor:pointer !important;

    -webkit-tap-highlight-color:transparent !important;

    transition:
      color .16s ease,
      background .16s ease,
      transform .16s ease,
      opacity .16s ease !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn i{
    margin:0 !important;
    padding:0 !important;

    font-size:18px !important;
    line-height:1 !important;

    color:inherit !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn:hover,
  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn:focus-visible,
  .ai-asisten-page
  .aiAsistenMobileDefaultMoreBtn[aria-expanded="true"]{
    color:#087F78 !important;
    background:rgba(14,147,130,.055) !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn:active{
    transform:scale(.91) !important;
    background:rgba(14,147,130,.075) !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn:focus-visible{
    outline:2px solid rgba(14,147,130,.22) !important;
    outline-offset:1px !important;
  }


  /* -------------------------------------------------------
     DROPDOWN
     Anchor ke ujung kanan cluster, yaitu tombol ⋮.
     ------------------------------------------------------- */
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline{
    right:0 !important;
    left:auto !important;

    transform-origin:top right !important;

    z-index:150 !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn{
    color:#53EBE8 !important;
    background:transparent !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn:hover,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn:focus-visible,
  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileDefaultMoreBtn[aria-expanded="true"]{
    color:#7FF4F1 !important;
    background:rgba(83,235,232,.06) !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    gap:5px !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn{
    flex-basis:23px !important;

    width:23px !important;
    min-width:23px !important;

    height:38px !important;
    min-height:38px !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn i{
    font-size:17px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page
  .aiAsistenMobileChatMenu.aiAsistenMobileChatMenu--navbar.aiAsistenMobileProfileInline{
    gap:4px !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn{
    flex-basis:22px !important;

    width:22px !important;
    min-width:22px !important;

    height:36px !important;
    min-height:36px !important;
  }

  .ai-asisten-page .aiAsistenMobileDefaultMoreBtn i{
    font-size:16.5px !important;
  }
}

/* =========================================================
   END BUMIL KU - DEFAULT NAVBAR VERTICAL MORE V42
   ========================================================= */

/* =========================================================
   BUMIL KU - DEFAULT NAVBAR FULL CHAT TOOLS V43
   =========================================================
   TUJUAN:
   - Klik ⋮ di kanan foto profil menampilkan menu lengkap yang
     visualnya sama dengan menu contextual selection V41.
   - Menu: Pilih Semua, Salin Chat, Ekspor Obrolan,
     Tentang AI Asisten, Bersihkan Obrolan.
   - Selection menu existing tetap dipertahankan.
   - Tidak mengubah AI, Firebase, RAG, history, backup audit,
     long-press, keyboard, scroll, atau layout desktop.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     DEFAULT MENU CONTAINER = VISUAL V41
     ------------------------------------------------------- */
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenDefaultChatToolsMenu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:0 !important;
    left:auto !important;

    width:202px !important;
    min-width:202px !important;
    max-width:202px !important;

    min-height:0 !important;

    margin:0 !important;
    padding:7px !important;

    border-radius:15px !important;
    overflow:hidden !important;

    background:rgba(255,255,255,.985) !important;
    border:1px solid rgba(148,163,184,.18) !important;

    box-shadow:
      0 16px 34px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.98) !important;

    transform-origin:top right !important;
    animation:aiSelectionMoreDropV40 .18s ease-out !important;

    z-index:160 !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenDefaultChatToolsMenu[hidden]{
    display:none !important;
  }

  /*
   * Seluruh item memakai class V41 yang sama.
   * Rule ini hanya mengunci ukuran agar style V26 delete lama
   * tidak mengambil alih tombol Bersihkan Obrolan default.
   */
  .ai-asisten-page
  .aiAsistenDefaultChatToolsMenu .aiAsistenSelectionMenuItem{
    width:100% !important;
    min-height:40px !important;
    height:auto !important;

    margin:0 !important;
    padding:0 11px !important;

    border:0 !important;
    border-radius:9px !important;

    background:transparent !important;
    box-shadow:none !important;

    font-size:11.5px !important;
    line-height:1.1 !important;
    font-weight:650 !important;
  }

  .ai-asisten-page
  .aiAsistenDefaultChatToolsMenu .aiAsistenSelectionMenuItem i{
    width:17px !important;
    min-width:17px !important;
    flex:0 0 17px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:12.5px !important;
    line-height:1 !important;
  }

  .ai-asisten-page
  .aiAsistenDefaultChatToolsMenu .aiAsistenSelectionMenuDivider{
    margin:5px 8px !important;
  }

  .ai-asisten-page
  .aiAsistenDefaultChatToolsMenu
  .aiAsistenSelectionMenuItem.is-loading{
    cursor:wait !important;
    opacity:.70 !important;
    pointer-events:none !important;
  }

  .ai-asisten-page
  .aiAsistenDefaultChatToolsMenu
  .aiAsistenSelectionMenuItem.is-loading i{
    animation:aiDeleteSpin .85s linear infinite !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenDefaultChatToolsMenu{
    background:rgba(11,32,36,.985) !important;
    border-color:rgba(255,255,255,.07) !important;

    box-shadow:
      0 16px 34px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.045) !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenDefaultChatToolsMenu{
    width:196px !important;
    min-width:196px !important;
    max-width:196px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenDefaultChatToolsMenu{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
  }
}

/* =========================================================
   END BUMIL KU - DEFAULT NAVBAR FULL CHAT TOOLS V43
   ========================================================= */

/* =========================================================
   BUMIL KU - SEARCH + SAVE + REPORT V44
   ========================================================= */

/* Menu sedikit lebih lebar karena item baru. */
@media (max-width:740px){
  .ai-asisten-page .aiAsistenDefaultChatToolsMenu{
    width:220px !important;
    min-width:220px !important;
    max-height:min(72dvh, 420px) !important;
    overflow-y:auto !important;
  }

  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:220px !important;
    min-width:220px !important;
    max-height:min(72dvh, 450px) !important;
    overflow-y:auto !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenDefaultChatToolsMenu,
  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    width:208px !important;
    min-width:208px !important;
  }
}


/* =========================================================
   SAVED MESSAGE MARKER
========================================================= */
.ai-asisten-page .aiAsistenBubble{
  position:relative !important;
}

.ai-asisten-page .aiAsistenSavedMarker{
  position:absolute !important;
  left:10px !important;
  bottom:7px !important;

  width:14px !important;
  height:14px !important;

  display:grid !important;
  place-items:center !important;

  color:#0E9382 !important;

  font-size:8.5px !important;
  line-height:1 !important;

  opacity:.72 !important;

  pointer-events:none !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedMarker{
  color:#53EBE8 !important;
}


/* =========================================================
   CHAT SEARCH MATCH
========================================================= */
.ai-asisten-page
.aiAsistenMessage.is-chat-search-match
.aiAsistenBubble{
  border-color:rgba(14,147,130,.30) !important;

  box-shadow:
    0 0 0 2px rgba(14,147,130,.07),
    0 8px 20px rgba(16,70,80,.08) !important;
}

.ai-asisten-page
.aiAsistenMessage.is-chat-search-current
.aiAsistenBubble{
  border-color:rgba(14,147,130,.58) !important;

  box-shadow:
    0 0 0 3px rgba(14,147,130,.13),
    0 11px 25px rgba(16,70,80,.12) !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage.is-chat-search-current
.aiAsistenBubble{
  border-color:rgba(83,235,232,.52) !important;

  box-shadow:
    0 0 0 3px rgba(83,235,232,.09),
    0 11px 25px rgba(0,0,0,.30) !important;
}


/* =========================================================
   SEARCH FLOATING PANEL
========================================================= */
.ai-asisten-page .aiAsistenSearchOverlay{
  position:fixed !important;
  inset:0 !important;

  z-index:520 !important;

  pointer-events:none !important;

  opacity:0 !important;
  visibility:hidden !important;

  transition:
    opacity .16s ease,
    visibility .16s ease !important;
}

.ai-asisten-page .aiAsistenSearchOverlay[hidden]{
  display:none !important;
}

.ai-asisten-page .aiAsistenSearchOverlay.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}

.ai-asisten-page .aiAsistenSearchPanel{
  position:absolute !important;

  top:max(10px, env(safe-area-inset-top)) !important;
  left:50% !important;

  transform:translateX(-50%) !important;

  width:min(calc(100vw - 20px), 430px) !important;
  min-height:54px !important;

  padding:7px !important;

  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:7px !important;

  pointer-events:auto !important;

  background:rgba(255,255,255,.99) !important;
  border:1px solid rgba(15,159,141,.12) !important;
  border-radius:17px !important;

  box-shadow:
    0 16px 36px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.ai-asisten-page .aiAsistenSearchCloseBtn,
.ai-asisten-page .aiAsistenSearchNav button{
  width:34px !important;
  height:36px !important;

  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  border:0 !important;
  border-radius:10px !important;

  background:transparent !important;
  color:#607786 !important;

  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenSearchCloseBtn i,
.ai-asisten-page .aiAsistenSearchNav button i{
  font-size:13px !important;
}

.ai-asisten-page .aiAsistenSearchNav{
  display:flex !important;
  align-items:center !important;
  gap:1px !important;
}

.ai-asisten-page .aiAsistenSearchNav button{
  width:28px !important;
}

.ai-asisten-page .aiAsistenSearchNav button:disabled{
  opacity:.30 !important;
  cursor:not-allowed !important;
}

.ai-asisten-page .aiAsistenSearchInputWrap{
  min-width:0 !important;
  height:40px !important;

  padding:0 11px !important;

  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  border-radius:12px !important;

  background:#F5FAF9 !important;
  border:1px solid rgba(15,159,141,.10) !important;
}

.ai-asisten-page .aiAsistenSearchInputWrap i{
  color:#0E9382 !important;
  font-size:11px !important;
}

.ai-asisten-page .aiAsistenSearchInput{
  width:100% !important;
  min-width:0 !important;

  padding:0 !important;

  border:0 !important;
  outline:0 !important;

  background:transparent !important;
  color:#17384A !important;

  font-family:inherit !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:500 !important;
}

.ai-asisten-page .aiAsistenSearchCount{
  min-width:60px !important;

  color:#718696 !important;

  font-size:9.4px !important;
  line-height:1 !important;
  font-weight:550 !important;
  text-align:right !important;
  white-space:nowrap !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSearchPanel{
  background:#102B30 !important;
  border-color:rgba(83,235,232,.11) !important;

  box-shadow:
    0 16px 36px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSearchInputWrap{
  background:#16383E !important;
  border-color:rgba(83,235,232,.08) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSearchInput{
  color:#E8FBF8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSearchCloseBtn,
html[data-theme="dark"]
.ai-asisten-page .aiAsistenSearchNav button{
  color:#B7D2D5 !important;
}


/* =========================================================
   REPORT DIALOG
========================================================= */
.ai-asisten-page .aiAsistenReportOverlay{
  position:fixed !important;
  inset:0 !important;

  z-index:540 !important;

  display:grid !important;
  place-items:center !important;

  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)) !important;

  background:rgba(15,23,42,.24) !important;

  opacity:0 !important;
  visibility:hidden !important;

  transition:
    opacity .18s ease,
    visibility .18s ease !important;
}

.ai-asisten-page .aiAsistenReportOverlay[hidden]{
  display:none !important;
}

.ai-asisten-page .aiAsistenReportOverlay.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}

.ai-asisten-page .aiAsistenReportDialog{
  width:min(100%, 370px) !important;

  padding:17px !important;

  border-radius:20px !important;

  background:rgba(255,255,255,.99) !important;
  border:1px solid rgba(15,159,141,.12) !important;

  box-shadow:
    0 24px 56px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.ai-asisten-page .aiAsistenReportHead{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
}

.ai-asisten-page .aiAsistenReportHead small{
  display:block !important;

  margin:0 0 4px !important;

  color:#0E9382 !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:700 !important;

  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

.ai-asisten-page .aiAsistenReportHead h2{
  margin:0 !important;

  color:#17384A !important;

  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.ai-asisten-page .aiAsistenReportCloseBtn{
  flex:0 0 34px !important;

  width:34px !important;
  height:34px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border:0 !important;
  border-radius:10px !important;

  background:#F5FAF9 !important;
  color:#607786 !important;

  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenReportForm{
  margin-top:15px !important;

  display:grid !important;
  gap:12px !important;
}

.ai-asisten-page .aiAsistenReportForm label{
  display:grid !important;
  gap:6px !important;

  color:#294B5B !important;

  font-size:10.5px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
}

.ai-asisten-page .aiAsistenReportForm label small{
  font-weight:400 !important;
  color:#7A8E9B !important;
}

.ai-asisten-page .aiAsistenReportForm select,
.ai-asisten-page .aiAsistenReportForm textarea{
  width:100% !important;

  border:1px solid rgba(15,159,141,.13) !important;
  outline:0 !important;
  border-radius:12px !important;

  background:#F8FCFB !important;
  color:#17384A !important;

  font-family:inherit !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

.ai-asisten-page .aiAsistenReportForm select{
  min-height:42px !important;
  padding:0 11px !important;
}

.ai-asisten-page .aiAsistenReportForm textarea{
  min-height:92px !important;
  padding:10px 11px !important;
  resize:vertical !important;
}

.ai-asisten-page .aiAsistenReportSubmitBtn{
  min-height:43px !important;

  padding:0 14px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  border:0 !important;
  border-radius:13px !important;

  background:var(--primaryGrad) !important;
  color:#FFFFFF !important;

  box-shadow:var(--primaryShadow) !important;

  font-family:inherit !important;
  font-size:11.5px !important;
  font-weight:750 !important;

  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenReportSubmitBtn.is-loading{
  opacity:.65 !important;
  cursor:wait !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenReportDialog{
  background:#102B30 !important;
  border-color:rgba(83,235,232,.11) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenReportHead h2,
html[data-theme="dark"]
.ai-asisten-page .aiAsistenReportForm label{
  color:#E8FBF8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenReportForm select,
html[data-theme="dark"]
.ai-asisten-page .aiAsistenReportForm textarea{
  background:#16383E !important;
  border-color:rgba(83,235,232,.10) !important;
  color:#E8FBF8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenReportCloseBtn{
  background:#16383E !important;
  color:#B7D2D5 !important;
}


/* Small screens */
@media (max-width:420px){
  .ai-asisten-page .aiAsistenSearchPanel{
    width:calc(100vw - 14px) !important;
    grid-template-columns:32px minmax(0,1fr) auto !important;
  }

  .ai-asisten-page .aiAsistenSearchCount{
    grid-column:2 / 3 !important;
    grid-row:2 !important;
    text-align:left !important;
    padding-left:4px !important;
  }

  .ai-asisten-page .aiAsistenSearchNav{
    grid-column:3 / 4 !important;
    grid-row:1 / 3 !important;
  }

  .ai-asisten-page .aiAsistenReportDialog{
    width:min(100%, 342px) !important;
  }
}

/* =========================================================
   END BUMIL KU - SEARCH + SAVE + REPORT V44
   ========================================================= */


/* =========================================================
   BUMIL KU - SEARCH PANEL NAVBAR EXACT MATCH V45
   =========================================================
   TUJUAN:
   - Search panel menjadi pengganti navbar mobile sementara.
   - Posisi, lebar, dan tinggi mengikuti navbar aktual dari JS.
   - Navbar normal tertutup penuh, bukan terlihat di belakang.
   - Search dibuat satu baris, compact, dan proporsional.
   - Tidak mengubah fungsi pencarian V44, chat, scroll, keyboard,
     Firebase, history, backup, delete, save, report, atau RAG.
   ========================================================= */

@media (max-width:740px){

  /* -------------------------------------------------------
     OVERLAY
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSearchOverlay{
    position:fixed !important;
    inset:0 !important;

    z-index:1000 !important;

    background:transparent !important;

    pointer-events:none !important;

    opacity:0 !important;
    visibility:hidden !important;

    transition:
      opacity .14s ease,
      visibility .14s ease !important;
  }

  .ai-asisten-page .aiAsistenSearchOverlay[hidden]{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSearchOverlay.is-visible{
    opacity:1 !important;
    visibility:visible !important;
  }


  /* -------------------------------------------------------
     PANEL = NAVBAR REPLACEMENT
     Geometry disuplai JS dari getBoundingClientRect navbar.
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSearchPanel{
    position:fixed !important;

    left:var(--ai-search-navbar-left, 0px) !important;
    top:var(--ai-search-navbar-top, 0px) !important;

    width:var(--ai-search-navbar-width, 100vw) !important;
    max-width:none !important;

    height:var(--ai-search-navbar-height, 64px) !important;
    min-height:var(--ai-search-navbar-height, 64px) !important;
    max-height:var(--ai-search-navbar-height, 64px) !important;

    transform:none !important;

    margin:0 !important;

    padding:
      0
      max(10px, env(safe-area-inset-right))
      0
      max(10px, env(safe-area-inset-left)) !important;

    display:grid !important;

    /*
     * X | input | counter | up | down
     * Semuanya satu baris agar tinggi persis navbar.
     */
    grid-template-columns:
      32px
      minmax(0,1fr)
      auto
      28px
      28px !important;

    grid-template-rows:1fr !important;

    align-items:center !important;
    justify-items:stretch !important;

    column-gap:5px !important;
    row-gap:0 !important;

    pointer-events:auto !important;

    overflow:hidden !important;

    background:#FFFFFF !important;
    background-image:none !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    z-index:1001 !important;
  }


  /* -------------------------------------------------------
     CLOSE
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSearchCloseBtn{
    grid-column:1 !important;
    grid-row:1 !important;

    width:32px !important;
    height:38px !important;
    min-width:32px !important;
    min-height:38px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:9px !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#5C7483 !important;

    cursor:pointer !important;
  }

  .ai-asisten-page .aiAsistenSearchCloseBtn i{
    font-size:16px !important;
    line-height:1 !important;
  }

  .ai-asisten-page .aiAsistenSearchCloseBtn:active{
    transform:scale(.93) !important;
    color:#0E9382 !important;
  }


  /* -------------------------------------------------------
     INPUT
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSearchInputWrap{
    grid-column:2 !important;
    grid-row:1 !important;

    width:100% !important;
    min-width:0 !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    margin:0 !important;
    padding:0 11px !important;

    display:flex !important;
    align-items:center !important;
    gap:8px !important;

    background:#F8FCFB !important;
    background-image:none !important;

    border:1px solid rgba(15,159,141,.14) !important;
    border-radius:13px !important;

    box-shadow:none !important;

    overflow:hidden !important;
  }

  .ai-asisten-page .aiAsistenSearchInputWrap:focus-within{
    background:#FFFFFF !important;

    border-color:rgba(14,147,130,.26) !important;

    box-shadow:
      0 0 0 2px rgba(14,147,130,.06) !important;
  }

  .ai-asisten-page .aiAsistenSearchInputWrap > i{
    flex:0 0 auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#0AA59C !important;

    font-size:12px !important;
    line-height:1 !important;
  }

  .ai-asisten-page .aiAsistenSearchInput{
    width:100% !important;
    min-width:0 !important;

    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#17384A !important;

    font-family:inherit !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:500 !important;

    -webkit-appearance:none !important;
    appearance:none !important;
  }

  .ai-asisten-page .aiAsistenSearchInput::placeholder{
    color:#6F8492 !important;
    opacity:.90 !important;
  }

  /*
   * Hilangkan tombol clear native Chrome/Safari agar layout tidak
   * bertabrakan dengan counter + navigasi di kanan.
   */
  .ai-asisten-page .aiAsistenSearchInput::-webkit-search-cancel-button{
    display:none !important;
    -webkit-appearance:none !important;
  }


  /* -------------------------------------------------------
     COUNTER
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSearchCount{
    grid-column:3 !important;
    grid-row:1 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:66px !important;

    margin:0 2px 0 1px !important;
    padding:0 !important;

    color:#718696 !important;

    font-size:8.7px !important;
    line-height:1 !important;
    font-weight:500 !important;

    text-align:right !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }


  /* -------------------------------------------------------
     NAV PREV / NEXT
     Wrapper dibuka secara display:contents agar dua tombol
     menempati kolom navbar secara langsung.
     ------------------------------------------------------- */
  .ai-asisten-page .aiAsistenSearchNav{
    display:contents !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button{
    width:28px !important;
    height:38px !important;
    min-width:28px !important;
    min-height:38px !important;

    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    place-items:center !important;

    border:0 !important;
    border-radius:8px !important;

    background:transparent !important;
    box-shadow:none !important;

    color:#607786 !important;

    cursor:pointer !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button:first-child{
    grid-column:4 !important;
    grid-row:1 !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button:last-child{
    grid-column:5 !important;
    grid-row:1 !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button i{
    font-size:12px !important;
    line-height:1 !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button:not(:disabled):active{
    transform:scale(.92) !important;
    color:#0E9382 !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button:disabled{
    opacity:.28 !important;
    cursor:not-allowed !important;
    transform:none !important;
  }


  /* -------------------------------------------------------
     DARK MODE
     ------------------------------------------------------- */
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchPanel{
    background:#102B30 !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchInputWrap{
    background:#16383E !important;
    border-color:rgba(83,235,232,.11) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchInputWrap:focus-within{
    background:#173C42 !important;
    border-color:rgba(83,235,232,.24) !important;

    box-shadow:
      0 0 0 2px rgba(83,235,232,.05) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchInput{
    color:#E8FBF8 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchInput::placeholder{
    color:#A0B8BE !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchCloseBtn,
  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchNav button{
    color:#B7D2D5 !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSearchCount{
    color:#9AB5BA !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page .aiAsistenSearchPanel{
    padding:
      0
      max(8px, env(safe-area-inset-right))
      0
      max(8px, env(safe-area-inset-left)) !important;

    grid-template-columns:
      30px
      minmax(0,1fr)
      auto
      26px
      26px !important;

    column-gap:4px !important;
  }

  .ai-asisten-page .aiAsistenSearchCloseBtn{
    width:30px !important;
    min-width:30px !important;
  }

  .ai-asisten-page .aiAsistenSearchInputWrap{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;

    padding:0 10px !important;
    border-radius:12px !important;
  }

  .ai-asisten-page .aiAsistenSearchCount{
    max-width:54px !important;
    font-size:8px !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button{
    width:26px !important;
    min-width:26px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenSearchPanel{
    padding-left:max(6px, env(safe-area-inset-left)) !important;
    padding-right:max(6px, env(safe-area-inset-right)) !important;

    grid-template-columns:
      28px
      minmax(0,1fr)
      auto
      24px
      24px !important;

    column-gap:3px !important;
  }

  .ai-asisten-page .aiAsistenSearchCloseBtn{
    width:28px !important;
    min-width:28px !important;
  }

  .ai-asisten-page .aiAsistenSearchInputWrap{
    height:37px !important;
    min-height:37px !important;
    max-height:37px !important;

    padding-left:9px !important;
    padding-right:9px !important;
  }

  .ai-asisten-page .aiAsistenSearchCount{
    max-width:44px !important;
    font-size:7.6px !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button{
    width:24px !important;
    min-width:24px !important;
  }

  .ai-asisten-page .aiAsistenSearchNav button i{
    font-size:11px !important;
  }
}

/* =========================================================
   END BUMIL KU - SEARCH PANEL NAVBAR EXACT MATCH V45
   ========================================================= */


/* =========================================================
   BUMIL KU - SEARCH COUNTER FULL TEXT V46
   =========================================================
   TUJUAN:
   - Memberi ruang tetap yang cukup untuk #aiAsistenSearchCount.
   - Teks "Ketik kata kunci" tidak terpotong.
   - Lebar input search dikurangi sedikit sebagai kompensasi.
   - Posisi X, counter, tombol previous/next, tinggi navbar,
     dan seluruh fungsi pencarian V45 tetap dipertahankan.
   ========================================================= */

@media (max-width:740px){

  /*
   * Sebelumnya counter memakai kolom auto sehingga input mengambil
   * ruang terlalu besar. Sekarang counter mendapat kolom tetap 76px.
   * Akibatnya input otomatis sedikit lebih pendek.
   *
   * Struktur:
   * X | SEARCH INPUT | COUNTER | UP | DOWN
   */
  .ai-asisten-page .aiAsistenSearchPanel{
    grid-template-columns:
      32px
      minmax(0,1fr)
      76px
      28px
      28px !important;
  }

  .ai-asisten-page .aiAsistenSearchCount{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:8.7px !important;
    line-height:1 !important;

    text-align:center !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page .aiAsistenSearchPanel{
    grid-template-columns:
      30px
      minmax(0,1fr)
      72px
      26px
      26px !important;
  }

  .ai-asisten-page .aiAsistenSearchCount{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;

    font-size:8px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page .aiAsistenSearchPanel{
    grid-template-columns:
      28px
      minmax(0,1fr)
      68px
      24px
      24px !important;
  }

  .ai-asisten-page .aiAsistenSearchCount{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;

    font-size:7.6px !important;
  }
}

/* =========================================================
   END BUMIL KU - SEARCH COUNTER FULL TEXT V46
   ========================================================= */


/* =========================================================
   BUMIL KU - PESAN TERSIMPAN PANEL V49
   ========================================================= */

/* ---------------------------------------------------------
   MENU ITEM + COUNT
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedMessagesMenuBtn{
  position:relative !important;
}

.ai-asisten-page .aiAsistenSavedMenuCount{
  flex:0 0 auto !important;

  min-width:19px !important;
  height:19px !important;

  margin-left:auto !important;
  padding:0 5px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:999px !important;

  background:rgba(14,147,130,.10) !important;
  color:#0E9382 !important;

  font-size:9px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.ai-asisten-page .aiAsistenSavedMenuCount[hidden]{
  display:none !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedMenuCount{
  background:rgba(83,235,232,.10) !important;
  color:#53EBE8 !important;
}


/* ---------------------------------------------------------
   OVERLAY
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedOverlay{
  position:fixed !important;
  inset:0 !important;

  z-index:1200 !important;

  display:grid !important;
  place-items:center !important;

  padding:18px !important;

  background:rgba(15,23,42,.18) !important;

  opacity:0 !important;
  visibility:hidden !important;

  transition:
    opacity .17s ease,
    visibility .17s ease !important;
}

.ai-asisten-page .aiAsistenSavedOverlay[hidden]{
  display:none !important;
}

.ai-asisten-page .aiAsistenSavedOverlay.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}


/* ---------------------------------------------------------
   PANEL
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedPanel{
  width:min(100%, 560px) !important;
  height:min(82dvh, 720px) !important;
  min-height:360px !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0,172,170,.055),
      transparent 26%
    ),
    #FFFFFF !important;

  border:1px solid rgba(15,159,141,.12) !important;
  border-radius:22px !important;

  box-shadow:
    0 26px 64px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedPanel{
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(83,235,232,.07),
      transparent 26%
    ),
    #102B30 !important;

  border-color:rgba(83,235,232,.10) !important;

  box-shadow:
    0 26px 64px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedHeader{
  flex:0 0 auto !important;

  min-height:66px !important;
  padding:8px 13px !important;

  display:flex !important;
  align-items:center !important;
  gap:10px !important;

  background:rgba(255,255,255,.985) !important;

  border-bottom:1px solid rgba(15,159,141,.09) !important;
}

.ai-asisten-page .aiAsistenSavedCloseBtn{
  flex:0 0 36px !important;

  width:36px !important;
  height:40px !important;

  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  border:0 !important;
  border-radius:10px !important;

  background:transparent !important;
  color:#607786 !important;

  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenSavedCloseBtn i{
  font-size:16px !important;
}

.ai-asisten-page .aiAsistenSavedCloseBtn:active{
  transform:scale(.93) !important;
  color:#0E9382 !important;
}

.ai-asisten-page .aiAsistenSavedTitleWrap{
  min-width:0 !important;

  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.ai-asisten-page .aiAsistenSavedTitleIcon{
  flex:0 0 34px !important;

  width:34px !important;
  height:34px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:11px !important;

  background:rgba(14,147,130,.08) !important;
  color:#0E9382 !important;

  font-size:13px !important;
}

.ai-asisten-page .aiAsistenSavedTitleWrap h2{
  margin:0 !important;

  color:#17384A !important;

  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:-.015em !important;
}

.ai-asisten-page .aiAsistenSavedTitleWrap p{
  margin:3px 0 0 !important;

  color:#718696 !important;

  font-size:9.3px !important;
  line-height:1.15 !important;
  font-weight:500 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedHeader{
  background:rgba(16,43,48,.985) !important;
  border-bottom-color:rgba(83,235,232,.08) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedCloseBtn{
  color:#B7D2D5 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedTitleIcon{
  background:rgba(83,235,232,.09) !important;
  color:#53EBE8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedTitleWrap h2{
  color:#E8FBF8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedTitleWrap p{
  color:#9AB5BA !important;
}


/* ---------------------------------------------------------
   LIST
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedList{
  flex:1 1 auto !important;
  min-height:0 !important;

  padding:14px !important;

  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch !important;

  scrollbar-width:thin;
  scrollbar-color:rgba(100,116,139,.22) transparent;
}

.ai-asisten-page .aiAsistenSavedList::-webkit-scrollbar{
  width:4px !important;
}

.ai-asisten-page .aiAsistenSavedList::-webkit-scrollbar-track{
  background:transparent !important;
}

.ai-asisten-page .aiAsistenSavedList::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.22) !important;
  border-radius:999px !important;
}


/* ---------------------------------------------------------
   SAVED ITEM
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedItem{
  width:94% !important;
  align-self:flex-start !important;

  padding:13px 14px 11px !important;

  border-radius:17px !important;

  background:#FFFFFF !important;
  border:1px solid rgba(15,159,141,.12) !important;

  box-shadow:
    0 8px 20px rgba(16,70,80,.065),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.ai-asisten-page .aiAsistenSavedItem.is-user{
  width:88% !important;
  align-self:flex-end !important;

  background:
    linear-gradient(
      145deg,
      rgba(32,184,170,.98),
      rgba(7,156,145,.98)
    ) !important;

  border-color:rgba(5,137,127,.18) !important;

  box-shadow:
    0 9px 21px rgba(0,172,170,.17),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.ai-asisten-page .aiAsistenSavedItemMeta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

.ai-asisten-page .aiAsistenSavedRole{
  color:#0E9382 !important;

  font-size:9.5px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.ai-asisten-page .aiAsistenSavedItemMeta time{
  color:#8295A1 !important;

  font-size:8.4px !important;
  line-height:1 !important;
  font-weight:500 !important;
}

.ai-asisten-page .aiAsistenSavedMessageText{
  margin:10px 0 0 !important;

  color:#60788A !important;

  white-space:pre-line !important;
  overflow-wrap:anywhere !important;

  font-size:12.2px !important;
  line-height:1.60 !important;
  font-weight:600 !important;
}

.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedRole,
.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedItemMeta time,
.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedMessageText{
  color:#FFFFFF !important;
}

.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedItemMeta time{
  opacity:.75 !important;
}

.ai-asisten-page .aiAsistenSavedItemFooter{
  margin-top:11px !important;
  padding-top:9px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;

  border-top:1px solid rgba(100,116,139,.10) !important;
}

.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedItemFooter{
  border-top-color:rgba(255,255,255,.14) !important;
}

.ai-asisten-page .aiAsistenSavedOriginalTime{
  min-width:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;

  color:#8A9BA6 !important;

  font-size:8.4px !important;
  line-height:1 !important;
}

.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedOriginalTime{
  color:rgba(255,255,255,.75) !important;
}

.ai-asisten-page .aiAsistenSavedItemActions{
  margin-left:auto !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
}

.ai-asisten-page .aiAsistenSavedOpenChatBtn,
.ai-asisten-page .aiAsistenSavedRemoveBtn{
  min-height:30px !important;

  padding:0 9px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;

  border:0 !important;
  border-radius:9px !important;

  font-family:inherit !important;
  font-size:8.8px !important;
  line-height:1 !important;
  font-weight:650 !important;

  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenSavedOpenChatBtn{
  background:rgba(14,147,130,.075) !important;
  color:#0E9382 !important;
}

.ai-asisten-page .aiAsistenSavedRemoveBtn{
  background:rgba(100,116,139,.07) !important;
  color:#647887 !important;
}

.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedOpenChatBtn,
.ai-asisten-page .aiAsistenSavedItem.is-user .aiAsistenSavedRemoveBtn{
  background:rgba(255,255,255,.14) !important;
  color:#FFFFFF !important;
}

.ai-asisten-page .aiAsistenSavedOpenChatBtn:active,
.ai-asisten-page .aiAsistenSavedRemoveBtn:active{
  transform:scale(.97) !important;
}

.ai-asisten-page .aiAsistenSavedRemoveBtn.is-loading{
  opacity:.55 !important;
  cursor:wait !important;
}


/* ---------------------------------------------------------
   LOADING / EMPTY
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSavedLoading{
  min-height:120px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;

  color:#718696 !important;

  font-size:10px !important;
  font-weight:500 !important;
}

.ai-asisten-page .aiAsistenSavedLoadingDot{
  width:6px !important;
  height:6px !important;

  border-radius:999px !important;

  background:#0E9382 !important;

  animation:aiSavedLoadingPulseV49 1s ease-in-out infinite;
}

.ai-asisten-page .aiAsistenSavedLoadingDot:nth-child(2){
  animation-delay:.14s !important;
}

.ai-asisten-page .aiAsistenSavedLoadingDot:nth-child(3){
  animation-delay:.28s !important;
}

@keyframes aiSavedLoadingPulseV49{
  0%, 80%, 100%{
    transform:translateY(0);
    opacity:.35;
  }

  40%{
    transform:translateY(-3px);
    opacity:1;
  }
}

.ai-asisten-page .aiAsistenSavedEmptyState{
  width:min(100%, 330px) !important;

  margin:auto !important;
  padding:28px 18px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  text-align:center !important;
}

.ai-asisten-page .aiAsistenSavedEmptyIcon{
  width:48px !important;
  height:48px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:16px !important;

  background:rgba(14,147,130,.08) !important;
  color:#0E9382 !important;

  font-size:18px !important;
}

.ai-asisten-page .aiAsistenSavedEmptyState strong{
  margin-top:12px !important;

  color:#17384A !important;

  font-size:13px !important;
  font-weight:800 !important;
}

.ai-asisten-page .aiAsistenSavedEmptyState p{
  margin:7px 0 0 !important;

  color:#718696 !important;

  font-size:10.5px !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}

.ai-asisten-page .aiAsistenSavedEmptyState.is-error .aiAsistenSavedEmptyIcon{
  background:rgba(239,68,68,.08) !important;
  color:#DC2626 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedItem{
  background:#16383E !important;
  border-color:rgba(83,235,232,.09) !important;
  box-shadow:
    0 9px 21px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedMessageText{
  color:#B7D2D5 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedEmptyState strong{
  color:#E8FBF8 !important;
}

html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedEmptyState p,
html[data-theme="dark"]
.ai-asisten-page .aiAsistenSavedLoading{
  color:#9AB5BA !important;
}


/* ---------------------------------------------------------
   JUMP TARGET
--------------------------------------------------------- */
.ai-asisten-page
.aiAsistenMessage.is-saved-jump-target
.aiAsistenBubble{
  animation:aiSavedJumpPulseV49 1.4s ease !important;
}

@keyframes aiSavedJumpPulseV49{
  0%{
    box-shadow:
      0 0 0 0 rgba(14,147,130,.00),
      var(--ai-shadow-sm) !important;
  }

  35%{
    box-shadow:
      0 0 0 4px rgba(14,147,130,.16),
      0 12px 28px rgba(14,147,130,.16) !important;
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(14,147,130,.00),
      var(--ai-shadow-sm) !important;
  }
}


/* =========================================================
   MOBILE: PANEL MENJADI LAYAR PESAN TERSIMPAN
   ========================================================= */
@media (max-width:740px){

  body.ai-saved-messages-open{
    overflow:hidden !important;
  }

  .ai-asisten-page .aiAsistenSavedOverlay{
    padding:0 !important;

    background:#FFFFFF !important;

    place-items:stretch !important;
  }

  .ai-asisten-page .aiAsistenSavedPanel{
    width:100vw !important;
    max-width:100vw !important;

    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;

    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenSavedHeader{
    min-height:64px !important;
    height:64px !important;

    padding:
      0
      max(10px, env(safe-area-inset-right))
      0
      max(10px, env(safe-area-inset-left)) !important;
  }

  .ai-asisten-page .aiAsistenSavedList{
    padding:
      13px
      max(10px, env(safe-area-inset-right))
      calc(18px + env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left)) !important;
  }

  html[data-theme="dark"]
  .ai-asisten-page .aiAsistenSavedOverlay{
    background:#102B30 !important;
  }
}


@media (max-width:420px){

  .ai-asisten-page .aiAsistenSavedItem{
    width:96% !important;
    padding:12px 12px 10px !important;
  }

  .ai-asisten-page .aiAsistenSavedItem.is-user{
    width:90% !important;
  }

  .ai-asisten-page .aiAsistenSavedMessageText{
    font-size:11.8px !important;
  }

  .ai-asisten-page .aiAsistenSavedItemFooter{
    align-items:flex-end !important;
  }

  .ai-asisten-page .aiAsistenSavedOpenChatBtn span,
  .ai-asisten-page .aiAsistenSavedRemoveBtn span{
    display:none !important;
  }

  .ai-asisten-page .aiAsistenSavedOpenChatBtn,
  .ai-asisten-page .aiAsistenSavedRemoveBtn{
    width:31px !important;
    min-width:31px !important;
    padding:0 !important;
  }
}

/* =========================================================
   END BUMIL KU - PESAN TERSIMPAN PANEL V49
   ========================================================= */

/* =========================================================
   BUMIL KU - PROFESSIONAL CONVERSATION SUITE V50
   ========================================================= */

/* Menu default dapat discroll bila item bertambah. */
@media (max-width:740px){
  .ai-asisten-page .aiAsistenDefaultChatToolsMenu,
  .ai-asisten-page .aiAsistenSelectionMoreMenu{
    max-height:min(78dvh, 560px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-width:thin !important;
  }

  .ai-asisten-page .aiAsistenMenuItem--primary{
    color:#0E9382 !important;
  }
}

/* ---------------------------------------------------------
   RIWAYAT OBROLAN
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenConversationOverlay,
.ai-asisten-page .aiAsistenRenameOverlay,
.ai-asisten-page .aiAsistenPreferencesOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:1250 !important;
  display:grid !important;
  place-items:center !important;
  padding:18px !important;
  background:rgba(15,23,42,.22) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .17s ease, visibility .17s ease !important;
}

.ai-asisten-page .aiAsistenConversationOverlay[hidden],
.ai-asisten-page .aiAsistenRenameOverlay[hidden],
.ai-asisten-page .aiAsistenPreferencesOverlay[hidden]{
  display:none !important;
}

.ai-asisten-page .aiAsistenConversationOverlay.is-visible,
.ai-asisten-page .aiAsistenRenameOverlay.is-visible,
.ai-asisten-page .aiAsistenPreferencesOverlay.is-visible{
  opacity:1 !important;
  visibility:visible !important;
}

.ai-asisten-page .aiAsistenConversationPanel{
  width:min(100%,560px) !important;
  height:min(82dvh,720px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:22px !important;
  background:#fff !important;
  border:1px solid rgba(15,159,141,.12) !important;
  box-shadow:0 26px 64px rgba(15,23,42,.22) !important;
}

.ai-asisten-page .aiAsistenConversationHeader{
  flex:0 0 66px !important;
  min-height:66px !important;
  padding:8px 13px !important;
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 36px !important;
  align-items:center !important;
  gap:10px !important;
  border-bottom:1px solid rgba(15,159,141,.09) !important;
}

.ai-asisten-page .aiAsistenConversationHeader h2,
.ai-asisten-page .aiAsistenDialogHead h2{
  margin:0 !important;
  color:#17384A !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}

.ai-asisten-page .aiAsistenConversationHeader p{
  margin:3px 0 0 !important;
  color:#718696 !important;
  font-size:9px !important;
}

.ai-asisten-page .aiAsistenConversationCloseBtn,
.ai-asisten-page .aiAsistenConversationNewBtn,
.ai-asisten-page .aiAsistenDialogHead button{
  width:36px !important;
  height:38px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#607786 !important;
  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenConversationNewBtn{
  color:#0E9382 !important;
}

.ai-asisten-page .aiAsistenConversationList{
  flex:1 1 auto !important;
  min-height:0 !important;
  padding:12px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  overflow-y:auto !important;
}

.ai-asisten-page .aiAsistenConversationItem{
  width:100% !important;
  min-height:72px !important;
  padding:10px 11px !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  border:1px solid rgba(15,159,141,.09) !important;
  border-radius:15px !important;
  background:#FBFEFD !important;
  color:#17384A !important;
  text-align:left !important;
  cursor:pointer !important;
}

.ai-asisten-page .aiAsistenConversationItem.is-current{
  border-color:rgba(14,147,130,.24) !important;
  background:rgba(14,147,130,.055) !important;
}

.ai-asisten-page .aiAsistenConversationItemIcon{
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:11px !important;
  background:rgba(14,147,130,.08) !important;
  color:#0E9382 !important;
}

.ai-asisten-page .aiAsistenConversationItemBody{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
}

.ai-asisten-page .aiAsistenConversationItemBody strong{
  font-size:11.5px !important;
  line-height:1.2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.ai-asisten-page .aiAsistenConversationItemBody small{
  color:#718696 !important;
  font-size:9.2px !important;
  line-height:1.3 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.ai-asisten-page .aiAsistenConversationItemBody span{
  color:#91A1AB !important;
  font-size:8px !important;
}

.ai-asisten-page .aiAsistenConversationItem em{
  padding:5px 7px !important;
  border-radius:999px !important;
  background:rgba(14,147,130,.09) !important;
  color:#0E9382 !important;
  font-size:7.8px !important;
  font-style:normal !important;
  font-weight:700 !important;
}

.ai-asisten-page .aiAsistenConversationLoading,
.ai-asisten-page .aiAsistenConversationEmpty{
  margin:auto !important;
  color:#718696 !important;
  text-align:center !important;
  font-size:10px !important;
}

.ai-asisten-page .aiAsistenConversationEmpty{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
}

.ai-asisten-page .aiAsistenConversationEmpty i{
  font-size:24px !important;
  color:#0E9382 !important;
}

/* ---------------------------------------------------------
   DIALOG RENAME + PREFERENCES
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenRenameDialog,
.ai-asisten-page .aiAsistenPreferencesDialog{
  width:min(100%,430px) !important;
  padding:16px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1px solid rgba(15,159,141,.12) !important;
  box-shadow:0 24px 58px rgba(15,23,42,.22) !important;
}

.ai-asisten-page .aiAsistenDialogHead{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 36px !important;
  gap:10px !important;
  align-items:start !important;
}

.ai-asisten-page .aiAsistenDialogHead small{
  display:block !important;
  margin-bottom:3px !important;
  color:#0E9382 !important;
  font-size:8px !important;
  font-weight:700 !important;
}

.ai-asisten-page .aiAsistenRenameForm,
.ai-asisten-page .aiAsistenPreferencesForm{
  margin-top:15px !important;
  display:grid !important;
  gap:12px !important;
}

.ai-asisten-page .aiAsistenRenameForm label,
.ai-asisten-page .aiAsistenPreferencesForm > label > span{
  color:#315565 !important;
  font-size:9.5px !important;
  font-weight:700 !important;
}

.ai-asisten-page .aiAsistenRenameForm input,
.ai-asisten-page .aiAsistenPreferencesForm select{
  width:100% !important;
  min-height:44px !important;
  padding:0 12px !important;
  border:1px solid rgba(15,159,141,.13) !important;
  border-radius:13px !important;
  background:#F8FCFB !important;
  color:#17384A !important;
  font:inherit !important;
  font-size:12px !important;
  outline:none !important;
}

.ai-asisten-page .aiAsistenPreferencesForm > label:not(.aiAsistenPreferenceToggleRow){
  display:grid !important;
  gap:6px !important;
}

.ai-asisten-page .aiAsistenPreferenceToggleRow{
  min-height:54px !important;
  padding:9px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  border-radius:13px !important;
  background:#F8FCFB !important;
  border:1px solid rgba(15,159,141,.09) !important;
}

.ai-asisten-page .aiAsistenPreferenceToggleRow span{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
}

.ai-asisten-page .aiAsistenPreferenceToggleRow strong{
  color:#315565 !important;
  font-size:9.6px !important;
}

.ai-asisten-page .aiAsistenPreferenceToggleRow small,
.ai-asisten-page .aiAsistenPreferenceNote{
  color:#718696 !important;
  font-size:8.5px !important;
  line-height:1.45 !important;
}

.ai-asisten-page .aiAsistenPreferenceToggleRow input{
  width:18px !important;
  height:18px !important;
  accent-color:#0E9382 !important;
}

.ai-asisten-page .aiAsistenRenameForm button[type="submit"],
.ai-asisten-page .aiAsistenPreferencesForm button[type="submit"]{
  min-height:42px !important;
  border:0 !important;
  border-radius:13px !important;
  background:var(--primaryGrad) !important;
  color:#fff !important;
  font:inherit !important;
  font-size:10px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

/* Dark mode */
html[data-theme="dark"] .ai-asisten-page .aiAsistenConversationPanel,
html[data-theme="dark"] .ai-asisten-page .aiAsistenRenameDialog,
html[data-theme="dark"] .ai-asisten-page .aiAsistenPreferencesDialog{
  background:#102B30 !important;
  border-color:rgba(83,235,232,.10) !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenConversationHeader h2,
html[data-theme="dark"] .ai-asisten-page .aiAsistenDialogHead h2,
html[data-theme="dark"] .ai-asisten-page .aiAsistenConversationItemBody strong{
  color:#E8FBF8 !important;
}

html[data-theme="dark"] .ai-asisten-page .aiAsistenConversationItem,
html[data-theme="dark"] .ai-asisten-page .aiAsistenRenameForm input,
html[data-theme="dark"] .ai-asisten-page .aiAsistenPreferencesForm select,
html[data-theme="dark"] .ai-asisten-page .aiAsistenPreferenceToggleRow{
  background:#16383E !important;
  border-color:rgba(83,235,232,.08) !important;
  color:#E8FBF8 !important;
}

@media (max-width:740px){
  body.ai-conversation-history-open{ overflow:hidden !important; }

  .ai-asisten-page .aiAsistenConversationOverlay{
    padding:0 !important;
    background:#fff !important;
    place-items:stretch !important;
  }

  .ai-asisten-page .aiAsistenConversationPanel{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .ai-asisten-page .aiAsistenConversationHeader{
    min-height:64px !important;
    height:64px !important;
    padding-left:max(10px,env(safe-area-inset-left)) !important;
    padding-right:max(10px,env(safe-area-inset-right)) !important;
  }

  html[data-theme="dark"] .ai-asisten-page .aiAsistenConversationOverlay{
    background:#102B30 !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page .aiAsistenRenameOverlay,
  .ai-asisten-page .aiAsistenPreferencesOverlay{
    padding:12px !important;
  }

  .ai-asisten-page .aiAsistenRenameDialog,
  .ai-asisten-page .aiAsistenPreferencesDialog{
    border-radius:18px !important;
  }
}

/* =========================================================
   END PROFESSIONAL CONVERSATION SUITE V50
   ========================================================= */


/* =========================================================
   BUMIL KU - SEARCH TERM TEXT HIGHLIGHT V51
   =========================================================
   TUJUAN:
   - Menandai kata/frasa yang sedang dicari di dalam bubble.
   - Bubble hasil tetap memakai border highlight V44.
   - Semua occurrence ditandai stabilo lime lembut.
   - Bubble aktif memakai stabilo sedikit lebih kuat.
   - Tidak mengubah ukuran, spacing, font, scroll, navbar,
     composer, Riwayat Obrolan, Pesan Tersimpan, atau Firebase.
   ========================================================= */

/* ---------------------------------------------------------
   MARK DASAR
--------------------------------------------------------- */
.ai-asisten-page .aiAsistenSearchMark{
  /*
   * <mark> dibuat inline sehingga tidak mengubah flow paragraf.
   * Padding hanya 1px agar baris tidak bergeser secara terasa.
   */
  margin:0 !important;
  padding:1px 2px !important;

  display:inline !important;

  border:0 !important;
  border-radius:4px !important;

  background:rgba(205,220,41,.24) !important;
  color:inherit !important;

  font:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;

  box-shadow:
    inset 0 -1px 0 rgba(163,178,19,.11) !important;

  text-decoration:none !important;

  /*
   * Saat frasa pecah ke baris berikutnya, tiap potongan tetap
   * memiliki sudut/padding yang rapi.
   */
  -webkit-box-decoration-break:clone !important;
  box-decoration-break:clone !important;
}

/* ---------------------------------------------------------
   HASIL YANG SEDANG AKTIF (1 dari N)
--------------------------------------------------------- */
.ai-asisten-page
.aiAsistenMessage.is-chat-search-current
.aiAsistenSearchMark{
  background:rgba(205,220,41,.50) !important;

  box-shadow:
    inset 0 -1px 0 rgba(145,159,16,.18),
    0 0 0 1px rgba(173,188,24,.09) !important;
}

/* ---------------------------------------------------------
   USER BUBBLE
   ---------------------------------------------------------
   Bubble user berwarna teal. Mark diberi teks teal gelap agar
   kontras stabilo tetap tinggi dan terasa seperti highlighter,
   bukan blok putih.
--------------------------------------------------------- */
.ai-asisten-page
.aiAsistenMessage--user
.aiAsistenSearchMark{
  background:rgba(239,246,151,.48) !important;
  color:#0A5E58 !important;

  box-shadow:
    inset 0 -1px 0 rgba(122,139,11,.14) !important;
}

.ai-asisten-page
.aiAsistenMessage--user.is-chat-search-current
.aiAsistenSearchMark{
  background:rgba(239,246,151,.72) !important;
  color:#084F4A !important;

  box-shadow:
    inset 0 -1px 0 rgba(115,130,10,.18),
    0 0 0 1px rgba(255,255,255,.10) !important;
}

/* ---------------------------------------------------------
   DARK MODE
--------------------------------------------------------- */
html[data-theme="dark"]
.ai-asisten-page .aiAsistenSearchMark{
  background:rgba(205,220,41,.20) !important;
  color:inherit !important;

  box-shadow:
    inset 0 -1px 0 rgba(205,220,41,.12) !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage.is-chat-search-current
.aiAsistenSearchMark{
  background:rgba(205,220,41,.36) !important;

  box-shadow:
    inset 0 -1px 0 rgba(205,220,41,.16),
    0 0 0 1px rgba(205,220,41,.07) !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage--user
.aiAsistenSearchMark{
  background:rgba(225,237,111,.40) !important;
  color:#073E3A !important;
}

html[data-theme="dark"]
.ai-asisten-page
.aiAsistenMessage--user.is-chat-search-current
.aiAsistenSearchMark{
  background:rgba(225,237,111,.58) !important;
  color:#062F2C !important;
}

/* ---------------------------------------------------------
   MOBILE
   Tidak mengubah typography. Hanya radius sedikit lebih compact.
--------------------------------------------------------- */
@media (max-width:740px){
  .ai-asisten-page .aiAsistenSearchMark{
    padding:1px 2px !important;
    border-radius:3px !important;
  }
}

/* =========================================================
   END BUMIL KU - SEARCH TERM TEXT HIGHLIGHT V51
   ========================================================= */

/* =========================================================
   BUMIL KU - DEFAULT CHAT MENU BOTTOM GAP FIX V52R4
   =========================================================
   PENYEBAB:
   - Rule lama yang lebih spesifik masih memakai padding:0 !important
     pada:
     .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar
     .aiAsistenMobileMoreMenu--inline
   - Karena specificity lebih tinggi, patch padding-bottom sebelumnya
     tidak pernah menang.

   SOLUSI:
   - Override memakai selector yang sama / lebih spesifik.
   - Hanya menambah ruang bawah card.
   - Tidak mengubah tinggi menu, item, scrollbar, atau fungsi apa pun.
   ========================================================= */

@media (max-width:740px){
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    padding-bottom:16px !important;
  }
}

@media (max-width:420px){
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    padding-bottom:15px !important;
  }
}

@media (max-width:380px){
  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    padding-bottom:14px !important;
  }
}

/* =========================================================
   END BUMIL KU - DEFAULT CHAT MENU BOTTOM GAP FIX V52R4
   ========================================================= */

/* =========================================================
   BUMIL KU - DEFAULT CHAT MENU FINAL BOTTOM GAP V52R6
   =========================================================
   AKAR MASALAH:
   - Dropdown dibatasi max-height:min(78dvh, 560px).
   - Padding bawah tambahan ikut masuk ke tinggi maksimum tersebut,
     sehingga pada viewport HP ruang bawah tidak benar-benar terlihat.

   PERBAIKAN:
   - Naikkan max-height secukupnya agar bottom padding dapat tampil.
   - Beri bottom padding nyata pada selector dropdown paling spesifik.
   - Tidak memakai pseudo-element.
   - Tidak mengubah tinggi/font/icon item menu lain.
   ========================================================= */

@media (max-width:740px){

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    box-sizing:border-box !important;

    /*
     * 590px memberi ruang ekstra ±30px dari batas lama 560px.
     * Pada Galaxy S8+ 740px, 82dvh ≈ 607px sehingga cap 590px
     * tetap aman namun cukup untuk breathing room bawah.
     */
    max-height:min(82dvh, 590px) !important;

    /*
     * Pertahankan top/side rhythm 7px dan beri 22px di bawah.
     */
    padding:
      7px
      7px
      22px
      7px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    scroll-padding-bottom:22px !important;
  }

  /*
   * Item terakhir tetap ukuran existing.
   * Tidak menambah min-height agar komposisi menu tidak berubah.
   */
  .ai-asisten-page
  .aiAsistenDefaultChatToolsMenu
  #btnAiAsistenMobileDeleteAllChat{
    margin-bottom:0 !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    max-height:min(84dvh, 575px) !important;

    padding:
      7px
      7px
      20px
      7px !important;

    scroll-padding-bottom:20px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    max-height:min(86dvh, 560px) !important;

    padding:
      7px
      7px
      18px
      7px !important;

    scroll-padding-bottom:18px !important;
  }
}

/* =========================================================
   END BUMIL KU - DEFAULT CHAT MENU FINAL BOTTOM GAP V52R6
   ========================================================= */

/* =========================================================
   BUMIL KU - DEFAULT CHAT MENU FIXED NO SCROLL V52R7
   =========================================================
   TUJUAN:
   - Dropdown menu ⋮ pada HP tampil penuh/fixed.
   - Tidak ada scroll internal pada card menu.
   - Seluruh item termasuk "Bersihkan Obrolan" terlihat langsung.
   - Spacing bawah hasil V52R6 tetap dipertahankan.
   - Tidak mengubah ukuran item, font, icon, divider, HTML,
     JavaScript, Firebase, RAG, history, delete, keyboard, navbar.
   ========================================================= */

@media (max-width:740px){

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    /*
     * KUNCI:
     * Lepas pembatas tinggi dan scroll internal.
     * Card mengikuti tinggi natural seluruh isi menu.
     */
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow-x:visible !important;
    overflow-y:visible !important;
    overflow:visible !important;

    overscroll-behavior:auto !important;

    /*
     * Pertahankan breathing room bawah yang sudah berhasil.
     */
    padding:
      7px
      7px
      22px
      7px !important;

    scroll-padding:0 !important;

    scrollbar-width:none !important;
  }

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
}


/* =========================================================
   <= 420px
   ========================================================= */
@media (max-width:420px){

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    height:auto !important;
    max-height:none !important;

    overflow:visible !important;

    padding:
      7px
      7px
      20px
      7px !important;
  }
}


/* =========================================================
   <= 380px
   ========================================================= */
@media (max-width:380px){

  .ai-asisten-page
  .aiAsistenMobileMoreMenu.aiAsistenMobileMoreMenu--topbar.aiAsistenMobileMoreMenu--inline.aiAsistenDefaultChatToolsMenu{
    height:auto !important;
    max-height:none !important;

    overflow:visible !important;

    padding:
      7px
      7px
      18px
      7px !important;
  }
}

/* =========================================================
   END BUMIL KU - DEFAULT CHAT MENU FIXED NO SCROLL V52R7
   ========================================================= */