/* ITBFX AI brand layer — injected via index.html. Re-apply with C:\tools\brand\ui\apply-ui.js. v10 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"); }

/* ---------- 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); }