/* =============================================================================
   DEX Portal - Email

   Four columns, of which two are conditional. The page fills the window and
   each column scrolls inside itself, because a mail client whose whole page
   scrolls loses the folder rail the moment you read anything.
   ============================================================================= */

.mail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;

    /* The gutter under the workspace card lives here rather than as a margin
       on the card itself: a bottom margin on a `flex: 1` child gets eaten when
       the column is already exactly as tall as its container, and the card
       ends up flush against the window edge. */
    padding-bottom: var(--gutter, 24px);
}


/* =============================================================================
   THE SUB-HEADER - searching, and which mailbox

   A tinted band between the page header and the mail itself, so the two
   choices that apply to everything below them read as one strip rather than
   as floating controls. Full-bleed: it spans the page and the padding is
   inside it, which is what makes it a band and not a box.
   ============================================================================= */

.mail-subheader {
    flex: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 10px var(--gutter, 24px) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border-default, #e8ebed);
}

/* The search is an underline, not a box: an icon, a line, and whatever you
   type. It sits on the same row as the mailbox tabs, flushed right. */
.mail-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 250px;
    margin-bottom: 7px;
    padding: 0 2px 3px;
    border-bottom: 1.5px solid var(--border-strong, #d5dadf);
    color: var(--text-muted, #8b929b);
}

.mail-search:focus-within {
    border-bottom-color: #4650dd;
    color: #4650dd;
}

.mail-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 2px 0;
    font-size: 13px;
    color: var(--text-primary, #1f2430);
}

.mail-search__input::placeholder {
    color: var(--text-muted, #8b929b);
}

/* The tab strip sits on the band's own bottom rule rather than carrying one,
   which is why it is pulled down by exactly the border's width. */
.mail-mailbox-tabs {
    margin: 0 0 -1px;
    padding: 0;
    border-bottom: 0;
}

.mail-mailbox-tabs .record-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mail-tab__badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15, 157, 88, 0.12);
    color: #0f7a45;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


/* =============================================================================
   THE WORKSPACE

   One row of columns in a card. The list is given a fixed width while
   something is open and the whole width when nothing is, which is the
   collapse: no animation, no handle, just the room going where it is needed.
   ============================================================================= */

.mail-workspace {
    display: flex;
    flex: 1;
    min-height: 0;

    /* Four columns pressed against each other read as one dense block, so they
       are separated by a 2px gap rather than a hairline border. The gap IS the
       divider: the card's own background shows through it, which is why this
       is the subtle border colour and why the columns below carry no
       border-right of their own - a border plus a gap would draw the line
       twice. */
    gap: 2px;

    /* The same gutter the page header uses, so the card lines up with the
       title above it instead of running into the window edge. The bottom is
       the page's padding - see `.mail-page`. */
    margin: var(--gutter, 24px) var(--gutter, 24px) 0;
    border: 1px solid var(--border-strong, #d5dadf);
    border-radius: 5px;
    overflow: hidden;
    background: var(--border-subtle, #f1f3f5);
}


/* Buttons are 5px product-wide now (--radius-button), so only what is NOT a
   button needs naming here. */
.mail-workspace .mail-folder {
    border-radius: var(--radius-button);
}

.mail-rail {
    flex: none;
    width: 186px;
    padding: 12px 10px;
    background: var(--surface-subtle, #f7f8f9);
    overflow-y: auto;
}

.mail-rail__heading {
    padding: 16px 10px 6px;
    color: var(--text-muted, #8b929b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mail-folder {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-button);
    margin-bottom: 2px;
    background: none;
    color: var(--text-secondary, #43484f);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mail-folder span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-folder .icon { flex: none; opacity: 0.7; }

.mail-folder:hover:not(:disabled) {
    background: rgba(15, 17, 21, 0.05);
    color: var(--text-primary, #0f1115);
}

.mail-folder--active,
.mail-folder--active:hover:not(:disabled) {
    background: var(--accent-tint, #f0edff);
    color: var(--accent, #6d5cff);
}

.mail-folder--active .icon { opacity: 1; }

.mail-folder:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mail-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.mail-column--list {
    flex: 1;
    background: #ffffff;
}

/* Once a message is open the list stops competing for width. 340px is about
   forty characters of subject, which is where a subject stops being useful. */
.mail-workspace--reading .mail-column--list {
    flex: none;
    width: 340px;
}

.mail-column--reading {
    flex: 1;
    background: #ffffff;
}

.mail-column--related {
    flex: none;
    width: 268px;
    background: var(--surface-subtle, #f7f8f9);
}

.mail-column__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-height: 46px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-subtle, #f1f3f5);
}

.mail-column__head--toolbar { padding: 0 10px; }

.mail-column__title {
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #0f1115);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-column__count {
    color: var(--text-muted, #8b929b);
    font-size: 12px;
    white-space: nowrap;
}

.mail-column__body {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
}

.mail-column--reading .mail-column__body,
.mail-column--related .mail-column__body {
    padding: 16px;
}

.mail-icon-button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 0;
    border-radius: var(--radius-button);
    background: none;
    color: var(--text-secondary, #43484f);
    cursor: pointer;
}

.mail-icon-button:hover {
    background: var(--surface-subtle, #f7f8f9);
    color: var(--text-primary, #0f1115);
}

/* Labelled, because an icon row with no words is a quiz - and the two that
   move mail out of the inbox are the ones nobody should have to guess at. */
.mail-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-button);
    background: none;
    color: var(--text-secondary, #43484f);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.mail-action:hover:not(:disabled) {
    background: var(--surface-subtle, #f7f8f9);
    color: var(--text-primary, #0f1115);
}

.mail-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.mail-action .icon { opacity: 0.8; }

/* The one that takes mail out of the inbox says so on hover, in the one
   colour that means "this changes something". */
.mail-action--danger:hover:not(:disabled) {
    background: var(--status-danger-tint, #fdeceb);
    color: var(--status-danger, #d92d20);
}


/* =============================================================================
   COLUMN TWO - THE LIST

   Two lines per row: who and when above, what it is about below. One line
   would force the subject to share its width with a name and a date, and the
   subject is the part anybody is actually reading.
   ============================================================================= */

.mail-row {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid var(--border-subtle, #f1f3f5);
    background: none;
    text-align: left;
    cursor: pointer;
}

.mail-row:hover { background: var(--surface-subtle, #f7f8f9); }

.mail-row--open,
.mail-row--open:hover {
    background: var(--accent-tint, #f0edff);
    box-shadow: inset 3px 0 0 var(--accent, #6d5cff);
}

.mail-row__top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 3px;
}

.mail-row__who {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary, #43484f);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-row__when {
    flex: none;
    color: var(--text-muted, #8b929b);
    font-size: 11px;
    white-space: nowrap;
}

.mail-row__bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mail-row__subject {
    flex: 1;
    min-width: 0;
    color: var(--text-secondary, #43484f);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-row__clip {
    flex: none;
    color: var(--text-muted, #8b929b);
}

/* Unread is weight and one edge of colour rather than a filled row, so a
   mostly-unread inbox does not become a wall. */
.mail-row--unread { box-shadow: inset 3px 0 0 var(--accent, #6d5cff); }

.mail-row--unread .mail-row__who,
.mail-row--unread .mail-row__subject {
    color: var(--text-primary, #0f1115);
    font-weight: 700;
}

/* -----------------------------------------------------------------------------
   LOADING THE LIST

   Mail is read live from the server, so there is a real wait here. It is shown
   as the shape of the list arriving rather than a sentence about what the app
   is doing - the shape says "your mail, in a moment" without making the user
   read an explanation of our plumbing every single refresh.

   The bars deliberately match .mail-row's geometry: same padding, same two
   lines, same gaps. A skeleton that does not line up with what replaces it
   reads as a jump rather than a fill.
   -------------------------------------------------------------------------- */

.mail-skeleton { padding-top: 2px; }

.mail-skeleton__row {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-subtle, #f1f3f5);
}

.mail-skeleton__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mail-skeleton__bar {
    height: 9px;
    border-radius: 999px;
    background: var(--border-subtle, #f1f3f5);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .85) 50%,
        rgba(255, 255, 255, 0) 100%);
    background-repeat: no-repeat;
    background-size: 180px 100%;
    background-position: -180px 0;
    animation: mail-skeleton-sweep 1.25s ease-in-out infinite;
}

.mail-skeleton__bar--star { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.mail-skeleton__bar--who { flex: 1; max-width: 150px; }
.mail-skeleton__bar--when { flex: none; width: 38px; height: 8px; }
/* The inline width is in pixels so the bar reads as a line of text. The cap is
   what keeps it inside a narrow column. */
.mail-skeleton__bar--subject { height: 10px; max-width: 88%; }

/* Each row starts its sweep a little later than the one above, so the list
   fills like a wave instead of pulsing as one slab. */
.mail-skeleton__rows > :nth-child(2) .mail-skeleton__bar { animation-delay: .06s; }
.mail-skeleton__rows > :nth-child(3) .mail-skeleton__bar { animation-delay: .12s; }
.mail-skeleton__rows > :nth-child(4) .mail-skeleton__bar { animation-delay: .18s; }
.mail-skeleton__rows > :nth-child(5) .mail-skeleton__bar { animation-delay: .24s; }
.mail-skeleton__rows > :nth-child(6) .mail-skeleton__bar { animation-delay: .30s; }
.mail-skeleton__rows > :nth-child(7) .mail-skeleton__bar { animation-delay: .36s; }
.mail-skeleton__rows > :nth-child(8) .mail-skeleton__bar { animation-delay: .42s; }
.mail-skeleton__rows > :nth-child(9) .mail-skeleton__bar { animation-delay: .48s; }
.mail-skeleton__rows > :nth-child(10) .mail-skeleton__bar { animation-delay: .54s; }
.mail-skeleton__rows > :nth-child(11) .mail-skeleton__bar { animation-delay: .60s; }
.mail-skeleton__rows > :nth-child(12) .mail-skeleton__bar { animation-delay: .66s; }

/* Rows fade out down the list, so the bottom of the column reads as "still
   arriving" rather than as a finished list of grey. */
.mail-skeleton__rows > :nth-child(n + 7) { opacity: .7; }
.mail-skeleton__rows > :nth-child(n + 10) { opacity: .4; }

/* The reading pane: a subject, who it is from, then paragraphs. Same bars,
   different rhythm - the gap after the meta line is where the head rule sits
   once the real message lands. */
.mail-skeleton--message { padding: 4px 2px 0; }

.mail-skeleton__bar--heading {
    width: 62%;
    height: 15px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.mail-skeleton__bar--meta {
    width: 40%;
    height: 10px;
    margin-bottom: 26px;
}

.mail-skeleton__bar--line { height: 9px; margin-bottom: 11px; }

@keyframes mail-skeleton-sweep {
    to { background-position: calc(100% + 180px) 0; }
}

/* A sweeping gradient is motion. Anyone who has asked the system for less of
   it gets the same layout, holding still. */
@media (prefers-reduced-motion: reduce) {
    .mail-skeleton__bar { animation: none; background-image: none; }
}

.mail-notice {
    padding: 40px 20px;
    text-align: center;
}

.mail-notice__title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.mail-notice__detail {
    margin: 0 auto;
    max-width: 340px;
    color: var(--text-secondary, #43484f);
    font-size: 12.5px;
    line-height: 1.6;
}


/* =============================================================================
   COLUMN THREE - THE MESSAGE
   ============================================================================= */

.mail-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle, #f1f3f5);
    margin-bottom: 14px;
}

.mail-head__subject {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
}

.mail-head__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mail-head__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mail-head__name {
    font-size: 13px;
    font-weight: 650;
}

.mail-head__address,
.mail-head__date {
    color: var(--text-muted, #8b929b);
    font-size: 12px;
}

.mail-head__date { flex: none; white-space: nowrap; }

.mail-head__meta {
    color: var(--text-secondary, #43484f);
    font-size: 12px;
    line-height: 1.7;
    word-break: break-word;
}

.mail-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--brand-gradient, #6d5cff);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.mail-avatar--large {
    width: 46px;
    height: 46px;
    font-size: 15px;
}

/* Tall on purpose. The frame is sealed, so nothing inside it can tell us how
   tall it wants to be - and a short box that scrolls a long message inside a
   column that also scrolls is two scrollbars arguing. */
.mail-frame {
    width: 100%;
    height: 58vh;
    min-height: 340px;
    border: 0;
    background: #ffffff;
}

.mail-plain {
    margin: 0;
    color: var(--text-primary, #0f1115);
    font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.mail-attachments {
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle, #f1f3f5);
    margin-top: 14px;
}

.mail-attachments__heading {
    margin-bottom: 8px;
    color: var(--text-muted, #8b929b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mail-attachment {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle, #f1f3f5);
    border-radius: var(--radius-button);
    margin-bottom: 6px;
    background: transparent;
    color: var(--text-secondary, #43484f);
    font-size: 12.5px;
    font-family: inherit;
    text-align: left;
    word-break: break-all;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.mail-attachment:hover {
    background: var(--surface-muted, #f6f8fb);
    border-color: var(--border-strong, #d9dee8);
}

.mail-attachment:disabled {
    cursor: progress;
    opacity: 0.65;
}

.mail-attachment span {
    flex: 1;
    min-width: 0;
}

.mail-attachment__hint {
    flex-shrink: 0;
    color: var(--text-muted, #8b929b);
}

.mail-attachments__note {
    margin: 6px 0 0;
    color: var(--text-muted, #8b929b);
    font-size: 11.5px;
    font-style: italic;
}

/* The green "Unread email" card pinned above a record's activity stream. */
.project-alert--email {
    background: #e9f8ef;
    border-color: #bfe8cd;
    cursor: pointer;
}

.project-alert--email:hover {
    background: #ddf3e6;
}

.project-alert--email .project-alert__badge {
    background: #2f9e5f;
    color: #fff;
}

.project-alert--email .project-alert__glyph {
    color: #2f9e5f;
}

/* Email entries in activity streams and Emails tabs open on click. */
.project-activity__entry--openable,
.record-row--openable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.project-activity__entry--openable:hover,
.record-row--openable:hover {
    background: var(--surface-muted, #f6f8fb);
    border-radius: var(--radius-button);
}

/* The Emails tab: a white card, one conversation per row, a rule between. */
.mail-tab-list {
    background: #fff;
    border: 1px solid var(--border-subtle, #eceff4);
    border-radius: var(--radius-button);
    padding: 0;
    overflow: hidden;
}

.mail-tab-list .record-row--openable {
    margin: 0;
    padding: 14px 16px;
    border-radius: 0;
}

.mail-tab-list .record-row--openable + .record-row--openable {
    border-top: 1px solid var(--border-subtle, #eceff4);
}

.mail-tab-list .record-row--openable:hover {
    background: var(--surface-muted, #f6f8fb);
    border-radius: 0;
}

/* Which way an email travelled - said out loud on every entry. */
.mail-direction {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--radius-button);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mail-direction--in {
    background: #e9f8ef;
    color: #217a48;
}

.mail-direction--out {
    background: #eef2ff;
    color: #3b55c4;
}

.mail-thread-count {
    color: var(--text-muted, #8b929b);
    font-size: 11px;
    white-space: nowrap;
}

/* The linked-email viewer panel - one email, or a whole conversation
   stacked oldest to newest. */
.mail-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow-y: auto;
}

.mail-view__message {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-subtle, #f1f3f5);
    border-radius: var(--radius-button);
    background: #fff;
}

.mail-view__head {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle, #f1f3f5);
}

.mail-view__direction {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--radius-button);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mail-view__direction--in {
    background: #e9f8ef;
    color: #217a48;
}

.mail-view__direction--out {
    background: #eef2ff;
    color: #3b55c4;
}

.mail-view__subject {
    color: var(--text-primary, #0f1115);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
    word-break: break-word;
}

.mail-view__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--text-muted, #8b929b);
    font-size: 12px;
}

.mail-view__holder {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mail-view__frame {
    flex: 1;
    width: 100%;
    min-height: 340px;
    border: 1px solid var(--border-subtle, #f1f3f5);
    border-radius: var(--radius-button);
    background: #fff;
}

.mail-view__note {
    margin: 0;
    color: var(--text-muted, #8b929b);
    font-size: 12.5px;
}

/* The foot of the message list: paging through the rest of the folder. */
.mail-list-foot {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted, #8b929b);
    font-size: 12px;
    font-family: inherit;
    text-align: center;
}

.mail-list-foot--button {
    color: var(--accent, #2f6bff);
    cursor: pointer;
}

.mail-list-foot--button:hover {
    text-decoration: underline;
}

/* The line above server search results, saying where they came from. */
.mail-search-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-subtle, #f1f3f5);
    background: var(--surface-muted, #f6f8fb);
    color: var(--text-secondary, #43484f);
    font-size: 12px;
}

.mail-search-note .icon {
    flex-shrink: 0;
    color: var(--text-muted, #8b929b);
}

/* Compose fields carry no labels - a placeholder names each one - and a
   single line under each, not a boxed border. */
.mail-compose__field {
    margin-bottom: 14px;
}

.mail-compose__control {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-default, #d9dee8);
    border-radius: 0;
    background: transparent;
    padding: 8px 2px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary, #0f1115);
    transition: border-color 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.mail-compose__control:focus {
    outline: none;
    border-bottom-color: var(--accent, #2f6bff);
}

.mail-compose__control::placeholder {
    color: var(--text-muted, #8b929b);
}

/* Selects keep a small chevron since they have no boxed edge to imply one. */
select.mail-compose__control {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238b929b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 20px;
}

/* Template + Link Project sit side by side, half each. */
.mail-compose__row {
    display: flex;
    gap: 16px;
}

.mail-compose__row .mail-compose__field {
    flex: 1 1 0;
    min-width: 0;
}

/* A half-width field collapses to full width when its partner is hidden
   (the Template field only appears when templates exist). */
.mail-compose__row .mail-compose__field[hidden] + .mail-compose__field--half {
    flex-basis: 100%;
}

/* The To field grows a suggestion list from the CRM as it is typed. */
.mail-compose__to-field {
    position: relative;
}

.mail-compose__suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border-subtle, #e4e8ef);
    border-radius: var(--radius-button);
    box-shadow: 0 10px 28px rgba(20, 20, 45, 0.12);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}

.mail-compose__suggest-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.mail-compose__suggest-item:hover {
    background: var(--surface-muted, #f6f8fb);
}

.mail-compose__suggest-email {
    color: var(--text-primary, #0f1115);
    font-size: 13px;
}

.mail-compose__suggest-name {
    color: var(--text-muted, #8b929b);
    font-size: 11.5px;
}

/* Files waiting at the bottom of a message being written. */
.mail-compose__attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.mail-compose__attach-row:empty {
    display: none;
}

.mail-compose__attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--border-subtle, #e4e8ef);
    border-radius: var(--radius-button);
    background: var(--surface-muted, #f6f8fb);
    color: var(--text-secondary, #43484f);
    font-size: 12px;
    max-width: 100%;
}

.mail-compose__attach-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.mail-compose__attach-chip em {
    color: var(--text-muted, #8b929b);
    font-size: 11px;
    font-style: normal;
}

.mail-compose__attach-remove {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    padding: 0;
    color: var(--text-muted, #8b929b);
    cursor: pointer;
}

.mail-compose__attach-remove:hover {
    color: #b23b3b;
}

.mail-reading__actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, #f1f3f5);
    margin-top: 16px;
}


/* =============================================================================
   COLUMN FOUR - WHO THIS IS
   ============================================================================= */

.mail-related__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-default, #e8ebed);
    margin-bottom: 16px;
    text-align: center;
}

.mail-related__name {
    font-size: 13.5px;
    font-weight: 650;
}

.mail-related__address {
    color: var(--text-muted, #8b929b);
    font-size: 12px;
    word-break: break-all;
}

.mail-related__section { margin-bottom: 20px; }

.mail-related__heading {
    margin-bottom: 8px;
    color: var(--text-muted, #8b929b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mail-related__empty,
.mail-related__waiting {
    margin: 0 0 10px;
    color: var(--text-secondary, #43484f);
    font-size: 12.5px;
    line-height: 1.55;
}

.mail-related__card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong, #d5dadf);
    border-radius: var(--radius-button);
    margin-bottom: 8px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease;
}

.mail-related__card:hover { border-color: var(--accent, #6d5cff); }

.mail-related__card-title {
    color: var(--text-primary, #0f1115);
    font-size: 13px;
    font-weight: 600;
}

.mail-related__card-detail {
    color: var(--text-muted, #8b929b);
    font-size: 11.5px;
}

.mail-related__button { width: 100%; }


/* =============================================================================
   WRITING ONE
   ============================================================================= */

.mail-compose__from {
    padding: 9px 12px;
    border: 1px solid var(--border-subtle, #f1f3f5);
    border-radius: var(--radius-button);
    background: var(--surface-subtle, #f7f8f9);
    color: var(--text-secondary, #43484f);
    font-size: 13px;
}

.mail-compose__body {
    min-height: 240px;
    font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: vertical;
}


/* =============================================================================
   NARROW

   Below about a laptop there is not room for four columns, so the related
   column goes first - it is context, and context is the first thing you can
   do without. Below a tablet the rail becomes a strip of icons.
   ============================================================================= */

@media (max-width: 1400px) {
    .mail-column--related { display: none; }
}

@media (max-width: 1100px) {
    .mail-workspace--reading .mail-column--list { width: 280px; }
}

/* Below 900px the page stops being a fixed-height column and the stage around
   it scrolls instead, so the workspace has to be told how tall to be - `flex:
   1` of an auto-height parent is nothing at all. */
@media (max-width: 900px) {
    .mail-page { height: auto; }
    .mail-workspace { min-height: 72vh; }
    .mail-subheader { padding-top: 12px; }
}

/* The action labels are the first thing to go when the toolbar runs out of
   room - the icons and their tooltips still say what they do. */
@media (max-width: 1240px) {
    .mail-action { padding: 6px 7px; }
    .mail-action span { display: none; }
}

@media (max-width: 860px) {
    .mail-rail { width: 56px; padding: 10px 8px; }
    .mail-rail__heading { display: none; }
    .mail-folder { justify-content: center; padding: 10px 0; }
    .mail-folder span { display: none; }

    /* On a phone the list and the message cannot share the screen, so opening
       one hands the whole width over to it. */
    .mail-workspace--reading .mail-column--list { display: none; }
}


/* =============================================================================
   ADDITIONS - unread counts, stars, links, the header mail menu
   ============================================================================= */

/* How many are unread, at the end of the folder's row. */
.mail-folder__count {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #4650dd;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
}

.mail-folder--active .mail-folder__count {
    background: #fff;
    color: #4650dd;
}

/* =============================================================================
   THE SELECTION

   A tick box that is invisible until it is wanted. Mail is read far more often
   than it is tidied, so the boxes stay out of the way until the row is hovered
   or something is already ticked; then every row shows one, because a column
   of boxes is what makes a run of them readable.
   ============================================================================= */

.mail-tick {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    flex: none;
    border: 1.5px solid #c3c8d4;
    border-radius: 4px;
    background: #fff;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-instant, 120ms) ease,
        border-color var(--duration-instant, 120ms) ease,
        background var(--duration-instant, 120ms) ease;
}

.mail-column__head .mail-tick,
.mail-row:hover .mail-tick,
.mail-tick.is-on,
.mail-tick:focus-visible {
    opacity: 1;
}

.mail-tick:hover { border-color: #4650dd; }

.mail-tick.is-on {
    border-color: #4650dd;
    background: #4650dd;
}

.mail-tick .icon { stroke: #fff; }

/* Once anything is ticked, every box shows: a column of them is what makes a
   run of ticks readable, and hunting for the next one by hovering is not. */
.mail-column--list:has(.mail-column__head--selection) .mail-tick { opacity: 1; }

.mail-row--picked { background: #eef0ff; }

.mail-row--picked:hover { background: #e6e9ff; }

.mail-column__head--selection {
    background: #f4f5ff;
    border-bottom-color: #dfe2ff;
}

.mail-column__head--selection .mail-column__title { flex: none; }

.mail-selection__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.mail-selection__actions::-webkit-scrollbar { display: none; }

/* Below the point where five labelled actions fit, the words go and the
   icons stay. A cramped row of clipped labels is worse than no labels. */
@media (max-width: 1180px) {
    .mail-selection__actions .mail-action span { display: none; }
    .mail-selection__actions .mail-action { padding: 6px 8px; }
}

/* The star on a list row. Quiet until it is on, or hovered. */
.mail-row__star {
    display: inline-flex;
    align-items: center;
    color: #c3c8d4;
    cursor: pointer;
    padding: 1px;
    border-radius: 5px;
    flex: none;
}

.mail-row__star:hover { color: #e8a213; background: rgba(232, 162, 19, 0.1); }

.mail-row__star.is-on { color: #e8a213; }

.mail-row__star.is-on .icon { fill: #e8a213; }

/* Where a message is filed in the company's own records. */
.mail-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.mail-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-button);
    background: #eef0ff;
    border: 1px solid #d6dafc;
    color: #4650dd;
    font-size: 12px;
    font-weight: 600;
}

/* ---- The header envelope's hover menu ------------------------------------- */

.header-mail-menu {
    position: fixed;
    z-index: 260;
    min-width: 290px;
    background: #fff;
    border: 1px solid var(--border-default, #e8ebed);
    border-radius: var(--radius-button);
    box-shadow: 0 18px 44px rgba(15, 18, 42, 0.18);
    padding: 6px;
    display: none;
}

.header-mail-menu.is-open { display: block; }

.header-mail-menu__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius-button);
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.header-mail-menu__row:hover { background: var(--surface-subtle, #f7f8f9); }

.header-mail-menu__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.header-mail-menu__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #1f2430);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-mail-menu__address {
    font-size: 11.5px;
    color: var(--text-muted, #8b929b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-mail-menu__unread {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: #4650dd;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.header-mail-menu__compose {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-subtle, #f1f3f5);
    border-radius: var(--radius-button);
    background: #fff;
    color: var(--text-secondary, #5a6270);
    cursor: pointer;
}

.header-mail-menu__compose:hover {
    border-color: #b9c0fa;
    color: #4650dd;
    background: #f2f3ff;
}

.header-mail-menu__note {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted, #8b929b);
}


/* -------------------------------------------------------------------------
   Attachment scan labels in the Related column

   Each attachment on the open email carries its malware verdict: green Clean,
   grey No threats, red Risk (which is also blocked from opening), or Checking.
   ------------------------------------------------------------------------- */

.mail-related__attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-subtle, #eef1f5);
    border-radius: var(--radius-button, 5px);
    background: var(--surface, #fff);
    margin-bottom: 6px;
}

.mail-related__attachment .icon { flex: none; color: var(--text-muted, #8b929b); }

.mail-related__attachment-name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-primary, #1a1d29);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-related__attachment--risk {
    border-color: #f3c0c0;
    background: #fdecec;
}

.mail-attach-tag {
    flex: none;
    padding: 2px 7px;
    border-radius: var(--radius-button, 5px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mail-attach-tag--clean   { background: #e7f6ee; color: #15803d; }
.mail-attach-tag--risk    { background: #f6d9d9; color: #b42318; }
.mail-attach-tag--checked { background: #eaeff7; color: #566180; }
.mail-attach-tag--pending { background: #eef1f8; color: #6b7086; }
.mail-attach-tag--none    { background: #f1f3f8; color: #98a0b3; }