/* Knowledge view (item #3854, views/knowledge.js). Per-view stylesheet, the
   routed-view convention: loaded from index.html after settings.css so it
   inherits the entry's token palette. The browser itself is the portal's
   .mp-kn-* (wp-knowledge.css, reached through the already-linked
   ../workspaces/css/app.css); what lives here is the page frame (.mm-kn*)
   and the viewport-bound pane rules wp-knowledge.css keys on `#main`,
   re-declared for the component's `mm-kn-page` host inside #mm-chat.
   Tokens only, so both themes follow the app. */

.mm-knowledge {
  box-sizing: border-box; height: 100%; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; padding: 24px 36px 20px;
  font-family: var(--sans);
}

/* -- the header: title · workspace name ------------------------------------- */
.mm-kn-head { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mm-kn-title { font-size: 19px; font-weight: 700; margin: 0; }
.mm-kn-meta { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
/* The live knowledge teammate, on the right of the heading. */
.mm-kn-talk { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; white-space: normal; }
.mm-kn-talk[hidden] { display: none; }
.mm-kn-agent-status { font-size: 11px; color: var(--ok); white-space: nowrap; }
.mm-kn-agent-status.working { color: var(--warn); }
.mm-kn-agent-choice { display: flex; align-items: center; gap: 8px; }

/* -- #4238: the agents' own skills, above the browser ----------------------- */
/* A strip, not a pane: it is bounded (an agent keeps a handful of skills, not
   a corpus) and it scrolls with its own overflow so it can never push the
   browser off the page. */
.mm-kn-agentskills {
  flex: none; max-height: 30%; overflow-y: auto; margin-bottom: 14px;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px;
}
.mm-kn-agentskills-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mm-kn-agentskills-title { font-size: 14px; font-weight: 700; margin: 0; }
.mm-kn-agentskills-hint { font-size: 12px; }
.mm-kn-agentskill { padding: 6px 0; border-top: 1px solid var(--border-soft); }
.mm-kn-agentskill:first-of-type { border-top: none; }
.mm-kn-agentskill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-kn-agentskill-title { font-size: 13px; font-weight: 600; }
.mm-kn-agentskill-by { font-size: 12px; }
.mm-kn-agentskill-head .btn { margin-left: auto; }
.mm-kn-agentskill-fold > summary { font-size: 12px; color: var(--text-dim); cursor: pointer; }
.mm-kn-agentskill-body { font-size: 12.5px; padding: 4px 0 2px; }

/* -- the browser's host: the portal's app-pane mode, keyed on the host ------- */
.mm-kn-body { flex: 1; min-height: 0; }
.mm-kn-body.mm-kn-page { display: flex; flex-direction: column; overflow: hidden; }
.mm-kn-page .mp-kn { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mm-kn-page .mp-kn-layout { flex: 1; min-height: 0; align-items: stretch; }
.mm-kn-page .mp-kn-left { display: flex; flex-direction: column; min-height: 0; }
.mm-kn-page .mp-kn-listbox {
  flex: 1; min-height: 0; overflow-y: auto;
  border: 1px solid var(--border-soft); border-radius: 10px;
}
.mm-kn-page .mp-kn-editorbox { min-height: 0; overflow-y: auto; }
/* the desktop window is narrower than the portal's 1101px breakpoint more
   often than not — the two panes stay side by side here from 900px up */
@media (max-width: 899px) {
  .mm-kn-page .mp-kn-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .mm-kn-page .mp-kn-left { min-height: auto; }
  .mm-kn-page .mp-kn-listbox { max-height: 40vh; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .mm-kn-page .mp-kn-layout { grid-template-columns: minmax(300px, 5fr) minmax(320px, 6fr); }
}