/* @mql5/core-ai-advisor — AI 분석 팝업 스타일 (FXTester + GoldMiner 공용).
 *
 * 양앱 index.html 이 <link href="/packages/core-ai-advisor/src/ai-panel.css"> 로 로드
 * (두 서버 모두 /packages/ 정적 서빙).
 *
 * ⚠️ GoldMiner 에는 전역 .is-hidden 이 없다 → 표시/숨김은 .is-open 자체 클래스로만.
 *    기본 상태(=.is-open 없음)가 display:none 이므로 클래스 하나로 양앱 동작 일치.
 * z-index 는 MultiClose 패널(.mc-panel)보다 위. 차트 오버레이(10/11)보다 훨씬 위.
 * ⚠️ GM 차트 최대화(.chart-panel-maximized)는 z-index:2500 의 fixed 레이어 —
 *    1200 이면 팝업이 그 뒤에 묻혀 "클릭해도 아무것도 안 뜸"이 된다
 *    (floating-trade-panel 1100→2600 승격과 동일 회귀, 2026-08-08).
 *    2500(최대화)·2600(플로팅 트레이드)보다 위, GM modal 층(9999)보다 아래 = 2700.
 */

.ai-panel {
  display: none;
  position: fixed;
  top: 64px;
  right: 16px;
  width: 460px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 96px);
  flex-direction: column;
  z-index: 2700;
  background: #0d1117;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  font: 400 13px/1.65 "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
}

.ai-panel.is-open {
  display: flex;
}

.ai-panel.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* ── 헤더 ─────────────────────────────────────────────────────────────── */
.ai-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  cursor: move;
  flex: 0 0 auto;
}

.ai-panel-title {
  font-weight: 700;
  font-size: 13px;
  color: #e6edf3;
  white-space: nowrap;
}

.ai-panel-status {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-panel-status.is-busy { color: #58a6ff; }
.ai-panel-status.is-done { color: #3fb950; }
.ai-panel-status.is-warn { color: #d29922; }
/* 봉마감 대기 — 실행 전이지만 "예약됨"을 눈에 띄게. */
.ai-panel-status.is-wait { color: #d29922; }
.ai-panel-status.is-error { color: #f85149; }

.ai-panel-btn,
.ai-panel-close {
  flex: 0 0 auto;
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
.ai-panel-btn:hover:not(:disabled),
.ai-panel-close:hover { background: #30363d; }
.ai-panel-btn:disabled { opacity: 0.45; cursor: default; }

.ai-panel-close {
  padding: 1px 7px;
  font-size: 15px;
  line-height: 1.2;
}

/* ── 본문 ─────────────────────────────────────────────────────────────── */
.ai-panel-body {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ai-panel-body h2,
.ai-panel-body h3,
.ai-panel-body h4,
.ai-panel-body h5 {
  color: #e6edf3;
  margin: 22px 0 8px;
  line-height: 1.4;
}
.ai-panel-body h2 { font-size: 15px; border-bottom: 1px solid #30363d; padding-bottom: 4px; }
.ai-panel-body h3 { font-size: 13.5px; color: #58a6ff; }
.ai-panel-body h4,
.ai-panel-body h5 { font-size: 12.5px; color: #a5b3c2; }
.ai-panel-body > :first-child { margin-top: 0; }

/* 프로즈 가독성: 문단 간격·행간이 붙어 있으면 분석문이 통째로 벽이 된다. */
.ai-panel-body p { margin: 0 0 13px; line-height: 1.8; word-break: break-word; }

.ai-panel-body ul {
  margin: 0 0 13px;
  padding-left: 18px;
}
.ai-panel-body li { margin: 0 0 6px; line-height: 1.8; word-break: break-word; }

/* 문단 안의 각 줄(원문 개행 + 긴 줄 문장 분리). <br> 대신 블록이라 여백을 줄 수 있다. */
.ai-panel-body .md-ln { display: block; }
.ai-panel-body .md-ln + .md-ln { margin-top: 0.42em; }

.ai-panel-body strong { color: #e6edf3; font-weight: 700; }

.ai-panel-body code {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 3px;
  padding: 0 4px;
  font: 400 11.5px/1.5 Consolas, "SFMono-Regular", monospace;
  color: #e3b341;
}

.ai-panel-notice {
  padding: 14px 12px;
  border-radius: 6px;
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 12.5px;
  line-height: 1.7;
}
.ai-panel-notice.is-error { border-color: #6e2b26; color: #f0a29c; }

/* ── 보고서 목록 뷰 (헤더 [목록] 토글) ─────────────────────────────────── */
/* 본문과 목록은 **동시에 존재**하고 여기서 하나만 보여준다. 그래야 목록을 보는
 * 동안에도 스트리밍 렌더가 숨겨진 .ai-panel-body 에 계속 쌓인다(분석 미중단). */
.ai-panel-list {
  display: none;
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ai-panel.is-list-view .ai-panel-body { display: none; }
.ai-panel.is-list-view .ai-panel-list { display: block; }
/* 목록을 보는 동안에는 "현재 보고서" 링크 바를 숨긴다 — 목록에 이미 들어 있다. */
.ai-panel.is-list-view .ai-panel-report-bar { display: none; }

.ai-report-list-msg {
  display: none;
  margin: 0 0 8px;
  padding: 6px 9px;
  border-radius: 5px;
  background: #161b22;
  border: 1px solid #30363d;
  font-size: 11.5px;
  line-height: 1.6;
  color: #8b949e;
}
.ai-report-list-msg.is-visible { display: block; }
.ai-report-list-msg.is-warn { border-color: #6b5116; color: #d29922; }
.ai-report-list-msg.is-error { border-color: #6e2b26; color: #f0a29c; }

.ai-report-list-head {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #6e7681;
}

.ai-report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-report-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

/* 항목 본체 = 버튼. 클릭 = 새 탭(동기 window.open). */
.ai-report-item-open {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  text-align: left;
  background: #161b22;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 5px;
  padding: 7px 10px;
  font: inherit;
  cursor: pointer;
}
.ai-report-item-open:hover { background: #21262d; border-color: #58a6ff; }

.ai-report-item-head {
  font-size: 12.5px;
  font-weight: 700;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-report-item-when {
  font-size: 11px;
  color: #8b949e;
  white-space: nowrap;
  justify-self: end;
}
.ai-report-item-sub {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #6e7681;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 삭제는 2단계 — 1회차엔 .is-confirming 으로 바뀌고, 같은 버튼을 다시 눌러야 지운다. */
.ai-report-item-del {
  flex: 0 0 auto;
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 5px;
  padding: 0 10px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ai-report-item-del:hover:not(:disabled) { background: #2b1b1b; color: #ff7b72; border-color: #5a2b2b; }
.ai-report-item-del:disabled { opacity: 0.45; cursor: default; }
.ai-report-item-del.is-confirming {
  background: #3a2020;
  color: #ff7b72;
  border-color: #f85149;
  font-weight: 700;
}

/* ── 보고서 링크 바 (본문 하단, 완료 후에만 노출) ─────────────────────── */
/* 헤더 [목록] 이 주 진입점이고 이건 방금 끝난 분석으로의 보조 진입점이다. */
.ai-panel-report-bar {
  display: none;
  flex: 0 0 auto;
  padding: 8px 14px;
  border-top: 1px solid #30363d;
  background: #161b22;
}
.ai-panel-report-bar.is-visible { display: block; }

.ai-panel-report-link {
  color: #58a6ff;
  font-size: 12px;
  text-decoration: none;
  font-weight: 700;
}
.ai-panel-report-link:hover { text-decoration: underline; }

/* ── 실행 전 선택 화면 ─────────────────────────────────────────────────── */
/* .ai-setup-row 는 반복 구조 — 추후 "트레이더" 등 행을 그대로 덧붙인다. */
.ai-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 2px;
}

.ai-setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* 아주 좁은 화면에서 세그먼트가 다음 줄로 */
}

.ai-setup-label {
  flex: 0 0 auto;
  min-width: 48px;
  font-size: 12px;
  font-weight: 700;
  color: #8b949e;
}

.ai-setup-seg {
  display: inline-flex;
  gap: 0;
  border: 1px solid #30363d;
  border-radius: 5px;
  overflow: hidden;
}

.ai-setup-seg-btn {
  background: #21262d;
  color: #8b949e;
  border: 0;
  border-left: 1px solid #30363d;
  padding: 5px 14px;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.ai-setup-seg-btn:first-child { border-left: 0; }
.ai-setup-seg-btn:hover { background: #30363d; color: #c9d1d9; }
.ai-setup-seg-btn.is-active {
  background: #1f6feb;
  color: #ffffff;
  font-weight: 700;
}
.ai-setup-seg-btn.is-active:hover { background: #388bfd; }

/* 힌트는 자기 행 바로 아래에 붙는다 — 행이 여러 개일 때 소속이 모호해지지
 * 않도록 위 여백을 줄이고 라벨(48) + gap(10) 만큼 들여쓴다. */
.ai-setup-hint {
  margin-top: -6px;
  padding-left: 58px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #6e7681;
}

/* 왼쪽 = 봉마감 체크박스 / 오른쪽 = [진행]. 체크한 채 진행하면 즉시 실행 대신
 * 다음 봉마감을 기다린다(구 좌하단 예약 토글의 대체). */
.ai-setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.ai-setup-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #8b949e;
  cursor: pointer;
  user-select: none;
}
.ai-setup-check input { margin: 0; width: 14px; height: 14px; cursor: pointer; accent-color: #1f6feb; }
.ai-setup-check:hover { color: #c9d1d9; }

/* 체크박스 설명은 액션 줄 아래 — 들여쓰기 없이 전폭으로 둔다. */
.ai-setup-hint.ai-setup-check-hint { margin-top: 0; padding-left: 0; }

.ai-panel-btn.ai-setup-run {
  padding: 6px 20px;
  font-size: 12.5px;
  font-weight: 700;
  background: #238636;
  border-color: #2ea043;
  color: #ffffff;
}
.ai-panel-btn.ai-setup-run:hover:not(:disabled) { background: #2ea043; }

/* ── 회전 스피너 (차트 마커 전용) ─────────────────────────────────────── */
/* 코드베이스에 회전 keyframes 가 없어 여기서 처음 정의한다. 회전 대상은 항상
 * SVG 안의 [data-ai-spin] 그룹이고, 켜는 스위치는 부모의 .is-busy 다.
 * (구 좌하단 툴바 버튼 .btn-ai-report 는 제거됐다 — 목록은 팝업 헤더 [목록].) */
@keyframes ai-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ai-report-marker [data-ai-spin] {
  display: none;
  transform-origin: 10px 10px; /* viewBox 0 0 20 20 의 중심 */
}
.ai-report-marker.is-busy [data-ai-spin] {
  display: block;
  animation: ai-spin 0.9s linear infinite;
}
.ai-report-marker.is-busy .ai-report-doc { opacity: 0.25; }

/* ── 차트 시간축 AI 분석 마커 ─────────────────────────────────────────── */
/* 자리는 시간축 라벨 **아래**의 빈 띠(≈20px) — 마커 지름은 JS 가 그 띠 높이에서
 * 계산해 인라인으로 넣는다(report-markers.js `_placement`). 여기 아이콘 크기는
 * 그 지름(10~16px) 안에 들어가는 값이어야 한다. */
/* z-index 사다리: 세션박스 < 경제이벤트 7 < 캔들타이머 8 < P&L 9.
 * 마커는 경제 이벤트와 같은 높이대에 살지만 클릭 대상이라 살짝 위(7.5→8 대신 7). */
.ai-report-marker-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 7;
}

.ai-report-marker {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #30363d;
  border-radius: 50%;
  background: #0d1117;
  color: #58a6ff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ai-report-marker:hover { background: #161b22; border-color: #58a6ff; }
.ai-report-marker.is-busy { cursor: progress; color: #d29922; }
.ai-report-marker.is-done { color: #3fb950; border-color: #2ea043; }

.ai-report-marker-icon {
  width: 10px;
  height: 10px;
  display: block;
}
/* 인라인 SVG 는 draw-icon-stroke 컨벤션을 그대로 쓴다 (툴바 아이콘과 동일). */
.ai-report-marker .draw-icon-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 모바일: 아이콘을 마커 지름 한계(16px, 테두리 1px×2 제외 14px)까지 키운다.
 * 지름 자체는 더 못 키운다 — 띠를 넘으면 시간축 라벨/서브패널을 침범한다. */
@media (pointer: coarse) {
  .ai-report-marker-icon { width: 12px; height: 12px; }
}

/* 애니메이션을 끈 사용자에게는 정적 표시로 대체 (GM index.css 선례). */
@media (prefers-reduced-motion: reduce) {
  .ai-report-marker.is-busy [data-ai-spin] { animation: none; }
  .ai-report-marker.is-busy .ai-report-doc { opacity: 0.55; }
}

/* 라이트 테마 (GM body.theme-light / FX 는 항상 다크) */
body.theme-light .ai-report-marker {
  background: #ffffff;
  border-color: #d0d7de;
  color: #0969da;
  box-shadow: 0 1px 4px rgba(31, 35, 40, 0.2);
}
body.theme-light .ai-report-marker:hover { background: #f6f8fa; border-color: #0969da; }
body.theme-light .ai-report-marker.is-done { color: #1a7f37; border-color: #1f883d; }
body.theme-light .ai-report-marker.is-busy { color: #9a6700; }

/* ── 모바일(coarse pointer): 전폭에 가까운 시트 ────────────────────────── */
@media (pointer: coarse) {
  .ai-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 16px);
    font-size: 14px;
  }
  .ai-panel-header { padding: 10px 12px; cursor: default; }
  .ai-panel-btn,
  .ai-panel-close { padding: 6px 10px; font-size: 12px; }
  .ai-panel-close { font-size: 17px; }
  .ai-panel-body { padding: 12px 14px 24px; }
  /* 목록: 터치 타깃을 키운다(항목 44px 대). */
  .ai-panel-list { padding: 12px 14px 24px; }
  .ai-report-list { gap: 8px; }
  .ai-report-item-open { padding: 10px 12px; }
  .ai-report-item-head { font-size: 13.5px; }
  .ai-report-item-when,
  .ai-report-item-sub { font-size: 12px; }
  .ai-report-item-del { padding: 0 14px; font-size: 12px; }
  .ai-setup { gap: 14px; }
  .ai-setup-label { font-size: 13px; }
  /* 3개짜리 세그먼트(모델)가 좁은 화면에서 넘치지 않게 좌우 패딩을 줄인다. */
  .ai-setup-seg-btn { padding: 9px 16px; font-size: 13px; }
  .ai-setup-hint { padding-left: 0; font-size: 12px; }
  /* 체크박스는 고정폭으로 두고 [진행]만 남은 폭을 채운다. */
  .ai-setup-actions { justify-content: space-between; }
  .ai-setup-check { flex: 0 0 auto; font-size: 13px; }
  .ai-setup-check input { width: 17px; height: 17px; }
  .ai-panel-btn.ai-setup-run { flex: 1 1 auto; padding: 11px 20px; font-size: 14px; }
}

/* ── 라이트 테마 (GoldMiner body.theme-light) ──────────────────────────── */
body.theme-light .ai-panel {
  background: #ffffff;
  color: #24292f;
  border-color: #d0d7de;
  box-shadow: 0 10px 28px rgba(31, 35, 40, 0.22);
}
body.theme-light .ai-panel-header {
  background: #f6f8fa;
  border-bottom-color: #d0d7de;
}
body.theme-light .ai-panel-title,
body.theme-light .ai-panel-body strong { color: #1f2328; }
body.theme-light .ai-panel-btn,
body.theme-light .ai-panel-close {
  background: #f6f8fa;
  color: #24292f;
  border-color: #d0d7de;
}
body.theme-light .ai-panel-btn:hover:not(:disabled),
body.theme-light .ai-panel-close:hover { background: #eaeef2; }
body.theme-light .ai-panel-body h2 { color: #1f2328; border-bottom-color: #d0d7de; }
body.theme-light .ai-panel-body h3 { color: #0969da; }
body.theme-light .ai-panel-body h4,
body.theme-light .ai-panel-body h5 { color: #57606a; }
body.theme-light .ai-panel-body code {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #953800;
}
body.theme-light .ai-panel-notice {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #57606a;
}
body.theme-light .ai-panel-notice.is-error { border-color: #ffcecb; color: #cf222e; }

body.theme-light .ai-panel-report-bar {
  background: #f6f8fa;
  border-top-color: #d0d7de;
}
body.theme-light .ai-panel-report-link { color: #0969da; }

body.theme-light .ai-report-list-head { color: #6e7781; }
body.theme-light .ai-report-list-msg {
  background: #f6f8fa;
  border-color: #d0d7de;
  color: #57606a;
}
body.theme-light .ai-report-list-msg.is-warn { border-color: #d4a72c; color: #9a6700; }
body.theme-light .ai-report-list-msg.is-error { border-color: #ffcecb; color: #cf222e; }
body.theme-light .ai-report-item-open {
  background: #f6f8fa;
  color: #24292f;
  border-color: #d0d7de;
}
body.theme-light .ai-report-item-open:hover { background: #eaeef2; border-color: #0969da; }
body.theme-light .ai-report-item-head { color: #1f2328; }
body.theme-light .ai-report-item-when { color: #57606a; }
body.theme-light .ai-report-item-sub { color: #6e7781; }
body.theme-light .ai-report-item-del {
  background: #f6f8fa;
  color: #57606a;
  border-color: #d0d7de;
}
body.theme-light .ai-report-item-del:hover:not(:disabled) { background: #ffebe9; color: #cf222e; border-color: #ffcecb; }
body.theme-light .ai-report-item-del.is-confirming {
  background: #ffebe9;
  color: #cf222e;
  border-color: #cf222e;
}

body.theme-light .ai-setup-label { color: #57606a; }
body.theme-light .ai-setup-seg { border-color: #d0d7de; }
body.theme-light .ai-setup-seg-btn {
  background: #f6f8fa;
  color: #57606a;
  border-left-color: #d0d7de;
}
body.theme-light .ai-setup-seg-btn:hover { background: #eaeef2; color: #24292f; }
body.theme-light .ai-setup-seg-btn.is-active {
  background: #0969da;
  color: #ffffff;
}
body.theme-light .ai-setup-seg-btn.is-active:hover { background: #0a6fd8; }
body.theme-light .ai-setup-hint { color: #6e7781; }
body.theme-light .ai-setup-check { color: #57606a; }
body.theme-light .ai-setup-check:hover { color: #24292f; }
body.theme-light .ai-panel-btn.ai-setup-run {
  background: #1f883d;
  border-color: #1a7f37;
  color: #ffffff;
}
body.theme-light .ai-panel-btn.ai-setup-run:hover:not(:disabled) { background: #1a7f37; }