/*
    共有メールボックスの全画面共通スタイル（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-mod-mail）。 */
.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);
}

/*
    起票済みの控えの一覧（第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 の三角とその空きは消す。
    見出しだけの行（押せない）にはマウスの色を付けない。
    一覧の最小幅（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; }
/* DevExpress の三角と、三角の無い行の空き。DevExpress の規則より 1 段強いセレクタにする（CSS の読み込み順に頼らない）。同じ 20px は自前の開閉のボタンが占める。 */
.alt-pmail-foldertree .dxbl-grid-tree-node-expand-controls-cell .dxbl-grid-tree-node-expand-controls-container
    :is(.dxbl-grid-tree-node-expand-button, .dxbl-grid-tree-node-expand-button-placeholder) { display: none; }
/* 動かせないフォルダ（役割のある・見出しだけ）のつかみ（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; }
/* 行の中身のコンテナ＝幅を決めない flex で、浮いた字下げの横の残りの幅に収める（docs/claude/pitfalls.md「DxTreeList の木の列（先頭のデータ列）のテンプレートに、縮めない幅のボックスを置くと字下げが消える」）。 */
.alt-pmail-folder-slot { display: flex; align-items: center; }
.alt-pmail-folder-cell {
    display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
    border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left;
}
button.alt-pmail-folder-cell { cursor: pointer; }
/* 開閉のボタン（子の無い行は同じ幅の空き）。折りたたんだら山形を右へ向ける。 */
.alt-pmail-folder-toggle, .alt-pmail-thread-toggle {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    margin-inline-end: 2px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit;
}
button.alt-pmail-folder-toggle { cursor: pointer; }
button.alt-pmail-folder-toggle:hover { background: var(--alt-bg-subtle); }
.alt-pmail-folder-toggle[aria-expanded="false"] > .alt-ico, .alt-pmail-thread-toggle[data-expanded="false"] > .alt-ico { transform: rotate(-90deg); }
/* フォルダの欄の上の「フラグ付き」（全フォルダを横断する仮のフォルダ＝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; }
/* スレッドの表示（2026-10-29）。ほかのフォルダのメールの行は薄く（並べるだけで操作の対象にならない）、スレッドの行の通数は件名の後ろ
   （色は行のまま薄さだけ変える＝.meta の色だとフォーカスの行の青地で読めない）。
   状態の絞り込みと切り替えは操作の段の右端へ寄せる。 */
.alt-pmail-list tr.alt-pmail-elsewhere > td { color: var(--alt-text-sub); }
/* 行の背景を取引先の色に（2026-10-30。色は行の style の --alt-pmail-partner-color。濃さは販売管理の伝票の一覧（sales.css の .sales-partner-row）と同じ＝モジュールをまたいで CSS を当てにしないので写す） */
.alt-pmail-partner {
    --dxbl-grid-row-bg: color-mix(in srgb, var(--alt-pmail-partner-color) 30%, transparent);
    --dxbl-grid-hover-bg: color-mix(in srgb, var(--alt-pmail-partner-color) 45%, transparent);
}
.alt-pmail-threadcount { margin-inline-start: 6px; font-weight: normal; opacity: .75; }
.alt-pmail-listoptions { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-inline-start: auto; }
/* スレッドの開閉の印（形と向きはフォルダの欄の開閉と共有＝上の .alt-pmail-folder-toggle）と、スレッドの中のメールの字下げ。 */
span.alt-pmail-thread-toggle { cursor: pointer; }
.alt-pmail-threadchild { display: inline-block; width: 18px; }

.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);
}

/* ==== スマホの幅（640px 以下。2026-10-31・TEST1-1103） ====
   土台はシェルの app.css の「スマホの幅（640px 以下）の 1 面ずつと、段に組む一覧」（帯・スマホだけのボタン・分割の面を重ねる・一覧を段に組む）。
   ここに置くのはメールの画面ごとの決めごとだけ＝どの面を見せるか・一覧の段のどこに何を置くか・やり取りの詳細の見出し。

   - 個人のメール（/mail）は 3 つの面（フォルダの欄・一覧・読む面）を重ね、data-alt-narrow-pane の 1 面だけを見せる（PersonalMail.razor の NarrowPane の doc が正）。
   - 一覧（個人のメールと受信ボックス）の段の置き場所は、セルの名札（alt-pmail-c-*・alt-mail-c-*＝画面の NarrowCellClass）で決める。 */
@media (max-width: 640px) {
    /* 枠の高さ＝上部バー・タブ・見出し・ステータスバーを引いた残り。dvh はスマホのブラウザのアドレスバーの出入りに合わせて変わる（使えない版は上の vh）。 */
    .alt-pmail {
        height: max(360px, calc(100vh / var(--alt-vz, 1) - 220px));
        height: max(360px, calc(100dvh / var(--alt-vz, 1) - 220px));
    }

    /* 見せない面。一覧と読む面を包む右の面は、フォルダの欄を見せているあいだ丸ごと隠す（後に描かれるので、上に重なって押せなくなる）。 */
    .alt-pmail:not([data-alt-narrow-pane="folders"]) dxbl-splitter-pane:has(> .dxbl-splitter-pane-content > .alt-pmail-folderpane),
    .alt-pmail[data-alt-narrow-pane="folders"] > dxbl-splitter > dxbl-splitter-pane:not(:has(> .dxbl-splitter-pane-content > .alt-pmail-folderpane)),
    .alt-pmail:not([data-alt-narrow-pane="list"]) dxbl-splitter-pane:has(> .dxbl-splitter-pane-content > .alt-pmail-listpane),
    .alt-pmail:not([data-alt-narrow-pane="read"]) dxbl-splitter-pane:has(> .dxbl-splitter-pane-content > .alt-pmail-read) {
        visibility: hidden;
    }

    /* 広い画面でフォルダの欄を畳んだ人（PersonalMailPanes に覚える）も、スマホの幅ではフォルダの欄を開ける。
       畳んだ面は DevExpress が visibility: hidden にする（dxbl-splitter-pane-collapsed）ので、開いたときだけ見せ直す（実測＝白い面だけが出た）。 */
    .alt-pmail[data-alt-narrow-pane="folders"] dxbl-splitter-pane:has(> .dxbl-splitter-pane-content > .alt-pmail-folderpane) {
        visibility: visible !important;
    }

    /* 一覧の上の段＝1 行目にフォルダの名前・新規作成・表示の設定、2 行目にほかの操作を絵だけで（文字は読み上げ用に残す＝app.css の .visually-hidden と同じ形）。
       いちばん使う「新規作成」（この段で Primary はこれだけ）は文字も残す。2 行目へ混ぜると 375px で 3 行目にあふれた（実測）。
       1 行目の終わりは ::after の改行（幅 100% の空の項目）で切る＝フォルダの名前の幅で決めると、名前の長さで 2 行目の操作が 1 行目へ上がってくる。 */
    .alt-pmail-listpane > .grid-toolbar {
        gap: 4px;
    }

    .alt-pmail-listpane > .grid-toolbar::after {
        content: "";
        order: -1;
        flex-basis: 100%;
    }

    .alt-pmail-folderswitch {
        order: -2;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .alt-pmail-listpane > .grid-toolbar > .dxbl-btn-primary {
        order: -1;
    }

    .alt-pmail-folderswitch .dxbl-btn-caption {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .alt-pmail-optionstoggle {
        order: -1;
    }

    .alt-pmail-listpane > .grid-toolbar > .dxbl-btn:not(.alt-pmail-folderswitch, .dxbl-btn-primary):has(> .dxbl-btn-icon) > .dxbl-btn-caption {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* 開いているあいだの印。テーマのボタンの地（.dxbl-btn.dxbl-btn-secondary）と詳細度が並ばないよう .dxbl-btn を重ねる。 */
    .dxbl-btn.alt-pmail-optionstoggle[aria-expanded="true"] {
        background-color: var(--alt-accent-soft);
    }

    .alt-pmail-listoptions {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .alt-pmail-listoptions:not(.is-open) {
        display: none;
    }

    /* 読む面＝件名を幅いっぱいに、ボタンはその下へ。「一覧へ戻る」は読む面の上に貼り付ける（本文を送っても戻れる）。 */
    .alt-pmail-read > .alt-pmail-readbar {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: -10px -14px 8px;
        padding: 2px 8px;
        background: var(--alt-surface);
    }

    .alt-pmail-read-head {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .alt-pmail-read-actions {
        justify-content: flex-start;
    }

    /* 個人のメール＝[選択][スレッドの開閉][差出人 ｜ 日時] / [件名 ｜ 状態・添付・重要度・旗] / [期限 ｜ フォルダ]（フラグ付きの一覧だけ）。
       日時は .meta の色ではなく opacity で薄くする＝フォーカスの行（青地に白字）で読めなくならない（.alt-pmail-threadcount と同じ理由）。 */
    .alt-pmail-list .dxbl-grid-table > tbody > tr {
        grid-template-columns: auto auto minmax(0, 1fr) repeat(4, auto);
    }

    .alt-pmail-list td.alt-pmail-c-thread { grid-column: 2; grid-row: 1 / span 3; }
    .alt-pmail-list td.alt-pmail-c-from { grid-column: 3; grid-row: 1; --dxbl-grid-font-size: 0.875rem; }
    .alt-pmail-list td.alt-pmail-c-date { grid-column: 4 / -1; grid-row: 1; justify-self: end; --dxbl-grid-font-size: 0.75rem; opacity: 0.75; }
    .alt-pmail-list td.alt-pmail-c-subject { grid-column: 3; grid-row: 2; --dxbl-grid-font-size: 0.8125rem; }
    .alt-pmail-list td.alt-pmail-c-status { grid-column: 4; grid-row: 2; }
    .alt-pmail-list td.alt-pmail-c-attach { grid-column: 5; grid-row: 2; }
    .alt-pmail-list td.alt-pmail-c-importance { grid-column: 6; grid-row: 2; }
    .alt-pmail-list td.alt-pmail-c-flag { grid-column: 7; grid-row: 2; }
    .alt-pmail-list td.alt-pmail-c-due { grid-column: 3; grid-row: 3; --dxbl-grid-font-size: 0.75rem; }
    .alt-pmail-list td.alt-pmail-c-folder { grid-column: 4 / -1; grid-row: 3; justify-self: end; --dxbl-grid-font-size: 0.75rem; opacity: 0.75; }

    /* 受信ボックス＝[選択][件名（木の開閉と字下げ） ｜ 最終更新日時] / [差出人 ｜ 状態・優先度] / [本文の頭] */
    .alt-mail-rows .dxbl-grid-table > tbody > tr {
        grid-template-columns: auto minmax(0, 1fr) repeat(2, auto);
    }

    .alt-mail-rows td.alt-mail-c-subject { grid-column: 2; grid-row: 1; --dxbl-grid-font-size: 0.875rem; }
    .alt-mail-rows td.alt-mail-c-date { grid-column: 3 / -1; grid-row: 1; justify-self: end; --dxbl-grid-font-size: 0.75rem; opacity: 0.75; }
    .alt-mail-rows td.alt-mail-c-from { grid-column: 2; grid-row: 2; --dxbl-grid-font-size: 0.8125rem; }
    .alt-mail-rows td.alt-mail-c-status { grid-column: 3; grid-row: 2; }
    .alt-mail-rows td.alt-mail-c-priority { grid-column: 4; grid-row: 2; }
    .alt-mail-rows td.alt-mail-c-preview { grid-column: 2 / -1; grid-row: 3; --dxbl-grid-font-size: 0.75rem; opacity: 0.75; }

    /* やり取りの詳細＝畳んだ 1 通の見出しを 2 段に（1 段目に差出人、2 段目に日時と抜粋）。1 段だと 375px で差出人が 1 文字まで縮んだ（実測）。 */
    .alt-mail-thread-toggle {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .alt-mail-thread-from {
        flex: 1 1 calc(100% - 1.5rem);
    }

    .alt-mail-thread-when {
        order: 1;
        margin-inline-start: 1.2rem;
    }

    .alt-mail-thread-snippet {
        order: 2;
    }

    /* 状態と優先度＝見出しと欄を 1 組ずつの行に（並べたままだと「優先度」だけが行末に残り、欄が次の行へ割れる）。 */
    .grid-toolbar.alt-mail-thread-state {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
    }
}