/* Property/semantic graph result frames, plot controls, legends, fullscreen layout, and graph canvases. */

@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
}

/* Framed wrapper for full KG/Semantic results area (easy to revert) */
#kgResultsBlock,
#semanticResultsBlock{
  margin-top: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
}

/* Single outer frame after plot loads (KG + Semantic) */
#panel-kg.has-results,
#panel-semantic.has-results{
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 0 0 12px;
}

@media (min-width: 981px){
  #panel-kg.active.has-results{
    min-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
  }

  #panel-semantic.active.has-results{
    min-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
  }

  #panel-kg.active.has-results #kgResultsBlock{
    flex: 1 1 auto;
    min-height: 0;
  }

  #panel-semantic.active.has-results #semanticResultsBlock{
    flex: 1 1 auto;
    min-height: 0;
  }

  #panel-kg.active.has-results #kgResultsBlock .card{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #panel-semantic.active.has-results #semanticResultsBlock .card{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #panel-kg.active.has-results #kgCyWrap{
    flex: 1 1 auto;
    min-height: 0;
  }

  #panel-semantic.active.has-results #semanticCyWrap{
    flex: 1 1 auto;
    min-height: 0;
  }

  #panel-kg.active.has-results #kgCy{
    height: 100%;
    min-height: 620px;
  }

  #panel-semantic.active.has-results #semanticCy{
    height: 100%;
    min-height: 620px;
  }

  #panel-kg.active.has-results #kgSelection{
    flex: 1 1 auto;
    min-height: 0;
  }

  #panel-semantic.active.has-results #semanticSelection{
    flex: 1 1 auto;
    min-height: 0;
  }
}
#panel-kg.has-results .controls.kg-controls,
#panel-semantic.has-results .controls.semantic-controls,
#panel-kg.has-results #kgResultsBlock,
#panel-semantic.has-results #semanticResultsBlock{
  border: none;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
#panel-kg.has-results .controls.kg-controls,
#panel-semantic.has-results .controls.semantic-controls{
  padding: 0;
}
#panel-kg.has-results #kgResultsBlock,
#panel-semantic.has-results #semanticResultsBlock{
  padding: 0;
}

#panel-semantic.has-results #semanticResultsBlock{
  margin-top: 12px;
}

.card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(10px);
}

#qaResultsBlock .card{
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#kgResultsBlock .card{
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

#semanticResultsBlock .card{
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

#kgResultsBlock .card:first-child .card-head,
#kgResultsBlock .card:last-child .card-head{
  min-height: 28px;
  align-items: center;
}

#kgResultsBlock .card:last-child .card-head{
  display: none;
}

#kgResultsBlock .card:last-child #kgSelection{
  margin-top: 0;
}

#kgResultsBlock .card:last-child{
  margin-top: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#semanticResultsBlock .card:last-child{
  margin-top: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.card-title{ font-weight: 800; font-size: 13px; color: var(--text); }
.card-title--node-props{
  position: relative;
  top: -2px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  font-size: 12px;
}

#kgMeta{
  border: none;
  background: transparent;
  box-shadow: none;
}

#semanticMeta{
  border: none;
  background: transparent;
  box-shadow: none;
  margin-left: 0;
}

#panel-kg .card-head{
  align-items: center;
  position: relative;
  overflow: visible;
}

#panel-kg .card:first-child .card-head{
  justify-content: flex-start;
}

#kgMeta{
  margin-top: 0;
}

#semanticMeta{
  margin-top: 0;
}

#panel-semantic .card:first-child .card-head{
  justify-content: flex-start;
  margin-bottom: 2px;
}

#semanticResultsBlock .card:first-child .card-head,
#semanticResultsBlock .card:last-child .card-head{
  min-height: 28px;
  align-items: center;
  margin-bottom: 2px;
}

#semanticResultsBlock .card:last-child .card-head{
  display: none;
}

.graph-find{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 260px;
  max-width: 460px;
  flex: 1 1 340px;
}

#kgGraphFindQuery,
#kgCatQuery{
  min-height: 40px;
  height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

#kgGraphFindBtn,
#kgCatBtn{
  min-height: 40px;
  height: 40px;
  padding: 10px 14px;
}

.graph-find-results{
  display: none;
  margin: 6px 0 10px;
  padding: 2px 10px 6px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

.graph-find-results.has-results{
  display: block;
  margin-bottom: 12px;
}

.graph-find-results::-webkit-scrollbar{
  width: 10px;
}

.graph-find-results::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}

.graph-find-results::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}

.graph-find-item{
  padding: 6px 10px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.88);
  margin-bottom: 0;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.graph-find-item:last-child{
  margin-bottom: 0;
}

.graph-find-item:hover{
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.22), 0 0 18px rgba(125,211,252,0.18);
  transform: none;
}

.graph-find-item.is-active{
  box-shadow: 0 0 0 1px rgba(125,211,252,0.45), 0 0 20px rgba(125,211,252,0.16);
}

.graph-find-triple{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.graph-find-arrow{
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

.graph-find-chip{
  font-size: 13px;
  line-height: 1.2;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.graph-find-chip:hover{
  transform: translateY(-1px);
}

.graph-find-chip.subject{
  border-color: rgba(125,211,252,0.35);
}
.graph-find-chip.subject:hover{
  border-color: rgba(125,211,252,0.9);
  background: rgba(125,211,252,0.14);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.45), 0 0 16px rgba(125,211,252,0.28);
}

.graph-find-chip.predicate{
  border-color: rgba(167,139,250,0.35);
}
.graph-find-chip.predicate:hover{
  border-color: rgba(167,139,250,0.92);
  background: rgba(167,139,250,0.14);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.42), 0 0 16px rgba(167,139,250,0.28);
}

.graph-find-chip.object{
  border-color: rgba(134,239,172,0.30);
}
.graph-find-chip.object:hover{
  border-color: rgba(74,222,128,0.9);
  background: rgba(74,222,128,0.14);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.42), 0 0 16px rgba(74,222,128,0.28);
}
.graph-find-item.is-active[data-active-focus="subject"] .graph-find-chip.subject{
  border-color: rgba(125,211,252,0.9);
  background: rgba(125,211,252,0.14);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.45), 0 0 16px rgba(125,211,252,0.28);
}
.graph-find-item.is-active[data-active-focus="predicate"] .graph-find-chip.predicate{
  border-color: rgba(167,139,250,0.92);
  background: rgba(167,139,250,0.14);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.42), 0 0 16px rgba(167,139,250,0.28);
}
.graph-find-item.is-active[data-active-focus="object"] .graph-find-chip.object{
  border-color: rgba(74,222,128,0.9);
  background: rgba(74,222,128,0.14);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.42), 0 0 16px rgba(74,222,128,0.28);
}
.graph-find-item.is-active[data-active-focus="node"] .graph-find-chip.subject{
  border-color: rgba(125,211,252,0.9);
  background: rgba(125,211,252,0.14);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.45), 0 0 16px rgba(125,211,252,0.28);
}
.graph-find-item.is-active[data-active-focus="edge"] .graph-find-chip.subject{
  border-color: rgba(125,211,252,0.9);
  background: rgba(125,211,252,0.14);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.45), 0 0 16px rgba(125,211,252,0.28);
}
.graph-find-item.is-active[data-active-focus="edge"] .graph-find-chip.predicate{
  border-color: rgba(167,139,250,0.92);
  background: rgba(167,139,250,0.14);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.42), 0 0 16px rgba(167,139,250,0.28);
}
.graph-find-item.is-active[data-active-focus="edge"] .graph-find-chip.object{
  border-color: rgba(74,222,128,0.9);
  background: rgba(74,222,128,0.14);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.42), 0 0 16px rgba(74,222,128,0.28);
}

@media (max-width: 1300px){
  #panel-kg .card:first-child .card-head,
  #panel-semantic .card:first-child .card-head{
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .graph-find{
    min-width: 100%;
    order: 10;
  }
}

.icon-btn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  height: 28px;
  align-self: center;
}

.icon-btn:hover{ background: rgba(255,255,255,0.12); }

.kg-settings-anchor{
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
}

.kg-settings-btn{
  width: 30px;
  min-width: 30px;
  justify-content: center;
  font-size: 15px;
  border-color: rgba(125,211,252,0.24);
  color: rgba(214,239,255,0.92);
}

.kg-settings-btn:hover,
.kg-settings-btn[aria-expanded="true"]{
  background: rgba(125,211,252,0.14);
  border-color: rgba(125,211,252,0.44);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.16), 0 0 16px rgba(125,211,252,0.18);
}

.kg-settings-popover{
  position: absolute;
  top: 0;
  left: calc(100% + 16px);
  right: auto;
  width: 208px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(125,211,252,0.20);
  background: rgba(12,17,28,0.96);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03) inset;
  z-index: 20;
}

.kg-settings-popover.hidden{
  display: none;
}

.kg-settings-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.kg-settings-popover .field{
  min-width: 0;
  width: auto;
}

.kg-settings-popover .field.kg-limit{
  min-width: 0;
  width: auto;
}

.kg-settings-popover .field.kg-implicit{
  min-width: 0;
  width: auto;
}

.kg-settings-popover .field.kg-relevance{
  min-width: 0;
  width: auto;
}

.kg-settings-popover .field.kg-threshold{
  min-width: 0;
  width: auto;
}

.kg-settings-popover .field.kg-temporal{
  min-width: 0;
  width: auto;
}

.kg-settings-popover .field.semantic-limit{
  min-width: 0;
  width: auto;
}

.kg-settings-popover input{
  height: 36px;
  padding: 7px 10px;
}

.kg-settings-select{
  width: 100%;
  height: 36px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(125,211,252,0.22);
  background-color: rgba(8,12,20,0.94);
  color: rgba(232,237,247,0.94);
  font-size: 12px;
}

.kg-settings-select:focus{
  border-color: rgba(125,211,252,0.55);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.12);
}

.temporal-select-menu{
  width: 100%;
  min-width: 0;
  background: rgba(0,0,0,0.16);
  border-radius: 14px;
}

.temporal-select-menu > summary{
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  color: rgba(232,237,247,0.94);
  font-size: 12px;
  font-weight: 600;
}

.temporal-select-menu > summary span{
  min-width: 0;
  color: rgba(234,246,255,0.96);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.temporal-select-menu[open] > summary{
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}

.temporal-select-menu .llm-options{
  width: 100%;
  min-width: 100%;
  z-index: 120;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(9,11,18,0.98);
}

.temporal-select-menu .llm-option{
  padding: 0;
  border-radius: 12px;
}

.temporal-select-menu .llm-option + .llm-option{
  margin-top: 4px;
}

.temporal-select-menu .llm-option-btn{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.temporal-select-menu .llm-option-active{
  background: transparent;
}

.temporal-select-menu .llm-option-active .llm-option-btn,
.temporal-select-menu .llm-option-btn:hover,
.temporal-select-menu .llm-option-btn:focus{
  background: rgba(255,255,255,0.06);
  color: rgba(234,246,255,0.98);
  outline: none;
}

.kg-settings-popover input[type="range"]{
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.kg-settings-popover input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(125,211,252,0.55), rgba(96,165,250,0.32));
  border: 1px solid rgba(125,211,252,0.16);
}

.kg-settings-popover input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  margin-top: -6px;
  background: #ffffff;
  border: 2px solid rgba(96,165,250,0.9);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.14);
}

.kg-settings-popover input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(125,211,252,0.55), rgba(96,165,250,0.32));
  border: 1px solid rgba(125,211,252,0.16);
}

.kg-settings-popover input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 2px solid rgba(96,165,250,0.9);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.14);
}

.slider-value{
  float: right;
  font-size: 11px;
  color: rgba(255,255,255,0.92);
}

.slider-value-editable{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid rgba(125,211,252,0.20);
  background: rgba(125,211,252,0.08);
  cursor: text;
}

.slider-value-editable:hover,
.slider-value-editable:focus-visible{
  border-color: rgba(125,211,252,0.45);
  background: rgba(125,211,252,0.14);
  outline: none;
}

.slider-value-editable.is-editing{
  padding: 0;
  background: transparent;
  border-color: rgba(125,211,252,0.55);
}

.slider-value-input{
  width: 56px;
  height: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(125,211,252,0.45);
  background: rgba(8,12,20,0.95);
  color: #ffffff;
  font-size: 11px;
  text-align: center;
  box-shadow: none;
}

.kg-settings-popover label{
  white-space: normal;
  font-size: 11px;
}

.kg-settings-popover .switch{
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
}

.kg-settings-popover .switch span{
  color: rgba(232,237,247,0.88);
  font-size: 12px;
}

.switch.switch-compact{
  padding: 6px 0;
  height: auto;
  min-height: 0;
  border: none;
  background: transparent;
}

.switch.switch-binary{
  justify-content: flex-start;
}

.switch.switch-binary input{
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(248,113,113,0.55);
  background: linear-gradient(135deg, rgba(153,27,27,0.92), rgba(239,68,68,0.82));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 6px 16px rgba(0,0,0,0.18);
  position: relative;
}

.switch.switch-binary input::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 1px 6px rgba(0,0,0,0.28);
  transition: transform 140ms ease;
}

.switch.switch-binary input:hover{
  border-color: rgba(255,255,255,0.5);
}

.switch.switch-binary input:checked{
  border-color: rgba(74,222,128,0.62);
  background: linear-gradient(135deg, rgba(21,128,61,0.95), rgba(34,197,94,0.88));
  box-shadow: 0 0 0 2px rgba(74,222,128,0.14), 0 8px 18px rgba(21,128,61,0.22);
}

.switch.switch-binary input:checked::after{
  transform: translateX(18px);
}

.kg-settings-reload{
  margin-top: 10px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  height: 32px;
  padding: 6px 12px;
  border-radius: 12px;
  border-color: rgba(125,211,252,0.34);
  background: linear-gradient(135deg, rgba(125,211,252,0.14), rgba(96,165,250,0.18));
  color: #ffffff;
  box-shadow: none;
}

.kg-settings-reload:hover{
  background: linear-gradient(135deg, rgba(125,211,252,0.20), rgba(96,165,250,0.24));
}

#kgLegend{
  margin: 8px 0 10px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.kg-legend-bar{
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-bottom: 0;
}

.kg-legend-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.kg-legend-actions.inline{
  margin-left: auto;
  align-self: center;
}

.kg-legend-actions.fs-floating{
  position: absolute;
  right: 2px;
  top: calc(100% + 4px);
  z-index: 6;
  display: none;
  gap: 6px;
}

.btn.small{
  height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.kg-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  user-select: none;
}

.kg-legend-swatch{
  width: 18px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
}

.kg-legend-item.is-disabled{
  opacity: 0.35;
}

#kgCyWrap{
  position: relative;
}
.kg-self-loop-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 7;
}
.kg-self-loop-overlay .kg-self-loop-hit{
  pointer-events: stroke;
  cursor: pointer;
}
.kg-plot-meta{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.kg-plot-title{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.kg-plot-pill{
  margin: 0;
  background: rgba(10,12,18,0.66);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}
.kg-plot-actions{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kg-relevance-toggle{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  border-color: rgba(220, 68, 68, 0.85);
  background: rgba(137, 24, 24, 0.85);
  color: rgba(255, 232, 232, 0.96);
}
.kg-relevance-toggle.is-on{
  border-color: rgba(60, 179, 113, 0.9);
  background: rgba(17, 110, 66, 0.88);
  color: rgba(222, 255, 236, 0.98);
}

#semanticCyWrap{
  position: relative;
}
.semantic-plot-actions{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.semantic-relevance-toggle{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  border-color: rgba(220, 68, 68, 0.85);
  background: rgba(137, 24, 24, 0.85);
  color: rgba(255, 232, 232, 0.96);
}
.semantic-relevance-toggle.is-on{
  border-color: rgba(60, 179, 113, 0.9);
  background: rgba(17, 110, 66, 0.88);
  color: rgba(222, 255, 236, 0.98);
}

.semantic-plot-meta{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.semantic-plot-title{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.semantic-plot-pill{
  margin: 0;
  background: rgba(10,12,18,0.66);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.82);
}

.semantic-selection-title{
  visibility: hidden;
  min-height: 1px;
}

.exit-btn{
  position: absolute;
  right: 12px;
  top: 12px;
  display: none;
  z-index: 5;
}

#kgCyWrap.fullscreen-active .exit-btn{
  display: inline-flex;
  right: 10px;
  top: 10px;
  z-index: 9;
}

#semanticCyWrap.fullscreen-active .exit-btn{
  display: inline-flex;
  right: 10px;
  top: 10px;
  z-index: 9;
}

#kgCyWrap.fullscreen-active .kg-plot-actions,
#semanticCyWrap.fullscreen-active .semantic-plot-actions{
  right: 44px;
}

.footer{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:center;
  color: var(--muted2);
  font-size: 12px;
}
.dot{ opacity: 0.7; }


.footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 24px;
}

.footer-text{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  opacity: 0.85;
}

/* --- Footer logos: hard constrain, ignore global img rules --- */
.footer-logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.footer-logos > a{
  display: inline-flex;
  align-items: center;
}

.footer-logos img{
  height: 48px !important;
  width: auto !important;
  max-width: 320px !important;
  max-height: 48px !important;   /* MUST match height */
  object-fit: contain !important;
  flex: 0 0 auto;
  display: block;
}


/* small screens: shrink so all 3 still fit */
@media (max-width: 700px){
  .footer-logos{ gap: 16px; }
  .footer-logos img{
    height: 36px !important;
    max-height: 36px !important;
    max-width: 33vw !important;
  }
}


.triple { cursor: default; }
.triple.copied { outline: 1px solid rgba(134,239,172,0.35); }
.triple { transition: outline-color 200ms ease; }
.triple.selected{
  outline: 1px solid rgba(125,211,252,0.40);
  box-shadow: 0 0 24px rgba(125,211,252,0.10);
}
#semanticSearchResults .triple.is-active{
  outline: 1px solid rgba(125,211,252,0.45);
  box-shadow: 0 0 24px rgba(125,211,252,0.14);
}

.triple-tooltip{
  display: none;
  position: absolute;
  left: 12px;
  top: calc(100% + 8px);
  width: min(720px, 88vw);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(10,12,18,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.86);
  z-index: 60;
}

.triple.selected .triple-tooltip{
  display: block;
}

.triple-tooltip-title{
  font-size: 12px;
  color: rgba(255,255,255,0.96);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
}

.triple-tooltip-text{
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.triple-tooltip-list{
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.45;
  list-style: decimal;
}

.triple-tooltip-list li{
  margin: 0;
  padding: 0;
}

/* --- KG panel --- */
#kgCy{
  width: 100%;
  height: 460px;
  border-radius: 14px;
  border: none !important;
  outline: none;
  box-shadow: none;
  background: rgba(0,0,0,0.18);
}
#semanticCy{
  width: 100%;
  height: 460px;
  border-radius: 14px;
  border: none !important;
  outline: none;
  box-shadow: none;
  background: rgba(0,0,0,0.18);
}

/* Non-fullscreen semantic: align plot bottom with the 3-row triples viewport */
#semanticResultsBlock #semanticCy{
  height: 100%;
}

#kgCyWrap:fullscreen{
  background: rgb(28, 29, 32);
  padding: 16px;
  box-sizing: border-box;
}

#kgCyWrap:fullscreen #kgCy{
  width: 100%;
  height: calc(100vh - 32px);
  border-radius: 12px;
}

#semanticCyWrap:fullscreen{
  background: rgb(28, 29, 32);
  padding: 16px;
  box-sizing: border-box;
}

#semanticCyWrap:fullscreen #semanticCy{
  width: 100%;
  height: calc(100vh - 32px);
  border-radius: 12px;
}

#kgResultsBlock:fullscreen{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: rgb(28, 29, 32);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(440px, 0.72fr);
  gap: 16px;
  align-items: stretch;
  overflow: hidden;
}

#kgResultsBlock:fullscreen .card{
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 32px);
}

#kgResultsBlock:fullscreen .card:last-child{
  width: 100%;
  max-width: 760px;
  justify-self: center;
  align-self: stretch;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgb(28, 29, 32);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#kgResultsBlock:fullscreen #kgCy{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgb(31, 32, 35);
}

#kgResultsBlock:fullscreen .card:first-child .card-head{
  display: none;
}

#kgResultsBlock:fullscreen .card:first-child{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#kgResultsBlock:fullscreen .kg-legend-bar{
  margin-bottom: 0;
  gap: 0;
}

#kgResultsBlock:fullscreen #kgLegend{
  margin: 0;
}

#kgResultsBlock:fullscreen #kgCyWrap .kg-legend-actions.fs-floating{
  display: inline-flex;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 7;
}

#kgResultsBlock:fullscreen #kgCyWrap{
  flex: 1 1 auto;
  min-height: 0;
}

#kgResultsBlock:fullscreen #kgExitBtn{
  display: none !important;
}

#kgResultsBlock:fullscreen #kgSelection{
  flex: 0 0 auto;
}

#kgResultsBlock:fullscreen .kg-search-split{
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

#kgResultsBlock:fullscreen #kgGraphSearchBlock,
#kgResultsBlock:fullscreen #kgCategorySearchBlock{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#kgResultsBlock:fullscreen #kgCategorySearchBlock.hidden,
#panel-kg:fullscreen #kgCategorySearchBlock.hidden{
  display: none !important;
}

#kgResultsBlock:fullscreen #kgGraphFindResults,
#kgResultsBlock:fullscreen #kgCatResults{
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  margin-bottom: 0;
  max-height: none;
}

#panel-kg:fullscreen,
#panel-semantic:fullscreen{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: rgb(28, 29, 32);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

#panel-kg:fullscreen .panel-head,
#panel-semantic:fullscreen .panel-head{
  display: none;
}

#panel-kg:fullscreen #kgSearchSplit,
#panel-semantic:fullscreen #semanticTopSearchBlock{
  display: block !important;
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  min-height: 0;
}

#panel-kg:fullscreen #kgSearchSplit{
  display: grid !important;
}

#panel-kg:fullscreen #kgResultsBlock,
#panel-semantic:fullscreen #semanticResultsBlock{
  display: grid !important;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  grid-template-columns: minmax(0, 1.45fr) minmax(440px, 0.72fr);
  gap: 16px;
  align-items: stretch;
  overflow: hidden;
}

#panel-kg:fullscreen #kgResultsBlock .card,
#panel-semantic:fullscreen #semanticResultsBlock .card{
  min-width: 0;
  min-height: 0;
  height: auto;
}

#panel-kg:fullscreen #kgResultsBlock .card:first-child,
#panel-semantic:fullscreen #semanticResultsBlock .card:first-child{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#panel-kg:fullscreen #kgResultsBlock .card:first-child .card-head,
#panel-semantic:fullscreen #semanticResultsBlock .card:first-child .card-head{
  display: none;
}

#panel-kg:fullscreen #kgResultsBlock .card:last-child,
#panel-semantic:fullscreen #semanticResultsBlock .card:last-child{
  width: 100%;
  max-width: 760px;
  justify-self: center;
  align-self: stretch;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  margin-top: 0 !important;
  background: rgb(28, 29, 32);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#panel-kg:fullscreen #kgCyWrap,
#panel-semantic:fullscreen #semanticCyWrap{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#panel-kg:fullscreen #kgCy,
#panel-semantic:fullscreen #semanticCy{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgb(31, 32, 35);
}

#panel-kg:fullscreen #kgSelection,
#panel-semantic:fullscreen #semanticSelection{
  flex: 0 0 auto;
}

#panel-kg:fullscreen #kgGraphSearchBlock,
#panel-kg:fullscreen #kgCategorySearchBlock,
#panel-semantic:fullscreen .kg-search{
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

#panel-kg:fullscreen #kgGraphFindResults,
#panel-kg:fullscreen #kgCatResults,
#panel-semantic:fullscreen #semanticSearchResults{
  flex: 0 0 auto;
  min-height: 0;
}

#panel-semantic:fullscreen #semanticSearchBody{
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
}

#panel-semantic:fullscreen #semanticTextDetailResults.hidden{
  display: none !important;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.kge-graph-fullscreen-active{
  overflow: hidden;
  background: rgb(28, 29, 32) !important;
}

#panel-kg.kge-app-fullscreen,
#panel-semantic.kge-app-fullscreen{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 16px !important;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: rgb(28, 29, 32);
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

#panel-kg.kge-app-fullscreen .panel-head,
#panel-semantic.kge-app-fullscreen .panel-head{
  display: none;
}

#panel-kg.kge-app-fullscreen #kgSearchSplit,
#panel-semantic.kge-app-fullscreen #semanticTopSearchBlock{
  display: block !important;
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  min-height: 0;
}

#panel-kg.kge-app-fullscreen #kgSearchSplit{
  display: grid !important;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock{
  display: grid !important;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  grid-template-columns: minmax(0, 1.45fr) minmax(440px, 0.72fr);
  gap: 16px;
  align-items: stretch;
  overflow: hidden;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card{
  min-width: 0;
  min-height: 0;
  height: auto;
  margin-top: 0 !important;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card:first-child,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card:first-child{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card:first-child .card-head,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card:first-child .card-head{
  display: none;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card:last-child,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card:last-child{
  width: 100%;
  max-width: 760px;
  justify-self: center;
  align-self: stretch;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  margin-top: 0 !important;
  background: rgb(28, 29, 32);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#panel-kg.kge-app-fullscreen #kgCyWrap,
#panel-semantic.kge-app-fullscreen #semanticCyWrap{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#panel-kg.kge-app-fullscreen #kgCy,
#panel-semantic.kge-app-fullscreen #semanticCy{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgb(31, 32, 35);
}

#panel-kg.kge-app-fullscreen #kgSelection,
#panel-semantic.kge-app-fullscreen #semanticSelection{
  flex: 0 0 auto;
}

#panel-kg.kge-app-fullscreen #kgGraphSearchBlock,
#panel-kg.kge-app-fullscreen #kgCategorySearchBlock,
#panel-semantic.kge-app-fullscreen .kg-search{
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

#panel-kg.kge-app-fullscreen #kgGraphFindResults,
#panel-kg.kge-app-fullscreen #kgCatResults,
#panel-semantic.kge-app-fullscreen #semanticSearchResults{
  flex: 0 0 auto;
  min-height: 0;
}

#panel-semantic.kge-app-fullscreen #semanticSearchBody{
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
}

#panel-semantic.kge-app-fullscreen #semanticTextDetailResults.hidden{
  display: none !important;
  min-height: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#semanticResultsBlock:fullscreen{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: rgb(28, 29, 32);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(440px, 0.72fr);
  gap: 16px;
  align-items: stretch;
  overflow: hidden;
}

#semanticResultsBlock:fullscreen .card{
  min-width: 0;
  min-height: 0;
  height: calc(100vh - 32px);
}

#semanticResultsBlock:fullscreen #semanticCy{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgb(31, 32, 35);
}

#semanticResultsBlock:fullscreen .card:first-child .card-head{
  display: none;
}

#semanticResultsBlock:fullscreen .card:last-child{
  width: 100%;
  max-width: 760px;
  justify-self: center;
  align-self: stretch;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  margin-top: 0 !important;
  background: rgb(28, 29, 32);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#semanticResultsBlock:fullscreen .card:first-child{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#semanticResultsBlock:fullscreen #semanticCyWrap{
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#semanticResultsBlock:fullscreen #semanticExitBtn{
  display: none !important;
}

#semanticResultsBlock:fullscreen #semanticSelection{
  flex: 0 0 auto;
}

#semanticResultsBlock:fullscreen .kg-search{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#semanticResultsBlock:fullscreen #semanticSearchResults{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 8px 10px 10px 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.55) rgba(15,18,26,0.6);
}

#semanticResultsBlock:fullscreen #semanticSearchResults::-webkit-scrollbar{
  width: 10px;
}

#semanticResultsBlock:fullscreen #semanticSearchResults::-webkit-scrollbar-track{
  background: rgba(15,18,26,0.6);
  border-radius: 999px;
}

#semanticResultsBlock:fullscreen #semanticSearchResults::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(125,211,252,0.6), rgba(167,139,250,0.6));
  border-radius: 999px;
  border: 2px solid rgba(15,18,26,0.7);
}

#semanticResultsBlock:fullscreen #semanticSearchResults::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(125,211,252,0.75), rgba(167,139,250,0.75));
}

#semanticResultsBlock:fullscreen #semanticSearchResults .triple{
  margin-right: 2px;
}

#panel-kg:fullscreen #kgSearchSplit,
#kgResultsBlock:fullscreen .kg-search-split,
#panel-kg.kge-app-fullscreen #kgSearchSplit{
  grid-template-columns: minmax(0, 1fr) !important;
}

#panel-kg:fullscreen #kgCategorySearchBlock,
#kgResultsBlock:fullscreen #kgCategorySearchBlock,
#panel-kg.kge-app-fullscreen #kgCategorySearchBlock{
  display: none !important;
}

#panel-kg.kge-app-fullscreen,
#panel-semantic.kge-app-fullscreen,
#panel-kg:fullscreen,
#panel-semantic:fullscreen,
#kgResultsBlock:fullscreen,
#semanticResultsBlock:fullscreen,
#panel-kg:fullscreen::backdrop,
#panel-semantic:fullscreen::backdrop,
#kgResultsBlock:fullscreen::backdrop,
#semanticResultsBlock:fullscreen::backdrop,
#kgCyWrap:fullscreen::backdrop,
#semanticCyWrap:fullscreen::backdrop{
  background: rgb(28, 29, 32) !important;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card,
#panel-kg:fullscreen #kgResultsBlock .card,
#panel-semantic:fullscreen #semanticResultsBlock .card,
#kgResultsBlock:fullscreen .card,
#semanticResultsBlock:fullscreen .card{
  margin-top: 0 !important;
  align-self: stretch !important;
}

#panel-kg.kge-app-fullscreen #kgCyWrap,
#panel-semantic.kge-app-fullscreen #semanticCyWrap,
#panel-kg:fullscreen #kgCyWrap,
#panel-semantic:fullscreen #semanticCyWrap,
#kgCyWrap:fullscreen,
#semanticCyWrap:fullscreen{
  background: rgb(28, 29, 32) !important;
}

#panel-kg.kge-app-fullscreen #kgCy,
#panel-semantic.kge-app-fullscreen #semanticCy,
#panel-kg:fullscreen #kgCy,
#panel-semantic:fullscreen #semanticCy,
#kgResultsBlock:fullscreen #kgCy,
#semanticResultsBlock:fullscreen #semanticCy{
  background: rgb(28, 29, 32) !important;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card:last-child,
#panel-kg:fullscreen #kgResultsBlock .card:last-child,
#kgResultsBlock:fullscreen .card:last-child{
  margin-top: 24px !important;
}

#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card:last-child,
#panel-semantic:fullscreen #semanticResultsBlock .card:last-child,
#semanticResultsBlock:fullscreen .card:last-child{
  margin-top: 0 !important;
}

#panel-kg.kge-app-fullscreen #kgResultsBlock .card:last-child,
#panel-semantic.kge-app-fullscreen #semanticResultsBlock .card:last-child,
#panel-kg:fullscreen #kgResultsBlock .card:last-child,
#panel-semantic:fullscreen #semanticResultsBlock .card:last-child,
#kgResultsBlock:fullscreen .card:last-child,
#semanticResultsBlock:fullscreen .card:last-child{
  background: rgb(28, 29, 32) !important;
}

#panel-kg.kge-app-fullscreen #kgSelection,
#panel-semantic.kge-app-fullscreen #semanticSelection,
#panel-kg:fullscreen #kgSelection,
#panel-semantic:fullscreen #semanticSelection{
  background: rgba(0, 0, 0, 0.16) !important;
}