/* CHIREKI-001 Session 3 (機能 C): 地歴 DD ウィザード スタイル
 * Self-contained per 鉄則 116-A. All selectors prefixed with `.lhw-` to
 * avoid collision with existing app/index.html and chat-ui.js styles.
 */

/* Full-screen overlay */
.lhw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
               "Yu Gothic", Meiryo, sans-serif;
}

/* Center modal (≤ 1200px) */
.lhw-modal {
  background: #15171F;
  color: #E8E9ED;
  border: 1px solid #2E3140;
  border-radius: 14px;
  /* CHIREKI-001 A5-1: enlarge to 1600px to maximize sub-map visibility */
  width: min(96vw, 1600px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* Header */
.lhw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* CHIREKI-001 A5-1: tighter vertical padding to free up sub-map area */
  padding: 10px 18px;
  border-bottom: 1px solid #2E3140;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.lhw-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lhw-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lhw-pro-badge {
  background: linear-gradient(135deg, #FFD700, #FFAA00);
  color: #1F1500;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.3px;
}
.lhw-title {
  font-weight: 700;
  font-size: 15px;
}
.lhw-address {
  font-size: 12px;
  color: #9098A8;
  font-weight: 500;
}

/* Progress (bars + step number) */
.lhw-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #B0B6C2;
}
.lhw-step-num {
  font-weight: 600;
  color: #E8E9ED;
  margin-right: 4px;
}
.lhw-progress-bar {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: #2E3140;
  display: inline-block;
}
.lhw-progress-bar.active {
  background: #0F6E56;
}

/* Close button */
.lhw-close {
  background: none;
  border: 1px solid #2E3140;
  color: #B0B6C2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lhw-close:hover {
  background: #2E3140;
  color: #E8E9ED;
}

/* AI comment area */
.lhw-comment {
  /* CHIREKI-001 A5-1: tighter chrome to free up sub-map area */
  padding: 8px 14px;
  margin: 8px 14px 0;
  border-left: 4px solid #0F6E56;
  background: #E1F5EE;
  color: #04342C;
  font-size: 12px;
  line-height: 1.55;
  border-radius: 0 8px 8px 0;
  flex: 0 0 auto;
  /* WIZARD-ACCURACY-FIX-001: 欠測警告 1 行分を追加したため 14vh→17vh。
     枠内はスクロールするが、最重要の欠測警告は先頭に置いてある（_renderComment 参照）。 */
  max-height: 17vh;
  overflow-y: auto;
}
/* CHIREKI-001-A6: structured comment list (per-position layer metadata) */
.lhw-comment p {
  margin: 0 0 4px 0;
}
.lhw-comment p:last-child {
  margin-bottom: 0;
}
.lhw-comment-list {
  margin: 6px 0 6px 18px;
  padding: 0;
  font-size: 12px;
  line-height: 1.55;
}
.lhw-comment-list li {
  margin: 2px 0;
}
.lhw-comment-list li strong {
  font-weight: 700;
  color: inherit;
}

/* 4-pane grid (2x2) */
.lhw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* CHIREKI-001 A5-1: tighter gap + smaller side padding for max sub-map area */
  gap: 4px;
  padding: 8px 14px;
  flex: 1 1 auto;
  min-height: 0;  /* allow grid to shrink/grow in flex parent */
}
.lhw-submap {
  position: relative;
  background: #0F1117;
  border: 1px solid #2E3140;
  border-radius: 8px;
  overflow: hidden;
  /* CHIREKI-001 A5-1: rely on grid for sizing; only enforce a small floor for very narrow viewports */
  min-height: 140px;
}
.lhw-submap-label {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  background: rgba(15, 17, 23, 0.85);
  color: #E8E9ED;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   WIZARD-ACCURACY-FIX-001: 欠測バッジ / 出典・凡例 / 免責
   ============================================================ */

/* 枠のデータが取得できなかったことを枠の上に明示する。
   ★ オーバーレイ欠測ではベース地図が見えているため、バッジが無いと
     「調べた結果なにも無かった」と誤読される（本改修の核心）。 */
.lhw-submap-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 17, 23, 0.92);
  border: 1px solid #BA7517;
  color: #F3D9A8;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.lhw-badge-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.lhw-badge-sub {
  font-size: 10px;
  line-height: 1.35;
  color: #D8CBB4;
  word-break: break-word;
}

/* コメント内で「判定できません」と示す箇所 */
.lhw-c-na {
  color: #8A5A00;
  font-style: normal;
}

/* 出典・凡例のストリップ */
.lhw-meta {
  flex: 0 0 auto;
  max-height: 96px;
  overflow-y: auto;
  padding: 6px 14px 0;
  font-size: 10px;
  line-height: 1.5;
  color: #A9AEBC;
}
.lhw-meta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 3px;
}
.lhw-meta-title {
  flex: 0 0 auto;
  font-weight: 700;
  color: #C7CCD9;
}
.lhw-leg-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
}
.lhw-leg-name {
  font-weight: 600;
  color: #C7CCD9;
}
.lhw-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.lhw-leg-item i {
  width: 11px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.lhw-src-list {
  word-break: break-word;
}

/* 免責（全ステップ常時表示） */
.lhw-disclaimer {
  flex: 0 0 auto;
  padding: 4px 14px 0;
  font-size: 10px;
  line-height: 1.5;
  color: #9AA0AE;
}

/* Footer */
.lhw-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  /* CHIREKI-001 A5-1: tighter footer padding */
  padding: 8px 14px;
  border-top: 1px solid #2E3140;
  background: #11131B;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.lhw-step-hint {
  flex: 1;
  font-size: 12px;
  color: #9098A8;
  margin: 0 8px;
  text-align: center;
}
.lhw-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s, background .15s, border-color .15s;
  font-family: inherit;
}
.lhw-btn-back {
  background: transparent;
  color: #B0B6C2;
  border-color: #2E3140;
}
.lhw-btn-back:hover:not(:disabled) {
  background: #1B1E29;
  color: #E8E9ED;
}
.lhw-btn-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lhw-btn-next, .lhw-btn-finish {
  background: #0F6E56;
  color: #FFFFFF;
}
.lhw-btn-next:hover, .lhw-btn-finish:hover {
  background: #085041;
}
.lhw-btn-pdf {
  background: transparent;
  color: #FFD700;
  border-color: rgba(255, 215, 0, 0.4);
}
.lhw-btn-pdf:hover {
  background: rgba(255, 215, 0, 0.08);
}

/* MapLibre overrides inside wizard sub-maps (avoid bleeding into main map) */
.lhw-submap .maplibregl-canvas-container {
  cursor: default;
}
.lhw-submap .maplibregl-ctrl-attrib {
  display: none;  /* sub-maps are decorative; main map keeps attribution */
}

/* ============================================================
 * CHIREKI-001 A5-mobile: comprehensive responsive overrides for ≤768px.
 * Replaces the prior 720px block. Targets iPhone SE (375), iPhone 14 Pro
 * (390), Galaxy S20 (360), and standard tablets in portrait.
 * ============================================================ */
@media (max-width: 768px) {
  .lhw-overlay {
    padding: 0;
    /* iOS dynamic viewport: avoid jumpy 100vh when URL bar shows/hides */
    height: 100vh;
    height: 100dvh;
    align-items: stretch;  /* full-bleed modal on mobile */
  }
  .lhw-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    /* Allow the entire modal contents to scroll vertically when the
     * stacked sub-maps + chrome exceed viewport height. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iPhone notch + home indicator safe area at bottom */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Header: stack vertically for narrow viewports */
  .lhw-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top, 0));
  }
  .lhw-header-left {
    width: 100%;
    gap: 8px;
  }
  .lhw-header-right {
    width: 100%;
    justify-content: space-between;
  }
  .lhw-title { font-size: 14px; }
  .lhw-address { font-size: 11px; }
  .lhw-progress { font-size: 11px; }

  /* Larger close target (iOS HIG ≥ 44×44) */
  .lhw-close {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  /* Comment: tighter chrome, allow scroll */
  .lhw-comment {
    margin: 8px 12px 0;
    padding: 10px 12px;
    font-size: 12px;
    max-height: 18vh;
  }

  /* Sub-maps: vertical stack (1 column × 4 rows) */
  .lhw-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(220px, 1fr));
    gap: 6px;
    padding: 8px 12px;
    /* Allow the grid to exceed viewport so user can scroll through 4 maps */
    flex: 0 0 auto;
    min-height: calc(4 * 220px + 18px);
  }
  .lhw-submap {
    min-height: 220px;
  }
  .lhw-submap-label {
    font-size: 12px;
    padding: 4px 10px;
  }

  /* Footer: large touch targets, allow wrap, iOS-safe font size */
  .lhw-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    /* sticky-ish — keep accessible at bottom of scrollable modal */
    position: sticky;
    bottom: 0;
    background: #11131B;
    z-index: 2;
  }
  .lhw-step-hint {
    /* In stacked layout, a long hint can push buttons off — clamp it */
    flex: 1 1 100%;
    order: -1;
    font-size: 11px;
    margin: 0;
    text-align: center;
  }
  .lhw-btn {
    font-size: 16px;       /* ≥16px prevents iOS auto-zoom on tap */
    min-height: 44px;
    padding: 10px 16px;
    /* Reduce 300ms tap delay on mobile webkit */
    touch-action: manipulation;
  }
  .lhw-btn-back, .lhw-btn-next, .lhw-btn-finish {
    flex: 1 1 calc(50% - 4px);
  }
  .lhw-btn-pdf {
    flex: 1 1 100%;
    order: 1;  /* below the navigation row */
  }
  .lhw-pdf-pro-badge,
  .lhw-pdf-soon-badge {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* Even narrower (≤ 380px iPhone SE 1st gen, etc.) — extra compactness */
@media (max-width: 380px) {
  .lhw-header { padding: 8px 10px; gap: 6px; }
  .lhw-comment { margin: 6px 10px 0; padding: 8px 10px; font-size: 11px; max-height: 16vh; }
  .lhw-grid { padding: 6px 10px; }
  .lhw-submap { min-height: 200px; }
  .lhw-grid { grid-template-rows: repeat(4, minmax(200px, 1fr)); min-height: calc(4 * 200px + 18px); }
  .lhw-footer { padding: 8px 10px; gap: 6px; }
  .lhw-title { font-size: 13px; }
}

/* PDF "Coming Soon" modal: mobile-friendly sizing on small screens */
@media (max-width: 768px) {
  .lhw-pdf-overlay { padding: 16px; }
  .lhw-pdf-modal {
    width: max(320px, 90vw);
    padding: 18px 18px;
  }
  .lhw-pdf-icon { font-size: 28px; }
  .lhw-pdf-title { font-size: 15px; }
  .lhw-pdf-desc { font-size: 13px; line-height: 1.55; }
  .lhw-pdf-actions { gap: 8px; flex-wrap: wrap; }
  .lhw-pdf-actions .lhw-btn {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    font-size: 15px;
  }
}


/* ============================================================
 * CHIREKI-001 A5-2: PDF "Coming Soon" modal + button badges
 * ============================================================ */

/* Inline badges inside the PDF button */
.lhw-btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lhw-pdf-pro-badge {
  background: linear-gradient(135deg, #FFD700, #FFAA00);
  color: #1F1500;
  font-weight: 700;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  line-height: 1;
}
.lhw-pdf-soon-badge {
  background: rgba(186, 117, 23, 0.18);
  color: #FFD27A;
  border: 1px solid rgba(186, 117, 23, 0.5);
  font-weight: 600;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* "Coming Soon" modal overlay (above the wizard overlay, z 1400) */
.lhw-pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lhw-pdf-modal {
  background: #15171F;
  color: #E8E9ED;
  border: 1px solid #2E3140;
  border-radius: 14px;
  width: min(92vw, 460px);
  padding: 22px 24px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
.lhw-pdf-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}
.lhw-pdf-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #FFD27A;
}
.lhw-pdf-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #B0B6C2;
  margin: 0 0 18px 0;
}
.lhw-pdf-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.lhw-pdf-thanks {
  font-size: 13px;
  font-weight: 600;
  color: #6FE0B0;
  margin-top: 10px;
}