/* Mycological portfolio — scoped styles. All colours fall back to the host
   app's theme tokens (brianscv style.css) but ship sane defaults so the page
   also works standalone. Layer colours live here as CSS variables and are the
   single source of truth; mycology.js reads them with getComputedStyle. */

:root {
  --myco-msc:        #2a9d8f;  /* MSc · UBC · insect-pathogenic */
  --myco-phd:        #e08a1e;  /* PhD · Cornell · plant-pathogen enzymes */
  --myco-carlsberg:  #b5563f;  /* Carlsberg · koji fermentation */
  --myco-neutral:    #8a8f98;  /* internal / mixed clades */
  --myco-novel:      #e0a100;  /* novel / deposited badge */
  --myco-match:      var(--color-accent, #d4820a); /* recommender hit ring */
}
html.dark {
  --myco-msc:        #3ab7a7;
  --myco-phd:        #f2a63f;
  --myco-carlsberg:  #d0715a;
  --myco-neutral:    #9aa0a8;
  --myco-novel:      #ffd23f;
  --myco-match:      var(--color-accent, #09b5aa);
}

.myco-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: var(--text-primary, #1a1814);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- VSCode-style shell: topbar / [left | main | right] / bottom ---------- */
.myco-topbar {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 12px; border-bottom: 1px solid var(--border-color, #e0dbd2);
  background: var(--panel-bg, #fff); z-index: 8;
}
.myco-brand { font-weight: 600; font-size: 14px; white-space: nowrap; }
.myco-topbar .myco-viewtoggle { margin-top: 0; }
.myco-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.myco-topbtn {
  font: inherit; font-size: 12px; cursor: pointer; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border-color, #e0dbd2); background: var(--panel-bg, #fff);
  color: var(--text-secondary, #6b6459); white-space: nowrap;
}
.myco-topbtn:hover { color: var(--text-primary, #1a1814); border-color: var(--color-accent, #d4820a); }
.myco-panetoggle.active { background: var(--color-accent, #d4820a); border-color: var(--color-accent, #d4820a); color: #fff; }

.myco-body { flex: 1; display: flex; min-height: 0; }
/* Center column stacks the view canvas over the chat, so the chat is only as
   wide as the main area — the inspector runs full height to its right. */
.myco-center { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.myco-main { flex: 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#myco-canvas { display: block; width: 100%; height: 100%; }

.myco-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--panel-bg, #fff); }
.myco-left  { width: 240px; border-right: 1px solid var(--border-color, #e0dbd2); }
/* Two comparison windows share the right ~1/3 of the screen, full height. */
.myco-right { width: 34vw; min-width: 340px; max-width: 620px; border-left: 1px solid var(--border-color, #e0dbd2); }
.myco-bottom { flex: none; height: 220px; border-top: 1px solid var(--border-color, #e0dbd2); }
.myco-pane.collapsed { display: none; }
.myco-pane-head {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary, #6b6459); border-bottom: 1px solid var(--border-color, #e0dbd2);
}
.myco-pane-head > span:first-child { flex: 1; }
.myco-pane-x {
  flex: none; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  border: none; background: none; color: var(--text-secondary, #6b6459); padding: 0 4px;
}
.myco-pane-x:hover { color: var(--text-primary, #1a1814); }
.myco-pane-body { flex: 1; overflow: auto; padding: 12px; }

.myco-split { flex: none; background: transparent; transition: background 0.1s; }
.myco-split-v { width: 6px; cursor: col-resize; }
.myco-split-h { height: 6px; cursor: row-resize; }
.myco-split:hover, .myco-split.dragging { background: var(--color-accent, #d4820a); opacity: 0.5; }
.myco-split.hidden { display: none; }

/* Panels re-homed into panes: strip the old floating/absolute styling. */
.myco-pane-body .myco-legend,
.myco-pane-body .myco-net-legend,
.myco-pane-body .myco-detail,
.myco-insp-col .myco-detail,
.myco-pane-body .myco-ai,
.myco-pane-body .myco-ai-result {
  position: static; inset: auto; width: auto; max-width: none; max-height: none;
  box-shadow: none; border: none; border-radius: 0; padding: 0; z-index: auto;
  overflow: visible; background: none; margin: 0 0 12px;
}
.myco-inspector-hint, .myco-cmp-hint { font-size: 12px; line-height: 1.5; color: var(--text-secondary, #6b6459); }
#myco-detail:not([hidden]) ~ .myco-inspector-hint { display: none; }
#myco-detail2:not([hidden]) ~ .myco-cmp-hint { display: none; }
/* inspector: keyword search over two side-by-side windows (Comparison | Reference) */
.myco-right .myco-kw { flex: none; padding: 10px 10px 0; margin-bottom: 0; }
.myco-kw input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--border-color, #e0dbd2);
  background: var(--input-bg, #f9f7f4); color: var(--text-primary, #1a1814);
}
.myco-kw input:focus { outline: 2px solid var(--color-accent, #d4820a); outline-offset: 1px; }
/* The two windows split the pane; each scrolls on its own. */
.myco-insp-cols { flex: 1; display: flex; min-height: 0; }
.myco-insp-col {
  flex: 1 1 0; min-width: 0; overflow: auto; padding: 4px 10px 12px;
  display: flex; flex-direction: column;
}
.myco-cmp-col { border-right: 1px solid var(--border-color, #e0dbd2); }
.myco-insp-label {
  position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 8px 0 5px;
  background: var(--panel-bg, #fff); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #6b6459);
}
.myco-insp-sub { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.myco-cmp-label { border-top: none; }
.myco-detail-cmp { font-size: 12.5px; }
.myco-hitlist { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.myco-hit-tax { color: var(--text-secondary, #6b6459); font-size: 11px; }
/* network hover layer — separate from the selection (.hi/.dim), so hovering never clears it */
.net-node.hoverlit { opacity: 1; stroke: var(--color-accent, #d4820a); stroke-width: 2px; }
.net-link.hoveractive { stroke: var(--color-accent, #d4820a); stroke-opacity: 0.9; }
/* shared selection: table checkboxes + the focused strain in the species card */
.myco-selcol { width: 34px; }
.myco-rowsel { cursor: pointer; }
#myco-table tbody tr.sel { background: var(--color-nav-active, #f3efe8); }
.myco-strain-card.focus { border-left: 3px solid var(--color-accent, #d4820a); padding-left: 9px; }

#myco-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#myco-canvas:active { cursor: grabbing; }

/* ---- Panels ---- */
.myco-panel {
  background: var(--panel-bg, #ffffff);
  border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  color: var(--text-primary, #1a1814);
  box-sizing: border-box;
}

.myco-header {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: 330px;
  padding: 12px 16px;
  z-index: 5;
}
.myco-header h1 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
}
.myco-header p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary, #6b6459);
}

/* ---- View toggle (tree / sunburst) ---- */
/* Wraps within the header so the six buttons never overflow the card on narrow
   viewports (the header itself is width-capped). */
.myco-viewtoggle {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 10px;
  padding: 2px;
  border-radius: 8px;
  background: var(--input-bg, #f9f7f4);
  border: 1px solid var(--border-color, #e0dbd2);
}
.myco-viewbtn {
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #6b6459);
  cursor: pointer;
}
.myco-viewbtn:hover { color: var(--text-primary, #1a1814); }
.myco-viewbtn.active {
  background: var(--button-bg, var(--color-accent, #d4820a));
  color: var(--button-text-color, #fff);
}

/* ---- Level navigator (kingdom -> strain) ---- */
/* Same segmented idiom as the view toggle: the lit rung is the rank the canvas
   is framed at, the arrows step one rank broader / finer along that lineage.
   Ranks a lineage doesn't have are disabled rather than hidden, so the ladder
   never shifts under the pointer. */
.myco-levelnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--input-bg, #f9f7f4);
  border: 1px solid var(--border-color, #e0dbd2);
}
.myco-levelbtn,
.myco-levelstep {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #6b6459);
  cursor: pointer;
}
.myco-levelstep { padding: 5px 6px; font-size: 10px; }
.myco-levelbtn:hover:not(:disabled),
.myco-levelstep:hover:not(:disabled) { color: var(--text-primary, #1a1814); }
.myco-levelbtn.active {
  background: var(--button-bg, var(--color-accent, #d4820a));
  color: var(--button-text-color, #fff);
}
.myco-levelbtn:disabled,
.myco-levelstep:disabled { opacity: 0.32; cursor: default; }

/* Small note over the canvas — currently the linear tree's "too dense to letter
   every tip" hint. Non-interactive so it never eats a click meant for the tree. */
.myco-canvas-hint {
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 5;
  pointer-events: none;
  max-width: min(420px, 70%);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary, #6b6459);
  background: color-mix(in srgb, var(--panel-bg, #fff) 82%, transparent);
  border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 6px;
  padding: 4px 8px;
}
.myco-canvas-hint[hidden] { display: none; }

/* ---- Recommender box ---- */
.myco-ai {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  z-index: 6;
}
.myco-ai-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6b6459);
  margin-bottom: 6px;
}
.myco-ai-row { display: flex; gap: 8px; }
.myco-ai-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e0dbd2);
  background: var(--input-bg, #f9f7f4);
  color: var(--text-primary, #1a1814);
}
.myco-ai-row input:focus {
  outline: 2px solid var(--color-accent, #d4820a);
  outline-offset: 1px;
}
.myco-ai-row button,
.myco-reset {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--button-border, var(--color-accent, #d4820a));
  background: var(--button-bg, var(--color-accent, #d4820a));
  color: var(--button-text-color, #fff);
  cursor: pointer;
  white-space: nowrap;
}
.myco-ai-row button:hover,
.myco-reset:hover { background: var(--button-hover-bg, #b86d08); }
.myco-ai-row button:disabled { opacity: 0.6; cursor: progress; }

.myco-ai-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.myco-eg {
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color, #e0dbd2);
  background: transparent;
  color: var(--text-secondary, #6b6459);
  cursor: pointer;
}
.myco-eg:hover {
  color: var(--text-primary, #1a1814);
  border-color: var(--color-accent, #d4820a);
}

/* ---- Legend ---- */
.myco-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 10px 12px;
  font-size: 12px;
  z-index: 5;
}
.myco-legend h4 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6b6459);
  font-weight: 600;
}
.myco-legend-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.myco-legend-row[data-layer] {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 5px;
  margin: 1px -5px;
  transition: background 0.12s ease;
}
.myco-legend-row[data-layer]:hover { background: var(--color-nav-active, #ede9e2); }
.myco-legend-row[data-layer]:focus-visible {
  outline: 2px solid var(--color-accent, #d4820a);
  outline-offset: 1px;
}
.myco-legend-row.active {
  background: var(--color-nav-active, #ede9e2);
  font-weight: 600;
}
.myco-legend-hint {
  color: var(--text-secondary, #6b6459);
  font-size: 11px;
  margin-top: 6px;
}
.myco-layer-title { display: flex; align-items: center; gap: 8px; }
.myco-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.myco-swatch.novel {
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--myco-novel);
}
/* Data-availability overlay: a neutral toggle swatch (distinct from the coloured
   phase swatches), a right-aligned species count, and a spaced section header. */
.myco-swatch.overlay {
  border-radius: 3px;
  background: var(--color-nav-active, #ede9e2);
  border: 1px solid var(--border-color, #e0dbd2);
}
.myco-legend .myco-overlay-head { margin-top: 12px; }
.myco-cat-count {
  margin-left: auto;
  padding-left: 10px;
  font-size: 10px;
  color: var(--text-secondary, #6b6459);
  font-variant-numeric: tabular-nums;
}

/* ---- Detail + recommender-result panels ---- */
.myco-detail {
  position: absolute;
  top: 210px;
  right: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding: 16px 18px;
  z-index: 7;
}
.myco-ai-result {
  position: absolute;
  top: 150px;
  left: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 42vh;
  overflow-y: auto;
  padding: 14px 16px;
  z-index: 7;
}
.myco-close {
  float: right;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary, #6b6459);
}
.myco-detail h2, .myco-ai-result h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 600;
}
.myco-detail .sci { font-style: italic; }
.myco-lineage {
  font-size: 11.5px;
  color: var(--text-secondary, #6b6459);
  margin: 2px 0 10px;
  line-height: 1.4;
}
/* The name the papers used, where taxonomy has since moved on. Set apart with a
   rule rather than a colour so it survives both themes and reads as a footnote. */
.myco-published-as {
  font-size: 11.5px;
  color: var(--text-secondary, #6b6459);
  border-left: 2px solid var(--border-color, #e0dbd2);
  padding-left: 8px;
  margin: 0 0 10px;
  line-height: 1.45;
}
.myco-published-as i { font-style: italic; }

/* The curator's prose on the species card: the headline finding, then the notes
   (provenance, caveats, identity calls). Everything the chat can quote has to be
   readable here too, or a cited answer cannot be checked. */
.myco-keyfinding {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 6px;
  color: var(--text-primary, #1a1814);
}
.myco-notes {
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0 0 10px;
  padding-left: 8px;
  border-left: 2px solid var(--border-color, #e0dbd2);
  color: var(--text-secondary, #6b6459);
}
.myco-notes span { display: block; }
.myco-notes span + span { margin-top: 4px; }
.myco-notes-lead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Says plainly when the page is showing an uncurated build. */

/* ---- isolate photographs ------------------------------------------------ */
/* A row of thumbnails on the species card and inside each isolate card. They
   wrap, so a card with eight plates stays as tall as the text around it. */
.myco-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.myco-thumb {
  width: 72px; height: 72px; padding: 0; flex: none; cursor: zoom-in;
  border: 1px solid var(--border-color, #e0dbd2); border-radius: 6px;
  background: var(--input-bg, #f9f7f4); overflow: hidden; line-height: 0;
}
.myco-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.myco-thumb:hover { border-color: var(--color-accent, #d4820a); }
.myco-thumb:focus-visible { outline: 2px solid var(--color-accent, #d4820a); outline-offset: 1px; }

.myco-lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 32px;
  background: rgba(0, 0, 0, 0.78); cursor: zoom-out;
}
.myco-lightbox[hidden] { display: none; }
.myco-lightbox-fig { margin: 0; max-width: 100%; max-height: 100%; cursor: zoom-in; text-align: center; }
.myco-lightbox.full .myco-lightbox-fig { cursor: zoom-out; }
/* Scanned plates run from ~170px to ~1350px wide. Cap the big ones to the
   viewport and give the small ones a floor, so a 172px scan is actually legible
   instead of sitting lost in the middle of the backdrop. */
.myco-lightbox-fig img {
  min-width: min(360px, 85vw);
  max-width: min(1200px, 92vw); max-height: calc(100vh - 120px);
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #fff;
}
.myco-lightbox-fig figcaption {
  margin-top: 10px; font-size: 12.5px; color: #f4f1ea;
}
.myco-lightbox-dim { opacity: 0.6; }

/* "Fill window": scale the plate to the whole viewport, upscaling a small scan
   rather than leaving it postage-stamp sized. object-fit keeps the aspect ratio,
   and the caption floats over the bottom so it costs no layout room. */
.myco-lightbox.full { padding: 0; }
.myco-lightbox.full .myco-lightbox-fig { width: 100%; height: 100%; position: relative; }
.myco-lightbox.full .myco-lightbox-fig img {
  width: 100%; height: 100%; min-width: 0; max-width: none; max-height: none;
  object-fit: contain; border-radius: 0; box-shadow: none; background: none;
}
.myco-lightbox.full .myco-lightbox-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
.myco-lightbox-zoom {
  position: absolute; top: 14px; right: 68px; z-index: 1;
  font: inherit; font-size: 12px; cursor: pointer; padding: 0 14px; height: 38px;
  border-radius: 19px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.4); color: #fff;
}
.myco-lightbox-zoom:hover { background: rgba(0, 0, 0, 0.7); }
.myco-lightbox-x {
  position: absolute; top: 14px; right: 18px; z-index: 1;
  font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.4); color: #fff;
}
.myco-lightbox-x:hover { background: rgba(0, 0, 0, 0.7); }

/* ---- inferred clade phylogeny ------------------------------------------- */
.myco-phylo {
  border-top: 1px solid var(--border-color, #e0dbd2);
  margin-top: 12px;
  padding-top: 10px;
}
.myco-subhead {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, #6b6459);
}
.myco-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
}
.myco-methodbtn {
  font: inherit;
  font-size: 10.5px;
  padding: 3px 7px;
  border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary, #6b6459);
  cursor: pointer;
}
.myco-methodbtn:hover { border-color: var(--text-secondary, #6b6459); }
.myco-methodbtn.active {
  background: var(--text-primary, #2b2721);
  border-color: var(--text-primary, #2b2721);
  color: var(--bg-primary, #fdfcfa);
}
/* The tree scrolls inside its own box rather than pushing the method buttons and
   the model line off the panel — Hypocreales is 38 taxa (~650px), taller than the
   whole panel, and the toggle is useless if you have to scroll away from it. */
.myco-phylo-canvas {
  overflow: auto;
  max-height: 300px;
  margin: 4px 0 6px;
  border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 6px;
  padding: 4px;
}
.myco-phylo-canvas svg { display: block; }
.myco-phylo-loading { font-size: 11.5px; color: var(--text-secondary, #6b6459); }
.myco-phylo-link {
  fill: none;
  stroke: var(--border-color, #cfc8bd);
  stroke-width: 1.2;
}
.myco-phylo-leaf {
  font-size: 9.5px;
  font-style: italic;
  fill: var(--text-primary, #2b2721);
}
.myco-phylo-support {
  font-size: 8px;
  fill: var(--text-secondary, #8a8f98);
}
.myco-phylo-model { margin-top: 2px; }

.myco-strain-card {
  border-top: 1px solid var(--border-color, #e0dbd2);
  padding-top: 10px;
  margin-top: 10px;
}
.myco-strain-card h3 {
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 600;
}
.myco-strain-meta {
  font-size: 11.5px;
  color: var(--text-secondary, #6b6459);
  margin-bottom: 6px;
}
.myco-measure {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 4px 0;
  padding-left: 10px;
  border-left: 2px solid var(--border-color, #e0dbd2);
}
/* chips */
.myco-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.myco-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-nav-active, #ede9e2);
  color: var(--text-secondary, #6b6459);
}
.myco-chip.layer { color: #fff; }
.myco-chip.novel {
  background: transparent;
  border: 1px solid var(--myco-novel);
  color: var(--myco-novel);
  font-weight: 600;
}

/* recommender result list */
.myco-hit {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-primary, #1a1814);
}
.myco-hit:hover { background: var(--color-nav-active, #ede9e2); }
.myco-hit .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.myco-engine {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6b6459);
  margin-bottom: 8px;
}
.myco-rationale { font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }

.myco-reset {
  position: absolute;
  bottom: 74px;                 /* sit above the collapsed chat fab (bottom-right) */
  right: 16px;
  z-index: 5;
}

/* ---- SVG marks ---- */
.myco-link { fill: none; stroke-width: 1.6px; stroke-opacity: 0.55; }
.myco-link.dim { stroke-opacity: 0.07; }
.myco-link.hi { stroke-opacity: 0.95; stroke-width: 2.2px; }

.myco-node circle.body {
  stroke: var(--panel-bg, #fff);
  stroke-width: 1.5px;
}
.myco-node { cursor: pointer; }
.myco-node.dim { opacity: 0.22; }
.myco-node.hi { opacity: 1; }
.myco-node circle.match-ring {
  fill: none;
  stroke: var(--myco-match);
  stroke-width: 2.5px;
}
.myco-node text.myco-leaf-label {
  font-size: 12px;
  font-style: italic;
  fill: var(--text-primary, #1a1814);
  dominant-baseline: middle;
}
.myco-node text.myco-internal-label {
  font-size: 10px;
  fill: var(--text-secondary, #6b6459);
  dominant-baseline: middle;
}
/* An isolate id under an opened species: upright (it is a code, not a binomial)
   and quieter than the species name it hangs off. */
.myco-node text.myco-strain-label {
  font-size: 10px;
  font-style: normal;
  fill: var(--text-secondary, #6b6459);
  dominant-baseline: middle;
}
.myco-node text.myco-badge {
  font-size: 13px;
  fill: var(--myco-novel);
  dominant-baseline: middle;
  text-anchor: middle;
}

/* ---- Sunburst marks ---- */
.sb-arc {
  cursor: pointer;
  stroke: none;
  transition: opacity 0.15s ease;
}
.sb-arc.dim { opacity: 0.22; }
.sb-arc.hi { opacity: 1; }
.sb-arc.match { stroke: var(--myco-match); stroke-width: 2.5px; }

.sb-labels text {
  font-size: 10.5px;
  fill: var(--text-primary, #1a1814);
  paint-order: stroke;
  stroke: var(--panel-bg, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.sb-labels text.sb-leaf-label { font-style: italic; }
/* Isolate ids: upright codes, quieter than the binomial they sit under. */
.sb-labels text.sb-strain-label { font-style: normal; font-size: 9.5px; }

.sb-center {
  fill: var(--panel-bg, #fff);
  fill-opacity: 0.35;
  cursor: pointer;
}
.sb-center:hover { fill-opacity: 0.6; }
.sb-center-label {
  fill: var(--text-secondary, #6b6459);
  font-style: italic;
  pointer-events: none;
}

/* ---- Circle-packing marks ---- */
.pk-node, .pk-leaf, .pk-strain {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.pk-strain { stroke: var(--panel-bg, #fff); stroke-width: 0.5px; }
.pk-strain.dim { opacity: 0.22; }
.pk-strain.match { stroke: var(--myco-match); stroke-width: 2.5px; }
.pk-node { stroke: var(--border-color, #cfc8bd); stroke-width: 1px; }
.pk-leaf { stroke: var(--panel-bg, #fff); stroke-width: 0.5px; }
.pk-node.dim, .pk-leaf.dim { opacity: 0.22; }
.pk-node.hi, .pk-leaf.hi { opacity: 1; }
.pk-node.match, .pk-leaf.match {
  stroke: var(--myco-match);
  stroke-width: 2.5px;
}

.pk-labels text {
  font-size: 10.5px;
  fill: var(--text-primary, #1a1814);
  paint-order: stroke;
  stroke: var(--panel-bg, #fff);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.pk-labels text.pk-leaf-label { font-style: italic; }
.pk-labels text.pk-strain-label { font-style: normal; font-size: 9.5px; }
.pk-labels text.pk-internal-label { font-weight: 600; }

/* ---- Radial "tree of life" marks ---- */
.radial-link {
  fill: none;
  stroke-width: 1.5px;
  stroke-opacity: 0.55;
}
.radial-link.dim { stroke-opacity: 0.06; }
.radial-link.hi { stroke-opacity: 0.95; stroke-width: 2px; }
/* Hover path trace — sits on top of, and independent of, any locked selection. */
.radial-link.active { stroke-opacity: 0.95; stroke-width: 2px; }

.radial-node { cursor: pointer; }
.radial-node circle.body {
  stroke: var(--panel-bg, #fff);
  stroke-width: 1.2px;
}
.radial-node.dim { opacity: 0.22; }
.radial-node.hi { opacity: 1; }
.radial-node.match circle.body {
  stroke: var(--myco-match);
  stroke-width: 2.5px;
}

.radial-leaf-label {
  font-size: 9.5px;
  font-style: italic;
  fill: var(--text-primary, #1a1814);
  cursor: pointer;
}
.radial-leaf-label.dim { opacity: 0.25; }
/* An isolate on the ring: same size, upright, and secondary — it reads as a code
   hanging off the species rather than another binomial. */
.radial-strain-label {
  font-size: 9.5px;
  fill: var(--text-secondary, #6b6459);
  cursor: pointer;
}
.radial-strain-label.dim { opacity: 0.25; }
.radial-strain-label.match { fill: var(--myco-match); font-weight: 700; }
.radial-leaf-label.hi { opacity: 1; font-style: italic; }
.radial-leaf-label.active { font-weight: 700; }
.radial-leaf-label.match { fill: var(--myco-match); font-weight: 700; }

/* Clade name floated over a hovered internal node. */
.radial-hover-label {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--text-primary, #1a1814);
  paint-order: stroke;
  stroke: var(--panel-bg, #fff);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---- Hover emphasis (tree + radial) ----
   Light up the hovered node's mark and label and trace its lineage to the root,
   independent of any locked selection. The hovered node group is raised in the
   DOM (JS) and its label given a paper halo, so the name reads above the
   overlapping neighbours in a crowded region. */
.myco-link.active { stroke-opacity: 0.9; stroke-width: 2.2px; }
/* Larger transparent hit disc so the small marks are easy to hover/click. */
.myco-node circle.hit, .radial-node circle.hit { cursor: pointer; }
.myco-node.hover circle.body { stroke: var(--color-accent, #d4820a); stroke-width: 3px; }
.radial-node.hover circle.body { stroke: var(--color-accent, #d4820a); stroke-width: 3px; }

/* Permanent internal clade labels in the radial view (shown when a focus makes
   room). Muted, bold, and haloed so they sit legibly over the spokes. */
.radial-internal-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-secondary, #6b6459);
  paint-order: stroke;
  stroke: var(--panel-bg, #fff);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.radial-focus-title {
  font-size: 13px;
  font-weight: 700;
  fill: var(--text-primary, #1a1814);
  paint-order: stroke;
  stroke: var(--panel-bg, #fff);
  stroke-width: 4.5px;
  stroke-linejoin: round;
}

/* ---- Network view (biochemical similarity graph) ---------------------- */
.net-node { stroke: var(--panel-bg, #fff); stroke-width: 1px; cursor: pointer; }
.net-node.nopheno { stroke-dasharray: 2 1.5; }
.net-node.hi { stroke: var(--color-accent, #d4820a); stroke-width: 2px; }
.net-node.dim { opacity: 0.15; }
/* the node whose card is being previewed on hover while a selection is pinned */
.net-node.preview { opacity: 1; stroke: var(--color-accent, #d4820a); stroke-width: 2.5px; }
.net-link { stroke: var(--text-secondary, #6b6459); }
.net-link.pheno { stroke-opacity: 0.35; }
.net-link.tax { stroke-opacity: 0.45; stroke-dasharray: 2 3; }
.net-link.active { stroke: var(--color-accent, #d4820a); stroke-opacity: 0.95; }
.net-link.dim { stroke-opacity: 0.04; }
/* clickable cluster hulls (behind the nodes) */
.net-hull {
  fill-opacity: 0.07; stroke-opacity: 0.35; stroke-width: 1.5px;
  transition: fill-opacity 0.15s, stroke-opacity 0.15s;
}
.net-hull:hover { fill-opacity: 0.14; stroke-opacity: 0.6; }
.net-hull.sel { fill-opacity: 0.16; stroke-opacity: 0.85; stroke-width: 2px; }
.net-hull.dim { fill-opacity: 0.02; stroke-opacity: 0.1; }
.net-hover-label {
  font-size: 12px; font-style: italic; font-weight: 600;
  fill: var(--text-primary, #1a1814);
  paint-order: stroke; stroke: var(--panel-bg, #fff); stroke-width: 3.5px; stroke-linejoin: round;
}
/* Fixed width so the hint wraps instead of stretching the panel very wide. */
.myco-net-legend { width: 250px; max-width: calc(100vw - 32px); max-height: 66vh; overflow-y: auto; }
.myco-net-cbs { display: flex; gap: 4px; margin: 2px 0 6px; }
.myco-net-cb {
  flex: 1; padding: 3px 6px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 11.5px;
  border: 1px solid var(--border-color, #e0dbd2);
  background: var(--panel-bg, #fff); color: var(--text-primary, #1a1814);
}
.myco-net-cb:hover { background: var(--color-nav-active, #f3efe8); }
.myco-net-cb.active { background: var(--color-accent, #d4820a); border-color: var(--color-accent, #d4820a); color: #fff; }
.myco-net-dims { margin-top: -2px; }
/* Compact cluster legend: small clickable chips that wrap, not one row each. */
.myco-net-clusters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 2px; }
.myco-cluster-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font: inherit; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-color, #e0dbd2); border-radius: 999px;
  background: var(--panel-bg, #fff); color: var(--text-primary, #1a1814); cursor: pointer;
}
.myco-cluster-chip .myco-swatch { width: 9px; height: 9px; }
.myco-cluster-chip:hover { border-color: var(--color-accent, #d4820a); }
.myco-cluster-chip.active { background: var(--color-accent, #d4820a); border-color: var(--color-accent, #d4820a); color: #fff; }
.myco-cluster-null {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary, #6b6459); margin-left: 2px;
}
.myco-net-species { font-size: 12px; line-height: 1.5; color: var(--text-secondary, #6b6459); }
/* auto-generated "what stands out" highlight for an isolate */
.myco-blurb {
  margin: 8px 0 2px; padding: 7px 10px; font-size: 12.5px; line-height: 1.45;
  border-left: 3px solid var(--color-accent, #d4820a);
  background: var(--color-nav-active, #f3efe8); border-radius: 0 6px 6px 0;
  color: var(--text-primary, #1a1814);
}
/* activity profile bars in the isolate panel */
.myco-net-subhead {
  margin: 10px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary, #6b6459);
}
.myco-bar-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 11px; }
.myco-bar-lab { width: 30px; flex: none; color: var(--text-secondary, #6b6459); }
.myco-bar { position: relative; flex: 1; height: 8px; border-radius: 4px; overflow: hidden; background: var(--color-nav-active, #efeae2); }
.myco-bar-fill { display: block; height: 100%; border-radius: 4px; }
/* faint tick marking x1 (the substrate mean) so a bar reads above/below average */
.myco-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--mean, 33%);
  width: 1px; background: var(--text-primary, #1a1814); opacity: 0.45;
}
.myco-bar-val { width: 34px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary, #6b6459); }
.myco-node.hover text.myco-leaf-label,
.myco-node.hover text.myco-internal-label,
.radial-leaf-label.hover {
  fill: var(--color-accent, #d4820a);
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--panel-bg, #fff);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}

/* ---- Mobile ---- */
/* ---- Table view (sortable dataframe + curation surface) ---------------- */
.myco-table-view {
  position: absolute;
  inset: 0;                           /* fills the main pane */
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg, #ffffff);
  overflow: hidden;
  color: var(--text-primary, #1a1814);
}

/* ---- Heatmap view (clustered species × substrate matrix) --------------- */
.myco-heatmap-view {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg, #fff);
  overflow: hidden;
  color: var(--text-primary, #1a1814);
}
.myco-hm-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 9px 14px; border-bottom: 1px solid var(--border-color, #e0dbd2);
}
.myco-hm-title { font-size: 13px; font-weight: 600; }
.myco-hm-sub { font-weight: 400; font-size: 11.5px; color: var(--text-secondary, #6b6459); margin-left: 6px; }
.myco-hm-cbs { display: flex; gap: 4px; }
.myco-hm-cbs .myco-net-cb { flex: 0 0 auto; }
.myco-hm-legend { margin-left: auto; min-width: 170px; }
.myco-hm-cap { font-size: 10.5px; color: var(--text-secondary, #6b6459); text-align: center; margin-bottom: 3px; }
.myco-hm-grad { height: 11px; border-radius: 5px; border: 1px solid var(--border-color, #e0dbd2); }
.myco-hm-ticks { display: flex; justify-content: space-between; margin-top: 2px; font-size: 10px; color: var(--text-secondary, #6b6459); font-variant-numeric: tabular-nums; }
.myco-hm-headwrap { overflow: hidden; flex: none; }
.myco-hm-bodywrap { flex: 1; overflow: auto; }
.hm-dendro { stroke: var(--text-secondary, #6b6459); stroke-opacity: 0.5; stroke-width: 0.7px; fill: none; }
.hm-cell { cursor: pointer; shape-rendering: crispEdges; }
.hm-cell.cross { stroke: var(--text-primary, #1a1814); stroke-width: 1px; }
.hm-collab { font-size: 11px; font-weight: 600; fill: var(--text-secondary, #6b6459); cursor: pointer; }
.hm-collab.hi { fill: var(--color-accent, #d4820a); }
.hm-rowlab { font-size: 10px; font-style: italic; fill: var(--text-primary, #1a1814); cursor: pointer; }
.hm-rowlab.hi { fill: var(--color-accent, #d4820a); }
.hm-rowlab.sel { font-weight: 700; fill: var(--color-accent, #d4820a); }
.myco-hm-tip {
  position: absolute; pointer-events: none; z-index: 8;
  padding: 5px 8px; font-size: 11.5px; line-height: 1.35;
  background: var(--panel-bg, #fff); border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); max-width: 240px;
}
.myco-hm-code { font-size: 12px; color: var(--text-secondary, #6b6459); font-weight: 400; }
.myco-sub-sp { flex: 1; font-size: 12px; }
.myco-blurb-id { color: var(--text-secondary, #6b6459); font-style: normal; font-size: 11px; }
.myco-table-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color, #e0dbd2);
  font-size: 13px;
}
.myco-table-bar input[type="text"] {
  flex: 1 1 220px;
  min-width: 150px;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 8px;
  background: var(--input-bg, var(--panel-bg, #fff));
  color: inherit;
  font: inherit;
}
.myco-table-bar select {
  padding: 6px 8px;
  border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 8px;
  background: var(--input-bg, var(--panel-bg, #fff));
  color: inherit;
  font: inherit;
}
.myco-table-count { color: var(--text-secondary, #6b6459); font-variant-numeric: tabular-nums; }
.myco-table-edit { margin-left: auto; color: var(--text-secondary, #6b6459); }
.myco-table-edit.ro { font-style: italic; }
.myco-linkbtn {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-accent, #d4820a); text-decoration: underline;
}
.myco-table-scroll { flex: 1; overflow: auto; }
.myco-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.myco-grid thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-bg, #fff);
  border-bottom: 2px solid var(--border-color, #e0dbd2);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--text-secondary, #6b6459);
}
.myco-grid thead th:hover { color: var(--text-primary, #1a1814); }
.myco-grid thead th.s-r { text-align: right; }
.myco-grid thead th.s-c { text-align: center; }
.myco-grid tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color, #ece8e1);
  vertical-align: middle;
}
.myco-grid tbody tr { cursor: pointer; }
.myco-grid tbody tr:hover { background: var(--color-nav-active, #f3efe8); }
.myco-grid tbody tr:focus-visible { outline: 2px solid var(--color-accent, #d4820a); outline-offset: -2px; }
.myco-grid td.sci { font-style: italic; font-weight: 600; }
.myco-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.myco-grid td.ctr { text-align: center; }
.myco-grid td.nowrap { white-space: nowrap; }
.myco-grid td.note { color: var(--text-secondary, #6b6459); max-width: 220px; }
.myco-grid td.phases .myco-swatch { display: inline-block; margin-right: 2px; vertical-align: middle; }
.myco-grid td.empty { text-align: center; padding: 24px; font-style: italic; color: var(--text-secondary, #6b6459); }
.myco-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 2px;
  background: transparent;
  border: 1px solid var(--border-color, #d9d3c8);
}
.myco-dot.on { background: var(--color-accent, #d4820a); border-color: var(--color-accent, #d4820a); }

/* status badges — shared by the table and the row editor */
.myco-status {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.myco-status.draft   { background: rgba(212, 130, 10, 0.15); color: #a5620a; }
.myco-status.curated { background: rgba(45, 125, 70, 0.16);  color: #2d7d46; }
.myco-status.stale   { background: rgba(190, 55, 45, 0.16);  color: #be372d; }

/* row editor — curation controls in the shared detail panel */
.myco-curate-head { margin-bottom: 6px; }
.myco-curate-warn {
  margin: 8px 0; padding: 6px 10px; border-radius: 8px;
  background: rgba(190, 55, 45, 0.10); color: #be372d; font-size: 12px;
}
.myco-open-species { margin: 8px 0; }
.myco-curate { margin-top: 12px; border-top: 1px solid var(--border-color, #e0dbd2); padding-top: 10px; }
.myco-curate-label {
  display: block; margin-bottom: 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary, #6b6459);
}
.myco-curate textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--border-color, #e0dbd2); border-radius: 8px;
  padding: 6px 8px; font: inherit; color: inherit;
  background: var(--input-bg, var(--panel-bg, #fff));
}
.myco-curate-actions { display: flex; gap: 8px; margin-top: 8px; }
.myco-btn {
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid var(--border-color, #e0dbd2);
  background: var(--panel-bg, #fff); color: var(--text-primary, #1a1814);
}
.myco-btn:hover { background: var(--color-nav-active, #f3efe8); }
.myco-btn.primary { background: var(--color-accent, #d4820a); border-color: var(--color-accent, #d4820a); color: #fff; }
.myco-btn[disabled] { opacity: 0.5; cursor: default; }
.myco-curate-msg { margin-top: 6px; font-size: 12px; color: var(--text-secondary, #6b6459); }
.myco-curate-msg.err { color: #be372d; }

/* ---- RAG chat dock (persists across all views, collapsible) ------------ */
.myco-chat { position: absolute; right: 16px; bottom: 16px; z-index: 20; }
.myco-chat-fab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--button-bg, var(--color-accent, #d4820a)); color: var(--button-text-color, #fff);
  border: 1px solid var(--button-border, var(--color-accent, #d4820a));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.myco-chat-fab:hover { background: var(--button-hover-bg, #b86d08); }
.myco-chat-fab-ic { font-size: 14px; line-height: 1; }
.myco-chat.collapsed .myco-chat-panel { display: none; }
.myco-chat:not(.collapsed) .myco-chat-fab { display: none; }
.myco-chat-panel {
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 110px);
  background: var(--panel-bg, #fff); border: 1px solid var(--border-color, #e0dbd2);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24); overflow: hidden;
  color: var(--text-primary, #1a1814);
}
.myco-chat-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--border-color, #e0dbd2); flex: none;
}
.myco-chat-title { font-weight: 600; font-size: 13px; flex: 1; }
.myco-chat-new, .myco-chat-min {
  font: inherit; font-size: 12px; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--border-color, #e0dbd2); background: var(--panel-bg, #fff);
  color: var(--text-secondary, #6b6459); padding: 3px 8px;
}
.myco-chat-min { font-weight: 700; padding: 3px 10px; }
.myco-chat-new:hover, .myco-chat-min:hover { color: var(--text-primary, #1a1814); border-color: var(--color-accent, #d4820a); }
.myco-chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.myco-chat-empty { color: var(--text-secondary, #6b6459); font-size: 12.5px; line-height: 1.55; }
.myco-chat-empty b { color: var(--text-primary, #1a1814); }
.myco-eg-lead { display: inline-block; margin-bottom: 6px; }
.myco-chat-egs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.myco-chat-eg {
  font-size: 11.5px; text-align: left; cursor: pointer; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-color, #e0dbd2); background: var(--panel-bg, #fff);
  color: var(--text-primary, #1a1814); transition: border-color .12s, background .12s;
}
.myco-chat-eg:hover { border-color: var(--color-accent, #d4820a); background: var(--color-nav-active, #f3efe8); }
.myco-msg { max-width: 88%; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.myco-msg.user {
  align-self: flex-end; background: var(--color-accent, #d4820a); color: #fff;
  padding: 7px 11px; border-radius: 12px 12px 3px 12px;
}
.myco-msg.bot {
  align-self: flex-start; background: var(--color-nav-active, #f3efe8);
  padding: 8px 11px; border-radius: 12px 12px 12px 3px;
}
.myco-msg.pending { color: var(--text-secondary, #6b6459); font-style: italic; }
.myco-msg-mode { margin-top: 6px; font-size: 10px; color: var(--text-secondary, #6b6459); opacity: 0.8; }
/* Lets a short reply scroll up to the top of the pane; sized in JS (anchorTop). */
.myco-chat-spacer { flex: none; }
.myco-msg-src { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.myco-src-chip {
  font-size: 11px; font-style: italic; cursor: pointer; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-color, #e0dbd2); background: var(--panel-bg, #fff);
  color: var(--text-primary, #1a1814);
}
.myco-src-chip:hover { border-color: var(--color-accent, #d4820a); }
/* Context strip: the Reference / Comparison windows the next question will be
   answered against. Sits directly above the input so "compare these two" has a
   visible referent. */
.myco-chat-ctx {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 7px 12px 0; font-size: 11px; color: var(--text-secondary, #6b6459);
}
.myco-chat-ctx[hidden] { display: none; }
.myco-ctx-lead { font-weight: 600; }
.myco-ctx-chip {
  padding: 2px 8px; border-radius: 999px; font-style: italic;
  border: 1px solid var(--border-color, #e0dbd2); background: var(--input-bg, #f9f7f4);
  color: var(--text-primary, #1a1814);
}
.myco-ctx-chip b { font-style: normal; font-weight: 600; color: var(--text-secondary, #6b6459); }
.myco-ctx-chip.comparison { border-style: dashed; }
.myco-ctx-hint { opacity: 0.75; }
.myco-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-color, #e0dbd2); flex: none; }
.myco-chat-input {
  flex: 1; resize: none; min-width: 0; max-height: 100px; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-color, #e0dbd2);
  background: var(--input-bg, #f9f7f4); color: var(--text-primary, #1a1814);
}
.myco-chat-input:focus { outline: 2px solid var(--color-accent, #d4820a); outline-offset: 1px; }
.myco-chat-send {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 13px; flex: none;
  border-radius: 8px; border: 1px solid var(--button-border, var(--color-accent, #d4820a));
  background: var(--button-bg, var(--color-accent, #d4820a)); color: var(--button-text-color, #fff);
}
.myco-chat-send:disabled { opacity: 0.6; cursor: progress; }

@media (max-width: 768px) {
  /* On narrow screens the side panes slide over the canvas instead of squeezing
     it, and the vertical splitters are dropped (they start collapsed; toggle from
     the top bar). */
  .myco-body { position: relative; }
  .myco-left, .myco-right {
    position: absolute; top: 0; bottom: 0; z-index: 30;
    width: min(300px, 85vw); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .myco-left { left: 0; }
  .myco-right { right: 0; width: min(340px, 92vw); max-width: none; }
  /* Too narrow for two windows side by side — stack them. */
  .myco-insp-cols { flex-direction: column; }
  .myco-cmp-col { border-right: none; border-bottom: 1px solid var(--border-color, #e0dbd2); }
  .myco-split-v { display: none; }
  .myco-bottom { height: 45vh; }
  .myco-topbar { gap: 6px 10px; }
}