/**
 * 体験談カード（マイページ「自分の体験談」専用）
 *
 * - カード全体を 1 つの <a> でクリッカブル化（カード内に他のリンクは置かない）
 * - 体験談タイトルを主役、相談タイトルは控えめのコンテキストとして表示
 * - 親スレのカテゴリ色（--cat-{key}-text）に体験談タイトルを合わせる
 * - リアクション集計（いいね・共感・学び）を 0 件でも常時 3 種表示
 * - ベストアンサーは上部にリボンを表示
 */

/* ------------------------------------------------------------
 * グリッド（タブ内ラッパ）
 * SP 1列 / タブレット 2列 / PC ≥1024px 3列
 * ------------------------------------------------------------ */
.tab-my-answers {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 769px) {
	.tab-my-answers {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.tab-my-answers {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 空状態（empty-state）はグリッドを横断して中央寄せで表示する */
.tab-my-answers > .empty-state {
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------
 * カード本体（リンク化・カテゴリ色ティント＋blob 浮遊）
 * ------------------------------------------------------------ */
.answer-card-mine {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-base-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition:
		box-shadow var(--transition-fast, 0.15s ease),
		transform var(--transition-fast, 0.15s ease),
		border-color var(--transition-fast, 0.15s ease);
}

/* カード内の主要要素は背景blobの上に重ねる */
.answer-card-mine > *:not(.answer-card-mine__bg) {
	position: relative;
	z-index: 1;
}

.answer-card-mine:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--color-main) 30%, var(--color-border));
}

.answer-card-mine:focus-visible {
	outline: 2px solid var(--color-main);
	outline-offset: 2px;
}

/* ------------------------------------------------------------
 * blob 用アクセント色のみ data-thread-cat 別に切り替え。
 * カード背景は白固定（.answer-card-mine 本体の background 指定）。
 * ------------------------------------------------------------ */
.answer-card-mine[data-thread-cat="career"] {
	--answer-card-mine-accent: var(--cat-career-text);
}

.answer-card-mine[data-thread-cat="ningen"] {
	--answer-card-mine-accent: var(--cat-ningen-text);
}

.answer-card-mine[data-thread-cat="skill"] {
	--answer-card-mine-accent: var(--cat-skill-text);
}

.answer-card-mine[data-thread-cat="hataraki"] {
	--answer-card-mine-accent: var(--cat-hataraki-text);
}

.answer-card-mine[data-thread-cat="kachi"] {
	--answer-card-mine-accent: var(--cat-kachi-text);
}

/* ベスト体験談は緑系背景（リボンを馴染ませるため白からは戻す） */
.answer-card-mine--best[data-thread-cat] {
	background: var(--color-best-answer-bg);
}

/* ------------------------------------------------------------
 * 浮遊 blob（半透明・ぼかし）
 * カラーはカテゴリ色（無ければ main 色）にフォールバック
 * ------------------------------------------------------------ */
.answer-card-mine__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}

.answer-card-mine__blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--answer-card-mine-accent, var(--color-main));
	opacity: 0.1;
	will-change: transform;
}

/* 各blobは独自のパスで漂い、互いに横断・重なる。
   翻訳量はカード幅・高さのオーダー（150〜260px）でゆっくり */
.answer-card-mine__blob--a {
	width: 160px;
	height: 160px;
	top: -50px;
	left: -40px;
	animation: wakuwaku-blob-sway-a 28s ease-in-out infinite;
}

.answer-card-mine__blob--b {
	width: 120px;
	height: 120px;
	top: 35%;
	right: -30px;
	animation: wakuwaku-blob-sway-b 32s ease-in-out infinite;
	animation-delay: -8s;
}

.answer-card-mine__blob--c {
	width: 140px;
	height: 140px;
	bottom: -50px;
	left: 30%;
	animation: wakuwaku-blob-sway-c 30s ease-in-out infinite;
	animation-delay: -14s;
}

/* ----------------------------------------------------------------
 * nth-child でカードごとにアニメ位相をズラして非同期化
 * 6枚（2行×3列）分で1サイクル。7枚目以降はまた繰り返す。
 * ---------------------------------------------------------------- */
.answer-card-mine:nth-child(2) .answer-card-mine__blob--a { animation-delay: -9s; }
.answer-card-mine:nth-child(2) .answer-card-mine__blob--b { animation-delay: -20s; }
.answer-card-mine:nth-child(2) .answer-card-mine__blob--c { animation-delay: -5s; }

.answer-card-mine:nth-child(3) .answer-card-mine__blob--a { animation-delay: -19s; }
.answer-card-mine:nth-child(3) .answer-card-mine__blob--b { animation-delay: -4s; }
.answer-card-mine:nth-child(3) .answer-card-mine__blob--c { animation-delay: -23s; }

.answer-card-mine:nth-child(4) .answer-card-mine__blob--a { animation-delay: -6s; }
.answer-card-mine:nth-child(4) .answer-card-mine__blob--b { animation-delay: -26s; }
.answer-card-mine:nth-child(4) .answer-card-mine__blob--c { animation-delay: -10s; }

.answer-card-mine:nth-child(5) .answer-card-mine__blob--a { animation-delay: -24s; }
.answer-card-mine:nth-child(5) .answer-card-mine__blob--b { animation-delay: -12s; }
.answer-card-mine:nth-child(5) .answer-card-mine__blob--c { animation-delay: -27s; }

.answer-card-mine:nth-child(6) .answer-card-mine__blob--a { animation-delay: -13s; }
.answer-card-mine:nth-child(6) .answer-card-mine__blob--b { animation-delay: -29s; }
.answer-card-mine:nth-child(6) .answer-card-mine__blob--c { animation-delay: -3s; }

@keyframes wakuwaku-blob-sway-a {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	25% {
		transform: translate3d(90px, 140px, 0) scale(1.05);
	}
	50% {
		transform: translate3d(180px, 70px, 0) scale(0.96);
	}
	75% {
		transform: translate3d(50px, 220px, 0) scale(1.03);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes wakuwaku-blob-sway-b {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	25% {
		transform: translate3d(-110px, 80px, 0) scale(0.94);
	}
	50% {
		transform: translate3d(-200px, -90px, 0) scale(1.07);
	}
	75% {
		transform: translate3d(-70px, 160px, 0) scale(1.02);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes wakuwaku-blob-sway-c {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	25% {
		transform: translate3d(-70px, -140px, 0) scale(1.04);
	}
	50% {
		transform: translate3d(140px, -210px, 0) scale(0.97);
	}
	75% {
		transform: translate3d(90px, -80px, 0) scale(1.03);
	}
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.answer-card-mine,
	.answer-card-mine__blob {
		transition: none;
		animation: none;
	}
	.answer-card-mine:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------
 * BEST ANSWER リボン
 * ------------------------------------------------------------ */
.answer-card-mine--best {
	border-color: var(--color-accent-1);
	background: var(--color-best-answer-bg);
}

.answer-card-mine__best-ribbon {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	align-self: flex-start;
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.04em;
	color: var(--color-base-1);
	background: var(--color-accent-1);
	border-radius: var(--radius-full);
}

.answer-card-mine__best-ribbon-star {
	font-size: var(--font-size-sm);
	line-height: 1;
}

/* ------------------------------------------------------------
 * ヘッダー（カテゴリ + タグ + 日付）
 * ------------------------------------------------------------ */
.answer-card-mine__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.answer-card-mine__head-left {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.answer-card-mine__tags {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.answer-card-mine__tag {
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.answer-card-mine__date {
	flex-shrink: 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
 * 体験談タイトル（主役）
 * ------------------------------------------------------------ */
.answer-card-mine__title {
	margin: var(--space-2) 0 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--color-text-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.answer-card-mine[data-thread-cat="career"] .answer-card-mine__title {
	color: var(--cat-career-text);
}

.answer-card-mine[data-thread-cat="ningen"] .answer-card-mine__title {
	color: var(--cat-ningen-text);
}

.answer-card-mine[data-thread-cat="skill"] .answer-card-mine__title {
	color: var(--cat-skill-text);
}

.answer-card-mine[data-thread-cat="hataraki"] .answer-card-mine__title {
	color: var(--cat-hataraki-text);
}

.answer-card-mine[data-thread-cat="kachi"] .answer-card-mine__title {
	color: var(--cat-kachi-text);
}

/* ------------------------------------------------------------
 * 相談タイトル（控えめ・コンテキスト）
 * ------------------------------------------------------------ */
.answer-card-mine__thread-title {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.6;
	color: var(--color-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.answer-card-mine__thread-title-label {
	margin-right: var(--space-1);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
 * 葛藤抜粋
 * ------------------------------------------------------------ */
.answer-card-mine__excerpt {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.7;
	color: var(--color-text-primary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

/* ------------------------------------------------------------
 * リアクション（いいね・共感・学び。0 件でも常時表示）
 * thread-card のフッターと視覚を揃える
 * ------------------------------------------------------------ */
.answer-card-mine__reactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	background: transparent;
	/* 上の境界線はうっすらだけ残す（blobが下まで漂うため強い線は不要） */
	border-top: 1px solid color-mix(in srgb, var(--color-border-light, var(--color-border)) 50%, transparent);
}

.answer-card-mine__reaction {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.answer-card-mine__reaction-icon {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	object-fit: contain;
	opacity: 0.88;
	filter: grayscale(1);
	mix-blend-mode: multiply;
}

.answer-card-mine__reaction-label {
	white-space: nowrap;
}

.answer-card-mine__reaction-count {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-secondary);
}

/* 未返信のお礼バッジ（仕様-お礼を送る.md §5-2）。
   「自分の体験談」タブ専用。公開プロフィールでは描画されない（PHP 側で引数を渡さない）。 */
.answer-card-mine__unreplied-thanks {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: color-mix(in srgb, var(--color-main) 12%, var(--color-base-1));
	color: var(--color-accent-2);
	border: 1px solid color-mix(in srgb, var(--color-main) 35%, var(--color-border));
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none; /* カード全体の <a> クリックを邪魔しない */
}

.answer-card-mine__unreplied-thanks svg {
	color: var(--color-main);
	flex: 0 0 auto;
}

/* モバイル微調整 */
@media (max-width: 480px) {
	.answer-card-mine {
		padding: var(--space-4);
	}

	.answer-card-mine__title {
		font-size: var(--font-size-xl);
	}

	.answer-card-mine__reactions {
		gap: var(--space-2);
	}

	.answer-card-mine__reaction-label {
		display: none;
	}
}