/* Mail layout responds to its ERP content width; the ERP shell stays intact. */
.main-content.mail-main-content { padding:0; min-width:0; }
#mail-preview { color:var(--text); font:14px/1.55 Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif; background:#f5f7fb; min-height:100%; container-type:inline-size; container-name:mail-pane; }
#mail-preview * { box-sizing:border-box; }
#mail-preview button,#mail-preview input,#mail-preview select,#mail-preview textarea { font:inherit; }
#mail-preview button { cursor:pointer; border:1px solid var(--line); color:var(--text); background:white; padding:7px 12px; border-radius:7px; }
#mail-preview button:hover { background:var(--brand-light); border-color:#bed4f5; }
#mail-preview button:disabled { opacity:.5; cursor:not-allowed; }
#mail-preview :focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
#mail-preview input:not([type=checkbox]),#mail-preview select,#mail-preview textarea { min-width:0; width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:white; color:var(--text); }
#mail-preview input[type=checkbox] { accent-color:var(--brand); }
#mail-preview .mp-primary { background:var(--brand); color:white; border-color:var(--brand); }
#mail-preview .mp-primary:hover { background:var(--brand-dark); }
#mail-preview .mp-link { border:0; color:var(--brand); background:transparent; padding:3px 5px; }
.mp-top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 26px; background:white; border-bottom:1px solid var(--line); }
.mp-brand { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.mp-brand strong { font-size:22px; letter-spacing:2px; }.mp-brand small { display:block; font-size:9px; letter-spacing:1px; color:var(--muted); }.mp-logo { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--nav); color:white; font-weight:700; font-size:23px; }
.mp-badge { padding:3px 8px; border-radius:5px; background:#edf4ff; color:var(--brand); font-size:11px; }.mp-top-note,.mp-user { color:var(--muted); font-size:12px; }.mp-safety { background:#f5f9ff; color:#59718e; padding:9px 26px; font-size:12px; border-bottom:1px solid var(--line); }.mp-notice,.mp-error { margin:0; padding:9px 18px; background:#eff7ff; color:#285786; }.mp-error { background:#fff1ef; color:#b33b30; }
.mp-workspace { display:grid; grid-template-columns:196px 320px minmax(0,1fr); min-height:calc(100dvh - 190px); background:white; }.mp-nav { display:flex; flex-direction:column; gap:22px; padding:22px 14px; border-right:1px solid var(--line); }.mp-compose { width:100%; font-weight:600!important; padding:11px!important; }.mp-account { font-size:11px; color:var(--muted); }.mp-account select { margin-top:6px; }.mp-folders { display:grid; gap:5px; }#mail-preview .mp-folders button { display:flex; justify-content:space-between; text-align:left; border:0; padding:10px 11px; }.mp-folders small { color:var(--muted); }#mail-preview .mp-folders .active { background:var(--brand-light); color:var(--brand); font-weight:600; }.mp-nav-note { margin-top:auto; color:#607086; font-size:12px; padding:18px 8px; }.mp-nav-note small { display:block; margin-top:7px; color:var(--muted); }.mp-online { display:inline-block; height:6px; width:6px; border-radius:50%; background:var(--success); }
.mp-list { min-width:0; border-right:1px solid var(--line); }.mp-list>header { padding:19px 18px 12px; }.mp-list-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }.mp-list-title h1 { font-size:19px; margin:0; }.mp-list-title span { color:var(--muted); font-size:12px; }.mp-filters { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:12px; }.mp-state-control { padding:0 18px 12px; font-size:11px; color:var(--muted); }#mail-preview .mp-state-control select { width:auto; padding:2px 5px; font-size:11px; border:0; }.mp-rows { border-top:1px solid var(--line); }#mail-preview .mp-row { display:block; width:100%; text-align:left; padding:18px; border:0; border-bottom:1px solid var(--line); border-radius:0; border-left:3px solid transparent; }#mail-preview .mp-row.selected { background:#f0f6ff; border-left-color:var(--brand); }.mp-row-top { display:flex; gap:10px; justify-content:space-between; }.mp-row-top strong { font-size:13px; font-weight:500; }.mp-row-top time { color:var(--muted); font-size:11px; }.mp-row-subject { margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }.mp-row.unread .mp-row-subject,.mp-row.unread strong { font-weight:700; }.mp-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-right:6px; }.mp-row p { margin:5px 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:12px; }.mp-row-meta { display:flex; justify-content:space-between; color:#8290a5; font-size:10px; }
.mp-detail { min-width:0; }.mp-toolbar { min-height:62px; border-bottom:1px solid var(--line); padding:13px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px; }.mp-actions { display:flex; gap:6px; }.mp-reading { display:grid; grid-template-columns:minmax(0,1fr); }.mp-reading.with-customer { grid-template-columns:minmax(0,1fr) 230px; }.mp-letter { padding:28px 34px; min-width:0; }.mp-subject { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }.mp-subject h2 { margin:0 0 23px; font-size:21px; line-height:1.45; font-weight:600; overflow-wrap:anywhere; }#mail-preview .mp-star { border:0; font-size:24px; padding:0; color:#dfab38; }.mp-sender { display:flex; align-items:center; gap:10px; }.mp-avatar { display:grid; place-items:center; height:36px; width:36px; border-radius:50%; color:#547aa5; background:#e9f0f8; flex-shrink:0; }.mp-sender strong { font-size:13px; }.mp-sender small { display:block; color:var(--muted); font-size:11px; }.mp-sender time { margin-left:auto; font-size:11px; color:var(--muted); }.mp-address { margin:10px 0 23px 46px; color:#8290a1; font-size:11px; overflow-wrap:anywhere; }.mp-ai-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:#f7f9fd; padding:10px 12px; border:1px solid #e9eff9; border-radius:8px; font-size:12px; color:#466389; }.mp-ai-bar small { font-size:10px; color:var(--muted); }.mp-ai-bar label { margin-left:auto; font-size:10px; }#mail-preview .mp-ai-bar button { font-size:11px; padding:3px 9px; }.mp-ai-output { background:#f2f7ff; padding:15px; border-radius:8px; font-size:13px; }.mp-history { margin-top:24px; color:#7b899d; font-size:12px; }.mp-history summary { cursor:pointer; }.mp-history section { padding:14px; margin-top:10px; border-left:2px solid var(--line); }.mp-history time { display:block; font-size:11px; }.mp-body { font-size:14px; line-height:1.9; margin:26px 0; }.mp-letter pre,.mp-attachment-preview pre { font-family:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }.mp-attachments { padding:15px; background:#fafbfd; border:1px solid var(--line); border-radius:8px; }.mp-attachments strong { font-size:12px; }.mp-attachments>div { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:12px; }.mp-attachments span { margin-right:auto; }#mail-preview .mp-attachments button { padding:4px 9px; font-size:11px; }.mp-quick { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }.mp-quick>span { display:block; font-size:12px; color:var(--muted); margin-bottom:12px; }.mp-quick>div { display:flex; gap:8px; flex-wrap:wrap; }.mp-quick small { display:block; margin-top:9px; font-size:11px; color:var(--muted); }.mp-customer { padding:24px 18px; background:#fafbfd; border-left:1px solid var(--line); overflow-wrap:anywhere; }.mp-customer h3 { font-size:14px; margin:0 0 12px; }.mp-customer h3 span { color:var(--muted); font-size:10px; }.mp-customer-avatar { height:48px; width:48px; border-radius:12px; background:#e5eefb; color:var(--brand); display:grid; place-items:center; margin:22px 0 12px; }.mp-customer p,.mp-customer small,.mp-customer dt { color:var(--muted); font-size:12px; }.mp-customer dd { margin:5px 0 23px; font-size:12px; }.mp-customer select { margin:8px 0 12px; }.mp-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:70px 20px; text-align:center; color:#66768a; }.mp-empty small { font-size:12px; color:var(--muted); }#mail-preview .mp-back { display:none; }
.mp-editor { position:fixed; bottom:16px; right:22px; width:min(620px,calc(100vw - 32px)); max-height:86vh; display:flex; flex-direction:column; background:white; border:1px solid #dce5f1; border-radius:12px; box-shadow:0 12px 65px #10213d30; z-index:100; }.mp-editor>header { padding:14px 18px; display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid var(--line); }.mp-editor header span { color:var(--muted); font-size:11px; margin-left:8px; font-weight:400; }.mp-editor-content { padding:12px 18px; overflow:auto; }.mp-editor-content>label { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:10px; margin-bottom:8px; font-size:12px; color:var(--muted); }.mp-editor-content>label.mp-editor-body { display:block; }.mp-editor textarea { display:block; min-height:200px; resize:vertical; margin-top:5px; }.mp-editor footer { padding:12px 18px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); }.mp-editor footer small { font-size:10px; color:var(--muted); }.mp-editor-attachments { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11px; }.mp-editor-attachments small { color:var(--muted); }.mp-overlay { position:fixed; inset:0; background:#10213d60; z-index:110; display:grid; place-items:center; padding:18px; }.mp-attachment-preview { background:white; border-radius:12px; padding:22px; width:min(650px,100%); max-height:90vh; overflow:auto; }.mp-attachment-preview header { display:flex; justify-content:space-between; gap:12px; align-items:center; }.mp-attachment-preview h3 { font-size:16px; }
@container mail-pane (max-width:1150px) { .mp-workspace { grid-template-columns:165px 275px minmax(0,1fr); }.mp-letter { padding:22px; }.mp-reading.with-customer { grid-template-columns:minmax(0,1fr); }.mp-customer { border-top:1px solid var(--line); border-left:0; }.mp-sender { flex-wrap:wrap; }.mp-sender time { margin-left:46px; }.mp-top-note { display:none; } }
@container mail-pane (max-width:760px) { .mp-top { padding:12px 16px; }.mp-brand { gap:8px; }.mp-brand strong { font-size:19px; }.mp-user { display:none; }.mp-safety { padding:8px 16px; }.mp-workspace { display:block; }.mp-nav { padding:12px; gap:10px; border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; }.mp-account { display:flex; align-items:center; gap:8px; }.mp-account select { margin:0; }.mp-folders { grid-column:1/-1; display:flex; overflow-x:auto; gap:5px; padding-bottom:4px; }.mp-folders button { flex-shrink:0; gap:10px; font-size:12px!important; }.mp-nav-note { display:none; }.mp-list { border:0; }.mp-detail { display:none; }.mp-detail-open .mp-list { display:none; }.mp-detail-open .mp-detail { display:block; }#mail-preview .mp-back { display:inline-block; font-size:12px; }.mp-toolbar { padding:10px; flex-wrap:wrap; gap:8px; }.mp-actions button { padding:5px 9px!important; font-size:12px!important; }.mp-letter { padding:22px 17px; }.mp-subject h2 { font-size:19px; }.mp-ai-bar label { margin-left:0; }.mp-editor { bottom:8px; right:8px; width:calc(100vw - 16px); max-height:93dvh; }.mp-editor textarea { min-height:145px; }.mp-editor>header,.mp-editor-content,.mp-editor footer { padding:10px 12px; }.mp-editor footer button { font-size:12px!important; }.mp-sender time { margin-left:auto; } }
/* Authenticated mailbox only. Keep the earlier isolated preview untouched. */
.main-content.mail-main-content:has(.mr-app) { overflow:hidden; display:flex; min-height:0; padding:0; }
#mail-preview:has(.mr-app) { width:100%; height:100%; min-height:0; display:flex; }
#mail-preview .mr-app { width:100%; height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:#fff; font-size:13px; }
#mail-preview .mr-app button { padding:5px 10px; border-radius:4px; line-height:1.5; white-space:nowrap; }
#mail-preview .mr-app input,#mail-preview .mr-app select,#mail-preview .mr-app textarea { padding:6px 8px; border-radius:4px; font-size:13px; }
#mail-preview .mr-app h2 { margin:0; font-size:16px; }
#mail-preview .mr-app .mp-workspace { flex:1; min-height:0; height:auto; display:grid; grid-template-columns:188px 320px minmax(0,1fr); overflow:hidden; }
#mail-preview .mr-app .mp-nav { padding:12px; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:12px; background:#f8fafc; border-right:1px solid var(--line); }
#mail-preview .mr-app .mr-tabs { display:flex; margin:-12px -12px 0; border-bottom:1px solid var(--line); background:#fff; }
#mail-preview .mr-app .mr-tabs button { flex:1; border:0; border-radius:0; padding:12px 8px; border-bottom:2px solid transparent; }
#mail-preview .mr-app .mr-tabs button[aria-pressed=true] { color:var(--brand); border-bottom-color:var(--brand); font-weight:700; }
#mail-preview .mr-app .mp-compose { width:100%; padding:8px; margin:0; }
#mail-preview .mr-app .mp-folders { display:flex; flex-direction:column; gap:4px; margin:0; }
#mail-preview .mr-app .mp-folders button { text-align:left; padding:8px 10px; border:0; background:transparent; }
#mail-preview .mr-app .mp-folders button.active,#mail-preview .mr-app .mr-settings-link { color:var(--brand); background:#eaf2ff; font-weight:600; }
#mail-preview .mr-app .mr-label-heading { display:flex; align-items:center; justify-content:space-between; margin-top:12px; color:#64748b; }
#mail-preview .mr-app .mr-label-heading button { border:0; background:transparent; color:var(--brand); }
#mail-preview .mr-app .mr-nav-foot { margin-top:auto; display:flex; flex-direction:column; gap:4px; color:#718096; font-size:12px; }
#mail-preview .mr-app .mp-list { min-height:0; min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line); background:#fff; }
#mail-preview .mr-app .mp-list>header { padding:10px 12px 7px; flex-shrink:0; border-bottom:1px solid var(--line); }
#mail-preview .mr-app .mr-list-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
#mail-preview .mr-app .mr-search { display:flex; gap:5px; }
#mail-preview .mr-app .mr-search input { flex:1; width:0; }
#mail-preview .mr-app .mr-status { display:flex; align-items:center; justify-content:space-between; color:#718096; font-size:11px; margin-top:5px; }
#mail-preview .mr-app .mr-status button { border:0; padding:1px 3px; color:#64748b; font-size:11px; }
#mail-preview .mr-app .mr-inline-warning { color:#9a6700; margin:4px 0 0; font-size:12px; }
#mail-preview .mr-app .mp-rows { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
#mail-preview .mr-app .mp-row { display:block; width:100%; min-height:76px; height:76px; padding:10px 12px; border:0; border-bottom:1px solid #edf0f5; border-radius:0; text-align:left; overflow:hidden; background:#fff; }
#mail-preview .mr-app .mp-row:hover { background:#f5f9ff; }
#mail-preview .mr-app .mp-row.selected { background:#eaf2ff; box-shadow:inset 3px 0 var(--brand); }
#mail-preview .mr-app .mp-row-top { display:flex; align-items:center; gap:8px; }
#mail-preview .mr-app .mp-row-top strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; font-size:12px; }
#mail-preview .mr-app .mp-row-top time { flex:none; font-size:11px; color:#718096; }
#mail-preview .mr-app .mp-row-subject { display:block; margin:3px 0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mail-preview .mr-app .mr-row-meta { display:flex; gap:8px; justify-content:space-between; font-size:10px; color:#8390a3; }
#mail-preview .mr-app .mr-pagination { flex-shrink:0; border-top:1px solid var(--line); background:#fff; padding:8px 10px; display:flex; flex-direction:column; gap:6px; font-size:11px; }
#mail-preview .mr-app .mr-pagination>div,#mail-preview .mr-app .mr-pagination form { display:flex; align-items:center; justify-content:space-between; gap:4px; }
#mail-preview .mr-app .mr-pagination label { display:flex; align-items:center; gap:4px; }
#mail-preview .mr-app .mr-pagination select { width:61px; padding:3px 4px; }
#mail-preview .mr-app .mr-pagination input { width:46px; padding:3px; }
#mail-preview .mr-app .mr-pagination button { padding:3px 7px; font-size:12px; }
#mail-preview .mr-app .mp-detail { min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; background:white; }
#mail-preview .mr-app .mp-toolbar,#mail-preview .mr-app .mr-editor-toolbar { flex-shrink:0; min-height:48px; padding:8px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:flex-start; gap:8px; background:#fff; flex-wrap:wrap; }
#mail-preview .mr-app .mp-actions { display:flex; gap:6px; flex-wrap:wrap; }
#mail-preview .mr-app .mp-letter { flex:1; min-height:0; padding:20px 24px; overflow:auto; overscroll-behavior:contain; overflow-wrap:anywhere; }
#mail-preview .mr-app .mp-letter h2 { font-size:18px; line-height:1.5; margin:0 0 10px; overflow-wrap:anywhere; }
#mail-preview .mr-app .mr-message-summary { display:flex; gap:12px; align-items:center; border-bottom:1px solid #edf0f5; padding-bottom:14px; font-size:12px; color:#64748b; flex-wrap:wrap; }
#mail-preview .mr-app .mr-message-summary>span { font-weight:600; color:#32445c; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mail-preview .mr-app .mr-message-summary button { margin-left:auto; font-size:11px; border:0; color:var(--brand); }
#mail-preview .mr-app .mr-addresses { display:grid; grid-template-columns:60px minmax(0,1fr); gap:6px; padding:12px; border-radius:5px; background:#f5f7fa; font-size:12px; }
#mail-preview .mr-app .mr-addresses dt { color:#718096; }
#mail-preview .mr-app .mr-addresses dd { margin:0; overflow-wrap:anywhere; }
#mail-preview .mr-app .mr-body { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; padding:20px 0; font-size:14px; }
#mail-preview .mr-app .mr-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
#mail-preview .mr-app .mr-tags button[aria-pressed=true] { background:#eaf2ff; border-color:#8cb5ef; }
#mail-preview .mr-app .mr-translation { background:#f4f8ff; border-left:3px solid #a9c9f8; padding:12px 16px; margin-top:16px; }
#mail-preview .mr-app .mr-translation h3 { margin:0; font-size:13px; }
#mail-preview .mr-app .mr-translation p { white-space:pre-wrap; overflow-wrap:anywhere; }
#mail-preview .mr-app .mp-empty { min-height:0; padding:40px 16px; font-size:13px; }
#mail-preview .mr-app .mp-back { display:none; }
#mail-preview .mr-app .mr-composing,#mail-preview .mr-app .mr-settings { grid-template-columns:188px minmax(0,1fr); }
#mail-preview .mr-app .mr-editor { height:100%; min-height:0; display:flex; flex-direction:column; padding:0; gap:0; }
#mail-preview .mr-app .mr-editor-toolbar>span { margin-left:auto; font-size:12px; color:#64748b; }
#mail-preview .mr-app .mr-editor-content { flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:0 20px 16px; }
#mail-preview .mr-app .mr-editor-content>label,#mail-preview .mr-app .mr-from { display:flex; flex-direction:row; align-items:center; gap:12px; min-width:0; padding:5px 0; border-bottom:1px solid #edf0f5; font-size:12px; color:#718096; }
#mail-preview .mr-app .mr-editor-content>label>input { flex:1; border:0; }
#mail-preview .mr-app .mr-from { min-height:36px; }
#mail-preview .mr-app .mr-from span { color:#32445c; overflow-wrap:anywhere; }
#mail-preview .mr-app .mr-editor-content>.mr-body-input { flex:1; display:flex; flex-direction:column; align-items:stretch; min-height:220px; border:0; }
#mail-preview .mr-app .mr-body-input>span { font-size:11px; }
#mail-preview .mr-app .mr-body-input textarea { flex:1; resize:none; min-height:180px; line-height:1.8; padding:12px; }
#mail-preview .mr-app .mr-attachment-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; font-size:12px; }
#mail-preview .mr-app .mr-file-picker { position:relative; overflow:hidden; border:1px solid #dce5f1; border-radius:4px; padding:5px 8px; color:var(--brand); cursor:pointer; }
#mail-preview .mr-app .mr-file-picker input { position:absolute; inset:0; opacity:0; cursor:pointer; }
#mail-preview .mr-app .mr-file-picker:focus-within { outline:2px solid var(--brand); }
#mail-preview .mr-app .mr-file { display:flex; align-items:center; gap:6px; background:#f2f6fc; border:1px solid #dce5f1; padding:3px 6px; border-radius:4px; overflow-wrap:anywhere; max-width:100%; }
#mail-preview .mr-app .mr-file button { padding:1px 5px; }
#mail-preview .mr-app .mr-accounts { display:flex; flex-direction:column; min-height:0; min-width:0; }
#mail-preview .mr-app .mr-panel-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line); }
#mail-preview .mr-app .mr-panel-header small { color:#718096; display:block; margin-top:5px; }
#mail-preview .mr-app .mr-account-scroll { overflow:auto; min-height:0; padding:16px 24px; }
#mail-preview .mr-app .mr-accounts table { width:100%; border-collapse:collapse; text-align:left; table-layout:fixed; }
#mail-preview .mr-app .mr-accounts th { background:#f5f7fa; font-weight:500; color:#64748b; }
#mail-preview .mr-app .mr-accounts th,#mail-preview .mr-app .mr-accounts td { padding:13px 10px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
#mail-preview .mr-app .mr-accounts th:first-child { width:35%; }
#mail-preview .mr-app .mr-accounts td button { margin:2px 5px 2px 0; }
#mail-preview .mr-app .mr-connection.connected { color:#16754a; }
#mail-preview .mr-app .mr-connection.failed { color:#b33b30; }
#mail-preview .mr-app .mr-help { margin-top:24px; color:#64748b; font-size:12px; }
#mail-preview .mr-app summary { cursor:pointer; }
#mail-preview .mr-app .mp-notice { padding:6px 12px; display:flex; justify-content:space-between; gap:10px; font-size:12px; }
#mail-preview .mr-app .mp-notice button { padding:0 5px; border:0; background:transparent; }
#mail-preview .mr-app .mp-error { font-size:12px; padding:8px 12px; }
#mail-preview .mr-app .mr-dialog { width:min(480px,calc(100vw - 24px)); max-height:85dvh; padding:0; border:1px solid #dce5f1; border-radius:10px; color:#26384e; box-shadow:0 20px 60px #10213d35; }
#mail-preview .mr-app .mr-dialog::backdrop { background:#10213d65; }
#mail-preview .mr-app .mr-dialog>header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
#mail-preview .mr-app .mr-dialog-content { padding:16px 18px; overflow-wrap:anywhere; }
#mail-preview .mr-app .mr-binding { display:flex; flex-direction:column; gap:12px; }
#mail-preview .mr-app .mr-binding label { display:flex; flex-direction:column; gap:5px; }
#mail-preview .mr-app .mr-dialog-actions { display:flex; flex-wrap:wrap; gap:8px; }
#mail-preview .mr-app .mr-tag { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
#mail-preview .mr-app .mr-label-form { display:flex; gap:6px; padding-top:12px; border-top:1px solid var(--line); }
#mail-preview .mr-app .mr-label-form input[type=color] { width:45px; flex-shrink:0; padding:3px; }
@container mail-pane (max-width:1150px) {
 #mail-preview .mr-app .mp-workspace { grid-template-columns:160px 285px minmax(0,1fr); }
 #mail-preview .mr-app .mr-composing,#mail-preview .mr-app .mr-settings { grid-template-columns:160px minmax(0,1fr); }
 #mail-preview .mr-app .mp-letter { padding:16px; }
}
@container mail-pane (max-width:760px) {
 #mail-preview .mr-app .mp-workspace { display:flex; flex-direction:column; }
 #mail-preview .mr-app .mp-nav { flex:none; overflow:visible; display:grid; grid-template-columns:minmax(0,1fr) 125px; padding:8px 10px; gap:7px; border-right:0; border-bottom:1px solid var(--line); }
 #mail-preview .mr-app .mr-tabs { grid-column:1/-1; margin:-8px -10px 0; }
 #mail-preview .mr-app .mr-tabs button { padding:6px; }
 #mail-preview .mr-app .mp-folders { grid-column:1/-1; flex-direction:row; overflow:auto; padding:0; margin:0; gap:2px; }
 #mail-preview .mr-app .mp-folders button { padding:6px 9px; flex:1; }
 #mail-preview .mr-app .mr-label-heading { display:none; }
 #mail-preview .mr-app .mp-nav>select[aria-label='按标签筛选'] { grid-column:1/-1; }
 #mail-preview .mr-app .mr-nav-foot { display:none; }
 #mail-preview .mr-app .mp-list { flex:1; border:0; }
 #mail-preview .mr-app .mp-detail { display:none; flex:1; }
 #mail-preview .mr-app .mp-detail-open .mp-detail { display:flex; }
 #mail-preview .mr-app .mp-detail-open .mp-list { display:none; }
 #mail-preview .mr-app .mp-detail-open .mp-nav { display:none; }
 #mail-preview .mr-app .mr-composing .mp-nav { display:none; }
 #mail-preview .mr-app .mr-settings .mp-nav { display:grid; }
 #mail-preview .mr-app .mr-settings-link { grid-column:1/-1; }
 #mail-preview .mr-app .mr-accounts { flex:1; }
 #mail-preview .mr-app .mp-back { display:block; }
 #mail-preview .mr-app .mp-toolbar { padding:7px 10px; gap:5px; }
 #mail-preview .mr-app .mp-actions { gap:4px; }
 #mail-preview .mr-app .mp-actions button { font-size:12px; padding:4px 7px; }
 #mail-preview .mr-app .mp-letter { padding:14px; }
 #mail-preview .mr-app .mr-editor-toolbar { padding:8px 10px; gap:5px; }
 #mail-preview .mr-app .mr-editor-toolbar>span { width:100%; margin:0; }
 #mail-preview .mr-app .mr-editor-content { padding:0 10px 10px; }
 #mail-preview .mr-app .mr-panel-header,#mail-preview .mr-app .mr-account-scroll { padding:12px; }
 #mail-preview .mr-app .mr-accounts table,#mail-preview .mr-app .mr-accounts tbody { display:block; }
 #mail-preview .mr-app .mr-accounts thead { display:none; }
 #mail-preview .mr-app .mr-accounts tr { display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; padding:10px; }
 #mail-preview .mr-app .mr-accounts td { border:0; padding:4px; }
 #mail-preview .mr-app .mr-pagination { padding-bottom:max(8px,env(safe-area-inset-bottom)); }
}
#mail-preview .mr-app .mp-letter h2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
@container mail-pane (max-width:760px) {
 #mail-preview .mr-app .mr-label-heading { display:flex; grid-column:2; grid-row:4; margin:0; justify-content:flex-end; }
 #mail-preview .mr-app .mr-label-heading>span { display:none; }
 #mail-preview .mr-app .mp-nav>select[aria-label='按标签筛选'] { grid-column:1; grid-row:4; }
}
@media(min-width:901px){
 #mail-preview .mr-app .mp-workspace.mail-horizontal:not(.mr-settings):not(.mr-composing){grid-template-columns:188px minmax(0,1fr);grid-template-rows:40% 60%;}
 #mail-preview .mail-horizontal:not(.mr-settings):not(.mr-composing) .mp-nav{grid-row:1/3;}
 #mail-preview .mail-horizontal:not(.mr-settings):not(.mr-composing) .mp-list{grid-column:2;grid-row:1;}
 #mail-preview .mail-horizontal:not(.mr-settings):not(.mr-composing) .mp-detail{grid-column:2;grid-row:2;}
 #mail-preview .mr-app .mp-workspace.mail-list:not(.mr-settings){grid-template-columns:188px minmax(0,1fr);}
 #mail-preview .mail-list:not(.mr-settings):not(.mp-detail-open) .mp-detail,#mail-preview .mail-list:not(.mr-settings).mp-detail-open .mp-list{display:none;}
 #mail-preview .mail-list .mp-back{display:inline-block;}
}
#mail-preview .mr-accounts:has(.mail-preferences){overflow:auto;display:block;}