/* Extracted from templates/visualizer.html */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
}

#container {
  position: fixed; /* 항상 뷰포트 기준으로 고정 */
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 모바일 뷰포트(주소창) 대응 */
  display: flex;
}

#canvas-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

/* three.js 캔버스가 컨테이너를 꽉 채우도록 강제 */
#canvas-container canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* 공통 글래스 패널 (투명 UI) */
:root {
  /* 더 투명하게: 여기만 조절하면 status/controls/sidebar가 함께 바뀜 */
  --hud-bg: rgba(10, 12, 18, 0.2);
  --hud-border: rgba(0, 255, 255, 0.28);
  --hud-shadow: rgba(0, 0, 0, 0.75);
}

.glass-panel {
  background: var(--hud-bg);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border: 1px solid var(--hud-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  color: #fff;
  text-shadow: 0 1px 2px var(--hud-shadow);
}

/* 사이드바: 캔버스 위에 떠 있는 패널(HUD)로 변경 */
#sidebar {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 380px;
  max-height: calc(100vh - 40px);
  padding: 16px;
  overflow-y: auto;
  border-radius: 10px;
  z-index: 600; /* status/controls 보다 위로 */

  /* 기존 고정 컬럼 스타일 제거 */
  /*border-left: none;*/
}

/* (중복 지정이 있었던 background/blur는 glass-panel이 담당하므로 제거해도 됨)
   다만 기존 파일에 두 번 정의돼 있을 수 있어, 여기서 확실히 덮어씀 */
#sidebar {
  background: var(--hud-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#sidebar h2 {
  color: #00ffff;
  margin-bottom: 12px;
  font-size: 18px;
}

#search-input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.01); /* 입력창도 더 투명 */
  border: 1px solid rgba(0, 255, 255, 0.55);
  border-radius: 6px;
  color: #fff;
  margin-bottom: 10px;
  outline: none;
}

#search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#search-button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

#search-button:hover {
  background: rgba(0, 255, 255, 0.15);
  transform: translateY(-2px);
}

#search-button:disabled {
  background: #555;
  cursor: not-allowed;
}

/* haruapi 인증 키 */
#apikey-panel {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 255, 255, 0.18);
  font-size: 13px;
}

#apikey-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #00ffff;
  cursor: pointer;
  user-select: none;
}

#apikey-state {
  font-size: 12px;
  opacity: 0.85;
}

#apikey-state.is-set {
  color: #00ff99;
}

#apikey-state.is-unset {
  color: #ffaa00;
}

#apikey-body {
  display: none;
  margin-top: 8px;
}

#apikey-input {
  width: 100%;
  padding: 8px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.01);
  border: 1px solid rgba(0, 255, 255, 0.55);
  border-radius: 6px;
  color: #fff;
  outline: none;
}

#apikey-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#apikey-buttons {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

#apikey-buttons button {
  flex: 1;
  padding: 6px;
  font-size: 13px;
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

#apikey-buttons button:hover {
  background: rgba(0, 255, 255, 0.15);
}

#apikey-hint {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.75;
}

/* 상태 표시 */
#status {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  z-index: 500;
  background: var(--hud-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hud-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px var(--hud-shadow);
}

.status-item {
  margin: 5px 0;
  font-size: 14px;
}

.status-label {
  color: #00ffff;
  font-weight: bold;
}

/* 컨트롤 */
#controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 15px;
  border-radius: 8px;
  z-index: 500;
  background: var(--hud-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hud-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px var(--hud-shadow);
}

.control-item {
  margin: 10px 0;
}

.control-label {
  display: block;
  color: #00ffff;
  font-size: 12px;
  margin-bottom: 5px;
}

input[type='range'] {
  width: 200px;
  accent-color: #00ffff;
}

/* 검색 결과 */
#results {
  margin-top: 14px;
}

/* sidebar가 떠 있는 패널이라, 아이템도 살짝 더 깔끔하게 */
.result-item {
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(0, 100, 150, 0.1);
  border-left: 2px solid rgba(0, 255, 255, 0.55);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}

.result-item:hover {
  background: rgba(0, 150, 200, 0.22);
  transform: translateX(5px);
}

.result-score {
  color: #00ffff;
  font-size: 11px;
  margin-top: 3px;
}

/* 검색 결과: 원문과 번역문 스타일 */
.result-text-original {
  color: #e8e8e8;
  line-height: 1.5;
  margin-bottom: 6px;
  word-break: break-word;
}

.result-text-translation {
  color: #a0a0a0;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: break-word;
  padding-left: 8px;
  border-left: 2px solid rgba(160, 160, 160, 0.3);
}

/* 검색어 고정 강조 표시 */
#query-banner {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.45);
  background: rgba(255, 215, 0, 0.08);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  display: none; /* 검색 후 표시 */
}

#query-banner .label {
  color: #ffd400;
  font-weight: 700;
  margin-right: 6px;
}

#query-banner .value {
  color: #ffffff;
  font-weight: 600;
  word-break: break-word;
}

/* 사이드바가 화면을 가리면 숨길 수 있도록: 좁은 화면 대응 */
@media (max-width: 900px) {
  #sidebar {
    width: min(92vw, 420px);
    right: 10px;
    top: 10px;
    max-height: calc(100vh - 20px);
  }
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 255, 0.75);
  border-radius: 4px;
}

#tooltip {
  position: absolute;
  display: none;
  padding: 12px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #00ffff;
  border-radius: 6px;
  color: #fff;
  pointer-events: none; /* 툴팁이 마우스 이벤트를 가로채지 않도록 */
  max-width: 400px;
  font-size: 18px;
  line-height: 1.5;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}