/* .bg-primary {
    background-color: hsl(127, 50%, 38%) !important;
} */

/* モバイル環境でheader_linksのテキストを省略して表示崩れを防止 */
@media (max-width: 768px) {
    /* ヘッダーリンクのテキスト（span）を非表示にし、アイコンのみ表示 */
    #header a.inline-flex span {
        display: none;
    }
}

/* モデル名バッジ: AIメッセージのアクションバー右端に表示 */
/*.model-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;       /* 右寄せ */
/*    padding: 1px 8px;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 500;
    border-radius: 9999px;
    white-space: nowrap;
    color: hsl(var(--muted-foreground));
    background-color: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    user-select: none;
    pointer-events: none;
}*/
/* トーストの表示位置を調整 */
ol.toast[data-y-position="top"] {
  top: 55px !important;
  margin-top: 0 !important;
}

/* =============================================================================
   カテゴリー付きプロフィール選択 スタイル
   ============================================================================= */

/* カテゴリードロップダウン本体 */
.cat-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9998;
  min-width: 220px;
  padding: 4px;
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  animation: cat-dropdown-in 0.15s ease-out;
}

/* カテゴリー項目 */
.cat-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 8px 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--popover-foreground));
  cursor: pointer;
  transition: background-color 0.1s;
  user-select: none;
}
.cat-dropdown-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.cat-dropdown-item-active {
  background-color: hsl(var(--accent) / 0.5);
}

/* カテゴリー右矢印 */
.cat-dropdown-arrow {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

/* サブメニュー（プロフィール一覧） */
.cat-submenu {
  z-index: 9999;
  min-width: 180px;
  padding: 4px;
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  animation: cat-dropdown-in 0.1s ease-out;
}

/* サブメニュー項目 */
.cat-submenu-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  color: hsl(var(--popover-foreground));
  cursor: pointer;
  transition: background-color 0.1s;
  user-select: none;
}
.cat-submenu-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.cat-submenu-item-selected {
  font-weight: 500;
}

/* サブメニューのチェックマーク */
.cat-submenu-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 12px;
  color: hsl(var(--foreground));
}

/* ドロップダウンアニメーション */
@keyframes cat-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- モバイル対応 --- */
@media (max-width: 768px) {
  /* ドロップダウンの最大幅を画面幅に制限 */
  .cat-dropdown {
    min-width: 160px;
    max-width: calc(100vw - 32px);
    right: 0;
    left: auto;
  }

  /* モバイルでは戻るボタンのスタイル */
  .cat-dropdown-back {
    color: hsl(var(--muted-foreground));
    font-size: 13px;
    gap: 4px;
  }
}