:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-soft: #1f2632;
  --text: #dbe2f0;
  --muted: #95a3bf;
  --line: #2f3a4f;
  --accent: #3d7eff;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: #0b0f15;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand i { color: var(--accent); }
nav { display: flex; gap: 8px; }
.nav-link {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-link.active, .nav-link:hover { color: white; background: var(--panel-soft); }

.main-layout {
  display: grid;
  grid-template-columns: 7fr 3fr;
  height: calc(100vh - 62px);   /* 모니터(뷰포트) 높이에 고정 */
  overflow: hidden;             /* 페이지 자체 스크롤 방지, 패널 내부에서 스크롤 */
}
.chat-panel, .context-panel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;                /* 그리드 자식이 높이 제한을 넘지 않도록 */
  overflow: hidden;
}
.chat-panel h1,
.chat-panel .desc,
.chat-panel .chat-toolbar,
.chat-panel .chat-form,
.context-panel h2 { flex-shrink: 0; }
.context-panel {
  border-left: 1px solid var(--line);
  background: #0f151f;
}
h1, h2, h3 { margin: 0 0 10px; }
.desc { color: var(--muted); margin-top: 0; }

.chat-window {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  flex: 1 1 auto;               /* 채팅 패널 남은 높이를 모두 사용 */
  min-height: 200px;
  overflow-y: auto;             /* 대화 내용이 넘치면 내부 스크롤 */
  padding: 14px;
}
.chat-msg {
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.chat-msg.user { background: #17202f; }
.chat-msg.bot { background: #131a24; }
.chat-msg p { margin: 0; line-height: 1.5; }

.chat-form { margin-top: 14px; flex-shrink: 0; }
.input-row { display: flex; gap: 8px; align-items: flex-end; }
.input-row input,
.input-row textarea {
  flex: 1 1 auto;
  min-width: 0;
}
.input-row textarea {
  resize: none;             /* 드래그 리사이즈 비활성, 자동 높이 조절 사용 */
  overflow-y: auto;
  max-height: 140px;
  line-height: 1.5;
  min-height: 42px;
}
.input-row button {
  flex-shrink: 0;           /* 입력창에 눌려 폭이 좁아지지 않도록 */
  white-space: nowrap;      /* 버튼 텍스트가 한 줄로 유지되도록 */
}

/* 채팅 툴바: DB 선택 + 새로 검색 */
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.chat-toolbar .toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-toolbar select { min-width: 180px; }
.chat-toolbar .ghost-btn i { margin-right: 4px; }
.query-toolbar select#db-select { min-width: 150px; }

/* [수정 2] radio / checkbox 는 전역 input 스타일에서 제외 */
input:not([type="radio"]):not([type="checkbox"]),
textarea, select, button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
}
input:not([type="radio"]):not([type="checkbox"]),
textarea { width: 100%; }
button {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  cursor: pointer;
}
button:hover { opacity: 0.95; }

.context-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;               /* 컨텍스트 패널 남은 높이를 모두 사용 */
  min-height: 0;
  overflow-y: auto;             /* 카드가 많아지면 패널 안에서 스크롤 */
  padding-right: 4px;
}
.context-card { flex-shrink: 0; }
.context-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel);
}
.context-card p { margin: 6px 0; color: var(--muted); }

/* 검색 근거(벡터유사도/BM25/RRF) 배지 */
.evidence-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  border: 1px solid transparent;
}
.evidence-badge i { font-size: 11px; }
.evidence-badge.vector { background: #14263f; color: #7fb2ff; border-color: #27456e; }
.evidence-badge.fulltext { background: #14332a; color: #6fdcb8; border-color: #24584a; }
.evidence-badge.rrf { background: #33243f; color: #c79bff; border-color: #523a6e; }
.evidence-related { font-size: 13px; }
.chip {
  display: inline-block;
  background: #263248;
  color: #9fc1ff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}
.muted { color: var(--muted); }

.db-layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - 62px);
}
.query-section { padding: 20px; }
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ghost-btn {
  background: transparent;
  border-color: var(--line);
}
.query-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.query-toolbar.inline {
  white-space: nowrap;
}

/* [수정 1] 샘플 버튼(좌 30%) + 실행 컨트롤(중 20%) + 쿼리창(우 50%) 한 행 배치 */
.query-editor-row {
  display: grid;
  grid-template-columns: 3fr 2fr 5fr;   /* 30% : 20% : 50% (gap 고려 프랙션) */
  gap: 12px;
  align-items: stretch;
}
.query-control-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px;
}
.query-control-box .control-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.query-control-box label {
  font-size: 12px;
  color: var(--muted);
}
.query-control-box select { width: 100%; min-width: 0; }
.query-control-box #run-query-btn {
  margin-top: auto;
  width: 100%;
}
.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;          /* 쿼리창 높이에 맞춰 버튼 높이 균등 확장 */
  gap: 8px;
}
.sample-btn {
  background: #253049;
  border-color: #394a70;
  font-size: 13px;
  padding: 9px;
}
#query-input {
  align-self: stretch;
  min-height: 160px;
  resize: vertical;
  font-family: Consolas, 'D2Coding', Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.result-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.result-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.table-wrap {
  overflow: auto;
  max-height: 300px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
/* 긴 값(임베딩 배열 등)이 테이블 폭을 키우지 않도록 셀 폭 제한 */
th, td {
  max-width: 320px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* [수정 3] 그래프 높이 600px 고정 + 좌측 필터 / 우측 Node Properties 패널 */
.graph-split-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 10px;
  height: 600px;
}
.graph-wrap { position: relative; height: 600px; }
.graph-network {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a0d13;
  overflow: hidden;
}

/* 노드 색상 범례: 그래프창 우측 상단 오버레이 */
.graph-legend {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(13, 17, 23, 0.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  max-height: 55%;
  overflow: auto;
  font-size: 12px;
}
.graph-legend h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.legend-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legend-items li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Node Properties 패널 (Neo4j 스타일: 노드 클릭 시 DB 속성 표시) */
.node-props-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101722;
  padding: 10px;
}
.node-props-panel .list-header { margin-bottom: 8px; }
.node-props-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.np-type-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.np-node-name { margin-bottom: 8px; font-size: 12px; }
.np-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.np-table th,
.np-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 4px;
  text-align: left;
  vertical-align: top;
  max-width: none;
}
.np-table th {
  color: var(--muted);
  width: 40%;
  word-break: break-word;
}
.np-table td {
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.graph-info-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 600px;
  min-height: 0;
}
.name-control-box,
.name-list-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101722;
  padding: 10px;
}
.name-control-box { flex-shrink: 0; }

/* 노드명/관계명 박스가 남은 높이를 나눠서 채움 */
.name-list-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.name-list-box h4 { margin: 0 0 8px; flex-shrink: 0; }

/* [수정 2] 라디오 버튼과 텍스트 한 줄 정렬 */
.name-control-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.name-control-box input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.name-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow: auto;               /* 박스 높이 안에서 스크롤 */
}
.name-list li {
  border: 1px solid #2c3a55;
  border-radius: 8px;
  padding: 6px 8px;
  background: #1a2231;
  font-size: 12px;
}

/* 목록 헤더(제목 + 안내 문구) */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-shrink: 0;
  gap: 6px;
}
.list-header h4 { margin: 0; }
.list-header small { font-size: 11px; white-space: nowrap; }

/* 노드명/관계명 필터 체크박스 목록 (글자 클릭으로도 토글) */
.filter-list li { padding: 0; }
.filter-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text);
}
.filter-list label:hover { background: #22304a; border-radius: 8px; }
.filter-list input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.filter-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.quick-result {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quick-result li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--panel);
}

@media (max-width: 1300px) {
  .graph-split-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .graph-wrap { height: auto; }
  .graph-network { height: 480px; }
  .graph-info-panel { height: auto; }
  .node-props-panel { max-height: 320px; }
  .name-list { max-height: 140px; }
}

@media (max-width: 1100px) {
  .main-layout, .db-layout, .result-grid {
    grid-template-columns: 1fr;
  }
  .query-editor-row { grid-template-columns: 1fr; }
  .context-panel {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  /* 세로로 쌓이는 좁은 화면에서는 페이지 스크롤 허용 */
  .main-layout {
    height: auto;
    overflow: visible;
  }
  .chat-panel, .context-panel { overflow: visible; }
  .chat-window { min-height: 300px; max-height: 50vh; }
  .context-list { max-height: 50vh; }
}

/* 어두운 테마에 맞춘 스크롤바 스타일 */
.chat-window, .context-list, .name-list, .table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.chat-window::-webkit-scrollbar,
.context-list::-webkit-scrollbar,
.name-list::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.chat-window::-webkit-scrollbar-thumb,
.context-list::-webkit-scrollbar-thumb,
.name-list::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.chat-window::-webkit-scrollbar-track,
.context-list::-webkit-scrollbar-track,
.name-list::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track { background: transparent; }