/* Eline UX untuk Webchat (LibreChat v0.8.7).
   Berkas ini dimuat index.html hasil infra/librechat/eline-ux/build_index.py.
   Kait DOM yang dipakai tiap modul tercatat di hooks.json; periksa dengan
   `build_index.py check-bundle` sebelum memasang versi LibreChat baru. Untuk
   kembali ke tampilan bawaan, pasang ulang dengan ELINE_WEBCHAT_UX=default. */
/* Penyesuaian tetap dibatasi pada komponen yang jelas. Token warna LibreChat
   dipertahankan supaya mode terang/gelap tidak rusak; warna status hanya dipakai
   sebagai aksen kecil pada notifikasi, bukan sebagai latar satu kartu penuh. */
body, button, input, textarea {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Logo di halaman login dicabut (keputusan owner 2026-08-18): wadah bawaan
   ikut disembunyikan supaya ruang yang dipesannya juga lenyap, bukan cuma
   gambarnya. */
div.mt-6.h-10.w-full:has(> img[src*="logo.svg"]),
img[src*="logo.svg"] {
  display: none !important;
}
/* Daftar recent chat: cukup judul, tanpa ikon (permintaan owner 2026-08-04).
   Ikonnya = avatar agent (img 20px) di dalam tiap convo-item — testid
   convo-icon TIDAK dipakai komponen ini (dibuktikan lewat DOM 2026-08-05). */
[data-testid="convo-item"] div:has(> img) {
  display: none !important;
}
[data-testid="convo-icon"] {
  display: none !important;
}
/* Landing chat baru (2026-08-05): sapaan teks saja. Nama "Eline Tiva" asli
   dirender PER HURUF beranimasi (split-parent) sehingga tak bisa ditukar via
   teks — disembunyikan bersama ikonnya; span.sr-only kembarannya (yang sudah
   ditukar skrip jadi sapaan bergilir) diangkat menjadi judul terlihat. */
p.split-parent { display: none !important; }
div.justify-center:has(p.split-parent) > div.relative { display: none !important; }
/* Pesan user di kanan (permintaan owner 24 Agu 2026): LibreChat menaruh user
   dan AI sama-sama di kiri, dan itu yang membuat percakapannya terasa asing —
   semua chat lain menaruh penuturnya di kanan. Tidak ada saklar bawaan; saklar
   chatDirection hanya membalik SELURUH antarmuka untuk bahasa RTL.

   Versi pertama memakai align-items pada kolomnya, dan itu membuat pembungkus
   menciut ke lebar anak tersempitnya: teks pendek terpenggal jadi dua baris,
   teks panjang menggantung di kiri (koreksi owner di hari yang sama). Geometri
   sekarang memakai margin-left auto + fit-content pada pembungkusnya sendiri,
   yang mendorong ke kanan tanpa mengubah cara anak-anaknya mengukur lebar.
   Avatar dan nama sendiri akhirnya disembunyikan sekalian: di layar sempit
   keduanya memakan lebar dan membuat gelembung sesak (koreksi owner di hari
   yang sama). Warna memakai token tema LibreChat supaya mode terang dan gelap
   tetap benar. */
/* Avatar dan nama sendiri disembunyikan (koreksi owner 24 Agu 2026): di layar
   sempit avatar memakan lebar dan membuat gelembungnya sesak. Posisi kanan
   sudah cukup menandai "ini saya". */
div:has(> .user-turn) > div:first-child:not(.user-turn) {
  display: none;
}
.user-turn > h2 {
  display: none;
}
/* Kolom pesan dibatasi w-11/12 oleh LibreChat; sisa 8%-nya jatah avatar yang
   kini disembunyikan, dan tanpa aturan ini jatah itu tinggal jadi ruang kosong
   di kanan (koreksi owner 24 Agu 2026). Kedua sisi dilebarkan penuh. */
.user-turn,
.agent-turn {
  width: 100% !important;
}
/* Pembungkus isi merapat kanan dan memeluk isinya. */
.user-turn > div {
  margin-left: auto;
  width: fit-content;
  max-width: 100%;
}
/* Gelembungnya: ekor kanan-bawah seperti WhatsApp. Padding vertikal dilonggarkan
   karena teks sempat menempel ke tepi atas dan bawah (koreksi owner). */
.user-turn > div > div:first-child {
  background: var(--surface-tertiary, rgba(127, 127, 127, 0.12));
  border-radius: 18px 18px 4px 18px;
  padding: 11px 16px;
  max-width: 100%;
}
/* Markdown di dalam gelembung membawa margin bawaannya; ujung-ujungnya dipangkas
   supaya padding gelembung yang mengatur jarak, bukan margin paragraf. */
.user-turn > div > div:first-child > :first-child,
.user-turn > div > div:first-child p:first-child,
.user-turn > div > div:first-child h1:first-child,
.user-turn > div > div:first-child h2:first-child {
  margin-top: 0;
}
.user-turn > div > div:first-child > :last-child,
.user-turn > div > div:first-child p:last-child {
  margin-bottom: 0;
}
/* Baris tombol hover (salin, edit, suara) ikut merapat kanan. */
.user-turn > div > div:not(:first-child) {
  margin-left: auto;
}

/* Identitas Eline ikut disembunyikan (permintaan owner 24 Agu 2026): setelah
   sisi user polos, avatar dan nama di tiap balasan Eline jadi satu-satunya
   kepala berulang di layar. Posisi kiri sudah menandai penuturnya, sama seperti
   posisi kanan menandai user. */
.agent-turn > h2 {
  display: none;
}
div:has(> .agent-turn) > div:first-child:not(.agent-turn) {
  display: none;
}

/* Tombol gulir-ke-bawah dipindah ke tengah (permintaan owner 24 Agu 2026):
   bawaannya justify-end sehingga menempel di kanan kolom chat, sementara
   ChatGPT dan sejenisnya menaruhnya di tengah, tepat di atas kolom ketik. */
div:has(> .premium-scroll-button) {
  justify-content: center !important;
}

/* Komposer mengambang mobile DICABUT (keputusan owner 25 Agu 2026): dua
   iterasi border+bayangan tetap terasa seperti tambalan di atas komponen
   bawaan, jadi kembali ke tampilan asli LibreChat. */
/* Ikonnya diganti panah bawah bertangkai (permintaan owner 24 Agu 2026);
   chevron bawaan terasa kurang tegas. Digambar lewat mask dengan
   background-color currentColor supaya warnanya tetap mengikuti tema. */
.premium-scroll-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.premium-scroll-button svg {
  display: none;
}
/* Tombolnya lingkaran 32px; panah 16px bergaris tebal (stroke 3 pada viewBox 24
   = ~2px terpasang) supaya tidak tenggelam — versi pertama 15px stroke 2.4
   tampak kurus dan pudar (koreksi owner). Warna mengikuti token teks utama. */
.premium-scroll-button::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--text-primary, currentColor);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='m19 12.5-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='m19 12.5-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

div:has(> p.split-parent) > span.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  font-size: 1.875rem;
  font-weight: 500;
  text-align: center;
  color: var(--text-primary, inherit);
}

/* Bentuk, warna, padding, dan bayangan toast tetap milik LibreChat. Ikon
   dekoratif disembunyikan supaya notifikasi ringkas berfokus pada teks. */
.toast-root .alert-root > svg,
.toast-root .alert-root > div:first-child:has(> svg) {
  display: none !important;
}
.toast-root .whitespace-pre-wrap,
.eline-fallback-notice .whitespace-pre-wrap {
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 450 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
}
/* Login webchat (2026-09-07): alur tetap menuju OAuth OpenID, tetapi
   kontrolnya mengikuti bahasa visual 1garis Studio — teks Login saja,
   terpusat, dan tidak selebar panel. */
a[data-testid="openid"][href$="/oauth/openid"] {
  box-sizing: border-box;
  width: min(100%, 160px) !important;
  max-width: 160px !important;
  margin-inline: auto !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 10px 20px !important;
  text-align: center;
}
a[data-testid="openid"][href$="/oauth/openid"] > svg,
a[data-testid="openid"][href$="/oauth/openid"] > img {
  display: none !important;
}
a[data-testid="openid"][href$="/oauth/openid"] > p {
  margin: 0 !important;
}
/* Hanya fallback milik upload router yang butuh positioning karena tidak
   dirender di portal toaster React. Isi visualnya tetap memakai kelas native. */
.eline-fallback-notice {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 1001;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
}
/* Unggahan user (ELINE-2026-402, dirapikan ELINE-2026-404). Penanda dipasang
   rapikanUnggahan di eline-ux.js: data-eline-unggahan="grid" untuk dua gambar atau
   lebih, "tunggal" untuk satu gambar atau kartu berkas saja, dan data-eline-kolom
   2 atau 3. Dua dan empat gambar memakai dua kolom, jumlah lain tiga kolom, dan
   baris terakhir yang tidak penuh merapat kanan lewat data-eline-mulai seperti
   aplikasi ChatGPT. Gelembung pindah dari seluruh isi ke teksnya saja supaya media
   tidak duduk di atas latar abu-abu. Tanpa skrip, aturan ini diam dan tampilan
   kembali ke bawaan LibreChat. */
.user-turn {
  --eline-ubin-2: min(200px, calc((100vw - 64px) / 2));
  --eline-ubin-3: min(160px, calc((100vw - 48px) / 3));
}
[data-eline-gelembung="lepas"] {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.user-turn .text-message[data-eline-unggahan] {
  align-items: flex-end;
}
.user-turn .text-message[data-eline-unggahan] > .message-content {
  width: auto !important;
  max-width: 100%;
  background: var(--surface-tertiary, rgba(127, 127, 127, 0.12));
  border-radius: 18px 18px 4px 18px;
  padding: 11px 16px;
}
.user-turn .text-message[data-eline-unggahan] > .message-content:empty {
  display: none;
}
.user-turn .text-message[data-eline-unggahan] > div:not([class]) > button[aria-haspopup="dialog"] {
  display: block;
  margin-top: 0;
  border: 0;
  box-shadow: none;
}
/* Satu gambar: rasio asli, tetapi tidak selebar kolom. */
.user-turn .text-message[data-eline-unggahan="tunggal"] > div:not([class]) > button[aria-haspopup="dialog"] {
  width: fit-content !important;
  height: auto !important;
  max-width: min(280px, 72vw);
  border-radius: 18px;
}
.user-turn .text-message[data-eline-unggahan="tunggal"] > div:not([class]) > button[aria-haspopup="dialog"] > img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: min(360px, 50vh);
  object-fit: contain;
}
.user-turn .text-message[data-eline-unggahan="grid"] {
  display: grid;
  justify-content: end;
  gap: 4px;
}
.user-turn .text-message[data-eline-kolom="2"] {
  --eline-ubin: var(--eline-ubin-2);
  grid-template-columns: repeat(2, var(--eline-ubin-2));
}
.user-turn .text-message[data-eline-kolom="3"] {
  --eline-ubin: var(--eline-ubin-3);
  grid-template-columns: repeat(3, var(--eline-ubin-3));
}
.user-turn .text-message[data-eline-unggahan="grid"] > * {
  grid-column: 1 / -1;
  justify-self: end;
}
.user-turn .text-message[data-eline-unggahan="grid"] > div:not([class]) {
  grid-column: auto;
}
.user-turn .text-message[data-eline-unggahan="grid"] > div:not([class])[data-eline-mulai="2"] {
  grid-column-start: 2;
}
.user-turn .text-message[data-eline-unggahan="grid"] > div:not([class])[data-eline-mulai="3"] {
  grid-column-start: 3;
}
.user-turn .text-message[data-eline-unggahan="grid"] > div:not([class]) > button[aria-haspopup="dialog"] {
  width: var(--eline-ubin) !important;
  height: var(--eline-ubin) !important;
  max-width: none;
  border-radius: 14px;
}
.user-turn .text-message[data-eline-unggahan="grid"] > div:not([class]) > button[aria-haspopup="dialog"] > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}
.user-turn .text-message[data-eline-unggahan="grid"] > .message-content {
  margin-top: 8px;
}
/* Galeri hasil generate beberapa gambar (permintaan owner 11 Sep 2026, meniru
   aplikasi ChatGPT): satu gambar besar dan deretan thumbnail di bawahnya.
   Penandanya dipasang rapikanGaleri; aturan di sini hanya membaca atribut data,
   jadi tanpa skrip semua gambar tetap tampil seperti bawaan. */
[data-eline-galeri] > .image-attachment-container:not([data-eline-galeri-tampil]) {
  display: none;
}
/* Gambar besar memakai lebar kolom (maks 512px) seperti ChatGPT. Tinggi inline
   45vh bawaan membuat potret di layar HP menyempit jadi sepertiga lebar. */
[data-eline-galeri] > .image-attachment-container > div > button[aria-haspopup="dialog"] {
  display: block;
  width: auto;
  max-width: min(100%, 512px);
  height: auto !important;
  margin-bottom: 0;
  border-color: transparent;
  border-radius: 20px;
  box-shadow: none;
}
[data-eline-galeri] > .image-attachment-container > div > button[aria-haspopup="dialog"] > img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: min(70vh, 768px);
  object-fit: contain;
}
[data-eline-galeri-strip] {
  order: 99;
  flex: 0 0 100%;
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-eline-galeri-strip]::-webkit-scrollbar {
  display: none;
}
[data-eline-galeri-strip] > button {
  flex: none;
  width: 60px;
  height: 60px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: transparent;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 150ms ease, border-color 150ms ease;
}
[data-eline-galeri-strip] > button:hover,
[data-eline-galeri-strip] > button[aria-pressed="true"] {
  opacity: 1;
}
[data-eline-galeri-strip] > button[aria-pressed="true"] {
  border-color: var(--text-primary, currentColor);
}
[data-eline-galeri-strip] > button:focus-visible {
  outline: 2px solid var(--text-primary, currentColor);
  outline-offset: 2px;
}
[data-eline-galeri-strip] > button > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
  background: var(--surface-tertiary, rgba(127, 127, 127, 0.12));
}