/*
 * Email message list panel module.
 * Scope: .email-list, .email-list-header, .email-list-items, .email-dense-row.
 */

.email-page {
  --email-list-panel-width: clamp(420px, 31vw, 500px);
  --email-list-surface: rgba(255, 253, 250, 0.94);
  --email-list-surface-soft: rgba(255, 250, 247, 0.82);
  --email-list-border: rgba(232, 220, 214, 0.82);
  --email-list-divider: rgba(232, 220, 214, 0.55);
  --email-list-text: #2f2934;
  --email-list-muted: #69717e;
  --email-list-faint: #8a817b;
  --email-list-accent: #6f6258;
  --email-list-selected-bg: rgba(168, 197, 184, 0.12);
  --email-list-hover-bg: rgba(168, 197, 184, 0.10);
  --email-list-badge-bg: rgba(168, 197, 184, 0.12);
  --email-list-unread-dot: var(--bb-sage, #A8C5B8);
  --email-indicator-width: 3px;
  --email-list-header-gap-before: 8px;
  --email-list-header-gap-after: 2px;
}

[data-theme="dark"] .email-page {
  --email-list-surface: rgba(42, 38, 34, 0.94);
  --email-list-surface-soft: rgba(36, 31, 27, 0.86);
  --email-list-border: rgba(168, 197, 184, 0.18);
  --email-list-divider: rgba(232, 221, 212, 0.12);
  --email-list-text: #E8DDD4;
  --email-list-muted: #B8ACA3;
  --email-list-faint: #9C9188;
  --email-list-accent: #d7d1c8;
  --email-list-selected-bg: rgba(168, 197, 184, 0.14);
  --email-list-hover-bg: rgba(168, 197, 184, 0.12);
  --email-list-badge-bg: rgba(168, 197, 184, 0.14);
  --email-list-unread-dot: var(--bb-sage, #A8C5B8);
}

[data-theme="dark"] .email-page .email-message-item.email-dense-row.selected {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-left: 0 !important;
}

@media (min-width: 768px) {
  .email-page .email-list {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-color: var(--email-list-surface) !important;
    background-image:
      linear-gradient(180deg, rgba(255, 254, 251, 0.98) 0%, var(--email-list-surface) 58%, rgba(255, 248, 245, 0.88) 100%) !important;
    border: 1px solid var(--email-list-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 34px rgba(71, 52, 45, 0.035) !important;
  }

  [data-theme="dark"] .email-page .email-list {
    background-color: var(--email-list-surface) !important;
    background-image:
      linear-gradient(180deg, rgba(42, 38, 34, 0.98) 0%, var(--email-list-surface) 58%, rgba(36, 31, 27, 0.9) 100%) !important;
    border-color: var(--email-list-border) !important;
    box-shadow: 0 14px 34px rgba(20, 18, 15, 0.22) !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list {
    flex: 0 0 var(--email-list-panel-width) !important;
    width: var(--email-list-panel-width) !important;
    min-width: 420px !important;
    max-width: 500px !important;
  }

  .email-page .email-list::after {
    display: none !important;
  }

  .email-page .email-list-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 68px !important;
    box-sizing: border-box !important;
    padding: 14px 22px 10px !important;
    background: rgba(255, 254, 251, 0.92) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--email-list-divider) !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .email-page .email-list-header {
    background: var(--email-list-surface) !important;
    border-bottom-color: var(--email-list-divider) !important;
  }

  .email-page .email-list-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .email-page .email-list-title {
    margin: 0 !important;
    color: var(--email-list-text) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .email-page .email-list-header .email-list-title {
    color: var(--email-list-text) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
  }

  .email-page .email-list-header .folder-title,
  .email-page .email-list-header h2,
  .email-page .email-list-header [class*="title"]:not(.email-list-title) {
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-base) !important;
    letter-spacing: -0.01em !important;
  }

  .email-page .email-list-count {
    color: var(--email-list-muted) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
  }

  .email-page .email-list-tools {
    display: none !important;
  }

  .email-page .email-list-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
  }

  .email-page .email-list-items .email-list-time-group,
  .email-page .email-list-items .email-list-section-header {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
    /* 66px = row margin 6 + row pad 4 + control col 44 + gap 12 — the group label
       sits ON the sender rail instead of hovering over the checkbox column */
    padding: 8px 10px 6px 66px !important;
    background: rgba(255, 254, 251, 0.94) !important;
    background-clip: padding-box !important;
    border: 0 !important;
    border-top: var(--email-list-header-gap-before) solid transparent !important;
    border-bottom: var(--email-list-header-gap-after) solid transparent !important;
    box-shadow: inset 0 -1px 0 var(--email-list-divider) !important;
    color: var(--email-list-faint) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-transform: none !important;
  }

  [data-theme="dark"] .email-page .email-list-items .email-list-time-group,
  [data-theme="dark"] .email-page .email-list-items .email-list-section-header {
    background: rgba(42, 38, 34, 0.94) !important;
    box-shadow: inset 0 -1px 0 var(--email-list-divider) !important;
    color: var(--email-list-faint) !important;
  }

  .email-page .email-message-item.email-dense-row,
  .email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 56px !important;
    align-items: center !important;
    gap: 12px !important;
    width: calc(100% - 12px) !important;
    min-height: 68px !important;
    box-sizing: border-box !important;
    margin: 1px 6px !important;
    padding: 12px 14px 12px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--email-list-text) !important;
    transform: none !important;
    transition: background-color 120ms ease, box-shadow 120ms ease !important;
    contain: layout !important;
  }

  .email-page .email-message-item.email-dense-row:not(.selected):not([aria-current="true"]):hover {
    background: var(--email-list-hover-bg) !important;
  }

  .email-page .email-message-item.email-dense-row.selected,
  .email-page .email-message-item.email-dense-row.selected:hover,
  .email-page .email-message-item.email-dense-row[aria-current="true"],
  .email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row.selected,
  .email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row.selected:hover,
  .email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row[aria-current="true"] {
    min-height: 64px !important;
    background: var(--email-list-selected-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .email-page .email-message-item.email-dense-row.selected .email-message-subject,
  .email-page .email-message-item.email-dense-row[aria-current="true"] .email-message-subject {
    color: #2B241E !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  .email-page .email-message-item.email-dense-row.unread {
    background: transparent !important;
  }

  .email-page .email-message-item.email-dense-row.unread.selected {
    background: var(--email-list-selected-bg) !important;
  }

  .email-page .email-message-item.email-dense-row.unread.selected::before {
    opacity: 0 !important;
  }

  .email-page .email-message-item.email-dense-row.unread::before,
  .email-page .email-message-item.email-dense-row.urgent.unread::before {
    content: none !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 3px !important;
    height: auto !important;
    border-radius: 0 2px 2px 0 !important;
    background: var(--email-list-unread-dot) !important;
    transform: none !important;
  }

  .email-page .email-message-item.email-dense-row.urgent:not(.selected) {
    border-left: var(--email-indicator-width) solid transparent !important;
  }

  .email-page .email-message-item.email-dense-row .email-row-controls {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 18px 24px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  .email-page .email-message-item.email-dense-row .email-bulk-cb {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    margin-left: 2px !important;
    opacity: 0.45 !important;
    visibility: visible !important;
    transition: opacity 120ms ease !important;
  }

  .email-page .email-message-item.email-dense-row .email-bulk-cb::before {
    inset: calc(50% - 7px) auto auto calc(50% - 7px) !important;
    width: 14px !important;
    height: 14px !important;
    border-width: 1.5px !important;
    border-color: rgba(105, 113, 126, 0.42) !important;
    background: rgba(255, 254, 251, 0.92) !important;
  }

  .email-page .email-message-item.email-dense-row .email-bulk-cb:checked::after {
    left: calc(50% - 3px) !important;
    top: calc(50% - 2px) !important;
    width: 7px !important;
    height: 4px !important;
  }

  .email-page .email-list-items.bulk-mode .email-message-item.email-dense-row .email-bulk-cb,
  .email-page .email-list.bulk-mode-active .email-message-item.email-dense-row .email-bulk-cb,
  .email-page .email-message-item.email-dense-row.bulk-selected .email-bulk-cb,
  .email-page .email-message-item.email-dense-row:hover .email-bulk-cb,
  .email-page .email-message-item.email-dense-row:focus-within .email-bulk-cb,
  .email-page .email-message-item.email-dense-row .email-bulk-cb:hover,
  .email-page .email-message-item.email-dense-row .email-bulk-cb:checked {
    opacity: 1 !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-star {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #8b95a1 !important;
    opacity: 0.45 !important;
    transition: opacity 120ms ease !important;
  }

  .email-page .email-message-item.email-dense-row:hover .email-message-star,
  .email-page .email-message-item.email-dense-row:focus-within .email-message-star,
  .email-page .email-message-item.email-dense-row .email-message-star:hover,
  .email-page .email-message-item.email-dense-row .email-message-star:focus-visible {
    opacity: 1 !important;
    background: rgba(92, 77, 67, 0.06) !important;
    color: var(--email-list-accent) !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-star.starred,
  .email-page .email-message-item.email-dense-row .email-message-star[aria-pressed="true"] {
    opacity: 1 !important;
    color: #d4a060 !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-avatar,
  .email-page .email-message-item.email-dense-row .email-avatar-stack {
    display: none !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-content {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-sender {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: #6b6358 !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .email-page .email-message-item.email-dense-row .email-sender-name {
    display: block !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    color: #6b6358 !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-subject {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    color: #2B241E !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.4 !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-snippet {
    display: none !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
  }

  .email-page .email-message-item.email-dense-row:not(.unread) .email-message-sender,
  .email-page .email-message-item.email-dense-row:not(.unread) .email-sender-name {
    color: #6b6358 !important;
    font-weight: var(--font-weight-medium) !important;
  }

  .email-page .email-message-item.email-dense-row:not(.unread) .email-message-subject {
    color: #2B241E !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  .email-page .email-message-item.email-dense-row.unread .email-message-sender,
  .email-page .email-message-item.email-dense-row.unread .email-sender-name {
    color: var(--email-list-text) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .email-page .email-message-item.email-dense-row.unread .email-message-subject {
    color: var(--email-list-text) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .email-page .email-message-item.email-dense-row.unread .email-message-time {
    color: var(--email-list-text) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-meta {
    grid-column: 3 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 40px !important;
    overflow: visible !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-time {
    display: block !important;
    flex: 0 0 auto !important;
    max-width: 56px !important;
    color: var(--email-list-muted) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-medium) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums !important;
    transition: opacity 120ms ease !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-hover-actions {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 120ms ease !important;
    z-index: 2 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .email-page .email-message-item.email-dense-row:hover .email-message-hover-actions,
  .email-page .email-message-item.email-dense-row:focus-within .email-message-hover-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .email-page .email-message-item.email-dense-row:hover .email-message-time,
  .email-page .email-message-item.email-dense-row:focus-within .email-message-time {
    opacity: 0 !important;
  }

  .email-page .email-message-item.email-dense-row:hover .email-message-meta,
  .email-page .email-message-item.email-dense-row:focus-within .email-message-meta {
    visibility: visible !important;
  }

  .email-page .email-message-item.email-dense-row:hover .email-message-flags,
  .email-page .email-message-item.email-dense-row:focus-within .email-message-flags {
    opacity: 0 !important;
  }

  .email-page .email-thread-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 20px !important;
    box-sizing: border-box !important;
    margin-left: 2px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: var(--email-list-badge-bg) !important;
    color: var(--email-list-muted) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 20px !important;
  }

  .email-page .email-message-item.email-dense-row .email-label-pills {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .email-page .email-message-item.email-dense-row .email-label-pill {
    height: 18px !important;
    max-width: 112px !important;
    line-height: 18px !important;
  }

  .email-page .email-message-item.email-dense-row .email-message-flags {
    display: inline-flex !important;
    justify-content: flex-end !important;
    max-width: 56px !important;
    overflow: hidden !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .email-page .email-message-item.email-dense-row:hover .email-message-meta,
    .email-page .email-message-item.email-dense-row:focus-within .email-message-meta {
      visibility: visible !important;
    }

    .email-page .email-message-item.email-dense-row:hover .email-message-avatar,
    .email-page .email-message-item.email-dense-row:focus-within .email-message-avatar,
    .email-page .email-message-item.email-dense-row:hover .email-avatar-stack,
    .email-page .email-message-item.email-dense-row:focus-within .email-avatar-stack {
      display: none !important;
    }
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 56px !important;
    align-items: center !important;
    gap: 12px !important;
    width: calc(100% - 12px) !important;
    min-height: 68px !important;
    margin: 1px 6px !important;
    padding: 12px 14px 12px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    contain: layout !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.selected,
  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.selected:hover {
    min-height: 64px !important;
    background: var(--email-list-selected-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-row-controls {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: 18px 24px !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    gap: 2px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-bulk-cb {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 36px !important;
    min-height: 36px !important;
    opacity: 0.45 !important;
    visibility: visible !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-star {
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-content {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-subject {
    max-width: 100% !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-meta {
    grid-column: 3 !important;
    position: relative !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-time {
    flex: 0 0 auto !important;
    max-width: 56px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .email-page .email-app.is-reader-split .email-list {
    flex-basis: clamp(380px, 42vw, 432px) !important;
    width: clamp(380px, 42vw, 432px) !important;
    min-width: 380px !important;
    max-width: 432px !important;
  }
}

@media (max-width: 767px) {
  .email-page .email-list {
    border-radius: 0 !important;
  }
}

[data-theme="dark"] .email-page .email-message-item.email-dense-row.selected,
[data-theme="dark"] .email-page .email-message-item.email-dense-row.selected:hover,
[data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.selected,
[data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.selected:hover {
  background: rgba(168, 197, 184, 0.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-left: 0 !important;
}

[data-theme="dark"] .email-page .email-message-item.email-dense-row .email-sender-name {
  color: var(--email-list-muted) !important;
}

[data-theme="dark"] .email-page .email-message-item.email-dense-row .email-message-subject {
  color: var(--email-list-text) !important;
}

@media (min-width: 1200px) {
  .email-page .email-app:not(.is-thread-open) .email-list {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    background-color: var(--email-list-surface) !important;
    background-image:
      linear-gradient(180deg, rgba(255, 254, 251, 0.98) 0%, var(--email-list-surface) 58%, rgba(255, 248, 245, 0.88) 100%) !important;
    border: 1px solid var(--email-list-border) !important;
    border-left: 1px solid var(--email-list-divider) !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: 0 14px 34px rgba(71, 52, 45, 0.045) !important;
    overflow: hidden !important;
  }

  .email-page .email-app.is-thread-open.is-reader-split .email-list {
    flex: 0 0 var(--email-list-panel-width) !important;
    width: var(--email-list-panel-width) !important;
    min-width: 420px !important;
    max-width: 500px !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    background-color: var(--email-list-surface) !important;
    background-image:
      linear-gradient(180deg, rgba(255, 254, 251, 0.98) 0%, var(--email-list-surface) 58%, rgba(255, 248, 245, 0.88) 100%) !important;
    border: 1px solid var(--email-list-border) !important;
    border-left: 1px solid var(--email-list-divider) !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: 0 14px 34px rgba(71, 52, 45, 0.045) !important;
    overflow: hidden !important;
  }

  .email-page .email-app:not(.is-thread-open) .email-list-header,
  .email-page .email-app.is-thread-open.is-reader-split .email-list-header {
    border-radius: 0 14px 0 0 !important;
  }

  [data-theme="dark"] .email-page .email-app:not(.is-thread-open) .email-list,
  [data-theme="dark"] .email-page .email-app.is-thread-open.is-reader-split .email-list {
    background-color: var(--email-list-surface) !important;
    background-image:
      linear-gradient(180deg, rgba(42, 38, 34, 0.98) 0%, var(--email-list-surface) 58%, rgba(36, 31, 27, 0.9) 100%) !important;
    border-color: var(--email-list-border) !important;
    border-left-color: var(--email-list-divider) !important;
    box-shadow: 0 14px 34px rgba(20, 18, 15, 0.22) !important;
  }
}

/* Reduced motion: disable all transitions on email list rows */
@media (prefers-reduced-motion: reduce) {
  .email-page .email-list .email-message-item,
  .email-page .email-list .email-message-item *,
  .email-page .email-list .email-message-item *::before,
  .email-page .email-list .email-message-item *::after {
    transition: none !important;
  }
}

/* ── Svarvagten fire-cards: calm "Intet svar" reminders above the list.
      Same family as the brief/pill cards — white card, hairline, sage tint. ── */
.email-rw-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 0;
}
.email-rw-cards:empty {
  display: none;
}
.email-rw-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 0.5px solid var(--sk-border, var(--color-border, rgba(58, 47, 38, 0.14)));
  border-radius: var(--radius-md, 10px);
  background: var(--sk-bg-surface, var(--color-card, #FFFEFB));
  /* Calm settle-from-above on mount — never a pop. reduced-motion cancels it. */
  animation: rw-card-in 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes rw-card-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* Calm dismissal (JS adds this, then removes the node after the fade). */
.email-rw-card--leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.email-rw-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
/* The status eyebrow — house META TEXT, deliberately NOT a coloured pill.
   Sage lives ONLY on the primary action, never smeared as a chip. */
.email-rw-card-badge {
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--sk-text-muted, var(--color-text-secondary, #6B6259));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-rw-card-title {
  font-size: var(--font-size-md, 15px);
  font-weight: 600;
  color: var(--sk-text, var(--color-text-primary, #2C2C2A));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-rw-card-sub {
  font-size: var(--font-size-xs);
  color: var(--sk-text-muted, var(--color-text-secondary, #6B6259));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-rw-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.email-rw-card-open,
.email-rw-card-later {
  box-sizing: border-box;
  min-height: 32px;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 130ms ease, color 130ms ease, transform 80ms ease;
}
/* Primary: the house solid-sage action (same as Compose/Send). One deliberate
   green, white text — reads as the obvious next step, not a banner. */
.email-rw-card-open {
  background: var(--sk-sage, #5F7263);
  color: #fff;
  font-weight: 600;
}
.email-rw-card-open:hover { background: #556759; }
.email-rw-card-open:active { transform: scale(0.98); background: #4C5A50; }
.email-rw-card-open[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}
.email-rw-card-open[aria-busy="true"]::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -1px;
  animation: rw-spin 0.7s linear infinite;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }
/* Secondary: a quiet text button — recedes under the primary. */
.email-rw-card-later {
  background: transparent;
  color: var(--sk-text-muted, var(--color-text-secondary, #6B6259));
}
.email-rw-card-later:hover { background: rgba(58, 47, 38, 0.05); }
.email-rw-card-later:active { transform: scale(0.98); background: rgba(58, 47, 38, 0.08); }
/* Dismiss: the faintest tier — an icon, equal-height square peer. */
.email-rw-card-done {
  box-sizing: border-box;
  min-width: 32px;
  min-height: 32px;
  margin-left: 4px;
  border: none;
  background: transparent;
  color: var(--sk-text-muted, var(--color-text-secondary, #6B6259));
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 130ms ease, color 130ms ease;
}
.email-rw-card-done:hover {
  background: rgba(58, 47, 38, 0.05);
  color: var(--sk-text, var(--color-text-primary, #2C2C2A));
}
.email-rw-card-open:focus-visible,
.email-rw-card-later:focus-visible,
.email-rw-card-done:focus-visible {
  outline: 2px solid rgba(95, 114, 99, 0.6);
  outline-offset: 2px;
}

[data-theme="dark"] .email-rw-card {
  background: var(--email-dark-panel, #201b18) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] .email-rw-card-badge {
  color: var(--email-dark-text-secondary, rgba(232, 221, 212, 0.66)) !important;
}
[data-theme="dark"] .email-rw-card-title {
  color: var(--email-dark-text, #e8ddd4) !important;
}
[data-theme="dark"] .email-rw-card-sub {
  color: var(--email-dark-text-secondary, rgba(232, 221, 212, 0.66)) !important;
}
[data-theme="dark"] .email-rw-card-open {
  background: #7CB8A4 !important;
  color: #17130f !important;
}
[data-theme="dark"] .email-rw-card-open:hover { background: #8BC4B0 !important; }
[data-theme="dark"] .email-rw-card-open[aria-busy="true"]::before {
  border-color: rgba(23, 19, 15, 0.35) !important;
  border-top-color: #17130f !important;
}
[data-theme="dark"] .email-rw-card-later {
  color: var(--email-dark-text-secondary, rgba(232, 221, 212, 0.66)) !important;
}
[data-theme="dark"] .email-rw-card-later:hover { background: rgba(232, 221, 212, 0.07) !important; }
[data-theme="dark"] .email-rw-card-done {
  color: var(--email-dark-text-secondary, rgba(232, 221, 212, 0.66)) !important;
}
[data-theme="dark"] .email-rw-card-done:hover {
  background: rgba(232, 221, 212, 0.07) !important;
  color: var(--email-dark-text, #e8ddd4) !important;
}
[data-theme="dark"] .email-rw-card-open:focus-visible,
[data-theme="dark"] .email-rw-card-later:focus-visible,
[data-theme="dark"] .email-rw-card-done:focus-visible {
  outline-color: rgba(124, 184, 164, 0.65) !important;
}

@media (prefers-reduced-motion: reduce) {
  .email-rw-card { animation: none; }
  .email-rw-card--leaving { transition: opacity 120ms ease; transform: none; }
  .email-rw-card-open, .email-rw-card-later { transition: background-color 120ms ease, color 120ms ease; }
  .email-rw-card-open:active, .email-rw-card-later:active { transform: none; }
  .email-rw-card-open[aria-busy="true"]::before { animation: none; }
}

@media (max-width: 767px) {
  .email-rw-card {
    flex-direction: column;
    align-items: stretch;
  }
  .email-rw-card-actions {
    justify-content: flex-end;
  }
  .email-rw-card-open,
  .email-rw-card-later,
  .email-rw-card-done {
    min-height: 44px;
  }
  .email-rw-card-done {
    min-width: 44px;
    justify-content: center;
  }
}