nexus-shared 3.2.0 → 4.1.0

package/src/Styles/Nexus.Mail.css

@@ -0,0 +1,1062 @@
+@layer nexus.components {
+  /*
+   * A mail thread (`MailThread`): the chat panel's frame, body and reply box, with a head over them - the subject, the
+   * people, the record it is about. The head is a band across the panel divided by a line, never a box of its own, and
+   * it holds its height while it loads (bones where the subject and the names go), so the thread under it does not move
+   * when it lands. It opens the thread's one scroll (`ChatThread` `lead`): a tall record's card or fifty people are read
+   * by scrolling the thread, never in a box of their own.
+   */
+
+  /* A head over the thread: a little taller than a chat panel by default. */
+  .nx-chat-panel.nx-mail {
+    --nx-chat-height: min(70vh, 640px);
+  }
+
+  .nx-mail__head {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-1);
+    padding: var(--nx-space-2) var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mail__title {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nx-space-1) var(--nx-space-2);
+    align-items: baseline;
+  }
+
+  .nx-mail__subject {
+    flex: 1 1 16rem;
+    min-width: 0;
+    margin: 0;
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  /* The subject takes the focus when a window opens on the thread: a place to start reading, no control, so no ring. */
+  .nx-mail__subject:focus {
+    outline: none;
+  }
+
+  .nx-mail__time {
+    flex-shrink: 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .nx-mail__actions {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-1);
+    align-self: center;
+  }
+
+  .nx-table__tag.nx-mail__archived {
+    flex-shrink: 0;
+    gap: 4px;
+    align-self: center;
+  }
+
+  .nx-mail__archived .nx-icon {
+    width: 12px;
+    height: 12px;
+    vertical-align: 0;
+  }
+
+  /* The people: the role's word in a column, the names beside it, wrapping under themselves on a phone. */
+  .nx-mail__people {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 2px var(--nx-space-2);
+    margin: 0;
+    font-size: var(--nx-text-sm);
+    line-height: 1.5;
+  }
+
+  .nx-mail__row {
+    display: contents;
+  }
+
+  .nx-mail__row > dt {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-mail__row > dd {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* The sender's name first and strong, as a letter's From. */
+  .nx-mail__row[data-role="from"] > dd {
+    font-weight: 600;
+  }
+
+  /* A name moves to the next line whole, and breaks only when it is longer than a line. */
+  .nx-mail__name {
+    display: inline-block;
+    max-width: 100%;
+    margin-inline-end: 0.35em;
+  }
+
+  .nx-mail__name--inactive {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-mail__you {
+    margin-inline-start: 4px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+  }
+
+  .nx-mail__nobody {
+    color: var(--nx-text-muted);
+  }
+
+  /* "+2": the rest of the names, opened in place. A small pill, one size whatever the count. */
+  .nx-mail__more {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 7px;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-full);
+    background: none;
+    color: var(--nx-primary);
+    font: inherit;
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    vertical-align: 1px;
+    cursor: pointer;
+  }
+
+  .nx-mail__more:hover {
+    border-color: var(--nx-border-strong);
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-mail__more:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /*
+   * The record a thread is about, as its card: a band of the head under a line of its own, edge to edge, so it reads as
+   * part of the head and not as a box inside it.
+   */
+  .nx-mail__head > .nx-domain-card {
+    margin: var(--nx-space-1) calc(-1 * var(--nx-space-3)) 0;
+    padding: var(--nx-space-2) var(--nx-space-3) 0;
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* An inbox row's record, before its subject (`mailInboxColumns.subject`): held to part of the cell, its words in "…". */
+  .nx-table__tag.nx-mail__label {
+    display: inline-block;
+    max-width: 60%;
+    margin-inline-end: var(--nx-space-2);
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Bones where the subject and the names go while the head loads, on the line they hold. */
+  .nx-table__bone.nx-mail__bone {
+    height: 0.9em;
+    vertical-align: -0.1em;
+  }
+
+  /* A thread the reader may not open: one sentence where the thread would be. */
+  .nx-mail__refused {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nx-space-6) var(--nx-space-4);
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-mail__refused p {
+    margin: 0;
+  }
+}
+
+@layer nexus.components {
+  /*
+   * The bell (`MessageBell`): one of a top bar's ghost buttons with its count in the badge over its corner, so it never
+   * grows; a bar that runs short of room squeezes its other parts first. Its menu is wide enough for a subject line.
+   */
+  .nx-btn.nx-message-bell {
+    flex-shrink: 0;
+  }
+
+  .nx-menu.nx-message-bell__menu {
+    min-width: min(300px, calc(100% - 16px));
+  }
+}
+
+@layer nexus.components {
+  /*
+   * The mail client (`MailClient`): a bar, then three panes - the rail, the list, the reading pane - that fill what holds
+   * the client and scroll each by itself, so the page never scrolls. Panes are divided by lines, never boxed. The list and
+   * the reading pane sit side by side (`data-split="columns"`) or one over the other (`rows`, and always under 1000px of
+   * the client's own width); under 700px one pane shows at a time (`data-pane`), with a way back.
+   */
+  .nx-mailbox {
+    container: nx-mailbox / inline-size;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--nx-surface);
+    color: var(--nx-text);
+  }
+
+  .nx-mailbox__bar {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    align-items: center;
+    min-height: calc(var(--nx-control-sm) + 2 * var(--nx-space-2));
+    padding: 0 var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  /*
+   * The heading: the title and, when a page gives one, its sentence beside it, clipped, as an admin page's heading is -
+   * together as wide as the rail, so the search starts over the list. A page whose own heading names the client draws
+   * none (`title={false}`), and the search starts the bar.
+   */
+  .nx-mailbox__heading-text {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    align-items: baseline;
+    width: calc(14rem - var(--nx-space-3) - var(--nx-space-2));
+    min-width: 0;
+  }
+
+  /* The sentence takes only the room the title leaves: the title is clipped only when it is longer than the rail itself. */
+  .nx-mailbox__lead {
+    flex: 1 1 0;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__title {
+    flex: 0 1 auto;
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    font-size: var(--nx-text-lg);
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__search {
+    flex: 0 1 32rem;
+    min-width: 0;
+    margin-inline-end: auto;
+  }
+
+  .nx-mailbox__main {
+    display: grid;
+    flex: 1 1 auto;
+    grid-template-areas: "rail list reader";
+    grid-template-rows: minmax(0, 1fr);
+    grid-template-columns: 14rem minmax(18rem, 2fr) minmax(0, 3fr);
+    min-height: 0;
+  }
+
+  /* Until the reader's split is known (in the browser), the panes are laid out but not shown: nothing seen moves. */
+  .nx-mailbox:not([data-ready]) .nx-mailbox__main {
+    visibility: hidden;
+  }
+
+  .nx-mailbox[data-split="rows"] .nx-mailbox__main {
+    grid-template-areas: "rail list" "rail reader";
+    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
+    grid-template-columns: 14rem minmax(0, 1fr);
+  }
+
+  .nx-mailbox__rail,
+  .nx-mailbox__list,
+  .nx-mailbox__reader {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  /*
+   * The rail: Compose, then the folders and the types, scrolling on its own when a company has many kinds.
+   *
+   * Every pane that scrolls is positioned (`position: relative`), here and below, so what a row lays out of the flow - a
+   * visually hidden ", unread" (`nx-visually-hidden` is `position: absolute`) - scrolls with its pane. Without it that
+   * text is placed against the page at its row's place down the list, and a long list made the page taller than the
+   * window (found by MAIL-client-pages, 2026-11-10). check-contract.mjs holds every scroller of the client to it.
+   */
+  .nx-mailbox__rail {
+    position: relative;
+    grid-area: rail;
+    gap: var(--nx-space-1);
+    padding: var(--nx-space-3) var(--nx-space-2);
+    overflow-y: auto;
+    border-inline-end: 1px solid var(--nx-border);
+  }
+
+  .nx-mailbox__rail > .nx-btn {
+    flex-shrink: 0;
+    margin-bottom: var(--nx-space-2);
+  }
+
+  .nx-mailbox__folders {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-mailbox__heading {
+    margin: var(--nx-space-3) 0 var(--nx-space-1);
+    padding: 0 var(--nx-space-2);
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .nx-mailbox__folder {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: center;
+    width: 100%;
+    height: var(--nx-row);
+    padding: 0 var(--nx-space-2);
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nx-mailbox__folder:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-mailbox__folder:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  /* Where the list is: the accent's tint and a strong name, the way a chat list marks the open conversation. */
+  .nx-mailbox__folder[aria-current] {
+    background: var(--nx-primary-soft);
+    font-weight: 600;
+  }
+
+  .nx-mailbox__folder-icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 18px;
+    color: var(--nx-text-muted);
+  }
+
+  .nx-mailbox__folder[aria-current] .nx-mailbox__folder-icon {
+    color: var(--nx-primary);
+  }
+
+  .nx-mailbox__folder-icon .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-mailbox__folder-name {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__count {
+    flex-shrink: 0;
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+  }
+
+  /* The list: its tools on one line over the rows, which scroll. */
+  .nx-mailbox__list {
+    grid-area: list;
+    container: nx-mailbox-list / inline-size;
+    border-inline-end: 1px solid var(--nx-border);
+  }
+
+  .nx-mailbox[data-split="rows"] .nx-mailbox__list {
+    border-inline-end: 0;
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mailbox__tools {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    align-items: center;
+    min-height: calc(var(--nx-control-sm) + 2 * var(--nx-space-1));
+    padding: 0 var(--nx-space-2) 0 var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mailbox__tools > :last-child {
+    margin-inline-start: auto;
+  }
+
+  .nx-mailbox__where,
+  .nx-mailbox__picked {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__picked {
+    color: var(--nx-text);
+    font-weight: 600;
+  }
+
+  .nx-mailbox__notice {
+    flex-shrink: 0;
+    padding: var(--nx-space-2) var(--nx-space-3) 0;
+  }
+
+  .nx-mailbox__rows {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    list-style: none;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  /*
+   * A row: its box, its star, and the rest one button that opens it. Two lines in a narrow list (sender and time over
+   * subject and type), one line in a wide one. Every part keeps its place whatever the row holds, so nothing moves as
+   * the list reads its counts again.
+   */
+  .nx-mailbox__row {
+    --nx-avatar-size: 32px;
+
+    display: flex;
+    align-items: center;
+    padding-inline-start: var(--nx-space-3);
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mailbox__row:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-mailbox__row[data-current] {
+    background: var(--nx-primary-soft);
+  }
+
+  .nx-mailbox__check {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    min-height: 28px;
+  }
+
+  .nx-mailbox__check .nx-choice__control {
+    margin: 0;
+  }
+
+  .nx-mailbox__star {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    margin-inline-start: 2px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+  }
+
+  .nx-mailbox__star:hover {
+    color: var(--nx-text);
+  }
+
+  .nx-mailbox__star:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-mailbox__star[aria-pressed="true"] {
+    color: var(--nx-warning);
+  }
+
+  .nx-mailbox__star .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  .nx-mailbox__open {
+    display: grid;
+    flex: 1 1 auto;
+    grid-template-areas: "avatar from time" "avatar text chip";
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 2px var(--nx-space-2);
+    align-items: center;
+    min-width: 0;
+    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-2) var(--nx-space-2);
+    border: 0;
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  /* The row reaches the list's edges, where an outer ring would be cut off, so the ring is drawn inside. */
+  .nx-mailbox__open:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--nx-primary);
+  }
+
+  .nx-mailbox__open > .nx-avatar {
+    grid-area: avatar;
+  }
+
+  .nx-mailbox__from {
+    grid-area: from;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__lines {
+    margin-inline-start: 6px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    font-weight: 400;
+  }
+
+  .nx-mailbox__text {
+    grid-area: text;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__preview {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-table__tag.nx-mailbox__chip {
+    flex-shrink: 0;
+    align-self: center;
+    max-width: 9rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mailbox__open > .nx-mailbox__chip {
+    grid-area: chip;
+    justify-self: end;
+  }
+
+  /* A type's tag carries its kind's tone: mail the accent, chat the info tone, a record's kind the success tone. */
+  .nx-mailbox__chip[data-kind="mail"] {
+    --nx-tag-tone: var(--nx-primary);
+  }
+
+  .nx-mailbox__chip[data-kind="chat"] {
+    --nx-tag-tone: var(--nx-info);
+  }
+
+  .nx-mailbox__chip[data-kind="domain"] {
+    --nx-tag-tone: var(--nx-success);
+  }
+
+  .nx-mailbox__time {
+    grid-area: time;
+    justify-self: end;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* On a tinted row (under the pointer, or open) the muted words move toward the text colour, so they keep 4.5:1. */
+  .nx-mailbox__row:is(:hover, [data-current]) :is(.nx-mailbox__preview, .nx-mailbox__time, .nx-mailbox__lines) {
+    color: color-mix(in oklab, var(--nx-text-muted), var(--nx-text) 35%);
+  }
+
+  /* Unread: the sender, the subject and the time strong, as a letter not yet opened. */
+  .nx-mailbox__row[data-unread] :is(.nx-mailbox__from, .nx-mailbox__subject, .nx-mailbox__time) {
+    color: var(--nx-text);
+    font-weight: 700;
+  }
+
+  .nx-mailbox__row--bones .nx-mailbox__check {
+    width: 20px;
+  }
+
+  .nx-avatar.nx-mailbox__bone-avatar {
+    background: color-mix(in oklab, var(--nx-text) 9%, transparent);
+  }
+
+  /* A wide list reads each row on one line: avatar, sender, subject - preview, type, time. */
+  @container nx-mailbox-list (min-width: 46rem) {
+    .nx-mailbox__open {
+      grid-template-areas: "avatar from text chip time";
+      grid-template-columns: auto 12rem minmax(0, 1fr) auto 5rem;
+      gap: var(--nx-space-3);
+    }
+
+    .nx-mailbox__row {
+      --nx-avatar-size: 28px;
+    }
+  }
+
+  .nx-mailbox__message {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    align-items: center;
+    padding: var(--nx-space-6) var(--nx-space-4);
+    color: var(--nx-text-muted);
+    text-align: center;
+  }
+
+  .nx-mailbox__message > .nx-icon {
+    width: 32px;
+    height: 32px;
+    stroke-width: 1.5;
+  }
+
+  .nx-mailbox__message p {
+    margin: 0;
+  }
+
+  .nx-mailbox__message--pane {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+
+  .nx-mailbox__more {
+    display: flex;
+    justify-content: center;
+    padding: var(--nx-space-2);
+  }
+
+  /* The reading pane: its conversation scrolls, its buttons stay at its foot. */
+  .nx-mailbox__reader {
+    grid-area: reader;
+  }
+
+  .nx-mailbox__phone-only {
+    display: none;
+  }
+
+  /* Narrower: the list over the reading pane, whatever the choice, and the choice is not offered. */
+  @container nx-mailbox (max-width: 999px) {
+    .nx-mailbox .nx-mailbox__main {
+      grid-template-areas: "rail list" "rail reader";
+      grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
+      grid-template-columns: 13rem minmax(0, 1fr);
+    }
+
+    .nx-mailbox .nx-mailbox__list {
+      border-inline-end: 0;
+      border-bottom: 1px solid var(--nx-border);
+    }
+
+    .nx-btn.nx-mailbox__split {
+      display: none;
+    }
+
+    .nx-mailbox__heading-text {
+      flex: 0 1 auto;
+      width: auto;
+      max-width: 50%;
+    }
+  }
+
+  /* A phone: one pane at a time, the one `data-pane` names, with its way back. */
+  @container nx-mailbox (max-width: 699px) {
+    .nx-mailbox .nx-mailbox__main {
+      grid-template-areas: "pane";
+      grid-template-rows: minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nx-mailbox .nx-mailbox__rail,
+    .nx-mailbox .nx-mailbox__list,
+    .nx-mailbox .nx-mailbox__reader {
+      grid-area: pane;
+      border: 0;
+    }
+
+    .nx-mailbox:not([data-pane="rail"]) .nx-mailbox__rail,
+    .nx-mailbox:not([data-pane="list"]) .nx-mailbox__list,
+    .nx-mailbox:not([data-pane="reader"]) .nx-mailbox__reader {
+      display: none;
+    }
+
+    .nx-mailbox__tools.nx-mailbox__phone-only {
+      display: flex;
+    }
+
+    .nx-btn.nx-mailbox__phone-only {
+      display: inline-flex;
+    }
+
+    .nx-mailbox__tools.nx-mailbox__phone-only > :last-child {
+      margin-inline-start: 0;
+    }
+
+    .nx-mailbox__heading-text {
+      display: none;
+    }
+
+    .nx-mailbox__search {
+      flex: 1 1 auto;
+      margin-inline-end: 0;
+    }
+  }
+
+  /*
+   * The reading pane (`MailReader`): the head, the record's card, the mails - the newest open, the earlier folded to a
+   * line - and Discuss and Reply at the foot. The head and the mails are bands divided by lines; only the mails scroll.
+   */
+  .nx-mail-reader {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .nx-mail-reader__head {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-3) var(--nx-space-4);
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mail-reader__people {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: flex-start;
+  }
+
+  .nx-mail-reader__line {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    font-size: var(--nx-text-sm);
+    line-height: 28px;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-mail-reader__from {
+    font-weight: 600;
+  }
+
+  .nx-icon.nx-mail-reader__arrow {
+    width: 14px;
+    height: 14px;
+    margin: 0 6px;
+    color: var(--nx-text-muted);
+    vertical-align: -2px;
+  }
+
+  .nx-mail-reader__role {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-mail-reader__role .nx-mail__name {
+    color: var(--nx-text);
+  }
+
+  .nx-mail-reader__dot {
+    margin: 0 6px;
+  }
+
+  .nx-mail-reader__since {
+    display: block;
+    color: var(--nx-text-muted);
+    line-height: 1.4;
+  }
+
+  .nx-mail-reader__domain {
+    position: relative;
+    flex-shrink: 0;
+    max-height: 45%;
+    padding: var(--nx-space-2) var(--nx-space-4);
+    overflow-y: auto;
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mail-reader__body {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    min-height: 0;
+    padding: var(--nx-space-2) var(--nx-space-4) var(--nx-space-4);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  .nx-mail-reader__mails {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nx-mail-reader__mail,
+  .nx-mail-reader__note {
+    border-bottom: 1px solid var(--nx-border);
+  }
+
+  .nx-mail-reader__mail:last-child {
+    border-bottom: 0;
+  }
+
+  .nx-mail-reader__note {
+    padding: var(--nx-space-2) 0;
+  }
+
+  .nx-mail-reader__mail-head {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: baseline;
+    width: 100%;
+    min-width: 0;
+    padding: var(--nx-space-2) 0;
+    border: 0;
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    text-align: start;
+  }
+
+  button.nx-mail-reader__mail-head {
+    cursor: pointer;
+  }
+
+  button.nx-mail-reader__mail-head:hover .nx-mail-reader__author {
+    text-decoration: underline;
+  }
+
+  button.nx-mail-reader__mail-head:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-mail-reader__mail-head > .nx-mail__time {
+    margin-inline-start: auto;
+  }
+
+  .nx-icon.nx-mail-reader__fold {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--nx-text-muted);
+    vertical-align: -2px;
+  }
+
+  .nx-mail-reader__author {
+    flex-shrink: 0;
+    font-weight: 600;
+  }
+
+  .nx-mail-reader__preview {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .nx-mail-reader__text {
+    padding-bottom: var(--nx-space-3);
+  }
+
+  .nx-mail-reader__older {
+    align-self: center;
+    padding: 2px var(--nx-space-3);
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-full);
+    background: none;
+    color: var(--nx-primary);
+    font: inherit;
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .nx-mail-reader__older:hover {
+    background: var(--nx-surface-hover);
+  }
+
+  .nx-mail-reader__older:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-mail-reader__empty,
+  .nx-mail-reader__count {
+    margin: var(--nx-space-2) 0 0;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-mail-reader__bones {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nx-space-3);
+    padding: var(--nx-space-3) 0;
+  }
+
+  .nx-mail-reader__foot {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-2) var(--nx-space-4);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* A chat's popup: the chat panel filling the window's body. */
+  .nx-chat-panel.nx-chat-popup {
+    --nx-chat-height: 100%;
+
+    min-height: 0;
+  }
+
+  /*
+   * The compose window (`MailComposeWindow`): the people and the subject on top, the Markdown body filling what the
+   * window leaves, and Discard and Send on its foot.
+   */
+  .nx-mail-compose {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .nx-mail-compose__fields {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-3) var(--nx-space-4) 0;
+  }
+
+  .nx-mail-compose__line {
+    display: flex;
+    gap: var(--nx-space-2);
+    align-items: flex-end;
+  }
+
+  .nx-mail-compose__line > .nx-field {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .nx-btn.nx-mail-compose__copies {
+    flex-shrink: 0;
+  }
+
+  .nx-mail-compose__to {
+    margin: 0;
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-mail-compose__label {
+    margin-inline-end: var(--nx-space-2);
+    color: var(--nx-text-muted);
+  }
+
+  .nx-mail-compose__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: var(--nx-space-3) var(--nx-space-4) 0;
+    overflow: hidden;
+  }
+
+  .nx-mail-compose > .nx-chat-failure {
+    margin: var(--nx-space-2) var(--nx-space-4) 0;
+  }
+
+  .nx-mail-compose__foot {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--nx-space-2);
+    align-items: center;
+    padding: var(--nx-space-2) var(--nx-space-4);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  .nx-mail-compose__saved {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}