/* Extracted mail feature surface. */

body[data-view="mail"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
}

body[data-view="mail"] .approval-panel,
body[data-view="contacts"] .approval-panel {
  display: none;
}

.status-band div,
.assistant-feed,
.task-lane,
.mail-grid article,
.calendar-strip > section,
.file-list article,
.tool-grid article,
.rules-list article,
.approval-panel,
.approval-card {
  background: var(--panel);
  border: 1px solid rgba(220, 226, 230, 0.92);
  border-radius: 8px;
}

.mini-avatar,
.mail-avatar {
  position: relative;
  overflow: hidden;
  background: hsl(var(--avatar-hue, 164) 64% 91%);
  color: hsl(var(--avatar-hue, 164) 54% 28%);
}

.mini-avatar em,
.mail-avatar em {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-style: normal;
  line-height: 1;
}

.mini-avatar img,
.mail-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 120ms ease;
}

.mini-avatar.avatar-loaded img,
.mail-avatar.avatar-loaded img {
  opacity: 1;
}

.mini-avatar.avatar-loaded em,
.mail-avatar.avatar-loaded em {
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Final mail/settings/automation dark polish after sticky mail styles. */
body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"] .mail-category-tabs,
body[data-theme="dark"][data-view="mail"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"] .mail-profile-card {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.2);
  color: #eff6ff;
}

body[data-theme="dark"] .mail-profile-card.active {
  background: rgba(35, 62, 106, 0.96);
  border-color: rgba(122, 171, 255, 0.72);
  box-shadow: inset 4px 0 0 #72a7ff;
}

body[data-theme="dark"] .mail-category-tabs button {
  background: color-mix(in srgb, var(--tab-color) 18%, #0e1a2d 82%);
  border-color: color-mix(in srgb, var(--tab-color) 38%, rgba(188, 205, 230, 0.2) 62%);
  color: color-mix(in srgb, var(--tab-color) 42%, #f4f8ff 58%);
  box-shadow: none;
}

body[data-theme="dark"] .mail-category-tabs button.active {
  background: color-mix(in srgb, var(--tab-color) 72%, #1c2d4b 28%);
  border-color: color-mix(in srgb, var(--tab-color) 82%, #dce9ff 18%);
  color: #ffffff;
}

body[data-theme="dark"] .mail-list-summary,
body[data-theme="dark"] .mail-pagination {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
  color: #b7c5da;
}

body[data-theme="dark"] .mail-pane-loading {
  background: linear-gradient(180deg, rgba(17, 31, 52, 0.94), rgba(8, 17, 31, 0.98));
  border-color: rgba(188, 205, 230, 0.24);
  color: #e5ecf8;
}

body[data-theme="dark"] .mail-pane-loading strong {
  color: #f8fbff;
}

body[data-theme="dark"] .mail-pane-loading p {
  color: #aebdd2;
}

body[data-theme="dark"] .mail-pane-spinner {
  border-color: rgba(114, 169, 255, 0.24);
  border-top-color: #72a9ff;
}

body[data-theme="dark"] .mail-pane-loading-lines span {
  background: rgba(188, 205, 230, 0.12);
}

body[data-theme="dark"] .mail-pane-loading-lines span::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

body[data-theme="dark"] .rule-status.active,
body[data-theme="dark"] .profile-status.ready {
  background: rgba(62, 185, 128, 0.16);
  border-color: rgba(62, 185, 128, 0.32);
  color: #a7f3ce;
}

body[data-theme="dark"] .profile-status {
  background: rgba(243, 196, 76, 0.16);
  color: #f4d28c;
}

body[data-theme="dark"] .account-modal-summary,
body[data-theme="dark"] .account-facts div,
body[data-theme="dark"] .compose-attachment-row,
body[data-theme="dark"] .attachment-source-row,
body[data-theme="dark"] .modal-list li {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.22);
  color: #f6f9ff;
}

body[data-theme="dark"] .account-modal-summary p,
body[data-theme="dark"] .account-facts span,
body[data-theme="dark"] .compose-attachment-row small {
  color: #aebdd2;
}

body[data-theme="dark"] .mail-workflow-strip,
body[data-theme="dark"] .mail-compact-details {
  border-color: rgba(188, 205, 230, 0.16);
  background: rgba(16, 29, 49, 0.82);
}

body[data-theme="dark"] .account-modal-summary,
body[data-theme="dark"] .account-facts div,
body[data-theme="dark"] .compose-attachment-row,
body[data-theme="dark"] .attachment-source,
body[data-theme="dark"] .attachment-choice,
body[data-theme="dark"] .attachment-picker-row,
body[data-theme="dark"] .attachment-source-row,
body[data-theme="dark"] .modal-list li {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.22);
  color: #f6f9ff;
}

body[data-theme="dark"] .account-modal-summary p,
body[data-theme="dark"] .account-facts span,
body[data-theme="dark"] .compose-attachment-row small,
body[data-theme="dark"] .attachment-choice small,
body[data-theme="dark"] .attachment-picker-row small,
body[data-theme="dark"] .attachment-picker-breadcrumb,
body[data-theme="dark"] .attachment-paste-fallback summary,
body[data-theme="dark"] .attachment-source h4 {
  color: #aebdd2;
}

body[data-theme="dark"] .account-modal-summary,
body[data-theme="dark"] .account-facts div,
body[data-theme="dark"] .compose-attachment-row,
body[data-theme="dark"] .attachment-source-row,
body[data-theme="dark"] .settings-status,
body[data-theme="dark"] .modal-list li {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.22);
  color: #f6f9ff;
}

body[data-theme="dark"] .account-modal-summary p,
body[data-theme="dark"] .account-facts span,
body[data-theme="dark"] .compose-attachment-row small {
  color: #aebdd2;
}

/* Final mail/settings/automation dark polish after all later layout styles. */
body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"] .mail-category-tabs,
body[data-theme="dark"][data-view="mail"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"] .mail-profile-card {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.2);
  color: #eff6ff;
}

body[data-theme="dark"] .mail-profile-card.active {
  background: rgba(35, 62, 106, 0.96);
  border-color: rgba(122, 171, 255, 0.72);
  box-shadow: inset 4px 0 0 #72a7ff;
}

body[data-theme="dark"] .mail-category-tabs button {
  background: color-mix(in srgb, var(--tab-color) 18%, #0e1a2d 82%);
  border-color: color-mix(in srgb, var(--tab-color) 38%, rgba(188, 205, 230, 0.2) 62%);
  color: color-mix(in srgb, var(--tab-color) 42%, #f4f8ff 58%);
  box-shadow: none;
}

body[data-theme="dark"] .mail-category-tabs button.active {
  background: color-mix(in srgb, var(--tab-color) 72%, #1c2d4b 28%);
  border-color: color-mix(in srgb, var(--tab-color) 82%, #dce9ff 18%);
  color: #ffffff;
}

body[data-theme="dark"] .mail-list-summary,
body[data-theme="dark"] .mail-pagination {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
  color: #b7c5da;
}

/* Mail/settings/automation dark polish after sticky mail styles. */
body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"] .mail-category-tabs,
body[data-theme="dark"][data-view="mail"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"] .mail-profile-card {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.2);
  color: #eff6ff;
}

body[data-theme="dark"] .mail-profile-card.active {
  background: rgba(35, 62, 106, 0.96);
  border-color: rgba(122, 171, 255, 0.72);
  box-shadow: inset 4px 0 0 #72a7ff;
}

body[data-theme="dark"] .mail-category-tabs button {
  background: color-mix(in srgb, var(--tab-color) 18%, #0e1a2d 82%);
  border-color: color-mix(in srgb, var(--tab-color) 38%, rgba(188, 205, 230, 0.2) 62%);
  color: color-mix(in srgb, var(--tab-color) 42%, #f4f8ff 58%);
  box-shadow: none;
}

body[data-theme="dark"] .mail-category-tabs button.active {
  background: color-mix(in srgb, var(--tab-color) 72%, #1c2d4b 28%);
  border-color: color-mix(in srgb, var(--tab-color) 82%, #dce9ff 18%);
  color: #ffffff;
}

body[data-theme="dark"] .mail-list-summary,
body[data-theme="dark"] .mail-pagination {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
  color: #b7c5da;
}

/* Dark mode cleanup pass for workspace pages beyond mail reader. */
body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"] .mail-tools,
body[data-theme="dark"] .mail-source,
body[data-theme="dark"] .mail-safety-banner {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.16);
  color: #aebdd2;
}

body[data-theme="dark"] .mail-profile-card {
  background: rgba(15, 28, 48, 0.96);
  border-color: rgba(188, 205, 230, 0.18);
  color: #edf4ff;
  box-shadow: none;
}

body[data-theme="dark"] .mail-profile-card.active {
  background: rgba(36, 65, 112, 0.72);
  border-color: rgba(109, 158, 255, 0.72);
  box-shadow: inset 4px 0 0 #6da0ff;
}

body[data-theme="dark"] .mail-profile-card.disabled {
  opacity: 0.48;
}

body[data-theme="dark"] .mail-profile-card span {
  background: rgba(74, 222, 128, 0.1);
  color: #b9f6d2;
}

body[data-theme="dark"] .mail-profile-card small,
body[data-theme="dark"] .mail-profile-card em,
body[data-theme="dark"] .mail-safety-banner span {
  color: #9fb0c8;
}

body[data-theme="dark"] .mail-toolbar-button.icon {
  border-color: rgba(188, 205, 230, 0.3);
  background: rgba(20, 36, 60, 0.98);
  color: #e7f0ff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .mail-toolbar-button.icon:not(.danger):not(.warning):not(.active):hover {
  background: rgba(42, 70, 113, 0.98);
  color: #ffffff;
}

body[data-theme="dark"] .status-band div,
body[data-theme="dark"] .assistant-feed,
body[data-theme="dark"] .task-lane,
body[data-theme="dark"] .mail-grid article,
body[data-theme="dark"] .calendar-strip > section,
body[data-theme="dark"] .file-list article,
body[data-theme="dark"] .tool-grid article,
body[data-theme="dark"] .rules-list article,
body[data-theme="dark"] .capability-grid article,
body[data-theme="dark"] .approval-panel,
body[data-theme="dark"] .approval-card {
  background: rgba(16, 25, 39, 0.76);
  border-color: rgba(219, 228, 238, 0.24);
  color: var(--ink);
  box-shadow: none;
}

body[data-view="mail"] .command-panel,
body[data-view="mail"] .section-heading,
body[data-view="mail"] .mail-safety-banner,
body[data-view="mail"] .mail-tools,
body[data-view="mail"] .mail-source,
body[data-view="mail"] .contacts-panel:not(.open) {
  display: none;
}

body[data-view="mail"] .workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  background: #ffffff;
}

body[data-view="mail"] .topbar {
  min-height: 54px;
  grid-template-columns: minmax(150px, auto) minmax(320px, 1fr) auto;
  margin: 0;
  padding: 6px 16px;
  border-bottom: 1px solid #e7ebf0;
  background: #ffffff;
}

body[data-view="mail"] .topbar .eyebrow {
  display: none;
}

body[data-view="mail"] .topbar h1 {
  font-size: 22px;
}

body[data-view="mail"] .top-actions {
  justify-content: flex-end;
}

body[data-view="mail"]:not(.native-shell) .topbar {
  grid-template-columns: minmax(88px, 132px) minmax(520px, 1fr) auto !important;
  gap: 8px !important;
  padding-inline: 12px !important;
}

body[data-view="mail"]:not(.native-shell) .topbar h1 {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="mail"]:not(.native-shell) .topbar-mail-search {
  --mail-topbar-control-height: 38px;
  --mail-topbar-icon-size: 38px;
  grid-template-columns: minmax(360px, 1fr) minmax(126px, 148px) auto var(--mail-topbar-icon-size) var(--mail-topbar-icon-size) !important;
  gap: 7px;
}

body[data-view="mail"]:not(.native-shell) .topbar-mail-search input,
body[data-view="mail"]:not(.native-shell) .topbar-mail-search select,
body[data-view="mail"]:not(.native-shell) .topbar-compose-button,
body[data-view="mail"]:not(.native-shell) .mail-refresh-button,
body[data-view="mail"]:not(.native-shell) .mail-view-options summary {
  min-height: var(--mail-topbar-control-height) !important;
}

body[data-view="mail"]:not(.native-shell) .mail-refresh-button,
body[data-view="mail"]:not(.native-shell) .mail-view-options summary {
  width: var(--mail-topbar-icon-size) !important;
  height: var(--mail-topbar-control-height) !important;
}

body[data-view="mail"]:not(.native-shell) .top-actions {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0 !important;
  max-width: 260px;
}

body[data-view="mail"]:not(.native-shell) .top-actions .suite-switcher summary {
  width: 38px;
  min-height: 38px;
  padding: 0;
  justify-content: center;
}

body[data-view="mail"]:not(.native-shell) .top-actions .suite-switcher summary span,
body[data-view="mail"]:not(.native-shell) .top-actions .suite-switcher summary::after,
body[data-view="mail"]:not(.native-shell) .top-actions .approval-top-label,
body[data-view="mail"]:not(.native-shell) .top-actions .openai-status-alert,
body[data-view="mail"]:not(.native-shell) .top-actions .diagnostics-top-button,
body[data-view="mail"]:not(.native-shell) .top-actions .shortcut-button {
  display: none !important;
}

body[data-view="mail"]:not(.native-shell) .top-actions .approval-top-button,
body[data-view="mail"]:not(.native-shell) .top-actions .notification-top-button,
body[data-view="mail"]:not(.native-shell) .top-actions .theme-toggle {
  min-width: 38px !important;
  min-height: 38px !important;
  padding-inline: 7px !important;
  justify-content: center;
}

body[data-view="mail"]:not(.native-shell) .top-actions .approval-top-button strong,
body[data-view="mail"]:not(.native-shell) .top-actions .notification-top-button strong {
  min-width: 22px;
  min-height: 22px;
  font-size: 12px;
}

body[data-view="mail"] .mail-tools {
  grid-template-columns: minmax(180px, 0.35fr) minmax(180px, 0.65fr);
}

body[data-view="mail"] .mail-tools #mail-search {
  display: none;
}

body[data-view="mail"] .main-column {
  min-height: 0;
}

body[data-view="mail"] #view-mail {
  gap: 0;
}

.mail-compose-button {
  min-height: 36px;
  border-radius: 999px;
  padding: 0 18px;
  white-space: nowrap;
}

.mail-profile-strip {
  display: flex;
  gap: 8px;
  padding: 7px 18px 8px;
  overflow-x: auto;
  background: #fff;
  border-bottom: 1px solid #e4e8eb;
}

/* Mailbox selection lives in the persistent left rail, as it does in Desktop Mail. */
body[data-view="mail"] #mail-profile-strip {
  display: none !important;
}

.mail-profile-switch {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.mail-profile-switch::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cloud), var(--teal));
  opacity: 0.72;
}

.mail-profile-switch span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e9f4f1;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
}

.mail-profile-switch div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mail-profile-switch strong,
.mail-profile-switch small,
.mail-profile-switch em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-profile-switch strong {
  font-size: 13px;
  line-height: 1.1;
}

.mail-profile-switch small,
.mail-profile-switch em {
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
  font-size: 12px;
  line-height: 1.1;
}

.mail-profile-switch em {
  font-size: 11px;
  min-width: 0;
  justify-self: end;
}

.mail-profile-switch small {
  line-height: 1.15;
}

.mail-profile-switch em.sync-error {
  color: #be123c;
}

.mail-profile-switch.active {
  border-color: #2f73d0;
  background: #eef5ff;
  box-shadow: inset 4px 0 0 #2f73d0;
}

.mail-profile-switch.disabled {
  opacity: 0.58;
}

.mail-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(77, 150, 255, 0.14), rgba(28, 184, 163, 0.12), rgba(214, 164, 60, 0.12));
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(77, 150, 255, 0.16);
}

.task-list,
.approval-list,
.file-list,
.rules-list,
.mail-table {
  display: grid;
  gap: 10px;
}

.mail-category-tabs {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 18px 12px;
  border-bottom: 1px solid #e4e8eb;
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mail-category-tabs::-webkit-scrollbar {
  display: none;
}

.mail-category-tabs button {
  --tab-color: var(--accent);
  --tab-bg: rgba(39, 110, 241, 0.08);
  --tab-border: rgba(39, 110, 241, 0.22);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--tab-border);
  border-radius: 999px;
  background: var(--tab-bg);
  color: var(--tab-color);
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.mail-category-tabs button.primary {
  --tab-color: #1f5cae;
  --tab-bg: rgba(39, 110, 241, 0.08);
  --tab-border: rgba(39, 110, 241, 0.22);
}

.mail-category-tabs button.order {
  --tab-color: #0f766e;
  --tab-bg: rgba(15, 118, 110, 0.1);
  --tab-border: rgba(15, 118, 110, 0.24);
}

.mail-category-tabs button.pricing {
  --tab-color: #7c3aed;
  --tab-bg: rgba(124, 58, 237, 0.1);
  --tab-border: rgba(124, 58, 237, 0.25);
}

.mail-category-tabs button.inventory {
  --tab-color: #2563eb;
  --tab-bg: rgba(37, 99, 235, 0.1);
  --tab-border: rgba(37, 99, 235, 0.24);
}

.mail-category-tabs button.tracking {
  --tab-color: #0e7490;
  --tab-bg: rgba(14, 116, 144, 0.1);
  --tab-border: rgba(14, 116, 144, 0.24);
}

.mail-category-tabs button.rma {
  --tab-color: #be123c;
  --tab-bg: rgba(190, 18, 60, 0.09);
  --tab-border: rgba(190, 18, 60, 0.22);
}

.mail-category-tabs button.campaign {
  --tab-color: #b45309;
  --tab-bg: rgba(180, 83, 9, 0.11);
  --tab-border: rgba(180, 83, 9, 0.25);
}

.mail-category-tabs button.updates {
  --tab-color: #475569;
  --tab-bg: rgba(71, 85, 105, 0.09);
  --tab-border: rgba(71, 85, 105, 0.22);
}

.mail-category-tabs button.promotions {
  --tab-color: #be185d;
  --tab-bg: rgba(190, 24, 93, 0.1);
  --tab-border: rgba(190, 24, 93, 0.23);
}

.mail-category-tabs button.assistant {
  --tab-color: #1552b8;
  --tab-bg: rgba(39, 110, 241, 0.1);
  --tab-border: rgba(39, 110, 241, 0.26);
}

.mail-category-tabs button.snoozed {
  --tab-color: #64748b;
  --tab-bg: rgba(100, 116, 139, 0.09);
  --tab-border: rgba(100, 116, 139, 0.22);
}

.mail-category-tabs button.active {
  border-color: var(--tab-color);
  background: var(--tab-color);
  color: #fff;
  box-shadow: 0 8px 18px rgba(13, 24, 43, 0.12);
}

.mail-category-tabs strong {
  font-size: 12px;
  color: inherit;
  opacity: 0.72;
}

.mail-category-tabs button.active strong {
  opacity: 0.9;
}

.task-item p,
.approval-card p,
.rules-list p,
.file-list p,
.tool-grid p,
.mail-grid p,
.calendar-strip > section p {
  margin-bottom: 0;
}

.mail-grid,
.calendar-strip,
.tool-grid {
  display: grid;
  gap: 12px;
}

.mail-grid {
  grid-template-columns: repeat(4, auto);
  align-items: center;
  gap: 8px;
}

.mail-grid article {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.mail-table {
  margin-top: 14px;
}

.mail-workspace {
  --mail-folder-pane: 236px;
  --mail-list-pane: 300px;
  display: grid;
  grid-template-columns:
    minmax(190px, var(--mail-folder-pane))
    8px
    minmax(260px, var(--mail-list-pane))
    8px
    minmax(520px, 1fr);
  gap: 0;
  align-items: stretch;
  border-top: 1px solid #d9dee2;
  background: #fff;
}

body.native-mail-reader-window .topbar,
body.native-mail-reader-window #view-mail > .section-heading,
body.native-mail-reader-window #view-mail > .mail-tools,
body.native-mail-reader-window .mail-profile-strip,
body.native-mail-reader-window .mail-category-tabs,
body.native-mail-reader-window #mail-summary,
body.native-mail-reader-window .mail-pager-bar,
body.native-mail-reader-window .mail-folder-rail,
body.native-mail-reader-window .mail-pane-resizer,
body.native-mail-reader-window .mail-table {
  display: none !important;
}


body.native-mail-reader-window .workspace,
body.native-mail-reader-window #view-mail,
body.native-mail-reader-window .mail-workspace {
  min-height: 100vh;
}

body.native-mail-reader-window .mail-workspace {
  grid-template-columns: minmax(0, 1fr);
  border-top: 0;
}

body.native-mail-reader-window .mail-reader {
  max-height: none;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

body.native-mail-reader-window .mail-reader-actions {
  top: 0;
}

.mail-reader-modal {
  display: grid;
  gap: 18px;
  max-height: min(78vh, 920px);
  overflow: auto;
  padding-right: 4px;
}

.mail-reader-modal .mail-message-header {
  margin: 0;
}

.mail-reader-modal .message-body-card {
  margin-top: 0;
}

.mail-workspace > *,
.mail-workspace .mail-table,
.mail-workspace .mail-reader,
.mail-workspace .mail-folder-rail {
  min-width: 0;
}

.mail-folder-rail {
  max-height: calc(100vh - 148px);
  overflow: auto;
  padding: 12px 8px 14px;
  border-right: 0;
  background: #f3f6f8;
}

.mail-pane-resizer {
  position: relative;
  z-index: 6;
  min-width: 8px;
  width: 8px;
  height: 100%;
  border-right: 1px solid #d9dee2;
  border-left: 1px solid #edf2f7;
  background: #f8fafc;
  cursor: col-resize;
  touch-action: none;
}

.mail-pane-resizer::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 50%;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

.mail-pane-resizer:hover,
.mail-pane-resizer:focus-visible,
.mail-pane-resizer.is-dragging {
  background: #edf5ff;
  outline: none;
}

.mail-pane-resizer:hover::before,
.mail-pane-resizer:focus-visible::before,
.mail-pane-resizer.is-dragging::before {
  background: rgba(47, 111, 214, 0.55);
}

body.mail-pane-resizing {
  cursor: col-resize;
  user-select: none;
}

.mail-folder-account {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 6px 8px 8px;
  border-bottom: 1px solid rgba(102, 113, 125, 0.16);
  border-radius: 4px;
}

.mail-folder-account.mail-all-inboxes {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 42px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid rgba(102, 113, 125, 0.16);
  background: transparent;
  color: #152033;
  font: inherit;
  text-align: left;
}

.mail-folder-account.mail-all-inboxes strong {
  font-size: 14px;
}

.mail-folder-account.mail-all-inboxes em {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e5edf8;
  color: #395477;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.mail-all-inboxes-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #e8eef8;
  color: #26364c;
}

.mail-all-inboxes-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.mail-folder-tree[hidden] {
  display: none !important;
}

.mail-folder-account[data-action] {
  cursor: pointer;
}

.mail-folder-account[data-action]:hover {
  background: rgba(255, 255, 255, 0.42);
}

.mail-folder-account.active {
  border-color: #bcd0ee;
  background: #eef3fb;
  box-shadow: inset 2px 0 0 #2f6fd6;
  color: #224d97;
}

.mail-folder-account strong,
.mail-folder-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-folder-account small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.mail-account-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #68bd8f;
}

.mail-folder-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
}

.mail-folder-tree {
  display: grid;
  gap: 1px;
  margin-top: 2px;
}

.mail-folder-group {
  display: grid;
  gap: 2px;
  padding: 4px 0 6px;
  border-bottom: 1px solid rgba(102, 113, 125, 0.1);
}

.mail-folder-group:last-child {
  border-bottom: 0;
}

.mail-folder-profile {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #152033;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-folder-profile:hover {
  background: rgba(255, 255, 255, 0.42);
}

.mail-folder-profile.active {
  background: rgba(31, 92, 174, 0.11);
  box-shadow: inset 3px 0 0 var(--accent);
}

.mail-folder-profile span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #dff3e9;
  color: #0f6b45;
  font-size: 10px;
  font-weight: 900;
}

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

.mail-folder-profile em {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #e5edf8;
  color: #395477;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.mail-folder-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-height: 32px;
  border-radius: 4px;
  background: transparent;
  color: #394651;
  cursor: pointer;
}

.mail-folder-row:hover {
  background: rgba(255, 255, 255, 0.42);
}

.mail-folder-row.active {
  background: rgba(31, 92, 174, 0.11);
  color: #1f5cae;
  box-shadow: inset 3px 0 0 var(--accent);
}

.mail-folder-row.pending {
  background: rgba(31, 92, 174, 0.08);
  color: #1f5cae;
}

.mail-folder-row.drop-target {
  background: #d8f5ea;
  color: var(--accent-dark);
  outline: 2px solid rgba(15, 118, 110, 0.45);
}

.mail-folder-row.drop-target-blocked {
  background: #fff1f0;
  color: #a83a31;
  outline: 2px solid rgba(190, 76, 67, 0.35);
}

.mail-folder-row.depth-1 {
  padding-left: 14px;
  color: #53616d;
}

.mail-folder-row.depth-2 {
  padding-left: 28px;
  color: #64727d;
}

.mail-folder-row.depth-3 {
  padding-left: 42px;
  color: #6e7a84;
}

.mail-folder-row.depth-4 {
  padding-left: 56px;
  color: #78828b;
}

.mail-folder-toggle-spacer {
  width: 16px;
  height: 16px;
}

.mail-folder-select {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-radius: 4px;
  padding: 0 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-folder-select span {
  display: grid;
  place-items: center;
  color: currentColor;
  font-size: 13px;
  opacity: 0.88;
}

.mail-folder-select strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-folder-toggle {
  display: grid;
  place-items: center;
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-left: 2px;
  margin-right: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: currentColor;
  font-size: 13px;
  font-weight: 850;
  opacity: 0.65;
  cursor: pointer;
}

.mail-folder-toggle:hover {
  background: rgba(31, 92, 174, 0.12);
  opacity: 1;
}

.mail-folder-select em {
  border-radius: 5px;
  padding: 1px 7px;
  background: rgba(31, 92, 174, 0.12);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.mail-folder-freshness {
  grid-column: 2 / -1;
  margin-top: -5px;
  overflow: hidden;
  color: #7a8790;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-folder-freshness.ok {
  color: #4f7a68;
}

.mail-folder-freshness.warning {
  color: #a84a3d;
}

.mail-folder-freshness.loading {
  color: #1f5cae;
}

.mail-folder-row.active .mail-folder-select em {
  background: rgba(31, 92, 174, 0.16);
}

.mail-folder-spinner {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  animation: mail-folder-pulse 0.82s ease-in-out infinite alternate;
}

.mail-folder-rail p {
  margin: 14px 6px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.mail-folder-status {
  margin: 4px 8px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.mail-folder-section {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 0;
}

.mail-folder-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 8px 2px;
  color: #6a7480;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mail-folder-section-header em {
  border-radius: 4px;
  padding: 2px 7px;
  background: #e6edf5;
  color: #557088;
  font-style: normal;
}

.mail-folder-section-list {
  display: grid;
  gap: 2px;
}

.mail-workspace .mail-table {
  margin-top: 0;
  max-height: calc(100vh - 148px);
  overflow: auto;
  align-content: start;
  grid-auto-rows: max-content;
  padding: 0;
  border-right: 0;
  background: #fff;
}

.mail-reader {
  position: static;
  max-height: calc(100vh - 148px);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0 34px 170px;
  scroll-padding-bottom: 170px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.mail-reader-header,
.mail-reader-meta-line,
.mail-reader-compact-meta,
.mail-reader-category-line,
.mail-routing-note,
.message-body-card,
.message-body-card .review-section-header,
.message-body-card .mail-preview,
.quick-summary-card,
.review-summary.compact {
  min-width: 0;
}

.mail-reader > *,
.mail-reader-header *,
.mail-routing-note *,
.mail-detail-disclosure *,
.mail-quick-summary *,
.assistant-original-quote *,
.email-text-fallback *,
.message-body-card * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.compose-thread-message {
  margin: 0 0 14px;
}

.compose-thread-message:last-child {
  margin-bottom: 0;
}

.compose-thread-message > p:first-child {
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 800;
}

.mail-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 8px 18px 10px;
  border-bottom: 1px solid #d9dee2;
  background: linear-gradient(180deg, #fbfdff 0%, #f7f9fc 100%);
}

.mail-command-summary {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.mail-command-summary strong {
  color: #152033;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.mail-command-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-command-group,
.mail-command-group-right,
.mail-command-bar .mail-toolbar-button,
.mail-command-bar .mail-toolbar-button.primary,
.mail-command-bar .mail-toolbar-button.danger,
.mail-command-bar .mail-toolbar-button:disabled {
  display: none;
}

.mail-reader-actions {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin: 0 -34px 22px;
  padding: 10px 34px;
  border-bottom: 1px solid #e1e5e8;
  background: rgba(248, 250, 251, 0.96);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  scrollbar-width: none;
}

.mail-reader-actions::-webkit-scrollbar {
  display: none;
}

.mail-toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}

.mail-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #d8dee3;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #1c252d;
  box-shadow: 0 1px 1px rgba(26, 32, 38, 0.03);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.mail-toolbar-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}

.mail-reply-all-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
  line-height: 1;
  color: currentColor;
}

.mail-reply-all-extra {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translate(3px, 0);
}

.mail-reply-all-base {
  display: block;
  font-size: 16px;
  line-height: 1;
  transform: translate(-1px, 0);
}

.mail-toolbar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-toolbar-button:hover {
  border-color: rgba(39, 110, 241, 0.28);
  background: #f5f9ff;
}

.mail-toolbar-button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.mail-toolbar-button.ai {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #33418b;
}

.mail-toolbar-button.accent {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4f91;
}

.mail-toolbar-button.icon {
  width: 36px;
  padding: 0;
  border-width: 1.5px;
  background: #f6f8fb;
  color: #2f3b47;
  box-shadow: 0 1px 2px rgba(26, 32, 38, 0.08);
}

.mail-toolbar-button.icon .mail-toolbar-icon {
  font-size: 16px;
  line-height: 1;
}

.mail-toolbar-button.active {
  border-color: #f3c44c;
  background: #fff8db;
  color: #8a6200;
}

.mail-toolbar-button.danger {
  border-color: rgba(188, 55, 48, 0.26);
  background: #fff5f3;
  color: #9a3028;
}

.mail-toolbar-button.warning {
  border-color: rgba(217, 119, 6, 0.28);
  background: #fff8ed;
  color: #a15c07;
}

.mail-toolbar-button.icon:not(.danger):not(.warning):not(.active):hover {
  background: #eaf2ff;
  color: #174ea6;
}

.mail-more-actions {
  position: relative;
}

.mail-more-actions > summary {
  list-style: none;
}

.mail-more-actions > summary::-webkit-details-marker {
  display: none;
}

.mail-more-actions:not([open]) .mail-more-actions-menu {
  display: none;
}

.mail-more-actions-menu {
  position: fixed;
  top: var(--mail-more-menu-top, 120px);
  left: var(--mail-more-menu-left, 12px);
  right: auto;
  z-index: 10000;
  display: grid;
  gap: 4px;
  min-width: 180px;
  max-height: min(420px, calc(100dvh - 24px));
  overflow: auto;
  padding: 8px;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.mail-more-actions-menu .mail-toolbar-button {
  justify-content: flex-start;
  width: 100%;
  border-radius: 7px;
  box-shadow: none;
}

.mail-reader-meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mail-reader-header {
  padding-bottom: 14px;
  border-bottom: 1px solid #e1e5e8;
}

.mail-message-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 22px 0 18px;
}

.mail-message-header .mail-avatar.large {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.mail-message-header-main {
  min-width: 0;
}

.mail-message-from-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  color: var(--muted);
}

.mail-message-from-line strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
}

.mail-message-from-line span {
  font-size: 13px;
  font-weight: 650;
}

.mail-contact-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  max-width: 100%;
  padding: 2px 6px;
  margin: -2px -6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-contact-link:hover,
.mail-contact-link:focus-visible {
  border-color: rgba(62, 122, 225, 0.32);
  background: rgba(62, 122, 225, 0.08);
  outline: none;
}

.mail-address-stack .mail-contact-link {
  display: inline;
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  vertical-align: baseline;
}

.mail-address-stack .mail-address-comma {
  margin-right: 4px;
}

.mail-contact-popover {
  position: fixed;
  z-index: 1600;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(125, 146, 174, 0.34);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 60px rgba(15, 32, 55, 0.22), 0 2px 10px rgba(15, 32, 55, 0.12);
  color: var(--ink);
}

.mail-contact-popover::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 58px;
  width: 16px;
  height: 16px;
  border-top: 1px solid rgba(125, 146, 174, 0.34);
  border-left: 1px solid rgba(125, 146, 174, 0.34);
  background: inherit;
  transform: rotate(45deg);
}

.mail-contact-popover.above::before {
  top: auto;
  bottom: -9px;
  transform: rotate(225deg);
}

.mail-contact-popover-top {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.mail-contact-popover-top .contact-popover-avatar {
  width: 76px;
  height: 76px;
  font-size: 24px;
}

.mail-contact-popover-top strong {
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.mail-contact-popover-top span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.mail-contact-popover-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-left: 92px;
}

.mail-contact-popover-actions .icon-button {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 19px;
}

.mail-contact-popover-lines {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid rgba(125, 146, 174, 0.18);
}

.mail-contact-popover-lines p {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
}

.mail-contact-popover-lines span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mail-contact-popover-lines a,
.mail-contact-popover-lines strong {
  overflow-wrap: anywhere;
  color: var(--accent);
  font-weight: 800;
}

.mail-contact-popover-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.mail-reader-header h2 {
  margin: 3px 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

.mail-address-stack {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 13px;
}

.mail-address-stack div {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: baseline;
}

.mail-address-stack span {
  flex: 0 0 auto;
  color: #7a8592;
  font-weight: 750;
}

.mail-address-stack strong {
  min-width: 0;
  overflow: hidden;
  color: #4e5b6a;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-message-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.mail-message-side time {
  color: #2f3a46;
  font-size: 13px;
  font-weight: 800;
}

.mail-reader-compact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.mail-reader-category-line {
  display: grid;
  grid-template-columns: minmax(130px, 170px) minmax(160px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.mail-reader-category-line select,
.mail-reader-category-line input {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.mail-routing-note,
.mail-intake-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 111, 214, 0.18);
  border-radius: 12px;
  background: rgba(47, 111, 214, 0.06);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
}

.mail-routing-note strong,
.mail-intake-note strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mail-routing-note span,
.mail-intake-note span {
  display: block;
}

.mail-detail-disclosure {
  margin-top: 10px;
  border: 1px solid rgba(216, 226, 239, 0.9);
  border-radius: 8px;
  background: #fff;
}

.mail-detail-disclosure summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.mail-detail-disclosure summary span {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mail-detail-disclosure summary strong {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  align-self: end;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-detail-disclosure summary em {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mail-detail-disclosure summary::-webkit-details-marker {
  display: none;
}

.mail-detail-disclosure .quick-labels,
.mail-detail-disclosure .review-summary {
  padding: 0 12px 12px;
}

.mail-quick-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(39, 110, 241, 0.2);
  border-radius: 8px;
  background: #edf5ff;
}

.mail-quick-summary span {
  display: block;
  margin-bottom: 4px;
  color: #2f5fba;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mail-quick-summary p {
  margin: 0;
  color: #1c332e;
  font-size: 14px;
  line-height: 1.42;
}

.mail-quick-summary strong {
  max-width: 210px;
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff;
  color: #356a60;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-body-card {
  margin-top: 0;
}

.message-body-card .mail-preview {
  max-height: none;
  color: #1c252d;
  font-size: 15px;
  line-height: 1.58;
}

body[data-view="mail"] .message-body-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 18px 0 0;
}

body[data-view="mail"] .message-body-card .review-section-header {
  display: none;
}

body[data-view="mail"] .message-body-card .mail-preview {
  max-width: 980px;
}

body[data-view="mail"] .email-html-preview {
  border-radius: 0;
  border-color: #e3e7eb;
  background: #fff;
}

body[data-view="mail"] .mail-original-chain {
  max-width: 980px;
  margin: 14px 0 0;
  border: 1px solid #dbe5f0;
  border-radius: 14px;
  background: #f8fbff;
  overflow: hidden;
}

body[data-view="mail"] .mail-original-chain summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e2eaf3;
  color: #5f6f85;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

body[data-view="mail"] .mail-original-chain summary span {
  color: #17315f;
  font-size: 14px;
}

body[data-view="mail"] .mail-original-chain summary strong {
  color: #738197;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-view="mail"] .mail-original-chain .mail-preview {
  padding: 14px 16px;
  background: #fff;
}

body[data-view="mail"] .mail-analysis-details {
  margin-top: 10px;
  background: rgba(248, 251, 255, 0.78);
}

body[data-view="mail"] .mail-analysis-details .mail-quick-summary {
  margin-top: 4px;
}

.email-text-fallback .mail-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #e1e5e8;
  border-radius: 8px;
  background: #fbfcfd;
}

.mail-preview a,
.mail-inline-link {
  color: #1f5cae;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.mail-preview a:hover,
.mail-inline-link:hover {
  color: #2f6fd6;
}

.mail-safety-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 18px;
  border: 0;
  border-top: 1px solid #e0d4be;
  border-bottom: 1px solid #e0d4be;
  border-radius: 0;
  background: #fff8ec;
  color: #795118;
  font-size: 13px;
}

.mail-safety-banner strong {
  white-space: nowrap;
}

.mail-safety-banner span {
  color: #795118;
}

.mail-tools {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(280px, 1fr) minmax(160px, 220px);
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid #d9dee2;
  background: #fbfcfd;
}

.mail-tools input,
.mail-tools select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.mail-tools input:focus,
.mail-tools select:focus {
  outline: 3px solid rgba(39, 110, 241, 0.16);
  border-color: rgba(39, 110, 241, 0.55);
}

.mail-source {
  margin: 0;
  padding: 7px 18px;
  border-bottom: 1px solid #e4e8eb;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mail-sync-pill,
.mail-utility-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: #172233;
}

.mail-sync-pill > span:first-child,
.mail-sync-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #56bd82;
  box-shadow: 0 0 0 4px rgba(86, 189, 130, 0.14);
  flex: 0 0 auto;
}

.mail-sync-pill.loading > span:first-child,
.mail-sync-dot.loading {
  background: #2f6fed;
  box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.15);
}

.mail-sync-pill.warning > span:first-child,
.mail-sync-dot.warning {
  background: #d67a00;
  box-shadow: 0 0 0 4px rgba(214, 122, 0, 0.16);
}

.mail-sync-source {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-sync-error {
  color: #9a5a00;
}

.mail-sync-retry {
  min-height: 26px;
  padding: 3px 10px;
}

body[data-theme="dark"] .mail-sync-pill,
body[data-theme="dark"] .mail-utility-sync {
  color: #e5ecf8;
}

body[data-theme="dark"] .mail-sync-error {
  color: #f3c46f;
}

.mail-insights {
  display: block;
  margin-top: 12px;
}

.mail-insights:empty {
  display: none;
}

.mail-insights article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mail-insights span {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 8px;
  background: #e6f1ee;
  color: var(--accent-dark);
  font-weight: 850;
}

.mail-insights strong {
  display: block;
  margin-bottom: 3px;
}

.mail-insights p {
  margin: 0;
  font-size: 12px;
}

.mail-triage-panel {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mail-triage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mail-triage-head strong {
  display: block;
  font-size: 14px;
}

.mail-triage-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.mail-triage-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.mail-triage-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.mail-triage-filter span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.mail-triage-filter strong {
  color: var(--accent-dark);
  font-size: 13px;
}

.mail-triage-filter.active {
  border-color: rgba(42, 122, 100, 0.55);
  background: #e6f1ee;
}

.mail-triage-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.mail-triage-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  flex: 0 0 300px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.mail-triage-card.selected {
  border-color: rgba(42, 122, 100, 0.55);
  box-shadow: 0 0 0 2px rgba(42, 122, 100, 0.1);
}

.mail-triage-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-triage-main strong,
.mail-triage-main p,
.mail-triage-main small,
.mail-triage-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-triage-main strong {
  grid-column: 2;
  font-size: 13px;
}

.mail-triage-main p,
.mail-triage-main small {
  grid-column: 2;
}

.mail-triage-main p,
.mail-triage-main small,
.mail-triage-note,
.mail-triage-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.mail-triage-type {
  grid-row: 1 / span 3;
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef3f5;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.mail-triage-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.mail-triage-actions .ghost-button {
  min-height: 30px;
  padding: 5px 9px;
}

.mail-avatar.large {
  width: 52px;
  height: 52px;
  font-size: 16px;
}

.mail-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid #e4e8eb;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.mail-row > :not(.mail-swipe-actions) {
  position: relative;
  z-index: 1;
  transition: transform 0.18s ease;
}

.mail-row.swiping > :not(.mail-swipe-actions) {
  transition: none;
  transform: translateX(var(--swipe-x, 0));
}

.mail-row.swipe-open.swipe-left > :not(.mail-swipe-actions) {
  transform: translateX(-156px);
}

.mail-row.swipe-open.swipe-right > :not(.mail-swipe-actions) {
  transform: translateX(132px);
}

.mail-swipe-actions {
  position: absolute;
  inset-block: 0;
  z-index: 0;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  pointer-events: none;
}

.mail-row.swipe-open .mail-swipe-actions,
.mail-row.swiping .mail-swipe-actions {
  display: flex;
  pointer-events: auto;
}

.mail-swipe-actions-left {
  left: 0;
  justify-content: flex-start;
}

.mail-swipe-actions-right {
  right: 0;
  justify-content: flex-end;
}

.mail-swipe-button {
  min-width: 54px;
  min-height: 36px;
  border: 1px solid rgba(39, 110, 241, 0.22);
  border-radius: 999px;
  background: #eef5ff;
  color: #245cb5;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.mail-swipe-button.warning {
  border-color: rgba(190, 111, 30, 0.28);
  background: #fff4e8;
  color: #9b5517;
}

.mail-swipe-button.danger {
  border-color: rgba(180, 63, 54, 0.28);
  background: #fff0ee;
  color: #a33a32;
}

.mail-row:hover {
  background: #f7faf9;
  box-shadow: none;
}

.mail-hover-actions {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.native-shell) .mail-hover-actions {
    position: absolute;
    top: 7px;
    right: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dce3e8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 5px 16px rgba(32, 43, 54, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
  }

  body:not(.native-shell) .mail-row:hover .mail-hover-actions,
  body:not(.native-shell) .mail-row:focus-within .mail-hover-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  body:not(.native-shell) .mail-row:hover .mail-row-right,
  body:not(.native-shell) .mail-row:focus-within .mail-row-right {
    visibility: hidden;
  }
}

.mail-hover-action {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #536171;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.mail-hover-action:hover,
.mail-hover-action:focus-visible {
  outline: none;
  background: #eaf2ff;
  color: #245cb5;
}

.mail-hover-action.active {
  color: #d89b00;
}

.mail-hover-action.warning:hover,
.mail-hover-action.warning:focus-visible {
  background: #fff1dd;
  color: #945015;
}

.mail-hover-action.danger:hover,
.mail-hover-action.danger:focus-visible {
  background: #ffebe8;
  color: #a33a32;
}

.mail-hover-action:disabled {
  cursor: wait;
  opacity: 0.45;
}

body[data-theme="dark"] .mail-hover-actions {
  border-color: #3a4652;
  background: rgba(31, 39, 48, 0.98);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .mail-hover-action {
  color: #c1cad4;
}

body[data-theme="dark"] .mail-hover-action:hover,
body[data-theme="dark"] .mail-hover-action:focus-visible {
  background: #29466d;
  color: #edf5ff;
}

body[data-theme="dark"] .mail-hover-action.warning:hover,
body[data-theme="dark"] .mail-hover-action.warning:focus-visible {
  background: #5a4129;
  color: #ffd7a3;
}

body[data-theme="dark"] .mail-hover-action.danger:hover,
body[data-theme="dark"] .mail-hover-action.danger:focus-visible {
  background: #5b3434;
  color: #ffc0ba;
}

.mail-row[draggable="true"] {
  cursor: grab;
}

.mail-row[draggable="true"]:active,
.mail-row.dragging {
  cursor: grabbing;
}

.mail-row.dragging {
  opacity: 0.55;
}

.mail-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 164) 64% 91%);
  color: hsl(var(--avatar-hue, 164) 54% 28%);
  font-size: 11px;
  font-weight: 900;
  margin-top: 2px;
}

.contact-row .mail-avatar,
.address-row .mail-avatar {
  width: 38px;
  height: 38px;
  margin-top: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px hsl(var(--avatar-hue, 164) 42% 74% / 0.75),
    0 8px 18px rgba(26, 32, 38, 0.1);
  font-size: 12px;
}

.address-detail-card .mail-avatar.large {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 1px hsl(var(--avatar-hue, 164) 42% 72% / 0.78),
    0 12px 26px rgba(26, 32, 38, 0.12);
}

.mail-row.has-approval {
  background: #fbfefd;
}

.mail-row.unread .mail-row-title strong,
.mail-row.unread .mail-row-main p {
  color: var(--ink);
  font-weight: 850;
}

.mail-row.read {
  opacity: 0.86;
}

.mail-row.selected {
  background: linear-gradient(135deg, #2f73d0 0%, #477fd5 100%);
  color: #fff;
  box-shadow: none;
}

body.native-shell .mail-row.selected {
  background: #e8f1ff;
  color: #17202b;
  box-shadow: inset 4px 0 0 #2f73d0;
}

body.native-shell .mail-row.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(47, 115, 208, 0.18);
}

.mail-row.action-pending {
  cursor: wait;
}

.mail-row.action-pending .mail-row-main {
  opacity: 0.76;
}

.mail-status-chip.pending {
  background: #eef5ff;
  color: #245ca8;
}

.mail-star {
  color: #f2b600;
  margin-right: 5px;
}

.mail-row p {
  margin: 3px 0 0;
}

.mail-row-main {
  min-width: 0;
}

.mail-row-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.mail-row-title time {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.mail-row-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.mail-reply-indicator {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(42, 103, 202, 0.28);
  border-radius: 999px;
  background: #eef5ff;
  color: #285dad;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.mail-reply-indicator.draft {
  border-color: rgba(182, 122, 28, 0.32);
  background: #fff7e8;
  color: #9b6819;
}

.mail-reply-indicator.forwarded {
  border-color: rgba(39, 118, 107, 0.28);
  background: #eefaf7;
  color: #267065;
}

.mail-row-main strong,
.mail-row-main p {
  overflow-wrap: anywhere;
}

.mail-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mail-row-thread-summary {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.mail-row-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(102, 113, 125, 0.18);
  border-radius: 999px;
  padding: 0 8px;
  background: #f8faf9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mail-row.selected .mail-row-title time,
.mail-row.selected .attachment-indicator,
.mail-row.selected .mail-reply-indicator,
.mail-row.selected .mail-row-main p,
.mail-row.selected .mail-row-main strong,
.mail-row.selected .mail-row-thread-summary {
  color: #fff;
}

body.native-shell .mail-row.selected .mail-row-title time,
body.native-shell .mail-row.selected .attachment-indicator,
body.native-shell .mail-row.selected .mail-reply-indicator,
body.native-shell .mail-row.selected .mail-row-main p,
body.native-shell .mail-row.selected .mail-row-main strong,
body.native-shell .mail-row.selected .mail-row-thread-summary {
  color: inherit;
}

body.native-compose-window .draft-detail-label,
body.native-compose-window .compose-safety-note {
  display: none;
}

.compose-header-fields {
  display: grid;
  gap: 0;
  padding: 16px 0 0;
  background: #fff;
}

.compose-header-fields div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid #dedede;
}

.compose-header-fields span {
  color: #6f6f6f;
  font-weight: 760;
}

.compose-header-fields strong {
  min-width: 0;
  overflow: hidden;
  color: #1f252b;
  font-size: 15px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-header-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1f252b;
  font: inherit;
  font-size: 15px;
  font-weight: 740;
}

.compose-header-input::placeholder {
  color: #9aa3af;
  font-weight: 650;
}

.compose-header-input:focus {
  color: #123c83;
}

.mail-row.selected .mail-avatar:not(.avatar-loaded) {
  background: hsl(var(--avatar-hue, 164) 64% 91%);
  color: hsl(var(--avatar-hue, 164) 54% 28%);
}

.mail-row.selected .mini-button {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

body.native-shell .mail-row.selected .mini-button {
  background: #fff;
  border-color: rgba(47, 115, 208, 0.22);
  color: #1f5cae;
}

.mail-row.selected .mail-label-chip,
.mail-row.selected .mail-recipient-chip,
.mail-row.selected .mail-status-chip,
.mail-row.selected .mail-route-pill {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

body.native-shell .mail-row.selected .mail-label-chip,
body.native-shell .mail-row.selected .mail-recipient-chip,
body.native-shell .mail-row.selected .mail-status-chip,
body.native-shell .mail-row.selected .mail-route-pill {
  border-color: rgba(47, 115, 208, 0.2);
  background: rgba(255, 255, 255, 0.62);
  color: #334155;
}

.mail-row.conversation-row {
  grid-template-columns: 38px minmax(0, 1fr);
}

.mail-row.conversation-row .mail-avatar {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 3px rgba(39, 110, 241, 0.08);
}

.mail-row.selected .mail-category-pill {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.9);
  color: #1f5cae;
  box-shadow: none;
}

body.native-shell .mail-row.selected .mail-category-pill {
  border-color: rgba(47, 115, 208, 0.24);
  background: #fff;
  color: #1f5cae;
}

.mail-row-meta .mail-category-pill {
  border-color: transparent;
  color: #fff;
  font-weight: 900;
}

.mail-row-meta .mail-route-pill {
  border-color: rgba(39, 110, 241, 0.18);
  background: #eef4ff;
  color: var(--accent-dark);
  font-weight: 900;
}

.mail-row-meta .mail-recipient-chip {
  border-color: rgba(72, 92, 120, 0.22);
  background: #f1f5f9;
  color: #42526a;
}

.mail-category-pill.order {
  background: #0f766e;
}

.mail-category-pill.pricing {
  background: #7c3aed;
}

.mail-category-pill.inventory {
  background: #2563eb;
}

.mail-category-pill.tracking {
  background: #0e7490;
}

.mail-category-pill.rma {
  background: #be123c;
}

.mail-category-pill.campaign {
  background: #b45309;
}

.mail-category-pill.calendar {
  background: #0e7490;
}

.mail-category-pill.customer {
  background: #15803d;
}

.mail-category-pill.vendor {
  background: #9b7a2f;
}

.mail-category-pill.internal {
  background: #475569;
}

.mail-category-pill.waiting {
  background: #a16207;
}

.mail-category-pill.done {
  background: #64748b;
}

.mail-category-pill.review {
  background: #66717d;
}

.mail-route-pill.route-po {
  border-color: rgba(15, 118, 110, 0.22);
  background: #e7f7f3;
  color: #0f766e;
}

.mail-route-pill.route-relay {
  border-color: rgba(14, 116, 144, 0.22);
  background: #e7f4fa;
  color: #0e7490;
}

.mail-route-pill.route-file {
  border-color: rgba(71, 85, 105, 0.22);
  background: #eef2f7;
  color: #475569;
}

.mail-route-pill.route-reply {
  border-color: rgba(37, 99, 235, 0.22);
  background: #edf4ff;
  color: #1d4ed8;
}

.mail-route-pill.route-review {
  border-color: rgba(102, 113, 125, 0.22);
  background: #f3f5f7;
  color: #66717d;
}

.mail-row-meta .mail-label-chip {
  border-color: rgba(39, 110, 241, 0.2);
  background: #edf5ff;
  color: var(--accent-dark);
}

.mail-row-meta .thread-count {
  border-color: rgba(15, 118, 110, 0.22);
  background: #e6f5f1;
  color: #0f766e;
}

.mail-row-meta .mail-label-chip.success {
  border-color: rgba(22, 163, 74, 0.24);
  background: #e8f8ee;
  color: #15803d;
}

.mail-row-meta .mail-status-chip {
  background: #fff;
}

.mail-category-editor {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.mail-category-editor label {
  display: grid;
  gap: 6px;
}

.mail-rules-list {
  display: grid;
  gap: 12px;
}

.mail-rule-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.mail-rule-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.mail-rule-enabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
}

.mail-rule-enabled input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid rgba(148, 163, 184, 0.72);
  border-radius: 999px;
  background: #e2e8f0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.mail-rule-enabled input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  transition: transform 0.16s ease;
}

.mail-rule-enabled input:checked {
  border-color: rgba(37, 99, 235, 0.82);
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.mail-rule-enabled input:checked::after {
  transform: translateX(18px);
}

.mail-rule-meta {
  align-items: end;
}

.mail-rule-condition-list {
  display: grid;
  gap: 8px;
}

.mail-rule-condition {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(150px, 200px) minmax(0, 1fr) 96px auto;
  gap: 8px;
  align-items: center;
}

.mail-rule-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.mail-role-control-list {
  display: grid;
  gap: 12px;
}

.mail-role-control-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.mail-role-control-header {
  display: grid;
  gap: 3px;
}

.mail-role-control-header h4 {
  margin: 0;
  font-size: 16px;
}

.mail-role-control-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.mail-role-control-columns {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(320px, 1.25fr);
  gap: 14px;
}

#mail-task-instruction {
  min-height: 130px;
}

.mail-pager-bar {
  margin: 0;
  padding: 0 18px;
  border-bottom: 1px solid rgba(214, 223, 235, 0.92);
}

.mail-utility-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 4px 0;
}

.mail-utility-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  align-items: center;
}

.mail-utility-stats article {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mail-utility-stats strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mail-utility-stats span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.mail-pagination {
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mail-pagination span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.mail-page-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  min-width: 40px;
  justify-content: center;
  padding-inline: 0;
}

.mail-page-step span[aria-hidden="true"] {
  font-size: 18px;
  line-height: 1;
}

.mail-loading {
  margin: 14px 0;
  border: 1px solid rgba(39, 110, 241, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  background: #f5f9ff;
  color: var(--accent-dark);
  font-weight: 800;
}

.mail-loading-copy {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.mail-loading-copy strong {
  font-size: 14px;
}

.mail-loading-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mail-loading-copy em {
  color: #48678f;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.mail-loading-skeleton {
  display: grid;
  gap: 10px;
}

.mail-loading.error {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  border-color: rgba(151, 59, 48, 0.25);
  background: #fff7f5;
  color: #973b30;
}

.mail-loading.retrying {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.mail-loading.retrying .mail-loading-copy {
  margin-bottom: 0;
}

.mail-loading.error span {
  grid-column: 1;
  color: var(--muted);
  font-weight: 700;
}

.mail-loading.error button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.mail-pane-loading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  border: 1px dashed rgba(39, 110, 241, 0.24);
  border-radius: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.92), rgba(255, 255, 255, 0.96));
  color: var(--ink);
}

.mail-pane-loading strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.mail-pane-loading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.mail-pane-loading-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.mail-pane-spinner {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 3px solid rgba(39, 110, 241, 0.18);
  border-top-color: #276ef1;
  border-radius: 999px;
  animation: mail-pane-spin 0.8s linear infinite;
}

.mail-pane-loading-lines {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  margin-top: 6px;
}

.mail-pane-loading-lines span {
  position: relative;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(31, 92, 174, 0.08);
}

.mail-pane-loading-lines span:nth-child(1) {
  width: 92%;
}

.mail-pane-loading-lines span:nth-child(2) {
  width: 74%;
}

.mail-pane-loading-lines span:nth-child(3) {
  width: 58%;
}

.mail-pane-loading-lines span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: skeleton-shimmer 1.2s infinite;
}

.mail-preview-fallback-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

body[data-theme="dark"][data-view="mail"] .workspace {
  background: #071225;
}

body[data-theme="dark"] .mail-workspace {
  border-color: rgba(226, 236, 249, 0.16);
  background: #0b1526;
}

body[data-theme="dark"] .mail-folder-rail {
  border-color: rgba(226, 236, 249, 0.14);
  background: #0f1c2f;
}

body[data-theme="dark"] .mail-folder-account {
  border-color: rgba(226, 236, 249, 0.12);
}

body[data-theme="dark"] .mail-folder-row {
  color: #d4deec;
}

body[data-theme="dark"] .mail-folder-group {
  border-color: rgba(226, 236, 249, 0.12);
}

body[data-theme="dark"] .mail-folder-profile {
  color: #f3f7ff;
}

body[data-theme="dark"] .mail-folder-profile:hover {
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .mail-folder-profile span {
  background: rgba(52, 211, 153, 0.16);
  color: #a6f3d0;
}

body[data-theme="dark"] .mail-all-inboxes-icon,
body[data-theme="dark"] .mail-folder-account.mail-all-inboxes em {
  background: rgba(125, 169, 232, 0.14);
  color: #b9d4fa;
}

body[data-theme="dark"] .mail-folder-profile em {
  background: rgba(91, 149, 255, 0.16);
  color: #cfe2ff;
}

body[data-theme="dark"] .mail-folder-status {
  color: rgba(212, 222, 236, 0.7);
}

body[data-theme="dark"] .mail-folder-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .mail-folder-row.active {
  background: rgba(91, 149, 255, 0.18);
  color: #d6e6ff;
}

body[data-theme="dark"] .mail-folder-row.drop-target {
  background: rgba(45, 212, 191, 0.14);
  color: #9bf1de;
  outline-color: rgba(45, 212, 191, 0.46);
}

body[data-theme="dark"] .mail-folder-row.drop-target-blocked {
  background: rgba(255, 119, 105, 0.15);
  color: #ffc6be;
  outline-color: rgba(255, 161, 151, 0.36);
}

body[data-theme="dark"] .mail-folder-select em {
  background: rgba(91, 149, 255, 0.2);
  color: #cfe2ff;
}

body[data-theme="dark"] .mail-workspace .mail-table,
body[data-theme="dark"] .mail-reader {
  border-color: rgba(226, 236, 249, 0.14);
  background: #0b1526;
  color: var(--ink);
}

body[data-theme="dark"] .mail-reader-actions,
body[data-theme="dark"] .mail-pagination,
body[data-theme="dark"] .mail-tools,
body[data-theme="dark"] .mail-source {
  border-color: rgba(226, 236, 249, 0.14);
  background: rgba(11, 21, 38, 0.94);
  color: var(--ink);
}

body[data-theme="dark"] .mail-toolbar-button {
  border-color: rgba(226, 236, 249, 0.18);
  background: #111f35;
  color: #e9f1ff;
}

body[data-theme="dark"] .mail-toolbar-button:hover {
  background: #182b47;
  border-color: rgba(91, 149, 255, 0.36);
}

body[data-theme="dark"] .mail-toolbar-button.ai {
  border-color: rgba(91, 149, 255, 0.28);
  background: rgba(91, 149, 255, 0.16);
  color: #d9e8ff;
}

body[data-theme="dark"] .mail-toolbar-button.accent {
  border-color: rgba(91, 149, 255, 0.24);
  background: rgba(91, 149, 255, 0.12);
  color: #cfe2ff;
}

body[data-theme="dark"] .mail-toolbar-button.active {
  border-color: rgba(243, 196, 76, 0.35);
  background: rgba(243, 196, 76, 0.16);
  color: #ffd86b;
}

body[data-theme="dark"] .mail-toolbar-button.danger {
  border-color: rgba(255, 180, 174, 0.3);
  background: rgba(248, 113, 113, 0.12);
  color: #ffb4ae;
}

body[data-theme="dark"] .mail-toolbar-button.warning {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.13);
  color: #f8c879;
}

body[data-theme="dark"] .mail-toolbar-button.icon:not(.danger):not(.warning):not(.active) {
  border-color: rgba(176, 196, 222, 0.26);
  background: rgba(226, 236, 249, 0.08);
  color: #dbe8f8;
}

body[data-theme="dark"] .mail-command-bar {
  border-color: rgba(226, 236, 249, 0.14);
  background: linear-gradient(180deg, rgba(11, 21, 38, 0.95) 0%, rgba(11, 21, 38, 0.88) 100%);
}

body[data-theme="dark"] .mail-command-summary strong {
  color: #f2f6fc;
}

body[data-theme="dark"] .mail-command-summary span {
  color: rgba(212, 222, 236, 0.7);
}

body[data-theme="dark"] .mail-command-bar .mail-toolbar-button {
  border-color: rgba(226, 236, 249, 0.18);
  background: #111f35;
  color: #e9f1ff;
}

body[data-theme="dark"] .mail-command-bar .mail-toolbar-button.primary {
  background: #4e7ff0;
}

body[data-theme="dark"] .mail-command-bar .mail-toolbar-button.danger {
  background: rgba(248, 113, 113, 0.12);
}

body[data-theme="dark"] .mail-folder-section {
  border-color: rgba(226, 236, 249, 0.12);
}

body[data-theme="dark"] .mail-folder-section-header {
  color: rgba(212, 222, 236, 0.68);
}

body[data-theme="dark"] .mail-folder-section-header em {
  background: rgba(91, 149, 255, 0.16);
  color: #cfe2ff;
}

body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-profile-strip {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"] .mail-profile-switch {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.2);
  color: #eff6ff;
}

body[data-theme="dark"] .mail-profile-switch.active {
  background: rgba(35, 62, 106, 0.96);
  border-color: rgba(122, 171, 255, 0.72);
  box-shadow: inset 4px 0 0 #72a7ff;
}

body[data-theme="dark"] .mail-profile-switch span {
  background: rgba(52, 211, 153, 0.16);
  color: #a6f3d0;
}

body[data-theme="dark"] .mail-profile-switch small,
body[data-theme="dark"] .mail-profile-switch em {
  color: rgba(226, 236, 249, 0.72);
}

body[data-theme="dark"] .mail-profile-switch em.sync-error {
  color: #ffb7b1;
}

body[data-theme="dark"] .mail-command-bar {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"] .mail-command-summary strong {
  color: #eff6ff;
}

body[data-theme="dark"] .mail-command-summary span {
  color: rgba(226, 236, 249, 0.72);
}

body[data-theme="dark"] .mail-reader-header {
  border-color: rgba(226, 236, 249, 0.14);
}

body[data-theme="dark"] .mail-reader-category-line select,
body[data-theme="dark"] .mail-reader-category-line input,
body[data-theme="dark"] .mail-tools input,
body[data-theme="dark"] .mail-tools select {
  border-color: rgba(226, 236, 249, 0.22);
  background: #101d31;
  color: var(--ink);
}

body[data-theme="dark"] .mail-row {
  border-color: rgba(226, 236, 249, 0.12);
  background: #0f1c2f;
  color: var(--ink);
}

body[data-theme="dark"] .mail-row:hover {
  background: #14243a;
}

body[data-theme="dark"] .mail-row.has-approval {
  background: #102033;
}

body[data-theme="dark"] .mail-row.read {
  opacity: 0.82;
}

body[data-theme="dark"] .mail-row.selected {
  background: linear-gradient(135deg, #1f5fbf 0%, #3f7ee8 100%);
  color: #fff;
}

body[data-theme="dark"] .mail-row.multi-selected:not(.selected) {
  background: rgba(53, 112, 191, 0.28);
  box-shadow: inset 4px 0 0 rgba(124, 174, 255, 0.7);
}

body[data-theme="dark"] .mail-swipe-button {
  background: rgba(91, 149, 255, 0.18);
  border-color: rgba(124, 174, 255, 0.38);
  color: #dceaff;
}

body[data-theme="dark"] .mail-swipe-button.warning {
  background: rgba(243, 196, 76, 0.16);
  border-color: rgba(243, 196, 76, 0.36);
  color: #f5d88e;
}

body[data-theme="dark"] .mail-swipe-button.danger {
  background: rgba(255, 119, 105, 0.15);
  border-color: rgba(255, 161, 151, 0.36);
  color: #ffc6be;
}

body[data-theme="dark"] .mail-avatar {
  background: hsl(var(--avatar-hue, 164) 46% 22%);
  color: hsl(var(--avatar-hue, 164) 62% 78%);
}

body[data-theme="dark"] .contact-row .mail-avatar,
body[data-theme="dark"] .address-row .mail-avatar,
body[data-theme="dark"] .address-detail-card .mail-avatar.large {
  border-color: rgba(15, 29, 48, 0.94);
  box-shadow:
    0 0 0 1px hsl(var(--avatar-hue, 164) 42% 46% / 0.8),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .mail-row-meta span {
  border-color: rgba(226, 236, 249, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #c6d2e1;
}

body[data-theme="dark"] .mail-row-meta .mail-label-chip {
  border-color: rgba(91, 149, 255, 0.25);
  background: rgba(91, 149, 255, 0.16);
  color: #cfe2ff;
}

body[data-theme="dark"] .mail-row-meta .mail-recipient-chip {
  border-color: rgba(226, 236, 249, 0.18);
  background: rgba(226, 236, 249, 0.1);
  color: #d9e5f6;
}

body[data-theme="dark"] .mail-row-meta .mail-status-chip {
  background: rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .mail-row-meta .thread-count {
  border-color: rgba(45, 212, 191, 0.25);
  background: rgba(45, 212, 191, 0.13);
  color: #9ff0e6;
}

body[data-theme="dark"] .mail-row-meta .mail-label-chip.success {
  border-color: rgba(74, 222, 128, 0.25);
  background: rgba(74, 222, 128, 0.13);
  color: #b9f6d2;
}

body[data-theme="dark"] .mail-detail-disclosure,
body[data-theme="dark"] .assistant-panel,
body[data-theme="dark"] .attachment-card,
body[data-theme="dark"] .attachment-row,
body[data-theme="dark"] .attachment-preview-unavailable,
body[data-theme="dark"] .attachment-menu-panel,
body[data-theme="dark"] .attachment-choice,
body[data-theme="dark"] .mail-loading,
body[data-theme="dark"] .conversation-message,
body[data-theme="dark"] .mail-triage-panel,
body[data-theme="dark"] .mail-triage-card,
body[data-theme="dark"] .mail-insights article {
  border-color: rgba(226, 236, 249, 0.16);
  background: #0f1c2f;
  color: var(--ink);
}

body[data-theme="dark"] .mail-triage-filter,
body[data-theme="dark"] .mail-triage-type {
  border-color: rgba(226, 236, 249, 0.16);
  background: rgba(226, 236, 249, 0.08);
  color: #d8e0ee;
}

body[data-theme="dark"] .mail-triage-filter.active {
  border-color: rgba(109, 211, 179, 0.42);
  background: rgba(39, 174, 129, 0.18);
}

body[data-theme="dark"] .mail-loading.error {
  border-color: rgba(255, 180, 174, 0.34);
  background: rgba(127, 29, 29, 0.18);
  color: #ffb4ae;
}

body[data-theme="dark"] .mail-loading {
  border-color: rgba(91, 149, 255, 0.2);
  background: rgba(15, 28, 47, 0.88);
  color: #d8e6ff;
}

body[data-theme="dark"] .mail-loading-copy span {
  color: rgba(212, 222, 236, 0.72);
}

body[data-theme="dark"] .mail-quick-summary {
  border-color: rgba(91, 149, 255, 0.3);
  background: rgba(91, 149, 255, 0.13);
}

body[data-theme="dark"] .mail-quick-summary span {
  color: #9ec7ff;
}

body[data-theme="dark"] .mail-quick-summary p {
  color: #dceaff;
}

body[data-theme="dark"] .mail-quick-summary strong {
  background: rgba(255, 255, 255, 0.08);
  color: #b6f0df;
}

body[data-theme="dark"] .message-body-card .mail-preview,
body[data-theme="dark"] .email-text-fallback .mail-preview {
  border-color: rgba(226, 236, 249, 0.14);
  background: #0f1c2f;
  color: #e8eef7;
}

.mail-workflow-strip {
  margin-top: 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.96));
  padding: 8px 10px;
}

.mail-compact-details {
  margin-top: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.mail-compact-details > summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

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

.mail-compact-details > summary::before {
  content: "▸";
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
}

.mail-compact-details[open] > summary::before {
  content: "▾";
}

.mail-compact-details > summary span {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mail-compact-details > summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-compact-details > summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.mail-compact-details[open] {
  padding-bottom: 10px;
}

.mail-compact-details[open] > :not(summary) {
  margin-right: 10px;
  margin-left: 10px;
}

.mail-compact-details:not([open]) {
  overflow: hidden;
}

.mail-compact-details:not([open]) > :not(summary) {
  display: none !important;
}

.mail-compact-details .workflow-head {
  margin-top: 2px;
}

.mail-compact-details.mailbox-actions .mail-action-toolbar {
  margin-top: 2px;
}

.mail-compact-details.mailbox-actions > summary {
  grid-template-columns: auto max-content minmax(0, 1fr);
  align-items: center;
  min-height: 40px;
  padding: 7px 12px;
}

.mail-compact-details.mailbox-actions > summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

.mail-compact-details.mailbox-actions > summary em {
  display: none;
}

.mail-compact-details.mailbox-actions[open] {
  padding-bottom: 14px;
}

.mail-compact-details.mailbox-actions[open] > :not(summary) {
  margin-right: 14px;
  margin-left: 14px;
}

.mail-compact-details.mailbox-actions .mail-action-toolbar {
  margin-top: 6px;
}

.mail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e9f2ef;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 850;
}

.mail-pill.order,
.mail-pill.inventory,
.mail-pill.tracking,
.mail-pill.pricing,
.mail-pill.rma,
.mail-pill.campaign {
  color: #fff;
}

.mail-pill.order { background: #0f766e; }

.mail-pill.inventory { background: #2563eb; }

.mail-pill.tracking { background: #0e7490; }

.mail-pill.pricing { background: #7c3aed; }

.mail-pill.rma { background: #be123c; }

.mail-pill.campaign { background: #b45309; }

.mail-grid article,
.file-list article,
.tool-grid article,
.rules-list article {
  padding: 16px;
}

.mail-grid span {
  display: inline;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dark);
}

body[data-view="mail"] .mail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 34px;
  align-items: center;
  padding: 5px 18px;
  border-bottom: 1px solid #e4e8eb;
  background: #fff;
}

body[data-view="mail"] .mail-grid article {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-view="mail"] .mail-grid strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body[data-view="mail"] .mail-grid span {
  font-size: 12px;
  color: var(--ink);
}

.appointment-invitee-chip .compose-recipient-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.signature-block {
  margin-top: 18px;
  color: var(--ink);
}

.signature-setting {
  min-height: 150px;
  max-height: 240px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}

.signature-setting p,
.signature-setting div {
  margin: 0 0 8px;
}

.signature-setting br + br {
  display: none;
}

.mail-preview {
  max-height: 240px;
  margin: 0;
  padding-right: 8px;
  overflow: auto;
  color: #35414c;
  font-size: 15px;
  line-height: 1.62;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-preview p {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-preview p:last-child {
  margin-bottom: 0;
}

.mail-preview .quoted {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 3px solid rgba(102, 113, 125, 0.22);
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-preview-items {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.mail-preview-items li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.mail-preview-items strong {
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-preview-items span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-preview-items em {
  grid-column: 2;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mail-action-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.mail-action-toolbar .ghost-button {
  min-height: 36px;
  background: transparent;
  box-shadow: none;
}

.mail-action-toolbar .primary-button {
  min-height: 36px;
}

.mail-action-toolbar .ghost-button:hover {
  background: var(--panel-strong);
}

.forward-modal-grid,
.compose-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.compose-dialog .compose-modal-grid {
  gap: 10px 12px;
}

.forward-modal-grid label,
.compose-modal-grid label {
  display: grid;
  gap: 6px;
}

.compose-dialog .compose-modal-grid label {
  gap: 5px;
}

.forward-modal-grid .wide,
.compose-modal-grid .wide {
  grid-column: 1 / -1;
}

.compose-recipient-field {
  position: relative;
}

.compose-recipient-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  width: 100%;
}

.compose-recipient-input-row .modal-input[hidden] {
  display: none;
}

.compose-recipient-suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: none;
  max-height: 300px;
  overflow: auto;
  border: 1px solid rgba(59, 106, 204, 0.28);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.compose-recipient-suggestions.is-open {
  display: grid;
}

.compose-recipient-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.compose-recipient-option:last-child {
  border-bottom: 0;
}

.compose-recipient-option:hover,
.compose-recipient-option.active {
  background: #e8f1ff;
}

.compose-recipient-avatar,
.compose-recipient-popover-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e2edff;
  color: var(--brand);
  font-weight: 900;
}

.compose-recipient-option strong,
.compose-recipient-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-recipient-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.compose-recipient-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 34px;
  border: 1px solid #b9d3fb;
  border-radius: 8px;
  padding: 0 8px 0 10px;
  background: #eef5ff;
  color: var(--ink);
  font-weight: 800;
}

.compose-recipient-chip[hidden] {
  display: none;
}

.compose-recipient-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compose-recipient-remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.compose-recipient-remove:hover {
  background: rgba(59, 106, 204, 0.12);
  color: var(--ink);
}

.compose-recipient-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 12px);
  left: 0;
  display: none;
  width: min(360px, 80vw);
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22);
  color: var(--ink);
}

.compose-recipient-chip:hover .compose-recipient-popover,
.compose-recipient-chip:focus-within .compose-recipient-popover {
  display: grid;
  gap: 10px;
}

.compose-recipient-popover::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 24px;
  width: 16px;
  height: 16px;
  border-left: 1px solid rgba(15, 23, 42, 0.14);
  border-top: 1px solid rgba(15, 23, 42, 0.14);
  background: #fff;
  transform: rotate(45deg);
}

.compose-recipient-popover-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.compose-recipient-popover-avatar {
  width: 54px;
  height: 54px;
  background: #a05f2b;
  color: #fff;
  font-size: 22px;
}

.compose-recipient-popover strong,
.compose-recipient-popover small,
.compose-recipient-popover-row {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.compose-recipient-popover small,
.compose-recipient-popover-row {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.compose-recipient-popover-row.muted {
  color: #8a97a8;
}

.compose-body {
  min-height: clamp(260px, 42vh, 420px);
  font-weight: 400;
  line-height: 1.45;
}

.compose-body p,
.compose-body [data-compose-plain="true"] {
  font-weight: 400;
}

.compose-rich-editor .rich-editable {
  border-radius: 0 0 8px 8px;
}

.compose-dialog .compose-rich-editor .rich-toolbar {
  min-height: 42px;
  padding: 6px 10px;
  background: #f8fbff;
}

.compose-dialog .compose-rich-editor .rich-toolbar button,
.compose-dialog .compose-rich-editor .compose-color-control {
  height: 32px;
  min-width: 32px;
}

.compose-dialog .compose-rich-editor .rich-toolbar .compose-toolbar-icon-button {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.compose-toolbar-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compose-attachment-list,
.draft-attachment-list {
  display: grid;
  gap: 8px;
}

.compose-attachment-list:empty {
  display: none;
}

.compose-status-line {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.compose-status-line:empty {
  margin-top: 4px;
  min-height: 0;
}

.compose-dialog #modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.compose-dialog #modal-actions [data-action="cancel-compose"] {
  margin-right: auto;
}

.compose-attachment-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.compose-attachment-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.compose-attachment-row strong,
.compose-attachment-row small {
  display: block;
  overflow-wrap: anywhere;
}

.compose-attachment-file {
  min-width: 0;
}

.compose-attachment-file strong {
  font-size: 14px;
  line-height: 1.25;
}

.compose-attachment-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mail-compact-details.mailbox-actions .mailbox-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.mail-compact-details.mailbox-actions .mailbox-file-row select {
  width: 100%;
  min-width: 0;
}

.mail-compact-details.mailbox-actions .mailbox-file-row .primary-button {
  min-height: 40px;
  white-space: nowrap;
}

body[data-theme="dark"] .mail-row.selected,
body[data-theme="dark"] .todo-item.selected {
  background: linear-gradient(135deg, rgba(62, 109, 223, 0.92), rgba(70, 124, 235, 0.84));
  border-color: rgba(145, 184, 255, 0.72);
  color: #ffffff;
}

body[data-theme="dark"] .email-text-fallback,
body[data-theme="dark"] .message-body-card .mail-preview,
body[data-theme="dark"] .email-text-fallback .mail-preview {
  background: #f8fafc;
  color: #111827;
}

/* Final mail/settings/automation dark polish after sticky mail styles. */
body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"] .mail-category-tabs,
body[data-theme="dark"][data-view="mail"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"] .mail-profile-card {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.2);
  color: #eff6ff;
}

body[data-theme="dark"] .mail-profile-card.active {
  background: rgba(35, 62, 106, 0.96);
  border-color: rgba(122, 171, 255, 0.72);
  box-shadow: inset 4px 0 0 #72a7ff;
}

body[data-theme="dark"] .mail-category-tabs button {
  background: color-mix(in srgb, var(--tab-color) 18%, #0e1a2d 82%);
  border-color: color-mix(in srgb, var(--tab-color) 38%, rgba(188, 205, 230, 0.2) 62%);
  color: color-mix(in srgb, var(--tab-color) 42%, #f4f8ff 58%);
  box-shadow: none;
}

body[data-theme="dark"] .mail-category-tabs button.active {
  background: color-mix(in srgb, var(--tab-color) 72%, #1c2d4b 28%);
  border-color: color-mix(in srgb, var(--tab-color) 82%, #dce9ff 18%);
  color: #ffffff;
}

body[data-theme="dark"] .mail-list-summary,
body[data-theme="dark"] .mail-pagination {
  background: rgba(8, 17, 31, 0.98);
  border-color: rgba(188, 205, 230, 0.18);
  color: #b7c5da;
}

body[data-theme="dark"][data-view="mail"] .mail-grid {
  background: rgba(8, 17, 31, 0.98);
  border-bottom-color: rgba(188, 205, 230, 0.18);
}

body[data-theme="dark"][data-view="mail"] .mail-grid article {
  background: transparent;
}

body[data-theme="dark"][data-view="mail"] .mail-grid strong {
  color: #aebdd2;
}

body[data-theme="dark"][data-view="mail"] .mail-grid span {
  color: #edf4ff;
}

body[data-theme="dark"][data-view="mail"] .mail-utility-stats strong {
  color: #aebdd2;
}

body[data-theme="dark"][data-view="mail"] .mail-utility-stats span {
  color: #edf4ff;
}

body[data-theme="dark"] .rule-status.active,
body[data-theme="dark"] .profile-status.ready {
  background: rgba(62, 185, 128, 0.16);
  border-color: rgba(62, 185, 128, 0.32);
  color: #a7f3ce;
}

body[data-theme="dark"] .profile-status {
  background: rgba(243, 196, 76, 0.16);
  color: #f4d28c;
}

body[data-theme="dark"] .account-modal-summary,
body[data-theme="dark"] .account-facts div,
body[data-theme="dark"] .compose-attachment-row,
body[data-theme="dark"] .attachment-source-row,
body[data-theme="dark"] .modal-list li {
  background: rgba(14, 26, 45, 0.98);
  border-color: rgba(188, 205, 230, 0.22);
  color: #f6f9ff;
}

body[data-theme="dark"] .account-modal-summary p,
body[data-theme="dark"] .account-facts span,
body[data-theme="dark"] .compose-attachment-row small {
  color: #aebdd2;
}

/* Mail dark-mode surface cleanup.
   Keep this at the end so it wins over the reusable mail/workbench rules above. */
body[data-theme="dark"] .mail-profile-strip,
body[data-theme="dark"] .mail-category-tabs,
body[data-theme="dark"] .mail-list-summary,
body[data-theme="dark"] .mail-pagination,
body[data-theme="dark"] .mail-workspace,
body[data-theme="dark"] .mail-folder-rail,
body[data-theme="dark"] .mail-workspace .mail-table,
body[data-theme="dark"] #mail-list,
body[data-theme="dark"] .mail-reader,
body[data-theme="dark"] .mail-reader-actions,
body[data-theme="dark"] .mail-tools,
body[data-theme="dark"] .mail-source,
body[data-theme="dark"] .mail-grid {
  background: rgba(10, 20, 36, 0.98);
  border-color: rgba(188, 205, 230, 0.16);
}

body[data-theme="dark"] .mail-workspace {
  box-shadow: none;
}

body[data-theme="dark"] .mail-workspace .mail-table {
  border-right-color: rgba(188, 205, 230, 0.16);
}

body[data-theme="dark"] .mail-workspace .mail-table,
body[data-theme="dark"] #mail-list {
  background: rgba(10, 20, 36, 0.98) !important;
}

body[data-theme="dark"] .mail-row {
  background: rgba(16, 29, 48, 0.96);
  border-bottom-color: rgba(188, 205, 230, 0.14);
}

body[data-theme="dark"] .mail-row:hover {
  background: rgba(24, 43, 70, 0.98);
}

body[data-theme="dark"] .mail-row.has-approval {
  background: rgba(13, 24, 42, 0.98);
}

body[data-theme="dark"] .mail-row.read {
  opacity: 0.88;
}

body[data-theme="dark"] .mail-folder-account,
body[data-theme="dark"] .mail-folder-group,
body[data-theme="dark"] .mail-reader-header,
body[data-theme="dark"] .mail-detail-disclosure,
body[data-theme="dark"] .attachment-card,
body[data-theme="dark"] .attachment-row,
body[data-theme="dark"] .attachment-preview-unavailable,
body[data-theme="dark"] .attachment-menu-panel,
body[data-theme="dark"] .attachment-choice,
body[data-theme="dark"] .conversation-message,
body[data-theme="dark"] .mail-insights article {
  border-color: rgba(188, 205, 230, 0.16);
}

body[data-theme="dark"] .mail-row-meta span {
  border-color: rgba(188, 205, 230, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.mail-refresh-button {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f3f7fb);
}

.mail-profile-strip {
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 14px;
  border-bottom-color: rgba(203, 215, 232, 0.82);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.mail-profile-card {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 253, 0.94));
  box-shadow: 0 8px 18px rgba(12, 26, 45, 0.05);
}

.mail-profile-card.active {
  border-color: rgba(15, 111, 224, 0.46);
  background: linear-gradient(180deg, rgba(239, 247, 255, 0.98), rgba(227, 240, 255, 0.92));
  box-shadow: inset 4px 0 0 var(--accent);
}

.mail-category-tabs {
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 14px;
  border-bottom-color: rgba(203, 215, 232, 0.82);
  background: rgba(255, 255, 255, 0.92);
}

.mail-category-tabs button {
  border-radius: 999px;
  box-shadow: 0 6px 12px rgba(12, 26, 45, 0.04);
}

.mail-category-tabs button.active {
  box-shadow: 0 10px 22px rgba(13, 24, 43, 0.12);
}

.mail-workspace .mail-table,
.mail-reader {
  border: 1px solid rgba(203, 215, 232, 0.88);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.92));
  box-shadow: 0 18px 44px rgba(12, 26, 45, 0.08);
}

.mail-workspace .mail-table {
  border-right: 1px solid rgba(203, 215, 232, 0.88);
}

.mail-reader-actions {
  border-bottom-color: rgba(203, 215, 232, 0.88);
  background: rgba(250, 252, 255, 0.97);
}

.mail-toolbar-button {
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f8fbfe);
}

.mail-toolbar-button.primary {
  background: linear-gradient(135deg, var(--accent), var(--blue));
}

.mail-reader-header {
  border-bottom-color: rgba(203, 215, 232, 0.88);
}

.mail-detail-disclosure {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.mail-quick-summary {
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(236, 246, 255, 0.96), rgba(241, 252, 248, 0.92));
}

.mail-loading,
.status-band div,
.task-item,
.approval-card,
.file-list > *,
.rules-list > *,
.mail-grid article,
.capability-grid article {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(12, 26, 45, 0.05);
}

.mail-loading {
  border: 1px solid rgba(203, 215, 232, 0.88);
}

body[data-theme="dark"] .ghost-button,
body[data-theme="dark"] .mail-refresh-button,
body[data-theme="dark"] .mail-toolbar-button,
body[data-theme="dark"] .mail-profile-card,
body[data-theme="dark"] .mail-category-tabs,
body[data-theme="dark"] .mail-workspace .mail-table,
body[data-theme="dark"] .mail-reader,
body[data-theme="dark"] .mail-detail-disclosure,
body[data-theme="dark"] .mail-quick-summary,
body[data-theme="dark"] .conversation-message {
  background: rgba(12, 18, 29, 0.92);
  border-color: rgba(148, 163, 184, 0.18);
}

body[data-theme="dark"] .mail-profile-card.active,
body[data-theme="dark"] .mail-category-tabs button.active,
body[data-theme="dark"] .mail-toolbar-button.primary {
  color: #fff;
}

.mail-refresh-button,
.ghost-button,
.primary-button,
.mail-toolbar-button,
.mail-profile-card,
.mail-category-tabs button,
.mail-reader-actions,
.mail-detail-disclosure,
.mail-quick-summary,
.conversation-message,
.mail-loading,
.task-item,
.approval-card,
.file-list > *,
.rules-list > *,
.mail-grid article,
.capability-grid article {
  border-radius: 9px;
}

.ghost-button,
.mail-toolbar-button,
.mail-refresh-button {
  background: #ffffff;
  box-shadow: none;
}

.mail-profile-strip,
.mail-category-tabs {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
}

.mail-profile-card {
  background: #ffffff;
  border-color: #dbe2eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mail-profile-card.active {
  background: #f5f8fc;
  border-color: #bcd0ee;
  box-shadow: inset 3px 0 0 #4b79c8;
}

.mail-category-tabs button {
  box-shadow: none;
  background: #f7f9fb;
  border-color: #d8e0ea;
}

.mail-category-tabs button.active {
  background: #eef3fb;
  border-color: #adc6ee;
  color: #224d97;
}

.mail-workspace .mail-table,
.mail-reader {
  border-color: #dbe2eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mail-reader-actions {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: #e1e7ef;
}

.mail-toolbar-button.primary {
  background: #2f6fd6;
}

.ghost-button:hover,
.mini-button:hover,
.text-button:hover,
.icon-button:hover,
.mail-toolbar-button:hover,
.mail-refresh-button:hover {
  transform: translateY(-1px);
}

.topbar .eyebrow,
.status-band p,
.command-panel label,
.contact-manager-summary span,
.mail-category-tabs strong,
.source-pill,
.mail-profile-card small,
.mail-profile-card em,
.mail-row-thread-summary,
.mail-quick-summary,
.mail-loading-copy,
.company-profile-head p,
.contact-health-card p,
.contact-info-grid span,
.company-profile-metrics span,
.address-row small,
.address-row p,
.company-person-row small,
.company-mail-event small,
.company-file-row span,
.enrichment-row p span {
  letter-spacing: 0.01em;
}

.source-pill,
.mail-category-tabs strong,
.mail-profile-card strong,
.mail-toolbar-button,
.ghost-button,
.primary-button {
  font-weight: 700;
}

.mail-category-tabs button.active {
  color: #1d4f9e;
}

.mail-quick-summary {
  background: linear-gradient(180deg, #f7fbff, #f2f8fb);
}

.mail-loading,
.task-item,
.approval-card,
.file-list > *,
.rules-list > *,
.mail-grid article,
.capability-grid article {
  border-color: #e2e8f0;
}

.mail-toolbar-button.ai,
.mail-toolbar-button.accent {
  background: #f7f9fc;
  color: #334155;
}

.mail-row.selected {
  background: #eef3f8;
  color: var(--ink);
  box-shadow: inset 3px 0 0 #2f6fd6;
}

.mail-row.selected .mail-row-title time,
.mail-row.selected .attachment-indicator,
.mail-row.selected .mail-row-main p,
.mail-row.selected .mail-row-main strong,
.mail-row.selected .mail-row-thread-summary {
  color: var(--ink);
}

.mail-row.selected .mail-label-chip,
.mail-row.selected .mail-recipient-chip,
.mail-row.selected .mail-status-chip,
.mail-row.selected .mail-category-pill {
  background: rgba(255, 255, 255, 0.86);
  border-color: #cfd8e4;
  color: #37506f;
}

.mail-label-chip,
.mail-recipient-chip,
.mail-status-chip,
.mail-category-pill {
  background: #f7f9fb;
  border-color: #dbe2eb;
  color: #5a6878;
}

.mail-category-pill.order,
.mail-category-pill.pricing,
.mail-category-pill.inventory,
.mail-category-pill.tracking,
.mail-category-pill.rma,
.mail-category-pill.campaign,
.mail-category-pill.calendar,
.mail-category-pill.customer,
.mail-category-pill.vendor,
.mail-category-pill.internal,
.mail-category-pill.waiting,
.mail-category-pill.done,
.mail-category-pill.review {
  background: rgba(255, 255, 255, 0.96);
}

.mail-category-pill.order {
  border-color: rgba(15, 118, 110, 0.24);
  color: #0f766e;
}

.mail-category-pill.pricing {
  border-color: rgba(124, 58, 237, 0.24);
  color: #7c3aed;
}

.mail-category-pill.inventory {
  border-color: rgba(37, 99, 235, 0.24);
  color: #2563eb;
}

.mail-category-pill.tracking {
  border-color: rgba(14, 116, 144, 0.24);
  color: #0e7490;
}

.mail-category-pill.rma {
  border-color: rgba(190, 18, 60, 0.24);
  color: #be123c;
}

.mail-category-pill.campaign {
  border-color: rgba(180, 83, 9, 0.24);
  color: #b45309;
}

.mail-category-pill.calendar {
  border-color: rgba(14, 116, 144, 0.24);
  color: #0e7490;
}

.mail-category-pill.customer {
  border-color: rgba(21, 128, 61, 0.24);
  color: #15803d;
}

.mail-category-pill.vendor {
  border-color: rgba(155, 122, 47, 0.24);
  color: #9b7a2f;
}

.mail-category-pill.internal {
  border-color: rgba(71, 85, 105, 0.24);
  color: #475569;
}

.mail-category-pill.waiting {
  border-color: rgba(161, 98, 7, 0.24);
  color: #a16207;
}

.mail-category-pill.done {
  border-color: rgba(100, 116, 139, 0.24);
  color: #64748b;
}

.mail-category-pill.review {
  border-color: rgba(102, 113, 125, 0.24);
  color: #66717d;
}

.mail-row-thread-summary {
  color: #66758a;
}

.mail-quick-summary {
  background: #f7fafc;
  border: 1px solid #e0e7ef;
}

.conversation-message,
.mail-loading,
.status-band div,
.task-item,
.approval-card,
.file-list > *,
.rules-list > *,
.mail-grid article,
.capability-grid article {
  background: #ffffff;
  border-color: #e1e7ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mail-loading-copy strong,
.mail-row.selected .mail-row-thread-summary {
  letter-spacing: -0.01em;
}

.mail-row.conversation-row .mail-avatar {
  box-shadow: 0 0 0 2px rgba(47, 111, 214, 0.08);
}

/* Final visual refinement pass: quieter surfaces, softer active states, less toy-like color. */
.topbar,
.command-panel,
.dashboard-card,
.contact-manager-summary > div,
.contact-health-card,
.company-profile-panel,
.company-profile-metrics > div,
.company-person-row,
.company-mail-event,
.company-file-row,
.contact-info-grid > div,
.contact-mail-row,
.enrichment-row,
.repcloud-account-option,
.marketing-list-badge,
.mail-profile-card,
.mail-category-tabs button,
.source-pill {
  box-shadow: none;
}

.mail-profile-card {
  border-color: #dee6ef;
  background: rgba(255, 255, 255, 0.94);
}

.mail-profile-card.active {
  background: #f2f7ff;
  border-color: #c7d8f3;
  box-shadow: inset 3px 0 0 #2f73d0;
}

.mail-category-tabs {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: #e4e8eb;
}

.mail-category-tabs button {
  min-height: 32px;
  border-width: 1px;
  background: rgba(248, 250, 253, 0.96);
}

.mail-category-tabs button.active {
  box-shadow: none;
}

/* Outlook-style mail chrome: flatter controls, quieter fills, less pill-heavy UI. */
body[data-view="mail"] .mail-profile-strip,
body[data-view="mail"] .mail-category-tabs,
body[data-view="mail"] .mail-command-bar,
body[data-view="mail"] .mail-reader-actions {
  background: #ffffff;
}

body[data-view="mail"] .mail-profile-switch,
body[data-view="mail"] .mail-folder-profile,
body[data-view="mail"] .mail-folder-row,
body[data-view="mail"] .mail-folder-select,
body[data-view="mail"] .mail-toolbar-button,
body[data-view="mail"] .mail-category-tabs button,
body[data-view="mail"] .mail-reader-category-line select,
body[data-view="mail"] .mail-reader-category-line input {
  border-radius: 4px;
  box-shadow: none;
}

body[data-view="mail"] .mail-toolbar-button,
body[data-view="mail"] .mail-category-tabs button,
body[data-view="mail"] .mail-profile-switch {
  border-color: #d7dfea;
  background: #fff;
}

body[data-view="mail"] .mail-toolbar-button:hover,
body[data-view="mail"] .mail-category-tabs button:hover,
body[data-view="mail"] .mail-profile-switch:hover,
body[data-view="mail"] .mail-folder-profile:hover,
body[data-view="mail"] .mail-folder-row:hover,
body[data-view="mail"] .mail-folder-select:hover {
  background: #f5f8fc;
  border-color: #c8d5e4;
}

body[data-view="mail"] .mail-toolbar-button.primary {
  border-color: #2f6fd6;
  background: #2f6fd6;
  color: #fff;
}

body[data-view="mail"] .mail-toolbar-button:disabled {
  cursor: default;
  opacity: 0.62;
}

body[data-view="mail"] .mail-toolbar-button.ai,
body[data-view="mail"] .mail-toolbar-button.accent {
  border-color: #d7dfea;
  background: #f7f9fc;
  color: #34465d;
}

body[data-view="mail"] .mail-toolbar-button.icon {
  width: 34px;
  background: #fff;
}

body[data-view="mail"] .mail-toolbar-button.active {
  border-color: #bccde1;
  background: #edf3f9;
  color: #30405a;
}

body[data-view="mail"] .mail-category-tabs button.active,
body[data-view="mail"] .mail-folder-profile.active,
body[data-view="mail"] .mail-folder-row.active {
  border-color: #bcd0ee;
  background: #eef3fb;
  color: #224d97;
}

body[data-view="mail"] .mail-category-tabs button {
  min-height: 30px;
  padding: 0 10px;
}

body[data-view="mail"] .mail-profile-switch {
  flex: 1 1 176px;
  max-width: 320px;
  min-width: 176px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body[data-view="mail"] .mail-profile-switch.active {
  flex-basis: 214px;
  max-width: 360px;
  min-width: 214px;
}

body[data-view="mail"] .mail-profile-switch div {
  gap: 1px;
}

body[data-view="mail"] .mail-profile-switch small {
  display: none;
}

body[data-view="mail"] .mail-profile-switch em {
  font-size: 11px;
}

body[data-view="mail"] .mail-command-bar[hidden],
body[data-view="mail"] #mail-summary[hidden] {
  display: none !important;
}

body[data-view="mail"] .mail-command-bar:empty {
  display: none !important;
}

body[data-view="mail"] .topbar {
  min-height: 46px;
  padding-top: 4px;
  padding-bottom: 4px;
}

body[data-view="mail"] .topbar-mail-search input,
body[data-view="mail"] .topbar-mail-search select,
body[data-view="mail"] .topbar-compose-button,
body[data-view="mail"] .mail-refresh-button {
  min-height: 34px;
}

body[data-view="mail"] .mail-profile-strip {
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  padding-top: 4px;
  padding-bottom: 5px;
}

body[data-view="mail"] .mail-profile-switch {
  align-self: center;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 42px;
  padding-top: 5px;
  padding-bottom: 5px;
}

body[data-view="mail"] .mail-profile-switch span {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

body[data-view="mail"] .mail-category-tabs {
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 38px;
  padding-top: 5px;
  padding-bottom: 6px;
}

body[data-view="mail"] .mail-category-tabs button {
  align-self: center;
  min-height: 28px;
  padding-inline: 9px;
}

body[data-view="mail"] .mail-pager-bar {
  flex: 0 0 auto;
  min-height: 32px;
  padding-left: 14px;
  padding-right: 14px;
}

body[data-view="mail"] .mail-utility-rail {
  min-height: 32px;
  padding-top: 1px;
  padding-bottom: 1px;
}

body[data-view="mail"] .mail-pagination {
  gap: 6px;
  min-height: 28px;
}

body[data-view="mail"] .mail-page-step {
  min-width: 32px;
  min-height: 26px;
  border-radius: 6px;
}

body[data-view="mail"] .mail-page-step span[aria-hidden="true"] {
  font-size: 16px;
}

body[data-view="mail"] .mail-utility-stats {
  gap: 10px;
}

body[data-view="mail"] .mail-utility-stats strong,
body[data-view="mail"] .mail-utility-stats span,
body[data-view="mail"] .mail-pagination span {
  font-size: 12px;
  line-height: 1;
}

body[data-view="mail"] .mail-folder-profile.active,
body[data-view="mail"] .mail-folder-row.active {
  box-shadow: inset 2px 0 0 #2f6fd6;
}

body[data-view="mail"] .mail-folder-profile em,
body[data-view="mail"] .mail-folder-select em {
  border-radius: 4px;
  background: rgba(47, 111, 214, 0.09);
  color: #35506f;
}

body[data-view="mail"] .mail-folder-section-header em,
body[data-view="mail"] .mail-folder-section-header,
body[data-view="mail"] .mail-command-summary span {
  color: #607084;
}

body[data-view="mail"] .mail-workspace .mail-table,
body[data-view="mail"] .mail-reader {
  border-color: #e7ebf0;
  background: #fff;
  box-shadow: none;
}

body[data-view="mail"] .mail-profile-strip,
body[data-view="mail"] .mail-category-tabs {
  border-bottom-color: #edf1f5;
  backdrop-filter: none;
}

body[data-view="mail"] .mail-command-bar,
body[data-view="mail"] .mail-reader-actions,
body[data-view="mail"] .mail-reader-header {
  border-bottom-color: #edf1f5;
  background: #ffffff;
}

body[data-view="mail"] .mail-profile-switch,
body[data-view="mail"] .mail-folder-profile,
body[data-view="mail"] .mail-folder-row,
body[data-view="mail"] .mail-folder-select {
  border-color: #e4eaf1;
  background: transparent;
}

body[data-view="mail"] .mail-profile-switch.active,
body[data-view="mail"] .mail-folder-profile.active,
body[data-view="mail"] .mail-folder-row.active {
  background: #edf5ff;
  border-color: #d6e2f1;
}

body[data-view="mail"] .mail-folder-row.pending {
  background: #edf5ff;
  border-color: #cbdcf0;
  color: #224d97;
}

body[data-view="mail"].mail-dragging .mail-folder-row[data-folder-drop] {
  outline: 0;
  background: rgba(47, 111, 214, 0.035);
  transition: background 0.08s ease, box-shadow 0.08s ease, outline-color 0.08s ease, transform 0.08s ease;
}

body[data-view="mail"].mail-dragging .mail-folder-select {
  cursor: copy;
}

body[data-view="mail"] .mail-folder-row.drop-target,
body[data-view="mail"] .mail-folder-row.drop-target .mail-folder-select {
  background: #ddf7ed;
  border-color: #5fc6a2;
  color: #0f6f5d;
  outline-color: rgba(21, 167, 123, 0.85);
  box-shadow: inset 4px 0 0 #15a77b, 0 0 0 3px rgba(21, 167, 123, 0.24);
  transform: translateX(2px);
}

body[data-view="mail"] .mail-folder-row.drop-target .mail-folder-select::after {
  content: "Move here";
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: #0f8f6f;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-view="mail"] .mail-folder-row.drop-target-blocked,
body[data-view="mail"] .mail-folder-row.drop-target-blocked .mail-folder-select {
  background: #fff0ee;
  border-color: #f0a39a;
  color: #9d332a;
  outline-color: rgba(216, 67, 54, 0.72);
  box-shadow: inset 4px 0 0 #d05247, 0 0 0 3px rgba(208, 82, 71, 0.18);
}

body[data-view="mail"] .mail-folder-row.drop-target-blocked .mail-folder-select::after {
  content: "Wrong mailbox";
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: #b94339;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

body[data-view="mail"] .mail-row.dragging {
  opacity: 0.62;
  outline: 2px solid rgba(47, 111, 214, 0.36);
  outline-offset: -2px;
}

body[data-view="mail"] .mail-row.selected {
  background: #eaf3ff;
  box-shadow: inset 4px 0 0 #2f6fd6;
}

body[data-view="mail"] .mail-row.multi-selected:not(.selected) {
  background: #f0f6ff;
  box-shadow: inset 4px 0 0 #8bb9f4;
}

body[data-view="mail"] .mail-row.multi-selected:not(.selected)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(47, 111, 214, 0.12);
}

body[data-view="mail"] .mail-row.selected .mail-label-chip,
body[data-view="mail"] .mail-row.selected .mail-recipient-chip,
body[data-view="mail"] .mail-row.selected .mail-status-chip,
body[data-view="mail"] .mail-row.selected .mail-category-pill {
  background: rgba(255, 255, 255, 0.94);
  border-color: #c6d7ee;
}

body[data-view="mail"] .mail-row.selected .mail-route-pill {
  background: rgba(255, 255, 255, 0.94);
}

body[data-view="mail"] .mail-row.selected .mail-route-pill.route-po {
  border-color: rgba(15, 118, 110, 0.22);
  color: #0f766e;
}

body[data-view="mail"] .mail-row.selected .mail-route-pill.route-relay {
  border-color: rgba(14, 116, 144, 0.22);
  color: #0e7490;
}

body[data-view="mail"] .mail-row.selected .mail-route-pill.route-file {
  border-color: rgba(71, 85, 105, 0.22);
  color: #475569;
}

body[data-view="mail"] .mail-row.selected .mail-route-pill.route-reply {
  border-color: rgba(37, 99, 235, 0.22);
  color: #1d4ed8;
}

body[data-view="mail"] .mail-row.selected .mail-route-pill.route-review {
  border-color: rgba(102, 113, 125, 0.22);
  color: #66717d;
}

body[data-view="mail"] .email-html-preview {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

body[data-view="mail"] .email-html-preview iframe {
  background: #ffffff;
}

body[data-theme="dark"][data-view="mail"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs,
body[data-theme="dark"][data-view="mail"] .mail-command-bar,
body[data-theme="dark"][data-view="mail"] .mail-reader-actions {
  background: #0b1526;
}

body[data-theme="dark"][data-view="mail"] .mail-toolbar-button,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs button,
body[data-theme="dark"][data-view="mail"] .mail-profile-switch,
body[data-theme="dark"][data-view="mail"] .mail-reader-category-line select,
body[data-theme="dark"][data-view="mail"] .mail-reader-category-line input {
  border-color: rgba(226, 236, 249, 0.18);
  background: rgba(17, 31, 53, 0.94);
  color: #e9f1ff;
  border-radius: 6px;
  box-shadow: none;
}

body[data-theme="dark"][data-view="mail"] .mail-toolbar-button.primary {
  background: #4e7ff0;
  border-color: #4e7ff0;
}

body[data-theme="dark"][data-view="mail"] .mail-toolbar-button.ai,
body[data-theme="dark"][data-view="mail"] .mail-toolbar-button.accent {
  background: rgba(91, 149, 255, 0.12);
  color: #dce8fb;
}

body[data-theme="dark"][data-view="mail"] .mail-toolbar-button:hover,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs button:hover,
body[data-theme="dark"][data-view="mail"] .mail-profile-switch:hover,
body[data-theme="dark"][data-view="mail"] .mail-folder-profile:hover,
body[data-theme="dark"][data-view="mail"] .mail-folder-row:hover,
body[data-theme="dark"][data-view="mail"] .mail-folder-select:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(188, 205, 230, 0.24);
}

body[data-view="mail"]:not(.native-shell) {
  overflow: hidden;
}

body[data-view="mail"]:not(.native-shell) .app-shell,
body[data-view="mail"]:not(.native-shell) .workspace,
body[data-view="mail"]:not(.native-shell) .content-grid,
body[data-view="mail"]:not(.native-shell) .main-column,
body[data-view="mail"]:not(.native-shell) #view-mail {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body[data-view="mail"]:not(.native-shell) .app-shell,
body[data-view="mail"]:not(.native-shell) .workspace {
  height: 100vh;
}

body[data-view="mail"]:not(.native-shell) #view-mail.view.active {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body[data-view="mail"]:not(.native-shell) .mail-workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body[data-view="mail"]:not(.native-shell) .mail-folder-rail,
body[data-view="mail"]:not(.native-shell) .mail-workspace .mail-table,
body[data-view="mail"]:not(.native-shell) .mail-reader {
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: auto;
}

body[data-view="mail"]:not(.native-shell) #view-mail.view.active > .mail-profile-strip,
body[data-view="mail"]:not(.native-shell) #view-mail.view.active > .mail-command-bar,
body[data-view="mail"]:not(.native-shell) #view-mail.view.active > .mail-category-tabs,
body[data-view="mail"]:not(.native-shell) #view-mail.view.active > .mail-pager-bar {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
}

body[data-view="mail"]:not(.native-shell) .mail-profile-strip {
  min-height: 48px !important;
  max-height: 58px !important;
  height: auto !important;
  flex-wrap: nowrap;
  align-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}

body[data-view="mail"]:not(.native-shell) .mail-profile-switch {
  flex: 0 0 260px !important;
  max-height: 44px;
}

body[data-view="mail"]:not(.native-shell) .mail-category-tabs {
  min-height: 40px !important;
  max-height: 48px !important;
  height: auto !important;
  flex-wrap: nowrap;
  align-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}

body[data-view="mail"]:not(.native-shell) .mail-category-tabs button {
  flex: 0 0 auto !important;
}

body[data-view="mail"]:not(.native-shell) .mail-command-bar[hidden],
body[data-view="mail"]:not(.native-shell) .mail-command-bar:empty,
body[data-view="mail"]:not(.native-shell) .mail-safety-banner,
body[data-view="mail"]:not(.native-shell) .mail-tools,
body[data-view="mail"]:not(.native-shell) .mail-source,
body[data-view="mail"]:not(.native-shell) .mail-insights:empty,
body[data-view="mail"]:not(.native-shell) .contacts-panel:not(.open),
body[data-view="mail"]:not(.native-shell) #mail-summary[hidden] {
  display: none !important;
  flex-basis: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-view="mail"]:not(.native-shell) .mail-pager-bar {
  min-height: 32px !important;
  max-height: 38px !important;
  height: auto !important;
  overflow: hidden;
}

body.native-shell[data-view="mail"] .mail-profile-strip {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 0;
  gap: 5px;
  padding: 3px 10px 4px;
  min-height: 46px;
  max-height: 52px;
}

body.native-shell[data-view="mail"] .mail-profile-switch {
  min-width: 170px;
  flex: 0 0 280px;
  min-height: 38px;
  max-height: 42px;
  padding: 4px 8px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
}

body.native-shell[data-view="mail"] .mail-profile-switch div {
  gap: 0;
}

body.native-shell[data-view="mail"] .mail-profile-switch strong {
  font-size: 12px;
  line-height: 1.05;
}

body.native-shell[data-view="mail"] .mail-profile-switch small {
  display: none;
}

body.native-shell[data-view="mail"] .mail-profile-switch em {
  font-size: 10px;
  line-height: 1;
}

body.native-shell[data-view="mail"] .mail-category-tabs {
  flex: 0 0 auto;
  display: flex !important;
  position: static;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  gap: 6px;
  margin: 0;
  padding: 4px 10px 5px;
  min-height: 38px;
  max-height: 44px;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
}

body.native-shell[data-view="mail"] #mail-summary {
  display: flex !important;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0 10px;
  padding: 4px 0;
  min-height: 32px;
  overflow-x: auto;
}

body.native-shell[data-view="mail"] #mail-summary[hidden] {
  display: none !important;
}

body.native-shell[data-view="mail"] #mail-summary article {
  flex: 0 0 auto;
  min-width: 108px;
  min-height: 24px;
  padding: 2px 0;
}

body.native-shell[data-view="mail"] .mail-pager-bar {
  display: block !important;
  flex: 0 0 auto;
  margin: 0 10px;
  padding: 0;
  min-height: 30px;
  border-bottom: 1px solid rgba(214, 223, 235, 0.92);
}

body.native-shell[data-view="mail"] .mail-utility-rail {
  min-height: 28px;
  padding: 2px 0;
}

body.native-shell[data-view="mail"] .mail-utility-stats {
  gap: 10px;
  overflow-x: auto;
  padding-right: 8px;
}

body.native-shell[data-view="mail"] .mail-utility-stats article {
  flex: 0 0 auto;
}

body.native-shell[data-view="mail"] .mail-category-tabs button {
  flex: 0 1 auto;
  min-height: 26px;
  padding: 0 9px;
}

body.native-shell[data-view="mail"] #view-mail.view.active {
  gap: 0;
}

body.native-shell[data-view="mail"] .section-heading {
  display: none !important;
}

body.native-shell[data-view="mail"] .mail-tools,
body.native-shell[data-view="mail"] .mail-source,
body.native-shell[data-view="mail"] .mail-command-bar,
body.native-shell[data-view="mail"] .mail-safety-banner {
  display: none !important;
}

body.native-shell[data-view="mail"] .mail-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 0;
  position: relative;
  z-index: 1;
}

body.native-shell[data-view="mail"] .mail-workspace {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

body.native-shell[data-view="mail"] .workspace {
  padding-top: 0;
}

body.native-shell[data-view="mail"] .topbar {
  grid-template-columns: minmax(112px, 170px) minmax(420px, 1fr) auto;
  gap: 8px;
  margin: 0;
  padding: 4px 10px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

body.native-shell[data-view="mail"] .topbar h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

body.native-shell[data-view="mail"] .topbar > div:first-of-type {
  min-width: 0;
}

body.native-shell[data-view="mail"] .topbar .eyebrow {
  display: none;
}

body.native-shell[data-view="mail"] .topbar-mail-search {
  --mail-topbar-control-height: 34px;
  --mail-topbar-icon-size: 34px;
  gap: 6px;
  grid-template-columns: minmax(260px, 1fr) minmax(104px, 132px) auto var(--mail-topbar-icon-size) var(--mail-topbar-icon-size);
}

body.native-shell[data-view="mail"] .top-actions {
  gap: 6px;
  min-width: 0;
}

body.native-shell[data-view="mail"] .top-actions .suite-switcher summary {
  width: 38px;
  padding: 0;
  justify-content: center;
}

body.native-shell[data-view="mail"] .top-actions .suite-switcher summary span,
body.native-shell[data-view="mail"] .top-actions .approval-top-label,
body.native-shell[data-view="mail"] .top-actions .openai-status-alert,
body.native-shell[data-view="mail"] .top-actions .diagnostics-top-button {
  display: none !important;
}

body.native-shell[data-view="mail"] .top-actions .approval-top-button,
body.native-shell[data-view="mail"] .top-actions .notification-top-button,
body.native-shell[data-view="mail"] .top-actions .theme-toggle,
body.native-shell[data-view="mail"] .top-actions .shortcut-button {
  min-width: 38px;
  min-height: 34px;
  padding-inline: 7px;
  justify-content: center;
}

body.native-shell[data-view="mail"] .top-actions .approval-top-button strong,
body.native-shell[data-view="mail"] .top-actions .notification-top-button strong {
  min-width: 22px;
  min-height: 22px;
  font-size: 12px;
}

body.native-shell[data-view="mail"] .topbar-mail-search input,
body.native-shell[data-view="mail"] .topbar-mail-search select,
body.native-shell[data-view="mail"] .mail-view-options summary {
  min-height: 34px;
  border-radius: 9px;
  padding-top: 0;
  padding-bottom: 0;
}

body.native-shell[data-view="mail"] .mail-view-options summary {
  width: var(--mail-topbar-icon-size);
  font-size: 18px;
}

body.native-shell[data-view="mail"] .topbar-compose-button {
  min-height: 34px;
  padding-inline: 14px;
}

body.native-shell[data-view="mail"] .mail-refresh-button {
  width: var(--mail-topbar-icon-size);
  height: var(--mail-topbar-control-height);
}

body.native-shell[data-view="mail"] .mail-pagination {
  gap: 5px;
  min-height: 26px;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

body.native-shell[data-view="mail"] .mail-page-step {
  min-width: 28px;
  min-height: 24px;
  border-radius: 7px;
}

body.native-shell[data-view="mail"] .mail-page-step span[aria-hidden="true"] {
  font-size: 15px;
}

body.native-shell[data-view="mail"] .mail-pagination span {
  font-size: 12px;
}

/* Native mail dark cleanup: keep the mail screen from falling back to bright panels. */
body[data-theme="dark"][data-view="mail"] .mail-profile-strip,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs,
body[data-theme="dark"][data-view="mail"] .mail-list-summary,
body[data-theme="dark"][data-view="mail"] .mail-pagination,
body[data-theme="dark"][data-view="mail"] .mail-workspace,
body[data-theme="dark"][data-view="mail"] .mail-folder-rail,
body[data-theme="dark"][data-view="mail"] .mail-workspace .mail-table,
body[data-theme="dark"][data-view="mail"] .mail-reader,
body[data-theme="dark"][data-view="mail"] .mail-reader-actions,
body[data-theme="dark"][data-view="mail"] .mail-command-bar,
body[data-theme="dark"][data-view="mail"] .mail-tools,
body[data-theme="dark"][data-view="mail"] .mail-source,
body[data-theme="dark"][data-view="mail"] .mail-grid,
body[data-theme="dark"][data-view="mail"] .mail-quick-summary,
body[data-theme="dark"][data-view="mail"] .mail-detail-disclosure,
body[data-theme="dark"][data-view="mail"] .mail-loading,
body[data-theme="dark"][data-view="mail"] .mail-triage-panel,
body[data-theme="dark"][data-view="mail"] .mail-triage-card,
body[data-theme="dark"][data-view="mail"] .mail-insights article,
body[data-theme="dark"][data-view="mail"] .review-section,
body[data-theme="dark"][data-view="mail"] .settings-card,
body[data-theme="dark"][data-view="mail"] .settings-hero-card,
body[data-theme="dark"][data-view="mail"] .repcloud-context,
body[data-theme="dark"][data-view="mail"] .assistant-panel,
body[data-theme="dark"][data-view="mail"] .attachment-card,
body[data-theme="dark"][data-view="mail"] .attachment-row,
body[data-theme="dark"][data-view="mail"] .attachment-preview-unavailable,
body[data-theme="dark"][data-view="mail"] .mail-folder-account,
body[data-theme="dark"][data-view="mail"] .mail-folder-group {
  background: #0b1526;
  border-color: rgba(188, 205, 230, 0.18);
  color: #e9f1ff;
}

body[data-theme="dark"][data-view="mail"] .mail-profile-switch,
body[data-theme="dark"][data-view="mail"] .mail-category-tabs button,
body[data-theme="dark"][data-view="mail"] .mail-toolbar-button,
body[data-theme="dark"][data-view="mail"] .mail-folder-row,
body[data-theme="dark"][data-view="mail"] .mail-folder-select,
body[data-theme="dark"][data-view="mail"] .mail-folder-profile,
body[data-theme="dark"][data-view="mail"] .mail-reader-category-line select,
body[data-theme="dark"][data-view="mail"] .mail-reader-category-line input,
body[data-theme="dark"][data-view="mail"] .mail-tools input,
body[data-theme="dark"][data-view="mail"] .mail-tools select {
  background: rgba(17, 31, 53, 0.96);
  border-color: rgba(188, 205, 230, 0.2);
  color: #e9f1ff;
  box-shadow: none;
}

body[data-theme="dark"][data-view="mail"] .mail-category-tabs button.active,
body[data-theme="dark"][data-view="mail"] .mail-folder-row.active,
body[data-theme="dark"][data-view="mail"] .mail-folder-select.active,
body[data-theme="dark"][data-view="mail"] .mail-profile-switch.active,
body[data-theme="dark"][data-view="mail"] .mail-row.selected {
  background: linear-gradient(135deg, rgba(62, 109, 223, 0.94), rgba(70, 124, 235, 0.86));
  border-color: rgba(145, 184, 255, 0.72);
  color: #ffffff;
}

body[data-theme="dark"][data-view="mail"] .mail-folder-row.pending {
  background: rgba(62, 109, 223, 0.32);
  border-color: rgba(145, 184, 255, 0.46);
  color: #ffffff;
}

body[data-theme="dark"][data-view="mail"].mail-dragging .mail-folder-row[data-folder-drop] {
  outline-color: rgba(143, 190, 255, 0.24);
  background: rgba(91, 149, 255, 0.06);
}

body[data-theme="dark"][data-view="mail"] .mail-folder-row.drop-target,
body[data-theme="dark"][data-view="mail"] .mail-folder-row.drop-target .mail-folder-select {
  background: rgba(20, 140, 112, 0.32);
  border-color: rgba(74, 222, 178, 0.54);
  color: #d9fff3;
  outline-color: rgba(74, 222, 178, 0.82);
  box-shadow: inset 4px 0 0 #4adeb2, 0 0 0 3px rgba(74, 222, 178, 0.24);
}

body[data-theme="dark"][data-view="mail"] .mail-folder-row.drop-target-blocked,
body[data-theme="dark"][data-view="mail"] .mail-folder-row.drop-target-blocked .mail-folder-select {
  background: rgba(149, 47, 41, 0.34);
  border-color: rgba(252, 165, 155, 0.52);
  color: #ffe2df;
  outline-color: rgba(248, 113, 113, 0.76);
  box-shadow: inset 4px 0 0 #f87171, 0 0 0 3px rgba(248, 113, 113, 0.2);
}

body[data-theme="dark"][data-view="mail"] .mail-profile-switch em,
body[data-theme="dark"][data-view="mail"] .mail-folder-profile em,
body[data-theme="dark"][data-view="mail"] .mail-folder-select em,
body[data-theme="dark"][data-view="mail"] .mail-command-summary span,
body[data-theme="dark"][data-view="mail"] .mail-folder-section-header,
body[data-theme="dark"][data-view="mail"] .mail-folder-section-header em,
body[data-theme="dark"][data-view="mail"] .mail-row-subject,
body[data-theme="dark"][data-view="mail"] .mail-row-thread-summary,
body[data-theme="dark"][data-view="mail"] .mail-preview,
body[data-theme="dark"][data-view="mail"] .mail-source,
body[data-theme="dark"][data-view="mail"] .mail-quick-summary p,
body[data-theme="dark"][data-view="mail"] .mail-quick-summary strong,
body[data-theme="dark"][data-view="mail"] .review-section p,
body[data-theme="dark"][data-view="mail"] .review-section span {
  color: #b9c7dc;
}

body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-main strong,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-main p,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-title time,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-thread-summary,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-label-chip,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-status-chip,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-recipient-chip,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-category-pill {
  color: #ffffff;
}

body[data-theme="dark"][data-view="mail"] .message-body-card .mail-preview,
body[data-theme="dark"][data-view="mail"] .email-text-fallback .mail-preview {
  background: #0f1c2f;
  color: #e8eef7;
  border-color: rgba(188, 205, 230, 0.14);
}

body[data-theme="dark"][data-view="mail"] .email-html-preview,
body[data-theme="dark"][data-view="mail"] .email-html-preview iframe {
  background: #0b1526;
}

body[data-theme="dark"][data-view="mail"] .mail-original-chain {
  border-color: rgba(148, 163, 184, 0.24);
  background: #0d192b;
}

body[data-theme="dark"][data-view="mail"] .mail-original-chain summary {
  border-bottom-color: rgba(148, 163, 184, 0.18);
  color: #b9c7dc;
}

body[data-theme="dark"][data-view="mail"] .mail-original-chain summary span {
  color: #e8eef7;
}

body[data-theme="dark"][data-view="mail"] .mail-original-chain summary strong {
  color: #9fb0c8;
}

body[data-theme="dark"][data-view="mail"] .mail-original-chain .mail-preview {
  background: #0f1c2f;
}

body[data-theme="dark"].native-shell[data-view="mail"] .mail-row.selected {
  background: #132844;
  border-color: rgba(145, 184, 255, 0.34);
  color: #e9f1ff;
  box-shadow: inset 4px 0 0 #72a7ff;
}

body[data-theme="dark"].native-shell[data-view="mail"] .mail-row.selected .mail-label-chip,
body[data-theme="dark"].native-shell[data-view="mail"] .mail-row.selected .mail-recipient-chip,
body[data-theme="dark"].native-shell[data-view="mail"] .mail-row.selected .mail-status-chip,
body[data-theme="dark"].native-shell[data-view="mail"] .mail-row.selected .mail-route-pill,
body[data-theme="dark"].native-shell[data-view="mail"] .mail-row.selected .mail-category-pill {
  background: rgba(226, 236, 249, 0.1);
  border-color: rgba(145, 184, 255, 0.22);
  color: #dbe8fb;
}

/* Mail should read like mail first; AI/workflow controls stay behind compact drawers. */
body[data-view="mail"] .mail-message-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 22px 0 18px;
}

body[data-view="mail"] .mail-message-header h2 {
  margin: 3px 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

body[data-view="mail"] .message-body-card {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 18px 0 0;
}

body[data-view="mail"] .message-body-card .review-section-header {
  display: none;
}

body[data-view="mail"] .message-body-card .mail-preview {
  max-width: 980px;
}

body[data-theme="dark"][data-view="mail"] .message-body-card {
  background: transparent;
}

body[data-view="mail"] .topbar-mail-search input {
  border-color: rgba(69, 132, 231, 0.56);
  box-shadow: inset 0 0 0 1px rgba(69, 132, 231, 0.18);
}

body[data-view="mail"] .topbar-mail-search input:hover {
  border-color: rgba(54, 115, 222, 0.74);
  box-shadow: inset 0 0 0 1px rgba(54, 115, 222, 0.22);
}

body[data-view="mail"] .topbar-mail-search input:focus {
  border-color: rgba(37, 99, 235, 0.78);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), inset 0 0 0 1px rgba(37, 99, 235, 0.24);
}

body[data-theme="dark"][data-view="mail"] .topbar-mail-search input {
  border-color: rgba(96, 165, 250, 0.56);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.16);
}

body.native-shell[data-view="mail"] .topbar-mail-search input {
  min-height: 44px;
  border: 2px solid rgba(37, 99, 235, 0.36);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(247, 251, 255, 0.98));
  color: #111827;
  font-size: 15px;
  font-weight: 750;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.92),
    0 6px 18px rgba(30, 64, 175, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.native-shell[data-view="mail"] .topbar-mail-search input::placeholder {
  color: #6b7280;
  opacity: 1;
  font-weight: 650;
}

body.native-shell[data-view="mail"] .topbar-mail-search input:hover {
  border-color: rgba(37, 99, 235, 0.54);
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.94),
    0 8px 22px rgba(30, 64, 175, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body.native-shell[data-view="mail"] .topbar-mail-search input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.18),
    0 10px 24px rgba(30, 64, 175, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

body.native-shell[data-theme="dark"][data-view="mail"] .topbar-mail-search input {
  border-color: rgba(96, 165, 250, 0.58);
  background: linear-gradient(180deg, rgba(19, 32, 51, 0.98), rgba(15, 27, 45, 0.98));
  color: #f8fafc;
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.native-shell[data-theme="dark"][data-view="mail"] .topbar-mail-search input::placeholder {
  color: #cbd5e1;
}

/* Final mail layout guard: older mail chrome layers can reserve vertical space
   for hidden panels. Keep the mailbox stack compact even when a category/folder
   is empty or loading. */
body[data-view="mail"] #view-mail.view.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-profile-strip,
body[data-view="mail"] #view-mail.view.active > .mail-command-bar,
body[data-view="mail"] #view-mail.view.active > .mail-category-tabs,
body[data-view="mail"] #view-mail.view.active > .mail-pager-bar {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-profile-strip {
  order: 1 !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-category-tabs {
  order: 2 !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-pager-bar {
  order: 3 !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-profile-strip {
  min-height: 48px !important;
  max-height: 54px !important;
  padding-block: 4px !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-category-tabs {
  min-height: 38px !important;
  max-height: 44px !important;
  padding-block: 4px !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-pager-bar {
  min-height: 32px !important;
  max-height: 38px !important;
  padding-block: 1px !important;
}

body[data-view="mail"] #view-mail.view.active > .mail-workspace {
  order: 4 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

body[data-view="mail"] #view-mail.view.active > .section-heading,
body[data-view="mail"] #view-mail.view.active > .mail-command-bar,
body[data-view="mail"] #view-mail.view.active > .mail-safety-banner,
body[data-view="mail"] #view-mail.view.active > .mail-tools,
body[data-view="mail"] #view-mail.view.active > .mail-source,
body[data-view="mail"] #view-mail.view.active > #mail-summary,
body[data-view="mail"] .mail-command-bar[hidden],
body[data-view="mail"] .mail-command-bar:empty,
body[data-view="mail"] .mail-safety-banner,
body[data-view="mail"] .mail-tools,
body[data-view="mail"] .mail-source,
body[data-view="mail"] .mail-insights:empty,
body[data-view="mail"] .contacts-panel:not(.open),
body[data-view="mail"] #mail-summary[hidden] {
  display: none !important;
  flex: 0 0 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body[data-view="mail"] .mail-workspace .mail-table,
body[data-view="mail"] .mail-reader,
body[data-view="mail"] .mail-folder-rail {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

body[data-view="mail"] .mail-pane-loading,
body[data-view="mail"] .empty-card {
  margin: 0 !important;
}

/* Reader action polish: keep the mail list compact, but let message actions
   read as real buttons instead of a cramped table toolbar. */
body[data-view="mail"] .mail-reader-actions {
  min-height: 54px !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 0 28px !important;
  padding: 9px 16px 11px !important;
  border-bottom: 1px solid #dfe7f1 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-group {
  gap: 7px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-group:first-of-type {
  flex: 1 1 auto !important;
  display: flex !important;
  overflow: visible !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-group:last-of-type {
  flex: 0 0 auto !important;
  display: flex !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button {
  flex: 1 1 86px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  border-color: #d2dce9 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  min-width: 0 !important;
  max-width: 116px !important;
  overflow: hidden !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-icon {
  flex: 0 0 auto !important;
  font-size: 15px !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.smart-action {
  max-width: 128px !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.primary {
  border-color: #2f6fd6 !important;
  background: #2f6fd6 !important;
  color: #ffffff !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.ai,
body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.accent {
  border-color: #c9d8f0 !important;
  background: #f3f7ff !important;
  color: #244a88 !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.icon {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}

body[data-view="mail"] .mail-reader-actions .mail-more-actions {
  flex: 0 0 auto !important;
  position: relative !important;
}

body[data-view="mail"] .mail-reader-actions .mail-more-actions > summary {
  flex: 0 0 88px !important;
  min-width: 82px !important;
  max-width: 94px !important;
}

body[data-view="mail"] .mail-reader-actions .mail-more-actions-menu {
  position: fixed !important;
  top: var(--mail-more-menu-top, 120px) !important;
  left: var(--mail-more-menu-left, 12px) !important;
  right: auto !important;
  z-index: 10000 !important;
  max-height: min(420px, calc(100dvh - 96px)) !important;
  overflow: auto !important;
}

body[data-view="mail"] .mail-reader-actions .mail-more-actions-menu .mail-toolbar-button {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: 100% !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.warning {
  border-color: rgba(217, 119, 6, 0.36) !important;
  background: #fff8ed !important;
  color: #9a5a09 !important;
}

body[data-view="mail"] .mail-reader-actions .mail-toolbar-button.danger {
  border-color: rgba(188, 55, 48, 0.34) !important;
  background: #fff5f3 !important;
  color: #9a3028 !important;
}

body[data-view="mail"] .mail-message-header {
  padding-top: 26px !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
  overflow: visible !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-group:first-of-type {
  flex: 1 1 560px !important;
  overflow: visible !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-group:last-of-type {
  flex: 0 1 auto !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button:not(.icon),
body.native-shell[data-view="mail"] .mail-reader-actions .mail-more-actions > summary {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding-inline: 15px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-label {
  display: inline !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button.icon {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}

.mail-address-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 5px;
  min-width: 0;
  max-width: 100%;
  vertical-align: top;
}

.mail-address-list.expanded {
  display: flex;
  margin-top: 4px;
}

.mail-address-list .mail-recipient-link:not(:last-child)::after {
  content: ",";
}

.mail-address-more {
  display: inline-block;
  margin-left: 5px;
  vertical-align: top;
}

.mail-address-more[open] {
  display: block;
  margin: 5px 0 0;
}

.mail-address-more summary {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 8px;
  border: 1px solid rgba(125, 146, 174, 0.28);
  border-radius: 999px;
  background: rgba(241, 246, 252, 0.86);
  color: #365a89;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.mail-address-more summary:hover,
.mail-address-more summary:focus-visible {
  border-color: rgba(62, 122, 225, 0.38);
  background: rgba(62, 122, 225, 0.1);
  outline: none;
}

.mail-compact-details.repcloud-context {
  padding: 0;
}

.mail-compact-details:not([open]) {
  min-height: 42px;
}

.mail-compact-details.repcloud-context > summary {
  grid-template-columns: auto minmax(160px, auto) minmax(0, 1fr) auto;
}

.mail-compact-details.repcloud-context > summary em {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
}

.mail-compact-details.repcloud-context[open] {
  display: grid;
  gap: 14px;
  min-height: 580px;
  overflow: visible;
  padding-bottom: 14px;
}

.mail-compact-details.repcloud-context[open] > .repcloud-context-header {
  margin: 0 10px 14px;
  border-radius: 12px;
}

/* Mail pane layout: adjustable desktop columns with a tighter, steadier list. */
body[data-view="mail"] .mail-row-title > strong {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

body[data-view="mail"] .mail-row-sender {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="mail"] .mail-unread-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f73d0;
  box-shadow: 0 0 0 2px rgba(47, 115, 208, 0.1);
}

@media (min-width: 1081px) {
body[data-view="mail"] .mail-workspace {
  --mail-folder-pane: 236px;
  --mail-list-pane: 340px;
  grid-template-columns:
    minmax(190px, var(--mail-folder-pane))
    8px
    minmax(290px, var(--mail-list-pane))
    8px
    minmax(520px, 1fr) !important;
}

body[data-view="mail"] .mail-pane-resizer {
  display: block;
}

body[data-view="mail"] .mail-workspace .mail-table {
  font-size: 13px;
}

body[data-view="mail"] .mail-row {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 12px;
}

body[data-view="mail"] .mail-row .mail-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

body[data-view="mail"] .mail-row-title {
  gap: 6px;
}

body[data-view="mail"] .mail-row-title time {
  font-size: 11px;
}

body[data-view="mail"] .mail-row-main strong,
body[data-view="mail"] .mail-row-main p {
  font-size: 13px;
  line-height: 1.22;
}

body[data-view="mail"] .mail-row-preview {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-view="mail"] .mail-row.unread .mail-row-preview {
  color: #52647a;
  font-weight: 600;
}

body[data-view="mail"] .mail-row-meta {
  gap: 5px;
  margin-top: 6px;
}

body[data-view="mail"] .mail-row-meta span,
body[data-view="mail"] .mail-row-thread-summary {
  font-size: 11px;
}

body[data-view="mail"] .mail-row-meta span {
  min-height: 18px;
  padding: 0 6px;
  font-size: 10.5px;
}
}

@media (max-width: 1080px) {
  body[data-view="mail"] .mail-row-preview {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-view="mail"] .mail-row.unread .mail-row-preview {
    color: #52647a;
    font-weight: 600;
  }
}

body[data-view="mail"] .mail-row.selected .mail-unread-dot,
body[data-view="mail"] .mail-row.multi-selected .mail-unread-dot {
  background: #1f5fbf;
}

body[data-theme="dark"][data-view="mail"] .mail-row-preview {
  color: #aebdca;
}

body[data-theme="dark"][data-view="mail"] .mail-row.unread .mail-row-preview {
  color: #c5d1dc;
}

/* Desktop-style web message rows: quiet hierarchy first, smart context second. */
body[data-view="mail"] .mail-row-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  overflow: hidden;
  color: #66758a;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

/* Desktop Mail distinguishes read state with type weight, not by fading the
   entire row. Keeping the surface opaque also improves scanability in Safari. */
body[data-view="mail"] .mail-row.read {
  opacity: 1;
}

body[data-view="mail"] .mail-row.read .mail-row-title strong {
  font-weight: 650;
}

body[data-view="mail"] .mail-row.read .mail-row-main > p {
  color: #3f5068;
  font-weight: 560;
}

body[data-view="mail"] .mail-row.unread .mail-row-title strong,
body[data-view="mail"] .mail-row.unread .mail-row-main > p {
  font-weight: 800;
}

body[data-view="mail"] .mail-row-context-item {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-view="mail"] .mail-row-context-item + .mail-row-context-item::before {
  content: "\00b7";
  flex: 0 0 auto;
  margin-right: 5px;
  color: #a3adba;
}

body[data-view="mail"] .mail-row-context-item.mailbox,
body[data-view="mail"] .mail-row-context-item.profile {
  max-width: 92px;
}

body[data-view="mail"] .mail-row-context-item.category {
  max-width: 92px;
  color: #245fae;
  font-weight: 850;
}

body[data-view="mail"] .mail-row-context-item.conversation {
  flex: 0 1 auto;
  max-width: 88px;
}

body[data-view="mail"] .mail-row-smart-summary {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border: 1px solid rgba(47, 115, 208, 0.16);
  border-radius: 6px;
  background: rgba(47, 115, 208, 0.06);
  color: #45688f;
  cursor: help;
  font-size: 10px;
  font-weight: 850;
}

body[data-view="mail"] .mail-row-smart-summary > span {
  color: #2f73d0;
  font-size: 10px;
}

body[data-view="mail"] .mail-row:focus-visible {
  z-index: 2;
  outline: 2px solid rgba(47, 115, 208, 0.72);
  outline-offset: -2px;
}

body[data-view="mail"] .mail-row.selected .mail-row-context,
body[data-view="mail"] .mail-row.multi-selected .mail-row-context {
  color: #52647a;
}

body[data-view="mail"] .mail-row.selected .mail-row-context-item + .mail-row-context-item::before,
body[data-view="mail"] .mail-row.multi-selected .mail-row-context-item + .mail-row-context-item::before {
  color: #9aa7b5;
}

body[data-view="mail"] .mail-row.selected .mail-row-context-item.category,
body[data-view="mail"] .mail-row.multi-selected .mail-row-context-item.category {
  color: #245fae;
}

body[data-view="mail"] .mail-row.selected .mail-row-smart-summary,
body[data-view="mail"] .mail-row.multi-selected .mail-row-smart-summary {
  border-color: rgba(47, 115, 208, 0.16);
  background: rgba(47, 115, 208, 0.06);
  color: #45688f;
}

body.native-shell[data-view="mail"] .mail-row.selected .mail-row-context,
body.native-shell[data-view="mail"] .mail-row.multi-selected .mail-row-context {
  color: #66758a;
}

body.native-shell[data-view="mail"] .mail-row.selected .mail-row-context-item.category,
body.native-shell[data-view="mail"] .mail-row.multi-selected .mail-row-context-item.category {
  color: #245fae;
}

body.native-shell[data-view="mail"] .mail-row.selected .mail-row-smart-summary,
body.native-shell[data-view="mail"] .mail-row.multi-selected .mail-row-smart-summary {
  border-color: rgba(47, 115, 208, 0.16);
  background: rgba(47, 115, 208, 0.06);
  color: #45688f;
}

@media (min-width: 1081px) {
  body[data-view="mail"] .mail-row {
    min-height: 112px;
    align-content: start;
    padding-block: 11px;
  }

  body[data-view="mail"] .mail-row-main {
    display: flex;
    min-height: 88px;
    flex-direction: column;
  }

  body[data-view="mail"] .mail-row-main > p {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-view="mail"] .mail-row-preview {
    -webkit-line-clamp: 3;
  }

  body[data-view="mail"] .mail-row-context {
    margin-top: auto;
    padding-top: 6px;
  }
}

@media (max-width: 1080px) {
  body[data-view="mail"] .mail-row-context {
    font-size: 12px;
  }

  body[data-view="mail"] .mail-row-smart-summary {
    height: 22px;
    font-size: 11px;
  }
}

body[data-theme="dark"][data-view="mail"] .mail-row-context {
  color: #9fb0c2;
}

body[data-theme="dark"][data-view="mail"] .mail-row-context-item.category {
  color: #83b4f0;
}

body[data-theme="dark"][data-view="mail"] .mail-row-smart-summary {
  border-color: rgba(131, 180, 240, 0.22);
  background: rgba(131, 180, 240, 0.1);
  color: #bad3ef;
}

body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-context,
body[data-theme="dark"][data-view="mail"] .mail-row.multi-selected .mail-row-context {
  color: rgba(255, 255, 255, 0.9);
}

body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-context-item + .mail-row-context-item::before,
body[data-theme="dark"][data-view="mail"] .mail-row.multi-selected .mail-row-context-item + .mail-row-context-item::before {
  color: rgba(255, 255, 255, 0.58);
}

body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-context-item.category,
body[data-theme="dark"][data-view="mail"] .mail-row.multi-selected .mail-row-context-item.category,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-smart-summary,
body[data-theme="dark"][data-view="mail"] .mail-row.multi-selected .mail-row-smart-summary,
body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-smart-summary > span,
body[data-theme="dark"][data-view="mail"] .mail-row.multi-selected .mail-row-smart-summary > span {
  color: #fff;
}

body[data-theme="dark"][data-view="mail"] .mail-row.selected .mail-row-smart-summary,
body[data-theme="dark"][data-view="mail"] .mail-row.multi-selected .mail-row-smart-summary {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14);
}

/* Native shell toolbar polish: keep the same layout, but use denser controls. */
body.native-shell[data-view="mail"] .mail-reader-actions {
  gap: 6px !important;
  row-gap: 6px !important;
  column-gap: 6px !important;
  min-height: 46px !important;
  padding: 7px 12px 8px !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-group {
  gap: 6px !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button:not(.icon),
body.native-shell[data-view="mail"] .mail-reader-actions .mail-more-actions > summary {
  min-height: 34px !important;
  padding-inline: 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-icon {
  font-size: 12.5px !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button.icon,
body.native-shell[data-view="mail"] .mail-reader-actions .mail-more-actions > summary {
  flex-basis: 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-inline: 0 !important;
}

body.native-shell[data-view="mail"] .mail-reader-actions .mail-more-actions {
  flex: 0 0 34px !important;
}

@media (min-width: 761px) {
  body[data-view="mail"] .mail-reader-actions,
  body.native-shell[data-view="mail"] .mail-reader-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding-block: 9px !important;
    scrollbar-width: none !important;
  }

  body[data-view="mail"] .mail-reader-actions::-webkit-scrollbar,
  body.native-shell[data-view="mail"] .mail-reader-actions::-webkit-scrollbar {
    display: none !important;
  }

  body[data-view="mail"] .mail-reader-actions > .mail-toolbar-primary-actions,
  body[data-view="mail"] .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-secondary-actions {
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-view="mail"] .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"] .mail-reader-actions > .mail-toolbar-secondary-actions {
    flex: 0 1 auto !important;
    gap: 6px !important;
    max-width: 100% !important;
  }

  body[data-view="mail"] .mail-reader-actions .mail-toolbar-button,
  body[data-view="mail"] .mail-reader-actions .mail-more-actions > summary,
  body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button,
  body.native-shell[data-view="mail"] .mail-reader-actions .mail-more-actions > summary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 34px !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  body[data-view="mail"] .mail-reader-actions .mail-toolbar-button:not(.icon),
  body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button:not(.icon) {
    max-width: 132px !important;
  }

  body[data-view="mail"] .mail-reader-actions .mail-toolbar-button:not(.icon) .mail-toolbar-label,
  body.native-shell[data-view="mail"] .mail-reader-actions .mail-toolbar-button:not(.icon) .mail-toolbar-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-view="mail"] .mail-message-header,
  body.native-shell[data-view="mail"] .mail-message-header {
    margin-top: 12px !important;
  }
}

@media (min-width: 761px) {
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 10px 8px 12px !important;
    overflow: visible !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf1f5 !important;
    box-shadow: none !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button,
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-more-actions > summary,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-more-actions > summary {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    min-height: 34px !important;
    padding-inline: 0 !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button.primary,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button.primary {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-label,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-message-header,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-message-header {
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
}

/* Final action-row stability pass: no middle wrap state. Full mode is one
   centered row; compact mode starts before labels can crowd and is centered. */
@media (min-width: 761px) {
  body[data-view="mail"]:not(.mail-reader-narrow-actions) .mail-reader-actions,
  body.native-shell[data-view="mail"]:not(.mail-reader-narrow-actions) .mail-reader-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: 60px !important;
    scrollbar-width: none !important;
  }

  body[data-view="mail"]:not(.mail-reader-narrow-actions) .mail-reader-actions > .mail-toolbar-primary-actions,
  body[data-view="mail"]:not(.mail-reader-narrow-actions) .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"]:not(.mail-reader-narrow-actions) .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"]:not(.mail-reader-narrow-actions) .mail-reader-actions > .mail-toolbar-secondary-actions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions {
    justify-content: center !important;
    padding-inline: 16px !important;
    margin-inline: 0 !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions {
    justify-content: center !important;
  }
}

body.native-shell[data-view="mail"] .mail-reader {
  --mail-reader-content-font-size: calc(14px * var(--mail-reader-font-scale, 1));
  --mail-reader-title-font-size: calc(20px * var(--mail-reader-font-scale, 1));
}

body.native-shell[data-view="mail"] .mail-reader .message-body-card,
body.native-shell[data-view="mail"] .mail-reader .mail-preview,
body.native-shell[data-view="mail"] .mail-reader .email-text-fallback,
body.native-shell[data-view="mail"] .mail-reader .mail-preview-fallback-note,
body.native-shell[data-view="mail"] .mail-reader .quick-summary-card,
body.native-shell[data-view="mail"] .mail-reader .suggested-playbook-card,
body.native-shell[data-view="mail"] .mail-reader .mail-compact-details {
  font-size: var(--mail-reader-content-font-size) !important;
}

body.native-shell[data-view="mail"] .mail-reader .message-detail h2,
body.native-shell[data-view="mail"] .mail-reader .mail-message-header h2,
body.native-shell[data-view="mail"] .mail-reader .message-subject {
  font-size: var(--mail-reader-title-font-size) !important;
}

/* Final dark-mode mail reader pass: late mail layout rules above force light
   action/header surfaces, so keep dark chrome here at the end of the cascade. */
body[data-theme="dark"][data-view="mail"] .mail-reader-actions,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions {
  border-color: rgba(188, 205, 230, 0.16) !important;
  background: rgba(8, 17, 31, 0.96) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26) !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button,
body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-more-actions > summary,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-more-actions > summary {
  border-color: rgba(188, 205, 230, 0.2) !important;
  background: rgba(17, 31, 52, 0.94) !important;
  color: #dbe8fb !important;
  box-shadow: none !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button:hover:not(:disabled),
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button:hover:not(:disabled),
body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-more-actions > summary:hover,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-more-actions > summary:hover {
  border-color: rgba(145, 184, 255, 0.38) !important;
  background: rgba(31, 54, 89, 0.98) !important;
  color: #f8fbff !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button:disabled,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button:disabled {
  border-color: rgba(188, 205, 230, 0.11) !important;
  background: rgba(17, 31, 52, 0.5) !important;
  color: rgba(219, 232, 251, 0.36) !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.primary,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.primary {
  border-color: #4f86e8 !important;
  background: #3f73d8 !important;
  color: #ffffff !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.ai,
body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.accent,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.ai,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.accent {
  border-color: rgba(145, 184, 255, 0.28) !important;
  background: rgba(22, 42, 72, 0.96) !important;
  color: #d6e5ff !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.warning,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.warning {
  border-color: rgba(245, 188, 91, 0.34) !important;
  background: rgba(74, 46, 12, 0.72) !important;
  color: #ffd797 !important;
}

body[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.danger,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-reader-actions .mail-toolbar-button.danger {
  border-color: rgba(248, 113, 113, 0.36) !important;
  background: rgba(74, 25, 30, 0.72) !important;
  color: #fecaca !important;
}

body[data-theme="dark"][data-view="mail"] .mail-message-header,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-message-header {
  border: 1px solid rgba(188, 205, 230, 0.16) !important;
  background: rgba(8, 17, 31, 0.86) !important;
  color: #dbe8fb !important;
  padding: 18px 18px 16px !important;
}

body[data-theme="dark"][data-view="mail"] .mail-message-header h2,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-message-header h2,
body[data-theme="dark"][data-view="mail"] .mail-message-from-line strong,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-message-from-line strong {
  color: #f8fbff !important;
}

body[data-theme="dark"][data-view="mail"] .mail-message-from-line,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-message-from-line,
body[data-theme="dark"][data-view="mail"] .mail-message-header .mail-reader-meta-line,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-message-header .mail-reader-meta-line {
  color: #aebdd2 !important;
}

body[data-theme="dark"][data-view="mail"] .message-body-card,
body.native-shell[data-theme="dark"][data-view="mail"] .message-body-card {
  background: transparent !important;
  color: #dbe8fb !important;
}

body[data-theme="dark"][data-view="mail"] .email-html-preview,
body.native-shell[data-theme="dark"][data-view="mail"] .email-html-preview {
  border-color: rgba(188, 205, 230, 0.16) !important;
  background: #0b1526 !important;
}

body[data-theme="dark"][data-view="mail"] .mail-pane-loading,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-pane-loading,
body.native-shell[data-view="mail"] .mail-pane-loading {
  border-color: rgba(188, 205, 230, 0.22) !important;
  background: linear-gradient(180deg, rgba(17, 31, 52, 0.94), rgba(8, 17, 31, 0.98)) !important;
  color: #e5ecf8 !important;
}

body[data-theme="dark"][data-view="mail"] .mail-pane-loading strong,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-pane-loading strong,
body.native-shell[data-view="mail"] .mail-pane-loading strong {
  color: #f8fbff !important;
}

body[data-theme="dark"][data-view="mail"] .mail-pane-loading p,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-pane-loading p,
body.native-shell[data-view="mail"] .mail-pane-loading p {
  color: #aebdd2 !important;
}

body[data-theme="dark"][data-view="mail"] .mail-pane-spinner,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-pane-spinner,
body.native-shell[data-view="mail"] .mail-pane-spinner {
  border-color: rgba(114, 169, 255, 0.24) !important;
  border-top-color: #72a9ff !important;
}

body[data-theme="dark"][data-view="mail"] .mail-pane-loading-lines span,
body.native-shell[data-theme="dark"][data-view="mail"] .mail-pane-loading-lines span,
body.native-shell[data-view="mail"] .mail-pane-loading-lines span {
  background: rgba(188, 205, 230, 0.12) !important;
}

/* Final dark topbar pass: keep status/action buttons readable on dark chrome. */
body[data-theme="dark"] .top-actions .openai-status-alert,
body[data-theme="dark"] .top-actions .approval-top-button,
body[data-theme="dark"] .top-actions .notification-top-button,
body[data-theme="dark"] .top-actions .diagnostics-top-button,
body[data-theme="dark"][data-view="mail"] .top-actions .openai-status-alert,
body[data-theme="dark"][data-view="mail"] .top-actions .approval-top-button,
body[data-theme="dark"][data-view="mail"] .top-actions .notification-top-button,
body[data-theme="dark"][data-view="mail"] .top-actions .diagnostics-top-button {
  border-color: rgba(188, 205, 230, 0.24) !important;
  background: rgba(17, 31, 52, 0.95) !important;
  color: #e8f0ff !important;
  box-shadow: none !important;
}

/* Final compact action alignment: compact mode starts only once the actual
   reader pane is tight, and the combined button cluster is centered. */
@media (min-width: 761px) {
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-inline: 0 !important;
    padding-inline: 16px !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions {
    margin-left: auto !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions {
    margin-right: auto !important;
  }
}

/* Final narrow-reader action behavior: keep a single sticky icon row. This is
   keyed to the actual reader pane width by app.js, not the full window. */
@media (min-width: 761px) {
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 -34px 18px !important;
    padding: 8px 34px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04) !important;
    scrollbar-width: none !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions::-webkit-scrollbar,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions::-webkit-scrollbar {
    display: none !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button,
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-more-actions > summary,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-more-actions > summary {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 0 !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button.primary,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-button.primary {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-label,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions .mail-toolbar-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-message-header,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-message-header {
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
}

/* Absolute last mail-toolbar correction: the compact mode should only be a
   centered icon strip, never a left-starting strip with negative margins. */
@media (min-width: 761px) {
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
    margin: 0 0 18px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04) !important;
    scrollbar-width: none !important;
  }

  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-primary-actions,
  body.native-shell[data-view="mail"].mail-reader-narrow-actions .mail-reader-actions > .mail-toolbar-secondary-actions {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 6px !important;
    overflow: visible !important;
  }
}