/*
 * AIエージェント（template-workspace.php）— /products/tektome/ai-agent/
 *
 * platform.css の後に読み込まれる（アセットマップで base → platform → workspace）。
 * タブ・カルーセル・ドットの機構は platform.css と共通なので、ここにあるのは
 * この画面固有のものだけ。
 *
 * ⚠️ v3 のこの画面の data-screen-label は「チェック LP」だが、これは古い名前。
 * 中身は AIエージェント。
 */

/* ============================================================
   エージェントの選択レール
   ============================================================
   .ds-step と .ds-step[data-active="true"] は base.css にある（Phase 2 で
   dataspace-lp 用に用意されたもの）。ここでは詳細カード側だけ面倒を見る。
   ============================================================ */

/*
 * 6枚のパネルを全部描画して切り替える方式なので、隠れている5枚が
 * グリッドの高さを押し上げないようにする。base.css の
 * [hidden]{display:none !important} が効く前提だが、
 * インラインの display:flex があるので明示しておく。
 */
.ws-agentpane[hidden] {
	display: none !important;
}

/*
 * パネルの高さが中身で変わるとレールとの段差が動くので、
 * グリッドの行を伸ばす側に寄せる。
 */
.ws-agentsel {
	align-items: stretch;
}

/* ============================================================
   狭い画面
   ============================================================
   プロトタイプにブレークポイントは無い。レールは 360px 固定なので、
   畳まないと本文が潰れる。
   ============================================================ */

@media (max-width: 900px) {
	.ws-agentsel {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
	}
	/*
	 * 縦積みだとレールが6行になって詳細が画面外に出る。横スクロールに変える。
	 */
	/*
	 * 🔁 2026-09-19 方針変更（オーナー・指摘表46行）。
	 *
	 * もとは横スクロールだった（縦のままだとレールが6行になりパネルが画面外に
	 * 出るため）。「横スクロールはどうやっても分かりづらい」という指摘を受けて、
	 * **プルダウンに差し替える**。比較ページ（指摘表155行）と同じ部品。
	 *
	 * 🚨 レールは display:none にするだけで **DOM からは消さない**。
	 *   tk-ui.js の data-tk-tabselect は両方が居る前提で状態を同期している。
	 *   見た目は platform.css の [data-tk-tabselect]（ai-agent でも読まれる）。
	 */
	.ws-agentsel > [data-tk-tablist] {
		display: none !important;
	}
	.ws-agentsel > [data-tk-tabselect] {
		display: block;
		margin-bottom: 0;
	}
}