/* General Body Styles */
body {
  font-family: sans-serif;
  /* Adjust margin-top to accommodate the filter bar when it slides down */
  margin-top: 110px; /* Nav (60px) + Filter bar (approx 50px) */
}

/* Fixed Navigation Bar */
#index-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f8f9fa;
  padding: 10px 20px;
  border-bottom: 1px solid #dee2e6;
  z-index: 1000;
  text-align: center;
}

#index-nav p {
  margin: 0;
}

#index-nav a {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  margin: 0 15px;
}

/* Filter Buttons Container */
#filter-buttons-container {
  text-align: center; /* Center the buttons */
  padding: 10px 20px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
  position: fixed; /* Changed from sticky to fixed */
  top: 60px; /* Position below the nav bar */
  left: 0;
  width: 100%;
  z-index: 999; /* Below nav, above content */
  transform: translateY(-100%); /* Initially hidden above the viewport */
  transition: transform 0.3s ease-in-out; /* Smooth slide animation */
}

#filter-buttons-container.show-filter-bar {
  transform: translateY(0); /* Show when this class is added */
}

/* LLM List Container */
#llm-list-container {
  padding: 20px;
}

/* Accordion Styles */
details {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

summary {
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
}

.summary-content {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.llm-title {
  font-weight: bold;
}

details[open] summary {
  border-bottom: 1px solid #ccc;
}

.description {
  padding: 15px;
  border-top: 1px solid #eee;
  color: #333;
}

/* Inline Function Button Styles */
.functions-inline .btn {
  display: inline-block;
  padding: 4px 10px;
  margin-left: 8px;
  border-radius: 15px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  cursor: default; /* No pointer for non-filter buttons */
  border: none;
}

/* Filter Button Styles */
.filter-btn {
  display: inline-block;
  padding: 4px 10px;
  margin: 4px;
  border-radius: 15px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer; /* Pointer for filter buttons */
  border: none;
  transition: background-color 0.3s ease, filter 0.3s ease; /* Smooth transition */
}

/* Specific style for the "全て" button */
.filter-btn[data-filter="all"] {
  background-color: #6c757d; /* A darker gray for visibility */
}

/* Hover effect for filter buttons */
.filter-btn:hover {
  filter: brightness(1.2); /* More lighter on hover */
}

/* Active state for filter buttons */
.filter-btn.active {
  filter: brightness(1.4); /* Even more lighter when active */
  border: 2px solid white; /* Keep the white border */
}

/* Function specific colors */
.function-doc {
  background-color: #4285f4;
} /* 文書作成: 青 */
.function-image {
  background-color: #db4437;
} /* 画像生成: 赤 */
.function-sound {
  background-color: #6b0438;
} /* 音声生成: ダークレッド */
.function-music {
  background-color: #ff69b4;
} /* 音楽生成: ホットピンク */
.function-sfx {
  background-color: #fc107e;
} /* 効果音生成: オレンジレッド */
.function-logo {
  background-color: #9c7a1c;
} /* ロゴ生成: 黄色 */
.function-code {
  background-color: #0f9d58;
} /* コード生成: 緑 */
.function-video {
  background-color: #8a2be2;
} /* 動画生成: 紫 */
.function-web {
  background-color: #03d67e;
} /* Webサイト生成: 紫 */
.function-chat {
  background-color: #20b2aa;
} /* 対話AI: 青緑 */
.function-auto {
  background-color: #ffa500;
} /* 自動化: オレンジ */
.function-benchmark {
  background-color: #00008b;
} /* 評価・情報: 濃い青 */
.function-slide {
  background-color: #ba55d3;
} /* スライド作成: ミディアムオーキッド */
.function-mindmap {
  background-color: #4682b4;
} /* マインドマップ作成: スチールブルー */
.function-other {
  background-color: #808080;
} /* その他: 灰 */

/* Back to Top Button Styles */
#to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 40px; /* Adjusted for desktop to avoid classification buttons */
  z-index: 1000;
  background-color: rgba(
    51,
    51,
    51,
    0.6
  ); /* Semi-transparent dark background */
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Added background-color to transition */
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  display: none;  /* Uncommented to hide by default */
}

#to-top-btn:hover {
  opacity: 1; /* Fully opaque on hover */
  background-color: rgba(51, 51, 51, 0.8); /* Slightly darker on hover */
}

#to-top-btn.visible { /* Changed from .show to .visible */
  display: block; /* Show when 'visible' class is added */
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    margin-top: 50px;
  }
  .summary-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .functions-inline {
    margin-top: 8px;
  }
  .functions-inline .btn {
    margin-left: 0;
    margin-right: 5px;
  }
  #index-nav a {
    margin: 0 8px;
  }
  /* Adjust back to top button for mobile */
  #to-top-btn {
    right: 10px;
    bottom: 10px;
  }
}