#home-mail-entry { position:absolute; z-index:6; right:calc(9px + (100% - 18px) / 12 - 28px); bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
#home-mail-entry > img { width: 49px; height: 47px; object-fit: contain; }
#home-mail-count { position: absolute; top: 0; right: -2px; min-width: 18px; padding: 1px 4px; background: #ec487b; color: white; font-size: 11px; line-height: 16px; border-radius: 9px; }
#home-mail-count[hidden] { display: none; }
.mail-dialog { box-sizing: border-box; width: min(calc(100vw - 32px), 358px); height: min(600px, calc(100dvh - 48px)); max-height: min(796px, calc(100dvh - 48px)); padding: 0; border: 1px solid #e8dfe3; background: #fff; color: #303640; overflow:hidden; }
.mail-empty { display:grid; align-content:center; justify-items:center; gap:12px; height:100%; min-height:110px; color:#8b8e99; font-size:14px; }
.mail-empty img { width:49px; height:47px; object-fit:contain; opacity:.55; }
.mail-empty p { margin:0; }
.mail-dialog[open] { display: flex; flex-direction: column; }
.mail-dialog::backdrop { background: #17203888; }
.mail-dialog header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f0e4e9; flex-shrink: 0; }
.mail-dialog header img { width: 42px; height: 40px; object-fit: contain; }
.mail-dialog h2 { margin: 0; flex: 1; font-size: 19px; }
.mail-dialog button { cursor: pointer; border: 1px solid #e6dce1; padding: 10px 14px; background: white; color: #535b68; font: inherit; }
.mail-dialog button:disabled { cursor: default; opacity: .5; }
.mail-dialog button:focus-visible { outline: 2px solid #f44e88; outline-offset: -2px; }
.mail-dialog [data-mail-close] { border: 0; font-size: 24px; padding: 2px 6px; }
.mail-status { box-sizing: border-box; min-height: 36px; margin: 0; padding: 8px 16px; font-size: 13px; line-height: 20px; color: #bd3c66; flex-shrink: 0; }
.mail-list { overflow-y: auto; flex: 1; min-height: 0; padding: 8px 12px; }
.mail-dialog .mail-row { display: grid; gap: 7px; width: 100%; text-align: left; margin-bottom: 8px; padding: 14px; overflow-wrap: anywhere; }
.mail-row.is-unread { border-left: 3px solid #ef5387; background: #fff7fa; }
.mail-row strong { color: #c44470; }
.mail-row span { font-size: 13px; }
.mail-row time, .mail-time { font-size: 12px; color: #8b8e99; }
.mail-detail { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.mail-detail h3 { margin: 0 0 8px; color: #d34e7c; }
.mail-copy { line-height: 1.7; overflow-wrap: anywhere; }
.mail-detail dl { display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 14px; border-block: 1px solid #f0e4e9; padding: 16px 0; }
.mail-detail dt { color: #878b96; }
.mail-detail dd { margin: 0; overflow-wrap: anywhere; }
.mail-counter-reason { font-size: 13px; color: #878b96; }
.mail-actions { display: flex; gap: 10px; }
.mail-actions button { flex: 1; }
.mail-dialog [data-mail-counter] { color: #e64c81; border-color: #f07caa; }
.mail-dialog footer { display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #f0e4e9; flex-shrink: 0; }
.mail-dialog [hidden] { display: none; }