/* AInformation 記事の中のプロンプト枠（2026-09-18）
   swell_child/assets/css/ainews-prompt.css

   藤井さんの指示
     1回目「プロンプトもコピーボタンを押すだけでコピーできるように」
     2回目「デザインが変ですね。もっと分かりやすくしてほしいです」

     3回目「もうすこしカードのところをポップにして」

   ★1回目は blockquote の見た目（左の水色線＋薄い面）に帯を重ねたので、
     引用の飾り線と二重になって「箱の中に箱」に見えていた。
     作り直して、引用の飾りは全部消し、カード1枚にした。
       ・水色（--ai-accent #1AC2F1）の帯。頭の番号は白い丸、右は濃紺の丸いコピーボタン
       ・枠は水色2px・角丸12px。中は白でプロンプトの文だけが入る
       ・枠の下の注記は頭に水色の点
   ★白ベースで固定する。ダークモードの指定は入れない。
   ★帯は position:absolute をやめて普通に積む。スマホで2行になっても文に重ならない。 */

.ai-single .post_content blockquote.ai-prompt {
	margin: 2em 0;
	padding: 0;
	border: 2px solid var(--ai-accent, #1AC2F1);
	border-left: 2px solid var(--ai-accent, #1AC2F1);   /* 引用の太い左線を消す */
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	font-size: inherit;
	font-style: normal;
	color: inherit;
	box-shadow: none;
}

/* 引用符やラインの飾りを消す（テーマ側が ::before で入れている） */
.ai-single .post_content blockquote.ai-prompt::before,
.ai-single .post_content blockquote.ai-prompt::after {
	content: none !important;
	display: none !important;
}

/* ── 上の帯 ───────────────────────────────── */
.ai-prompt__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 11px 10px 13px;
	background: var(--ai-accent, #1AC2F1);
}

.ai-prompt__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--ai-ink, #0D1B2A);
	letter-spacing: .01em;
}

/* 見出しの頭の番号は白い丸にする */
.ai-prompt__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff;
	color: var(--ai-ink, #0D1B2A);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1;
}

.ai-prompt__label svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	opacity: .9;
}

.ai-prompt__copy {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--ai-ink, #0D1B2A);
	border-radius: 999px;
	background: var(--ai-ink, #0D1B2A);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	-webkit-appearance: none;
	appearance: none;
}

.ai-prompt__copy:hover { background: #1d3448; }
.ai-prompt__copy:active { background: #2a455e; }
.ai-prompt__copy:focus-visible { outline: 2px solid var(--ai-ink, #0D1B2A); outline-offset: 2px; }

.ai-prompt__copy svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

/* 押したあと。緑は「コピーできた」の印としてだけ使う */
.ai-prompt__copy.is-done {
	background: #0b7a3b;
	border-color: #0b7a3b;
	color: #fff;
}
.ai-prompt__copy.is-ng {
	background: #fff;
	border-color: var(--ai-ink, #0D1B2A);
	color: var(--ai-ink, #0D1B2A);
}

/* ── 中の文 ───────────────────────────────── */
.ai-prompt__body {
	padding: 16px 18px 17px;
	background: #fff;
	border-radius: 0 0 10px 10px;
}

.ai-single .post_content blockquote.ai-prompt .ai-prompt__body p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.95;
	color: var(--ai-text, #1b2733);
}
.ai-single .post_content blockquote.ai-prompt .ai-prompt__body p + p {
	margin-top: .85em;
}

/* 枠の下に置く1行の注記（何が変わるか） */
.ai-prompt__note {
	position: relative;
	margin: -1.4em 0 2em;
	padding-left: 15px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ai-muted, #5C7080);
}
.ai-prompt__note::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ai-accent, #1AC2F1);
}

/* ── スマホ ───────────────────────────────── */
@media (max-width: 560px) {
	.ai-prompt__bar {
		flex-wrap: wrap;
		gap: 9px;
		padding: 10px 11px;
	}
	.ai-prompt__label { font-size: 12.5px; }
	.ai-prompt__copy {
		width: 100%;
		justify-content: center;
		padding: 11px 14px;
	}
	.ai-prompt__body { padding: 14px 14px 15px; }
	.ai-single .post_content blockquote.ai-prompt .ai-prompt__body p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.ai-prompt__copy { transition: none; }
}