.mailboxPortraitButton {
    position: absolute;
    left: -12px;
    top: -15px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 3px rgba(0, 0, 0, .65));
    transition: transform .12s ease, filter .12s ease;
}.mailboxPortraitButton > i { pointer-events:none; }
.mailboxPortraitButton:hover,
.mailboxPortraitButton:focus-visible {
    transform:scale(1.08);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 0 5px rgba(255,255,255,.35));
    outline:0;
}
.mailboxPortraitButton[hidden] { display:none; }

.mailboxPanel { position:fixed;inset:0;z-index:8120; }
.mailboxPanel[hidden] { display:none; }
.mailboxPanelBackdrop { position:absolute;inset:0;border:0;background:rgba(0,8,16,.76);backdrop-filter:blur(2px); }
.mailboxPanelDialog {
    position:absolute;
    left:50%;top:50%;
    width:min(760px,calc(100vw - 24px));
    height:auto;max-height:calc(100dvh - 24px);
    display:flex;flex-direction:column;
    transform:translate(-50%,-50%);
    overflow:hidden;
    border:1px solid rgba(108,196,229,.62);
    border-radius:14px;
    background:#071f2d;
    box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.05);
    color:#eaf8ff;
    font-family:"Poppins",sans-serif;
}
.mailboxPanelHeader {
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex:none;min-height:54px;padding:8px 12px 8px 16px;
    border-bottom:1px solid rgba(109,190,220,.24);
    background:linear-gradient(180deg,#123d55,#0a2a3e);
}
.mailboxPanelTitle { display:flex;align-items:center;gap:10px; }
.mailboxPanelTitle > i { color:#ffd45d;font-size:24px;filter:drop-shadow(0 0 5px rgba(255,203,70,.26)); }
.mailboxPanelTitle div { display:grid;gap:1px; }
.mailboxPanelTitle small { color:#7fb5ca;font-size:11px;font-weight:600;letter-spacing:.08em; }
.mailboxPanelTitle strong { color:#fff;font-size:17px;font-weight:600; }
.mailboxPanelClose {
    display:grid;place-items:center;width:38px;height:38px;padding:0;
    border:1px solid rgba(151,208,230,.55);border-radius:9px;
    background:rgba(2,25,39,.55);color:#fff;cursor:pointer;
}
.mailboxPanelBody { min-height:0;flex:0 1 auto;display:grid;grid-template-columns:220px minmax(0,1fr);overflow:hidden;max-height:min(540px,calc(100dvh - 100px)); }
.mailboxListPane { min-width:0;min-height:0;max-height:min(540px,calc(100dvh - 100px));overflow:auto;border-right:1px solid rgba(91,166,195,.2);background:rgba(1,17,27,.55); }
.mailboxList { display:grid;gap:5px;padding:9px; }
.mailboxListItem {
    position:relative;display:grid;gap:3px;width:100%;min-width:0;padding:10px 11px;
    border:1px solid rgba(84,143,170,.25);border-radius:8px;
    background:rgba(7,41,57,.75);color:#bcd5e1;text-align:left;cursor:pointer;
}
.mailboxListItem:hover { border-color:rgba(112,196,228,.54);filter:brightness(1.08); }
.mailboxListItem.is-selected { border-color:#62d0f1;background:rgba(13,65,86,.84); }
.mailboxListItem.is-claimable { border-left:3px solid #ffd257; }
.mailboxListItem strong { overflow:hidden;color:#f2fbff;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap; }
.mailboxListItem span { color:#7198aa;font-size:10px;font-weight:700; }
.mailboxListItem em { position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:#ffd257;box-shadow:0 0 7px rgba(255,210,87,.65); }
.mailboxListEmpty { margin:16px 10px;color:#648a9c;font-size:12px;text-align:center; }
.mailboxDetail { min-width:0;min-height:0;max-height:min(540px,calc(100dvh - 100px));box-sizing:border-box;display:flex;flex-direction:column;padding:15px;overflow:auto; }
.mailboxDetailEmpty { margin:auto;color:#6f94a5;font-size:10px;text-align:center; }
.mailboxMessage { display:flex;flex-direction:column;gap:12px;min-height:0;flex:none; }
.mailboxMessage[hidden],.mailboxDetailEmpty[hidden] { display:none; }
.mailboxMessageHead { display:grid;gap:3px;padding-bottom:10px;border-bottom:1px solid rgba(92,167,196,.2); }
.mailboxMessageHead strong { color:#fff;font-size:17px;font-weight:600; }
.mailboxMessageHead small { color:#7199aa;font-size:11px; }
.mailboxMessageBody { margin:0;min-height:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#cee1ea;font-size:13px;line-height:1.55; }
.mailboxAttachmentsTitle { color:#77c7e5;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; }
.mailboxAttachments { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.mailboxAttachment {
    min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:7px;
    min-height:72px;padding:8px 10px;border:1px solid rgba(112,183,208,.25);border-radius:8px;background:rgba(4,36,51,.72);
}
.mailboxAttachment img { width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.38)); }
.mailboxAttachment div { min-width:0;display:grid;gap:2px; }
.mailboxAttachment strong { color:#eaf8ff;font-size:13px;font-weight:800;overflow-wrap:anywhere;line-height:1.35; }
.mailboxAttachment span { color:#ffd45d;font-size:15px;font-weight:600; }
.mailboxActions {
    display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:0;
}
.mailboxClaim,
.mailboxDelete {
    min-height:40px;padding:8px 16px;border-radius:9px;color:#fff;font:600 12px/1.3 "Poppins",sans-serif;
    text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer;
}
.mailboxClaim {
    min-width:170px;border:1px solid #ffd16a;background:linear-gradient(180deg,#d58a1a,#9b5908);
}
.mailboxDelete {
    min-width:110px;border:1px solid #ff8994;background:linear-gradient(180deg,#a93443,#6d1d29);
}
.mailboxClaim:hover:not(:disabled),.mailboxDelete:hover:not(:disabled) { filter:brightness(1.1); }
.mailboxClaim:disabled,.mailboxDelete:disabled { opacity:.55;cursor:default; }
.mailboxClaim.is-claimed { border-color:#39748e;background:#163f54;color:#82aabd; }
.mailboxDelete[hidden] { display:none; }
.mailboxStatus { min-height:20px;margin:0;color:#73e0b3;font-size:11px;font-weight:800; }
.mailboxStatus.is-error { color:#ff8f9b; }

@media (max-width:640px) {
    .mailboxPanelDialog { width:calc(100vw - 12px);max-height:calc(100dvh - 16px); }
    .mailboxPanelBody { grid-template-columns:128px minmax(0,1fr); }
    .mailboxList { padding:6px; }
    .mailboxListItem { padding:8px 7px; }
    .mailboxDetail { padding:10px; }
    .mailboxAttachments { grid-template-columns:minmax(0,1fr); }
    .mailboxAttachment { grid-template-columns:44px minmax(0,1fr);padding:8px; }
    .mailboxAttachment img { width:44px;height:44px; }
    .mailboxActions { flex-direction:column-reverse;align-items:stretch; }
    .mailboxClaim,.mailboxDelete { width:100%; }
}

.mailboxAttachment--premium {grid-column:1/-1;grid-template-columns:80px minmax(0,1fr);gap:12px;}
.mailboxAttachment--premium img {width:76px;height:76px;}
.mailboxAttachment--illustration {grid-template-columns:140px minmax(0,1fr);}
.mailboxAttachment--illustration img {width:140px;height:70px;object-fit:cover;border-radius:4px;filter:none;}
.mailboxAttachment--premium strong {font-size:14px;}
.mailboxListPane,.mailboxDetail {overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(100,213,231,.70) rgba(4,20,36,.55);}
.mailboxListPane::-webkit-scrollbar,.mailboxDetail::-webkit-scrollbar {width:6px;height:6px;}
.mailboxListPane::-webkit-scrollbar-track,.mailboxDetail::-webkit-scrollbar-track {border-radius:999px;background:rgba(4,20,36,.55);}
.mailboxListPane::-webkit-scrollbar-thumb,.mailboxDetail::-webkit-scrollbar-thumb {border-radius:999px;background:linear-gradient(180deg,rgba(100,213,231,.88),rgba(36,126,166,.92));}
.mailboxStatus:empty {display:none;}
@media(max-width:640px) {
 .mailboxAttachment--premium {grid-template-columns:56px minmax(0,1fr);gap:8px;}
 .mailboxAttachment--premium img {width:56px;height:56px;}
 .mailboxAttachment--illustration {grid-template-columns:minmax(0,1fr);padding:0;gap:0;overflow:hidden;}
 .mailboxAttachment--illustration img {width:100%;height:auto;aspect-ratio:2/1;max-height:140px;border-radius:0;}
 .mailboxAttachment--illustration div {padding:8px 10px;}
 .mailboxMessageHead strong {font-size:16px;}
}

/* One pack illustration, followed by heterogeneous reward tiles. */
.mailboxPack {grid-column:1/-1;min-width:0;overflow:hidden;border:1px solid rgba(119,199,229,.35);border-radius:4px;background:rgba(0,0,0,.18);}
.mailboxPackImage {display:block;width:100%;max-height:200px;object-fit:cover;}
.mailboxPackName {display:block;padding:10px 12px;color:#eaf8ff;font-size:16px;}
.mailboxPackContents {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 10px 10px;}
.mailboxPackContents .mailboxAttachment {grid-template-columns:40px minmax(0,1fr);gap:8px;padding:8px;}
.mailboxPackContents .mailboxAttachment img {width:40px;height:40px;}
.mailboxFeatureIcon {display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:24px;color:#77c7e5;}
@media(max-width:420px){.mailboxPackContents {grid-template-columns:minmax(0,1fr);}.mailboxPackImage {height:110px;}}

/* Match the established automation colours in game. */
.mailboxFeatureIcon[data-feature="auto_level"] {color:#70dba4;}
.mailboxFeatureIcon[data-feature="auto_team"] {color:#75cfff;}
.mailboxFeatureIcon[data-feature="auto_collect"] {color:#f1cb75;}
.mailboxFeatureIcon[data-feature="auto_prestige"] {color:#c898ff;}