/*
 * Mail triage: dark theme, muted chip, read/unread row action, split and "below" reading panes.
 * Linked last from mail.html. No overrides by force here: every rule either targets something the
 * older layers leave alone, or wins on selector weight.
 */

/* ---- Dark theme ---------------------------------------------------------------------------------
 * The mail styles are not token driven (about 30k forced colour declarations across the layers above),
 * so the dark theme inverts the finished light page instead of restating it: the root is inverted and
 * hue-rotated back, which turns white surfaces near-black and keeps every hue (blue stays blue, red
 * stays red). Photos, logos, emoji and designed email bodies are inverted a second time so they
 * render as authored. mail-triage.js sets data-mail-theme on the root for "dark" and for "system" when
 * the device prefers dark. The filter is on the root element on purpose: a filter there does not turn
 * the root into the containing block of position:fixed descendants, so toasts, the composer and
 * dialogs stay where the light theme puts them.
 */
html[data-mail-theme="dark"] {
  /* Native controls and scrollbars are drawn light, then inverted with the rest of the page. */
  color-scheme: light;
  background-color: #fff;
  filter: invert(1) hue-rotate(180deg) contrast(0.88);
}

html[data-mail-theme="dark"] :is(
  img,
  video,
  canvas,
  iframe,
  embed,
  object,
  svg image,
  .mail-sender-html-canvas,
  .mail-profile-menu-btn,
  .mail-attachment-thumb,
  .mail-compose-upload-thumb,
  .brand-logo-fallback,
  .mail-emoji-menu,
  .mail-message-reactions,
  .hvx-dialog-card,
  .mail-rules-dialog,
  [style*="background-image"]
) {
  filter: invert(1) hue-rotate(180deg);
}

/* A designed email keeps the sender's own canvas: white unless the sender painted it. */
html[data-mail-theme="dark"] .mail-sender-html-canvas {
  background-color: #fff;
  color: #202124;
}

/* Media inside something already restored must not be inverted a third time. */
html[data-mail-theme="dark"] :is(.mail-sender-html-canvas, .mail-profile-menu-btn, .mail-emoji-menu, .mail-message-reactions, .mail-attachment-thumb, .mail-compose-upload-thumb, .hvx-dialog-card, .mail-rules-dialog) :is(img, video, canvas, iframe, embed, object, [style*="background-image"]) {
  filter: none;
}

/* The attachment viewer is a dark stage in both themes; keep it and what it shows as authored. */
html[data-mail-theme="dark"] .mail-attachment-viewer {
  filter: invert(1) hue-rotate(180deg);
}

html[data-mail-theme="dark"] .mail-attachment-viewer :is(img, video, canvas, iframe, embed, object) {
  filter: none;
}

/* Scrims. A backdrop is a dark tint, which the inversion above turns into a light haze over the dark
 * page. The older layers pin those backgrounds, so the tint stays and a light layer is painted over it
 * with an inset shadow (above the element's background, below its dialog): inverted, the two together
 * dim the page behind the dialog as the light theme does. The filter dialog's backdrop is not pinned and
 * is authored for this theme in mail-dark-theme.css instead.
 */
html[data-mail-theme="dark"] :is(
  .mail-compose-modal:not(#mail-compose-modal),
  #mail-compose-modal.is-fullscreen,
  .mail-quick-settings-scrim,
  .mail-snooze-choice-dialog,
  .mail-label-choice-dialog,
  .mail-original-dialog,
  .hvx-dialog-overlay
) {
  box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.72);
}

/* Dialog cards. A card's drop shadow is dark, so the inversion turned it into a light halo around the
 * dark card. In the dark theme the shadow is authored light instead, and inverts to a dark one. The
 * older layers pin the shadow of the label, shortcut and other modal panels; they read it from
 * --mail-dialog-card-shadow, which is only set here. The remaining cards are not pinned.
 * .hvx-dialog-card and .mail-rules-dialog are not in this list. Both have dark colours of their own for
 * this theme and are restored above (the filter dialog was not, and showed as a light card), so their
 * own dark shadow already shows dark.
 */
html[data-mail-theme="dark"] {
  --mail-dialog-card-shadow: 0 18px 48px rgba(255, 255, 255, 0.62);
}

html[data-mail-theme="dark"] body.mail-body :is(
  .mail-snooze-choice-dialog .mail-snooze-choice-card,
  .mail-label-choice-dialog .mail-label-choice-card,
  .mail-original-dialog .mail-original-card
) {
  box-shadow: var(--mail-dialog-card-shadow);
}

/* ---- Muted chip --------------------------------------------------------------------------------- */
.mail-triage-muted-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 18px;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: #e8eaed;
  color: #3c4043;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---- Row quick action: mark as read / unread ---------------------------------------------------- */
html body.mail-body.mail-simple-mode #mail-threads [data-row-action-glyph="Read"]::before { content: "\2709"; }
html body.mail-body.mail-simple-mode #mail-threads [data-row-action-glyph="Unread"]::before { content: "\25CF"; }

/* ---- n / p: the message the keyboard is on ------------------------------------------------------ */
#mail-thread-detail .mail-message-card.is-triage-focus {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
}

/* ---- Shortcut help: keys that come in pairs stay on one line ------------------------------------- */
#mail-shortcut-modal .mail-shortcut-sections .mail-shortcut-grid dt {
  padding-right: 12px;
  white-space: nowrap;
}

/* ---- Reading pane: split, list beside the reader --------------------------------------------------
 * The pane stack is a one-column grid, so the reader used to follow the full-height list in page flow.
 * In the split layout the stack gets a second column: the list keeps the first and scrolls on its own,
 * the reader fills the second. Only standalone Mail, only at desktop widths, and only while the split
 * setting is on; the full-page reading mode is not matched by these selectors.
 */
@media (min-width: 1161px) {
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-pane-stack {
    /* The list column holds the folder rail (264px) and the conversations. 696px leaves the rows 432px:
       checkbox and markers, a sender, a subject and the time. The reader gets the rest, at least 380px,
       which is what its toolbar needs. */
    grid-template-columns: minmax(696px, 1fr) minmax(380px, 38%);
    grid-template-rows: minmax(0, 1fr);
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-pane-stack > .mail-shell.mail-pane {
    grid-area: 1 / 1;
    min-width: 0;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-pane-stack > .mail-reader-shell.is-split-companion {
    grid-area: 1 / 2;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    border-left: 1px solid #dadce0;
    background: #fff;
  }
}

@media (min-width: 1400px) {
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-pane-stack {
    grid-template-columns: minmax(696px, 1fr) minmax(420px, 44%);
  }
}

/* Rows beside the reader. The full-width row reserves 191px for the sender and 340px for the subject and
 * snippet, 737px with the markers and the time, which the list column only has from about 1830px. Below
 * that the row overflowed its pane: the subject was cut mid-word and the time was pushed out of sight.
 * The older layers pin the row's columns; they read them from --mail-row-columns and
 * --mail-row-copy-columns, set here, so the row fits the column it has: a narrower sender, a subject
 * that takes what is left and ends in an ellipsis, the snippet after it only when there is room, and
 * the time always visible.
 */
@media (min-width: 1161px) and (max-width: 1829px) {
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] #mail-threads .mail-gmail-row-open {
    --mail-row-columns: minmax(96px, 0.45fr) minmax(0, 1fr) minmax(0, auto) 84px;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] #mail-threads .mail-gmail-row-copy {
    --mail-row-copy-columns: minmax(0, auto) minmax(0, 1fr);
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] #mail-threads .mail-gmail-row-copy strong {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Up to 1599px the row is 450px to 610px wide (the reader takes 44% from 1400px, so 1440px is as tight
 * as 1280px). The snippet is dropped, and the hover actions keep the three that triage a conversation
 * (archive, read or unread, trash), so they cover about 100px of the row and not 190px. Open is the row
 * itself; label and snooze stay in the reader toolbar, the context menu and the l and b shortcuts.
 */
@media (min-width: 1161px) and (max-width: 1599px) {
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] #mail-threads .mail-gmail-row-copy {
    --mail-row-copy-columns: minmax(0, 1fr) 0;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] #mail-threads .mail-gmail-row-actions :is(
    [data-thread-hover-action="open"],
    [data-thread-hover-action="label"],
    [data-thread-hover-action="snooze"],
    [data-thread-hover-action="unsnooze"]
  ) {
    --mail-row-action-display: none;
  }
}

@media (min-width: 1161px) and (max-width: 1399px) {
  /* The reader is 380px to 530px wide here. Its subject line keeps a 64px inset on both sides for the
     full-page reader (pinned in an older layer, read from --mail-reader-header-inset), which left a
     subject about 120px to wrap in; and "2 of 24" pushed the next-conversation arrow out of the pane. */
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion .mail-view-sticky-chrome > .mail-panel-header {
    --mail-reader-header-inset: 8px;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion .mail-reader-position {
    display: none;
  }

  /* The subject line has a fixed height; a subject that does not fit ends in an ellipsis instead of
     wrapping onto the toolbar above it. The list row beside it carries the same subject. */
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion :is(.mail-panel-header > div:first-child, .mail-view-title-row) {
    min-width: 0;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion #mail-view-subject {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A message's date and actions need 260px, which left the sender about 50px beside them: the name broke
     after each word and the address after every few letters. The sender takes the first line, the date and
     actions the next, under the name. */
  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion .mail-message-head {
    flex-wrap: wrap;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion .mail-message-persona {
    flex: 1 1 100%;
  }

  body.mail-body:not(.mail-embedded)[data-mail-reading-pane="split"][data-mail-reading-layout="side"][data-mail-pane="inbox"] .mail-reader-shell.is-split-companion .mail-message-status {
    margin-left: 56px;
  }
}

/* ---- Reading pane: below the list ---------------------------------------------------------------
 * The list keeps its full-height frame (the older layers pin that height) and the reader takes the
 * lower part of the same grid cell, over the lower rows of the list. mail-triage.js measures the list
 * column and publishes --mail-triage-below-left; the list gets matching scroll room at its end so the
 * last conversations can be scrolled clear of the reader.
 */
@media (min-width: 1161px) {
  body.mail-body[data-mail-reading-layout="below"][data-mail-pane="inbox"] .mail-pane-stack > .mail-shell.mail-pane {
    grid-area: 1 / 1;
  }

  body.mail-body[data-mail-reading-layout="below"][data-mail-pane="inbox"] .mail-pane-stack > .mail-reader-shell.is-split-companion {
    grid-area: 1 / 1;
    align-self: end;
    z-index: 3;
    height: 54%;
    min-height: 0;
    max-width: calc(100% - var(--mail-triage-below-left, 264px));
    margin-left: var(--mail-triage-below-left, 264px);
    overflow: auto;
    border-top: 1px solid #dadce0;
    background: #fff;
    box-shadow: 0 -6px 16px rgba(60, 64, 67, 0.12);
  }

  body.mail-body[data-mail-reading-layout="below"][data-mail-pane="inbox"] #mail-threads::after {
    content: "";
    display: block;
    height: 54vh;
  }
}