/**
 * Art3Mail skin (extends Elastic)
 *
 * Carregado via meta.json "links", antes do styles.css da Elastic: por isso os
 * seletores começam com "html body" para ganhar em especificidade sem !important
 * (o !important só aparece onde o ui.js/Elastic grava estilo inline ou usa !important).
 */

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin-400.woff2) format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/poppins-latin-500.woff2) format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins-latin-600.woff2) format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-latin-700.woff2) format("woff2");
}

:root {
    --a3-orange: #f7941d;
    --a3-orange-dk: #e2780c;
    --a3-ink: #1d1d1f;
    --a3-mute: #6b6f76;
    --a3-line: #e3e5e8;
    --a3-field: #f6f7f9;
    --a3-card: #ffffff;
}

html.dark-mode {
    --a3-ink: #e8eaed;
    --a3-mute: #9aa0a6;
    --a3-line: #3a3f45;
    --a3-field: #24282d;
    --a3-card: #1b1e22;
}

/* ---------- Login ---------- */

html body.task-login {
    min-height: 100vh;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #b03a06 url(../images/login-bg.svg) center / cover no-repeat fixed;
    color: var(--a3-ink);
}

html body.task-login #layout {
    width: 100%;
    background: transparent;
}

html body.task-login #layout-content.a3-login {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    text-align: left;
    background: transparent;
}

/* Lado esquerdo: fundo laranja, logo e chamada */

html body.task-login .a3-hero {
    position: relative;
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    color: #ffffff;
}

html body.task-login .a3-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0) 40%, rgba(80, 25, 0, .28));
    pointer-events: none;
}

html body.task-login .a3-hero > * {
    position: relative;
    z-index: 1;
}

html body.task-login .a3-hero #logo {
    position: static;
    top: auto;
    display: block;
    height: 56px;
    width: auto;
    max-height: none;
    opacity: 1;
}

html body.task-login .a3-hero h2 {
    max-width: 13em;
    margin: 0 0 14px;
    font-family: inherit;
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: #ffffff;
}

html body.task-login .a3-hero p {
    max-width: 30em;
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    opacity: .92;
}

html body.task-login .a3-hero small {
    font-size: 13px;
    opacity: .8;
}

/* Lado direito: painel com o formulário */

html body.task-login .a3-panel {
    flex: 0 0 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 52px;
    background: var(--a3-card);
    box-shadow: -20px 0 60px rgba(60, 20, 0, .25);
}

html body.task-login .a3-panel .a3-title {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: var(--a3-ink);
}

html body.task-login .a3-panel .a3-sub {
    margin: 0 0 28px;
    font-size: 14.5px;
    color: var(--a3-mute);
}

html body.task-login #login-form {
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Campos gerados pelo objeto loginform (tabela) depois do ui.js */

html body.task-login #login-form table,
html body.task-login #login-form tbody,
html body.task-login #login-form tr,
html body.task-login #login-form td {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

html body.task-login #login-form tr {
    margin-bottom: 16px;
}

html body.task-login #login-form td.title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--a3-ink);
}

html body.task-login #login-form td.title label {
    margin: 0;
}

html body.task-login #login-form .input-group-prepend {
    display: none;
}

html body.task-login #login-form .input-group {
    width: 100%;
}

html body.task-login #login-form input.form-control {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--a3-ink);
    background: var(--a3-field);
    border: 1.5px solid var(--a3-line);
    border-radius: 10px !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

html body.task-login #login-form input.form-control:focus {
    background: var(--a3-card);
    border-color: var(--a3-orange);
    box-shadow: 0 0 0 4px rgba(247, 148, 29, .18);
}

html body.task-login #login-form .formbuttons {
    margin: 8px 0 0;
}

html body.task-login #login-form #rcmloginsubmit {
    width: 100%;
    height: 52px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none !important; /* ui.js adiciona .text-uppercase (Bootstrap, !important) */
    color: #ffffff;
    background: var(--a3-orange);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(247, 148, 29, .35);
    transition: background .15s, transform .05s;
}

html body.task-login #login-form #rcmloginsubmit:hover,
html body.task-login #login-form #rcmloginsubmit:focus {
    background: var(--a3-orange-dk);
}

html body.task-login #login-form #rcmloginsubmit:active {
    transform: translateY(1px);
}

html body.task-login #login-footer.a3-foot {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px;
    font-size: 12.5px;
    color: var(--a3-mute);
}

html body.task-login #login-footer.a3-foot a {
    color: var(--a3-mute);
    text-decoration: none;
}

html body.task-login #login-footer.a3-foot a:hover {
    color: var(--a3-orange-dk);
}

html body.task-login #messagestack {
    z-index: 20;
}

/* Celular: o fundo vira cabeçalho com a logo e o painel vira um cartão sobreposto */

@media (max-width: 900px) {
    html body.task-login #layout-content.a3-login {
        flex-direction: column;
    }

    html body.task-login .a3-hero {
        flex: 0 0 auto;
        justify-content: flex-start;
        padding: 28px 24px 90px;
    }

    html body.task-login .a3-hero #logo {
        height: 42px;
    }

    html body.task-login .a3-pitch,
    html body.task-login .a3-tagline {
        display: none;
    }

    html body.task-login .a3-panel {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        justify-content: flex-start;
        margin: -64px 16px 24px;
        padding: 32px 24px;
        border-radius: 18px;
        box-shadow: 0 20px 50px rgba(60, 20, 0, .3);
    }
}

/* =====================================================================
 * Webmail sem painel de leitura por padrão (art3mail_skin_mdr_v4)
 * Decisões: docs/claude/skin-revisao-2026-10-06.md
 * Barra superior e menu em slate Art3; área de trabalho em cinza claro com
 * lista e leitura em cartões. Comportamento no plugin art3_ui (art3_ui.js).
 * Abaixo de 769 px vale o layout de celular da Elastic, só com as cores Art3.
 * ===================================================================== */

html.a3 {
    --a3-chrome: #172c3f; /* azul do site da Art3 (art3mail_skin_mdr_v79); era #101828 */
    --a3-chrome-2: #233a52; /* um tom acima do --a3-chrome (busca, hover); era #1b2639 */
    --a3-chrome-ink: #e6eaf2;
    --a3-chrome-mute: #97a2b6;
    --a3-chrome-line: rgba(255, 255, 255, .08);
    --a3-work: #e3e7ee;
    --a3-surface: #ffffff;
    --a3-surface-2: #f6f7fa;
    --a3-hover: #f2f4f8;
    --a3-sel: #fff3e3;
    --a3-rule: #e2e5ec;
    --a3-row-rule: #d3d8e1;
    --a3-text: #161b26;
    --a3-text-mute: #5c6475;
    --a3-text-faint: #8a92a3;
    --a3-accent: #f7941d;
    --a3-accent-btn: #ffa53a; /* botões laranja: cor normal mais suave, hover no --a3-accent (mdr v33) */
    --a3-accent-ink: #9c5200;
    --a3-accent-soft: #fff0dc;
    --a3-on-accent: #231400;
    --a3-danger: #c62f3a;
    --a3-shadow: 0 10px 30px rgba(16, 24, 40, .16), 0 1px 3px rgba(16, 24, 40, .08);
    --a3-display: "Poppins", system-ui, "Segoe UI", sans-serif;
    --a3-nav-w: 248px;
    --a3-nav-mini-w: 76px;
    --a3-top-h: 60px;
    --a3-swipe: #188038; /* faixa do arrasto de lado na lista (arquivar) */
    --a3-on-swipe: #ffffff;
}

html.a3.dark-mode {
    --a3-chrome: #0a0f1a;
    --a3-chrome-2: #152033;
    --a3-chrome-mute: #8d99ae;
    --a3-chrome-line: rgba(255, 255, 255, .07);
    --a3-work: #111827;
    --a3-surface: #182133;
    --a3-surface-2: #1d273a;
    --a3-hover: #212c41;
    --a3-sel: #2e2416;
    --a3-rule: #2a354c;
    --a3-row-rule: #36425b;
    --a3-text: #e7ebf3;
    --a3-text-mute: #a3adbf;
    --a3-text-faint: #76829a;
    --a3-accent-ink: #ffb45e;
    --a3-accent-soft: #2f2314;
    --a3-danger: #ff6f78;
    --a3-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --a3-swipe: #1e6b3a;
}

/* Ícones de traço (includes/a3-icons.html) */
html.a3 .a3i {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

html.a3 .a3i.a3i-sm {
    width: 15px;
    height: 15px;
}

html.a3 .a3-ib {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    color: inherit;
    flex: none;
    text-decoration: none;
}

html.a3 .a3-ib:hover {
    background: var(--a3-hover);
}

html.a3 a.disabled,
html.a3 a.disabled:hover {
    opacity: .45;
    cursor: default;
    background: none;
}

/* A barra superior, a busca no topo e o seletor de painel só existem no computador */
#a3-top,
html.a3 #layout-list .a3-pane-toggle,
html.a3 #layout-content .a3-back,
html.a3 #layout-content .a3-ai,
html.a3 #layout-content .a3-msgnav,
html.a3 #layout-content .a3-msgacts,
html.a3 .a3-nav-top {
    display: none;
}

/* Celular e tablet pequeno: Elastic, com o laranja Art3 nos destaques */
@media (max-width: 768px) {
    html.a3 .floating-action-buttons a.button {
        background-color: var(--a3-accent-btn);
        color: var(--a3-on-accent);
    }

    /* a busca fica na barra superior também no celular (art3mail_skin_mdr_v49), sem o "Perguntar à IA" */
    html.a3 #a3-search .a3-ask-ai {
        display: none;
    }
}

/* ---------- Filtros rápidos (todas as larguras) ---------- */

html.a3 .a3-chips {
    display: flex;
    gap: 6px;
    padding: 10px 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: none;
    background: var(--a3-surface);
}

html.a3 .a3-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--a3-rule);
    color: var(--a3-text-mute);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    background: var(--a3-surface);
}

html.a3 .a3-chip:hover {
    background: var(--a3-hover);
    color: var(--a3-text);
    text-decoration: none;
}

html.a3 .a3-chip .a3i {
    display: none;
}

html.a3 .a3-chip.on {
    background: var(--a3-accent-soft);
    border-color: transparent;
    color: var(--a3-accent-ink);
}

html.a3 .a3-chip.on .a3i {
    display: inline;
}

/* ---------- Ações ao passar o mouse e estrela na lista (todas as larguras) ---------- */

html.a3 .messagelist td.subject {
    position: relative;
}

html.a3 .a3-row-acts {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    background: var(--a3-hover);
    box-shadow: 0 0 0 1px var(--a3-rule);
    line-height: normal;
    z-index: 2;
}

html.a3 .a3-row-acts a {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--a3-text-mute);
    text-decoration: none;
}

html.a3 .a3-row-acts a:not(.disabled):hover {
    background: var(--a3-surface);
    color: var(--a3-text);
}

html.a3 .messagelist tr.unread .a3-when-read,
html.a3 .messagelist tr:not(.unread) .a3-when-unread {
    display: none;
}

/* Só no modo tela inteira (sem painel de leitura): nas 3 colunas a lista é estreita e a barra cobria o ponto
   onde se clica para abrir a mensagem; lá as ações ficam no menu de contexto (art3mail_skin_mdr_v44) */
@media (hover: hover) {
    html.a3.a3-pane-none .messagelist tr:hover .a3-row-acts {
        display: flex;
    }
}

/* ---------- Lista no toque: toque longo e arrasto de lado (art3mail_skin_mdr_v56, art3_ui_mdr_v22) ---------- */

/* Toque longo na linha: sem o menu do navegador (abrir em nova aba...) e sem selecionar texto */
@media (pointer: coarse) {
    html.a3 .messagelist tr.message,
    html.a3 .messagelist tr.message a {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Arrasto de lado: a faixa verde fica presa à borda da linha (o td corta o que passa dele, por isso o visible) */
html.a3 .messagelist tr.a3-swiping {
    position: relative;
    z-index: 2;
    background-color: var(--a3-surface);
}

html.a3 .messagelist tr.a3-swiping td.subject {
    overflow: visible;
}

html.a3 .a3-swipe-on {
    overflow-x: hidden !important;
}

html.a3 .messagelist .a3-swipe-bg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 22px;
    box-sizing: border-box;
    background: var(--a3-swipe);
    color: var(--a3-on-swipe);
    pointer-events: none;
}

html.a3 .messagelist .a3-swipe-bg.a3-swipe-left {
    justify-content: flex-start;
}

html.a3 .messagelist .a3-swipe-bg .a3i {
    width: 22px;
    height: 22px;
    opacity: .7;
    transition: transform .15s ease, opacity .15s ease;
}

/* passou do ponto: soltando, arquiva */
html.a3 .messagelist tr.a3-swipe-far .a3-swipe-bg .a3i {
    opacity: 1;
    transform: scale(1.2);
}

/* Aviso "Mensagem arquivada · Desfazer" embaixo, como no Gmail */
html.a3 .a3-undo {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2200;
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 6px 6px 6px 18px;
    border-radius: 10px;
    background: var(--a3-chrome);
    color: var(--a3-chrome-ink);
    box-shadow: 0 0 0 1px var(--a3-chrome-line), var(--a3-shadow);
    font-size: 14px;
    animation: a3-undo-in .2s ease;
}

html.a3 .a3-undo button {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--a3-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

html.a3 .a3-undo button:hover,
html.a3 .a3-undo button:focus-visible {
    background: var(--a3-chrome-2);
}

@keyframes a3-undo-in {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

/* Menu de contexto da lista (botão direito) — art3_ui */
html.a3 .a3-ctx {
    position: fixed;
    z-index: 2100;
    min-width: 230px;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--a3-surface);
    color: var(--a3-text);
    box-shadow: 0 0 0 1px var(--a3-rule), 0 10px 30px rgba(0, 0, 0, .18);
    font-size: 14px;
}

html.a3 .a3-ctx a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 18px;
    color: inherit;
    text-decoration: none;
    outline: none;
}

html.a3 .a3-ctx a .a3i {
    width: 18px;
    height: 18px;
    color: var(--a3-text-mute);
}

html.a3 .a3-ctx a:not(.disabled):hover,
html.a3 .a3-ctx a:not(.disabled):focus {
    background: var(--a3-hover);
}

html.a3 .a3-ctx a.disabled {
    opacity: .45;
    cursor: default;
}

html.a3 .a3-ctx a .a3-pro-lock {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: var(--a3-accent);
}

html.a3 .a3-ctx-sep {
    height: 1px;
    margin: 6px 0;
    background: var(--a3-rule);
}

/* "Mover para ▸" e "Marcar como ▸": seta à direita; a janelinha abre ao lado do item */
html.a3 .a3-ctx a .a3i.a3-ctx-sub {
    width: 16px;
    height: 16px;
    margin-left: auto;
}

/* Item com o submenu aberto continua destacado */
html.a3 .a3-ctx a.a3-ctx-open {
    background: var(--a3-hover);
}

/* Submenu "Marcar como ▸": marcadores com caixinha e cor; até 20, rola se a janela for baixa (art3_ui_mdr_v27) */
html.a3 .a3-ctx.a3-ctx-fly {
    min-width: 200px;
    max-width: 280px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

html.a3 .a3-ctx-fly a.a3-fly-label {
    gap: 10px;
}

html.a3 .a3-ctx-fly .a3-fly-name {
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Alvo invisível do seletor de pastas da Elastic no lugar do item (art3_ui) */
#a3-ctx-anchor {
    position: fixed;
    width: 1px;
    opacity: 0;
    pointer-events: none;
}

html.a3 #layout-list .listing-hover-menu {
    display: none !important;
}

html.a3 .messagelist tr.selected .a3-row-acts {
    background: var(--a3-sel);
}

/* Estrela no lugar da bandeira (o "sinalizar" do IMAP, que outros programas e o celular também mostram) */
html.a3 .messagelist span.flagged:before,
html.a3 .messagelist span.unflagged:before {
    font-family: 'Icons';
    content: "\f005";
    font-weight: 400;
    font-size: 1.05rem;
    float: none;
    display: inline-block;
    width: 1.2em;
    margin: 0;
    text-align: center;
    color: var(--a3-text-faint);
}

html.a3 .messagelist span.flagged:before {
    font-weight: 900;
    color: var(--a3-accent);
}

html.a3 .messagelist tr.flagged td,
html.a3 .messagelist tr.flagged span.size,
html.a3 .messagelist tr.flagged td.subject span.subject a,
html.a3 .messagelist tr.flagged td.subject span.date,
html.a3 .messagelist tr.flagged td.subject span.fromto {
    color: inherit;
}

/* Menu de pastas da nova mensagem e da mensagem aberta: só no computador (art3mail_skin_mdr_v8) */
html.a3 #a3-nav {
    display: none;
}

/* Pasta com não lidas: só o número em negrito, o nome fica normal */
html.a3 .folderlist li.mailbox.unread > a {
    font-weight: normal;
}

html.a3 .folderlist li.mailbox .unreadcount {
    font-weight: 700;
}

/* =====================================================================
 * Computador (769 px ou mais)
 * ===================================================================== */

@media (min-width: 769px) {
    /* fora das páginas em quadro (configurações, contatos): lá o fundo fica o da Elastic (mdr v89) */
    html.a3:not(.a3-framed) body {
        background: var(--a3-chrome);
    }

    html.a3:not(.a3-framed) #layout {
        position: relative;
        background: var(--a3-chrome);
    }

    html.a3 #layout > #layout-menu {
        display: none !important;
    }

    /* ---------- Barra superior ---------- */

    html.a3 #a3-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        height: var(--a3-top-h);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 14px 0 8px;
        color: var(--a3-chrome-ink);
    }

    html.a3 #a3-top ~ #layout-sidebar,
    html.a3 #a3-top ~ #a3-nav,
    html.a3 #a3-top ~ #layout-list,
    html.a3 #a3-top ~ #layout-content {
        margin-top: var(--a3-top-h);
    }

    /* #a3-nav faz o papel do #layout-sidebar onde a Elastic não tem menu de pastas */
    html.a3 #a3-nav {
        position: relative;
        flex-direction: column;
    }

    html.a3 #a3-top .a3-ib:hover {
        background: var(--a3-chrome-line);
        color: #fff;
    }

    html.a3 .a3-menu-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    html.a3 .a3-brand {
        display: flex;
        align-items: center;
        gap: 2px;
        width: 178px;
        flex: none;
        color: var(--a3-chrome-ink);
        text-decoration: none;
    }

    html.a3 .a3-brand:hover {
        text-decoration: none;
        color: #fff;
    }

    html.a3 .a3-brand svg {
        height: 24px;
        width: auto;
    }

    html.a3 .a3-brand span {
        font-family: var(--a3-display);
        font-weight: 600;
        font-size: 19px;
        letter-spacing: -.01em;
        margin-left: 3px;
    }

    html.a3 .a3-top-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }

    html.a3 .a3-avatar {
        width: 28px;
        height: 28px;
        margin-left: 8px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--a3-accent);
        color: var(--a3-on-accent);
        font-weight: 700;
        font-size: 12px;
        text-decoration: none;
        box-shadow: 0 0 0 2px var(--a3-chrome), 0 0 0 4px rgba(247, 148, 29, .35);
    }

    html.a3 .a3-avatar:hover {
        text-decoration: none;
        color: var(--a3-on-accent);
        filter: brightness(1.06);
    }

    /* ---------- Busca no topo ---------- */

    html.a3 #a3-search {
        position: absolute;
        z-index: 21;
        top: 8px;
        left: 250px;
        width: calc(100% - 250px - 230px);
        max-width: 720px;
    }
}

/* Caixa da busca no topo: a mesma no computador e no celular; só a posição muda (art3mail_skin_mdr_v49) */

html.a3 #a3-search .searchbar {
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    padding: 0 6px 0 4px;
    border: 1px solid transparent;
    border-radius: 22px; /* arredondada nas pontas, como no mockup da seleção múltipla (art3mail_skin_mdr_v72) */
    background: var(--a3-chrome-2);
    color: var(--a3-chrome-mute);
    overflow: visible;
}

html.a3 #a3-search .searchbar form:before {
    height: 44px;
    line-height: 44px;
    color: var(--a3-chrome-mute);
}

html.a3 #a3-search .searchbar input {
    color: var(--a3-chrome-ink);
    font-size: 15px;
}

html.a3 #a3-search .searchbar input::placeholder {
    color: var(--a3-chrome-mute);
}

html.a3 #a3-search .searchbar a {
    color: var(--a3-chrome-mute);
}

html.a3 #a3-search .searchbar a:before {
    height: 44px;
    line-height: 44px;
}

html.a3 #a3-search .searchbar a.unread {
    display: none; /* os filtros rápidos fazem isso */
}

/* a barra tem a classe .menu do Elastic, que pinta um quadrado cinza no hover/focus dos links;
   aqui a seta e o X só mudam de cor e o fundo é sempre o da própria barra */
html.a3 #a3-search .searchbar a:not(.disabled):hover,
html.a3 #a3-search .searchbar a:not(.disabled):focus {
    background-color: transparent;
}

html.a3 #a3-search .searchbar a:not(.disabled):hover {
    color: var(--a3-chrome-ink);
}

html.a3 #a3-search .searchbar:focus-within a:not(.disabled):hover,
html.a3 #a3-search .searchbar.open a:not(.disabled):hover {
    color: var(--a3-text);
}

html.a3 #a3-search .searchbar:focus-within,
html.a3 #a3-search .searchbar.open {
    background: var(--a3-surface);
    border-color: var(--a3-rule);
}

html.a3 #a3-search .searchbar:focus-within input,
html.a3 #a3-search .searchbar.open input {
    color: var(--a3-text);
}

html.a3 #a3-search .searchbar.open {
    border-radius: 22px 22px 0 0;
}

html.a3 #a3-search #searchmenu {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 80px);
    overflow: auto;
    padding: 12px 14px 14px;
    background: var(--a3-surface);
    color: var(--a3-text);
    border: 1px solid var(--a3-rule);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: var(--a3-shadow);
}

html.a3 #a3-search .a3-searchmenu-next {
    display: none !important;
}

@media (min-width: 769px) {
    html.a3 .a3-ask-ai {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        padding: 10px 12px;
        margin-bottom: 12px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--a3-accent-soft), var(--a3-surface-2) 75%);
        border: 1px solid var(--a3-rule);
        color: var(--a3-text);
        line-height: 1.4;
        text-decoration: none;
    }

    html.a3 .a3-ask-ai.disabled {
        opacity: .75;
    }

    html.a3 .a3-ask-ai > .a3i {
        color: var(--a3-accent);
        margin-top: 2px;
    }

    html.a3 .a3-ask-ai b {
        display: block;
        font-weight: 600;
    }

    html.a3 .a3-ask-ai span span {
        display: block;
        color: var(--a3-text-mute);
        font-size: 13px;
    }

    html.a3 .a3-ask-ai small {
        display: block;
        color: var(--a3-text-faint);
        font-size: 11.5px;
        margin-top: 2px;
    }

    /* ---------- Menu lateral (pastas) ---------- */

    html.a3 #a3-top ~ :is(#layout-sidebar, #a3-nav):not(.sidebar-right) {
        display: flex !important; /* a Elastic esconde em telas médias */
        flex: none !important;
        width: var(--a3-nav-w) !important;
        min-width: 0;
        max-width: none;
        border: 0;
        background: var(--a3-chrome);
        color: var(--a3-chrome-ink);
        transition: width .16s ease, margin .16s ease, box-shadow .16s;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) > .header,
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) > .column-resizer {
        display: none;
    }

    html.a3 .a3-nav-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 4px 12px 8px;
        flex: none;
    }

    html.a3 .a3-compose {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 36px;
        padding: 0 20px 0 16px;
        margin: 0 0 6px;
        border-radius: 13px;
        background: var(--a3-accent-btn);
        color: var(--a3-on-accent);
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(247, 148, 29, .24);
        transition: background .15s;
    }

    html.a3 .a3-compose:hover {
        background: var(--a3-accent);
        color: var(--a3-on-accent);
        text-decoration: none;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .scroller {
        padding: 0 12px 0 0;
    }

    /* barra de rolagem do menu lateral: fina e invisível; só aparece com o mouse em cima (como no Gmail).
       O espaço dela continua reservado, então nada se mexe quando ela aparece. */
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .scroller {
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .scroller:hover {
        scrollbar-color: rgba(255, 255, 255, .22) transparent;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li {
        border: 0;
        line-height: 36px;
        background: none;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li > a {
        position: relative;
        height: 36px;
        padding-left: 26px;
        border-radius: 0 18px 18px 0;
        color: var(--a3-chrome-mute);
        background: none;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li > a:hover {
        background: var(--a3-chrome-line);
        color: var(--a3-chrome-ink);
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li > a:before {
        width: 1.4em;
        margin-right: 12px;
        color: inherit;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.selected > a,
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.selected > div > a {
        background: var(--a3-accent-btn); /* pasta atual no laranja do Escrever (mdr v60) */
        color: var(--a3-chrome); /* texto no azul escuro do menu (mdr v61) */
        font-weight: 600;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.selected {
        background: none;
    }

    /* não lidas: off-white, um pouco menos aceso que o branco do texto; o número fica no branco */
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.unread > a {
        color: #cdd4df;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.unread > a .unreadcount {
        color: var(--a3-chrome-ink);
    }

    /* pasta atual com não lidas: continua no azul escuro sobre o laranja; sem isto a regra de não lida acima,
       aplicada quando a contagem chega, deixava o texto e o número brancos (mdr v62) */
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.selected.unread > a,
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.selected.unread > a .unreadcount {
        color: var(--a3-chrome);
    }

    /* pasta só agrupadora (não abre, ex. "art3"): cinza das outras, só um pouco mais apagada (a Elastic usa .4) */
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li > a.virtual,
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li.virtual > a {
        opacity: .7;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .folderlist li.mailbox .unreadcount {
        top: 50%;
        transform: translateY(-50%);
        margin: 0 10px 0 0;
        min-width: 0;
        padding: 0;
        line-height: 1.4;
        background: none;
        color: inherit;
        font-size: 12px;
        font-weight: 700;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) ul.treelist li div.treetoggle {
        left: 6px;
        color: var(--a3-chrome-mute);
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li > a:focus {
        outline: 2px solid var(--a3-accent);
        outline-offset: -2px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) > .footer {
        border: 0;
        background: none;
        color: var(--a3-chrome-mute);
        font-weight: normal;
        font-size: 12px;
        justify-content: flex-start;
        padding: 0 14px;
        height: 30px;
        min-height: 30px;
        line-height: 30px;
    }

    /* cota mais baixa: menos altura tirada da lista de pastas (art3mail_skin_mdr_v20) */
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .quota-widget {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        color: var(--a3-chrome-mute);
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .quota-widget .bar {
        background: var(--a3-chrome-2);
        border-radius: 3px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .quota-widget .value {
        background: var(--a3-accent);
        border-radius: 3px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .searchbar {
        margin: 0 0 6px 12px;
        border: 0;
        border-radius: 10px;
        background: var(--a3-chrome-2);
        color: var(--a3-chrome-mute);
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .searchbar input {
        color: var(--a3-chrome-ink);
    }

    /* Menu recolhido: só ícones; ao passar o mouse abre por cima, sem empurrar a lista */
    html.a3.a3-nav-mini #a3-top ~ :is(#layout-sidebar, #a3-nav):not(.sidebar-right) {
        width: var(--a3-nav-mini-w) !important;
        position: relative;
        z-index: 15;
    }

    html.a3.a3-nav-mini #a3-top ~ :is(#layout-sidebar, #a3-nav):not(.sidebar-right):hover {
        width: var(--a3-nav-w) !important;
        margin-right: calc(var(--a3-nav-mini-w) - var(--a3-nav-w));
        box-shadow: 16px 0 34px rgba(0, 0, 0, .35);
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .a3-t,
    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) > .footer {
        display: none;
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .a3-compose {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .listing li > a {
        font-size: 0;
        padding-left: 26px;
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .listing li > a:before {
        font-size: 17.5px;
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .folderlist li.mailbox .unreadcount {
        top: 3px;
        left: 40px;
        right: auto;
        transform: none;
        margin: 0;
        padding: 0 5px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 16px;
        background: var(--a3-accent);
        color: var(--a3-on-accent);
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .treetoggle,
    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) ul.treelist ul {
        display: none !important;
    }

    /* ---------- Área de trabalho: fundo cinza, cartões brancos ---------- */

    html.a3 #a3-top ~ #layout-list,
    html.a3 #a3-top ~ #layout-content,
    html.a3 #a3-top ~ #layout-sidebar.sidebar-right {
        border: 0;
        background: var(--a3-work);
        padding: 10px 0;
    }

    html.a3 #a3-top ~ #layout-list {
        padding-left: 10px;
        border-radius: 18px 0 0 0;
    }

    html.a3 #a3-top ~ #layout-content {
        padding-right: 10px;
        padding-left: 8px;
    }

    html.a3 #a3-top ~ #layout-sidebar.sidebar-right {
        padding-right: 10px;
        padding-left: 8px;
    }

    /* cartão = os filhos da coluna (cabeçalho, filtros, lista, rodapé) */
    html.a3 #a3-top ~ #layout-list > *,
    html.a3 #a3-top ~ #layout-content > *,
    html.a3 #a3-top ~ #layout-sidebar.sidebar-right > * {
        background-color: var(--a3-surface);
    }

    html.a3 #a3-top ~ #layout-list > .column-resizer,
    html.a3 #a3-top ~ #layout-content > .column-resizer,
    html.a3 #a3-top ~ #layout-sidebar.sidebar-right > .column-resizer {
        background: none;
    }

    /* cantos: só os de fora são arredondados; os de dentro, frente a frente, ficam retos */
    html.a3 #a3-top ~ #layout-list > .header {
        border-radius: 16px 0 0 0;
    }

    html.a3 #a3-top ~ #layout-list > .pagenav {
        border-radius: 0 0 0 16px;
    }

    html.a3 #a3-top ~ #layout-content > .header,
    html.a3 #a3-top ~ #layout-sidebar.sidebar-right > .header {
        border-radius: 0 16px 0 0;
    }

    html.a3 #a3-top ~ #layout-content > :last-child,
    html.a3 #a3-top ~ #layout-sidebar.sidebar-right > :last-child {
        border-radius: 0 0 16px 0;
    }

    html.a3 #a3-top ~ #layout-list > .header,
    html.a3 #a3-top ~ #layout-content > .header,
    html.a3 #a3-top ~ #layout-sidebar.sidebar-right > .header {
        border-bottom: 1px solid var(--a3-rule);
        color: var(--a3-text);
    }

    html.a3 #layout-list > .header {
        padding: 0 8px 0 10px;
        justify-content: flex-start;
        align-items: center;
    }

    html.a3 #layout-list > .header .header-title {
        flex: 1;
        margin: 0 4px 0 8px !important;
        padding: 0 !important;
        text-align: left;
        font-family: var(--a3-display);
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.01em;
    }

    /* cabeçalho da lista: seleção e opções só com ícones, nome da pasta, atualizar e troca de painel */
    html.a3 #layout-list > .header .toolbar {
        order: 0;
        display: flex;
        align-items: center;
        flex: none;
        align-self: center;
        height: auto;
        line-height: normal;
    }

    /* até 1200 px o ui.js da Elastic marca a barra como .popupmenu (min-width 180px) e afasta o título */
    html.a3 #layout-list > .header .toolbar.popupmenu {
        min-width: 0;
    }

    /* o ui.js da Elastic pode embrulhar os links em ul > li: centraliza também */
    html.a3 #layout-list > .header .toolbar :is(ul, li) {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    html.a3 #layout-list > .header .header-title {
        order: 1;
        display: block !important; /* a Elastic só mostra no celular */
    }

    html.a3 #layout-list > .header a.refresh {
        order: 2;
    }

    html.a3 #layout-list > .header .a3-pane-toggle {
        order: 3;
    }

    html.a3 #layout-list > .header .toolbar a,
    html.a3 #layout-list > .header a.refresh {
        width: 36px;
        min-width: 0;
        height: 36px;
        margin: 0;
        padding: 0;
        border-radius: 10px;
        line-height: 36px;
        color: var(--a3-text-mute);
    }

    html.a3 #layout-list > .header .toolbar a:not(.disabled):hover,
    html.a3 #layout-list > .header a.refresh:hover {
        background: var(--a3-hover);
        color: var(--a3-text);
    }

    html.a3 #layout-list > .header .toolbar a:before,
    html.a3 #layout-list > .header a.refresh:before {
        float: none;
        width: 100%;
        height: 36px;
        margin: 0;
        line-height: 36px;
        font-size: 15px;
        text-align: center;
    }

    html.a3 #layout-list > .header .toolbar a span.inner,
    html.a3 #layout-list > .header a.refresh span.inner {
        display: none !important;
    }

    html.a3 #layout-list > .header .back-sidebar-button,
    html.a3 #layout-list > .header .task-menu-button,
    html.a3 #layout-list > .header .toolbar-menu-button,
    html.a3 #layout-list > .header .toolbar-list-button {
        display: none !important;
    }

    html.a3 #layout-list .a3-pane-toggle {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        color: var(--a3-text-mute);
    }

    html.a3 #layout-list .a3-pane-toggle:hover {
        background: var(--a3-hover);
        color: var(--a3-text);
    }

    html.a3.a3-pane-none #layout-list .a3-pane-toggle .a3-when-right,
    html.a3:not(.a3-pane-none) #layout-list .a3-pane-toggle .a3-when-none {
        display: none;
    }

    html.a3 #layout-list .pagenav {
        border-top: 1px solid var(--a3-rule);
        color: var(--a3-text-faint);
        font-weight: normal;
    }

    html.a3 #layout-list .pagenav input.form-control {
        display: none;
    }

    /* 3 colunas (configurações e contatos ficam sempre assim, qualquer que seja o modo do e-mail) */
    html.a3:not(.a3-pane-none) #a3-top ~ #layout-list,
    html.a3 body:not(.task-mail) #a3-top ~ #layout-list {
        flex: 0 0 auto;
        width: 400px;
        min-width: 320px;
        max-width: 42%;
    }

    /* ---------- Sem painel (padrão): a mensagem abre no lugar da lista — só no e-mail ---------- */

    html.a3.a3-pane-none body.task-mail #a3-top ~ #layout-list {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-right: 10px;
    }

    html.a3.a3-pane-none body.task-mail #a3-top ~ #layout-list > .header {
        border-radius: 16px 16px 0 0;
    }

    html.a3.a3-pane-none body.task-mail #a3-top ~ #layout-list > .pagenav {
        border-radius: 0 0 16px 16px;
    }

    html.a3.a3-pane-none body.task-mail #a3-top ~ #layout-list > .column-resizer {
        display: none;
    }

    html.a3.a3-pane-none:not(.a3-reading) body.task-mail.action-none #layout-content {
        display: none !important;
    }

    html.a3.a3-pane-none.a3-reading body.task-mail.action-none #layout-list {
        display: none !important;
    }

    html.a3.a3-pane-none.a3-reading body.task-mail.action-none #layout-content,
    html.a3 body.task-mail.action-show #a3-top ~ #layout-content,
    html.a3 body.task-mail.action-compose #a3-top ~ #layout-content {
        border-radius: 18px 0 0 0;
        padding-left: 10px;
    }

    html.a3.a3-pane-none.a3-reading body.task-mail.action-none #layout-content > .header,
    html.a3 body.task-mail.action-show #a3-top ~ #layout-content > .header,
    html.a3 body.task-mail.action-compose #a3-top ~ #layout-content > .header {
        border-radius: 16px 16px 0 0;
    }

    html.a3.a3-pane-none.a3-reading body.task-mail.action-none #layout-content > :last-child,
    html.a3 body.task-mail.action-show #a3-top ~ #layout-content > :last-child {
        border-radius: 0 0 16px 16px;
    }

    html.a3.a3-pane-none body.task-mail.action-none #layout-content .a3-back,
    html.a3 body.task-mail.action-show #layout-content .a3-back {
        display: inline-grid;
    }

    /* ---------- Barra da leitura: seta de voltar, ícones e lugar da IA ---------- */

    html.a3 #layout-content > .header {
        justify-content: flex-start;
        align-items: center;
        padding: 0 10px;
        gap: 2px;
    }

    html.a3 body.task-mail.action-none #layout-content > .header .header-title,
    html.a3 body.task-mail.action-show #layout-content > .header .header-title {
        display: none;
    }

    html.a3 #layout-content > .header .a3-back {
        place-items: center;
        width: 40px;
        height: 40px;
        margin-right: 14px;
        border-radius: 50%;
        color: var(--a3-text);
    }

    html.a3 #layout-content > .header .a3-back .a3i {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    html.a3 #layout-content > .header .a3-back:hover {
        background: var(--a3-hover);
    }

    /* barra de ferramentas só com ícones (o nome aparece ao passar o mouse) */
    html.a3 #layout-content > .header .a3-back {
        order: 0;
    }

    /* Configurações e Contatos: os li inline-block alinhados pela linha de base deixavam a barra
       mais alta que o cabeçalho e, centralizada, os ícones subiam e eram cortados no topo do card */
    html.a3 body:not(.task-mail) #layout-content > .header > .toolbar {
        display: flex;
        align-items: center;
        align-self: stretch;
        margin: 0;
        line-height: normal;
    }

    html.a3 body:not(.task-mail) #layout-content > .header > .toolbar > li {
        display: flex;
        align-items: center;
        height: auto;
    }

    html.a3 body:not(.task-mail) #layout-content > .header > .toolbar a {
        height: auto;
    }

    /* o ui.js da Elastic transforma a barra (#mailtoolbar) em ul#toolbar-menu > li > a */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar {
        order: 1;
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li {
        display: flex;
        align-items: center;
        border: 0;
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: 38px;
        height: 38px;
        margin: 0 1px;
        padding: 0;
        border-radius: 10px;
        line-height: 38px;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a:not(.disabled):hover {
        background: var(--a3-hover);
        color: var(--a3-text);
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a:before {
        float: none;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        line-height: 1;
        font-size: 17px;
        text-align: center;
    }

    /* a Elastic força 1.75rem (!important) de altura no ícone e o desenho ficava no topo dessa caixa:
       a linha com a mesma altura centraliza o desenho (mdr v13) */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a:before {
        line-height: 1.75rem;
    }

    /* nome escrito embaixo do ícone, como na barra da seleção (art3mail_skin_mdr_v90): quem vem do
       Outlook antigo procura "Excluir" e "Arquivar" pelo nome, não confia em botão só com ícone.
       A barra não encolhe; quem cede espaço são os botões de IA (ficam só com o ícone, abaixo) */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar {
        flex-shrink: 0;
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a {
        flex-direction: column;
        gap: 2px;
        width: auto;
        min-width: 44px;
        max-width: none;
        height: 48px;
        padding: 0 6px;
        line-height: 1.1;
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a:before {
        height: 22px !important;
        line-height: 22px;
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a span.inner {
        display: block !important;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* "Arquivo" → "Arquivar", "Marcar como não lida" → "Não lida" (data-a3-short vem do art3_ui.js) */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a[data-a3-short] span.inner {
        display: none !important;
    }

    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a[data-a3-short]:after {
        content: attr(data-a3-short);
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* coluna da leitura estreita: Resumir / Sugerir resposta / Isso é golpe? só com o ícone (o nome
       continua no title) para os nomes da barra caberem inteiros */
    html.a3 body.task-mail #layout-content > .header {
        container: a3-readbar / inline-size;
    }

    @container a3-readbar (max-width: 760px) {
        html.a3 #layout-content > .header .a3-ai-btn {
            gap: 0;
            width: 34px;
            padding: 0;
            justify-content: center;
            font-size: 0;
        }
    }

    /* Responder/Responder a todos/Encaminhar ficam no cabeçalho e no rodapé da mensagem */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a.reply,
    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > .dropbutton {
        display: none !important;
    }

    /* "Marcar como não lida" no lugar do "Marcar" da Elastic: envelope fechado em contorno,
       diferente da etiqueta de Marcadores (mdr v82) */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li > a.a3-unread:before {
        content: "\f0e0";
        font-weight: 400;
    }

    /* sem Responder/Encaminhar à esquerda, o separador da Elastic sobraria solto */
    html.a3 body.task-mail #layout-content > .header > ul.toolbar > li.spacer {
        display: none;
    }

    html.a3 #layout-content > .header .a3-ai {
        order: 2;
        display: flex;
        gap: 6px;
        align-items: center;
        margin-left: auto;
        padding-left: 8px;
    }

    html.a3 .a3-ai-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 12px 0 10px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        color: var(--a3-text);
        background: var(--a3-surface-2);
        border: 1px solid var(--a3-rule);
        white-space: nowrap;
        text-decoration: none;
    }

    html.a3 .a3-ai-btn .a3i {
        color: var(--a3-accent);
    }

    html.a3 .a3-ai-btn.a3-scam .a3i {
        color: var(--a3-danger);
    }

    /* ---------- Escrever (tela normal) ---------- */

    html.a3 body.task-mail.action-compose #layout-content > .header .header-title {
        text-align: left;
        margin: 0 0 0 8px !important;
        padding: 0 !important;
        font-family: var(--a3-display);
        font-size: 17px;
        font-weight: 600;
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons .btn.send {
        height: 40px;
        padding: 0 24px;
        border: 0;
        border-radius: 999px;
        background: var(--a3-accent-btn);
        color: var(--a3-on-accent);
        font-weight: 700;
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons .btn.send:hover {
        background: var(--a3-accent);
    }

    html.a3 .a3-compose-future {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-left: 4px;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons .float-right {
        margin-left: auto;
    }

    /* ---------- Popups da barra superior (engrenagem e conta) ---------- */

    .popover:has(.a3-pop) {
        max-width: 360px;
        border: 1px solid var(--a3-rule);
        border-radius: 14px;
        box-shadow: var(--a3-shadow);
        background: var(--a3-surface);
    }
}

/* Conteúdo dos popups (também no celular) */
html.a3 .a3-pop {
    color: var(--a3-text);
    background: var(--a3-surface);
}

html.a3 .a3-qs {
    width: 330px;
    max-width: 100%;
    padding: 14px;
}

html.a3 .a3-pop-title {
    margin: 0 0 12px;
    font-family: var(--a3-display);
    font-weight: 600;
    font-size: 15px;
}

html.a3 .a3-grp {
    margin-bottom: 16px;
}

html.a3 .a3-grp > span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--a3-text-mute);
    margin-bottom: 8px;
}

html.a3 .a3-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: var(--a3-surface-2);
    border: 1px solid var(--a3-rule);
}

html.a3 .a3-seg a {
    display: grid;
    place-items: center;
    height: 30px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--a3-text-mute);
    text-decoration: none;
    white-space: nowrap;
}

html.a3 .a3-seg a.on {
    background: var(--a3-surface);
    color: var(--a3-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

html.a3 .a3-panes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

html.a3 .a3-panes a {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid var(--a3-rule);
    font-size: 12px;
    line-height: 1.3;
    color: var(--a3-text-mute);
    text-decoration: none;
}

html.a3 .a3-panes a.on {
    border-color: var(--a3-accent);
    color: var(--a3-accent-ink);
    background: var(--a3-accent-soft);
}

html.a3 .a3-panes small {
    font-size: 11px;
    color: var(--a3-text-faint);
}

html.a3 .a3-pv {
    display: grid;
    gap: 2px;
    width: 56px;
    height: 36px;
    padding: 3px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
}

html.a3 .a3-pv b {
    background: currentColor;
    opacity: .35;
    border-radius: 2px;
}

html.a3 .a3-pv-right {
    grid-template-columns: 1fr 1.4fr;
}

html.a3 .a3-pv-none {
    grid-template-rows: repeat(4, 1fr);
}

html.a3 .a3-pop ul.menu {
    margin: 0 -6px;
    padding: 6px 0;
    border-top: 1px solid var(--a3-rule);
}

html.a3 .a3-pop ul.menu li {
    border: 0;
}

html.a3 .a3-pop .a3-mi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    border-radius: 8px;
    line-height: 38px;
    color: var(--a3-text);
}

/* o elastic pinta o texto de branco no hover de .popupmenu .listing */
html.a3 .a3-pop .a3-mi:not(.disabled):hover,
html.a3 .a3-pop .a3-mi:not(.disabled):focus {
    background: var(--a3-hover);
    color: var(--a3-text);
    text-decoration: none;
}

html.a3 .a3-pop .a3-mi:before {
    display: none;
}

html.a3 .a3-ask-ai em,
html.a3 .a3-pop .a3-mi small {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    margin-left: auto;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--a3-surface-2);
    color: var(--a3-text-mute);
    border: 1px solid var(--a3-rule);
}

html.a3 .a3-ask-ai em {
    margin-left: 6px;
}

html.a3 .a3-pop .a3-sep {
    height: 1px;
    margin: 6px 0;
    background: var(--a3-rule);
}

html.a3 .a3-pop-link {
    display: block;
    padding: 8px 4px 0;
    border-top: 1px solid var(--a3-rule);
    color: var(--a3-accent-ink);
    font-weight: 600;
    font-size: 13px;
}

html.a3 .a3-acct {
    width: 320px;
    max-width: 100%;
    padding: 10px;
}

html.a3 .a3-acct-card {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 2px;
    padding: 12px 8px 14px;
}

html.a3 .a3-avatar-big {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--a3-accent);
    color: var(--a3-on-accent);
    font-weight: 700;
    font-size: 20px;
}

html.a3 .a3-acct-card small {
    color: var(--a3-text-mute);
    font-size: 13px;
}

/* Atalhos de teclado */
.a3-keys-sub {
    margin: 0 0 12px;
    color: #5c6475;
}

.a3-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 24px;
}

.a3-keys-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid #e2e5ec;
}

.a3-keys-grid kbd {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    min-width: 24px;
    display: inline-block;
    text-align: center;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid #d5d9e1;
    border-bottom-width: 2px;
    background: #f6f7fa;
    color: #161b26;
    box-shadow: none;
}

html.dark-mode .a3-keys-sub {
    color: #a3adbf;
}

html.dark-mode .a3-keys-grid > div {
    border-color: #2a354c;
}

html.dark-mode .a3-keys-grid kbd {
    background: #1d273a;
    border-color: #2a354c;
    color: #e7ebf3;
}

/* =====================================================================
 * Lista de mensagens: linha única e densidade
 * ===================================================================== */

html.a3 .messagelist tr.message td {
    background-color: var(--a3-surface);
}

html.a3 .messagelist tr.message:hover td {
    background-color: var(--a3-hover);
}

html.a3 .messagelist tr.message.selected td {
    background-color: var(--a3-sel);
    color: inherit;
}

html.a3 .messagelist tr.message td.subject span.subject a,
html.a3 .messagelist tr.message td.subject span.fromto {
    color: var(--a3-text-mute);
}

html.a3 .messagelist tr.unread td.subject span.subject a,
html.a3 .messagelist tr.unread td.subject span.fromto {
    color: var(--a3-text);
    font-weight: 700;
}

html.a3 .messagelist tr.unread td.subject span.date {
    color: var(--a3-accent-ink);
    font-weight: 600;
}

@media (min-width: 769px) {
    /* 3 colunas: duas linhas (remetente e data; assunto) */
    html.a3 .messagelist tr.message.selected td.subject {
        box-shadow: inset 3px 0 0 var(--a3-accent);
    }

    html.a3 .messagelist td.subject span.fromto {
        padding-left: .25em;
        font-size: 14px;
    }

    html.a3 .messagelist td.subject span.msgicon.status:not(.replied):not(.forwarded):before {
        visibility: hidden;
    }

    html.a3.a3-dens-std .messagelist tr.message td {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    html.a3.a3-dens-super .messagelist,
    html.a3.a3-dens-super .messagelist td.subject span.fromto,
    html.a3.a3-dens-super .messagelist td.subject span.subject {
        font-size: 13px;
    }

    html.a3.a3-dens-super .messagelist td.subject span {
        line-height: 1.6em;
    }

    /* 3 colunas: remetente e assunto alinhados à esquerda, assunto menor, linhas mais juntas (art3mail_skin_mdr_v22) */
    html.a3:not(.a3-pane-none) .messagelist td.subject {
        align-items: baseline;
    }

    html.a3:not(.a3-pane-none) .messagelist td.subject span.fromto,
    html.a3:not(.a3-pane-none) .messagelist td.subject span.subject {
        padding-left: 4px;
    }

    html.a3:not(.a3-pane-none) .messagelist td.subject span.subject span.msgicon.status:not(.replied):not(.forwarded) {
        display: none;
    }

    html.a3:not(.a3-pane-none) .messagelist td.subject span.subject span.msgicon:before,
    html.a3:not(.a3-pane-none) .messagelist td.subject span.subject span.msgicon:after {
        width: auto;
        height: auto;
        font-size: 11px !important;
        color: var(--a3-text-faint);
    }

    html.a3:not(.a3-pane-none) .messagelist td.subject span.subject span.msgicon {
        margin-right: 5px;
    }

    /* 3 colunas: assunto menor que o remetente (14 px), para separar as duas linhas (art3mail_skin_mdr_v27) */
    html.a3:not(.a3-pane-none) .messagelist td.subject span.subject {
        font-size: 12px;
    }

    /* 3 colunas: só o assunto da não lida em negrito; o remetente fica igual ao da lida (art3mail_skin_mdr_v25) */
    html.a3:not(.a3-pane-none) .messagelist tr.message td.subject span.fromto {
        color: var(--a3-text);
        font-weight: 500;
    }

    html.a3:not(.a3-pane-none) .messagelist tr.unread td.subject span.subject a {
        font-weight: 700;
    }

    html.a3:not(.a3-pane-none) .messagelist td.subject > span:is(.fromto, .date, .size, .subject),
    html.a3:not(.a3-pane-none) .messagelist td.flags > span {
        height: 22px;
        line-height: 22px;
    }

    html.a3.a3-dens-std:not(.a3-pane-none) .messagelist tr.message td {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    html.a3.a3-dens-super:not(.a3-pane-none) .messagelist td.subject > span:is(.fromto, .date, .size, .subject),
    html.a3.a3-dens-super:not(.a3-pane-none) .messagelist td.flags > span {
        height: 20px;
        line-height: 20px;
    }

    /* Super compacta em 3 colunas: listagem com 12 px (art3mail_skin_mdr_v24) */
    html.a3.a3-dens-super:not(.a3-pane-none) .messagelist td.subject span.fromto,
    html.a3.a3-dens-super:not(.a3-pane-none) .messagelist td.subject span.subject {
        font-size: 12px;
    }

    html.a3.a3-dens-super:not(.a3-pane-none) .messagelist td.subject span.date {
        font-size: 11px;
    }

    /* Sem painel: uma linha larga por mensagem (seleção, estrela | remetente | assunto | data) */
    html.a3.a3-pane-none .messagelist tbody tr.message {
        display: flex;
        align-items: stretch;
        position: relative;
    }

    html.a3.a3-pane-none .messagelist tbody tr.message td {
        display: flex;
        align-items: center;
        height: 48px;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 1px solid var(--a3-rule);
        line-height: normal;
    }

    html.a3.a3-pane-none .messagelist tbody tr.message td.selection {
        order: 0;
        flex: none;
        width: 40px;
        padding: 0 0 0 12px;
    }

    html.a3.a3-pane-none .messagelist tbody tr.message td.flags {
        order: 1;
        flex: none;
        width: 34px;
        padding: 0 2px;
        gap: 0;
    }

    html.a3.a3-pane-none .messagelist tbody tr.message td.flags > span {
        height: auto;
        line-height: normal;
    }

    /* o clipe sai do lado da estrela e vai para depois do assunto, antes da data, como no mockup da seleção múltipla:
       o art3_ui põe uma cópia (span.a3-clip) na td.subject (art3mail_skin_mdr_v70, art3_ui_mdr_v26) */
    html.a3.a3-pane-none .messagelist tbody tr.message td.flags span.attachment {
        display: none;
    }

    html.a3.a3-pane-none .messagelist td.subject span.a3-clip {
        display: inline-block;
        order: 3;
        flex: none;
        width: 18px;
        text-align: center;
    }

    html.a3.a3-pane-none .messagelist tbody tr.message td.threads {
        order: 2;
        flex: none;
    }

    html.a3.a3-pane-none .messagelist tbody tr.message td.subject {
        order: 3;
        flex: 1;
        min-width: 0;
        flex-wrap: nowrap;
        padding: 0 16px 0 4px;
        gap: 12px;
    }

    html.a3.a3-pane-none .messagelist td.subject span {
        line-height: normal;
    }

    html.a3.a3-pane-none .messagelist td.subject span.msgicon {
        display: none;
    }

    html.a3 .messagelist td.subject span.subject span.msgicon {
        margin-right: 6px;
    }

    html.a3.a3-pane-none .messagelist td.subject span.msgicon.replied,
    html.a3.a3-pane-none .messagelist td.subject span.msgicon.forwarded {
        display: inline-block;
        order: 2;
        flex: none;
        color: var(--a3-text-faint);
    }

    html.a3.a3-pane-none .messagelist td.subject span.msgicon:before,
    html.a3.a3-pane-none .messagelist td.subject span.msgicon:after {
        height: auto;
        line-height: normal;
        font-size: 12px !important;
        width: auto;
        margin: 0;
    }

    html.a3.a3-pane-none .messagelist td.subject span.fromto {
        order: 1;
        flex: 0 0 210px;
        padding: 0;
        font-size: 14px;
    }

    html.a3.a3-pane-none .messagelist td.subject span.subject {
        order: 3;
        flex: 1;
        width: auto;
        min-width: 0;
        font-size: 14px;
    }

    html.a3.a3-pane-none .messagelist td.subject span.date,
    html.a3.a3-pane-none .messagelist td.subject span.size {
        order: 4;
        flex: none;
        font-size: 12.5px;
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    html.a3.a3-pane-none .messagelist td.subject .a3-row-acts {
        right: 10px;
    }

    html.a3.a3-pane-none .messagelist tr.message.selected td.subject {
        box-shadow: none;
    }

    html.a3.a3-pane-none .messagelist tr.message:not(.unread):not(.selected) td {
        background-color: var(--a3-surface-2);
    }

    html.a3.a3-pane-none .messagelist tr.message:not(.selected):hover td {
        background-color: var(--a3-hover);
    }

    html.a3.a3-pane-none .messagelist tr.message:hover {
        box-shadow: 0 1px 3px rgba(16, 24, 40, .14);
        z-index: 1;
    }

    /* Densidade: Padrão 48 px, Compacta 38 px, Super compacta 30 px */
    html.a3.a3-pane-none.a3-dens-compact .messagelist tbody tr.message td {
        height: 38px;
    }

    html.a3.a3-pane-none.a3-dens-super .messagelist tbody tr.message td {
        height: 30px;
    }

    html.a3.a3-pane-none.a3-dens-super .messagelist td.subject span.fromto {
        flex-basis: 180px;
    }

    html.a3.a3-pane-none.a3-dens-compact .a3-row-acts a {
        width: 28px;
        height: 28px;
    }

    html.a3.a3-pane-none.a3-dens-super .a3-row-acts a {
        width: 26px;
        height: 24px;
    }
}

/* ---------- Densidade Padrão em 3 colunas e no celular: marcadores numa linha abaixo do assunto ----------
   Compacta e Super compacta continuam com os marcadores na frente do assunto, e o modo tela inteira
   também. O art3_labels põe as fichas dentro do span.subject; aqui elas só mudam de lugar (art3mail_skin_mdr_v45). */

@media (min-width: 769px) {
    html.a3.a3-dens-std:not(.a3-pane-none) .messagelist td.subject > span.subject:has(> .a3l-chips) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
    }

    /* base quase da linha toda: nunca divide a linha com a quebra (::after), mas cabe ao lado do ícone de respondida */
    html.a3.a3-dens-std:not(.a3-pane-none) .messagelist td.subject > span.subject:has(> .a3l-chips) > a {
        flex: 1 1 calc(100% - 30px);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* quebra forçada: sem ela, assunto (base 0) + fichas (100%) "cabem" numa linha e o assunto fica com 0 px */
    html.a3.a3-dens-std:not(.a3-pane-none) .messagelist td.subject > span.subject:has(> .a3l-chips)::after {
        content: '';
        order: 1;
        flex: 0 0 100%;
        height: 0;
    }

    html.a3.a3-dens-std:not(.a3-pane-none) .messagelist td.subject > span.subject > .a3l-chips {
        order: 2;
        flex: 0 0 100%;
        display: flex;
        margin: 3px 0 1px;
        line-height: 18px;
    }
}

@media (max-width: 768px) {
    html.a3.a3-dens-std .messagelist td.subject > span.subject:has(> .a3l-chips) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    /* base quase da linha toda: nunca divide a linha com a quebra (::after), mas cabe ao lado do ícone de respondida */
    html.a3.a3-dens-std .messagelist td.subject > span.subject:has(> .a3l-chips) > a {
        flex: 1 1 calc(100% - 30px);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* quebra forçada: sem ela, assunto (base 0) + fichas (100%) "cabem" numa linha e o assunto fica com 0 px */
    html.a3.a3-dens-std .messagelist td.subject > span.subject:has(> .a3l-chips)::after {
        content: '';
        order: 1;
        flex: 0 0 100%;
        height: 0;
    }

    html.a3.a3-dens-std .messagelist td.subject > span.subject > .a3l-chips {
        order: 2;
        flex: 0 0 100%;
        display: flex;
        margin: 3px 0 1px;
        line-height: 18px;
    }
}

/* =====================================================================
 * Leitura (dentro do quadro e na página da mensagem)
 * ===================================================================== */

html.a3 #message-header.a3-msghead > .subject {
    font-family: var(--a3-display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 4px 0 16px;
}

/* a bandeira vermelha da Elastic vira a estrela do cabeçalho */
html.a3 body.status-flagged #message-header.a3-msghead > .subject:before {
    display: none;
}

html.a3 #message-header.a3-msghead > .header {
    align-items: flex-start;
}

html.a3 #message-header.a3-msghead img.contactphoto {
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

html.a3 #message-header.a3-msghead .header-content {
    min-height: 40px;
}

html.a3 .a3-msg-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

html.a3 .a3-sender {
    flex: 1;
    min-width: 0;
}

html.a3 .a3-sender.a3-built > .header-summary {
    display: none;
}

html.a3 .a3-sender .a3-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.a3 .a3-sender .a3-name a {
    color: var(--a3-text);
    text-decoration: none;
}

html.a3 .a3-sender .a3-name a:hover {
    text-decoration: underline;
}

html.a3 .a3-addr-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--a3-text-mute);
}

html.a3 .a3-addr-line .a3-addr {
    overflow-wrap: anywhere;
}

html.a3 .a3-addr-line .a3-when {
    color: var(--a3-text-faint);
    white-space: nowrap;
}

html.a3 .a3-det {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: var(--a3-text-faint);
}

html.a3 .a3-det:hover {
    background: var(--a3-hover);
    color: var(--a3-text);
}

html.a3 .details-view .a3-det .a3i {
    transform: rotate(180deg);
}

html.a3 #message-header.a3-msghead .header-headers {
    font-size: 12.5px;
    color: var(--a3-text-mute);
}

html.a3 #message-header.a3-msghead .details-view .header-headers {
    display: table;
    margin-top: 8px;
}

html.a3 #message-header.a3-msghead .header-links {
    margin-top: 4px;
}

html.a3 #message-header.a3-msghead .header-links a.headers-summary,
html.a3 #message-header.a3-msghead .header-links a.headers-details {
    display: none; /* a seta ao lado da data faz isso */
}

html.a3 #message-header.a3-msghead .header-links a {
    font-size: 12px;
    color: var(--a3-text-faint);
}

html.a3 .a3-msg-acts {
    display: flex;
    align-items: center;
    flex: none;
    color: var(--a3-text-mute);
}

html.a3 .a3-msg-acts .a3-ib {
    width: 34px;
    height: 34px;
}

html.a3 .a3-msg-acts .a3-ib:hover {
    color: var(--a3-text);
}

html.a3 .a3-msg-acts .a3-star.on {
    color: var(--a3-accent);
}

html.a3 .a3-msg-acts .a3-star.on .a3i {
    fill: currentColor;
}

html.a3 .a3-msg-acts .a3-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--a3-rule);
}

/* Rodapé fixo Responder / Responder a todos / Encaminhar, centralizado: ao alcance de destros e canhotos (art3mail_skin_mdr_v68) */
html.a3 #layout-content > .a3-reply-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    flex: none;
    padding: 12px 20px;
    border-top: 1px solid var(--a3-rule);
    background: var(--a3-surface);
}

/* mensagem só entre o remetente e a pessoa: Responder a todos daria no mesmo que Responder */
html.a3.a3-one-rcpt #layout-content > .a3-reply-bar .a3-rb-all {
    display: none;
}

html.a3 .a3-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--a3-rule);
    background: var(--a3-surface);
    color: var(--a3-text);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
}

html.a3 .a3-btn:hover {
    background: var(--a3-hover);
    color: var(--a3-text);
    text-decoration: none;
}

html.a3.iframe body.task-mail #layout-content > .content {
    padding: 20px 28px 24px;
}

html.a3.iframe body.task-mail {
    background: var(--a3-surface);
}

@media (max-width: 768px) {
    /* no celular as respostas ficam só na barra de baixo (art3mail_skin_mdr_v52) */
    html.a3 .a3-msg-acts .a3-ib:not(.a3-star),
    html.a3 .a3-msg-acts .a3-sep {
        display: none;
    }

    /* mesmos botões brancos com texto do computador, só mais altos e sem quebrar linha (art3mail_skin_mdr_v66) */
    html.a3 #layout-content > .a3-reply-bar {
        flex-wrap: nowrap;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    html.a3 #layout-content > .a3-reply-bar .a3-btn {
        height: 42px;
        min-width: 0;
        padding: 0 14px;
    }

    html.a3 #layout-content > .a3-reply-bar .a3-btn .a3-t {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* celular estreito com os três botões: sai o ícone para caber o texto inteiro */
@media (max-width: 420px) {
    html.a3:not(.a3-one-rcpt) #layout-content > .a3-reply-bar .a3-btn {
        padding: 0 12px;
    }

    html.a3:not(.a3-one-rcpt) #layout-content > .a3-reply-bar .a3-btn .a3i {
        display: none;
    }
}

@media (max-width: 768px) {
    html.a3.iframe body.task-mail #layout-content > .content {
        padding: 14px 12px 20px;
    }
}

/* Botão principal da Elastic no laranja Art3 (Pesquisar, Salvar, Enviar, diálogos) */
html.a3 .btn-primary,
html.a3 .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--a3-accent-btn);
    border-color: var(--a3-accent-btn);
    color: var(--a3-on-accent);
}

html.a3 .btn-primary:hover,
html.a3 .btn-primary:focus {
    background-color: var(--a3-accent);
    border-color: var(--a3-accent);
    color: var(--a3-on-accent);
    box-shadow: 0 0 0 .2rem rgba(247, 148, 29, .3);
}

/* Configurações: "Voltar para o e-mail" no topo do menu lateral (art3mail_skin_mdr_v10) */
html.a3 .a3-back-mail li.a3-mail > a:before {
    content: "\f0e0"; /* envelope */
    font-weight: 900;
}

html.a3 .a3-back-mail {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--a3-chrome-line);
}

html.a3 .a3-back-mail li.a3-mail > a {
    font-weight: 600;
}

@media (max-width: 768px) {
    /* no celular o menu da Elastic (☰) já tem "E-mail" */
    html.a3 .a3-back-mail {
        display: none;
    }
}

/* ---------- Escrever: campos em linha, anexos em fichas e opções no "⋮" (art3mail_skin_mdr_v11) ---------- */

/* De / Para / Assunto: uma linha cada, sem caixa, separadas por um traço (como no protótipo) */
html.a3 body.task-mail.action-compose .compose-headers > .form-group.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    min-height: 46px;
    border-bottom: 1px solid var(--a3-rule);
}

html.a3 body.task-mail.action-compose .compose-headers > .form-group.row > .col-form-label {
    flex: 0 0 76px;
    max-width: 76px;
    padding: 0 0 0 4px;
    color: var(--a3-text-mute);
    font-size: 13px;
}

html.a3 body.task-mail.action-compose .compose-headers > .form-group.row > .col-10 {
    flex: 1 1 auto;
    max-width: none;
    padding: 0;
}

html.a3 body.task-mail.action-compose .compose-headers .form-control,
html.a3 body.task-mail.action-compose .compose-headers .recipient-input,
html.a3 body.task-mail.action-compose .compose-headers .input-group-text {
    border: 0;
    background: transparent;
    box-shadow: none;
}

html.a3 body.task-mail.action-compose .compose-headers .input-group-text {
    color: var(--a3-text-mute);
}

html.a3 body.task-mail.action-compose .compose-headers .input-group-text:hover {
    color: var(--a3-text);
}

html.a3 body.task-mail.action-compose #compose-subject {
    font-size: 15px;
}

/* editor: sem a moldura cinza, só um traço embaixo da barra de formatação */
html.a3 body.task-mail.action-compose #composebodycontainer {
    margin-top: 6px;
}

html.a3 body.task-mail.action-compose #composebodycontainer .tox-tinymce,
html.a3 body.task-mail.action-compose #composebodycontainer > textarea {
    border: 0;
    border-radius: 0;
}

html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-toolbar,
html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-toolbar__primary,
html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-editor-header {
    background: transparent;
    border-bottom: 1px solid var(--a3-rule);
    box-shadow: none;
}

/* anexos: fichas logo abaixo do texto */
html.a3 .a3-attachments .attachmentslist,
html.a3 .a3-attachments .attachmentslist:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 0;
    margin: 0;
    border: 0;
    background: none;
}

html.a3 .a3-attachments .attachmentslist li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    max-width: 320px;
    padding: 0 6px 0 12px;
    border: 1px solid var(--a3-rule);
    border-radius: 10px;
    background: var(--a3-surface-2);
    color: var(--a3-text);
    font-size: 13px;
    line-height: 36px;
}

html.a3 .a3-attachments .attachmentslist li:before {
    color: var(--a3-accent);
    height: auto;
    line-height: 1;
}

html.a3 .a3-attachments .attachmentslist li a {
    height: auto;
    line-height: 1.2;
    color: inherit;
}

html.a3 .a3-attachments .attachmentslist li a.filename {
    display: inline-flex;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

html.a3 .a3-attachments .attachmentslist li .attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

html.a3 .a3-attachments .attachmentslist li .attachment-size {
    color: var(--a3-text-mute);
}

html.a3 .a3-attachments .attachmentslist li a.delete,
html.a3 .a3-attachments .attachmentslist li a.cancelupload {
    order: 2;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--a3-text-mute);
}

html.a3 .a3-attachments .attachmentslist li a.delete:hover,
html.a3 .a3-attachments .attachmentslist li a.cancelupload:hover {
    background: var(--a3-hover);
    color: var(--a3-text);
}

html.a3 .a3-attachments .attachmentslist li a.delete:before,
html.a3 .a3-attachments .attachmentslist li a.cancelupload:before {
    content: "\f00d"; /* × no lugar da lixeira */
    font-weight: 900;
    height: auto;
    line-height: 1;
}

/* arrastar arquivo: a tela inteira de escrever recebe, com um contorno laranja enquanto o arquivo passa */
html.a3 body.task-mail.action-compose #compose-content.droptarget.hover,
html.a3 body.task-mail.action-compose #compose-content.droptarget.active {
    outline: 2px dashed var(--a3-accent);
    outline-offset: -6px;
    background-image: none;
}

/* rodapé: Enviar · clipe · (futuros) · espaço · ⋮ · nova janela */
html.a3 body.task-mail.action-compose #layout-content .formbuttons {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--a3-text-mute);
}

html.a3 body.task-mail.action-compose #layout-content .formbuttons .btn.send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

html.a3 body.task-mail.action-compose .formbuttons .a3-spacer {
    flex: 1;
}

html.a3 body.task-mail.action-compose .formbuttons .float-right {
    margin-left: 0;
}

/* menu de opções (confirmação de leitura, prioridade, salvar em…) */
html.a3 .a3-compose-options {
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px 4px;
}

html.a3 .a3-compose-options .a3-pop-title {
    margin: 0 0 6px;
    font-family: var(--a3-display);
    font-size: 15px;
    font-weight: 600;
}

html.a3 .a3-compose-options .a3-upload-hint .hint {
    margin: 0 0 10px;
    color: var(--a3-text-mute);
    font-size: 12.5px;
}

html.a3 .a3-compose-options #compose-options .form-group.row {
    align-items: center;
    margin: 0 0 8px;
}

.popover:has(.a3-compose-options) {
    max-width: 360px;
}

html.a3 .popover .a3-compose-options {
    box-sizing: border-box;
    width: 340px;
}

/* ---------- Escrever no celular (art3mail_skin_mdr_v14) ---------- */

/* peças que só existem no celular */
html.a3 .a3-cm-top,
html.a3 .a3-cm-back,
html.a3 .a3-cm-cc-wrap {
    display: none !important;
}

/* no computador o nome "Assunto" já está ao lado do campo */
html.a3 body.task-mail.action-compose #compose-subject::placeholder {
    color: transparent;
}

@media (max-width: 768px) {
    /* topo: ← · clipe · Art3 Drive · Enviar · ⋮ (o ⋮ é o menu que a Elastic monta com a barra) */
    html.a3 body.task-mail.action-compose #layout-content > .header .task-menu-button,
    html.a3 body.task-mail.action-compose #layout-content > .header .header-title,
    html.a3 body.task-mail.action-compose #composestatusbar {
        display: none !important;
    }

    html.a3 body.task-mail.action-compose #layout-content > .header .a3-cm-back {
        display: inline-block !important;
    }

    html.a3 body.task-mail.action-compose #layout-content > .header .a3-cm-back:before {
        content: "\f060"; /* seta para a esquerda */
    }

    html.a3 body.task-mail.action-compose .a3-cm-top {
        display: inline-flex !important;
        align-items: center;
        gap: 2px;
        margin-left: auto;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail.action-compose .a3-cm-top .a3-ib {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    html.a3 body.task-mail.action-compose .a3-cm-top .a3-soon {
        position: relative;
        opacity: 1;
    }

    /* ponto laranja de "em breve" no Art3 Drive */
    html.a3 body.task-mail.action-compose .a3-cm-top .a3-soon:after {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--a3-accent);
        box-shadow: 0 0 0 2px var(--a3-surface);
    }

    /* Enviar laranja, o mesmo botão do computador */
    html.a3 body.task-mail.action-compose .a3-cm-top .btn.send {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 36px;
        margin: 0 2px 0 6px;
        padding: 0 16px 0 14px;
        border: 0;
        border-radius: 999px;
        background: var(--a3-accent-btn);
        color: var(--a3-on-accent);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
    }

    html.a3 body.task-mail.action-compose .a3-cm-top .btn.send:before {
        content: "\f1d8"; /* avião de papel */
        font-family: 'Icons';
        font-weight: 900;
        float: none;
        width: auto;
        height: auto;
        margin: 0;
        font-size: 15px;
        line-height: 1;
    }

    html.a3 body.task-mail.action-compose .a3-cm-top .btn.send:hover {
        background: var(--a3-accent);
    }

    /* a barra de baixo da Elastic (Salvar / Enviar) e o rodapé da skin saem: tudo está no topo e no ⋮ */
    html.a3 body.task-mail.action-compose #layout-content > .footer,
    html.a3 body.task-mail.action-compose #layout-content .formbuttons {
        display: none !important;
    }

    /* ⋮: Anexar já está no topo; ícones dos itens novos */
    html.a3 #toolbar-menu li:has(> a.attach) {
        display: none;
    }

    html.a3 #toolbar-menu a.a3-replyto:before {
        content: "\f3e5"; /* responder */
    }

    html.a3 #toolbar-menu a.a3-sched:before {
        content: "\f017"; /* relógio */
    }

    /* campos: rótulos curtos, sem os ícones de contatos, de cabeçalhos e do lápis */
    html.a3 body.task-mail.action-compose .compose-headers > .form-group.row {
        min-height: 50px;
        padding: 0 4px 0 12px;
    }

    html.a3 body.task-mail.action-compose .compose-headers > .form-group.row > .col-form-label {
        flex: 0 0 48px;
        max-width: 48px;
        padding: 0;
        font-size: 14px;
    }

    /* Cc e Cco na forma curta; "Responder para" fica com a largura que precisar */
    html.a3 body.task-mail.action-compose .compose-headers > .form-group.row > .col-form-label[data-a3-short] {
        font-size: 0;
    }

    html.a3 body.task-mail.action-compose .compose-headers > .form-group.row > .col-form-label[data-a3-short]:before {
        content: attr(data-a3-short);
        font-size: 14px;
    }

    html.a3 body.task-mail.action-compose #compose_replyto > .col-form-label,
    html.a3 body.task-mail.action-compose #compose_followupto > .col-form-label {
        flex: 0 0 auto;
        max-width: 45%;
        padding-right: 10px;
    }

    html.a3 body.task-mail.action-compose #compose_from .input-group-append,
    html.a3 body.task-mail.action-compose .compose-headers .icon.add,
    html.a3 body.task-mail.action-compose #compose_cc .icon.delete,
    html.a3 body.task-mail.action-compose #compose_bcc .icon.delete {
        display: none;
    }

    html.a3 body.task-mail.action-compose #compose_from select {
        padding-left: 0;
        background-color: transparent;
        font-size: 14px;
    }

    html.a3 body.task-mail.action-compose #compose_subject > .col-form-label {
        display: none;
    }

    html.a3 body.task-mail.action-compose #compose-subject {
        padding-left: 0;
    }

    html.a3 body.task-mail.action-compose #compose-subject::placeholder {
        color: var(--a3-text-faint);
    }

    /* a seta ao lado de "Para" que mostra Cc e Cco */
    html.a3 body.task-mail.action-compose .a3-cm-cc-wrap {
        display: flex !important;
    }

    html.a3 body.task-mail.action-compose .compose-headers .a3-cm-cc:before {
        content: "\f078"; /* seta para baixo */
        transition: transform .15s;
    }

    html.a3 body.task-mail.action-compose .compose-headers .a3-cm-cc[aria-expanded="true"]:before {
        transform: rotate(180deg);
    }

    /* destinatários em fichas redondas, várias na mesma linha */
    html.a3 body.task-mail.action-compose .recipient-input {
        padding-left: 0;
    }

    html.a3 body.task-mail.action-compose .recipient-input li.recipient {
        width: auto;
        max-width: 100%;
        align-items: center;
        padding: 0 6px 0 10px;
        border-color: var(--a3-rule);
        border-radius: 999px;
        background: var(--a3-surface-2);
    }

    html.a3 body.task-mail.action-compose .recipient-input li.recipient a.button.icon:before {
        line-height: 1;
    }

    /* sugestões de contatos ao digitar: largura toda, iniciais, nome e e-mail */
    html.a3 body.task-mail.action-compose #rcmKSearchpane {
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        border: 0;
        border-bottom: 1px solid var(--a3-rule);
        border-radius: 0;
        background: var(--a3-surface);
        box-shadow: 0 12px 24px -10px rgba(16, 24, 40, .3);
    }

    html.a3 body.task-mail.action-compose #rcmKSearchpane > ul > li {
        gap: 12px;
        padding: 8px 16px;
    }

    html.a3 body.task-mail.action-compose #rcmKSearchpane > ul > li.selected {
        background: var(--a3-hover);
        color: var(--a3-text);
    }

    html.a3 body.task-mail.action-compose #rcmKSearchpane > ul > li > i.icon[data-a3-ini] {
        flex: none;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--a3-accent-soft);
        color: var(--a3-accent-ink);
        font-style: normal;
    }

    html.a3 body.task-mail.action-compose #rcmKSearchpane > ul > li > i.icon[data-a3-ini]:before {
        content: attr(data-a3-ini);
        float: none;
        width: auto;
        height: auto;
        margin: 0;
        font-family: var(--a3-display);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }

    html.a3 body.task-mail.action-compose #rcmKSearchpane span.field.name {
        font-size: 14px;
        font-weight: 500;
    }

    html.a3 body.task-mail.action-compose #rcmKSearchpane span.field.email {
        font-size: 12.5px;
        color: var(--a3-text-mute);
    }

    /* editor sem as ferramentas: o texto continua em HTML e a assinatura em HTML continua indo */
    html.a3 body.task-mail.action-compose #composebodycontainer .tox-editor-header,
    html.a3 body.task-mail.action-compose #composebodycontainer .tox-statusbar {
        display: none !important;
    }
}

/* ---------- Escrever: uma barra só embaixo, formatação sempre à vista (art3mail_skin_mdr_v36, v37) ---------- */

/* peças só do computador */
html.a3 .a3-cw-head,
html.a3 .a3-cw-cc {
    display: none !important;
}

/* conta com um endereço só: sem a linha "De" (o campo continua indo no formulário) */
html.a3 body.task-mail.action-compose #compose_from.a3-from-one {
    display: none !important;
}

/* sem o botão de trocar para HTML no modo texto: quem escolheu texto simples nas Preferências fica nele (art3mail_skin_mdr_v37) */
html.a3 body.task-mail.action-compose #composebodycontainer .editor-toolbar {
    display: none !important;
}

/* ⋮ do rodapé: ações que saíram da barra do topo, antes das opções da mensagem */
html.a3 .a3-compose-options .a3-cw-menu {
    margin: -4px -14px 8px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--a3-rule);
    list-style: none;
}

html.a3 .a3-cw-menu a,
html.a3 #a3-send-menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--a3-text);
    font-size: 13.5px;
    text-decoration: none;
}

html.a3 .a3-cw-menu a:before,
html.a3 #a3-send-menu a:before {
    display: none !important;
}

html.a3 .a3-cw-menu a:hover {
    background: var(--a3-hover);
}

html.a3 .a3-cw-menu a .a3i,
html.a3 #a3-send-menu a .a3i {
    color: var(--a3-text-mute);
}

html.a3 .a3-cw-menu kbd {
    margin-left: auto;
    padding: 0 5px;
    border: 1px solid var(--a3-rule);
    border-radius: 4px;
    background: none;
    box-shadow: none;
    color: var(--a3-text-mute);
    font-size: 11px;
}

@media (min-width: 769px) {
    /* sem a barra do topo: salvar, anexo, assinatura e respostas estão no rodapé e no ⋮.
       A Elastic troca a #messagetoolbar pela #toolbar-menu (lista no topo; no celular vira o ⋮) (v38) */
    html.a3 body.task-mail.action-compose #messagetoolbar,
    html.a3 body.task-mail.action-compose #layout-content > .header > #toolbar-menu,
    html.a3 body.task-mail.action-compose #layout-content > .header > .toolbar-menu-button {
        display: none !important;
    }

    /* título à esquerda ("Nova mensagem", "Responder"…; a Elastic esconde no computador) (v39) */
    html.a3 body.task-mail.action-compose #layout-content > .header > .header-title {
        display: block !important;
    }

    /* título: nova janela e fechar no canto direito */
    html.a3 body.task-mail.action-compose .a3-cw-head {
        display: inline-flex !important;
        align-items: center;
        gap: 2px;
        margin-left: auto;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail.action-compose .a3-cw-head .a3-ib {
        border-radius: 50%;
    }

    html.a3 body.task-mail.action-compose .a3-cw-head .a3-ib:hover {
        color: var(--a3-text);
    }

    /* Para: contatos fica; o "+" de cabeçalhos dá lugar a "Cc" e "Cco" em texto; o lápis do "De" vai para o ⋮ */
    html.a3 body.task-mail.action-compose #compose_to .input-group-append:has(> a[data-popup="headers-menu"]),
    html.a3 body.task-mail.action-compose #compose_from .input-group-append {
        display: none;
    }

    html.a3 body.task-mail.action-compose .a3-cw-cc {
        display: flex !important;
        align-items: center;
        gap: 2px;
        padding: 0 4px;
    }

    html.a3 body.task-mail.action-compose .a3-cw-cc a {
        padding: 4px 7px;
        border-radius: 6px;
        color: var(--a3-text-mute);
        font-size: 13px;
        text-decoration: none;
    }

    html.a3 body.task-mail.action-compose .a3-cw-cc a:hover {
        background: var(--a3-hover);
        color: var(--a3-text);
    }

    /* barra de formatação embaixo do texto (toolbar_location do editor), presa ao pé da área visível */
    html.a3 body.task-mail.action-compose #composebodycontainer .tox-tinymce,
    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-editor-container {
        overflow: visible;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-editor-header {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: 8px 0 2px;
        padding: 2px 4px;
        border: 1px solid var(--a3-rule);
        border-radius: 10px;
        background: var(--a3-surface-2);
        box-shadow: none;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-toolbar-overlord {
        position: static !important;
        top: auto !important;
        width: auto !important;
        background: transparent;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-toolbar,
    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-toolbar__primary {
        border: 0;
        background: transparent;
    }

    /* ícones da faixa menores e mais discretos (art3mail_skin_mdr_v37) */
    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-tbtn {
        width: 28px;
        height: 28px;
        margin: 1px 0;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-tbtn:hover {
        color: var(--a3-text);
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-tbtn svg {
        width: 19px;
        height: 19px;
        fill: currentColor;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-tbtn--select,
    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-split-button .tox-tbtn {
        width: auto;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-tbtn__select-label {
        font-size: 13px;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-split-button {
        height: 28px;
        margin: 1px 0;
    }

    html.a3 body.task-mail.action-compose #composebodycontainer .tox .tox-toolbar__group {
        padding: 0 4px;
    }

    /* rodapé: Enviar ▾ · clipe · Drive · assinatura · respostas · Corrigir · … · salvo às · ⋮ · lixeira */
    html.a3 body.task-mail.action-compose #layout-content .formbuttons {
        flex-wrap: wrap;
        gap: 2px;
    }

    html.a3 body.task-mail.action-compose .formbuttons .a3-ib {
        border-radius: 50%;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail.action-compose .formbuttons .a3-ib:not(.disabled):hover {
        color: var(--a3-text);
    }

    html.a3 .a3-send-group {
        display: inline-flex;
        align-items: stretch;
        margin-right: 8px;
    }

    html.a3 body.task-mail.action-compose #layout-content .a3-send-group:has(.a3-send-more) .btn.send {
        margin-right: 0; /* a Elastic dá .5rem a todo botão do rodapé e separava a seta (v40) */
        padding-right: 18px;
        border-radius: 999px 0 0 999px;
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons .a3-send-more {
        opacity: 1 !important; /* a seta nunca parece desativada (v41) */
        display: inline-grid;
        place-items: center;
        height: 40px;
        padding: 0 12px 0 9px;
        border-left: 1px solid rgba(35, 20, 0, .18);
        border-radius: 0 999px 999px 0;
        background: var(--a3-accent-btn);
        color: var(--a3-on-accent);
        text-decoration: none;
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons .a3-send-more:hover {
        background: var(--a3-accent);
        color: var(--a3-on-accent);
    }

    html.a3 body.task-mail.action-compose .formbuttons .a3-fixpt-chip {
        margin-left: 6px;
    }

    html.a3 .a3-draft-status {
        margin-right: 6px;
        color: var(--a3-text-mute);
        font-size: 12px;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    /* celular: o ⋮ do topo já tem essas ações */
    html.a3 .a3-compose-options .a3-cw-menu {
        display: none;
    }

    /* celular: só "Corrigir português" fica à mão, logo acima do teclado */
    html.a3 body.task-mail.action-compose #layout-content .formbuttons:has(.a3-fixpt-chip) {
        display: flex !important;
        padding: 6px 12px;
        border-top: 1px solid var(--a3-rule);
    }

    html.a3 body.task-mail.action-compose #layout-content .formbuttons:has(.a3-fixpt-chip) > :not(.a3-fixpt-chip) {
        display: none !important;
    }

    html.a3 body.task-mail.action-compose .formbuttons .a3-fixpt-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 12px 0 10px;
        border: 1px solid var(--a3-rule);
        border-radius: 999px;
        background: var(--a3-surface-2);
        color: var(--a3-text);
        font-size: 13px;
        text-decoration: none;
    }

    html.a3 body.task-mail.action-compose .formbuttons .a3-fixpt-chip .a3i {
        color: var(--a3-accent);
    }
}

/* ---------- Recursos do Art3mail PRO: selo, cadeado e cartão (art3mail_skin_mdr_v41) ---------- */

html.a3 .a3-pro-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--a3-accent);
    color: var(--a3-on-accent);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
}

html.a3 .a3-pro-menu {
    min-width: 260px;
    padding: 4px 0;
}

html.a3 .a3-pro-menu .a3-pro-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    color: var(--a3-text-mute);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

html.a3 .a3-pro-menu .a3-pro-lock {
    margin-left: auto;
    color: var(--a3-accent) !important;
}

html.a3 .a3-pro-menu .a3-pro-foot {
    margin-top: 4px;
    padding: 8px 16px 6px;
    border-top: 1px solid var(--a3-rule);
    color: var(--a3-accent-ink);
    font-size: 12.5px;
    font-weight: 500;
}

html.a3 #a3-send-menu a:hover {
    background: var(--a3-hover);
}

html.a3 .a3-pro-card {
    max-width: 380px;
}

html.a3 .a3-pro-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}

html.a3 .a3-pro-card-head .a3i {
    width: 22px;
    height: 22px;
    color: var(--a3-accent);
}

html.a3 .a3-pro-card p {
    margin: 0 0 10px;
    color: var(--a3-text);
    line-height: 1.5;
}

html.a3 .a3-pro-card p.a3-pro-note {
    margin: 0;
    color: var(--a3-text-mute);
    font-size: 13px;
}

/* ---------- Várias contas (art3_accounts_mdr_v1) ---------- */

html.a3 .a3-acct-dot {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-family: var(--a3-display);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
}

html.a3 .a3-acct-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* Menu lateral (claro no celular; escuro no computador, abaixo) */
html.a3 .a3-acct-block:empty {
    display: none;
}

html.a3 .a3-acct-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px 0 8px;
    color: var(--a3-text);
    text-decoration: none;
    font-size: 14px;
}

html.a3 a.a3-acct-row:hover {
    background: var(--a3-hover);
    text-decoration: none;
}

html.a3 a.a3-acct-row:focus-visible {
    outline: 2px solid var(--a3-accent);
    outline-offset: -2px;
}

html.a3 .a3-acct-row .a3-acct-ico {
    color: var(--a3-text-mute);
}

html.a3 .a3-acct-current {
    font-weight: 600;
}

/* conta aberta recolhida: some tudo entre ela e as outras contas (pastas, Mais/Menos, marcadores) */
html.a3 #folderlist-content.a3-acct-folded > :not(.a3-acct-block):not(.a3-drawer-links) {
    display: none !important;
}

html.a3 .a3-acct-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.a3 #a3-acct-others {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--a3-rule);
}

html.a3 .a3-acct-count:not(:empty) {
    background: var(--a3-accent);
    color: var(--a3-on-accent);
    font-weight: 700;
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 999px;
}

html.a3 .a3-acct-count.a3-acct-hint:not(:empty) {
    background: none;
    color: var(--a3-text-mute);
    font-weight: 500;
    padding: 0;
}

html.a3 .a3-acct-add-btn.a3-acct-row {
    color: var(--a3-text-mute);
}

/* Bolinha de não lidas das outras contas (o avatar do topo fica limpo: regra no fim do arquivo) */
html.a3 .a3-acct-badge {
    position: relative;
}

html.a3 .a3-acct-badge:after {
    content: attr(data-a3-unread);
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--a3-danger);
    color: #fff;
    font: 700 11px/18px system-ui, sans-serif;
    text-align: center;
    pointer-events: none;
}

@media (min-width: 769px) {
    html.a3 :is(#layout-sidebar, #a3-nav) .a3-acct-row {
        min-height: 40px;
        margin-right: 8px;
        border-radius: 0 20px 20px 0;
        color: var(--a3-chrome-ink);
        font-size: 13.5px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav) a.a3-acct-row:hover {
        background: var(--a3-chrome-line);
        color: #fff;
    }

    html.a3 :is(#layout-sidebar, #a3-nav) .a3-acct-row .a3-acct-ico,
    html.a3 :is(#layout-sidebar, #a3-nav) .a3-acct-add-btn.a3-acct-row,
    html.a3 :is(#layout-sidebar, #a3-nav) .a3-acct-count.a3-acct-hint {
        color: var(--a3-chrome-mute);
    }

    html.a3 :is(#layout-sidebar, #a3-nav) .a3-acct-current {
        color: #fff;
    }

    html.a3 :is(#layout-sidebar, #a3-nav) #a3-acct-others {
        border-top-color: var(--a3-chrome-line);
    }

    /* conta ativa aberta: pastas um pouco para dentro, como no mockup */
    html.a3 :is(#layout-sidebar, #a3-nav) #a3-acct-head:not(:empty) + #mailboxlist {
        margin-left: 14px;
    }

    /* menu recolhido: só as bolinhas */
    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .a3-acct-row {
        justify-content: center;
        padding: 0;
        margin-right: 0;
        border-radius: 12px;
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) #a3-acct-head:not(:empty) + #mailboxlist {
        margin-left: 0;
    }

    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .a3-acct-row .a3-acct-name,
    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .a3-acct-row .a3-acct-count,
    html.a3.a3-nav-mini :is(#layout-sidebar, #a3-nav):not(.sidebar-right):not(:hover) .a3-acct-row:not(.a3-acct-add-btn) > .a3-acct-ico {
        display: none;
    }
}

/* Computador (v15 só até 1366 px; v28 em todas as larguras, já que o menu lateral não alarga): fontes do menu lateral um pouco menores */
@media (min-width: 769px) {
    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li {
        line-height: 30px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .listing li > a {
        height: 30px;
        font-size: 12px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav):not(.sidebar-right) .folderlist li.mailbox .unreadcount {
        font-size: 11px;
    }

    /* marcadores (art3_labels): mesmo tamanho e altura das pastas */
    html.a3 :is(#layout-sidebar, #a3-nav) .a3l-item .a3l-open {
        height: 30px;
        font-size: 12px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav) .a3l-count {
        font-size: 11px;
    }

    html.a3 :is(#layout-sidebar, #a3-nav) .a3-acct-row {
        font-size: 12px;
    }

    html.a3 .a3-compose {
        font-size: 13px;
    }
}

/* Menu da conta: lista de contas */
html.a3 .a3-acct-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 6px;
    padding: 6px;
    border-radius: 14px;
    background: var(--a3-surface-2);
}

html.a3 .a3-acct-list-title {
    padding: 6px 10px 4px;
    color: var(--a3-text-mute);
    font-size: 12px;
    font-weight: 600;
}

html.a3 .a3-acct-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--a3-text);
    text-decoration: none;
}

html.a3 .a3-acct-item:hover {
    background: var(--a3-hover);
    text-decoration: none;
}

html.a3 .a3-acct-item .a3-acct-dot {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 14px;
}

html.a3 .a3-acct-item.a3-acct-on {
    background: var(--a3-sel);
}

html.a3 .a3-acct-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

html.a3 .a3-acct-mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.a3 .a3-acct-on .a3-acct-mail {
    font-weight: 600;
}

html.a3 .a3-acct-sub {
    color: var(--a3-text-mute);
    font-size: 12px;
}

html.a3 .a3-acct-on .a3-acct-sub,
html.a3 .a3-acct-check {
    color: var(--a3-accent-ink);
}

html.a3 .a3-acct-dot-add {
    border: 1.5px dashed var(--a3-text-faint);
    color: var(--a3-text-mute);
    box-sizing: border-box;
}

/* Janela "Adicionar outra conta" */
.a3-acct-add {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.a3-acct-add p {
    margin: 0;
    line-height: 1.5;
}

.a3-acct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
}

.a3-acct-add-note {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f6f7fa;
    color: #5c6475;
    font-size: 13px;
}

html.dark-mode .a3-acct-add-note {
    background: #1d273a;
    color: #a3adbf;
}

/* Aviso de troca em outra aba */
#a3-acct-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 32px);
    padding: 10px 12px 10px 18px;
    border-radius: 14px;
    background: #101828;
    color: #e6eaf2;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .3);
}

/* Tela de login: "Manter conectado" e "Contas neste aparelho" */
html.a3 .a3-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    font-weight: normal;
    cursor: pointer;
}

html.a3 .a3-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--a3-orange-dk, #e2780c);
}

html.a3 .a3-picks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    text-align: left;
}

html.a3 .a3-picks-title {
    color: var(--a3-mute, #6b6f76);
    font-size: 13px;
    font-weight: 600;
}

html.a3 .a3-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--a3-line, #e3e5e8);
    border-radius: 12px;
    background: var(--a3-card, #fff);
    color: var(--a3-ink, #1d1d1f);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

html.a3 .a3-pick:hover,
html.a3 .a3-pick:focus-visible {
    border-color: var(--a3-orange, #f7941d);
}

html.a3 .a3-pick-user {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.a3 .a3-pick-hint {
    color: var(--a3-mute, #6b6f76);
    font-size: 12px;
}

/* Configurações: Aparelhos conectados */
html.a3 #settings-menu li.art3-devices > a:before {
    content: "\f3fa"; /* mobile-alt */
}

html.a3 .a3-devices {
    max-width: 720px;
}

html.a3 .a3-devices-intro {
    color: var(--a3-text-mute);
}

html.a3 .a3-device {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--a3-rule);
}

html.a3 .a3-device-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

html.a3 .a3-device-name {
    font-weight: 600;
}

html.a3 .a3-device-here {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--a3-accent-soft);
    color: var(--a3-accent-ink);
    font-size: 12px;
}

html.a3 .a3-device-meta {
    color: var(--a3-text-mute);
    font-size: 13px;
}

html.a3 .a3-devices-actions {
    margin-top: 16px;
}

/* ---------- Menu lateral: pastas principais à vista, demais atrás de "Mais" (art3_ui_mdr_v6) ---------- */

html.a3 #mailboxlist.a3-fold-less > li.a3-fold-extra:not(.a3-fold-keep) {
    display: none;
}

html.a3 #a3-fold-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    padding-left: 26px;
    color: var(--a3-text-mute);
    text-decoration: none;
    font-size: 13.5px;
}

html.a3 #a3-fold-toggle .a3i {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}

@media (min-width: 769px) {
    html.a3 :is(#layout-sidebar, #a3-nav) #a3-fold-toggle {
        border-radius: 0 18px 18px 0;
        color: var(--a3-chrome-mute);
    }

    html.a3 :is(#layout-sidebar, #a3-nav) #a3-fold-toggle:hover {
        background: var(--a3-chrome-line);
        color: var(--a3-chrome-ink);
    }

    html.a3 :is(#layout-sidebar, #a3-nav) #a3-fold-toggle:focus {
        outline: 2px solid var(--a3-accent);
        outline-offset: -2px;
    }
}

/* =====================================================================
 * Celular: o menu lateral do computador vira gaveta (art3mail_skin_mdr_v42)
 * O ☰ da lista (o botão de pastas da Elastic, que já leva a bolinha de não lidas das outras
 * contas) abre o #layout-sidebar por cima da lista, escuro como no computador, sem o Escrever
 * (fica o botão flutuante). No fim: Contatos, Configurações e Sair, que no computador
 * ficam na barra superior (o Tema saiu no art3mail_skin_mdr_v49: só o claro por enquanto). Abre e fecha pelo art3_ui.js (classe a3-drawer-open no html).
 * Contatos e Configurações no celular continuam com o menu da Elastic.
 * ===================================================================== */

html.a3 .a3-drawer-links,
html.a3 .a3-drawer-head,
#a3-drawer-bg {
    display: none;
}

@media (max-width: 768px) {
    /* sem o menu de tarefas da Elastic: o ☰ fica na barra superior (art3mail_skin_mdr_v49) */
    html.a3 body.task-mail #layout-menu,
    html.a3 body.task-mail #layout-list > .header .task-menu-button {
        display: none !important;
    }

    /* gaveta: sempre montada (a Elastic põe .hidden), fora da tela até abrir */
    html.a3 body.task-mail #layout-sidebar {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        z-index: 1035;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(86vw, 320px) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-top: env(safe-area-inset-top);
        border: 0;
        background: var(--a3-chrome);
        color: var(--a3-chrome-ink);
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    html.a3.a3-drawer-open body.task-mail #layout-sidebar {
        transform: none;
        visibility: visible;
        transition: transform .22s ease;
    }

    html.a3 #a3-drawer-bg {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1034;
        background: rgba(8, 12, 20, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }

    html.a3.a3-drawer-open #a3-drawer-bg {
        opacity: 1;
        visibility: visible;
        transition: opacity .22s ease;
    }

    html.a3 body.task-mail #layout-sidebar > .header,
    html.a3 body.task-mail #layout-sidebar > .column-resizer {
        display: none;
    }

    /* topo: a logo da barra superior do computador (o art3_ui.js copia) */
    html.a3 body.task-mail #layout-sidebar > .a3-drawer-head {
        display: flex;
        align-items: center;
        flex: none;
        height: 60px;
        padding: 0 20px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--a3-chrome-line);
    }

    html.a3 .a3-drawer-head .a3-brand {
        display: flex;
        align-items: center;
        gap: 2px;
        color: var(--a3-chrome-ink);
        text-decoration: none;
    }

    html.a3 .a3-drawer-head .a3-brand svg {
        height: 22px;
        width: auto;
    }

    html.a3 .a3-drawer-head .a3-brand span {
        font-family: var(--a3-display);
        font-weight: 600;
        font-size: 18px;
        letter-spacing: -.01em;
        margin-left: 3px;
    }

    /* pastas: o mesmo desenho do computador, com linhas mais altas para o dedo */
    html.a3 body.task-mail #layout-sidebar .scroller {
        padding: 0 12px 8px 0;
        overscroll-behavior: contain;
    }

    html.a3 body.task-mail #layout-sidebar .listing li {
        border: 0;
        line-height: 42px;
        background: none;
    }

    html.a3 body.task-mail #layout-sidebar .listing li > a {
        position: relative;
        height: 42px;
        padding-left: 26px;
        border-radius: 0 21px 21px 0;
        color: var(--a3-chrome-mute);
        background: none;
        font-size: 14px;
    }

    html.a3 body.task-mail #layout-sidebar .listing li > a:before {
        width: 1.4em;
        margin-right: 14px;
        color: inherit;
    }

    html.a3 body.task-mail #layout-sidebar .listing li.selected > a,
    html.a3 body.task-mail #layout-sidebar .listing li.selected > div > a {
        background: var(--a3-accent-btn); /* pasta atual no laranja do Escrever (mdr v60) */
        color: var(--a3-chrome); /* texto no azul escuro do menu (mdr v61) */
        font-weight: 600;
    }

    html.a3 body.task-mail #layout-sidebar .listing li.selected {
        background: none;
    }

    html.a3 body.task-mail #layout-sidebar .listing li.unread > a {
        color: #cdd4df;
    }

    html.a3 body.task-mail #layout-sidebar .listing li.unread > a .unreadcount {
        color: var(--a3-chrome-ink);
    }

    /* pasta atual com não lidas: continua no azul escuro sobre o laranja; sem isto a regra de não lida acima,
       aplicada quando a contagem chega, deixava o texto e o número brancos (mdr v62) */
    html.a3 body.task-mail #layout-sidebar .listing li.selected.unread > a,
    html.a3 body.task-mail #layout-sidebar .listing li.selected.unread > a .unreadcount {
        color: var(--a3-chrome);
    }

    html.a3 body.task-mail #layout-sidebar .listing li > a.virtual,
    html.a3 body.task-mail #layout-sidebar .listing li.virtual > a {
        opacity: .7;
    }

    html.a3 body.task-mail #layout-sidebar .folderlist li.mailbox .unreadcount {
        top: 50%;
        transform: translateY(-50%);
        margin: 0 10px 0 0;
        min-width: 0;
        padding: 0;
        line-height: 1.4;
        background: none;
        color: inherit;
        font-size: 12.5px;
        font-weight: 700;
    }

    html.a3 body.task-mail #layout-sidebar ul.treelist li div.treetoggle {
        left: 6px;
        color: var(--a3-chrome-mute);
    }

    html.a3 body.task-mail #layout-sidebar #a3-fold-toggle {
        height: 42px;
        font-size: 14px;
        border-radius: 0 21px 21px 0;
        color: var(--a3-chrome-mute);
    }

    /* marcadores (art3_labels): mesma altura das pastas */
    html.a3 body.task-mail #layout-sidebar .a3l-item .a3l-open {
        height: 42px;
        font-size: 14px;
    }

    /* contas (art3_accounts): cores do menu escuro */
    html.a3 body.task-mail #layout-sidebar .a3-acct-row {
        border-radius: 0 21px 21px 0;
        color: var(--a3-chrome-ink);
    }

    html.a3 body.task-mail #layout-sidebar .a3-acct-row .a3-acct-ico,
    html.a3 body.task-mail #layout-sidebar .a3-acct-add-btn.a3-acct-row,
    html.a3 body.task-mail #layout-sidebar .a3-acct-count.a3-acct-hint {
        color: var(--a3-chrome-mute);
    }

    html.a3 body.task-mail #layout-sidebar .a3-acct-current {
        color: #fff;
    }

    html.a3 body.task-mail #layout-sidebar #a3-acct-others {
        border-top-color: var(--a3-chrome-line);
    }

    html.a3 body.task-mail #layout-sidebar #a3-acct-head:not(:empty) + #mailboxlist {
        margin-left: 14px;
    }

    /* toque: realce enquanto o dedo está em cima */
    html.a3 body.task-mail #layout-sidebar .listing li > a:active,
    html.a3 body.task-mail #layout-sidebar #a3-fold-toggle:active,
    html.a3 body.task-mail #layout-sidebar .a3l-item .a3l-open:active,
    html.a3 body.task-mail #layout-sidebar a.a3-acct-row:active,
    html.a3 body.task-mail #layout-sidebar .a3-drawer-links a:active {
        background: var(--a3-chrome-line);
        color: var(--a3-chrome-ink);
    }

    /* Contatos, Configurações e Sair */
    html.a3 body.task-mail #layout-sidebar .a3-drawer-links {
        display: block;
        list-style: none;
        margin: 8px 0 0;
        padding: 8px 0 0;
        border-top: 1px solid var(--a3-chrome-line);
    }

    html.a3 body.task-mail #layout-sidebar .a3-drawer-links a {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 42px;
        padding-left: 26px;
        border-radius: 0 21px 21px 0;
        color: var(--a3-chrome-mute);
        font-size: 14px;
        text-decoration: none;
    }

    /* cota no rodapé, como no computador */
    html.a3 body.task-mail #layout-sidebar > .footer {
        border: 0;
        border-top: 1px solid var(--a3-chrome-line);
        background: none;
        color: var(--a3-chrome-mute);
        font-weight: normal;
        font-size: 12px;
        justify-content: flex-start;
        min-height: 40px;
        padding: 0 16px env(safe-area-inset-bottom);
        line-height: 40px;
    }

    html.a3 body.task-mail #layout-sidebar .quota-widget {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        color: var(--a3-chrome-mute);
    }

    html.a3 body.task-mail #layout-sidebar .quota-widget .bar {
        background: var(--a3-chrome-2);
        border-radius: 3px;
    }

    html.a3 body.task-mail #layout-sidebar .quota-widget .value {
        background: var(--a3-accent);
        border-radius: 3px;
    }
}

/* ---------- Anterior / próxima na leitura (art3mail_skin_mdr_v48, art3_ui_mdr_v18) ----------
   Setas na barra da leitura no modo tela inteira (computador) e no celular; com o painel à direita
   a lista está à vista e elas não aparecem. A ordem é a da lista (a ordenação que a pessoa escolheu). */

html.a3 #layout-content > .header .a3-msgnav {
    order: 3;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-left: 8px;
}

html.a3 #layout-content > .header .a3-ai ~ .a3-msgnav {
    margin-left: 0;
}

html.a3 #layout-content > .header .a3-msgnav .a3-ib {
    color: var(--a3-text-mute);
}

html.a3 #layout-content > .header .a3-msgnav .a3-ib:not(.disabled):hover {
    color: var(--a3-text);
}

@media (min-width: 769px) {
    html.a3.a3-pane-none body.task-mail.action-none #layout-content .a3-msgnav {
        display: flex;
    }
}

@media (max-width: 768px) {
    /* barra do alto da leitura no celular (art3mail_skin_mdr_v52): ← | ‹ › | Arquivar Excluir Não lida | …
       O título ("E-mail") sai: não diz nada que a tela já não diga. */
    html.a3 body.task-mail.action-none #layout-content > .header .header-title {
        display: none;
    }

    html.a3 body.task-mail.action-none #layout-content > .header .a3-msgnav {
        display: flex;
        order: 1;
        margin-left: 0;
        padding-left: 0;
        gap: 0;
    }

    html.a3 body.task-mail.action-none #layout-content > .header .a3-msgacts {
        display: flex;
        order: 2;
        align-items: center;
        margin-left: auto;
    }

    html.a3 body.task-mail.action-none #layout-content > .header .a3-msgacts .a3-ib {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: var(--a3-text-mute);
    }

    html.a3 body.task-mail.action-none #layout-content > .header .a3-msgacts .a3i {
        width: 20px;
        height: 20px;
    }

    /* a barra de baixo da Elastic (Anterior / Responder / Próximo, sem tradução) sai; a nossa fica no quadro */
    html.a3 body.task-mail.action-none #layout-content > .content-frame-navigation {
        display: none !important;
    }
}

/* Arrasto de lado dentro do quadro da mensagem: a página não rola de lado enquanto o dedo arrasta,
   e a mensagem aberta pelo arrasto entra pelo lado oposto ao que a anterior saiu */
html.a3.a3-swiping,
html.a3.a3-swiping body {
    overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    html.a3.a3-slide-next body {
        animation: a3-slide-next .22s ease-out;
    }

    html.a3.a3-slide-prev body {
        animation: a3-slide-prev .22s ease-out;
    }
}

@keyframes a3-slide-next {
    from {
        transform: translateX(30%);
        opacity: 0;
    }
}

@keyframes a3-slide-prev {
    from {
        transform: translateX(-30%);
        opacity: 0;
    }
}

/* =====================================================================
 * Celular: barra superior escura, como no mockup (art3mail_skin_mdr_v49)
 * docs/claude/art3mail-nova-skin-mockup.html (até 760 px): ☰, busca e avatar à direita (a logo saiu
 * da barra no mdr v51 e fica só na gaveta);
 * a lista vem num cartão claro de cantos arredondados. O ☰ abre a gaveta (mdr v42) e sai o botão
 * de pastas do cabeçalho da lista. Contatos, atalhos e engrenagem ficam fora: Contatos e
 * Configurações estão na gaveta. Só na tela de e-mail; na leitura a barra some (mais espaço).
 * ===================================================================== */

@media (max-width: 768px) {
    html.a3 body.task-mail,
    html.a3 body.task-mail #layout {
        background: var(--a3-chrome);
    }

    html.a3 body.task-mail #layout {
        position: relative;
    }

    html.a3 body.task-mail #a3-top {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        height: 72px; /* mais alta e com os itens mais longe do topo (art3mail_skin_mdr_v63); 72 px com a busca de 50 px,
                         ☰ e avatar continuam no meio dela (art3mail_skin_mdr_v73) */
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 10px 12px 0 4px;
        color: var(--a3-chrome-ink);
    }

    html.a3 body.task-mail #a3-top ~ #layout-list,
    html.a3 body.task-mail #a3-top ~ #layout-content {
        margin-top: 82px; /* 16 px abaixo da busca, o mesmo respiro de cima (art3mail_skin_mdr_v64, v73) */
    }

    html.a3 body.task-mail #a3-top ~ #layout-list {
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }

    /* mensagem aberta: a Elastic esconde a lista; a barra e a busca saem junto */
    html.a3 body.task-mail #layout:has(> #layout-list.hidden) > :is(#a3-top, #a3-search) {
        display: none;
    }

    html.a3 body.task-mail #layout:has(> #layout-list.hidden) > #layout-content {
        margin-top: 0;
    }

    html.a3 body.task-mail #layout-list > .header .back-sidebar-button {
        display: none !important;
    }

    html.a3 body.task-mail #a3-top .a3-menu-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }

    html.a3 body.task-mail #a3-top .a3-ib:active {
        background: var(--a3-chrome-line);
    }

    /* sem a logo na barra: ela fica completa no topo da gaveta (art3mail_skin_mdr_v51) */
    html.a3 body.task-mail #a3-top .a3-brand {
        display: none;
    }

    html.a3 body.task-mail .a3-top-actions {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    html.a3 body.task-mail .a3-top-actions > .a3-ib {
        display: none;
    }

    html.a3 body.task-mail .a3-avatar {
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--a3-accent);
        color: var(--a3-on-accent);
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        box-shadow: 0 0 0 2px var(--a3-chrome), 0 0 0 4px rgba(247, 148, 29, .35);
    }

    /* atualizar e ⋮ ao lado do nome da pasta: a Elastic desenha com 1.75rem; aqui menores e
       em cinza, com a área de toque mantida em 40 px (art3mail_skin_mdr_v53) */
    html.a3 body.task-mail #layout-list > .header a.button:is(.refresh, .toolbar-menu-button) {
        width: 40px;
        color: var(--a3-text-mute);
        text-align: center;
    }

    html.a3 body.task-mail #layout-list > .header a.button:is(.refresh, .toolbar-menu-button):before {
        width: 100%;
        font-size: 18px;
        text-align: center;
    }

    /* busca entre o ☰ e o avatar */
    html.a3 body.task-mail #a3-search {
        position: absolute;
        z-index: 21;
        top: 16px;
        left: 54px;
        right: 62px;
    }

    /* busca do celular mais alta que a do computador (50 px), com as pontas redondas (art3mail_skin_mdr_v73) */
    html.a3 body.task-mail #a3-search .searchbar,
    html.a3 body.task-mail #a3-search .searchbar form:before,
    html.a3 body.task-mail #a3-search .searchbar a:before {
        height: 50px;
        min-height: 50px;
        line-height: 50px;
    }

    html.a3 body.task-mail #a3-search .searchbar {
        border-radius: 25px;
    }

    html.a3 body.task-mail #a3-search .searchbar input {
        font-size: 16px; /* abaixo de 16 px o iPhone dá zoom ao tocar */
    }

    html.a3 body.task-mail #a3-search .searchbar.open {
        border-radius: 25px;
    }

    /* opções da busca: na largura da tela, logo abaixo da barra */
    html.a3 body.task-mail #a3-search #searchmenu {
        position: fixed;
        top: 72px;
        left: 8px;
        right: 8px;
        max-height: calc(100% - 88px);
        border-top: 1px solid var(--a3-rule);
        border-radius: 12px;
    }
}

/* Celular e toque: a coluna de ícones da Elastic (td.flags) fica por cima do canto direito da linha;
   com o fundo das células da skin ela cobria a data. Transparente, a data aparece inteira na 1ª linha
   e o clipe continua na 2ª (art3mail_skin_mdr_v55) */
html.a3:is(.layout-phone, .touch) .messagelist tr.message td.flags {
    background-color: transparent;
}

html.a3:is(.layout-phone, .touch) .messagelist td.subject span.date {
    flex: none;
}

/* o avatar do topo fica sem a bolinha, no computador e no celular: com várias contas o número somado confundia;
   as não lidas de cada conta ficam nas linhas das contas do menu lateral/gaveta (art3mail_skin_mdr_v66) */
html.a3 #a3-acct-btn.a3-acct-badge:after {
    display: none;
}

/* Celular: remetente, assunto e marcadores mais juntos dentro da linha (a Elastic dá 2em a cada um) e mais
   respiro até o divisor, que fica um pouco mais escuro; a mensagem não se mistura com a vizinha.
   O clipe (td.flags, por cima da linha) continua alinhado com o assunto (art3mail_skin_mdr_v57) */
@media (max-width: 768px) {
    html.a3 .messagelist tr.message td {
        border-bottom-color: var(--a3-row-rule);
    }

    /* 13 px em cima e embaixo (era 9): a linha respira mais nas bordas; entre remetente, assunto e marcadores
       nada muda (art3mail_skin_mdr_v80) */
    html.a3 .messagelist tr.message td.subject {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    html.a3 .messagelist td.subject span {
        line-height: 20px;
    }

    html.a3 .messagelist td.subject span.subject,
    html.a3 .messagelist td.subject span.subject span {
        line-height: 22px;
    }

    /* a Elastic fixa a bolinha de não lida (e os ícones de respondida) em 2rem, o que esticava a linha do assunto */
    html.a3 .messagelist td.subject span.msgicon:before,
    html.a3 .messagelist td.subject span.msgicon:after {
        height: 22px;
    }

    /* Sem a bolinha de não lida: no canto da tela, ao rolar, o dedo batia nela e marcava a mensagem como
       lida/não lida (a não lida já aparece em negrito; as ações ficam no toque longo). Os ícones de respondida e
       encaminhada continuam, mas não respondem ao toque: o toque abre a mensagem (art3mail_skin_mdr_v58) */
    html.a3 .messagelist td.subject span.msgicon.status:not(.replied):not(.forwarded) {
        display: none;
    }

    html.a3 .messagelist td.subject span.msgicon.status {
        pointer-events: none;
    }

    html.a3 .messagelist td.subject span.fromto {
        padding-left: 0;
    }

    html.a3 .messagelist tr.message td.subject {
        padding-left: 12px;
    }

    html.a3.a3-dens-std .messagelist td.subject > span.subject > .a3l-chips {
        margin: 4px 0 0;
    }

    html.a3 .messagelist tr.message td.flags {
        top: 11px;
    }

    html.a3 .messagelist tr.message td.flags > span {
        height: 22px;
        line-height: 22px;
    }
}

/* Contatos, computador: rótulos da barra em até 2 linhas ("Webmail anterior") em vez de cortar com "…", ícones
   alinhados no alto e um pouco menos de espaço acima para a 2ª linha caber (art3mail_skin_mdr_v59) */
@media (min-width: 769px) {
    html.a3 body.task-addressbook #layout-content > .header > .toolbar {
        align-items: flex-start;
    }

    html.a3 body.task-addressbook #layout-content > .header > .toolbar a {
        padding-top: .25rem;
    }

    html.a3 body.task-addressbook #layout-content > .header > .toolbar a:not(.dropdown) span.inner {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        line-height: 1.15;
    }
}

/* cópia do clipe depois do assunto: só aparece na tela inteira do computador (art3mail_skin_mdr_v70) */
html.a3 .messagelist td.subject span.a3-clip {
    display: none;
}

/* ---------- Avatar do remetente na lista, à esquerda, como no Gmail (art3mail_skin_mdr_v69, art3_ui_mdr_v24) ----------
   O art3_ui põe o span.a3-ava no começo da td.subject (e a classe a3-with-ava nela). Sem painel no computador ele entra
   na fila da linha; nas 3 colunas e no celular fica no canto esquerdo, ao lado das duas linhas. Super compacta: sem avatar. */

html.a3 .messagelist td.subject span.a3-ava {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--a3-accent-soft);
    color: var(--a3-accent-ink);
    font-family: var(--a3-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

html.a3.a3-dens-super .messagelist td.subject span.a3-ava {
    display: none;
}

@media (min-width: 769px) {
    html.a3.a3-pane-none .messagelist td.subject span.a3-ava {
        order: 0;
    }

    html.a3.a3-pane-none.a3-dens-compact .messagelist td.subject span.a3-ava {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    html.a3:not(.a3-pane-none) .messagelist td.subject span.a3-ava {
        position: absolute;
        left: 10px;
        top: 50%;
        width: 36px;
        height: 36px;
        margin-top: -18px;
        font-size: 15px;
    }

    html.a3:not(.a3-pane-none):not(.a3-dens-super) .messagelist tr.message td.subject.a3-with-ava {
        padding-left: 54px;
    }

    html.a3.a3-dens-compact:not(.a3-pane-none) .messagelist td.subject span.a3-ava {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        font-size: 13px;
    }

    html.a3.a3-dens-compact:not(.a3-pane-none) .messagelist tr.message td.subject.a3-with-ava {
        padding-left: 48px;
    }
}

@media (max-width: 768px) {
    html.a3 .messagelist td.subject span.a3-ava {
        position: absolute;
        left: 12px;
        top: 14px;
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    html.a3:not(.a3-dens-super) .messagelist tr.message td.subject.a3-with-ava {
        padding-left: 64px;
    }

    html.a3.a3-dens-compact .messagelist td.subject span.a3-ava {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    html.a3.a3-dens-compact .messagelist tr.message td.subject.a3-with-ava {
        padding-left: 58px;
    }
}

/* =====================================================================
 * Seleção múltipla na lista (art3mail_skin_mdr_v74, art3_ui_mdr_v30)
 * docs/claude/selecao-multipla-spec-2026-10-08.md e o mockup mockup-selecao-multipla.html.
 * O avatar marca a mensagem: no computador vira caixinha ao passar o mouse (e todos, com seleção aberta); no
 * celular, com a seleção aberta, os não marcados viram círculos vazios. O cabeçalho da lista vira a barra de ações
 * azul-escura (computador); no celular o topo mostra a quantidade e a barra flutua no lugar do Escrever.
 * Ícones e textos das barras azuis no off-white --a3-bar-ink, nunca o branco puro.
 * ===================================================================== */

html.a3 {
    --a3-bar-ink: #d8dfeb;
}

html.a3 .messagelist td.subject span.a3-ava {
    pointer-events: auto;
    cursor: pointer;
}

/* o clique é do próprio avatar (o list.js ignora o elemento que tem onclick), não da letra ou do visto */
html.a3 .messagelist td.subject span.a3-ava > * {
    pointer-events: none;
}

html.a3 .messagelist td.subject span.a3-ava .a3-ava-ok {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
    stroke-width: 3;
}

/* a seta de seleção da Elastic dá lugar à caixinha "marcar todas" + menu; a barra e o topo só existem com seleção */
html.a3 #layout-list > .header .toolbar a.select,
html.a3 .a3-selbar,
html.a3 .a3-seltop,
html.a3 .a3-pbar {
    display: none !important;
}

html.a3 .a3-selbanner {
    flex: none;
    padding: 8px 12px;
    border-bottom: 1px solid var(--a3-rule);
    background: var(--a3-surface-2);
    color: var(--a3-text-mute);
    font-size: 13px;
    text-align: center;
}

html.a3 .a3-selbanner a {
    margin-left: 4px;
    color: var(--a3-accent-ink);
    font-weight: 500;
}

html.a3 .a3-selmenu {
    min-width: 200px;
}

html.a3 .a3-selmenu .a3-pro-pill {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--a3-accent-soft);
    color: var(--a3-accent-ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
}

/* ---------- Computador ---------- */
@media (min-width: 769px) {
    html.a3.a3-pane-none .messagelist td.subject span.a3-ava {
        position: relative;
    }

    /* tela inteira sem a coluna de caixinhas da Elastic (as células da linha são flex e a mostravam sempre); ela só
       volta na Super compacta, que não tem avatar */
    html.a3.a3-pane-none .messagelist:not(.withselection) tbody tr.message td.selection {
        display: none;
    }

    /* avatar vira caixinha com a seleção aberta, em todas as linhas (ao passar o mouse: bloco abaixo) */
    html.a3.a3-selmode .messagelist td.subject span.a3-ava {
        background: transparent !important;
    }

    html.a3.a3-selmode .messagelist td.subject span.a3-ava .a3-ava-l {
        visibility: hidden;
    }

    html.a3.a3-selmode .messagelist td.subject span.a3-ava:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 18px;
        margin: -9px 0 0 -9px;
        border: 2px solid var(--a3-text-faint);
        border-radius: 5px;
        box-sizing: border-box;
    }

    html.a3.a3-selmode .messagelist tr.selected td.subject span.a3-ava:before {
        background: var(--a3-accent-btn);
        border-color: var(--a3-accent-btn);
    }

    html.a3.a3-selmode .messagelist tr.selected td.subject span.a3-ava .a3-ava-ok {
        display: block;
        color: var(--a3-on-accent) !important;
    }

    /* caixinha "marcar todas" + seta do menu de seleção, no começo do cabeçalho */
    html.a3 #layout-list > .header .a3-selpick {
        order: -1;
        display: inline-flex;
        align-items: center;
        flex: none;
        border-radius: 10px;
    }

    html.a3 #layout-list > .header .a3-selpick:hover {
        background: var(--a3-hover);
    }

    html.a3 .a3-selpick a {
        display: grid;
        place-items: center;
        height: 36px;
        border-radius: 10px;
        color: var(--a3-text-mute);
        text-decoration: none;
    }

    html.a3 .a3-selpick .a3-selpick-box {
        width: 34px;
    }

    html.a3 .a3-selpick .a3-selpick-car {
        width: 20px;
    }

    html.a3 .a3-selpick .a3-selpick-car .a3i {
        width: 15px;
        height: 15px;
    }

    html.a3 .a3-mcheck {
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border: 2px solid var(--a3-text-faint);
        border-radius: 5px;
        box-sizing: border-box;
        color: var(--a3-on-accent);
    }

    html.a3 .a3-mcheck .a3i {
        width: 13px;
        height: 13px;
        stroke-width: 3;
        opacity: 0;
    }

    html.a3 .a3-mcheck:is(.a3-all, .a3-some) {
        background: var(--a3-accent-btn);
        border-color: var(--a3-accent-btn);
    }

    html.a3 .a3-mcheck.a3-all .a3i {
        opacity: 1;
    }

    html.a3 .a3-mcheck.a3-some .a3i {
        display: none;
    }

    html.a3 .a3-mcheck.a3-some:after {
        content: "";
        width: 9px;
        height: 2.5px;
        border-radius: 2px;
        background: var(--a3-on-accent);
    }

    /* com seleção: o cabeçalho da lista vira a barra azul-escura de ações */
    html.a3.a3-selmode #layout-list > .header,
    html.a3.a3-selmode #a3-top ~ #layout-list > .header {
        background: var(--a3-chrome);
        border-bottom-color: var(--a3-chrome);
        color: var(--a3-bar-ink);
    }

    html.a3.a3-selmode #layout-list > .header > :not(.a3-selpick):not(.a3-selbar) {
        display: none !important;
    }

    html.a3.a3-selmode #layout-list > .header .a3-selpick:hover {
        background: var(--a3-chrome-line);
    }

    html.a3.a3-selmode .a3-mcheck {
        border-color: var(--a3-bar-ink);
    }

    html.a3.a3-selmode .a3-selpick .a3-selpick-car {
        color: var(--a3-bar-ink);
    }

    html.a3.a3-selmode .a3-selbar {
        order: 1;
        display: flex !important;
        align-items: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    html.a3 .a3-selbar .a3-sel-n {
        margin: 0 10px 0 6px;
        color: var(--a3-bar-ink);
        font-size: 14px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    html.a3 .a3-selbar .a3-sel-n b {
        font-weight: 600;
    }

    /* ícone em cima e o nome escrito embaixo, como na barra do celular (sem depender de dica) */
    html.a3 .a3-selbar .a3-sel-act {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 3px;
        flex: 0 1 auto;
        min-width: 44px;
        height: 48px;
        padding: 0 8px;
        border-radius: 8px;
        box-sizing: border-box;
        color: var(--a3-bar-ink);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.1;
        white-space: nowrap;
        text-decoration: none;
    }

    /* nome no tom das pastas sem não lidas do menu lateral; clareia junto no hover */
    html.a3 .a3-selbar .a3-sel-l {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--a3-chrome-mute);
    }

    html.a3 .a3-selbar .a3-sel-act:is(:hover, :focus-visible) .a3-sel-l {
        color: var(--a3-bar-ink);
    }

    html.a3 .a3-selbar .a3-sel-act:hover,
    html.a3 .a3-selbar .a3-sel-act:focus-visible {
        background: var(--a3-chrome-line);
        color: var(--a3-bar-ink);
    }

    html.a3 .a3-selbar .a3-sel-act .a3i {
        width: 18px;
        height: 18px;
    }

    html.a3 .a3-selbar .a3-sel-clear {
        min-width: 36px;
        height: 36px;
    }

    html.a3 .a3-selbar .a3-sel-grow {
        flex: 1;
    }

    html.a3 .a3-selbar .a3-sel-clear .a3-sel-l {
        display: none;
    }

    /* 3 colunas: botões mais estreitos e só o número (sem "selecionadas") */
    html.a3:not(.a3-pane-none) .a3-selbar {
        gap: 0;
    }

    html.a3:not(.a3-pane-none) .a3-selbar .a3-sel-act {
        min-width: 0;
        padding: 0 5px;
    }

    html.a3:not(.a3-pane-none) .a3-selbar .a3-sel-word {
        display: none;
    }

    html.a3:not(.a3-pane-none) .a3-selbar .a3-sel-n {
        margin: 0 6px 0 4px;
    }
}

/* dica rápida dos botões da seleção (o title do navegador demora); posição pelo art3_ui.js */
html.a3 .a3-tip {
    position: fixed;
    z-index: 10000;
    max-width: 240px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #2a3548;
    color: #d8dfeb;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .08s ease;
}

html.a3 .a3-tip.a3-tip-on {
    opacity: 1;
    visibility: visible;
}

html.a3.dark-mode .a3-tip {
    background: #36425a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}

/* avatar vira caixinha ao passar o mouse (só com mouse de verdade) */
@media (min-width: 769px) and (hover: hover) {
    html.a3 .messagelist tr.message:hover td.subject span.a3-ava {
        background: transparent !important;
    }

    html.a3 .messagelist tr.message:hover td.subject span.a3-ava .a3-ava-l {
        visibility: hidden;
    }

    html.a3 .messagelist tr.message:hover td.subject span.a3-ava:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 18px;
        margin: -9px 0 0 -9px;
        border: 2px solid var(--a3-text-faint);
        border-radius: 5px;
        box-sizing: border-box;
    }
}

/* ---------- Celular ---------- */
@media (max-width: 768px) {
    html.a3 #layout-list > .header .a3-selpick {
        display: none;
    }

    /* seleção aberta: os não marcados viram círculos vazios; os marcados, laranja com o visto */
    html.a3.a3-selmode .messagelist td.subject span.a3-ava {
        background: transparent !important;
        box-shadow: inset 0 0 0 2px var(--a3-text-faint);
    }

    html.a3.a3-selmode .messagelist td.subject span.a3-ava .a3-ava-l {
        display: none;
    }

    html.a3.a3-selmode .messagelist tr.selected td.subject span.a3-ava {
        background: var(--a3-accent-btn) !important;
        box-shadow: none;
    }

    html.a3.a3-selmode .messagelist tr.selected td.subject span.a3-ava .a3-ava-ok {
        display: block;
        width: 18px;
        height: 18px;
        color: var(--a3-on-accent) !important;
    }

    /* topo na seleção: ✕, quantidade e marcar todas, no mesmo azul do topo */
    html.a3.a3-selmode body.task-mail #a3-seltop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 23;
        display: flex !important;
        align-items: center;
        gap: 4px;
        height: 72px;
        padding: 10px 10px 0 4px;
        background: var(--a3-chrome);
        color: var(--a3-bar-ink);
    }

    html.a3 #a3-seltop .a3-sel-act {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--a3-bar-ink);
    }

    html.a3 #a3-seltop .a3-sel-act:active {
        background: var(--a3-chrome-line);
    }

    html.a3 #a3-seltop :is(.a3-sel-l, .a3-sel-word) {
        display: none;
    }

    html.a3 #a3-seltop .a3-sel-n {
        flex: 1;
        padding-left: 4px;
        font-family: var(--a3-display);
        font-size: 18px;
        font-variant-numeric: tabular-nums;
    }

    html.a3 #a3-seltop .a3-sel-n b {
        font-weight: 600;
    }

    /* barra de ações flutuante, como o Escrever: afastada das bordas, um pouco acima do fundo */
    html.a3 body.task-mail .a3-pbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        z-index: 30;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        padding: 6px;
        border-radius: 20px;
        background: var(--a3-chrome);
        color: var(--a3-bar-ink);
        box-shadow: 0 10px 28px rgba(10, 15, 26, .35), 0 2px 6px rgba(10, 15, 26, .2);
        transform: translateY(calc(100% + 60px));
        transition: transform .24s cubic-bezier(.2, .8, .3, 1);
    }

    html.a3.a3-selmode body.task-mail .a3-pbar {
        transform: none;
    }

    html.a3 .a3-pbar .a3-sel-act {
        display: grid;
        justify-items: center;
        gap: 3px;
        min-width: 0;
        padding: 7px 0 6px;
        border-radius: 14px;
        color: var(--a3-bar-ink);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
    }

    html.a3 .a3-pbar .a3-sel-act:active {
        background: var(--a3-chrome-line);
    }

    html.a3 .a3-pbar .a3-sel-act .a3i {
        width: 22px;
        height: 22px;
    }

    html.a3 .a3-pbar .a3-sel-l {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* o Escrever sai enquanto a barra está à vista; a lista ganha espaço embaixo para a última linha */
    html.a3 .floating-action-buttons {
        transition: transform .2s, opacity .2s;
    }

    html.a3.a3-selmode .floating-action-buttons {
        transform: translateY(90px);
        opacity: 0;
        pointer-events: none;
    }

    html.a3.a3-selmode #messagelist-content {
        padding-bottom: 100px;
    }
}

/* ---------- Escrever no celular (art3mail_skin_mdr_v78, art3_ui_mdr_v35) ----------
   Pílula "Escrever" no centro, embaixo da lista; ao rolar (html.a3-fab-min) encolhe para o círculo com o lápis.
   Só o botão de escrever: o "Novo contato" dos contatos continua como a Elastic deixa. */
@media (max-width: 768px) {
    html.a3 .floating-action-buttons:has(a.compose) {
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        pointer-events: none;
    }

    html.a3 .floating-action-buttons a.button.compose {
        float: none;
        display: inline-flex;
        align-items: center;
        width: auto;
        max-width: 14rem;
        padding-right: 1.5rem;
        margin: 0 0 1rem;
        border-radius: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-decoration: none;
        pointer-events: auto;
        transition: max-width .25s ease, padding-right .25s ease;
    }

    html.a3 .floating-action-buttons a.button.compose:before {
        flex: none;
        width: 3rem;
        margin-left: .5rem;
        transition: width .25s ease, margin-left .25s ease;
    }

    html.a3 .floating-action-buttons a.button.compose .inner {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        transition: opacity .15s ease;
    }

    html.a3.a3-fab-min .floating-action-buttons a.button.compose {
        max-width: 4rem;
        padding-right: 0;
    }

    html.a3.a3-fab-min .floating-action-buttons a.button.compose:before {
        width: 4rem;
        margin-left: 0;
    }

    html.a3.a3-fab-min .floating-action-buttons a.button.compose .inner {
        opacity: 0;
    }
}

/* ---------- Linha no celular e no toque (art3mail_skin_mdr_v75, art3_ui_mdr_v31) ----------
   A Elastic esconde a estrela em tela de toque; aqui ela fica na 1ª linha, depois da data, e o toque nela liga/desliga
   a estrela (o próprio Roundcube trata o toque). O clipe continua no fim da 2ª linha.
   Estrela e clipe 8 px afastados da borda direita (estavam colados nela); a data anda junto (art3mail_skin_mdr_v80) */

html.a3:is(.layout-phone, .touch) .messagelist tr.message td.flags {
    right: 8px;
}

html.a3:is(.layout-phone, .touch) .messagelist td.flags span.flag {
    visibility: visible;
    width: 32px;
    text-align: center;
}

html.a3:is(.layout-phone, .touch) .messagelist td.flags span.attachment {
    width: 32px;
    text-align: center;
}

html.a3:is(.layout-phone, .touch) .messagelist td.subject span.date {
    margin-right: 34px;
}

/* Etiquetas na lista como no art3mail-nova-skin-mockup.html: cantos de 5 px, fundo com 14% da cor */
html.a3 .messagelist .a3l-chip {
    height: 20px;
    padding: 0 7px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 20px;
}

/* ---------- Puxar a lista para atualizar, no celular (art3mail_skin_mdr_v76, art3_ui_mdr_v32) ----------
   O círculo desce com o dedo e gira até a resposta. A lista não passa o arrasto adiante (contain) e a página não
   tem o "puxar para recarregar" do Chrome no Android. O ↻ do cabeçalho sai no celular (no computador continua). */

html.a3 .a3-ptr {
    display: none;
}

@media (max-width: 768px) {
    html.a3:has(> body.task-mail.action-none),
    html.a3 body.task-mail.action-none {
        overscroll-behavior-y: none;
    }

    html.a3 body.task-mail #messagelist-content {
        overscroll-behavior-y: contain;
    }

    html.a3 .a3-ptr {
        position: fixed;
        left: 50%;
        z-index: 25;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        margin-left: -19px;
        border-radius: 50%;
        background: var(--a3-surface);
        color: var(--a3-accent);
        box-shadow: 0 3px 10px rgba(10, 15, 26, .22);
        opacity: 0;
        pointer-events: none;
    }

    html.a3 .a3-ptr .a3i {
        width: 20px;
        height: 20px;
        stroke-width: 2.4;
    }

    html.a3 .a3-ptr.a3-ptr-spin .a3i {
        animation: a3-ptr-spin .8s linear infinite;
    }

    html.a3 body.task-mail #layout-list > .header a.button.refresh {
        display: none !important;
    }
}

@keyframes a3-ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Política de Privacidade no modal (art3_ui) */
.a3-privacy-dialog .ui-dialog-content {
    padding: 0 !important;
    overflow: hidden !important;
}

.a3-privacy-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}