/* 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; 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; }
/* #3987: "Talk it through" — the Knowledge Guide's door, pushed to the
   right of the header; the head aligns on the baseline, the button on
   its own centre */
.mm-kn-talk { margin-left: auto; align-self: center; }

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