.mail-reader-toolbar > a[href="#reply"],
.mail-reader-toolbar > a[href="#forward"] {
    display: grid;
}

.mail-response-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 14px;
}

.mail-response {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mail-response > summary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.mail-response > summary::-webkit-details-marker {
    display: grid;
}

.mail-response > summary:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    background: var(--primary-soft);
}

.mail-response[open] {
    position: fixed;
    z-index: 245;
    inset: 0;
    display: grid;
    padding: clamp(12px, 4vw, 40px);
    place-items: center;
    background: rgba(5, 14, 28, .64);
}

.mail-response[open] > summary {
    position: fixed;
    z-index: 0;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 0;
}

.mail-response[open] > form {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    gap: 10px;
    padding: 22px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.mail-message-list > a.forwarded,
.mail-message-list > a.forwarded.unread {
    grid-template-columns: 22px 34px minmax(125px, .32fr) minmax(0, 1fr) auto;
}

.mail-forwarded-indicator {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: .78rem;
    font-weight: 900;
}

.mail-message-list > a.forwarded .mail-forwarded-indicator {
    grid-column: 1;
    grid-row: 1;
}

.mail-message-list > a.forwarded .mail-list-avatar {
    grid-column: 2;
    grid-row: 1;
}

.mail-message-list > a.forwarded .mail-sender {
    grid-column: 3;
}

.mail-message-list > a.forwarded .mail-letter-summary {
    grid-column: 4;
}

.mail-message-list > a.forwarded aside {
    grid-column: 5;
}

@media (max-width: 620px) {
    .mail-response-grid {
        padding-inline: 12px;
    }

    .mail-response[open] {
        padding: 0;
    }

    .mail-response[open] > form {
        width: 100%;
        max-height: 100vh;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        padding-top: max(18px, env(safe-area-inset-top));
    }

    .mail-message-list > a.forwarded,
    .mail-message-list > a.forwarded.unread {
        grid-template-columns: 22px 34px minmax(0, 1fr) auto;
    }

    .mail-message-list > a.forwarded .mail-forwarded-indicator {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .mail-message-list > a.forwarded .mail-list-avatar {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .mail-message-list > a.forwarded .mail-sender,
    .mail-message-list > a.forwarded .mail-letter-summary {
        grid-column: 3;
    }

    .mail-message-list > a.forwarded aside {
        grid-column: 4;
        grid-row: 1 / 3;
    }
}

/* Reply/forward markers live in the row gutter and never shift content. */
.mail-message-list > a,
.mail-message-list > a.unread,
.mail-message-list > a.forwarded,
.mail-message-list > a.forwarded.unread {
    position: relative;
    grid-template-columns: 34px minmax(125px, .32fr) minmax(0, 1fr) auto;
    padding-left: 42px;
}

.mail-message-list > a.forwarded .mail-forwarded-indicator {
    position: absolute;
    top: 50%;
    left: 10px;
    grid-column: auto;
    grid-row: auto;
    transform: translateY(-50%);
}

.mail-message-list > a.forwarded .mail-list-avatar {
    grid-column: 1;
    grid-row: 1;
}

.mail-message-list > a.forwarded .mail-sender {
    grid-column: 2;
}

.mail-message-list > a.forwarded .mail-letter-summary {
    grid-column: 3;
}

.mail-message-list > a.forwarded aside {
    grid-column: 4;
}

@media (max-width: 620px) {
    .mail-message-list > a,
    .mail-message-list > a.unread,
    .mail-message-list > a.forwarded,
    .mail-message-list > a.forwarded.unread {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        padding-left: 42px;
    }

    .mail-message-list > a.forwarded .mail-list-avatar {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .mail-message-list > a.forwarded .mail-sender,
    .mail-message-list > a.forwarded .mail-letter-summary {
        grid-column: 2;
    }

    .mail-message-list > a.forwarded aside {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}

/* Keep the mailbox canvas stable when filters return no messages. */
.mail-client-main,
.mail-inbox,
.mail-inbox > .mail-message-list,
.mail-inbox .empty-state {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.mail-message-list .mail-sender {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-flag-control {
    position: relative;
    z-index: 3;
    display: grid;
    width: 26px;
    height: 26px;
    padding: 0;
    place-items: center;
    justify-self: end;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    pointer-events: auto;
    flex: 0 0 26px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease;
    align-self: center;
    line-height: 1;
}

.mail-flag-control:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.mail-flag-control.active {
    color: #e29a08;
    visibility: visible;
    opacity: 1;
}
.mail-message-list > a:hover .mail-flag-control { visibility: visible; opacity: 1; }
.mail-message-list .mail-letter-summary { align-items: center; }
.mail-message-list .mail-letter-summary > strong { align-self: center; line-height: 1.25; }

/* Mail.ru-style interactive row without moving the message columns on hover. */
.mail-message-list > a {
    position: relative;
    margin-inline: 4px;
    border-radius: 11px;
    transition: background-color .14s ease, box-shadow .14s ease;
}

.mail-message-list > a:hover {
    background: color-mix(in srgb, var(--text) 7%, var(--surface));
    border-color: transparent;
    box-shadow: 0 5px 16px rgb(0 0 0 / 9%);
}

.mail-row-select {
    display: none;
    width: 34px;
    height: 32px;
    align-items: center;
    justify-content: space-between;
    grid-column: 1;
    grid-row: 1;
}

.mail-row-select .mail-unread-dot {
    position: relative;
    z-index: 3;
    display: block;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--muted);
    cursor: pointer;
    pointer-events: auto;
}

.mail-message-list > a.unread .mail-row-select .mail-unread-dot { background: var(--primary); }
.mail-row-select input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.mail-message-list > a:hover .mail-row-select,
.mail-message-list > a.selected .mail-row-select { display: flex; }
.mail-message-list > a:hover .mail-list-avatar,
.mail-message-list > a.selected .mail-list-avatar { display: none; }

.mail-message-list > a aside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.mail-row-label {
    position: relative;
    z-index: 2;
    display: none;
    max-width: 120px;
    padding: 5px 10px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: color-mix(in srgb, var(--text) 9%, transparent);
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.mail-row-label.has-label {
    display: inline-block;
    color: #48291c;
    background: var(--mail-label-color);
}
.mail-message-list > a:hover .mail-row-label { display: inline-block; }
.mail-message-list > a:hover .mail-flag-control:not(.active) { color: var(--text); }

.mail-selection-bar {
    display: none;
    min-height: 52px;
    margin-bottom: 8px;
    padding: 6px 10px;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 5px 18px rgb(0 0 0 / 8%);
}
.mail-selection-bar.open { display: flex; }
.mail-list-heading.mail-heading-hidden { display: none !important; }
.mail-selection-bar button,
.mail-selection-bar strong {
    display: inline-flex;
    min-height: 36px;
    padding: 7px 10px;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
}
.mail-selection-bar button > *,
.mail-selection-bar strong > * { align-self: center; }
.mail-selection-bar button { cursor: pointer; }
.mail-selection-bar button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.mail-selection-bar strong i { color: var(--primary); font-style: normal; }
.mail-selection-bar .mail-selection-more { margin-left: auto; font-size: 1.1rem; }

.mail-list-heading .mail-select-all {
    display: inline-flex;
    min-height: 36px;
    padding: 7px 10px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
.mail-list-heading .mail-select-all:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.mail-list-heading .mail-select-all i {
    display: inline-grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border: 1px solid var(--muted);
    border-radius: 50%;
    color: var(--muted);
    font-size: .72rem;
    font-style: normal;
}
.mail-filter-menu { position: relative; }
.mail-filter-menu > summary {
    display: inline-flex;
    min-height: 36px;
    padding: 8px 10px;
    align-items: center;
    gap: 7px;
    list-style: none;
    border-radius: 8px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}
.mail-filter-menu > summary b {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
}
.mail-filter-menu > summary b::before {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    content: "";
    transform: translateY(-2px) rotate(45deg);
}
.mail-filter-menu[open] > summary b::before { transform: translateY(2px) rotate(225deg); }
.mail-filter-menu > summary i { color: var(--primary); font-size: 1rem; font-style: normal; line-height: 1; }
.mail-filter-menu[data-filter="flagged"] > summary i { color: #ff3158; }
.mail-filter-menu > summary::-webkit-details-marker { display: none; }
.mail-filter-menu > summary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.mail-filter-menu nav {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    min-width: 205px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}
.mail-filter-menu nav a {
    display: grid;
    grid-template-columns: 16px 20px 1fr;
    gap: 8px;
    min-height: 38px;
    padding: 9px 10px;
    align-items: center;
    border-radius: 7px;
    color: var(--text);
    text-decoration: none;
}
.mail-filter-menu nav a > b { color: var(--muted); font-size: .75rem; }
.mail-filter-menu nav a > i { color: var(--muted); font-size: 1rem; font-style: normal; text-align: center; }
.mail-filter-menu nav a.active > i { color: var(--primary); }
.mail-filter-menu nav a[data-filter="flagged"] > i { color: #ff3158; }
.mail-filter-menu nav a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); text-decoration: none; }
.mail-filter-menu nav a.active { color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.mail-date-group { padding: 14px 12px 7px; color: var(--text); font-size: .8rem; font-weight: 850; }
.mail-search > button[type="submit"] { display: none; }
.mail-search.has-query > button[type="submit"] { display: inline-flex; }
.mail-search > input[name="q"] { flex: 1 1 auto; }

.mail-label-picker {
    position: fixed;
    z-index: 520;
    display: grid;
    width: 205px;
    padding: 5px 0;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, #111 6%);
    box-shadow: 0 15px 36px rgb(0 0 0 / 28%);
}
.mail-label-picker button {
    display: grid;
    grid-template-columns: 22px 1fr;
    min-height: 36px;
    padding: 7px 11px;
    align-items: center;
    border: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mail-label-picker button:hover,
.mail-label-picker button.active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.mail-label-picker i { width: 16px; height: 16px; border-radius: 50%; }
.mail-label-picker .mail-label-clear {
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}
.mail-label-picker .mail-label-clear i {
    display: grid;
    place-items: center;
    color: var(--muted);
    border: 1px solid var(--muted);
    background: transparent;
    font-size: .8rem;
    line-height: 1;
}

@media (max-width: 620px) {
    .mail-message-list > a { margin-inline: 0; border-radius: 0; }
    .mail-row-label { display: none !important; }
    .mail-selection-bar { overflow-x: auto; border-radius: 0; }
}

.mail-thread-count {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    place-items: center;
    border-radius: 999px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: .66rem;
    vertical-align: middle;
}

.mail-thread-stack {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.mail-thread-stack > strong {
    padding: 4px 2px;
    color: var(--muted);
    font-size: .75rem;
}

.mail-thread-stack > a {
    display: grid;
    grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
    text-decoration: none;
}

.mail-thread-stack > a:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    background: var(--primary-soft);
}

.mail-thread-stack > details {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.mail-thread-stack > details > summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr) auto;
    gap: 10px;
    padding: 11px 36px 11px 12px;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.mail-thread-stack > details > summary::-webkit-details-marker {
    display: none;
}

.mail-thread-stack > details > summary:after {
    position: absolute;
    right: 13px;
    color: var(--muted);
    content: "⌄";
}

.mail-thread-stack > details[open] > summary:after {
    transform: rotate(180deg);
}

.mail-thread-stack > details > summary:hover {
    background: var(--primary-soft);
}

.mail-thread-stack > details > summary span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-thread-message-body {
    padding: 16px;
    border-top: 1px solid var(--line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}
.mail-thread-current-body {
    padding: 0;
    border-top: 1px solid var(--line);
}
.mail-thread-card-body { border-top: 1px solid var(--line); }
.mail-thread-inline-meta {
    display: grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap: 3px 12px;
    padding: 14px 16px 10px;
}
.mail-thread-inline-meta strong,
.mail-thread-inline-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-thread-inline-meta span { grid-column: 1; color: var(--muted); font-size: .75rem; }
.mail-thread-inline-meta time { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.mail-thread-inline-text { padding: 6px 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.mail-thread-html-body {
    display: block;
    width: 100%;
    min-height: 220px;
    border: 0;
    background: #fff;
}
.mail-thread-current-body .mail-attachments { margin: 0 16px 16px; }
.mail-thread-current-message {
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.mail-thread-current-message .mail-letter-header h1 { display: none; }

.mail-forwarded-stack {
    margin-top: 10px;
}

.mail-forwarded-card-body {
    border-top: 1px solid var(--line);
}

.mail-forwarded-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 12px 16px 0;
    color: var(--muted);
    font-size: .78rem;
}

.mail-forwarded-meta strong,
.mail-forwarded-meta span {
    overflow-wrap: anywhere;
}

.mail-forwarded-meta strong {
    color: var(--text);
}

.mail-forwarded-meta span {
    grid-column: 1 / -1;
}

.mail-forwarded-assets {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.mail-forwarded-assets > strong {
    display: block;
    margin-bottom: 8px;
    font-size: .78rem;
}

.mail-forwarded-assets > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 260px));
    gap: 10px;
}

.mail-forwarded-assets article {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}

.mail-forwarded-assets article > a {
    display: grid;
    height: 150px;
    place-items: center;
    background: #fff;
}

.mail-forwarded-assets img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mail-forwarded-assets footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    padding: 8px 10px;
    font-size: .72rem;
}

.mail-forwarded-assets footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-forwarded-assets footer small {
    color: var(--muted);
}

.mail-forwarded-assets footer a {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
}

.mail-thread-stack > a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-thread-stack time {
    color: var(--muted);
    font-size: .72rem;
}

@media (max-width: 620px) {
    .mail-thread-stack > a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mail-thread-stack > a span {
        grid-column: 1 / 3;
    }

    .mail-thread-stack > details > summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .mail-thread-stack > details > summary span {
        grid-column: 1 / 3;
    }

    .mail-forwarded-meta {
        grid-template-columns: 1fr;
    }
}

.mail-inbox {
    min-height: 430px;
}

.mail-inbox > .mail-message-list {
    min-height: 330px;
    align-content: start;
    grid-auto-rows: min-content;
}

.mail-inbox .empty-state {
    display: grid;
    min-height: 330px;
    place-items: center;
    padding: 24px;
}


/* Rich mail attachment cards */
.mail-message-view .mail-attachments{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.mail-attachment-summary{display:flex;align-items:baseline;gap:9px}.mail-attachment-summary span{color:var(--muted);font-size:.78rem}
.mail-attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,300px));gap:12px}
.mail-attachment-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:0 4px 14px rgba(18,37,56,.06)}
.mail-attachment-card header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 11px;background:color-mix(in srgb,var(--canvas) 78%,var(--surface))}
.mail-attachment-card header strong{overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.mail-attachment-type{display:inline-grid;min-width:30px;height:24px;padding:0 5px;place-items:center;border-radius:5px;color:#fff;background:#e24a4a;font-size:.57rem;font-weight:900;letter-spacing:.02em}
.mail-attachment-preview{position:relative;display:block;height:180px;overflow:hidden;border-block:1px solid var(--line);background:#454545;text-decoration:none}
.mail-attachment-preview iframe,.mail-attachment-preview img{display:block;width:100%;height:100%;border:0;background:#fff;object-fit:contain;pointer-events:none}
.mail-attachment-placeholder{display:grid;place-items:center;color:#fff;font-size:2rem}.mail-attachment-placeholder span{opacity:.75}
.mail-attachment-card footer{display:flex;align-items:center;gap:10px;padding:9px 11px;font-size:.74rem}.mail-attachment-card footer>span{margin-right:auto;color:var(--muted)}
.mail-attachment-card footer a{font-weight:750;white-space:nowrap}
@media(max-width:520px){.mail-attachment-grid{grid-template-columns:1fr}.mail-attachment-preview{height:210px}}


/* Mail attachment placement fix */
.mail-thread-current-body .mail-attachments,
.mail-message-view .mail-attachments{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:12px;
    width:100%;
    margin:0;
    padding:16px;
    border-top:1px solid var(--line);
    background:var(--surface);
}
.mail-thread-current-body .mail-attachment-summary,
.mail-message-view .mail-attachment-summary{
    display:flex;
    width:100%;
    align-items:baseline;
    justify-content:flex-start;
}
.mail-thread-current-body .mail-attachment-grid,
.mail-message-view .mail-attachment-grid{
    display:grid;
    width:100%;
    grid-template-columns:repeat(auto-fill,minmax(230px,300px));
    justify-content:start;
    align-items:start;
}
.mail-thread-current-body .mail-attachment-card,
.mail-message-view .mail-attachment-card{width:100%;max-width:300px}
@media(max-width:520px){
    .mail-thread-current-body .mail-attachments,
    .mail-message-view .mail-attachments{padding:12px}
    .mail-thread-current-body .mail-attachment-grid,
    .mail-message-view .mail-attachment-grid{grid-template-columns:minmax(0,1fr)}
    .mail-thread-current-body .mail-attachment-card,
    .mail-message-view .mail-attachment-card{max-width:none}
}


/* Attachments inside letter body */
.mail-thread-letter-content,.mail-letter-content{display:grid;min-width:0;overflow:hidden;color:#10243b;background:#fff}
.mail-letter-content{border-radius:10px}
.mail-thread-letter-content .mail-attachments,
.mail-letter-content .mail-attachments{margin:0;padding:16px;color:#10243b;border-top:1px solid #dce3ea;background:#fff}
.mail-thread-letter-content .mail-attachments{border-top:0;border-bottom:1px solid #dce3ea}
.mail-thread-letter-content .mail-attachment-card,
.mail-letter-content .mail-attachment-card{color:#10243b;background:#fff;border-color:#dce3ea}
.mail-thread-letter-content .mail-attachment-card header,
.mail-letter-content .mail-attachment-card header{background:#f3f6f9}
.mail-thread-letter-content .mail-attachment-card footer>span,
.mail-letter-content .mail-attachment-card footer>span,
.mail-thread-letter-content .mail-attachment-summary span,
.mail-letter-content .mail-attachment-summary span{color:#66768a}


/* High-quality folder navigation and custom IMAP folders */
.mail-client-sidebar>nav{gap:3px}.mail-client-sidebar>nav>a.mail-folder-link{position:relative;grid-template-columns:22px minmax(0,1fr) auto;min-height:39px;padding:8px 10px}.mail-folder-link>i{display:grid;width:21px;height:21px;place-items:center;opacity:1!important}.mail-folder-link>i svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mail-folder-link>strong{min-width:22px;color:inherit;text-align:right}.mail-folder-link>strong[hidden]{display:none}.mail-folder-inline-action{position:absolute;right:8px;padding:3px 5px;border:0;color:#a7a7a7;background:transparent;font-size:.67rem;font-weight:700;cursor:pointer}.mail-folder-link>strong:not([hidden])~.mail-folder-inline-action{right:36px}.mail-folder-delete{display:none;width:23px;height:23px;padding:0;border:0;border-radius:5px;color:#999;background:transparent;font-size:1rem;cursor:pointer}.mail-folder-custom:hover .mail-folder-delete{display:grid;place-items:center}.mail-folder-add{display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 11px;border:0;color:var(--muted);background:transparent;text-align:left;cursor:pointer}.mail-folder-add:hover{color:var(--text)}.mail-folder-add span{font-size:1.25rem}


/* New mail folder modal */
.mail-folder-modal-backdrop{position:fixed;z-index:20000;inset:0;display:grid;padding:16px;place-items:center;background:rgba(0,0,0,.7);backdrop-filter:blur(2px)}.mail-folder-modal{display:grid;box-sizing:border-box;width:min(420px,100%);gap:16px;padding:28px 32px;border:1px solid #454545;border-radius:12px;color:#f2f2f2;background:#303030;box-shadow:0 24px 70px rgba(0,0,0,.55)}.mail-folder-modal>header{display:flex;align-items:center;justify-content:space-between}.mail-folder-modal>header strong{font-size:1.35rem}.mail-folder-modal>header button{display:grid;width:32px;height:32px;padding:0;place-items:center;border:0;border-radius:7px;color:#ddd;background:transparent;font-size:1.35rem;cursor:pointer}.mail-folder-modal>header button:hover{background:#444}.mail-folder-modal>input,.mail-folder-modal select{box-sizing:border-box;width:100%;min-width:0;height:38px;padding:7px 11px;border:1px solid #555;border-radius:7px;color:#eee;background:#303030}.mail-folder-modal>input:focus,.mail-folder-modal select:focus{border-color:#168fe5;outline:0;box-shadow:0 0 0 2px rgba(22,143,229,.2)}.mail-folder-modal>label:not(.mail-folder-option){display:grid;gap:7px;color:#fff;font-size:.72rem}.mail-folder-option{display:flex!important;align-items:center;gap:9px;font-weight:400}.mail-folder-option input{width:17px;height:17px;margin:0;accent-color:#168fe5}.mail-folder-capability-note{margin-top:-8px;color:#949da5;font-size:.65rem;line-height:1.35}.mail-folder-modal>footer{display:flex;gap:10px;margin-top:5px}.mail-folder-modal>footer .button{min-width:112px;height:38px;border:0;border-radius:8px}.mail-folder-modal>footer .button:first-child{background:#0789f9}.mail-folder-modal>footer .secondary{color:#eee;background:#4a4a4a}@media(max-width:520px){.mail-folder-modal{padding:22px 18px}.mail-folder-modal>footer{display:grid;grid-template-columns:1fr 1fr}.mail-folder-modal>footer .button{min-width:0}}

/* Unified mobile mail interface */
@media (max-width: 700px) {
    .mail-client-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
    .mail-client-sidebar { position: static; min-width: 0; gap: 8px; }
    .mail-client-sidebar > .mail-compose > summary { min-height: 46px; border-radius: 11px; font-size: .9rem; }
    .mail-client-sidebar > nav { display: flex; width: 100%; gap: 4px; padding: 1px 0 5px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
    .mail-client-sidebar > nav::-webkit-scrollbar { display: none; }
    .mail-client-sidebar > nav > a.mail-folder-link { min-width: max-content; min-height: 42px; flex: 0 0 auto; grid-template-columns: 20px auto auto; padding: 8px 10px; scroll-snap-align: start; }
    .mail-client-sidebar > nav > a.mail-folder-link > span { white-space: nowrap; }
    .mail-folder-add { min-width: max-content; min-height: 42px; flex: 0 0 auto; margin: 0; }
    .mail-folder-custom .mail-folder-delete { display: none !important; }

    .mail-client-main { width: calc(100% + 24px); min-width: 0; margin-inline: -12px; }
    .mail-client-main > .mail-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; margin: 0 12px 8px; }
    .mail-client-main > .mail-search > input { min-width: 0; }
    .mail-client-main > .mail-search > .button { min-width: 74px; padding-inline: 10px; }
    .mail-client-main > .mail-search > .secondary { grid-column: 1 / -1; min-height: 36px; }
    .mail-client-main > .mail-inbox { min-height: 0; border-inline: 0; border-radius: 0; }
    .mail-list-heading { gap: 9px; padding: 12px; }
    .mail-read-filter { width: 100%; gap: 4px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
    .mail-read-filter::-webkit-scrollbar { display: none; }
    .mail-read-filter a { min-height: 36px; display: inline-flex; flex: 0 0 auto; align-items: center; padding: 7px 10px; }

    .mail-inbox > .mail-message-list { min-height: 0; }
    .mail-message-list > a,
    .mail-message-list > a.unread,
    .mail-message-list > a.forwarded,
    .mail-message-list > a.forwarded.unread { grid-template-columns: 36px minmax(0,1fr) auto; min-height: 68px; gap: 8px; padding: 9px 12px 9px 40px; touch-action: manipulation; }
    .mail-message-list .mail-list-avatar { width: 34px; height: 34px; }
    .mail-message-list .mail-sender { align-self: end; grid-column: 2; grid-row: 1; font-size: .83rem; }
    .mail-message-list .mail-letter-summary { min-width: 0; align-self: start; grid-column: 2; grid-row: 2; }
    .mail-message-list .mail-letter-summary > strong { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .79rem; line-height: 1.25; }
    .mail-message-list .mail-letter-summary > small { display: none; }
    .mail-message-list > a aside { min-width: 48px; align-self: stretch; grid-column: 3; grid-row: 1 / 3; justify-content: space-between; }
    .mail-message-list > a aside time { font-size: .66rem; white-space: nowrap; }
    .mail-message-list .mail-flag-control { visibility: visible; opacity: .72; }
    .mail-message-list .mail-row-select { display: none; }
    .mail-message-list > a:hover .mail-row-select,
    .mail-message-list > a.selected .mail-row-select {
        position: absolute;
        z-index: 8;
        top: 50%;
        left: 6px;
        display: flex;
        width: 28px;
        height: 34px;
        margin: 0;
        justify-content: center;
        transform: translateY(-50%);
    }
    .mail-message-list > a:hover .mail-list-avatar,
    .mail-message-list > a.selected .mail-list-avatar {
        display: grid;
        visibility: visible;
    }
    .mail-message-list > a:hover .mail-row-select .mail-unread-dot,
    .mail-message-list > a.selected .mail-row-select .mail-unread-dot { display: none; }
    .mail-message-list > a.forwarded:hover .mail-forwarded-indicator,
    .mail-message-list > a.forwarded.selected .mail-forwarded-indicator { visibility: hidden; }
    .mail-selection-bar { position: sticky; z-index: 35; top: 0; width: 100%; gap: 4px; padding: 6px 8px; overflow-x: auto; border-radius: 0; }
    .mail-selection-bar button { min-width: 40px; min-height: 40px; flex: 0 0 auto; }
    .mail-pagination { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }

    .mail-reader-toolbar { position: sticky; z-index: 45; top: 0; display: flex; width: calc(100% + 24px); gap: 5px; margin: -8px -12px 8px; padding: 7px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--surface) 96%,transparent); box-shadow: 0 4px 12px rgba(9,25,40,.08); backdrop-filter: blur(10px); scrollbar-width: none; }
    .mail-reader-toolbar::-webkit-scrollbar { display: none; }
    .mail-reader-toolbar > * { flex: 0 0 auto; }
    .mail-reader-toolbar .button { min-height: 40px; padding: 8px 10px; }
    .mail-reader-toolbar > span { display: none; }
    .mail-message-view { min-height: 0; margin-inline: -12px; width: calc(100% + 24px); padding: 14px 12px; overflow: hidden; border-inline: 0; border-radius: 0; }
    .mail-letter-header h1 { margin-bottom: 13px; font-size: 1.08rem; line-height: 1.3; }
    .mail-letter-sender { grid-template-columns: 36px minmax(0,1fr); gap: 8px; }
    .mail-letter-sender > time { grid-column: 2; font-size: .68rem; }
    .mail-recipient-popup { position: fixed !important; z-index: 240; inset: auto 10px 10px !important; width: auto !important; max-height: 60dvh; overflow: auto; }
    .mail-letter-content { margin-inline: -12px; border-radius: 0; }
    .mail-html-body,.mail-thread-html-body { width: 100%; min-height: 180px; }

    .mail-thread-stack { gap: 5px; margin-inline: -12px; }
    .mail-thread-stack > strong { padding-inline: 12px; }
    .mail-thread-stack > details { border-inline: 0; border-radius: 0; }
    .mail-thread-stack > details > summary { grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; min-height: 58px; padding: 9px 34px 9px 12px; }
    .mail-thread-stack > details > summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mail-thread-stack > details > summary span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mail-thread-inline-meta { grid-template-columns: minmax(0,1fr); padding: 11px 12px 8px; }
    .mail-thread-inline-meta time { grid-column: 1; grid-row: auto; }
    .mail-thread-inline-text { padding: 5px 12px 14px; }
    .mail-thread-letter-content .mail-attachments,
    .mail-letter-content .mail-attachments { padding: 10px 12px; }
    .mail-attachment-grid { grid-template-columns: minmax(0,1fr); }
    .mail-attachment-card { max-width: none !important; }
    .mail-attachment-preview { height: 150px; }
    .mail-attachment-card footer { min-height: 44px; gap: 12px; }
    .mail-attachment-card footer a { display: inline-flex; min-height: 36px; align-items: center; }
    .mail-attachment-summary { flex-wrap: wrap; }

    .mail-response-grid { margin-inline: -12px; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); }
    .mail-response > summary { width: 100%; justify-content: center; }
    .mail-response[open] > form { box-sizing: border-box; width: 100%; height: 100dvh; min-height: 100dvh; max-height: 100dvh; padding: max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)); border-radius: 0; }

    .mail-folder-modal-backdrop { align-items: end; padding: 0; }
    .mail-folder-modal { width: 100%; max-height: 92dvh; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; border-width: 1px 0 0; border-radius: 16px 16px 0 0; }
    .mail-folder-modal > input,.mail-folder-modal select { min-height: 44px; }
}

@media (max-width: 380px) {
    .mail-reader-toolbar .button { font-size: .7rem; }
    .mail-message-list > a,
    .mail-message-list > a.unread,
    .mail-message-list > a.forwarded,
    .mail-message-list > a.forwarded.unread { padding-right: 8px; padding-left: 38px; }
    .mail-attachment-card footer { gap: 8px; font-size: .7rem; }
}