/* 色変数の定義 */
:root {
    --color-cardinal-red: #B1221A;
    --color-light-cardinal-red: #db382f;
    --color-dark-cardinal-red: #8f1b15;
    --color-dark-gray: #666666;
    --color-white: #FFFFFF;
    --color-light-gray: #F5F5F5;
    --color-disabled-gray: #E3E3E3;
    --color-charcoal-gray: #333333;
    --color-medium-gray: #999999;
    --color-pale-beige: #F7EFE2;
    /* 連絡先管理用の色変数 */
    --color-table-border: #ddd;
    --gray-color: #F5F5F5;
    /* 偶数行に使用する薄い赤 */
    --color-even-row: #FCE8E8;
    /* 送付履歴の名前表示用のより暗い緑色 */
    --color-deep-green: #003300;
    /* 資料選択用の明るい緑色 */
    --color-select-green: #28a745;
    --footer-height: 70px;
    --header-height: 45px;
    /* ガラス質感用の共通スタイル変数 */
    --glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18));
    --glass-bg-soft: linear-gradient(135deg, rgba(255, 245, 245, 0.7), rgba(255, 255, 255, 0.16));
    --glass-border: 1px solid rgba(255, 255, 255, 0.45);
    --glass-border-strong: 1px solid rgba(255, 255, 255, 0.55);
    --glass-shadow-soft: 0 3px 4px rgba(51, 51, 79, 0.18);
    --glass-blur-amount: 18px;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    /* 入力フィールド以外でキャレットが点滅しないようにテキスト選択を無効化 */
    user-select: none;
    -webkit-user-select: none;
}

/* 入力系要素は選択とキャレット表示を許可する */
input,
textarea,
select,
option,
button,
[contenteditable="true"] {
    user-select: auto;
    -webkit-user-select: auto;
}

/* トップ画面はヘッダーを含めて全画面表示させる */
body.home-page {
    width: 100%;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

/* 3D背景用キャンバス */
#backgroundCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(4px);
    opacity: 0.6;
    pointer-events: none;
    /* 背景の薄いグラデーション */
    background: linear-gradient(to bottom, #ffffff, #ff9090dc);
}

/* ナビゲーションバー */
.top-nav {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* グラデーション（上部のハイライトで立体感を強調） */
    background-image: linear-gradient(180deg, rgb(255 0 0 / 18%) 0%, rgb(205 23 12) 18%, rgb(169 31 23) 100%);
    color: var(--color-white);
    padding: 3px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    /* トップ画面パネル（.panel）の“ぷっくり”トーンをヘッダーにも適用 */
    box-shadow: 0 2px 3px rgba(98, 22, 18, 0.32),        inset 0 1px 3px rgba(255, 255, 255, 0.35),        inset 0 -1px 5px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    width: 100%;
    z-index: 1000;
    left: 0;
    top: 0;
    /* 光沢レイヤー用 */
    overflow: visible;
    position: fixed;
}

/* ヘッダーの光沢（控えめに上半分だけ） */
.top-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.10) 22%,
        rgba(255, 255, 255, 0) 60%);
}
.logo-area {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-white);
}
.logo {
    /* 320x100 のロゴ画像に合わせた比率 */
    height: 30px;
    width: auto;
    padding-left: 5px;
}
.app-name {
    font-size: 1.2rem;
    font-weight: bold;
}
.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    /* ヘッダータイトルは薄いグレーで統一 */
    color: var(--color-light-gray);
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 17px;
}
.header-title__icon {
    width: 40px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}
.chat-agent-name {
    display: none;
    margin-left: 0.75rem;
    font-size: 1rem;
    color: var(--color-white);
    font-weight: 600;
}
.user-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 5px;
}
.company-name {
    font-weight: bold;
}
.top-nav .user-area .company-name,
.top-nav .user-area .user-name {
    /* 既存トークンの影を流用して、ヘッダー表示に立体感を付与 */
    text-shadow: var(--glass-shadow-soft);
}
.logout {
    cursor: pointer;
}

/* ダッシュボード用パネル */
.dashboard {
    /* メニューパネルを縦方向に並べる */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 5px;
    /* margin-top: 1.5rem; */
    justify-content: center;
    align-items: center;
}

/* トップページのダッシュボードはヘッダーとフッター分だけ余白を確保 */
body.home-page .dashboard {
    padding: var(--header-height) 5px var(--footer-height);
    margin: 0;
}

/* 管理設定ダッシュボードのヘッダー・フッター分の余白を確保 */
.admin-dashboard {
    padding: var(--header-height) 5px var(--footer-height);
    margin-top: 7rem;
    gap: 1rem;
}

/* ユーザー権限の管理設定ダッシュボードは中央寄せの1段構成にする */
.admin-dashboard.user-only-dashboard {
    margin-top: 0;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    justify-content: center;
}

.admin-dashboard.user-only-dashboard .menu-row.user-single-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1.25rem;
}

/* 統計/フォローアップエリアを左右に配置 */
.dashboard-top {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 両ダッシュボードの高さを揃える */
    gap: 1rem;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* スマホ幅でのダッシュボード表示調整 */
@media (max-width: 768px) {
    .dashboard-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    body.home-page .stats-dashboard,
    body.home-page .followup-dashboard {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }
    /* スマホ幅ではフォローアップダッシュボードを非表示にして見切れを防止 */
    .followup-dashboard {
        display: none;
    }
    .followup-lists {
        flex-direction: column;
    }
    .followup-section {
        min-height: 0;
        max-height: none;
    }
}

/* 統計ダッシュボード */
.stats-dashboard {
    width: 50%;
    max-width: none;
    padding: 0.6rem;
    border-radius: 20px;
    border: var(--glass-border);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-soft);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

body.home-page .stats-dashboard,
body.home-page .followup-dashboard {
    flex: 1 1 320px;
    min-width: 280px;
    width: auto;
}

/* 統計とフォローアップの背景ぼかしを統一 */
@supports (backdrop-filter: blur(1px)) {
    .stats-dashboard,
    .followup-dashboard {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(130deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14));
    }
}

/* 統計カードを横並びで表示 */
.stats-cards {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
    /* margin-bottom: 1rem; */
}

/* 各統計カード */
.stat-card {
    flex: 1;
    min-width: 150px;
    border-radius: 18px;
    padding: 0.75rem 0.75rem 1rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 239, 226, 0.6));
    box-shadow: 0 2px 3px rgba(51, 51, 51, 0.14), inset 0 1px 10px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
    opacity: 0.65;
    pointer-events: none;
}

.stat-card > * {
    position: relative;
    z-index: 1;
}

@supports (backdrop-filter: blur(1px)) {
    .stat-card {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(160%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(160%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(247, 239, 226, 0.28));
    }
}

/* 統計カードのタイトルを強調表示 */
.stat-card__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    padding: 0.55rem 0.5rem;
    background: linear-gradient(135deg, var(--color-cardinal-red) 0%, #d64c45 100%);
    color: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),        inset 0 1px 3px rgba(255, 255, 255, 0.35),        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* margin-bottom: 0.6rem; */
}

/* 統計カードのタイトルアイコン */
.stat-card__title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 0.95rem;
}

/* 統計カードのタイトル画像アイコン */
.stat-card__title-icon-image {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    display: block;
}

/* 統計カードのタイトルテキスト */
.stat-card__title-text {
    font-size: 0.9rem;
}

/* カード内の数値 */
.stat-card .value {
    font-size: 1.5rem;
    color: var(--color-cardinal-red);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* フォローアップリスト表示 */
.followup-dashboard {
    width: 50%;
    max-width: none;
    padding: 0.6rem;
    border-radius: 20px;
    border: var(--glass-border);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-soft);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.followup-dashboard h3 {
    margin-top: 0;
    text-align: center;
}
.followup-lists {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.followup-section {
    flex: 1;
    /* chart-container と同程度の高さを確保し、極端に縮まないようにする */
    min-height: 340px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(247, 239, 226, 0.28));
    box-shadow: 0 2px 3px rgba(51, 51, 51, 0.14), inset 0 1px 10px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.1);
    padding: 0.65rem 0.7rem 0.8rem;
    position: relative;
}

.followup-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    opacity: 0.6;
    pointer-events: none;
}

.followup-section > * {
    position: relative;
    z-index: 1;
}
.followup-section ul {
    list-style: none;
    /* ホバー時の浮き上がりで上端が切れないよう余白を確保 */
    padding: 0rem 0 0.4rem;
    margin: 0;
    /* リスト部分のみスクロールさせる */
    overflow-y: auto;
    flex: 1;
    scrollbar-width: none;
}
.followup-section ul::-webkit-scrollbar {
    width: 6px;
}
.followup-section ul::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.followup-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-align: center;
    /* box-shadow: var(--glass-shadow-soft); */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),        inset 0 1px 3px rgba(255, 255, 255, 0.35),        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    margin-bottom: 0.4rem;
}

/* 未閲覧タイトルのビジュアル強調 */
.followup-title--unviewed {
    background: linear-gradient(
135deg, var(--color-cardinal-red) 0%, #d64c45 100%);
}

/* スマホ幅ではフォローアップダッシュボードを確実に非表示にする */
@media (max-width: 768px) {
    body.home-page .followup-dashboard,
    .dashboard-top .followup-dashboard,
    .followup-dashboard {
        display: none !important;
    }
}

/* 閲覧済みアクションなしタイトルのビジュアル強調 */
.followup-title--noaction {
    background: linear-gradient(135deg, var(--color-cardinal-red) 0%, #d64c45 100%);
}

.followup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(140deg, rgba(255, 245, 245, 0.75), rgba(255, 255, 255, 0.24));
    border: var(--glass-border);
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.4rem;
    font-size: 0.6rem; /* フォントサイズを小さく */
    cursor: pointer;
    position: relative;
    /* トップ画面パネル（.panel）を参考に、控えめな立体感を付与 */
    box-shadow: 0 2px 3px rgba(98, 22, 18, 0.16),
        inset 0 1px 2px rgba(255, 255, 255, 0.55),
        inset 0 1px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
    overflow: visible;
    z-index: 0;
}

.followup-item:hover {
    box-shadow: 0 4px 5px rgba(98, 22, 18, 0.18),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 0px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.followup-item:active {
    box-shadow: 0 5px 10px rgba(98, 22, 18, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.45),
        inset 0 -3px 6px rgba(0, 0, 0, 0.12);
    transform: translateY(1px);
}

/* ホバー演出を無効化し、常時同じ質感で表示 */
@supports (backdrop-filter: blur(1px)) {
    .followup-item {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(160%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(160%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.16));
    }
}

.followup-item .fu-days {
    color: var(--color-cardinal-red);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

/* フォローアップ内の文字配置 */
.followup-item .fu-main {
    display: flex;
    flex-direction: column;
}

.followup-item .fu-name {
    display: flex;
    gap: 0.2rem;
}

.followup-item .fu-company {
    color: var(--color-charcoal-gray);
}

.followup-item .fu-doc {
    color: var(--color-medium-gray);
}

/* 折れ線グラフ表示エリア */
.chart-container {
    width: 100%;
    height: 250px; /* グラフの高さを統一 */
    position: relative;
    margin-top: 0.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 239, 226, 0.55)); /* 資料リストと同じ背景色 */
    border-radius: 18px;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 3px rgba(51, 51, 51, 0.14), inset 0 1px 10px rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    overflow: hidden;
}

.chart-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    opacity: 0.6;
    pointer-events: none;
}

.chart-container > * {
    position: relative;
    z-index: 1;
}

.chart-container--bar {
    height: 250px;
}

.chart-container--pie {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1.5rem;
}

@supports (backdrop-filter: blur(1px)) {
    .chart-container {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(247, 239, 226, 0.28));
    }
}

.report-block__surface .chart-container {
    margin-top: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.35rem;
}

.report-block__surface .chart-container::before {
    display: none;
}

/* 資料名リスト */
.doc-list {
    /* width: 100%; */
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    padding: 0.75rem;
    list-style: none;
    height: 200px; /* 1画面レイアウトに合わせて縦幅を拡張 */
    overflow-y: auto;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    margin: 0.5rem 0;
    font-size: 0.8rem; /* リストの文字サイズを微調整 */
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
}

@supports (backdrop-filter: blur(1px)) {
    .doc-list {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(140%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(140%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.1));
    }
}

.report-block__surface .doc-list,
.report-block__surface .customer-list,
.report-block__surface .category-effect-list {
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0.35rem;
}

/* 資料名リストのスクロールバーを一番細くする */
.doc-list::-webkit-scrollbar {
    width: 3px;
}

.doc-list::-webkit-scrollbar-track {
    background: transparent;
    /* 角丸分だけ上下に余白を作り、スクロールバーを少し短く見せる */
    margin: 8px 0;
}

.doc-list::-webkit-scrollbar-track-piece {
    margin: 8px 0;
}

.doc-list::-webkit-scrollbar-button,
.doc-list::-webkit-scrollbar-button:single-button,
.doc-list::-webkit-scrollbar-button:vertical:decrement,
.doc-list::-webkit-scrollbar-button:vertical:increment,
.doc-list::-webkit-scrollbar-button:vertical:start:decrement,
.doc-list::-webkit-scrollbar-button:vertical:end:increment,
.doc-list::-webkit-scrollbar-button:horizontal:decrement,
.doc-list::-webkit-scrollbar-button:horizontal:increment,
.doc-list::-webkit-scrollbar-button:horizontal:start:decrement,
.doc-list::-webkit-scrollbar-button:horizontal:end:increment {
    width: 0px;
    height: 0px;
    display: none;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.doc-list::-webkit-scrollbar-corner {
    background: transparent;
}

.doc-list::-webkit-scrollbar-thumb {
    background-color: rgba(177, 34, 26, 0.38);
    border-radius: 2px;
}
.doc-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-table-border);
    min-height: 34px; /* 項目の高さを固定 */
    line-height: 1.4; /* テキストを中央に配置 */
    padding: 0.4rem 0; /* 余白を広げて視認性を確保 */
    gap: 0.75rem; /* 左右項目の間隔を確保 */
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.doc-list li:not(.empty):hover {
    background: rgb(249 246 82 / 35%);
    /* border-radius: 10px; */
}

/* 今月送付資料がない場合のメッセージ */
.doc-list li.empty {
    justify-content: center;
    align-items: center;
    border-bottom: none;
    height: 100%; /* 空の場合も高さを保持 */
    line-height: 1.6;
    cursor: default;
}

.doc-list li.is-selected {
    background: rgb(249 246 82 / 35%);
    /* border-radius: 10px; */
    border-bottom-color: transparent;
}

.doc-list__content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}

.doc-list__name {
    display: inline-flex;
    align-items: center;
    overflow: hidden; /* はみ出しを隠す */
    text-overflow: ellipsis; /* 長い資料名は省略表示 */
    white-space: nowrap;
    color: #007720;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}

.doc-list__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.doc-list__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(177, 34, 26, 0.08);
    border: 1px solid rgba(177, 34, 26, 0.2);
    color: var(--color-charcoal-gray);
    font-size: 0.6rem;
    line-height: 1.2;
    gap: 0.25rem;
}

.doc-list__tag--empty {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

.doc-list li .count-badge {
    flex-shrink: 0; /* 送付数は縮まない */
}

/* 送付先リスト */
.customer-list {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    padding: 0.75rem;
    list-style: none;
    height: 200px;
    overflow-y: auto;
    margin: 0.5rem 0;
    font-size: 0.8rem;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
}

@supports (backdrop-filter: blur(1px)) {
    .customer-list {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(140%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(140%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.1));
    }
}

.customer-list::-webkit-scrollbar {
    width: 3px;
}

.customer-list::-webkit-scrollbar-track {
    background: transparent;
    /* 角丸分だけ上下に余白を作り、スクロールバーを少し短く見せる */
    margin: 8px 0;
}

.customer-list::-webkit-scrollbar-track-piece {
    margin: 8px 0;
}

.customer-list::-webkit-scrollbar-button,
.customer-list::-webkit-scrollbar-button:single-button,
.customer-list::-webkit-scrollbar-button:vertical:decrement,
.customer-list::-webkit-scrollbar-button:vertical:increment,
.customer-list::-webkit-scrollbar-button:vertical:start:decrement,
.customer-list::-webkit-scrollbar-button:vertical:end:increment,
.customer-list::-webkit-scrollbar-button:horizontal:decrement,
.customer-list::-webkit-scrollbar-button:horizontal:increment,
.customer-list::-webkit-scrollbar-button:horizontal:start:decrement,
.customer-list::-webkit-scrollbar-button:horizontal:end:increment {
    width: 0px;
    height: 0px;
    display: none;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.customer-list::-webkit-scrollbar-corner {
    background: transparent;
}

.customer-list::-webkit-scrollbar-thumb {
    background-color: rgba(177, 34, 26, 0.38);
    border-radius: 2px;
}

.customer-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-table-border);
    min-height: 34px;
    line-height: 1.4;
    padding: 0.25rem 0;
    gap: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.customer-list li:not(.empty):hover {
    background: rgb(249 246 82 / 35%);
    /* border-radius: 10px; */
}

.customer-list li span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-list li span:last-child {
    flex-shrink: 0;
}

.customer-list li.empty {
    justify-content: center;
    border-bottom: none;
    height: 100%;
    line-height: 200px;
    cursor: default;
}

.customer-list li.is-selected {
    background: rgb(249 246 82 / 35%);
    /* border-radius: 10px; */
    border-bottom-color: transparent;
}

/* カテゴリ別効果リスト */
.category-effect-list {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    padding: 0.75rem;
    list-style: none;
    margin: 0.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 228px;
    max-height: 228px;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
}

@supports (backdrop-filter: blur(1px)) {
    .category-effect-list {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(140%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(140%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.1));
    }
}

.category-effect-list::-webkit-scrollbar {
    width: 3px;
}

.category-effect-list::-webkit-scrollbar-track {
    background: transparent;
    /* 角丸分だけ上下に余白を作り、スクロールバーを少し短く見せる */
    margin: 8px 0;
}

.category-effect-list::-webkit-scrollbar-track-piece {
    margin: 8px 0;
}

.category-effect-list::-webkit-scrollbar-button,
.category-effect-list::-webkit-scrollbar-button:single-button,
.category-effect-list::-webkit-scrollbar-button:vertical:decrement,
.category-effect-list::-webkit-scrollbar-button:vertical:increment,
.category-effect-list::-webkit-scrollbar-button:vertical:start:decrement,
.category-effect-list::-webkit-scrollbar-button:vertical:end:increment,
.category-effect-list::-webkit-scrollbar-button:horizontal:decrement,
.category-effect-list::-webkit-scrollbar-button:horizontal:increment,
.category-effect-list::-webkit-scrollbar-button:horizontal:start:decrement,
.category-effect-list::-webkit-scrollbar-button:horizontal:end:increment {
    width: 0px;
    height: 0px;
    display: none;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Firefoxのみ：スクロールバーの細さ・色を適用（Chrome側の矢印表示を回避） */
@supports (-moz-appearance: none) {
    .doc-list,
    .customer-list,
    .category-effect-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(177, 34, 26, 0.38) transparent;
    }
}

.category-effect-list::-webkit-scrollbar-corner {
    background: transparent;
}

.category-effect-list::-webkit-scrollbar-thumb {
    background-color: rgba(177, 34, 26, 0.38);
    border-radius: 2px;
}

.category-effect-list li {
    background: #fff;
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    border: 1px solid #edf0f4;
    box-shadow: var(--glass-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
}

.category-effect-list li:not(.empty):hover {
    background: rgb(249 246 82 / 35%);
    /* border-color: rgba(245, 198, 82, 0.35); */
}

.category-effect-list li.empty {
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-weight: 600;
    min-height: 180px;
    cursor: default;
}

.category-effect-list li.is-selected {
    background: rgb(249 246 82 / 35%);
    /* border-color: rgb(249 246 82 / 35%); */
}

.category-effect__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
}

.category-effect__name {
    display: inline-flex;
    align-items: center;
    color: var(--color-charcoal-gray);
    font-size: 0.8rem;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-effect__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(177, 34, 26, 0.08);
    color: var(--color-cardinal-red);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(177, 34, 26, 0.22);
    flex-shrink: 0;
    white-space: nowrap;
}

.category-effect__badge i {
    color: var(--color-cardinal-red);
}

.category-effect__number {
    line-height: 1;
}

.category-effect__rates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.category-effect__rate {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 10px;
    background: #f5f7fb;
    color: #374151;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    font-size: 0.85rem;
}

.category-effect__rate--accent {
    background: rgba(15, 122, 90, 0.08);
    color: #0f7a5a;
    border-color: rgba(15, 122, 90, 0.16);
}

.category-effect__rate i {
    color: inherit;
}

.category-effect__rate-value {
    color: var(--color-charcoal-gray);
    font-weight: 700;
}

@media (max-width: 1400px) {
    .category-effect__badge {
        margin-left: 0;
    }
}

/* 数字を視覚的に示すバッジ */
.count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(177, 34, 26, 0.08);
    color: var(--color-cardinal-red);
    border: 1px solid rgba(177, 34, 26, 0.18);
    font-size: 0.6rem;
}

.count-badge__number {
    font-size: 1rem;
}

.count-badge--accent {
    background: rgba(0, 128, 96, 0.1);
    border-color: rgba(0, 128, 96, 0.2);
    color: #007a5a;
}

/* 全社レポート用スタイル */
.company-report {
    display: flex;
    flex-direction: column; /* 縦並びで1列にする */
    box-sizing: border-box; /* パディング分も含めてレイアウトを調整 */
    align-items: center;
    gap: 0.75rem;
    padding: var(--header-height) 0.6rem var(--footer-height); /* ヘッダー・フッター分のみ余白を確保 */
}

/* 担当者フィルター */
.report-filter {
    width: 100%;
    background: var(--glass-bg-strong);
    border-radius: 16px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    padding: 0.5rem;
    box-sizing: border-box;
}

@supports (backdrop-filter: blur(1px)) {
    .report-filter {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14));
    }
}


.report-filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.report-filter__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.report-filter__save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--color-cardinal-red), #d64c45);
    color: var(--color-white);
    border: none;
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--glass-shadow-soft);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.report-filter__save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.report-filter__save-btn:active {
    transform: translateY(0);
    opacity: 0.9;
}

.report-filter__save-btn i {
    font-size: 1rem;
}

.report-filter__period {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    padding: 0.2rem 0;
}

.report-filter__period label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-charcoal-gray);
    white-space: nowrap;
}

.report-filter__period-select {
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--color-white);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 0.9rem;
    min-width: 120px;
}

.report-filter__period-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.report-filter__period-select--detail {
    min-width: 140px;
}

.report-filter__header h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-charcoal-gray);
}

.report-filter__header p {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
}

.report-filter__control {
    flex: 1 1 320px;
    min-width: 240px;
}

.report-filter .select2-container {
    width: 100% !important;
}

.report-filter .select2-selection {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.report-filter .select2-selection--multiple {
    position: relative;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 34px;
    border-radius: 12px;
}

.report-filter .select2-selection--multiple::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-cardinal-red);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 4px !important;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    height: 25px !important;
    min-height: 0rem;   /* 高さの最小値をリセット */
}

.report-filter .select2-selection__choice {
    background: rgba(177, 34, 26, 0.12);
    border: 1px solid rgba(177, 34, 26, 0.35);
    color: var(--color-charcoal-gray);
    border-radius: 10px;
    padding: 4px 8px;
}

.report-filter .select2-selection__choice__remove {
    color: var(--color-cardinal-red);
    margin-right: 6px;
}

.report-filter .select2-search__field::placeholder,
.report-filter .select2-selection__placeholder {
    color: #555;
    opacity: 0.9;
}

.report-filter .select2-selection__placeholder {
    position: relative;
    padding-left: 0;
}

.report-filter .select2-search__field::placeholder {
    font-family: "Font Awesome 6 Free", "Noto Sans JP", sans-serif;
    font-weight: 400;
}

.report-filter .select2-results__option--highlighted {
    background-color: rgba(177, 34, 26, 0.08) !important;
    color: var(--color-charcoal-gray) !important;
}

.report-filter .select2-results__option[aria-selected="true"] {
    background-color: rgba(177, 34, 26, 0.15) !important;
}

.report-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    gap: 1.5rem;
}
.report-user {
    background: var(--glass-bg-strong);
    padding: 1rem; /* 余白を調整 */
    border-radius: 20px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    font-size: 0.9rem; /* 全体の文字サイズを調整 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

/* 画面右上の固定フィルターアイコン */
.report-global-filter {
    position: fixed;
    top: calc(var(--header-height, 0px) + 4.8rem);
    right: max(1rem, env(safe-area-inset-right));
    z-index: 1200;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.report-global-filter__button {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-charcoal-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glass-shadow-soft);
    cursor: pointer;
    transition: border 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.report-global-filter__button.is-active {
    border-color: rgba(177, 34, 26, 0.5);
    color: var(--color-cardinal-red);
    box-shadow: var(--glass-shadow-soft);
}

.report-global-filter__button:hover {
    border-color: rgba(177, 34, 26, 0.4);
    color: var(--color-cardinal-red);
    transform: translateY(-1px);
}

.report-global-filter__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    min-width: 240px;
    max-width: min(360px, 92vw);
    max-height: 60vh;
    overflow: auto;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    border: var(--glass-border);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-soft);
    display: none;
}

@supports (backdrop-filter: blur(1px)) {
    .report-global-filter__panel {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2));
    }
}

.report-global-filter:hover .report-global-filter__panel,
.report-global-filter:focus-within .report-global-filter__panel {
    display: block;
}

.report-global-filter__title {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-charcoal-gray);
}

.report-global-filter__content {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.report-global-filter__section-title {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-charcoal-gray);
}

.report-global-filter__empty {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--color-charcoal-gray);
}

.report-global-filter__empty.is-hidden {
    display: none;
}

/* 担当者ヘッダー（氏名と期間切替を同列で表示） */
.report-user__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    flex-wrap: nowrap;
    margin-bottom: 0.3rem;
}

/* 担当者ごとの表示期間フィルター */
.report-user__controls {
    width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.report-user__controls label {
    font-size: 0.9rem;
    color: var(--color-charcoal-gray);
}

.report-user__period-select {
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--color-white);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 0.9rem;
    min-width: 120px;
}

@supports (backdrop-filter: blur(1px)) {
    .report-user {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14));
    }
}
.report-user__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    text-align: left;
    padding: 0.35rem 0.8rem;
    background: linear-gradient(135deg, var(--color-cardinal-red) 0%, #d64c45 100%);
    border-radius: 999px;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: var(--glass-shadow-soft);
    flex-shrink: 0;
}

.report-user__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    line-height: 1;
}

.report-user__title-icon i {
    font-size: 1.05rem;
    line-height: 1;
}

/* レポートカード内の3カラム配置 */
.report-columns {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "docs"
        "category"
        "customer"
        "trend"
        "tags"
        "history";
    grid-auto-rows: minmax(240px, auto);
    grid-auto-flow: row;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 0.5rem;
}

@media (min-width: 1024px) {
    .report-columns {
        grid-template-columns: 1.35fr 1.15fr 1fr;
        grid-template-areas:
            "docs category customer"
            "trend company tags"
            "history history history";
        grid-auto-rows: minmax(260px, auto);
    }
}

/* スマホ表示時は各コンテンツを縦並び＆横幅100%に統一 */
@media (max-width: 768px) {
    .report-columns {
        display: block;
    }

    .report-block {
        width: 100%;
        min-width: 100%;
    }

    /* スマホ表示時は担当者名を折り返して表示する */
    .report-user__header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .report-user__header .group-title {
        width: 100%;
        white-space: normal;
        order: 1;
    }

    .report-user__title {
        width: 100%;
        order: 2;
        flex-wrap: wrap;
        white-space: normal;
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* 月次・週次レポート共通ブロック */
.report-block {
    flex: 1 1 320px; /* グラフエリアは一定幅を確保しつつ可変 */
    min-width: 260px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* レポートブロック内の白背景コンテンツ */
.report-block__surface {
    background: var(--glass-bg-soft);
    border-radius: 18px;
    padding: 0.75rem;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    box-sizing: border-box;
}

@supports (backdrop-filter: blur(1px)) {
    .report-block__surface {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.12));
    }
}

.report-block--chart {
    min-height: 260px;
}

.report-block--pie {
    min-height: 260px;
}

.report-block--list {
    min-height: 280px;
}

.report-block--category {
    grid-area: category;
}

@media (max-width: 1100px) {
    .report-block--chart {
        min-height: 260px;
    }
}

.report-block--docs {
    grid-area: docs;
}

.report-block--customer {
    grid-area: customer;
}

.report-block--trend {
    grid-area: trend;
}

.report-block--company-rate {
    grid-area: company;
}

.report-block--tags {
    grid-area: tags;
}

.report-block--history {
    grid-area: history;
    min-height: 260px;
}

.report-history__wrapper {
    width: 100%;
    flex: 1 1 auto;
    overflow: auto;
    border-radius: 16px;
}

/* 送付履歴が一定件数を超える場合のみ固定高さにする */
.report-history__wrapper--fixed {
    height: 570px;
    min-height: 360px;
    max-height: 570px;
}

/* レポートブロックのタイトル */
.report-block__title {
    margin: 0.1rem 0 0.2rem;
    font-weight: 600;
    color: var(--color-charcoal-gray);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.report-block__surface .report-block__title {
    margin: 0;
}

.report-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.report-block__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(177, 34, 26, 0.08);
    border: 1px solid rgba(177, 34, 26, 0.18);
}

.report-block__toggle-button {
    border: none;
    background: transparent;
    color: var(--color-charcoal-gray);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem;
    border-radius: 999px;
    cursor: pointer;
    width: 28px;
    height: 20px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.report-block__toggle-button i {
    font-size: 0.7rem;
}

.report-block__toggle-button.is-active {
    background: var(--color-cardinal-red);
    color: #fff;
    box-shadow: 0 6px 14px rgba(177, 34, 26, 0.28);
}

.report-block__toggle-button:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.4);
    outline-offset: 2px;
}

.report-block__chart-switcher {
    flex: 1 1 auto;
    width: 100%;
}

.report-block__chart-panel {
    display: none;
    width: 100%;
}

.report-block__chart-panel.is-active {
    display: flex;
}

.report-block__title--history {
    flex-wrap: wrap;
    gap: 0.45rem;
}

.report-block__title i {
    color: var(--color-cardinal-red);
}

.title-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(177, 34, 26, 0.08);
    border: 1px solid rgba(177, 34, 26, 0.2);
    color: var(--color-charcoal-gray);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
}

.title-chip i {
    color: var(--color-cardinal-red);
}

.title-chip__label {
    color: var(--color-charcoal-gray);
    font-weight: 600;
}

.title-chip__number {
    color: var(--color-cardinal-red);
    font-size: 1rem;
}

.title-chip__unit {
    color: #5a6475;
    font-weight: 600;
}

.title-chip--accent {
    background: rgba(0, 128, 96, 0.1);
    border-color: rgba(0, 128, 96, 0.22);
}

.title-chip--accent i {
    color: #0f7a5a;
}

.history-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.4rem;
    flex-wrap: wrap;
}

.report-history__tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0.35rem;
}

.history-filter__list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.history-filter__list.is-empty {
    display: none;
}

.history-filter__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(177, 34, 26, 0.1);
    border: 1px solid rgba(177, 34, 26, 0.25);
    color: var(--color-charcoal-gray);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.history-filter__chip:hover {
    background: rgba(177, 34, 26, 0.18);
    color: var(--color-cardinal-red);
}

.history-filter__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--color-white);
    color: var(--color-charcoal-gray);
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: var(--glass-shadow-soft);
    transition: border 0.2s ease, color 0.2s ease;
}

.history-filter__clear:hover:enabled {
    border-color: rgba(177, 34, 26, 0.4);
    color: var(--color-cardinal-red);
}

.history-filter__clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-filter__clear.is-hidden {
    display: none;
}

/* 送付履歴テーブル */
.report-history__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.4rem;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.12));
    border-radius: 16px;
    overflow: hidden;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    font-size: 0.85rem;
    color: var(--color-charcoal-gray);
}

.report-history__table th,
.report-history__table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--color-table-border);
    text-align: left;
    vertical-align: middle;
}

.report-history__table th {
    background: #2fb52059;
    font-weight: 700;
}

.report-history__table td {
    height: 35px;
}

.report-history__table tbody tr:last-child td {
    border-bottom: none;
}

/* .report-history__target {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
} */

.report-history__recipient-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.report-history__recipient {
    font-weight: 700;
    color: var(--color-charcoal-gray);
    word-break: break-all;
}

.report-history__company {
    font-weight: 700;
    color: var(--color-cardinal-red);
}

.report-history__doc {
    color: var(--color-charcoal-gray);
    font-size: 0.85em;
}

.report-history__doc.is-link {
    color: #007720;
    text-decoration: underline;
    cursor: pointer;
}

.report-history__doc.deleted-document-label {
    color: rgba(51, 51, 51, 0.45);
    text-decoration: none;
    cursor: default;
}

.report-history__doc.is-link:focus-visible {
    outline: 2px solid var(--color-cardinal-red);
    outline-offset: 2px;
}

.report-history__empty {
    text-align: center;
    padding: 1.2rem 0.5rem;
    color: #6b7280;
}

.report-history__pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.report-history__pagination-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.4rem;
}

.report-history__pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-history__status-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--color-white);
    color: var(--color-charcoal-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: var(--glass-shadow-soft);
}

.report-history__status-btn:hover {
    border-color: rgba(177, 34, 26, 0.3);
    color: var(--color-cardinal-red);
}

.report-history__status-btn.is-active {
    background: var(--color-cardinal-red);
    color: var(--color-white);
    border-color: rgba(177, 34, 26, 0.6);
}

.report-history__status-btn:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.6);
    outline-offset: 2px;
}

.report-history__page-btn {
    padding: 0.35rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--color-white);
    color: var(--color-charcoal-gray);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--glass-shadow-soft);
}

.report-history__page-btn:hover:enabled {
    border-color: rgba(177, 34, 26, 0.3);
    color: var(--color-cardinal-red);
}

.report-history__page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.report-history__page-info {
    font-weight: 700;
    color: var(--color-charcoal-gray);
}

.report-history__status--alert {
    color: var(--color-cardinal-red);
    font-weight: 700;
}

/* 送付履歴の未開封経過時間タグ */
.report-history__elapsed {
    background-color: #ff0d00;
    color: var(--color-white);
    font-size: 12px;
    border-radius: 3px;
    padding: 0.2rem 0.45rem;
    margin-left: 5px;
}

.report-history__elapsed--hour {
    background-color: #cdc822;
}

.report-history__elapsed--minute {
    background-color: #6d93ff;
}

.report-history__reply {
    /* display: flex; */
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
    padding-right: 2.1rem;
}

.report-history__chat-link {
    border: none;
    background: var(--color-cardinal-red);
    color: var(--color-white);
    border-radius: 999px;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.report-history__chat-link:hover {
    transform: translateY(-50%) scale(1.05);
    opacity: 0.9;
}

.report-history__chat-link.is-closed {
    background: #bdbdbd;
    color: var(--color-white);
}

.report-history__chat-link.is-no-reply:not(.is-closed) {
    background: #1e1ab1;
}

.report-history__chat-link.is-no-reply:not(.is-closed):hover {
    opacity: 0.85;
}

.report-history__chat-link.is-closed:hover {
    opacity: 0.75;
}

.report-history__chat-link.is-closed .report-history__chat-badge {
    background-color: #9e9e9e;
}

.report-history__chat-link:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.6);
    outline-offset: 2px;
}

/* 全社レポート（送付履歴）チャット件数バッジ */
.report-history__chat-badge {
    position: absolute;
    width: 15px; /* チャットボタン用は小さめに調整 */
    height: 15px;
    border-radius: 50%;
    background-color: var(--color-select-green);
    color: var(--color-white);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    top: -5px;
    right: -5px;
    padding: 1px;
    pointer-events: none; /* クリック阻害を防ぐ */
}

.report-history__reply-message {
    font-size: 0.78rem;
    color: rgba(51, 51, 51, 0.7);
    word-break: break-word;
}

/* 集計情報表示 */
.stat-group {
    background: var(--glass-bg-soft);
    border-radius: 16px;
    padding: 0.65rem 0.85rem;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 1rem;
    line-height: 1.35;
    margin: 0.05rem 0 0.8rem;
}

.stat-group--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.report-user__header .group-title {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

@supports (backdrop-filter: blur(1px)) {
    .stat-group {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.12));
    }
}

.stat-group .stat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.4rem;
    align-items: flex-start;
}

.stat-group--inline .stat-list {
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.stat-group .stat-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.stat-group--inline .stat-row {
    align-items: center;
}

.stat-group .stat-label {
    color: var(--color-charcoal-gray);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* .stat-group .stat-label i {
    color: var(--color-cardinal-red);
} */

.group-title {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.05rem 0 0.12rem;
    font-size: 1.1rem;
}

.group-title i {
    color: var(--color-cardinal-red);
}

.stat-group .stat-value {
    color: var(--color-cardinal-red);
    font-weight: bold;
}

.stat-group .rate-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.1rem 0 0.25rem;
}

/* 段ごとの行スタイル */
.menu-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    /* 画面幅が狭い場合に折り返す */
    flex-wrap: wrap;
}

body.home-page .menu-row {
    width: 100%;
}

body.home-page .menu-row .panel {
    width: auto;
    flex: 1 1 clamp(170px, 21vw, 230px);
    max-width: 250px;
}

body.home-page .menu-row .panel-compact {
    width: auto;
    /* panel よりも伸びないよう flex-grow を無効化し、タブレット横向きでも差を出す */
    flex: 0 1 clamp(95px, 14vw, 140px);
    max-width: 150px;
}
.panel {
    /* デフォルトテーマ（カーディナルレッド系） */
    --panel-bg-start: rgba(177, 34, 26, 0.78);
    --panel-bg-end: rgba(143, 27, 21, 0.65);
    --panel-text-color: var(--color-white);
    --panel-hover-text-color: var(--color-white);
    --panel-shadow-hover: 0 18px 36px rgba(95, 20, 16, 0.38);
    --panel-lift: translateY(-4px) scale(1.02);
    --panel-glow-color: rgba(255, 255, 255, 0.4);
    --panel-glow-radius: 75%;
    --panel-glow-scale: 0.82;
    --panel-glow-scale-hover: 1.02;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* パネルのサイズを統一しつつ縦幅を縮小 */
    width: 200px;
    height: 170px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    /* 内側ハイライトを保ちながら右上バッジが切れないように overflow は指定しない */
    /* アニメーションのための下地 */
    background-image: linear-gradient(180deg,
        rgba(143, 27, 21, 0.55) 0%,
        rgb(205 11 0 / 78%) 50%,
        rgba(143, 27, 21, 0.55) 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: var(--panel-text-color);
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -3px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        background-position 0.45s ease,
        color 0.3s ease;
    overflow: visible;
    /* ホバー演出は撤廃し、静的に表示 */
}

@supports (backdrop-filter: blur(1px)) {
    .panel {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(170%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(170%);
        background-image: linear-gradient(180deg,
            rgba(143, 27, 21, 0.55) 0%,
            rgb(205 11 0 / 78%) 50%,
            rgba(143, 27, 21, 0.55) 100%);
    }
    .panel-compact {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(155%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(155%);
        background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(246, 246, 246, 0.46));
    }
}
.panel-compact {
    /* 利用頻度の低いパネルを控えめに見せるためのサイズと配色 */
    width: 110px;
    height: 96px; /* 縦幅をわずかに伸ばして視認性を確保 */
    --panel-bg-start: rgba(255, 255, 255, 0.95);
    --panel-bg-end: rgba(246, 246, 246, 0.55);
    --panel-text-color: var(--color-charcoal-gray);
    --panel-hover-text-color: var(--color-charcoal-gray);
    --panel-shadow-hover: 0 18px 36px rgba(120, 107, 96, 0.32);
    --panel-lift: translateY(-3px) scale(1.03);
    --panel-glow-color: rgba(255, 255, 255, 0.32);
    --panel-glow-radius: 70%;
    --panel-glow-scale: 0.88;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(246, 246, 246, 0.46));
    box-shadow: 0 3px 4px rgba(120, 107, 96, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.6),
        inset 0 -2px 6px rgba(0, 0, 0, 0.18);
}
.panel-icon {
    font-size: 2.7rem; /* パネルアイコンをさらに縮小 */
    margin-bottom: 0.5rem;
    color: var(--color-white);
    /* 発光 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* パネルアイコンが画像のときの表示調整 */
/* 通常パネルは 60px 固定 */
.panel:not(.panel-compact) .panel-icon .panel-icon-image {
    width: 70px;
    height: 60px;
    object-fit: contain;
    display: block;
}

/* panel-compact は従来サイズを維持 */
.panel.panel-compact .panel-icon .panel-icon-image {
    width: 55px;
    height: 44px;
    object-fit: contain;
    display: block;
}
.panel-compact .panel-icon {
    /* 控えめパネルのアイコンをさらに縮小し差別化を強調 */
    font-size: 2rem;
    color: var(--color-cardinal-red);
    text-shadow: none;
}
.panel-compact .panel-title {
    /* 控えめパネルのタイトルサイズを微調整 */
    font-size: 0.8rem;
}
.panel-title {
    font-size: 1.0rem;
    font-weight: bold;
}

/* トップ・管理設定パネルのホバー効果 */
.panel:hover {
    box-shadow: 0 5px 10px rgba(98, 22, 18, 0.38),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -4px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.panel:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

.panel-compact:hover {
    box-shadow: 0 5px 10px rgba(120, 107, 96, 0.28),
        inset 0 2px 4px rgba(255, 255, 255, 0.65),
        inset 0 -3px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.panel-compact:active {
    box-shadow: 0 6px 10px rgba(120, 107, 96, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -3px 5px rgba(0, 0, 0, 0.22);
    transform: translateY(1px);
}

/* モーダル表示中は背景スクロールを無効化 */
html.modal-scroll-locked,
body.modal-scroll-locked {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

/* 資料ライブラリページ */
.library {
    box-sizing: border-box;
    padding: var(--header-height) 1.5rem var(--footer-height);
    display: flex;
    flex-direction: column;
    justify-content: center; /* 画面中央に配置 */
    align-items: center;
    gap: 1.5rem;
    /* width: min(1200px, 100%); */
    margin: 0 auto;
    min-height: calc(100vh - var(--header-height)); /* ヘッダー分の高さを引く */
}

@media (max-height: 860px) {
    .library {
        /* margin: 35px auto 70px; */
        padding: var(--header-height) 1rem var(--footer-height);
        min-height: calc(100vh - var(--header-height) - 35px);
    }
}
.tag-filter {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem 0;
    box-sizing: border-box;
}
.tag-filter-chip {
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    background-color: var(--color-light-gray);
    color: var(--color-charcoal-gray);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    box-shadow: var(--glass-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.tag-filter-chip--active {
    color: var(--color-white);
    background-color: var(--tag-color, var(--color-cardinal-red));
    box-shadow: var(--glass-shadow-soft);
    transform: translateY(-2px);
}
.tag-filter-chip--inactive {
    background-color: #e0e0e0;
    color: var(--color-charcoal-gray);
}
.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.search-bar input {
    width: 250px;
    padding: 0.75rem;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--color-medium-gray); /* ボーダー色を統一 */
}
.search-bar select {
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-medium-gray);
}
.search-bar input,
.search-bar select,
.search-bar .search-btn,
.search-bar .clear-btn {
    height: 3rem;
    box-sizing: border-box;
}
.icon-only-btn {
    width: 3rem;
    min-width: 3rem;
    padding: 0;
    font-size: 1.3rem;
}
.search-bar .search-btn,
.search-bar .clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-btn {
    /* メニューパネルと同じグラデーションを適用 */
    background-image: linear-gradient(to bottom right,        var(--color-light-cardinal-red), var(--color-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 0.8rem 0.9rem;
    font-size: 1.1rem;
    cursor: pointer;
    /* トップ画面パネル（.panel）と同じ“ぷっくり”トーン */
    box-shadow: 0 2px 3px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}
.search-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    box-shadow: 0 5px 6px rgba(98, 22, 18, 0.38),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
.search-btn:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* 検索クリアボタン */
.clear-btn {
    background-image: linear-gradient(to bottom right, #b7b7b7, #5f5e5e);
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 0.8rem 0.9rem;
    font-size: 1.1rem;
    cursor: pointer;
    /* panel-compact（控えめパネル）の影トーンに寄せる */
    box-shadow: 0 3px 4px rgba(120, 107, 96, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.clear-btn:hover {
    opacity: 0.92;
    background-image: linear-gradient(to bottom right, var(--color-medium-gray), #5f5f5f);
    box-shadow: 0 11px 18px rgb(149 133 119 / 28%), inset 0 2px 4px rgba(255, 255, 255, 0.65), inset 0 -5px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}
.clear-btn:active {
    box-shadow: 0 6px 10px rgba(120, 107, 96, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -3px 5px rgba(0, 0, 0, 0.22);
    transform: translateY(1px);
}

/* CSVエクスポートボタン */
.export-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    /* フォントを少し大きく */
    font-size: 1.1rem;
    cursor: pointer;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    /* トップ画面パネル（.panel）と同じ“ぷっくり”トーン */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}
.export-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    box-shadow: 0 13px 20px rgba(98, 22, 18, 0.38),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
.export-btn:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* 履歴画面アクションエリア */
.history-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 0.5rem; */
}

/* 履歴画面内検索バー調整 */
.history-actions .search-bar {
    margin-bottom: 0;
}

/* カテゴリマスタ画面アクションエリア */
.category-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.category-actions .search-bar {
    margin-bottom: 0;
    align-items: stretch;
}

/* 連絡先画面のアクションボタン配置 */
.contact-actions__buttons {
    display: flex;
    gap: 0.5rem;
}

#doc-master-category {
    flex: 1 1 18rem;
    width: 100%;
    max-width: 18rem;
}

#doc-register-category-main,
#doc-register-category-middle,
#doc-register-category-small,
#doc-edit-category-main,
#doc-edit-category-middle,
#doc-edit-category-small {
    flex: initial;
    width: 100%;
    max-width: none;
}


/* 新規登録ボタン */
.new-btn {
    background-image: linear-gradient(to bottom right,        var(--color-light-cardinal-red), var(--color-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    /* フォントを少し大きく */
    font-size: 1.1rem;
    height: 3rem;
    box-sizing: border-box;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* トップ画面パネル（.panel）と同じ“ぷっくり”トーン */
    box-shadow: 0 2px 3px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}
.new-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    box-shadow: 0 5px 6px rgba(98, 22, 18, 0.38),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
.new-btn:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* チャットボタン */
.chat-btn {
    border: none;
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    position: relative;
}
.chat-btn i {
    font-size: 1rem;
}
.chat-btn.active {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
}
.chat-btn.chat-btn--no-reply:not(.chat-btn--closed) {
    background-image: linear-gradient(to bottom right, #322fdb, #15198f);
    color: var(--color-white);
}
.chat-btn.inactive {
    background-color: var(--color-light-gray);
    color: var(--color-medium-gray);
    cursor: not-allowed;
}
.chat-btn:disabled {
    pointer-events: none;
}
.chat-btn.active:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
}
.chat-btn.chat-btn--no-reply:not(.chat-btn--closed):hover {
    background-image: linear-gradient(to bottom right, #6d93ff, #4a79ff);
}

/* クローズ済みチャットのボタンは背景色を淡くして区別 */
.chat-btn.chat-btn--closed {
    background-image: none;
    color: rgb(255 255 255);
    background-color: #ad1a1a94;
}

/* 編集ボタン */
.edit-btn {
    background-image: linear-gradient(to bottom right,        var(--color-light-cardinal-red), var(--color-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    /* トップ画面パネル（.panel）を参考に“少しぷっくり” */
    box-shadow: 0 2px 3px rgba(98, 22, 18, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -3px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-image 0.18s ease;
}
.edit-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    box-shadow: 0 4px 5px rgba(98, 22, 18, 0.32),
        inset 0 2px 4px rgba(255, 255, 255, 0.36),
        inset 0 -4px 8px rgba(0, 0, 0, 0.24);
    transform: translateY(-1px);
}
.edit-btn:active {
    box-shadow: 0 6px 10px rgba(98, 22, 18, 0.24),
        inset 0 1px 2px rgba(255, 255, 255, 0.22),
        inset 0 -2px 5px rgba(0, 0, 0, 0.26);
    transform: translateY(1px);
}

/* 一覧テーブル用削除ボタン */
.delete-btn-sm {
    background-image: linear-gradient(to bottom right,
        var(--color-medium-gray), var(--color-charcoal-gray));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 9px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    /* panel-compact を参考に“少しぷっくり” */
    box-shadow: 0 2px 3px rgba(120, 107, 96, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.45),
        inset 0 -3px 5px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.delete-btn-sm:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-medium-gray), var(--color-charcoal-gray));
    opacity: 0.92;
    box-shadow: 0 9px 14px rgba(120, 107, 96, 0.24),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -4px 7px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}
.delete-btn-sm:active {
    box-shadow: 0 6px 10px rgba(120, 107, 96, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.38),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* パンくずリスト */
.breadcrumb {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    display: flex;
    justify-content: center; /* 画面中央寄せ */
    align-items: center; /* 矢印を垂直中央に揃える */
    gap: 0.75rem;
    position: relative;
    color: rgba(177, 34, 26, 0.65);
}
.breadcrumb::before,
.breadcrumb::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(177, 34, 26, 0.08), rgba(177, 34, 26, 0.35));
    border-radius: 999px;
}
.breadcrumb::after {
    background: linear-gradient(90deg, rgba(177, 34, 26, 0.35), rgba(177, 34, 26, 0.08));
}
/* パンくずリストの各要素 */
.breadcrumb-item {
    cursor: pointer;
    color: rgba(177, 34, 26, 0.65);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(247, 239, 226, 0.45) 60%,
        rgba(247, 239, 226, 0.2) 100%);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.breadcrumb-separator {
    margin: 0 0.3rem; /* カテゴリ名との間隔 */
    color: rgba(177, 34, 26, 0.35); /* 少し淡い赤 */
    vertical-align: middle; /* 文字中心を揃える */
}
.breadcrumb-item:hover {
    text-decoration: underline;
}
/* -------------------- フッター -------------------- */
/* ホームボタンと戻るボタンをまとめて配置 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center; /* 戻るボタンを中央に配置 */
    align-items: center; /* ボタンを上下中央揃え */
    z-index: 1000;
    /* 透明なフッター領域が下層要素のクリックを阻害しないようにする */
    pointer-events: none;
}

/* フッター内ボタン共通 */
.footer .home-button,
.footer .back-button,
.footer .send-button {
    background-image: linear-gradient(to bottom right, rgb(255 15 0 / 55%), rgba(150, 26, 22, 0.55));
    background-color: rgba(177, 34, 26, 0.42);
    backdrop-filter: blur(4px) saturate(135%);
    -webkit-backdrop-filter: blur(4px) saturate(135%);
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -4px 6px rgba(0, 0, 0, 0.28);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    /* ボタン自体はクリック可能にする */
    pointer-events: auto;
}

/* ホームボタンは左端に固定し右角を丸くする */
.footer .home-button {
    position: absolute;
    left: 0;
    border-radius: 0 23px 23px 0;
}

/* 戻るボタンは円形に */
.footer .back-button {
    border-radius: 50%;
}

/* 送付ボタンは右端に固定し左角を丸くする */
.footer .send-button {
    position: absolute;
    right: 0;
    border-radius: 23px 0 0 23px;
}

.footer .home-button.hidden,
.footer .back-button.hidden {
    display: none;
}

/* ホバー時の色変化 */
.footer .home-button:hover,
.footer .back-button:hover,
.footer .send-button:hover {
    background-image: linear-gradient(to bottom right, rgb(255 57 41 / 72%), rgb(195 49 45 / 72%));
    background-color: rgba(210, 70, 65, 0.6);
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.28),
        inset 0 2px 6px rgba(255, 255, 255, 0.45),
        inset 0 -5px 8px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
}

/* 押下時は沈み込む表現に切り替える */
.footer .home-button:active,
.footer .back-button:active,
.footer .send-button:active {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -3px 5px rgba(0, 0, 0, 0.35);
    transform: translateY(2px);
}

/* 送付数表示 */
/* 送付ボタンのバッジ */
.send-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* 選択バッジと同じ緑色を使用 */
    background-color: var(--color-select-green);
    /* 立体感（内側ハイライト + 下側の陰影） */
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(0, 0, 0, 0.18) 100%);
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.22);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* チャット未読バッジ（資料選択バッジと同じスタイル） */
/* チャット未読バッジ */
.chat-badge {
    position: absolute;
    width: 24px; /* チャットボタン用は小さめに調整 */
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-select-green);
    /* 立体感（内側ハイライト + 下側の陰影） */
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(0, 0, 0, 0.18) 100%);
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.22);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* パネル右上に少しはみ出す位置 */
.panel .chat-badge {
    width: 36px; /* パネル用は大きめに表示 */
    height: 36px;
    top: -8px;
    right: -8px;
    font-size: 1rem;
    z-index: 2; /* ホバー時のハイライトより前面に配置しバッジが被らないようにする */
    /* 大きい分、影も少しだけ強める */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24),
        inset 0 1px 3px rgba(255, 255, 255, 0.4),
        inset 0 -3px 6px rgba(0, 0, 0, 0.22);
}

/* チャットボタン上のバッジ位置 */
.chat-btn .chat-badge {
    top: -8px;
    right: -8px;
}

/* 撮影ボタン */
/* 撮影ボタンのスタイル */
#capture-button {
    /* 画面下部中央に固定（戻るボタンと重ならないよう配置） */
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: 5px solid var(--color-white); /* 白いふち */
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
}
#capture-button:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red));
}
.category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.document-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 中央寄せ */
    gap: 1rem;
}
.document-item.drag-placeholder {
    opacity: 0.4;
    pointer-events: none;
}
.drag-ghost {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    box-shadow: var(--glass-shadow-soft);
    border-radius: 4px;
    opacity: 0.95;
}
.drop-indicator {
    width: 4px;
    background-color: var(--color-cardinal-red);
    border-radius: 4px;
    pointer-events: none;
    align-self: stretch;
}
.document-item {
    position: relative;
    border-radius: 18px;
    padding: 1.1rem;
    box-sizing: border-box;
    flex: 0 0 240px;
    max-width: 240px;
    /* PDFプレビューがカードからはみ出さないように余白を確保 */
    border: var(--glass-border);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow-soft);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバーアニメーションの滑らかさを調整 */
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

@supports (backdrop-filter: blur(1px)) {
    .document-item {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.14));
    }
}

/* 資料ホバー時の拡大アニメーション */
@media (hover: hover) and (pointer: fine) {
    .document-item:hover {
        transform: scale(1.03);
        box-shadow: 0 26px 42px rgba(95, 20, 16, 0.28);
    }
}

/* 選択状態の背景 */
.document-item.selected {
    background: linear-gradient(135deg, rgba(104, 234, 46, 0.45), rgba(255, 255, 255, 0.2));
    border-color: rgba(104, 234, 46, 0.5);
}

/* 選択用丸アイコン */
.select-circle {
    position: absolute;
    top: -11px;
    right: -7px;
    width: 48px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-medium-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    color: var(--color-medium-gray);
    font-weight: bold;
    font-size: 1.2rem;
}

/* 資料カードのタグバッジ */
.document-tag-list {
    position: absolute;
    top: 6px;
    left: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    max-width: 70%;
}
.document-tag-badge {
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background-color: var(--tag-color, var(--color-cardinal-red));
    color: var(--color-white);
    font-size: 0.7rem;
    line-height: 1.2;
    box-shadow: var(--glass-shadow-soft);
}

/* マッチング済みアイコン */
.document-match-badge {
    position: absolute;
    right: -5px;
    bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    background: #d8c8f3;
    color: #4a2a6a;
    /* font-size: 12px; */
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: var(--glass-shadow-soft);
    pointer-events: none;
}

.document-match-elapsed-badge {
    position: absolute;
    left: 1px;
    bottom: 0px;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    color: #8d8d8d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    /* box-shadow: var(--glass-shadow-soft); */
    pointer-events: none;
}

.document-match-elapsed-badge--day {
    /* background-color: #cdc822c7; */
}

.document-match-elapsed-badge--week {
    background-color: #89a8ff9e;
}

.document-match-elapsed-badge--month {
    background-color: #cdc822c7;
}

.document-match-badge i {
    font-size: 0.7rem;
}

.document-match-count {
    font-size: 0.95rem;
    color: #6c3db4;
    font-weight: 700;
}

.document-item--has-download .document-match-badge {
    bottom: 58px;
}

.document-item--has-download .document-match-elapsed-badge {
    bottom: 58px;
}

/* 選択時の丸アイコン */
.document-item.selected .select-circle {
    background-color: var(--color-select-green);
    border-color: var(--color-select-green);
    color: var(--color-white);
}


.pdf-canvas {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 200 / 141; /* 既定サイズの縦横比を維持 */
    height: auto;
    border-radius: 4px;
    object-fit: contain;
    display: block;
    margin: 0 auto; /* カード中央に配置 */
}

.doc-icon {
    width: 200px;
    height: 141px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: var(--color-dark-cardinal-red);
}

/* Office ドキュメントアイコンのカラー指定 */
.doc-icon .fa-file-word {
    color: #2B579A; /* Word のブランドカラー */
}

.doc-icon .fa-file-excel {
    color: #217346; /* Excel のブランドカラー */
}

.doc-icon .fa-file-powerpoint {
    color: #D24726; /* PowerPoint のブランドカラー */
}

.document-title {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    word-break: break-all;
}

/* 資料ダウンロードボタン */
.document-download-button {
    margin-top: 0.75rem;
    padding: 0.4rem 0.75rem;
    width: 100%;
    border: none;
    border-radius: 20px;
    background-image: linear-gradient(135deg, var(--color-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.document-download-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow-soft);
}

/* 資料が無い場合のメッセージ */
.no-document {
    width: 100%;
    text-align: center;
    color: var(--color-medium-gray);
    font-size: 1rem;
}

/* カテゴリアイテム */
.category-item {
    position: relative;
}

.category-panel {
    flex: 0 1 clamp(240px, 32%, 330px);
    width: clamp(240px, 32%, 330px);
    max-width: 330px;
    min-width: 240px;
    height: 120px;
    display: flex;
    /* flex-direction: row; */
    align-items: center;
    justify-content: center;
    /* gap: 0.75rem; */
    text-align: left;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    color: var(--color-white);
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background-image: linear-gradient(180deg,
        rgba(143, 27, 21, 0.55) 0%,
        rgb(205 11 0 / 78%) 50%,
        rgba(143, 27, 21, 0.55) 100%);
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.35),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -3px 8px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@supports (backdrop-filter: blur(1px)) {
    .category-panel {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(160%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 4px)) saturate(160%);
        background-image: linear-gradient(180deg,
            rgba(143, 27, 21, 0.55) 0%,
            rgb(205 11 0 / 78%) 50%,
            rgba(143, 27, 21, 0.55) 100%);
    }
}

/* カテゴリアイコン */
.category-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* テキスト部分 */
.category-text {
    display: flex;
    flex-direction: column;
}

@media (min-width: 960px) {
    .category-list {
        justify-content: center;
    }

    .category-panel {
        flex: 0 1 calc((90% - 2rem) / 3);
        max-width: calc((90% - 2rem) / 3);
        width: calc((90% - 2rem) / 3);
    }
}

.category-title {
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
}

.category-desc {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.72);
    overflow: hidden;
    display: -webkit-box; /* 複数行対応 */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3行を超える場合に省略 */
}

/* ホバー時の効果 */
.category-panel:hover {
    box-shadow: 0 5px 10px rgba(98, 22, 18, 0.42),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -4px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

/* 押下時は沈み込む表現に切り替える */
.category-panel:active {
    box-shadow: 0 8px 14px rgba(98, 22, 18, 0.32),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* 非表示制御 */
.hidden {
    display: none;
}


/* 資料登録ページ */
.register {
    /* ヘッダー・フッターに隠れないように余白を確保 */
    padding: var(--header-height) 1rem var(--footer-height);
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    justify-content: center; /* 画面中央に配置 */
    box-sizing: border-box; /* パディングを含めて高さを計算 */
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
.register-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.register-actions .register-submit-btn {
    width: auto;
    min-width: 9rem;
    margin: 0 auto;
}

.scan-action-button {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-cardinal-red);
    box-shadow: 0 6px 18px rgba(177, 34, 26, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-size: 1.4rem;
}

.scan-action-button:hover,
.scan-action-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(177, 34, 26, 0.2);
}

.scan-action-button:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.4);
    outline-offset: 2px;
}

.scan-action-button--ghost {
    background: rgba(255, 255, 255, 0.5);
}

.scan-action-button--ghost:hover,
.scan-action-button--ghost:focus-visible {
    background: rgba(177, 34, 26, 0.2);
}

@media (max-width: 480px) {
    .register-actions {
        flex-direction: column;
    }
}
.page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.8rem;
    color: var(--color-light-cardinal-red);
    margin-bottom: 1rem;
}
.register-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 960px; /* 左右コンテンツを見やすく配置 */
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
    scrollbar-width: thin;
}
.readonly-input {
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
    cursor: not-allowed;
}
.register.register--narrow {
    max-width: 640px;
    margin: 0 auto;
}
.register-form__split {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    max-width: 960px;
    align-items: stretch;
}
.register-form__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.register-form__right {
    width: 260px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 16px;
    border: var(--glass-border);
    background: #ffe4e4a1;
    backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
}
.register-form__right::before {
    content: "名刺スキャン";
    font-weight: 600;
    color: var(--color-cardinal-red);
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}
.register-form__right--smtp {
    width: 430px;
    background: rgba(177, 34, 26, 0.06);
    padding-bottom: 2rem;
}

.register-form__right--smtp::before {
    content: none;
}

.register-form__right-title {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--color-cardinal-red);
    letter-spacing: 0.05em;
}
.scan-action-button--split {
    width: 100%;
    height: auto;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
}
.scan-action-button--split i {
    font-size: 1.4rem;
}
.scan-action-button--split span {
    font-weight: 600;
    color: var(--color-charcoal-gray);
}
.register-form__right .scan-action-button--ghost span {
    /* color: var(--color-dark-gray); */
}
@media (max-width: 1024px) {
    .register-form__split {
        flex-direction: column;
    }

    .register-form__right {
        width: 100%;
        min-width: auto;
    }
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group--wide .wide-textarea {
    width: 100%;
    min-height: 160px;
    line-height: 1.6;
}

.register-form input,
.register-form select,
.register-form textarea {
    padding: 0.75rem; /* タブレットでもタップしやすい */
    font-size: 1rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
    overflow-y: hidden; /* 自動リサイズのためスクロール非表示 */
    resize: none; /* 手動リサイズは無効化 */
}

/* 情報元選択モーダルのテーブルスクロール */
.source-contact-table-wrapper {
    max-height: 480px;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    scrollbar-width: thin;
}

.source-contact-table-wrapper .doc-master-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.source-contact-table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--color-dark-cardinal-red);
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    background-clip: padding-box;
    box-shadow: 0 1px 0 var(--color-table-border);
}

.source-contact-row {
    cursor: pointer;
}

.source-contact-row:hover {
    background: #F7EFE2;
}

/* 情報元検索ボックスのアイコン */
#source-contact-search {
    padding-left: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777777'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6 6 0 1 0-.71.71l.27.28v.79l5 5 1.5-1.5-5-5zm-6.5 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.8rem center;
    background-size: 1rem;
}

/* 資料マスタ：編集モーダルのテキスト入力は、長文時に内部スクロールを許可する */
#doc-edit-text {
    overflow-y: auto;
    max-height: 45vh;
    scrollbar-width: thin;
}
.register-form input:disabled,
.register-form textarea:disabled {
    background-color: var(--color-disabled-gray);
    color: var(--color-dark-gray);
    cursor: not-allowed;
}

/* SMTP情報の端末内保存を説明する注意文 */
.register-form__note {
    font-size: 0.9rem;
    color: var(--color-dark-gray);
    line-height: 1.6;
    background-color: rgba(177, 34, 26, 0.05);
    border-left: 4px solid var(--color-light-cardinal-red);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0 0 0.75rem;
}

/* SMTP情報入力欄をまとめて囲む枠 */
.register-form__smtp-section {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border: 1px solid rgba(177, 34, 26, 0.25);
    border-radius: 8px;
    background-color: rgba(177, 34, 26, 0.04);
}

/* SMTP接続テストの操作行 */
.register-form__smtp-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* SMTP接続テスト専用ボタンのスタイル */
.smtp-test-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(177, 34, 26, 0.05);
    color: var(--color-cardinal-red);
    border: 1px solid rgba(177, 34, 26, 0.55);
    border-radius: 4px;
    padding: 0.4rem 0.75rem;
    width: auto;
    min-width: 7.2rem;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.smtp-test-btn:hover {
    background-color: rgba(177, 34, 26, 0.12);
}

.smtp-test-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* テスト結果の表示 */
.register-form__smtp-result {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-dark-gray);
}

.register-form__smtp-result--success {
    color: var(--color-select-green);
}

.register-form__smtp-result--error {
    color: var(--color-cardinal-red);
}

.register-form__smtp-section--disabled input {
    pointer-events: none;
}

/* SMTPパスワードラベルの文字サイズを調整し、折り返しを防止 */
.register-form__smtp-section label[for="smtp-pass"],
.register-form__smtp-section label[for="edit-smtp-pass"] {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ユーザー署名欄の高さとスクロール挙動を調整 */
#user-signature,
#edit-user-signature {
    min-height: 10rem;
    overflow-y: auto;
    resize: vertical;
}

/* メールテンプレ本文入力欄の高さを確保し、長文でもスクロール可能にする */
#mail-template-body {
    min-height: 11rem;
    overflow-y: auto;
    resize: vertical;
}

/* メール送信フォーム */
.mail-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}
.mail-form input,
.mail-form select,
.mail-form textarea {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
}

/* 送信時に資料URLが挿入される位置を示すラベル */
.mail-url-placeholder-label {
    margin: 0;
    padding: 0.45rem 0.65rem;
    border: 1px dashed var(--color-medium-gray);
    border-radius: 4px;
    background-color: var(--color-light-gray);
    color: var(--color-charcoal-gray);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mail-url-placeholder-label--hidden {
    display: none;
}

.mail-url-position-radios {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.mail-url-position-radios label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    color: var(--color-charcoal-gray);
}

.mail-signature-placeholder-label {
    margin: 0.1rem 0 0;
    color: #666666;
    font-size: 0.82rem;
    line-height: 1.45;
}

.mail-collapsible-field {
    border: 1px solid var(--color-medium-gray);
    border-radius: 6px;
    padding: 0.45rem 0.6rem 0.6rem;
    background-color: #ffffff;
}

.mail-collapsible-field summary {
    cursor: pointer;
    /* font-weight: 600; */
    color: #000000;
    list-style: none;
}

.mail-collapsible-field summary::-webkit-details-marker {
    display: none;
}

.mail-collapsible-field summary::before {
    content: '▶';
    margin-right: 0.45rem;
    color: #777777;
}

.mail-collapsible-field[open] summary::before {
    content: '▼';
}

.mail-collapsible-field label {
    display: block;
    margin-top: 0.55rem;
}

.mail-collapsible-field textarea {
    margin-top: 0.35rem;
}

#mail-prefix {
    width: 100%;
    box-sizing: border-box;
}

#mail-suffix {
    width: 100%;
    box-sizing: border-box;
}

/* 必須項目を示す赤いアスタリスク */
.required-mark {
    color: var(--color-cardinal-red);
    margin-right: 0.25rem;
}

/* タグ選択 UI */
.tag-selector {
    position: relative;
}

.tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.selected-tag {
    background-color: var(--color-light-gray);
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.remove-tag {
    cursor: pointer;
}

.register-submit-btn {
    /* メニューパネルと同じグラデーションを適用 */
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center; /* アイコンと文字を中央揃え */
    font-size: 1.1rem; /* タブレットでも押しやすい文字サイズ */
    gap: 0.3rem;
    width: 8rem; /* 幅をやや短く */
    align-self: center; /* 中央寄せ */
}
.register-submit-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
}

/* 組織設定画面の保存ボタンを“登録ボタン”と同じ見た目に統一 */
#env-form .register-submit-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;

    padding: 0.7rem 1.4rem;
    width: 10rem;
}

#env-form .register-submit-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-light-cardinal-red));
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

#env-form .register-submit-btn:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
}

#env-form .register-submit-btn:focus-visible {
    outline: 3px solid rgba(177, 34, 26, 0.35);
    outline-offset: 3px;
}

/* 連絡先登録モーダルの登録ボタンは、パネル/フッターのように立体感を強める */
.contact-register-modal .register-actions .register-submit-btn {
    /* 通常より少し明るい赤に見せる（暗い終点色を使わない） */
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    width: 10rem;
    /* トップ画面パネル（.panel）と同じ影のトーンに合わせる */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}

.contact-register-modal .register-actions .register-submit-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-light-cardinal-red));
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.contact-register-modal .register-actions .register-submit-btn:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
}

.contact-register-modal .register-actions .register-submit-btn:focus-visible {
    outline: 3px solid rgba(177, 34, 26, 0.35);
    outline-offset: 3px;
}

/* 削除ボタン */
.delete-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-medium-gray), var(--color-charcoal-gray));
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    gap: 0.3rem;
    width: 8rem;
    align-self: center;
}
.delete-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-medium-gray), var(--color-charcoal-gray));
    opacity: 0.8;
}

/* 各マスタ画面の編集モーダル：削除ボタンも登録ボタン同様に立体感を付与 */
.category-register-modal__content .delete-btn,
.tag-modal__content .delete-btn,
.mail-template-modal__content .delete-btn,
.chat-template-modal__content .delete-btn,
.doc-register-modal__content .delete-btn,
.contact-register-modal__content .delete-btn {
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    padding: 0.7rem 1.4rem;
    width: 10rem;
    box-shadow: 0 3px 4px rgba(60, 60, 60, 0.28),
        inset 0 1px 3px rgba(255, 255, 255, 0.28),
        inset 0 -4px 8px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    opacity: 1;
}

.category-register-modal__content .delete-btn:hover,
.tag-modal__content .delete-btn:hover,
.mail-template-modal__content .delete-btn:hover,
.chat-template-modal__content .delete-btn:hover,
.doc-register-modal__content .delete-btn:hover,
.contact-register-modal__content .delete-btn:hover {
    box-shadow: 0 3px 4px rgba(60, 60, 60, 0.28),
        inset 0 1px 3px rgba(255, 255, 255, 0.28),
        inset 0 -4px 8px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
    opacity: 0.95;
}

.category-register-modal__content .delete-btn:active,
.tag-modal__content .delete-btn:active,
.mail-template-modal__content .delete-btn:active,
.chat-template-modal__content .delete-btn:active,
.doc-register-modal__content .delete-btn:active,
.contact-register-modal__content .delete-btn:active {
    box-shadow: 0 7px 12px rgba(60, 60, 60, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        inset 0 -3px 6px rgba(0, 0, 0, 0.28);
    transform: translateY(2px);
    opacity: 1;
}

.category-register-modal__content .delete-btn:focus-visible,
.tag-modal__content .delete-btn:focus-visible,
.mail-template-modal__content .delete-btn:focus-visible,
.chat-template-modal__content .delete-btn:focus-visible,
.doc-register-modal__content .delete-btn:focus-visible,
.contact-register-modal__content .delete-btn:focus-visible {
    outline: 3px solid rgba(102, 102, 102, 0.35);
    outline-offset: 3px;
}

/* 編集画面ボタン配置 */
.button-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 1rem; /* 入力欄との間隔を広げる */
    margin-bottom: 1rem; /* フッターの戻るボタンと重ならないよう余白を追加 */
}

/* ボタンを中央に配置する場合に使用 */
.button-row.center {
    justify-content: center;
}

/* 連絡先管理ページ */
.contact {
    /* ヘッダーとフッターの重なりを防ぐ */
    padding: var(--header-height) 1rem var(--footer-height);
}

/* 送付先選択用レイアウト */
.send-container {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-top: 1rem;
}
.send-left {
    width: 60%;
    /* 右カラムと高さを揃えるため縦方向のフレックス化 */
    display: flex;
    flex-direction: column;
}
.send-right {
    width: 40%;
    /* 送付先リスト側の高さが左カラムに引っ張られないようにする */
    align-self: stretch;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    /* padding-bottom: 3rem; */
    background: var(--glass-bg-strong);
    border-radius: 10px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    /* 内容が少ない場合でも最低限の高さを確保する */
    /* min-height: 720px; */
    /* リストをスクロールさせるため縦方向レイアウト */
    display: flex;
    flex-direction: column;
    /* min-height: calc(100vh - var(--header-height) - var(--footer-height) - 2rem); */
}

/* 送付先選択のスマホレイアウト調整 */
@media (max-width: 1024px) {
    .send-container {
        /* 横幅が足りない場合は縦並びにする */
        flex-direction: column;
    }

    .send-left,
    .send-right {
        width: 100%;
    }

    .send-right {
        /* 画面が小さい時は高さを自動にして重なりを防ぐ */
        min-height: auto;
    }
}

@supports (backdrop-filter: blur(1px)) {
    .send-right {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(130deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.14));
    }
}
.selected-list {
    list-style: none;
    padding: 0;
    /* 枠内でスクロール可能にする */
    flex-grow: 1;
    height: 40vh;
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 0;
    border-radius: 10px;
    border: var(--glass-border);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12));
    box-shadow: var(--glass-shadow-soft);
}
.selected-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding: 0.3rem 0;
}

@supports (backdrop-filter: blur(1px)) {
    .selected-list {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.1));
    }
}
.selected-doc-list {
    list-style: none;
    padding: 0;
    max-height: 20vh;
    overflow-y: auto;
    border-radius: 10px;
    border: var(--glass-border);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12));
    box-shadow: var(--glass-shadow-soft);
    scrollbar-width: thin;
    margin: 0;
}
.selected-doc-list li {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@supports (backdrop-filter: blur(1px)) {
    .selected-doc-list {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.1));
    }
}
.selected-doc-list input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.3rem;
}
.selected-doc-list li:last-child {
    border-bottom: none;
}
.no-selected {
    text-align: center;
    color: var(--color-charcoal-gray);
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.contact-send-btn {
    width: 100%;
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    /* 確認ボタンはやや大きめの文字サイズで表示 */
    font-size: 1.2rem;
    border: none;
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(177, 34, 26, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.contact-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 8px rgba(177, 34, 26, 0.28),
        inset 0 1px 3px rgba(255, 255, 255, 0.45),
        inset 0 -3px 4px rgba(0, 0, 0, 0.24);
}

.contact-send-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 6px rgba(177, 34, 26, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.35),
        inset 0 -2px 3px rgba(0, 0, 0, 0.28);
}
.contact-send-btn:disabled {
    background-image: none; /* グラデーションを無効化 */
    background-color: #cccaca; /* より薄いグレーの背景に調整 */
    color: var(--color-medium-gray); /* 背景より濃いグレーの文字色 */
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
.contact-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.contact-table th,
.contact-table td {
    border: 1px solid var(--color-table-border);
    padding: 0.5rem;
    /* 送付履歴テーブルと同じフォントサイズに調整 */
    font-size: 0.9rem;
}
.contact-table tbody td {
    font-size: 0.75rem;
}
.contact-table th:first-child,
.contact-table td:first-child {
    text-align: center;
    width: 40px;
    vertical-align: middle;
}
.contact-table input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
}
.contact-table th {
    /* パネルと同じグラデーションカラー */
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    cursor: default;
}

/* ソート可能なヘッダー */
.contact-table th.sortable {
    cursor: pointer;
}

/* ソートアイコン */
.sort-icon {
    margin-left: 0.4rem;
}
.contact-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}
.contact-table tbody tr:nth-child(even) {
    background-color: var(--color-even-row);
}

/* テーブル内の主テキストと補足テキストを縦に並べるためのスタイル */
.contact-cell__primary {
    font-weight: 400;
    line-height: 1.3;
}

.contact-cell__secondary {
    font-size: 0.75rem;
    color: var(--color-medium-gray);
    line-height: 1.3;
}

/* 同一資料の送付済み注意表示 */
.contact-duplicate-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: var(--color-pale-beige);
    color: var(--color-cardinal-red);
    border: 1px solid rgba(177, 34, 26, 0.25);
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}
.contact-duplicate-warning i {
    font-size: 0.7rem;
}

/* 送付先タイトル横の注意バッジ */
.contact-duplicate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(177, 34, 26, 0.08);
    color: var(--color-cardinal-red);
    border: 1px solid rgba(177, 34, 26, 0.3);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.contact-duplicate-badge i {
    font-size: 0.75rem;
}

/* タグ表示用 */
.contact-table .selected-tag {
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    background-color: var(--color-light-cardinal-red);
    color: var(--color-white);
    font-size: 13px;
}
.contact-table .contact-group-tag {
    background-color: #2ecc34;
    margin-left: 0.4rem;
    margin-bottom: 0;
    font-size: 10px;
}
.doc-master-table .selected-tag {
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    background-color: var(--color-light-cardinal-red);
    color: var(--color-white);
    font-size: 13px;
}
.history-table .selected-tag {
    /* margin-right: 0.3rem; */
    background-color: var(--color-light-cardinal-red);
    color: var(--color-white);
    font-size: 10px;
}
.contact-table td.edit-cell {
    text-align: center;
}
.contact-table td.contact-map-cell {
    text-align: center;
    vertical-align: middle;
}
.contact-map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    color: var(--color-cardinal-red);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(177, 34, 26, 0.2);
    text-decoration: none;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-map-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(177, 34, 26, 0.2);
}

/* ステータス表示用 */
.history-table .status-tag {
    margin-right: 0.3rem;
    padding: 3px;
    border-radius: 3px;
    font-size: 13px;
    /* 中央寄せ表示用 */
    display: inline-block;
    text-align: center;
}

/* 返答有のステータス */
.history-table .status-answered {
    background-color: var(--color-light-cardinal-red);
    color: var(--color-white);
}

/* 未回答のステータス */
.history-table .status-pending {
    background-color: var(--color-medium-gray);
    color: var(--color-white);
}

/* ステータス列を中央揃え */
.history-table td.status-cell {
    text-align: center;
}

/* チャット列を中央揃え */
.history-table td.chat-cell {
    text-align: center;
}

/* 送付履歴ページ */
.history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box; /* パディングを含めて高さを計算 */
    padding: calc(var(--header-height) + 1.5rem) 1.5rem calc(var(--footer-height) + 2rem); /* ヘッダー・フッターと重ならないように調整 */
    min-height: calc(100vh - var(--header-height)); /* ヘッダー分の高さを引いた最低高さ */
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    /* margin-top: 1rem; */
}
.history-table th,
.history-table td {
    border: 1px solid var(--color-table-border);
    padding: 0.5rem;
    /* 高解像度端末での閲覧を考慮してフォントをやや小さめに */
    font-size: 0.9rem;
}
.history-table .id-column {
    display: none;
}
.history-table th {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    cursor: default;
}
.history-table th.sortable {
    cursor: pointer;
}
.history-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}
.history-table tbody tr:nth-child(even) {
    background-color: var(--color-even-row);
}

/* クローズ済みチャットの送付履歴はグレー背景で表示 */
.history-table tbody tr.history-row-closed td {
    background-color: #ededed;
    color: rgba(51, 51, 51, 0.55);
}

/* クローズ済みの送付先・資料名は薄く表示 */
.history-table tbody tr.history-row-closed .company-name,
.history-table tbody tr.history-row-closed .recipient-name,
.history-table tbody tr.history-row-closed .doc-name {
    color: rgba(51, 51, 51, 0.4);
}

/* 送付先より小さめの資料名フォント */
.history-table .doc-name {
    font-size: 0.8rem;
    color: var(--color-charcoal-gray);
}

/* 削除済み資料表示用スタイル */
.deleted-document-label {
    color: rgba(51, 51, 51, 0.45);
    font-style: italic;
}

.history-table .doc-name.deleted-document-label,
.doc-list__name.deleted-document-label,
.followup-item .fu-doc.deleted-document-label {
    color: rgba(51, 51, 51, 0.45);
}

.chat-deleted-notice {
    margin: 0.5rem 0;
    color: #999;
    font-size: 0.9rem;
}

/* クローズ理由の表示 */

/* 会社名表示 */
.history-table .company-name {
    font-weight: bold;
    color: var(--color-charcoal-gray);
}

/* 送付先氏名表示 */
.history-table .recipient-name {
    color: var(--color-deep-green);
}

/* 送付履歴の未開封・未返答表示 */
.history-status--alert {
    color: var(--color-cardinal-red);
    font-weight: 700;
}

/* 送付履歴の返答情報を縦並びで表示 */
.history-reply {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.history-reply__message {
    font-size: 0.78rem;
    color: rgba(51, 51, 51, 0.7);
    word-break: break-word;
}

/* ページネーション */
.pagination {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.pagination button {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1rem;
    font-size: 1.2rem;
    cursor: pointer;
}

/* 現在ページ/総ページ表示 */
.pagination .page-info {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    color: var(--color-dark-cardinal-red);
    padding: 0 0.5rem;
}

.pagination button:hover:not(:disabled) {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
}

.pagination button.active {
    background-image: linear-gradient(to bottom right,
        var(--color-dark-cardinal-red), var(--color-cardinal-red));
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* 名刺登録ページ */
.card-register {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* ヘッダー分の高さを引いて中央に配置 */
    min-height: calc(85vh - 70px);
}
.select-area {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
}
.file-area,
.camera-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* カメラスキャン画面の余白調整 */
.camera-area {
    /* ヘッダーとvideoの間に適度な余白を確保 */
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0 0;
    min-height: calc(90vh - 70px - 0.5rem);
}
.drop-zone {
    width: 70%;
    height: 370px;
    border: 2px dashed var(--color-light-cardinal-red);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-light-gray);
    color: var(--color-charcoal-gray);
    text-align: center;
}
.drop-zone.dragover {
    border-color: var(--color-cardinal-red);
    background-color: var(--color-pale-beige);
}
#video {
    /* 画面サイズに応じて可変 */
    width: 90%;
    height: 450px;
    max-height: calc(90vh - 120px - 0.5rem); /* ヘッダーとボタンに加え上余白を除外 */
    background: #000;
    object-fit: cover;
}

/* 資料閲覧ページ */
.viewer {
    padding: 0;
    height: calc(95vh - 70px);
    position: relative;
}
/* .doc-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
} */

/* ビューアモーダル */
.viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.viewer-modal.open {
    display: flex;
}

.viewer-modal.viewer-modal--split {
    align-items: stretch;
    justify-content: flex-start;
}

.viewer-modal.viewer-modal--split .viewer-frame,
.viewer-modal.viewer-modal--split .pdf-viewer,
.viewer-modal.viewer-modal--split .image-viewer-wrapper {
    position: absolute;
    top: 16px;
    left: 16px;
    width: calc(50% - 24px);
    height: calc(100% - 32px);
}

.viewer-modal.viewer-modal--split .match-viewer-modal {
    top: 16px;
    bottom: 16px;
    right: 16px;
    left: calc(50% + 8px);
    width: auto;
    height: auto;
    scrollbar-width: thin;
}

.viewer-modal.viewer-modal--split .match-viewer-modal .viewer-frame,
.viewer-modal.viewer-modal--split .match-viewer-modal .pdf-viewer,
.viewer-modal.viewer-modal--split .match-viewer-modal .image-viewer-wrapper {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
}
.viewer-frame {
    width: 100%;
    height: 100%;
    border: none;
}
.image-viewer {
    width: auto;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
    object-fit: contain;
    background-color: var(--color-white);
}
.pdf-viewer {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    overflow-y: auto;
    background-color: var(--color-white);
    flex: 1 1 auto;
}
.pdf-page-canvas {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    background-color: var(--color-white);
}
.pdf-viewer-message {
    text-align: center;
    color: var(--color-charcoal-gray);
    font-size: 1rem;
    padding-top: 2rem;
}
.modal-close {
    position: absolute;
    top: 75px;
    right: 40px;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    background-image: linear-gradient(to bottom right, rgb(255 15 0 / 55%), rgba(150, 26, 22, 0.55));
    background-color: rgba(177, 34, 26, 0.42);
    backdrop-filter: blur(4px) saturate(135%);
    -webkit-backdrop-filter: blur(4px) saturate(135%);
    color: var(--color-white);
    font-size: 3rem;
    cursor: pointer;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -4px 6px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    z-index: 3000;
}
.modal-close:hover {
    background-image: linear-gradient(to bottom right, rgb(255 57 41 / 72%), rgb(195 49 45 / 72%));
    background-color: rgba(210, 70, 65, 0.6);
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.28),
        inset 0 2px 6px rgba(255, 255, 255, 0.45),
        inset 0 -5px 8px rgba(0, 0, 0, 0.32);
    /* transform: translateY(-1px); */
}
.modal-close:active {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -3px 5px rgba(0, 0, 0, 0.35);
    transform: translateY(2px);
}

.viewer-image {
    width: 100%;
    height: calc(100vh - var(--response-bar-height, 0px));
    padding: 3.5rem 1rem;
    box-sizing: border-box;
    display: block;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-white);
}
.viewer-image__img {
    display: block;
    /* 初期表示で「1画面に収める」縮小をしない（等倍表示＋はみ出しはスクロール） */
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    margin: 0 auto;
}

.viewer-image-zoom-controls {
    position: fixed;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    /* モーダル（.text-overlay-modal: z-index 3200）より下にし、モーダル表示中は前面に出さない */
    z-index: 2500;
    color: var(--color-white);
    backdrop-filter: blur(4px);
}
.viewer-image-zoom-controls.hidden {
    display: none;
}
.viewer-image-zoom-controls .zoom-level-label {
    min-width: 56px;
    text-align: center;
    font-weight: 600;
}

/* 資料ライブラリ：モーダル内でも同じズームUIを使用（位置だけ調整） */
.viewer-modal .viewer-image-zoom-controls {
    position: absolute;
    top: 75px;
    left: 40px;
    z-index: 3000;
}

/* 資料ライブラリ：テキストのみ資料（SVG）表示時は、ボタンが画像に被らないよう上余白と位置を調整 */
.viewer-modal.viewer-modal--text-only .modal-close {
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: 16px;
}
.viewer-modal.viewer-modal--text-only .viewer-image-zoom-controls {
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    left: 16px;
}
.viewer-modal.viewer-modal--text-only .text-overlay-trigger {
    top: calc(env(safe-area-inset-top, 0px) + 100px);
    right: 16px;
}
.viewer-modal.viewer-modal--text-only .image-viewer-wrapper {
    /* ×ボタン/ズームUI分の余白を確保（viewerページの見え方に寄せる） */
    padding-top: calc(env(safe-area-inset-top, 0px) + 104px);
}

/* 送付内容確認画面：テキスト資料は黒背景モーダルを使わない */
.send-confirm-page .viewer-modal.viewer-modal--text-only {
    background-color: var(--color-white);
}

.text-overlay-trigger {
    position: fixed;
    top: 180px;
    right: 40px;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    background-image: linear-gradient(to bottom right, rgb(255 15 0 / 55%), rgba(150, 26, 22, 0.55));
    background-color: rgba(177, 34, 26, 0.42);
    backdrop-filter: blur(4px) saturate(135%);
    -webkit-backdrop-filter: blur(4px) saturate(135%);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -4px 6px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    z-index: 3000;
}
.text-overlay-trigger:hover {
    background-image: linear-gradient(to bottom right, rgb(255 57 41 / 72%), rgb(195 49 45 / 72%));
    background-color: rgba(210, 70, 65, 0.6);
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.28),
        inset 0 2px 6px rgba(255, 255, 255, 0.45),
        inset 0 -5px 8px rgba(0, 0, 0, 0.32);
    /* transform: translateY(-1px); */
}
.text-overlay-trigger:active {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -3px 5px rgba(0, 0, 0, 0.35);
    transform: translateY(2px);
}
.text-overlay-trigger.hidden {
    display: none;
}
.text-overlay-trigger i {
    font-size: 1.5rem;
}
.text-overlay-trigger--library {
    top: 165px;
}
.viewer-page .text-overlay-trigger {
    top: 75px;
}

.text-overlay-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3200;
}
.viewer-page #text-overlay-modal {
    /* 黒背景（オーバーレイ）は画面全体を覆い、コンテンツ側でレスポンスバー分だけ避ける */
    --viewer-modal-safe-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    bottom: 0;
    height: 100vh;
    /* flex内のスクロール領域が潰れないように伸長させる */
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    padding: 0.75rem 0 calc(0.75rem + var(--response-bar-height, 0px) + var(--viewer-modal-safe-bottom));
    box-sizing: border-box;
}

/* モバイルSafari等でのvhズレ対策（対応ブラウザはdvhを優先） */
@supports (height: 100dvh) {
    .viewer-page #text-overlay-modal {
        height: 100dvh;
    }
}
.text-overlay-modal.open {
    display: flex;
}
.viewer-page #text-overlay-modal.open {
    display: flex;
}
.text-overlay-modal__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    padding: 1rem;
    box-sizing: border-box;
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
#text-overlay-modal .text-overlay-modal__content {
    /* 画像の左上を起点に表示し、はみ出す場合は枠内スクロール */
    display: block;
    /* width: 90vw; */
    height: 90vh;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
}
.viewer-page #text-overlay-modal .text-overlay-modal__content {
    /* 1画面内に収めつつ、はみ出す場合は枠内スクロール */
    max-height: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    overflow: auto;
    margin: 0 auto;
    /* 画像の左上を起点に表示し、拡大時に先頭が見切れないようにする */
    display: block;
}
.text-overlay-modal__image {
    max-width: 100%;
    /* max-height: 80vh; */
    /* object-fit: contain; */
}
#text-overlay-modal .text-overlay-modal__image {
    display: block;
    height: auto;
    margin: 0 auto;
}
.viewer-page #text-overlay-modal .text-overlay-modal__image {
    display: block;
}
.text-overlay-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    background-image: linear-gradient(to bottom right, rgb(255 15 0 / 55%), rgba(150, 26, 22, 0.55));
    background-color: rgba(177, 34, 26, 0.42);
    backdrop-filter: blur(4px) saturate(135%);
    -webkit-backdrop-filter: blur(4px) saturate(135%);
    color: var(--color-white);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -4px 6px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;
}

#text-overlay-modal .text-overlay-modal__close:hover {
    background-image: linear-gradient(to bottom right, rgb(255 57 41 / 72%), rgb(195 49 45 / 72%));
    background-color: rgba(210, 70, 65, 0.6);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.28),
        inset 0 2px 6px rgba(255, 255, 255, 0.45),
        inset 0 -5px 8px rgba(0, 0, 0, 0.32);
    /* transform: translateY(-1px); */
}

#text-overlay-modal .text-overlay-modal__close:active {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22),
        inset 0 1px 3px rgba(255, 255, 255, 0.2),
        inset 0 -3px 5px rgba(0, 0, 0, 0.35);
    transform: translateY(2px);
}

/* viewer：テキスト画像モーダルは枠内スクロールのため、×ボタンはスクロールしても動かないよう固定 */
#text-overlay-modal .text-overlay-modal__close {
    position: sticky;
    position: -webkit-sticky;
    top: 0.75rem;
    right: auto;
    /* stickyは right 指定が効きにくいため、左を計算して右上に固定する */
    left: calc(100% - 0.75rem - 42px);
    margin-left: 0;
    z-index: 2;
}

/* viewer：テキスト画像モーダルの拡大縮小ボタン */
#text-overlay-modal .text-overlay-modal__zoom-controls {
    position: sticky;
    position: -webkit-sticky;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}

/* 資料ライブラリ：画像資料（テキスト入力のみ資料を含む） */
.viewer-modal__zoom-controls {
    position: absolute;
    top: 75px;
    left: 40px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 3000;
}
.viewer-modal__zoom-controls.hidden {
    display: none;
}

.image-viewer-wrapper {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1rem;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-white);
}
.image-viewer-wrapper.hidden {
    display: none;
}

.image-viewer {
    display: block;
    max-width: none;
    max-height: none;
    object-fit: contain;
    margin: 0 auto;
    background-color: transparent;
    padding: 0;
}

/* viewer：自由入力（その他）モーダル */
.free-response-modal__content {
    width: min(720px, 92vw);
    padding-top: 3.25rem;
}
.free-response-modal__close {
    width: 34px;
    height: 34px;
    font-size: 1.15rem;
}
.free-response-modal__body {
    width: 100%;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.free-response-modal__body .response-free-send {
    align-self: flex-end;
}
@media (max-width: 520px) {
    .free-response-modal__body .response-free-send {
        width: 100%;
        justify-self: stretch;
        align-self: stretch;
    }
}

/* .viewer-zoom-controls {
    position: absolute;
    top: 60px;
    left: 60px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    z-index: 1001;
    color: var(--color-white);
    backdrop-filter: blur(4px);
} */

.zoom-button {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-cardinal-red);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.zoom-button:active {
    transform: scale(0.95);
}

.zoom-button:focus-visible {
    outline: 2px solid var(--color-cardinal-red);
    outline-offset: 2px;
}

.zoom-level-label {
    min-width: 3.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* @media (max-width: 600px) {
    .viewer-zoom-controls {
        top: 52px;
        left: 12px;
        gap: 0.4rem;
    }

    .zoom-button {
        width: 32px;
        height: 32px;
    }

    .zoom-level-label {
        min-width: 3rem;
        font-size: 0.85rem;
    }
} */

/* マスタ共通モーダル */
body.modal-open {
    overflow: hidden;
}

.card-scan-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    /* padding: 1.5rem; */
    box-sizing: border-box;
}
.card-scan-modal.open {
    display: flex;
}
.card-scan-modal__content {
    width: min(580px, 100%);
    background-color: var(--color-white);
    border-radius: 18px;
    padding: 2rem 2rem 2.5rem;
    box-shadow: var(--glass-shadow-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.card-scan-modal__title {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 1.4rem;
    color: var(--color-cardinal-red);
    margin: 0;
}
.modal-title__icon {
    width: 40px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}
.card-scan-modal__note {
    font-size: 0.9rem;
    color: var(--color-dark-gray);
    margin: 0;
}
.card-scan-modal__video {
    width: 100%;
    border-radius: 16px;
    background-color: #000;
    min-height: 260px;
    object-fit: cover;
}
.card-scan-modal__dropzone {
    width: 100%;
    border: 2px dashed rgba(177, 34, 26, 0.4);
    border-radius: 16px;
    padding: 2rem 1rem;
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(247, 239, 226, 0.4);
    color: var(--color-charcoal-gray);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.card-scan-modal__dropzone:focus-visible {
    outline: 3px solid rgba(177, 34, 26, 0.4);
}
.card-scan-modal__dropzone.dragover {
    background-color: rgba(177, 34, 26, 0.08);
    border-color: var(--color-cardinal-red);
}
.contact-register-modal .card-scan-modal__content {
    width: min(960px, 100%);
    max-height: 90vh;
    /* 画面が狭い場合でも操作ボタンが隠れないよう縦方向にスクロールを許可 */
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 1.5rem 2rem;
    gap: 1.5rem;
}

.contact-register-modal__close { 
    color: var(--color-dark-gray);
} 

.contact-register-modal .register-form__split {
    gap: 1.5rem;
}

.contact-register-modal .register-actions {
    justify-content: center;
}
.scan-modal-action-btn {
    border: none;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    min-width: 200px;
    transition: opacity 0.2s ease;
}
.scan-modal-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.scan-modal-action-btn--ghost {
    background-image: none;
    background-color: var(--color-white);
    color: var(--color-cardinal-red);
    border: 1px solid rgba(177, 34, 26, 0.35);
}
.scan-modal-action-btn--ghost:disabled {
    opacity: 0.6;
}

.category-register-modal,
.tag-modal,
.mail-template-modal,
.chat-template-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    /* 背景をぼかしてモーダル表示時の視認性を向上 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    /* padding: 1rem; */
    z-index: 1200;
}

.category-register-modal.open,
.tag-modal.open,
.mail-template-modal.open,
.chat-template-modal.open {
    display: flex;
}

.category-register-modal__content,
.mail-template-modal__content,
.chat-template-modal__content,
.doc-register-modal__content {
    background-color: var(--color-white);
    border-radius: 18px;
    box-shadow: var(--glass-shadow-soft);
    width: min(960px, 100%);
    max-height: 95vh;
    overflow: hidden;
    padding: 1.5rem 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 資料登録モーダルはフォーム部分のみスクロールさせて角丸を保持する */
.doc-register-modal__content {
    overflow: hidden;
}

.doc-register-modal__content .register-form {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.category-register-modal__title,
.tag-modal__title,
.mail-template-modal__title,
.chat-template-modal__title,
.doc-register-modal__title {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    font-size: 1.25rem;
    color: var(--color-light-cardinal-red);
    margin: 0 2.5rem 1.25rem 0;
}

.category-register-modal__close,
.tag-modal__close,
.mail-template-modal__close,
.chat-template-modal__close,
.doc-register-modal__close,
.card-scan-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background-color: transparent;
    color: var(--color-charcoal-gray);
    font-size: 1.4rem;
    cursor: pointer;
}

.category-register-modal__close:hover,
.tag-modal__close:hover,
.mail-template-modal__close:hover,
.chat-template-modal__close:hover,
.doc-register-modal__close:hover {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .category-register-modal__content,
    .mail-template-modal__content,
    .chat-template-modal__content,
    .doc-register-modal__content {
        width: calc(100vw - 2rem);
        padding: 0.85rem 1.25rem 1.5rem;
        max-height: min(90vh, 560px);
    }
    .category-register-modal__title,
    .tag-modal__title,
    .mail-template-modal__title,
    .chat-template-modal__title,
    .doc-register-modal__title {
        font-size: 1.15rem;
        margin-right: 2rem;
    }

    /* 連絡先編集モーダルをスマホで見切れないよう高さを拡大 */
    #contact-edit-modal .category-register-modal__content {
        --contact-edit-max-height: min(95vh, 680px);
        max-height: var(--contact-edit-max-height);
    }

    #contact-edit-modal .register-form {
        min-height: 560px;
    }
}

/* マスタ共通モーダル内のタイポグラフィと余白を微調整 */
.category-register-modal__content .register-form,
.mail-template-modal__content .register-form,
.chat-template-modal__content .register-form,
.doc-register-modal__content .register-form {
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.35rem;
    scrollbar-width: thin;
}

.category-register-modal__content .form-group,
.mail-template-modal__content .form-group,
.chat-template-modal__content .form-group,
.doc-register-modal__content .form-group,
.contact-register-modal__content .form-group {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.category-register-modal__content .form-group--image {
    align-items: flex-start;
}

.form-group__image-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

/* 資料マスタ：ファイル入力 + ファイル削除ボタン（ゴミ箱） */
.form-group__file-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-group__file-row input[type="file"] {
    flex: 1;
    min-width: 0;
}

.form-group__image-preview {
    display: none;
    max-width: 200px;
    border-radius: 4px;
    box-shadow: var(--glass-shadow-soft);
}

.form-group__file-icon {
    display: none;
    max-width: 200px;
    width: 200px;
    height: 141px;
    border: 1px solid var(--color-light-gray);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    box-shadow: var(--glass-shadow-soft);
    color: var(--color-dark-cardinal-red);
}

.form-group__image-preview-wrapper {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
}

.form-group__image-caption {
    font-size: 0.75rem;
    color: #666666;
}

.category-register-modal__content .form-group label,
.mail-template-modal__content .form-group label,
.chat-template-modal__content .form-group label,
.doc-register-modal__content .form-group label,
.contact-register-modal__content .form-group label {
    font-size: 0.9rem;
    margin-bottom: 0;
    min-width: 8rem;
    /* max-width: 6.5rem; */
    flex-shrink: 0;
}

/* 資料登録モーダルの顧客回答内容はラベル横にセレクトを置き、プレビューを下部に配置 */
.chat-template-modal__content .form-group--response-template,
.doc-register-modal__content .form-group--response-template {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.chat-template-modal__content .form-group--response-template .form-group__response-row,
.doc-register-modal__content .form-group--response-template .form-group__response-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chat-template-modal__content .form-group--response-template .form-group__response-row select,
.doc-register-modal__content .form-group--response-template .form-group__response-row select {
    flex: 1;
}

/* 顧客回答プレビューの左位置をセレクト開始位置に合わせる */
.chat-template-modal__content .form-group--response-template .template-preview,
.doc-register-modal__content .form-group--response-template .template-preview {
    margin-left: calc(7.5rem + 0.75rem);
}

.category-register-modal__content .form-group input,
.category-register-modal__content .form-group select,
.category-register-modal__content .form-group textarea,
.mail-template-modal__content .form-group input,
.mail-template-modal__content .form-group select,
.mail-template-modal__content .form-group textarea,
.chat-template-modal__content .form-group input,
.chat-template-modal__content .form-group select,
.chat-template-modal__content .form-group textarea,
.doc-register-modal__content .form-group input,
.doc-register-modal__content .form-group select,
.doc-register-modal__content .form-group textarea,
.contact-register-modal__content .form-group input,
.contact-register-modal__content .form-group select,
.contact-register-modal__content .form-group textarea {
    flex: 1;
}

.category-register-modal__content .form-group--order-inline label,
.mail-template-modal__content .form-group--order-inline label,
.chat-template-modal__content .form-group--order-inline label,
.doc-register-modal__content .form-group--order-inline label {
    white-space: nowrap;
}

.category-register-modal__content .register-form input,
.category-register-modal__content .register-form select,
.category-register-modal__content .register-form textarea,
.mail-template-modal__content .register-form input,
.mail-template-modal__content .register-form select,
.mail-template-modal__content .register-form textarea,
.chat-template-modal__content .register-form input,
.chat-template-modal__content .register-form select,
.chat-template-modal__content .register-form textarea,
.doc-register-modal__content .register-form input,
.doc-register-modal__content .register-form select,
.doc-register-modal__content .register-form textarea {
    font-size: 0.9rem;
    padding: 0.65rem 0.7rem;
}

.category-register-modal__content .register-form select,
.mail-template-modal__content .register-form select,
.chat-template-modal__content .register-form select,
.doc-register-modal__content .register-form select {
    min-height: 2.5rem;
}

.category-register-modal__content .register-form textarea,
.mail-template-modal__content .register-form textarea,
.chat-template-modal__content .register-form textarea,
.doc-register-modal__content .register-form textarea {
    min-height: 4rem;
}
.chat-template-modal__content .form-group .chat-template-color-input {
    width: 3rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-table-border);
    border-radius: 6px;
    cursor: pointer;
}
.chat-template-color-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.chat-template-color-layout {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.chat-template-color-area {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.chat-template-color-section.chat-template-color-section--split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.chat-template-color-subsection {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.chat-template-color-subsection.chat-template-color-section--custom {
    margin-left: 1rem;
}
.chat-template-color-preview-area {
    flex: 0 0 144px;
    background: var(--color-light-gray);
    border-radius: 8px;
    padding: 0.8rem;
    border: 1px solid var(--color-table-border);
}
.chat-template-color-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.chat-template-color-section--custom {
    align-items: flex-start;
}
.chat-template-color-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.chat-template-color-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-dark-gray);
    text-align: left;
}
.chat-template-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chat-template-color-preview {
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    justify-content: center;
}
.chat-template-color-preview .chat-template-btn {
    pointer-events: none;
}
.chat-template-color-option {
    width: 1.8rem;
    height: 1.8rem;
    box-sizing: border-box;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
}
.chat-template-color-option::after {
    content: none;
}
.chat-template-color-chip {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 4px;
    border: 1px solid var(--color-table-border);
    vertical-align: middle;
}

.register-form__smtp-section .form-group {
    margin-bottom: 0.5rem;
}

/* メールテンプレ登録・編集モーダルの本文入力欄を拡大し、作業スペースを確保 */
.mail-template-modal__content #mail-template-register-body,
.mail-template-modal__content #mail-template-edit-body {
    min-height: 12rem;
    line-height: 1.6;
    resize: vertical;
}

/* SweetAlert2がモーダルより前面に表示されるようにz-indexを調整 */
.swal2-container {
    z-index: 1400 !important;
}

.category-register-modal__content .register-submit-btn,
.mail-template-modal__content .register-submit-btn,
.chat-template-modal__content .register-submit-btn,
.doc-register-modal__content .register-submit-btn {
    /* 連絡先登録モーダルの登録ボタンと同じ見た目（ぷっくり）に統一 */
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;

    font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
    min-width: 10rem;
    width: 10rem;
}

.category-register-modal__content .register-submit-btn:hover,
.mail-template-modal__content .register-submit-btn:hover,
.chat-template-modal__content .register-submit-btn:hover,
.doc-register-modal__content .register-submit-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-light-cardinal-red));
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.category-register-modal__content .register-submit-btn:active,
.mail-template-modal__content .register-submit-btn:active,
.chat-template-modal__content .register-submit-btn:active,
.doc-register-modal__content .register-submit-btn:active {
    box-shadow: 0 7px 12px rgba(98, 22, 18, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
}

.category-register-modal__content .register-submit-btn:focus-visible,
.mail-template-modal__content .register-submit-btn:focus-visible,
.chat-template-modal__content .register-submit-btn:focus-visible,
.doc-register-modal__content .register-submit-btn:focus-visible {
    outline: 3px solid rgba(177, 34, 26, 0.35);
    outline-offset: 3px;
}

/* チャットページ */
.chat {
    padding: var(--header-height) 1rem var(--footer-height);
}

/* チャットページ用に動的ビューポート高を利用 */
:root {
    --chat-viewport-height: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --chat-viewport-height: 100dvh;
    }
}

/* チャットレイアウトを左右で分割 */
.chat-layout {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    min-height: calc(var(--chat-viewport-height) - var(--header-height) - var(--footer-height));
    height: calc(var(--chat-viewport-height) - var(--header-height) - var(--footer-height));
}

.chat-info-panel {
    width: 32%;
    background: var(--glass-bg-strong);
    border-radius: 12px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* min-height: calc(var(--chat-viewport-height) - var(--header-height) - var(--footer-height) - 1rem); */
    max-height: calc(var(--chat-viewport-height) - var(--header-height) - var(--footer-height) - 1rem);
    overflow: hidden;
}

@supports (backdrop-filter: blur(1px)) {
    .chat-info-panel {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12));
    }
}

.chat-info-title {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    color: var(--color-cardinal-red);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chat-info-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chat-info-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.chat-info-row dt {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-info-row dd {
    margin: 0;
    color: var(--color-charcoal-gray);
    word-break: break-all;
}

.chat-address-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-address-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    color: var(--color-cardinal-red);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(177, 34, 26, 0.2);
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 3px 5px rgba(98, 22, 18, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        inset 0 -2px 4px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.chat-document-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-mail-button {
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: #4a79ff;
    color: var(--color-white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(46, 74, 150, 0.28),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.chat-mail-button:hover {
    transform: translateY(-1px);
    opacity: 0.95;
    box-shadow: 0 8px 14px rgba(46, 74, 150, 0.32),
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        inset 0 -3px 6px rgba(0, 0, 0, 0.24);
}

.chat-mail-button:active {
    transform: translateY(1px);
    box-shadow: 0 4px 8px rgba(46, 74, 150, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.32),
        inset 0 -2px 4px rgba(0, 0, 0, 0.26);
}

.chat-mail-button.is-disabled,
.chat-mail-button:disabled {
    background: var(--color-light-gray);
    color: var(--color-medium-gray);
    cursor: not-allowed;
    transform: none;
    opacity: 1;
    box-shadow: none;
}

.chat-address-map:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 14px rgba(98, 22, 18, 0.22),
        inset 0 2px 4px rgba(255, 255, 255, 0.75),
        inset 0 -3px 6px rgba(0, 0, 0, 0.2);
}

.chat-address-map:active {
    transform: translateY(1px);
    box-shadow: 0 4px 8px rgba(98, 22, 18, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.55),
        inset 0 -2px 4px rgba(0, 0, 0, 0.22);
}

.chat-address-map.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

.chat-info-icon {
    font-size: 1.1rem;
    color: var(--color-cardinal-red);
}

.chat-history-box {
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-height: 0;
}

.chat-info-subtitle {
    margin: 0;
    font-size: 1rem;
    color: var(--color-cardinal-red);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.chat-info-heading-icon {
    color: var(--color-cardinal-red);
}

.chat-history-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-medium-gray);
}

.chat-history-empty {
    margin: 0;
    color: var(--color-medium-gray);
    font-size: 0.9rem;
}

.chat-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
}

.chat-history-list::-webkit-scrollbar {
    width: 4px;
}

.chat-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.chat-history-list::-webkit-scrollbar-thumb {
    background: rgba(51, 51, 51, 0.35);
    border-radius: 999px;
}

.chat-history-item {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22));
    box-shadow: none;
}

/* 送付履歴のチャット遷移を行う行はクリック可能にする */
.chat-history-item-link {
    cursor: pointer;
}

/* クローズ済みチャットはグレー表示にする */
.chat-history-item-closed {
    background: rgba(245, 245, 245, 0.95);
    border-color: rgba(51, 51, 51, 0.15);
    animation: none;
    box-shadow: none;
}

.chat-history-item-closed .chat-history-item-title,
.chat-history-item-closed .chat-history-item-date,
.chat-history-item-closed .chat-history-status {
    color: rgba(51, 51, 51, 0.6);
}

.chat-history-item-closed .chat-history-status i {
    color: rgba(51, 51, 51, 0.45);
}

/* 返答がない履歴（未開封・開封済み）をアニメーションで強調する */
.chat-history-item-unopened {
    position: relative;
    border-color: rgba(177, 34, 26, 0.35);
    box-shadow: none;
    background: linear-gradient(145deg, rgba(255, 232, 232, 0.98), rgba(255, 210, 210, 0.82));
    background-blend-mode: screen;
    animation: unopenedHistoryBlink 1.6s ease-in-out infinite;
}

@keyframes unopenedHistoryBlink {
    0% {
        filter: brightness(1);
        box-shadow: none;
    }
    45% {
        filter: brightness(1.22);
        box-shadow: none;
        background: linear-gradient(145deg, rgba(255, 242, 240, 0.98), rgba(255, 214, 210, 0.9));
    }
    100% {
        filter: brightness(1);
        box-shadow: none;
        background: linear-gradient(145deg, rgba(255, 232, 232, 0.98), rgba(255, 210, 210, 0.82));
    }
}

.chat-history-item-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-charcoal-gray);
    word-break: break-word;
}

/* チャット送付履歴で削除済み資料を薄いグレーにして状態を明示 */
.chat-history-item-title.deleted-document-label {
    color: rgba(51, 51, 51, 0.45);
}

.chat-history-item-date {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--color-medium-gray);
}

.chat-history-item-meta {
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.chat-history-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.chat-history-status i {
    font-size: 0.95rem;
}

.chat-history-status-text {
    font-size: 0.82rem;
}

.chat-history-status-unopened {
    color: #ff0000;
}

.chat-history-status-opened {
    color: #0804ff;
}

.chat-history-status-action {
    color: #0f731c;
}

.chat-history-status-closed {
    color: rgba(51, 51, 51, 0.65);
}

.chat-conversation {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    background: var(--glass-bg-strong);
    border: var(--glass-border);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: var(--glass-shadow-soft);
    /* min-height: calc(var(--chat-viewport-height) - var(--header-height) - var(--footer-height) - 1rem); */
    max-height: calc(var(--chat-viewport-height) - var(--header-height) - var(--footer-height) - 1rem);
}

@supports (backdrop-filter: blur(1px)) {
    .chat-conversation {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12));
    }
}
.chat-conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.35rem 0.45rem;
    border-radius: 10px;
    /* background: rgba(177, 34, 26, 0.06); */
}

.chat-closed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: #e0e0e0;
    color: #b1221a;
    border: 1px solid rgba(51, 51, 51, 0.25);
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 6px rgba(51, 51, 51, 0.16);
}

.chat-closed-badge.is-visible {
    opacity: 1;
}

.chat-conversation-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-cardinal-red);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.chat-conversation-title i {
    font-size: 1rem;
}

.chat-document-link {
    color: var(--color-charcoal-gray);
    text-decoration: none;
    pointer-events: none;
    word-break: break-all;
}

.chat-document-link.deleted-document-label {
    color: rgba(51, 51, 51, 0.45);
}

.chat-document-link.chat-document-link-closed {
    color: rgba(51, 51, 51, 0.55);
    text-decoration: none;
    pointer-events: none;
}

.chat-document-link.is-link {
    color: var(--color-cardinal-red);
    text-decoration: underline;
    pointer-events: auto;
}
.chat-messages {
    flex: 1 1 auto;
    min-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-table-border);
    background-color: #f5f5f5d9;
    padding: 0.8rem;
    scrollbar-width: thin;
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: stretch; /* 添付ボタンと送信ボタンをテキストエリアの高さに揃える */
    width: 100%;
    max-width: 100%;
}

.chat-input-area.is-hidden {
    display: none;
}

.chat-input-area.is-readonly {
    opacity: 0.65;
    pointer-events: none;
}

.chat-page--staff .chat-message-layout {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 320px;
    align-items: stretch;
    min-width: 0;
}
.chat-messages-wrapper {
    display: flex;
    flex: 0 0 52%;
    min-width: 0;
}
.chat-page--staff .chat-messages {
    flex: 1 1 auto;
}

/* 送信欄はメッセージ幅に合わせる */
/* クローズ済みチャットはグレー背景で非活性風に表示 */
.chat-page--staff .chat-messages.chat-messages--closed {
    background-color: #e9e9e9;
}

/* クローズ済みチャットのテキストはグレー表示 */
.chat-page--staff .chat-messages.chat-messages--closed .message-text,
.chat-page--staff .chat-messages.chat-messages--closed .message-time,
.chat-page--staff .chat-messages.chat-messages--closed .message-file {
    color: rgba(51, 51, 51, 0.55);
}

/* 顧客向けクローズ済みチャットの背景色を調整 */
.chat-page:not(.chat-page--staff) .chat-messages.chat-messages--closed {
    background-color: #e9e9e9;
}

/* 顧客向けクローズ済みチャットのテキスト色を調整 */
.chat-page:not(.chat-page--staff) .chat-messages.chat-messages--closed .message-text {
    color: rgba(51, 51, 51, 0.55);
}

/* メモボタン */
.chat-memo-button-row {
    display: flex;
    justify-content: center;
    padding: 0.9rem 0 0.2rem;
}

.chat-memo-button-row.is-hidden {
    display: none;
}

.chat-memo-button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background-image: linear-gradient(to bottom right,
        #f9f2e9, #f0ddc4);
    color: var(--color-cardinal-red);
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16),
        inset 0 2px 4px rgba(255, 255, 255, 0.7),
        inset 0 -3px 4px rgba(177, 34, 26, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-image 0.2s ease;
    cursor: pointer;
}

.chat-memo-button:hover {
    background-image: linear-gradient(to bottom right,
        #fdf7f0, #ead2b4);
    transform: translateY(-1px);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2),
        inset 0 2px 5px rgba(255, 255, 255, 0.75),
        inset 0 -4px 6px rgba(177, 34, 26, 0.22);
}

.chat-memo-button:active {
    transform: translateY(2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(177, 34, 26, 0.26);
}

.chat-memo-button:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.45);
    outline-offset: 3px;
}

/* メモメッセージ */
.memo-message {
    background: var(--color-pale-beige);
    border: 1px solid rgba(177, 34, 26, 0.2);
    border-left: 4px solid var(--color-cardinal-red);
    border-radius: 12px;
    padding: 0.3rem 0.6rem;
    margin: 0.5rem 0;
    color: var(--color-charcoal-gray);
}

.memo-message__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    /* margin-bottom: 0.35rem; */
}

.memo-message .message-time {
    color: rgba(51, 51, 51, 0.7);
}

.memo-message__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-cardinal-red);
    margin-left: auto;
}

.memo-message .message-text {
    color: var(--color-charcoal-gray);
    line-height: 1.6;
}

.memo-message__text {
    color: var(--color-charcoal-gray);
    line-height: 1.6;
    font-size: 0.8rem;
    word-break: break-word;
    white-space: pre-wrap;
}

.memo-message__edit {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(177, 34, 26, 0.25);
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-cardinal-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.memo-message__edit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16),
        inset 0 1px 3px rgba(255, 255, 255, 0.9);
}

.memo-message__edit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

.memo-message__edit:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.45);
    outline-offset: 2px;
}

/* メモモーダル */
.memo-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.memo-modal.is-open {
    display: flex;
}

.memo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.memo-modal__content {
    position: relative;
    z-index: 1;
    width: min(520px, 92vw);
    background: #fff;
    border-radius: 16px;
    padding: 1.6rem 1.5rem 1.4rem;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.memo-modal__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-cardinal-red);
    font-weight: 700;
    margin: 0;
}

.memo-modal__note {
    margin: 0;
    color: rgba(51, 51, 51, 0.7);
    font-size: 0.9rem;
}

.memo-modal__label {
    font-weight: 600;
    color: var(--color-charcoal-gray);
}

.memo-modal__textarea {
    width: 100%;
    border: 1px solid rgba(51, 51, 51, 0.2);
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
}

.memo-modal__textarea:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.4);
    outline-offset: 2px;
}

.memo-modal__save {
    align-self: flex-end;
    border: none;
    background: var(--color-cardinal-red);
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.memo-modal__save:hover {
    filter: brightness(1.02);
}

.memo-modal__save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.memo-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: rgba(51, 51, 51, 0.08);
    border: none;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-charcoal-gray);
    cursor: pointer;
}

.memo-modal__close:hover {
    background: rgba(51, 51, 51, 0.12);
}

/* 送付メール内容モーダル */
.mail-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1200;
}

.mail-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mail-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.mail-modal__content {
    position: relative;
    width: min(560px, 90vw);
    max-height: 80vh;
    background: var(--color-white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mail-modal__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    margin: 0;
    color: var(--color-charcoal-gray);
}

.mail-modal__body {
    margin: 0;
    padding: 0.75rem 1rem;
    background: #f7f7f7;
    border-radius: 12px;
    color: var(--color-charcoal-gray);
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-y: auto;
    white-space: pre-wrap;
}

.mail-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: none;
    background: rgba(51, 51, 51, 0.08);
    color: var(--color-charcoal-gray);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mail-modal__close:hover {
    background: rgba(51, 51, 51, 0.12);
}

.chat-page--staff .chat-close-modal__label {
    font-weight: 600;
    color: var(--color-charcoal-gray);
    margin-bottom: 0.35rem;
    display: inline-block;
}

.chat-page--staff .chat-close-tag-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chat-page--staff .chat-close-tag-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.chat-page--staff .chat-close-tag-input:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.4);
    outline-offset: 2px;
}

.chat-page--staff .chat-close-tag-suggestions {
    display: none;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chat-page--staff .chat-close-tag-suggestions.is-visible {
    display: flex;
}

.chat-page--staff .chat-close-tag-suggestions button {
    border: 1px solid rgba(177, 34, 26, 0.3);
    background: rgba(177, 34, 26, 0.08);
    color: var(--color-cardinal-red);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
}

.chat-page--staff .chat-close-tag-suggestions button.is-selected {
    background: var(--color-cardinal-red);
    color: var(--color-white);
    border-color: rgba(177, 34, 26, 0.6);
}

.chat-page--staff .chat-close-other {
    margin-top: 0.4rem;
}

.chat-page--staff .chat-close-modal__textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    padding: 0.65rem 0.75rem;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 90px;
    box-sizing: border-box;
}

.chat-page--staff .chat-close-modal__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: var(--color-cardinal-red);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.75rem;
    align-self: flex-start;
    /* トップ画面パネルのトーンで立体感を付与 */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.chat-page--staff .chat-close-modal__submit:hover {
    filter: brightness(1.02);
    box-shadow: 0 10px 16px rgba(98, 22, 18, 0.36),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.chat-page--staff .chat-close-modal__submit:active {
    box-shadow: 0 6px 10px rgba(98, 22, 18, 0.26),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

.chat-page--staff .chat-close-panel {
    flex: 1 1 48%;
    min-width: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(177, 34, 26, 0.12);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
}

.chat-page--staff .chat-close-panel.is-closed {
    background: #e9e9e9;
}

.chat-page--staff .chat-close-panel.is-closed .chat-close-modal__submit {
    opacity: 0.6;
    pointer-events: none;
}

.chat-page--staff .chat-close-panel.is-readonly {
    background: #e9e9e9;
}

.chat-page--staff .chat-close-panel.is-readonly .chat-close-modal__submit {
    opacity: 0.6;
    pointer-events: none;
}

.chat-page--staff .chat-close-panel__title {
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-cardinal-red);
    font-size: 1rem;
}
.chat-page--staff .chat-input-area {
    width: 52%;
    max-width: 52%;
}
/* テキストエリアとファイル名表示用ラッパー */
.chat-textarea-wrapper {
    position: relative;
    flex: 1;
}
/* 選択したファイル名と削除アイコンをテキストエリア内の右上に表示 */
.chat-file-info {
    position: absolute;
    top: 0.2rem;
    right: 0.5rem;
    display: none;
    align-items: center;
}

/* ファイル名表示 */
.chat-file-name {
    color: #008000;
    font-size: 0.8rem;
}

/* 添付削除用アイコン */
.chat-file-remove {
    margin-left: 0.3rem;
    color: #B1221A;
    font-size: 0.8rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .chat-page--staff .chat-message-layout {
        flex-direction: column;
        width: 100%;
        min-height: 0;
    }

    .chat-page--staff .chat-messages-wrapper {
        flex: 1 1 auto;
        max-height: 45vh;
        min-height: 0;
        width: 100%;
        order: 1;
    }

    .chat-page--staff .chat-messages {
        max-height: 45vh;
        min-height: 0;
    }

    .chat-page--staff .chat-input-area {
        width: 100%;
        max-width: 100%;
        order: 2;
    }

    .chat-page--staff .chat-close-panel {
        width: 100%;
        order: 3;
        box-sizing: border-box;
    }

    .chat-page--staff .chat-messages {
        width: 100%;
    }
}
.chat-template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
/* 顧客回答ボタン */
.chat-template-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    background-color: var(--chat-template-color, transparent);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.6rem; /* 通常の高さを確保 */
    cursor: pointer;
}
.chat-template-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
}
.chat-template-btn.is-custom-color {
    background-image: linear-gradient(to bottom right,
        rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.18));
    background-color: var(--chat-template-color);
}
.chat-template-btn.is-custom-color:hover {
    filter: brightness(0.92);
}

.chat-template-btn.chat-template-btn--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
/* 送付内容確認画面ではコンパクトなボタンを使用 */
.template-preview .chat-template-btn {
    padding: 0.2rem 0.5rem;
    line-height: 1.2;
}
.chat-input {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box; /* 余白込みで幅を計算しボタンと重ならないようにする */
    height: 4.5rem; /* 高さ固定 */
    overflow-y: auto; /* 内容が多い場合はスクロール */
    resize: none; /* 手動リサイズは無効化 */
    -ms-overflow-style: none; /* IE でのスクロールバー非表示 */
    scrollbar-width: none; /* Firefox でのスクロールバー非表示 */
    border: 1px solid var(--color-table-border);
}

.chat-input:disabled {
    background-color: var(--color-light-gray);
    color: var(--color-charcoal-gray);
}
/* 添付ファイル名表示と重ならないよう上部に余白を追加 */
.chat-input.has-file {
    padding-top: 1.5rem;
}
/* Chrome 等でのスクロールバー非表示 */
.chat-input::-webkit-scrollbar {
    display: none;
}
.chat-send-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 0 1rem; /* 左右の余白のみ確保してアイコン位置を中央に保つ */
    cursor: pointer;
    display: flex; /* アイコンを中央に配置 */
    align-items: center;
    justify-content: center;
    height: 4.5rem; /* テキストエリアと同じ高さに統一 */
    flex-shrink: 0; /* ボタン幅が潰れないよう固定 */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-image 0.18s ease;
}
.chat-send-btn i {
    font-size: 1.25rem; /* アイコンを少し大きく */
}
.chat-attach-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 0 1rem; /* 左右の余白のみ設定して高さを固定 */
    cursor: pointer;
    display: flex; /* アイコンを中央に表示 */
    align-items: center;
    justify-content: center;
    height: 4.5rem; /* テキスト入力欄と高さを合わせる */
    flex-shrink: 0; /* 画面幅が狭い場合でも幅を維持 */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-image 0.18s ease;
}
.chat-attach-btn i {
    font-size: 1.25rem;
}
.chat-send-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    box-shadow: 0 10px 16px rgba(98, 22, 18, 0.36),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
.chat-attach-btn:hover {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    box-shadow: 0 10px 16px rgba(98, 22, 18, 0.36),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

.chat-send-btn:active,
.chat-attach-btn:active {
    box-shadow: 0 6px 10px rgba(98, 22, 18, 0.26),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}
.chat-send-btn:disabled {
    background-image: none;
    background-color: #cccaca;
    color: var(--color-medium-gray);
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .chat-layout {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    .chat-info-panel {
        width: 100%;
        max-height: none;
    }
    .chat-conversation {
        width: 100%;
        max-height: none;
    }
}
/* スマホ幅ではパネル全体を表示しつつスクロールを可能にする */
@media (max-width: 600px) {
    .chat-info-panel {
        overflow-y: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .chat-conversation {
        box-sizing: border-box;
    }

    .chat-history-box {
        display: none;
    }

    /* スマホ時に入力文字を読みやすくする */
    .chat-input {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    /* スマホ時に入力欄の横幅を確保する */
    .chat-input-area {
        gap: 0.3rem;
    }

    .chat-attach-btn,
    .chat-send-btn {
        padding: 0 0.6rem;
    }
}
.my-message {
    text-align: right;
    margin-bottom: 0.8rem;
}
.their-message {
    text-align: left;
    margin-bottom: 0.8rem;
}

/* メッセージ本文 */
.message-text {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    /* 改行を表示するために必要 */
    white-space: pre-wrap;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--glass-shadow-soft);
    text-align: left;
}

@supports (backdrop-filter: blur(1px)) {
    .message-text {
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.22));
    }
}
.message-file {
    color: var(--color-cardinal-red);
    text-decoration: underline;
}

/* 送信日時 */
.message-time {
    font-size: 0.7rem;
    color: var(--color-medium-gray);
    display: block;
    margin-bottom: 0.2rem;
}

/* ログインページ */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 95vh;
}
/* ログインフォームを囲む白いボックス */
.login-box {
    background: var(--glass-bg-strong);
    width: 90%;
    max-width: 480px;
    padding: 0.5rem;
    border-radius: 24px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
}

@supports (backdrop-filter: blur(1px)) {
    .login-box {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.14));
    }
}
/* ログインページで使用するロゴ */
.login-page-logo {
    width: 250px;
    height: auto;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}
.login-form input {
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
}
.login-submit-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-cardinal-red));
    color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px; /* フォントサイズをやや大きく */
    height: 50px; /* 縦幅を広げる */
    width: 8rem; /* ボタン幅を短く */
    align-self: center; /* 中央寄せ */
    box-shadow: 0 3px 4px rgba(98, 22, 18, 0.32),
        inset 0 1px 3px rgba(255, 255, 255, 0.35),
        inset 0 -4px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-image 0.18s ease;
}
.login-submit-btn:hover {
    background-image: linear-gradient(to bottom right,
        #e35b54, var(--color-light-cardinal-red));
    box-shadow: 0 10px 16px rgba(98, 22, 18, 0.36),
        inset 0 2px 5px rgba(255, 255, 255, 0.45),
        inset 0 -5px 10px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}
.login-submit-btn:active {
    box-shadow: 0 6px 10px rgba(98, 22, 18, 0.26),
        inset 0 1px 2px rgba(255, 255, 255, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}
.login-message {
    text-align: center;
    margin-top: 0.5rem;
}


/* 資料カテゴリマスタページ */
.category-master {
    /* ヘッダーとフッターの重なりを防ぐ */
    padding: var(--header-height) 1rem var(--footer-height);
}
.doc-master {
    /* ヘッダーとフッターの重なりを防ぐ */
    padding: var(--header-height) 1rem var(--footer-height);
}
.category-master-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.doc-master-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.category-master-table th,
.category-master-table td,
.doc-master-table th,
.doc-master-table td {
    border: 1px solid var(--color-table-border);
    padding: 0.5rem;
    font-size: 0.9rem;
}
.category-master-table th {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    cursor: default;
}
.doc-master-table th {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    cursor: default;
}
.category-master-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}
.category-master-table tbody tr:nth-child(even) {
    background-color: var(--color-even-row);
}
.doc-master-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}
.doc-master-table tbody tr:nth-child(even) {
    background-color: var(--color-even-row);
}
.category-master-table td.edit-cell {
    text-align: center;
}
.doc-master-table td.edit-cell {
    text-align: center;
}
/* 組織設定の操作ボタン横並び */
.env-action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}
/* 組織設定テーブルの備考欄を広めにする */
#env-table th:nth-child(3),
#env-table td:nth-child(3) {
    min-width: 220px;
}
/* 組織設定の編集モーダル：キー入力欄の非活性スタイル */
#env-edit-key {
    background-color: var(--color-light-gray);
    color: #8d8d8d;
}

/* チャット定型文マスタ：色列は中央揃え */
.chat-template-master-table th:nth-child(4),
.chat-template-master-table td:nth-child(4) {
    text-align: center;
}
/* 送付先グループマスタの人数表示 */
.contact-group-count-cell {
    text-align: center;
}
.contact-group-count-btn {
    border: none;
    background-color: transparent;
    color: var(--color-cardinal-red);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}
.contact-group-count-btn:hover {
    text-decoration: underline;
}
.contact-group-count-btn:focus-visible {
    outline: 2px solid rgba(177, 34, 26, 0.4);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 送付先グループ連絡先一覧モーダル */
.contact-group-members-modal__content {
    max-width: 720px;
    overflow: hidden;
}
.contact-group-members-modal__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.contact-group-members-modal__title-row .mail-template-modal__title {
    margin: 0;
}
.contact-group-members-modal__count {
    font-size: 0.95rem;
    color: var(--color-dark-gray);
    margin-left: auto;
}
.contact-group-members-modal__empty {
    font-size: 0.9rem;
    color: var(--color-medium-gray);
    margin: 0.5rem 0 0;
    display: none;
}
.contact-group-members-modal__empty.is-visible {
    display: block;
}
.contact-group-members-modal__list-wrapper {
    margin-top: 1rem;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.25rem;
    scrollbar-width: thin;
}
.contact-group-members-modal__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.contact-group-members-modal__item {
    background-color: var(--color-light-gray);
    border-radius: 12px;
    padding: 0.55rem 1rem;
    box-shadow: 0 2px 0px rgba(51, 51, 79, 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.contact-group-members-modal__item-name {
    font-weight: 600;
    color: var(--color-charcoal-gray);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.contact-group-members-modal__item-name-text {
    color: var(--color-charcoal-gray);
}
.contact-group-members-modal__item-position {
    font-size: 0.8rem;
    color: var(--color-dark-gray);
    font-weight: 400;
}
.contact-group-members-modal__item-company {
    font-size: 0.8rem;
    color: var(--color-dark-gray);
    text-align: right;
}

/* 資料マスタの列幅調整 */
.doc-master-table th:nth-child(2),
.doc-master-table td:nth-child(2) {
    width: 300px; /* タイトルを広めに */
}
.doc-master-table th:nth-child(3),
.doc-master-table td:nth-child(3) {
    width: 100px; /* ファイル種別をやや狭く */
}

/* 管理者権限ページ */
.admin-authority {
    /* ヘッダーとフッターが重ならないよう上下のみ高さ分を確保 */
    padding: var(--header-height) 1rem var(--footer-height);
}
.admin-authority-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.admin-authority-table th,
.admin-authority-table td {
    border: 1px solid var(--color-table-border);
    padding: 0.5rem;
    font-size: 0.9rem;
}
.admin-authority-table th {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    cursor: default;
}
.admin-authority-table tbody tr:nth-child(odd) {
    background-color: var(--color-white);
}
.admin-authority-table tbody tr:nth-child(even) {
    background-color: var(--color-even-row);
}
.admin-authority-table td.edit-cell {
    text-align: center;
}

/* 環境変数テーブル */
#env-table th,
#env-table td {
    width: 45%;
}
#env-table th:last-child,
#env-table td:last-child {
    width: 10%;
    text-align: center;
}

/* 送付内容確認ページ */
.confirm {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    padding: var(--header-height, 45px) 1rem calc(var(--footer-height, 70px) + 1.5rem);
    margin-top: 1rem;
}
.confirm-left,
.confirm-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.confirm-section {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}
/* 送付内容確認画面では余白をgapで調整 */
.confirm .confirm-section {
    margin-bottom: 0;
}
.confirm-right {
    align-self: stretch;
    padding: 1rem;
    background: var(--glass-bg-strong);
    border-radius: 10px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    /* 送付先選択画面を基準にした最低高さ */
    min-height: 480px;
}

@media (max-width: 768px) {
    .confirm-right {
        /* フッターに重ならないよう下部に十分な余白を確保 */
        padding-bottom: calc(var(--footer-height, 70px) + 1rem);
    }
}

@supports (backdrop-filter: blur(1px)) {
    .confirm-right {
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(130deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.14));
    }
}

/* 右カラム内のボタンは自然な位置で配置し、幅いっぱいに表示 */
.confirm-right .contact-send-btn {
    width: 100%;
}

/* 送付先一覧エリアは残り高さに合わせてスクロール */
.send-right .confirm-section:nth-of-type(2) {
    flex-grow: 1;
    min-height: 0;
}

/* 資料・送付先の見出し余白調整 */
.confirm-section h2 {
    margin: 0;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: var(--color-cardinal-red);
}
.confirm-count {
    font-size: 1rem;
    color: #a42923;
}
.confirm-contact-list,
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: var(--glass-border);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.16));
    max-height: 19vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.confirm-contact-list li {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.confirm-contact-list li:last-child {
    border-bottom: none;
}

@supports (backdrop-filter: blur(1px)) {
    .confirm-contact-list,
    .contact-list {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12));
    }
}

/* 顧客回答内容選択エリア */
.confirm-template-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.confirm-template-row select {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--color-medium-gray);
    border-radius: 4px;
}

/* 顧客回答ボタン表示領域 */
.template-preview {
    border: var(--glass-border);
    border-radius: 10px;
    padding: 0.6rem; /* 余白を縮小 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18));
    min-height: 2.5rem; /* ボタンが詰まり過ぎない最低高さ */
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

@supports (backdrop-filter: blur(1px)) {
    .template-preview {
        backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur-amount) - 6px)) saturate(150%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12));
    }
}

/* 左カラム内のスクロール領域制御 */
.confirm-left .confirm-section {
    flex: 1 1 auto;
    min-height: 0;
}
#no-docs {
    margin: 0 0 0.5rem;
}
/* 送付確認画面の資料表示 */
.confirm-doc-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    align-items: flex-start; /* カードを縦方向に引き伸ばさない */
    align-content: flex-start; /* 余白ができても上詰めで表示 */
    padding: 1rem;
}

/* 送付内容確認画面の資料アイコンサイズ調整 */
.confirm .document-item {
    flex: 0 0 150px;
    padding: 0.5rem;
    height: 230px; /* カード高さを固定 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.confirm .pdf-canvas,
.confirm .doc-icon {
    width: 150px;
    height: 106px;
}
.confirm .document-title {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.confirm .document-download-button {
    margin-top: auto;
    width: 100%;
}
.confirm .doc-icon {
    font-size: 3rem;
}
.confirm .select-circle {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

/* 送付内容確認画面では戻るボタンを画面下に配置 */
.confirm .back-button {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 1rem auto 0;
    display: flex;
}

@media (max-width: 1024px) {
    .confirm {
        flex-direction: column;
    }
    .confirm-left,
    .confirm-right {
        max-width: 100%;
    }
}

/* 登録・編集画面では戻るボタンをフォーム下に配置 */
.register .back-button {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 1rem auto 0;
    display: flex;
}

/* ビューアページ */
.viewer-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    position: relative;
}
.viewer-page.image-mode {
    overflow: hidden;
}
.viewer-page .viewer-frame {
    flex: 1;
    width: 100%;
}
.viewer-page.missing {
    justify-content: center;
    align-items: center;
    /* padding: 2rem; */
    text-align: center;
}
.viewer-page.non-pdf {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.viewer-missing[hidden] {
    display: none !important;
}

.viewer-missing {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 420px;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--glass-bg-strong);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
    color: var(--color-charcoal-gray);
}
.viewer-page.missing .viewer-missing {
    /* ログイン画面の白いボックスと同等の背景表現 */
    background: var(--glass-bg-strong);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-soft);
}
@supports (backdrop-filter: blur(1px)) {
    .viewer-page.missing .viewer-missing {
        /* ログイン画面と同じガラス調のブラー表現 */
        backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(150%);
        background: linear-gradient(140deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.14));
    }
}
.viewer-missing-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.viewer-missing-logo {
    width: 250px;
    height: auto;
}
.viewer-missing-message {
    background: #ffffff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: var(--glass-shadow-soft);
}
.viewer-non-pdf-title {
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--color-cardinal-red);
}
.viewer-non-pdf-label {
    color: var(--color-charcoal-gray);
}
.viewer-non-pdf .download-btn {
    align-self: center;
}
.viewer-missing-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
    color: var(--color-cardinal-red);
}
.viewer-missing-text {
    margin: 0;
    line-height: 1.6;
}
.viewer-missing-contact[hidden] {
    display: none !important;
}
.viewer-missing-contact {
    text-align: left;
    border-top: 1px solid var(--color-light-gray);
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.viewer-missing-contact-title {
    font-weight: bold;
    margin: 0;
    color: var(--color-charcoal-gray);
}
.viewer-missing-detail-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.viewer-missing-detail-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.5rem;
    align-items: start;
}
.viewer-missing-detail-row dt {
    font-weight: bold;
    color: var(--color-cardinal-red);
}
.viewer-missing-detail-row dd {
    margin: 0;
    word-break: break-word;
}
.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}
.download-btn {
    /* ダウンロードボタンは視認性を高めるため緑色で表示 */
    background-color: #28a745;
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    text-decoration: none;
    margin-top: 0.5rem;
}
.download-btn:hover {
    opacity: 0.8;
}

/* 非 PDF 時はヘッダーを画面中央に表示 */
.viewer-page.non-pdf .doc-header {
    display: none;
}

/* 定型文案内とボタンをまとめるコンテナ（画面下部に固定） */
.response-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 16px;
}

/* PDFビューアの高さは固定フッター分を差し引く */
#pdf-viewer-custom.pdf-viewer {
    width: 100%;
    height: 100vh;
}

/* PDFホストは親コンテナの高さに合わせる */
#pdf-viewer-host.pdf-host {
    width: 100%;
   height: calc(100vh - var(--response-bar-height, 120px));
}

/* 定型文の案内文 */
.response-note {
    text-align: center;
    margin: 0;
    color: var(--color-select-green);
}

/* レスポンスボタンはページ下部に配置 */
.response-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.response-buttons .chat-template-btn {
    background-image: linear-gradient(to bottom right,
        var(--color-light-cardinal-red), var(--color-dark-cardinal-red));
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}
.response-buttons .chat-template-btn:disabled {
    background-image: none;
    background-color: var(--color-medium-gray);
    color: var(--color-white);
    cursor: not-allowed;
    opacity: 0.7;
}
.response-buttons .chat-template-btn:hover {
    opacity: 0.8;
}
.response-buttons .chat-template-btn.is-custom-color {
    background-image: linear-gradient(to bottom right,
        rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.18));
    background-color: var(--chat-template-color);
}
.response-buttons .chat-template-btn.is-custom-color:disabled {
    background-image: none;
    background-color: var(--color-medium-gray);
    filter: none;
}
.response-buttons .chat-template-btn.is-custom-color:hover {
    filter: brightness(0.92);
}

/* 自由回答欄 */
.response-free {
    width: min(540px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.response-free__body {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}
.response-free__body[hidden] {
    display: none !important;
}
.response-free-toggle {
    background-color: var(--color-white);
    color: var(--color-dark-cardinal-red);
    border: 1px solid var(--color-dark-cardinal-red);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.response-free-toggle.is-open {
    background-color: var(--color-dark-cardinal-red);
    color: var(--color-white);
}
.response-free-input {
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    background-color: var(--color-white);
    color: var(--color-charcoal);
    font-size: 1.05rem;
    resize: none;
}
.response-free-input::placeholder {
    font-size: 0.9rem;
}
.response-free-input.is-readonly {
    pointer-events: none;
    background-color: var(--color-light-gray);
    color: var(--color-medium-gray);
}
.response-free-send {
    background-color: var(--color-dark-cardinal-red);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
}
.response-free-send:disabled {
    background-color: var(--color-medium-gray);
    cursor: not-allowed;
    opacity: 0.7;
}
.response-free-send:hover:not(:disabled) {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .response-free-input {
        font-size: 1.15rem;
    }
}

/* 回答をやり直すボタン */
.response-reset-btn {
    background-color: var(--color-white);
    color: var(--color-dark-cardinal-red);
    border: 1px solid var(--color-dark-cardinal-red);
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.response-reset-btn:hover {
    background-color: var(--color-dark-cardinal-red);
    color: var(--color-white);
}

/* 画面の縦幅が小さいデバイス向けのトップ画面圧縮 */
@media (max-height: 860px) {
    body.home-page .dashboard {
        gap: 1.5rem;
        padding: var(--header-height) 5px var(--footer-height);
    }
    body.home-page .panel {
        height: 150px;
    }
    body.home-page .panel-compact {
        height: 80px;
    }
}

/* 画面高さが820px以下の資料登録ページの調整 */
@media (max-height: 820px) {
    .register-form {
        gap: 0.5rem;
    }
    .register-form input,
    .register-form select,
    .register-form textarea {
        padding: 0.5rem;
    }
    .register-submit-btn {
        padding: 0.4rem 0.8rem;
    }
}

/* 画面高さが820px以下の送付履歴ページの調整 */
@media (max-height: 820px) {
    .history {
        padding: calc(var(--header-height) + 0.5rem) 0.5rem calc(var(--footer-height) + 1rem);
    }
    .history-table th,
    .history-table td {
        padding: 0.25rem;
        font-size: 0.8rem;
    }
    .pagination button {
        padding: 0.4rem 0.8rem;
    }
}

@media (max-height: 720px) {
    body.home-page .stats-dashboard,
    body.home-page .followup-dashboard {
        padding: 0.45rem;
    }
    body.home-page .stat-card {
        padding: 0.55rem;
    }
    body.home-page .stat-card .value {
        font-size: 1.3rem;
    }
    body.home-page .followup-section {
        min-height: 190px;
        max-height: 220px;
    }
    body.home-page .menu-row {
        gap: 1rem;
    }
    body.home-page .panel {
        height: 132px;
    }
    body.home-page .panel-compact {
        height: 80px;
    }
}

/* 資料マッチング提案パネル */
.document-match-panel {
    margin: 12px 16px 0;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(51, 51, 51, 0.15);
    padding: 10px 12px 12px;
    border: 1px solid rgba(177, 34, 26, 0.2);
}

/* 資料ライブラリのモーダル内は右上に固定配置 */
.viewer-modal .document-match-panel {
    position: absolute;
    top: 250px;
    right: 40px;
    margin: 0;
    width: auto;
    max-width: min(340px, 42vw);
    max-height: calc(100vh - 220px);
    overflow: auto;
    z-index: 3000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(4px);
    transition: width 0.2s ease, padding 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(177, 34, 26, 0.45) rgba(0, 0, 0, 0.05);
}

/* テキストオーバーレイトリガー表示時は上部位置を調整 */
/* テキストオーバーレイトリガーが非表示の時は上部位置を調整 */
.viewer-modal #text-overlay-trigger-library.hidden ~ .document-match-panel {
    top: 160px;
}

.viewer-modal .document-match-panel::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.viewer-modal .document-match-panel::-webkit-scrollbar-thumb {
    background: rgba(177, 34, 26, 0.45);
    border-radius: 999px;
}

.viewer-modal .document-match-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
}

/* テキストのみ資料は安全域を考慮 */
.viewer-modal.viewer-modal--text-only .document-match-panel {
    top: calc(env(safe-area-inset-top, 0px) + 90px);
    right: 16px;
}

.document-match-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--color-cardinal-red);
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.document-match-panel__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
}

.document-match-panel__action-button {
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--color-cardinal-red);
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 4px rgba(177, 34, 26, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.45),
        inset 0 -2px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.document-match-panel__action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(177, 34, 26, 0.28),
        inset 0 1px 3px rgba(255, 255, 255, 0.5),
        inset 0 -3px 4px rgba(0, 0, 0, 0.24);
}

.document-match-panel__action-button:active {
    transform: translateY(1px);
    box-shadow: 0 3px 6px rgba(177, 34, 26, 0.22),
        inset 0 1px 2px rgba(255, 255, 255, 0.35),
        inset 0 -2px 3px rgba(0, 0, 0, 0.28);
}

.document-match-panel__action-button--ghost {
    background: rgba(177, 34, 26, 0.1);
    color: var(--color-cardinal-red);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.55),
        inset 0 -2px 3px rgba(177, 34, 26, 0.12);
}

.document-match-panel__action-button:disabled {
    background: var(--color-disabled-gray);
    color: var(--color-medium-gray);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.document-match-panel__toggle {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(177, 34, 26, 0.12);
    color: var(--color-cardinal-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.document-match-panel.is-collapsed .document-match-panel__toggle i {
    transform: rotate(270deg);
}

.document-match-panel.is-collapsed .document-match-panel__body {
    display: none;
}

.document-match-panel.is-collapsed {
    width: 28px;
    padding: 10px;
    overflow: hidden;
}

.document-match-panel.is-collapsed .document-match-panel__header {
    margin-bottom: 0;
    justify-content: center;
    gap: 0;
}

.document-match-panel.is-collapsed .document-match-panel__header > .fa-link,
.document-match-panel.is-collapsed .document-match-panel__header span {
    display: none;
}

.document-match-panel.is-collapsed .document-match-panel__actions {
    display: none;
}


.document-match-panel__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.document-match-progress {
    position: relative;
    margin-top: 8px;
    height: 6px;
    width: 100%;
    background: rgba(177, 34, 26, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.document-match-progress__bar {
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, rgba(177, 34, 26, 0.2), rgba(177, 34, 26, 0.85), rgba(177, 34, 26, 0.2));
    border-radius: 999px;
    animation: matchProgressSlide 1.2s ease-in-out infinite;
}

@keyframes matchProgressSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(250%);
    }
}

.document-match-item {
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 資料要約のホバーモーダル */
.document-summary-modal {
    position: fixed;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: var(--summary-max-height, 320px);
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(177, 34, 26, 0.18);
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    z-index: 3500;
    display: none;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.document-summary-modal.has-actions {
    pointer-events: auto;
}

.document-summary-modal.is-visible {
    display: block;
}

.document-summary-modal__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-cardinal-red);
    margin-bottom: 6px;
}

.document-summary-modal__body {
    font-size: 0.78rem;
    color: var(--color-charcoal-gray);
    line-height: 1.4;
    max-height: var(--summary-body-max-height, 130px);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}

.document-summary-modal__more {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-cardinal-red);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.document-summary-modal__more.hidden {
    display: none;
}

.document-summary-modal.is-expanded {
    max-height: min(80vh, 520px);
    pointer-events: auto;
}

.document-summary-modal.is-expanded .document-summary-modal__body {
    max-height: none;
    overflow: auto;
    display: block;
}

/* マッチング資料用モーダル */
.match-viewer-modal {
    position: absolute;
    inset: 16px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    z-index: 4000;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.match-viewer-modal.open {
    display: block;
}

.match-modal-close {
    position: fixed;
    top: calc(16px + 10px);
    right: calc(16px + 12px);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 4100;
}

.match-viewer-modal .viewer-image-zoom-controls {
    position: sticky;
    top: 12px;
    left: 12px;
    z-index: 4100;
    display: inline-flex;
    width: fit-content;
}

.match-viewer-modal .viewer-image-zoom-controls.hidden {
    display: none;
}

.match-viewer-modal .viewer-frame,
.match-viewer-modal .pdf-viewer,
.match-viewer-modal .image-viewer-wrapper {
    width: 100%;
    height: 100%;
}

.match-viewer-modal .image-viewer-wrapper {
    padding: 72px 1rem 1rem;
    overflow: visible;
    width: max-content;
    min-width: 100%;
    height: max-content;
    display: inline-block;
}

.match-viewer-modal .image-viewer-wrapper.hidden {
    display: none;
}

.viewer-modal.viewer-modal--split .match-viewer-modal .image-viewer-wrapper {
    width: 100%;
    height: 100%;
}

.viewer-modal:not(.viewer-modal--split) .match-score-indicator {
    display: none;
}

.match-score-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 16px;
    background: rgb(134 76 227 / 86%);
    border: 1px solid rgb(122 68 214 / 92%);
    border-radius: 999px;
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 4050;
    pointer-events: none;
}

.match-score-indicator__value {
    font-size: 1.2rem;
    color: #ffe08a;
}

.match-score-indicator__unit {
    margin-left: 0.15rem;
}

.match-score-indicator.hidden {
    display: none;
}

.document-match-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.document-match-item__title {
    font-weight: 700;
    color: var(--color-charcoal-gray);
    margin-bottom: 4px;
}

.document-match-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-dark-gray);
    gap: 8px;
}

.document-match-item__score {
    background: rgba(177, 34, 26, 0.08);
    color: var(--color-cardinal-red);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.document-match-item__reasons {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-dark-gray);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.document-match-item__reason {
    background: var(--color-light-gray);
    padding: 2px 6px;
    border-radius: 10px;
}

.document-match-empty {
    font-size: 0.85rem;
    color: var(--color-dark-gray);
    text-align: center;
    padding: 8px 0;
}