/* ==========================================================================
   Tema WEIND untuk LibreChat (100% gaya lama) — 2026-10-04
   Disuntik via <link href="/weind-theme.css"> di dist/index.html.
   Sumber: public/index.html + brand/tokens/weind-tokens.css milik WEIND lama.
   Palet TERANG: merah #E11D2E, navy #0F172A, permukaan #F7F8FA.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --weind-red: #E11D2E;
  --weind-red-dark: #B6182C;
  --weind-red-soft: #FFF3F4;
  --weind-red-border: #FFD9DE;
  --weind-navy: #0F172A;
  --weind-navy-light: #1E293B;
  --weind-ink: #17251D;
  --weind-muted: #465550;
  --weind-surface: #F7F8FA;
  --weind-surface-hover: #ECEEF1;
  --weind-line: #E6E8EC;
  --weind-border-color: #E2E8F0;

  /* Paksa palet TERANG LibreChat (nilai RGB dipisah spasi) */
  --white: 255 255 255;
  --gray-25: 252 252 253;
  --gray-50: 247 248 250;
  --gray-100: 236 238 241;
  --gray-200: 227 230 234;
  --gray-300: 205 210 216;
  --gray-400: 153 160 168;
  --gray-500: 100 116 139;
  --gray-600: 71 85 105;
  --gray-700: 51 65 85;
  --gray-800: 30 41 59;
  --gray-850: 15 23 42;
  --gray-875: 15 23 42;
  --gray-900: 15 23 42;
  --presentation: 255 255 255;

  /* Permukaan */
  --surface-primary: var(--white);
  --surface-primary-alt: var(--gray-50);
  --surface-primary-contrast: var(--gray-100);
  --surface-secondary: var(--gray-50);
  --surface-secondary-alt: var(--gray-100);
  --surface-tertiary: var(--gray-100);
  --surface-chat: var(--white);
  --surface-hover: 236 238 241;
  --surface-hover-alt: 227 230 234;
  --surface-active: 255 243 244;
  --surface-active-alt: var(--gray-200);
  --surface-dialog: var(--white);
  --surface-overlay: 15 23 42;
  --surface-inverted: var(--gray-850);
  --surface-inverted-hover: var(--gray-800);
  --surface-submit: 225 29 46;
  --surface-composer-hover: var(--gray-100);

  /* Teks */
  --text-primary: 15 23 42;
  --text-secondary: 71 85 105;
  --text-secondary-alt: 100 116 139;
  --text-tertiary: 100 116 139;
  --text-muted: 100 116 139;
  --text-primary-contrast: var(--white);
  --text-inverted: var(--white);

  /* Batas */
  --border-light: 230 232 236;
  --border-medium: 226 232 240;
  --border-heavy: 203 213 225;
  --border-xheavy: 148 163 184;

  /* Aksen brand */
  --brand-purple: 225 29 46;
  --red-500: 225 29 46;
  --red-600: 182 24 44;
  --red-700: 199 34 53;
}

/* Paksa mode terang: override blok .dark milik LibreChat agar tema WEIND tetap
   konsisten walau pengguna memilih tema gelap. */
.dark,
html.dark,
.dark body {
  --surface-primary: var(--white);
  --surface-primary-alt: var(--gray-50);
  --surface-secondary: var(--gray-50);
  --surface-chat: var(--white);
  --surface-dialog: var(--white);
  --surface-hover: 236 238 241;
  --surface-active: 255 243 244;
  --text-primary: 15 23 42;
  --text-secondary: 71 85 105;
  --text-tertiary: 100 116 139;
  --border-light: 230 232 236;
  --border-medium: 226 232 240;
  --presentation: var(--white);
  --brand-purple: 225 29 46;
  color-scheme: light;
}

/* Tipografi WEIND */
body, button, input, textarea, select {
  font-family: 'DM Sans', Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
}

/* Fokus: outline 2px merah (sama seperti WEIND lama) */
:focus-visible {
  outline: 2px solid var(--weind-red) !important;
  outline-offset: 2px !important;
}

/* Aksen merah WEIND */
a { color: var(--weind-red-dark); }
.btn-primary,
button.btn-primary,
button[data-testid="send-button"] {
  background-color: rgb(225 29 46) !important;
  border-color: rgb(225 29 46) !important;
  color: #fff !important;
}
.btn-primary:hover,
button[data-testid="send-button"]:hover {
  background-color: rgb(182 24 44) !important;
}
.bg-surface-submit { background-color: rgb(225 29 46) !important; }
.text-brand-purple, .bg-brand-purple { color: rgb(225 29 46) !important; }

/* --- Bubble percakapan (meniru .message WEIND lama) ------------------- */
/* Pesan asisten (LibreChat memakai kelas `agent-turn`): transparan. */
.agent-turn {
  background-color: transparent !important;
}

/* Blok isi pesan: radius lembut seperti WEIND. */
.message-content,
[data-testid="message-body"] {
  border-radius: 16px;
}

/* Kontainer isi pesan (atribut ini terbukti ada di bundle LibreChat). */
[data-message-body],
[data-testid="message-body"] {
  border-radius: 16px;
}

/* Pesan PENGGUNA: samakan ke gaya WEIND (bg #F7F8FA, radius 16px).
   LibreChat menandai pesan pengguna dengan kelas flex + justify-end /
   data-role. Kita targetkan beberapa varian agar kokoh. */
[data-role="user"] .markdown,
[data-role="user"] [data-message-body],
[data-testid="user-message"],
.user-turn,
.message-user {
  background-color: #F7F8FA !important;
  border-radius: 16px !important;
  padding: 13px 17px !important;
}

/* --- Sidebar: sky-mist (meniru .sidebar WEIND) ------------------------ */
nav,
aside {
  background-color: #F7F8FA;
}

/* Baris percakapan */
[class*="conversation"]:hover,
[class*="conversation"][data-active="true"] {
  border-radius: 9px !important;
}

/* --- Header atas ------------------------------------------------------ */
header {
  border-color: #E6E8EC !important;
}

/* --- Tombol kirim: radius 10px (WEIND lama, bukan bulat) --------------- */
/* LibreChat memakai rounded-full (9999px). WEIND lama: 33x33, radius 10px. */
button[type="submit"],
[data-testid="send-button"] {
  border-radius: 10px !important;
}
button[type="submit"] svg,
[data-testid="send-button"] svg {
  width: 18px !important;
  height: 18px !important;
}

/* --- Composer: kotak input ala WEIND (radius 14px, border halus) ------- */
/* LibreChat memakai container dengan .composer / textarea. Samakan sudut. */
div:has(> form textarea),
form:has(> div textarea) {
  border-radius: 14px !important;
}

/* --- Logo WEIND ------------------------------------------------------- */
/* Script di index.html mengganti src logo bawaan (assets/logo.svg yang
   di-cache CDN) menjadi /brand/logo/weind-logo-app.svg. Di sini kita atur
   ukurannya agar rapi (bukan full-width). */
img[src*="weind-logo-app"] {
  width: 44px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Logo di samping judul/header (halaman login & nav) */
img[src*="weind-logo-app"][class*="h-"], 
img[src*="weind-logo-app"].mx-auto {
  max-width: 120px !important;
}

/* --- Scrollbar halus -------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #D8DCE2 transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D8DCE2; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }