/* framemate.ai Chainlit stylesheet (DEV-11 brand fonts; DEV-27 layout, approved by Boss, 2026-10-12).
   Colours and --font-sans/--font-serif live in theme.json. Brand fonts load from Google Fonts in the
   visitor's browser. The two banner TEXTS come from public/profile.css, which the app writes at start
   from the app profile (src/app_profile.py); the rules below carry a plain "framemate.ai" default, so
   a missing profile.css never leaves an empty banner. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=DM+Serif+Display&display=swap');
@import url('/public/profile.css');

:root {
  --fm-reply-font: 'DM Sans', ui-sans-serif, sans-serif;
  --fm-reply-body: 15px; --fm-reply-h1: 24px; --fm-reply-h2: 20px; --fm-reply-h3: 17px;
  --fm-reply-h4: 16px; --fm-reply-small: 13px;
  --fm-panel-body: 13px; --fm-panel-heading: 15px;
}

h1, h2, h3 { font-family: 'DM Serif Display', ui-serif, serif; letter-spacing: -0.02em; }

/* ---- Banner: pinned header bar and the card on the welcome screen (text from profile.css) ---- */
#header { background: linear-gradient(135deg, #0F2444 0%, #1B3A6B 55%, #00747A 100%); color: #fff; }
#header button, #header svg { color: #fff; }
#header::after { content: "framemate.ai"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-family: 'DM Serif Display', Georgia, serif; font-size: 22px;
  color: #fff; pointer-events: none; white-space: nowrap; }
@media (max-width: 560px) { #header::after { font-size: 15px; left: 42%; } }
#welcome-screen::before { content: "framemate.ai"; display: block; width: 100%; box-sizing: border-box;
  text-align: left; background: linear-gradient(135deg, #0F2444 0%, #1B3A6B 55%, #00747A 100%);
  color: #fff; border-radius: 8px; padding: 2rem 2.5rem 1.5rem 2.5rem;
  font-family: 'DM Serif Display', Georgia, serif; font-size: 2rem; line-height: 1.2; }
/* the wordmark repeats the banner on the welcome screen */
#welcome-screen > img { display: none; }

/* ---- Reply typography (approved by Boss, 2026-10-12: body 15, h1 24, h2 20, h3 17) ---- */
[data-step-type="assistant_message"] .prose,
[data-step-type="tool"] .prose {
  font-family: var(--fm-reply-font) !important; font-size: var(--fm-reply-body) !important;
  line-height: 1.55 !important; max-width: none !important; }
html.light [data-step-type="assistant_message"] .prose,
html.light [data-step-type="tool"] .prose { color: #262730; }
[data-step-type] .prose :is(h1,h2,h3,h4,p,li,td,th,strong,em) { font-family: var(--fm-reply-font) !important; }
/* Chainlit renders paragraphs as <div class="leading-7 ..."> (Markdown.tsx), not <p>. */
[data-step-type] .prose div.leading-7, [data-step-type] .prose p { font-size: var(--fm-reply-body) !important;
  line-height: 1.55 !important; margin: 0 0 12px 0 !important; }
[data-step-type] .prose li div.leading-7, [data-step-type] .prose li p { margin: 0 !important; }
[data-step-type] .prose li { font-size: var(--fm-reply-body) !important; line-height: 1.55 !important; margin: 2px 0 !important; }
[data-step-type] .prose ul, [data-step-type] .prose ol { margin: 0 0 12px 0 !important; padding-left: 1.6rem; }
[data-step-type] .prose strong { font-weight: 600 !important; }
[data-step-type] .prose h1 { font-size: var(--fm-reply-h1) !important; font-weight: 700 !important; line-height: 1.25 !important;
  letter-spacing: normal !important; margin: 0 !important; border: 0 !important; padding: 16px 0 10px 0 !important; }
[data-step-type] .prose h2 { font-size: var(--fm-reply-h2) !important; font-weight: 600 !important; line-height: 1.25 !important;
  letter-spacing: normal !important; margin: 0 !important; border: 0 !important; padding: 14px 0 8px 0 !important; }
[data-step-type] .prose h3 { font-size: var(--fm-reply-h3) !important; font-weight: 600 !important; line-height: 1.25 !important;
  letter-spacing: normal !important; margin: 0 !important; border: 0 !important; padding: 12px 0 6px 0 !important; }
[data-step-type] .prose h4 { font-size: var(--fm-reply-h4) !important; font-weight: 600 !important; line-height: 1.25 !important;
  margin: 0 !important; padding: 10px 0 6px 0 !important; }
[data-step-type] .prose h1:first-child, [data-step-type] .prose h2:first-child,
[data-step-type] .prose h3:first-child { padding-top: 0 !important; }
[data-step-type] .prose code { font-size: var(--fm-reply-small) !important; }
/* A blockquote in a reply is the "Interpreted as:" caption (muted, small). */
[data-step-type] .prose blockquote { border: 0 !important; padding: 0 !important; margin: 0 0 6px 0 !important;
  font-style: normal !important; font-size: var(--fm-reply-small) !important; line-height: 1.5 !important; opacity: .7; }
[data-step-type] .prose blockquote p, [data-step-type] .prose blockquote div { font-size: var(--fm-reply-small) !important; margin: 0 !important; }
/* Tables: content width, light border, same size as the body text */
[data-step-type] .prose table { width: auto !important; }
[data-step-type] .prose :is(th,td) { padding: 5px 10px !important; border: 1px solid rgba(38,39,48,.1) !important;
  font-size: var(--fm-reply-body) !important; line-height: 1.5 !important; height: auto !important; }
[data-step-type] .prose th { font-weight: 700 !important; }
/* shadcn's AccordionTrigger is an <h3>: keep the Sources step title in the reply font */
h3:has(> button[id^="step-"]) { font-family: var(--fm-reply-font) !important; letter-spacing: normal !important; font-size: 1rem; }
/* The answer icon is a markdown image inside the h3, shrunk to heading size (Chainlit wraps images in an
   aspect-ratio box). If these rules stop matching the icon shows large: the post-deploy check asserts 20 x 20 px. */
[data-step-type] .prose h3 > div:has(img[src*="answer-icon"]) { display: inline-block !important; width: 1.15em !important;
  max-width: none !important; vertical-align: -0.2em; margin-right: .4em; }
[data-step-type] .prose h3 > div:has(img[src*="answer-icon"]) > div { padding-bottom: 100% !important; background: none !important;
  border-radius: 0 !important; height: auto !important; }

/* ---- "Searching knowledge base..." with a CSS spinner (SearchStatus element) ---- */
.fm-searching { display: flex; align-items: center; gap: .6rem; font-weight: 500; font-family: var(--fm-reply-font); }
.fm-spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid rgba(0,116,122,.25); border-top-color: #00747A; animation: fm-spin .8s linear infinite; }
@keyframes fm-spin { to { transform: rotate(360deg); } }

/* ---- Locked Upload Document pop-up (UploadInfo element) ---- */
.fm-info { background: #e6f1fb; color: #0c447c; border-radius: 6px; padding: .75rem 1rem; margin: .75rem 0; }
.fm-info-footer { font-size: .875rem; opacity: .7; }

/* ---- Info panel (right-hand ElementSidebar): smaller than Chainlit's defaults (approved: 13 / 15 px) ---- */
.side-text, .side-text :is(div,li,p,span,strong,em,a,code) { font-family: var(--fm-reply-font) !important; }
.side-text div.leading-7, .side-text li { font-size: var(--fm-panel-body) !important; line-height: 1.5 !important; }
.side-text div.leading-7 { margin: 0 0 8px 0 !important; }
.side-text strong, .side-text .font-bold { font-size: var(--fm-panel-body) !important; }
.side-text li { margin: 2px 0 !important; }
/* Dark theme: the contact link kept the dark teal of the light theme and was nearly invisible (seen live). */
.dark .side-text a { color: #5eead4 !important; }
.side-text ul { margin: 0 0 10px 0 !important; padding-left: 1.4rem; }
.side-text :is(h1,h2,h3,h4) { font-family: var(--fm-reply-font) !important; font-size: var(--fm-panel-heading) !important;
  font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: normal !important;
  margin: 16px 0 6px 0 !important; border: 0 !important; padding: 0 !important; }
.side-text :is(h1,h2,h3,h4):first-child { margin-top: 0 !important; }