/* 何を・なぜ: SWELLの演習ページだけを学習用の広い外枠にし、他ページへ波及させない。 */
.swb-exercise-page { --exercise-blue: #2479dc; --exercise-ink: #172b45; --exercise-line: #dce5ef; }
.swb-exercise-page #content { max-width: 1440px; padding: 24px 32px; margin: 0 auto; }
.swb-exercise-page #main_content { width: 100%; margin: 0; padding: 0; float: none; }
.swb-exercise-page .l-mainContent__inner { margin: 0; padding: 0; }
.swb-exercise-page .p-breadcrumb, .swb-exercise-page .c-pageTitle, .swb-exercise-page .l-topTitleArea,
.swb-exercise-page .p-infoBar, .swb-exercise-page #fix_bottom_menu, .swb-exercise-page .p-fixBtnWrap { display: none; }
.swb-exercise-page .l-header { box-shadow: none; border-bottom: 1px solid var(--exercise-line); }
.swb-exercise-page .post_content { margin: 0; }
.swb-exercise-page .quiz_workspace { width: 100%; max-width: 100%; margin: 0; }
.swb-exercise-page .quiz_area { max-width: 100%; background: #fff; box-shadow: none; border: 0; padding: 20px; border-radius: 0; }
.swb-exercise-page .quiz_area::before { display: none; }

/* 何を・なぜ: 回答後は左に原問、右に既存のAI・メモを置き、スマホでは読み順を保って縦に並べる。 */
.swb-exercise-page .exercise-active { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.swb-exercise-page .exercise-active .quiz_area { display: contents; }
.swb-exercise-page .exercise-active .quiz_set { min-width: 0; padding: 0; scroll-margin-top: 120px; }
.swb-exercise-page .exercise-active .quiz_comment { margin: 0; min-width: 0; }
.swb-exercise-page .exercise-active .quiz_result { grid-column: 1/-1; }
.swb-exercise-page .exercise-chat-host:empty { display: none; }
.swb-exercise-page .exercise-active .quiz_set > h3 { margin: 0 0 12px; padding: 0; background: none; border: 0; font-size: 26px; color: var(--exercise-ink); }
.swb-exercise-page .quiz_meta { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 18px; }
.swb-exercise-page .quiz_meta_left { font-size: 15px; line-height: 1.7; }
.swb-exercise-page .quiz_meta_title { font-weight: 700; font-size: 20px; }
.swb-exercise-page .quiz_meta_right { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; width: 100%; }
.swb-exercise-page .quiz_meta_right > div { white-space: nowrap; }
.swb-exercise-page .quiz_meta_right .parameter-stars { --star-size: 17px; }
.swb-exercise-page .quiz_question { border: 0; padding: 0; background: #fff; }
.swb-exercise-page #qa_img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid var(--exercise-line); cursor: zoom-in; }
.swb-exercise-page .exercise-image-expand { display: block; width: 100%; margin: 14px 0 20px; padding: 12px; min-height: 48px; border: 1px solid var(--exercise-blue); border-radius: 10px; background: #f8fbff; color: var(--exercise-blue); font-size: 16px; font-weight: 700; box-shadow: none; }
.swb-exercise-page .quiz_ans_area { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin: 0; justify-content: stretch; }
/* 何を・なぜ: 旧SWELL対応の:first-child余白を全回答で解除し、1だけ下がる現象を防ぐ。 */
.swb-exercise-page .quiz_ans_area div.single { flex: 1 1 0; width: auto; min-width: 48px; min-height: 54px; padding: 8px; margin: 0 !important; border-radius: 10px; background: var(--exercise-blue); color: #fff; font-size: 26px; text-align: center; box-shadow: none; cursor: pointer; }
.swb-exercise-page .quiz_ans_area div.single.selected { background: #52657d; }
.swb-exercise-page .quiz_ans_area div.single.corrected { background: #23834b; }
.swb-exercise-page .quiz_ans_area .answer_choice { flex: 1 1 80px; margin: 0; width: auto; }
.swb-exercise-page .quiz_ans_area select { min-height: 48px; width: 100%; }
.swb-exercise-page .user_checkbox { margin-top: 16px; justify-content: flex-start; }
.swb-exercise-page .check-later { background: #fff; border-radius: 8px; box-shadow: none; font-size: 14px; }
.swb-exercise-page .quiz_next_align { align-items: center; }
.swb-exercise-page .quiz_action button, .swb-exercise-page .quiz_comment button { min-height: 44px; border-radius: 8px; box-shadow: none; }
.swb-exercise-page .quiz_action .quiz_next { background: var(--exercise-blue); color: #fff; }
.swb-exercise-page .quiz_next_answer br { display: none; }
.swb-exercise-page .quiz_next_answer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.swb-exercise-page .quiz_next_answer .center { display: flex; flex-wrap: wrap; gap: 12px; }
.swb-exercise-page .quiz_restart { background: transparent; color: var(--exercise-blue); }

/* 何を・なぜ: 課金・確認トグル・メモのIDを変えず、既存の学習支援を一貫した操作面にまとめる。 */
.swb-exercise-page .memo-section { margin: 0 0 20px; }
.swb-exercise-page .exercise-ai-heading { font-size: 22px; color: var(--exercise-ink); border: 0; background: transparent; padding: 0; margin: 0 0 14px; }
.swb-exercise-page .ask-charlie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--exercise-line); }
.swb-exercise-page .ask-charlie-actions .ask-charlie-btn { grid-column: 1/-1; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 12px; background: var(--exercise-blue); color: white; font-size: 16px; }
.swb-exercise-page .ask-charlie-token-cost::after { content: ' クレジット'; font-size: 11px; }
.swb-exercise-page .ask-charlie-actions label { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.swb-exercise-page .ai-auto-status { grid-column: 1/-1; font-size: 12px; }
.swb-exercise-page .memo-header { background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 0; gap: 8px; margin-bottom: 10px; }
.swb-exercise-page .memo-label { font-size: 16px; }
.swb-exercise-page .memo-header .memo-toggle { margin: 0; }
.swb-exercise-page .memo-section textarea#memo { width: 100%; border: 1px solid var(--exercise-line); background: #fff; border-radius: 8px; min-height: 160px; font-size: 15px; }
.swb-exercise-page .char-counter { font-size: 12px; }
.swb-exercise-page .quiz_workspace #google-link-box { margin: 0; width: 100%; padding: 14px; box-shadow: none; background: #fff; border: 1px solid var(--exercise-line); border-radius: 8px; }
.swb-exercise-page .exercise-active #google-link-box { grid-column: 1/-1; }

/* 何を・なぜ: 永続チャットを演習の会話欄へ埋め込み、AI解説の送信・停止・履歴を再利用する。 */
.swb-exercise-page .exercise-chat-host #agent-chat-box { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0; max-width: 100%; height: 560px; max-height: 75vh; border-radius: 10px; box-shadow: none; z-index: auto; }
.swb-exercise-page .exercise-chat-host #agent-resize-handle { display: none; }
.swb-exercise-page:has(.exercise-active) #agent-chat-button { bottom: 20px; right: 20px; }

/* 何を・なぜ: native dialogのフォーカス管理を利用し、原画像の倍率と移動だけを変更する。 */
.exercise-image-dialog { width: min(1200px,96vw); max-width: 96vw; max-height: 92dvh; padding: 16px; border: 1px solid #dce5ef; border-radius: 12px; background: white; color: #172b45; }
.exercise-image-dialog::backdrop { background: rgba(15,23,42,.7); }
.exercise-image-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.exercise-image-tools label { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.exercise-image-tools input { width: 140px; }
.exercise-image-tools button { width: 44px; height: 44px; border-radius: 8px; background: #edf4fc; color: #172b45; }
.exercise-image-dialog p { font-size: 13px; margin: 8px 0; }
.exercise-image-scroll { max-height: 72dvh; overflow: auto; touch-action: none; }
.exercise-image-scroll img { max-width: none; height: auto; display: block; }
.swb-exercise-page :is(button,[role='button'],input,select,textarea):focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
@media (min-width: 1100px) {
    .swb-exercise-page .exercise-support-ready { grid-template-columns: minmax(0,1fr) 350px; column-gap: 32px; }
    .swb-exercise-page .exercise-support-ready .quiz_set { grid-column: 1; grid-row: 1 / span 3; }
    .swb-exercise-page .exercise-support-ready .quiz_comment { grid-column: 2; grid-row: 2; border-left: 1px solid var(--exercise-line); padding-left: 24px; }
    .swb-exercise-page .exercise-support-ready .exercise-chat-host { grid-column: 2; grid-row: 1; }
    .swb-exercise-page .exercise-support-ready #google-link-box { grid-column: 2; grid-row: 3; }
}
@media (max-width: 640px) {
    /* 何を・なぜ: 承認済みスマホ案の横一列回答と常時表示の難易度を保ち、原問の幅を確保する。 */
    .swb-exercise-page #content { padding: 16px 12px; }
    .swb-exercise-page .quiz_area { padding: 12px 0; }
    .swb-exercise-page .quiz_meta { gap: 8px; }
    .swb-exercise-page .quiz_meta_title { font-size: 17px; }
    .swb-exercise-page .quiz_meta_right { display: flex; gap: 6px 12px; font-size: 12px; }
    .swb-exercise-page .quiz_meta_percent { flex-basis: 100%; }
    .swb-exercise-page .quiz_ans_area { gap: 6px; }
    .swb-exercise-page .quiz_ans_area div.single { min-width: 44px; font-size: 22px; padding: 8px 2px; }
    .swb-exercise-page .quiz_action .quiz_next_align { flex-direction: row; }
    .swb-exercise-page .quiz_next_align > .quiz_next { flex: 1 1 100%; }
    .swb-exercise-page .quiz_comment { border-top: 1px solid var(--exercise-line); padding-top: 20px; }
    .swb-exercise-page .exercise-image-tools label { margin: 0; }
    .swb-exercise-page .exercise-chat-host #agent-chat-box { max-height: 70dvh; }
}

/* 何を・なぜ: SWELLのalignwide位置補正と既存!importantボタン色だけを、演習専用の範囲で解除する。 */
.swb-exercise-page #main_content { max-width: none; }
.swb-exercise-page .post_content .quiz_workspace.alignwide { position: static; left: auto; right: auto; width: 100%; max-width: 100%; margin: 0 !important; }
.swb-exercise-page .c-infoBar, .swb-exercise-page .l-sidebar { display: none; }
.swb-exercise-page .post_content .exercise-ai-heading { border: 0; background: none; padding: 0; }
.swb-exercise-page .exercise-ai-heading::before, .swb-exercise-page .exercise-ai-heading::after { display: none; }
.swb-exercise-page .quiz_area .exercise-image-expand { background: #f8fbff !important; border: 1px solid var(--exercise-blue) !important; color: var(--exercise-blue) !important; }
.swb-exercise-page .quiz_area .ask-charlie-btn, .swb-exercise-page .quiz_area .quiz_next { background: var(--exercise-blue) !important; color: #fff !important; border: 1px solid var(--exercise-blue) !important; }
.swb-exercise-page .quiz_area .quiz_restart { background: transparent !important; color: var(--exercise-blue) !important; }
.swb-exercise-page .quiz_area .ask-charlie-actions { background: none; box-shadow: none; border-radius: 0; }
/* 何を・なぜ: 補助操作は輪郭ボタンへ揃え、採点結果を常時読める文字で補足する。 */
.swb-exercise-page .quiz_area #postsametopics button, .swb-exercise-page .quiz_area .exercise-chat-toggle { background: #f8fbff !important; color: var(--exercise-blue) !important; border: 1px solid var(--exercise-line) !important; }
.swb-exercise-page .exercise-chat-toggle { grid-column: 1/-1; width: 100%; font-size: 13px; }
.swb-exercise-page:has(.exercise-chat-toggle) .chat-toggle-wrapper,
.swb-exercise-page:has(.exercise-chat-toggle) #agent-chat-button { display: none !important; }
.swb-exercise-page .exercise-answer-status { margin: 12px 0 0; padding: 10px 12px; background: #edf4fc; border-radius: 6px; font-weight: 700; font-size: 14px; }
/* 何を・なぜ: モバイルの補助ボタンを主操作と同じ幅にし、選択状態で回答列がずれないようにする。 */
.swb-exercise-page .quiz_ans_area div.single.selected { transform: none; margin: 0 !important; }
.swb-exercise-page .quiz_set #quiz_skip { width: 100%; margin: 0; }
@media (min-width: 1100px) {
    .swb-exercise-page .exercise-image-expand { width: auto; margin: 10px 0 16px auto; padding: 8px 16px !important; min-height: 44px; font-size: 14px; }
}

/* 何を・なぜ: AI操作を会話の直前に集め、狭い補助欄でも設定が詰まらない余白を確保する。 */
.swb-exercise-page .exercise-chat-host { min-width: 0; }
.swb-exercise-page .exercise-active:not(.exercise-support-ready) .exercise-chat-host { display: none; }
.swb-exercise-page .exercise-ai-controls { padding: 20px; background: #f7f7ff; border: 1px solid #e4e0f3; border-radius: 12px; }
.swb-exercise-page .exercise-ai-controls:empty { display: none; }
.swb-exercise-page .exercise-ai-controls .ask-charlie-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; width: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.swb-exercise-page .exercise-ai-controls .ask-charlie-actions label { justify-content: space-between; flex-direction: row-reverse; min-height: 32px; gap: 14px; }
.swb-exercise-page .exercise-ai-controls .ask-charlie-btn { position: relative; justify-content: center; flex-wrap: wrap; gap: 6px 12px; min-height: 56px; padding: 14px 18px !important; background: linear-gradient(120deg,#4338ca,#7c3aed 65%,#8b5cf6) !important; color: #fff !important; border: 0 !important; border-radius: 10px; font-size: 15px; }
.swb-exercise-page .exercise-ai-controls .ask-charlie-btn::before { position: static; transform: none; filter: brightness(0) invert(1); margin: 0; flex: 0 0 auto; }
.swb-exercise-page .exercise-ai-controls .ask-charlie-btn .btn-text { margin: 0; padding: 0; transform: none; }
.swb-exercise-page .exercise-ai-controls .ai-auto-status { justify-self: start; width: auto; padding: 4px 10px; font-size: 11px; border: 0; }
.swb-exercise-page .exercise-ai-controls .exercise-chat-toggle { min-height: 44px; padding: 10px 12px; background: #fff !important; color: #5742a5 !important; border: 1px solid #dcd5f3 !important; border-radius: 8px; }
.swb-exercise-page .exercise-chat-host #agent-chat-box { margin-top: 16px; }
/* 何を・なぜ: 350pxの会話欄でモデル設定と履歴操作が重ならないよう、見出しを独立行にする。 */
.swb-exercise-page .exercise-chat-host #agent-chat-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px; background: #211b3f; }
.swb-exercise-page .exercise-chat-host .chat-title { grid-column: 1/-1; }
.swb-exercise-page .exercise-chat-host .premium-toggle-wrapper { margin: 0; }
.swb-exercise-page .exercise-chat-host .premium-title { white-space: normal; overflow: visible; }
.swb-exercise-page .exercise-chat-host .clear-history-container { min-width: 0; }
@media (max-width: 1099px) {
    .swb-exercise-page .exercise-support-ready .exercise-chat-host { grid-row: 2; }
    .swb-exercise-page .exercise-support-ready .quiz_comment { grid-row: 3; }
    .swb-exercise-page .exercise-support-ready #google-link-box { grid-row: 4; }
}
@media (min-width: 768px) {
    .swb-exercise-page .exercise-image-expand { display: none; }
    .swb-exercise-page #qa_img { cursor: default; }
}

/* 何を・なぜ: 問題・採点結果・回答を独立した塊にし、SWELLの末尾余白解除による密着を防ぐ。 */
.swb-exercise-page .quiz_set .quiz_question { margin-bottom: 22px !important; }
.swb-exercise-page .quiz_set .exercise-image-expand { margin-top: 16px !important; margin-bottom: 18px !important; min-height: 48px; padding: 12px !important; }
.swb-exercise-page .quiz_set .exercise-answer-status { margin-top: 16px !important; margin-bottom: 0 !important; }
.swb-exercise-page .quiz_set .quiz_meta { margin-bottom: 24px; }
/* 何を・なぜ: 旧クレジットバッジの-5px補正を解除し、アイコン・文言・消費量の中心を揃える。 */
.swb-exercise-page .exercise-ai-controls .ask-charlie-token-cost { transform: none; margin: 0; height: 22px; line-height: 1; align-self: center; }
.swb-exercise-page .exercise-ai-controls .ask-charlie-actions { gap: 14px; }
.swb-exercise-page .exercise-ai-settings { grid-column: 1/-1; border-top: 1px solid #e4e0f3; padding-top: 12px; }
.swb-exercise-page .exercise-ai-settings summary { cursor: pointer; font-size: 13px; color: #5742a5; padding: 8px 0; }
.swb-exercise-page .exercise-ai-settings label { margin-top: 14px; }
.swb-exercise-page .exercise-ai-settings .ai-auto-status { display: inline-block; margin-top: 12px; }
.swb-exercise-page .exercise-support-navigation { display: none; }
@media (min-width: 1100px) {
    /* 何を・なぜ: 右欄に一度に表示する内容を絞り、会話・メモ・検索を切り替えて読む。 */
    .swb-exercise-page .exercise-has-ai .exercise-support-navigation { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: #f0edf8; border-radius: 10px; }
    .swb-exercise-page .exercise-support-navigation button { flex: 1; min-width: 0; min-height: 40px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: #625c77; font-size: 14px; }
    .swb-exercise-page .exercise-support-navigation button[aria-pressed='true'] { background: white; color: #4932a3; box-shadow: 0 1px 4px #211b3f12; font-weight: 700; }
    .swb-exercise-page .exercise-has-ai.exercise-support-ai .quiz_comment,
    .swb-exercise-page .exercise-has-ai.exercise-support-ai #google-link-box,
    .swb-exercise-page .exercise-has-ai.exercise-support-memo #google-link-box,
    .swb-exercise-page .exercise-has-ai.exercise-support-search .quiz_comment { display: none !important; }
    .swb-exercise-page .exercise-has-ai:not(.exercise-support-ai) .exercise-ai-controls,
    .swb-exercise-page .exercise-has-ai:not(.exercise-support-ai) #agent-chat-box { display: none !important; }
    .swb-exercise-page .exercise-has-ai .quiz_comment { border: 0; padding: 0; }
    .swb-exercise-page .exercise-has-ai #google-link-box { grid-row: 2; }
    /* 何を・なぜ: 指定の800pxで十分な読取領域を確保し、会話履歴は欄内でスクロールする。 */
    .swb-exercise-page .exercise-chat-host #agent-chat-box { height: 800px !important; max-height: none !important; }
    .swb-exercise-page .exercise-chat-host #agent-chat-messages { flex: 1; min-height: 0; overflow-y: auto; }
    .swb-exercise-page .exercise-ai-heading { font-size: 19px; }
    /* 何を・なぜ: PCのAIタブは操作だけの小さなツールバーにし、会話の見出しと大きな枠を重複させない。 */
    .swb-exercise-page .exercise-ai-controls { padding: 0; border: 0; background: none; border-radius: 0; }
    .swb-exercise-page .exercise-ai-controls .exercise-ai-heading { display: none; }
    .swb-exercise-page .exercise-ai-controls .ask-charlie-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
    .swb-exercise-page .exercise-ai-controls .ask-charlie-btn { min-height: 44px; height: 44px; padding: 10px 12px !important; box-shadow: none; }
    .swb-exercise-page .exercise-ai-settings { grid-column: 1; padding: 0; border: 0; }
    .swb-exercise-page .exercise-ai-settings summary { min-height: 40px; padding: 10px 4px; font-size: 12px; }
    .swb-exercise-page .exercise-ai-settings[open] { grid-column: 1/-1; }
    .swb-exercise-page .exercise-ai-controls .exercise-chat-toggle { grid-column: 2; width: 100%; min-height: 40px; padding: 6px !important; border: 0 !important; background: none !important; font-size: 12px; }
    /* 何を・なぜ: 検索タブ直下の操作を小さくまとめ、外枠とGoogle検索の二重余白を除く。 */
    .swb-exercise-page .exercise-has-ai.exercise-support-search { row-gap: 8px; }
    .swb-exercise-page .exercise-has-ai.exercise-support-search .exercise-support-navigation { margin-bottom: 0; }
    .swb-exercise-page .exercise-has-ai #google-link-box { padding: 10px; }
    .swb-exercise-page #google-link-box .google-link-box__title { margin: 0 0 8px !important; font-size: 13px; }
    .swb-exercise-page #google-link-box .gsc-control-cse { padding: 0 !important; }
    .swb-exercise-page #google-link-box table.gsc-search-box { margin: 0 !important; }
    .swb-exercise-page #google-link-box table td { padding: 0; }
    .swb-exercise-page #google-link-box .gsc-input-box { min-height: 40px; }
    .swb-exercise-page #google-link-box .gsc-search-button-v2 { min-height: 40px; }
}

/* 何を・なぜ: 回答前のヒントと全画面操作を小さな補助行にし、主ボタンを邪魔しない。 */
.swb-exercise-page .exercise-hint-help { grid-column: 1/-1; margin: 0 !important; font-size: 12px; line-height: 1.6; color: #64748b; }
.swb-exercise-page .exercise-chat-expand { grid-column: 1/-1; min-height: 36px; padding: 6px 10px !important; background: transparent !important; color: #5742a5 !important; border: 1px solid #dcd5f3 !important; border-radius: 8px; font-size: 12px; }
.swb-exercise-page .exercise-support-navigation button[hidden] { display: none; }
/* 何を・なぜ: native dialogでフォーカスとEscapeを扱い、長文を画面いっぱいに読む。 */
.exercise-chat-dialog { width: min(1100px, calc(100vw - 32px)); max-width: none; height: calc(100dvh - 32px); max-height: none; margin: auto; padding: 12px; border: 0; border-radius: 12px; background: #f5f3ff; }
.exercise-chat-dialog::backdrop { background: rgb(15 23 42 / 65%); }
.exercise-chat-dialog-tools { display: flex; justify-content: space-between; align-items: center; height: 44px; color: #211b3f; }
.exercise-chat-dialog-tools button { padding: 6px 12px; border: 1px solid #dcd5f3; border-radius: 6px; background: #fff; color: #5742a5; }
.exercise-chat-dialog .exercise-chat-host #agent-chat-box { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; height: calc(100dvh - 100px) !important; max-height: none !important; margin: 0 !important; }
.exercise-chat-dialog #agent-chat-messages { flex: 1; min-height: 0; overflow-y: auto; }
@media (min-width: 1100px) {
    .swb-exercise-page .exercise-ai-controls .exercise-chat-expand { grid-column: 1/-1; min-height: 28px; border: 0 !important; padding: 2px !important; }

}

/* 何を・なぜ: 会話上の重複カードを省き、必要な操作をヘッダーの一行に集約する。 */
.swb-exercise-page .exercise-ai-controls { padding: 0; border: 0; background: none; }
.swb-exercise-page .exercise-ai-controls > h2 { display: none; }
.swb-exercise-page .exercise-chat-host #agent-chat-box { margin-top: 0; }
.swb-exercise-page .exercise-chat-host .chat-title { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.swb-exercise-page .exercise-chat-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.swb-exercise-page #agent-chat-header .exercise-chat-tools button { min-height: 32px; min-width: 32px; width: auto; margin: 0; padding: 4px 8px !important; border: 1px solid #ffffff30 !important; border-radius: 6px; background: #ffffff12 !important; color: white !important; font-size: 12px; line-height: 1; }
.swb-exercise-page .exercise-chat-host .chat-toggle-wrapper { position: static !important; margin: 0; padding: 0; }
.swb-exercise-page .exercise-chat-host #agent-chat-button { position: static !important; width: 100%; height: 40px; border-radius: 8px; }
.swb-exercise-page .exercise-chat-host:has(#agent-chat-box[style*="display: flex"]) > .chat-toggle-wrapper { display: none !important; }

/* 何を・なぜ: 回答前のメモ切替と、意味が明確な会話の閉じる操作を小さく配置する。 */
.swb-exercise-page .exercise-chat-host #agent-minimize-button { width: auto; min-width: 44px; padding: 4px 6px; font-size: 12px; }
.swb-exercise-page .exercise-chat-dialog #agent-minimize-button { display: none; }
@media (max-width: 1099px) {
    .swb-exercise-page .exercise-preanswer-memo { padding-top: 16px; }
}

/* 何を・なぜ: 回答前の問題操作を回答列の下へ揃え、AI/メモの切替から独立させる。 */
.swb-exercise-page .quiz_action .quiz_next_answer { justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--exercise-line); }
.swb-exercise-page .quiz_set .quiz_next_answer #quiz_skip { width: auto; min-width: 160px; }
.swb-exercise-page .quiz_action .quiz_next_answer button { min-height: 44px; margin: 0 !important; }

/* 何を・なぜ: 戻るの旧固定幅200pxを外し、スマホでもスキップと同じ行に収める。 */
.swb-exercise-page .quiz_action .quiz_next_answer .quiz_restart { width: auto; min-width: 100px; }

/* 何を・なぜ: 支援欄の閉じるは右カラム全体を退避し、問題を利用可能な幅いっぱいへ戻す。 */
.swb-exercise-page .quiz_workspace { position: relative; }
.swb-exercise-page .exercise-support-navigation .exercise-support-close { flex: 0 0 32px; min-width: 32px; padding: 4px; }
.swb-exercise-page .exercise-support-open { display: none; }
.swb-exercise-page .exercise-support-closed { grid-template-columns: minmax(0,1fr); row-gap: 12px; }
.swb-exercise-page .exercise-support-closed > .exercise-chat-host,
.swb-exercise-page .exercise-support-closed .quiz_comment,
.swb-exercise-page .exercise-support-closed #google-link-box { display: none !important; }
.swb-exercise-page .exercise-support-closed .quiz_set { grid-column: 1; grid-row: 2; }
/* 何を・なぜ: alignwideのposition:staticで絶対配置が画面端へずれるため、通常の行に置いて余白を保つ。 */
.swb-exercise-page .exercise-support-closed .exercise-support-open { display: block; position: static; grid-column: 1; grid-row: 1; justify-self: end; width: auto; margin: 0; padding: 10px 16px; min-height: 44px; border: 1px solid var(--exercise-line); border-radius: 8px; background: #f5f3ff; color: #5742a5; font-size: 14px; line-height: 1.5; }

/* 何を・なぜ: 演習開始画面へ戻った時は、問題用の再表示ボタンを出さない。 */
.swb-exercise-page .exercise-support-closed:not(.exercise-active) .exercise-support-open { display: none; }

/* 何を・なぜ: 問題操作列の旧flex-endによる縮みを外し、回答と同じ幅で左右へ整列する。 */
.swb-exercise-page .quiz_action .quiz_next_answer { width: 100%; flex: 1 1 100%; }
/* 何を・なぜ: テーマのdialog余白解除に左右されず画面中央へ置き、横向きも画面高へ収める。 */
.exercise-image-dialog { position: fixed; inset: 0; margin: auto !important; height: fit-content; max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: hidden; }
.exercise-image-dialog[open] { display: flex; flex-direction: column; }
.exercise-image-tools { flex-shrink: 0; }
.exercise-image-dialog p { flex-shrink: 0; }
.exercise-image-scroll { min-height: 0; max-height: calc(100dvh - 160px); }
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
    /* 何を・なぜ: スマホ横向きでも原画像を読めるよう、幅767pxを超えても拡大操作を提供する。 */
    .swb-exercise-page .exercise-image-expand { display: block; }
    .swb-exercise-page #qa_img { cursor: zoom-in; }
    .exercise-image-dialog { padding: 12px; }
    .exercise-image-scroll { max-height: calc(100dvh - 132px); }
}

/* 何を・なぜ: 原画像の枠線を幅に含め、100%で不要な横スクロールを出さない。 */
.exercise-image-scroll img { box-sizing: border-box; }

/* 何を・なぜ: SWELLの末尾margin解除と幅計算に影響されず、入力欄の左右/下に12pxの余白を保つ。 */
.swb-exercise-page .exercise-chat-host #agent-chat-input { flex-shrink: 0; width: 100%; padding: 12px; box-sizing: border-box; }
.swb-exercise-page .exercise-chat-host #agent-chat-composer { width: 100%; max-width: none; margin: 0 !important; box-sizing: border-box; }
.swb-exercise-page .exercise-chat-host #agent-chat-composer textarea { min-width: 0; }

/* 何を・なぜ: body直下へ戻ったチャットも二段ヘッダーにし、モデル設定と操作の重なりを防ぐ。 */
.exercise-native-chat #agent-chat-header { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 14px; background: #211b3f; }
.exercise-native-chat .chat-title { margin-left: 0; grid-column: 1/-1; display: flex; align-items: center; gap: 6px; font-size: 15px; }
.exercise-native-chat .premium-toggle-wrapper { min-width: 0; max-width: none; width: auto; margin: 0; }
/* 何を・なぜ: 狭い画面でもモデル切替の意味を読めるよう、二段ヘッダーではラベルを表示する。 */
.exercise-native-chat .premium-toggle-text { display: flex; min-width: 0; }
.exercise-native-chat .premium-title { white-space: normal; overflow: visible; }
.exercise-native-chat .clear-history-container { display: flex; align-items: center; gap: 10px; min-width: 0; }
.exercise-native-chat .exercise-chat-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.exercise-native-chat #agent-chat-header .exercise-chat-tools button { min-height: 32px; min-width: 32px; width: auto; padding: 4px 8px; margin: 0; border: 1px solid #ffffff30; border-radius: 6px; background: #ffffff12; color: white; font-size: 12px; line-height: 1; }
.exercise-native-chat .exercise-hint-button[hidden] { display: none !important; }
.exercise-native-chat #agent-minimize-button { width: auto; min-width: 44px; padding: 4px 6px; font-size: 12px; }
.exercise-native-chat #agent-resize-handle { display: none; }
.exercise-native-chat #agent-chat-input { flex-shrink: 0; width: 100%; padding: 12px; box-sizing: border-box; }
.exercise-native-chat #agent-chat-composer { width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
.exercise-native-chat #agent-chat-composer textarea { min-width: 0; }
.exercise-native-chat.exercise-chat-floating { min-width: 0 !important; width: min(420px, calc(100% - 32px)) !important; height: min(640px, calc(100dvh - 120px)) !important; left: auto !important; right: 16px !important; bottom: 88px !important; }
@media (max-width: 600px) {
    /* 何を・なぜ: フローティングもスマホの外周余白を保ち、閉じると入力操作を画面内に収める。 */
    .exercise-native-chat.exercise-chat-floating { left: 12px !important; right: 12px !important; bottom: 76px !important; width: auto !important; border-radius: 10px; }
}

@media (min-width: 1100px) {
    /* 何を・なぜ: 問題と支援を同じ作業面で囲み、広い画面でも右欄が独立して浮いて見えないようにする。 */
    .swb-exercise-page .exercise-support-ready:not(.exercise-support-closed) {
        box-sizing: border-box; padding: 24px; border: 1px solid var(--exercise-line); border-radius: 14px;
        background: linear-gradient(to left, #f5f6fb 0, #f5f6fb 390px, #dce5ef 390px, #dce5ef 391px, #fff 391px);
    }
}

/* 何を・なぜ: チャットを記事領域へ移してもSWELLの見出し装飾を受けず、浮動/全画面と同じ本文表示に揃える。 */
.exercise-native-chat #agent-chat-messages .markdown-body :is(h1,h2,h3,h4,h5,h6) {
    position: static; margin: 1em 0 .5em !important; padding: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important; border-radius: 0; color: inherit; font-weight: 700; line-height: 1.45;
}
.exercise-native-chat #agent-chat-messages .markdown-body :is(h1,h2,h3,h4,h5,h6)::before,
.exercise-native-chat #agent-chat-messages .markdown-body :is(h1,h2,h3,h4,h5,h6)::after { content: none !important; display: none !important; }
.exercise-native-chat #agent-chat-messages .markdown-body :is(h1,h2) { font-size: 1.2em; }
.exercise-native-chat #agent-chat-messages .markdown-body :is(h3,h4,h5,h6) { font-size: 1.1em; }
.exercise-native-chat #agent-chat-messages .markdown-body p { margin: .6em 0 !important; padding: 0; line-height: 1.7; }
.exercise-native-chat #agent-chat-messages .markdown-body :is(ul,ol) { margin: .6em 0 !important; padding: 0 0 0 1.5em !important; }
.exercise-native-chat #agent-chat-messages .markdown-body li { margin: .3em 0; padding: 0; line-height: 1.65; }
.exercise-native-chat #agent-chat-messages .markdown-body ul { list-style: disc; }
.exercise-native-chat #agent-chat-messages .markdown-body ol { list-style: decimal; }
.exercise-native-chat #agent-chat-messages .markdown-body hr { height: 0; margin: 1em 0 !important; border: 0; border-top: 1px solid #ffffff25; background: none; }
.exercise-native-chat #agent-chat-messages .markdown-body blockquote { margin: 1em 0 !important; padding: .5em .8em !important; border: 0; border-left: 3px solid #a78bfa; background: #ffffff08; color: inherit; }
.exercise-native-chat #agent-chat-messages .markdown-body blockquote::before,
.exercise-native-chat #agent-chat-messages .markdown-body blockquote::after { content: none !important; }
.exercise-native-chat #agent-chat-messages .markdown-body :is(th,td) { padding: 6px 8px; border: 1px solid #ffffff30; color: inherit; background: transparent; }
.exercise-native-chat #agent-chat-messages .markdown-body th { background: #ffffff08; }

/* 何を・なぜ: 終了画面は問題用グリッドと支援欄を外し、結果カードだけを中央の通常フローに収める。 */
.swb-exercise-page .exercise-finished { display: block; }
.swb-exercise-page .exercise-finished .quiz_area { display: block; padding: 0; }
.swb-exercise-page .exercise-finished :is(.quiz_comment,.exercise-chat-host,.exercise-support-open,#google-link-box) { display: none !important; }
.exercise-chat-finished { display: none !important; }
.swb-exercise-page .exercise-finished .quiz_result { box-sizing: border-box; width: min(960px,100%); margin: 0 auto; }
.swb-exercise-page .exercise-finished .quiz_result .quiz_next_align { flex-wrap: wrap; }
@media (max-width: 640px) {
    /* 何を・なぜ: 結果カードのpaddingを幅に含め、スマホでもカードと次アクションが画面内に収まる。 */
    .swb-exercise-page .exercise-finished .quiz_result { padding: 20px 16px; }
    .swb-exercise-page .exercise-finished .quiz_result_summary { box-sizing: border-box; width: 100%; padding: 16px 12px; }
}
/* 何を・なぜ: 結果へのスクロールでも固定ヘッダーが点数の見出しを覆わないようにする。 */
.swb-exercise-page .exercise-finished .quiz_result { scroll-margin-top: 140px; }
@media (max-width: 640px) {
    .swb-exercise-page .exercise-finished .quiz_result { scroll-margin-top: 100px; }
}

/* 何を・なぜ: 会員状態や支援欄の開閉に関係なく、問題の操作下で用語リンクを見つけられるようにする。 */
.swb-exercise-page .quiz_action { flex-wrap: wrap; }
.swb-exercise-page .quiz_action .glossary-tags { box-sizing: border-box; width: 100%; flex: 1 1 100%; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--exercise-line); justify-content: flex-start; gap: 8px; }

@media (min-width: 1100px) {
    /* 何を・なぜ: 未ログインの任意検索欄にも閉じる操作を出し、検索を欄の上部へ配置する。 */
    .swb-exercise-page .exercise-search-only .exercise-support-navigation { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: #f0edf8; border-radius: 10px; }
    .swb-exercise-page .exercise-search-only .exercise-chat-host { align-self: start; }
    .swb-exercise-page .exercise-search-only #google-link-box { padding: 10px; }
    .swb-exercise-page .exercise-search-only .quiz_comment { grid-row: 3; border: 0; padding: 0; }
}
/* 何を・なぜ: 検索だけの支援欄でも閉じる/再表示をスマホから操作できるようにする。 */
.swb-exercise-page .exercise-search-only .exercise-support-navigation button[hidden] { display: none; }
@media (max-width: 1099px) {
    .swb-exercise-page .exercise-search-only .exercise-support-navigation { display: flex; justify-content: flex-end; gap: 8px; }
    .swb-exercise-page .exercise-search-only .exercise-support-navigation button { min-height: 44px; padding: 8px 12px; }
}

/* 何を・なぜ: ヒントを短いアイコン付き操作にし、隣の全画面と同じ高さで揃える。 */
.exercise-native-chat .chat-title { flex-wrap: wrap; }
.exercise-native-chat #agent-chat-header .exercise-chat-tools .exercise-hint-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 32px; height: 32px; box-sizing: border-box; padding: 4px 8px !important; background: #ffd166 !important;
    border-color: #ffd166 !important; color: #211b3f !important; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.exercise-native-chat #agent-chat-header .exercise-hint-button:focus-visible { outline: 3px solid white; outline-offset: 3px; }

/* 何を・なぜ: 演習の埋込み会話は支援欄上部から閉じられるため、重複する会話内の閉じるを省く。 */
.swb-exercise-page .exercise-chat-host #agent-chat-header #agent-minimize-button { display: none; }

/* 何を・なぜ: 演習内の操作・会話切替・残高の段間余白を詰め、本文を読む高さを確保する。 */
.swb-exercise-page .exercise-chat-host #agent-chat-header { padding: 8px 12px; gap: 6px; }
.swb-exercise-page .exercise-chat-host #agent-chat-header .premium-toggle-wrapper { padding: 2px 6px; }
.swb-exercise-page .exercise-chat-host #agent-chat-header .clear-history-container { gap: 6px; }
.swb-exercise-page .exercise-chat-host #agent-chat-box .agent-thread-nav { margin: 6px 12px; padding: 2px; }
.swb-exercise-page .exercise-chat-host #agent-chat-box .agent-thread-nav button { min-height: 32px; padding: 4px 10px; font-size: 13px; line-height: 1.4; }
.swb-exercise-page .exercise-chat-host #agent-chat-box #ai-token-display { margin: 4px 12px 0; font-size: 12px; line-height: 1.5; }
.swb-exercise-page .exercise-chat-host #agent-chat-box #premium-llm-status { margin: 2px 12px 0; font-size: 11px; line-height: 1.4; }