/* Packstub Agents — plain CSS on top of the panel theme (no build step). */

/* Markdown in chat answers. */
.fi-chat-md p { margin: 0 0 0.75rem; }
.fi-chat-md p:last-child { margin-bottom: 0; }
.fi-chat-md ul, .fi-chat-md ol { margin: 0 0 0.75rem 1.25rem; }
.fi-chat-md ul { list-style: disc; }
.fi-chat-md ol { list-style: decimal; }
.fi-chat-md li { margin: 0.125rem 0; }
.fi-chat-md h1, .fi-chat-md h2, .fi-chat-md h3 { font-weight: 600; margin: 1rem 0 0.5rem; }
.fi-chat-md h1 { font-size: 1.125rem; }
.fi-chat-md h2 { font-size: 1rem; }
.fi-chat-md a { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.fi-chat-md code { font-size: 0.8125rem; background: rgb(0 0 0 / 0.06); border-radius: 0.25rem; padding: 0.1rem 0.3rem; }
.dark .fi-chat-md code { background: rgb(255 255 255 / 0.1); }
.fi-chat-md table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.8125rem; display: block; overflow-x: auto; }
.fi-chat-md th, .fi-chat-md td { text-align: left; padding: 0.375rem 0.625rem; border-bottom: 1px solid rgb(0 0 0 / 0.08); vertical-align: top; white-space: nowrap; }
.dark .fi-chat-md th, .dark .fi-chat-md td { border-color: rgb(255 255 255 / 0.1); }
.fi-chat-md th { font-weight: 600; color: var(--gray-500); }
.fi-chat-md strong { font-weight: 600; }

/* The composer: one row — the field, then the tools (the context ring), Stop while an answer runs, the model and a square
   Send. The field grows with the text up to a few lines (agent-chat.js) and the actions stay on its last line. The card
   highlights on focus, so the textarea must not draw the browser's own outline. */
.fi-agent-composer-row { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 1rem; }
.fi-agent-composer-input { flex: 1; min-width: 0; min-height: 2.5rem; max-height: 12rem; overflow-y: auto; padding: 0.5rem 0; line-height: 1.5rem; }
.fi-agent-composer-input:focus { outline: none; box-shadow: none; }
.fi-agent-composer-actions { display: flex; flex: none; align-items: center; gap: 0.25rem; height: 2.5rem; }
.fi-agent-composer-send { width: 2.25rem; height: 2.25rem; }
.fi-agent-composer-stop { margin-inline-end: 0.125rem; }
/* The model: a small text button; the list under it says what each entry runs. */
.fi-agent-composer-model { display: inline-flex; align-items: center; gap: 0.125rem; max-width: 11rem; height: 2rem; padding: 0 0.25rem 0 0.5rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--gray-600); cursor: pointer; white-space: nowrap; }
.fi-agent-composer-model:hover, .fi-agent-composer-model:focus-visible, .fi-agent-composer-model[aria-expanded="true"] { color: var(--gray-900); background: rgb(0 0 0 / 0.05); outline: none; }
.dark .fi-agent-composer-model { color: var(--gray-400); }
.dark .fi-agent-composer-model:hover, .dark .fi-agent-composer-model:focus-visible, .dark .fi-agent-composer-model[aria-expanded="true"] { color: #fff; background: rgb(255 255 255 / 0.08); }
.fi-agent-composer-model svg { width: 1rem; height: 1rem; flex: none; color: var(--gray-400); }
.fi-agent-composer-models .fi-dropdown-list-item-label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.fi-agent-composer-model-option { display: flex; flex-direction: column; min-width: 0; text-align: start; }
.fi-agent-composer-model-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-agent-composer-model-detail { font-size: 0.75rem; color: var(--gray-500); }
.fi-agent-composer-model-picked .fi-agent-composer-model-label { color: var(--primary-600); font-weight: 600; }
.dark .fi-agent-composer-model-picked .fi-agent-composer-model-label { color: var(--primary-400); }
.fi-agent-composer-model-check { width: 1rem; height: 1rem; flex: none; color: var(--primary-600); }
.dark .fi-agent-composer-model-check { color: var(--primary-400); }
@media (max-width: 480px) { .fi-agent-composer-model { max-width: 7rem; } }

/* A new chat: the assistant's name and its starter questions, each a pill that sends on click. */
.fi-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 0 1rem; text-align: center; }
.fi-chat-empty-icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 9999px; color: var(--primary-600); background: color-mix(in srgb, var(--primary-500) 12%, transparent); }
.dark .fi-chat-empty-icon { color: var(--primary-400); }
.fi-chat-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.fi-chat-empty-title { margin: 0.5rem 0 0; font-size: 1.25rem; font-weight: 600; color: var(--gray-950); }
.dark .fi-chat-empty-title { color: #fff; }
.fi-chat-empty-lead { margin: 0; font-size: 0.875rem; color: var(--gray-500); }
.fi-chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; max-width: 40rem; }
.fi-chat-suggestion { padding: 0.5rem 1rem; border: 1px solid rgb(0 0 0 / 0.1); border-radius: 9999px; background: #fff; font-size: 0.875rem; color: var(--gray-700); cursor: pointer; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.fi-chat-suggestion:hover, .fi-chat-suggestion:focus-visible { border-color: var(--primary-500); color: var(--primary-700); background: color-mix(in srgb, var(--primary-500) 6%, #fff); outline: none; }
.dark .fi-chat-suggestion { border-color: rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.04); color: var(--gray-300); }
.dark .fi-chat-suggestion:hover, .dark .fi-chat-suggestion:focus-visible { border-color: var(--primary-400); color: var(--primary-300); background: color-mix(in srgb, var(--primary-500) 12%, transparent); }

/* A question waiting its turn behind the answer that is streaming. */
.fi-chat-queued { border: 1px dashed var(--primary-400); color: var(--primary-800); background: color-mix(in srgb, var(--primary-500) 8%, transparent); }
.dark .fi-chat-queued { color: var(--primary-200); }

/* The context ring in the composer: how full the history window is (the stroke), warning colour once the chat is long. */
.fi-chat-ring { display: inline-flex; width: 1.5rem; height: 1.5rem; padding: 0.125rem; border-radius: 9999px; color: var(--gray-500); cursor: pointer; }
.fi-chat-ring:hover, .fi-chat-ring:focus-visible { background: rgb(0 0 0 / 0.05); outline: none; }
.dark .fi-chat-ring:hover, .dark .fi-chat-ring:focus-visible { background: rgb(255 255 255 / 0.08); }
.fi-chat-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fi-chat-ring circle { fill: none; stroke-width: 3; }
.fi-chat-ring-track { stroke: rgb(0 0 0 / 0.1); }
.dark .fi-chat-ring-track { stroke: rgb(255 255 255 / 0.15); }
.fi-chat-ring-fill { stroke: var(--primary-500); stroke-linecap: round; transition: stroke-dasharray 0.3s; }
.fi-chat-ring-fill-high { stroke: var(--warning-500); }
/* The popup: 24rem (the dropdown's sm cap; its max-width is layered !important, so the width is set instead), never wider than
   the screen. On a phone the dropdown shifts it into view flush with the edge and the margin centres it. */
.fi-dropdown-panel:has(> .fi-chat-ring-panel) { width: min(24rem, calc(100vw - 2rem)); }
@media (max-width: 640px) { .fi-dropdown-panel:has(> .fi-chat-ring-panel) { margin-inline-start: 1rem; } }
.fi-chat-ring-panel { width: 100%; }
.fi-chat-ring-panel dl { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; }
.fi-chat-ring-panel dd { text-align: end; font-variant-numeric: tabular-nums; color: var(--gray-800); }
.dark .fi-chat-ring-panel dd { color: var(--gray-200); }
.fi-chat-ring-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Controls on an exchange (edit the question; under an answer the thumbs, regenerate and the time) show on hover or focus
   and stay put meanwhile, so nothing shifts; a rating that was given (fi-chat-rated) and the notes on how the answer ended
   are always on. Hover does not exist on a touch screen: everything shows there. */
.fi-chat-exchange-tools, .fi-chat-answer-tool { opacity: 0; transition: opacity 0.15s; }
.fi-chat-exchange:hover .fi-chat-exchange-tools, .fi-chat-exchange:focus-within .fi-chat-exchange-tools,
.fi-chat-exchange:hover .fi-chat-answer-tool, .fi-chat-exchange:focus-within .fi-chat-answer-tool { opacity: 1; }
@media (hover: none) { .fi-chat-exchange-tools, .fi-chat-answer-tool { opacity: 1; } }

/* A proposed change: a question with a decision. While it waits it is the loudest thing on the page (primary border and tint);
   once decided it recedes to a thin bordered line with the outcome where the buttons were, so nothing moves. */
.fi-chat-proposal { border: 1px solid rgb(0 0 0 / 0.1); border-radius: 0.75rem; padding: 0.75rem 1rem; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.dark .fi-chat-proposal { border-color: rgb(255 255 255 / 0.1); }
.fi-chat-proposal-pending { border-color: var(--primary-500); background: color-mix(in srgb, var(--primary-500) 7%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent); }
.fi-chat-proposal-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.fi-chat-proposal-icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.125rem; color: var(--gray-400); }
.fi-chat-proposal-pending .fi-chat-proposal-icon { color: var(--primary-600); }
.dark .fi-chat-proposal-pending .fi-chat-proposal-icon { color: var(--primary-400); }
.fi-chat-proposal-approved .fi-chat-proposal-icon { color: var(--success-600); }
.dark .fi-chat-proposal-approved .fi-chat-proposal-icon { color: var(--success-400); }
.fi-chat-proposal-body { min-width: 0; flex: 1; }
.fi-chat-proposal-question { margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.5rem; color: var(--gray-700); overflow-wrap: anywhere; }
.dark .fi-chat-proposal-question { color: var(--gray-300); }
.fi-chat-proposal-pending .fi-chat-proposal-question { font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .fi-chat-proposal-pending .fi-chat-proposal-question { color: #fff; }
.fi-chat-proposal-rejected .fi-chat-proposal-question { text-decoration: line-through; text-decoration-color: rgb(0 0 0 / 0.25); }
.dark .fi-chat-proposal-rejected .fi-chat-proposal-question { text-decoration-color: rgb(255 255 255 / 0.3); }
/* The exact call, folded: the tool name and how many arguments; opens on click. */
.fi-chat-proposal-call { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.125rem; margin-inline-start: -0.25rem; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.75rem; color: var(--gray-500); cursor: pointer; }
.fi-chat-proposal-call:hover, .fi-chat-proposal-call:focus-visible { color: var(--gray-800); background: rgb(0 0 0 / 0.04); outline: none; }
.dark .fi-chat-proposal-call:hover, .dark .fi-chat-proposal-call:focus-visible { color: var(--gray-200); background: rgb(255 255 255 / 0.06); }
.fi-chat-proposal-call code { font-size: 0.75rem; }
.fi-chat-proposal-chevron { width: 0.875rem; height: 0.875rem; transition: transform 0.15s; }
.fi-chat-proposal-chevron-open { transform: rotate(90deg); }
.fi-chat-proposal-decision { flex: none; display: flex; align-items: center; min-height: 1.5rem; }
.fi-chat-proposal-actions { display: flex; gap: 0.5rem; }
.fi-chat-proposal-outcome { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); }
.fi-chat-proposal-approved .fi-chat-proposal-outcome { color: var(--success-600); }
.dark .fi-chat-proposal-approved .fi-chat-proposal-outcome { color: var(--success-400); }
.fi-chat-proposal-error { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--danger-600); }
.dark .fi-chat-proposal-error { color: var(--danger-400); }
.fi-chat-proposal-error svg { width: 1rem; height: 1rem; flex: none; }
/* A proposal's preview: what the call would change, the value now struck through next to the value after. */
.fi-chat-proposal-preview { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.375rem 0 0.25rem; font-size: 0.8125rem; }
.fi-chat-proposal-preview dt { color: var(--gray-500); }
.fi-chat-proposal-preview dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; color: var(--gray-400); overflow-wrap: anywhere; }
.fi-chat-proposal-preview del { color: var(--gray-500); text-decoration-color: rgb(0 0 0 / 0.35); }
.dark .fi-chat-proposal-preview del { color: var(--gray-400); text-decoration-color: rgb(255 255 255 / 0.35); }
.fi-chat-proposal-preview ins { text-decoration: none; font-weight: 600; color: var(--gray-950); }
.dark .fi-chat-proposal-preview ins { color: #fff; }
.fi-chat-proposal-details { margin-top: 0.625rem; padding-top: 0.625rem; border-top: 1px solid rgb(0 0 0 / 0.08); font-size: 0.8125rem; }
.dark .fi-chat-proposal-details { border-color: rgb(255 255 255 / 0.1); }
.fi-chat-reasoning { border-left: 2px solid rgb(0 0 0 / 0.08); padding-left: 0.625rem; }
.dark .fi-chat-reasoning { border-color: rgb(255 255 255 / 0.12); }
.fi-chat-reasoning-text { margin-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--gray-500); white-space: pre-wrap; }
.dark .fi-chat-reasoning-text { color: var(--gray-400); }
.fi-chat-proposal-details dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; }
.fi-chat-proposal-details dt { color: var(--gray-500); }
.fi-chat-proposal-details dd { margin: 0; color: var(--gray-800); overflow-wrap: anywhere; }
.dark .fi-chat-proposal-details dd { color: var(--gray-200); }
.fi-chat-proposal-label { margin: 0.625rem 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); }
.fi-chat-proposal-details pre { margin: 0; max-height: 14rem; overflow: auto; padding: 0.5rem 0.625rem; border-radius: 0.5rem; background: rgb(0 0 0 / 0.04); font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dark .fi-chat-proposal-details pre { background: rgb(255 255 255 / 0.06); }
/* On a narrow screen the decision drops under the question. */
@media (max-width: 480px) { .fi-chat-proposal-row { flex-wrap: wrap; } .fi-chat-proposal-decision { width: 100%; justify-content: flex-end; margin-top: 0.25rem; } }

/* A caret at the end of the answer while it streams. */
.fi-chat-streaming::after { content: ''; display: inline-block; width: 0.5rem; height: 1em; margin-inline-start: 0.125rem; vertical-align: text-bottom; background: currentColor; opacity: 0.6; animation: fi-chat-blink 1s steps(2) infinite; }
@keyframes fi-chat-blink { to { opacity: 0; } }

/* The skip-link target (<main tabindex="-1">) receives focus when a control inside it is disabled mid-request; never outline it. */
.fi-main:focus, .fi-main:focus-visible, #fi-main-content:focus, #fi-main-content:focus-visible { outline: none; }

/* A resource table embedded in an answer: tighter cells, never wider than the chat column. */
.fi-chat-table { min-width: 0; max-width: 100%; }
.fi-chat-table .fi-ta-cell { padding-inline: 0.5rem; }
.fi-chat-table .fi-ta-header-cell { padding-inline: 0.5rem; }
.fi-chat-table .fi-ta-content { scrollbar-width: thin; }

/* The tool picker of the Create token modal: one table, a line per tool, the full description on hover. */
.fi-agent-tools { border: 1px solid rgb(0 0 0 / 0.1); border-radius: 0.75rem; overflow: hidden; }
.dark .fi-agent-tools { border-color: rgb(255 255 255 / 0.1); }
.fi-agent-tools table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.875rem; }
.fi-agent-tools th { background: rgb(0 0 0 / 0.03); color: var(--gray-500); font-size: 0.75rem; font-weight: 600; text-align: start; padding: 0.5rem 0.75rem; }
.dark .fi-agent-tools th { background: rgb(255 255 255 / 0.04); }
.fi-agent-tools td { padding: 0.5rem 0.75rem; border-top: 1px solid rgb(0 0 0 / 0.06); vertical-align: middle; }
.dark .fi-agent-tools td { border-color: rgb(255 255 255 / 0.08); }
.fi-agent-tools th:nth-child(2), .fi-agent-tools td:nth-child(2) { width: 11rem; }
.fi-agent-tools th:nth-child(3), .fi-agent-tools td:nth-child(3) { width: 5.5rem; }
.fi-agent-tools-check { width: 2.5rem; text-align: center; }
.fi-agent-tools-name label { font-weight: 500; color: var(--gray-950); cursor: pointer; }
.dark .fi-agent-tools-name label { color: #fff; }
.fi-agent-tools-desc { color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.fi-agent-tools-off { opacity: 0.45; }
.fi-agent-tools-off label { cursor: not-allowed; }

/* --- 1.11: code blocks, the tool timeline, attachments, mentions, the pickers, versions, notes, the header, the slide-over --- */

/* Code in answers: a block with a copy button in its corner and light colouring; inline code stays as it was. */
.fi-chat-md pre { position: relative; margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: rgb(0 0 0 / 0.05); border: 1px solid rgb(0 0 0 / 0.06); font-size: 0.8125rem; line-height: 1.5; overflow-x: auto; }
.dark .fi-chat-md pre { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.08); }
.fi-chat-md pre code { display: block; padding: 0; background: transparent; border-radius: 0; font-size: inherit; white-space: pre; }
.fi-chat-code-copy { position: absolute; top: 0.375rem; right: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; color: var(--gray-500); background: rgb(255 255 255 / 0.8); border: 1px solid rgb(0 0 0 / 0.08); opacity: 0; transition: opacity 0.15s; cursor: pointer; }
.dark .fi-chat-code-copy { color: var(--gray-300); background: rgb(0 0 0 / 0.4); border-color: rgb(255 255 255 / 0.1); }
.fi-chat-md pre:hover .fi-chat-code-copy, .fi-chat-code-copy:focus-visible, .fi-chat-code-copy.fi-chat-copied { opacity: 1; }
.fi-chat-code-copy.fi-chat-copied, .fi-chat-answer-tool.fi-chat-copied { color: var(--success-600); }
@media (hover: none) { .fi-chat-code-copy { opacity: 1; } }
.fi-chat-md .hl-k { color: #7c3aed; font-weight: 500; }
.fi-chat-md .hl-s { color: #0f766e; }
.fi-chat-md .hl-n { color: #b45309; }
.fi-chat-md .hl-c { color: var(--gray-500); font-style: italic; }
.dark .fi-chat-md .hl-k { color: #c4b5fd; }
.dark .fi-chat-md .hl-s { color: #5eead4; }
.dark .fi-chat-md .hl-n { color: #fcd34d; }
.fi-chat-md blockquote { margin: 0.5rem 0 0.75rem; padding: 0.25rem 0 0.25rem 0.875rem; border-left: 3px solid rgb(0 0 0 / 0.12); color: var(--gray-600); }
.dark .fi-chat-md blockquote { border-color: rgb(255 255 255 / 0.15); color: var(--gray-400); }
.fi-chat-md hr { margin: 1rem 0; border: 0; border-top: 1px solid rgb(0 0 0 / 0.08); }
.dark .fi-chat-md hr { border-color: rgb(255 255 255 / 0.1); }

/* The tool timeline: what the assistant looked up before it answered, one line per call, folded details under each. */
.fi-chat-timeline { display: flex; flex-direction: column; gap: 0.125rem; }
.fi-chat-timeline-row { border-left: 2px solid rgb(0 0 0 / 0.08); padding-left: 0.625rem; }
.dark .fi-chat-timeline-row { border-color: rgb(255 255 255 / 0.12); }
.fi-chat-timeline-call { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; max-width: 100%; padding: 0.125rem 0.375rem 0.125rem 0; border-radius: 0.375rem; font-size: 0.75rem; color: var(--gray-500); text-align: start; cursor: pointer; }
button.fi-chat-timeline-call:hover, button.fi-chat-timeline-call:focus-visible { color: var(--gray-800); outline: none; }
.dark button.fi-chat-timeline-call:hover, .dark button.fi-chat-timeline-call:focus-visible { color: var(--gray-200); }
.fi-chat-timeline-icon { width: 0.875rem; height: 0.875rem; flex: none; color: var(--gray-400); }
.fi-chat-timeline-name { font-weight: 600; color: var(--gray-700); }
.dark .fi-chat-timeline-name { color: var(--gray-300); }
.fi-chat-timeline-args { color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.fi-chat-timeline-result { color: var(--gray-400); }
.fi-chat-timeline-result::before { content: '·'; margin-inline-end: 0.375rem; }
.fi-chat-timeline-live .fi-chat-timeline-row:last-child .fi-chat-timeline-name { color: var(--primary-600); }
.dark .fi-chat-timeline-live .fi-chat-timeline-row:last-child .fi-chat-timeline-name { color: var(--primary-400); }
.fi-chat-timeline .fi-chat-proposal-details { margin-top: 0.25rem; margin-bottom: 0.5rem; }

/* A question: its files above the bubble, the records it mentions under it. */
.fi-chat-question { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; }
.fi-chat-attachments { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
.fi-chat-attachment-image { display: block; max-width: 14rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgb(0 0 0 / 0.1); }
.fi-chat-attachment-image img { display: block; width: 100%; height: auto; }
.fi-chat-attachment-file { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 16rem; padding: 0.25rem 0.625rem; border-radius: 9999px; border: 1px solid rgb(0 0 0 / 0.1); background: #fff; font-size: 0.75rem; color: var(--gray-700); }
.fi-chat-attachment-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .fi-chat-attachment-file { border-color: rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.05); color: var(--gray-300); }
.fi-chat-mentions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.fi-chat-mention { font-size: 0.6875rem; padding: 0.0625rem 0.5rem; border-radius: 9999px; background: color-mix(in srgb, var(--primary-500) 12%, transparent); color: var(--primary-700); }
.dark .fi-chat-mention { color: var(--primary-300); }

/* The composer: the files picked for the next question, the attach button, the drop highlight. */
.fi-agent-composer-files { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.625rem 1rem 0; }
.fi-agent-composer-file { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 14rem; padding: 0.25rem 0.375rem 0.25rem 0.5rem; border-radius: 0.5rem; border: 1px solid rgb(0 0 0 / 0.1); background: rgb(0 0 0 / 0.03); font-size: 0.75rem; color: var(--gray-700); }
.dark .fi-agent-composer-file { border-color: rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.05); color: var(--gray-300); }
.fi-agent-composer-file img { width: 1.5rem; height: 1.5rem; object-fit: cover; border-radius: 0.25rem; }
.fi-agent-composer-file button { display: inline-flex; padding: 0.125rem; border-radius: 9999px; color: var(--gray-400); cursor: pointer; }
.fi-agent-composer-file button:hover { color: var(--danger-600); }
.fi-agent-composer-attach { margin-inline-start: -0.5rem; align-self: flex-end; margin-bottom: 0.25rem; }
.fi-agent-composer-dragging { border-color: var(--primary-500) !important; background: color-mix(in srgb, var(--primary-500) 5%, #fff) !important; }
.dark .fi-agent-composer-dragging { background: color-mix(in srgb, var(--primary-500) 12%, transparent) !important; }

/* The pickers over the composer: records for "@", starter questions for "/". */
.fi-agent-composer { position: relative; }
.fi-agent-picker { position: absolute; left: 0.75rem; right: 0.75rem; bottom: calc(100% + 0.375rem); z-index: 30; max-height: 16rem; overflow-y: auto; padding: 0.25rem; border-radius: 0.75rem; border: 1px solid rgb(0 0 0 / 0.1); background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); }
.dark .fi-agent-picker { border-color: rgb(255 255 255 / 0.1); background: var(--gray-900); box-shadow: 0 10px 30px rgb(0 0 0 / 0.5); }
.fi-agent-picker-item { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--gray-800); text-align: start; cursor: pointer; }
.dark .fi-agent-picker-item { color: var(--gray-200); }
.fi-agent-picker-item-active { background: rgb(0 0 0 / 0.05); }
.dark .fi-agent-picker-item-active { background: rgb(255 255 255 / 0.08); }
.fi-agent-picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-agent-picker-detail { flex: none; font-size: 0.75rem; color: var(--gray-500); }
.fi-agent-picker-empty { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--gray-500); }
.fi-chat-empty-hint { margin: 0.75rem 0 0; font-size: 0.75rem; color: var(--gray-400); }

/* Under an answer: the version switcher, the thumbs-down note. */
.fi-chat-versions { display: inline-flex; align-items: center; gap: 0.125rem; margin-inline-start: 0.25rem; padding: 0.125rem 0.25rem; border-radius: 0.375rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--gray-500); cursor: pointer; }
.fi-chat-versions:hover, .fi-chat-versions:focus-visible { color: var(--gray-800); background: rgb(0 0 0 / 0.05); outline: none; }
.dark .fi-chat-versions:hover, .dark .fi-chat-versions:focus-visible { color: var(--gray-200); background: rgb(255 255 255 / 0.08); }
.fi-chat-version-item { display: flex; flex-direction: column; min-width: 0; }
.fi-chat-version-label { font-weight: 500; }
.fi-chat-version-snippet { font-size: 0.75rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-chat-note { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; }
.fi-chat-note-input, .fi-chat-rename-input { flex: 1; min-width: 0; padding: 0.375rem 0.625rem; border-radius: 0.5rem; border: 1px solid rgb(0 0 0 / 0.12); background: #fff; font-size: 0.8125rem; color: var(--gray-900); }
.fi-chat-note-input:focus, .fi-chat-rename-input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500); }
.dark .fi-chat-note-input, .dark .fi-chat-rename-input { border-color: rgb(255 255 255 / 0.15); background: rgb(255 255 255 / 0.05); color: #fff; }
.fi-chat-rename-input { font-size: 1.125rem; font-weight: 600; max-width: 28rem; }
.fi-chat-continued { margin-top: -0.75rem; }
.fi-chat-continued > .fi-chat-timeline:first-child { margin-top: 0.75rem; }

/* The header: the title with rename, the pin, the export. */
.fi-chat-header-tool { display: inline-flex; padding: 0.375rem; border-radius: 0.5rem; color: var(--gray-400); cursor: pointer; }
.fi-chat-header-tool:hover, .fi-chat-header-tool:focus-visible { color: var(--gray-800); background: rgb(0 0 0 / 0.05); outline: none; }
.dark .fi-chat-header-tool:hover, .dark .fi-chat-header-tool:focus-visible { color: var(--gray-200); background: rgb(255 255 255 / 0.08); }
.fi-chat-header-tool-on { color: var(--primary-600); }
.dark .fi-chat-header-tool-on { color: var(--primary-400); }

/* Embedded in the slide-over: the page fills the frame. */
.fi-chat-embedded { max-width: none; padding: 1rem 1rem 0; }
.fi-chat-embedded .fi-chat-header h1 { font-size: 1rem; }

/* The slide-over the "Ask …" button opens over any page: the chat in a frame on the right, the page still visible. */
.fi-agent-drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.fi-agent-drawer-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.3); }
.fi-agent-drawer-panel { position: relative; display: flex; flex-direction: column; width: min(32rem, 100vw); height: 100%; background: #fff; box-shadow: -10px 0 40px rgb(0 0 0 / 0.2); }
.dark .fi-agent-drawer-panel { background: var(--gray-950); }
.fi-agent-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.75rem 0.625rem 1rem; border-bottom: 1px solid rgb(0 0 0 / 0.08); font-size: 0.875rem; font-weight: 600; color: var(--gray-900); }
.dark .fi-agent-drawer-head { border-color: rgb(255 255 255 / 0.1); color: #fff; }
.fi-agent-drawer-head span { display: inline-flex; align-items: center; gap: 0.375rem; }
.fi-agent-drawer-head svg { width: 1.125rem; height: 1.125rem; color: var(--primary-600); }
.fi-agent-drawer-actions { display: inline-flex; align-items: center; gap: 0.125rem; }
.fi-agent-drawer-frame { flex: 1; width: 100%; border: 0; background: transparent; }
.fi-agent-drawer-kbd { margin-inline-start: 0.375rem; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; border: 1px solid rgb(0 0 0 / 0.12); font-size: 0.6875rem; font-family: ui-monospace, monospace; color: var(--gray-500); }
.dark .fi-agent-drawer-kbd { border-color: rgb(255 255 255 / 0.15); }

/* The sidebar: pinned chats first, with a bookmark. */
.fi-sidebar-chats-pin { width: 0.875rem; height: 0.875rem; flex: none; color: var(--primary-500); }

/* --- 1.13: the compact table of an answer, the record link in the header, the sources of a web search --- */

/* A table in an answer is compact: one quiet header (the caption and the row count), small column titles, no pager. */
.fi-chat-table-compact .fi-ta-header { padding: 0.625rem 0.75rem; gap: 0.5rem; }
.fi-chat-table-compact .fi-ta-header-heading { font-size: 0.875rem; line-height: 1.25rem; }
.fi-chat-table-compact .fi-ta-header-description { font-size: 0.75rem; margin-top: 0; }
.fi-chat-table-compact .fi-ta-header-toolbar { padding: 0.25rem 0.5rem; }
.fi-chat-table-compact .fi-ta-header-cell { padding-block: 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); }
.fi-chat-table-compact .fi-ta-header-cell .fi-ta-header-cell-sort-btn { font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.fi-chat-table-compact .fi-ta-text { padding-block: 0.5rem; }
.fi-chat-table-compact .fi-ta-actions { gap: 0.625rem; }
/* The link to the whole of a long result, under its first rows. */
.fi-chat-table-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; padding: 0.25rem 0.125rem; font-size: 0.8125rem; font-weight: 600; color: var(--primary-600); }
.fi-chat-table-more:hover, .fi-chat-table-more:focus-visible { text-decoration: underline; text-underline-offset: 2px; outline: none; }
.dark .fi-chat-table-more { color: var(--primary-400); }

/* "About <record>" under the chat's title: the record links to its page. */
.fi-chat-about a { font-weight: 500; color: var(--gray-700); text-decoration: underline; text-decoration-color: rgb(0 0 0 / 0.2); text-underline-offset: 2px; }
.fi-chat-about a:hover, .fi-chat-about a:focus-visible { color: var(--primary-600); text-decoration-color: currentColor; outline: none; }
.dark .fi-chat-about a { color: var(--gray-300); text-decoration-color: rgb(255 255 255 / 0.25); }
.dark .fi-chat-about a:hover, .dark .fi-chat-about a:focus-visible { color: var(--primary-400); }

/* The pages an answer cites from a web search: one chip per page, under the answer. */
.fi-chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.fi-chat-sources-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin-inline-end: 0.125rem; }
.fi-chat-source { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.125rem 0.5rem; border-radius: 9999px; border: 1px solid rgb(0 0 0 / 0.1); font-size: 0.75rem; color: var(--gray-700); }
.fi-chat-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-chat-source:hover, .fi-chat-source:focus-visible { border-color: var(--primary-500); color: var(--primary-700); outline: none; }
.dark .fi-chat-source { border-color: rgb(255 255 255 / 0.12); color: var(--gray-300); }
.dark .fi-chat-source:hover, .dark .fi-chat-source:focus-visible { border-color: var(--primary-400); color: var(--primary-300); }