/*
 * 237Edu warm-editorial theme for the pinned LibreChat client.
 *
 * LibreChat components consume semantic RGB triplets through rgb(var(--token)).
 * Keeping the overrides at that level gives the whole application a coherent
 * brand while preserving component behavior and the user's light/dark choice.
 */

html {
  color-scheme: light;

  --presentation: 251 246 236;
  --text-primary: 26 23 20;
  --text-secondary: 74 63 53;
  --text-secondary-alt: 111 94 77;
  --text-tertiary: 111 94 77;
  --text-warning: 141 58 39;
  --text-destructive: 163 59 42;
  --link: 141 58 39;
  --link-hover: 105 40 27;
  --link-visited: 112 64 105;
  --accent-primary: 194 84 58;
  --accent-primary-hover: 141 58 39;
  --ring-primary: 194 84 58;

  --header-primary: 251 246 236;
  --header-hover: 236 223 205;
  --header-button-hover: 236 223 205;
  --surface-active: 242 201 185;
  --surface-active-alt: 236 223 205;
  --surface-hover: 236 223 205;
  --surface-hover-alt: 217 200 176;
  --surface-composer-hover: 236 223 205;
  --surface-primary: 244 236 225;
  --surface-primary-alt: 251 246 236;
  --surface-primary-contrast: 236 223 205;
  --surface-secondary: 251 246 236;
  --surface-secondary-alt: 236 223 205;
  --surface-tertiary: 236 223 205;
  --surface-tertiary-alt: 251 246 236;
  --surface-dialog: 251 246 236;
  --surface-overlay: 74 63 53;
  --surface-submit: 194 84 58;
  --surface-submit-hover: 141 58 39;
  --surface-destructive: 163 59 42;
  --surface-destructive-hover: 126 42 29;
  --surface-chat: 251 246 236;
  --surface-qr: 251 246 236;

  --border-light: 217 200 176;
  --border-light-alpha: 1;
  --border-medium-alt: 196 174 145;
  --border-medium: 196 174 145;
  --border-medium-alpha: 1;
  --border-heavy: 159 132 101;
  --border-heavy-alpha: 1;
  --border-xheavy: 111 94 77;
  --border-xheavy-alpha: 1;
  --border-destructive: 163 59 42;

  --status-success: 61 107 58;
  --status-success-subtle: 201 217 191;
  --status-success-border: 143 185 130;
  --status-success-strong: 61 107 58;
  --status-info: 74 84 124;
  --status-info-subtle: 224 225 235;
  --status-info-border: 166 171 197;
  --status-info-strong: 74 84 124;
  --status-warning: 141 88 12;
  --status-warning-subtle: 234 218 173;
  --status-warning-border: 203 166 92;
  --status-warning-strong: 141 88 12;
  --status-error: 163 59 42;
  --status-error-subtle: 236 198 188;
  --status-error-border: 205 125 108;
  --status-error-strong: 163 59 42;
  --status-neutral: 74 63 53;
  --status-neutral-subtle: 236 223 205;
  --status-neutral-border: 196 174 145;

  --surface-inverted: 26 23 20;
  --surface-inverted-hover: 74 63 53;
  --text-inverted: 244 236 225;
  --surface-fixed: 251 246 236;
  --surface-fixed-hover: 236 223 205;
  --text-fixed: 26 23 20;
  --theme-font-family: Arial, "Helvetica Neue", sans-serif;
  --theme-elevation-surface: 0 16px 36px rgb(40 25 10 / 0.14);
}

html.dark,
.dark {
  color-scheme: dark;

  --presentation: 30 25 20;
  --text-primary: 244 236 225;
  --text-secondary: 205 190 169;
  --text-secondary-alt: 173 154 131;
  --text-tertiary: 173 154 131;
  --text-warning: 224 178 99;
  --text-destructive: 224 126 106;
  --link: 230 122 92;
  --link-hover: 242 160 136;
  --link-visited: 200 152 194;
  --accent-primary: 230 122 92;
  --accent-primary-hover: 242 160 136;
  --ring-primary: 230 122 92;

  --header-primary: 30 25 20;
  --header-hover: 58 34 24;
  --header-button-hover: 58 34 24;
  --surface-active: 58 34 24;
  --surface-active-alt: 72 47 36;
  --surface-hover: 58 34 24;
  --surface-hover-alt: 72 47 36;
  --surface-composer-hover: 58 34 24;
  --surface-primary: 20 17 14;
  --surface-primary-alt: 13 11 9;
  --surface-primary-contrast: 30 25 20;
  --surface-secondary: 30 25 20;
  --surface-secondary-alt: 44 37 30;
  --surface-tertiary: 44 37 30;
  --surface-tertiary-alt: 58 34 24;
  --surface-dialog: 30 25 20;
  --surface-overlay: 0 0 0;
  --surface-submit: 194 84 58;
  --surface-submit-hover: 230 122 92;
  --surface-destructive: 163 59 42;
  --surface-destructive-hover: 190 76 57;
  --surface-chat: 30 25 20;
  --surface-qr: 251 246 236;

  --border-light: 44 37 30;
  --border-medium-alt: 72 59 47;
  --border-medium: 72 59 47;
  --border-heavy: 111 94 77;
  --border-xheavy: 173 154 131;
  --border-destructive: 224 126 106;

  --status-success: 143 185 130;
  --status-success-subtle: 38 51 34;
  --status-success-border: 61 107 58;
  --status-success-strong: 61 107 58;
  --status-info: 166 171 197;
  --status-info-subtle: 38 41 57;
  --status-info-border: 74 84 124;
  --status-info-strong: 74 84 124;
  --status-warning: 224 178 99;
  --status-warning-subtle: 58 44 21;
  --status-warning-border: 141 88 12;
  --status-warning-strong: 141 88 12;
  --status-error: 224 126 106;
  --status-error-subtle: 58 31 24;
  --status-error-border: 163 59 42;
  --status-error-strong: 163 59 42;
  --status-neutral: 205 190 169;
  --status-neutral-subtle: 44 37 30;
  --status-neutral-border: 72 59 47;

  --surface-inverted: 244 236 225;
  --surface-inverted-hover: 217 200 176;
  --text-inverted: 26 23 20;
  --surface-fixed: 251 246 236;
  --surface-fixed-hover: 236 223 205;
  --text-fixed: 26 23 20;
  --theme-elevation-surface: 0 18px 42px rgb(0 0 0 / 0.52);
}

html,
body,
#root {
  background-color: rgb(var(--surface-primary));
  color: rgb(var(--text-primary));
  font-family: var(--theme-font-family);
}

/* LibreChat's upstream dark body rule has class-level specificity. */
html.dark,
html.dark body,
html.dark #root {
  background-color: rgb(var(--surface-primary));
  color: rgb(var(--text-primary));
}

/* Artifacts are disabled for every curated model. LibreChat can still render
   its orphaned tools trigger or a previously pinned Artifacts badge from a
   user's browser preferences, so remove those inactive controls as well. */
#tools-dropdown-button,
button:has(svg.lucide-wand-sparkles),
[role="menuitem"]:has(svg.lucide-wand-sparkles) {
  display: none !important;
}

::selection {
  background: rgb(var(--accent-primary) / 0.24);
  color: rgb(var(--text-primary));
}

/* Same-tab escape hatch back to the authenticated 237Edu AI page. */
#edu237-close-chat {
  position: fixed;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 60;
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgb(var(--border-light));
  border-radius: 9999px;
  background: rgb(var(--surface-primary-alt) / 0.94);
  padding: 0.45rem 0.8rem;
  color: rgb(var(--text-primary));
  box-shadow: 0 8px 22px rgb(40 25 10 / 0.1);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

#edu237-close-chat:hover {
  border-color: rgb(var(--accent-primary));
  background: rgb(var(--surface-hover));
  color: rgb(var(--accent-primary));
}

#edu237-close-chat:focus-visible,
#edu237-profile-home-link:focus-visible {
  outline: 2px solid rgb(var(--ring-primary));
  outline-offset: 2px;
}

#edu237-close-chat[hidden] {
  display: none;
}

#edu237-close-chat svg,
#edu237-profile-home-link svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

html.dark #edu237-close-chat {
  box-shadow: 0 10px 26px rgb(0 0 0 / 0.32);
}

html.dark img[src*="/provider-icons/openai.svg"],
html.dark img[src*="/provider-icons/anthropic.svg"],
html.dark img[src*="/provider-icons/amazon.svg"],
html.dark img[src*="/provider-icons/baai.svg"],
html.dark img[src*="/provider-icons/black-forest-labs.svg"],
html.dark img[src*="/provider-icons/fish-audio.svg"],
html.dark img[src*="/provider-icons/ibm-granite.svg"],
html.dark img[src*="/provider-icons/inception.svg"],
html.dark img[src*="/provider-icons/krea.svg"],
html.dark img[src*="/provider-icons/liquid.svg"],
html.dark img[src*="/provider-icons/meituan.svg"],
html.dark img[src*="/provider-icons/nousresearch.svg"],
html.dark img[src*="/provider-icons/recraft.svg"],
html.dark img[src*="/provider-icons/relace.svg"],
html.dark img[src*="/provider-icons/runway.svg"],
html.dark img[src*="/provider-icons/x-ai.svg"],
html.dark img[src*="/provider-icons/xai.svg"],
html.dark img[src*="/provider-icons/xiaomi.svg"],
html.dark img[src*="/provider-icons/z-ai.svg"] {
  filter: invert(1);
}

.edu237-model-shelf-link {
  position: sticky;
  bottom: 0;
  display: flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgb(var(--border-light));
  background: rgb(var(--surface-dialog) / 0.96);
  padding: 0.7rem 0.9rem;
  color: rgb(var(--accent-primary));
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.edu237-model-shelf-link:hover {
  background: rgb(var(--surface-hover));
}

.edu237-model-shelf-link:focus-visible {
  outline: 2px solid rgb(var(--ring-primary));
  outline-offset: -3px;
}

.edu237-credit-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(20 17 14 / 0.62);
  backdrop-filter: blur(6px);
}

.edu237-credit-sheet {
  position: relative;
  width: min(100%, 34rem);
  border: 1px solid rgb(var(--border-light));
  border-bottom: 0;
  border-radius: 1.75rem 1.75rem 0 0;
  background: rgb(var(--surface-dialog));
  padding: 2rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom));
  color: rgb(var(--text-primary));
  box-shadow: 0 -18px 48px rgb(0 0 0 / 0.28);
  animation: edu237-credit-sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.edu237-credit-sheet-handle {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: rgb(var(--border-heavy));
  transform: translateX(-50%);
}

.edu237-credit-sheet-close {
  position: absolute;
  top: 1.05rem;
  right: 1.1rem;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--border-light));
  border-radius: 9999px;
  background: transparent;
  color: rgb(var(--text-secondary));
}

.edu237-credit-sheet-close svg {
  width: 1rem;
  height: 1rem;
}

.edu237-credit-sheet-kicker {
  margin: 0 3rem 0.5rem 0;
  color: rgb(var(--accent-primary));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.edu237-credit-sheet h2 {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  line-height: 1.15;
}

.edu237-credit-sheet p:not(.edu237-credit-sheet-kicker) {
  margin: 0.75rem 0 0;
  color: rgb(var(--text-secondary));
  font-size: 0.9rem;
  line-height: 1.55;
}

.edu237-credit-sheet-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  margin-top: 1.4rem;
}

.edu237-credit-sheet-primary,
.edu237-credit-sheet-secondary {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.edu237-credit-sheet-primary {
  border: 1px solid rgb(var(--surface-submit));
  background: rgb(var(--surface-submit));
  color: white;
}

.edu237-credit-sheet-secondary {
  border: 1px solid rgb(var(--border-light));
  background: transparent;
  color: rgb(var(--text-primary));
}

.edu237-credit-sheet-close:focus-visible,
.edu237-credit-sheet-primary:focus-visible,
.edu237-credit-sheet-secondary:focus-visible {
  outline: 2px solid rgb(var(--ring-primary));
  outline-offset: 2px;
}

@keyframes edu237-credit-sheet-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@media (min-width: 640px) {
  .edu237-credit-sheet-backdrop {
    align-items: center;
    padding: 1.5rem;
  }

  .edu237-credit-sheet {
    border-bottom: 1px solid rgb(var(--border-light));
    border-radius: 1.75rem;
    padding: 2.2rem;
  }

  .edu237-credit-sheet-handle {
    display: none;
  }
}

@media (max-width: 639px) {
  /* Keep portaled dialogs visible on mobile browsers and Android WebView.
     The upstream enter animation can otherwise leave the panel behind its
     backdrop or outside the visual viewport on some Chromium builds. */
  [role="dialog"][data-state="open"],
  [role="alertdialog"][data-state="open"] {
    z-index: 2147483646 !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important;
    max-height: calc(var(--edu237-webview-height, 100dvh) - 1rem) !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }

  [role="dialog"][data-state="open"].h-\[calc\(100dvh-1rem\)\],
  [role="alertdialog"][data-state="open"].h-\[calc\(100dvh-1rem\)\] {
    height: calc(var(--edu237-webview-height, 100dvh) - 1rem) !important;
  }

  [role="dialog"][data-state="open"]:not([class*="inset-0"]),
  [role="alertdialog"][data-state="open"]:not([class*="inset-0"]) {
    position: fixed !important;
    left: 50vw !important;
    top: 50dvh !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  [role="dialog"]:not([data-state]) > .fixed.inset-0:last-child {
    z-index: 2147483646 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  [role="dialog"]:not([data-state]) > .fixed.inset-0:last-child > * {
    height: 85vh !important;
    height: 85dvh !important;
    max-height: 85vh !important;
    max-height: 85dvh !important;
  }

  .account-settings-popover.popover-from-left {
    max-width: calc(100vw - 1rem) !important;
    translate: calc(100vw - 3.5rem) 0 !important;
  }

  #edu237-close-chat {
    width: 2.25rem;
    padding: 0;
  }

  #edu237-close-chat .edu237-close-chat-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

/* Keep generated rich content inside the message column, especially in Android WebView. */
.katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0 0.45rem;
  scrollbar-width: thin;
}

.katex-display > .katex {
  min-width: max-content;
  text-align: left;
}

.prose table,
.prose pre,
.prose img {
  max-width: 100%;
}

.prose table,
.prose pre {
  overflow-x: auto;
}
/* Historical private quote/progress cards remain readable. */
.edu237-media-card button,
.edu237-media-card a {
  border: 1px solid rgb(var(--border-medium));
  border-radius: 999px;
}

.edu237-media-card {
  width: min(100%, 44rem);
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid rgb(var(--border-light));
  border-radius: 1rem;
  background: rgb(var(--surface-secondary));
  color: rgb(var(--text-primary));
  box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

.edu237-media-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
}

.edu237-media-card label {
  display: grid;
  gap: 0.3rem;
  color: rgb(var(--text-secondary));
  font-size: 0.8rem;
  font-weight: 600;
}

.edu237-media-card textarea,
.edu237-media-card select {
  width: 100%;
  border: 1px solid rgb(var(--border-medium));
  border-radius: 0.7rem;
  background: rgb(var(--surface-primary));
  color: rgb(var(--text-primary));
}

.edu237-media-card textarea {
  min-height: 6.5rem;
  padding: 0.7rem;
  resize: vertical;
}

.edu237-media-card select {
  min-height: 2.5rem;
  padding: 0.4rem 0.55rem;
}

.edu237-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.edu237-media-check {
  display: flex !important;
  align-items: center;
  gap: 0.45rem !important;
  margin-top: 0.8rem;
}

.edu237-media-check input {
  width: 1rem;
  height: 1rem;
}

.edu237-media-notice,
.edu237-media-error {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
}

.edu237-media-notice {
  color: rgb(var(--text-secondary));
}

.edu237-media-error {
  color: rgb(var(--text-destructive));
}

.edu237-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.edu237-media-card button,
.edu237-media-card a {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  color: rgb(var(--text-primary));
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
}

.edu237-media-card .edu237-media-primary {
  border-color: rgb(var(--text-primary));
  background: rgb(var(--text-primary));
  color: rgb(var(--surface-primary));
}

.edu237-media-card button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.edu237-media-result {
  display: block;
  width: 100%;
  max-height: 34rem;
  margin-top: 0.75rem;
  border-radius: 0.8rem;
  background: #000;
  object-fit: contain;
}

@media (max-width: 520px) {
  .edu237-media-card {
    padding: 0.8rem;
  }
}