/* =============================================================
   Webmail Grupo VDMKT — interface interna (pós-login)

   Arquitetura desktop (≥1024px): TRÊS áreas. A coluna de ícones
   da Elastic (#layout-menu) é ocultada e suas funções migram para
   dentro da sidebar via vd-app.js — os elementos originais ficam
   no DOM, escondidos, e os novos apenas delegam o clique, então
   nenhum comando do Roundcube é reimplementado. Sem o JS, o html
   não recebe .vd-shell e a interface volta ao layout da Elastic.
   Abaixo de 1024px o fluxo responsivo da Elastic fica intacto.

   Regras de COR disputadas com o modo escuro da Elastic levam o
   prefixo html.dark-mode (especificidade). Métricas de ícone
   levam !important porque a Elastic as esmaga com seletores mais
   específicos (o computed style mostrava width:0).
   ============================================================= */

:root {
  /* superfícies */
  --app-bg:        #08080C;
  --sidebar-bg:    rgba(12, 12, 18, .94);
  --list-bg:       rgba(15, 15, 22, .88);
  --reader-bg:     rgba(10, 10, 15, .72);
  --elevated-bg:   rgba(22, 22, 31, .88);
  --hover-bg:      rgba(255, 255, 255, .045);
  --selected-bg:   rgba(255, 255, 255, .065);
  --header-bg:     rgba(13, 13, 19, .72);

  --border-subtle:  rgba(255, 255, 255, .065);
  --border-default: rgba(255, 255, 255, .10);

  --text-primary:   #F2F2F5;
  --text-secondary: #A6A6B0;
  --text-muted:     #8A8A95;

  --brand:       #E90046;
  --brand-2:     #D80059;
  --brand-hover: #FF195A;
  --brand-soft:  rgba(233, 0, 70, .09);
  --brand-glow:  rgba(233, 0, 70, .14);

  --ok:      #3DDC97;
  --warning: #F2B84B;
  --danger:  #FF4D67;

  /* escala tipográfica */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  26px;

  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;

  --head-h: 66px;

  --vd-font: 'Sherika', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vd-ease: cubic-bezier(.22, .61, .36, 1);
  --vd-t: 180ms;
}

/* ---------------------------------------------------------------
   1. Base e atmosfera
   --------------------------------------------------------------- */

body:not(.task-login) {
  font-family: var(--vd-font);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
}

html.dark-mode body:not(.task-login) {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 88% -10%, rgba(158, 36, 103, .11), transparent 34%),
    radial-gradient(circle at 48% 110%, rgba(66, 53, 130, .07), transparent 38%),
    var(--app-bg);
  background-attachment: fixed;
}

/* Microtextura: tira o aspecto de preto chapado e o banding dos
   gradientes. SVG inline, sem imagem externa, uma única camada. */
html.dark-mode body:not(.task-login)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

html.dark-mode body:not(.task-login) #layout {
  position: relative;
  z-index: 1;
  background: transparent;
}

body:not(.task-login) input,
body:not(.task-login) select,
body:not(.task-login) textarea,
body:not(.task-login) button {
  font-family: var(--vd-font);
}

body:not(.task-login) ::selection {
  background: var(--brand-soft);
  color: var(--text-primary);
}

body:not(.task-login) a:focus-visible,
body:not(.task-login) button:focus-visible,
body:not(.task-login) [role="button"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 6px rgba(233, 0, 70, .1);
}

body:not(.task-login) ::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.task-login) ::-webkit-scrollbar-track { background: transparent; }
body:not(.task-login) ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
body:not(.task-login) ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, .18);
}

/* ---------------------------------------------------------------
   2. Ícones — família única Lucide, stroke 2, cantos redondos.
   O :before vira um bloco pintado com currentColor, então herda
   cor e estado do controle.
   --------------------------------------------------------------- */

.folderlist li.mailbox > a:before,
#taskmenu a:before,
.vd-nav a:before,
.vd-bottom a:before,
#layout-list .header .toolbar a:before,
#layout-list .header a.toolbar-button:before,
#layout-content .header a.reply:before,
#layout-content .header a.reply-all:before,
#layout-content .header a.forward:before,
#layout-content .header a.delete:before,
#layout-content .header a.markmessage:before,
#layout-content .header a.more:before,
#layout-content .header a.dropdown:before,
.searchbar a.search:before,
.vd-compose:before {
  /* !important: a Elastic esmaga width/display do :before com
     seletores mais específicos (computed mostrava width:0). */
  content: "" !important;
  display: inline-block !important;
  width: 19px !important;
  height: 19px !important;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -4px;
}

/* pastas */
.folderlist li.mailbox > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
}

.folderlist li.mailbox.inbox > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z'/%3E%3C/svg%3E");
}

.folderlist li.mailbox.drafts > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}

.folderlist li.mailbox.sent > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
}

.folderlist li.mailbox.junk > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86Z'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86Z'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}

.folderlist li.mailbox.trash > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E");
}

.folderlist li.mailbox.archive > a:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='5' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='5' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/%3E%3C/svg%3E");
}

/* busca e atualizar */
.searchbar a.search:before,
#layout-list .header .toolbar a.search:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* Selecionar: quadrado com check */
#layout-list .header .toolbar a.select:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m8.5 12 2.5 2.5 5-5.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m8.5 12 2.5 2.5 5-5.5'/%3E%3C/svg%3E");
}

/* Agrupamento por assunto: camadas */
#layout-list .header .toolbar a.threads:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
}

#layout-list .header .toolbar a.refresh:before,
#layout-list .header a.toolbar-button.refresh:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6'/%3E%3C/svg%3E");
}

/* toolbar de leitura */
#layout-content .header a.reply:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

#layout-content .header a.reply-all:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17-5-5 5-5'/%3E%3Cpath d='m13 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17-5-5 5-5'/%3E%3Cpath d='m13 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H8'/%3E%3C/svg%3E");
}

#layout-content .header a.forward:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 17 5-5-5-5'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 17 5-5-5-5'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

#layout-content .header a.delete:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E");
}

#layout-content .header a.markmessage:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4c4-2 8 2 12 0v10c-4 2-8-2-12 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4c4-2 8 2 12 0v10c-4 2-8-2-12 0'/%3E%3C/svg%3E");
}

#layout-content .header a.more:before,
#layout-list .header .toolbar a.options:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='5' cy='12' r='1.7'/%3E%3Ccircle cx='19' cy='12' r='1.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='5' cy='12' r='1.7'/%3E%3Ccircle cx='19' cy='12' r='1.7'/%3E%3C/svg%3E");
}

/* itens que o vd-app.js cria na sidebar */
.vd-compose:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.vd-nav a.vd-contacts:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.vd-nav a.vd-settings:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
}

.vd-bottom a.vd-theme:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

.vd-bottom a.vd-logout:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   3. Shell — proporções das três áreas
   A Elastic dimensiona os painéis por flex com regras próprias;
   por isso as larguras vão travadas.
   --------------------------------------------------------------- */

@media (min-width: 1024px) {
  html.vd-shell #layout-menu { display: none !important; }

  html.vd-shell #layout-sidebar {
    flex: 0 0 256px !important;
    width: 256px !important;
    min-width: 256px !important;
    max-width: 270px !important;
  }

  html.vd-shell #layout-list {
    flex: 0 0 420px !important;
    width: 420px !important;
    min-width: 420px !important;
    max-width: 460px !important;
  }

  html.vd-shell #layout-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1500px) {
  html.vd-shell #layout-sidebar {
    flex-basis: 232px !important;
    width: 232px !important;
    min-width: 232px !important;
  }
  html.vd-shell #layout-list {
    flex-basis: 380px !important;
    width: 380px !important;
    min-width: 380px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  html.vd-shell #layout-sidebar {
    flex-basis: 220px !important;
    width: 220px !important;
    min-width: 220px !important;
  }
  html.vd-shell #layout-list {
    flex-basis: 356px !important;
    width: 356px !important;
    min-width: 356px !important;
  }
}

/* Superfícies: profundidade por diferença de fundo, não por borda. */
html.dark-mode #layout-sidebar {
  background: var(--sidebar-bg);
  border-color: transparent !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

html.dark-mode #layout-list {
  background: var(--list-bg);
  border-right: 1px solid var(--border-subtle) !important;
  border-left: 0 !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

html.dark-mode #layout-content {
  background: var(--reader-bg);
  border-color: transparent !important;
}

/* ---------------------------------------------------------------
   4. Header integrado
   As três colunas têm seu próprio .header; o mesmo tratamento nos
   três cria uma faixa contínua no topo.
   --------------------------------------------------------------- */

#layout > div > .header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--head-h);
  min-height: var(--head-h);
  padding: 0 14px;
}

html.dark-mode #layout > div > .header {
  color: var(--text-primary);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-subtle);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

#layout > div > .header .header-title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

/* Botões do header: alvo confortável, sem caixa permanente. */
html.dark-mode #layout > div > .header a.button,
html.dark-mode #layout > div > .header ul.toolbar > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: background-color var(--vd-t) var(--vd-ease), color var(--vd-t) var(--vd-ease);
}

html.dark-mode #layout > div > .header a.button:hover,
html.dark-mode #layout > div > .header ul.toolbar > li > a:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

/* Ações que não se aplicam ao estado atual não ocupam espaço. */
#layout > div > .header a.disabled,
#layout > div > .header ul.toolbar > li > a.disabled,
#layout > div > .header ul.toolbar > li:has(> a.disabled) {
  display: none !important;
}

/* rótulos miúdos fora: ícone + tooltip */
#layout-list .header .toolbar a .inner,
#layout-list .header a.toolbar-button .inner {
  display: none !important;
}

/* Indicador de sincronização (o JS acende ao atualizar). */
.vd-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--vd-t) var(--vd-ease);
}

.vd-sync.on { opacity: 1; }

.vd-sync i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 10px rgba(61, 220, 151, .5);
}

/* ---------------------------------------------------------------
   5. Sidebar
   --------------------------------------------------------------- */

html.vd-shell #layout-sidebar {
  display: flex;
  flex-direction: column;
}

/* topo: marca dentro da faixa do header */
html.vd-shell #layout-sidebar .vd-side-head {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 11px;
  height: var(--head-h);
  min-height: var(--head-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.vd-side-head img { width: 24px; height: auto; flex: 0 0 auto; }

.vd-side-head .vd-brand-txt {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

.vd-side-head .vd-brand-txt small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.vd-side-top { padding: 14px 14px 4px; }

/* Criar e-mail */
a.vd-compose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  border-radius: 11px;
  font-size: var(--text-base);
  font-weight: 600;
  color: #fff !important;
  text-decoration: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:
    0 10px 30px rgba(233, 0, 70, .14),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: filter var(--vd-t) var(--vd-ease), transform 120ms var(--vd-ease);
  cursor: pointer;
}

a.vd-compose:hover { filter: brightness(1.07); }
a.vd-compose:active { transform: translateY(1px); }
a.vd-compose:before { width: 18px !important; height: 18px !important; vertical-align: -3px; }

/* Bloco da conta: sem fundo permanente, só no hover. */
#layout-sidebar .header {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 14px 4px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#layout-sidebar .header .username {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background-color var(--vd-t) var(--vd-ease);
}

#layout-sidebar .header:hover .vd-account { background: var(--hover-bg); }

.vd-account-av {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* ponto de conta ativa */
.vd-account-av:after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid #0F0F16;
}

/* rótulo de seção */
.vd-sec-label {
  padding: 14px 20px 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pastas */
.folderlist li a,
#layout-sidebar .listing li a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 9px 12px;
  margin: 1px 10px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  transition: background-color var(--vd-t) var(--vd-ease), color var(--vd-t) var(--vd-ease);
}

.folderlist li.mailbox > a:before { flex: 0 0 auto; width: 18px !important; height: 18px !important; }

html.dark-mode .folderlist li a,
html.dark-mode #layout-sidebar .listing li a { color: var(--text-secondary); }

html.dark-mode .folderlist li a:hover,
html.dark-mode #layout-sidebar .listing li a:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

html.dark-mode .folderlist li.selected > a,
html.dark-mode #layout-sidebar .listing li.selected > a {
  color: var(--text-primary);
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
  font-weight: 500;
}

html.dark-mode .folderlist li.mailbox.unread > a { font-weight: 500; }

html.dark-mode .folderlist li.mailbox .unreadcount,
html.dark-mode .folderlist li.mailbox.recent > a > .unreadcount {
  position: static;
  margin: 0 0 0 auto;
  padding: 0;
  min-width: 0;
  background: transparent;
  color: var(--brand-hover);
  font-weight: 600;
  font-size: var(--text-xs);
}

/* Navegação secundária + rodapé */
.vd-nav {
  margin: 8px 10px 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.vd-nav a,
.vd-bottom a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--vd-t) var(--vd-ease), color var(--vd-t) var(--vd-ease);
}

.vd-nav a:before,
.vd-bottom a:before { flex: 0 0 auto; width: 18px !important; height: 18px !important; }

.vd-nav a:hover,
.vd-bottom a:hover { color: var(--text-primary); background: var(--hover-bg); }

.vd-nav a.active {
  color: var(--text-primary);
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
  font-weight: 500;
}

html.vd-shell #folderlist-content { flex: 1 1 auto; overflow-y: auto; }

.vd-bottom {
  margin: 0 10px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.vd-bottom a.vd-logout:hover { color: var(--danger); background: rgba(255, 77, 103, .08); }

html.dark-mode #layout-sidebar .footer {
  background: transparent;
  border-top: 0;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   6. Lista — cabeçalho e busca
   --------------------------------------------------------------- */

#messagelist-header .header-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.vd-count {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
}

/* Busca com respiro nas laterais. */
#layout-list .searchbar,
html.dark-mode .searchbar {
  margin: 12px 14px;
  height: 42px;
  padding: 0 12px;
  background: var(--elevated-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

html.dark-mode .searchbar input {
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-base);
}

html.dark-mode .searchbar input::placeholder { color: var(--text-muted); }

html.dark-mode .searchbar:focus-within {
  border-color: rgba(233, 0, 70, .5);
  box-shadow: 0 0 0 3px rgba(233, 0, 70, .07);
}

html.dark-mode .searchbar a {
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
}

html.dark-mode .searchbar a:hover { color: var(--text-primary); background: var(--hover-bg); }
html.dark-mode .searchbar a:before { color: inherit; }

/* ---------------------------------------------------------------
   7. Lista — itens estruturados
   A Elastic entrega <tr> com td.selection / td.subject / td.flags.
   Aqui a linha vira um bloco posicionado: avatar à esquerda, data
   no topo à direita, assunto abaixo do nome, marcadores no rodapé.
   --------------------------------------------------------------- */

#messagelist thead { display: none !important; }

#messagelist,
#messagelist tbody { display: block; width: 100%; }

#messagelist tbody tr {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 92px;
  padding: 14px 16px 14px 68px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  transition: background-color 160ms var(--vd-ease);
}

#messagelist tbody td {
  display: block;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: none !important;
  width: auto;
  height: auto;
}

/* checkbox: só no hover ou quando marcado */
#messagelist td.selection {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  z-index: 2;
  opacity: 0;
  transition: opacity 140ms var(--vd-ease);
}

#messagelist tbody tr:hover td.selection,
#messagelist tbody tr.selected td.selection { opacity: 1; }

#messagelist td.selection input { width: 17px; height: 17px; accent-color: var(--brand); }

/* avatar (vd-app.js) — some quando o checkbox aparece */
.vd-av {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .055);
  pointer-events: none;
  transition: opacity 140ms var(--vd-ease);
}

#messagelist tbody tr:hover .vd-av,
#messagelist tbody tr.selected .vd-av { opacity: 0; }

tr.unread .vd-av {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* nome */
#messagelist td.subject span.fromto {
  display: block;
  padding-right: 84px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* data */
#messagelist td.subject span.date {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

#messagelist td.subject span.size { display: none; }

/* assunto: até duas linhas, ocupando o corpo do item */
#messagelist td.subject span.subject {
  display: block;
  margin-top: 5px;
  padding-right: 34px;
  font-size: var(--text-base);
  line-height: 1.45;
  max-height: 2.9em;
  overflow: hidden;
}

#messagelist td.subject span.subject a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.dark-mode #messagelist tr:not(.unread) td.subject span.subject a { color: var(--text-secondary); }

/* indicador de não lida: 6px, magenta, à esquerda do nome */
#messagelist td.subject span.msgicon.status {
  position: absolute;
  left: 0;
  top: 0;
}

html.dark-mode #messagelist td.subject span.msgicon.status.unread:before {
  content: "" !important;
  position: absolute;
  left: -52px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand-glow);
}

/* marcadores (sinalizada / anexo) no canto inferior direito */
#messagelist td.flags {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
}

html.dark-mode #messagelist td.flags span { color: var(--text-muted); }

/* estados */
html.dark-mode #messagelist tbody tr:hover { background: var(--hover-bg); }

html.dark-mode #messagelist tbody tr.unread {
  background: rgba(255, 255, 255, .022);
}

#messagelist tr.unread td.subject span.fromto,
html.dark-mode #messagelist tr.unread td.subject span.fromto {
  font-weight: 600;
  color: var(--text-primary);
}

#messagelist tr.unread td.subject span.subject,
html.dark-mode #messagelist tr.unread td.subject span.subject a {
  font-weight: 600;
  color: var(--text-primary);
}

html.dark-mode #messagelist tbody tr.selected {
  background: rgba(255, 255, 255, .055);
  box-shadow:
    inset 3px 0 0 var(--brand),
    inset 0 0 0 1px rgba(255, 255, 255, .055);
}

html.dark-mode #messagelist tbody tr.selected td.subject span.subject a,
html.dark-mode #messagelist tbody tr.selected td.subject span.fromto { color: var(--text-primary); }

html.dark-mode #messagelist tbody tr.focused:not(.selected) {
  box-shadow: inset 0 0 0 1px var(--border-default);
}

/* Rodapé/paginação compacto */
html.dark-mode #messagelist-footer {
  height: 48px;
  min-height: 48px;
  background: transparent;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

html.dark-mode #messagelist-footer a.button {
  width: 34px;
  height: 34px;
  color: var(--text-muted);
  border-radius: var(--r-sm);
}

html.dark-mode #messagelist-footer a.button:hover:not(.disabled) {
  color: var(--text-primary);
  background: var(--hover-bg);
}

html.dark-mode #messagelist-footer a.button.disabled { opacity: .25; }

html.dark-mode #messagelist-footer input {
  height: 30px;
  background: var(--elevated-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  text-align: center;
}

/* ---------------------------------------------------------------
   8. Leitura — toolbar contextual
   Os botões NÃO têm classe .button: são a.reply / a.forward /
   a.delete dentro de ul.menu.toolbar.
   --------------------------------------------------------------- */

#layout-content > .header ul.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

#layout-content > .header ul.toolbar > li { display: block; }

/* Principais: pill com ícone + texto */
html.dark-mode #layout-content > .header ul.toolbar > li > a.reply:not(.disabled),
html.dark-mode #layout-content > .header ul.toolbar > li > a.forward:not(.disabled) {
  width: auto;
  height: 40px;
  padding: 0 15px;
  gap: 8px;
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: 10px;
}

html.dark-mode #layout-content > .header ul.toolbar > li > a.reply:not(.disabled) .inner,
html.dark-mode #layout-content > .header ul.toolbar > li > a.forward:not(.disabled) .inner {
  display: inline !important;
  font-size: var(--text-base);
}

html.dark-mode #layout-content > .header ul.toolbar > li > a.reply:not(.disabled) {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:
    0 8px 24px rgba(233, 0, 70, .16),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

html.dark-mode #layout-content > .header ul.toolbar > li > a.reply:not(.disabled):hover {
  filter: brightness(1.07);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

html.dark-mode #layout-content > .header ul.toolbar > li > a.forward:not(.disabled) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--border-default);
}

html.dark-mode #layout-content > .header ul.toolbar > li > a.forward:not(.disabled):hover {
  background: rgba(255, 255, 255, .075);
}

/* Secundárias: ícone + tooltip */
#layout-content > .header ul.toolbar > li > a:not(.reply):not(.forward) .inner { display: none !important; }

html.dark-mode #layout-content > .header ul.toolbar > li > a.delete:hover {
  color: var(--danger);
  background: rgba(255, 77, 103, .08);
}

/* setinhas de dropdown coladas nas pills */
html.dark-mode #layout-content > .header ul.toolbar > li > a.dropdown {
  width: 26px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   9. Leitura — mensagem aberta (documento em iframe)
   --------------------------------------------------------------- */

html.iframe.dark-mode body { background: transparent; }

html.iframe #messageheader,
html.iframe #messagebody,
html.iframe .attachmentslist {
  width: min(100%, 900px);
  margin-left: auto;
  margin-right: auto;
}

html.iframe #messageheader { padding: 32px 40px 20px; }
html.iframe #messagebody { padding: 24px 40px 80px; }

html.dark-mode #messageheader,
html.dark-mode #message-header {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
}

html.dark-mode h2.subject,
html.dark-mode .subject-title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--text-primary);
}

html.dark-mode #messageheader .adr,
html.dark-mode #messageheader .subtitle,
html.dark-mode #messageheader .rcmContactAddress {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

html.dark-mode #messageheader .date {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* texto simples */
html.dark-mode div.message-part {
  background: transparent;
  color: #DEDEE3;
  font-size: var(--text-md);
  line-height: 1.7;
}

/* HTML claro: superfície própria, nunca nu sobre o preto */
html.dark-mode div.message-htmlpart {
  background: #FFFFFF;
  color: #17171C;
  border-radius: var(--r-md);
  padding: 28px 32px;
  overflow: auto;
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8);
}

/* citações */
html.dark-mode div.message-part blockquote {
  border-left: 2px solid rgba(233, 0, 70, .45);
  background: rgba(255, 255, 255, .035);
  color: var(--text-secondary);
  padding: 12px 16px;
  margin: 14px 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* anexos */
html.dark-mode .attachmentslist li {
  background: var(--elevated-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin: 5px 0;
  transition: border-color var(--vd-t) var(--vd-ease);
}

html.dark-mode .attachmentslist li:hover { border-color: var(--border-default); }
html.dark-mode .attachmentslist li a { color: var(--text-secondary); font-size: var(--text-sm); }
html.dark-mode .attachmentslist li a.filename { color: var(--text-primary); font-size: var(--text-base); }

/* ---------------------------------------------------------------
   10. Menus, diálogos, formulários
   --------------------------------------------------------------- */

html.dark-mode .popover {
  background: var(--elevated-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  overflow: hidden;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.popover .arrow, .popover .popover-arrow { display: none; }

html.dark-mode .popover .menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  font-size: var(--text-base);
}

html.dark-mode .popover .menu li a:before { color: var(--text-muted); }
html.dark-mode .popover .menu li a:hover:not(.disabled) { color: var(--text-primary); background: var(--hover-bg); }
html.dark-mode .popover .menu li a:hover:not(.disabled):before { color: var(--text-primary); }
html.dark-mode .popover .menu li a.disabled { display: none; }

#layout-sidebar .header a.sidebar-menu {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: background-color var(--vd-t) var(--vd-ease), color var(--vd-t) var(--vd-ease);
}

html.dark-mode #layout-sidebar .header a.sidebar-menu:hover { color: var(--text-primary); background: var(--hover-bg); }

html.dark-mode .ui-dialog {
  background: var(--elevated-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

html.dark-mode .ui-dialog .ui-dialog-titlebar {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 600;
}

html.dark-mode .ui-dialog .ui-dialog-content { background: transparent; color: var(--text-secondary); }
html.dark-mode .ui-dialog .ui-dialog-buttonpane { background: transparent; border-top: 1px solid var(--border-subtle); }

html.dark-mode button.btn-primary,
html.dark-mode .btn-primary,
html.dark-mode button.mainaction,
html.dark-mode .formbuttons button.submit {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(233, 0, 70, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: filter var(--vd-t) var(--vd-ease);
}

html.dark-mode button.btn-primary:hover,
html.dark-mode button.mainaction:hover { filter: brightness(1.07); }

html.dark-mode .btn-secondary,
html.dark-mode button.cancel {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

html.dark-mode .btn-secondary:hover,
html.dark-mode button.cancel:hover { color: var(--text-primary); background: var(--hover-bg); }

html.dark-mode button.btn-danger,
html.dark-mode .btn-danger {
  background: rgba(255, 77, 103, .12);
  border: 1px solid rgba(255, 77, 103, .35);
  border-radius: 10px;
  color: var(--danger);
}

html.dark-mode body:not(.task-login) .form-control {
  background: var(--elevated-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color var(--vd-t) var(--vd-ease), box-shadow var(--vd-t) var(--vd-ease);
}

html.dark-mode body:not(.task-login) .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(233, 0, 70, .1);
  outline: none;
}

html.dark-mode body:not(.task-login) .form-control::placeholder { color: var(--text-muted); }
html.dark-mode body:not(.task-login) label { color: var(--text-secondary); font-size: var(--text-sm); }

html.dark-mode #compose-attachments {
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: var(--r-md);
}

/* painel de opções da busca */
html.dark-mode .input-group-text,
html.dark-mode .popover .input-group-text {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  min-width: 5.5em;
}

html.dark-mode .custom-switch .custom-control-label::before {
  background-color: #2A2A33;
  border-color: transparent;
}

html.dark-mode .custom-switch .custom-control-label::after { background-color: #8A8A94; }

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand);
  border-color: var(--brand);
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; }
html.dark-mode .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(233, 0, 70, .15);
}

html.dark-mode .custom-control-label,
html.dark-mode .form-check label { color: var(--text-secondary); font-size: var(--text-sm); }

html.dark-mode .popover .propform td,
html.dark-mode .popover .form-group { padding-top: 4px; padding-bottom: 4px; border: 0; }

/* ---------------------------------------------------------------
   11. Toasts
   --------------------------------------------------------------- */

html body:not(.task-login) #messagestack {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  pointer-events: none;
}

html body:not(.task-login) #messagestack > div,
html.dark-mode body:not(.task-login) #messagestack > div {
  box-sizing: border-box;
  display: block;
  width: auto;
  min-width: 260px;
  max-width: min(520px, calc(100vw - 32px));
  margin: 14px 0 0;
  padding: 12px 18px;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--text-primary);
  background: rgba(22, 22, 31, .96);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--text-muted);
  border-radius: var(--r-md);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .8);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: vd-toast .26s var(--vd-ease) both;
}

html body:not(.task-login) #messagestack > div:before,
html body:not(.task-login) #messagestack > div > i { display: none; }

html.dark-mode body:not(.task-login) #messagestack > div.error { border-left-color: var(--danger); }
html.dark-mode body:not(.task-login) #messagestack > div.confirmation { border-left-color: var(--ok); }
html.dark-mode body:not(.task-login) #messagestack > div.warning { border-left-color: var(--warning); }
html.dark-mode body:not(.task-login) #messagestack > div.notice,
html.dark-mode body:not(.task-login) #messagestack > div.loading,
html.dark-mode body:not(.task-login) #messagestack > div.information { border-left-color: #4C6FFF; }

@keyframes vd-toast {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   12. Tooltips do tema
   --------------------------------------------------------------- */

[data-vd-tip] { position: relative; }

[data-vd-tip]:hover::after {
  content: attr(data-vd-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  padding: 6px 11px;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-primary);
  background: #1A1A22;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
  pointer-events: none;
  animation: vd-toast .16s var(--vd-ease) .4s both;
}

#layout-list .header [data-vd-tip]:last-child:hover::after,
#layout-content .header ul.toolbar > li:last-child [data-vd-tip]:hover::after {
  left: auto; right: 0; transform: none;
}

[data-vd-tip][aria-expanded="true"]:hover::after,
[data-vd-tip]:active::after,
#layout-sidebar .header [data-vd-tip]:hover::after { display: none; }

/* ---------------------------------------------------------------
   13. Skeleton de carregamento
   --------------------------------------------------------------- */

html.dark-mode #messagelist.vd-loading tbody tr {
  pointer-events: none;
}

html.dark-mode #messagelist.vd-loading tbody tr .vd-av,
html.dark-mode #messagelist.vd-loading tbody tr td.subject > span {
  border-radius: 6px;
  color: transparent !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.08) 37%,
    rgba(255,255,255,.04) 63%);
  background-size: 400% 100%;
  animation: vd-skel 1.4s ease infinite;
}

@keyframes vd-skel {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* ---------------------------------------------------------------
   14. Tema claro — acentos da marca
   --------------------------------------------------------------- */

html:not(.dark-mode) .folderlist li.mailbox .unreadcount { color: var(--brand); background: transparent; }
html:not(.dark-mode) #messagelist td.subject span.msgicon.status.unread:before { background: var(--brand); }
html:not(.dark-mode) a.vd-compose { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
html:not(.dark-mode) button.btn-primary,
html:not(.dark-mode) button.mainaction { background: var(--brand); border-color: var(--brand); }
html:not(.dark-mode) .vd-side-head .vd-brand-txt { color: #17171C; }
html:not(.dark-mode) .vd-nav a, html:not(.dark-mode) .vd-bottom a { color: #55555e; }
html:not(.dark-mode) .vd-sec-label { color: #7a7a85; }

/* ---------------------------------------------------------------
   15. Movimento
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body:not(.task-login) *,
  body:not(.task-login) *::before,
  body:not(.task-login) *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------
   16. Correções de conflito com a Elastic (medidas no navegador)
   --------------------------------------------------------------- */

/* A Elastic esconde os títulos de painel em .layout-large — mas no
   shell de três colunas eles são a âncora de contexto de cada área. */
html.vd-shell #layout-list > .header > .header-title,
html.vd-shell #layout-content > .header > .header-title {
  display: flex !important;
  align-items: baseline;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
}

html.vd-shell #layout-content > .header > .header-title.vd-idle {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-muted);
}

/* Botões de navegação entre telas só existem no fluxo mobile da
   Elastic; no desktop viravam ícones soltos (e um quadrado branco). */
html.vd-shell #layout > div > .header a.task-menu-button,
html.vd-shell #layout > div > .header a.back-sidebar-button,
html.vd-shell #layout > div > .header a.back-list-button,
html.vd-shell #layout > div > .header a.toolbar-menu-button,
html.vd-shell #layout > div > .header a.folders {
  display: none !important;
}

/* Alça de redimensionamento da Elastic: 900px de altura invisível
   capturando o mouse na borda da sidebar. */
html.vd-shell #layout-sidebar .column-resizer,
html.vd-shell #layout-sidebar .footer:empty {
  display: none !important;
}

/* Ponto de não lida: trilho à esquerda da linha, fora do avatar. */
#messagelist td.subject span.msgicon.status { position: static; }

html.dark-mode #messagelist td.subject span.msgicon.status.unread:before {
  content: "" !important;
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand-glow);
}

/* Bloco da conta: sem o botão "voltar" roubando espaço, o endereço
   completo cabe em 256px. */
#layout-sidebar .header .username { font-size: var(--text-sm); }
.vd-account-av { width: 28px; height: 28px; }

/* A Elastic zera a largura do título no cabeçalho da lista
   (medido: display:flex mas w=0) — precisa de largura explícita. */
html.vd-shell #layout-list > .header > .header-title {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  overflow: hidden;
  white-space: nowrap;
}

html.vd-shell #layout-list > .header > .header-title .vd-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
   17. Elementos próprios substituindo os que o Roundcube reescreve
   --------------------------------------------------------------- */

/* Cabeçalho original da sidebar e título original da lista saem de
   cena: o Roundcube os reescreve a cada render (inclusive com
   estilo inline), o que impedia qualquer layout estável. */
html.vd-shell #layout-sidebar > .header,
html.vd-shell #layout-list > .header > .header-title {
  display: none !important;
}

.vd-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 12px 2px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color var(--vd-t) var(--vd-ease);
}

.vd-account-row:hover { background: var(--hover-bg); }

.vd-account-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-account-menu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--vd-t) var(--vd-ease), color var(--vd-t) var(--vd-ease);
}

.vd-account-menu:before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='19' r='1.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='19' r='1.7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

.vd-account-menu:hover { color: var(--text-primary); background: rgba(255, 255, 255, .07); }

/* Título próprio da lista */
.vd-list-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.vd-folder-name {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Indicador de não lida no trilho esquerdo da linha. O ícone de
   status da Elastic (ponto amarelo / bolinha de lida) sai. */
#messagelist td.subject span.msgicon.status { display: none !important; }

html.dark-mode #messagelist tbody tr.unread:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand-glow);
}

/* ---------------------------------------------------------------
   18. Acabamento do cabeçalho da lista
   --------------------------------------------------------------- */

/* O indicador de sync ocupava 94px mesmo invisível (opacity:0),
   empurrando o título e virando um traço solto no cabeçalho. */
.vd-sync { display: none; }
.vd-sync.on { display: inline-flex; }

/* Só estes elementos pertencem ao cabeçalho da lista no desktop.
   O resto são controles do fluxo mobile da Elastic, que vazavam
   e quebravam linha. */
html.vd-shell #layout-list > .header > *:not(.vd-list-title):not(.menu):not(.refresh):not(.vd-sync) {
  display: none !important;
}

html.vd-shell #layout-list > .header > .menu,
html.vd-shell #layout-list > .header > a.refresh {
  flex: 0 0 auto;
  margin-left: 0;
}

html.vd-shell #layout-list > .header > .menu { margin-left: auto; }

/* Título alinhado à esquerda também na área de leitura. */
html.vd-shell #layout-content > .header > .header-title {
  justify-content: flex-start;
  text-align: left;
}

/* ---------------------------------------------------------------
   19. Toolbar de leitura — fim do corte de rótulo
   Medido: li com overflow:hidden e largura menor que o <a>
   (li=74px, a=84px), o que cortava "Responder" pela metade.
   --------------------------------------------------------------- */

html.vd-shell #layout-content > .header ul.toolbar > li {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  border: 0 !important;
}

html.vd-shell #layout-content > .header ul.toolbar {
  flex-wrap: nowrap;
  overflow: visible;
  padding-right: 4px;
}

/* Só "Responder" e "Encaminhar" carregam rótulo; o resto é ícone. */
html.vd-shell #layout-content > .header ul.toolbar > li > a:not(.reply):not(.forward) > .inner {
  display: none !important;
}

html.vd-shell #layout-content > .header ul.toolbar > li > a.reply > .inner,
html.vd-shell #layout-content > .header ul.toolbar > li > a.forward > .inner {
  display: inline !important;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   20. Cabeçalho da mensagem aberta (dentro do iframe)
   O id real é #message-header (não #messageheader).
   --------------------------------------------------------------- */

html.iframe #message-header {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 28px 40px 22px !important;
}

html.dark-mode #message-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html.dark-mode #message-header .subject,
html.dark-mode #message-header h2 {
  font-size: var(--text-xl) !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--text-primary);
}

/* Foto genérica do contato (silhueta cinza) sai; o remetente é
   identificado pelo nome e endereço, já presentes. */
html.dark-mode #message-header .contactphoto,
html.dark-mode #message-header img.contactphoto {
  display: none !important;
}

html.dark-mode #message-header .header-links a,
html.dark-mode #message-header a.extwin,
html.dark-mode #message-header .message-headers a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

html.dark-mode #message-header .header-links a:hover { color: var(--text-primary); }

html.dark-mode #message-header .rcmContactAddress,
html.dark-mode #message-header .adr,
html.dark-mode #message-header .from,
html.dark-mode #message-header .date {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

html.iframe #message-content,
html.iframe #messagebody {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 24px 40px 80px;
}

/* Aviso de conteúdo remoto: era uma faixa amarela sólida. */
html.dark-mode .ui.alert.alert-warning,
html.dark-mode .boxwarning {
  width: min(100%, 900px);
  margin: 16px auto 0 !important;
  padding: 12px 16px !important;
  font-size: var(--text-sm);
  color: var(--text-secondary) !important;
  background: rgba(242, 184, 75, .07) !important;
  border: 1px solid rgba(242, 184, 75, .22) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

html.dark-mode .ui.alert.alert-warning .btn,
html.dark-mode .boxwarning .btn {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

/* Checkbox de seleção: discreto, sem quadrado vermelho gritando. */
#messagelist td.selection input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  opacity: .9;
}

/* ---------------------------------------------------------------
   21. Setas de dropdown e rótulos da toolbar
   As setas herdavam o bloco de máscara sem mask-image definida:
   background-color com máscara ausente = quadrado branco sólido.
   --------------------------------------------------------------- */

html.vd-shell #layout-content > .header ul.toolbar > li > a.dropdown:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  width: 14px !important;
  height: 14px !important;
}

html.vd-shell #layout-content > .header ul.toolbar > li > a.dropdown {
  width: 22px !important;
  margin-left: -4px;
  color: var(--text-muted);
}

/* Apenas Responder e Encaminhar levam rótulo. Responder a todos,
   excluir, marcar e mais ficam como ícone + tooltip. */
html.vd-shell #layout-content > .header ul.toolbar > li > a.reply-all > .inner,
html.vd-shell #layout-content > .header ul.toolbar > li > a.delete > .inner,
html.vd-shell #layout-content > .header ul.toolbar > li > a.markmessage > .inner,
html.vd-shell #layout-content > .header ul.toolbar > li > a.more > .inner,
html.vd-shell #layout-content > .header ul.toolbar > li > a.dropdown > .inner {
  display: none !important;
}

html.vd-shell #layout-content > .header ul.toolbar > li > a.reply-all,
html.vd-shell #layout-content > .header ul.toolbar > li > a.delete,
html.vd-shell #layout-content > .header ul.toolbar > li > a.markmessage,
html.vd-shell #layout-content > .header ul.toolbar > li > a.more {
  width: 40px !important;
  padding: 0 !important;
}

/* Encaminhar: largura pelo conteúdo, sem reticências. */
html.vd-shell #layout-content > .header ul.toolbar > li > a.forward,
html.vd-shell #layout-content > .header ul.toolbar > li > a.reply {
  width: auto !important;
  max-width: none !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------------
   22. Toolbar — seletores por descendência
   As regras com combinador filho (> li > a) não casavam: a
   estrutura real tem um nível extra de aninhamento. Descendente
   casa em qualquer profundidade.
   --------------------------------------------------------------- */

html.vd-shell #layout-content .header ul.toolbar a.reply-all .inner,
html.vd-shell #layout-content .header ul.toolbar a.delete .inner,
html.vd-shell #layout-content .header ul.toolbar a.markmessage .inner,
html.vd-shell #layout-content .header ul.toolbar a.more .inner,
html.vd-shell #layout-content .header ul.toolbar a.dropdown .inner,
html.vd-shell #layout-content .header ul.toolbar a.print .inner,
html.vd-shell #layout-content .header ul.toolbar a.extwin .inner {
  display: none !important;
}

html.vd-shell #layout-content .header ul.toolbar a.reply-all,
html.vd-shell #layout-content .header ul.toolbar a.delete,
html.vd-shell #layout-content .header ul.toolbar a.markmessage,
html.vd-shell #layout-content .header ul.toolbar a.more {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

html.vd-shell #layout-content .header ul.toolbar a.dropdown {
  width: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  margin-left: -6px;
  color: var(--text-muted);
}

html.vd-shell #layout-content .header ul.toolbar a.dropdown:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  width: 13px !important;
  height: 13px !important;
}

html.vd-shell #layout-content .header ul.toolbar a.forward,
html.vd-shell #layout-content .header ul.toolbar a.reply {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html.vd-shell #layout-content .header ul.toolbar a.forward .inner,
html.vd-shell #layout-content .header ul.toolbar a.reply .inner {
  display: inline !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   23. Mobile — o fluxo da Elastic assume abaixo de 1024px
   --------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Abaixo do breakpoint a Elastic exibe o próprio título; o nosso
     duplicaria e disputaria espaço no cabeçalho estreito. */
  .vd-list-title,
  .vd-account-row,
  .vd-side-head,
  .vd-side-top,
  .vd-sec-label,
  .vd-nav,
  .vd-bottom { display: none !important; }

  /* Alvos de toque confortáveis na lista. */
  #messagelist tbody tr { min-height: 88px; padding-left: 68px; }
}

/* Botão flutuante de criar e-mail: era o azul padrão da Elastic. */
html.dark-mode .floating-action-buttons a.button,
html.dark-mode a.floating-action-button,
.floating-action-buttons a.button.compose {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  box-shadow: 0 10px 30px rgba(233, 0, 70, .24) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------
   24. Cabeçalho da lista — alinhamento dos três controles
   Medido: ul.menu com height=84px e y=-9 (mais alto que o header
   de 66px, e deslocado pra cima), display:block. Era isso que
   desalinhava os ícones e deixava um traço solto no cabeçalho.
   --------------------------------------------------------------- */

html.vd-shell #layout-list > .header > ul.menu {
  display: flex !important;
  align-items: center;
  gap: 2px;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html.vd-shell #layout-list > .header > ul.menu > li {
  display: block;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html.vd-shell #layout-list > .header > ul.menu > li > a,
html.vd-shell #layout-list > .header > a.refresh {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------
   25. Linha da lista — checkbox no lugar do avatar
   O indicador de seleção passa a ser permanente; as iniciais saem.
   --------------------------------------------------------------- */

.vd-av { display: none !important; }

#messagelist tbody tr {
  padding-left: 52px;
}

#messagelist td.selection {
  left: 15px;
  opacity: 1 !important;
  width: 22px;
  height: 22px;
}

#messagelist td.selection input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Marcadores (sinalizada / anexo) deixam de ser sobrepostos pelo
   assunto: medido 28px de invasão com padding-right de 34px. */
#messagelist td.subject span.subject { padding-right: 66px; }
#messagelist td.subject span.fromto  { padding-right: 92px; }

#messagelist td.flags {
  right: 16px;
  bottom: 14px;
  gap: 8px;
}

/* O ponto de não lida sai do trilho (ocupado pelo checkbox) e vira
   um fio vertical magenta na borda da linha. */
html.dark-mode #messagelist tbody tr.unread:before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}

/* Assunto quebra em duas linhas em vez de cortar no meio da palavra. */
#messagelist td.subject span.subject a,
#messagelist td.subject span.subject a span {
  white-space: normal !important;
  word-break: break-word;
}

/* O "⋮" é o elemento original do Roundcube movido para cá, então
   herda o ícone da fonte da Elastic — a máscara própria é aplicada
   por cima para manter a família de ícones consistente. */
.vd-account-row a.sidebar-menu.vd-account-menu {
  flex: 0 0 auto;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px;
  color: var(--text-muted);
}

.vd-account-row a.sidebar-menu.vd-account-menu .inner { display: none !important; }

.vd-account-row a.sidebar-menu.vd-account-menu:before {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='19' r='1.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='19' r='1.7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

html.dark-mode .vd-account-row a.sidebar-menu.vd-account-menu:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .07);
}

/* ---------------------------------------------------------------
   26. Barra de tarefas (#taskmenu)
   Só aparece fora da caixa de entrada (Compose, Contatos,
   Configurações), onde o shell de três colunas não é montado.
   Sem mask-image definida, o bloco de ícone virava quadrado branco.
   --------------------------------------------------------------- */

#taskmenu a.compose:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

#taskmenu a.mail:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

#taskmenu a.contacts:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
}

#taskmenu a.settings:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
}

#taskmenu a.theme:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E");
}

#taskmenu a.about:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

#taskmenu a.logout:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

html.dark-mode #taskmenu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 62px;
  margin: 3px 8px;
  padding: 10px 0 8px;
  border-radius: 10px;
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  transition: background-color var(--vd-t) var(--vd-ease), color var(--vd-t) var(--vd-ease);
}

html.dark-mode #taskmenu a:before {
  width: 20px !important;
  height: 20px !important;
  vertical-align: 0;
}

html.dark-mode #taskmenu a:hover { color: var(--text-primary); background: var(--hover-bg); }

html.dark-mode #taskmenu a.selected {
  color: var(--text-primary);
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
}

html.dark-mode #taskmenu a.compose {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px -10px rgba(233, 0, 70, .5);
}

html.dark-mode #taskmenu a.compose:hover { filter: brightness(1.07); }
html.dark-mode #taskmenu a.logout:hover { color: var(--danger); background: rgba(255, 77, 103, .08); }
html.dark-mode #layout-menu { background: var(--sidebar-bg); border-color: transparent !important; }

/* ---------------------------------------------------------------
   27. Composição de e-mail
   --------------------------------------------------------------- */

body.action-compose #layout-content .header a.save:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
}

body.action-compose #layout-content .header a.attach:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.05 12.25 20.2a5.5 5.5 0 0 1-7.78-7.78l9.2-9.19a3.67 3.67 0 1 1 5.18 5.18l-9.2 9.2a1.83 1.83 0 1 1-2.59-2.6l8.5-8.48'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.05 12.25 20.2a5.5 5.5 0 0 1-7.78-7.78l9.2-9.19a3.67 3.67 0 1 1 5.18 5.18l-9.2 9.2a1.83 1.83 0 1 1-2.59-2.6l8.5-8.48'/%3E%3C/svg%3E");
}

body.action-compose #layout-content .header a.responses:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E");
}

body.action-compose #layout-content .header a.spellcheck:before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 17 5-11 5 11M6 13h6'/%3E%3Cpath d='m15.5 15.5 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 17 5-11 5 11M6 13h6'/%3E%3Cpath d='m15.5 15.5 2 2 4-4'/%3E%3C/svg%3E");
}

body.action-compose #layout-content .header a.save:before,
body.action-compose #layout-content .header a.attach:before,
body.action-compose #layout-content .header a.responses:before,
body.action-compose #layout-content .header a.spellcheck:before {
  content: "" !important;
  display: inline-block !important;
  width: 19px !important;
  height: 19px !important;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

body.action-compose #layout-content .header a .inner { display: none !important; }
body.action-compose #layout-content .header a.toolbar-menu-button { display: none !important; }

/* Título da tela, no lugar do espaço vazio à esquerda da barra. */
body.action-compose #layout-content > .header:before {
  content: "Nova mensagem";
  flex: 1 1 auto;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

body.action-compose #compose-content { padding: 26px 32px 32px !important; }
body.action-compose #compose-headers { max-width: 980px; }

body.action-compose #compose-headers .form-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

body.action-compose #compose-headers label {
  flex: 0 0 96px;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
}

html.dark-mode body.action-compose #compose-headers input,
html.dark-mode body.action-compose #compose-headers .recipient-input,
html.dark-mode body.action-compose #compose-headers textarea {
  min-height: 44px;
  background: var(--elevated-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html.dark-mode body.action-compose #compose-headers input:focus,
html.dark-mode body.action-compose #compose-headers .recipient-input:focus-within {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(233, 0, 70, .1) !important;
}

html.dark-mode body.action-compose #composebody,
html.dark-mode body.action-compose .mce-panel,
html.dark-mode body.action-compose div.tox .tox-edit-area__iframe {
  background: var(--elevated-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-primary) !important;
}

html.dark-mode body.action-compose div.tox .tox-toolbar,
html.dark-mode body.action-compose div.tox .tox-toolbar__primary {
  background: rgba(255, 255, 255, .03) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* Painel de opções e anexos: 480px era largo demais. */
body.action-compose #layout-sidebar {
  flex: 0 0 340px !important;
  width: 340px !important;
  min-width: 320px !important;
  max-width: 360px !important;
}

html.dark-mode body.action-compose #layout-sidebar {
  background: var(--sidebar-bg);
  border-left: 1px solid var(--border-subtle) !important;
}

html.dark-mode body.action-compose #layout-sidebar .header {
  display: flex !important;
  height: var(--head-h);
  min-height: var(--head-h);
  padding: 0 18px !important;
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html.dark-mode body.action-compose #layout-sidebar .header .header-title {
  display: block !important;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* Zona de anexos: o ícone gigante de download vira um discreto. */
html.dark-mode body.action-compose #compose-attachments {
  margin: 16px 18px;
  padding: 18px;
  background: transparent;
  border: 1px dashed var(--border-default);
  border-radius: var(--r-md);
  text-align: center;
}

html.dark-mode body.action-compose #compose-attachments .hint,
html.dark-mode body.action-compose #compose-attachments .filedrop {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

html.dark-mode body.action-compose #compose-attachments svg,
html.dark-mode body.action-compose #compose-attachments img,
html.dark-mode body.action-compose #compose-attachments i {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  opacity: .5;
}

html.dark-mode body.action-compose button.send,
html.dark-mode body.action-compose .btn-primary.send {
  height: 44px;
  padding: 0 22px;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: 11px;
}

html.dark-mode body.action-compose .formbuttons { padding-top: 18px; }

/* ---------------------------------------------------------------
   28. Acabamento do compose (medido no navegador)
   --------------------------------------------------------------- */

/* Quadrado branco no topo: A.dropdown dentro de .dropbutton — herda
   o bloco de ícone sem mask-image própria. Vira a seta de sempre. */
body.action-compose #layout-content .header .dropbutton a.dropdown:before,
body.action-compose #layout-content .header a.dropdown:before {
  content: "" !important;
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

body.action-compose #layout-content .header .dropbutton a.dropdown {
  width: 20px !important;
  min-width: 20px !important;
  color: var(--text-muted);
}

/* Botão de menu do fluxo mobile vazando no desktop. */
@media (min-width: 1024px) {
  body.action-compose #layout-content .header a.task-menu-button,
  body.action-compose #layout-content .header a.back-list-button {
    display: none !important;
  }
}

/* Zona de anexos: o alvo de arrastar é o .file-upload.droptarget,
   cujo ícone gigante vem de um pseudo-elemento da Elastic. */
html.dark-mode body.action-compose .file-upload.droptarget {
  min-height: 0 !important;
  padding: 20px 16px !important;
  background: transparent !important;
  border: 1px dashed var(--border-default) !important;
  border-radius: var(--r-md) !important;
}

html.dark-mode body.action-compose .file-upload.droptarget:before,
html.dark-mode body.action-compose .file-upload.droptarget:after {
  font-size: 26px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  opacity: .35;
}

html.dark-mode body.action-compose .file-upload .hint,
html.dark-mode body.action-compose .file-upload .description {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Foco dos campos: presença sem borda vermelha dura. */
html.dark-mode body.action-compose #compose-headers input:focus,
html.dark-mode body.action-compose #compose-headers .recipient-input:focus-within,
html.dark-mode body.action-compose #compose-headers textarea:focus {
  border-color: rgba(233, 0, 70, .5) !important;
  box-shadow: 0 0 0 3px rgba(233, 0, 70, .08) !important;
}

/* Rótulos da barra de tarefas: sem corte no meio da palavra. */
html.dark-mode #taskmenu a {
  width: 66px;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Editor: a barra de ferramentas do TinyMCE segue o tema. */
html.dark-mode body.action-compose .mce-top-part,
html.dark-mode body.action-compose .mce-toolbar-grp,
html.dark-mode body.action-compose .mce-menubar {
  background: rgba(255, 255, 255, .03) !important;
  border-color: var(--border-subtle) !important;
}

html.dark-mode body.action-compose .mce-btn button,
html.dark-mode body.action-compose .mce-ico {
  color: var(--text-secondary) !important;
}

/* O ícone gigante da zona de anexos é um content:url(svg) de 269px
   no ::after do droptarget — font-size não encolhe imagem, só
   width/height resolvem. */
html.dark-mode body.action-compose .file-upload.droptarget:after {
  display: block !important;
  width: 34px !important;
  height: auto !important;
  margin: 4px auto 0 !important;
  opacity: .28;
}

/* ---------------------------------------------------------------
   29. Marca no topo da barra de tarefas
   A arte 3D padrão da Elastic (58x58) dá lugar ao símbolo da VD,
   dimensionado como marca e não como ilustração.
   --------------------------------------------------------------- */

#logo.vd-logo {
  width: 26px !important;
  height: auto !important;
  max-height: none !important;
  margin: 14px auto 10px !important;
  display: block !important;
  position: static !important;
  top: auto !important;
  opacity: .92;
  transition: opacity 160ms var(--vd-ease), transform 160ms var(--vd-ease);
}

#logo.vd-logo:hover { opacity: 1; transform: scale(1.06); }

#logo.vd-logo:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 6px;
}

/* A marca da sidebar também leva à caixa de entrada. */
.vd-side-head[role="button"] { cursor: pointer; }
.vd-side-head[role="button"]:hover .vd-brand-txt { color: #fff; }
.vd-side-head[role="button"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* ---------------------------------------------------------------
   30. Linha da lista — corte do assunto e do checkbox
   Medido: o <a> do assunto renderiza 56px mas o span-contêiner
   cortava em 40.6px (max-height), porque o -webkit-line-clamp
   estava no <a> e não no contêiner. E td.selection tinha
   overflow:hidden num box de 22px, comendo a borda do checkbox.
   --------------------------------------------------------------- */

#messagelist td.subject span.subject {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: none !important;
  padding-right: 30px;
}

#messagelist td.subject span.subject a {
  display: inline !important;
  -webkit-line-clamp: none;
}

#messagelist td.selection {
  width: 26px;
  height: 26px;
  overflow: visible !important;
}

#messagelist td.selection input {
  width: 18px;
  height: 18px;
}

/* Ícone de clipe (indicador de anexo) removido a pedido. */
#messagelist td.flags span.attachment { display: none !important; }

/* ---------------------------------------------------------------
   31. Controles do fluxo móvel vazando no desktop
   task-menu-button (☰), back-sidebar-button e back-list-button (‹)
   existem para navegar entre telas empilhadas no celular. Em tela
   grande viravam ícones soltos nos cabeçalhos.
   --------------------------------------------------------------- */

@media (min-width: 1024px) {
  #layout > div > .header a.task-menu-button,
  #layout > div > .header a.back-sidebar-button,
  #layout > div > .header a.back-list-button {
    display: none !important;
  }

  /* Com a barra de ações movida para o header dono dela, os "⋮"
     de colapso não têm mais função. */
  html.vd-toolbar-moved #layout > div > .header a.toolbar-menu-button {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   32. Barra de ações inline (Configurações)
   --------------------------------------------------------------- */

#toolbar-menu.vd-inline-toolbar {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  list-style: none;
}

#toolbar-menu.vd-inline-toolbar li { display: block; margin: 0; padding: 0; border: 0; }

html.dark-mode #toolbar-menu.vd-inline-toolbar a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 38px;
  padding: 0 14px !important;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, .05);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  transition: background-color var(--vd-t) var(--vd-ease);
}

html.dark-mode #toolbar-menu.vd-inline-toolbar a:hover {
  background: rgba(255, 255, 255, .09);
}

html.dark-mode #toolbar-menu.vd-inline-toolbar a .inner {
  display: inline !important;
  font-size: var(--text-sm);
}

#toolbar-menu.vd-inline-toolbar a.create:before {
  content: "" !important;
  display: inline-block !important;
  width: 17px !important;
  height: 17px !important;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-8l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* Cabeçalhos das Configurações no mesmo padrão das demais telas. */
html.dark-mode body.task-settings #layout > div > .header .header-title {
  display: block !important;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

html.dark-mode body.task-settings #layout-sidebar .listing li a,
html.dark-mode body.task-settings #layout-list .listing li a {
  min-height: 42px;
  padding: 9px 12px;
  margin: 1px 10px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

html.dark-mode body.task-settings .listing li.selected > a {
  color: var(--text-primary);
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
  font-weight: 500;
}

/* Rodapé de formulário: Salvar e Cancelar lado a lado. */
html.dark-mode .formbuttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

html.dark-mode button.vd-cancel {
  height: 40px;
  padding: 0 20px;
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: 10px;
}

/* ---------------------------------------------------------------
   33. Item selecionado — fim da moldura cinza
   Medido: o <li> guardava o fundo #374549 da Elastic enquanto o
   <a> recebia o magenta, criando um retângulo cinza em volta.
   O estado passa a viver só no link, com gradiente em vez de
   preenchimento chapado.
   --------------------------------------------------------------- */

html.dark-mode #layout-sidebar .listing li,
html.dark-mode #layout-list .listing li,
html.dark-mode #settings-menu li,
html.dark-mode .folderlist li {
  background: transparent !important;
}

html.dark-mode #layout-sidebar .listing li.selected > a,
html.dark-mode #layout-list .listing li.selected > a,
html.dark-mode #settings-menu li.selected > a,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .vd-nav a.active {
  background: linear-gradient(90deg, rgba(233, 0, 70, .16), rgba(233, 0, 70, .03)) !important;
  box-shadow: inset 2px 0 0 var(--brand);
  color: var(--text-primary);
  font-weight: 500;
}

/* O mesmo tratamento no item ativo da barra de tarefas. */
html.dark-mode #taskmenu a.selected {
  background: linear-gradient(180deg, rgba(233, 0, 70, .16), rgba(233, 0, 70, .04)) !important;
}

/* ---------------------------------------------------------------
   34. Indicador do item ativo — barra reta, não contorno
   Medido: box-shadow inset num elemento com border-radius:9px
   acompanha a curva e vira um contorno arredondado. A barra passa
   a ser um pseudo-elemento com altura própria, independente do
   raio do item. Também saem os border-bottom que dividiam a lista.
   --------------------------------------------------------------- */

html.dark-mode #layout-sidebar .listing li,
html.dark-mode #layout-list .listing li,
html.dark-mode #settings-menu li,
html.dark-mode .folderlist li {
  border: 0 !important;
}

html.dark-mode #layout-sidebar .listing li.selected > a,
html.dark-mode #layout-list .listing li.selected > a,
html.dark-mode #settings-menu li.selected > a,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .vd-nav a.active {
  position: relative;
  border-left: 0 !important;
  box-shadow: none !important;
}

html.dark-mode #layout-sidebar .listing li.selected > a:after,
html.dark-mode #layout-list .listing li.selected > a:after,
html.dark-mode #settings-menu li.selected > a:after,
html.dark-mode .folderlist li.selected > a:after,
html.dark-mode .vd-nav a.active:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--brand);
}

/* Mesma correção na linha selecionada da lista de mensagens. */
html.dark-mode #messagelist tbody tr.selected {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
}

html.dark-mode #messagelist tbody tr.selected:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
  border-radius: 0;
  background: var(--brand);
  transform: none;
  box-shadow: none;
}