/* O atributo `hidden` vale SEMPRE. Sem isto, qualquer `display` de autor
   (`.row{display:flex}`) vence o `[hidden]` do navegador, e um bloco marcado
   como escondido aparece: foi assim que os botões de "apagar definitivamente"
   da limpeza de conta ficaram visíveis ANTES de contar as mensagens, com os
   campos de data ainda vazios. As regras por classe espalhadas pelo arquivo
   eram remendos deste mesmo buraco. */
[hidden] { display: none !important; }

:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* `color-scheme` é o que impede o navegador de escurecer a página POR CONTA
   PRÓPRIA (o "auto dark" do Chrome/Android) quando o sistema está no escuro:
   sem ela, a primeira visita vinha escura e a recarga voltava clara. Também é
   o que faz campo, barra de rolagem e menu nativo nascerem na cor certa. */
:root {
  /* Identidade miniMAIL (pasta /assets) */
  --mm-blue: #213780;
  --mm-blue-dark: #1a2c66;
  --mm-purple: #7E12C2;
  --mm-purple-light: #b78bff;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #e3e6eb;
  --text: #1f2430;
  --muted: #6b7280;
  --accent: #213780;
  --accent-dark: #1a2c66;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --unread: #eef2ff;
  /* Fundos "tint" (avisos/realces) — dark-aware; ver overrides no bloco dark. */
  --tint-danger: #fff6f6;
  --tint-warning: #fffdf3;
  --tint-info: #eef6ff;
  --tint-code: #eef1f6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--panel);
  border-right: 1px solid var(--border); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Lateral fixa (Configurações): o menu é curto e a página é longa — deixá-lo
   subir junto com o conteúdo obrigava a rolar de volta ao topo a cada troca de
   aba. `align-self: flex-start` é o que faz o `sticky` valer dentro do flex
   (sem ele o item estica e nunca "gruda"). A barra de rolagem some, mas o
   conteúdo continua alcançável por gesto em telas baixas. */
.sidebar-fixa { position: sticky; top: 0; align-self: flex-start; max-height: 100vh;
  overflow-y: auto; scrollbar-width: none; }
.sidebar-fixa::-webkit-scrollbar { display: none; }
.topbar {
  height: 56px; background: var(--panel); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.content { padding: 20px; flex: 1; overflow: auto; }

/* Brand */
.brand { font-weight: 700; font-size: 18px; color: var(--mm-blue); margin-bottom: 8px; display:block; }
.brand span { color: var(--mm-purple); }
.brand-logo { height: 30px; width: auto; display: block; }

/* Navbar do console do admin de domínio (no topo) */
.mmnav a { text-decoration: none; padding: 6px 12px; border-radius: 6px; font-weight: 600;
  color: var(--mm-blue, #213780); white-space: nowrap; font-size: 14px; }
.mmnav a:hover { background: rgba(33,55,128,.08); text-decoration: none; }
.mmnav a.mmnav-on { background: var(--mm-blue, #213780); color: #fff; }

/* Buttons */
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; font-size: 14px; line-height: 1;
}
.btn:hover { background: #f0f1f4; text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-danger { color: var(--danger); border-color: #f3c0c0; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Sidebar nav */
.navlink {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-radius: 8px; color: var(--text);
}
.navlink .badge, .navlink .navlink-txt + .badge { margin-left: auto; }
/* Ícones SVG (Material, estilo Gmail) — herdam cor e alinham ao texto. */
.mmi { display: inline-block; vertical-align: middle; fill: currentColor; flex: none; }
.navlink > .mmi { color: var(--g-grey, #5f6368); }
.navlink.active > .mmi { color: inherit; }
.acct-pop a .mmi { color: var(--g-grey, #5f6368); }
.search-ico .mmi { display: block; }
.compose-btn .mmi, .hamburger .mmi { fill: currentColor; }
.navlink:hover { background: #f0f1f4; text-decoration: none; }
.navlink.active { background: var(--unread); color: var(--accent-dark); font-weight: 600; }
.badge { background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 7px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 8px 4px; }

/* Seções colapsáveis do menu do admin. O cabeçalho é <button> (e não <div>)
   para chegar pelo teclado e anunciar o estado via aria-expanded. */
.section-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: calc(100% - 16px); background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 0; text-align: left;
}
.section-toggle:hover { color: var(--text); }
.section-toggle .mmi { transition: transform .15s ease; opacity: .7; }
.nav-group.collapsed .section-toggle .mmi { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-body { display: none; }

/* Forms */
/* `input:not([type])` entra junto: um campo sem `type` é texto para o
   navegador, mas não casava com o seletor por tipo e nascia sem estilo —
   quadrado, mais baixo que o botão ao lado e com outra borda. Era o caso da
   busca do Drive, da "nova pasta" e da busca do chat. */
/* Data, hora e afins entram na MESMA regra: sem eles, o campo de
   `datetime-local` (início/fim do evento) ficava com a fonte e o tamanho
   padrão do navegador — era a "data em formato diferente" do resto do
   formulário. */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=tel], input[type=url],
input[type=date], input[type=time], input[type=datetime-local],
input:not([type]), textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
textarea { resize: vertical; min-height: 220px; }
label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 13px; }
.field-help { color: var(--muted); font-size: 12px; }

/* Botão que substitui o campo de arquivo nativo (Drive e telas de envio).
   O nativo traz largura, borda e o texto "Nenhum arquivo escolhido" do
   navegador — sempre fora do padrão da interface. */
.arq-botao { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin: 0; font-weight: 500; }
.arq-botao input { display: none; }
.arq-nome { font-size: 12px; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Cards / panels */
.panel { background: var(--panel); border: 1px solid #dfe3ea; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
.panel + .panel { margin-top: var(--gap-cards); }

/* Card "Saúde do sistema": cabeçalho com selo do status geral e os itens em
   grade, com os problemas (crit/warn) destacados e listados primeiro. */
.saude-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.saude-head h3 { margin: 0; }
.saude-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.saude-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.saude-pill.ok { background: rgba(22,163,74,.12); color: #15803d; }
.saude-pill.ok .dot { background: #16a34a; }
.saude-pill.warn { background: rgba(217,119,6,.14); color: #b45309; }
.saude-pill.warn .dot { background: #d97706; }
.saude-pill.crit { background: rgba(220,38,38,.12); color: #b91c1c; }
.saude-pill.crit .dot { background: #dc2626; }
.saude-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.saude-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--g-line, #e8eaed); border-radius: 10px; background: var(--panel, #fff); min-width: 0; }
.saude-item.warn { border-color: #f0d9a8; background: rgba(217,119,6,.05); }
.saude-item.crit { border-color: #f1c4c4; background: rgba(220,38,38,.05); }
.saude-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; margin-top: 1px; }
.saude-ico.ok { background: #16a34a; } .saude-ico.warn { background: #d97706; } .saude-ico.crit { background: #dc2626; }
.saude-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.saude-nome { font-weight: 600; font-size: 13px; }
.saude-det { color: var(--muted, #5f6368); font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-theme="dark"] .saude-item.warn { background: rgba(217,119,6,.12); border-color: #5c4a1e; }
html[data-theme="dark"] .saude-item.crit { background: rgba(220,38,38,.12); border-color: #5c2b2b; }

/* Ritmo vertical ÚNICO entre os blocos de primeiro nível do painel.
   Cada bloco trazia o seu: `.panel + .panel` = 16px, `.stat` com
   margin-bottom:14px embutido no template, e entre uma `.row` de cards e o
   painel seguinte não havia regra nenhuma.

   A margem fica em TODOS eles (e não em pares `A + B`) de propósito: o
   seletor `+` casa com o irmão imediatamente seguinte, e um `<script>` no
   meio do fluxo conta como irmão. Havia um entre os cards e o painel de
   "Spam × Legítimos" — aquele par ficava sem regra e o espaço encolhia.
   Assim o espaçamento não depende do que houver de invisível no meio.
   (Margens de irmãos colapsam, então empilhados continuam em 16px, não 32.) */
.admin-page > .panel,
.admin-page > .stat,
.admin-page > .row { margin-top: var(--gap-cards); }
/* Panels lado a lado numa .row (flex) não devem herdar o margin-top de
   panels empilhados — senão o 2º card fica 16px mais baixo (desalinhado). */
.row > .panel + .panel { margin-top: 0; }
.panel h2 { margin-top: 0; }

/* Message list */
.msglist { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.msgrow {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.msgrow:last-child { border-bottom: none; }
.msgrow:hover { background: #fafbfc; }
.msgrow.unread { background: var(--unread); }
.msgrow .from { width: 200px; flex-shrink: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgrow.read .from { font-weight: 400; }
.msgrow .subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgrow .subject .preview { color: var(--muted); font-weight: 400; }
.msgrow .date { width: 90px; text-align: right; color: var(--muted); font-size: 12px; flex-shrink: 0; }
.msgrow .star { color: #d1d5db; }
.msgrow .star.on { color: var(--warning); }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.grid th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Flash */
.flashes { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; border: 1px solid; }
.flash.success { background: #ecfdf3; color: #027a48; border-color: #abefc6; }
.flash.danger  { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.flash.warning { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.flash.info    { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }

/* Message view */
.msgview .head { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; }
.msgview .subject { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.msgview .meta { color: var(--muted); }
.msgbody { line-height: 1.55; }
.msgbody img { max-width: 100%; height: auto; }
/* Texto citado recolhível (botão "•••" estilo Gmail). */
.wm-quote-toggle { display: inline-block; margin: 8px 0; padding: 0 10px; height: 22px;
  line-height: 20px; border: 1px solid #d1d5db; border-radius: 12px; background: #f1f3f4;
  color: #5f6368; cursor: pointer; font-size: 13px; letter-spacing: 1px; }
.wm-quote-toggle:hover { background: #e5e7eb; }
.wm-quoted[hidden] { display: none; }
/* Linha ativa na navegação por teclado (j/k). */
.msgrow.kbd-active { box-shadow: inset 3px 0 0 var(--accent, #1a73e8); background: #eef3fc; }
/* Barra "Enviando… Desfazer" (undo send), estilo snackbar do Gmail. */
.wm-undobar { position: fixed; left: 24px; bottom: 24px; z-index: 3000; display: none;
  align-items: center; gap: 14px; background: #202124; color: #e8eaed; padding: 12px 18px;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.35); font-size: 14px; }
.wm-undobar.show { display: flex; }
.wm-undobar button { background: none; border: none; color: #8ab4f8; font-weight: 600;
  cursor: pointer; font-size: 14px; padding: 0; }
.wm-undobar .wm-undosecs { color: #9aa0a6; font-size: 12px; min-width: 12px; text-align: center; }
/* Visão de conversa: mensagens anteriores do tópico, recolhidas. */
.conv-thread { margin-bottom: 14px; }
.conv-head { font-size: 13px; margin-bottom: 8px; }
.conv-item { border: 1px solid var(--border, #e5e7eb); border-radius: 8px; margin-bottom: 6px; background: var(--panel, #fff); }
.conv-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; }
.conv-row:hover { background: #f7f8fa; }
.conv-from { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.conv-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.conv-date { white-space: nowrap; font-size: 12px; }
.conv-item.open .conv-snip { display: none; }
.conv-body { border-top: 1px solid var(--border, #e5e7eb); padding: 4px 14px; }
.conv-current { font-size: 12px; margin: 8px 0 4px; }
.conv-item.unread .conv-from { font-weight: 700; color: var(--g-ink, #202124); }
.conv-open { border: 1px solid var(--g-line, #e8eaed); border-radius: 8px; margin-bottom: 6px;
  padding: 4px 16px 12px; background: var(--panel, #fff); }
html[data-theme="dark"] .conv-open { border-color: var(--border); }
html[data-theme="dark"] .conv-item.unread .conv-from { color: var(--text); }
html[data-theme="dark"] .conv-row:hover { background: var(--wm-surface2); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; color: #fff; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.spacer { flex: 1; }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; }
.stat { display: flex; gap: var(--gap-cards); flex-wrap: wrap; }
.stat .card { background: var(--panel); border: 1px solid #dfe3ea; border-radius: 12px; padding: 16px 18px; flex: 1 1 150px; min-width: 150px; box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
.stat .card .n { font-size: 28px; font-weight: 700; white-space: nowrap; }
/* O rótulo QUEBRA linha: com `nowrap` ele era cortado no meio ("amostra de 60
   mens…") e o número em cima ficava sem explicação — foi assim que um "3.3 MB"
   virou pergunta. O número (.n) segue em uma linha só. */
.stat .card .l { color: var(--muted); font-size: 13px; white-space: normal; line-height: 1.35; }
/* Área do admin com fundo levemente cinza p/ os cards/paineis brancos saltarem */
.admin-page { margin: -20px; padding: 20px; background: #eef1f6; min-height: calc(100vh - 56px); }
@media (max-width: 820px) { .admin-page { margin: -6px 0; padding: 12px; } }
.quota { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 12px; }
.quota .bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.quota .bar > div { height: 100%; background: var(--accent); }

/* Calendar (estilo Google Agenda) */
.cal-toolbar { gap: 10px; margin-bottom: 14px; }
.cal-toolbar .compose-btn { margin: 0 6px 0 0; padding: 10px 18px 10px 14px; }
.cal-toolbar .rowact { width: 34px; height: 34px; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--g-grey); border-radius: 50%; }
.cal-toolbar .rowact:hover { background: #e9eaed; }
.cal-today { border-radius: 18px !important; padding: 7px 16px !important; }
.cal-month { margin-left: 6px; font-size: 20px; text-transform: capitalize; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--g-line); border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden; }
.cal-head { background: #fff; padding: 10px 6px; text-align: center; font-size: 11px;
  color: var(--g-grey); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cal-cell { background: #fff; min-height: 116px; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:hover { background: #f8fafd; }
.cal-cell.other-month { background: #fafbfc; }
.cal-cell { cursor: pointer; }
.cal-cell.other-month .cal-daynum span { color: #b8bcc4; }
.cal-daynum { text-align: center; margin-bottom: 2px; }
.cal-daynum span { color: var(--g-ink); font-size: 12px; display: inline-flex; align-items: center;
  justify-content: center; min-width: 24px; height: 24px; border-radius: 50%; margin: 0 auto; }
.cal-cell.today .cal-daynum span { background: var(--g-blue); color: #fff; font-weight: 600; }
.cal-event { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--g-ink);
  padding: 2px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #eaf1fb; background: color-mix(in srgb, var(--ev, #1a73e8) 16%, #fff); line-height: 1.5; }
.cal-event:hover { text-decoration: none; filter: brightness(.97); }
.cal-event::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ev, #1a73e8); flex-shrink: 0; }
.cal-event.all-day { background: var(--ev, #1a73e8); color: #fff; }
.cal-event.all-day::before { display: none; }
.cal-event .ev-time { color: var(--g-grey); font-size: 11px; }
.cal-event.all-day .ev-time { color: rgba(255,255,255,.85); }
@media (max-width: 820px) { .cal-cell { min-height: 76px; } .cal-event { font-size: 11px; } }

/* Alternador de visão (Mês/Semana/Dia) */
.cal-views { display: inline-flex; border: 1px solid var(--g-line); border-radius: 18px; overflow: hidden; }
.cal-views a { padding: 6px 14px; font-size: 13px; color: var(--g-grey); }
.cal-views a:hover { background: #f1f3f4; text-decoration: none; }
.cal-views a.on { background: var(--g-blue); color: #fff; }

/* Grade de semana/dia (estilo Google Agenda) */
.tg { --ndays: 7; --hourh: 46px; border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden; background: #fff; }
.tg-head { display: grid; grid-template-columns: 56px repeat(var(--ndays), 1fr); border-bottom: 1px solid var(--g-line); }
.tg-dayhead { padding: 6px 6px 4px; text-align: center; border-left: 1px solid var(--g-line); min-height: 40px; }
.tg-dayhead .tg-wd { font-size: 11px; text-transform: uppercase; color: var(--g-grey); letter-spacing: .05em; }
.tg-dayhead .tg-daynum { font-size: 16px; font-weight: 500; }
.tg-dayhead.today .tg-daynum { background: var(--g-blue); color: #fff; border-radius: 50%; padding: 0 6px; display: inline-block; min-width: 22px; }
.tg-allday-ev { display: block; margin: 3px 2px 0; font-size: 11px; }
.tg-body { display: grid; grid-template-columns: 56px repeat(var(--ndays), 1fr); }
.tg-gutter { display: flex; flex-direction: column; }
.tg-hour { height: var(--hourh); position: relative; }
.tg-hour span { position: absolute; top: -7px; right: 6px; font-size: 11px; color: var(--g-grey); }
.tg-col { position: relative; border-left: 1px solid var(--g-line); }
.tg-slot { height: var(--hourh); border-bottom: 1px solid #f1f3f4; }
.tg-event { position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden;
  padding: 2px 6px; border-radius: 6px; font-size: 12px; line-height: 1.3; color: #fff;
  background: var(--ev, #1a73e8); border-left: 3px solid rgba(0,0,0,.18); }
.tg-event:hover { text-decoration: none; filter: brightness(.96); }
.tg-event .tg-ev-time { font-size: 10px; opacity: .9; display: block; }
.tg-col { cursor: pointer; }
/* Linha do horário atual (semana/dia/4 dias), estilo Google Agenda: um traço
   vermelho fino com uma bolinha na borda esquerda. Fica ACIMA dos eventos
   (z-index) para não sumir sob um bloco. */
.tg-now { position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px solid #ea4335; z-index: 6; pointer-events: none; }
.tg-now-bolinha { position: absolute; left: -1px; top: -5px; width: 9px; height: 9px;
  border-radius: 50%; background: #ea4335; }

/* Formulário de evento no painel deslizante */
.event-form { display: flex; flex-direction: column; gap: 4px; }
.event-form .csubject { border-bottom: 1px solid var(--g-line) !important; margin-bottom: 8px; }
.ev-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; margin: 6px 0; }
.ev-lbl { color: var(--g-grey); font-size: 13px; margin: 0; }
.ev-in { padding: 8px 10px !important; margin: 0 !important; }
.ev-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 8px; font-weight: 400; }
.ev-row input { width: auto; }
.ev-field { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--g-line); }
.ev-field-top { align-items: flex-start; }
.ev-field .ev-ico { width: 18px; text-align: center; flex-shrink: 0; color: var(--g-grey); }
.ev-field .cinput { border: none !important; padding: 6px 0 !important; margin: 0 !important; }
.ev-field .cbody { border: none !important; }
.ev-color { width: 40px !important; height: 30px; padding: 0 !important; border: none !important; background: none !important; cursor: pointer; }

/* Autocomplete de destinatários */
.ac-drop { position: fixed; z-index: 300; background: #fff; border: 1px solid var(--g-line);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); max-height: 260px; overflow: auto; padding: 4px 0; }
.ac-item { padding: 8px 14px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.ac-item strong { font-weight: 600; }
.ac-item.active, .ac-item:hover { background: #f1f3f4; }
html[data-theme="dark"] .ac-drop { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .ac-item { color: var(--text); }
html[data-theme="dark"] .ac-item.active, html[data-theme="dark"] .ac-item:hover { background: var(--wm-surface2); }

/* Aviso de imagens remotas bloqueadas */
.img-banner { background: #fff8e1; border: 1px solid #f7e39b; border-radius: 8px;
  padding: 8px 12px; margin: 4px 0 14px; font-size: 13px; color: #7a5b00;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Editor rich text (assinatura e compor em HTML) */
.sig-toolbar, .cmp-toolbar { display: flex; gap: 4px; border: 1px solid var(--g-line); border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 6px; background: #f6f8fc;
  /* Sem isto os itens caíam no `stretch` padrão e, numa linha mais alta que 30px
     (o separador estica), os botões colavam no topo e os seletores de cor no
     rodapé — o desalinhamento visível. Centrar todos resolve de vez. */
  align-items: center; }
.sig-toolbar button, .cmp-toolbar button { border: none; background: none; width: 32px; height: 30px;
  border-radius: 6px; cursor: pointer; font-size: 15px; color: var(--g-ink);
  /* flex-center: o `margin:0 auto` do ícone centralizava só na horizontal e
     deixava os desenhos um pouco baixos — era o desalinhamento visível. */
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sig-toolbar button:hover, .cmp-toolbar button:hover { background: #e4e8ef; }
.sig-editor, .cmp-editor { border: 1px solid var(--g-line); border-radius: 0 0 8px 8px; min-height: 160px;
  padding: 12px; font-size: 14px; line-height: 1.5; overflow: auto; background: #fff; }
.sig-editor:focus, .cmp-editor:focus { outline: none; border-color: var(--g-blue); }
.sig-editor img, .cmp-editor img { max-width: 100%; height: auto; }
.cmp-editor { flex: 1; min-height: 200px; }
.cmp-toolbar { flex-wrap: wrap; }
.cmp-toolbar .cmp-size { width: auto; height: 30px; padding: 0 6px; border: none; background: none;
  font-size: 13px; color: var(--g-ink); cursor: pointer; }
.cmp-sep { width: 1px; align-self: stretch; background: var(--g-line); margin: 2px 3px; }
/* Botão de cor (cor do texto / realce): o ÍCONE é igualzinho ao dos outros
   botões — 18px, centrado na célula de 30px —, então casa na vertical E no
   tamanho com o B/I/U. A cor escolhida é uma barrinha fina PRESA no rodapé
   (absolute), que não entra no fluxo e por isso não empurra nem encolhe o
   ícone. Os glifos `cor_texto`/`marca_texto` já vêm centrados e sem barra. */
.cmp-color { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; border-radius: 6px; cursor: pointer; position: relative;
  /* `.cmp-color` é um <label>, e a regra global `label { margin: 10px 0 4px }`
     vazava aqui: empurrava os dois seletores de cor ~3px para baixo do resto da
     barra. Zerar a margem alinha com os botões. */
  margin: 0; }
.cmp-color:hover { background: #e4e8ef; }
.cmp-color .mmi { display: block; width: 18px; height: 18px; }
.cmp-color input[type=color] { position: absolute; left: 7px; right: 7px; bottom: 4px;
  width: auto; height: 3px; border: none; padding: 0; background: none;
  border-radius: 1px; cursor: pointer; }
.cmp-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.cmp-color input[type=color]::-webkit-color-swatch { border: none; border-radius: 1px; }
.cmp-color input[type=color]::-moz-color-swatch { border: none; border-radius: 1px; }
/* Painel de emoji do compositor. */
.cmp-emoji-pop { position: fixed; z-index: 120; width: 260px; max-height: 220px; overflow-y: auto;
  background: var(--panel, #fff); border: 1px solid var(--g-line); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(60,64,67,.25); padding: 8px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.cmp-emoji-pop button { border: none; background: none; cursor: pointer; font-size: 20px;
  line-height: 1; padding: 4px; border-radius: 6px; }
.cmp-emoji-pop button:hover { background: #e4e8ef; }
/* Convite ainda não respondido: contorno tracejado e um "?" discreto. Antes,
   o evento confirmado e o que ninguém respondeu tinham a mesma aparência. */
.cal-event.conv-pendente, .tg-event.conv-pendente {
  border: 1px dashed var(--ev, #4f46e5); background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.cal-event.conv-recusado, .tg-event.conv-recusado { opacity: .55; text-decoration: line-through; }
.conv-marca { display: inline-block; font-weight: 700; margin-right: 3px; opacity: .85; }

.cmp-prio { height: 30px; border: 1px solid var(--g-line); border-radius: 8px;
  background: none; font-size: 12px; padding: 0 6px; color: var(--g-ink); cursor: pointer; }
html[data-theme="dark"] .cmp-emoji-pop { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .cmp-emoji-pop button:hover { background: var(--wm-surface2); }
.cmp-editor blockquote { margin: 0 0 0 12px; padding-left: 12px; border-left: 2px solid #ccc; color: #5f6368; }

/* Contatos (lista harmonizada) */
.contact-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #f1f3f4; }
.contact-row:last-child { border-bottom: none; }
.contact-row:hover { background: #f8fafd; }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-weight: 600; color: var(--g-ink); font-size: 14px; }
.contact-email { font-size: 13px; }
.contact-auto { background: var(--g-grey); font-size: 10px; margin-left: 8px; vertical-align: middle; }
.contact-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .1s; }
.contact-row:hover .contact-actions { opacity: 1; }
.contact-actions .rowact { font-size: 16px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 820px) { .contact-actions { opacity: 1; } }

/* Chat (harmonizado com o webmail) */
/* Chat em tela cheia (Telegram/WhatsApp): coluna de conversas à esquerda,
   conversa à direita. Antes era um painel no canto; a tela cheia é a casa do
   chat e o balão virou atalho opcional. */
.chat { display: flex; gap: 16px; height: calc(100vh - 150px); }
.chat-eu { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--g-line); }
.chat-eu-nome { font-weight: 600; font-size: 14px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.chat-eu-status { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.chat-eu-status select { border: none; background: none; font-size: 12px;
  color: var(--g-ink-2, #5f6368); padding: 0; width: auto; height: auto; }
.chat-busca { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--g-line); }
.chat-busca input { flex: 1; min-width: 0; border-radius: 18px; padding: 7px 12px; }
.chat-lista { flex: 1; overflow: auto; padding: 4px; }
.chat-sec { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--g-ink-2, #5f6368); }
.chat-sec span:first-child { flex: 1; }
.chat-vazio { padding: 8px 12px; font-size: 13px; }
.chat-nova > summary { cursor: pointer; list-style: none; border-radius: 50%;
  width: 20px; height: 20px; line-height: 18px; text-align: center;
  border: 1px solid var(--g-line); font-size: 14px; }
.chat-nova > summary::-webkit-details-marker { display: none; }
.chat-nova { position: relative; }
.chat-nova-pop { position: absolute; right: 0; z-index: 6; width: 230px;
  text-transform: none; letter-spacing: 0; }
.chat-nova-pop input[name=nome] { width: 100%; margin-bottom: 6px; }
.chat-nova-membros { max-height: 140px; overflow: auto; font-size: 13px; margin-bottom: 6px; }
.chat-nova-membros label { display: block; }
/* Ponto de estado: verde disponível, âmbar ocupado, cinza offline. */
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 2px solid #fff; flex-shrink: 0; }
.dot-online { background: #1a7f37; }
.dot-ocupado { background: #e8a33d; }
.dot-offline { background: #bdc1c6; }
.convo-av { position: relative; display: inline-flex; flex-shrink: 0; }
.convo-av .dot { position: absolute; right: -2px; bottom: -2px; }
.convo-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.convo-prev { font-size: 12px; color: var(--g-ink-2, #5f6368); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.convo-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.convo-at { font-size: 11px; color: var(--g-ink-2, #5f6368); }
.convo.unread .convo-name, .convo.unread .convo-prev { font-weight: 600; color: var(--g-ink); }
/* Bolinha flutuante (opcional, ligada nas Opções). */
.chat-bolha { position: fixed; right: 20px; bottom: 20px; z-index: 54;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--g-blue, #213780); color: #fff;
  box-shadow: 0 2px 10px rgba(60,64,67,.35); }
.chat-bolha .badge { position: absolute; top: -2px; right: -2px; }
@media (max-width: 900px) {
  .chat-bolha { right: 12px; bottom: 78px; }
}
.chat .convos { width: 300px; flex-shrink: 0; background: #fff;
  border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column; }
.chat .convo { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--g-ink); }
.chat .convo:hover { background: #f1f3f4; text-decoration: none; }
.chat .convo.active { background: #d3e3fd; color: #041e49; text-decoration: none; }
.chat .convo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.chat .convo .badge { background: var(--g-blue); color: #fff; padding: 1px 7px; }
.chat .thread { flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--g-line); }
.chat .msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #f6f8fc; }
.bubble { max-width: 72%; padding: 8px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 1px rgba(60,64,67,.1); }
.bubble.in { background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.out { background: var(--g-blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .when { display: block; font-size: 10px; opacity: .7; margin-top: 2px; text-align: right; }
.chat .composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--g-line); }
.chat .composer input { flex: 1; border-radius: 22px; padding: 10px 16px; }
.chat .composer .btn { border-radius: 22px; }
/* Anexo: botão de clipe no lugar do campo de arquivo nativo, que trazia
   largura e texto do navegador e passava por baixo do botão Enviar. */
.chat-clipe { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  color: var(--g-ink-2, #5f6368); }
.chat-clipe:hover { background: #f1f3f4; }
.chat-clipe input { display: none; }
.chat-anexo { display: inline-flex; align-items: center; gap: 6px; max-width: 180px;
  padding: 6px 10px; border-radius: 16px; background: #e8f0fe; color: #174ea6;
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0; align-self: center; }
.chat-anexo button { border: none; background: none; cursor: pointer;
  color: inherit; font-size: 14px; line-height: 1; padding: 0; }
html[data-theme="dark"] .chat-clipe:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .chat-anexo { background: var(--wm-surface2); color: var(--text); }
/* Anexo dentro da bolha: imagem e vídeo aparecem; PDF abre em aba; o resto
   baixa. Antes era sempre um link "baixar anexo" — obrigava a sair da conversa
   e abrir o gerenciador de arquivos para ver um print. */
.anexo { margin: 4px 0 2px; }
.anexo img, .anexo video { display: block; max-width: 260px; max-height: 240px;
  width: auto; height: auto; border-radius: 12px; cursor: zoom-in;
  /* A imagem é MINIATURA: cabe na conversa e abre grande na galeria. Sem teto
     de altura, um retrato ocupava a tela inteira do celular e empurrava a
     conversa para fora. */
  object-fit: cover; }
.anexo video { cursor: default; }
.anexo audio { width: 240px; }
.anexo-cartao { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; background: rgba(0,0,0,.06); color: inherit; max-width: 260px; }
.anexo-cartao:hover { text-decoration: none; background: rgba(0,0,0,.1); }
.anexo-ico { font-size: 11px; font-weight: 700; letter-spacing: .5px;
  display: inline-flex; align-items: center; }
.anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; }
.anexo-baixar { display: inline-block; margin-top: 3px; font-size: 11px;
  opacity: .75; text-decoration: underline; color: inherit; }
.bubble.out .anexo-cartao { background: rgba(255,255,255,.18); }
.bubble.out .anexo-cartao:hover { background: rgba(255,255,255,.28); }
/* Fita de mensagens no estilo WhatsApp/Telegram: separador de dia, bolhas
   agrupadas por autor e marca de lida. */
.msg-dia { text-align: center; margin: 10px 0 6px; }
.msg-dia span { background: rgba(0,0,0,.06); color: var(--g-ink-2, #5f6368);
  border-radius: 12px; padding: 3px 12px; font-size: 11px; text-transform: capitalize; }
.bubble-autor { font-size: 11px; font-weight: 600; opacity: .85; margin-bottom: 2px; }
.bubble.junta { margin-top: -4px; }
.bubble.in.junta { border-bottom-left-radius: 16px; border-top-left-radius: 6px; }
.bubble.out.junta { border-bottom-right-radius: 16px; border-top-right-radius: 6px; }
.tique { margin-left: 3px; letter-spacing: -1px; }
.tique.lida { color: #8ecdf7; }
/* "↓ N novas": quem subiu para ler o histórico não é arrastado de volta. */
.msgs-descer { position: absolute; right: 22px; bottom: 76px; z-index: 3;
  border: none; border-radius: 18px; cursor: pointer; padding: 7px 14px;
  background: var(--g-blue, #213780); color: #fff; font-size: 12px;
  box-shadow: 0 2px 8px rgba(60,64,67,.3); }
.chat .thread { position: relative; }

/* Galeria: a imagem abre por cima da página, sem baixar e sem trocar de tela. */
.galeria { position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,.86); }
.galeria[hidden] { display: none !important; }
.galeria img { max-width: 92vw; max-height: 86vh; border-radius: 6px; }
.galeria-btn { position: absolute; border: none; background: rgba(255,255,255,.12);
  color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; }
.galeria-btn:hover { background: rgba(255,255,255,.25); }
.galeria-ant { left: 16px; } .galeria-prox { right: 16px; }
.galeria-sair { top: 16px; right: 16px; }
.galeria-pe { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; display: flex; gap: 14px; justify-content: center;
  align-items: center; }
.galeria-pe a { color: #fff; text-decoration: underline; }
@media (max-width: 820px) {
  .anexo img, .anexo video { max-width: 68vw; }
  .galeria-btn { width: 38px; height: 38px; }
}

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 20, 35, .5); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 1000; overflow: auto; }
.modal-overlay[hidden] { display: none; }
.modal-card { background: var(--panel); border-radius: 14px; width: 100%; max-width: 620px; padding: 24px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
#wmModalBody { overflow-x: auto; }
.modal-x { position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal-x:hover { color: var(--text); }

.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 16px; padding: 34px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.06); }
.auth-card label { margin-bottom: 4px; }
.auth-card input { padding: 11px 12px; }
.auth-card .btn-block { padding: 11px; font-size: 15px; }
.inline { display: inline; }

/* ============================================================
   Tema estilo Gmail (webmail) — sobrescreve componentes acima
   ============================================================ */
body { font-family: "Google Sans", Roboto, Arial, "Segoe UI", sans-serif; background: #f6f8fc; }
/* Espaçamento entre cards/painéis — um valor só, vertical e horizontal. */
:root { --gap-cards: 16px; }
:root { --g-blue:#213780; --g-red:#d93025; --g-ink:#202124; --g-grey:#5f6368; --g-line:#e8eaed; }

.sidebar { background: #f6f8fc; border-right: none; padding: 12px 8px; }
.topbar { background: #f6f8fc; border-bottom: 1px solid var(--g-line); }
.content { background: #fff; border-top-left-radius: 16px; margin: 0; }
.main { background: #f6f8fc; }

/* Botão Escrever (Gmail) */
.compose-btn {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 14px 22px 14px 16px; margin: 4px 4px 14px; border-radius: 16px;
  background: #c2e7ff; color: #001d35; font-weight: 600; font-size: 14px;
  box-shadow: 0 1px 3px rgba(60,64,67,.3); transition: box-shadow .2s, background .2s;
}
.compose-btn:hover { background: #b3dcff; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px rgba(60,64,67,.15); text-decoration: none; }
.compose-btn .pencil { font-size: 16px; }

/* Navegação de pastas estilo Gmail (pílula à direita) */
.navlink { border-radius: 0 16px 16px 0; padding: 7px 12px 7px 20px; color: var(--g-ink); font-size: 14px; margin-right: 6px; }
.navlink:hover { background: #e9eaed; }
.navlink.active { background: #d3e3fd; color: #041e49; font-weight: 600; }
.navlink.active .badge, .badge { background: transparent; color: var(--g-grey); font-weight: 600; padding: 0; }
.navlink.active .badge { color: #041e49; }
.section-label { color: var(--g-grey); margin: 16px 8px 4px 20px; }

/* Barra de busca arredondada */
.searchbar { position: relative; flex: 1; max-width: 720px; display: flex; align-items: center; gap: 10px;
  background: #eaf1fb; border-radius: 26px; padding: 0 16px; height: 46px; }
.searchbar:focus-within { background: #fff; box-shadow: 0 1px 6px rgba(32,33,36,.18); }
.searchbar input { border: none; background: transparent; height: 44px; font-size: 15px; }
.searchbar input:focus { outline: none; }
.search-ico { color: var(--g-grey); background: none; border: 0; padding: 0;
  display: flex; align-items: center; cursor: pointer; }
.search-ico:hover { color: var(--accent, #213780); }

/* Sugestões enquanto se digita (embaixo da barra de busca). */
.search-sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--card, #fff); border: 1px solid var(--g-line, #dadce0); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.16); overflow: hidden; max-height: 60vh; overflow-y: auto; }
.search-sug .sug { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px;
  cursor: pointer; border-bottom: 1px solid var(--g-line, #eceff1); }
.search-sug .sug:last-child { border-bottom: 0; }
.search-sug .sug:hover, .search-sug .sug.on { background: var(--unread, #eef3fc); }
.search-sug .sug-de { font-weight: 600; font-size: 13px; white-space: nowrap;
  max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.search-sug .sug-as { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--g-grey, #5f6368); }
.search-sug .sug-qd { font-size: 12px; color: var(--muted, #80868b); white-space: nowrap; }
/* Tela de Segurança: uma coluna só, para os painéis das abas ficarem alinhados
   entre si (estavam em três larguras diferentes — 640, 760 e 820). */
.sec-conteudo { max-width: 880px; }
.sec-topo { max-width: 880px; }

/* Panorama: TRÊS colunas em telas largas, e não uma fila esticada de seis —
   com seis, cada texto quebrava em duas ou três linhas e os cartões ficavam de
   alturas diferentes. */
.sec-panorama { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 26px; }
.sec-item { display: flex; gap: 10px; align-items: flex-start; }
.sec-bolinha { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.sec-bolinha.on { background: var(--success, #188038); }
.sec-bolinha.off { background: var(--warning, #e37400); }
.sec-nome { font-weight: 600; font-size: 14px; line-height: 1.3; }
.sec-det { font-size: 12px; line-height: 1.45; margin-top: 1px; }
.sec-testar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--g-line, #dadce0); }
.sec-testar form { margin: 0; }
.sec-testar .field-help { margin: 0; }
@media (max-width: 900px) { .sec-panorama { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sec-panorama { grid-template-columns: 1fr; } }

/* Linha de três campos iguais (limites de envio). Grid e não flex: com flex,
   um campo com texto de ajuda embaixo desalinha a linha inteira. */
.rl-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  align-items: start; }
.rl-linha > div { min-width: 0; }
.rl-linha label { display: block; margin-bottom: 4px; }
.rl-linha input, .rl-linha select { width: 100%; }
@media (max-width: 720px) { .rl-linha { grid-template-columns: 1fr; } }

.msg-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--unread, #eef3fc); border: 1px solid var(--g-line, #dadce0);
  border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 13px; }
.msg-confirm form { display: inline; }

/* `display` de autor vence o `[hidden]` do navegador — era por isso que
   "Selecionar todas as N" aparecia com zero mensagens marcadas, ao lado de um
   segundo quadradinho que ninguém sabia para que servia. */
.selall-todas { font-size: 13px; color: var(--accent, #213780); display: inline-flex;
  align-items: center; gap: 6px; }
.selall-todas[hidden] { display: none; }
.selall-todas .linklike { text-decoration: underline; }

.cmp-drop { outline: 2px dashed var(--accent, #213780); outline-offset: -6px; }
.cmp-drop::after { content: "Solte para anexar"; position: absolute; inset: auto 0 12px 0;
  text-align: center; font-size: 13px; color: var(--accent, #213780); }

.anexo-view { position: fixed; inset: 0; z-index: 200; background: rgba(15,17,22,.86);
  display: flex; flex-direction: column; }
.anexo-view .anexo-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: rgba(0,0,0,.35); color: #fff; }
.anexo-view .anexo-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; }
.anexo-view .anexo-pos { color: #cfd3da; font-size: 12px; }
.anexo-view .anexo-corpo { flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 14px; overflow: auto; }
.anexo-view .anexo-corpo img { max-width: 100%; max-height: 100%; border-radius: 6px;
  background: #fff; }
.anexo-view .anexo-corpo iframe { width: 100%; height: 100%; border: 0; border-radius: 6px;
  background: #fff; }
@media (max-width: 640px) { .anexo-view .anexo-bar { padding: 8px 10px; gap: 8px; } }

.search-sug .sug-titulo { font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 14px 4px; cursor: default; }
.search-sug .sug-titulo:hover { background: none; }

.search-sug .sug-todos { font-size: 13px; color: var(--accent, #213780); font-weight: 600;
  justify-content: center; }

/* Chips de anexo na linha da lista (inline, mesma linha — nunca quebra) */
.att-chip { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  max-width: 160px; background: #f1f3f4; border: 1px solid var(--g-line); border-radius: 6px;
  padding: 1px 7px; margin-left: 6px; font-size: 11px; color: var(--g-grey); }
.att-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
html[data-theme="dark"] .att-chip { background: var(--wm-surface2); border-color: var(--border); color: var(--muted); }

/* Toolbar da lista (título + atualizar + paginação) */
.wm-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; min-height: 40px; }
.wm-title { margin: 0; font-size: 18px; font-weight: 500; color: var(--g-ink); letter-spacing: .1px; }
.wm-count { font-size: 12px; color: var(--g-grey); white-space: nowrap; }
.wm-toolbar .rowact { font-size: 18px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--g-grey); }
.rowact.disabled { opacity: .35; pointer-events: none; }

/* Estado vazio */
.wm-empty { text-align: center; color: var(--g-ink); padding: 64px 16px; }
.wm-empty-ico { font-size: 52px; opacity: .55; margin-bottom: 8px; }
.wm-empty p { font-size: 17px; font-weight: 500; margin: 0 0 2px; }

/* ==== Notas (estilo Keep): grade em colunas, cores e editor ==== */
.notes-search input[type=search] { min-width: 200px; }
.note-sec { margin: 18px 0 8px; }

/* Colunas de altura livre — o cartão tem o tamanho do texto, como no Keep.
   `columns` em vez de grid: com grid todos os cartões de uma linha ficam da
   altura do maior, e uma nota de duas palavras vira um quadrado vazio. */
.notes-grid { columns: 240px; column-gap: 16px; }
.note-card { break-inside: avoid; margin: 0 0 16px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--g-line); border-radius: 10px;
  transition: box-shadow .12s, border-color .12s; }
.note-card:hover { box-shadow: 0 1px 8px rgba(32,33,36,.18); }
.note-card-link { display: block; padding: 12px 14px 6px; color: var(--g-ink); min-height: 52px; }
.note-card-link:hover { text-decoration: none; }
.note-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.note-card-body { font-size: 13px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.note-card-date { font-size: 11px; }
/* As ações aparecem no hover, como no Keep; no celular ficam sempre visíveis. */
.note-card-foot { display: flex; align-items: center; gap: 2px; padding: 2px 8px 6px;
  justify-content: flex-end; }
.note-card-foot form { display: inline; }
.note-card-foot .rowact, .note-card-foot .note-pal { opacity: 0; transition: opacity .1s; }
.note-card:hover .rowact, .note-card:hover .note-pal,
.note-pal[open] { opacity: 1; }
@media (max-width: 820px) { .note-card-foot .rowact, .note-card-foot .note-pal { opacity: 1; } }

/* Paleta */
.note-pal { position: relative; }
.note-pal summary { list-style: none; cursor: pointer; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.note-pal summary::-webkit-details-marker { display: none; }
.note-pal summary:hover { background: rgba(0,0,0,.07); }
.note-pal-pop { position: absolute; z-index: 30; bottom: 34px; left: 0; display: flex;
  flex-wrap: wrap; gap: 4px; width: 152px; padding: 8px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.note-pal-pop form { display: inline; }
.note-pal-inline { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.note-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0,0,0,.18); padding: 0; }
.note-swatch.sel { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Caixa rápida (a "Criar uma nota…" do topo) */
.note-quick { max-width: 600px; margin: 0 auto 24px; background: var(--panel);
  border: 1px solid var(--g-line); border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(32,33,36,.16); }
.note-quick-abrir { border: none; box-shadow: none; padding: 6px 0; font-weight: 500;
  cursor: text; background: transparent; }
.note-quick-abrir:focus { outline: none; box-shadow: none; }
.note-quick .note-title { border: none; box-shadow: none; padding: 4px 0; background: transparent; }
.note-quick .note-title:focus { outline: none; box-shadow: none; }
.note-quick .cmp-toolbar { border: none; padding-left: 0; padding-right: 0; }

/* Editor da nota (mesmo formulário na janelinha e na página cheia) */
.note-editor { display: flex; flex-direction: column; gap: 10px; }
.note-panel { max-width: 780px; }
.note-head { display: flex; align-items: center; gap: 8px; }
.note-title { font-size: 17px; font-weight: 600; flex: 1; }
.note-pin.on { color: var(--warning); }
.note-rico { min-height: 260px; border: none; box-shadow: none; padding: 4px 0;
  background: transparent; outline: none; }
.note-rico-curto { min-height: 90px; }
.note-editada { font-size: 12px; text-align: right; }
.note-editor .cmp-toolbar { position: static; border: none; padding-left: 0; padding-right: 0; }
.note-actions { gap: 8px; align-items: center; flex-wrap: wrap; }
/* Na janelinha, a nota ocupa o cartão inteiro e leva a cor escolhida. */
#wmModalBody .note-editor { padding: 16px 18px; border-radius: 10px; }
#wmModalBody .note-editor:not(.note-c-padrao) .cmp-toolbar { background: transparent; }

/* Cores das notas (fundo do cartão e do editor) */
.note-c-vermelho { background: #faafa8; }
.note-c-laranja  { background: #f39f76; }
.note-c-amarelo  { background: #fff8b8; }
.note-c-verde    { background: #e2f6d3; }
.note-c-azul     { background: #d4e4ed; }
.note-c-roxo     { background: #d3bfdb; }
.note-c-rosa     { background: #f6e2dd; }
.note-c-cinza    { background: #efeff1; }
.note-card[class*="note-c-"]:not(.note-c-padrao) .note-card-body,
.note-card[class*="note-c-"]:not(.note-c-padrao) .note-card-date { color: #3c4043; }

/* Lista de mensagens estilo Gmail */
.msglist { border: none; border-radius: 0; background: #fff; }
.msgrow { padding: 0 16px; min-height: 44px; gap: 12px; border-bottom: 1px solid #f1f3f4; position: relative; align-content: center; }
.msgrow:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px rgba(60,64,67,.3); z-index: 1; }
.msgrow.unread { background: #fff; }
.msgrow.read { background: #f2f6fc; }
.msgrow .star { color: #dadce0; font-size: 18px; }
.msgrow .star.on { color: #f4b400; }
.msgrow .from { width: 220px; color: var(--g-ink); font-size: 14px; }
.msgrow.unread .from, .msgrow.unread .subject { font-weight: 700; color: #202124; }
.msgrow.read .from, .msgrow.read .subject { font-weight: 400; color: #5f6368; }
.msgrow .subject .preview { color: var(--g-grey); font-weight: 400; }
.msgrow .date { width: 70px; font-size: 12px; color: var(--g-grey); }
.msgrow.unread .date { font-weight: 700; color: #202124; }
/* Não lidas: assunto em negrito escuro (como no Gmail); prévia continua cinza. */
.msgrow.unread .subject { font-weight: 700; color: var(--g-ink, #202124); }
.msgrow.unread .subject .preview { font-weight: 400; color: var(--g-grey, #5f6368); }
/* No hover as ações substituem a data — largura livre p/ caberem os 5 ícones. */
.msgrow:hover .msgrow-end { width: auto; }

/* Visualização de mensagem */
.msgview { border: none; box-shadow: none; padding: 8px 0; }
.msgview .subject { font-size: 22px; font-weight: 400; color: var(--g-ink); margin: 4px 0 16px; }

/* Barra de ações do topo (ícones redondos, estilo Gmail) */
.msg-actions { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; flex-wrap: wrap; }
.msg-actions .rowact { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; font-size: 17px; color: var(--g-grey); }
.msg-actions .rowact:hover { background: #e9eaed; }
.msg-move { width: auto; height: 34px; border-radius: 18px; padding: 0 12px; font-size: 13px;
  border-color: var(--g-line); color: var(--g-grey); background: #fff; margin-left: 4px; }

/* Cabeçalho (avatar + remetente + data) */
.msg-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.msg-from { flex: 1; min-width: 0; }
.msg-from-name { font-weight: 600; color: var(--g-ink); font-size: 14px; }
.msg-to { font-size: 13px; }
.msg-date { font-size: 12px; white-space: nowrap; }

/* Anexos */
.msg-atts { margin: 4px 0 18px; padding: 12px 0; border-top: 1px solid var(--g-line); }
.att-item { display: inline-block; text-align: center; margin: 6px 8px 0 0; vertical-align: top; }

/* Rodapé de respostas (botões-pílula, estilo Gmail) */
.msg-reply { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.reply-btn { border-radius: 20px; padding: 9px 20px; border: 1px solid var(--g-line);
  color: var(--g-blue); font-weight: 600; background: #fff; }
.reply-btn:hover { background: #f2f6fc; text-decoration: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--g-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; flex-shrink: 0; }

/* Botões mais arredondados no webmail */
.content .btn { border-radius: 18px; }
.content .btn-primary { background: var(--g-blue); border-color: var(--g-blue); }

/* Ações no hover da linha (estilo Gmail) */
.msgrow .star { border: none; background: none; cursor: pointer; font-size: 16px; padding: 0; }
.msgrow .clip { font-size: 13px; }
.msgrow-end { width: 90px; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.row-actions { display: none; gap: 2px; }
.rowact { border: none; background: none; cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 50%; line-height: 1; }
.rowact:hover { background: #e9eaed; }
.msgrow:hover .date { display: none; }
.msgrow:hover .row-actions { display: flex; }

/* Menu de opções da linha */
.msglist { overflow: visible; }
.menu-wrap { position: relative; }
.menu-pop { display: none; position: absolute; right: 0; top: 26px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.18);
  z-index: 30; min-width: 190px; padding: 6px 0; max-height: 300px; overflow: auto; }
.menu-pop.open { display: block; }
.menu-pop form button, .menu-pop > button { display: block; width: 100%; text-align: left; border: none;
  background: none; padding: 9px 16px; cursor: pointer; font-size: 13px; color: var(--text);
  border-radius: 0; white-space: nowrap; }
.menu-pop form button:hover, .menu-pop > button:hover { background: #f1f3f4; }
#folderCtx, #msgCtx { right: auto; width: max-content; min-width: 210px; max-width: 280px; }
.menu-sep { padding: 8px 14px 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; }

/* Agrupamento por tópico (conversa) */
.thread-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #e4e8ef; color: var(--g-grey);
  font-size: 11px; font-weight: 600; cursor: pointer; }
.thread-count:hover { background: #d3e3fd; color: #041e49; }
.thread-rest { display: none; }
.thread-group.open .thread-rest { display: block; }
.thread-rest .msgrow { padding-left: 42px; background: #fafbfc; }

/* Barra de seleção múltipla (cabeçalho delimitado acima da lista) */
.bulkbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin: 0;
  min-height: 46px; background: #f6f8fc; border-bottom: 1px solid var(--g-line); }
.bulkbar input[type=checkbox] { width: 16px; height: 16px; }
.bulk-actions { display: none; gap: 6px; align-items: center; flex-wrap: wrap; }
.msgrow .rowchk { width: 16px; height: 16px; flex-shrink: 0; cursor: default; }

/* ===================== Mobile (estilo app Gmail) ===================== */
.hamburger { display: none; border: none; background: none; font-size: 22px; cursor: pointer; padding: 4px 10px; color: var(--g-ink, #202124); }
.drawer-overlay { display: none; }
.avatar-sm { width: 38px; height: 38px; font-size: 16px; }
/* Avatar do remetente na lista (desktop, estilo Gmail): círculo colorido com
   a inicial. A cor vem do filtro `avatarcolor` (inline no template). */
.row-avatar { display: inline-flex; width: 28px; height: 28px; font-size: 13px; font-weight: 600; }
/* No hover da linha o avatar vira checkbox visualmente à esquerda? Não — o
   checkbox já existe; mantemos o avatar sempre visível. */

@media (max-width: 820px) {
  .hamburger { display: inline-block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 280px;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.25); overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 40; }
  .drawer-overlay.open { display: block; }

  .content { border-radius: 0; padding: 6px 0; }
  .topbar { padding: 0 6px; gap: 6px; height: 54px; }
  .topbar .muted, .topbar > .btn { display: none; }   /* conta vai pro menu */
  .searchbar { height: 42px; }

  /* Escrever: no celular é o FAB de fora da barra lateral. O botão de dentro
     do menu fica só para quem abre a gaveta. */
  .compose-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 18px; bottom: 18px; z-index: 45;
    width: 56px; height: 56px; border-radius: 18px;
    background: #c2e7ff; color: #001d35;   /* mesmas cores do botão Escrever */
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
  }
  .compose-fab:hover { text-decoration: none; }
  .compose-btn { width: auto; }

  .navlink-chat { display: flex; }

  /* Lista: avatar + 2 linhas */
  .row-avatar { display: inline-flex; }
  .msgrow { flex-wrap: wrap; align-items: center; min-height: 66px; height: auto; padding: 10px 12px; gap: 10px; }
  .msgrow .rowchk, .msgrow .star { display: none; }
  .msgrow .from { order: 1; flex: 1; min-width: 0; font-size: 15px; }
  .msgrow .msgrow-end { order: 2; width: auto; }
  .msgrow .date { display: inline !important; }
  .msgrow .row-actions { display: flex !important; }
  .msgrow .row-actions form { display: none; }     /* só o menu ⋮ no mobile */
  .msgrow .menu-wrap { display: inline-flex; }
  .msgrow .subject { order: 3; flex-basis: 100%; white-space: normal; padding-left: 48px;
    max-height: 2.7em; overflow: hidden; font-size: 13px; }
  .msgrow .subject .preview { display: inline; }

  .panel { border-radius: 0; border-left: none; border-right: none; }
  .bulk-actions { flex-wrap: wrap; }
}

/* Mini-calendário da barra do e-mail (navegador de datas, estilo Zimbra). */
.mailmini { margin: 10px 8px 4px; padding-top: 10px; border-top: 1px solid var(--g-line, #e8eaed); }
.mailmini-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mailmini-nome { font-size: 12px; font-weight: 600; color: var(--g-ink); text-transform: capitalize; }
.mailmini-nome:hover { text-decoration: underline; }
.mailmini-nav { width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; color: var(--g-ink-2, #5f6368); }
.mailmini-nav:hover { background: #e8eaed; text-decoration: none; }
.mailmini-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mailmini-grade .mm-wd { font-size: 10px; color: var(--g-ink-2, #5f6368); padding: 2px 0; }
.mailmini-grade .mm-d { font-size: 11px; padding: 3px 0; border-radius: 50%; color: var(--g-ink); }
.mailmini-grade .mm-d:hover { background: #d3e3fd; text-decoration: none; }
.mailmini-grade .mm-d.fora { color: #bdc1c6; }
.mailmini-grade .mm-d.hoje { background: var(--g-blue, #213780); color: #fff; font-weight: 600; }
html[data-theme="dark"] .mailmini { border-color: var(--border); }
html[data-theme="dark"] .mailmini-nav:hover, html[data-theme="dark"] .mailmini-grade .mm-d:hover { background: var(--wm-surface2); }

.sidebar-account { display: none; }
@media (max-width: 820px) { .sidebar-account { display: block; margin-top: 10px; border-top: 1px solid var(--g-line, #e8eaed); padding-top: 6px; } }

/* Botões que só existem na app bar do compositor no celular. */
/* Só na app bar do compositor no celular (ver o bloco no fim do arquivo). */
.compose-head .x.cmp-mob { display: none; }

/* FAB de escrever — só no celular (no desktop vale o botão da barra lateral).
   Mora fora da .sidebar de propósito: ver comentário no base.html. */
/* Envolvido em min-width de propósito: sem isso, por vir DEPOIS do bloco
   @media (max-width: 820px) e media query não somar especificidade, estas
   regras venceriam no cascata e esconderiam o FAB no celular. */
@media (min-width: 821px) {
  .compose-fab { display: none; }
}

/* Campo com sufixo fixo (login em hostname SNI: "nome" + "@dominio").
   É UM campo só na tela: a borda fica no contêiner e o input entra sem borda
   nenhuma. Com dois retângulos lado a lado — foi a primeira versão — o sufixo
   parecia um segundo campo, e num domínio longo ele ficava MAIOR que o campo
   onde se digita.
   O sufixo continua sendo texto, fora do input: colocá-lo dentro obrigaria a
   filtrar o que o usuário digita, e um "voce@dominio@dominio" passaria. */
.campo-com-sufixo { display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--g-line, #dadce0); border-radius: 8px;
  background: var(--panel, #fff); padding: 0 12px; transition: border-color .15s, box-shadow .15s; }
.campo-com-sufixo:focus-within { border-color: var(--g-blue, #213780);
  box-shadow: 0 0 0 3px rgba(33,55,128,.12); }
.campo-com-sufixo input { flex: 1 1 auto; min-width: 0; border: none !important;
  background: none; padding: 11px 0; outline: none; box-shadow: none !important; }
.campo-com-sufixo .sufixo { flex: 0 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--g-grey, #5f6368);
  font-size: 14px; }
html[data-theme="dark"] .campo-com-sufixo { border-color: var(--border); }
html[data-theme="dark"] .campo-com-sufixo .sufixo { color: var(--muted, #9aa0a6); }

/* Painel de compor deslizante (estilo Gmail) */
.compose-panel {
  position: fixed; right: 24px; bottom: 0; width: 800px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 28px rgba(0,0,0,.28);
  transform: translateY(105%); transition: transform .28s ease; z-index: 60;
  display: flex; flex-direction: column; height: 78vh; max-height: 92vh;
}
.compose-panel.open { transform: translateY(0); }
/* Maximizado: ocupa quase toda a tela (mantém o slide de abrir/fechar). */
.compose-panel.maximized { left: 24px; right: 24px; width: auto; max-width: none; height: 94vh; }
.compose-panel.maximized .compose-body { flex: 1; }
.compose-head { background: #404040; color: #fff; padding: 10px 16px; border-radius: 12px 12px 0 0;
  display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.compose-head .x { cursor: pointer; border: none; background: none; color: #fff; font-size: 16px; }
.compose-body { padding: 6px 16px 14px; overflow: auto; flex: 1; display: flex; flex-direction: column; }
.compose-body form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.compose-body .cbody { flex: 1; min-height: 200px !important; }
.compose-form input[type=text], .compose-form textarea { margin-bottom: 8px; border-radius: 6px; }
@media (max-width: 820px) {
  /* Tela cheia no celular. O `top: 0` que havia aqui quebrava o "esconder":
     com top E bottom E height definidos, o CSS descarta o `bottom`, o painel
     passava a nascer no topo, e o translateY(105%) (105% de 78vh = 81,9vh)
     não chegava a tirá-lo da tela — sobravam ~18vh de faixa presa embaixo,
     visível o tempo todo, mesmo sem ninguém abrir o compositor.
     Ancorado embaixo com altura de tela inteira, 105% esconde de verdade.
     dvh porque no celular a barra do navegador entra e sai e 100vh estoura. */
  .compose-panel {
    right: 0; left: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%; border-radius: 0;
    height: 100vh; max-height: 100vh;
    height: 100dvh; max-height: 100dvh;
  }
  /* Maximizar não faz sentido quando já é tela cheia. */
  .compose-panel.maximized { left: 0; right: 0; height: 100dvh; }

}

/* Compositor em página (estilo Gmail): cartão com cabeçalho escuro */
.compose-card { max-width: 760px; background: #fff; border: 1px solid var(--g-line);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(60,64,67,.2), 0 4px 12px rgba(60,64,67,.1);
  overflow: hidden; display: flex; flex-direction: column; }
.compose-bar { background: #404040; color: #fff; padding: 11px 16px; font-size: 14px; font-weight: 600; }
.compose-fields { padding: 4px 16px 12px; display: flex; flex-direction: column; }
.cfield { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--g-line); }
.cflabel { color: var(--g-grey); font-size: 13px; width: 34px; flex-shrink: 0; }
.cinput { border: none !important; border-radius: 0 !important; padding: 11px 0 !important;
  font-size: 14px; background: transparent !important; }
.cinput:focus { outline: none; box-shadow: none; }
.csubject { font-weight: 500; }
.cc-toggle { color: var(--g-grey); font-size: 13px; flex-shrink: 0; }
.cc-toggle:hover { color: var(--g-blue); }
.cbody { border: none !important; min-height: 260px !important; padding: 14px 0 !important;
  font-size: 14px; line-height: 1.5; background: transparent !important; resize: vertical; }
.cbody:focus { outline: none; box-shadow: none; }
.compose-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--g-line); }
.send-btn { border-radius: 18px !important; padding: 9px 24px !important; font-weight: 600; }
@media (max-width: 820px) { .compose-card { max-width: 100%; border-radius: 0; border: none; } }

/* Anexar do Drive (picker + chips) */
.drive-picker { border: 1px solid var(--g-line); border-radius: 8px; max-height: 180px; overflow: auto; margin: 6px 0; }
.drive-file { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 12px;
  cursor: pointer; font-size: 13px; border-bottom: 1px solid #f1f3f4; }
.drive-file:hover { background: #f1f3f4; }
.drive-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.drive-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: var(--g-blue);
  border-radius: 14px; padding: 3px 10px; font-size: 12px; }
.drive-chip b { cursor: pointer; font-weight: 700; }

/* Widget de chat (rodapé, canto inferior direito) */
/* Só a âncora do painel: o botão flutuante saiu (o chat abre pelo menu). */
.chatw { position: fixed; right: 20px; bottom: 20px; z-index: 55; }
.chatw-panel[hidden], .chatw-composer[hidden] { display: none !important; }
.chatw-panel { position: absolute; right: 0; bottom: 0; width: 320px; height: 460px; max-height: 80vh;
  background: #fff; border: 1px solid var(--g-line); border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; }
.chatw-head { display: flex; align-items: center; gap: 8px; border-radius: 12px 12px 0 0; background: var(--g-blue, #213780);
  color: #fff; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.chatw-hbtn { border: none; background: none; color: #fff; font-size: 15px; cursor: pointer; padding: 0 2px; }
.chatw-body { flex: 1; overflow: auto; }
.chatw-list .chatw-conv { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; border-bottom: 1px solid #f1f3f4; }
.chatw-list .chatw-conv:hover { background: #f1f3f4; }
.chatw-conv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.chatw-msgs { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #f6f8fc; }
.chatw-composer { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--g-line); }
.chatw-composer input { flex: 1; border-radius: 18px; padding: 8px 12px; }
.chatw-composer .btn { border-radius: 18px; }
@media (max-width: 820px) {
  /* Painel ocupando a largura da tela: em celular um painel de 320px encostado
     no canto fica espremido ao lado do FAB de escrever. */
  .chatw { left: 8px; right: 8px; bottom: 8px; }
  .chatw-panel { width: auto; left: 0; right: 0; height: 70vh; height: 70dvh; }
}
html[data-theme="dark"] .chatw-panel { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .chatw-list .chatw-conv { border-bottom-color: var(--border); color: var(--text); }
html[data-theme="dark"] .chatw-list .chatw-conv:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .chatw-msgs { background: var(--bg); }
html[data-theme="dark"] .chat .convos,
html[data-theme="dark"] .chat .thread { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .chat-eu,
html[data-theme="dark"] .chat-busca,
html[data-theme="dark"] .thread-head { border-bottom-color: var(--border); }
html[data-theme="dark"] .chat .msgs { background: var(--bg); }
html[data-theme="dark"] .bubble.in { background: var(--panel); color: var(--text); }
html[data-theme="dark"] .msg-dia span { background: var(--wm-surface2); color: var(--text); }
html[data-theme="dark"] .dot { border-color: var(--panel); }
/* ===== Trilha de aplicativos (como a do Gmail: Mail/Chat/Meet) ============
   Fica na borda ESQUERDA, antes da lateral de pastas, e cada ícone leva ao
   aplicativo inteiro. Ícone com rótulo embaixo: só o desenho não diz o que é,
   e este menu é a primeira coisa que alguém novo olha. */
.trilha-apps { width: 72px; flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 8px 0; background: var(--bg, #f6f8fc);
  border-right: 1px solid var(--g-line); }
.trilha-item { display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 60px; padding: 8px 0 6px; border-radius: 12px; color: var(--g-ink-2, #5f6368);
  text-align: center; }
.trilha-item:hover { background: #e8eaed; text-decoration: none; }
.trilha-item.ativo { background: #d3e3fd; color: #041e49; }
.trilha-ico { position: relative; display: inline-flex; }
.trilha-ico .badge { position: absolute; top: -6px; right: -10px; }
.trilha-rot { font-size: 11px; line-height: 1.2; }
/* "beta": o chat é novo e ainda muda. O selo fica junto do ícone, não no
   rótulo — no rótulo ele competiria com o nome do aplicativo. */
.selo-beta { position: absolute; top: -7px; left: 18px;
  background: var(--mm-purple, #7E12C2); color: #fff; border-radius: 8px;
  font-size: 9px; line-height: 1; padding: 2px 4px; letter-spacing: .3px;
  text-transform: lowercase; }
.navlink-chat .selo-beta { position: static; margin-left: 6px; }
@media (max-width: 820px) {
  /* No celular a trilha sairia na frente da lista; os aplicativos continuam no
     menu de aplicativos do topo. */
  .trilha-apps { display: none; }
}
html[data-theme="dark"] .trilha-apps { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .trilha-item:hover { background: var(--wm-surface2); }

/* Fora do celular não existe "voltar": as duas colunas estão à vista. Esta
   regra vem ANTES do @media de propósito — media query não soma
   especificidade, e escrita depois ela venceria e o botão sumiria no celular
   (o scripts/check_css_mobile.py reprova exatamente isso). */
.chat-voltar { display: none; }

/* CELULAR: uma tela de cada vez, como no WhatsApp.
   Empilhar as duas colunas dava o pior dos dois mundos — meia lista e meia
   conversa, as duas curtas demais para servir. Aqui a lista ocupa a tela
   inteira; abrir uma conversa mostra só a conversa, com o botão de voltar.
   Quem decide é o servidor (a classe `tem-conversa`), então funciona sem JS e
   o botão "voltar" do navegador faz o que se espera. */
@media (max-width: 820px) {
  .chat { flex-direction: column; gap: 0;
          /* dvh: no celular a barra do navegador entra e sai, e 100vh deixa o
             compositor escondido atrás dela. */
          height: calc(100dvh - 118px); }
  .chat .convos { width: auto; border-radius: 12px; }
  .chat .thread { border-radius: 12px; }
  .chat.tem-conversa .convos { display: none; }
  .chat:not(.tem-conversa) .thread { display: none; }
  .chat-voltar { display: inline-flex; }
  /* Bolha mais larga: em 360px de tela, 72% deixa a mensagem em duas palavras
     por linha. */
  .bubble { max-width: 86%; font-size: 15px; }
  .anexo img, .anexo video { max-width: 100%; max-height: 200px; }
  .anexo-cartao { max-width: 100%; }
  .chat .msgs { padding: 12px 10px; }
  .chat .composer { padding: 10px 8px; gap: 6px;
                    /* iPhone com barra inferior: sem isto o campo fica embaixo dela. */
                    padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .chat .composer input[type=text] { font-size: 16px; }  /* <16px = zoom no iOS */
  .chat-eu { padding: 12px; }
  .chat-lista .convo { padding: 11px 10px; }
  .convo-name { font-size: 15px; }
  .msgs-descer { bottom: 84px; right: 14px; }
  /* O cabeçalho da conversa gruda no topo ao rolar, como no aplicativo. */
  .thread-head { position: sticky; top: 0; z-index: 2; background: inherit; }
}

html[data-theme="dark"] .chatw-composer { border-color: var(--border); }

/* Aplicativos colapsável */
.apps-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.apps-toggle:hover { color: var(--g-ink, #202124); }
.apps-group { display: none; }
.apps-group.open { display: block; }

/* Reforço: no celular a lateral é gaveta (fora da tela) e o conteúdo ocupa tudo */
@media (max-width: 820px) {
  .app { display: block; }
  .main { width: 100%; }
  .sidebar { width: 86%; max-width: 320px; }
}

/* Menu de conta (avatar no topo) */
.acct { position: relative; }
.acct-avatar { width: 36px; height: 36px; border-radius: 50%; border: none;
  background: var(--g-blue, #1a73e8); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.acct-avatar:hover { box-shadow: 0 0 0 4px rgba(26,115,232,.12); }
.acct-pop { display: none; position: absolute; right: 0; top: 48px; background: #fff;
  border: 1px solid var(--g-line, #e8eaed); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.2);
  min-width: 250px; padding: 8px 0; z-index: 70; }
.acct-pop.open { display: block; }
.acct-head { display: flex; gap: 12px; align-items: center; padding: 10px 16px 12px; border-bottom: 1px solid var(--g-line, #e8eaed); margin-bottom: 6px; }
.acct-pop a { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: var(--text); font-size: 14px; }
.apps-pop a { display: flex; align-items: center; gap: 12px; }
.acct-pop a:hover { background: #f1f3f4; text-decoration: none; }

/* Densidade compacta */
.density-compact .msgrow { min-height: 32px; padding: 3px 16px; }
.density-compact .navlink { padding: 5px 12px 5px 20px; }
.density-compact .msgrow .subject { font-size: 13px; }

/* Toast (avisos) — no topo da tela, abaixo da barra superior. */
.wm-toast { position: fixed; left: 50%; top: 68px; transform: translateX(-50%) translateY(-180%);
  background: #323232; color: #fff; padding: 11px 18px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 90; transition: transform .3s ease; font-size: 14px; }
.wm-toast.show { transform: translateX(-50%) translateY(0); }
.wm-toast a { color: #8ab4f8; font-weight: 600; }

/* Anexos: drop zone + miniaturas */
.dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 14px; text-align: center; color: var(--muted); cursor: pointer; }
.dropzone.drag { border-color: var(--g-blue, #1a73e8); background: #eaf1fb; color: #1a73e8; }
.dropfiles { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.dropfiles li { padding: 3px 0; }
.att-thumb { max-width: 120px; max-height: 90px; border-radius: 6px; border: 1px solid var(--border); vertical-align: middle; }

/* Lista de e-mails em largura total (sem painel de leitura — abre em modal). */
.mail-split { display: flex; gap: 14px; align-items: flex-start; }
.mail-list { flex: 1; min-width: 0; }

/* Launcher de aplicativos (grade, topo à direita) */
.apps-btn { background: transparent; color: var(--g-grey, #5f6368); font-size: 20px; }
.apps-btn:hover { background: #e9eaed; box-shadow: none; }
.apps-pop { min-width: 210px; }

/* Modal largo (leitura de e-mail) */
.modal-card.wide { max-width: 900px; }
/* Painel da conta em abas: dispositivos e backup passam da altura da tela. */
.modal-card.wide .modal-body { max-height: 78vh; overflow-y: auto; }
.modal-card .mtabbar { margin-top: 10px; }
.modal-card .mtab-body { min-height: 120px; }
.modal-card.wide #wmModalBody { max-height: 78vh; overflow: auto; }

/* Arrastar mensagem → pasta */
.msgrow.dragging { opacity: .5; }
.sidebar [data-folder].drop-target { background: #d3e3fd; outline: 2px dashed var(--g-blue, #1a73e8); outline-offset: -2px; }

/* Rolagem só na lista de e-mail (toolbar/sidebar fixos, estilo Gmail).
   Escopado à tela de pasta (body.mail-page), sem afetar admin/config. */
body.mail-page { overflow: hidden; height: 100vh; }
body.mail-page .app { height: 100vh; min-height: 0; overflow: hidden; }
body.mail-page .sidebar { overflow-y: auto; }
body.mail-page .main { height: 100vh; min-height: 0; }
.mail-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 14px 20px 0; }
.mail-content .wm-toolbar { flex-shrink: 0; }
.mail-content .mail-split { flex: 1; min-height: 0; align-items: stretch; }
.mail-content .mail-list { display: flex; flex-direction: column; min-height: 0; }
.mail-content .mail-list > form { flex-shrink: 0; }
.mail-content .mail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
/* Bulkbar grudada no topo da rolagem (fica sempre visível). */
.mail-content .mail-scroll > form { position: sticky; top: 0; z-index: 6; background: #f6f8fc; }
.mail-content .mail-pane { overflow-y: auto; min-height: 0; }
@media (max-width: 820px) { .mail-content { padding: 6px 0 0; } }
.msgrow.sel { background: #e8f0fe !important; box-shadow: inset 3px 0 0 var(--g-blue, #1a73e8); }
/* Leitura de e-mail: rola só a mensagem; sidebar e topo ficam fixos (Gmail).
   Herda flex:1/overflow:auto de .content; só falta destravar a altura. */
.msg-content { min-height: 0; }
/* A barra de ações fica logo abaixo da busca, grudada no topo enquanto a
   mensagem rola.
   
   A tentativa anterior puxava a barra para dentro do respiro do container com
   `margin-top: -20px` e devolvia o respiro como padding dela. Não funciona:
   `position: sticky` posiciona a **margem** do elemento, então, grudada, a
   margem ficava em `top: 0` e a borda visível 20px abaixo — sobrava uma faixa
   por onde o texto passava por cima da barra ao rolar (era o que aparecia na
   tela: uma linha do e-mail acima da barra).
   
   Agora o container não tem respiro no topo e a barra carrega o dela: sem
   margem negativa vertical, a borda da barra é que gruda em `top: 0`. A margem
   negativa horizontal continua, para o fundo cobrir a largura inteira. */
.content.msg-content { padding-top: 0; }
.msg-content .msg-actions { position: sticky; top: 0; z-index: 5; background: #fff;
  border-bottom: 1px solid var(--g-line); }
.msg-content > .msg-actions { margin: 0 -20px 12px; padding: 10px 20px; }
/* Dentro de uma conversa a barra pertence ao cartão da mensagem aberta: gruda
   igual, mas sem sangrar para fora dele. */
.msg-content .conv-open > .msg-actions { margin: 0 -16px 10px; padding: 8px 16px; }
/* Como o container perdeu o respiro no topo, a conversa devolve o dela — senão
   o cabeçalho "Conversa — N mensagens" encosta na barra de busca. */
.msg-content > .conv-thread { padding-top: 14px; }
html[data-theme="dark"] .msg-content .msg-actions { background: var(--panel);
  border-bottom-color: var(--border); }
/* No celular o respiro do container é outro (6px, e zero nas laterais) — e esta
   regra precisa vir DEPOIS da de cima, senão a do desktop ganha. */
@media (max-width: 820px) {
  .msg-content > .msg-actions { margin: 0 0 10px; padding: 8px 6px; }
  .msg-content .conv-open > .msg-actions { margin: 0 -16px 10px; padding: 8px 16px; }
}
@media (max-width: 1000px) {
  .mail-pane { display: none; }
  .mail-list { flex: 1 1 100%; max-width: none; }
}

/* Cards clicáveis + gráfico do painel */
a.card { text-decoration: none; color: var(--text); transition: box-shadow .15s; }
a.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.14); text-decoration: none; }
.chart { display: flex; gap: 4px; align-items: flex-end; height: 150px; padding-top: 8px; }
.chart-col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; outline: none; }
.bars { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 120px; width: 100%; }
.bars .bar { flex: 0 1 14px; min-width: 3px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bar.ham { background: var(--g-blue, #1a73e8); }
.bar.spam { background: var(--danger); }
.chart-x { font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; height: 14px; }
/* Tooltip do gráfico: a coluna inteira é o alvo (barras finas são difíceis de acertar) */
.chart-col:hover .bar, .chart-col:focus-visible .bar { filter: brightness(1.18); }
.chart-col::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--panel);
  font-size: 12px; line-height: 1; padding: 6px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .1s; pointer-events: none; z-index: 5;
}
.chart-col:hover::after, .chart-col:focus-visible::after { opacity: 1; visibility: visible; }
/* Não deixa o tooltip vazar para fora da tela nas pontas */
.chart-col:first-child::after { left: 0; transform: none; }
.chart-col:last-child::after { left: auto; right: 0; transform: none; }

/* ============================================================
   Tema escuro (painel admin) — alta especificidade via [data-theme]
   para vencer as cores fixas do bloco "estilo Gmail" acima.
   ============================================================ */
html[data-theme="dark"] {
  --bg: #14161f;
  --panel: #1c1f2b;
  --border: #2e3242;
  --text: #e6e8ef;
  --muted: #9aa0b4;
  --accent: #5b7cfa;
  --accent-dark: #4863d6;
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --unread: #232a44;
  /* Tokens "estilo Gmail" do admin (abas ativas, números do dashboard, bordas,
     legendas): no dark apontam p/ os tokens escuros. Sem isto caíam nos
     fallbacks claros fixos e ficavam ilegíveis no tema escuro. */
  --g-blue: var(--accent);
  --g-ink: var(--text);
  --g-grey: var(--muted);
  --g-line: var(--border);
  --g-red: var(--danger);
  --tint-danger: #3a1414;
  --tint-warning: #3a2c0c;
  --tint-info: #102a3a;
  --tint-code: #232a3a;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .sidebar { background: var(--panel); border-right: 1px solid var(--border); }
html[data-theme="dark"] .topbar { background: var(--panel); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .content { background: var(--bg); }
html[data-theme="dark"] .admin-page { background: var(--bg); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat .card { border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] .btn:hover { background: #262a3a; }
html[data-theme="dark"] .navlink { color: var(--text); }
html[data-theme="dark"] .navlink:hover { background: #262a3a; }
html[data-theme="dark"] .navlink.active { background: #232a44; color: #cdd6ff; }
html[data-theme="dark"] .section-label { color: var(--muted); }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=number],
html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background: #11131c; color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] .msgrow:hover, html[data-theme="dark"] .cal-cell.other-month,
html[data-theme="dark"] .menu-pop form button:hover, html[data-theme="dark"] .acct-pop a:hover {
  background: #262a3a;
}
html[data-theme="dark"] .menu-pop, html[data-theme="dark"] .acct-pop { background: var(--panel); }
html[data-theme="dark"] .mmnav a { color: #aebbff; }
html[data-theme="dark"] .mmnav a:hover { background: rgba(91,124,250,.15); }
html[data-theme="dark"] .flash.success { background: #103a26; color: #6ee7b7; border-color: #1d5b3e; }
html[data-theme="dark"] .flash.danger  { background: #3a1414; color: #fca5a5; border-color: #5b2424; }
html[data-theme="dark"] .flash.warning { background: #3a2c0c; color: #fcd34d; border-color: #5b4a18; }
html[data-theme="dark"] .flash.info    { background: #102a3a; color: #93c5fd; border-color: #1d4b6b; }
html[data-theme="dark"] .theme-toggle { filter: brightness(1.4); }

/* Abas das telas grandes do admin (Configurações, detalhe do domínio).
   Antes duplicado inline em cada template; centralizado aqui e dark-aware
   (usa --border e --g-blue, que o bloco dark sobrescreve). */
.tabbar { display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--border,#e3e6ea); margin:4px 0 16px; }
.tabbtn { background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px;
  padding:9px 14px; font:600 14px inherit; color:var(--muted,#5f6368); cursor:pointer; }
.tabbtn.active { color:var(--g-blue,#213780); border-bottom-color:var(--g-blue,#213780); }
.tabpane { display:none; } .tabpane.active { display:block; }

/* ============================================================
   Tema escuro — webmail (estilo Gmail). Sobrescreve as cores
   claras fixas do bloco "estilo Gmail" (maior especificidade
   via html[data-theme=dark]).
   ============================================================ */
html[data-theme="dark"] {
  --wm-surface: #1c1f2b;   /* superfície (lista, painéis) */
  --wm-surface2: #232634;  /* hover / faixas */
  --wm-read: #171a23;      /* linha lida (mais apagada) */
}
/* Estrutura */
html[data-theme="dark"] .main { background: var(--bg); }
html[data-theme="dark"] .content { background: var(--bg); border-top-left-radius: 0; }
/* Barra de busca */
html[data-theme="dark"] .searchbar { background: var(--wm-surface2); }
html[data-theme="dark"] .searchbar:focus-within { background: #2a2e3c; box-shadow: 0 1px 6px rgba(0,0,0,.4); }
html[data-theme="dark"] .searchbar input { color: var(--text); }
/* Botão Escrever + criar (calendário) */
html[data-theme="dark"] .compose-btn { background: #29406b; color: #cfe0ff; box-shadow: none; }
html[data-theme="dark"] .compose-btn:hover { background: #32507f; }
/* Lista de mensagens */
html[data-theme="dark"] .msglist { background: transparent; }
html[data-theme="dark"] .msgrow { border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .msgrow.unread { background: var(--wm-surface); }
html[data-theme="dark"] .msgrow.read { background: var(--wm-read); }
html[data-theme="dark"] .msgrow:hover { background: var(--wm-surface2); box-shadow: none; }
html[data-theme="dark"] .msgrow.unread .from, html[data-theme="dark"] .msgrow.unread .subject,
html[data-theme="dark"] .msgrow.unread .date { color: var(--text); }
html[data-theme="dark"] .msgrow.read .from, html[data-theme="dark"] .msgrow.read .subject { color: var(--muted); }
html[data-theme="dark"] .msgrow .subject .preview { color: var(--muted); }
html[data-theme="dark"] .msgrow.sel { background: #26314d !important; box-shadow: inset 3px 0 0 var(--accent); }
html[data-theme="dark"] .rowact:hover, html[data-theme="dark"] .cal-toolbar .rowact:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .bulkbar { background: var(--wm-read); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .thread-rest .msgrow { background: var(--wm-read); }
html[data-theme="dark"] .thread-count { background: var(--wm-surface2); color: var(--muted); }
/* Leitura */
html[data-theme="dark"] .msg-actions .rowact:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .reply-btn { background: var(--panel); color: #bcd3ff; border-color: var(--border); }
html[data-theme="dark"] .reply-btn:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .img-banner { background: #3a2c0c; border-color: #5b4a18; color: #fcd34d; }
html[data-theme="dark"] .msgbody { color: var(--text); }
html[data-theme="dark"] .wm-quote-toggle { background: var(--wm-surface2); border-color: var(--border); color: var(--muted); }
html[data-theme="dark"] .wm-quote-toggle:hover { background: var(--panel); }
html[data-theme="dark"] .msgrow.kbd-active { background: #1e2b45; }
/* Compositor */
html[data-theme="dark"] .compose-panel, html[data-theme="dark"] .compose-card { background: var(--panel); }
html[data-theme="dark"] .compose-bar, html[data-theme="dark"] .compose-head { background: #2a2e3c; }
html[data-theme="dark"] .cfield { border-color: var(--border); }
html[data-theme="dark"] .cinput, html[data-theme="dark"] .cbody { color: var(--text) !important; }
html[data-theme="dark"] .cc-toggle { color: var(--muted); }
html[data-theme="dark"] .sig-toolbar, html[data-theme="dark"] .cmp-toolbar { background: var(--wm-surface2); border-color: var(--border); }
html[data-theme="dark"] .sig-toolbar button, html[data-theme="dark"] .cmp-toolbar button { color: var(--text); }
html[data-theme="dark"] .sig-toolbar button:hover, html[data-theme="dark"] .cmp-toolbar button:hover { background: #333846; }
html[data-theme="dark"] .sig-editor, html[data-theme="dark"] .cmp-editor { background: #11131c; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .drive-picker { border-color: var(--border); }
html[data-theme="dark"] .drive-file { color: var(--text); }
html[data-theme="dark"] .drive-file:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .drive-chip { background: #26314d; color: #bcd3ff; }
/* Menus / popovers */
html[data-theme="dark"] .menu-pop > button { color: var(--text); }
html[data-theme="dark"] .menu-pop > button:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .acct-pop a { color: var(--text); }
/* Calendário (mês) */
html[data-theme="dark"] .cal-grid { background: var(--border); border-color: var(--border); }
html[data-theme="dark"] .cal-head { background: var(--panel); color: var(--muted); }
html[data-theme="dark"] .cal-cell { background: var(--wm-surface); }
html[data-theme="dark"] .cal-cell:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .cal-cell.other-month { background: var(--wm-read); }
html[data-theme="dark"] .cal-daynum span { color: var(--text); }
html[data-theme="dark"] .cal-cell.today .cal-daynum span { background: var(--accent); color: #fff; }
html[data-theme="dark"] .cal-views { border-color: var(--border); }
html[data-theme="dark"] .cal-views a { color: var(--muted); }
html[data-theme="dark"] .cal-views a:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .cal-views a.on { background: var(--accent); color: #fff; }
html[data-theme="dark"] .cal-today { color: var(--text); }
/* Calendário (semana/dia) */
html[data-theme="dark"] .tg { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .tg-head, html[data-theme="dark"] .tg-dayhead { border-color: var(--border); }
html[data-theme="dark"] .tg-dayhead .tg-wd { color: var(--muted); }
html[data-theme="dark"] .tg-hour span { color: var(--muted); }
html[data-theme="dark"] .tg-col { border-color: var(--border); }
html[data-theme="dark"] .tg-slot { border-bottom-color: var(--border); }
/* Chat */
html[data-theme="dark"] .chat .convos, html[data-theme="dark"] .chat .thread { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .chat .convo { color: var(--text); }
html[data-theme="dark"] .chat .convo:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .chat .convo.active { background: #26314d; color: #cfe0ff; }
html[data-theme="dark"] .thread-head { border-color: var(--border); }
html[data-theme="dark"] .chat .msgs { background: var(--bg); }
html[data-theme="dark"] .bubble.in { background: var(--wm-surface2); color: var(--text); box-shadow: none; }
html[data-theme="dark"] .bubble.out { background: var(--accent); color: #fff; }
html[data-theme="dark"] .chat .composer { border-color: var(--border); }
/* Contatos */
html[data-theme="dark"] .contact-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .note-card, html[data-theme="dark"] .note-quick { background: var(--wm-surface2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .note-card:hover { border-color: var(--accent); box-shadow: none; }
html[data-theme="dark"] .note-card-link { color: var(--text); }
html[data-theme="dark"] .note-pal summary:hover { background: rgba(255,255,255,.12); }
/* No escuro a mesma cor precisa ser escura — o amarelo claro do Keep com texto
   claro em cima não se lê. */
html[data-theme="dark"] .note-c-vermelho { background: #77172e; }
html[data-theme="dark"] .note-c-laranja  { background: #692b17; }
html[data-theme="dark"] .note-c-amarelo  { background: #7c4a03; }
html[data-theme="dark"] .note-c-verde    { background: #264d3b; }
html[data-theme="dark"] .note-c-azul     { background: #256377; }
html[data-theme="dark"] .note-c-roxo     { background: #472e5b; }
html[data-theme="dark"] .note-c-rosa     { background: #6c394f; }
html[data-theme="dark"] .note-c-cinza    { background: #3c3f43; }
html[data-theme="dark"] .note-card[class*="note-c-"]:not(.note-c-padrao) .note-card-body,
html[data-theme="dark"] .note-card[class*="note-c-"]:not(.note-c-padrao) .note-card-date { color: #dadce0; }
html[data-theme="dark"] .contact-row:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .contact-name { color: var(--text); }
/* Grade / tabelas */
html[data-theme="dark"] table.grid th, html[data-theme="dark"] table.grid td { border-bottom-color: var(--border); }

/* ==== Ícones SVG (Material, estilo Gmail): alinhamento por contexto ==== */
.rowact { display: inline-flex; align-items: center; justify-content: center; }
.msgrow .star .mmi, .msgrow .clip .mmi { display: block; }
.msgrow .clip { display: inline-flex; vertical-align: middle; color: var(--g-grey, #5f6368); }
.menu-pop > button, .menu-pop form button { display: flex; align-items: center; gap: 10px; }
.menu-pop .mmi { color: var(--g-grey, #5f6368); flex: none; }
.reply-btn { display: inline-flex; align-items: center; gap: 8px; }
.att-item .btn .mmi, .att-chip .mmi { flex: none; }
.cmp-toolbar button .mmi, .sig-toolbar button .mmi { display: block; margin: 0 auto; }
.compose-head .x .mmi, .modal-x .mmi { display: block; margin: 0 auto; }
.wm-empty-ico { line-height: 0; }
.wm-empty-ico .mmi { opacity: .5; }
.search-ico { display: inline-flex; align-items: center; }
.compose-btn .mmi { fill: currentColor; }
.chatw-hbtn .mmi { fill: #fff; display: block; }
/* Dark: ícones de navegação/menu herdam a cor do texto, não o cinza claro. */
html[data-theme="dark"] .navlink > .mmi,
html[data-theme="dark"] .acct-pop a .mmi,
html[data-theme="dark"] .menu-pop .mmi { color: var(--muted); }

/* ==== Chat (widget) — refinamentos ==== */
.chatw-send { border: none; background: var(--g-blue, #213780); color: #fff; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chatw-send:hover { filter: brightness(1.08); }
.chatw-send .mmi { fill: #fff; display: block; }
.chatw-list .chatw-conv { align-items: center; }
.chatw-conv-mid { flex: 1; min-width: 0; }
.chatw-conv-name { flex: none; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatw-conv-prev { font-size: 12px; color: var(--g-grey, #5f6368); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatw-conv.unread .chatw-conv-name, .chatw-conv.unread .chatw-conv-prev { font-weight: 700; color: var(--g-ink, #202124); }
.chatw-conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.chatw-conv-at { font-size: 11px; color: var(--g-grey, #5f6368); }
.chatw-conv-right .badge { background: var(--g-blue, #213780); color: #fff; }
.chatw-empty { text-align: center; padding: 34px 16px; font-size: 13px; }
.bubble { word-break: break-word; }
.bubble.pending { opacity: .6; }
.bubble.out.failed { background: #fdecea; color: #b3261e; }
/* Chegou mensagem com o painel fechado: quem pisca é o item do menu — antes
   era o balão flutuante, que não existe mais. */
@keyframes chatw-pulse {
  0%   { background: rgba(217,48,37,.18); }
  70%  { background: rgba(217,48,37,.04); }
  100% { background: transparent; }
}
.navlink-chat.pulse { animation: chatw-pulse 1s ease-out 2; }
html[data-theme="dark"] .chatw-conv.unread .chatw-conv-name,
html[data-theme="dark"] .chatw-conv.unread .chatw-conv-prev { color: var(--text); }
html[data-theme="dark"] .chatw-send { background: var(--accent); }

/* ==== Compositor estilo Gmail ==== */
/* Só no desktop: esta regra vinha DEPOIS do @media do celular e, por não estar
   dentro de nenhuma media query, vencia no cascata e devolvia 640px de largura
   ao painel no celular. */
@media (min-width: 821px) {
  .compose-panel { width: 640px; }
}
/* Faixa principal de formatação sempre em uma linha só. */
.cmp-toolbar-main { flex-wrap: nowrap; overflow-x: auto; }
.compose-panel.minimized { height: auto !important; }
.compose-panel.minimized .compose-body { display: none; }
.compose-head { padding: 8px 8px 8px 16px; font-size: 15px; font-weight: 500; cursor: default; }
.compose-panel.minimized .compose-head { cursor: pointer; }
.compose-head .x { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.compose-head .x:hover { background: rgba(255,255,255,.16); }
/* Barra inferior (Enviar em pílula + ícones + lixeira) */
.cmp-foot { display: flex; align-items: center; gap: 2px; margin: 10px -16px -14px; padding: 8px 12px; border-top: 1px solid var(--g-line); }
.cmp-send { border: none; background: #0b57d0; color: #fff; font-weight: 600; font-size: 15px;
  padding: 9px 26px; border-radius: 18px 0 0 18px; cursor: pointer; }
.cmp-send:hover { box-shadow: 0 1px 3px rgba(60,64,67,.4); background: #0a4fbf; }
/* Botão dividido "Enviar | v" (agendar envio), estilo Gmail. */
.cmp-sendwrap { display: inline-flex; align-items: stretch; margin-right: 8px; position: relative; }
.cmp-send-caret { border-radius: 0 18px 18px 0; padding: 9px 10px; border-left: 1px solid rgba(255,255,255,.35); }
.cmp-send-caret .mmi { display: block; fill: #fff; }
.cmp-sched-menu { bottom: 44px; top: auto; left: 0; right: auto; width: max-content; }
.snooze-menu { left: 0; right: auto; width: max-content; }
.cmp-tpl-menu { bottom: 44px; top: auto; left: 0; right: auto; width: max-content; max-width: 280px; }
/* Abas da caixa (Principal | Promoções | Atualizações) */
.inbox-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--g-line, #e8eaed);
  margin: 0 0 6px; flex-shrink: 0; }
.inbox-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px;
  color: var(--g-grey, #5f6368); font-size: 14px; font-weight: 500; border-bottom: 3px solid transparent; }
.inbox-tab:hover { background: #f1f3f4; text-decoration: none; }
.inbox-tab.active { color: #0b57d0; border-bottom-color: #0b57d0; }
.inbox-tab .mmi { fill: currentColor; }
.inbox-tab .badge { background: var(--g-grey); color: #fff; }
.inbox-tab.active .badge { background: #0b57d0; }
html[data-theme="dark"] .inbox-tabs { border-color: var(--border); }
html[data-theme="dark"] .inbox-tab:hover { background: var(--wm-surface2); }
/* Painel de leitura lado a lado */
.mail-split.split-on .mail-list { flex: 1; min-width: 380px; max-width: 46%; }
.mail-split.split-on .mail-pane { flex: 1.3; border-left: 1px solid var(--g-line, #e8eaed);
  padding-left: 18px; overflow-y: auto; min-height: 0; }
.mail-split.split-on .msgrow .subject .preview { display: none; }  /* lista estreita */
html[data-theme="dark"] .mail-split.split-on .mail-pane { border-color: var(--border); }
/* Dica de newsletter (cancelar inscrição) + botões-link */
.unsub-hint { font-size: 12.5px; color: var(--g-grey, #5f6368); margin: 2px 0 8px; }
.linklike { background: none; border: none; padding: 0; color: var(--g-blue, #1a73e8);
  cursor: pointer; font-size: inherit; text-decoration: underline; }
/* Swipe no celular: feedback visual (verde = arquivar, vermelho = excluir) */
.msgrow { touch-action: pan-y; }
.msgrow.swipe-right { background: #d7f2dd !important; }
.msgrow.swipe-left { background: #fce8e6 !important; }
/* Lightbox de imagens anexadas */
.lightbox { position: fixed; inset: 0; background: rgba(10,12,20,.88); z-index: 2500;
  display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.lightbox .lb-x { position: absolute; top: 14px; right: 18px; border: none; background: none;
  color: #fff; font-size: 26px; cursor: pointer; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%);
  border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 34px;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.lightbox .lb-nav:hover { background: rgba(255,255,255,.25); }
.lightbox .lb-prev { left: 20px; }
.lightbox .lb-next { right: 20px; }
.lightbox .lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: #e8eaed; font-size: 13px; }
/* Marcadores (labels) */
.label-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  vertical-align: middle; flex: none; }
.navlink .label-dot { margin: 0 4px; }
.label-chip { display: inline-block; font-size: 11px; font-weight: 600; border: 1px solid;
  border-radius: 4px; padding: 0 6px; margin-right: 6px; vertical-align: middle; line-height: 16px; }
/* Busca avançada (painel na barra de busca) */
.searchbar { position: relative; }
.search-adv-btn { border: none; background: none; cursor: pointer; color: var(--g-grey, #5f6368);
  display: inline-flex; align-items: center; padding: 4px; border-radius: 50%; }
.search-adv-btn:hover { background: #e9eaed; }
.search-adv-btn .mmi { display: block; fill: currentColor; }
.adv-search { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  background: #fff; border: 1px solid var(--g-line, #e8eaed); border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,.2); padding: 16px 18px; }
.adv-grid { display: grid; grid-template-columns: 90px 1fr; gap: 8px 10px; align-items: center; }
.adv-grid label { margin: 0; font-size: 13px; color: var(--g-grey, #5f6368); }
.adv-grid input[type=text], .adv-grid input[type=date], .adv-grid select { width: 100%; font-size: 13px; }
html[data-theme="dark"] .adv-search { background: var(--panel); border-color: var(--border); }
html[data-theme="dark"] .search-adv-btn:hover { background: var(--wm-surface2); }
/* Compositor recebendo arquivos arrastados */
.compose-form.droppable { outline: 2px dashed #0b57d0; outline-offset: -6px; border-radius: 8px; }
/* Overlay de atalhos (tecla "?") */
.keys-overlay { position: fixed; inset: 0; background: rgba(15,20,35,.55); z-index: 2000;
  display: flex; align-items: center; justify-content: center; }
.keys-card { background: #fff; border-radius: 12px; padding: 22px 26px; max-width: 420px;
  width: 92%; max-height: 84vh; overflow: auto; box-shadow: 0 8px 40px rgba(0,0,0,.35); }
.keys-card h3 { margin: 0 0 12px; }
.keys-card table { width: 100%; border-collapse: collapse; }
.keys-card td { padding: 5px 8px; font-size: 14px; border-bottom: 1px solid #f1f3f4; }
.keys-card td:first-child { width: 120px; white-space: nowrap; }
.keys-card kbd { background: #f1f3f4; border: 1px solid #dadce0; border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 7px; font-size: 12px; font-family: inherit; }
html[data-theme="dark"] .keys-card { background: var(--panel); }
html[data-theme="dark"] .keys-card td { border-color: var(--border); }
html[data-theme="dark"] .keys-card kbd { background: var(--wm-surface2); border-color: var(--border); color: var(--text); }
/* Anti-phishing: banner de falha de autenticação + tag "externo". */
.phish-banner { display: flex; gap: 10px; align-items: flex-start; background: #fce8e6;
  border: 1px solid #f5c6c0; color: #b3261e; border-radius: 8px; padding: 10px 14px;
  margin: 8px 0 12px; font-size: 13px; }
.phish-banner .mmi { flex: none; margin-top: 2px; }
/* Prioridade: "!" vermelho na lista, tarja discreta ao abrir. */
.prio-marca { display: inline-block; font-weight: 700; margin-right: 3px; }
.prio-alta { color: #d93025; }
.prio-baixa { color: #5f6368; font-weight: 400; }
.prio-banner { display: flex; gap: 8px; align-items: center; border-radius: 8px;
  padding: 7px 12px; margin: 8px 0 12px; font-size: 13px; }
.prio-banner .mmi { flex: none; }
.prio-banner-alta { background: #fce8e6; border: 1px solid #f5c6c0; color: #b3261e; }
.prio-banner-baixa { background: var(--g-bg, #f1f3f4); border: 1px solid var(--g-line, #dadce0); color: #5f6368; }
html[data-theme="dark"] .prio-banner-alta { background: #3a1f1d; border-color: #5c2b26; color: #f2b8b5; }
html[data-theme="dark"] .prio-banner-baixa { background: var(--wm-surface2); border-color: var(--border); color: var(--muted); }
.ext-tag { display: inline-block; font-size: 11px; font-weight: 600; color: #5f6368;
  background: #f1f3f4; border: 1px solid #dadce0; border-radius: 4px; padding: 0 6px;
  vertical-align: middle; }
html[data-theme="dark"] .phish-banner { background: #3a2020; border-color: #5b2b2b; color: #f28b82; }
html[data-theme="dark"] .ext-tag { background: var(--wm-surface2); border-color: var(--border); color: var(--muted); }
.cmp-sched-menu > button { display: flex; align-items: center; gap: 10px; }
.cmp-sched-menu .mmi { color: var(--g-grey, #5f6368); }
.cmp-iconbtn { border: none; background: none; color: var(--g-grey, #5f6368); width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cmp-iconbtn:hover { background: #e9eaed; }
.cmp-iconbtn.on { background: #e8f0fe; color: #0b57d0; }
.cmp-iconbtn .mmi { fill: currentColor; display: block; }
.cmp-autosave { margin-left: auto; font-size: 12px; padding-right: 4px; white-space: nowrap; }
.cmp-trash:hover { color: var(--danger, #d93025); background: #fce8e6; }
/* Barra de formatação, agora embaixo (acima da barra de envio) */
.cmp-toolbar[hidden] { display: none !important; }
.compose-body .cmp-toolbar { margin: 6px -16px 0; border: none; border-top: 1px solid var(--g-line);
  border-radius: 0; background: transparent; padding: 4px 10px; }
/* A faixa EXTRA vem logo abaixo da principal, sem borda dupla. */
.compose-body .cmp-toolbar-more { margin-top: 0; border-top: none; padding-top: 0; }
/* Chips de anexo local */
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.att-chip.file { max-width: 100%; }
.att-chip.file b { cursor: pointer; color: var(--g-grey, #5f6368); display: inline-flex; align-items: center; }
.att-chip.file b:hover { color: var(--danger, #d93025); }
html[data-theme="dark"] .cmp-foot { border-color: var(--border); }
html[data-theme="dark"] .cmp-iconbtn:hover { background: var(--wm-surface2); }
html[data-theme="dark"] .cmp-iconbtn.on { background: #24314f; color: #8ab4f8; }
html[data-theme="dark"] .compose-body .cmp-toolbar { border-color: var(--border); }
html[data-theme="dark"] .cmp-trash:hover { background: #3a2020; }
/* Barra de formatação: ícones cinza (estilo Gmail) */
.compose-body .cmp-toolbar button { color: var(--g-grey, #5f6368); }
.compose-body .cmp-toolbar button:hover { background: #e9eaed; }
.compose-body .cmp-toolbar .mmi { fill: currentColor; }
/* No compositor os ícones são cinza (estilo Gmail); a cor é a única
   customização que sobra para o seletor de cor. */
.compose-body .cmp-color { color: var(--g-grey, #5f6368); }
.compose-body .cmp-color .mmi { fill: currentColor; }
html[data-theme="dark"] .compose-body .cmp-toolbar button, html[data-theme="dark"] .cmp-color { color: var(--muted); }
html[data-theme="dark"] .compose-body .cmp-toolbar button:hover { background: var(--wm-surface2); }

/* Seletor "selecionar…" (checkbox + seta) na barra da lista, estilo Gmail. */
.selall-wrap { display: inline-flex; align-items: center; gap: 1px; position: relative; }
.selall-caret { border: none; background: none; cursor: pointer; color: var(--g-grey, #5f6368);
  display: inline-flex; align-items: center; padding: 2px; border-radius: 4px; }
.selall-caret:hover { background: #e9eaed; }
.selall-caret .mmi { fill: currentColor; display: block; }
.selall-menu { top: 26px; left: 0; right: auto; min-width: 150px; }
html[data-theme="dark"] .selall-caret { color: var(--muted); }
html[data-theme="dark"] .selall-caret:hover { background: var(--wm-surface2); }


/* ===== Compositor no celular (app bar estilo Gmail) =====
   Este bloco fica no FIM do arquivo de propósito. As regras de desktop do
   compositor (.compose-head, .compose-head .x, .cmp-foot, .cbody) estão
   espalhadas mais acima, FORA de media query — e media query não soma
   especificidade. Escrito junto dos outros @media, tudo aqui seria desfeito
   por elas; no fim, vence por vir depois. */
@media (max-width: 820px) {
  /* App bar clara, como a do Gmail: voltar / anexar / enviar / mais.
     Some o título e os controles de janela — não há janela para minimizar
     nem maximizar quando o compositor ocupa a tela inteira. */
  /* `.compose-head .x` tem especificidade (0,2,0) e define display:inline-flex
     mais acima no arquivo. Uma regra `.cmp-desk` solta (0,1,0) PERDE dela por
     especificidade — não adianta vir depois. Por isso o seletor completo:
     sem ele, os botões de janela (minimizar/maximizar/fechar) continuavam
     aparecendo no celular ao lado da barra nova. */
  .compose-head .x.cmp-mob { display: inline-flex; }
  .compose-head .x.cmp-desk { display: none; }
  .compose-head #composeTitle { display: none; }
  .compose-head {
    background: var(--panel, #fff); color: var(--text, #1f1f1f);
    border-bottom: 1px solid var(--g-line); border-radius: 0;
    padding: 6px 4px; gap: 2px; cursor: default;
  }
  .compose-head .x { color: inherit; width: 42px; height: 42px; }
  .compose-head .x:hover { background: rgba(0,0,0,.06); }

  /* Corpo sem moldura: no Gmail o texto começa direto, sem caixa desenhada. */
  .compose-body { padding: 0 16px 12px; }
  .cmp-editor, .cbody { border: none !important; border-radius: 0 !important;
    padding: 14px 0 !important; min-height: 220px !important; }
  .cmp-editor:empty::before { content: "Escrever e-mail"; color: var(--g-grey); }
  .cmp-toolbar { border-radius: 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }

  /* A barra inferior (enviar em pílula, Drive, modelos, rascunho, descartar)
     recolhe atrás do "⋮". Enviar e anexar subiram para a app bar. */
  .cmp-foot { display: none; }
  .compose-panel.show-foot .cmp-foot { display: flex; flex-wrap: wrap; }
}

/* --- Agenda: quem está livre, filtro de pessoa e arrastar para mover ----- */
.cal-quem{ max-width:190px; padding:4px 8px; border-radius:8px; }
.ev-livre{ padding:2px 0 0 30px; font-size:13px; }
.livre-lista{ list-style:none; margin:4px 0; padding:0; }
.livre-lista li{ padding:2px 0; }
.livre-lista .ok{ color:#1a7f37; font-weight:600; }
.livre-lista .busy{ color:#b42318; font-weight:600; }
.tg-event.tg-move{ cursor:grab; touch-action:none; }
.tg-event.dragging{ cursor:grabbing; opacity:.75; z-index:5;
                    box-shadow:0 6px 18px rgba(0,0,0,.25); }

/* --- Agenda: lateral, visões de lista/ano e tarefas ---------------------- */
.mini-cal { padding: 6px 12px 10px; }
.mini-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.mini-nome { font-size: 13px; font-weight: 600; }
.mini-top .rowact { width: 26px; height: 26px; font-size: 16px; display: inline-flex;
                    align-items: center; justify-content: center; border-radius: 50%; color: var(--g-grey); }
.mini-top .rowact:hover { background: #e9eaed; }
.mini-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-top: 6px; }
.mini-grade .wd { font-size: 10px; color: var(--g-grey); text-align: center; padding: 2px 0; }
.mini-grade .d { font-size: 11px; text-align: center; padding: 4px 0; border-radius: 50%; color: inherit; }
.mini-grade .d:hover { background: #e9eaed; text-decoration: none; }
.mini-grade .d.fora { color: #b8bcc4; }
.mini-grade .d.hoje { background: var(--g-blue); color: #fff; font-weight: 600; }
.cal-camadas { display: flex; flex-direction: column; gap: 6px; padding: 2px 20px 8px; }
.cal-camadas label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.cal-quem.lateral { margin: 0 20px 6px; max-width: none; width: calc(100% - 40px); }
.tarefas-lateral { padding: 0 12px 10px; }

.tarefa { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; font-size: 13px; }
.tarefa:hover { background: #f1f3f4; }
.tarefa.focada { background: #e8f0fe; }
.tarefa-check { width: 18px; height: 18px; border: 1.5px solid var(--g-grey); border-radius: 50%;
                background: #fff; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.tarefa.feita .tarefa-check { background: var(--g-blue); border-color: var(--g-blue); color: #fff; }
.tarefa.feita .tarefa-txt { text-decoration: line-through; color: var(--g-grey); }
.tarefa-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-data { font-size: 11px; color: var(--g-grey); }
.tarefa-data.atrasada { color: #b42318; font-weight: 600; }
.tarefa-x { border: 0; background: none; color: var(--g-grey); cursor: pointer; font-size: 16px; line-height: 1; }
.tarefa-x:hover { color: #b42318; }
.tarefas-lista .section-label { margin-top: 10px; }

.cal-criar { position: relative; display: inline-flex; align-items: center; }
.cal-criar-mais { border: 0; background: none; cursor: pointer; color: var(--g-grey); font-size: 14px; padding: 6px; }
.cal-criar-menu { position: absolute; top: 100%; left: 0; z-index: 20; background: #fff;
                  border: 1px solid var(--g-line); border-radius: 10px; padding: 6px;
                  box-shadow: 0 6px 18px rgba(0,0,0,.15); min-width: 170px; }
.cal-criar-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
                    border-radius: 8px; font-size: 14px; color: inherit; }
.cal-criar-menu a:hover { background: #f1f3f4; text-decoration: none; }
.cal-busca input { width: 190px; padding: 6px 10px; border-radius: 18px; border: 1px solid var(--g-line); }
.cal-busca { display: inline-flex; align-items: center; gap: 4px; }

.cal-lista { background: #fff; border: 1px solid var(--g-line); border-radius: 12px; overflow: hidden; }
.cal-lista-dia { display: flex; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--g-line); }
.cal-lista-dia:last-child { border-bottom: 0; }
.cal-lista-dia.hoje { background: #e8f0fe; }
.cal-lista-data { width: 62px; text-align: center; color: var(--g-grey); font-size: 11px; }
.cal-lista-data .dnum { display: block; font-size: 20px; color: var(--fg); }
.cal-lista-itens { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cal-lista-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px;
                  border-radius: 8px; color: inherit; font-size: 14px; }
.cal-lista-item:hover { background: #f1f3f4; text-decoration: none; }
.cal-lista-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cal-lista-item .hora { color: var(--g-grey); font-size: 12px; min-width: 74px; }

.cal-ano { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.cal-ano-mes { background: #fff; border: 1px solid var(--g-line); border-radius: 12px; padding: 10px; }
.cal-ano-nome { display: block; text-align: center; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: inherit; }
.cal-ano-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-ano-grade .wd { font-size: 10px; color: var(--g-grey); text-align: center; }
.cal-ano-grade .d { font-size: 11px; text-align: center; padding: 3px 0; border-radius: 50%; color: inherit; }
.cal-ano-grade .d:hover { background: #e9eaed; text-decoration: none; }
.cal-ano-grade .d.fora { color: #d0d3d8; }
.cal-ano-grade .d.hoje { background: var(--g-blue); color: #fff; font-weight: 600; }
.cal-ano-grade .d.tem { font-weight: 700; box-shadow: inset 0 -2px 0 var(--g-blue); }
@media (max-width: 820px) { .cal-busca input { width: 120px; } }

/* --- Evento na janelinha (clique no calendário) -------------------------- */
.ev-modal { padding: 4px 2px; }
.ev-modal-tit { display: flex; align-items: center; gap: 10px; }
.ev-modal-tit h3 { margin: 0; font-size: 18px; font-weight: 600; }
.ev-modal-tit .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ev-modal-quando { margin: 2px 0 12px 24px; }
.ev-modal-linha { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 14px; }
.ev-modal-linha svg { flex: none; color: var(--g-grey); margin-top: 2px; }
.ev-convidado { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.ev-modal-pessoa { align-items: center; }
.ev-convidado .avatar-xs, .ev-modal-pessoa .avatar-xs { width: 26px; height: 26px; font-size: 12px; flex: none; }
.ev-convidado .tag { font-size: 10px; }
.ev-convidado .resp-accepted { background: #1a7f37; }
.ev-convidado .resp-declined { background: #b42318; }
.ev-convidado .resp-invited { background: var(--g-grey); }
.ev-modal-acoes { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* --- Convite de agenda dentro da mensagem -------------------------------- */
.msg-convite { border: 1px solid var(--g-line); border-left: 4px solid var(--g-blue);
               border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: #f8fafd; }
.msg-convite.cancelado { border-left-color: #b42318; background: #fff5f4; }
.convite-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g-grey); }
.convite-tit { font-size: 16px; font-weight: 600; margin: 6px 0 2px; }
.convite-quando, .convite-quem { font-size: 13px; }
.convite-acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ag-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.ag-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tabela .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.ag-detalhe h4 { font-size: 14px; }

/* --- Criação rápida do evento (a janelinha) ------------------------------ */
.ev-rapido { display: flex; flex-direction: column; gap: 2px; }
.ev-rapido-tit { border: 0; border-bottom: 2px solid var(--g-blue); background: none;
  font-size: 20px; padding: 6px 2px; margin-bottom: 8px; width: 100%; }
.ev-rapido-tit:focus { outline: none; }
.ev-rapido-abas { display: flex; gap: 6px; margin: 0 0 10px 30px; }
.ev-rapido-abas span, .ev-rapido-abas a { font-size: 13px; padding: 5px 12px;
  border-radius: 16px; color: var(--g-grey); }
.ev-rapido-abas .on { background: #e8f0fe; color: var(--g-blue); font-weight: 600; }
.ev-rapido-abas a:hover { background: #f1f3f4; text-decoration: none; }
.ev-rapido-quando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-rapido-quando .cinput { width: auto; }
.ev-rapido-inteiro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g-grey); }
.ev-rapido-repete { border: none; }
.ev-rapido-pe { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.linklike { background: none; border: 0; color: var(--g-blue); cursor: pointer; font-size: 14px; padding: 0; }

/* --- Celular: a lista e a agenda no tamanho da tela --------------------- */
/* A grade do mês vazava para a direita (SEX/SÁB/DOM cortados) por causa da
   regra de grade: coluna `1fr` tem piso de conteúdo mínimo, e o chip do evento
   ("Independência do Brasil") não quebra. `min-width: 0` na célula devolve à
   coluna o direito de encolher — a etiqueta é que passa a cortar, com "…". */
.cal-cell, .cal-event, .cal-lista-itens { min-width: 0; }
@media (max-width: 820px) {
  /* Só o "⋮" na linha da mensagem. As ações viraram <button> (eram <form>), e
     a regra antiga que as escondia no celular parou de casar — a lista ficou
     com cinco ícones por linha comendo o espaço do assunto. */
  .msgrow .row-actions .rowact { display: none; }
  .msgrow .row-actions .menu-btn { display: inline-flex; }
  /* O recuo de 48px era o lugar do avatar, que a lista não tem mais. */
  .msgrow .subject { padding-left: 0; }

  .cal-toolbar { gap: 6px; }
  .cal-month { font-size: 16px; margin-left: 2px; }
  .cal-busca input { width: 96px; }
  .cal-views { max-width: 100%; overflow-x: auto; }
  .cal-views a { padding: 6px 10px; }
  /* O mês ocupa a tela, como no aplicativo: sem isto sobrava metade da tela
     em branco embaixo de uma grade espremida em cima. */
  .cal-grid { min-height: calc(100dvh - 210px); grid-auto-rows: minmax(62px, 1fr); }
  .cal-cell { min-height: 62px; padding: 3px 3px 4px; }
  .cal-event { font-size: 10px; padding: 1px 5px; gap: 3px; }
  .cal-event .ev-time { font-size: 10px; }
  .cal-head { padding: 8px 2px; font-size: 10px; }
  .cal-ano { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Formulário de evento (modal cheio, "Mais opções") — estilo Google */
/* Grade de disponibilidade ("Encontrar um horário"): uma faixa por pessoa,
   blocos ocupados no eixo do dia e a janela do evento por baixo. */
.livre-grade { margin-top: 6px; font-size: 12px; }
.lg-regua, .lg-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.lg-nome { flex: 0 0 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--g-ink-2, #5f6368); }
.lg-eixo { position: relative; flex: 1; height: 18px; background: #f1f3f4;
  border-radius: 4px; overflow: hidden; }
.lg-regua .lg-eixo { height: 14px; background: none; }
.lg-hora { position: absolute; top: 0; font-size: 10px; color: var(--g-ink-2, #5f6368);
  transform: translateX(-50%); }
.lg-evento { position: absolute; top: 0; bottom: 0; background: rgba(33,55,128,.18);
  border-left: 2px solid var(--g-blue, #213780); border-right: 2px solid var(--g-blue, #213780); }
.lg-ocupado { position: absolute; top: 2px; bottom: 2px; background: #ea4335; opacity: .8;
  border-radius: 2px; }
.lg-semdados { position: absolute; left: 6px; top: 1px; font-size: 10px; color: var(--g-ink-2, #5f6368); }
.lg-marca { flex: 0 0 52px; text-align: right; }
.lg-marca.ok { color: #1a7f37; } .lg-marca.busy { color: #ea4335; }
html[data-theme="dark"] .lg-eixo { background: var(--wm-surface2); }
.lg-opc { font-size: 10px; color: var(--g-ink-2, #5f6368); font-style: italic; }

/* Respostas dos convidados enquanto se edita o evento. */
.ev-respostas { list-style: none; margin: 0; padding: 0; flex: 1; font-size: 13px; }
.ev-respostas li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.ev-resp-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-resp-opc { font-size: 10px; font-style: italic; color: var(--g-ink-2, #5f6368); }
.ev-resp { margin-left: auto; font-size: 11px; padding: 0 6px; border-radius: 8px; }
.ev-resp-ok { color: #1a7f37; background: rgba(26,127,55,.12); }
.ev-resp-nao { color: #ea4335; background: rgba(234,67,53,.12); }
.ev-resp-pend { color: var(--g-ink-2, #5f6368); background: rgba(95,99,104,.12); }

.ev-quando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-dt { border: none !important; padding: 6px 0 !important; margin: 0 !important;
         width: auto !important; font: inherit; color: var(--g-ink, #202124); }
.ev-marcadores { gap: 20px; border-bottom: 1px solid var(--g-line); }
.ev-marcadores .ev-row { margin: 0; }
.ev-rec-detalhe { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ev-rec-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ev-rec-num { width: 56px; }
.ev-rec-dias { display: flex; gap: 4px; flex-wrap: wrap; }
.ev-wd { display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
         border: 1px solid var(--g-line); border-radius: 14px; padding: 2px 8px; cursor: pointer; }
.ev-wd input { margin: 0; }
.ev-rec-ate { max-width: 160px; }
.ev-rec-cont { width: 90px; }

/* Foto de perfil (avatar com imagem) */
.avatar.has-photo { background: #fff !important; overflow: hidden; color: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-xs { width: 32px; height: 32px; font-size: 13px; }
.acct-avatar.has-photo { padding: 0; overflow: hidden; }
.acct-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* ===== Configurações repaginadas (referência: Google Conta) ============== */
.set-wrap { max-width: 760px; }
.set-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding: 8px 0 18px; }
.set-hero .set-avatar { position:relative; }
.set-hero .avatar { width:92px; height:92px; font-size:36px; }
.set-hero .set-pencil { position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 1px 3px rgba(16,24,40,.18); color:var(--accent); }
.set-hero .set-pencil:hover { background:rgba(127,127,127,.10); }
.set-hero-name { font-size:22px; font-weight:600; margin-top:12px; }
.set-hero-mail { color:var(--muted); }

.set-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:var(--gap-cards,16px); }
.set-card { display:block; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; color:inherit;
  box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
a.set-card:hover { background:rgba(127,127,127,.05); text-decoration:none; }
.set-card-ico { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--tint-info); color:var(--accent); margin-bottom:12px; }
.set-card h4 { margin:0 0 4px; font-size:15px; }
.set-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }

/* Lista estilo Google: ícone + rótulo/valor + chevron */
.set-list { background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); }
.set-row { display:flex; align-items:center; gap:16px; padding:14px 18px; border-top:1px solid var(--border); color:inherit; }
.set-row:first-child { border-top:none; }
a.set-row:hover { background:rgba(127,127,127,.05); text-decoration:none; }
.set-row > .mmi:first-child { color:var(--muted); flex-shrink:0; }
.set-row-main { flex:1; min-width:0; }
.set-row-label { font-size:12px; color:var(--muted); }
.set-row-value { font-size:14px; overflow:hidden; text-overflow:ellipsis; }
.set-row-chev { color:var(--muted); margin-left:auto; flex-shrink:0; }

/* Barra de armazenamento no cartão */
.set-bar { height:8px; border-radius:6px; background:rgba(127,127,127,.18); overflow:hidden; margin:10px 0 6px; }
.set-bar > span { display:block; height:100%; background:var(--accent); border-radius:6px; }
.set-bar.warn > span { background:var(--warning); }
.set-bar.full > span { background:var(--danger); }

/* Banner de status de segurança */
.sec-status { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:12px; border:1px solid var(--border);
  background:var(--panel); box-shadow:0 1px 3px rgba(16,24,40,.06); }
.sec-status.ok   { border-color:rgba(22,163,74,.35);  background:rgba(22,163,74,.08); }
.sec-status.warn { border-color:rgba(217,119,6,.35);  background:var(--tint-warning); }
.sec-status .mmi { flex-shrink:0; }
.sec-status.ok .mmi   { color:var(--success); }
.sec-status.warn .mmi { color:var(--warning); }
.sec-status strong { display:block; }
.sec-status span { color:var(--muted); font-size:13px; }

/* Cartões de sessão/dispositivo */
.sess-list { display:flex; flex-direction:column; gap:10px; }
.sess-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; }
.sess-card .mmi { color:var(--muted); flex-shrink:0; }
.sess-card .sess-main { flex:1; min-width:0; }
.sess-card .sess-main small { color:var(--muted); }

/* Cabeçalho de seção com ícone */
.set-h { display:flex; align-items:center; gap:10px; margin:2px 0 14px; }
.set-h .mmi { color:var(--accent); }
.set-h h3 { margin:0; }

/* Números da semana e brilho reduzido de dias passados (opções do Calendário) */
.cal-weeknum-head { color: var(--muted); }
.cal-weeknum { background:#fff; display:flex; align-items:flex-start; justify-content:center; padding-top:8px;
  font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cal-cell.past .cal-event { opacity:.55; }
.cal-cell.past .cal-daynum span { color:#b8bcc4; }
html[data-theme="dark"] .cal-weeknum { background: var(--panel); }

/* Dropdown de múltipla seleção (mm-multi). Construído em cima de um
   `<select multiple>` real: o campo nativo continua no DOM e é ele que envia,
   então sem JavaScript a tela ainda funciona. */
.mm-multi-wrap { position: relative; max-width: 420px; }
.mm-multi-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.mm-multi-btn { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; text-align: left; padding: 8px 10px; cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.mm-multi-btn.tem { color: inherit; font-weight: 600; }
.mm-multi-btn::after { content: "▾"; color: var(--muted); }
.mm-multi-btn:hover { border-color: var(--accent); }
.mm-multi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-multi-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 8px; }
.mm-multi-busca { width: 100%; margin-bottom: 6px; }
.mm-multi-barra { display: flex; gap: 6px; margin-bottom: 6px; }
.mm-multi-lista { max-height: 240px; overflow-y: auto; }
.mm-multi-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 4px; cursor: pointer; }
.mm-multi-item:hover { background: var(--hover, rgba(0,0,0,.04)); }
.mm-multi-item input { margin: 0; }
.mm-multi-nome { font-weight: 600; }
.mm-multi-end { color: var(--muted); font-size: 13px; margin-left: auto; }

/* Conteúdo largo (tabela, diagrama) rola dentro da própria caixa, e não empurra
   a página para o lado. Estava sendo usada em três tabelas do grupo sem existir
   no CSS: no celular a tabela de membros (endereço + três colunas de papel)
   estourava a largura da tela. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Sair é um formulário (POST + CSRF), não um link: o botão herda o visual do
   item de menu em que ele está. */
.navform { display: block; margin: 0; }
.navform button { font: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; color: inherit; }
.acct-pop form button { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: var(--text); font-size: 14px; }
.acct-pop form button:hover { background: #f1f3f4; }
.acct-pop form button .mmi { color: var(--g-grey, #5f6368); }
html[data-theme="dark"] .acct-pop form button { color: var(--text); }
html[data-theme="dark"] .acct-pop form button:hover { background: #262a3a; }