/**
 * webapp.css - Web アプリ版専用スタイル（FR-9）
 *
 * すべて body.web-app スコープで記述し、拡張版 CSS には一切影響させない。
 * 新規デザインは起こさず、モバイル操作に必要な最小限の調整のみ行う。
 */

/* 判定3ボタン（Include/Exclude/Maybe）を画面下部に固定して親指で操作しやすくする。
   iOS セーフエリア分を padding に加算する。 */
body.web-app #screening-section .decision-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

/* タップターゲットを 44px 以上に */
body.web-app #screening-section .decision-buttons button {
    min-height: 44px;
}

/* 下部固定バーに隠れないよう本文に余白を確保 */
body.web-app #screening-section {
    padding-bottom: 96px;
}

/* 拡張専用のタブ内セクションを非表示（capabilities でタブ自体も隠すが、CSS でも二重に担保）。
   実 ID は sidepanel.html に合わせる（#llm-section / #ml-section / #fulltext-section）。 */
body.web-app #llm-section,
body.web-app #ml-section,
body.web-app #fulltext-section {
    display: none !important;
}

/* ヘッダー/タイトルの「(ブラウザ版)」ラベル（webpack.config.js の transformSidepanelHtml で付与） */
body.web-app .app-edition {
    font-size: 12px;
    font-weight: 400;
    color: #888;
}

/* Web版レビュー専用案内カード（新規プロジェクト作成ボタンの代わりに表示） */
body.web-app #review-only-notice {
    margin-top: 12px;
    padding: 12px 14px;
    background: #f5f7fa;
    border: 1px solid #e0e4e9;
    border-radius: 8px;
    text-align: center;
}

body.web-app #review-only-notice h3 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

body.web-app #review-only-notice p {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* PCブラウザアクセス時のみ表示する拡張版誘導バナー（表示制御は src/webapp/desktop-notice.ts） */
body.web-app #desktop-extension-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: #eef6ff;
    border: 1px solid #cfe3fb;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
}

body.web-app #desktop-extension-notice .desktop-notice-text {
    flex: 1;
}

body.web-app #desktop-extension-notice .desktop-notice-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 13px;
    padding: 2px 6px;
    line-height: 1;
}

body.web-app #desktop-extension-notice .desktop-notice-close:hover {
    color: #333;
}