@charset "UTF-8"; /* ============================================================================= * bil.scss — UI styling voor BI * * Brand-thema wisselen: zet op het data-brand attribuut. * ← default * * * Een nieuw merk toevoegen = één [data-brand="…"] blok toevoegen met alleen * de variabelen die anders moeten zijn dan LOGISZ. Hercompileer bil.scss * (Web Compiler) of edit bil.css direct. * ============================================================================= */ /* ── Minimale reset (Bootstrap reboot is niet meer geladen) ──────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; min-height: 100%; } /* ── Brand: LOGISZ (default) ─────────────────────────────────────────────── */ :root, [data-brand=logisz] { /* Universeel — bruikbaar op elke pagina */ --accent: #FFBF00; /* brand-accent (amber); was #FFFFFF */ /* Legacy/classic-admin tokens (stonden in site.css op `*`) */ --background: #F7F7F7; --white: #FFFFFF; --black: #000000; --logisz-amber: var(--accent, #FFBF00); /* alias — switcht mee met brand */ --on-accent: #111827; --heading-color: #FFFFFF; --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.7); --bg-color: #000000; --card-bg: rgba(20, 20, 20, 0.7); --card-bg-fallback: rgba(20, 20, 20, 0.97); /* zonder backdrop-filter */ --card-border: rgba(255, 255, 255, 0.12); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --chrome-bg: #000000; /* sidebar + blade — bij LOGISZ = bg-color */ --text-on-body: #ffffff; /* tekst die op body-bg zweeft (page-header, empty-state) */ --text-muted-on-body: rgba(255, 255, 255, 0.7); --surface-bg: rgba(255, 255, 255, 0.04); /* sidebar, panel-vlakken */ --surface-bg-hover: rgba(255, 255, 255, 0.08); /* hover op lijstitems, icon-buttons */ --bg-elev: #0c0c0c; /* composer-, topbar-niveau */ --bg-elev-2: #161616; /* hover surfaces, user-bubble fallback */ --bg-elev-3: #222222; /* sterkere hover */ --border-subtle: rgba(255, 255, 255, 0.06); /* glass-border, topbar separator */ --text-faint: #9a9a9a; /* derde tier (zwakker dan --text-muted) */ --accent-hover: #ffd33d; /* hover-state op --accent */ --accent-soft: rgba(255, 191, 0, 0.14); /* zachte accent-wash */ --pill-border: rgba(255, 255, 255, 0.18); /* nav-pill default */ --pill-border-hover: rgba(255, 255, 255, 0.32); --pill-border-active: rgba(255, 255, 255, 0.45); --pill-bg-hover: rgba(255, 255, 255, 0.06); --pill-bg-active: rgba(255, 255, 255, 0.14); --pill-text-active: #ffffff; --glass-bg: rgba(0, 0, 0, 0.22); /* topbar */ --glass-bg-soft: rgba(0, 0, 0, 0.08); --user-bubble: rgba(0, 0, 0, 0.45); --user-bubble-border: rgba(255, 255, 255, 0.18); --user-bubble-text: #ffffff; --danger: #e06b5e; /* zacht rood, voor destructieve acties */ --logo-bg: #000000; --logo-image: url("/images/logisz/logo.webp"); --logo-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); --font-family: "Poppins", sans-serif; --font-mono: "Poppins", sans-serif; /*'Consolas', 'Monaco', monospace;*/ /* monospace: code, timestamps, tool-tags */ /* Chat-specifiek — alleen op de chat-pagina */ --chat-bubble-user-bg: rgba(255, 255, 255, 0.10); --chat-bubble-user-text: var(--text); --chat-bubble-assistant-bg: transparent; /* Chat-page energizer-positionering: shift mee met de sidebar zodat de foto visueel midden in het chat-paneel komt, niet in het viewport */ --chat-bg-position: calc(50% + 136px) center; /* sidebar open: 136px = halve sidebar */ --chat-bg-position-collapsed: center center; /* sidebar dicht: viewport-center */ /* Login-specifiek — alleen op de login-splash */ --login-bg-image: url("/images/logisz/background.jpg"); --login-bg-size: cover; --login-bg-position: center center; --login-vignette: rgba(0, 0, 0, 0.35); --login-pill-bg: #000000; --login-pill-text: #ffffff; --login-pill-border: rgba(255, 255, 255, 0.18); --login-pill-shadow: 0 10px 32px rgba(0, 0, 0, 0.42); --login-pill-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.55); --login-glow: #ffffff; } /* ── Brand: Aurora — dark navy-purple thema met mint accent ──────────────── */ [data-brand=aurora] { /* Universeel — bruikbaar op elke pagina */ --accent: #34d399; /* mint/emerald 400 */ --on-accent: #022c22; /* deep emerald-black voor text-on-mint */ --accent-hover: #6ee7b7; /* lighter mint voor hover */ --accent-soft: rgba(52, 211, 153, 0.16); /* zachte mint wash */ --heading-color: #f1f5f9; /* slate-100, bijna wit */ --text: #e2e8f0; /* slate-200 */ --text-muted: rgba(226, 232, 240, 0.7); --text-faint: #94a3b8; /* slate-400 */ --bg-color: #1a1d2e; /* deep navy-purple */ --card-bg: rgba(36, 38, 58, 0.7); /* iets opgehoogd, glassy */ --card-bg-fallback: rgba(36, 38, 58, 0.97); --card-border: rgba(241, 245, 249, 0.12); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(241, 245, 249, 0.05); --chrome-bg: #14172a; /* darker dan body, voor sidebar+blade */ --text-on-body: #f1f5f9; --text-muted-on-body: rgba(241, 245, 249, 0.72); --surface-bg: rgba(241, 245, 249, 0.04); --surface-bg-hover: rgba(241, 245, 249, 0.08); --bg-elev: #0f1120; --bg-elev-2: #1d2034; --bg-elev-3: #252944; --border-subtle: rgba(241, 245, 249, 0.06); --pill-border: rgba(241, 245, 249, 0.18); --pill-border-hover: rgba(241, 245, 249, 0.32); --pill-border-active: rgba(241, 245, 249, 0.45); --pill-bg-hover: rgba(241, 245, 249, 0.06); --pill-bg-active: rgba(241, 245, 249, 0.14); --pill-text-active: #ffffff; --glass-bg: rgba(0, 0, 0, 0.28); --glass-bg-soft: rgba(0, 0, 0, 0.10); --user-bubble: rgba(0, 0, 0, 0.45); --user-bubble-border: rgba(52, 211, 153, 0.30); /* mint-getinte rand — Aurora signature */ --user-bubble-text: #f1f5f9; --danger: #f87171; /* rose-400 voor variatie t.o.v. LOGISZ */ --logo-bg: #14172a; /* Inline SVG: mint cirkel met "A"-mountain. Geen externe asset nodig. */ --logo-image: url("data:image/svg+xml;utf8,"); --logo-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); --font-family: "Poppins", sans-serif; /* Chat-specifiek */ --chat-bubble-user-bg: rgba(52, 211, 153, 0.14); --chat-bubble-user-text: var(--text); --chat-bubble-assistant-bg: rgba(36, 38, 58, 0.92); /* dark — gebruikt in [data-brand="aurora"] override hieronder */ /* Login-splash: aurora-effect via twee radial gradients (mint + indigo) */ --login-bg-image: radial-gradient(ellipse 70% 60% at 20% 25%, rgba(52, 211, 153, 0.22), transparent 60%), radial-gradient(ellipse 60% 70% at 85% 75%, rgba(99, 102, 241, 0.20), transparent 65%); --login-bg-size: cover; --login-bg-position: center center; --login-vignette: rgba(0, 0, 0, 0.40); --login-pill-bg: #14172a; --login-pill-text: #f1f5f9; --login-pill-border: rgba(241, 245, 249, 0.18); --login-pill-shadow: 0 10px 32px rgba(0, 0, 0, 0.50); --login-pill-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.60); --login-glow: #34d399; /* mint comet-glow rondom de pill */ /* Chat-bg shift: standaard 136px op sidebar-open, terug naar center bij collapsed */ --chat-bg-position: calc(50% + 136px) center; --chat-bg-position-collapsed: center center; } /* ── Brand: Niels Golstein — sunset coral op deep ocean teal ─────────────── */ [data-brand=niels] { /* Universeel */ --accent: #fb7185; /* coral / rose-400 */ --on-accent: #1f0e10; /* deep wine — AAA contrast op coral */ --accent-hover: #fda4af; /* lighter coral / rose-300 */ --accent-soft: rgba(251, 113, 133, 0.16); --heading-color: #e0f2f1; /* zacht teal-wit */ --text: #cbd5e1; /* slate-300 — warm wit */ --text-muted: rgba(203, 213, 225, 0.7); --text-faint: #94a3b8; /* slate-400 */ --bg-color: #0a1f2c; /* deep ocean teal-navy */ --card-bg: rgba(15, 35, 50, 0.72); /* glassy deep teal */ --card-bg-fallback: rgba(15, 35, 50, 0.97); --card-border: rgba(224, 242, 241, 0.12); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(224, 242, 241, 0.05); --chrome-bg: #06141d; /* darker dan body */ --text-on-body: #e0f2f1; --text-muted-on-body: rgba(224, 242, 241, 0.72); --surface-bg: rgba(224, 242, 241, 0.04); --surface-bg-hover: rgba(224, 242, 241, 0.08); --bg-elev: #061821; --bg-elev-2: #102634; --bg-elev-3: #1a3243; --border-subtle: rgba(224, 242, 241, 0.06); --pill-border: rgba(224, 242, 241, 0.18); --pill-border-hover: rgba(224, 242, 241, 0.32); --pill-border-active: rgba(224, 242, 241, 0.45); --pill-bg-hover: rgba(224, 242, 241, 0.06); --pill-bg-active: rgba(224, 242, 241, 0.14); --pill-text-active: #ffffff; --glass-bg: rgba(0, 0, 0, 0.28); --glass-bg-soft: rgba(0, 0, 0, 0.10); --user-bubble: rgba(0, 0, 0, 0.45); --user-bubble-border: rgba(251, 113, 133, 0.30); /* coral-getinte rand — Niels signature */ --user-bubble-text: #e0f2f1; --danger: #f87171; /* rose-400 voor consistentie met thema */ --logo-bg: #06141d; /* Inline SVG: coral cirkel met witte "N" path */ --logo-image: url("data:image/svg+xml;utf8,"); --logo-shadow: 0 12px 28px rgba(0, 0, 0, 0.55); --font-family: "Poppins", sans-serif; /* Chat-specifiek */ --chat-bubble-user-bg: rgba(251, 113, 133, 0.12); /* coral-tinted */ --chat-bubble-user-text: var(--text); --chat-bubble-assistant-bg: rgba(15, 35, 50, 0.92); /* Login: sunset over ocean — coral glow boven, cyan glow rechtsonder */ --login-bg-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(251, 113, 133, 0.28), transparent 65%), radial-gradient(ellipse 60% 70% at 85% 95%, rgba(56, 189, 248, 0.20), transparent 65%); --login-bg-size: cover; --login-bg-position: center center; --login-vignette: rgba(0, 0, 0, 0.40); --login-pill-bg: #06141d; --login-pill-text: #e0f2f1; --login-pill-border: rgba(224, 242, 241, 0.18); --login-pill-shadow: 0 10px 32px rgba(0, 0, 0, 0.55); --login-pill-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.65); --login-glow: #fb7185; /* coral comet-glow rond de pill */ --chat-bg-position: calc(50% + 136px) center; --chat-bg-position-collapsed: center center; } /* ── Brand: Berdal — alleen de waardes die afwijken ──────────────────────── */ [data-brand=berdal] { --accent: #FFC600; --on-accent: #00426A; --heading-color: #00426A; --text: #000000; --text-muted: rgba(0, 0, 0, 0.7); --bg-color: #00426A; --card-bg: rgba(255, 255, 255, 0.7); --card-bg-fallback: rgba(255, 255, 255, 0.97); --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Chrome — sidebar + blade worden lichte glas-vlakken, niet brand-blauw */ --chrome-bg: rgba(247, 247, 247, 0.95); /* text-on-body blijft wit, want body is bij Berdal nog steeds donkerblauw (met bg-image) */ --text-on-body: #ffffff; --text-muted-on-body: rgba(255, 255, 255, 0.78); --surface-bg: rgba(0, 0, 0, 0.04); --surface-bg-hover: rgba(0, 0, 0, 0.08); /* Glass-tokens kantelen — wit-getint i.p.v. zwart-getint */ --glass-bg: rgba(255, 255, 255, 0.5); --glass-bg-soft: rgba(255, 255, 255, 0.3); /* Border-subtle: donkere haarlijn op lichte achtergrond */ --border-subtle: rgba(0, 0, 0, 0.10); /* Pill-tokens: donkere borders + dark-wash i.p.v. licht-wash */ --pill-border: rgba(0, 0, 0, 0.14); --pill-border-hover: rgba(0, 0, 0, 0.28); --pill-border-active: rgba(0, 0, 0, 0.40); --pill-bg-hover: rgba(0, 0, 0, 0.04); --pill-bg-active: rgba(0, 0, 0, 0.10); --pill-text-active: #00426A; --accent-hover: #ffd633; --accent-soft: rgba(255, 198, 0, 0.18); --user-bubble: rgba(255, 255, 255, 0.10); --user-bubble-border: rgba(255, 255, 255, 0.28); --logo-bg: #00426A; --logo-image: url("/images/berdal/logo.svg"); --chat-bubble-user-bg: rgba(255, 198, 0, 0.18); /* gele tint i.p.v. wit */ --login-bg-image: url("/images/berdal/background.svg"); --login-bg-size: 980px 950px; --login-bg-position: right -367px bottom -237px; /* Berdal heeft een vaste offscreen-positie — niet meeschuiven met sidebar */ --chat-bg-position: var(--login-bg-position); --chat-bg-position-collapsed: var(--login-bg-position); --login-vignette: transparent; --login-pill-bg: #00426A; --login-pill-text: #FFFFFF; --login-glow: #FFC600; } /* ── Poppins webfonts (lokaal in wwwroot/webfonts) ───────────────────────── */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../webfonts/poppins-v21-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../webfonts/poppins-v21-latin-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../webfonts/poppins-v21-latin-700.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../webfonts/poppins-v21-latin-800.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../webfonts/poppins-v21-latin-900.woff2") format("woff2"); } /* ============================================================================= * Login pagina * Class wordt gezet via ViewData["BodyClass"] = "bil-login" in Login.cshtml. * ============================================================================= */ body.bil-login { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background-color: var(--bg-color); background-image: var(--login-bg-image); background-size: var(--login-bg-size); background-position: var(--login-bg-position); background-repeat: no-repeat; font-family: var(--font-family); color: var(--text); position: relative; } /* Vignet zodat de card visueel ploft op de energizer */ body.bil-login::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, var(--login-vignette) 100%); pointer-events: none; z-index: 0; } /* _Layout footer verbergen op de login (fullscreen splash, geen © daaronder) */ body.bil-login footer { display: none; } /* ── Card ────────────────────────────────────────────────────────────────── */ .bil-login-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 64px 36px 40px; /* extra top voor de overlappende logo */ text-align: center; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: var(--card-shadow); display: flex; flex-direction: column; align-items: center; animation: bil-fade-in 0.5s ease-out both; } @keyframes bil-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .bil-login-logo { position: absolute; top: -44px; /* 50% boven de card-rand */ left: 50%; transform: translateX(-50%); width: 88px; height: 88px; padding: 8px; /* inset zodat logo niet de cirkelrand raakt */ margin: 0; background-color: var(--logo-bg); background-image: var(--logo-image); background-size: contain; background-position: center; background-repeat: no-repeat; background-origin: content-box; /* logo respecteert de padding-inset */ border: 1px solid var(--card-border); /* zelfde rand als de card */ border-radius: 50%; box-shadow: var(--logo-shadow); } .bil-login-eyebrow { display: inline-block; margin: 0 0 14px; padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); border-radius: 999px; } .bil-login-heading { margin: 0 0 14px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--heading-color); text-transform: none; /* override h1.screamer uit logisz.css */ padding-bottom: 0; /* override h1.screamer uit logisz.css */ } .bil-login-subhead { margin: 0 0 28px; font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 280px; font-weight: 400; } /* ── Pill knop met roterende comet-glow ──────────────────────────────────── */ @property --bil-pill-angle { syntax: ""; inherits: false; initial-value: 0deg; } .bil-login-pill-wrapper { position: relative; display: inline-block; transition: transform 0.15s ease; } .bil-login-pill-wrapper:hover { transform: scale(1.03); } .bil-login-pill-wrapper:active { transform: scale(0.98); } .bil-login-pill { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; background: var(--login-pill-bg); color: var(--login-pill-text); border: 1px solid var(--login-pill-border); border-radius: 999px; padding: 13px 26px 13px 20px; font-size: 15px; font-weight: 500; letter-spacing: 0.1px; text-decoration: none; box-shadow: var(--login-pill-shadow); transition: box-shadow 0.2s ease; white-space: nowrap; } .bil-login-pill-wrapper:hover .bil-login-pill { box-shadow: var(--login-pill-shadow-hover); } .bil-login-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .bil-login-pill-ms { width: 18px; height: 18px; display: block; flex-shrink: 0; } .bil-login-pill-spinner { width: 18px; height: 18px; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Trust signal onder de pill ──────────────────────────────────────────── */ .bil-login-trust { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1; color: var(--text-muted); } .bil-login-trust i { font-size: 11px; } /* Scherpe ring direct op de pill-rand (mask = alleen border zichtbaar) */ .bil-login-pill-glow { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; z-index: 3; } .bil-login-pill-glow::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--bil-pill-angle, 0deg), transparent 0deg, color-mix(in srgb, var(--login-glow) 20%, transparent) 10deg, color-mix(in srgb, var(--login-glow) 70%, transparent) 24deg, var(--login-glow) 35deg, color-mix(in srgb, var(--login-glow) 70%, transparent) 46deg, color-mix(in srgb, var(--login-glow) 20%, transparent) 60deg, transparent 75deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: bil-pill-spin 6s linear infinite; } /* Zachte halo achter de pill (blur, leakt buiten de pill-rand) */ .bil-login-pill-wrapper::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; background: conic-gradient(from var(--bil-pill-angle, 0deg), transparent 0deg, color-mix(in srgb, var(--login-glow) 30%, transparent) 25deg, color-mix(in srgb, var(--login-glow) 60%, transparent) 45deg, color-mix(in srgb, var(--login-glow) 30%, transparent) 65deg, transparent 80deg, transparent 360deg); filter: blur(10px); opacity: 0.7; z-index: 0; pointer-events: none; animation: bil-pill-spin 6s linear infinite; } @keyframes bil-pill-spin { to { --bil-pill-angle: 360deg; } } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 520px) { .bil-login-card { padding: 52px 24px 30px; } .bil-login-heading { font-size: 24px; } .bil-login-logo { width: 72px; height: 72px; top: -36px; padding: 6px; } .bil-login-pill { padding: 11px 20px 11px 16px; font-size: 14px; } } /* ── Fallback: geen backdrop-filter (oudere browsers) ────────────────────── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bil-login-card { background: var(--card-bg-fallback); } } /* ── Reduced transparency (Windows / macOS toegankelijkheid) ─────────────── */ @media (prefers-reduced-transparency: reduce) { .bil-login-card { background: var(--card-bg-fallback); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bil-login-card { animation: none; } .bil-login-pill-glow::before, .bil-login-pill-wrapper::before { animation: none; background: var(--login-glow); opacity: 0.25; } } /* ============================================================================= * Chat pagina * Layout: body.chat-layout met sidebar (links) + main (rechts). * Topbar en composer drijven absoluut over de scrollende messages heen. * ============================================================================= */ /* Alpine.js cloak — verbergt elementen tot Alpine geïnitialiseerd is */ [x-cloak] { display: none !important; } body.chat-layout { display: flex; height: 100vh; overflow: hidden; background-color: var(--bg-color); background-image: var(--login-bg-image); background-size: var(--login-bg-size); background-position: var(--chat-bg-position); background-repeat: no-repeat; color: var(--text); font-family: var(--font-family); transition: background-position 0.25s ease; /* schuift mee met sidebar-collapse */ } /* Sidebar volledig dicht → bg terug naar collapsed-positie (LOGISZ centreert; Berdal blijft op z'n offscreen-plek omdat beide tokens daar hetzelfde zijn) */ body.chat-layout:has(.chat-sidebar.collapsed) { background-position: var(--chat-bg-position-collapsed); } body.chat-layout main.chat-main { flex: 1; min-width: 0; min-height: 0; max-width: unset; margin: 0; background: transparent; /* energizer-bg schijnt door */ display: flex; flex-direction: column; overflow: hidden; position: relative; /* anker voor absoluut-positioned topbar + composer */ } /* ── Topbar ──────────────────────────────────────────────────────────────── */ .chat-topbar { position: absolute; top: 0; left: 0; right: 0; padding: 10px 16px; /* content-driven; geen vaste hoogte */ display: flex; align-items: center; gap: 12px; z-index: 10; background: var(--glass-bg); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--border-subtle); } .chat-topbar-toggle { background: var(--pill-bg-hover); color: var(--text); border: 1px solid var(--pill-border); border-radius: 999px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background 0.12s ease, border-color 0.12s ease; flex-shrink: 0; } .chat-topbar-toggle:hover { background: var(--pill-bg-active); border-color: var(--pill-border-hover); } .chat-topbar-spacer { flex: 1; } /* ── Custom dropdown (vervangt native