/* ============================================================================
 * Floating Stack — 画面に固定表示される浮遊UIの座席管理
 *
 * 【なぜ必要か】
 * UX機能（UX-6/UX-9/UX-12/UX-21/#36/#45 等）が別々の時期に追加され、
 * それぞれが bottom-XX right-XX z-XX を直書きしていた結果、
 * 右下だけで9個の固定要素が同じ領域を奪い合って重なっていた（2026-08-25 実測）。
 *
 *   AIチャット bottom:24 right:24 z:9999 / 続きから読む bottom:16 right:24 z:50
 *   次記事レコメンド bottom:32 right:32 z:50 / PWA bottom:96 right:24 z:50
 *   読書モード bottom:96 right:16 z:40 / TOPへ戻る bottom:80 right:16 z:40
 *   記事を保存 bottom:80 right:80 z:40 / 共有 / 直接質問 …
 *
 * 【方針】
 * 座標の直書きを禁止し、下記4ゾーンのいずれかに要素を「登録」する。
 * 今後UI要素を追加する時も、必ずゾーンに入れること。個別に position:fixed を
 * 書くと再び同じ衝突が起きる。
 *
 *   Zone 1  .aa-float-anchor : 右下隅。AIチャットの起動ボタン専用（最前面）
 *   Zone 2  .aa-float-rail   : Zone1の上に縦1列。アイコンボタン群
 *   Zone 3  .aa-float-cards  : 左下。カード/バナー/トースト（縦積み）
 *   Zone 4  .aa-float-side   : 右端中央。縦長サイドバナー
 *
 * z-index も下記トークンに集約する（9999のような場当たりな値を書かない）。
 * ========================================================================= */

:root {
    /* 画面端からの距離 */
    --aa-float-edge: 1rem;      /* 16px */
    --aa-float-gap: 0.75rem;    /* 12px 要素間 */

    /* 画面下端からの基準距離。モバイルは下部ナビの高さを避ける */
    --aa-float-base: 1.5rem;    /* 24px */

    /* Zone1(アンカー)が占める高さ。Zone2はこの分だけ上に積む */
    --aa-float-anchor-size: 3.5rem; /* 56px */

    /* 重なり順（大きいほど手前）
     * 参考: #mobile-bottom-nav=100 / #bookmark-panel=200 / #exit-popup=500
     * アンカー(AIチャット)は元が z-index:9999 で常に最前面だったため、
     * モバイル下部ナビ(100)より上に置いてその意図を保つ。 */
    --aa-z-side: 40;
    --aa-z-rail: 50;
    --aa-z-cards: 60;
    --aa-z-anchor: 110;
}

/* モバイル/タブレット: #mobile-bottom-nav (h-16 = 64px + safe-area) を避ける */
@media (width < 1024px) {
    :root {
        --aa-float-base: calc(4rem + env(safe-area-inset-bottom) + 0.75rem);
    }
}

/* --- Zone 1: 右下隅アンカー（AIチャット起動ボタン） ------------------------ */
.aa-float-anchor {
    position: fixed;
    right: var(--aa-float-edge);
    bottom: var(--aa-float-base);
    z-index: var(--aa-z-anchor);
}

/* --- Zone 2: アイコンレール（アンカーの上に縦積み） ----------------------- */
.aa-float-rail {
    position: fixed;
    right: var(--aa-float-edge);
    bottom: calc(var(--aa-float-base) + var(--aa-float-anchor-size) + var(--aa-float-gap));
    z-index: var(--aa-z-rail);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--aa-float-gap);

    /* 要素間の隙間ではページ側をクリックできるようにする */
    pointer-events: none;
}

/*
 * ゾーンに入れる要素は position:fixed / bottom-XX / right-XX を持たないこと。
 * 積み上げが壊れる。ただし position:relative は
 * （ダイレクト質問ボタンのポップアップメニューのように）子要素の基準として
 * 必要な場合があるので、ここで一律に打ち消してはいけない。
 */
.aa-float-rail > * {
    pointer-events: auto;
    flex: none;
}

/* レールが空（表示条件を満たす要素が0個）の時に隙間を作らない */
.aa-float-rail:empty {
    display: none;
}

/* --- Zone 3: カード/バナー/トースト（左下に縦積み） ----------------------- */
.aa-float-cards {
    position: fixed;
    left: var(--aa-float-edge);
    bottom: var(--aa-float-base);
    z-index: var(--aa-z-cards);
    display: flex;
    flex-direction: column-reverse; /* 新しいものを下に積む */
    gap: var(--aa-float-gap);
    width: min(22rem, calc(100vw - var(--aa-float-edge) * 2));
    pointer-events: none;
}

.aa-float-cards > * {
    pointer-events: auto;
    flex: none;
    width: 100%;
}

.aa-float-cards:empty {
    display: none;
}

/* --- Zone 4: 右端中央のサイドバナー -------------------------------------- */

/*
 * 縦長バナーが伸びると Zone1/Zone2 の領域まで降りてきて重なるため、
 * 高さの上限を明示し、レールの上端で止める。
 */
.aa-float-side {
    z-index: var(--aa-z-side);
    max-block-size: calc(
        100vh
        - var(--aa-float-base)
        - var(--aa-float-anchor-size)
        - var(--aa-float-gap) * 2
        - 8rem /* ヘッダー側の余白 */
    );
    overflow-y: auto;
}

/* 印刷時は浮遊UIを全て隠す */
@media print {
    .aa-float-anchor,
    .aa-float-rail,
    .aa-float-cards,
    .aa-float-side {
        display: none !important;
    }
}