/* ITBFX AI brand layer — injected via index.html. Re-apply with C:\tools\brand\ui\apply-ui.js. v12 2026-09-30 */
:root { --itb-navy: #0B1F3A; --itb-navy-deep: #08182E; --itb-amber: #FDB515; --itb-orange: #FF8D00; --itb-star: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2257.5%20-0.8%2029%2028.3%22%3E%3Cpath%20fill=%22%23FDB515%22%20d=%22M63.5488%2026.6766L72.118%2020.3461V-0.0297852L63.5488%2026.6766Z%22%20/%3E%3Cpath%20fill=%22%23FDB515%22%20opacity=%220.85%22%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M72.1191%20-0.0297852V20.3461L80.6869%2026.6766L72.1191%20-0.0297852Z%22%20/%3E%3Cpath%20fill=%22%23FDB515%22%20opacity=%220.75%22%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M85.9828%2010.1716L76.4023%2013.3234L77.4136%2016.4752L85.9828%2010.1716Z%22%20/%3E%3Cpath%20fill=%22%23FDB515%22%20d=%22M75.3903%2010.1716L76.4016%2013.3234L85.9806%2010.1716H75.3903ZM66.8281%2016.4553L68.8437%2010.1716H58.252L66.8267%2016.4553H66.8281Z%22%20/%3E%3C/svg%3E"); }

/* ---------- Dark palette: LibreChat's neutral grays shifted to a cool, navy-leaning slate (same luminance, ~218° hue) so the app matches the navy door ---------- */
html.dark {
  --gray-900: 11 17 28;   /* was 13 13 13  -> main canvas */
  --gray-875: 14 20 32;   /* was 18 18 18 */
  --gray-850: 17 24 38;   /* was 23 23 23  -> sidebar */
  --gray-800: 27 35 51;   /* was 33 33 33  -> composer, cards, presentation */
  --gray-700: 40 50 70;   /* was 47 47 47  -> tertiary surfaces */
  --gray-650: 49 60 82;   /* was 57 57 57 */
  --gray-600: 58 70 94;   /* was 66 66 66  -> borders */
  --gray-500: 82 95 120;  /* was 89 89 89 */
  --gray-400: 148 158 176;/* was 153 150 150 */
  --gray-300: 203 209 220;/* was 205 205 205 -> secondary text */
  --gray-200: 224 229 236;
  --gray-100: 235 238 243;/* primary text, barely cool */
  --gizmo-gray-950: 12 18 28;
}

/* ---------- Login / register (auth layout only) ---------- */
div.min-h-screen.flex-col:has(> main div.w-authPageWidth) { position: relative; overflow: hidden; isolation: isolate; }
div.min-h-screen.flex-col:has(> main div.w-authPageWidth)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--itb-star) no-repeat; background-size: 78vmin auto; background-position: calc(100% + 30vmin) -18vmin; opacity: .07;
}
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth) { background: var(--itb-navy); }
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth)::before { opacity: .10; }
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth) .bg-surface-primary { background-color: transparent; }
/* LibreChat paints fields with a 384px inset shadow (autofill guard) in surface-primary; repaint it navy */
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth) input.webkit-dark-styles,
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth) input.webkit-dark-styles:-webkit-autofill { box-shadow: inset 0 0 0 384px var(--itb-navy) !important; -webkit-box-shadow: inset 0 0 0 384px var(--itb-navy) !important; -webkit-text-fill-color: #F3F4F6; border-color: rgba(255,255,255,.18); }
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth) input.webkit-dark-styles:focus { border-color: var(--itb-amber); box-shadow: inset 0 0 0 384px var(--itb-navy), 0 0 0 1px var(--itb-amber) !important; }
html.dark div.min-h-screen.flex-col:has(> main div.w-authPageWidth) label { background-color: var(--itb-navy) !important; }
/* the mark now lives inside the heading, so the login page drops the big logo (register/reset keep it) */
div.min-h-screen.flex-col:has(form[aria-label="Login form"]) > div.h-10.w-full:has(> img[src$="logo.svg"]) { display: none; }
/* big logo with air (register / reset pages) */
div.min-h-screen.flex-col:has(> main div.w-authPageWidth) > div.h-10.w-full:has(> img[src$="logo.svg"]) { height: 6.5rem; margin-top: clamp(2.5rem, 9vh, 5.5rem); }
div.min-h-screen.flex-col:has(> main div.w-authPageWidth) > div.h-10.w-full > img[src$="logo.svg"] { filter: drop-shadow(0 18px 38px rgba(0,0,0,.35)); }
/* Login heading: "Welcome to ITBFX" + the ai mark standing in for the word AI (text stays in the DOM for screen readers) */
div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1 { font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; letter-spacing: -0.01em; margin-top: .25rem; }
div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1 { margin-bottom: 1.75rem; }
div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1::before { content: "Welcome to ITBFX"; font-size: 2rem; line-height: 2.5rem; font-weight: 600; white-space: nowrap; }
div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1::after { content: ""; display: inline-block; width: 2.5rem; height: 2.5rem; margin-left: .5rem; flex: none; background: url("logo.svg") center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
html:not(.dark) div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1::after { filter: drop-shadow(0 6px 14px rgba(11,31,58,.22)); }
/* on navy the tile would vanish: lift it one step lighter and add a hairline ring so it stays a mark in both modes */
html.dark div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1::after { border-radius: 22.4%; filter: brightness(1.45) drop-shadow(0 10px 22px rgba(0,0,0,.45)); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
div.min-h-screen.flex-col:has(> main div.w-authPageWidth) h1 { letter-spacing: -0.01em; margin-top: .25rem; }
/* Brachium gradient on the primary action */
div.min-h-screen.flex-col:has(> main div.w-authPageWidth) button[type="submit"] {
  background: linear-gradient(135deg, var(--itb-amber) 0%, var(--itb-orange) 100%); color: var(--itb-navy); font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 24px -10px rgba(255,141,0,.55);
}
div.min-h-screen.flex-col:has(> main div.w-authPageWidth) button[type="submit"]:hover { filter: brightness(1.06); }
@media (max-width: 640px) {
  div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1::before { font-size: 1.875rem; line-height: 2.25rem; }
  div.min-h-screen.flex-col:has(form[aria-label="Login form"]) h1::after { width: 2.3rem; height: 2.3rem; }
  div.min-h-screen.flex-col:has(> main div.w-authPageWidth) > div.h-10.w-full:has(> img[src$="logo.svg"]) { height: 5rem; }
  div.min-h-screen.flex-col:has(> main div.w-authPageWidth)::before { background-size: 88vmin auto; background-position: calc(100% + 44vmin) -36vmin; }
}

/* ---------- New-chat landing: "Welcome to ITBFX" + [ai] mark, quiet tagline, faint star ---------- */
div.gap-2:has(> div.size-10.justify-center) { flex-direction: row-reverse !important; flex-wrap: wrap; justify-content: center; column-gap: .7rem; row-gap: .4rem; }
div.gap-2:has(> div.size-10.justify-center) > div.size-10 { transform: scale(1.18); transform-origin: center; margin-bottom: 0 !important; animation: itbMarkIn .6s cubic-bezier(.33,1,.68,1) .8s both; }
@keyframes itbMarkIn { from { opacity: 0; transform: translate3d(0,50px,0) scale(1.18); } to { opacity: 1; transform: translate3d(0,0,0) scale(1.18); } }
@media (prefers-reduced-motion: reduce) { div.gap-2:has(> div.size-10.justify-center) > div.size-10 { animation: none; } }
div.gap-2:has(> div.size-10.justify-center)::after {
  content: "Ask anything to get started."; flex-basis: 100%; text-align: center; font-size: .95rem; font-weight: 400; margin-top: .55rem; color: #6B7280;
}
html.dark div.gap-2:has(> div.size-10.justify-center)::after { color: #9AA4B2; }

/* ---------- Chat: the send control carries the Brachium gradient ---------- */
button[data-testid="send-button"]:not(:disabled) { background: linear-gradient(135deg, var(--itb-amber) 0%, var(--itb-orange) 100%) !important; color: var(--itb-navy) !important; }
button[data-testid="send-button"]:not(:disabled) svg { color: var(--itb-navy) !important; }
button[data-testid="send-button"]:not(:disabled):hover { filter: brightness(1.06); }

/* ---------- generated from the live bundle: dark utilities Tailwind compiled to literal neutral grays, re-mapped to the cool slate palette (23 rules) ---------- */
.bg-gray-700{background-color:#283246;background-color:rgba(40, 50, 70, var(--tw-bg-opacity))}
.bg-gray-900\/80{background-color:#0b111ccc}
.dark .prose :where(code):not(:where([class~=not-prose] *)):not(:where(pre *)){background-color:#3a465e}
.dark .btn-neutral{border-color:#3a465e;border-color:rgba(58, 70, 94, var(--tw-border-opacity))}
.dark .btn-neutral:hover{background-color:#3a465e;background-color:rgba(58, 70, 94, var(--tw-bg-opacity))}
.dark .btn-neutral:focus{box-shadow:0 0 0 2px #525f78}
.dark body,.dark html{background-color:#1b2333;background-color:rgba(27, 35, 51, var(--tw-bg-opacity))}
.dark .markdown blockquote{border-color:#3a465e}
.dark .markdown th{border-color:#3a465e;background-color:#3a465e}
.dark .markdown td,.dark .markdown td:last-child{border-color:#3a465e}
.dark .webkit-dark-styles,.dark .webkit-dark-styles:focus{-webkit-box-shadow:inset 0 0 0 50vh #0b111c}
.dark .dark\:border-gray-700{border-color:#283246;border-color:rgba(40, 50, 70, var(--tw-border-opacity))}
.dark .dark\:border-gray-800{border-color:#1b2333;border-color:rgba(27, 35, 51, var(--tw-border-opacity))}
.dark .dark\:border-gray-800\/50{border-color:#1b233380}
.dark .dark\:bg-gray-700{background-color:#283246;background-color:rgba(40, 50, 70, var(--tw-bg-opacity))}
.dark .dark\:bg-gray-800{background-color:#1b2333;background-color:rgba(27, 35, 51, var(--tw-bg-opacity))}
.dark .dark\:bg-gray-850{background-color:#111826;background-color:rgba(17, 24, 38, var(--tw-bg-opacity))}
.dark .dark\:bg-gray-900{background-color:#0b111c;background-color:rgba(11, 17, 28, var(--tw-bg-opacity))}
.dark .dark\:from-gray-850{--tw-gradient-from:#111826 var(--tw-gradient-from-position);--tw-gradient-to:#11182600 var(--tw-gradient-to-position)}
.dark .dark\:hover\:bg-gray-700:hover{background-color:#283246;background-color:rgba(40, 50, 70, var(--tw-bg-opacity))}
.dark .dark\:hover\:bg-gray-800:hover{background-color:#1b2333;background-color:rgba(27, 35, 51, var(--tw-bg-opacity))}
.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:#1b233380}
.dark .dark\:focus\:ring-offset-gray-900:focus{--tw-ring-offset-color:#0b111c}