/* IQ Platform brand colors — primary: #2b6cb3 */
:root {
  --primary: 211 61% 44% !important;
  --primary-foreground: 0 0% 100% !important;
  --ring: 211 61% 44% !important;
}

.dark {
  --primary: 209 56% 58% !important;
  --primary-foreground: 0 0% 100% !important;
  --ring: 209 56% 58% !important;
}

/* Source panel content (chat/public/elements/SourcePanel.jsx) renders IQ
   Platform HTML sections directly via dangerouslySetInnerHTML, inside the
   custom element's own React tree — NOT through Chainlit's markdown/img
   pipeline, so none of the old 3-level :has() div overrides (needed when
   these images were rendered as markdown-embedded <img> tags in a cl.Text
   panel, see git history) apply here. Plain, direct sizing rules suffice. */
.source-panel img.schema-inline-img {
  display: inline;
  height: 1.5em;
  width: auto;
  vertical-align: middle;
}

.source-panel .safety-symbol img {
  display: inline-block;
  height: 48px;
  width: 48px;
  object-fit: contain;
}

/* Safety net for any other image in a topic/activity body (a plain <img> in
   running text, not wrapped in <figure> and not one of the sized icon cases
   above) — without this, a full-size content image can overflow the
   sidebar's fixed width. Lower specificity than the rules above (single
   class vs. class+descendant), so it never overrides their explicit
   height/width, only fills in for anything they don't match. */
.source-panel img {
  max-width: 100%;
  height: auto;
}

/* Raw topic HTML and rendered Activity content (renderActivityRichText in
   mcp/src/client/infotwin.ts) can both embed plain <table> elements with no
   styling of their own — a browser's UA default table has no borders or
   header shading, which reads as broken/unstyled next to the rest of the
   panel. Header background + cell borders sampled from IQ Platform's own
   content-table styling for the same kind of embedded document content (see
   docs/css/activity-detail-page-*.css's ".table" rules) rather than
   invented from scratch, so a table here looks like the same table would in
   IQ Platform's own viewer. */
.source-panel table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}
.source-panel table,
.source-panel th,
.source-panel td {
  border: 1px solid hsl(var(--border));
}
.source-panel th,
.source-panel thead {
  background-color: hsl(var(--muted));
  text-align: left;
}
.source-panel th,
.source-panel td {
  padding: 0.35rem 0.6rem;
}

/* Baseline typography for raw topic HTML rendered via dangerouslySetInnerHTML
   (see chat/CLAUDE.md's SourcePanel.jsx entry) — Tailwind's Preflight reset
   (used app-wide) zeroes default heading/paragraph/list styling on every
   bare tag regardless of where it sits in the DOM, so raw IQ Platform HTML
   injected here rendered as an undifferentiated wall of text without this:
   confirmed live against a SCHEMA ST4-generated topic (headings + a nested
   "Weiterführende Informationen" <ul>) with zero visual structure — no
   heading weight, no bullets, no spacing between paragraphs — until these
   rules were added. Earlier custom.css work only covered tables, images,
   safety callouts, and the OCR highlight mark; this fills the gap for the
   far more common case of plain headings/paragraphs/lists. */
.source-panel h1,
.source-panel h2,
.source-panel h3,
.source-panel h4,
.source-panel h5,
.source-panel h6 {
  font-weight: 600;
  line-height: 1.3;
  margin: 1rem 0 0.5rem;
}
.source-panel h1 { font-size: 1.25rem; }
.source-panel h2 { font-size: 1.125rem; }
.source-panel h3,
.source-panel h4,
.source-panel h5,
.source-panel h6 {
  font-size: 1rem;
}

.source-panel p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.source-panel ul,
.source-panel ol {
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}
.source-panel ul { list-style: disc; }
.source-panel ol { list-style: decimal; }
.source-panel li {
  margin: 0.15rem 0;
}

.source-panel a {
  color: hsl(var(--primary));
  text-decoration: underline;
}

/* Subtle "which IQ Platform instance is this" hint injected into the landing
   page's #welcome-screen by public/tenant-info.js (generated at chat startup
   with the resolved tenant host — see app.py's _write_tenant_info_js). */
#iq-tenant-host {
  font-size: 0.7rem;
  color: hsl(var(--muted-foreground));
  opacity: 0.6;
  margin-top: 0.25rem;
  text-align: center;
}

/* Highlights the specific fragment of a PDF-only topic's OCR text that
   matched the search query (see mcp/src/tools/topics.ts's
   highlightFragmentToHtml — the <mark> tag reaches SourcePanel.jsx's
   ocrExcerpt.html untouched since it's rendered directly, no markdown
   conversion step in between). A background highlight rather than plain
   bold — bold alone didn't stand out enough against the surrounding OCR
   text. Semi-transparent so it reads correctly against both the light and
   dark theme without a media query. */
.source-panel mark.citation-highlight {
  background-color: rgba(250, 204, 21, 0.4);
  color: inherit;
  border-radius: 2px;
  padding: 0 0.15em;
}

/* Source-citation action row below an assistant message (see chat/app.py's
   build_source_actions — one cl.Action per cited source). Chainlit renders
   its own built-in copy button as the *first* child of the exact same
   flex-wrap container our cl.Actions land in (confirmed live: both share one
   `-ml-1.5 flex items-center flex-wrap` parent, there is no separate
   container to target). Switching the container to a column stack puts
   every child on its own line automatically (the old row + `flex-basis: 100%`
   approach only separated the very first line break, then let source buttons
   wrap into a multi-column grid) — `align-items: stretch` then makes each
   source button a full-width block. `[class*=...]` attribute-contains
   selectors are used instead of escaping the dot in Tailwind's literal class
   names (e.g. `-ml-1.5`). */
.ai-message div[class*="-ml-1.5"][class*="flex-wrap"] {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(var(--border));
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.6rem;
}

/* Chainlit has no server-side flag to suppress its own per-message copy
   button (checked chainlit.message.Message — no such param exists), so this
   is the only lever available. It's always the first child of the container
   above, present on *every* assistant message whether or not it has any
   cl.Actions attached. */
.ai-message div[class*="-ml-1.5"][class*="flex-wrap"] > button:first-child {
  display: none;
}

.ai-message div[class*="-ml-1.5"][class*="flex-wrap"] > button:not(:first-child) {
  border: 1px solid hsl(var(--border));
  width: 100%;
  justify-content: flex-start;
}

/* With the copy button hidden, a message with no cited sources (no
   cl.Actions) would otherwise still show this container's border-top as a
   stray, meaningless divider line above an empty row — collapse the whole
   container in that case. :has()/:only-child evaluate against the DOM
   structure regardless of the button's own display:none above, so this
   still correctly detects "the copy button was this container's only
   child." */
.ai-message div[class*="-ml-1.5"][class*="flex-wrap"]:has(> button:only-child) {
  display: none;
}

/* cl.Pdf's own toolbar (page nav, zoom, print/download) is opacity-0 by
   default and only reveals on real mouse hover (`onMouseEnter` in Chainlit's
   compiled PdfViewer component) unless the frontend passes its internal
   `persistentToolbar` prop — which isn't exposed via cl.Pdf's Python API, so
   it can't be set from here directly. Force it permanently visible instead
   of relying on hover, since a static-looking PDF with no visible page
   count/navigation reads as non-interactive. `.side-pdf` is the class
   Chainlit's own PdfViewer gives a `display="side"` cl.Pdf's container. */
.side-pdf div[class*="sticky"][class*="opacity-0"] {
  opacity: 1 !important;
}

/* Activity introduction/procedure HTML built by
   mcp/src/client/infotwin.ts's renderActivityRichText (see CLAUDE.md's
   Activity entry) — plain semantic tags (figure/ul/ol/div) with no
   framework styling of their own, since dangerouslySetInnerHTML renders
   them as-is. */
.source-panel .activity-safety {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  border-left: 4px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
}

.source-panel .activity-safety p,
.source-panel .activity-safety ul {
  margin: 0.25rem 0;
}

.source-panel .activity-safety-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.source-panel .activity-safety-danger {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.source-panel .activity-safety-danger .activity-safety-label {
  color: #dc2626;
}

.source-panel .activity-safety-warning {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}
.source-panel .activity-safety-warning .activity-safety-label {
  color: #d97706;
}

.source-panel .activity-safety-caution,
.source-panel .activity-safety-note,
.source-panel .activity-safety-notice {
  border-left-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
}
.source-panel .activity-safety-caution .activity-safety-label,
.source-panel .activity-safety-note .activity-safety-label,
.source-panel .activity-safety-notice .activity-safety-label {
  color: hsl(var(--primary));
}

/* Raw SCHEMA ST4-generated Topic HTML's OWN safety/notice callout markup —
   a completely different class taxonomy from Activity's synthesized
   .activity-safety-* above (those come from renderActivityRichText's
   portable-text conversion; this is untouched markup straight out of the
   topic's content blob, via processTopicHtml). Confirmed live against
   "Datenbank exportieren, importieren und pflegen": .safety (outer box)
   plus a severity token as a SECOND class — safety-attention ("VORSICHT"),
   safety-note ("Hinweis"), safety-tip ("Tipp") all observed in this
   tenant's real content; safety-danger/safety-warning included
   defensively, matching the same severity range Activity content already
   covers, even though not yet observed here. .safety-head/.safety-title/
   .safety-body/.safety-cause are the box's own structural classes. These
   boxes originally shipped their own styling via the per-topic
   <link rel="stylesheet"> processTopicHtml strips out (see its comment —
   those blob URLs 404 against the chat app's own origin anyway), so
   without rules targeting these exact class names a Topic's warning
   notices rendered as a plain, uncolored, unindented wall of text — the
   pre-existing .activity-safety-* rules never matched any of this markup
   at all, despite looking similar in intent. */
.source-panel .safety {
  margin: 0.75rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  border-left: 4px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.4);
}
.source-panel .safety-title {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.source-panel .safety-cause {
  font-weight: 600;
  margin-top: 0.35rem;
}
.source-panel .safety-body p,
.source-panel .safety-body ol {
  margin: 0.35rem 0;
}

.source-panel .safety-danger {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.source-panel .safety-danger .safety-title {
  color: #dc2626;
}

.source-panel .safety-warning,
.source-panel .safety-attention {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}
.source-panel .safety-warning .safety-title,
.source-panel .safety-attention .safety-title {
  color: #d97706;
}

.source-panel .safety-note,
.source-panel .safety-notice,
.source-panel .safety-tip {
  border-left-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.08);
}
.source-panel .safety-note .safety-title,
.source-panel .safety-notice .safety-title,
.source-panel .safety-tip .safety-title {
  color: hsl(var(--primary));
}

.source-panel figure {
  margin: 0.5rem 0;
}
.source-panel figure img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid hsl(var(--border));
}
.source-panel figcaption {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

.source-panel .activity-intermediate-result {
  font-style: italic;
  color: hsl(var(--muted-foreground));
}

/* One row per procedure step (renderActivityRichText's "step" case) — a
   plain <li> in an <ol> otherwise runs steps together with only the native
   number to tell them apart, easy to lose track of in a long procedure.
   Adapted from IQ Platform's own ".step" rule (docs/css/activity-detail-
   page-*.css), which pairs this with a numbered circle avatar we don't
   replicate (native <ol> numbering already covers that) — padding scaled
   down from their 24px since this renders in a narrower sidebar, not a full
   content page. No divider after the last step (nothing left to separate
   from). */
.source-panel .activity-step {
  padding: 0.6rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.source-panel .activity-step:last-child {
  border-bottom: none;
}

/* "Voraussetzungen"/"Ergebnis" sub-headings around a procedure's step list —
   plain <h4> tags render with no visual weight under this app's CSS reset
   (contrast with SourcePanel.jsx's own section <h3>, which is styled
   directly via Tailwind classes since it's JSX, not raw HTML). */
.source-panel .activity-subheading {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}

/* Loading pulse for active tool lines in the research step */
@keyframes cl-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.cl-active {
  display: inline-block;
  animation: cl-pulse 1.2s ease-in-out infinite;
}