/* HID CompanyAI – brand layer for LibreChat v0.8.7 (direction A "Werkhalle").
   Loaded after the upstream bundle CSS; overrides design tokens and a few hard-coded utility classes.
   Selectors documented in Work/HID/CompanyAI/design/librechat-theming.md – re-check after LibreChat updates. */

@font-face{font-family:'Barlow';src:url('fonts/barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/barlow-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url('fonts/barlow-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-latin-800-italic.woff2') format('woff2');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --hid-green:#00664b; --hid-green-600:#00805e; --hid-green-700:#004a37; --hid-green-900:#0b2e24;
  --hid-orange:#f59c00; --hid-orange-600:#d98800;
  --hid-ink:#16201c; --hid-wood-50:#faf6f0; --hid-wood-100:#f2e9dc; --hid-wood-300:#d9c3a5;
  --hid-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --hid-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------- fonts ---------- */
html,body,.font-sans,button,input,textarea,select{font-family:'Barlow',Inter,system-ui,sans-serif !important}
code,pre,kbd{font-family:var(--hid-mono) !important}

/* ---------- tokens: dark (default for HID) ---------- */
html.dark{
  --presentation:#0f1714;
  --surface-primary:#0b120f; --surface-primary-alt:#0a110e;
  --surface-secondary:#141f1b; --surface-secondary-alt:#16231e;
  --surface-tertiary:#1a2722; --surface-tertiary-alt:#1a2722;
  --surface-hover:#1d2c26; --surface-hover-alt:#22332c;
  --surface-active:#1f302a; --surface-active-alt:#16231e;
  --surface-chat:#16211d; --surface-dialog:#111a17;
  --surface-submit:var(--hid-green); --surface-submit-hover:var(--hid-green-600);
  --text-primary:#e9efec; --text-secondary:#b4c8bf; --text-secondary-alt:#8fb3a6; --text-tertiary:#7d978d;
  --border-light:#22332c; --border-medium:#2a3c35; --border-medium-alt:#2a3c35; --border-heavy:#3a5048; --border-xheavy:#4c665c;
  --ring-primary:var(--hid-orange);
  --header-primary:#0f1714; --header-hover:#16231e;
  --primary:164 100% 20%; --primary-foreground:0 0% 100%; --ring:38 100% 48%;
  --background:156 22% 7%; --card:156 22% 9%; --popover:156 22% 9%; --border:156 20% 16%; --input:156 20% 16%;
  --accent:156 20% 14%; --muted:156 20% 14%;
  --radius:.7rem;
  --hid-bubble-user:#1a2722; --hid-accent-text:var(--hid-orange);
}
/* ---------- tokens: light ---------- */
html.light{
  --presentation:#fbf9f5;
  --surface-primary:#ffffff; --surface-primary-alt:#f4efe6;
  --surface-secondary:#faf6f0; --surface-secondary-alt:#efe7da;
  --surface-tertiary:#f2e9dc; --surface-tertiary-alt:#ffffff;
  --surface-hover:#ece2d2; --surface-hover-alt:#e4d7c3;
  --surface-active:#e9dfcf; --surface-active-alt:#efe7da;
  --surface-chat:#ffffff; --surface-dialog:#ffffff;
  --surface-submit:var(--hid-green); --surface-submit-hover:var(--hid-green-700);
  --text-primary:var(--hid-ink); --text-secondary:#4a524e; --text-secondary-alt:#5f6863; --text-tertiary:#7a817d;
  --border-light:#e8dfd2; --border-medium:#d9c9b0; --border-medium-alt:#d9c9b0; --border-heavy:#c3ad8c;
  --ring-primary:var(--hid-green);
  --primary:164 100% 20%; --primary-foreground:0 0% 100%; --ring:164 100% 20%;
  --radius:.7rem;
  --hid-bubble-user:#e6f0ec; --hid-accent-text:var(--hid-green);
}
.prose{--tw-prose-links:var(--hid-green)}
html.dark .prose{--tw-prose-invert-links:var(--hid-orange);--tw-prose-links:var(--hid-orange)}
::selection{background:rgba(245,156,0,.35)}

/* =========================================================
   LOGIN – full-bleed hall photo, green gradient, left hero
   ========================================================= */
div.min-h-screen:has(.w-authPageWidth){
  background:#06150f url('img/login-hall.webp') center right/cover no-repeat !important;
  color:#fff;
}
@media (max-width:960px){div.min-h-screen:has(.w-authPageWidth){background-image:url('img/login-hall-960.webp') !important;background-position:70% center !important}}
div.min-h-screen:has(.w-authPageWidth)::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,28,21,.95) 0%,rgba(0,74,55,.84) 38%,rgba(0,40,30,.30) 70%,rgba(0,0,0,.10) 100%);
}
div.min-h-screen:has(.w-authPageWidth) > *{position:relative}
div.min-h-screen:has(.w-authPageWidth) > .absolute{position:absolute}
/* upstream top logo banner off – our hero brings the logo */
div.min-h-screen:has(.w-authPageWidth) > div:has(img[src$="logo.svg"]){display:none}
div.min-h-screen:has(.w-authPageWidth) > main{justify-content:flex-start !important;padding:0 clamp(24px,6.5vw,96px)}
.w-authPageWidth{
  width:min(560px,100%) !important;max-width:none !important;
  background:transparent !important;box-shadow:none !important;padding:0 !important;overflow:visible !important;
}
.w-authPageWidth > h1{display:none !important}
#hid-hero .plate{display:inline-block;background:#fff;padding:12px 16px;border-radius:6px;margin-bottom:clamp(28px,6vh,56px)}
#hid-hero .plate img{height:40px;display:block}
#hid-hero h2{font:800 clamp(46px,5.6vw,80px)/.95 var(--hid-display);text-transform:uppercase;letter-spacing:-.005em;color:#fff;margin:0}
#hid-hero h2 em{font-style:normal;color:var(--hid-orange);display:block}
#hid-hero p{margin:22px 0 34px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:#d6e6df;max-width:500px}
a[data-testid="openid"]{
  background:var(--hid-orange) !important;color:#111 !important;border:0 !important;border-radius:10px !important;
  justify-content:center;padding:16px 22px !important;max-width:420px;
  font:700 17px 'Barlow',sans-serif !important;box-shadow:0 10px 30px rgba(245,156,0,.25);transition:transform .15s,background .15s;
}
a[data-testid="openid"]:hover{background:#ffb02e !important;transform:translateY(-1px)}
a[data-testid="openid"] p{color:#111 !important;font-weight:700}
#hid-fine{margin-top:16px;font-size:13px;color:#9fbdb1;display:flex;gap:8px;align-items:center}
#hid-fine svg{width:14px;height:14px}
#hid-stamp{
  position:fixed;right:clamp(24px,5vw,72px);bottom:clamp(70px,9vh,90px);pointer-events:none;
  border:2.5px solid rgba(255,255,255,.75);color:rgba(255,255,255,.88);
  font:600 15px/1.5 var(--hid-mono);letter-spacing:.08em;padding:10px 14px;transform:rotate(-4deg);
}
#hid-stamp b{display:block;font-size:22px}
#hid-feat{position:fixed;left:clamp(24px,6.5vw,96px);bottom:clamp(56px,7vh,60px);display:flex;gap:30px;color:#cfe1da;font-size:14px;flex-wrap:wrap}
#hid-feat span{display:flex;align-items:center;gap:8px}
#hid-feat i{width:8px;height:8px;background:var(--hid-orange);display:inline-block;transform:skewX(-18deg)}
@media (max-width:760px){#hid-stamp{display:none}#hid-feat{position:static;margin:40px 0 0}}
/* footer links + theme toggle on login */
div.min-h-screen:has(.w-authPageWidth) [role="contentinfo"]{justify-content:flex-end !important;padding-right:clamp(24px,5vw,72px)}
div.min-h-screen:has(.w-authPageWidth) [role="contentinfo"] a,
div.min-h-screen:has(.w-authPageWidth) [role="contentinfo"]{color:#cfe1da !important}
div.min-h-screen:has(.w-authPageWidth) > .absolute.bottom-0.left-0{display:none}

/* =========================================================
   CHAT
   ========================================================= */
/* sidebar */
html.dark aside nav, html.dark aside > div > div.border-r{border-color:#1d2a25 !important}
[data-testid="new-chat-button"]{color:var(--hid-orange) !important}
/* active conversation: orange tick */
html.dark [aria-label="Chatverlauf"] a[aria-current="page"], html.dark [aria-label="Chatverlauf"] .bg-surface-active-alt{box-shadow:inset 3px 0 0 var(--hid-orange)}
/* main area glow */
html.dark main[role="main"]{background:radial-gradient(1200px 520px at 85% -12%,rgba(0,102,75,.38),transparent 70%),var(--presentation)}
/* model selector */
[data-testid="model-selector-button"]{font-weight:600}

/* landing greeting */
main[role="main"] .animate-fadeIn,
main[role="main"] h2:has(> span){font-family:var(--hid-display) !important}
#hid-greet{font:800 clamp(34px,4.2vw,54px)/1 var(--hid-display);text-transform:uppercase;letter-spacing:.005em;color:var(--text-primary);text-align:center}
#hid-greet em{font-style:normal;color:var(--hid-accent-text)}
/* conversation starters as cards */
button.rounded-2xl.border-border-medium.bg-surface-secondary{
  border-radius:14px !important;border-color:var(--border-light) !important;text-align:left;
  background:color-mix(in srgb,var(--surface-secondary) 85%,transparent) !important;transition:border-color .15s,transform .15s;
}
button.rounded-2xl.border-border-medium.bg-surface-secondary:hover{border-color:var(--hid-orange) !important;transform:translateY(-2px)}

/* composer */
div.bg-surface-chat:has(#prompt-textarea){border-radius:16px !important;box-shadow:0 10px 40px rgba(0,0,0,.18)}
html.dark div.bg-surface-chat:has(#prompt-textarea){border-color:#2a3c35 !important;box-shadow:0 10px 40px rgba(0,0,0,.45)}
div.bg-surface-chat:has(#prompt-textarea):focus-within{border-color:var(--hid-green-600) !important}
#send-button,[data-testid="send-button"]{background:var(--hid-orange) !important;border-radius:10px !important}
#send-button svg,[data-testid="send-button"] svg{color:#111 !important}
#send-button:hover:not(:disabled){background:#ffb02e !important}
#send-button:disabled{opacity:.45}

/* messages: user bubble right, assistant with brand avatar */
.message-render:has(> .user-turn){flex-direction:row-reverse}
.message-render:has(> .user-turn) > div:first-child{display:none}
.user-turn{align-items:flex-end}
.user-turn > h2{display:none}
.user-turn .message-content{
  background:var(--hid-bubble-user);padding:.7rem 1rem;border-radius:16px 16px 4px 16px;width:auto;max-width:85%;
}
.agent-turn > h2{font-weight:700}
/* tables in answers */
.message-content table th{font-weight:600;color:var(--text-secondary-alt)}
.message-content table td{font-variant-numeric:tabular-nums}
/* footer line under composer */
main [role="contentinfo"]{font-size:12px;opacity:.75}