/* 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; }
.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-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; }