/* =====================================================================
   bottom-sheet.css — 情報パネル (3段階ボトムシート) 専用スタイル
   ---------------------------------------------------------------------
   仕様書 §3.6 (ボトムシート 3 段階: Peek/Half/Full) に準拠した実装。
   §5.2.2 警戒レベルカラー (特別警報=紫 / 警報=橙 / 注意報=黄) は
   災害情報の視覚標準のため、ALERT デザイントークン (--color-overflow 等)
   を流用する。
   §5.5 アニメーション (prefers-reduced-motion 尊重) も実装する。
   ===================================================================== */

/* ---------------- ボトムシート本体 ---------------- 
   .app-main 内に配置 (position: absolute、左右いっぱい)。
   3 状態:
     - data-state="peek" : 高さ 48px (handle のみ可視)
     - data-state="half" : 高さ 45vh
     - data-state="full" : 高さ 92vh
   切替は max-height の transition で滑らかに。
   ドラッグ中 (data-dragging="true") は transition を切って指追従。
*/
.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;                 /* layer-panel(400) より上、popup(700) より下 */
  background: var(--color-surface);
  color: var(--color-ink);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 高さは状態属性で切り替え */
  max-height: 48px;
  transition: max-height 280ms cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: pan-y;          /* 縦スワイプを阻害しない、横は地図に渡す */
}

.bottom-sheet[data-state="peek"] { max-height: 48px; }
.bottom-sheet[data-state="half"] { max-height: 45vh; max-height: 45dvh; }
.bottom-sheet[data-state="full"] { max-height: 92vh; max-height: 92dvh; }

/* ドラッグ中は max-height を transition せず、上書きされる translate で表現 */
.bottom-sheet[data-dragging="true"] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet {
    transition: none;
  }
}

/* ---------------- ハンドル (常時可視、Peek 時もこれだけは見える) ----------------
   仕様書 §3.6.1 で Peek 状態の高さは 48px と明記。
   そのうち、ハンドル 14px + Peek 行 34px = 48px に収める。
   タッチ可能領域は handle 14px + peek 34px = 48px > 仕様書 §5.6.1 の 44px。
   touch-action: none でブラウザの縦スクロール処理を奪い、JS の preventDefault
   が確実に効くようにする。
*/
.bottom-sheet__handle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0;
  cursor: grab;
  background: var(--color-surface);
  border: none;
  width: 100%;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.bottom-sheet__handle:active {
  cursor: grabbing;
}

.bottom-sheet__grip {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-line);
  transition: background-color 120ms ease;
}

.bottom-sheet__handle:hover .bottom-sheet__grip,
.bottom-sheet__handle:focus-visible .bottom-sheet__grip {
  background: var(--color-ink-3);
}

.bottom-sheet__handle:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

/* ---------------- Peek 行 (常時可視、警報サマリ表示) ---------------- */
.bottom-sheet__peek {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 34px;                   /* 14 (handle) + 34 = 48 (仕様書 §3.6.1) */
  padding: 0 var(--space-3);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* peek 行もドラッグ起点になるため touch-action: none */
  touch-action: none;
}

.bottom-sheet__peek:hover,
.bottom-sheet__peek:focus-visible {
  background: var(--color-surface-alt);
  outline: none;
}

.bottom-sheet__peek:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

/* レベルインジケーター (左端の丸) */
.bottom-sheet__indicator {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-normal);
  box-shadow: 0 0 0 1px var(--color-line);
}

.bottom-sheet[data-level="emergency"] .bottom-sheet__indicator {
  background: var(--color-overflow);  /* 紫 */
  animation: bottom-sheet-pulse 1.1s linear infinite;
}
.bottom-sheet[data-level="warning"]  .bottom-sheet__indicator { background: var(--color-caution); } /* 橙 */
.bottom-sheet[data-level="advisory"] .bottom-sheet__indicator { background: var(--color-standby); } /* 黄 */
.bottom-sheet[data-level="info"]     .bottom-sheet__indicator { background: var(--color-normal); }
.bottom-sheet[data-level="none"]     .bottom-sheet__indicator { background: var(--color-normal); opacity: 0.45; }
.bottom-sheet[data-level="unknown"]  .bottom-sheet__indicator { background: var(--color-unknown); }

@keyframes bottom-sheet-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet[data-level="emergency"] .bottom-sheet__indicator {
    animation: none;
  }
}

/* ローディング演出: Peek 行の県名にドット点滅 */
.bottom-sheet.is-loading .bottom-sheet__pref::after {
  content: ' …';
  opacity: 0.5;
  animation: bottom-sheet-loading 1.2s ease-in-out infinite;
}

@keyframes bottom-sheet-loading {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet.is-loading .bottom-sheet__pref::after {
    animation: none;
  }
}

/* サマリー領域 (県名 + チップ群) */
.bottom-sheet__summary {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.bottom-sheet__pref {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}

.bottom-sheet__count {
  font-size: 12px;
  color: var(--color-ink-3);
  flex: 0 0 auto;
}

.bottom-sheet__chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.bottom-sheet__chip--emergency { background: var(--color-overflow); color: #fff; }
.bottom-sheet__chip--warning   { background: var(--color-caution);  color: #fff; }
.bottom-sheet__chip--advisory  { background: var(--color-standby);  color: var(--color-ink); }
.bottom-sheet__chip--info      { background: var(--color-normal);   color: #fff; }

/* シェブロン (展開状態の表現) */
.bottom-sheet__chevron {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-ink-3);
  transition: transform 200ms ease-out;
  margin-left: auto;
}

.bottom-sheet[data-state="half"] .bottom-sheet__chevron,
.bottom-sheet[data-state="full"] .bottom-sheet__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet__chevron {
    transition: none;
  }
}

/* ---------------- Body (Half/Full でスクロール) ---------------- */
.bottom-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  /* Peek 時は max-height で本体ごと切り取られて見えない */
}

.bottom-sheet__body::-webkit-scrollbar {
  width: 4px;
}
.bottom-sheet__body::-webkit-scrollbar-thumb {
  background: var(--color-line);
}

/* ---------------- セクション ---------------- */
.bottom-sheet__section {
  padding: var(--space-3);
  border-top: 1px solid var(--color-surface-alt);
}

.bottom-sheet__section:first-child {
  border-top: 1px solid var(--color-line);
}

.bottom-sheet__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.bottom-sheet__section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bottom-sheet__section-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--color-ink-3);
}

.bottom-sheet__refresh {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-ink-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.bottom-sheet__refresh:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.bottom-sheet__refresh:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

/* Section: 警報リスト ----------------- */
.bottom-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bottom-sheet__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 8px 10px;
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-line);
}

.bottom-sheet__item[data-level="emergency"] { border-left-color: var(--color-overflow); }
.bottom-sheet__item[data-level="warning"]   { border-left-color: var(--color-caution); }
.bottom-sheet__item[data-level="advisory"]  { border-left-color: var(--color-standby); }
.bottom-sheet__item[data-level="info"]      { border-left-color: var(--color-normal); }
.bottom-sheet__item[data-level="unknown"]   { border-left-color: var(--color-unknown); }

.bottom-sheet__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.bottom-sheet__item[data-level="emergency"] .bottom-sheet__badge { background: var(--color-overflow); color: #fff; }
.bottom-sheet__item[data-level="warning"]   .bottom-sheet__badge { background: var(--color-caution);  color: #fff; }
.bottom-sheet__item[data-level="advisory"]  .bottom-sheet__badge { background: var(--color-standby);  color: var(--color-ink); }
.bottom-sheet__item[data-level="info"]      .bottom-sheet__badge { background: var(--color-normal);   color: #fff; }
.bottom-sheet__item[data-level="unknown"]   .bottom-sheet__badge { background: var(--color-unknown);  color: #fff; }

.bottom-sheet__item-body {
  flex: 1;
  min-width: 0;
}

.bottom-sheet__kind {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
  margin-bottom: 2px;
}

.bottom-sheet__areas {
  font-size: 11px;
  color: var(--color-ink-2);
  word-break: break-word;
  line-height: 1.4;
}

.bottom-sheet__headline {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-ink-3);
  line-height: 1.4;
  word-break: break-word;
}

.bottom-sheet__empty {
  padding: var(--space-3);
  text-align: center;
  font-size: 12px;
  color: var(--color-ink-3);
}

/* Section: 河川水位サマリ ----------------- */
.bottom-sheet__rivers-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.bottom-sheet__rivers-cell {
  background: var(--color-surface-alt);
  padding: 8px 6px;
  text-align: center;
  border-top: 3px solid var(--color-line);
}

.bottom-sheet__rivers-cell[data-status="overflow"] { border-top-color: var(--color-overflow); }
.bottom-sheet__rivers-cell[data-status="critical"] { border-top-color: var(--color-critical); }
.bottom-sheet__rivers-cell[data-status="danger"]   { border-top-color: var(--color-danger); }
.bottom-sheet__rivers-cell[data-status="caution"]  { border-top-color: var(--color-caution); }
.bottom-sheet__rivers-cell[data-status="standby"]  { border-top-color: var(--color-standby); }
.bottom-sheet__rivers-cell[data-status="normal"]   { border-top-color: var(--color-normal); }

.bottom-sheet__rivers-label {
  font-size: 10px;
  color: var(--color-ink-3);
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.bottom-sheet__rivers-count {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1;
}

.bottom-sheet__rivers-hint {
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--color-ink-3);
  line-height: 1.4;
}

/* Section: 外部リンク集 ----------------- */
.bottom-sheet__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bottom-sheet__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-2);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-surface-alt);
  font-size: 13px;
  min-height: var(--touch-min);
  transition: background-color 120ms ease;
}

.bottom-sheet__link:last-child {
  border-bottom: none;
}

.bottom-sheet__link:hover,
.bottom-sheet__link:focus-visible {
  background: var(--color-surface-alt);
  outline: none;
}

.bottom-sheet__link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

.bottom-sheet__link-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  text-align: center;
}

.bottom-sheet__link-label {
  flex: 1;
  min-width: 0;
}

.bottom-sheet__link-source {
  display: block;
  font-size: 10px;
  color: var(--color-ink-3);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.bottom-sheet__link-arrow {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-ink-3);
}

/* ---------------- 既存 UI との干渉回避 ----------------
   Peek 時はシート高 48px、locate-button と legend を持ち上げる。
   Half/Full に展開しても locate-button は固定位置 (48px の上) にとどまる。
   ユーザーがシートを開けばボタンは隠れる、で OK (仕様書も同様)。
*/
.app-main .legend {
  bottom: calc(var(--space-3) + 48px);
}

.app-main .locate-button {
  bottom: calc(var(--space-4) + 48px);
}

/* スマホ狭幅時の縮小 ---------------------------- */
@media (max-width: 420px) {
  .bottom-sheet__peek {
    padding: 0 var(--space-2);
    gap: 6px;
  }
  .bottom-sheet__pref {
    font-size: 12px;
  }
  .bottom-sheet__chip {
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
  }
  .bottom-sheet__kind {
    font-size: 12px;
  }
  .bottom-sheet__rivers-summary {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .bottom-sheet__rivers-count {
    font-size: 16px;
  }
}

/* セーフエリア対応: bottom: 0 のままで OK
   (mode-bar が safe-area-inset-bottom を吸収しているため、
    bottom-sheet は app-main 内で mode-bar の上に位置する)
*/