/* AssistantChat (DavidsonHR.Shared.Ui/Assistant) — the PORTAL'S "Virtual HR Manager" card, shared.
   These are the portal's own rules (DavidsonHR.VirtualHrm/wwwroot/app.css: .vhm-head, .vhm-chat,
   .chat-msg, .chat-typing, .vhm-foot) under this component's class names, so the panel looks the same
   in either host. The header and the input are always visible; only the log scrolls, inside the
   card. 360px is the portal's height; a host that wants another size passes a class (asst-tall). */
.asst-card { display: flex; flex-direction: column; overflow: hidden; height: 22.5rem; background: #fff;
             border: 1px solid #e3e6ea; border-radius: .75rem; font-family: inherit; }
.asst-card.asst-tall { height: min(35rem, 62vh); min-height: 22.5rem; }
/* For a host that lays the card out in a flex column and wants it to take whatever height is left:
   the card grows and shrinks with its container, and the log scrolls inside it. */
.asst-card.asst-grow { height: auto; flex: 1 1 0; min-height: 0; }
.asst-card.asst-fill { height: 100%; border: 0; border-radius: 0; }

.asst-head { flex: 0 0 auto; background-color: #08203d; color: #fff; padding: .6875rem .875rem; font-weight: 600; font-size: .9375rem; }

/* No padding at the top: a question pins flush to the log's top edge (below). */
.asst-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 .875rem .75rem; font-size: .875rem; color: #1f2937; }
.asst-log > .asst-empty, .asst-log > .asst-error { margin-top: .75rem; }
/* THE QUESTION BAR (Steven, 2026-10-06): lightly shaded, the log's full width, and PINNED to the top while its
   own answer scrolls under it - it lives in its question's group (.asst-grp), so the next question pushes it
   away. "You:" says what it is, not the shade alone. A host with wider log padding widens the bar to match. */
.asst-grp { margin-bottom: .25rem; }
.asst-msg.asst-q { position: sticky; top: 0; z-index: 1; margin: 0 -14px .625rem; padding: .5rem .875rem;
                   background: #eef3f8; border-bottom: 1px solid #dbe3ec; }
.asst-log[hidden] { display: none; }
/* The host's cover (the portal's Simon video) fills the same space the conversation does. */
.asst-cover { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
.asst-cover > * { flex: 1 1 auto; min-width: 0; }
.asst-cover[hidden] { display: none; }
.asst-empty { color: #8a94a6; font-style: italic; }
.asst-msg { margin-bottom: .75rem; line-height: 1.45; }
.asst-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* An answer, formatted (AssistantMarkdown): paragraphs, lists, headings and tables, kept compact to
   suit the card. A wide table scrolls sideways inside the answer rather than stretching the card. */
.asst-md { overflow-wrap: anywhere; }
.asst-md > :first-child { margin-top: 0; }
.asst-md > :last-child { margin-bottom: 0; }
.asst-md p { margin: 0 0 .5rem; }
.asst-md ul, .asst-md ol { margin: 0 0 .5rem; padding-left: 1.375rem; }
.asst-md li { margin: 2px 0; }
/* Headings RELATIVE to the answer's text (Steven, 2026-10-06: they were a fixed 14px, so in the popped-out window,
   where the text is 16px, a heading came out smaller than the words under it). Always a little larger, and bold. */
.asst-md h1, .asst-md h2 { font-size: 1.2em; font-weight: 700; margin: .8em 0 .3em; line-height: 1.3; }
.asst-md h3, .asst-md h4 { font-size: 1.1em; font-weight: 700; margin: .8em 0 .3em; line-height: 1.3; }
.asst-md table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: .25rem 0 .625rem; font-size: .8125rem; }
.asst-md th, .asst-md td { border: 1px solid #d5dae1; padding: .25rem .625rem; text-align: left; vertical-align: top; overflow-wrap: normal; }
.asst-md th { background: #f1f4f8; font-weight: 600; }
.asst-md hr { border: 0; border-top: 1px solid #e3e6ea; margin: .625rem 0; }
.asst-md code { font-family: inherit; }
.asst-thinking { color: #5a6b7b; font-style: italic; font-size: .8125rem; margin-bottom: .625rem; display: flex; align-items: center; gap: .5rem; }
/* The spinner beside "thinking…" / "checking the latest official guidance…" (2026-10-06): motion, not colour,
   says it's working. Stilled for anyone who has asked their system for less motion - the words still say it. */
.asst-spin { flex: 0 0 auto; width: .875rem; height: .875rem; border-radius: 50%; border: 2px solid #c9d2dc; border-top-color: #005883;
             animation: asst-spin .8s linear infinite; }
@keyframes asst-spin { to { transform: rotate(360deg); } }
/* While it searches official sites: a globe that keeps turning (2026-10-06). */
.asst-globe { flex: 0 0 auto; width: 1rem; height: 1rem; fill: none; stroke: #005883; stroke-width: 1.7; stroke-linecap: round;
              animation: asst-spin 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .asst-spin, .asst-globe { animation: none; } }
.asst-error { color: #b32121; font-size: .8125rem; margin-bottom: .625rem; }
.asst-error::before { content: "Error: "; font-weight: 700; }

/* "open a case" inside an answer: a link, or a button that looks like one. Underlined always —
   colour alone must not be what marks it. */
.asst-link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: #005883; text-decoration: underline; cursor: pointer; }
.asst-link:hover { color: #0C7BB8; }

/* Sources, as the portal lists them: the word, then a document icon beside each name. */
.asst-sources { margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.asst-source { display: inline-flex; align-items: center; gap: .375rem; color: #005883; text-decoration: none; }
a.asst-source:hover span { text-decoration: underline; }
span.asst-source { color: #1f2937; }
.asst-doc { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The tester's "why this document?" (ShowDetail only): an (i) beside the source — hover for the gist,
   click to open the entries that were used, in full, under it. Never shown to a client. */
.asst-source-row { display: flex; align-items: center; gap: .5rem; }
/* Small, so it reads as a footnote mark beside the name rather than a second button (Steven,
   2026-09-17: "make info buttons smaller"). The hit area is padded back out for a finger. */
.asst-why { flex: 0 0 auto; width: .875rem; height: .875rem; padding: 0; border: 1px solid #005883; border-radius: 50%; background: #fff; color: #005883;
            font: italic 700 .5938rem/1 Georgia, "Times New Roman", serif; cursor: help; position: relative; }
.asst-why::after { content: ""; position: absolute; inset: -6px; }
.asst-why:hover, .asst-why[aria-expanded="true"] { background: #005883; color: #fff; }
.asst-why-body { align-self: stretch; margin: 2px 0 .375rem 1.5rem; padding: .5rem .625rem; border: 1px dashed #c8d0dc; border-radius: .375rem; background: #f8fafc; font-size: .7812rem; line-height: 1.4; }
.asst-why-entry + .asst-why-entry { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid #e3e6ea; }
.asst-why-label { font-weight: 700; color: #08203d; }
/* What a CLIENT sees behind the (i): the section heading, and the document's own words. */
.asst-why-section { font-weight: 700; color: #08203d; }
.asst-why-quote { margin: .1875rem 0 0; padding: 2px 0 2px .625rem; border-left: .1875rem solid #005883; border-radius: 0; font-style: italic; color: #1f2937; }
.asst-why-quote::before { content: "\201C"; }
.asst-why-quote::after { content: "\201D"; }
.asst-why-none { color: #6b7280; font-style: italic; }
.asst-why-q { font-weight: 600; margin-top: 2px; }
.asst-why-a { color: #374151; white-space: pre-wrap; }

/* The tester's footnote (ShowDetail). Never shown to a client. */
.asst-detail { margin-top: .375rem; padding-top: .3125rem; border-top: 1px dashed #d5dae3; font-size: .75rem; color: #6b7280; }

.asst-foot { flex: 0 0 auto; display: flex; border-top: 1px solid #e3e6ea; }
.asst-foot input { flex: 1; border: none; padding: .75rem .875rem; font-size: .875rem; min-width: 0; font-family: inherit; background: #fff; }
.asst-foot button { border: none; padding: .75rem 1.125rem; background-color: #005883; color: #fff; cursor: pointer; font-weight: 600; font-family: inherit; font-size: .875rem; }
.asst-foot button:hover:not(:disabled) { background-color: #0C7BB8; }
.asst-foot button:disabled { opacity: .6; cursor: default; }
.asst-foot input:focus, .asst-foot button:focus { outline: none; }
.asst-foot input:focus-visible { box-shadow: inset 0 -2px 0 #005883; }

/* A host's icon button at the right of Send (FootEnd - the portal's pop out / pop back in, Steven 2026-10-06):
   a blue icon on white, set off from Send by a rule. Icon only, so it says what it does on hover or keyboard
   focus (.asst-pop-tip), and to a screen reader through its aria-label. */
.asst-foot .asst-pop { position: relative; flex: 0 0 2.875rem; padding: 0; display: flex; align-items: center; justify-content: center;
                       background: #fff; color: #005883; border-left: 1px solid #e3e6ea; font-size: 1.1875rem; }
.asst-foot .asst-pop:hover:not(:disabled), .asst-foot .asst-pop:focus-visible { background: #e8f1f7; }
.asst-foot .asst-pop:focus-visible { box-shadow: inset 0 0 0 2px #005883; }
.asst-pop-tip { position: absolute; right: .25rem; bottom: calc(100% + .375rem); white-space: nowrap; pointer-events: none; opacity: 0;
                background: #1f2937; color: #fff; font-size: .75rem; font-weight: 400; padding: .25rem .5rem; border-radius: .375rem; transition: opacity .12s; }
.asst-pop:hover .asst-pop-tip, .asst-pop:focus-visible .asst-pop-tip { opacity: 1; }