/* ============================================================================= Archi Chat — custom stylesheet Implements the Archi design bundle (obc_v2-handoff/Archi Chat.html) on top of Chainlit's Shadcn variables from theme.json. Strategy: 1. Alias the design's semantic tokens (--paper, --ink, --accent …) to the live Shadcn HSL vars so the rest of the stylesheet can use the design's own names verbatim. 2. Override Chainlit surfaces (composer, messages, sidebar, starters …) to match the design pixel-for-pixel where feasible. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Design-token aliases ----------------------------------------------------------------------------- Shadcn vars are HSL triplets ("36 53% 93%"), so we wrap them with hsl(...) once here. Every rule below can then use var(--paper), var(--ink) … ----------------------------------------------------------------------------- */ :root, :root[data-theme="light"], html.light { /* Blueprint palette from the Archi design — the "light" slot is deliberately dark-navy so the app feels like a drafting table at dusk. */ --paper: hsl(210 41% 20%); --paper-2: hsl(211 41% 25%); --paper-edge: hsl(211 41% 33%); --ink: hsl(210 64% 95%); --ink-2: hsl(207 40% 78%); --ink-3: hsl(208 30% 61%); --ink-4: hsl(209 27% 42%); --accent: hsl(32 89% 69%); /* amber/gold — accent action */ --accent-2: hsl(35 100% 78%); --blueprint: hsl(207 100% 81%); /* light-blue accent on navy */ --ok: hsl(93 57% 75%); --rule: rgba(232, 241, 250, 0.15); --rule-strong: rgba(232, 241, 250, 0.30); --hi: #2F5577; --font-serif: "Newsreader", ui-serif, Georgia, serif; /* Archi composer glow — terracotta halo (kept across palettes per design). In Blueprint the amber border + terracotta halo is the intended effect. */ --archi-glow: 0 0 0 3px rgba(182, 87, 58, 0.18), 0 0 32px rgba(182, 87, 58, 0.32), 0 0 64px rgba(182, 87, 58, 0.18), 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06); --archi-glow-focused: 0 0 0 4px rgba(182, 87, 58, 0.28), 0 0 40px rgba(182, 87, 58, 0.45), 0 0 80px rgba(182, 87, 58, 0.28), 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } :root[data-theme="dark"], html.dark { --paper: hsl(36 10% 10%); --paper-2: hsl(36 7% 14%); --paper-edge: hsl(33 7% 18%); --ink: hsl(38 46% 88%); --ink-2: hsl(39 22% 69%); --ink-3: hsl(35 10% 50%); --ink-4: hsl(33 12% 33%); --accent: hsl(15 63% 60%); --accent-2: hsl(15 82% 72%); --blueprint: hsl(209 35% 64%); --ok: hsl(74 31% 59%); --rule: rgba(237, 228, 211, 0.12); --rule-strong: rgba(237, 228, 211, 0.25); --hi: #7A6A3A; --font-serif: "Newsreader", ui-serif, Georgia, serif; --archi-glow: 0 0 0 3px rgba(217, 119, 87, 0.22), 0 0 32px rgba(217, 119, 87, 0.35), 0 0 64px rgba(217, 119, 87, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); --archi-glow-focused: 0 0 0 4px rgba(217, 119, 87, 0.32), 0 0 40px rgba(217, 119, 87, 0.50), 0 0 80px rgba(217, 119, 87, 0.30), 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ----------------------------------------------------------------------------- 2. Global base — paper grain + typography ----------------------------------------------------------------------------- */ /* Paper-grain overlay from the design. Both palettes (Blueprint, Night) are dark, so a screen-blended faint-white dot pattern reads as subtle texture. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; z-index: 1; mix-blend-mode: screen; opacity: 0.4; } /* Scrollbar — thin, ink-4 thumb */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* ----------------------------------------------------------------------------- 3. Empty state — serif hero "Good afternoon, …" ----------------------------------------------------------------------------- */ /* Chainlit renders the empty-state greeting inside #welcome-screen — the exact DOM path varies by release, so we target several possible containers. */ #welcome-screen, .welcome-screen, [data-testid="welcome-screen"] { font-family: var(--font-serif); } #welcome-screen h1, .welcome-screen h1, [data-testid="welcome-screen"] h1 { font-family: var(--font-serif); font-size: 52px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); } #welcome-screen h1 em, #welcome-screen h1 i, .welcome-screen h1 em, [data-testid="welcome-screen"] h1 em { font-style: italic; color: var(--accent); font-weight: 500; } #welcome-screen p, .welcome-screen p, [data-testid="welcome-screen"] p { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 520px; } /* ----------------------------------------------------------------------------- 4. Starter cards — "Barrier-free washroom requirements" etc. ----------------------------------------------------------------------------- */ /* Chainlit renders starters as buttons in a grid below the welcome hero. Target any button whose parent is the starter grid. We match by class fragments that Chainlit v2 uses ("starter") plus a generic fallback. */ button[class*="starter"], [class*="Starter"] button, [data-testid*="starter"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 10px !important; color: var(--ink) !important; font-family: var(--font-serif) !important; font-size: 14.5px !important; text-align: left !important; padding: 14px 16px !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } button[class*="starter"]:hover, [class*="Starter"] button:hover, [data-testid*="starter"]:hover { transform: translateY(-1px); border-color: var(--rule-strong) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* Starter-card icon block — Chainlit wraps the icon in a span/div; we tint it terracotta to match the design. */ button[class*="starter"] svg, [class*="Starter"] button svg { color: var(--accent) !important; } /* ----------------------------------------------------------------------------- 5. Composer — paper-2 background, terracotta halo, 16px radius ----------------------------------------------------------------------------- */ /* The main composer wrapper. Chainlit v2 uses an element with id="message-composer" or a wrapper that contains a textarea. We aim broadly, then tighten as needed. */ #message-composer, [class*="message-composer"], form[class*="composer"], div[class*="composer-wrapper"] { background: var(--paper-2) !important; /* Resting border uses `--ink-2` — Blueprint resolves it to `#B3CADD` (soft blueprint blue) and Night resolves it to `#BFB5A2` (warm cream), so the colour auto-tracks the palette without a hex literal. Focused border stays at the previously chosen `#f1cb9b`. */ border: 2px solid var(--ink-2) !important; border-radius: 16px !important; box-shadow: var(--archi-glow) !important; transition: box-shadow 240ms ease, border-color 240ms ease !important; } #message-composer:focus-within, [class*="message-composer"]:focus-within, form[class*="composer"]:focus-within, div[class*="composer-wrapper"]:focus-within { border-color: #f1cb9b !important; box-shadow: var(--archi-glow-focused) !important; } /* Composer textarea — serif, 17px */ #message-composer textarea, [class*="message-composer"] textarea, form[class*="composer"] textarea, div[class*="composer-wrapper"] textarea { background: transparent !important; color: var(--ink) !important; font-family: var(--font-serif) !important; font-size: 17px !important; line-height: 1.5 !important; letter-spacing: -0.005em !important; } /* Composer placeholder uses ink-3 (from design) */ #message-composer textarea::placeholder, [class*="message-composer"] textarea::placeholder, form[class*="composer"] textarea::placeholder, div[class*="composer-wrapper"] textarea::placeholder { color: var(--ink-3) !important; font-style: italic; opacity: 0.85; } /* Send button — use the design's blueprint blue when active */ button[type="submit"][aria-label*="end" i], button[aria-label="Send message"], button[data-testid="send-button"] { background: var(--blueprint) !important; color: var(--paper) !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(59, 91, 122, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: transform 160ms ease, background 160ms ease !important; } button[type="submit"][aria-label*="end" i]:hover, button[aria-label="Send message"]:hover, button[data-testid="send-button"]:hover { transform: translateY(-1px); } /* Composer disabled-state send button → paper-edge / ink-3 */ button[type="submit"][aria-label*="end" i]:disabled, button[aria-label="Send message"]:disabled, button[data-testid="send-button"]:disabled { background: var(--paper-edge) !important; color: var(--ink-3) !important; box-shadow: none !important; } /* ----------------------------------------------------------------------------- 6. Messages — user bubble (serif, asymmetric radius) + assistant serif body ----------------------------------------------------------------------------- */ /* User message bubble */ [data-step-type="user_message"] .message-content, [data-testid="user-message"], div[class*="message--user"] [class*="bubble"], .user-message { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 14px 14px 3px 14px !important; padding: 12px 16px !important; color: var(--ink) !important; font-family: var(--font-serif) !important; font-size: 16px !important; line-height: 1.5 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; max-width: 68% !important; } /* Assistant message body — serif, 17px, generous line height */ [data-step-type="assistant_message"] .message-content, [data-testid="assistant-message"], div[class*="message--assistant"] { font-family: var(--font-serif) !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--ink) !important; } /* Assistant message h1/h2/h3 */ [data-step-type="assistant_message"] h1, [data-testid="assistant-message"] h1, div[class*="message--assistant"] h1 { font-family: var(--font-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin-top: 0.5em; } [data-step-type="assistant_message"] h2, [data-testid="assistant-message"] h2, div[class*="message--assistant"] h2, [data-step-type="assistant_message"] h3, [data-testid="assistant-message"] h3, div[class*="message--assistant"] h3 { font-family: var(--font-serif); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); margin-top: 1.2em; margin-bottom: 0.3em; } /* ----------------------------------------------------------------------------- 7. Citation chips ----------------------------------------------------------------------------- When the model writes "…shall be 850 mm [1]." and Chainlit renders it as an anchor, this matches it and paints it as a mini chip. */ /* Chainlit's citation pattern: an whose text is a bracketed number. We can target anchors inside message markdown whose text matches [N]. CSS can't match on textContent directly, but we can piggyback on titles/hrefs that Chainlit assigns to source links. As a visual fallback we style all inline sup/sub citation markers in assistant messages. */ div[class*="message--assistant"] sup a, div[class*="message--assistant"] .citation, [data-testid="assistant-message"] sup a, [data-testid="assistant-message"] .citation { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin: 0 1px 0 2px; font-family: var(--font-sans); font-size: 10px; font-weight: 600; color: var(--accent); background: rgba(182, 87, 58, 0.10); border: 1px solid rgba(182, 87, 58, 0.25); border-radius: 4px; vertical-align: 1px; text-decoration: none; transition: all 160ms ease; } div[class*="message--assistant"] sup a:hover, div[class*="message--assistant"] .citation:hover, [data-testid="assistant-message"] sup a:hover, [data-testid="assistant-message"] .citation:hover { background: var(--accent); color: var(--paper); transform: translateY(-1px); } /* ----------------------------------------------------------------------------- 8. Sidebar — paper-2 bg, serif thread titles, project tag tint ----------------------------------------------------------------------------- */ /* Sidebar root uses --sidebar-background from theme.json already. We tweak the thread-list typography to match the design (serif titles, ink-3 meta). */ [data-sidebar="sidebar"] [class*="thread"] [class*="title"], aside [class*="thread"] [class*="title"] { font-family: var(--font-serif) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink) !important; letter-spacing: 0 !important; } [data-sidebar="sidebar"] [class*="thread"] [class*="meta"], aside [class*="thread"] [class*="meta"] { font-size: 10.5px !important; color: var(--ink-3) !important; letter-spacing: 0.02em !important; } /* Section labels (Today / Yesterday / Apr 12) — uppercase mono-spaced */ [data-sidebar="sidebar"] [class*="section-label"], [data-sidebar="sidebar"] [class*="sectionTitle"] { font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--ink-3) !important; font-weight: 600 !important; } /* Active thread highlight — paper bg, subtle shadow */ [data-sidebar="sidebar"] [class*="thread"][data-active="true"], [data-sidebar="sidebar"] [class*="thread"].active, [data-sidebar="sidebar"] [class*="thread"][aria-current="true"] { background: var(--paper) !important; border: 1px solid var(--rule) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; border-radius: 8px !important; } /* New-chat button in sidebar — paper card with subtle inset highlight */ [data-sidebar="sidebar"] button[class*="new"], [data-sidebar="sidebar"] a[class*="new"] { background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 10px !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.04) !important; } /* ----------------------------------------------------------------------------- 9. Top bar / breadcrumb — tiny uppercase project tag + serif title ----------------------------------------------------------------------------- */ header[class*="header"], header[data-testid*="header"] { border-bottom: 1px solid var(--rule) !important; background: var(--paper) !important; } header[class*="header"] h1, header[data-testid*="header"] h1, header[class*="header"] [class*="title"] { font-family: var(--font-serif) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ink) !important; } /* ----------------------------------------------------------------------------- 9a. Chat-profile avatar — hidden on the welcome page ----------------------------------------------------------------------------- Chainlit renders the active profile's avatar (``) above the description inside `#welcome-screen`. The Archi hero already sets the tone, so the round "A" mark is redundant here — hide it on the welcome page only. Scoped to `#welcome-screen` so sidebar/message avatars stay visible. */ #welcome-screen img.rounded-full, #welcome-screen img[src*="/avatars/"] { display: none !important; } /* ----------------------------------------------------------------------------- 9b. Chat-profile description — centred, subtitle-coloured ----------------------------------------------------------------------------- Chainlit renders the active profile's `markdown_description` on the welcome screen through the Tailwind Typography plugin, inside: #welcome-screen > .flex.items-center > .prose > div[role="article"] This block now plays the role previously held by `.archi-hero-subtitle` — centred, serif, in the muted --ink-2 colour so it reads as a soft secondary line under the hero title. */ #welcome-screen .prose, #welcome-screen .prose *, #welcome-screen [role="article"], #welcome-screen [role="article"] * { text-align: center !important; color: var(--ink-2) !important; } /* ----------------------------------------------------------------------------- 10. Links inside messages — blueprint with underline-offset ----------------------------------------------------------------------------- */ div[class*="message"] a:not(sup a):not(.citation) { color: var(--blueprint); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 2px; transition: color 160ms ease; } div[class*="message"] a:not(sup a):not(.citation):hover { color: var(--accent); } /* ----------------------------------------------------------------------------- 11. Global hover warmth — every interactive surface warms toward --accent ----------------------------------------------------------------------------- */ button, a, [role="button"], .cite-chip, input, textarea { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } /* ----------------------------------------------------------------------------- 12. Reduce motion — respect the user ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================= 13. Thinking block / CoT steps ============================================================================= The Archi prototype renders a "Working · N/N" panel with dashed border, a shimmer-text active step label, a breathing accent dot on the running step, and three bouncing ellipsis dots. Chainlit v2 renders each cl.Step as a collapsible block whose class names are code-split (e.g. "step_XXXX"). We target them by attribute + class-fragment so the skin survives minifier hash changes. ============================================================================= */ @keyframes archi-shimmer { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } } @keyframes archi-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); } } @keyframes archi-dot-bounce { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-3px); opacity: 1; } } @keyframes archi-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Shimmer-text utility: sweep a highlight band through ink-colored text. Used by custom.js when a step is "running" so the label animates until it resolves. */ .archi-shimmer-text { background: linear-gradient( 90deg, var(--ink-3) 0%, var(--ink-3) 38%, var(--ink) 50%, var(--ink-3) 62%, var(--ink-3) 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: archi-shimmer 2.2s linear infinite; } /* Chain-of-thought / Step containers. Chainlit nests CoT steps inside an element with a class fragment of "cot" or "Step". Both roots get the paper-2 + dashed border treatment. */ [data-step-type], div[class*="cot-"], div[class*="Step_"], div[class*="step--"], .cl-step { background: color-mix(in srgb, var(--paper) 92%, transparent) !important; border: 1px dashed var(--rule-strong) !important; border-radius: 10px !important; padding: 14px 18px !important; margin: 10px 0 18px !important; font-family: var(--font-sans); animation: archi-fade-up 320ms ease both; } /* Step header — the "Used tool X" / "Reasoning" title bar. Chainlit renders it as a flex row with the step name (button) and a chevron. */ div[class*="cot-"] > button, div[class*="Step_"] > button, div[class*="step--"] > button, [data-step-type] > button, [data-step-type] > [class*="header"], [data-step-type] > summary { font-size: 13px !important; font-family: var(--font-sans) !important; font-weight: 500 !important; color: var(--ink) !important; letter-spacing: 0 !important; padding: 4px 0 !important; } /* Uppercase "WORKING" eyebrow — injected by custom.js above the step list when at least one step is active. */ .archi-step-eyebrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; font-family: var(--font-sans); } .archi-step-eyebrow .archi-step-count { font-family: var(--font-mono); letter-spacing: 0.08em; } /* Breathing accent ring on the *running* step's leading icon. Chainlit paints a small spinner / icon at the left of the header — any .running selector or svg inside an aria-busy step picks up the breathing halo. */ [data-step-type][data-running="true"] svg, [data-step-type][aria-busy="true"] svg, div[class*="step"][data-running="true"] svg, div[class*="step--running"] svg, .cl-step.running svg, .cl-step[data-state="running"] svg { color: var(--accent) !important; border-radius: 50%; animation: archi-breathe 1.6s ease-in-out infinite; } /* Shimmer the *active* step's label. custom.js stamps a .archi-step-running class on the matching step on each CoT update. */ .archi-step-running button, .archi-step-running [class*="header"], .archi-step-running [class*="title"], .archi-step-running summary { background: linear-gradient( 90deg, var(--ink-3) 0%, var(--ink-3) 38%, var(--ink) 50%, var(--ink-3) 62%, var(--ink-3) 100% ) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: archi-shimmer 2.2s linear infinite !important; } /* Three-dot bouncing ellipsis appended to the running step label by custom.js. */ .archi-step-dots { display: inline-flex; gap: 2px; margin-left: 8px; color: var(--accent); font-size: 16px; letter-spacing: 1px; line-height: 0; } .archi-step-dots span { display: inline-block; animation: archi-dot-bounce 1.2s ease-in-out infinite; } .archi-step-dots span:nth-child(2) { animation-delay: 0.15s; } .archi-step-dots span:nth-child(3) { animation-delay: 0.30s; } /* Inline-code result chip appended to completed step labels (e.g. "12 passages matched"). The prototype styles this as mono-spaced ink-3 text with a tiny leading separator. */ .archi-step-result { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-weight: 400; } /* ============================================================================= 14. Welcome hero — "Good afternoon, …" serif greeting ============================================================================= Chainlit renders the starters grid directly on a new-chat screen. custom.js injects an .archi-hero block above them with a status pill, a two-line serif H1 (personalised by time-of-day + first name), and a serif subtitle. ============================================================================= */ /* Hero wrapper — matches the prototype's `
`. */ .archi-hero { max-width: 640px; margin: 0 auto 36px; padding: 48px 0 0; text-align: center; animation: archi-fade-up 420ms ease both; } .archi-hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 20px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--ink-2); margin-bottom: 20px; letter-spacing: 0.04em; } /* Prototype uses rgba(108,122,62,0.2) — the warm-palette --ok colour at 20%. */ .archi-hero-pill .archi-hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); } .archi-hero-title { font-family: var(--font-serif); font-size: 52px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 14px; color: var(--ink); } /* The h1 is rendered as two explicit spans (greeting + accent) so each line can carry its own colour/weight. Both spans use `display: block` so they stack like the prototype's `
`-separated layout. `!important` is needed because Chainlit's compiled stylesheet forces `color: inherit` on descendants of h1/h2/h3 at higher specificity than our default cascade. */ .archi-hero-title .archi-hero-title-greeting { display: block; color: var(--ink) !important; font-weight: 500; } .archi-hero-title .archi-hero-title-accent { display: block; font-style: italic; color: #f6b76b !important; font-weight: 500; } /* `.archi-hero-subtitle` removed — the chat-profile .prose description (see section 9b) now plays the subtitle role, styled with the same var(--ink-2) colour so it reads as a soft secondary line below the hero title. */ .archi-hero-hint { margin-top: 32px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); } /* Hide Chainlit's default welcome-screen heading when our hero is mounted — the .archi-hero-active flag is toggled on by custom.js. */ body.archi-hero-active #welcome-screen > h1:not(.archi-hero-title), body.archi-hero-active [data-testid="welcome-screen"] > h1:not(.archi-hero-title), body.archi-hero-active .welcome-screen > h1:not(.archi-hero-title) { display: none; } /* Responsive: shrink the hero on narrow viewports so the composer stays visible. */ @media (max-width: 720px) { .archi-hero { padding-top: 24px; } .archi-hero-title { font-size: 36px; } .archi-hero-subtitle { font-size: 15px; } } /* ============================================================================= 15. Composer — decorative corner stitches + chat-profile pill polish ============================================================================= Four small amber tick marks at each corner of the composer shell mimic the blueprint-style corner crops from the Archi prototype. We attach them as inline SVGs inside ::before pseudo layers on our existing composer wrappers. Chat profiles render as a dropdown whose trigger we shape as an OBC 2024 mode pill. ============================================================================= */ #message-composer, [class*="message-composer"], form[class*="composer"], div[class*="composer-wrapper"] { /* Reserve space so the corner ticks don't overlap the toolbar icons. */ position: relative !important; overflow: visible !important; } /* Top-left & top-right corner ticks (amber L-shape, 35% opacity). */ #message-composer::before, [class*="message-composer"]::before, form[class*="composer"]::before, div[class*="composer-wrapper"]::before { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; height: 14px; pointer-events: none; opacity: 0.35; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, no-repeat; background-position: left top, right top; } /* Bottom-left & bottom-right corner ticks. */ #message-composer::after, [class*="message-composer"]::after, form[class*="composer"]::after, div[class*="composer-wrapper"]::after { content: ""; position: absolute; bottom: 6px; left: 6px; right: 6px; height: 14px; pointer-events: none; opacity: 0.35; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, no-repeat; background-position: left bottom, right bottom; } /* Night / dark-mode swap: use coral #D97757 for the corner ticks so they sit against the warm-charcoal paper instead of the navy Blueprint one. */ :root[data-theme="dark"] #message-composer::before, :root[data-theme="dark"] #message-composer::after, :root[data-theme="dark"] [class*="message-composer"]::before, :root[data-theme="dark"] [class*="message-composer"]::after, :root[data-theme="dark"] form[class*="composer"]::before, :root[data-theme="dark"] form[class*="composer"]::after, :root[data-theme="dark"] div[class*="composer-wrapper"]::before, :root[data-theme="dark"] div[class*="composer-wrapper"]::after { background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); } :root[data-theme="dark"] #message-composer::after, :root[data-theme="dark"] [class*="message-composer"]::after, :root[data-theme="dark"] form[class*="composer"]::after, :root[data-theme="dark"] div[class*="composer-wrapper"]::after { background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); } /* Chat-profile selector — Chainlit renders this as a Radix dropdown trigger in the chat header. We shape it into the Archi "OBC 2024" mode pill. */ button[class*="chat-profile"], button[aria-label*="profile" i], [data-testid*="chat-profile"] button, header button[class*="profile"] { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; border-radius: 20px !important; background: var(--accent) !important; color: var(--paper) !important; border: 1px solid var(--accent) !important; font-family: var(--font-sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transition: transform 160ms ease, box-shadow 160ms ease !important; } button[class*="chat-profile"]:hover, button[aria-label*="profile" i]:hover, [data-testid*="chat-profile"] button:hover, header button[class*="profile"]:hover { color: var(--paper) !important; transform: translateY(-1px); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; }