/* Tenas search — terse stylesheet, prioritises legibility over chrome. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; background: #fafafa; }
header { padding: 1.2rem 1.6rem 0.4rem; border-bottom: 1px solid #ddd; }
header h1 { margin: 0; font-size: 1.4rem; font-weight: 600; }
header .sub { margin: 0.3rem 0 0.6rem; color: #555; font-size: 0.88rem; }

#qform { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.6rem; border-bottom: 1px solid #ddd; background: #fff; }
#qform input[type=text] { flex: 1; padding: 0.55rem 0.7rem; font-size: 1rem; border: 1px solid #bbb; border-radius: 4px; }
#qform button { padding: 0.55rem 1rem; font-size: 0.95rem; background: #1a4d8f; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
#qform button:hover { background: #163e72; }
#qform .views { margin-left: 0.6rem; font-size: 0.88rem; color: #555; }
#qform .views label { margin-left: 0.5rem; }

#status { padding: 0.4rem 1.6rem; font-size: 0.85rem; color: #666; min-height: 1.2rem; }

/* minmax(0, …) prevents grid items from hitting min-content width and
   blowing out their column (long PDF filenames in the list otherwise
   force the list pane wider and squeeze the graph). */
main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 0 1.6rem 2rem; align-items: start; }
main > section { min-width: 0; }
main #agent-pane { display: none; }
main.view-list   { grid-template-columns: minmax(0, 1fr); }
main.view-graph  { grid-template-columns: minmax(0, 1fr); }
main.view-agent  { grid-template-columns: minmax(0, 1fr); }
main.view-list  #graph-pane,
main.view-graph #list-pane,
main.view-agent #list-pane,
main.view-agent #graph-pane { display: none; }
main.view-agent #agent-pane { display: block; }

main h2 { font-size: 1.05rem; margin: 0.6rem 0; color: #1a4d8f; display: flex; align-items: center; gap: 0.8rem; }
.legend { font-size: 0.78rem; color: #555; font-weight: 400; display: inline-flex; align-items: center; gap: 0.4rem; }
.legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 0.2rem; vertical-align: middle; }
.legend .dot.hit { background: #d94c2b; }
.legend .dot.chunk { background: #5b8dbe; }
.legend .dot.doc { background: #444; }

/* List */
#list .result { background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; overflow: hidden; }
#list .result .title { font-weight: 600; color: #1a4d8f; overflow-wrap: anywhere; }
#list .result .title a { color: inherit; text-decoration: none; }
#list .result .title a:hover { text-decoration: underline; }
#list .result .meta { font-size: 0.78rem; color: #666; margin: 0.15rem 0 0.4rem; overflow-wrap: anywhere; }
#list .result .snippet { font-size: 0.92rem; color: #222; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
#list .result .score { float: right; font-size: 0.75rem; color: #888; }
mark.hl { background: #fff3a0; color: inherit; padding: 0.05rem 0.15rem; border-radius: 2px; font-weight: 600; }
#list .result .title mark.hl { background: #ffe580; }

/* Graph */
#graph { width: 100%; height: 560px; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; position: relative; overflow: hidden; }
#graph svg { width: 100%; height: 100%; display: block; }
#graph .node circle { stroke: #fff; stroke-width: 1.5px; cursor: pointer; }
#graph .node.hit circle { stroke: #b03617; stroke-width: 2.5px; }
#graph .node.document circle { fill: #444; }
#graph .node.chunk circle { fill: #5b8dbe; }
#graph .node.chunk.hit circle { fill: #d94c2b; }
#graph .node text { font-size: 9px; fill: #333; pointer-events: none; }
#graph .link.similar { stroke: #999; stroke-opacity: 0.4; }
#graph .link.belongs-to { stroke: #bbb; stroke-opacity: 0.7; stroke-dasharray: 2 2; }

#detail { margin-top: 0.6rem; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; min-height: 4rem; font-size: 0.9rem; }
#detail.empty { color: #999; }
#detail .heading { color: #555; font-size: 0.78rem; margin-top: 0.2rem; }

/* Pan/zoom + highlight + tooltip */
#graph svg { cursor: grab; }
#graph svg:active { cursor: grabbing; }
#graph .node.dim circle { opacity: 0.18; }
#graph .node.dim text { opacity: 0.18; }
#graph .link.dim { opacity: 0.08; }
.graph-tooltip {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  max-width: 320px;
  background: #1a1a1a;
  color: #f4f4f4;
  padding: 0.5rem 0.65rem;
  border-radius: 5px;
  font-size: 0.8rem;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.graph-tooltip .ti { margin-bottom: 0.2rem; }
.graph-tooltip .tk { color: #b9c6d4; font-size: 0.72rem; margin-bottom: 0.3rem; }
.graph-tooltip .hp { color: #b9c6d4; font-size: 0.72rem; margin-bottom: 0.25rem; }
.graph-tooltip .sn { color: #d8d8d8; }

/* Agent chat */
#qform button.aux { background: #fff; color: #1a4d8f; border: 1px solid #1a4d8f; padding: 0.55rem 0.8rem; cursor: pointer; border-radius: 4px; font-size: 0.88rem; }
#qform button.aux:hover { background: #f0f4fa; }
#chat { background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; padding: 0.6rem; min-height: 480px; }
#chat .bubble { margin-bottom: 0.9rem; padding: 0.6rem 0.85rem; border-radius: 8px; max-width: 92%; line-height: 1.45; }
#chat .bubble.user { background: #1a4d8f; color: #fff; margin-left: auto; }
#chat .bubble.assistant { background: #f6f7f9; color: #1a1a1a; }
#chat .bubble .label { display: block; font-size: 0.7rem; opacity: 0.7; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
#chat .bubble .prose { white-space: pre-wrap; word-wrap: break-word; }
#chat .bubble .prose strong { font-weight: 600; }
#chat .bubble.assistant .tool-banner { font-size: 0.78rem; color: #666; font-style: italic; margin-top: 0.35rem; }
#chat .bubble.assistant .sources { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #e2e2e2; font-size: 0.8rem; }
#chat .bubble.assistant .sources ol { margin: 0; padding-left: 1.3rem; }
#chat .bubble.assistant .sources li { margin-bottom: 0.25rem; }
#chat .bubble.assistant .sources a { color: #1a4d8f; text-decoration: none; }
#chat .bubble.assistant .sources a:hover { text-decoration: underline; }
#chat .bubble.assistant .sources .heading { color: #555; font-style: italic; }
#chat .bubble.assistant .usage { font-size: 0.7rem; color: #888; margin-top: 0.45rem; font-family: monospace; }
#chat .cite { display: inline-block; background: #1a4d8f; color: #fff; font-size: 0.72rem; padding: 0.05rem 0.35rem; border-radius: 3px; margin: 0 1px; cursor: pointer; font-weight: 600; }
#chat .cite:hover { background: #163e72; }
#chat .empty { color: #888; font-style: italic; padding: 1rem; }