/* كتمان: the look of the approved design on top of LibreChat's own theme variables.
   Colors are "R G B" triplets, the format LibreChat's Tailwind build reads. */

@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap;
  src: url("fonts/plex-arabic-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap;
  src: url("fonts/plex-arabic-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap;
  src: url("fonts/plex-arabic-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap;
  src: url("fonts/plex-arabic-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap;
  src: url("fonts/plex-arabic-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap;
  src: url("fonts/plex-arabic-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap;
  src: url("fonts/plex-arabic-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap;
  src: url("fonts/plex-arabic-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

html, html.dark {
  --theme-font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
html body, html button, html input, html textarea, html select {
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* Light: ground #F5F6F3, ink #14201B, accent #0B6B4E, line #DDE2DD, soft #E3F1EA */
html:not(.dark) {
  --presentation: 245 246 243;
  --surface-chat: 245 246 243;
  --surface-primary: 255 255 255;
  --surface-primary-alt: 255 255 255;
  --surface-primary-contrast: 238 242 238;
  --surface-secondary: 245 246 243;
  --surface-secondary-alt: 221 226 221;
  --surface-tertiary: 238 242 238;
  --surface-tertiary-alt: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-hover: 238 242 238;
  --surface-hover-alt: 221 226 221;
  --surface-composer-hover: 238 242 238;
  --surface-active: 227 241 234;
  --surface-active-alt: 221 226 221;
  --header-primary: 255 255 255;
  --header-hover: 238 242 238;
  --header-button-hover: 238 242 238;
  --text-primary: 20 32 27;
  --text-secondary: 74 86 79;
  --text-secondary-alt: 90 102 95;
  --text-tertiary: 90 102 95;
  --border-light: 221 226 221;
  --border-medium: 201 209 202;
  --border-medium-alt: 201 209 202;
  --border-heavy: 169 180 171;
  --border-xheavy: 120 132 124;
  --surface-submit: 11 107 78;
  --surface-submit-hover: 8 77 56;
  --accent-primary: 11 107 78;
  --accent-primary-hover: 8 77 56;
  --ring-primary: 11 107 78;
  --link: 11 107 78;
  --link-hover: 8 77 56;
  --link-visited: 8 77 56;
  --status-success: 11 107 78;
  --status-success-subtle: 227 241 234;
}

/* Dark stays LibreChat's, with the green accent lifted for contrast. */
html.dark {
  --surface-submit: 11 107 78;
  --surface-submit-hover: 13 128 94;
  --accent-primary: 94 196 150;
  --accent-primary-hover: 130 214 175;
  --ring-primary: 94 196 150;
  --link: 120 210 168;
  --link-hover: 160 226 194;
}

/* Visible keyboard focus everywhere. */
html :focus-visible {
  outline: 2px solid rgb(var(--ring-primary));
  outline-offset: 2px;
}

/* LibreChat types the welcome line letter by letter, one <span> per letter, which
   breaks Arabic joining. Show the whole sentence (its screen-reader copy) instead. */
.split-parent {
  display: block !important;
  max-width: 36rem;
  text-align: center;
  line-height: 1.9;
  font-weight: 400;   /* LibreChat asks for 500; kept at the regular weight it had before the 500 face was added */
}
.split-parent > :not(.sr-only) { display: none !important; }
.split-parent > .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* ------------------------------------------------------------------------------
   The approved design's own parts (chat.js): top bar, masking badge and panel,
   highlighted values, message box, send and new-chat buttons. */

/* Top bar above LibreChat: the page becomes a column, LibreChat fills the rest. */
html.kt-has-head, html.kt-has-head body { height: 100%; }
html.kt-has-head body { display: flex; flex-direction: column; }
html.kt-has-head #root { flex: 1 1 auto; min-height: 0; }
html.kt-has-head #root > div:first-child { height: 100% !important; }
#kt-head {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 10px 24px; background: rgb(var(--surface-primary));
  border-bottom: 1px solid rgb(var(--border-light)); color: rgb(var(--text-primary)); direction: rtl;
}
#kt-head .kt-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; }
#kt-head .kt-brand svg { color: #0B6B4E; }
#kt-head .kt-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: #E3F1EA; color: #084D38; font-size: 14px; font-weight: 500;
}
@media (max-width: 560px) {
  #kt-head { padding: 8px 12px; }
  #kt-head .kt-brand { font-size: 17px; }
  #kt-head .kt-brand svg { width: 26px; height: 26px; }
  #kt-head .kt-pill { font-size: 12px; padding: 4px 10px; }
}

/* The gateway's plain-text note under the reply is replaced by the badge. */
.agent-turn .markdown p:has(> a[href*="/sent/"]),
.agent-turn .markdown hr:has(+ p > a[href*="/sent/"]) { display: none; }

.kt-sent { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 100%; direction: rtl; }
.kt-sent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kt-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #FBEFD9; color: #6E420C; font-size: 14px; font-weight: 600;
}
.kt-show {
  min-height: 44px; padding: 0 14px; border: 1px solid #C9D1CA; border-radius: 10px;
  background: #FFFFFF; color: #14201B; font: inherit; font-size: 14px; cursor: pointer;
}
.kt-show:hover { background: #EEF2EE; }
.kt-panel {
  background: #14201B; color: #E8EDE9; border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; text-align: right;
}
.kt-panel[hidden] { display: none; }
.kt-panel-title { font-size: 13px; color: #A9B8AE; }
.kt-panel-text { font-size: 16px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.kt-token {
  background: #3A2A10; color: #F5C77A; padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 14px; unicode-bidi: isolate; white-space: nowrap;
}

/* Values the gateway put back into the reply. */
::highlight(kt-restored) { background-color: #E3F1EA; color: #084D38; }
.agent-turn .markdown[data-kt-restored]::after {
  content: "القيم المظللة رجعت تلقائياً بعد رد النموذج، والنموذج نفسه ما شافها.";
  display: block; margin-top: 8px; font-size: 13px; color: #5A665F;
}

/* Send button: green, with the word «إرسال». */
html #send-button {
  width: auto; min-width: 44px; min-height: 44px; padding: 0 18px; border-radius: 10px;
  background: #0B6B4E; color: #FFFFFF; font-weight: 600; font-size: 15px; gap: 0;
}
html #send-button:hover:not(:disabled) { background: #084D38; }
html #send-button:disabled { opacity: .45; color: #FFFFFF; }
html #send-button svg { display: none; }
html #send-button::after { content: "إرسال"; }

/* «+ محادثة جديدة» at the top of the chats list. */
.kt-new {
  flex: none; min-height: 44px; margin: 0 12px 8px; border: none; border-radius: 10px;
  background: #0B6B4E; color: #FFFFFF; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.kt-new:hover { background: #084D38; }