/* paper_qa.css — 論文スポット質問（💭）のスタイル。afk-serverのbtw風 */

/* ハイライト＋💭バッジ */
mark.qa-hl {
    background: #fff3a8;
    padding: 0 1px;
    border-radius: 2px;
}
mark.qa-hl.qa-flash {
    background: #ffd54f;
    transition: background .3s;
}
.qa-badge {
    cursor: pointer;
    font-size: .8em;
    opacity: .65;
    user-select: none;
    margin-left: 1px;
}
.qa-badge:hover { opacity: 1; }

/* 選択バー */
.qa-selbar {
    display: none;
    position: fixed;
    z-index: 3200;
    gap: 8px;
}
.qa-selbar.touch {
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    justify-content: center;
}
.qa-selbar button {
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #7c3aed;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    cursor: pointer;
}
.qa-selbar button:hover { background: #6d28d9; }
.qa-selbar #qaWhatBtn { background: #5b21b6; }
.qa-selbar.touch button { padding: 12px 22px; font-size: 15px; }

/* 質問ボックス */
#qaAskBox {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
    width: min(560px, 94vw);
    background: #fff;
    border: 1px solid #d1c4e9;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 12px;
    z-index: 3300;
}
.qa-askbox-quote {
    font-size: .8rem;
    color: #6b21a8;
    background: #f5f0ff;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    word-break: break-all;
}
.qa-askbox-row { display: flex; gap: 6px; }
.qa-askbox-row input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
}
.qa-askbox-row button {
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    background: #7c3aed;
    color: #fff;
    cursor: pointer;
}
.qa-askbox-row #qaAskCancel { background: #9ca3af; }
.qa-askbox-status { font-size: .8rem; color: #666; margin-top: 6px; min-height: 1em; }

/* 回答小窓（クリーム・afk風） */
.qa-popover {
    position: fixed;
    z-index: 3400;
    width: min(420px, 92vw);
    height: 300px;
    min-width: 240px;
    min-height: 140px;
    background: #fbf3d8;
    border: 1px solid #e6d08a;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
}
.qa-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f3e6bf;
    border-bottom: 1px solid #e6d08a;
    color: #8a6d3b;
    font-size: 12px;
    font-weight: 600;
    cursor: move;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
}
.qa-pop-time { margin-left: auto; font-weight: 400; }
.qa-pop-close {
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: #8a6d3b;
    padding: 0 4px;
}
.qa-pop-body {
    overflow-y: auto;
    padding: 10px 12px;
    font-size: .88rem;
    color: #3a2f1e;
}
.qa-pop-body pre { background: #f6edcf; border: 1px solid #e6d08a; }
.qa-pop-body code { background: #f0e4c0; color: #5b3a1a; }

/* 左下トグル */
#qaToggle {
    display: none;
    position: fixed;
    left: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 3100;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 18px;
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    cursor: pointer;
}
.qa-count {
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: #6d28d9;
    border-radius: 999px;
    padding: 1px 7px;
}

/* 履歴パネル（右ドロワー・スマホはフル幅） */
#qaPanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    background: #fff;
    border-left: 1px solid #ddd;
    box-shadow: -6px 0 20px rgba(0,0,0,.15);
    z-index: 3150;
    transform: translateX(105%);
    transition: transform .2s ease;
    display: flex;
    flex-direction: column;
}
#qaPanel.open { transform: translateX(0); }
.qa-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
    background: #faf7ff;
    flex-shrink: 0;
}
.qa-panel-close { border: none; background: transparent; font-size: 20px; cursor: pointer; }
.qa-panel-body { overflow-y: auto; padding: 10px 12px; }
.qa-panel-empty { color: #888; font-size: .85rem; padding: 16px 4px; }
.qa-item {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
}
.qa-item:hover { background: #faf7ff; }
.qa-item-head { display: flex; gap: 8px; align-items: center; font-size: .72rem; color: #999; }
.qa-item-tgt { background: #ede9fe; color: #6d28d9; border-radius: 4px; padding: 0 6px; }
.qa-item-orphan { color: #b45309; }
.qa-item-del { margin-left: auto; border: none; background: transparent; cursor: pointer; opacity: .6; }
.qa-item-del:hover { opacity: 1; }
.qa-item-quote { font-size: .78rem; color: #6b21a8; margin-top: 3px; word-break: break-all; }
.qa-item-q { font-size: .85rem; font-weight: 600; margin-top: 3px; }
.qa-item-a summary { font-size: .8rem; color: #555; cursor: pointer; margin-top: 2px; }
.qa-item-a .md { font-size: .82rem; margin-top: 6px; }

/* ── PDF.jsビューア（Phase 2: 紙面への注釈） ───────────────── */
.qa-pdf-viewer { border: 1px solid #ccc; }
.qa-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f4f4f6;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
}
.qa-pdf-toolbar button, .qa-pdf-open {
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    line-height: 1.6;
}
.qa-pdf-toolbar button:hover, .qa-pdf-open:hover { background: #ede9fe; }
.qa-pdf-sep { flex: 1; }
.qa-pdf-pos, .qa-pdf-zoom { color: #555; min-width: 54px; text-align: center; }
.qa-pdf-pages {
    height: 740px;
    overflow: auto;
    background: #525659;
    padding: 8px 0;
}
@media (max-width: 768px) { .qa-pdf-pages { height: 74vh; } }
.qa-pdf-page {
    position: relative;
    margin: 0 auto 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.qa-pdf-page canvas { display: block; }
.qa-pdf-error::after {
    content: 'このページを表示できませんでした';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #888; font-size: 13px;
}
.qa-pdf-pagenum {
    position: absolute;
    right: 6px; bottom: 4px;
    font-size: 11px;
    color: #999;
    pointer-events: none;
}
/* テキストレイヤー（透明・選択可能） */
.qa-pdf-textlayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
}
.qa-pdf-textlayer span, .qa-pdf-textlayer br {
    position: absolute;
    white-space: pre;
    color: transparent;
    cursor: text;
    transform-origin: 0 0;
}
.qa-pdf-textlayer ::selection { background: rgba(124,58,237,.35); }
/* 注釈ハイライト（紙面オーバーレイ） */
.qa-pdf-hllayer { position: absolute; inset: 0; pointer-events: none; }
.qa-pdf-hl {
    position: absolute;
    background: rgba(255, 224, 66, .42);
    border-radius: 2px;
    mix-blend-mode: multiply;
}
.qa-pdf-hl.qa-flash { background: rgba(255, 152, 0, .55); }
.qa-pdf-badge {
    position: absolute;
    font-size: 12px;
    pointer-events: auto;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.qa-pdf-fallback { padding: 8px 10px; font-size: 13px; color: #b45309; background: #fff7ed; }

/* ── Q&Aをペインのタブとして表示（2ペイン時） ───────────── */
.qa-pane { display: flex; flex-direction: column; height: 100%; }
.qa-pane-ask { display: flex; gap: 6px; margin-bottom: 10px; flex-shrink: 0; }
.qa-pane-ask input {
    flex: 1; border: 1px solid #ccc; border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
.qa-pane-ask button {
    border: none; border-radius: 6px; padding: 8px 14px; background: #0d6efd; color: #fff; cursor: pointer;
}
.qa-pane-ask button[disabled] { opacity: .5; }
.qa-pane-body { flex: 1; min-height: 0; }
.qa-pane-body .qa-item.qa-flash { background: #fff3cd; transition: background .3s; }

/* ホイールズーム中の即時プレビュー（手が止まったら実解像度で描き直す） */
.qa-pdf-inner { transform-origin: 0 0; }
/* プレビューは「ページ群をまとめた器」に一度だけ掛ける。
   各ページに個別に掛けると基点がページごとの座標になり、
   隣のページが画面下から重なって拡大されてしまう。 */
.qa-pdf-pages.qa-pdf-zooming .qa-pdf-inner {
    transform: scale(var(--ps-zoom, 1));
    transform-origin: var(--ps-zoom-x, 50%) var(--ps-zoom-y, 0px);
    will-change: transform;
}

/* スペース＋左ドラッグで紙面を移動（PC） */
.qa-pdf-pages.qa-pdf-grab { cursor: grab; user-select: none; }
.qa-pdf-pages.qa-pdf-grab .qa-pdf-textlayer,
.qa-pdf-pages.qa-pdf-grab .qa-pdf-textlayer span { cursor: grab; user-select: none; }
.qa-pdf-pages.qa-pdf-panning,
.qa-pdf-pages.qa-pdf-panning .qa-pdf-textlayer span { cursor: grabbing; }

/* エージェント回答の進行中表示 */
.qa-popover.qa-live .qa-live-status { font-size: 11px; color: #8a6d3b; max-width: 16em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── AI回答のMarkdown体裁 ─────────────────────────────
   狭いカード／小窓の中に本文用の見出しやリストがそのまま出ると、
   見出しが巨大・リストが深く字下げ・行間が詰まりすぎて読めなくなる。
   回答専用に一段小さく・行間広めへ組み直す（日本語主体のため行間は広め）。 */
.qa-item .qa-item-a .md,
.qa-pop-body {
    font-size: .84rem;
    line-height: 1.85;
    color: #2b2b2b;
    max-width: none;            /* ペイン本文の 76ch 制限を引きずらない */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.qa-item .qa-item-a .md > :first-child,
.qa-pop-body > :first-child { margin-top: 0; }
.qa-item .qa-item-a .md > :last-child,
.qa-pop-body > :last-child { margin-bottom: 0; }

/* 見出し: 本文とのコントラストは太さと余白で付け、サイズ差は控えめに */
.qa-item .qa-item-a .md :is(h1,h2,h3,h4,h5,h6),
.qa-pop-body :is(h1,h2,h3,h4,h5,h6) {
    font-weight: 700;
    line-height: 1.5;
    margin: 1.4em 0 .5em;
    color: #1a1a1a;
}
.qa-item .qa-item-a .md h1, .qa-pop-body h1 { font-size: 1.02rem; border-bottom: 1px solid #e3e3e8; padding-bottom: .25em; }
.qa-item .qa-item-a .md h2, .qa-pop-body h2 { font-size: .96rem; border-bottom: 1px solid #ececed; padding-bottom: .2em; }
.qa-item .qa-item-a .md h3, .qa-pop-body h3 { font-size: .90rem; }
.qa-item .qa-item-a .md :is(h4,h5,h6), .qa-pop-body :is(h4,h5,h6) { font-size: .86rem; color: #444; }

.qa-item .qa-item-a .md p, .qa-pop-body p { margin: 0 0 .85em; }

/* リスト: 既定の 2em は狭い枠では深すぎる。記号と本文の距離も詰める */
.qa-item .qa-item-a .md :is(ul,ol), .qa-pop-body :is(ul,ol) { margin: 0 0 .85em; padding-left: 1.35em; }
.qa-item .qa-item-a .md li, .qa-pop-body li { margin: .2em 0; }
.qa-item .qa-item-a .md li > p, .qa-pop-body li > p { margin: 0 0 .3em; }
.qa-item .qa-item-a .md :is(ul,ol) :is(ul,ol),
.qa-pop-body :is(ul,ol) :is(ul,ol) { margin: .2em 0 .3em; padding-left: 1.2em; }

/* コード: 折り返して枠からはみ出させない */
.qa-item .qa-item-a .md code, .qa-pop-body code {
    font-size: .84em;
    background: rgba(0,0,0,.05);
    border-radius: 4px;
    padding: .1em .35em;
}
.qa-item .qa-item-a .md pre, .qa-pop-body pre {
    font-size: .78rem;
    line-height: 1.6;
    margin: 0 0 .85em;
    padding: .6em .8em;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre;
}
.qa-item .qa-item-a .md pre code, .qa-pop-body pre code { background: none; padding: 0; font-size: inherit; }

/* 表: 枠内に収め、はみ出す分だけ横スクロール */
.qa-item .qa-item-a .md table, .qa-pop-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .8rem;
    margin: 0 0 .85em;
}
.qa-item .qa-item-a .md :is(th,td), .qa-pop-body :is(th,td) { border: 1px solid #dcdce2; padding: .3em .6em; }
.qa-item .qa-item-a .md th, .qa-pop-body th { background: #f5f5f7; font-weight: 600; }

/* 引用・区切り・強調・リンク */
.qa-item .qa-item-a .md blockquote, .qa-pop-body blockquote {
    margin: 0 0 .85em;
    padding: .1em 0 .1em .8em;
    border-left: 3px solid #d7d7de;
    color: #555;
}
.qa-item .qa-item-a .md hr, .qa-pop-body hr { margin: 1.1em 0; border: 0; border-top: 1px solid #e3e3e8; }
.qa-item .qa-item-a .md strong, .qa-pop-body strong { font-weight: 700; color: #111; }
.qa-item .qa-item-a .md a, .qa-pop-body a { color: #0d6efd; text-decoration: underline; }
.qa-item .qa-item-a .md img, .qa-pop-body img { max-width: 100%; height: auto; }

/* 小窓は背景がクリームなので、そこだけ配色を合わせる */
.qa-pop-body code { background: #f0e4c0; color: #5b3a1a; }
.qa-pop-body pre { background: #f6edcf; border: 1px solid #e6d08a; }
.qa-pop-body :is(h1,h2) { border-bottom-color: #e6d08a; }
.qa-pop-body :is(th,td) { border-color: #e6d08a; }
.qa-pop-body th { background: #f3e6bf; }
.qa-pop-body blockquote { border-left-color: #e6d08a; }

/* 履歴カード内の折りたたみ見出し */
.qa-item-a summary { font-size: .8rem; color: #555; cursor: pointer; margin-top: 2px; }
.qa-item-a[open] summary { margin-bottom: .5em; }

/* ── Q&Aカード内の details をページ用アコーディオン装飾から切り離す ──────
   paper.html の `details{border/背景/余白}` と `details>summary{padding:12px 16px;
   display:flex}` はページのセクション用。回答カードにも当たって、
   1行目だけ字下げされる・本文が枠に密着する、という違和感の原因だった。 */
.qa-item .qa-item-a {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: .45em 0 0;
}
.qa-item .qa-item-a > summary {
    display: block;                 /* flex+space-between をやめる */
    padding: 0;
    margin: 0 0 .35em;
    font-size: .76rem;
    font-weight: 600;
    color: #6b7280;
    list-style: none;
}
.qa-item .qa-item-a > summary::-webkit-details-marker { display: none; }
.qa-item .qa-item-a > summary::before { content: '▸ '; color: #9aa0a6; }
.qa-item .qa-item-a[open] > summary::before { content: '▾ '; }
/* 開いたら本文と同じ文言のプレビューは不要 */
.qa-item .qa-item-a[open] .qa-a-preview { display: none; }
.qa-a-label { font-weight: 700; color: #555; }
.qa-a-preview { font-weight: 400; }

/* 回答本文は「引用ブロック」として本文から少し離す（枠への密着を解消） */
.qa-item .qa-item-a .md {
    margin: 0;
    padding: .15em 0 .15em .75em;
    border-left: 2px solid #e5e5ec;
}

/* カード自体の内側余白も、小窓（10px 12px）と揃える */
.qa-item { padding: 10px 12px; }
.qa-item-quote { margin-top: 4px; }
.qa-item-q { margin-top: 4px; line-height: 1.6; }

/* スマホ: ピンチはアプリ側で受け取る（ブラウザ全体をズームさせない）。
   1本指のスクロールは従来どおり効かせるため pan-x pan-y は許可する。 */
.qa-pdf-pages { touch-action: pan-x pan-y; }

/* E: スマホでは回答を下部シートで見せる（小窓は幅も高さも足りない） */
@media (max-width: 768px) {
    .qa-popover {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: min(62vh, 560px) !important;
        border-radius: 14px 14px 0 0;
        resize: none;
    }
    .qa-pop-head { padding: 12px 14px; font-size: 13px; cursor: default; }
    .qa-pop-close { min-width: 44px; min-height: 44px; font-size: 20px; }
    .qa-pop-body { padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ── スクロールの連鎖を止める ─────────────────────────
   内側のスクロールが端に達すると、既定では背後のページへ伝わる
   （スマホでシート内をスワイプすると要約などが動いてしまう）。 */
.qa-pop-body,
.qa-pane-body,
.qa-panel-body,
.qa-pdf-pages { overscroll-behavior: contain; }
.qa-pop-head { touch-action: none; }      /* つまみ部分では背景を動かさない */

@media (max-width: 768px) {
    /* 下部シートを開いている間は背後を固定（読み終えて閉じれば元の位置に戻る） */
    body.ps-on.qa-sheet-open { overflow: hidden; }
    .qa-popover { overscroll-behavior: contain; }
}