/* The RAG mockup in design system v2's frame (TJ, 2026-10-26): v2's top bar, panels, type and
   controls come by link (index.html); this file lays them out and uses v2's roles only (--ds-*),
   never a literal color, size, space or corner. The data keeps its own color: the passages, the
   tiles and the legend take the color scale in use (shared/ProbabilityScale.js) through --row-bg,
   --tile-bg and the legend's gradient. Keyed by the mode class shared/Modes.js puts on <body>;
   desktop is the base. */

/* The page is the window: the top bar, then the panels, which scroll inside themselves. */
body { display: flex; flex-direction: column; height: 100dvh; }
#topbar { flex: none; }
/* With no areas in the top bar, the tools take the row's end themselves. */
#page_tools { margin-left: auto; }
#rag_container { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: var(--ds-space-3) var(--ds-margin); }

/* The ⓘ popovers (v2's .ds-popover): the title and what the page is for; how passages are found. */
.info_popover h2 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-type-h3); }
.info_popover h3 { margin: var(--ds-space-3) 0 0; font-family: var(--ds-font-text); font-size: var(--ds-type-ui); font-weight: var(--ds-weight-semibold); }
.info_popover p { margin: var(--ds-space-2) 0 0; }

/* The equation: Your prompt + Knowledge base = LLM request > LLM response. */
#columns { display: flex; flex: 1; gap: var(--ds-space-2); min-height: 0; }
.panel { display: flex; flex-direction: column; gap: var(--ds-space-2); min-height: 0; padding: var(--ds-space-3); }
/* A tool column is dense, so its selects take v2's small control height. */
.panel .ds-select { min-height: var(--ds-control-height-sm); padding-block: 0; }
/* The stages share the width equally, three or four of them (TJ, 2026-10-22). 0%, not 0: in the
   mobile column, whose height is open, a percentage basis falls back to the content, where 0 collapses it. */
#prompt_panel, #retrieval_panel, #request_panel, #response_panel { flex: 1 1 0%; min-width: 0; }
/* The fourth column and its arrow: shown while body.response-on (at first; the top bar's response button hides it). */
#response_panel, #response_operator { display: none; }
body.response-on #response_panel, body.response-on #response_operator { display: flex; }
.operator { display: flex; flex: none; align-items: center; justify-content: center; color: var(--ds-text); font-family: var(--ds-font-display); font-size: var(--ds-type-h1); font-weight: var(--ds-weight-display); line-height: var(--ds-leading-tight); }
/* With four columns the operators shrink, and the '>' most, so the response keeps the room. */
body.response-on .operator { font-size: var(--ds-type-h2); }
body.response-on #response_operator { font-size: var(--ds-type-h3); }
.panel_head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.panel_title { font-size: var(--ds-type-h3); }
.panel_title label { cursor: text; }
/* A label over its select (v2's form row). */
.select_row { display: grid; gap: var(--ds-space-1); min-width: 0; }
.select_label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-2); }
.select_row .ds-select { width: 100%; }
/* A segmented control as wide as its column, its choices sharing it. */
#method_toggle { display: flex; }
#method_toggle > button { flex: 1; }

/* Your prompt */
#prompt_input { flex: 1; width: 100%; min-height: calc(3 * var(--ds-control-height)); font-size: var(--ds-type-lede); resize: none; }
#prompt_nav { display: flex; align-items: center; gap: var(--ds-space-2); }
#tries ul { margin-top: 0; padding-left: var(--ds-space-5); color: var(--ds-text-2); font-size: var(--ds-type-ui); }
#tries li { margin: var(--ds-space-1) 0; }

/* Knowledge base */
#retrieval_controls { display: flex; flex-direction: column; gap: var(--ds-space-2); }
/* Meaning only: the model, and the threshold, which keyword scores have no fixed scale for. */
#model_row.is-off .ds-label, #min_row.is-off label, #min_row.is-off output { color: var(--ds-text-3); }
#score_legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ds-space-2); font-size: var(--ds-type-caption); }
#legend_bar { width: var(--ds-space-6); height: var(--ds-space-3); }
#legend_what { margin-left: auto; }
/* The knowledge base as an array (Agent Design Studio's KnowledgeChunkGrid): tiles in stored order. */
#kb_array_block { display: flex; flex-direction: column; gap: var(--ds-space-2); }
#kb_count { white-space: nowrap; }
#kb_array { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--ds-control-height-sm) - var(--ds-space-1)), 1fr)); gap: var(--ds-space-1); padding: var(--ds-space-1); }
.kb_tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: var(--ds-control-height); padding: 0; border: var(--ds-line) solid var(--ds-rule); border-radius: var(--ds-radius-act); background: var(--tile-bg); color: var(--tile-fg); font-family: var(--ds-font-mono); font-size: var(--ds-type-caption); cursor: pointer; }
.kb_tile:hover { border-color: var(--ds-ink); }
.kb_tile svg { flex: none; }
.kb_tile_n { line-height: var(--ds-leading-tight); }
.kb_tile.is-sent { box-shadow: 0 0 0 var(--ds-line-strong) var(--ds-bg), 0 0 0 calc(2 * var(--ds-line-strong)) var(--ds-ink); }
/* Your own document: the drop zone, or the line naming it. */
#own_drop { padding: var(--ds-space-3); border: var(--ds-line-strong) dashed var(--ds-field-border); border-radius: var(--ds-radius-act); font-size: var(--ds-type-ui); }
#own_drop p { margin: 0 0 var(--ds-space-2); }
#own_paste_text { width: 100%; margin-bottom: var(--ds-space-2); }
#kb_array_block.is-dropping { outline: var(--ds-line-strong) dashed var(--ds-ink); outline-offset: var(--ds-space-1); }
#own_loaded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-type-ui); }
#own_status { margin: 0; }
#own_status:empty { display: none; }
#own_status.is-failure { color: var(--ds-bad); }

/* The passages, most relevant first, each in the color of its score. */
/* The list takes what the column has left, but never less than room for a few passages: where the
   column cannot hold that, the column scrolls as a whole instead (#retrieval_panel). */
#retrieval_panel { overflow-y: auto; }
#passages { flex: 1 0 calc(4 * var(--ds-control-height)); min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.passage { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin-bottom: var(--ds-space-1); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-act); background: var(--row-bg); color: var(--row-fg); }
/* Left out: faded, so the sent ones lead. A data mark, not the interface. */
.passage.is-left-out { opacity: 0.4; }
.passage.is-editing { opacity: 1; outline: var(--ds-line-strong) solid var(--ds-ink); }
.passage_rank { flex: none; min-width: var(--ds-space-4); font-family: var(--ds-font-mono); font-size: var(--ds-type-small); text-align: right; }
.passage_body { flex: 1; min-width: 0; }
.passage_title { font-size: var(--ds-type-body); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-ui); }
.passage_text { margin: var(--ds-space-1) 0 0; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui); }
/* Three lines of each passage; a click (or Enter) opens it in full in #passage_dialog. */
.passage_open { cursor: pointer; }
.passage_open:focus-visible { outline-color: currentColor; }
.passage_open .passage_text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.match { background: none; color: inherit; text-decoration: underline var(--ds-line-strong); text-underline-offset: var(--ds-underline-offset); }
.edited_tag { margin-left: var(--ds-space-2); padding: 0 var(--ds-space-1); border: var(--ds-line) solid currentColor; border-radius: var(--ds-radius-tag); font-size: var(--ds-type-label); font-weight: var(--ds-weight-regular); }
.passage_side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ds-space-1); }
.passage_score { font-family: var(--ds-font-mono); font-size: var(--ds-type-caption); }
/* Edit sits on the passage's own color, so it takes that color's ink. */
.passage_edit { padding: 0 var(--ds-space-2); border: var(--ds-line) solid currentColor; border-radius: var(--ds-radius-act); background: transparent; color: inherit; font-family: var(--ds-font-text); font-size: var(--ds-type-caption); cursor: pointer; }
.passage_title_input, .passage_text_input { width: 100%; }
.passage_title_input { margin-bottom: var(--ds-space-1); font-weight: var(--ds-weight-semibold); }
.passage_edit_actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-2); }
.cutoff { display: flex; justify-content: space-between; gap: var(--ds-space-2); margin: var(--ds-space-2) 0; padding-top: var(--ds-space-1); border-top: var(--ds-line-strong) dashed var(--ds-rule-strong); color: var(--ds-text); font-size: var(--ds-type-label); white-space: nowrap; }
#add_passage { align-self: flex-start; }

/* The passage in full (v2's dialog). */
#passage_dialog_meta { margin: 0 0 var(--ds-space-2); }
#passage_dialog_title { margin: 0 0 var(--ds-space-3); font-size: var(--ds-type-h3); }
#passage_dialog_text { margin: 0 0 var(--ds-space-5); white-space: pre-wrap; }

/* LLM request */
#request_meta_row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
#request_meta { margin: 0; }
#request_body { flex: 1; min-height: 0; overflow-y: auto; }
.readable { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.part { padding: var(--ds-space-3); border-radius: var(--ds-radius-read); font-size: var(--ds-type-ui); line-height: var(--ds-leading-ui); }
.part p { margin: var(--ds-space-1) 0 0; }
.part_label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-2); }
.part_label span { color: var(--ds-text-2); font-size: var(--ds-type-label); }
/* The three parts, here and in the Structured view: the builders' instructions dashed, what was
   retrieved in a data color, your prompt in ink. */
.part-instructions { border: var(--ds-line-strong) dashed var(--ds-field-border); }
.part-retrieved { border: var(--ds-line-strong) solid var(--ds-data-3); }
.part-prompt { border: var(--ds-line-strong) solid var(--ds-ink); font-size: var(--ds-type-body); }
.part_intro { color: var(--ds-text-2); }
.request_passage { margin-top: var(--ds-space-2); padding-left: var(--ds-space-2); border-left: var(--ds-space-2) solid var(--row-bg); }
.structured { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.json-instructions { outline: var(--ds-line-strong) dashed var(--ds-field-border); outline-offset: var(--ds-line); }
.json-retrieved { background: color-mix(in srgb, var(--ds-data-3) 22%, transparent); }
.json-prompt { background: var(--ds-ink); color: var(--ds-on-ink); }

/* LLM response */
#send_request { align-self: flex-start; }
#response_body { flex: 1; min-height: 0; overflow-y: auto; }
/* What the model wrote, in mono as everything a model produced is (v2's chat thread). */
.response_md { padding: var(--ds-space-3); border: var(--ds-line) solid var(--ds-rule-strong); border-radius: var(--ds-radius-read); font-family: var(--ds-font-mono); font-size: var(--ds-type-small); line-height: var(--ds-leading-body); overflow-wrap: anywhere; }
.response_md > :first-child { margin-top: 0; }
.response_md > :last-child { margin-bottom: 0; }
.response_md p, .response_md ul, .response_md ol, .response_md blockquote, .response_md pre { margin: 0 0 var(--ds-space-2); }
.response_md ul, .response_md ol { padding-left: var(--ds-space-5); }
.response_md h3, .response_md h4, .response_md h5, .response_md h6 { margin: var(--ds-space-3) 0 var(--ds-space-1); font-size: var(--ds-type-body); }
.response_md blockquote { padding-left: var(--ds-space-2); border-left: var(--ds-line-strong) solid var(--ds-rule); color: var(--ds-text-2); }
.response_md code, .response_md pre { background: var(--ds-surface-sunk); }
.response_md code { padding: 0 var(--ds-space-1); }
.response_md pre { padding: var(--ds-space-2); white-space: pre-wrap; }
.response_md hr { border: 0; border-top: var(--ds-line) solid var(--ds-rule); }
/* Out of step with the request (or a new one on its way): the reply goes quiet, dashed. */
#response_body.is-stale .response_md, #response_body.is-stale .structured { border-style: dashed; border-color: var(--ds-rule); color: var(--ds-text-2); }
.response_stale { margin: var(--ds-space-2) 0 0; color: var(--ds-text-2); font-size: var(--ds-type-label); }
.response_empty { margin: 0; color: var(--ds-text-2); font-size: var(--ds-type-ui); }
.response_details { margin-top: var(--ds-space-2); color: var(--ds-text-2); font-size: var(--ds-type-label); }

/* Presentation: the frame fills the window, the passages and the request read across a room. */
body.mode-presentation #rag_container { padding: var(--ds-space-2) var(--ds-space-3); }
body.mode-presentation #tries { display: none; }
body.mode-presentation .passage_text, body.mode-presentation .part, body.mode-presentation .response_md { font-size: var(--ds-type-body); }
body.mode-presentation .passage_title { font-size: var(--ds-type-lede); }

/* A phone: the columns stack, the page scrolls, and every control is a 44 px target. */
body.mode-mobile { height: auto; }
body.mode-mobile #rag_container { padding: var(--ds-space-3) var(--ds-space-5); }
body.mode-mobile #columns { flex-direction: column; }
body.mode-mobile .operator, body.mode-mobile.response-on .operator { font-size: var(--ds-type-h2); }
body.mode-mobile #prompt_input { font-size: var(--ds-type-body); }
body.mode-mobile #retrieval_panel, body.mode-mobile #passages, body.mode-mobile #request_body, body.mode-mobile #response_body { overflow: visible; }
body.mode-mobile .ds-icon-button, body.mode-mobile .ds-segmented > button { min-width: var(--ds-touch); min-height: var(--ds-touch); }

@media (prefers-reduced-motion: reduce) { .passage { animation: none; } }