/* 「この記事についてChatGPT/Claudeに聞く」ボタン (lib/ask-ai.js)。
   記事ページと丸ごと翻訳サイトの両方で読み込むため、色はこのブロック内で完結させる。 */
.ask-ai { --ask-ai-accent: #622315; --ask-ai-border: #ddd; --ask-ai-muted: #676767;
  box-sizing: border-box; max-width: 42rem; margin: 2rem auto; padding: 1rem 1.15rem;
  border: 1px solid var(--ask-ai-border); border-radius: 4px; background: #fcfcfd;
  color: #2e2e2e; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Noto Sans JP", "Meiryo", sans-serif; font-size: 15px; line-height: 1.7; }
main .ask-ai { margin: 2rem 0; }
.ask-ai p { margin: .25rem 0; }
.ask-ai-lead { font-weight: 600; color: #1f1f1f; }
.ask-ai-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 .5rem; }
.ask-ai a.ask-ai-button { display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--ask-ai-accent);
  border-radius: 3px; background: #fff; color: var(--ask-ai-accent);
  font-weight: 600; text-decoration: none; }
.ask-ai a.ask-ai-button::after { content: "↗"; margin-left: .4rem; font-weight: 400; }
.ask-ai a.ask-ai-button:hover { background: var(--ask-ai-accent); color: #fff; }
.ask-ai a.ask-ai-button:focus-visible { outline: 3px solid #d9a99c; outline-offset: 3px; }
.ask-ai-note { color: var(--ask-ai-muted); font-size: .82rem; }
@media (max-width: 34rem) {
  .ask-ai { margin-left: 16px; margin-right: 16px; }
  main .ask-ai { margin-left: 0; margin-right: 0; }
  .ask-ai a.ask-ai-button { flex: 1 1 100%; }
}