/* 画面幅の計算を安定させるため、padding と border を要素幅に含める */
* {
  box-sizing: border-box;
}
/* body全体の基本スタイル */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  padding: 16px;
  background: #f7f7f7;
  color: #1f1f1f;
}
/* ローディング中のマウスカーソルスタイル */
body.loading {
  cursor: wait;
}
/* アプリ全体の最大幅を制御するコンテナ */
.app-shell {
  width: min(100%, 960px);
  margin: 0 auto;
}
/* 大見出しのスタイル。画面幅に応じてフォントサイズを調整する */
h1 {
  margin: 0 0 16px;
  font-size: clamp(24px, 5vw, 32px);
}
/* 入力フォーム全体のカード風レイアウト */
.search-form {
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
}
/* 要素を横並びにするレイアウト用のスタイル */
.row {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* フォームのラベルの幅を固定し、太字で表示する */
.row label {
  flex: 0 0 96px;
  font-weight: 600;
}
/* フォーム部品は親幅に合わせて縮小・拡大する */
select,
input[type="text"],
textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
}
/* セレクトボックスと1行テキスト入力の最大幅と最小高さを指定 */
select,
input[type="text"] {
  max-width: 640px;
  min-height: 36px;
}
/* テキストエリアのスタイル。縦方向のみユーザーがリサイズ可能にする */
textarea {
  max-width: 640px;
  min-height: 88px;
  padding: 6px 8px;
  border: 1px solid #999;
  border-radius: 4px;
  resize: vertical;
}
/* 検索行のレイアウト。要素が幅に収まらない場合は折り返しを許可する */
.search-row {
  flex-wrap: wrap;
}
/* 検索行内のテキスト入力欄。利用可能な幅を埋めつつ最小幅を確保する */
.search-row input[type="text"] {
  flex: 1 1 320px;
}
/* バッジ要素の基本スタイル */
.badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}
/* ナレッジベース(KB)用バッジのスタイル */
.kb {
  background: #e6ffed;
  color: #036400;
  border: 1px solid #b7ffcb;
}
/* AI用バッジのスタイル */
.ai {
  background: #e6f7ff;
  color: #004f8a;
  border: 1px solid #99d6ff;
}
/* 補足情報など控えめなテキストのスタイル */
.muted {
  color: #666;
  font-size: 12px;
}
/* ボタンの基本スタイル */
button {
  min-height: 36px;
  padding: 6px 12px;
  cursor: pointer;
}
/* スニペット（回答コード等）表示領域のスタイル */
.snippet-answer {
  white-space: pre-wrap;
  overflow-x: auto;
  background: #181818;
  padding: 10px;
  border-radius: 4px;
  color: #fff;
  font-family: monospace;
  width: 100%;
  margin: 0;
  user-select: all;
}
/* スニペットとコピーボタンを囲むラッパー要素のスタイル */
.snippet-wrapper {
  position: relative;
  /* <pre> タグが本来持っていたマージン (例: margin-top: 1em) の代わりとして設定 */
  margin-top: 4px;
  width: 100%;
}
/* コピーボタンの基本スタイルと配置 */
.copy-btn {
  /* 親ラッパー (.snippet-wrapper) の右上に配置 */
  position: absolute;
  top: 6px; /* pre タグ内側の上端から 8px の位置 */
  right: 8px; /* pre タグ内側の右端から 8px の位置 */

  /* 以下はボタンの見た目を整えるためのスタイルです */
  padding: 3px 8px;
  font-size: 12px;
  background: #444; /* ボタンの背景色 */
  color: white; /* ボタンの文字色 */
  border: 1px solid #666; /* ボタンの枠線 */
  border-radius: 4px; /* 角丸 */
  cursor: pointer; /* マウスオーバー時にクリック可能であることを示す */
  opacity: 0.7; /* 通常時は少し透明にし、目立ちすぎないようにする */
  z-index: 10; /* 他の要素より手前に表示 */
}
/* マウスがボタンに乗った時は、透明度を 1 (不透明) にして分かりやすくする */
.copy-btn:hover {
  opacity: 1;
  background: #555;
}
/* コピー成功時に一時的にスタイルを変更するためのクラス (JavaScript側で使用) */
.copy-btn.copied {
  background: #006400; /* 濃い緑色 */
  color: white;
}
/* エラー表示領域 */
.error {
  background: #ffecec;
  color: #b00020;
  border: 1px solid #ffb3b3;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  font-weight: bold;
}
/* 要素を非表示にするためのユーティリティクラス */
.hidden {
  display: none;
}
/* info表示領域 */
.info {
  background: #e6f7ff;
  color: #004f8a;
  border: 1px solid #99d6ff;
  padding: 12px;
  margin: 10px 0;
  border-radius: 6px;
  font-weight: bold;
}
/* 検索結果表示領域のスタイル。コンテンツがはみ出す場合は横スクロールを表示する */
#results {
  /* max-width: 100%;
  overflow-x: auto; */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: auto;
}
/* 検索結果リストのスタイル。幅を親に合わせ、左側のインデントを調整する */
#results > ul {
  width: 100%;
  margin: 0;
  padding-left: 24px;
}
/* 検索結果リストの各項目のスタイル。横幅いっぱいに広げる */
#results li {
  width: 100%;
}
/* スニペットとコピーボタンを囲むラッパー要素のレイアウト調整（横幅を100%にする） */
.snippet-wrapper {
  width: 100%;
  position: relative;
}
/* スニペット表示領域のレイアウト調整（横幅を100%にし余白をリセットする） */
.snippet-answer {
  width: 100%;
  margin: 0;
}
/* スマートフォンなど、画面幅が700px以下の端末向けのレスポンシブ対応 */
@media (max-width: 700px) {
  /* 画面が小さいため、全体の余白を狭める */
  body {
    padding: 12px;
  }
  /* フォームの余白も同様に狭める */
  .search-form {
    padding: 12px;
  }
  /* 横並びのレイアウトを縦並びに変更し、要素を横幅いっぱいに広げる */
  .row {
    align-items: stretch;
    flex-direction: column;
  }
  /* 縦並びになるため、ラベルの固定幅を解除する */
  .row label {
    flex: none;
  }
  /* 入力要素の最大幅制限を解除し、画面幅に合わせて広がるようにする */
  select,
  input[type="text"],
  textarea {
    max-width: none;
  }
  /* 検索入力欄の flex 指定を auto にし、柔軟に配置されるようにする */
  .search-row input[type="text"] {
    flex: auto;
  }
  /* ボタンやバッジなども、縦並びになった際に横幅いっぱいに広げる */
  button,
  .badge,
  .muted {
    align-self: stretch;
  }
}