, which is guaranteed to receive
the scope attribute. Shared by both Compose and Settings (identical card
look); .webmail-address-book is a plain , not an EditForm, so its
own max-width rule above was never affected by this bug. */
.webmail-form-card[b-fki3kdzics] {
/* No max-width — user asked for this to match 受信一覧
(.webmail-list-view), which has never had a width cap and just fills
.webmail-main's full width (confirmed 2026-08-08). */
padding: 1rem;
border: 1px solid var(--border, #E5DDD4);
border-radius: 12px;
background-color: var(--white, #fff);
}
/* 宛先/CC/BCC: label and its field share one row instead of stacking, with the
label pinned to a fixed width so the three rows' fields all line up. */
.webmail-compose-row[b-fki3kdzics] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.webmail-compose-row > .form-label[b-fki3kdzics] {
flex: 0 0 3rem;
margin-bottom: 0;
white-space: nowrap;
}
/* 宛先/CC/BCCラベルをクリックするとアドレス帳ポップアップが開く（2026-08-31、
以前の「アドレス帳から選択」ボタン+インライン表示パネルを置き換え）。
見た目は.form-labelのまま、ボタンとしての既定装飾だけリセットする。 */
.webmail-recipient-label-btn[b-fki3kdzics] {
border: none;
background: none;
padding: 0;
text-align: left;
cursor: pointer;
border-radius: 4px;
}
.webmail-recipient-label-btn:hover[b-fki3kdzics] {
color: var(--primary, #0d6efd);
text-decoration: underline;
}
/* Styled to look like a single Bootstrap .form-control, but is actually a flex
container of chips + a borderless trailing text input — see
.webmail-recipient-input below. */
.webmail-recipient-field[b-fki3kdzics] {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
min-height: calc(1.5em + 0.75rem + 2px);
padding: 0.25rem 0.5rem;
border: 1px solid #ced4da;
border-radius: 0.375rem;
background-color: #fff;
}
.webmail-recipient-field:focus-within[b-fki3kdzics] {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.webmail-recipient-chip[b-fki3kdzics] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.55rem;
border-radius: 999px;
background-color: #e9ecef;
font-size: 0.85rem;
white-space: nowrap;
}
.webmail-recipient-chip-remove[b-fki3kdzics] {
border: none;
background: none;
padding: 0;
line-height: 1;
color: #6c757d;
cursor: pointer;
font-size: 0.9rem;
}
.webmail-recipient-chip-remove:hover[b-fki3kdzics] {
color: #dc3545;
}
.webmail-recipient-input[b-fki3kdzics] {
flex: 1 1 auto;
min-width: 8rem;
border: none;
outline: none;
padding: 0.15rem 0.2rem;
font-size: 1rem;
background: transparent;
}
/* 宛先/CC/BCCクリックで開くポップアップ。.webmail-attachment-previewと同じ
理由でトップレベルに置かれる（Webmail.razor側のコメント参照）ので、この
スタイルは.webmail-mainの入れ子フレックス構造から独立している。 */
.webmail-contact-picker-overlay[b-fki3kdzics] {
position: fixed;
inset: 0;
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.35);
}
.webmail-contact-picker-dialog[b-fki3kdzics] {
display: flex;
flex-direction: column;
width: 100%;
max-width: 26rem;
max-height: 80vh;
border-radius: 12px;
background-color: #fff;
overflow: hidden;
}
.webmail-contact-picker-dialog-header[b-fki3kdzics] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.75rem 1rem;
border-bottom: 1px solid #dee2e6;
font-weight: 600;
}
.webmail-contact-picker-dialog-body[b-fki3kdzics] {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.5rem 1rem 1rem;
}
.webmail-contact-picker-item[b-fki3kdzics] {
display: flex;
align-items: flex-start;
width: 100%;
padding: 0.5rem;
border: none;
border-radius: 8px;
background: none;
text-align: left;
cursor: pointer;
}
.webmail-contact-picker-item:hover[b-fki3kdzics] {
background-color: #f4f7fc;
}
/* The action bar (戻る/返信/転送/削除) stays visible while a long mail body
scrolls, instead of scrolling away with it — mirrors the
.webmail-list-sticky/.webmail-list-scroll split above. Requires
.webmail-detail to fill .webmail-main's own height as a flex column, since
.webmail-detail-scroll's flex:1/min-height:0 only bounds it correctly if
its immediate parent has a definite height. */
.webmail-detail[b-fki3kdzics] {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 1rem;
border: 1px solid var(--border, #E5DDD4);
border-radius: 12px;
background-color: var(--white, #fff);
}
.webmail-detail-actions[b-fki3kdzics] {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 0.9rem;
position: relative;
}
.webmail-toolbar-divider[b-fki3kdzics] {
width: 1px;
height: 24px;
background: var(--border, #E5DDD4);
margin: 0 2px;
flex-shrink: 0;
}
/* 戻る／削除／・・・: icon-only bordered buttons. */
.webmail-toolbar-back[b-fki3kdzics],
.webmail-toolbar-danger[b-fki3kdzics],
.webmail-toolbar-more[b-fki3kdzics] {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1.5px solid var(--border, #E5DDD4);
background: var(--white, #fff);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--mid, #4B5563);
transition: background .15s, border-color .15s, color .15s;
flex-shrink: 0;
}
.webmail-toolbar-back:hover[b-fki3kdzics],
.webmail-toolbar-more:hover[b-fki3kdzics] {
background: var(--blue-l, #EBF1FA);
border-color: var(--blue, #2B5797);
color: var(--blue, #2B5797);
}
.webmail-toolbar-danger[b-fki3kdzics] {
color: var(--terra, #E8543A);
}
.webmail-toolbar-danger:hover[b-fki3kdzics] {
background: var(--terra-l, #FEF0EC);
border-color: var(--terra, #E8543A);
}
.webmail-toolbar-back:disabled[b-fki3kdzics],
.webmail-toolbar-danger:disabled[b-fki3kdzics],
.webmail-toolbar-more:disabled[b-fki3kdzics] {
opacity: .5;
cursor: not-allowed;
}
/* 返信（編集）: flat Tomova Blue, no gloss. */
.webmail-toolbar-primary[b-fki3kdzics] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--blue, #2B5797);
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
font-family: inherit;
white-space: nowrap;
}
.webmail-toolbar-primary:hover[b-fki3kdzics] {
background: var(--blue-d, #1A3A6B);
}
.webmail-toolbar-primary:disabled[b-fki3kdzics] {
opacity: .6;
cursor: not-allowed;
}
/* 転送／移動: outline style. */
.webmail-toolbar-outline[b-fki3kdzics] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--white, #fff);
color: var(--mid, #4B5563);
border: 1.5px solid var(--border, #E5DDD4);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
font-family: inherit;
white-space: nowrap;
}
.webmail-toolbar-outline:hover[b-fki3kdzics] {
border-color: var(--blue, #2B5797);
color: var(--blue, #2B5797);
background: var(--blue-l, #EBF1FA);
}
.webmail-toolbar-outline:disabled[b-fki3kdzics] {
opacity: .6;
cursor: not-allowed;
}
/* 選択項目の削除／添付削除など: outline shape, red text (labeled sibling of
.webmail-toolbar-danger, which is icon-only). */
.webmail-toolbar-danger-outline[b-fki3kdzics] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--white, #fff);
color: var(--terra, #E8543A);
border: 1.5px solid var(--border, #E5DDD4);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
font-family: inherit;
white-space: nowrap;
}
.webmail-toolbar-danger-outline:hover[b-fki3kdzics] {
border-color: var(--terra, #E8543A);
background: var(--terra-l, #FEF0EC);
}
.webmail-toolbar-danger-outline:disabled[b-fki3kdzics] {
opacity: .6;
cursor: not-allowed;
}
.webmail-toolbar-caret[b-fki3kdzics] {
font-size: 10px;
}
.webmail-toolbar-dropdown[b-fki3kdzics] {
position: relative;
display: inline-flex;
}
.webmail-toolbar-dropdown-menu[b-fki3kdzics] {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: var(--white, #fff);
border: 1px solid var(--border, #E5DDD4);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
min-width: 180px;
max-height: 18rem;
overflow-y: auto;
z-index: 100;
}
.webmail-toolbar-dropdown-menu-right[b-fki3kdzics] {
left: auto;
right: 0;
}
.webmail-toolbar-dropdown-item[b-fki3kdzics] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 13px;
color: var(--dark, #16213E);
cursor: pointer;
white-space: nowrap;
transition: background .15s;
}
.webmail-toolbar-dropdown-item:hover[b-fki3kdzics] {
background: var(--light, #F7F4F0);
}
.webmail-toolbar-overlay[b-fki3kdzics] {
position: fixed;
inset: 0;
z-index: 99;
}
.webmail-detail-scroll[b-fki3kdzics] {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.webmail-body[b-fki3kdzics] {
white-space: pre-wrap;
word-break: break-word;
}
.webmail-body-box[b-fki3kdzics] {
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 6px;
background-color: #fff;
}
.webmail-body-frame[b-fki3kdzics] {
width: 100%;
height: 32rem;
border: 1px solid #dee2e6;
border-radius: 4px;
background-color: #fff;
/* Belt-and-suspenders for webmail-body.js's mobile shrink-to-fit: old
table-layout HTML mail can leave a few px of sub-pixel slack even after
the content is scaled and overflow-x is locked down inside the frame's
own document, and some browsers still let a horizontal drag pan a
nested browsing context regardless of its internal overflow CSS.
touch-action stops that at the gesture level instead, independent of
whatever overflow state the framed document ends up in. */
touch-action: pan-y;
}
/* Full-screen overlay (not a plain new-tab navigation) so there's always our
own visible close button — as an installed PWA there's no browser tab bar
or back gesture to fall back on. */
.webmail-attachment-preview[b-fki3kdzics] {
position: fixed;
inset: 0;
z-index: 1050;
display: flex;
flex-direction: column;
background-color: #fff;
}
.webmail-attachment-preview-header[b-fki3kdzics] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dee2e6;
background-color: #f8f9fa;
}
.webmail-attachment-preview-name[b-fki3kdzics] {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.webmail-attachment-preview-frame[b-fki3kdzics] {
flex: 1;
min-height: 0;
width: 100%;
border: none;
}
.webmail-detail-header[b-fki3kdzics] {
margin-bottom: 1rem;
padding: 0.9rem 1.1rem;
background-color: #f4f7fc;
border: 1px solid #dee2e6;
border-radius: 6px;
}
.webmail-detail-title[b-fki3kdzics] {
margin-bottom: 0.6rem;
word-break: break-word;
}
.webmail-detail-meta-row[b-fki3kdzics] {
display: flex;
gap: 0.5rem;
padding: 0.15rem 0;
border-top: 1px solid #e6eaf0;
}
.webmail-detail-meta-row:first-child[b-fki3kdzics] {
border-top: none;
}
.webmail-detail-meta-label[b-fki3kdzics] {
flex: 0 0 6rem;
color: #6c757d;
font-size: 0.85rem;
}
.webmail-detail-meta-label i[b-fki3kdzics] {
margin-right: 0.25rem;
}
.webmail-detail-meta-value[b-fki3kdzics] {
flex: 1;
min-width: 0;
word-break: break-word;
}
@media print {
.webmail-detail-header[b-fki3kdzics] {
background-color: #fff;
}
}
/* Printing a message: only .webmail-detail-scroll's content (header + body)
should end up on paper — everything else here (folder sidebar, action
buttons) is chrome. The app shell's own chrome (top bar, bottom nav) is
hidden separately in MainLayout.razor.css, since it's outside this
component's scoped-CSS reach. */
@media print {
.webmail-sidebar[b-fki3kdzics],
.webmail-detail-actions[b-fki3kdzics],
.mail-topbar[b-fki3kdzics],
.fab[b-fki3kdzics] {
display: none !important;
}
.webmail-layout[b-fki3kdzics] {
border: none;
display: block;
}
.webmail-main[b-fki3kdzics] {
overflow: visible;
padding: 0;
}
.webmail-detail[b-fki3kdzics] {
max-width: none;
/* The visible-card border/background/padding moved here from
.webmail-main (2026-08-08) — strip it for print, same as
.webmail-main was already zeroed above, so the printed page
isn't boxed in. */
border: none;
background: none;
padding: 0;
}
.webmail-detail-scroll[b-fki3kdzics] {
overflow: visible;
}
.webmail-body-frame[b-fki3kdzics] {
border: none;
/* Height is set inline (in px) by webmail-print.js right before
window.print(), sized to the iframe's actual content — this just
makes sure nothing here clips it back down. */
overflow: visible;
}
}
/* Card-internal-scroll for Compose's