/* Cliente de e-mail — visual inspirado no Mail do macOS: sidebar e toolbar
   translúcidas (vibrancy via backdrop-filter), lista compacta de 3
   painéis, e diálogos/menus com o mesmo efeito de vidro fosco. */

/* Fonte da própria Apple (San Francisco) só existe de verdade em
   dispositivo Apple — a Apple não permite redistribuir os arquivos da
   fonte fora do próprio sistema. "Inter" é auto-hospedada aqui (arquivos
   em static/fonts/) como substituta visualmente quase idêntica, pra quem
   acessa de Linux/Windows/Android ver a mesma coisa. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: rgba(255, 255, 255, 0.7);
    --bg-body: #e9ecf1;
    --sidebar-bg: rgba(246, 246, 247, 0.2);
    --toolbar-bg: rgba(255, 255, 255, 0.68);
    --panel-bg: rgba(255, 255, 255, 0.5);
    --panel-bg-faded: rgba(255, 255, 255, 0.3);
    --compose-bg: rgba(255, 255, 255, 0.75);
    --compose-corpo-bg: rgba(0, 0, 0, 0.1);
    --list-bg: rgba(255, 255, 255, 0.7);
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #9a9a9e;
    --border: rgba(0, 0, 0, 0.09);
    --divider-forte: rgba(0, 0, 0, 0.16);
    --row-hover: rgba(0, 0, 0, 0.045);
    --row-selected-bg: #E30613;
    --row-selected-text: #ffffff;
    --row-selected-secondary: rgba(255, 255, 255, 0.78);
    --accent: #E30613;
    --danger: #ff3b30;
    --unread-dot: #E30613;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    --mark-bg: rgba(255, 214, 10, 0.55);
    --scrollbar-thumb: rgba(0, 0, 0, 0.16);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);
    /* Cor dos botões dos balões de desfazer (Desfazer/Enviar agora) —
       igual a --accent aqui (bom contraste contra o vidro fosco claro),
       mas sobrescrita pra branco no tema escuro (ver bloco dark abaixo),
       onde o azul ficava difícil de ler contra a foto de fundo. */
    --toast-btn-color: var(--accent);
    /* Opacidade/blur do "vidro" das Seções A e B — ajustáveis pelo
       usuário nas Configurações; --list-bg/--bg (a cor de fundo em si)
       são sobrescritos via JS inline (não aqui) quando o valor muda,
       porque dependem também da cor base do tema atual. */
    --secoes-blur: 24px;
    /* Opacidade da FOTO de fundo (tela de bloqueio + área logada) — 0.2
       reproduz o véu escuro fixo de antes (rgba(5,7,10,.8) por cima),
       ajustável pelo usuário nas Configurações. Um valor de opacidade de
       imagem "a" equivale matematicamente a um véu sólido da cor de base
       (#05070a) com alpha "1 - a" por cima — mesmo efeito visual, só que
       controlável em vez de fixo. */
    --fundo-imagem-opacidade: 0.2;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: rgba(30, 30, 32, 0.7);
        --bg-body: #17171a;
        --sidebar-bg: rgba(32, 32, 34, 0.2);
        --toolbar-bg: rgba(28, 28, 30, 0.62);
        --panel-bg: rgba(40, 40, 42, 0.5);
        --panel-bg-faded: rgba(40, 40, 42, 0.3);
        --compose-bg: rgba(40, 40, 42, 0.75);
        --compose-corpo-bg: rgba(0, 0, 0, 0.1);
        --list-bg: rgba(30, 30, 32, 0.7);
        --text-primary: #f5f5f7;
        --text-secondary: #a1a1a6;
        --text-tertiary: #78787d;
        --border: rgba(255, 255, 255, 0.08);
        --divider-forte: rgba(255, 255, 255, 0.16);
        --row-hover: rgba(255, 255, 255, 0.06);
        --row-selected-bg: #E30613;
        --row-selected-text: #ffffff;
        --row-selected-secondary: rgba(255, 255, 255, 0.78);
        --accent: #E30613;
        --danger: #ff453a;
        --unread-dot: #FF3B44;
        --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
        --mark-bg: rgba(255, 191, 0, 0.35);
        --scrollbar-thumb: rgba(255, 255, 255, 0.18);
        --scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);
        --toast-btn-color: #fff;
    }
}

/* ===== Seletor de tema (escolha explícita vence o automático) ===== */
:root[data-theme="dark"] {
    --bg: rgba(30, 30, 32, 0.7);
    --bg-body: #17171a;
    --sidebar-bg: rgba(32, 32, 34, 0.2);
    --toolbar-bg: rgba(28, 28, 30, 0.62);
    --panel-bg: rgba(40, 40, 42, 0.5);
    --panel-bg-faded: rgba(40, 40, 42, 0.3);
    --compose-bg: rgba(40, 40, 42, 0.75);
    --compose-corpo-bg: rgba(0, 0, 0, 0.1);
    --list-bg: rgba(30, 30, 32, 0.7);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #78787d;
    --border: rgba(255, 255, 255, 0.08);
    --divider-forte: rgba(255, 255, 255, 0.16);
    --row-hover: rgba(255, 255, 255, 0.06);
    --row-selected-bg: #E30613;
    --row-selected-text: #ffffff;
    --row-selected-secondary: rgba(255, 255, 255, 0.78);
    --accent: #E30613;
    --danger: #ff453a;
    --unread-dot: #FF3B44;
    --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    --mark-bg: rgba(255, 191, 0, 0.35);
    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.34);
    --toast-btn-color: #fff;
}
/* ===== Tema CLARO — aurora clara + painéis nítidos (coerente com o escuro) ===== */
:root[data-theme="light"] {
    --bg: rgba(255, 255, 255, 0.90);
    --sidebar-bg: rgba(255, 255, 255, 0.55);
    --toolbar-bg: rgba(255, 255, 255, 0.82);
    --panel-bg: rgba(255, 255, 255, 0.93);
    --panel-bg-faded: rgba(255, 255, 255, 0.55);
    --compose-bg: rgba(255, 255, 255, 0.95);
    --list-bg: rgba(255, 255, 255, 0.82);
    --text-primary: #17181c;
    --text-secondary: #585a64;
    --text-tertiary: #90929b;
    --border: rgba(22, 24, 38, 0.10);
    --divider-forte: rgba(22, 24, 38, 0.13);
    --row-hover: rgba(20, 20, 45, 0.045);
    --shadow: 0 14px 40px rgba(38, 26, 40, 0.14);
    --scrollbar-thumb: rgba(0, 0, 0, 0.18);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.34);
}
:root[data-theme="light"] body {
    background-color: #edeff3;
    background-image:
        radial-gradient(1200px 700px at 50% -10%, rgba(227, 6, 19, 0.11), rgba(227, 6, 19, 0) 52%),
        radial-gradient(900px 600px at 100% 0%, rgba(227, 6, 19, 0.05), rgba(227, 6, 19, 0) 55%),
        linear-gradient(180deg, #f6f7fa 0%, #e8eaf0 100%);
    background-attachment: fixed;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: rgba(255, 255, 255, 0.90);
        --sidebar-bg: rgba(255, 255, 255, 0.55);
        --toolbar-bg: rgba(255, 255, 255, 0.82);
        --panel-bg: rgba(255, 255, 255, 0.93);
        --list-bg: rgba(255, 255, 255, 0.82);
        --text-primary: #17181c;
        --text-secondary: #585a64;
        --border: rgba(22, 24, 38, 0.10);
        --divider-forte: rgba(22, 24, 38, 0.13);
        --shadow: 0 14px 40px rgba(38, 26, 40, 0.14);
    }
    :root:not([data-theme="dark"]) body {
        background-color: #edeff3;
        background-image:
            radial-gradient(1200px 700px at 50% -10%, rgba(227, 6, 19, 0.11), rgba(227, 6, 19, 0) 52%),
            radial-gradient(900px 600px at 100% 0%, rgba(227, 6, 19, 0.05), rgba(227, 6, 19, 0) 55%),
            linear-gradient(180deg, #f6f7fa 0%, #e8eaf0 100%);
        background-attachment: fixed;
    }
}

/* Efeito de "surgir" das mensagens novas: desliza de cima com um leve
   pulso vermelho da Flix, some suave. Aplicado só nas linhas recém-chegadas
   (classe .msg-row-nova, adicionada pelo app.js no refresh em 2º plano). */
@keyframes flix-nova-msg {
    0%   { opacity: 0; transform: translateY(-12px); }
    55%  { opacity: 1; box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
    100% { opacity: 1; transform: translateY(0); box-shadow: none; background: transparent; }
}
.msg-row.msg-row-nova {
    animation: flix-nova-msg 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .msg-row.msg-row-nova { animation: none; }
}

/* Ícone "Responder a todos": duas setas ↩ empilhadas bem coladinhas. */
.reply-all-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0.7;
    font-size: 0.8em;
    vertical-align: middle;
}
.reply-all-icon i { font-style: normal; display: block; }
.reply-all-icon i + i { margin-top: -0.46em; }

/* Campos e botão de "Trocar senha" nas Configurações */
.settings-input {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--row-hover);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 6px;
}
.settings-btn {
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.settings-btn:hover { filter: brightness(1.08); }
.settings-btn-sec {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.settings-btn-sec:hover { background: var(--row-hover); }

/* Modal "Trocar senha" */
#senha-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#senha-modal {
    width: 340px;
    max-width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 16px;
}
.senha-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.senha-modal-header span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
#senha-modal-close {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
#senha-modal-close:hover { background: var(--row-hover); }
.senha-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* --- Modal "Instruções gerais" (mesmo overlay/estética do modal de senha,
   porém mais largo e com corpo rolável) --- */
#instrucoes-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#instrucoes-modal {
    width: 460px;
    max-width: 100%;
    max-height: 85vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}
#instrucoes-modal-body {
    overflow-y: auto;
    margin: 2px -4px 0;
    padding: 0 4px;
}
.instr-bloco { display: flex; flex-direction: column; gap: 10px; }
.instr-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}
.instr-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.instr-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: var(--row-hover);
}
.instr-card-titulo {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.instr-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.instr-linha span { color: var(--text-secondary); flex: 0 0 auto; }
.instr-linha code {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
}
.instr-obs {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-tertiary);
}
.instr-obs code, .instr-p code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--row-hover);
    padding: 1px 5px;
    border-radius: 5px;
}

/* item "Instruções gerais" no menu de pastas (desktop) */
.mailbox-pill-item-instrucoes {
    margin-top: 4px;
    border-top: 1px solid var(--separator, rgba(127, 127, 127, 0.25));
    padding-top: 10px;
    color: var(--text-secondary);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    /* Mesma foto (e mesma posição) da tela de bloqueio, com um véu escuro
       da cor de base por cima (ver --fundo-imagem-opacidade em :root) —
       sem o véu a foto competiria demais com os cartões de vidro fosco
       (Seção A/B) flutuando por cima dela; com opacidade baixa o véu
       fica mais forte, com opacidade alta a foto aparece quase pura. */
    background-color: #05070a;
    background-image: linear-gradient(rgba(5, 7, 10, calc(1 - var(--fundo-imagem-opacidade))), rgba(5, 7, 10, calc(1 - var(--fundo-imagem-opacidade)))), url("flix-bg.jpg");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

#app {
    height: 100vh;
}

/* Tela "Caixas" do mobile: escondida no desktop (só aparece dentro da
   media query de celular, controlada por #app[data-mnav="caixas"]). */
#m-caixas { display: none; }

/* --- Toolbar ------------------------------------------------------- */

/* Pílula de ações da lista: flutua sobre #list-scroll (mesmo
   posicionamento e comportamento da pílula da área de leitura) — some
   quase totalmente ao rolar a lista pra baixo e volta ao rolar pra cima,
   restaurando 100% no hover. pointer-events: none no wrapper pra não
   bloquear cliques na lista onde a pílula não está desenhada.
   Estado "faded" não usa opacity (isso também apagava os ícones, difícil
   de mirar) — só deixa o vidro da própria pílula mais transparente e
   borrado, como o Dock/Control Center do macOS quando uma janela passa
   por trás. */
#toolbar-actions {
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 25;
    pointer-events: none;
}

#toolbar-actions .toolbar-pill { pointer-events: auto; }

.toolbar-pill {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    border-radius: 999px;
    background: var(--panel-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background-color .25s ease, backdrop-filter .25s ease;
    flex: 0 0 auto;
}

/* Estado "reduzido": 50% de transparência (mesmo blur do estado normal),
   no estilo do Dock/Control Center do macOS — os ícones continuam com
   opacidade plena, só o vidro por trás deles fica mais fino. */
#toolbar-actions.faded .toolbar-pill,
#toolbar-reading-actions.faded .toolbar-pill-reading {
    background: var(--panel-bg-faded);
}

#toolbar-actions.faded:hover .toolbar-pill,
#toolbar-reading-actions.faded:hover .toolbar-pill-reading {
    background: var(--panel-bg);
}

.toolbar-btn {
    width: 45px;
    height: 42px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 21px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .12s ease, transform .12s ease;
    flex: 0 0 auto;
}

/* Sem fundo/shape ao passar o mouse ou clicar — só o próprio ícone
   destaca (tingido de azul + leve aumento), mais sutil que uma forma
   atrás do botão. */
.toolbar-btn:hover:not(:disabled) { color: var(--accent); transform: scale(1.1); }
.toolbar-btn:active:not(:disabled) { color: var(--accent); transform: scale(0.92); }
.toolbar-btn:disabled { color: var(--text-tertiary); cursor: default; }


/* Pílula(s) flutuante(s) sobre o conteúdo da leitura — mesmo esquema de
   overlay (position:absolute) da Seção A. Seção B: 4 pílulas irmãs lado a
   lado — navegação + ações rápidas (voltar / ↑ / ↓ | sinalizar / excluir /
   responder a todos) / ações da mensagem (nova / responder / redirecionar /
   mover) / pdf-print / busca. Quando a soma não cabe na largura disponível,
   a linha inteira rola na horizontal em vez de espremer os botões. */
#toolbar-reading-actions {
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    display: flex;
    /* Centralizado quando cabe tudo (visual padrão) — "safe" faz o
       fallback pra alinhamento à esquerda automaticamente só quando
       centralizar cortaria a 1ª pílula (navegação) pela esquerda, sem
       espaço suficiente pras 4 pílulas juntas. O que não couber nesse
       caso sobra à direita, revelado ao rolar. */
    justify-content: safe center;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4px;
    z-index: 25;
    pointer-events: none;
}

#toolbar-reading-actions::-webkit-scrollbar { display: none; }

#toolbar-pill-search-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
}

/* Botão de texto ("PDF") em vez de ícone — mais largo que os quadrados
   uniformes dos outros botões da pílula, então tem largura própria em
   vez de herdar os 45px fixos. */
.toolbar-btn-texto {
    width: auto;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Balão com as opções de orientação do PDF — fora de #reading-pane de
   propósito (top-level, como #context-menu/#move-menu) e posicionado via
   JS (getBoundingClientRect do botão): #reading-pane tem backdrop-filter
   (vira containing block de position:fixed) E #toolbar-reading-actions
   tem overflow-x:auto (que por spec força overflow-y:auto também,
   cortando qualquer coisa que vaze pra baixo da pílula) — só escapando
   pros dois problemas de vez que o balão flutua livre de verdade. */
#pdf-orientacao-bubble {
    display: flex;
    gap: 4px;
    position: fixed;
    padding: 4px;
    z-index: 100;
}

.pdf-orientacao-btn {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.pdf-orientacao-btn:hover { background: var(--row-hover); color: var(--accent); }

.toolbar-pill-sep {
    width: 1px;
    height: 27px;
    background: var(--border);
    margin: 0 4px;
}

#search-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 225px;
    /* Mesma altura de conteúdo dos botões-ícone das outras pílulas
       (.toolbar-btn) — sem isso a pílula de busca ficava 3px mais baixa
       que as demais, fora do padrão. */
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    transition: width .15s ease;
}

#search-wrap:focus-within {
    width: 315px;
    background: rgba(127, 127, 127, 0.16);
}

#search-icon { color: var(--text-tertiary); font-size: 20px; }

#search {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: 20px;
    font-family: inherit;
}

#search::placeholder { color: var(--text-tertiary); }

#search-clear {
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 17px;
    padding: 3px;
}

/* Flutua como um pequeno menu logo abaixo da pílula de busca,
   centralizado com ela — só quando há uma busca ativa. Não faz parte do
   corpo mesclado da pílula em si. position:fixed com left/top definidos
   via JS (não absolute relativo à pílula): ver comentário no HTML sobre
   por que mora fora de #toolbar-pill-search-wrap. */
#search-scope {
    display: flex;
    gap: 4px;
    position: fixed;
    padding: 4px;
    border-radius: 10px;
    background: var(--panel-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 100;
}

.scope-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    cursor: pointer;
}

.scope-btn.active { background: var(--accent); color: #fff; }

/* --- Main 3-pane layout --------------------------------------------- */

#main {
    height: 100%;
    display: flex;
    min-height: 0;
}

/* Menu principal (☰ na pílula da Seção A): em vez de abrir um painel
   lateral deslizante, os botões de ordenar/configurações/sair aparecem
   NA PRÓPRIA pílula (substituindo os botões padrão enquanto aberto — ver
   .pill-btn-padrao/.pill-btn-menu), e uma segunda pílula flutua logo
   abaixo com as 5 pastas essenciais (#menu-pastas-pill). Só faz sentido
   agora que a conta tem exatamente 5 pastas relevantes — um painel
   lateral com lista rolável não compensa mais o espaço/complexidade. */
.pill-btn-menu { display: none; }

.toolbar-pill.menu-aberto .pill-btn-padrao,
.toolbar-pill.menu-aberto #btn-search-mobile { display: none; }
.toolbar-pill.menu-aberto .pill-btn-menu { display: flex; }

/* Largura da pílula é travada via JS (inline style, ver abrirMenuPrincipal
   no app.js) pra não encolher com menos botões visíveis — space-between
   espalha os poucos botões do menu por essa largura em vez de deixá-los
   grudados numa ponta. */
.toolbar-pill.menu-aberto { justify-content: space-between; }

#btn-toggle-sidebar.active { color: var(--accent); }

#menu-pastas-pill {
    position: fixed;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 6px;
    list-style: none;
    margin: 0;
    /* Duas contas (visão unificada + 2 seções de 5 pastas cada) passam de
       ~15 linhas — sem isso o menu cresceria pra fora da tela em vez de
       rolar. */
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

.mailbox-pill-section-label {
    padding: 10px 10px 2px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: default;
}

.mailbox-pill-item-unificado {
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--separator, rgba(127, 127, 127, 0.25));
}

.mailbox-pill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
}

.mailbox-pill-item:hover { background: var(--row-hover); }

.mailbox-pill-item.selected {
    background: var(--accent);
    color: #fff;
}

.mailbox-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.mailbox-unread {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(127, 127, 127, 0.35);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mailbox-pill-item.selected .mailbox-unread { background: rgba(255, 255, 255, 0.3); color: #fff; }

.mailbox-pill-item-nova .mailbox-name { color: var(--text-secondary); }

.mailbox-pill-item.editando {
    cursor: default;
    gap: 6px;
}
.mailbox-pill-item.editando:hover { background: transparent; }

#nova-pasta-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: var(--input-bg, rgba(127, 127, 127, 0.15));
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: 6px;
}

.nova-pasta-salvar-btn {
    flex: 0 0 auto;
    border: none;
    background: var(--accent);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nova-pasta-salvar-btn:disabled { opacity: .5; cursor: default; }

/* "Seção A" — pílula de ações + lista de e-mails, juntas, formam um
   grande cartão de vidro fosco flutuante sobre a foto de fundo (a
   pílula é position:relative a este elemento, então continua alinhada
   certinho mesmo com a margem/cantos arredondados). */
#list-pane {
    flex: 0 0 340px;
    position: relative;
    background: var(--list-bg);
    backdrop-filter: blur(var(--secoes-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--secoes-blur)) saturate(180%);
    margin: 16px;
    border-radius: 22px;
    min-width: 260px;
    max-width: 560px;
    overflow: hidden;
}

/* Arrasta pra redimensionar a lista — a borda visual (antes um
   border-right fixo em #list-pane) virou esse elemento de verdade entre
   as duas colunas, só pra ter uma área de clique/hover maior que 1px. */
#list-pane-resizer {
    flex: 0 0 5px;
    cursor: col-resize;
    position: relative;
    background: transparent;
}

#list-pane-resizer::before {
    content: "";
    position: absolute;
    inset: 0 -3px;
}

/* Área de rolagem interna — separada de #list-pane pra que a pílula de
   ações (posicionada como overlay em relação a #list-pane) não role
   junto com a lista. */
#list-scroll {
    height: 100%;
    overflow-y: auto;
}

#list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 84px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

#message-list {
    list-style: none;
    margin: 0;
    padding: 6px 8px;
}

/* Menu de filtro rápido, no modelo do Mail do macOS: balão flutuante
   translúcido com blur (mesmo tema do menu de pastas/context-menu), com
   itens de alternância (podem combinar entre si — ex: não lidas + com
   anexo) marcados por um check quando ativos.
   position: fixed (não absolute) de propósito: #list-pane tem
   overflow:hidden, e um descendente position:absolute com backdrop-filter
   dentro de um ancestral com overflow:hidden não borra corretamente (o
   menu de pastas e o menu de contexto já usam fixed por esse motivo) — a
   posição é calculada em JS a partir do botão do funil. */
#list-filter-bar {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    min-width: 170px;
    z-index: 30;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 12.5px;
    padding: 6px 10px;
    border-radius: 7px;
    cursor: pointer;
    text-align: left;
    transition: background-color .1s ease;
}

.filter-chip:hover { background: var(--row-hover); }

.filter-chip-check {
    flex: 0 0 auto;
    width: 13px;
    color: var(--accent);
    font-size: 12px;
    opacity: 0;
}

.filter-chip.active .filter-chip-check { opacity: 1; }
.filter-chip.active { font-weight: 600; }

/* Funil aceso quando algum filtro está de fato aplicado, mesmo que o
   balão esteja fechado — senão o usuário esquece que um filtro ficou
   ativo e a lista "sumida" vira um mistério. */
#btn-toggle-filter.active { color: var(--accent); }
#btn-toggle-filter.open { background: var(--row-hover); }
#btn-toggle-sort.active { color: var(--accent); }
#btn-toggle-sort.open { background: var(--row-hover); }

/* Menu de ordenação, no mesmo balão flutuante (position:fixed, calculado
   em JS) e tema vidro fosco do menu de filtro. */
#sort-menu {
    position: fixed;
    padding: 6px;
    min-width: 210px;
    z-index: 30;
}

#sort-menu-campos, #sort-menu-direcao {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sort-menu-sep {
    height: 1px;
    margin: 5px 4px;
    background: var(--border);
}

.sort-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--text-primary);
    cursor: pointer;
}

.sort-option:hover { background: var(--row-hover); }

.sort-option input[type="radio"] {
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
}

/* Linha "pílula" arredondada, como a seleção do Mail no macOS/iPadOS: sem
   divisórias entre as linhas — a própria linha selecionada (ou em hover)
   vira um retângulo arredondado, com uma pequena folga em relação às
   vizinhas e às bordas da lista. */
.msg-row {
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 2px;
    border-radius: 10px;
    cursor: default;
    position: relative;
}

/* Linha fina separando as mensagens — um pseudo-elemento com recuo (não
   uma border-bottom direta) pra não brigar com os cantos arredondados da
   "pílula" de seleção/hover. Some na última linha e em quem está
   selecionado/em hover (a pílula já basta como separação ali). */
.msg-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 26px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: var(--border);
}

.msg-row.selected::after,
.msg-row:hover::after { display: none; }

.msg-row:hover:not(.selected) { background: var(--row-hover); }

.msg-row.selected {
    background: var(--row-selected-bg);
    color: var(--row-selected-text);
}

/* Coluna à esquerda com os dois indicadores empilhados, mesmo tamanho:
   bolinha de não lida em cima, bolinha de sinalizado embaixo. Cada uma
   reserva espaço sempre (visibility, não display) para a linha não
   "pular" de altura ao ler/sinalizar. */
.msg-row-indicators {
    flex: 0 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.msg-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--unread-dot);
    visibility: hidden;
}

.msg-row-flag-dot {
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: #ff9f0a;
    visibility: hidden;
}

.msg-row.unread .msg-row-dot { visibility: visible; }
.msg-row-flag-dot.flagged { visibility: visible; }

.msg-row.selected .msg-row-dot { background: #fff; }
.msg-row.selected .msg-row-flag-dot.flagged { color: #fff; }

.msg-row-main { flex: 1 1 auto; min-width: 0; }

.msg-row-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.msg-row-sender {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-row.unread .msg-row-sender { font-weight: 700; }

.msg-row-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.msg-row-attachment {
    font-size: 11px;
    opacity: .75;
}

/* Pílula de conta (ex: "DB" pra Daniela) — mesma família visual de
   .mailbox-unread, usada tanto na lista normal (.msg-row-meta) quanto na
   conversa agrupada (.thread-item-meta). Nunca aparece pra mensagem da
   conta principal (o app só gera esse span quando há sigla_badge). */
.msg-row-badge-conta {
    flex: 0 0 auto;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.35);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-row.selected .msg-row-badge-conta { background: rgba(255, 255, 255, 0.3); color: #fff; }

.msg-row-date {
    font-size: 11px;
    color: var(--text-secondary);
}

.msg-row.selected .msg-row-date { color: var(--row-selected-secondary); }

.msg-row-subject {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.msg-row.selected .msg-row-subject { color: var(--row-selected-secondary); }

.msg-row-scope { color: var(--text-tertiary); font-style: italic; }
.msg-row.selected .msg-row-scope { color: var(--row-selected-secondary); }

#message-list .empty-hint {
    padding: 30px 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12.5px;
}

/* --- Reading pane ----------------------------------------------------- */

/* "Seção B" — pílula de ações + área de leitura, juntas, formam o mesmo
   tipo de cartão de vidro fosco flutuante da "Seção A" (#list-pane),
   sobre a mesma foto de fundo. */
#reading-pane {
    flex: 1 1 auto;
    position: relative;
    background: var(--bg);
    backdrop-filter: blur(var(--secoes-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--secoes-blur)) saturate(180%);
    margin: 16px 16px 16px 0;
    border-radius: 22px;
    overflow: hidden;
    min-width: 0;
}

/* Área de rolagem interna — separada de #reading-pane pra que a pílula de
   ações (posicionada como overlay em relação a #reading-pane) não role
   junto com o conteúdo do e-mail. */
#reading-scroll {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Pílula flutuante sobre o conteúdo: some quase totalmente ao rolar pra
   baixo (não atrapalha a leitura) e volta ao rolar pra cima, como as
   barras do Mail/Safari no iOS. pointer-events: none no wrapper pra não
   bloquear cliques/seleção de texto na área onde ela não está desenhada.
   Estado "faded" vira vidro fosco de 50% de transparência (ver regras
   de .toolbar-pill/.toolbar-pill-reading acima) em vez de opacity — os
   ícones continuam totalmente visíveis. (Posicionamento em si já
   declarado acima, junto com as 4 pílulas irmãs. #search-scope não
   precisa mais dessa regra — mora fora de #toolbar-reading-actions agora,
   não herda o pointer-events:none do pai.) */
#toolbar-reading-actions .toolbar-pill-reading {
    pointer-events: auto;
}

#reading-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

#reading-content { padding: 88px 26px 26px; }

#reading-header { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }

#reading-subject-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px;
}

#reading-subject {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reading-subject-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 6px;
    line-height: 1;
}

.reading-subject-btn:hover { background: var(--row-hover); color: var(--text-primary); }

.reading-meta-row {
    font-size: 12.5px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

#reading-from { color: var(--text-primary); font-weight: 500; }

.copiable-email { cursor: pointer; border-radius: 3px; }
.copiable-email:hover { background: var(--row-hover); text-decoration: underline; }

#reading-attachments {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-chip {
    display: inline-flex;
    align-items: stretch;
    border-radius: 8px;
    background: var(--row-hover);
    font-size: 12px;
    color: var(--text-primary);
    border: 1px solid var(--border);
    overflow: hidden;
}

.attachment-chip-open {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px 5px 10px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.attachment-chip-open:hover { background: var(--border); }

.attachment-chip-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    text-decoration: none;
    color: var(--text-secondary);
    border-left: 1px solid var(--border);
    font-size: 11px;
}
.attachment-chip-download:hover { background: var(--border); color: var(--text-primary); }

/* --- Conversa agrupada por assunto (estilo Gmail) ---------------------- */

#reading-thread {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thread-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.thread-item-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    background: var(--row-hover);
}

.thread-item-summary:hover { background: var(--border); }

.thread-item-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.thread-item-summary-text { flex: 1 1 auto; min-width: 0; }

.thread-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.thread-item-sender { font-weight: 600; font-size: 13px; }

.thread-item-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.thread-item-date { flex: 0 0 auto; font-size: 11.5px; color: var(--text-secondary); }

.thread-item-snippet {
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-item.expanded { border-color: transparent; }

/* Separador entre mensagens expandidas em sequência — precisa ser bem
   mais evidente que a linha fina do cabeçalho/corpo de CADA mensagem
   (.thread-item-header), senão confunde "nova mensagem na conversa" com
   "fim do cabeçalho desta mensagem". Mais grossa, cor mais forte, e mais
   espaço em volta. Um item colapsado entre duas expandidas já tem sua
   própria "caixa" visual, então não precisa de nada extra ali. */
.thread-item.expanded + .thread-item.expanded {
    border-top: 3px solid var(--divider-forte);
    margin-top: 18px;
    padding-top: 16px;
}

.thread-item-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.thread-item-header .thread-item-sender { font-size: 13.5px; }

.thread-item-to {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.thread-item-attachments {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.thread-item-actions {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    cursor: default;
    /* Sem espaço pra todos os botões (mobile, sobretudo com os 2 de PDF a
       mais) rola pro lado em vez de espremer — botões mantêm o tamanho
       natural (ver flex:0 0 auto abaixo), barra de rolagem escondida
       (mesmo tratamento das pílulas flutuantes). */
    overflow-x: auto;
    scrollbar-width: none;
}
.thread-item-actions::-webkit-scrollbar { display: none; }

.thread-item-action-btn {
    flex: 0 0 auto;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.thread-item-action-icon-paisagem { display: inline-block; transform: rotate(90deg); }

.thread-item-action-btn:hover { background: var(--row-hover); color: var(--text-primary); }

.thread-item-action-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.thread-item-body { padding: 14px; }

.thread-item-loading {
    padding: 14px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

#reading-body {
    font-size: 13.5px;
    line-height: 1.5;
}

#reading-body iframe {
    width: 100%;
    border: none;
    display: block;
    /* Precisa disso além do html/body:transparent injetado dentro do
       próprio documento do iframe (modo "Vidro") — sem o elemento
       <iframe> em si também declarar fundo transparente, alguns
       navegadores pintam a superfície do iframe como opaca por padrão,
       escondendo o cartão de vidro fosco do #reading-pane por trás. */
    background: transparent;
}

#reading-body pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    margin: 0;
}

/* --- Vibrancy panels: context menu + modal ---------------------------- */

.vibrancy-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

#context-menu {
    position: fixed;
    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 190px;
    z-index: 100;
}

#context-menu li {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
}

#context-menu li:hover { background: var(--accent); color: #fff; }
#context-menu li.sep { height: 1px; padding: 0; margin: 4px 2px; background: var(--border); cursor: default; }
#context-menu li.sep:hover { background: var(--border); }

/* Balão que aparece perto de qualquer seleção de texto na área de
   leitura/lista (fora de campos editáveis, que já têm seu próprio menu
   nativo de copiar/colar) — mesmo vidro fosco dos outros menus flutuantes. */
#selection-copy-bubble {
    position: fixed;
    padding: 4px;
    border-radius: 999px;
    z-index: 100;
    transform: translate(-50%, -100%);
}

#btn-copy-selection {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
}

#btn-copy-selection:hover { color: var(--accent); }

#context-menu li.has-submenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.submenu-arrow { font-size: 10px; opacity: .7; }

/* Balão de escolha de pasta pra "Mover para" — mesmo tema/posicionamento
   (position: fixed calculado em JS) dos outros balões flutuantes. */
#move-menu {
    position: fixed;
    padding: 6px;
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
}

.move-menu-item {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.move-menu-item:hover { background: var(--accent); color: #fff; }

/* --- Prévia de link (Configurações → Links) ---------------------------
   Balão de contagem que acompanha o cursor (posição calculada em JS a
   cada mousemove) e o cartão de prévia com o screenshot gerado no
   servidor — ambos top-level, mesmo motivo dos outros painéis
   flutuantes. */
#link-preview-countdown {
    position: fixed;
    z-index: 400;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    background: var(--panel-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text-primary);
    pointer-events: none;
}

#link-preview-panel {
    position: fixed;
    z-index: 400;
    width: 420px;
    max-width: calc(100vw - 24px);
    padding: 0;
    overflow: hidden;
}

#link-preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border-bottom: 1px solid var(--border);
}

#link-preview-url {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-secondary);
}

#link-preview-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.2);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#link-preview-close:hover { background: rgba(127, 127, 127, 0.35); }

#link-preview-body {
    position: relative;
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 127, 127, 0.08);
}

#link-preview-loading {
    font-size: 12.5px;
    color: var(--text-secondary);
}

#link-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* --- Prévia instantânea de anexo (imagem/PDF) ---------------------------
   Bolha pequena e quadrada que sobe a partir do próprio botão do anexo no
   hover (posição calculada em JS — ver _posicionarPreviaAnexo no app.js,
   acima/abaixo do botão conforme o espaço disponível). 240px deve bater
   com _ANEXO_PREVIA_TAMANHO no app.js. */
#attachment-preview-bubble {
    position: fixed;
    z-index: 400;
    width: 240px;
    height: 240px;
    padding: 0;
    overflow: hidden;
    pointer-events: none; /* só exibição — some ao tirar o mouse do botão, não precisa capturar clique/hover próprio */
}

#attachment-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(127, 127, 127, 0.12);
}

#attachment-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #525659;
}

/* --- Composição (responder/responder a todos/redirecionar) ------------
   Janela flutuante de verdade (não modal): não bloqueia o resto do app,
   por isso o wrapper deixa o clique atravessar (pointer-events: none) e
   só o painel em si captura interação. Nasce ancorada no canto inferior
   direito (estilo Gmail); arrastar pelo cabeçalho e maximizar mudam pra
   position posicionamento livre via JS. */
#compose-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
}

#compose-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    min-width: 380px;
    min-height: 320px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    /* Redimensionável arrastando o canto inferior direito (só no modo
       janela — maximizada não faz sentido). overflow:auto é exigência do
       CSS resize, mas na prática quem rola de verdade é #compose-corpo
       (flex:1, com seu próprio scroll) — o painel só recorre a isso se o
       usuário encolher tanto que nem o resto (cabeçalho/campos/toolbar)
       cabe mais. */
    resize: both;
    overflow: auto;
    /* Mais opaca e mais borrada que o resto do vidro fosco do app (que
       usa --panel-bg/blur(10px) globalmente) — texto que se escreve
       precisa de mais contraste que um menu que só se lê rapidamente. */
    background: var(--compose-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

#compose-panel.maximized { transition: none; resize: none; }

#compose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    cursor: move;
    user-select: none;
}

#compose-window-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

#compose-window-controls button {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 5px;
    line-height: 1;
}

#compose-window-controls button:hover { background: var(--row-hover); color: var(--text-primary); }

.compose-field {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.compose-field label {
    flex: 0 0 45px;
    font-size: 12px;
    color: var(--text-secondary);
}

.compose-field input {
    flex: 1 1 auto;
    border: none;
    background: none;
    outline: none;
    font-size: 12.5px;
    color: var(--text-primary);
    font-family: inherit;
}

/* Seletor "De" (conta remetente) — mesmo tratamento visual do campo
   Assunto, sem a aparência nativa de <select> do sistema. */
.compose-field select#compose-conta-select {
    flex: 1 1 auto;
    border: none;
    background: none;
    outline: none;
    font-size: 12.5px;
    color: var(--text-primary);
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* --- Destinatários (Para/Cc): "pílulas" + digitação, igual Gmail ------- */

.recipient-field {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.recipient-field input {
    flex: 1 1 80px;
    min-width: 80px;
}

.recipient-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 2px;
    border-radius: 999px;
    background: var(--row-hover);
    font-size: 11.5px;
    color: var(--text-primary);
    max-width: 100%;
}

.recipient-pill-avatar {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}

.recipient-pill-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-pill-remove {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
}

.recipient-pill-remove:hover { background: var(--accent); color: #fff; }

/* Menu de sugestões de contato — mesmo balão vidro fosco dos outros
   menus flutuantes, posicionado em JS sob o campo Para/Cc. */
#recipient-suggest {
    position: fixed;
    padding: 6px;
    z-index: 220;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: none;
}

#recipient-suggest::-webkit-scrollbar { display: none; }

.recipient-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.recipient-suggest-item:hover,
.recipient-suggest-item.active {
    background: var(--row-hover);
}

.recipient-suggest-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.recipient-suggest-info {
    min-width: 0;
    overflow: hidden;
}

.recipient-suggest-nome {
    font-size: 12.5px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-suggest-email {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Barra de formatação (editor rico via contenteditable + execCommand,
   sem lib externa — mantém o app sem build step) -------------------- */

#compose-toolbar, .compose-toolbar-like {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--border);
}

.fmt-dropdown-btn {
    min-width: unset;
    padding: 0 8px;
    font-size: 11.5px;
    gap: 4px;
}

/* Menu flutuante de fontes: mesmo balão vidro fosco do #sort-menu,
   posicionado em JS (position:fixed) sob o botão de fonte. */
#fmt-font-family-menu {
    position: fixed;
    padding: 6px;
    min-width: 150px;
    z-index: 220;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fmt-font-family-option {
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 12.5px;
}

.fmt-size-a {
    display: inline-block;
    font-weight: 600;
    line-height: 1;
}

.fmt-size-a-sm { font-size: 10px; }
.fmt-size-a-lg { font-size: 15px; }

.compose-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 3px;
}

.fmt-btn {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.fmt-btn:hover { background: var(--row-hover); }
.fmt-btn.active { background: var(--accent); color: #fff; }

#fmt-remove { text-decoration: line-through; }

#fmt-color-swatch {
    width: 12px;
    height: 3px;
    border-radius: 1px;
    background: #000;
}

/* --- Corpo do e-mail: contenteditable no lugar do textarea antigo ----- */

#compose-corpo {
    flex: 1 1 280px;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: var(--compose-corpo-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    outline: none;
}

#compose-corpo:empty::before {
    content: "Escreva sua mensagem…";
    color: var(--text-tertiary);
}

#compose-corpo.drag-over, #settings-assinatura.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--accent) 10%, var(--compose-corpo-bg));
}

#compose-corpo img, #settings-assinatura img { max-width: 100%; border-radius: 4px; }

#compose-corpo img.img-selecionada, #settings-assinatura img.img-selecionada {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Barra flutuante de tamanho da imagem (igual ao Gmail): aparece logo
   abaixo da imagem selecionada, mesmo vidro fosco dos outros menus. */
#img-toolbar {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    z-index: 220;
}

.img-size-btn {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
}

.img-size-btn:hover { background: var(--row-hover); }

/* Alça de arraste no canto inferior direito da imagem selecionada, pra
   redimensionar livremente com o mouse (mantendo a proporção). */
#img-resize-handle {
    position: fixed;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--accent);
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    cursor: nwse-resize;
    z-index: 220;
}

#compose-corpo blockquote {
    margin: 6px 0;
    padding: 4px 10px;
    border-left: 3px solid var(--border);
    color: var(--text-secondary);
}

/* --- Anexos (arquivos de verdade, não imagem inline no corpo) --------- */

#compose-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#compose-attachments-list:empty { display: none; }

.compose-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: var(--row-hover);
    border: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-primary);
}

.compose-attachment-chip button {
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 50%;
}

.compose-attachment-chip button:hover { background: var(--border); color: var(--text-primary); }

#compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#compose-actions-left, #compose-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compose-icon-btn {
    border: none;
    border-radius: 7px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
}

.compose-icon-btn:hover { background: var(--row-hover); color: var(--text-primary); }

#compose-actions-right button {
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 12.5px;
    cursor: pointer;
    background: var(--row-hover);
    color: var(--text-primary);
}

#compose-actions-right button.primary { background: var(--accent); color: #fff; }
#compose-actions-right button.danger { background: var(--danger); color: #fff; }

/* Abas flutuantes dos e-mails minimizados — empilhadas lado a lado no
   canto onde a janela de composição normalmente fica ancorada, uma pra
   cada rascunho parado em standby (igual várias composições minimizadas
   ao mesmo tempo no Gmail). */
#compose-minimized-list {
    position: fixed;
    right: 24px;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    z-index: 200;
}

.compose-minimized-item {
    width: 220px;
    padding: 10px 12px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--panel-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.compose-minimized-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-minimized-close {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 5px;
}

.compose-minimized-close:hover { background: var(--row-hover); color: var(--text-primary); }

/* --- Configurações (assinatura + imagem de fundo) ---------------------
   Mesmo vidro fosco da janela de composição (--compose-bg + blur 24px) —
   só que sem arrastar/minimizar/maximizar, é um modal simples. */
#settings-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
}

#settings-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto;
    background: var(--compose-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

#settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
}

#settings-close {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

#settings-close:hover { background: var(--row-hover); color: var(--text-primary); }

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-section label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.settings-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-slider-row input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--accent);
}

.settings-slider-valor {
    flex: 0 0 auto;
    min-width: 38px;
    text-align: right;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
}

.settings-toggle-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.settings-toggle-row.disabled {
    opacity: .5;
    cursor: default;
}

.settings-toggle-row.disabled input { cursor: default; }

#settings-assinatura {
    min-height: 100px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: var(--compose-corpo-bg);
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.5;
}

#settings-assinatura-actions {
    display: flex;
    justify-content: flex-end;
}

#settings-salvar-assinatura,
#settings-fundo-btn {
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

#settings-fundo-btn {
    background: var(--row-hover);
    color: var(--text-primary);
    font-weight: 400;
}

#settings-fundo-btn:hover { background: var(--accent); color: #fff; }

#settings-fundo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#settings-fundo-preview {
    width: 84px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--row-hover);
}

#settings-fundo-preview.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--compose-bg), 0 0 0 4px var(--accent);
}

.settings-aviso {
    font-size: 11px;
    color: var(--text-tertiary);
}

#settings-cores-fundo {
    display: flex;
    gap: 10px;
}

.cor-fundo-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
}

.cor-fundo-swatch:hover { border-color: var(--text-secondary); }

.cor-fundo-swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--compose-bg), 0 0 0 4px var(--accent);
}

#settings-corpo-email-fundo {
    display: flex;
    gap: 6px;
}

.corpo-email-fundo-opcao {
    flex: 1 1 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    padding: 7px 0;
    border-radius: 8px;
    cursor: pointer;
}

.corpo-email-fundo-opcao:hover { background: var(--row-hover); }

.corpo-email-fundo-opcao.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --- Modelos de resposta (canned responses) ---------------------------
   Empilhados à direita da janela de composição, cada um é seu próprio
   retângulo de vidro fosco (mesmas configurações da própria janela:
   --compose-bg + blur 24px) — pequeno de propósito (só 2 linhas de
   texto, ~20 caracteres de largura), com scroll vertical se não couberem
   todos na altura da janela, sem barra de rolagem visível. */
#templates-panel {
    position: fixed;
    z-index: 210;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: none;
}

#templates-panel::-webkit-scrollbar { display: none; }

/* Composição maximizada: cards em linha embaixo da janela em vez de
   empilhados do lado (não sobra espaço nas laterais) — mesmo scroll sem
   barra visível, só que no eixo horizontal. */
#templates-panel.horizontal {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Mobile: composição em tela cheia, sem espaço do lado — os cards viram
   lista vertical de largura cheia entre a toolbar e a barra de ações
   (que precisa continuar visível/clicável embaixo). */
#templates-panel.mobile-lista {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

#templates-panel.mobile-lista .template-card {
    width: 100%;
}

.template-card {
    flex: 0 0 auto;
    position: relative;
    width: 210px;
    height: 84px;
    padding: 6px 8px;
    border-radius: 12px;
    background: var(--compose-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    cursor: pointer;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.template-card:hover { outline: 1.5px solid var(--accent); }

.template-card-titulo {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.template-card-corpo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-secondary);
}

.template-card-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: none;
    background: var(--row-hover);
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.template-card:hover .template-card-remove { display: flex; }
.template-card-remove:hover { background: var(--danger); color: #fff; }

/* Alertas desfazíveis (exclusão e envio): somem sozinhos depois de um
   tempo, representado pela barra abaixo do texto encolhendo — o mesmo
   vidro fosco dos outros balões. Estilo compartilhado via classe; cada
   balão só difere na posição (pra empilhar se os dois aparecerem juntos)
   e na duração da contagem (5s exclusão / 30s envio). */
.undo-toast-panel {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    padding: 10px 12px 8px;
    border-radius: 12px;
    z-index: 300;
    color: var(--text-primary);
}

#undo-toast { bottom: 32px; }
/* Mais largo que o padrão de 300px (herdado de .undo-toast-panel) — este
   balão tem um botão a mais ("Enviar agora" além de "Desfazer"), então
   precisa de mais espaço pros dois caberem sem espremer demais a
   mensagem/endereço truncado à esquerda. */
#send-undo-toast { bottom: 96px; width: 360px; }

.undo-toast-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.undo-toast-message {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.undo-toast-btn {
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--toast-btn-color);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.undo-toast-btn:hover { text-decoration: underline; }

.undo-toast-track {
    margin-top: 8px;
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
}

.undo-toast-bar {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: #fff;
}

.undo-toast-bar.counting {
    animation: undo-contagem 5s linear forwards;
}

#send-undo-toast-bar.counting {
    animation-duration: 30s;
}

@keyframes undo-contagem {
    from { width: 100%; }
    to { width: 0%; }
}

#toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 12.5px;
    z-index: 300;
    background: var(--panel-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text-primary);
}

/* Indicador indeterminado (spinner) — só some quando o toast está em
   modo "progresso" (ver toastProgresso() no app.js); operação real no
   servidor (IMAP), duração desconhecida, então nada de barra com tempo
   fixo aqui (isso já existe no #undo-toast, que é outro caso: contagem
   regressiva conhecida de 5s). */
.toast-spinner {
    display: none;
    width: 11px;
    height: 11px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    flex: 0 0 auto;
    animation: toast-spin .7s linear infinite;
}
#toast.progresso .toast-spinner { display: inline-block; }

@keyframes toast-spin {
    to { transform: rotate(360deg); }
}

/* --- Barra de rolagem "overlay": invisível em repouso, só aparece ao
   passar o mouse sobre a própria área rolável (estilo macOS) -----------
   Regra global (*) em vez de listar cada painel — cobre qualquer área
   rolável nova sem precisar lembrar de adicionar aqui. Painéis que
   preferem ficar SEMPRE sem barra (ex: .toolbar-pill, #templates-panel)
   têm suas próprias regras com scrollbar-width:none, mais específicas
   que esta e por isso preservadas. */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

*:hover {
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }

*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

*:hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); }

*::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }

[hidden] { display: none !important; }

/* --- Impressão / "Baixar em PDF" (destino "Salvar como PDF" do navegador,
   sem depender de nada no servidor) --------------------------------- */
@media print {
    /* Tudo que é UI de app (menus flutuantes, pílulas, overlays) some —
       só o conteúdo do e-mail deve sair no papel/PDF. Lista atualizada
       junto com cada painel flutuante novo adicionado depois (vidro
       fosco/fundo com foto, configurações, etc.), senão eles vazam pro
       impresso como retângulos cinza/translúcidos sem sentido no papel. */
    #menu-pastas-pill, #list-pane, #list-pane-resizer,
    #toolbar-reading-actions, #context-menu, #move-menu, #sort-menu,
    #list-filter-bar, #undo-toast, #send-undo-toast, #toast, #compose-overlay,
    #compose-minimized-list, #templates-panel, #login-overlay, #settings-overlay,
    #recipient-suggest, #img-toolbar, #img-resize-handle, #fmt-font-family-menu,
    #link-preview-countdown, #link-preview-panel, #attachment-preview-bubble {
        display: none !important;
    }

    * {
        /* backdrop-filter não é confiável em impressão (alguns navegadores
           mostram o retângulo desfocado sem o conteúdo real por trás) —
           mata em tudo, junto com sombra/cantos arredondados dos cartões
           flutuantes, que não fazem sentido numa folha branca. */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html, body {
        background: #fff !important;
        background-image: none !important;
        overflow: visible;
    }

    #app, #main { display: block; height: auto; }

    #reading-pane {
        position: static;
        overflow: visible;
        height: auto;
        margin: 0;
        border-radius: 0;
        background: #fff;
    }

    #reading-scroll {
        display: block;
        height: auto;
        overflow: visible;
    }

    #reading-content { padding: 0; color: #000; }

    /* Formato de documento (Gmail/Apple Mail ao imprimir/exportar): sem os
       cartões arredondados/avatares coloridos da tela — cabeçalho simples
       (remetente em negrito + data à direita, "Para:" abaixo), uma linha
       fina separando do corpo, e um divisor mais forte só entre mensagens
       diferentes de uma conversa agrupada. */
    @page { margin: 18mm 16mm; }

    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

    #reading-subject {
        font-size: 21px;
        font-weight: 600;
        color: #000;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    #reading-header {
        border-bottom: 1px solid #ddd;
        break-inside: avoid;
    }

    .reading-meta-row { color: #555; }
    #reading-from { color: #000; font-weight: 600; }

    .attachment-chip, .thread-item-attachments .attachment-chip {
        background: none;
        border: 1px solid #ccc;
        color: #333;
    }

    .thread-item.collapsed { display: none; }
    .thread-item-actions { display: none; }
    .thread-item-avatar { display: none; }
    .reading-subject-btn { display: none; }

    #reading-thread { gap: 0; }

    .thread-item {
        border: none;
        border-radius: 0;
    }

    .thread-item-summary { background: none; padding: 8px 0; }

    .thread-item-header {
        padding: 10px 0 8px;
        border-bottom: 1px solid #ddd;
        break-inside: avoid;
    }

    .thread-item-sender { color: #000; }
    .thread-item-date, .thread-item-to { color: #555; }

    .thread-item-body { padding: 10px 0 0; }

    /* Divisor entre mensagens DIFERENTES da conversa — mais discreto que
       na tela (linha fina, não a barra grossa usada pra chamar atenção
       num feed rolável; no papel a quebra de página já ajuda a separar). */
    .thread-item.expanded + .thread-item.expanded {
        border-top: 1px solid #bbb;
        margin-top: 16px;
        padding-top: 14px;
    }
}

/* --- Login (senha do app, expira à meia-noite) ------------------------- */

#login-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Mesmo esquema de véu ajustável do body (ver --fundo-imagem-opacidade
       em :root) — opacity aqui embaixo já está ocupada pelo fade-in de
       entrada (.visible), por isso o controle da foto é uma camada de
       fundo separada, não a opacity do próprio elemento. */
    /* Fundo próprio da Flix: wallpaper laranja/vermelho com um véu escuro
       por cima (pra logo branco, texto e os campos escuros continuarem
       legíveis sobre a imagem clara). */
    background-color: #0a0b0d;
    background-image:
        linear-gradient(rgba(8, 9, 11, 0.42), rgba(8, 9, 11, 0.68)),
        url("flix-bg.jpg");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Relógio estilo tela de bloqueio: data e hora grandes, peso leve, direto
   sobre o fundo. Fica NO FLUXO da coluna (não mais position:absolute) —
   assim empilha com o logo/boas-vindas/formulário separados por gap e
   NUNCA sobrepõe, em qualquer tamanho de tela (o absoluto fazia o logo,
   centralizado no meio, subir por cima dos números). */
#login-clock {
    z-index: 1;
    text-align: center;
    color: #fff;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
}

#login-data {
    font-size: 33px;
    font-weight: 400;
    color: transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55));
    -webkit-background-clip: text;
    background-clip: text;
}

/* "Vidro fosco" de verdade: o texto vira uma janela recortada no formato
   das letras, mostrando uma versão borrada do que está atrás — mesma
   técnica de backdrop-filter usada nos painéis, só que recortada em
   forma de texto (background-clip: text + color: transparent). */
/* backdrop-filter não respeita background-clip: text — borra o retângulo
   inteiro do elemento, não só o formato das letras (era o "halo" ao
   redor dos números). Sem backdrop-filter, só um preenchimento
   translúcido recortado no texto: efeito vidro só nos caracteres. */
#login-hora {
    font-size: 164px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    color: transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Os tamanhos "normais" foram calibrados pra bater com a largura da data
   numa tela grande — numa tela de celular esse mesmo tamanho estoura a
   largura da viewport e corta a hora dos dois lados. Reduz proporcional
   (mesmo fator nos dois), então a relação de largura entre data/hora
   continua igual, só menor. */
@media (max-width: 480px) {
    /* No celular o relógio SAI do posicionamento absoluto (que fazia ele
       flutuar no topo e o logo, centralizado no meio, subir por cima dele)
       e entra no FLUXO NORMAL: tudo empilha de cima pra baixo — relógio,
       logo, boas-vindas, formulário — sem sobreposição. O overlay passa a
       alinhar pelo topo (com folga da área segura) em vez de centralizar. */
    #login-overlay {
        justify-content: flex-start;
        padding-top: calc(env(safe-area-inset-top) + 6vh);
        padding-bottom: 24px;
        gap: 14px;
    }
    #login-clock {
        position: static;
        transform: none;
    }
    #login-data { font-size: 19px; }
    /* 88px cabe "08:37" com folga numa tela de ~360px de largura, sem
       cortar dos lados nem estourar a largura da viewport. */
    #login-hora { font-size: 88px; letter-spacing: -1px; }
    #login-logo { width: 132px; margin-bottom: 0; }
}

#login-overlay.visible {
    opacity: 1;
}

#login-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}

#login-logo {
    position: relative;
    z-index: 1;
    width: 168px;
    height: auto;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.55));
}

#login-panel {
    position: relative;
    z-index: 1;
    width: 260px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

#login-welcome {
    position: relative;
    z-index: 1;
    width: 260px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

#login-unread {
    position: relative;
    z-index: 1;
    width: 260px;
    margin-top: -12px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

#login-panel input {
    border: 1px solid var(--border);
    background: var(--row-hover);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
}

/* Campo de senha com botão de "olho" pra revelar o que foi digitado. */
.login-senha-wrap { position: relative; display: flex; align-items: center; }
.login-senha-wrap #login-senha { flex: 1 1 auto; width: 100%; padding-right: 38px; }
.login-olho {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 15px;
    line-height: 1;
    opacity: 0.6;
}
.login-olho:hover { opacity: 1; }

/* --- Configurações: contas na visão unificada --- */
#ce-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 8px; }
#conta-extra-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ce-senha-wrap { position: relative; display: flex; align-items: center; }
.ce-senha-wrap #ce-senha { flex: 1 1 auto; width: 100%; padding-right: 38px; }
.ce-manual-grid { display: grid; grid-template-columns: 1fr 90px; gap: 8px; }
#contas-extras-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ce-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.ce-item-badge {
    flex: 0 0 auto; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ce-item-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-primary); }
.ce-item-remover { flex: 0 0 auto; border: none; background: transparent; color: var(--danger); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; }
.ce-item-remover:hover { background: var(--row-hover); }

#login-erro {
    font-size: 11.5px;
    color: var(--danger);
}

#login-panel button {
    margin-top: 4px;
    border: none;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease;
}

#login-panel button:hover { filter: brightness(1.08); }
#login-panel button:active { filter: brightness(0.94); }
#login-manter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}
#login-manter input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ===========================================================================
   Mobile — lista e leitura não cabem lado a lado numa tela estreita, então
   viram navegação em coluna única (toca numa mensagem → abre a leitura →
   botão "‹" volta pra lista), igual o Mail do iPhone. A sidebar já era um
   overlay flutuante (não precisa mudar). Alvos de toque maiores em toda
   parte, e a composição vira uma folha em tela cheia em vez de janela
   flutuante arrastável/redimensionável (não faz sentido no touch).
   =========================================================================== */
#btn-back-list { display: none; }
#btn-search-mobile { display: none; }
#btn-fechar-busca-mobile { display: none; }

@media (max-width: 820px) {
    #btn-back-list { display: inline-flex; }
    #btn-search-mobile { display: inline-flex; }

    /* Busca da Seção B some no mobile — em troca, o botão de lupa na
       pílula da Seção A (ao lado do filtro) transforma a PRÓPRIA pílula
       da lista num campo de busca. Implementado MOVENDO de verdade
       #toolbar-pill-search-wrap pro DOM da pílula da Seção A (ver JS),
       não só posicionando por cima — #toolbar-pill-search-wrap mora
       dentro de #reading-pane, que fica display:none no mobile enquanto
       a lista está sendo mostrada, e display:none em qualquer ancestral
       esconde TUDO por dentro, mesmo position:fixed. Só relocando de
       verdade escapa disso. */
    #toolbar-pill-search-wrap { display: none; }

    #toolbar-pill-search-wrap.busca-mobile-ativa {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1 1 auto;
        width: 100%;
    }

    #toolbar-pill-search-wrap.busca-mobile-ativa #btn-fechar-busca-mobile {
        display: inline-flex;
    }

    #toolbar-pill-search-wrap.busca-mobile-ativa .toolbar-pill-search {
        flex: 1 1 auto;
        min-width: 0;
    }

    #toolbar-pill-search-wrap.busca-mobile-ativa #search-wrap {
        width: 100%;
    }

    #toolbar-actions .toolbar-pill.busca-mobile-ativa > *:not(#toolbar-pill-search-wrap) {
        display: none;
    }

    #list-pane-resizer { display: none; }

    /* Mesmo tratamento "full-bleed" da Seção B no mobile: sem margem
       lateral nem cantos arredondados — a tela já é estreita, o cartão
       flutuante (pensado pro desktop) só desperdiçava largura.

       margin-top soma env(safe-area-inset-top) — o app roda em tela
       cheia de verdade (ver manifest.json "display": "fullscreen"), sem
       o SO reservando espaço pra barra de status/notch sozinho; sem essa
       folga extra, a pílula de botões ficaria por baixo do notch/relógio
       em vez de só logo abaixo dele. env() resolve pra 0 em telas sem
       notch/quando não está em tela cheia, então não muda nada nesses
       casos. */
    #list-pane {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        margin: calc(8px + env(safe-area-inset-top)) 0 8px;
        border-radius: 0;
    }

    #reading-pane { display: none; }

    #main.mostrando-leitura #list-pane { display: none; }
    /* Sem margem lateral nem cantos arredondados no mobile: a tela já é
       estreita, então o cartão flutuante (pensado pra desktop, com
       espaço de sobra ao redor) só desperdiçava largura — importante
       agora que a Seção B tem pílulas irmãs disputando espaço horizontal.
       Mesma folga de área segura no topo que #list-pane, acima. */
    #main.mostrando-leitura #reading-pane {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        margin: calc(8px + env(safe-area-inset-top)) 0 8px;
        border-radius: 0;
    }

    #menu-pastas-pill { max-width: calc(100vw - 16px); }

    /* Apple recomenda mínimo de 44px de alvo de toque — os ícones em si
       continuam do mesmo tamanho visual, só a área clicável cresce. */
    .toolbar-btn {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    /* Pílula da Seção A 20% menor que as demais no mobile — sobra só o
       grupo essencial (pastas/nova/atualizar/lida/sinalizar/excluir),
       filtrar/ordenar/configurações/sair mudaram pro menu de pastas. */
    #toolbar-actions .toolbar-btn {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    #toolbar-actions .toolbar-pill {
        padding: 4px;
        gap: 2px;
    }

    /* A pílula fica mais alta com os alvos de toque maiores — sem folga
       extra ela ficava "encavalada" em cima do título da pasta (ENTRADA)
       logo abaixo. */
    #list-header { padding-top: 114px; }

    /* As 4 pílulas irmãs da Seção B, 20% menores no mobile (mesmo ajuste
       da Seção A). Cada pílula individual usa o tamanho INTEIRO, sem
       encolher nem rolar por dentro — quem rola é o conjunto inteiro
       (#toolbar-reading-actions), não cada pílula sozinha, senão os
       botões ficam "deslizando" escondidos dentro da própria pílula. */
    #toolbar-reading-actions .toolbar-btn {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    #toolbar-reading-actions .toolbar-btn-texto {
        width: auto;
        padding: 0 13px;
        font-size: 14px;
    }

    #toolbar-reading-actions .toolbar-pill-reading {
        padding: 4px;
        gap: 2px;
        max-width: none;
        overflow-x: visible;
        flex-shrink: 0;
    }

    /* Testa maior no mobile (botões maiores) — alinhamento à esquerda já
       é o padrão base agora (ver regra não-mobile acima). */
    #toolbar-reading-actions {
        top: 28px;
    }

    /* Menos respiro lateral no mobile — com a tela já estreita, os 26px
       de cada lado (pensados pro cartão flutuante do desktop) comiam
       quase 15% da largura disponível pro corpo do e-mail em si. */
    #reading-content { padding: 100px 14px 26px; }

    /* Assunto completo no mobile, mesmo que precise quebrar em mais de
       uma linha — sem cortar com "...". Linha mais compacta (line-height
       menor) pra quebrar sem tomar espaço vertical demais, sem diminuir
       a fonte. */
    #reading-subject {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.18;
    }

    #reading-subject-row { align-items: flex-start; }
    .reading-subject-btn { margin-top: 1px; }

    /* Botões de ação de cada mensagem da conversa (responder/responder a
       todos/redirecionar/sinalizar/imprimir/PDF retrato/PDF paisagem): só
       ícone no mobile, sem a legenda. Com 7 botões não cabe mais espremer
       tudo em partes iguais (ficava ilegível) — cada um mantém um tamanho
       fixo de toque confortável e a fileira rola pro lado (arrasta) se
       não couber, em vez de encolher (overflow-x já em .thread-item-actions
       na regra base). */
    .thread-item-action-label { display: none; }

    .thread-item-actions { gap: 4px; }

    .thread-item-action-btn {
        flex: 0 0 auto;
        min-width: 44px;
        padding: 10px 0;
        font-size: 17px;
        text-align: center;
    }

    .fmt-btn { min-width: 32px; height: 32px; }
    .img-size-btn { min-width: 30px; height: 30px; }
    .filter-chip, .scope-btn { padding: 9px 12px; }
    .mailbox-item { padding: 9px 8px; }
    .recipient-pill-remove { width: 20px; height: 20px; }
    .template-card-remove { width: 20px; height: 20px; }
    .sort-option { padding: 9px 10px; }
    .move-menu-item { padding: 9px 10px; }

    /* Composição: folha em tela cheia — sem centralizar, arrastar ou
       redimensionar, que não fazem sentido em touch. */
    #compose-panel {
        position: fixed;
        inset: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        resize: none;
    }

    #compose-header { cursor: default; }
    #compose-maximize { display: none; }

    #compose-minimized-list {
        left: 8px;
        right: 8px;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .compose-minimized-item { width: auto; }

    #templates-panel { max-width: calc(100vw - 16px); }

    /* As pílulas de ação (lista e leitura) têm ícones demais pra caber
       numa tela de telefone com os alvos de toque maiores — em vez de
       cortar/esconder algum, deixa rolar horizontalmente. */
    .toolbar-pill {
        max-width: calc(100vw - 16px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .toolbar-pill::-webkit-scrollbar { display: none; }

    #search-wrap { width: 135px; height: 48px; }
    #search-wrap:focus-within { width: 210px; }
}

/* ===========================================================================
   MOBILE — navegação padrão iPhone: Caixas → Lista → Leitura
   Uma tela por vez, em tela cheia, sem as pílulas de vidro flutuantes do
   desktop (que não cabiam e transbordavam a largura). #app[data-mnav]
   decide qual tela aparece; o app.js troca esse atributo.
   =========================================================================== */
@media (max-width: 820px) {
    /* Trava definitiva contra transbordo horizontal (a página inteira
       chegava a ficar mais larga que a tela e cortava "ENTRADA" pela
       esquerda). */
    html, body, #app { max-width: 100%; overflow-x: hidden; }

    /* --- comutação de telas por nível --- */
    #app[data-mnav="caixas"] #main { display: none; }
    #app[data-mnav="caixas"] #m-caixas { display: flex; }
    #app:not([data-mnav="caixas"]) #m-caixas { display: none; }

    /* --- Tela CAIXAS (lista de pastas em tela cheia) --- */
    #m-caixas {
        position: fixed;
        inset: 0;
        z-index: 40;
        flex-direction: column;
        background: var(--bg-body);
        padding-top: env(safe-area-inset-top);
    }

    #m-caixas-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 16px 10px;
        flex: 0 0 auto;
    }

    #m-caixas-titulo {
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.6px;
        color: var(--text-primary);
    }

    .m-caixas-bar-acoes { display: flex; gap: 4px; }

    .m-bar-btn {
        width: 46px;
        height: 46px;
        border: none;
        background: transparent;
        color: var(--accent);
        font-size: 22px;
        cursor: pointer;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .m-bar-btn:active { background: var(--row-hover); }

    #m-caixas-list {
        list-style: none;
        margin: 0;
        padding: 4px 16px calc(40px + env(safe-area-inset-bottom));
        overflow-y: auto;
        flex: 1 1 auto;
        -webkit-overflow-scrolling: touch;
    }

    .m-caixa-secao {
        padding: 20px 4px 6px;
        color: var(--text-tertiary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .m-caixa-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 15px 6px;
        min-height: 44px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        cursor: pointer;
        font-size: 17px;
    }
    .m-caixa-item:active { background: var(--row-hover); }

    .m-caixa-ico { flex: 0 0 auto; width: 30px; text-align: center; font-size: 21px; }
    .m-caixa-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .m-caixa-item.sel .m-caixa-nome { color: var(--accent); font-weight: 700; }

    .m-caixa-badge {
        flex: 0 0 auto;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 11px;
        background: var(--accent);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .m-caixa-chevron { flex: 0 0 auto; color: var(--text-tertiary); font-size: 22px; line-height: 1; }

    /* A pílula de ações da Lista não pode passar da largura da tela — trava
       em 100% da área útil e rola por dentro se faltar espaço (já tem
       overflow-x:auto na regra base do mobile). */
    #toolbar-actions { left: 0; right: 0; padding: 0 8px; box-sizing: border-box; }
    #toolbar-actions .toolbar-pill { max-width: 100%; }
}