/*
 * KevaPanel — tema "Grafite" do webmail (mail-33).
 *
 * Por cima do Elastic no modo escuro (o plugin kevapanel_tema põe `dark-mode kv-grafite` no <html>
 * de toda página, inclusive nos iframes). Só seletores do layout do Elastic, nenhum template copiado:
 * tela que não está aqui herda o escuro do Elastic com as cores abaixo.
 *
 * A cor de destaque vem do plugin (--kv-accent, a cor da marca ou o azul padrão); o resto sai dela.
 */

html.kv-grafite {
    --kv-accent: #2941ca;
    --kv-accent-text: color-mix(in srgb, var(--kv-accent) 55%, #fff);
    --kv-accent-dim: color-mix(in srgb, var(--kv-accent) 30%, #0d111c);
    --kv-accent-row: color-mix(in srgb, var(--kv-accent) 16%, #131826);
    --kv-bg: #0d111c;
    --kv-rail: #090c15;
    --kv-side: #0f1420;
    --kv-panel: #131826;
    --kv-card: #151b2a;
    --kv-hover: #1a2134;
    --kv-line: #232b40;
    --kv-line-soft: #1c2335;
    --kv-text: #e8eaf2;
    --kv-muted: #9aa2b9;
    --kv-radius: 12px;
    color-scheme: dark;
    scrollbar-color: #2a3349 transparent;
}

html.kv-grafite.dark-mode body {
    background-color: var(--kv-bg);
    color: var(--kv-text);
}

html.kv-grafite.dark-mode a,
html.kv-grafite.dark-mode .btn-link {
    color: var(--kv-accent-text);
}

html.kv-grafite.dark-mode ::-webkit-scrollbar-track { background-color: transparent; }
html.kv-grafite.dark-mode ::-webkit-scrollbar-thumb { background-color: #2a3349; border-radius: 6px; }

/* ---------------------------------------------------------------- barra de ícones (taskmenu) */

html.kv-grafite.dark-mode #layout-menu {
    background: var(--kv-rail);
    border-right: 1px solid var(--kv-line-soft);
}

html.kv-grafite.dark-mode #logo { opacity: 1; }

/* sempre escuro: sem o botão de claro/escuro */
html.kv-grafite #taskmenu a.theme { display: none !important; }

@media screen and (min-width: 481px) {
    html.kv-grafite.dark-mode #layout-menu .popover-header { padding: 14px 0 6px; }

    /* só ícones (o nome vira dica, pelo grafite.js, e continua para leitor de tela) */
    html.kv-grafite.dark-mode #taskmenu a {
        color: var(--kv-muted);
        width: 48px;
        height: 48px;
        min-height: 0;
        margin: 6px auto;
        padding: 0;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color .12s, color .12s;
    }

    html.kv-grafite.dark-mode #taskmenu a:before {
        margin: 0;
        font-size: 1.15rem;
        line-height: 1;
        width: auto;
        height: auto;
    }

    html.kv-grafite.dark-mode #taskmenu a span.inner {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    html.kv-grafite.dark-mode #taskmenu .special-buttons { padding-bottom: 10px; }

    /* a coluna de baixo é absoluta: margem fixa no lugar do auto, para ficar na barra */
    html.kv-grafite.dark-mode #taskmenu .special-buttons a { margin: 6px 15px; }

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

    html.kv-grafite.dark-mode #taskmenu a.selected,
    html.kv-grafite.dark-mode #taskmenu a.selected:hover {
        color: var(--kv-accent-text);
        background: var(--kv-accent-dim);
    }

    html.kv-grafite.dark-mode #taskmenu .action-buttons a,
    html.kv-grafite.dark-mode #taskmenu .action-buttons a:hover {
        color: #fff;
        background: var(--kv-accent);
        margin-bottom: 18px;
        box-shadow: 0 6px 18px color-mix(in srgb, var(--kv-accent) 35%, transparent);
    }

    html.kv-grafite.dark-mode #taskmenu .action-buttons a:hover { filter: brightness(1.12); }

    html.kv-grafite.dark-mode #taskmenu .special-buttons { background: transparent !important; }

    html.kv-grafite.dark-mode #taskmenu a.logout { color: #f87171 !important; background: transparent; }
    html.kv-grafite.dark-mode #taskmenu a.logout:hover { color: #fca5a5 !important; background: var(--kv-hover); }
}

/* ---------------------------------------------------------------- colunas */

html.kv-grafite.dark-mode #layout-sidebar {
    background: var(--kv-side);
    border-right: 1px solid var(--kv-line-soft);
}

html.kv-grafite.dark-mode #layout-list {
    background: var(--kv-bg);
    border-right: 1px solid var(--kv-line-soft);
}

html.kv-grafite.dark-mode #layout-content { background: var(--kv-bg); }

html.kv-grafite.dark-mode #layout > div > .header,
html.kv-grafite.dark-mode #layout > div > .footer {
    border-color: var(--kv-line-soft);
    background: transparent;
}

html.kv-grafite.dark-mode #layout > div > .header .header-title {
    font-weight: 600;
    color: var(--kv-text);
}

html.kv-grafite.dark-mode #messagelist-header .header-title { font-size: 1.25rem; letter-spacing: -.01em; }

html.kv-grafite.dark-mode #layout > div > .header a.button,
html.kv-grafite.dark-mode #layout > div > .header .toolbar a,
html.kv-grafite.dark-mode #layout > div > .footer a.button {
    color: var(--kv-muted);
    border-radius: 10px;
}

html.kv-grafite.dark-mode #layout > div > .header a.button:not(.disabled):hover,
html.kv-grafite.dark-mode #layout > div > .header .toolbar a:not(.disabled):hover {
    color: var(--kv-text);
    background: var(--kv-hover);
}

html.kv-grafite.dark-mode #layout > div > .header .toolbar a.disabled { opacity: .45; }

html.kv-grafite.dark-mode .column-resizer { background: transparent; }

/* ---------------------------------------------------------------- pastas */

html.kv-grafite.dark-mode #layout-sidebar .header .header-title {
    font-size: .85rem;
    font-weight: 500;
    color: var(--kv-muted);
}

html.kv-grafite.dark-mode #layout-sidebar .listing li,
html.kv-grafite.dark-mode #layout-sidebar .listing li a {
    border: 0;
}

html.kv-grafite.dark-mode #layout-sidebar .scroller { padding: 6px 0; }

html.kv-grafite.dark-mode #layout-sidebar .listing > li > a,
html.kv-grafite.dark-mode #layout-sidebar .treelist li a {
    color: #b4bbcf;
    margin: 2px 12px;
    border-radius: 10px;
}

html.kv-grafite.dark-mode #layout-sidebar .listing li:not(.selected) > a:hover,
html.kv-grafite.dark-mode #layout-sidebar .listing li:not(.selected) > div > a:hover {
    background: var(--kv-hover);
    color: var(--kv-text);
}

html.kv-grafite.dark-mode #layout-sidebar .listing li.selected {
    background: transparent;
}

html.kv-grafite.dark-mode #layout-sidebar .listing li.selected > a,
html.kv-grafite.dark-mode #layout-sidebar .listing li.selected > div > a {
    background: var(--kv-hover);
    color: #f2f4fa;
    font-weight: 600;
}

html.kv-grafite.dark-mode #layout-sidebar .listing li .unreadcount {
    background: #1f2638;
    color: #c5cbdb;
    border-radius: 10px;
    font-weight: 600;
}

html.kv-grafite.dark-mode #layout-sidebar .listing li.selected .unreadcount {
    background: var(--kv-accent);
    color: #fff;
}

html.kv-grafite.dark-mode #layout-sidebar .listing li.droptarget { background: var(--kv-accent-dim); }

/* espaço usado */
html.kv-grafite.dark-mode .quota-widget { color: var(--kv-muted); }
html.kv-grafite.dark-mode .quota-widget .bar { background: #1f2638; border: 0; border-radius: 3px; height: 6px; }
html.kv-grafite.dark-mode .quota-widget .bar .value { background: var(--kv-accent-text); border-radius: 3px; }

/* ---------------------------------------------------------------- busca */

html.kv-grafite.dark-mode #layout-list .searchbar {
    margin: 10px 12px 4px;
    background: var(--kv-card);
    border: 1px solid var(--kv-line);
    border-radius: var(--kv-radius);
}

html.kv-grafite.dark-mode .searchbar input,
html.kv-grafite.dark-mode .searchbar a.button { color: var(--kv-muted); background: transparent; }
html.kv-grafite.dark-mode .searchbar input { color: var(--kv-text); }

/* ---------------------------------------------------------------- lista em cartões */

html.kv-grafite.dark-mode #layout-list .scroller { padding: 4px 0 8px; }

html.kv-grafite.dark-mode table.messagelist {
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0 6px;
    padding: 0 12px;
    background: transparent;
}

html.kv-grafite.dark-mode table.messagelist tbody tr,
html.kv-grafite.dark-mode table.messagelist tbody tr td {
    background: transparent;
    border-color: transparent;
}

html.kv-grafite.dark-mode table.messagelist tbody tr > td {
    background: var(--kv-panel);
    border-top: 1px solid var(--kv-line-soft);
    border-bottom: 1px solid var(--kv-line-soft);
}

html.kv-grafite.dark-mode table.messagelist tbody tr > td:first-child,
html.kv-grafite.dark-mode table.messagelist tbody tr > td.subject {
    border-left: 1px solid var(--kv-line-soft);
    border-radius: var(--kv-radius) 0 0 var(--kv-radius);
}

html.kv-grafite.dark-mode table.messagelist.withselection tbody tr > td.subject {
    border-left: 0;
    border-radius: 0;
}

html.kv-grafite.dark-mode table.messagelist tbody tr > td:last-child {
    border-right: 1px solid var(--kv-line-soft);
    border-radius: 0 var(--kv-radius) var(--kv-radius) 0;
}

html.kv-grafite.dark-mode table.messagelist tbody tr > td.subject { padding: .6rem .5rem .6rem .9rem; }

html.kv-grafite.dark-mode table.messagelist tbody tr:hover > td { background: var(--kv-hover); }

html.kv-grafite.dark-mode table.messagelist tbody tr.selected > td,
html.kv-grafite.dark-mode table.messagelist tbody tr.selected:hover > td {
    background: var(--kv-accent-row);
    border-color: var(--kv-accent);
    color: var(--kv-text);
}

html.kv-grafite.dark-mode table.messagelist tbody tr.focused > td { outline: 0; }

html.kv-grafite.dark-mode table.messagelist td.subject span.fromto,
html.kv-grafite.dark-mode table.messagelist td.subject span.date,
html.kv-grafite.dark-mode table.messagelist td.subject span.size {
    color: var(--kv-muted);
}

html.kv-grafite.dark-mode table.messagelist td.subject span.subject a { color: #c5cbdb; }

html.kv-grafite.dark-mode table.messagelist tr.unread td.subject span.fromto,
html.kv-grafite.dark-mode table.messagelist tr.unread td.subject span.subject a,
html.kv-grafite.dark-mode table.messagelist tr.selected td.subject span.subject a {
    color: #f2f4fa;
}

html.kv-grafite.dark-mode table.messagelist tr.unread td.subject span.fromto { font-weight: 600; }

html.kv-grafite.dark-mode table.messagelist tr.unread td.subject span.date { color: var(--kv-accent-text); font-weight: 600; }

/* bolinha de não lida e de selecionada no destaque (o Elastic usa amarelo e azul-claro) */
html.kv-grafite.dark-mode table.messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread::before,
html.kv-grafite.dark-mode table.messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
    color: var(--kv-accent-text);
}

html.kv-grafite.dark-mode table.messagelist tr:not(.flagged):not(.deleted).selected td.subject a { color: #f2f4fa; }

/* indicador de foco do teclado na cor do destaque */
html.kv-grafite.dark-mode table.listing.focus tbody tr.focused > td:first-child,
html.kv-grafite.dark-mode table.listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
    border-left-color: var(--kv-accent-text);
}

html.kv-grafite.dark-mode table.messagelist tr.flagged td,
html.kv-grafite.dark-mode table.messagelist tr.flagged td a { color: #fca5a5; }

html.kv-grafite.dark-mode table.messagelist tr.deleted td { opacity: .55; }

html.kv-grafite.dark-mode #layout-list .pagenav { color: var(--kv-muted); }

/* ---------------------------------------------------------------- leitura em cartão */

@media screen and (min-width: 1025px) {
    html.kv-grafite.dark-mode #layout-content > .iframe-wrapper,
    html.kv-grafite.dark-mode #layout-content > .content.frame-content {
        margin: 6px 16px 16px;
        width: auto;
        flex: 1 1 auto;
        box-sizing: border-box;
        border: 1px solid var(--kv-line);
        border-radius: 18px;
        overflow: hidden;
        background: var(--kv-panel);
        box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    }
}

html.kv-grafite.dark-mode #layout-content iframe { background: transparent; }

/* dentro do iframe (leitura, escrever, configurações) */
html.kv-grafite.dark-mode.iframe body { background: var(--kv-panel); }

html.kv-grafite.dark-mode #message-header,
html.kv-grafite.dark-mode #message-header .header {
    background: transparent;
    border-color: var(--kv-line-soft);
}

html.kv-grafite.dark-mode #message-header h2.subject {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #f2f4fa;
}

html.kv-grafite.dark-mode #message-header .header-headers,
html.kv-grafite.dark-mode #message-header .header .short-header,
html.kv-grafite.dark-mode #message-header .header-links a { color: var(--kv-muted); }

html.kv-grafite.dark-mode #messagebody { color: #d3d7e3; }

/* texto simples em fonte de leitura, não de terminal */
html.kv-grafite.dark-mode #messagebody div.pre {
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.65;
}

html.kv-grafite.dark-mode .attachmentslist li {
    background: var(--kv-card);
    border: 1px solid var(--kv-line);
    border-radius: 10px;
}

/* ---------------------------------------------------------------- escrever */

html.kv-grafite.dark-mode .editor-toolbar,
html.kv-grafite.dark-mode .tox .tox-toolbar,
html.kv-grafite.dark-mode .tox .tox-toolbar__primary,
html.kv-grafite.dark-mode .tox .tox-toolbar__overflow,
html.kv-grafite.dark-mode .tox .tox-toolbar-overlord,
html.kv-grafite.dark-mode .tox .tox-editor-header {
    background: var(--kv-hover) !important;
    border-color: var(--kv-line) !important;
}

/* editor HTML: moldura e botões no tom do tema (o conteúdo escuro vem do styles/embed.css) */
html.kv-grafite.dark-mode .tox.tox-tinymce {
    border-color: var(--kv-line);
    border-radius: var(--kv-radius);
}

html.kv-grafite.dark-mode .tox .tox-tbtn,
html.kv-grafite.dark-mode .tox .tox-tbtn svg,
html.kv-grafite.dark-mode .tox .tox-tbtn__select-label {
    color: var(--kv-text);
    fill: var(--kv-text);
}

html.kv-grafite.dark-mode .tox .tox-tbtn:hover,
html.kv-grafite.dark-mode .tox .tox-tbtn--enabled { background: var(--kv-line); }

html.kv-grafite.dark-mode .tox .tox-toolbar__group { border-color: var(--kv-line) !important; }

html.kv-grafite.dark-mode #compose-attachments,
html.kv-grafite.dark-mode .file-upload {
    border-color: var(--kv-line);
    border-radius: var(--kv-radius);
}

/* ---------------------------------------------------------------- formulários, botões e menus */

html.kv-grafite.dark-mode .form-control,
html.kv-grafite.dark-mode .custom-select,
html.kv-grafite.dark-mode select.form-control,
html.kv-grafite.dark-mode .input-group-text,
html.kv-grafite.dark-mode textarea {
    background-color: var(--kv-card);
    border-color: var(--kv-line);
    color: var(--kv-text);
    border-radius: 10px;
}

html.kv-grafite.dark-mode .form-control:focus,
html.kv-grafite.dark-mode .custom-select:focus,
html.kv-grafite.dark-mode textarea:focus {
    border-color: var(--kv-accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kv-accent) 35%, transparent);
    background-color: var(--kv-hover);
}

html.kv-grafite.dark-mode .btn { border-radius: 10px; }

html.kv-grafite.dark-mode .btn-primary,
html.kv-grafite.dark-mode .btn.mainaction,
html.kv-grafite.dark-mode .formbuttons .btn.submit,
html.kv-grafite.dark-mode .custom-control-input:checked ~ .custom-control-label::before,
html.kv-grafite.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--kv-accent);
    border-color: var(--kv-accent);
    color: #fff;
}

html.kv-grafite.dark-mode .btn-primary:hover,
html.kv-grafite.dark-mode .btn.mainaction:hover { filter: brightness(1.12); }

html.kv-grafite.dark-mode .btn-secondary {
    background-color: var(--kv-card);
    border-color: var(--kv-line);
    color: var(--kv-text);
}

html.kv-grafite.dark-mode .popover,
html.kv-grafite.dark-mode .popupmenu,
html.kv-grafite.dark-mode .ui-dialog,
html.kv-grafite.dark-mode .ui-dialog-content,
html.kv-grafite.dark-mode .ui-dialog-titlebar,
html.kv-grafite.dark-mode .ui-dialog-buttonpane {
    background-color: var(--kv-card);
    border-color: var(--kv-line);
    color: var(--kv-text);
}

html.kv-grafite.dark-mode .popover { border-radius: var(--kv-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }

html.kv-grafite.dark-mode .popover-body .listing li a:hover,
html.kv-grafite.dark-mode .popover .menu li a:not(.disabled):hover {
    background: var(--kv-hover);
    color: var(--kv-text);
}

/* seções da aba "Filtros" (kevapanel_conta) */
html.kv-grafite.dark-mode .conta-secoes a { border-radius: 10px; margin: 2px 12px; color: #b4bbcf; }
html.kv-grafite.dark-mode .conta-secoes a.selected { background-color: var(--kv-hover); color: #f2f4fa; }
html.kv-grafite.dark-mode .conta-secoes a:hover { background-color: var(--kv-hover); }
html.kv-grafite.dark-mode .kevapanel-conta .kpc-bar { background: #1f2638; }
html.kv-grafite.dark-mode .kevapanel-conta .kpc-bar-fill:not(.kpc-full) { background: var(--kv-accent-text); }

/* listas das outras telas (contatos, configurações, filtros) */
html.kv-grafite.dark-mode .listing li,
html.kv-grafite.dark-mode table.listing tr td,
html.kv-grafite.dark-mode table.records-table tr td {
    border-color: var(--kv-line-soft);
}

html.kv-grafite.dark-mode .listing li.selected,
html.kv-grafite.dark-mode table.listing tr.selected td,
html.kv-grafite.dark-mode table.records-table tr.selected td {
    background-color: var(--kv-accent-row);
    color: var(--kv-text);
}

html.kv-grafite.dark-mode .listing li:not(.selected):hover,
html.kv-grafite.dark-mode table.listing tr:not(.selected):hover td,
html.kv-grafite.dark-mode table.records-table tr:not(.selected):hover td {
    background-color: var(--kv-hover);
}

html.kv-grafite.dark-mode .formcontent legend,
html.kv-grafite.dark-mode fieldset > legend {
    color: var(--kv-text);
    font-weight: 600;
}

/* ---------------------------------------------------------------- entrada (login) */

html.kv-grafite.dark-mode body.task-login {
    background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--kv-accent) 18%, transparent), transparent 70%), var(--kv-bg);
}

html.kv-grafite.dark-mode body.task-login #layout-content {
    background: transparent;
}

html.kv-grafite.dark-mode body.task-login #login-form {
    background: var(--kv-panel);
    border: 1px solid var(--kv-line);
    border-radius: 18px;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    max-width: 26rem;
    margin: 0 auto;
}

html.kv-grafite.dark-mode body.task-login #login-form .btn.mainaction {
    width: 100%;
    height: 2.8rem;
    font-weight: 600;
}

html.kv-grafite.dark-mode body.task-login #login-footer,
html.kv-grafite.dark-mode body.task-login #login-footer a {
    color: var(--kv-muted);
}

/* botão flutuante de escrever (celular) */
html.kv-grafite.dark-mode .floating-action-buttons a.button {
    background-color: var(--kv-accent);
    color: #fff;
}

/* ---------------------------------------------------------------- telas pequenas */

/* No celular e na tela média o Elastic vira cada linha num flex (a coluna das marcas fica por cima,
   absoluta): o cartão passa a ser a linha, e as células ficam sem fundo nem borda. */
html.kv-grafite.dark-mode.layout-phone table.messagelist tbody tr,
html.kv-grafite.dark-mode.layout-small table.messagelist tbody tr {
    background: var(--kv-panel);
    border: 1px solid var(--kv-line-soft);
    border-radius: var(--kv-radius);
    margin-bottom: 6px;
}

html.kv-grafite.dark-mode.layout-phone table.messagelist tbody tr > td,
html.kv-grafite.dark-mode.layout-small table.messagelist tbody tr > td,
html.kv-grafite.dark-mode.layout-phone table.messagelist tbody tr:hover > td,
html.kv-grafite.dark-mode.layout-small table.messagelist tbody tr:hover > td,
html.kv-grafite.dark-mode.layout-phone table.messagelist tbody tr.selected > td,
html.kv-grafite.dark-mode.layout-small table.messagelist tbody tr.selected > td {
    background: transparent;
    border: 0;
    border-radius: 0;
}

html.kv-grafite.dark-mode.layout-phone table.messagelist tbody tr.selected,
html.kv-grafite.dark-mode.layout-small table.messagelist tbody tr.selected {
    background: var(--kv-accent-row);
    border-color: var(--kv-accent);
}

html.kv-grafite.dark-mode.layout-phone table.messagelist td.subject span.date,
html.kv-grafite.dark-mode.layout-small table.messagelist td.subject span.date {
    margin-right: 1.6rem;
}

@media screen and (max-width: 480px) {
    html.kv-grafite.dark-mode #layout-menu { background: var(--kv-rail); }
    html.kv-grafite.dark-mode #taskmenu a { color: var(--kv-text); border-color: var(--kv-line-soft) !important; }
    html.kv-grafite.dark-mode table.messagelist { padding: 0 8px; }
}

/* ================================================================ desenho do mockup B
   Peças que o grafite.js põe na página (.kv-*) e a arrumação do Elastic para chegar nele. */

html.kv-grafite .kv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    flex: none;
}

/* ---------------------------------------------------------------- logo */

@media screen and (min-width: 481px) {
    html.kv-grafite.dark-mode #layout-menu #logo {
        width: 36px;
        height: 36px;
        max-width: 36px;
        object-fit: contain;
        border-radius: 9px;
        margin: 4px auto 0;
        display: block;
    }
}

html.kv-grafite.dark-mode body.task-login #logo {
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 64px;
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------- barra: conta e escrever */

@media screen and (min-width: 481px) {
    /* no e-mail, "Nova mensagem" fica na coluna de pastas */
    html.kv-grafite.dark-mode body.task-mail #taskmenu .action-buttons { display: none; }

    html.kv-grafite.dark-mode #taskmenu .kv-me {
        width: 40px;
        height: 40px;
        margin: 8px 19px 4px;
        border-radius: 50%;
        background: var(--kv-hover) !important;
        border: 2px solid var(--kv-line);
        color: var(--kv-text);
        font-size: 13px;
        box-sizing: border-box;
    }
}

html.kv-grafite.dark-mode #taskmenu .kv-me { display: none; }

@media screen and (min-width: 481px) {
    html.kv-grafite.dark-mode #taskmenu .kv-me { display: inline-flex; }
}

/* ---------------------------------------------------------------- coluna de pastas */

html.kv-grafite.dark-mode #layout-sidebar .header .header-title[data-kv-label] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    text-align: left;
    font-size: .8rem;
}

html.kv-grafite.dark-mode #layout-sidebar .header .header-title[data-kv-label]::before {
    content: attr(data-kv-label);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kv-text);
}

html.kv-grafite.dark-mode .kv-side-head { padding: 12px 14px 10px; }

html.kv-grafite.dark-mode .kv-side-head .kv-compose {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--kv-radius);
    background: var(--kv-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--kv-accent) 30%, transparent);
}

html.kv-grafite.dark-mode .kv-side-head .kv-compose:hover { filter: brightness(1.12); }

/* ---------------------------------------------------------------- lista: busca no topo, título e filtro */

html.kv-grafite.dark-mode #layout-list { display: flex; flex-direction: column; }
html.kv-grafite.dark-mode #layout-list > .searchbar { order: -1; margin-top: 14px; }
html.kv-grafite.dark-mode #layout-list .searchbar a.button.unread { display: none; }

html.kv-grafite.dark-mode #messagelist-header {
    border: 0;
    gap: 4px;
    justify-content: flex-start;
    padding: 0 8px 0 10px;
}

html.kv-grafite.dark-mode #messagelist-header > .toolbar,
html.kv-grafite.dark-mode #layout-content > .header > .toolbar {
    flex: none;
    display: flex;
    align-items: center;
    border: 0 !important;
    box-shadow: none !important;
}

html.kv-grafite.dark-mode #messagelist-header > .toolbar li,
html.kv-grafite.dark-mode #layout-content > .header > .toolbar li { border: 0 !important; }

/* agrupar por conversa continua em "Opções" da lista */
html.kv-grafite.dark-mode #messagelist-header .toolbar li:has(> a.threads) { display: none; }

html.kv-grafite.dark-mode #messagelist-header .header-title {
    display: block !important;
    font-size: 1.2rem;
    letter-spacing: -.015em;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    padding: 0 .2rem;
}

html.kv-grafite.dark-mode .kv-seg {
    align-self: center;
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--kv-card);
    border-radius: 10px;
    flex: none;
}

html.kv-grafite.dark-mode .kv-seg button {
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--kv-muted);
    font-size: .8rem;
    cursor: pointer;
}

html.kv-grafite.dark-mode .kv-seg button.selected {
    background: var(--kv-line);
    color: var(--kv-text);
    font-weight: 600;
}

/* ações da lista (selecionar, agrupar, opções, atualizar) só como ícones pequenos */
@media screen and (min-width: 1025px) {
    html.kv-grafite.dark-mode #messagelist-header .toolbar a span.inner,
    html.kv-grafite.dark-mode #messagelist-header a.toolbar-button span.inner {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    html.kv-grafite.dark-mode #messagelist-header .toolbar a,
    html.kv-grafite.dark-mode #messagelist-header a.toolbar-button {
        min-width: 0;
        width: 28px;
        height: 34px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    html.kv-grafite.dark-mode #messagelist-header .toolbar a:before,
    html.kv-grafite.dark-mode #messagelist-header a.toolbar-button:before {
        margin: 0;
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------- cartões com avatar */

html.kv-grafite.dark-mode table.messagelist tr.kv-card td.subject {
    position: relative;
    padding-left: 62px !important;
}

html.kv-grafite.dark-mode table.messagelist .kv-row-avatar {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 11px;
}

/* ---------------------------------------------------------------- leitura: ações no canto do cartão */

@media screen and (min-width: 1025px) {
    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #layout-content { position: relative; }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #layout-content > .header {
        position: absolute;
        top: 30px;
        right: 34px;
        z-index: 3;
        width: auto;
        height: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #layout-content > .header .header-title { display: none; }

    /* responder, responder a todos e encaminhar vão para baixo da mensagem (grafite.js) */
    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu > li:has(> a.compose),
    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu > li:has(> a.reply),
    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu > li:has(a.reply-all),
    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu > li:has(a.forward),
    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu > li.spacer {
        display: none;
    }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu a span.inner {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu a {
        min-width: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu a:before {
        margin: 0;
        font-size: 1.05rem;
    }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #toolbar-menu a.disabled { visibility: hidden; }

    html.kv-grafite.dark-mode.layout-large body.task-mail.action-none #layout-content > .iframe-wrapper { margin-top: 16px; }
}

/* ---------------------------------------------------------------- leitura: dentro do iframe */

html.kv-grafite.dark-mode.iframe body.action-preview #layout-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

html.kv-grafite.dark-mode.iframe body.action-preview #layout-content > .content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

html.kv-grafite.dark-mode body.action-preview #message-header { padding: 1.4rem 2rem .6rem; }

@media screen and (min-width: 700px) {
    html.kv-grafite.dark-mode body.action-preview #message-header h2.subject { padding-right: 190px; }
}

html.kv-grafite.dark-mode #message-header .header.kv-has-from {
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--kv-line-soft);
}

html.kv-grafite.dark-mode #message-header .header.kv-has-from .header-summary,
html.kv-grafite.dark-mode #message-header .header.kv-has-from > img.contactphoto { display: none; }
html.kv-grafite.dark-mode #message-header .header.kv-has-from > .header-content { flex: 1 1 100%; padding-left: 54px; }

html.kv-grafite.dark-mode .kv-from {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

html.kv-grafite.dark-mode .kv-from .kv-from-avatar,
html.kv-grafite.dark-mode .kv-from .kv-from-photo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 14px;
    margin: 0;
    object-fit: cover;
}

html.kv-grafite.dark-mode .kv-from-who { display: flex; flex-direction: column; min-width: 0; }
html.kv-grafite.dark-mode .kv-from-name { color: var(--kv-text) !important; font-weight: 600; }
html.kv-grafite.dark-mode .kv-from-email,
html.kv-grafite.dark-mode .kv-from-date { color: var(--kv-muted); font-size: .85rem; }
html.kv-grafite.dark-mode .kv-from-date { margin-left: auto; white-space: nowrap; }

html.kv-grafite.dark-mode body.action-preview #messagebody { max-width: 48rem; padding: 0 2rem; }

html.kv-grafite.dark-mode .kv-reply {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 24px 20px;
    border-top: 1px solid var(--kv-line-soft);
    background: var(--kv-panel);
}

html.kv-grafite.dark-mode .kv-reply .btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--kv-radius);
    font-weight: 500;
}

html.kv-grafite.dark-mode .kv-reply .btn-primary { font-weight: 600; }