/* Dharey brand polish for Chainlit. Primary blue comes from the theme in .chainlit/config.toml; this layer adds the orange accent and removes the default Chainlit watermark. */ :root { --dharey-orange: #f5820d; --dharey-orange-dark: #c2410c; --dharey-blue: #1a4e96; } /* Remove the "Built with Chainlit" watermark. */ .watermark, a[href*="chainlit.io"], a[href*="chainlit.dev"] { display: none !important; } /* Hide the "Repo" button. config.toml sets [UI].github ONLY because Chainlit derives the og:url of every shared link from it — without it, link previews claim the Chainlit GitHub repo as the canonical URL. The button it also renders is meaningless to a learner, so it goes. NOT scoped to `header`: Chainlit renders it in the chat-history SIDEBAR FOOTER, next to the theme toggle, so a header-scoped rule missed it entirely and the button stayed visible. Exact-href match keeps it from touching an ordinary link to the site in a chat message. */ a[href="https://dharey.com"], a[href="https://dharey.com/"] { display: none !important; } /* Orange brand bar under the top header. */ header { border-bottom: 3px solid var(--dharey-orange) !important; } /* Give the header logo a little more presence. */ header img[src*="logo"] { height: 34px !important; width: auto !important; } /* --- Button press feedback ------------------------------------------------ Every clickable reacts: slight lift on hover, visible darken + press-down on click — so a slow request (e.g. Login) never looks like a dead button. */ /* Global — NOT scoped to #root: menus/dialogs (avatar dropdown, settings modal) render in portals attached to , outside #root. */ button, [role="menuitem"], #dharey-account-item { transition: filter 0.12s ease, transform 0.08s ease; } button:hover:not(:disabled) { filter: brightness(1.1); } button:active:not(:disabled), [role="menuitem"]:active, #dharey-account-item:active { filter: brightness(0.72); transform: translateY(1px) scale(0.98); } button:disabled { opacity: 0.55; } /* Booking links render as a prominent CTA button, not a plain hyperlink. (Chat HTML is disabled for safety, so the markdown link is styled instead.) Matches BOTH forms. The mentor link used to point straight at calendly.com; it now goes through /go/mentor so the click can be recorded, and a selector that only knew the old URL silently dropped the button back to plain link text. The calendly.com match stays because that is the fallback used when no tracking token could be minted. */ #root a[href*="calendly.com"], #root a[href*="/go/mentor"] { display: inline-block !important; background: var(--dharey-orange) !important; color: #1a1206 !important; font-weight: 800 !important; text-decoration: none !important; padding: 11px 20px !important; border-radius: 9px !important; margin: 6px 0 !important; box-shadow: 0 2px 8px rgba(245, 130, 13, 0.35); } #root a[href*="calendly.com"]:hover, #root a[href*="/go/mentor"]:hover { background: var(--dharey-orange-dark) !important; color: #fff7ef !important; } /* Emphasis pops: bolded key words in chat also take the amber accent. */ #root strong, #root b { color: var(--dharey-orange); } /* Links pick up the orange accent (keeps blue for primary buttons/bubbles). */ a:not(.watermark) { color: var(--dharey-orange); } a:not(.watermark):hover { color: var(--dharey-orange-dark); } /* Orange focus ring on the message composer for a blue+orange identity. */ #message-composer:focus-within, [data-testid="message-composer"]:focus-within { border-color: var(--dharey-orange) !important; box-shadow: 0 0 0 2px rgba(245, 130, 13, 0.25) !important; } /* --- Header: "New Chat" CTA + progress-pill alignment --------------------- The framework's new-chat control is an icon-only button; we turn it into a labelled amber CTA with CSS ONLY (hide the glyph, paint the label with a ::after pseudo-element) — no DOM mutation, so React reconciliation is safe. */ #new-chat-button svg, [data-testid="new-chat-button"] svg { display: none !important; } #new-chat-button, [data-testid="new-chat-button"] { background: var(--dharey-orange) !important; color: #1a1206 !important; border-radius: 8px !important; width: auto !important; height: 34px !important; padding: 0 14px !important; margin-right: 8px !important; } #new-chat-button:hover, [data-testid="new-chat-button"]:hover { background: var(--dharey-orange-dark) !important; color: #fff7ef !important; } #new-chat-button::after, [data-testid="new-chat-button"]::after { content: "New Chat"; font: 700 13px/1 system-ui, sans-serif; white-space: nowrap; } /* Login failure text. custom.js tags the rendered alert with the friendly message (attribute only — never innerHTML, which corrupts React); the raw framework code ("CredentialsSignin") is collapsed and the readable sentence painted in its place. Untagged alerts are left exactly as they are, so real diagnostics still reach the learner. */ [data-dh-login-error] { font-size: 0 !important; } [data-dh-login-error]::after { content: attr(data-dh-login-error); font-size: 13px; font-weight: 500; line-height: 1.4; } /* ========================================================================== MOBILE (<= 860px). Desktop layout is deliberately untouched: everything below lives inside the media query. ========================================================================== */ /* --- Top chrome stays put ------------------------------------------------- On a phone the document itself scrolls (the URL bar collapsing changes the visual viewport), so the header — with it the exam selector, New Chat and the avatar — slid off the top and a learner mid-exam had no way back without scrolling up. Pin it. `sticky` rather than `fixed` keeps the element in flow, so nothing below needs a compensating offset; if an ancestor ever clips it, the rule simply does nothing rather than breaking the layout. The background must be opaque or the chat scrolls visibly through the bar; these are the two theme backgrounds from .chainlit/config.toml. */ @media (max-width: 860px) { header { position: sticky !important; top: 0 !important; z-index: 60 !important; background: #ffffff !important; /* Fixed height so the progress strip below can dock flush against it. */ box-sizing: border-box !important; height: 56px !important; min-height: 56px !important; padding: 0 8px !important; gap: 6px !important; } html.dark header, .dark header, [data-theme="dark"] header { background: #0b1e3b !important; } /* The exam selector is the only thing in the header allowed to shrink: its label ("AWS Certified Solutions Architect – Associate (SAA-C03)") is long enough to push New Chat and the avatar off their own row. Cap it and let it ellipsise; everything else keeps its intrinsic width. */ header > * { min-width: 0 !important; } header [id*="chat-profile" i], header [class*="chat-profile" i], header [role="combobox"], header select { max-width: 40vw !important; flex: 0 1 auto !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } header [id*="chat-profile" i] span, header [class*="chat-profile" i] span, header [role="combobox"] span { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* Never squeeze the two controls the learner actually taps. */ header img, header [class*="avatar" i], header [data-testid*="user" i], #new-chat-button, [data-testid="new-chat-button"] { flex: 0 0 auto !important; } } /* Mobile: the labelled "New Chat" CTA is too wide for the phone header (it overlapped the exam selector and avatar) — collapse it back to a compact amber icon button; the full text CTA stays on desktop. */ @media (max-width: 860px) { #new-chat-button::after, [data-testid="new-chat-button"]::after { content: none; } #new-chat-button svg, [data-testid="new-chat-button"] svg { display: inline-block !important; } #new-chat-button, [data-testid="new-chat-button"] { width: 34px !important; min-width: 34px !important; height: 34px !important; padding: 0 !important; margin-right: 4px !important; border-radius: 50% !important; flex: 0 0 34px !important; } } /* --- Progress: a docked strip, not a floating bubble ---------------------- The pill is body-level `fixed` (custom.js) so it survives React re-renders. On desktop it reads as part of the header row. On a phone there was no room for it up there, so it was parked below the header as a rounded capsule hanging over the conversation — it looked like an unanchored tooltip. Same element, different shape: full width, square corners, flush under the 56px header, so it reads as a second row of chrome. */ @media (max-width: 860px) { #dharey-progress { top: 56px !important; left: 0 !important; right: 0 !important; max-width: none !important; width: auto !important; justify-content: center !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; padding: 7px 12px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important; z-index: 59 !important; } /* The strip overlays the top of the scroll area — give the conversation that height back so the first message never starts underneath it. */ #message-container, [data-testid="message-container"], .messages-container { padding-top: 38px !important; } } /* --- Composer: give the conversation back its screen ---------------------- The chat box was rendering several lines tall by default, which on a phone ate roughly a third of the viewport before a single character was typed. Start it at one line and let it grow to ~4 before scrolling internally. font-size stays at 16px on purpose: iOS Safari zooms the whole page when a focused input is smaller than that, and the zoom is not undone on blur. */ @media (max-width: 860px) { #message-composer, [data-testid="message-composer"] { padding: 4px 6px !important; margin-bottom: 4px !important; } #chat-input, #message-composer textarea, [data-testid="message-composer"] textarea { min-height: 40px !important; max-height: 104px !important; font-size: 16px !important; line-height: 1.35 !important; padding-top: 9px !important; padding-bottom: 9px !important; } /* Mode chips sit just above the (now shorter) composer. */ #dharey-mode-chips { bottom: 78px !important; } } /* "Read Replies" wave icon on the chat-settings button. custom.js tags the button with data-dharey="1" (attributes only — it must NOT touch innerHTML, which corrupts React and throws removeChild). We hide the framework's own glyph and paint the wave as a background image, so nothing in the DOM is mutated and the icon still shows. */ [data-dharey="1"] svg, [data-dharey="1"] img { opacity: 0 !important; } [data-dharey="1"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5820d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h1M6 8v8M10 4v16M14 7v10M18 9v6M21 12h0.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; } /* Chat-history titles: restore the stored text. Chainlit 1.3.2 paints every thread name through lodash `capitalize`, which lowercases the whole string ("AIF-C01 · Learn · Guidelines" arrives as "Aif-c01 · learn · guidelines"), and mangles anything a learner renames a chat to. CSS can't undo a transform that already happened in JS, so custom.js hangs the true text on a data-attribute and we paint it here. Attribute + pseudo-element ONLY: the label element belongs to React, and rewriting its children is what threw "removeChild" before. Collapsing the original glyphs to font-size 0 keeps the node — and React's bookkeeping — completely untouched, while ::after inherits the row's ellipsis. */ [id^="thread-"] p[data-dh-name] { font-size: 0 !important; } [id^="thread-"] p[data-dh-name]::after { content: attr(data-dh-name); font-size: 13px; font-weight: 500; } /* Delete button on a history row. Chainlit paints it in the default text colour, which reads as just another glyph next to the rename pencil — a destructive, unrecoverable action should not look neutral. Give it the same chip treatment as the pencil, in red, so the pair reads as "edit / delete". Colour only; the element stays entirely Chainlit's. */ [id^="thread-"] button { width: 26px !important; height: 26px !important; padding: 0 !important; border: 1px solid rgba(229, 72, 60, 0.55) !important; border-radius: 7px !important; background: rgba(229, 72, 60, 0.14) !important; color: #ff7a6b !important; transition: background 0.12s ease, color 0.12s ease; } [id^="thread-"] button:hover { background: #e5483c !important; border-color: #e5483c !important; color: #fff !important; } [id^="thread-"] button svg { width: 15px !important; height: 15px !important; color: inherit !important; fill: none !important; stroke: currentColor !important; } [id^="thread-"] button:active { transform: scale(0.9); } /* Rename pencil. It is body-level (fixed) rather than injected into the sidebar rows, so React never sees a foreign child in its tree — which also means the row doesn't reserve space for it. Reserve that space here, or the pencil sits on top of the delete button on the active row. */ #dharey-rename { transition: background 0.12s ease, color 0.12s ease; } #dharey-rename:active { transform: scale(0.9); } #dharey-rename svg { display: block; } [id^="thread-"] p { /* 34px = pencil (26) + gap (8). The label ellipsises earlier instead of running underneath the buttons. */ padding-right: 34px; }