/* Example: subtle background gradient that still respects light/dark themes */ body { background-image: radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 55%); } /* Optional: tighten header spacing a bit */ header { backdrop-filter: blur(6px); position: relative; z-index: 60; } /* textarea::placeholder { content: "Type your question here"; } */ /* ========================= DEA Diversion header + footer layout Replaces the old blue "Diversion AI Chatbot" banner. #dea-header, #root (the Chainlit app), and #dea-footer are siblings of . Rather than pinning header/footer with `position: fixed` (which overlaps #root, since #root sizes itself to 100vh regardless), body is made a column flexbox: header/footer take their natural (auto) height and #root is given the remaining space via flex-grow. This lets Chainlit's own internal flex/height-percentage layout resolve against a genuinely shorter, definite height — so the composer never ends up hidden behind the footer, at any viewport size or header/footer wrap state. ========================= */ body.has-dea-header, body.has-dea-footer { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } #dea-header, #dea-footer { flex: 0 0 auto; } body.has-dea-header #root, body.has-dea-footer #root { flex: 1 1 auto; min-height: 0; overflow: hidden; } body.landing-page.has-dea-header #root, body.landing-page.has-dea-footer #root { overflow-y: auto !important; overflow-x: hidden !important; } /* Keep the landing-page logo clear of the top edge */ body.landing-page #root .welcome-screen { padding-top: 46px !important; box-sizing: border-box; } /* Chainlit's own app shell hard-codes `h-screen`/`min-h-svh` (height: 100vh) on its inner wrappers, so it ignores #root's flex-allocated (shorter) height and the composer ends up positioned off past the real viewport. Force those wrappers to fill their actual parent instead. */ body.has-dea-header #root .h-screen, body.has-dea-footer #root .h-screen, body.has-dea-header #root .min-h-svh, body.has-dea-footer #root .min-h-svh { height: 100% !important; min-height: 0 !important; } /* Classic flexbox overflow bug: a flex-grow child's default min-height is `auto`, which stops it from shrinking below its own content size even though its flex-grow parent has less room than that. That let the landing screen's content (logo + notice panel + composer) push past the shorter box our header/footer leave behind, especially on small/narrow viewports. Letting these shrink lets the existing internal overflow-y-auto scroll areas do their job instead of the content spilling past the footer. */ body.has-dea-header #root .flex-grow, body.has-dea-footer #root .flex-grow { min-height: 0; } /* Let the landing page participate in the main app scroll instead of creating its own embedded scrollbar. */ body.has-dea-header #root .welcome-screen, body.has-dea-footer #root .welcome-screen { overflow: visible !important; min-height: max-content; justify-content: flex-start !important; } #dea-header { font-family: "Poppins", Arial, sans-serif; } #dea-header .dea-header__top { background: #ffffff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; } #dea-header .dea-header__brand { display: flex; align-items: center; gap: 10px; color: #082a4e; font-weight: 700; font-size: 15px; white-space: nowrap; } #dea-header .dea-header__brand svg { flex-shrink: 0; } #dea-header .dea-header__contact { color: #000000; font-size: 0.8em; line-height: 24px; white-space: nowrap; text-align: right; } #dea-header .dea-header__contact a { color: #082a4e; text-decoration: none; } #dea-header .dea-header__contact a:hover { text-decoration: underline; } @media (max-width: 640px) { #dea-header .dea-header__top { flex-direction: column; align-items: flex-start; } #dea-header .dea-header__contact { text-align: left; } } #dea-footer { background: #082a4e; color: #ffffff; font-family: "Poppins", Arial, sans-serif; font-size: 12px; line-height: 1.5; text-align: center; padding: 8px 12px; } #dea-footer a { color: #ffffff; text-decoration: underline; } #dea-footer .dea-footer__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; } #dea-footer .dea-footer__socials { display: flex; align-items: center; gap: 8px; margin-left: 6px; } #dea-footer .dea-footer__socials a { display: inline-flex; } #dea-footer .dea-footer__socials svg { width: 16px; height: 16px; fill: #ffffff; } /* ========================= Disclaimer under input ========================= */ .dea-disclaimer { margin-top: 10px; text-align: center; font-size: 12px; line-height: 1.4; opacity: 0.7; pointer-events: none; } /* Hide Chainlit built-in watermark disclaimer (avoid duplicate disclaimers) */ .watermark { display: none !important; } /* ========================= Lock UI to one screen (no page scroll) Only the chat area should scroll ========================= */ html, body { height: 100%; overflow: hidden !important; } /* Landing page helper text */ /* ========================= Landing page structured notice ========================= */ .landing-prompt-text { width: min(736px, calc(100vw - 48px)); box-sizing: border-box; margin: 20px auto 28px auto; padding: 0; text-align: left; opacity: 1; } /* Outer panel */ /* Theme-aware tokens for the landing panel. Light values live on :root; dark overrides apply both when the OS is in dark mode and when Chainlit's own theme toggle sets html.dark / data-theme. */ :root { --lp-panel-bg: rgba(0, 0, 0, 0.02); --lp-panel-border: rgba(0, 0, 0, 0.1); --lp-panel-header-bg: rgba(0, 0, 0, 0.03); --lp-panel-header-color: rgba(0, 0, 0, 0.72); --lp-title-color: #111111; --lp-copy-color: rgba(0, 0, 0, 0.82); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --lp-panel-bg: rgba(255, 255, 255, 0.035); --lp-panel-border: rgba(255, 255, 255, 0.08); --lp-panel-header-bg: rgba(255, 255, 255, 0.02); --lp-panel-header-color: rgba(255, 255, 255, 0.82); --lp-title-color: #ffffff; --lp-copy-color: rgba(255, 255, 255, 0.88); } } html.dark, html[data-theme="dark"], :root[data-theme="dark"] { --lp-panel-bg: rgba(255, 255, 255, 0.035); --lp-panel-border: rgba(255, 255, 255, 0.08); --lp-panel-header-bg: rgba(255, 255, 255, 0.02); --lp-panel-header-color: rgba(255, 255, 255, 0.82); --lp-title-color: #ffffff; --lp-copy-color: rgba(255, 255, 255, 0.88); } .lp-panel { background: var(--lp-panel-bg); border: 1px solid var(--lp-panel-border); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } /* Panel header */ .lp-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-panel-header-color); border-bottom: 1px solid var(--lp-panel-border); background: var(--lp-panel-header-bg); } .lp-panel-header-icon { font-size: 11px; line-height: 1; opacity: 0.9; } /* General card row */ .lp-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: transparent; } .lp-card + .lp-card { border-top: 1px solid var(--lp-panel-border); } /* Two-column row */ .lp-grid-two { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--lp-panel-border); } .lp-grid-two .lp-card { border-top: none; min-height: 100%; } .lp-grid-two .lp-card:first-child { border-right: 1px solid var(--lp-panel-border); } /* Icon styles */ .lp-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; margin-top: 2px; } /* Per-section icon color treatment */ .lp-card--purpose .lp-icon { background: rgba(73, 144, 226, 0.16); } .lp-card--privacy .lp-icon { background: rgba(219, 153, 52, 0.16); } .lp-card--ai .lp-icon { background: rgba(145, 92, 182, 0.18); } .lp-card--warning .lp-icon { background: rgba(214, 69, 65, 0.16); } .lp-card--activity .lp-icon { background: rgba(44, 168, 110, 0.16); } .lp-card--help .lp-icon { background: rgba(73, 144, 226, 0.16); } /* Content */ .lp-content { flex: 1; min-width: 0; } .lp-title { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--lp-title-color); margin-bottom: 4px; } .lp-copy { font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--lp-copy-color); } /* Responsive */ @media (max-width: 700px) { .landing-prompt-text { width: min(736px, calc(100vw - 28px)); margin: 18px auto 24px auto; } .lp-grid-two { grid-template-columns: 1fr; } .lp-grid-two .lp-card:first-child { border-right: none; border-bottom: 1px solid var(--lp-panel-border); } .lp-card { padding: 14px 16px; } .lp-copy { font-size: 13px; } } .notice-row, .notice-cell { padding: 16px 20px; } .notice-row + .notice-row, .notice-two-column + .notice-row, .notice-row + .notice-two-column { border-top: 1px solid rgba(255, 255, 255, 0.07); } .notice-two-column { display: grid; grid-template-columns: 1fr 1fr; } .notice-cell + .notice-cell { border-left: 1px solid rgba(255, 255, 255, 0.07); } .landing-prompt-text a { color: #005ea8; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .landing-prompt-text a:hover, .landing-prompt-text a:focus { color: #003e73; text-decoration-thickness: 3px; } @media (prefers-color-scheme: dark) { .landing-prompt-text a { color: #8ecbff; } .landing-prompt-text a:hover, .landing-prompt-text a:focus { color: #b8ddff } } /* ========================================================= Splash page height responsiveness Only affects the landing page notice panel ========================================================= */ /* Moderately short screens */ @media (max-height: 900px) { .landing-prompt-text { margin-top: 10px; margin-bottom: 12px; } .lp-panel-header { padding-top: 8px; padding-bottom: 8px; } .lp-card { padding-top: 10px; padding-bottom: 10px; } .lp-title { font-size: 12px; margin-bottom: 3px; } .lp-copy { font-size: 12px; line-height: 1.35; } .lp-icon { width: 26px; height: 26px; min-width: 26px; font-size: 13px; } } /* Very short screens / smaller laptop windows */ @media (max-height: 750px) { .landing-prompt-text { margin-top: 6px; margin-bottom: 8px; } .lp-panel-header { padding: 6px 12px; } .lp-card { padding: 7px 12px; gap: 8px; } .lp-title { font-size: 11px; margin-bottom: 2px; } .lp-copy { font-size: 11px; line-height: 1.28; } .lp-icon { width: 22px; height: 22px; min-width: 22px; font-size: 12px; border-radius: 6px; } } /* Landing page may be dynamically scaled to fit short viewports */ .welcome-screen { transform-origin: top center; } .landing-scale-wrapper { width: 100%; transform-origin: top center; } /* Ensure Chainlit modals (Readme, dialogs) are above our landing banner */ [role="dialog"], [aria-modal="true"], .cl-modal, .cl-overlay, .cl-dialog { z-index: 10050 !important; } /* Widen the left rail that holds the avatar */ [role="article"] { gap: 14px !important; /* increases spacing */ } /* If there’s a fixed-width first column, force it wider */ [role="article"] > :first-child { width: 56px !important; min-width: 56px !important; } /* ========================= Avatar size override (SAFE) Only targets the avatar container span (rounded-full + h-5 + w-5) ========================= */ div[data-step-type] > div .ai-message span.relative.flex.shrink-0.overflow-hidden.rounded-full.h-5.w-5, div[data-step-type] span.relative.flex.shrink-0.overflow-hidden.rounded-full.h-5.w-5 { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; } div[data-step-type] span.relative.flex.shrink-0.overflow-hidden.rounded-full.h-5.w-5 > img { width: 48px !important; height: 48px !important; object-fit: contain !important; } div[data-step-type] span.relative.flex.shrink-0.overflow-hidden.rounded-full.h-5.w-5.mt-\[3px\] { margin-top: 0 !important; } /* ========================= Thinking indicator (SAFE) Only applies when JS marks the node with .is-thinking ========================= */ @keyframes thinkingDots { 0% { content: "Thinking ."; } 33% { content: "Thinking .."; } 66% { content: "Thinking ..."; } 100% { content: "Thinking ."; } } /* Only the placeholder gets replaced */ .is-thinking { font-size: 0 !important; /* hide original text */ display: flex !important; /* enable alignment */ align-items: center !important; /* vertical center */ justify-content: flex-start !important; /* left align */ min-height: 48px; /* match avatar height */ } .is-thinking::after { font-size: 18px; line-height: 1.2; display: inline-block; /* width: 8.5em; prevents layout shift */ animation: thinkingDots 1.1s infinite steps(1, end); content: "Thinking ."; white-space: nowrap; } /* ========================= Source links: keep them inline and aligned like normal text ========================= */ div[data-step-type] .message-content a { display: inline !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; align-items: initial !important; justify-content: initial !important; text-decoration: underline; word-break: break-word; overflow-wrap: anywhere; } /* ========================= Settings popup overrides all ========================= */ #chat-settings { z-index: 1000 !important; } /* Radix dropdown/select/popover portal wrapper */ [data-radix-popper-content-wrapper] { z-index: 2000 !important; } /* Some Radix components render as a separate portal container */ [data-radix-portal] { z-index: 2000 !important; } /* ========================= FIX: Radix scroll-lock sometimes sets pointer-events:none on That breaks dropdown popovers rendered in portals. Re-enable pointer events while dialogs are present. ========================= */ /* When Radix/Chainlit locks scroll, ensure body remains interactive */ body[data-scroll-locked] { pointer-events: auto !important; } /* Also ensure the dialog + any portals are interactive */ [role="dialog"], [aria-modal="true"], [data-radix-popper-content-wrapper], [data-radix-portal] { pointer-events: auto !important; } /* Never allow the app to globally disable pointer events */ body[style*="pointer-events: none"] { pointer-events: auto !important; } /* If a Radix dropdown/menu is mounted, ensure the page stays clickable. This avoids fighting Radix during normal transitions. */ body:has([data-radix-popper-content-wrapper]) { pointer-events: auto !important; } /* ======================== Disable Attachment controls ========================= */ input[type="file"], button[aria-label*="attach" i], button[aria-label*="upload" i], button[aria-label*="file" i] { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Make markdown separator more visible */ .prose [data-orientation="horizontal"][role="none"] { height: 3px !important; background-color: currentColor !important; opacity: 0.35 !important; margin: 1.25rem 0 !important; } .response-disclaimer { font-size: 0.8rem; line-height: 1.45; opacity: 0.9; } div[data-step-type="user_message"] { scroll-margin-top: 32px; }