/* ===========================================================
 * TalkJunction 固有スタイル (services/talkjunction.css)
 *
 * TalkJunction ページ本体は .c-threads / .c-thread / .c-response / .c-fab を使用。
 * ここでは TalkJunction 特有の細調整のみ残す。
 *
 * 注: TalkJunction 旧CSS (talkjunction/style.css) は完全廃止予定。
 *     - `.post { position: fixed; top:50%; left:50%; }` が
 *       Composer を意図していたが破綻状態。
 *     - Phase 6 完了後 talkjunction/style.css は削除する。
 *
 * 注: このファイルは talkit.css とは別途 <link> で読み込まれるため、
 *     cascade priority を整合させるため @layer services で包む。
 * =========================================================== */
@layer services {

/* スレッド一覧優先表示領域 (.tj-feed は .service-view__main と併用)
 * 注意: flex/grid を立て方向に限定し、横並び崩れを防ぐ */
body[data-service="talkjunction"] .tj-feed {
  display: grid;
  gap: var(--tk-space-2);
  grid-template-columns: 1fr;
}

/* スレッド作成ヘッダー帯 */
body[data-service="talkjunction"] .tj-create-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tk-space-3);
  padding: var(--tk-space-4);
  background-color: var(--tk-accent-weak, var(--tk-color-primary-weak));
  border-radius: var(--tk-radius-md);
  margin-bottom: var(--tk-space-4);
}
body[data-service="talkjunction"] .tj-create-cta__text { margin: 0; }
body[data-service="talkjunction"] .tj-create-cta__title {
  font-size: var(--tk-font-size-lg);
  margin: 0 0 var(--tk-space-1);
  color: var(--tk-color-text-strong);
}

/* 検索フォーム compact
 * 注: 旧 .tj-search を service-view__main に併用すると
 *     コンテナ全体が flex になり中身が横並び崩れするので、
 *     form.tj-search-form に適用する。
 */
body[data-service="talkjunction"] .tj-search-form {
  display: flex;
  gap: var(--tk-space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--tk-space-4);
}
body[data-service="talkjunction"] .tj-search-form .c-input { flex: 1; min-width: 0; }

/* ヘルプ / ドキュメント節 */
body[data-service="talkjunction"] .tj-docs {
  padding: var(--tk-space-4);
  background-color: var(--tk-color-surface);
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-radius-md);
  margin-top: var(--tk-space-5);
}
body[data-service="talkjunction"] .tj-docs h2 {
  font-size: var(--tk-font-size-lg);
  margin: 0 0 var(--tk-space-2);
  color: var(--tk-color-text-strong);
}
body[data-service="talkjunction"] .tj-docs p { margin: 0; color: var(--tk-color-text); }

} /* end @layer services */