/* Roundcube Elastic fornecida pelo usuário · eSuite V7 R03 · 28/10/2026.
   SOMENTE overrides visuais, carregados após styles.css/styes.less da Elastic.
   Seletores verificados contra mail.html, compose.html, login.html, menu.html,
   layout.less, dark.less e widgets/*.less do ZIP de origem.
   Modo claro padrão da Elastic permanece funcional. */
:root {
  --esuite-graphite:#2F343F;
  --esuite-slate:#3B404F;
  --esuite-card:#404651;
  --esuite-muted:#D4DCE9;
  --esuite-text:#E8F2FA;
  --esuite-accent:#376FC4;
  --esuite-nav:#5A6889;
  --esuite-composer:#333C4D;
  --esuite-popover:#293144;
  --esuite-selected:#252C39;
  --esuite-hover:#2B4267;
  --esuite-line:rgba(160,183,220,.18);
  --esuite-shadow:0 15px 34px rgba(4,10,24,.38),0 28px 62px rgba(4,10,24,.16),inset 0 1px 0 rgba(232,242,250,.04);
}

html.dark-mode,
html.dark-mode body {
  color:#E8F2FA;
  background-color:#2F343F;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
html.dark-mode body::before {
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(47,52,63,.30),rgba(59,64,79,.33)),
             url("../assets/fundo-neural-institucional.png") center / cover no-repeat;
  filter:saturate(.70);
}
html.dark-mode body::after {
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 52% at 55% 59%,rgba(64,70,81,.17),transparent 75%),
             linear-gradient(90deg,rgba(47,52,63,.16),transparent 25%,transparent 75%,rgba(47,52,63,.17));
}
html.dark-mode #layout { position:relative; z-index:1; background:transparent; }
/* R03: no login, não isolar o vórtice em um stacking context opaco.
   Assim o blend screen compõe com o fundo neural como no watermark.html.
   Nas demais páginas do Roundcube o layout permanece inalterado. */
html.dark-mode body.task-login #layout { z-index:auto; isolation:auto; }
html.dark-mode ::selection { background:rgba(55,111,196,.52); color:#E8F2FA; }
html.dark-mode :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline:2px solid #376FC4;
  outline-offset:3px;
}
html.dark-mode { scrollbar-color:#5A6889 #2E3648; }
html.dark-mode :is(#folderlist-content,#messagelist-content,.scroller) {
  scrollbar-color:#5A6889 transparent; scrollbar-width:thin;
}

/* Elastic: taskmenu, action buttons and real folder list. No new toolbar. */
html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar {
  background:linear-gradient(180deg,#29303F 0%,#2B3344 29%,#2E3648 69%,#2E3648 100%);
  border-color:rgba(160,183,220,.18);
  color:#D4DCE9;
}
html.dark-mode #layout-menu { box-shadow:8px 0 26px rgba(3,9,22,.14); }
html.dark-mode #layout-sidebar { box-shadow:8px 0 26px rgba(3,9,22,.12); }
html.dark-mode #layout-menu .popover-header { background:transparent!important; }
html.dark-mode #layout-menu #logo { opacity:1; filter:none; object-fit:contain; }
html.dark-mode #layout-menu #taskmenu a,
html.dark-mode #layout-menu #taskmenu a::before,
html.dark-mode #layout-sidebar .folderlist li a,
html.dark-mode #layout-sidebar .folderlist li .name {
  color:#5A6889;
}
html.dark-mode #layout-menu #taskmenu a.selected,
html.dark-mode #layout-menu #taskmenu a.selected::before,
html.dark-mode #layout-sidebar .folderlist li.selected > a,
html.dark-mode #layout-sidebar .folderlist li.selected > a .name {
  background:#252C39; color:#E8F2FA;
}
html.dark-mode #layout-menu #taskmenu a:not(.disabled):hover,
html.dark-mode #layout-sidebar .folderlist li > a:not(.disabled):hover {
  background:#2B4267; color:#E8F2FA;
}
html.dark-mode #taskmenu a.compose,
html.dark-mode #taskmenu .action-buttons a.compose {
  color:#E8F2FA;
  background:#376FC4;
  box-shadow:0 8px 22px rgba(4,10,24,.30);
}
html.dark-mode #taskmenu a.compose:hover { background:#2B4267; }
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-sidebar .footer {
  background:linear-gradient(180deg,#272F40,#252D3C);
  border-color:rgba(160,183,220,.16);
  color:#D4DCE9;
}
html.dark-mode #layout-sidebar .header .username { color:#E8F2FA; }
html.dark-mode #mailboxlist .unreadcount,
html.dark-mode .folderlist li.mailbox .unreadcount {
  background:#376FC4; color:#E8F2FA; border-radius:999px;
}

/* The inbox list and toolbar are solid, with their ORIGINAL dimensions. */
html.dark-mode #layout-list {
  background:#333C4D; color:#D4DCE9;
  border-color:rgba(160,183,220,.18);
}
html.dark-mode #layout-content {
  background:#293144; color:#E8F2FA;
  border-color:rgba(160,183,220,.18);
}
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode #layout-list .toolbar.menu,
html.dark-mode #messagelist-header {
  background:#333C4D;
  border-color:rgba(160,183,220,.18);
  color:#E8F2FA;
  box-shadow:0 9px 23px rgba(4,10,24,.23);
}
html.dark-mode #layout > div > .header .header-title { color:#E8F2FA; }
html.dark-mode #layout > div > .header .button,
html.dark-mode .toolbar.menu a { color:#D4DCE9; }
html.dark-mode .toolbar.menu a.selected {
  background:#252C39; color:#E8F2FA;
}
html.dark-mode #layout > div > .header :is(a.button,.menu a):hover,
html.dark-mode .toolbar.menu a:not(.disabled):hover { background:#2B4267; color:#E8F2FA; }

/* Search, folders, list rows and status semantics match the real Elastic DOM. */
html.dark-mode .searchbar,
html.dark-mode #mailsearchform,
html.dark-mode .searchbar form,
html.dark-mode #messagelist-content { border-color:rgba(160,183,220,.18); }
html.dark-mode .searchbar { background:#293144; }
html.dark-mode .searchbar input { background:#232933; color:#E8F2FA; }
html.dark-mode .listing tbody td,
html.dark-mode .listing li,
html.dark-mode #messagelist td { border-color:rgba(160,183,220,.13); color:#D4DCE9; }
html.dark-mode #messagelist tr:not(.deleted) td.subject a,
html.dark-mode #messagelist tr:not(.deleted) td.subject .subject,
html.dark-mode .messagelist tr.unread td.subject a { color:#E8F2FA; }
html.dark-mode .messagelist tr:not(.selected):hover td,
html.dark-mode .listing li:not(.selected):hover { background:rgba(55,111,196,.17); }
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr.selected td,
html.dark-mode #messagelist tr.focused td {
  background:#252C39;
  color:#E8F2FA;
}
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td:first-child { box-shadow:inset 3px 0 0 #376FC4; }
html.dark-mode .messagelist tr:not(.deleted) td.subject :is(.date,.fromto,.size),
html.dark-mode .messagelist span.attachment span { color:#A9B9D1; }
html.dark-mode .messagelist tr.unread td.subject { font-weight:700; }
html.dark-mode .messagelist span.msgicon.status.unread::before { color:#376FC4; }
html.dark-mode .messagelist tr.deleted td { opacity:.5; }

/* THREE separate menu states: normal=popup background; selected; hover. */
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .ui-widget.ui-dialog {
  background:#293144; color:#E8F2FA;
  border:1px solid rgba(55,111,196,.22);
  border-radius:15px;
  box-shadow:0 18px 38px rgba(3,9,22,.54),0 32px 66px rgba(3,9,22,.24),inset 0 1px 0 rgba(232,242,250,.055);
}
html.dark-mode .popupmenu .listing li,
html.dark-mode .popupmenu .listing li a,
html.dark-mode .popover .menu li,
html.dark-mode .popover .menu li a {
  background:transparent;
  color:#D4DCE9;
}
html.dark-mode .popupmenu .listing li.selected,
html.dark-mode .popupmenu .listing li.selected > a,
html.dark-mode .popover .menu li.selected,
html.dark-mode .popover .menu li.selected a {
  background:#252C39;
  color:#E8F2FA;
}
html.dark-mode .popupmenu .listing li:not(.disabled):hover,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .popover .menu li > a:not(.disabled):hover,
html.dark-mode .ui-menu .ui-state-active,
html.dark-mode .ui-menu .ui-state-focus {
  background:#2B4267;
  color:#E8F2FA;
}
html.dark-mode .ui-dialog .ui-dialog-titlebar,
html.dark-mode .ui-widget-header { background:#333C4D; color:#E8F2FA; border-color:rgba(160,183,220,.18); }

/* Native compose.html: message form, attachments, editor chrome stay live. */
html.dark-mode #compose-content,
html.dark-mode #compose-headers,
html.dark-mode #compose-options,
html.dark-mode #compose-attachments,
html.dark-mode .formcontent,
html.dark-mode .propform { color:#D4DCE9; border-color:rgba(160,183,220,.18); }
html.dark-mode :is(.formcontent,.propform,.listing,.navlist,.listbox,.message-part,.contactlist) {
  color:#D4DCE9;
}
html.dark-mode :is(.formcontent,.propform) :is(label,.col-form-label,.form-text,.hint) {
  color:#D4DCE9;
}
html.dark-mode :is(.formcontent,.propform) :is(.text-muted,.small,.hint) {
  color:#A9B9D1!important;
}
html.dark-mode #compose-content { background:#293144; }
html.dark-mode .attachmentslist,
html.dark-mode .attachmentslist li { background:#333C4D; color:#D4DCE9; border-color:rgba(160,183,220,.18); }
html.dark-mode .form-control,
html.dark-mode .custom-file-label,
html.dark-mode .input-group-text,
html.dark-mode :is(input:not([type=checkbox]):not([type=radio]),textarea,select):not(.hidden) {
  background-color:#232933;
  color:#E8F2FA;
  border-color:rgba(160,183,220,.22);
}
html.dark-mode :is(input,textarea)::placeholder { color:#A9B9D1; }
html.dark-mode :is(input:not([type=checkbox]):not([type=radio]),textarea,select,.form-control):focus {
  background-color:#232933;
  color:#E8F2FA;
  border-color:rgba(55,111,196,.75);
  box-shadow:0 0 0 3px rgba(55,111,196,.14);
}
html.dark-mode :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color:#376FC4; }
html.dark-mode .btn-secondary,
html.dark-mode .button:not(.icon):not(.mainaction) { background:#333C4D; color:#D4DCE9; border-color:rgba(160,183,220,.23); }
html.dark-mode .btn-primary,
html.dark-mode .button.mainaction,
html.dark-mode button[type=submit].btn-primary {
  background:#376FC4; color:#E8F2FA;
  border-color:rgba(212,220,233,.25);
  box-shadow:0 8px 22px rgba(4,10,24,.30);
}
html.dark-mode :is(.btn-primary,.btn-secondary,.button.mainaction):hover { background:#2B4267; color:#E8F2FA; }

/* The original login form is real Roundcube loginform (never an imitation). */
html.dark-mode.task-login #layout-content { background:transparent; }
html.dark-mode .task-login #layout-content { background:transparent; }
html.dark-mode .task-login #logo { opacity:1; width:min(330px,74vw); height:auto; filter:none; }
html.dark-mode .task-login #login-form {
  background:#293144; color:#E8F2FA;
  border:1px solid rgba(55,111,196,.24);
  border-radius:22px;
  padding:25px 24px;
  box-shadow:var(--esuite-shadow);
}
html.dark-mode .task-login #login-form label,
html.dark-mode .task-login #login-footer { color:#D4DCE9; }
html.dark-mode .task-login #login-footer > div { background:#252D3C; border-color:rgba(160,183,220,.18); }

/* Decorative layer only on login (actual mail preview has its own iframe). */
.esuite-v7-login-stage {
  position:absolute; top:0; right:0; width:min(45vw,1100px);
  aspect-ratio:1841/1037; z-index:auto; isolation:auto;
  overflow:visible; pointer-events:none;
}
.esuite-v7-vortex {
  position:absolute; top:0; right:0; width:100%; height:auto;
  display:block; object-fit:contain;
  mix-blend-mode:screen; opacity:.90;
  filter:saturate(.74) contrast(1.16) brightness(.91) drop-shadow(0 1px 11px rgba(55,111,196,.10));
  transform:translateZ(0);
}
.esuite-v7-orbs { position:absolute; inset:0; pointer-events:none; opacity:.98; }
.esuite-v7-orb {
  position:absolute; left:var(--x); top:var(--y); width:var(--size); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 32% 25%,#E8F2FA 0 9%,#D4DCE9 22%,#376FC4 58%,#2F343F 91%);
  box-shadow:inset -2px -2px 4px rgba(47,52,63,.52),0 0 0 1px rgba(212,220,233,.20),0 0 16px rgba(55,111,196,.38);
  animation:esuite-v7-orb-float var(--duration) ease-in-out var(--delay) infinite;
  will-change:transform,opacity;
}
.esuite-v7-orb::before { content:""; position:absolute; inset:-55%; border-radius:50%; background:radial-gradient(circle,rgba(55,111,196,.21),transparent 72%); }
.esuite-v7-orb::after { content:""; position:absolute; left:22%; top:16%; width:26%; height:19%; background:rgba(232,242,250,.82); border-radius:50%; filter:blur(.4px); }
.esuite-v7-orb--silver { background:radial-gradient(circle at 30% 26%,#E8F2FA 0 17%,#D4DCE9 42%,#404651 83%,#2F343F 100%); box-shadow:inset -2px -2px 4px rgba(47,52,63,.38),0 0 0 1px rgba(212,220,233,.28),0 0 16px rgba(212,220,233,.34); }
.esuite-v7-orb--slate { background:radial-gradient(circle at 31% 25%,#E8F2FA 0 8%,#D4DCE9 15%,#404651 47%,#3B404F 76%,#2F343F 100%); box-shadow:inset -2px -2px 4px rgba(47,52,63,.50),0 0 0 1px rgba(212,220,233,.18),0 0 13px rgba(212,220,233,.24); }
.esuite-v7-orb--ice { background:radial-gradient(circle at 34% 29%,#E8F2FA 0 21%,#D4DCE9 63%,#376FC4 87%,#3B404F 100%); box-shadow:inset -2px -2px 4px rgba(47,52,63,.30),0 0 0 1px rgba(232,242,250,.30),0 0 18px rgba(232,242,250,.36); }
@keyframes esuite-v7-orb-float { 0%,100% { transform:translate3d(-50%,-50%,0) translate3d(0,0,0); opacity:.84; } 50% { transform:translate3d(-50%,-50%,0) translate3d(var(--dx),var(--dy),0); opacity:1; } }

/* Keep the native light-mode toggle functional. This layer targets dark mode.
   Visual acceptance specifically concerns the V7 dark-mode state. */
@media(max-width:1190px) { .esuite-v7-login-stage { width:53vw; } }
@media(max-width:850px) { .esuite-v7-login-stage { width:62vw; opacity:.7; } }
@media(max-width:620px) { .esuite-v7-login-stage { width:92vw; right:-8vw; opacity:.57; } }
@media(prefers-reduced-motion:reduce) { .esuite-v7-orb { animation:none; transform:translate3d(-50%,-50%,0); } }



/* =======================================================================
 * ESUITE WEBMAIL V7 R06 / HDR02 — tema grafite institucional homologado
 * 29/10/2026 (Brasil UTC-03) — BASE: elastic(1).zip de produção.
 * APENAS camada visual. Os objetos Roundcube continuam em message.html;
 * NÃO injeta cabeçalho falso no watermark e NÃO modifica HTML dos e-mails.
 * Paleta de referência: Forgejo RC10 / roadmap V7 (grafite + azul).
 * ======================================================================= */
html.dark-mode {
  --es6-base: #2F343F;
  --es6-toolbar: #333C4D;
  --es6-panel: #303949;
  --es6-sidebar: #2B3444;
  --es6-inset: #252D3C;
  --es6-card: #353F50;
  --es6-head: #2F3A4C;
  --es6-text: #E8F2FA;
  --es6-body: #D4DCE9;
  --es6-muted: #A9B9D1;
  --es6-disabled: #8795AC;
  --es6-blue: #579BEF;
  --es6-active: #376FC4;
  --es6-selected: #31578C;
  --es6-hover: #3B4C66;
  --es6-line: rgba(160,183,220,.19);
  --es6-shadow: 0 12px 30px rgba(5,11,24,.30),inset 0 1px 0 rgba(232,242,250,.035);
  color:var(--es6-body);
  font-size:13px;
}
html.dark-mode body {
  background:var(--es6-base);
  color:var(--es6-body);
  font:400 13px/1.45 Inter,Roboto,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Keep the user-provided synapse background. Its artwork, size and position
   remain controlled by production's original body::before / ::after rules. */
html.dark-mode #layout-menu,
html.dark-mode #layout-sidebar {
  background:linear-gradient(180deg,#29313F,#2C3545 62%,#2F3746);
  border-color:var(--es6-line);
  color:var(--es6-body);
}
html.dark-mode #layout-list {
  background:var(--es6-panel);
  color:var(--es6-body);
  border-color:var(--es6-line);
}
html.dark-mode #layout-content {
  background:rgba(47,52,63,.38);
  color:var(--es6-body);
  border-color:var(--es6-line);
}
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer,
html.dark-mode #layout-list .toolbar.menu,
html.dark-mode #messagelist-header {
  background:var(--es6-toolbar);
  border-color:var(--es6-line);
  color:var(--es6-text);
  box-shadow:0 5px 15px rgba(5,11,24,.18);
}
html.dark-mode #layout > div > .header .header-title,
html.dark-mode #layout-sidebar .header .username {color:var(--es6-text);}
/* Base action bar: icon and caption stay readable at widths like the
   reference. Responsive behavior remains Elastic-native. */
html.dark-mode #layout > div > .header .toolbar.menu a,
html.dark-mode #layout > div > .header .menu.toolbar a {
  font-size:12px;
  line-height:1.22;
  font-weight:450;
  letter-spacing:0;
  padding:5px 5px 4px;
  color:var(--es6-body);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html.dark-mode #layout > div > .header .toolbar.menu a .inner,
html.dark-mode #layout > div > .header .menu.toolbar a .inner {
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}
html.dark-mode #layout > div > .header .toolbar.menu a:before,
html.dark-mode #layout > div > .header .menu.toolbar a:before {
  font-size:17px;
  color:inherit;
}
html.dark-mode #layout > div > .header .toolbar.menu a.disabled,
html.dark-mode #layout > div > .header .menu.toolbar a.disabled {
  color:var(--es6-disabled);
  opacity:.68;
}
html.dark-mode #layout > div > .header .toolbar.menu a:not(.disabled):hover,
html.dark-mode #layout > div > .header .menu.toolbar a:not(.disabled):hover {
  background:var(--es6-hover);color:var(--es6-text);
}
html.dark-mode #layout > div > .header .toolbar.menu a.selected,
html.dark-mode #layout > div > .header .menu.toolbar a.selected {
  background:var(--es6-selected);color:var(--es6-text);
}
html.dark-mode #mailtoolbar {min-width:0;flex-shrink:1;}
html.dark-mode #mailtoolbar > .spacer {min-width:0;width:.4rem;}
html.dark-mode #mailtoolbar .dropbutton a.dropdown {
  min-width:13px;max-width:21px;padding-inline:3px!important;
}
html.dark-mode #layout-menu #taskmenu a,
html.dark-mode #layout-menu #taskmenu a:before,
html.dark-mode #layout-sidebar .folderlist li a,
html.dark-mode #layout-sidebar .folderlist li .name {color:var(--es6-body);}
html.dark-mode #layout-menu #taskmenu a.selected,
html.dark-mode #layout-menu #taskmenu a.selected:before,
html.dark-mode #layout-sidebar .folderlist li.selected > a,
html.dark-mode #layout-sidebar .folderlist li.selected > a .name {
  background:var(--es6-selected);color:var(--es6-text);
}
html.dark-mode #layout-sidebar .folderlist li.disabled > a,
html.dark-mode #layout-menu #taskmenu a.disabled {color:var(--es6-disabled);opacity:.67;}
html.dark-mode #layout-menu #taskmenu a:not(.disabled):hover,
html.dark-mode #layout-sidebar .folderlist li > a:not(.disabled):hover {
  background:var(--es6-hover);color:var(--es6-text);
}
html.dark-mode #taskmenu a.compose,
html.dark-mode #taskmenu .action-buttons a.compose {
  background:var(--es6-active);color:var(--es6-text);
}
html.dark-mode #taskmenu a.compose:hover {background:var(--es6-selected);}
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-sidebar .footer {background:var(--es6-toolbar);border-color:var(--es6-line);}
html.dark-mode #mailboxlist .unreadcount,
html.dark-mode .folderlist li.mailbox .unreadcount {background:var(--es6-active);color:#fff;}
html.dark-mode .searchbar {background:var(--es6-panel);border-color:var(--es6-line);}
html.dark-mode .searchbar input,
html.dark-mode #mailsearchform input {
  background:var(--es6-inset);color:var(--es6-text);
  border-color:var(--es6-line);font-size:12.5px;
}
html.dark-mode #messagelist tr td {color:var(--es6-body);border-color:var(--es6-line);font-size:12.5px;}
html.dark-mode #messagelist tr:not(.deleted) td.subject a,
html.dark-mode #messagelist tr:not(.deleted) td.subject .subject {color:var(--es6-text);}
html.dark-mode #messagelist tr.selected td,
html.dark-mode #messagelist tr.focused td {
  background:var(--es6-selected);color:var(--es6-text);
}
html.dark-mode #messagelist tr.selected td :is(a,span),
html.dark-mode #messagelist tr.focused td :is(a,span) {color:var(--es6-text);}
html.dark-mode #messagelist tr:not(.selected):not(.focused):hover td {
  background:var(--es6-hover);
}
html.dark-mode #messagelist tr.deleted td {opacity:.55;}
html.dark-mode #messagelist .date,
html.dark-mode #messagelist .fromto,
html.dark-mode #messagelist .size {color:var(--es6-muted);}
html.dark-mode #messagelist tr.selected .date,
html.dark-mode #messagelist tr.selected .fromto {color:#dce9fa;}
html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .ui-dialog,
html.dark-mode .ui-widget.ui-dialog {background:var(--es6-panel);border-color:var(--es6-line);color:var(--es6-body);}
html.dark-mode .popupmenu .listing li.selected,
html.dark-mode .popover .menu li.selected {background:var(--es6-selected);}
html.dark-mode .popupmenu .listing li:not(.selected):not(.disabled):hover,
html.dark-mode .popover .menu li > a:not(.disabled):hover {background:var(--es6-hover);}
html.dark-mode .popupmenu :is(.disabled,a.disabled),
html.dark-mode .popover :is(.disabled,a.disabled) {color:var(--es6-disabled);opacity:.65;}
/* HDR02: real message-only header. The blank watermark has no #message-header.
   Keep these selectors in the real message preview iframe (message.html).
   light-mode stays native, with default Elastic styling. */
html.dark-mode body.task-mail #message-header {
  display:block;
  visibility:visible;
  opacity:1;
  position:relative;
  z-index:1;
  width:100%;max-width:100%;min-width:0;
  box-sizing:border-box;
  padding:12px 14px;
  margin:0 0 12px;
  background:linear-gradient(180deg,#343D4D,#303949);
  border:1px solid var(--es6-line);
  border-radius:7px;
  box-shadow:var(--es6-shadow);
  color:var(--es6-body);
}
html.dark-mode body.task-mail #message-header > .subject {
  display:block;
  margin:0 0 8px;padding:0;
  color:var(--es6-text);
  font-size:15px;
  line-height:1.3;
  font-weight:650;
  white-space:normal;
  overflow-wrap:anywhere;
}
html.dark-mode body.task-mail #message-header > .subject a.extwin,
html.dark-mode body.task-mail #message-header > .subject a.extwin:before {color:var(--es6-blue);}
html.dark-mode body.task-mail #message-header > .header {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;padding:0;
  height:auto;min-height:0;
  max-width:100%;min-width:0;
  overflow:visible;
  white-space:normal;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--es6-body);
}
html.dark-mode body.task-mail #message-header > .header img.contactphoto {
  width:38px;height:38px;min-width:38px;
  object-fit:cover;
  border-radius:50%;
  border:1px solid var(--es6-line);
  background:#485568;
  margin:0;
}
html.dark-mode body.task-mail #message-header .header-content {
  flex:1 1 auto;min-width:0;
  min-height:38px;
  font-size:12px;line-height:1.45;
  color:var(--es6-body);
}
html.dark-mode body.task-mail #message-header .header-summary {
  margin-top:0;
  color:var(--es6-body);
  overflow-wrap:anywhere;
}
html.dark-mode body.task-mail #message-header .header-summary :is(a,.email),
html.dark-mode body.task-mail #message-header .header-headers :is(a,.email) {color:var(--es6-blue);}
/* Do NOT forcibly show .header-headers: the native Details toggle controls it. */
html.dark-mode body.task-mail #message-header .header-headers {font-size:12px;color:var(--es6-body);}
html.dark-mode body.task-mail #message-header .header-headers .header-title {color:var(--es6-muted);}
html.dark-mode body.task-mail #message-header .header-links {
  margin-top:5px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  column-gap:12px;row-gap:4px;
}
html.dark-mode body.task-mail #message-header .header-links a {
  margin:0;padding:0;
  color:var(--es6-blue);
  font-size:11.5px;
  font-weight:500;
  line-height:1.45;
  white-space:nowrap;
  text-decoration:none;
}
html.dark-mode body.task-mail #message-header .header-links a:hover {color:var(--es6-text);text-decoration:underline;}
html.dark-mode body.task-mail #layout-content .content.frame-content {
  box-sizing:border-box;
  padding:12px;
  min-width:0;
}
html.dark-mode body.task-mail #message-content {max-width:100%;min-width:0;background:transparent;}
/* Do not alter the contents of #messagebody or third-party HTML email styles. */
@media (max-width:900px) {
  html.dark-mode body.task-mail #message-header {padding:10px 11px;}
  html.dark-mode body.task-mail #message-header > .subject {font-size:14px;}
  html.dark-mode body.task-mail #message-header .header-links {gap:4px 10px;}
}
@media (prefers-reduced-motion:reduce) {
  html.dark-mode :is(#message-header,#layout-list,.popupmenu) {transition:none!important;}
}