/* Panel layouts, form controls, search cards, result cards, and common content blocks. */

.panel{
  display:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.panel.active{ display:block; }
.panel:not(.active){ display: none !important; }

#panel-entity,
#panel-predicate,
#panel-qa{
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

#panel-kg{
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 8px 0 16px;
}
#panel-semantic{
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 8px 0 16px;
}
#panel-kg .panel-head{
  display: none;
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 2px 2px 10px;
}
.panel h2{ margin: 6px 0 2px; font-size: 16px; }
.panel h2, .card-title{ font-family: var(--font-display); }
.panel p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }

.controls{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:flex-end;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: visible;
}

#panel-entity .controls,
#panel-predicate .controls,
#panel-qa .controls{
  background: transparent;
  border: none;
  padding: 0;
}

/* Restore framed controls for Entity search */
#panel-entity .controls{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
  border-radius: 16px;
}
/* Match the same framed style for Predicate + QA controls */
#panel-predicate .controls,
#panel-qa .controls{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
  border-radius: 16px;
}
.panel#panel-qa .field:not(.grow){
  min-width: 240px;
  width: 240px;
}
.panel#panel-qa .field.grow{
  min-width: 380px;
}
.panel#panel-qa .controls{
  position: relative;
}
.field-label-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 8px;
  margin-bottom: 6px;
  width: fit-content;
  max-width: 100%;
}
.qa-source-inline{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
}
.qa-source-inline label{
  margin: 0;
  white-space: nowrap;
}
.qa-mode-select{
  width: 132px;
  min-width: 132px;
  height: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 12px;
  font-size: 12px;
}
.qa-select-menu{
  width: 132px;
  min-width: 132px;
  background: rgba(0,0,0,0.18);
}
.qa-select-menu > summary{
  min-height: 32px;
  padding: 7px 12px;
  font-size: 12px;
}
.qa-select-menu > summary span{
  color: rgba(234, 246, 255, 0.96);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-select-menu .llm-options{
  z-index: 95;
}
.qa-source-menu{
  width: 168px;
  min-width: 168px;
}
.qa-select-menu.is-disabled{
  opacity: 0.62;
  pointer-events: none;
}
.panel#panel-qa .switch{
  width: 100%;
  justify-content: flex-start;
}
.controls.kg-controls{
  align-items: flex-end;
  margin-top: 0;
  margin-bottom: 15px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
#panel-kg .controls.kg-controls{
  display: none;
}
.controls.semantic-controls{
  align-items: flex-end;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
#panel-semantic .controls.semantic-controls{
  display: none;
}
.controls.semantic-controls .semantic-controls-left{
  flex: 1 1 0;
  justify-content: flex-start;
}
.controls.semantic-controls .kg-controls-spacer{
  flex: 1 1 0;
}
.field.semantic-limit{
  min-width: 110px;
  width: 130px;
}
.kg-controls-left{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.kg-controls-center{
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.kg-controls-spacer{
  flex: 1 1 0;
}

.field{ display:flex; flex-direction:column; gap:6px; min-width: 180px; }
.field.grow{ flex: 1 1 320px; min-width: 260px; }
.field.kg-limit{
  min-width: 110px;
  width: 120px;
}
.field.kg-threshold{
  min-width: 90px;
  width: 110px;
}
.field.kg-threshold label{
  white-space: nowrap;
}
label{ font-size: 12px; color: var(--muted2); }

input, textarea{
  width:100%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 8px 12px;
  color: var(--text);
  outline: none;
  font-size: 13px;
  height: 40px;
}

/* Hide native number steppers everywhere */
input[type="number"]{
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
select{
  width:100%;
  border: 1px solid rgba(125,211,252,0.22);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.20));
  border-radius: 18px;
  padding: 8px 34px 8px 12px;
  color: var(--text);
  outline: none;
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.25 L5 6.75 L8.5 3.25' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) 50%;
  background-size: 10px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(6,15,26,0.35);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 120ms ease;
}
select:hover{
  border-color: rgba(125,211,252,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(17,27,40,0.45),
    0 8px 18px rgba(4,10,20,0.20);
}
select:focus{
  border-color: rgba(125,211,252,0.62);
  box-shadow:
    0 0 0 4px rgba(125,211,252,0.10),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
select:open{
  border-color: rgba(125,211,252,0.50);
}
select option{
  background: #121b2c;
  color: #e8edf7;
}
select option:checked{
  background: #243c63;
  color: #ffffff;
}

#recentUploads option,
#globalModel option{
  background: rgba(12,14,20,0.98);
  color: rgba(255,255,255,0.92);
}
#recentUploads option:checked,
#globalModel option:checked{
  background: rgba(46,113,204,0.95);
  color: #ffffff;
}

/* Match header selects to Pipeline Components control */
#recentUploads,
#globalModel{
  background-color: rgba(0,0,0,0.18);
  border: 0;
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M1 2.25 L4.5 5.75 L8 2.25' fill='none' stroke='%23ffffff' stroke-opacity='0.65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) 50%;
  background-size: 9px 9px;
}
#recentUploads:hover,
#globalModel:hover,
#recentUploads:focus,
#globalModel:focus{
  border: 0;
  box-shadow: none;
}
#globalModel{
  border: 1px solid rgba(125,211,252,0.22);
}
#globalModel:hover{
  border-color: rgba(125,211,252,0.34);
}
#globalModel:focus{
  border-color: rgba(125,211,252,0.62);
}
textarea{ resize: vertical; min-height: 64px; }

input:focus, textarea:focus{
  border-color: rgba(125,211,252,0.55);
  box-shadow: 0 0 0 4px rgba(125,211,252,0.10);
}

#entityQuery,
#entityLimit,
#entityBtn{
  border: none;
}

#predQuery,
#predLimit,
#predBtn{
  border: none;
}

#qaQuestion,
#qaMode,
#qaTopK,
#qaBtn{
  border: none;
}

#panel-qa .switch{
  border: none;
}

.switch{
  display:flex; gap: 10px; align-items:center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  height: 40px;
}
.switch span{ color: var(--muted); font-size: 13px; }
.switch input{
  width: 18px;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}
.switch input::after{
  content: "";
  width: 9px;
  height: 5px;
  border-left: 0 solid transparent;
  border-bottom: 0 solid transparent;
  transform: none;
  transition: none;
}
.switch input:hover{
  border-color: rgba(125,211,252,0.75);
}
.switch input:checked{
  border-color: rgba(125,211,252,0.95);
  background: linear-gradient(135deg, rgba(125,211,252,0.95), rgba(59,130,246,0.85));
  box-shadow: 0 0 0 2px rgba(125,211,252,0.2), 0 0 10px rgba(59,130,246,0.28);
}
.switch input:checked::after{
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.switch input:active{
  transform: scale(0.97);
}

.btn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: transform 80ms ease, background 120ms ease;
  height: 40px;
}
.btn:hover{ background: rgba(255,255,255,0.10); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  border-color: rgba(125,211,252,0.40);
  background: linear-gradient(135deg, rgba(125,211,252,0.22), rgba(167,139,250,0.16));
}
.btn.danger{
  border-color: rgba(251,113,133,0.55);
  background: linear-gradient(135deg, rgba(251,113,133,0.20), rgba(239,68,68,0.16));
  color: rgba(255,236,240,0.95);
}
.controls.kg-controls .btn.primary{
  box-shadow:
    0 0 0 1px rgba(125,211,252,0.45),
    0 0 18px rgba(125,211,252,0.35),
    0 0 36px rgba(167,139,250,0.25);
}

.meta{
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.meta._qa b{
  color: rgba(255,255,255,0.98);
  font-weight: 800;
}

.meta._qa.qa-answer{
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,0.96);
}

.qa-card-meta{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-card-meta:empty{
  margin-top: 0;
}

#qaRetrievedMeta{
  order: 0;
  margin-top: 12px;
  margin-bottom: 0;
}

#qaRetrievedMeta:empty{
  margin-top: 0;
}

#qaResultsBlock #qaRetrievedTitle{
  padding-top: 0;
}

.results{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

#semanticSearchBody > .results:empty{
  margin-top: 0;
}

#semanticSearchBody > .results.hidden{
  margin-top: 0;
}

/* Keep hover tooltips inside each result column */

.triple{
  border: none;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 12px 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  position: relative;
}
.triple-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}
.triple-source-doc{
  margin-top: 15px;
  align-self: flex-end;
  text-align: right;
  font-size: 11px;
  color: rgba(255,255,255,0.96);
}
.triple-source-meta{
  margin-top: 2px;
  align-self: flex-start;
  text-align: left;
  font-size: 11px;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  white-space: pre-line;
}
.triple-source-meta b{
  font-weight: 600;
  color: inherit;
}
.triple-source-list{
  margin: 6px 0 0;
  padding-left: 0;
  list-style: none;
}
.triple-source-list li{
  margin: 4px 0;
}
.triple-source-option{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, background-color 140ms ease;
}
.triple-source-option:hover{
  border-color: rgba(255,255,255,0.32);
  color: rgba(255,255,255,0.9);
}
.triple-source-option.is-active{
  color: rgba(255,255,255,0.98);
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.12);
  box-shadow: none;
}
.small{
  font-size: 12px;
  color: var(--muted2);
}
.badges{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}
.badge{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  position: relative;
  max-width: 100%;
  overflow: visible;          /* IMPORTANT: allow tooltip to show */
  white-space: nowrap;
}

.badge.subject{ border-color: rgba(125,211,252,0.35); }
.badge.predicate{ border-color: rgba(167,139,250,0.35); }
.badge.object{ border-color: rgba(134,239,172,0.30); }

.badge-label{
  display:inline-block;
  max-width: 340px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.tooltip{
  position: absolute;
  z-index: 50;
  left: 0;
  top: calc(100% + 8px);
  width: min(520px, 80vw);
  padding: 10px;
  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: var(--text);
  display:none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.badge.selected .tooltip{ display:block; }

.badge.subject.selected{
  box-shadow: 0 0 0 1px rgba(125,211,252,0.44), 0 0 18px rgba(125,211,252,0.20);
}
.badge.predicate.selected{
  box-shadow: 0 0 0 1px rgba(167,139,250,0.44), 0 0 18px rgba(167,139,250,0.20);
}
.badge.object.selected{
  box-shadow: 0 0 0 1px rgba(134,239,172,0.42), 0 0 18px rgba(134,239,172,0.18);
}

#semanticSearchResults .badge{
  transition: box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
#semanticSearchResults .badge:hover{
  transform: translateY(-1px);
}
#semanticSearchResults .badge.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);
}
#semanticSearchResults .badge.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);
}
#semanticSearchResults .badge.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);
}
#semanticSearchResults .triple.is-active[data-active-focus="subject"] .badge.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);
}
#semanticSearchResults .triple.is-active[data-active-focus="predicate"] .badge.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);
}
#semanticSearchResults .triple.is-active[data-active-focus="object"] .badge.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);
}
#semanticSearchResults .triple.is-active[data-active-focus="edge"] .badge.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);
}
#semanticSearchResults .triple.is-active[data-active-focus="edge"] .badge.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);
}
#semanticSearchResults .triple.is-active[data-active-focus="edge"] .badge.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);
}

#semanticSelection .kg-sel-related-list .triple.is-active[data-active-focus="subject"] .badge.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);
}
#semanticSelection .kg-sel-related-list .triple.is-active[data-active-focus="predicate"] .badge.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);
}
#semanticSelection .kg-sel-related-list .triple.is-active[data-active-focus="object"] .badge.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);
}
#semanticSelection .kg-sel-related-list .triple.is-active[data-active-focus="edge"] .badge.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);
}
#semanticSelection .kg-sel-related-list .triple.is-active[data-active-focus="edge"] .badge.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);
}
#semanticSelection .kg-sel-related-list .triple.is-active[data-active-focus="edge"] .badge.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);
}

.tooltip pre{
  margin:0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.86);
}
.tooltip-body{
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.86);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tooltip-row{
  margin: 0 0 6px;
}
.tooltip-section{
  margin: 0;
}
.tooltip-section + .tooltip-section{
  margin-top: 12px;
}
.tooltip-section-title{
  margin: 0;
}
.tooltip-subtitle{
  margin: 2px 0 0;
}
.tooltip-none{
  margin: 0;
}
.tooltip-list{
  margin: 0;
  padding-left: 18px;
}
.tooltip-list li{
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tooltip-expand{
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  cursor: pointer;
}
.tooltip-expand:hover{
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.3);
}

.split{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.split.hidden{
  display: none;
}