/*
    共有メールボックスの全画面共通スタイル（MailboxModule.GlobalStyleUrls が読み込む）。

    **画面の中に書いたタグの規則もここに置く**＝.razor.css はシェルが束を読んでいないので当たらない
    （docs/claude/pitfalls.md の「.razor.css（CSS isolation）を置いても規則は当たらない」）。

    **DxTreeList に専用のクラスは無い**（2026-09-12 実測）＝テーマの CSS に dxbl-treelist-* は
    1 つも無く、木はグリッドの dxbl-grid / dxbl-grid-table をそのまま使う。
    dxbl-treelist-table と書いた最初の版は**どの要素にも当たらず、何も起きなかった**
    （選択子が外れただけなので、例外もログも出ない）。
*/

/* 個人のメールのグループと「移動」のアイコン（シェルに無い絵なのでモジュールに置く。NOTES-34） */
.alt-ico-mail { background-image: url('icons/mail-01.png'); }
.alt-ico-move { background-image: url('icons/move-01.png'); }
/* ごみ箱のフォルダ（削除の絵と分ける＝2026-10-09 洋二さんの指示）。 */
.alt-ico-trash-01 { background-image: url('icons/trash-01.png'); }
/* 個人のメールの新規作成・返信・全員に返信・転送（Share/icons から選んだ絵。NOTES-34）。 */
.alt-ico-edit-05 { background-image: url('icons/edit-05.png'); }
.alt-ico-corner-up-left { background-image: url('icons/corner-up-left.png'); }
.alt-ico-reverse-left { background-image: url('icons/reverse-left.png'); }
.alt-ico-corner-up-right { background-image: url('icons/corner-up-right.png'); }
/* 個人のアドレス帳（メニュー）と、読む欄の「アドレス帳に追加」（Share/icons から選んだ絵。NOTES-35）。 */
.alt-ico-book-open-01 { background-image: url('icons/book-open-01.png'); }
.alt-ico-user-plus-01 { background-image: url('icons/user-plus-01.png'); }
/* 個人のメールの規則（メニュー。Share/icons から選んだ絵。NOTES-36）。 */
.alt-ico-filter-funnel-01 { background-image: url('icons/filter-funnel-01.png'); }
/* フォローアップのフラグ（付いた印は赤）と重要度（高＝赤い丸・低＝下向きの矢印）。Share/icons から選び、赤は色を付けて作った（NOTES-39）。 */
.alt-ico-flag-01 { background-image: url('icons/flag-01.png'); }
.alt-ico-flag-01-red { background-image: url('icons/flag-01-red.png'); }
.alt-ico-alert-circle-red { background-image: url('icons/alert-circle-red.png'); }
.alt-ico-arrow-down { background-image: url('icons/arrow-down.png'); }
/* 規則の条件 1 行（対象・含む文字・外す）。 */
/*
    受信ボックスの行の高さ。**SizeMode.Small の 1.5 倍**。
    件名と本文の頭を並べて読む一覧なので、詰まった行では拾い読みができない。

    値の出どころ（テーマの core.min.css を実測）:
      .dxbl-grid.dxbl-sm … font-size 0.75rem（12px）／line-height 1.333（＝16px）
                            --dxbl-grid-text-cell-padding-y 0.250125rem（≒4px）
      行の高さ ＝ 16 ＋ 4 × 2 ＝ 24px → その 1.5 倍は 36px
      余白 ＝（36 − 16）÷ 2 ＝ 10px ＝ 0.625rem

    **高さではなく余白の変数を書き換える**＝セルの padding は
    `padding: var(--dxbl-grid-text-cell-padding-y) …` で入るので、同じ td の上で変数を定義し直せば
    そのまま差し替わる。td へ height を直接書くと、中身の入れ物と二重に効いて行がずれる版がある。

    **tbody の行だけに当てる**＝見出しと絞り込みの行は元の高さのまま
    （変数は使う要素の側で解決されるので、ここで定義すれば本文の行にしか効かない）。
*/
.alt-mail-rows .dxbl-grid-table > tbody > tr > td {
    --dxbl-grid-text-cell-padding-y: 0.625rem;
}

/*
    スレッドを切り離すための受け皿（受信ボックスの下の帯）。

    **中身を持たないグリッド**で作っている＝DevExpress の行は**グリッドか木にしか落とせない**
    （落とし先は「データ領域」だけで、フィルター行もページャも受け取らない。素の div も同じ）。
    そこで列を 1 つだけ持つ空のグリッドを置き、見出しを隠して帯として見せている。

    **見出しは CSS で隠す**（alt-headless）。
*/
.alt-mail-dropzone {
    margin-top: 8px;
    border-style: dashed !important;
}

/*
    見出しを出さない一覧と木（受信ボックスの受け皿・個人のメールのフォルダの欄）。DxGrid にも DxTreeList にも見出しを消す引数は無い
    （実測・25.2 の doc）。見出しが見えず幅を変える列も無いので、付けた一覧は列幅の調整を Disabled にする（CULM004 の除外）。
*/
.alt-headless thead {
    display: none !important;
}

/* 帯として読める高さに留める（既定の空データ領域は縦に大きく空く）。 */
.alt-mail-dropzone .dxbl-grid-empty-data-area {
    --dxbl-grid-empty-data-area-padding-y: 1rem;
}

/*
    強調の色（洋二さんの指定で**薄い黄色**）。一覧のマウスの下の行と、
    やり取りの詳細で押した 1 通の両方が同じ色を使う。

    **シェルのトークンをそのまま借りる**＝薄い黄色とその暗いテーマ版は app.css と themes.css に
    --alt-warning-bg として既にあり、テーマの切り替えもあちらで済んでいる。
    ここで独自の 2 色を決めると、配色を見直したときにこのモジュールだけ古い黄色が残る
    （警告ではない用途へ借りる前例は app.css の横断検索のヒット強調）。
*/
:root {
    --alt-mail-highlight: var(--alt-warning-bg);
}

/*
    受信ボックスでマウスの下にある行。

    **CSS で背景を上書きするのではなく、部品の設定（HighlightRowOnHover）を立てて
    色の変数だけ差し替える**（2026-09-13 実測）＝テーマの規則は
    `.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr:hover` の形で、
    このクラスは HighlightRowOnHover を立てたときにだけ付く。
    設定を立てずに tr:hover へ直接背景を書くと、選択中の行や編集中の行に当たる
    テーマ側の規則（より詳細度が高い）と食い違い、行によって色が変わる。

    **クラスを 2 つ重ねる**＝テーマは --dxbl-grid-hover-bg を `.dxbl-grid` の側で定義しており
    （2026-09-13 にテーマの core.min.css を実測）、`.alt-mail-rows` だけでは詳細度が同じ（0,1,0）で
    読み込み順に勝敗が左右される。

    **CssClass は .dxbl-grid そのものに付く**＝app.css の .alt-grid の節に
    「グリッド直下の子要素は実機で確認済み」として dxbl-grid-top-panel などが並んでおり、
    CssClass を付けた要素がその親（外枠）であることが分かる。内側に素の .dxbl-grid は無い。
*/
.alt-mail-rows.dxbl-grid {
    --dxbl-grid-hover-bg: var(--alt-mail-highlight);
}

/*
    やり取りの詳細で、受信ボックスから押した 1 通。

    **クラスを 2 つ重ねる**（.alt-card.alt-mail-picked）＝.alt-card が
    `background: var(--alt-surface)` を持っており、クラス 1 つでは読み込み順に勝敗が左右される。

    **一括指定（background）ではなく background-color で書く**＝変えたいのは地の色だけで、
    ほかの層（画像・位置）は .alt-card の持ち主に任せる（背景の線画は 2026-10-02・TEST1-393 から枠には敷かない）。
*/
.alt-card.alt-mail-picked {
    background-color: var(--alt-mail-highlight);
}

/* ここから下はやり取りの詳細（MailboxThread）と、そこから開く起票の窓（MailboxIssueDialog）の規則（頭は alt-mail-thread-）。 */

/* メールの本文。改行をそのまま見せつつ、長い行は折り返す（pre のままだと横に溢れ、ページごと横に広がる）。 */
.alt-mail-thread-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    margin: 0;
}

/*
    1 通ずつの開閉（2026-09-21）。見出しの中の button が開閉を受け、右に引用と直接リンクのボタンが並ぶ。
    **button を伸ばす**（flex: 1）＝畳んだときの抜粋が残りの幅いっぱいまで使い、はみ出しは省略記号で切る。
    min-width: 0 が無いと、抜粋の長さで button が縮まらずページの幅を押し広げる。
    **中身は button の外へはみ出させない**（overflow: hidden）＝375px では差出人と日時だけで幅が足りず、
    日時が右の引用ボタンの上に重なった（実測）。縮む順は 抜粋 → 差出人（省略記号）で、日時は縮めない。
*/
.alt-mail-thread-toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: inherit;
    text-align: left;
}

.alt-mail-thread-toggle:hover {
    color: var(--alt-accent);
}

.alt-mail-thread-caret {
    flex: none;
    color: var(--alt-text-sub);
    font-size: 0.7rem;
}

.alt-mail-thread-from {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 畳んだ見出しの抜粋と日時。抜粋は改行を含むが、nowrap の中では空白として描かれる。
   抜粋は残りの幅だけを使う（flex-basis: 0）＝差出人より先に縮む。 */
.alt-mail-thread-snippet {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color: var(--alt-text-sub);
}

.alt-mail-thread-when {
    flex: none;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--alt-text-sub);
}

/* 畳んだ 1 通は見出しの下の線と余白を落とす＝本文が無いのに区切りだけが残ると、空の枠に見える。 */
.alt-mail-thread-message:not(.is-open) > .alt-card-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/*
    「… wrote:」から下の引用。開閉のボタンは本文の下、開いた引用は左に線を引いて本文と見分ける。
    **文字と HTML の切り替え・画像の表示のボタン（2026-09-28）も同じ見た目**＝見た目は共通のクラス
    （.alt-mail-thread-sublink）に 1 つだけ書き、引用のボタンは余白だけを足す。セレクタを並べて書くと、
    余白を足す規則が同じセレクタの 2 つ目になり、CI の重複の検査（tools/css-dup-selectors.py）で止まる。
*/
.alt-mail-thread-sublink {
    padding: 0;
    font-size: 0.85rem;
    color: var(--alt-accent);
}

.alt-mail-thread-quote-toggle {
    margin-top: 0.5rem;
}

.alt-mail-thread-quoted {
    margin-top: 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--alt-border);
    color: var(--alt-text-sub);
}

/* 送信前の確認（DxPopup の BodyCssClass）。差出人・宛先・件名を 2 列で並べ、本文は枠の中で縦に送る。 */
.alt-mail-preview .alt-mail-preview-head {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
    margin: 0 0 0.75rem;
}

.alt-mail-preview .alt-mail-preview-head dt {
    color: var(--alt-text-sub);
}

.alt-mail-preview .alt-mail-preview-head dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.alt-mail-preview .alt-mail-preview-body {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--alt-border);
    border-radius: 4px;
    background: var(--alt-bg-subtle);
}

/*
    起票済みの控えの一覧（第5段）。1 件ごとに「リンク／文字 ＋ 起票した人と日時」が並ぶ。
    起票の窓の結果の一覧は Core の CommandReplyView（app.css の「動詞の答え」）が描く。
*/
.alt-mail-thread-issue-list {
    margin: 0;
    padding-left: 1.2rem;
}

.alt-mail-thread-issue-list li + li {
    margin-top: .25rem;
}

/* 起票した人と日時（.meta）は、リンクとのあいだを空けて同じ行に続ける。 */
.alt-mail-thread-issue-list .meta {
    margin-left: .5em;
}

/* 返信の宛先の札はシェルの共通チップ（app.css の .alt-filter-chips / .alt-filter-chip）、
   TO・CC の小さな札は .alt-badge を使う。ここでは何も足さない。 */

/* 取引先から宛先を選ぶダイアログ。1 社 1 行で、右端に追加のボタンを置く。 */
.alt-mail-recipient-groups {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}

.alt-mail-recipient-groups li + li {
    border-top: 1px solid var(--alt-border);
}

.alt-mail-recipient-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.alt-mail-recipient-partner {
    font-weight: 600;
}

/* 候補に並ぶ担当者（種別つき）。名前どうしが繋がって見えないよう間を空ける。 */
.alt-mail-recipient-chip + .alt-mail-recipient-chip {
    margin-left: .75em;
}

/*
    HTML の本文（2026-09-28）。枠（iframe）の中身は MailHtmlFrame が組み、高さは mailbox.js が中身に合わせる。
    **枠の背景は白で固定する**＝メールは白地を前提に色を決めてくるので、暗い見た目でも本文の周りだけは明るいまま。
    高さの初期値は測るまでのあいだ潰れて見えないための仮の値。
*/
.alt-mail-html {
    display: block;
    width: 100%;
    height: 8rem;
    border: 1px solid var(--alt-border);
    border-radius: 4px;
    background: #fff;
    color-scheme: light;
}

/* 文字と HTML の切り替え・外の画像の案内。本文の上に 1 行で並べる。 */
.alt-mail-thread-html-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.alt-mail-thread-html-note {
    color: var(--alt-text-sub);
}

/* ── 状態と優先度（2026-09-28・TEST1-249。札と文字の色は app.css） ── */
/* 一覧の上の絞り込み（状態・優先度の複数選択）。 */
.alt-mail-filter { width: 280px; max-width: 100%; }
/* 設定ダイアログの規則 1 行＝上下・見る所・含む文字列・優先度・削除（右端は app.css の .alt-grid-commands-end）。狭い幅では折り返す。 */
.alt-mail-rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.alt-mail-rule-target { width: 170px; }
.alt-mail-rule-pattern { flex: 1 1 200px; min-width: 160px; }
.alt-mail-rule-priority { width: 90px; }

/* 迷惑メールの規則の一覧（2026-10-03）。ボタンで差出人が 1 件ずつ増えるので数百件になり得る＝入力欄ではなく文字で並べ、
   高さを抑えて中だけ送る（入力欄を数百並べると窓を開くたびに重い）。 */
.alt-mail-spam-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--alt-border);
    border-radius: 4px;
}
.alt-mail-spam-list li { display: flex; align-items: center; gap: 8px; padding: 2px 8px; }
.alt-mail-spam-list li + li { border-top: 1px solid var(--alt-border); }
.alt-mail-spam-target { flex: 0 0 150px; color: var(--alt-text-sub); }
.alt-mail-spam-pattern { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---- 個人のメール（/mail。2026-10-09・NOTES-34） ----
   左にフォルダ、右の上に一覧、右の下に読む面（DxSplitter）。**高さは画面に収める**＝100vh は表示倍率の zoom の中で伸びるので
   var(--alt-vz) で割る（§7 の落とし穴。販売管理の分析と同じ書き方）。 */
.alt-pmail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.alt-pmail { height: max(420px, calc(100vh / var(--alt-vz, 1) - 190px)); border: 1px solid var(--alt-border); border-radius: 6px; background: var(--alt-surface); }

.alt-pmail-folderpane { display: flex; flex-direction: column; height: 100%; }
.alt-pmail-folder-tools { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--alt-border); flex: 0 0 auto; }
/* 移動先のフォルダの窓の並び。フォルダが多い箱でも窓が画面からはみ出さない（vh は表示倍率で割る＝シェルの決まり）。 */
.alt-pmail-folders { display: flex; flex-direction: column; padding: 6px 0; overflow: auto; max-height: calc(60vh / var(--alt-vz, 1)); }
.alt-pmail-folder {
    display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; text-align: left;
    padding: 5px 10px 5px calc(10px + var(--alt-pmail-depth, 0) * 14px); font: inherit; color: inherit; cursor: pointer;
}
.alt-pmail-folder:hover { background: var(--alt-bg-subtle); }
.alt-pmail-folder.is-label, .alt-pmail-foldertree tr.is-label > td { cursor: default; color: var(--alt-text-muted); }
.alt-pmail-folder.is-label:hover { background: none; }
.alt-pmail-folder-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/*
    フォルダの欄の木（DxTreeList）。枠の残りの高さいっぱいに使う。開いているフォルダの色（alt-current-row）はシェルの形。
    フォルダを開くのは行の中のボタン（セルいっぱいに広げる）。開閉の三角は隠す（畳めない＝PersonalMail.razor の注記が正）。
    見出しだけの行（押せない）にはマウスの色を付けない。
    一覧の最小幅（DevExpress の既定は 240px）を外す＝外さないと、狭めた欄で名前と未読の札が右へはみ出す。
*/
.alt-pmail-foldernav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* 外枠は GridlinesVisible="None" でも消えない（実測）ので border で消す（欄の枠と二重になる）。 */
.alt-pmail-foldertree { flex: 1 1 auto; min-height: 0; border: 0; --dxbl-grid-min-width: 0; }
.alt-pmail-foldertree tr.alt-current-row { font-weight: 600; }
.alt-pmail-foldertree .dxbl-grid-tree-node-expand-button { visibility: hidden; }
/* 動かせないフォルダ（役割のある・見出しだけ）のつかみ（PersonalMail.razor の OnCustomizeFolderElement）。 */
.alt-pmail-foldertree .alt-pmail-nodrag > * { visibility: hidden; pointer-events: none; }
.alt-pmail-foldertree tr.is-label { --dxbl-grid-hover-bg: transparent; --dxbl-grid-hover-color: inherit; }
.alt-pmail-folder-cell {
    display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; width: 100%;
    border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left;
}
button.alt-pmail-folder-cell { cursor: pointer; }
/* フォルダの欄の上の「フラグ付き」（全フォルダを横断する仮のフォルダ＝NOTES-39）。開いている間は木の行と同じ色。 */
.alt-pmail-flagged {
    display: flex; align-items: center; gap: 6px; width: 100%; flex: 0 0 auto; padding: 5px 10px;
    border: 0; border-bottom: 1px solid var(--alt-border); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.alt-pmail-flagged:hover { background: var(--alt-bg-subtle); }
.alt-pmail-flagged[aria-current="true"] { background: var(--alt-accent-soft); font-weight: 600; }

/* 一覧は枠の高さの残りいっぱい（DxGrid は Height を持たない＝CSS で決める）。上に操作の段が載る。 */
.alt-pmail-listpane { display: flex; flex-direction: column; height: 100%; }
.alt-pmail-listpane > .grid-toolbar { flex: 0 0 auto; margin: 0; padding: 6px 8px; }
.alt-pmail-list { flex: 1 1 auto; min-height: 0; }
/* フラグの付いていない行の旗（押すと付く）。行に重ねたときだけ薄く見せる（NOTES-39）。 */
.alt-pmail-flag-off { opacity: 0; }
.alt-pmail-list .dxbl-grid-table > tbody > tr:hover .alt-pmail-flag-off { opacity: .45; }

.alt-pmail-read { height: 100%; overflow: auto; padding: 10px 14px; }
.alt-pmail-read-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.alt-pmail-read-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; flex: 0 0 auto; }
/* 書く窓の宛先の入力（宛先と CC を 1 段ずつ）。 */
.alt-pmail-compose-address { display: grid; grid-template-columns: max-content 1fr; gap: 6px 8px; align-items: center; margin: 6px 0; }
.alt-pmail-compose .alt-filter-chip.is-missing { opacity: .7; }
.alt-pmail-subject { font-size: 1.15rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.alt-pmail-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0 0 10px; font-size: .9em; }
.alt-pmail-meta dt { color: var(--alt-text-muted); font-weight: normal; }
.alt-pmail-meta dd { margin: 0; overflow-wrap: anywhere; }
/* 読む面の上の AI の要約（NOTES-40。PersonalMailSummary）。本文と分かるように枠と色を付ける。 */
.alt-pmail-summary { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--alt-border); border-radius: 6px; background: var(--alt-bg-subtle); }
.alt-pmail-summary-head { display: flex; align-items: center; gap: 6px; }
.alt-pmail-summary-title { font-weight: 600; flex: 0 0 auto; }
.alt-pmail-summary-close { margin-left: auto; }
.alt-pmail-summary-body { overflow-wrap: anywhere; }
.alt-pmail-summary-body h2 { font-size: .95rem; margin: 8px 0 2px; }
.alt-pmail-summary-body ul { margin: 0 0 4px; padding-left: 1.4em; }
/* 書く画面の「AI で下書き」の行（指示の欄＋ボタン）。 */
.alt-pmail-compose-ai { display: flex; gap: 6px; align-items: center; }
.alt-pmail-compose-ai-text { flex: 1 1 auto; min-width: 0; }
.alt-pmail-conversation { margin-top: 16px; border-top: 1px solid var(--alt-border); padding-top: 8px; }
.alt-pmail-conversation-title { font-size: .95rem; margin: 0 0 4px; }
.alt-pmail-sibling { display: flex; gap: 10px; width: 100%; padding: 3px 0; text-align: left; }
.alt-pmail-sibling-when { white-space: nowrap; }
.alt-pmail-sibling-from { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 個人のメールの容量（NOTES-138）。フォルダの一覧の下に小さく */
.alt-pmail-storage {
    padding: .5rem .25rem 0;
    font-size: .8rem;
    border-top: 1px solid var(--alt-border);
}