/* ==========================================================================
   Epistula Design System · components.css · v1.0
   Depende de tokens.css. Estados forçados (.is-hover, .is-focus, .is-active)
   existem só para a documentação exibir todos os estados lado a lado.
   ========================================================================== */

/* ---------- Modelo de caixa: tamanhos dos tokens incluem padding e borda ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Ícones ---------- */
.i {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.i--sm { width: 12px; height: 12px; }
.i--lg { width: 20px; height: 20px; }
.i--xl { width: 24px; height: 24px; }

/* ---------- Foco visível (padrão para todo controle) ---------- */
.focus-ring:focus-visible,
.btn:focus-visible, .btn.is-focus,
.nav-item:focus-visible, .nav-item.is-focus,
.menu-item:focus-visible, .menu-item.is-focus,
.tab:focus-visible, .tab.is-focus,
.chip:focus-visible,
.attachment:focus-visible, .attachment.is-focus {
  outline: var(--border-width-focused) solid var(--color-border-focused);
  outline-offset: 2px;
}

/* ==========================================================================
   Botões (ADS Button)
   ========================================================================== */
.btn {
  --btn-bg: var(--color-bg-neutral);
  --btn-bg-hover: var(--color-bg-neutral-hovered);
  --btn-bg-active: var(--color-bg-neutral-pressed);
  --btn-fg: var(--color-text-subtle);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-050);
  height: var(--control-height);
  padding-inline: var(--space-150);
  border: 0; border-radius: var(--radius-small);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.btn:hover, .btn.is-hover { background: var(--btn-bg-hover); }
.btn:active, .btn.is-active { background: var(--btn-bg-active); }
.btn--primary {
  --btn-bg: var(--color-bg-brand-bold);
  --btn-bg-hover: var(--color-bg-brand-bold-hovered);
  --btn-bg-active: var(--color-bg-brand-bold-pressed);
  --btn-fg: var(--color-text-inverse);
}
.btn--subtle {
  --btn-bg: transparent;
  --btn-bg-hover: var(--color-bg-neutral-subtle-hovered);
  --btn-bg-active: var(--color-bg-neutral-subtle-pressed);
}
.btn--danger {
  --btn-bg: var(--color-bg-danger-bold);
  --btn-bg-hover: var(--color-bg-danger-bold-hovered);
  --btn-bg-active: var(--color-bg-danger-bold-hovered);
  --btn-fg: var(--color-text-inverse);
}
.btn--warning {
  --btn-bg: var(--color-bg-warning-bold);
  --btn-bg-hover: var(--color-bg-warning-bold-hovered);
  --btn-bg-active: var(--color-bg-warning-bold-hovered);
  --btn-fg: var(--color-text-warning-inverse);
}
.btn--link {
  --btn-bg: transparent; --btn-bg-hover: transparent; --btn-bg-active: transparent;
  --btn-fg: var(--color-link);
  padding-inline: var(--space-050);
}
.btn--link:hover, .btn--link.is-hover { text-decoration: underline; }
.btn--link:active, .btn--link.is-active { color: var(--color-link-pressed); }
.btn.is-selected, .btn[aria-pressed="true"] {
  --btn-bg: var(--color-bg-selected);
  --btn-bg-hover: var(--color-bg-selected-hovered);
  --btn-bg-active: var(--color-bg-selected-hovered);
  --btn-fg: var(--color-text-selected);
}
.btn:disabled, .btn.is-disabled {
  --btn-bg: var(--color-bg-disabled); --btn-bg-hover: var(--color-bg-disabled); --btn-bg-active: var(--color-bg-disabled);
  --btn-fg: var(--color-text-disabled);
  cursor: not-allowed;
}
.btn--subtle:disabled, .btn--subtle.is-disabled, .btn--link:disabled { --btn-bg: transparent; --btn-bg-hover: transparent; }
.btn--compact { height: var(--control-height-compact); padding-inline: var(--space-100); }
.btn--icon { width: var(--control-height); padding: 0; }
.btn--icon.btn--compact { width: var(--control-height-compact); }
.btn--block { width: 100%; }
.btn .spinner { width: 14px; height: 14px; }

.btn-split { display: inline-flex; gap: 1px; }
.btn-split > .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.btn-split > .btn:last-child { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline: var(--space-075); }

/* ==========================================================================
   Campos de texto (ADS Textfield / Textarea)
   ========================================================================== */
.field { display: grid; gap: var(--space-050); min-width: 0; }
.field__label { font: var(--font-weight-semibold) var(--font-size-body-small)/var(--line-height-body-small) var(--font-family-body); color: var(--color-text-subtle); }
.field__label .req { color: var(--color-text-danger); }
.field__help { display: flex; gap: var(--space-050); align-items: center; font: var(--font-body-small); color: var(--color-text-subtlest); }
.field__help--error { color: var(--color-text-danger); }
.field__help--error .i { color: var(--color-icon-danger); }

.input {
  display: flex; align-items: center; gap: var(--space-100);
  min-height: var(--input-height);
  padding-inline: var(--space-100);
  border: var(--border-width) solid var(--color-border-input);
  border-radius: var(--radius-small);
  background: var(--color-bg-input); color: var(--color-text);
  font: var(--font-body);
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.input > input, .input > textarea {
  flex: 1; min-width: 0; border: 0; padding: 0; background: transparent;
  color: inherit; font: inherit; outline: none;
}
.input > input::placeholder, .input > textarea::placeholder { color: var(--color-text-subtlest); }
.input > .i { color: var(--color-icon-subtle); }
.input:hover, .input.is-hover { background: var(--color-bg-input-hovered); }
.input:focus-within, .input.is-focus {
  background: var(--color-bg-input);
  border-color: var(--color-border-focused);
  box-shadow: inset 0 0 0 1px var(--color-border-focused);
}
.input.is-invalid { border-color: var(--color-border-danger); box-shadow: inset 0 0 0 1px var(--color-border-danger); }
.input.is-disabled { background: var(--color-bg-disabled); border-color: transparent; color: var(--color-text-disabled); cursor: not-allowed; }
.input.is-disabled > input { cursor: not-allowed; }
.input--textarea { align-items: flex-start; padding-block: var(--space-100); }
.input--textarea > textarea { resize: vertical; min-height: 5rem; }

.input--search { background: var(--color-bg-neutral); border-color: transparent; }
.input--search:hover, .input--search.is-hover { background: var(--color-bg-neutral-hovered); }
.input--search:focus-within, .input--search.is-focus { background: var(--color-bg-input); }

/* Campo "linha" da composição: sem caixa, apenas divisória inferior */
.input--line {
  border: 0; border-bottom: var(--border-width) solid var(--color-border);
  border-radius: 0; background: transparent; padding-inline: 0;
}
.input--line:hover { background: transparent; }
.input--line:focus-within { box-shadow: inset 0 -1px 0 var(--color-border-focused); border-color: var(--color-border-focused); background: transparent; }
.input__prefix { color: var(--color-text-subtlest); min-width: 3.5rem; }

kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding-inline: var(--space-050);
  border: var(--border-width) solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-small);
  background: var(--color-surface-raised); color: var(--color-text-subtle);
  font: var(--font-weight-medium) var(--font-size-body-small)/1 var(--font-family-code);
}

/* ==========================================================================
   Chips de destinatário (ADS Tag + User Picker)
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-050);
  height: 1.5rem; max-width: 100%;
  padding-inline: var(--space-025) var(--space-050);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-small);
  background: var(--color-bg-neutral); color: var(--color-text);
  font: var(--font-body); cursor: default;
}
.chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__remove {
  display: grid; place-items: center; width: 1rem; height: 1rem;
  border: 0; border-radius: var(--radius-xsmall); padding: 0;
  background: transparent; color: var(--color-icon-subtle); cursor: pointer;
}
.chip__remove:hover { background: var(--color-bg-neutral-hovered); color: var(--color-icon); }
.chip:hover, .chip.is-hover { background: var(--color-bg-neutral-hovered); }
.chip.is-selected { background: var(--color-bg-selected); border-color: var(--color-border-selected); color: var(--color-text-selected); }
.chip.is-invalid { background: var(--color-bg-danger); color: var(--color-text-danger); border-color: var(--color-border-danger); border-style: dashed; }
.chip.is-external { background: var(--color-label-orange-bg); color: var(--color-label-orange-text); }
.chip .avatar { width: 1.25rem; height: 1.25rem; font-size: 0.5625rem; }
.chip-input { flex-wrap: wrap; padding-block: var(--space-050); gap: var(--space-050); }
.chip-input > input { min-width: 8rem; }
/* Linha de controles (botões, campos curtos) lado a lado, quebrando quando falta espaço. Usada nas páginas do DS
   e no app (criptografia, chaves, certificados, regras); antes só existia em docs.css, que o app não carrega. */
.row { display: flex; flex-wrap: wrap; gap: var(--space-150); align-items: center; }

/* Sugestões clicáveis abaixo de um campo (ex.: nomes de conta) */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-075); }

/* L73 (US16) · Chip de filtro na busca: período, anexo, pasta, estado. Ícone no lugar do avatar e o tom da marca,
   para não se confundir com o chip de pessoa. Clicar edita; o x remove. .chip__op diz o papel da pessoa (De, Para, Cc). */
.chip--filter { background: var(--color-bg-selected); border-color: transparent; color: var(--color-text-selected); }
.chip--filter > .i { width: 14px; height: 14px; margin-inline-start: var(--space-050); color: var(--color-icon-brand); }
.chip--filter:hover, .chip--filter.is-hover { background: var(--color-bg-selected-hovered); }
.chip__op { color: var(--color-text-subtle); font-weight: var(--font-weight-regular); }
.chip--filter .chip__op { color: var(--color-text-selected); opacity: .8; }
.chip--filter.is-selected { border-color: var(--color-border-selected); }
/* No header, os chips não quebram linha: o campo fica da altura dos outros e os nomes encurtam. */
.appbar__search .chip-input { flex-wrap: nowrap; overflow: hidden; }
.appbar__search .chip-input > .chip { flex: 0 1 auto; min-width: 0; max-width: 14rem; }
.appbar__search .chip-input > input { min-width: 6rem; }
.chip > button.chip__body { display: inline-flex; align-items: center; gap: var(--space-050); min-width: 0; border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* L74 (US16) · Barra dos resultados: quantos, onde buscar, ordem e salvar. Fica entre a barra de comandos e a lista. */
.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100) var(--space-200); padding: var(--space-100) var(--space-150); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.search-bar__count { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.search-bar__end { display: flex; align-items: center; gap: var(--space-100); margin-left: auto; }

/* L75 (US16) · Conta de cada resultado (busca em todas as contas): avatar mínimo antes da pasta. */
.thread__account { flex: none; }

/* ==========================================================================
   Seleção: checkbox e toggle (ADS Checkbox / Toggle)
   ========================================================================== */
.checkbox {
  appearance: none; -webkit-appearance: none; margin: 0;
  display: inline-grid; place-content: center;
  width: 16px; height: 16px; flex: none;
  border: 2px solid var(--color-border-input);
  border-radius: var(--radius-xsmall);
  background: var(--color-bg-input); cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.checkbox::after {
  content: ""; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--color-text-inverse); border-bottom: 2px solid var(--color-text-inverse);
  transform: rotate(-45deg) scale(0); transition: transform var(--duration-fast) var(--easing-standard);
}
.checkbox:hover, .checkbox.is-hover { border-color: var(--color-border-bold); background: var(--color-bg-input-hovered); }
.checkbox:checked, .checkbox:indeterminate { background: var(--color-bg-brand-bold); border-color: var(--color-bg-brand-bold); }
.checkbox:checked:hover { background: var(--color-bg-brand-bold-hovered); border-color: var(--color-bg-brand-bold-hovered); }
.checkbox:checked::after { transform: rotate(-45deg) scale(1); }
.checkbox:indeterminate::after { width: 8px; height: 0; margin: 0; border-left: 0; transform: none; }
.checkbox:focus-visible, .checkbox.is-focus { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 1px; }
.checkbox:disabled { background: var(--color-bg-disabled); border-color: var(--color-bg-neutral-hovered); cursor: not-allowed; }
.checkbox.is-invalid { border-color: var(--color-border-danger); }

.toggle {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative;
  width: 32px; height: 16px; flex: none;
  border-radius: var(--radius-round); background: var(--color-bg-neutral-bold);
  cursor: pointer; transition: background-color var(--duration-medium);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-surface);
  transition: transform var(--duration-medium) var(--easing-standard);
}
.toggle:hover { filter: brightness(0.92); }
.toggle:checked { background: var(--color-bg-success-bold); }
.toggle:checked::after { transform: translateX(16px); }
.toggle:focus-visible, .toggle.is-focus { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }
.toggle:disabled { background: var(--color-bg-disabled); box-shadow: inset 0 0 0 1px var(--color-border); cursor: not-allowed; }
.toggle:disabled::after { background: var(--color-text-disabled); }

.choice { display: inline-flex; align-items: center; gap: var(--space-100); font: var(--font-body); color: var(--color-text); }

/* ==========================================================================
   Avatar (ADS Avatar)
   ========================================================================== */
.avatar {
  --av-bg: var(--color-label-blue-bg); --av-fg: var(--color-label-blue-text);
  display: inline-grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-round);
  background: var(--av-bg); color: var(--av-fg);
  font: var(--font-weight-semibold) 0.75rem/1 var(--font-family-body);
  text-transform: uppercase; user-select: none;
  position: relative; overflow: hidden;
}
/* L30 · Foto: cobre o avatar; a inicial fica por baixo se a foto falhar ou não existir */
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar--xs { width: 1.25rem; height: 1.25rem; font-size: 0.5625rem; }
.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.avatar--teal { --av-bg: var(--color-label-teal-bg); --av-fg: var(--color-label-teal-text); }
.avatar--green { --av-bg: var(--color-label-green-bg); --av-fg: var(--color-label-green-text); }
.avatar--purple { --av-bg: var(--color-label-purple-bg); --av-fg: var(--color-label-purple-text); }
.avatar--magenta { --av-bg: var(--color-label-magenta-bg); --av-fg: var(--color-label-magenta-text); }
.avatar--orange { --av-bg: var(--color-label-orange-bg); --av-fg: var(--color-label-orange-text); }
.avatar-group { display: inline-flex; }
.avatar-group > .avatar { box-shadow: 0 0 0 2px var(--color-surface); }
.avatar-group > .avatar + .avatar { margin-left: -6px; }

/* ==========================================================================
   Badge (contagem) e Lozenge (status) — ADS Badge / Lozenge
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1rem; padding-inline: var(--space-075);
  border-radius: var(--radius-round);
  background: var(--color-bg-neutral); color: var(--color-text);
  font: var(--font-weight-regular) var(--font-size-body-small)/var(--line-height-body-small) var(--font-family-body);
  font-variant-numeric: tabular-nums;
}
.badge--primary { background: var(--color-bg-brand-bold); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }
.badge--important { background: var(--color-bg-danger-bold); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }
.badge--added { background: var(--color-bg-success); color: var(--color-text-success); }

.lozenge {
  display: inline-flex; align-items: center; height: 1rem; padding-inline: var(--space-050);
  border-radius: var(--radius-small);
  background: var(--color-bg-neutral); color: var(--color-text-subtle);
  font: var(--font-weight-bold) var(--font-size-label)/var(--line-height-label) var(--font-family-body);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-label); white-space: nowrap;
}
.lozenge--success { background: var(--color-bg-success); color: var(--color-text-success); }
.lozenge--removed { background: var(--color-bg-danger); color: var(--color-text-danger); }
.lozenge--inprogress { background: var(--color-bg-information); color: var(--color-text-information); }
.lozenge--new { background: var(--color-bg-discovery); color: var(--color-text-discovery); }
.lozenge--moved { background: var(--color-bg-warning); color: var(--color-text-warning); }
.lozenge--bold { color: var(--color-text-inverse); background: var(--color-bg-neutral-bold); }
.lozenge--bold.lozenge--success { background: var(--color-bg-success-bold); }
.lozenge--bold.lozenge--removed { background: var(--color-bg-danger-bold); }
.lozenge--bold.lozenge--inprogress { background: var(--color-bg-information-bold); }
.lozenge--bold.lozenge--new { background: var(--color-bg-discovery-bold); }
.lozenge--bold.lozenge--moved { background: var(--color-bg-warning-bold); color: var(--color-text-warning-inverse); }
/* L24 · Prazo vencido da sinalização */
.lozenge--overdue { background: var(--color-bg-danger); color: var(--color-text-danger); }

/* ==========================================================================
   Etiquetas de e-mail (ADS Tag colorida)
   ========================================================================== */
.label {
  --lb-bg: var(--color-bg-neutral); --lb-fg: var(--color-text-subtle);
  display: inline-flex; align-items: center; gap: var(--space-050);
  height: 1.25rem; padding-inline: var(--space-075);
  border-radius: var(--radius-small);
  background: var(--lb-bg); color: var(--lb-fg);
  font: var(--font-weight-medium) var(--font-size-body-small)/var(--line-height-body-small) var(--font-family-body);
  white-space: nowrap;
}
.label--blue { --lb-bg: var(--color-label-blue-bg); --lb-fg: var(--color-label-blue-text); }
.label--teal { --lb-bg: var(--color-label-teal-bg); --lb-fg: var(--color-label-teal-text); }
.label--green { --lb-bg: var(--color-label-green-bg); --lb-fg: var(--color-label-green-text); }
.label--purple { --lb-bg: var(--color-label-purple-bg); --lb-fg: var(--color-label-purple-text); }
.label--magenta { --lb-bg: var(--color-label-magenta-bg); --lb-fg: var(--color-label-magenta-text); }
.label--orange { --lb-bg: var(--color-label-orange-bg); --lb-fg: var(--color-label-orange-text); }
.label .chip__remove { color: inherit; width: 0.875rem; height: 0.875rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--lb-fg, var(--color-icon-subtle)); }

/* ==========================================================================
   Sidebar (ADS Side Navigation)
   ========================================================================== */
.sidebar {
  display: flex; flex-direction: column; gap: var(--space-200);
  width: var(--layout-sidebar-width); max-width: 100%;
  padding: var(--space-150) var(--space-100);
  background: var(--color-surface-sunken);
  border-right: var(--border-width) solid var(--color-border);
}
.nav-group { display: grid; gap: var(--space-025); }
.nav-heading {
  padding: var(--space-100) var(--space-100) var(--space-050);
  font: var(--font-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase;
  color: var(--color-text-subtlest);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-150);
  height: var(--control-height); padding-inline: var(--space-100);
  border-radius: var(--radius-small); border: 0; width: 100%;
  background: transparent; color: var(--color-text-subtle);
  font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body);
  text-align: left; cursor: pointer; text-decoration: none;
}
.nav-item > .i { color: var(--color-icon); }
.nav-item__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__count { font: var(--font-body-small); font-variant-numeric: tabular-nums; color: var(--color-text-subtlest); }
.nav-item:hover, .nav-item.is-hover { background: var(--color-bg-neutral-subtle-hovered); color: var(--color-text); }
.nav-item:active, .nav-item.is-active { background: var(--color-bg-neutral-subtle-pressed); }
.nav-item.is-selected, .nav-item[aria-current="page"] { background: var(--color-bg-selected); color: var(--color-text-selected); }
.nav-item.is-selected > .i, .nav-item[aria-current="page"] > .i { color: var(--color-icon-brand); }
.nav-item.is-selected:hover, .nav-item[aria-current="page"]:hover { background: var(--color-bg-selected-hovered); }
.nav-item.has-unread .nav-item__text { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.nav-item.has-unread .nav-item__count { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.nav-item.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; background: transparent; }
.nav-item.is-disabled > .i { color: var(--color-text-disabled); }

.meter { display: grid; gap: var(--space-050); padding-inline: var(--space-100); font: var(--font-body-small); color: var(--color-text-subtlest); }
.progress { height: 4px; border-radius: var(--radius-round); background: var(--color-bg-neutral-hovered); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--color-bg-brand-bold); }
.progress--warning > span { background: var(--color-bg-warning-bold-hovered); }

/* ==========================================================================
   Casca do cliente (app shell): header, banner, sidebar, lista e leitura
   Segue espacamento.html: sidebar 240px (64px abaixo de 1280px), lista 400px
   ajustável de 320 a 560px, leitura flexível; abaixo de 960px lista e leitura
   dividem o mesmo espaço e a leitura entra por cima com "Voltar".
   ========================================================================== */
.app-shell {
  --app-shell-sidebar: var(--layout-sidebar-width);
  --app-shell-list: var(--layout-list-width);
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: var(--app-shell-sidebar) clamp(20rem, var(--app-shell-list), 35rem) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "header  header header"
    "banner  banner banner"
    "sidebar list   reader";
  background: var(--color-surface); color: var(--color-text);
  font: var(--font-body);
}
/* Sem sidebar (conta única, sem pastas) */
.app-shell--no-sidebar {
  grid-template-columns: clamp(20rem, var(--app-shell-list), 35rem) minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "banner banner"
    "list   reader";
}
/* Dentro de outra página (documentação, pré-visualizações): ocupa o contêiner em vez da janela */
.app-shell--embedded { position: relative; inset: auto; height: 32rem; }

.app-shell__header { grid-area: header; }
.app-shell__banner { grid-area: banner; }
.app-shell__sidebar { grid-area: sidebar; width: auto; min-height: 0; overflow-y: auto; }
.app-shell__list {
  grid-area: list; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-right: var(--border-width) solid var(--color-border);
}
.app-shell__list-body { flex: 1; min-height: 0; overflow-y: auto; }
.app-shell__reader { grid-area: reader; min-width: 0; min-height: 0; overflow-y: auto; background: var(--color-surface); }
.app-shell__back { display: none; }

/* Tela inteira abaixo do header (boas-vindas, conexão de conta, carregamento do app) */
.app-shell__center {
  grid-row: 3; grid-column: 1 / -1;
  display: grid; place-items: center; min-height: 0; overflow-y: auto;
  padding: var(--space-300);
}
.app-shell__center > * { width: 100%; max-width: var(--layout-modal-medium); }

/* Sidebar recolhida: só ícones (cada .nav-item precisa de data-tip com o nome da pasta) */
.sidebar--collapsed { padding-inline: var(--space-050); align-items: center; }
.sidebar--collapsed .nav-heading,
.sidebar--collapsed .nav-item__text,
.sidebar--collapsed .nav-item__count,
.sidebar--collapsed .meter { display: none; }
.sidebar--collapsed .nav-item { justify-content: center; width: var(--control-height); padding: 0; }
.sidebar--collapsed .nav-item.has-unread { box-shadow: inset -3px 0 0 var(--color-border-selected); }

@media (max-width: 1279px) {
  .app-shell { --app-shell-sidebar: var(--layout-sidebar-collapsed); }
  .app-shell__sidebar { padding-inline: var(--space-050); align-items: center; }
  .app-shell__sidebar .nav-heading,
  .app-shell__sidebar .nav-item__text,
  .app-shell__sidebar .nav-item__count,
  .app-shell__sidebar .meter { display: none; }
  .app-shell__sidebar .nav-item { justify-content: center; width: var(--control-height); padding: 0; }
  .app-shell__sidebar .nav-item.has-unread { box-shadow: inset -3px 0 0 var(--color-border-selected); }
}

@media (max-width: 959px) {
  .app-shell {
    grid-template-columns: var(--app-shell-sidebar) minmax(0, 1fr);
    grid-template-areas:
      "header  header"
      "banner  banner"
      "sidebar main";
  }
  .app-shell--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "banner" "main";
  }
  .app-shell__list, .app-shell__reader { grid-area: main; border-right: 0; }
  .app-shell__reader { display: none; }
  .app-shell.has-reader .app-shell__reader { display: block; }
  .app-shell.has-reader .app-shell__list { display: none; }
  .app-shell__back { display: inline-flex; }
}

/* ==========================================================================
   Coluna de contas (L15): à esquerda da sidebar quando há contas conectadas.
   Cada conta é um avatar na cor escolhida, com a inicial e o nome dados pelo
   usuário (não o e-mail, que pode ter o mesmo domínio em todas). Ver sidebar.html.
   ========================================================================== */
.account-rail {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-050);
  width: var(--layout-sidebar-collapsed); min-height: 0; overflow-y: auto;
  padding: var(--space-100) 0;
  background: var(--color-surface-sunken);
  border-right: var(--border-width) solid var(--color-border);
}
.account-rail__list { display: contents; }
.account-rail__item {
  position: relative;
  display: grid; justify-items: center; gap: var(--space-025);
  width: 100%; padding: var(--space-050);
  border: 0; background: transparent; color: var(--color-text-subtle);
  cursor: pointer; font: inherit;
}
/* Marcador à esquerda: cresce no hover e fica longo na conta ativa */
.account-rail__item::before {
  content: ""; position: absolute; left: 0; top: calc(var(--space-050) + 1.25rem);
  width: 4px; height: 0; transform: translateY(-50%);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--color-text-subtle);
  transition: height var(--duration-fast) var(--easing-standard);
}
.account-rail__item:hover::before, .account-rail__item.is-hover::before { height: 0.75rem; }
.account-rail__item[aria-current="true"]::before { height: 2rem; background: var(--color-border-selected); }
.account-rail__item .avatar { transition: border-radius var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); }
.account-rail__item:hover .avatar, .account-rail__item.is-hover .avatar { box-shadow: 0 0 0 2px var(--color-surface-sunken), 0 0 0 4px var(--color-border); }
.account-rail__item[aria-current="true"] .avatar { border-radius: var(--radius-large); box-shadow: 0 0 0 2px var(--color-surface-sunken), 0 0 0 4px var(--color-border-selected); }
.account-rail__item:focus-visible, .account-rail__item.is-focus { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: -2px; border-radius: var(--radius-medium); }
.account-rail__name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--font-weight-medium) var(--font-size-label)/var(--line-height-label) var(--font-family-body);
}
.account-rail__item[aria-current="true"] .account-rail__name { color: var(--color-text); font-weight: var(--font-weight-semibold); }
/* Contador de não lidas da Caixa de entrada: use com .badge.badge--primary */
.account-rail__badge {
  position: absolute; top: 0; right: var(--space-025);
  min-width: 1.25rem; padding-inline: var(--space-050);
  box-shadow: 0 0 0 2px var(--color-surface-sunken);
  font-size: var(--font-size-label);
}
/* Precisa reconectar: alerta no canto inferior do avatar */
.account-rail__alert {
  position: absolute; top: calc(var(--space-050) + 1.75rem); left: calc(50% + 0.625rem);
  display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: var(--radius-round);
  background: var(--color-bg-warning-bold); color: var(--color-text-warning-inverse);
  box-shadow: 0 0 0 2px var(--color-surface-sunken);
}
.account-rail__alert .i { width: 10px; height: 10px; stroke-width: 3; }
/* Saiu da conta: esmaecida, sem contador; continua clicável para ler o que está salvo */
.account-rail__item--signed-out .avatar { opacity: .45; filter: grayscale(1); }
.account-rail__item--signed-out .account-rail__name { color: var(--color-text-subtlest); }
.account-rail__sep { flex: none; height: 1px; margin: var(--space-050) var(--space-150); background: var(--color-border); }
.account-rail__add {
  display: grid; place-items: center; align-self: center; flex: none;
  width: 2.5rem; height: 2.5rem;
  border: var(--border-width) dashed var(--color-border-bold); border-radius: var(--radius-round);
  background: transparent; color: var(--color-icon-subtle); cursor: pointer;
}
.account-rail__add:hover, .account-rail__add.is-hover { background: var(--color-bg-neutral-subtle-hovered); color: var(--color-icon); border-style: solid; }
.account-rail__add:focus-visible, .account-rail__add.is-focus { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }

/* Conta ativa no header: "Trabalho · e-mail" */
.appbar__account-name { font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* Troca de conta no topo da sidebar, para telas sem a coluna (abaixo de 960px) */
.account-switcher {
  display: flex; align-items: center; gap: var(--space-100); width: 100%; flex: none;
  min-height: 2.75rem; padding: var(--space-050) var(--space-100);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium);
  background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left; font: inherit;
}
.account-switcher:hover, .account-switcher.is-hover { background: var(--color-bg-neutral-subtle-hovered); }
.account-switcher:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }
.account-switcher__text { flex: 1; min-width: 0; display: grid; }
.account-switcher__name { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); }
.account-switcher__email { font: var(--font-body-small); color: var(--color-text-subtlest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar--collapsed .account-switcher { justify-content: center; width: var(--control-height); min-height: var(--control-height); padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; }
.sidebar--collapsed .account-switcher__text,
.sidebar--collapsed .account-switcher > .i { display: none; }

/* Casca com a coluna de contas à esquerda da sidebar */
.app-shell--with-rail {
  grid-template-columns: var(--layout-sidebar-collapsed) var(--app-shell-sidebar) clamp(20rem, var(--app-shell-list), 35rem) minmax(0, 1fr);
  grid-template-areas:
    "header header  header header"
    "banner banner  banner banner"
    "rail   sidebar list   reader";
}
.app-shell__rail { grid-area: rail; }
/* Telas inteiras (adicionar conta, login) ficam ao lado da coluna, que continua visível */
.app-shell--with-rail .app-shell__center { grid-column: 2 / -1; }
.app-shell .account-switcher { display: none; }

@media (max-width: 1279px) {
  .app-shell__sidebar .account-switcher { justify-content: center; width: var(--control-height); min-height: var(--control-height); padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; }
  .app-shell__sidebar .account-switcher__text,
  .app-shell__sidebar .account-switcher > .i { display: none; }
}

@media (max-width: 959px) {
  .app-shell--with-rail {
    grid-template-columns: var(--app-shell-sidebar) minmax(0, 1fr);
    grid-template-areas:
      "header  header"
      "banner  banner"
      "sidebar main";
  }
  .app-shell__rail { display: none; }
  .app-shell .account-switcher { display: flex; }
}

/* ==========================================================================
   Header nas colunas da casca, barra de comandos e divisor (L18–L20, US4)
   ========================================================================== */
/* Linha de comandos abaixo do header (use com --with-rail) */
.app-shell--commands {
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "header   header   header   header"
    "banner   banner   banner   banner"
    "commands commands commands commands"
    "rail     sidebar  list     reader";
}
.app-shell__commands { grid-area: commands; }

/* L18 · Header em subgrid: marca sobre a coluna de contas e as pastas, busca sobre a lista,
   conta sobre a leitura. A busca acompanha a largura da lista (--app-shell-list). */
.appbar.appbar--shell { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 0; padding-inline: 0; }
.appbar--shell .appbar__brand { grid-column: 1 / 3; min-width: 0; overflow: hidden; padding-inline: var(--space-150); }
.appbar--shell .appbar__search { grid-column: 3; max-width: none; padding-inline: var(--space-100); }
.appbar--shell .appbar__actions { grid-column: 4; min-width: 0; padding-inline: var(--space-150); }

/* L19 · Barra de comandos: "Novo e-mail" é o único botão principal; grupos separados por .toolbar__sep */
.commandbar {
  display: flex; align-items: center; gap: var(--space-050);
  min-height: 3rem; padding: var(--space-075) var(--space-150);
  background: var(--color-surface-sunken);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow-x: auto;
}
.commandbar__group { display: flex; align-items: center; gap: var(--space-025); flex: none; }
.commandbar .toolbar__sep { flex: none; }
.commandbar .btn-split { gap: 0; }
.commandbar .btn-split > .btn:last-child { padding-inline: var(--space-050); }
/* Sem espaço, os rótulos somem: o botão mantém aria-label e data-tip */
.commandbar--compact .commandbar__label { display: none; }
.commandbar--compact .btn:not(.btn--icon):not(.btn--primary) { padding-inline: var(--space-075); }

/* L20 · Divisor entre lista e leitura: role="separator", focável, ajusta --app-shell-list */
.app-shell__resizer {
  grid-area: list; justify-self: end; z-index: 1; position: relative;
  width: 9px; margin-right: -5px;
  cursor: col-resize; touch-action: none; outline: none;
}
.app-shell__resizer::after {
  content: ""; position: absolute; inset-block: 0; left: 3px; width: 3px; border-radius: var(--radius-round);
  background: transparent; transition: background var(--duration-fast) var(--easing-standard);
}
.app-shell__resizer:hover::after, .app-shell__resizer.is-hover::after { background: var(--color-border-bold); }
.app-shell__resizer:focus-visible::after, .app-shell__resizer.is-focus::after,
.app-shell__resizer.is-dragging::after { background: var(--color-border-focused); }

@media (max-width: 1279px) {
  .commandbar .commandbar__label { display: none; }
  .appbar--shell .appbar__brand .wordmark { font-size: 0; gap: 0; }
}
@media (max-width: 959px) {
  .app-shell--commands {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "header header" "banner banner" "commands commands" "sidebar main";
  }
  .appbar.appbar--shell { display: flex; gap: var(--space-150); padding-inline: var(--space-150); }
  .appbar--shell .appbar__brand, .appbar--shell .appbar__actions { padding-inline: 0; }
  .appbar--shell .appbar__search { flex: 1; padding-inline: 0; }
  .app-shell__resizer { display: none; }
}

/* ==========================================================================
   Layout em blocos e configurações (L25–L34, US5)
   ========================================================================== */
/* L25 · Casca em blocos: contas | pastas | lista | gap (divisor) | leitura, sobre o fundo.
   Use com --with-rail. Os comandos ficam dentro do bloco do header (D1). */
.app-shell.app-shell--blocks {
  --app-shell-gap: var(--space-100);
  grid-template-columns: var(--layout-sidebar-collapsed) var(--app-shell-sidebar) clamp(20rem, var(--app-shell-list), 35rem) var(--app-shell-gap) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "rail header header header header"
    "rail banner banner banner banner"
    "rail nav    nav    gap    reader";
  padding: var(--app-shell-gap) var(--app-shell-gap) var(--app-shell-gap) 0;
  /* L26 · Fundo: tema, cor ou imagem trocam só esta propriedade */
  background: var(--app-background, var(--color-canvas));
  background-size: cover; background-position: center;
}
.app-shell__block {
  min-width: 0; min-height: 0;
  border-radius: var(--radius-large);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.app-shell--blocks .app-shell__banner { margin-bottom: var(--app-shell-gap); }
.app-shell--blocks .app-shell__center { grid-row: 3; grid-column: 2 / -1; }

/* Coluna de contas sobre o fundo, do topo ao rodapé */
.app-shell--blocks .app-shell__rail { grid-row: 1 / -1; padding-top: var(--space-150); background: transparent; border-right: 0; }
.app-shell--blocks .account-rail__item:hover .avatar,
.app-shell--blocks .account-rail__item.is-hover .avatar { box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-border-bold); }
.app-shell--blocks .account-rail__item[aria-current="true"] .avatar { box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-border-selected); }
.app-shell--blocks .account-rail__badge,
.app-shell--blocks .account-rail__alert { box-shadow: 0 0 0 2px var(--color-canvas); }

/* Bloco do header: marca sobre as pastas, busca + configurações sobre a lista, conta sobre a leitura */
.app-shell__block--header { grid-area: header; display: grid; grid-template-columns: subgrid; margin-bottom: var(--app-shell-gap); }
.app-shell__block--header > .appbar { grid-column: 1 / -1; background: transparent; }
.app-shell__block--header > .commandbar { grid-column: 1 / -1; background: transparent; border-bottom: 0; }
.app-shell--blocks .appbar--shell .appbar__brand { grid-column: 1; }
.app-shell--blocks .appbar--shell .appbar__search { grid-column: 2; display: flex; align-items: center; gap: var(--space-050); }
.app-shell--blocks .appbar--shell .appbar__search > .input { flex: 1; }
.app-shell--blocks .appbar--shell .appbar__actions { grid-column: 3 / -1; }

/* Bloco de navegação: pastas + lista */
.app-shell__block--nav { grid-area: nav; display: grid; grid-template-columns: subgrid; grid-template-rows: minmax(0, 1fr); }
.app-shell__block--nav > .app-shell__sidebar { grid-area: auto; grid-column: 1; background: transparent; }
.app-shell__block--nav > .app-shell__list { grid-area: auto; grid-column: 2; border-right: 0; }
.app-shell--blocks .app-shell__list .toolbar { flex-wrap: nowrap; background: transparent; }
.app-shell--blocks .app-shell__list .toolbar.is-selecting { background: var(--color-bg-selected); }

/* Bloco de conteúdo; o divisor ocupa o gap entre os blocos */
/* O bloco corta o que sai dos cantos arredondados (overflow: hidden); a leitura precisa rolar nos dois eixos */
.app-shell--blocks .app-shell__reader { grid-area: reader; overflow: auto; }
.app-shell--blocks .app-shell__resizer { grid-area: gap; justify-self: stretch; width: auto; margin: 0; }
.app-shell--blocks .app-shell__resizer::after { left: calc(50% - 1.5px); }

/* L27 · Leitura na largura do bloco: sem a medida de 672px */
.reader--fluid .message__body,
.reader--fluid .message__frame,
.reader--fluid .compose--inline { max-width: none; }

/* L29 · Arrastar mensagens para uma pasta */
.nav-item.is-drop-target {
  background: var(--color-bg-selected); color: var(--color-text-selected);
  box-shadow: inset 0 0 0 2px var(--color-border-selected);
}
.nav-item.is-drop-target > .i { color: var(--color-icon-brand); }
.nav-item.is-drop-blocked { cursor: no-drop; }
.drag-ghost {
  display: inline-flex; align-items: center; gap: var(--space-075);
  padding: var(--space-050) var(--space-100) var(--space-050) var(--space-075);
  border-radius: var(--radius-medium);
  background: var(--color-bg-brand-bold); color: var(--color-text-inverse);
  box-shadow: var(--shadow-overlay);
  font: var(--font-weight-semibold) var(--font-size-body-small)/var(--line-height-body-small) var(--font-family-body);
  pointer-events: none; white-space: nowrap;
}

/* L33 · Lista de opções: <span class="select"><select>…</select><svg class="i">chevron-down</svg></span> */
.select { position: relative; display: inline-flex; align-items: center; min-width: 10rem; }
.select > select {
  width: 100%; height: var(--control-height); appearance: none;
  padding: 0 var(--space-400) 0 var(--space-100);
  border: var(--border-width) solid var(--color-border-bold); border-radius: var(--radius-small);
  background: var(--color-bg-input); color: var(--color-text);
  font: var(--font-body); cursor: pointer;
}
.select > select:hover { background: var(--color-bg-input-hovered); }
.select > select:focus-visible { outline: none; border-color: var(--color-border-focused); box-shadow: inset 0 0 0 1px var(--color-border-focused); }
.select > select:disabled { background: var(--color-bg-disabled); border-color: transparent; color: var(--color-text-disabled); cursor: not-allowed; }
.select > .i { position: absolute; right: var(--space-100); pointer-events: none; color: var(--color-icon-subtle); }

/* L32 · Configurações (D2): cobre as duas colunas (bloco de navegação e conteúdo), sem cobrir
   a coluna de contas nem o header. Com --embedded, num contêiner da documentação. */
.app-shell__sheet { grid-row: 3; grid-column: 2 / -1; z-index: 2; display: flex; min-height: 0; }
.settings-sheet {
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-radius: var(--radius-large);
  background: var(--color-surface-overlay); color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.settings-sheet__head {
  display: flex; align-items: center; gap: var(--space-100);
  padding: var(--space-200) var(--space-300);
  border-bottom: var(--border-width) solid var(--color-border);
}
.settings-sheet__head > .i { width: 20px; height: 20px; color: var(--color-icon); }
.settings-sheet__head > .btn { margin-left: auto; }
.settings { flex: 1; min-height: 0; display: grid; grid-template-columns: 13rem minmax(0, 1fr); }
.settings__nav {
  display: grid; align-content: start; gap: var(--space-025);
  padding: var(--space-150) var(--space-100);
  border-right: var(--border-width) solid var(--color-border);
  background: var(--color-surface-sunken);
  border-bottom-left-radius: var(--radius-large);
}
.settings__nav .nav-item[aria-selected="true"] { background: var(--color-bg-selected); color: var(--color-text-selected); }
.settings__nav .nav-item[aria-selected="true"] > .i { color: var(--color-icon-brand); }
.settings__panel { min-height: 0; overflow-y: auto; padding: var(--space-300); display: grid; align-content: start; gap: var(--space-300); }
.settings__title { margin: 0; font: var(--font-section); letter-spacing: var(--letter-spacing-section); color: var(--color-text); }
.settings__group { display: grid; gap: var(--space-150); max-width: 48rem; }
.settings__group-title { margin: 0; font: var(--font-card); letter-spacing: var(--letter-spacing-card); color: var(--color-text); }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-100) var(--space-300); }
.setting__label { font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.setting__desc { margin: var(--space-025) 0 0; font: var(--font-body-small); color: var(--color-text-subtlest); }

/* L34 · Lista de contas com um controle por linha e ação em lote no cabeçalho */
.setting-list { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden; }
.setting-list__head, .setting-list__row { display: grid; align-items: center; gap: var(--space-150); padding: var(--space-100) var(--space-150); }
.setting-list__head {
  grid-template-columns: auto minmax(0, 1fr) auto; min-height: 3rem;
  background: var(--color-surface-sunken); border-bottom: var(--border-width) solid var(--color-border);
  font: var(--font-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-subtlest);
}
.setting-list__head.is-selecting {
  background: var(--color-bg-selected); color: var(--color-text-selected);
  font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); letter-spacing: 0; text-transform: none;
}
.setting-list__bulk { display: flex; align-items: center; gap: var(--space-100); }
.setting-list__row { grid-template-columns: auto auto minmax(0, 1fr) 13rem; }
/* L49 · Linha com um toggle no fim (notificações por conta) */
.setting-list__row--toggle { grid-template-columns: auto minmax(0, 1fr) auto; }
.setting-list__row + .setting-list__row { border-top: var(--border-width) solid var(--color-border); }
.setting-list__row.is-checked { background: var(--color-bg-selected); }
.setting-list__name { display: grid; min-width: 0; }
.setting-list__title { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.setting-list__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--font-body-small); color: var(--color-text-subtlest); }
.setting-list__row.is-disabled .setting-list__title { color: var(--color-text-subtlest); }
.setting-list__row.is-disabled .avatar { opacity: .45; filter: grayscale(1); }

@media (max-width: 959px) {
  .app-shell.app-shell--blocks {
    grid-template-columns: var(--app-shell-sidebar) minmax(0, 1fr);
    grid-template-areas: "header header" "banner banner" "nav nav";
    padding-left: var(--app-shell-gap);
  }
  .app-shell--blocks .app-shell__center, .app-shell__sheet { grid-column: 1 / -1; }
  .app-shell--blocks .app-shell__reader { grid-area: nav; display: none; }
  .app-shell--blocks.has-reader .app-shell__reader { display: block; }
  .app-shell--blocks.has-reader .app-shell__block--nav { display: none; }
  .app-shell--blocks .app-shell__list { display: flex; }
  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings__nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: var(--border-width) solid var(--color-border); border-radius: 0; }
  .setting-list__row { grid-template-columns: auto auto minmax(0, 1fr); }
  .setting-list__row > .select { grid-column: 2 / -1; }
}

/* ==========================================================================
   Aparência, rolagem, arrastar e sinalizadas (L35–L39, US6)
   ========================================================================== */
/* L35 · Barra de rolagem global, nos dois eixos */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 2rem; min-width: 2rem;
  border: 3px solid transparent; border-radius: var(--radius-round);
  background: var(--color-scrollbar-thumb) padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hovered); }
::-webkit-scrollbar-thumb:active { background-color: var(--color-scrollbar-thumb-hovered); border-width: 2px; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; }
}

/* L36 · Escolha de tema: rádios em cartões (Claro, Escuro, Sistema) */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-150); margin: 0; padding: 0; border: 0; min-width: 0; }
.theme-option {
  position: relative; display: grid; justify-items: start; gap: var(--space-050);
  padding: var(--space-150); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.theme-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme-option__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-medium); background: var(--color-bg-neutral); color: var(--color-icon); }
.theme-option__name { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); }
.theme-option__desc { font: var(--font-body-small); color: var(--color-text-subtlest); }
.theme-option:hover, .theme-option.is-hover { border-color: var(--color-border-bold); background: var(--color-bg-neutral-subtle-hovered); }
.theme-option:has(input:checked) { border-color: var(--color-border-selected); box-shadow: inset 0 0 0 1px var(--color-border-selected); background: var(--color-bg-selected); }
.theme-option:has(input:checked) .theme-option__icon { background: var(--color-bg-brand-bold); color: var(--color-text-inverse); }
.theme-option:has(input:focus-visible) { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }

/* L37 · Amostra de cor do fundo no .color-swatch (a cor vem de --swatch) */
.color-swatch__fill {
  display: block; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-medium);
  background: var(--swatch); box-shadow: inset 0 0 0 1px var(--color-border);
  pointer-events: none;
}
.color-swatch:has(.color-swatch__fill) { border-radius: var(--radius-medium); }
.color-swatch:hover .color-swatch__fill { box-shadow: inset 0 0 0 1px var(--color-border), 0 0 0 2px var(--color-surface-overlay), 0 0 0 4px var(--color-border); }
.color-swatch:has(input:checked) .color-swatch__fill { box-shadow: inset 0 0 0 1px var(--color-border), 0 0 0 2px var(--color-surface-overlay), 0 0 0 4px var(--color-border-selected); }

/* L38 · Arrastar: mão aberta nas marcadas, mão fechada durante o arraste; rótulo segue o ponteiro
   (--x/--y) com o cursor no canto superior esquerdo */
.thread.is-checked { cursor: grab; }
html.is-grabbing, html.is-grabbing * { cursor: grabbing !important; user-select: none; }
.drag-ghost--follow { position: fixed; z-index: var(--z-tooltip, 800); left: 0; top: 0; margin: 2px 0 0 2px; transform: translate(var(--x), var(--y)); }

/* L39 · Sinalizadas na coluna de pastas: prazo vencido em vermelho (com a palavra "Atrasadas") */
.nav-item.is-overdue > .i, .nav-item.is-overdue .nav-item__count { color: var(--color-text-danger); }

/* ==========================================================================
   Menu da conta, colunas recolhíveis, densidade e envio (L40–L45, US7)
   ========================================================================== */
/* L41 · Controle segmentado: uma opção entre poucas (role="radiogroup" com aria-checked, ou
   botões com aria-pressed). --fill divide a largura igualmente. */
.segmented { display: inline-flex; gap: var(--space-025); padding: var(--space-025); border-radius: var(--radius-small); background: var(--color-bg-neutral); }
.segmented .btn { --btn-bg: transparent; height: 1.75rem; }
.segmented .btn[aria-checked="true"], .segmented .btn[aria-pressed="true"] { --btn-bg: var(--color-surface); --btn-bg-hover: var(--color-surface); --btn-fg: var(--color-text); box-shadow: var(--shadow-raised); }
.segmented--fill { display: flex; }
.segmented--fill .btn { flex: 1; justify-content: center; }

/* L42 · Fim do header: botões das colunas e, por último, a foto da conta (extrema direita) */
.appbar__end { justify-content: flex-end; gap: var(--space-025); }
.appbar__end .account-trigger { margin-left: var(--space-075); }
.account-trigger { display: grid; place-items: center; flex: none; width: var(--control-height); height: var(--control-height); padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; cursor: pointer; }
.account-trigger:hover .avatar, .account-trigger.is-hover .avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-border-bold); }
.account-trigger[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-border-selected); }
.account-trigger:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }

/* L52 · Sino no header: botão com contador e o painel das notificações recentes */
.bell { position: relative; }
.bell__count { position: absolute; top: 0; right: 0; min-width: 1.125rem; padding-inline: var(--space-050); box-shadow: 0 0 0 2px var(--color-surface); pointer-events: none; }
.notice-panel { width: 23rem; max-width: calc(100vw - 2 * var(--space-200)); padding-block: 0; }
.notice-panel__head { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-150) var(--space-200) var(--space-100); }
.notice-panel__title { flex: 1; margin: 0; font: var(--font-card); color: var(--color-text); }
.notice-panel__list { display: grid; max-height: 24rem; overflow: auto; }
.notice {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-150); align-items: start;
  padding: var(--space-150) var(--space-200); border: 0; border-top: var(--border-width) solid var(--color-border);
  background: transparent; color: var(--color-text-subtle); font: var(--font-body-small); text-align: left; cursor: pointer;
}
.notice:hover, .notice.is-hover { background: var(--color-bg-neutral-subtle-hovered); }
.notice:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: -2px; }
.notice__body { min-width: 0; }
.notice__title { display: block; font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.notice__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice__time { color: var(--color-text-subtlest); white-space: nowrap; }
.notice.is-unread::before { content: ""; position: absolute; left: var(--space-075); top: calc(var(--space-150) + 8px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-icon-brand); }
/* Ícone do tipo de aviso num círculo: neutro, vermelho (falha) ou amarelo (atenção) */
.notice__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-bg-neutral); color: var(--color-icon); }
.notice__icon--danger { background: var(--color-bg-danger); color: var(--color-icon-danger); }
.notice__icon--warning { background: var(--color-bg-warning); color: var(--color-icon-warning); }
.notice-panel__foot { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-100) var(--space-200); border-top: var(--border-width) solid var(--color-border); }
.notice-panel__foot label { font: var(--font-body-small); color: var(--color-text-subtle); }
.notice-panel__foot .btn--link { margin-left: auto; }
.notice-panel .empty { padding-block: var(--space-300); }

/* L40 · Menu da conta: (1) foto, nome, e-mail e informações; (2) preferências; (3) sair */
.account-menu { width: 21rem; max-width: calc(100vw - 2 * var(--space-200)); padding-block: var(--space-050); }
.account-menu__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-150); padding: var(--space-150) var(--space-200); }
.account-menu__name { font: var(--font-card); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__email { font: var(--font-body-small); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__info { display: grid; gap: var(--space-100); padding: 0 var(--space-200) var(--space-150); }
.account-menu__line { display: flex; align-items: center; gap: var(--space-100); font: var(--font-body-small); color: var(--color-text-subtle); }
.account-menu__line > .i { flex: none; color: var(--color-icon-subtle); }
.account-menu__line .btn { margin-left: auto; }
.account-menu__line--warning, .account-menu__line--warning > .i { color: var(--color-text-warning); }
.account-menu__pref { display: grid; gap: var(--space-075); padding: var(--space-075) var(--space-200); }
.account-menu__label { font: var(--font-body-small); color: var(--color-text-subtlest); }

/* L43 · Colunas recolhíveis na casca em blocos: sem pastas, sem leitura ou só a lista */
.app-shell--no-folders .app-shell__block--nav > .app-shell__sidebar,
.app-shell--no-reader .app-shell__reader,
.app-shell--no-reader .app-shell__resizer { display: none; }
@media (min-width: 960px) {
  .app-shell--blocks.app-shell--no-folders { grid-template-columns: var(--layout-sidebar-collapsed) 0 clamp(20rem, var(--app-shell-list), 35rem) var(--app-shell-gap) minmax(0, 1fr); }
  .app-shell--blocks.app-shell--no-reader { grid-template-columns: var(--layout-sidebar-collapsed) var(--app-shell-sidebar) minmax(0, 1fr) 0 0; }
  .app-shell--blocks.app-shell--no-folders.app-shell--no-reader { grid-template-columns: var(--layout-sidebar-collapsed) 0 minmax(0, 1fr) 0 0; }
  /* Sem a leitura, as colunas sobre ela ficam com largura 0 e levariam junto o fim do header (botões e
     foto): o header passa a ser uma linha, com a marca na largura das pastas e a busca alinhada à lista */
  .app-shell--no-reader .appbar.appbar--shell { display: flex; }
  .app-shell--no-reader:not(.app-shell--no-folders) .appbar--shell .appbar__brand { flex: none; width: var(--app-shell-sidebar); }
  .app-shell--no-reader .appbar--shell .appbar__search { flex: 1; max-width: 40rem; }
  /* Sem a coluna de pastas, o header deixa de seguir as colunas: marca, busca e o fim em linha */
  .app-shell--no-folders .appbar.appbar--shell { display: flex; gap: var(--space-100); padding-inline: var(--space-150); }
  .app-shell--no-folders .appbar--shell .appbar__brand,
  .app-shell--no-folders .appbar--shell .appbar__actions { padding-inline: 0; }
  .app-shell--no-folders .appbar--shell .appbar__search { flex: 1; max-width: 40rem; padding-inline: 0; }
}

/* L44 · Densidade da lista: .thread-list = Confortável (remetente, assunto, trecho e ícones);
   --standard = Padrão (remetente e assunto); --compact = Compacta (uma linha, duas colunas) */
.thread-list--standard .thread__snippet { display: none; }
.thread__icons { display: inline-flex; align-items: center; gap: var(--space-050); margin-left: auto; padding-left: var(--space-100); color: var(--color-icon-subtle); flex: none; }
.thread-list--compact .thread__icons { display: none; }

/* L45 · Envio: citação recolhida, anexos do encaminhamento, motivo do bloqueio e "Enviando…" */
.compose__quote-toggle { align-self: flex-start; justify-self: start; margin: 0 var(--space-200) var(--space-100); padding-inline: var(--space-100); letter-spacing: .1em; }
.compose__attachments { display: flex; flex-wrap: wrap; gap: var(--space-100); padding: 0 var(--space-200) var(--space-150); }
.compose__attachments .attachment { max-width: 16rem; }
.compose__attachments .attachment__action { display: flex; }
.compose__hint { display: flex; align-items: center; gap: var(--space-050); font: var(--font-body-small); color: var(--color-text-danger); }
.compose.is-sending { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Marca (wordmark): a logo do EpistulaMail + nome do produto
   Padrão 32px para capas e telas de boas-vindas; --sm 24px para o header. O glyph azul com o envelope
   (.wordmark__glyph) fica para ícones de "e-mail"; a marca é a logo (L76).
   ========================================================================== */
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-100);
  font: var(--font-weight-bold) 1.125rem/1 var(--font-family-heading); letter-spacing: -0.01em;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.wordmark__glyph {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-medium);
  background: var(--color-bg-brand-bold); color: var(--color-text-inverse);
}
.wordmark--sm { font: var(--font-card); letter-spacing: var(--letter-spacing-card); }
.wordmark--sm .wordmark__glyph { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-small); }
/* L76 · Logo do EpistulaMail no wordmark: a imagem sem fundo no lugar do glyph, do mesmo tamanho (32px; 24px no
   --sm), igual nos temas claro e escuro. Decorativa (alt=""): o nome fica como texto ao lado. */
.wordmark__logo { display: block; flex: none; width: 2rem; height: 2rem; object-fit: contain; }
.wordmark--sm .wordmark__logo { width: 1.5rem; height: 1.5rem; }
/* L76 · A logo sozinha e maior, acima do título (tela de bloqueio). */
.brand-logo { display: block; width: 4rem; height: 4rem; object-fit: contain; }

/* ==========================================================================
   Header global (ADS Atlassian Navigation, adaptado)
   ========================================================================== */
.appbar {
  display: flex; align-items: center; gap: var(--space-150);
  height: var(--layout-header-height);
  padding-inline: var(--space-150);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.appbar__brand { display: flex; align-items: center; gap: var(--space-100); font: var(--font-card); color: var(--color-text); white-space: nowrap; }
.appbar__search { flex: 1; max-width: 45rem; min-width: 0; }
.appbar__actions { display: flex; align-items: center; gap: var(--space-050); margin-left: auto; }
/* Conta conectada: avatar + "Conectado como <e-mail>". O e-mail corta com reticências, nunca quebra. */
.appbar__account { display: flex; align-items: center; gap: var(--space-100); min-width: 0; max-width: 22rem; font: var(--font-body-small); color: var(--color-text-subtle); }
.appbar__account-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar__account-email { font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* ==========================================================================
   Abas (ADS Tabs) — categorias da caixa de entrada
   ========================================================================== */
.tabs { display: flex; gap: var(--space-050); border-bottom: 2px solid var(--color-border); overflow-x: auto; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-075);
  padding: var(--space-100) var(--space-100);
  border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-subtle);
  font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body);
  white-space: nowrap;
}
.tab::after { content: ""; position: absolute; left: var(--space-100); right: var(--space-100); bottom: -2px; height: 2px; border-radius: 1px; background: transparent; }
.tab:hover, .tab.is-hover { color: var(--color-text); }
.tab:hover::after, .tab.is-hover::after { background: var(--color-border-bold); }
.tab[aria-selected="true"] { color: var(--color-text-selected); }
.tab[aria-selected="true"]::after { background: var(--color-border-selected); }

/* ==========================================================================
   Lista de threads
   ========================================================================== */
.thread-list { display: flex; flex-direction: column; background: var(--color-surface); }
.thread {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "check star from  meta"
    ".     .    subj  subj"
    ".     .    snip  snip";
  column-gap: var(--space-100); row-gap: var(--space-025);
  align-items: center;
  min-height: var(--row-height-default);
  padding: var(--space-150) var(--space-200) var(--space-150) var(--space-150);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-subtle);
  font: var(--font-body); cursor: pointer;
}
.thread__check { grid-area: check; }
.thread__star { grid-area: star; }
.thread__from { grid-area: from; display: flex; align-items: center; gap: var(--space-075); min-width: 0; }
.thread__from-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__count { color: var(--color-text-subtlest); font-variant-numeric: tabular-nums; }
.thread__meta { grid-area: meta; display: flex; align-items: center; gap: var(--space-075); color: var(--color-text-subtlest); font: var(--font-body-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.thread__subject { grid-area: subj; display: flex; align-items: center; gap: var(--space-075); min-width: 0; color: var(--color-text); }
.thread__subject-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.thread__snippet { grid-area: snip; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-subtlest); }
.thread__actions { display: none; gap: var(--space-025); }
.thread__draft { color: var(--color-text-danger); }

.star-btn {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border: 0; padding: 0; border-radius: var(--radius-small);
  background: transparent; color: var(--color-icon-subtle); cursor: pointer;
}
.star-btn:hover { background: var(--color-bg-neutral-subtle-hovered); color: var(--color-icon); }
.star-btn[aria-pressed="true"] { color: var(--color-icon-starred); }
.star-btn[aria-pressed="true"] .i { fill: currentColor; }
.star-btn:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 0; }

/* Não lida: peso, cor plena e ponto de marca. Forma + cor, nunca só cor. */
.thread.is-unread { color: var(--color-text); }
.thread.is-unread .thread__from-name,
.thread.is-unread .thread__subject-text { font-weight: var(--font-weight-semibold); }
.thread.is-unread .thread__meta { color: var(--color-text-brand); font-weight: var(--font-weight-semibold); }
.thread.is-unread::before {
  content: ""; position: absolute; left: var(--space-050); top: calc(var(--space-150) + 6px);
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-icon-brand);
}
.thread:hover, .thread.is-hover { background: var(--color-bg-neutral-subtle-hovered); }
.thread:hover .thread__actions, .thread.is-hover .thread__actions { display: inline-flex; }
.thread:hover .thread__date, .thread.is-hover .thread__date { display: none; }
.thread.is-checked { background: var(--color-bg-selected); }
.thread.is-checked:hover, .thread.is-checked.is-hover { background: var(--color-bg-selected-hovered); }
.thread.is-open { background: var(--color-bg-selected); box-shadow: inset 2px 0 0 var(--color-border-selected); }
.thread:focus-visible, .thread.is-focus { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: -2px; }
.thread.is-sending { cursor: progress; }
.thread.is-sending .thread__subject-text, .thread.is-sending .thread__from-name { color: var(--color-text-subtlest); }

/* Densidade compacta: uma linha, 36px */
.thread-list--compact .thread {
  grid-template-columns: auto auto minmax(6rem, 11rem) minmax(0, 1fr) auto;
  grid-template-areas: "check star from subj meta";
  min-height: var(--row-height-compact);
  padding-block: var(--space-050);
}
.thread-list--compact .thread__snippet { display: none; }
.thread-list--compact .thread.is-unread::before { top: 50%; margin-top: -3px; }

/* Só cabeçalho: sem checkbox e sem prévia. Ações rápidas são opcionais: sem elas, a data
   continua visível no hover. A estrela é a primeira coluna, para manter o alinhamento. */
.thread-list--headers .thread {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "star from meta"
    ".    subj subj";
  min-height: 0;
}
.thread-list--headers .thread__check,
.thread-list--headers .thread__snippet { display: none; }
.thread-list--headers .thread:not(:has(.thread__actions)):hover .thread__date { display: inline; }
.thread-list--headers.thread-list--compact .thread {
  grid-template-columns: auto minmax(6rem, 11rem) minmax(0, 1fr) auto;
  grid-template-areas: "star from subj meta";
}

/* ==========================================================================
   Barra de ações em massa (ADS Page Header actions / Button Group)
   ========================================================================== */
.toolbar {
  display: flex; align-items: center; gap: var(--space-050); flex-wrap: wrap;
  min-height: 3rem; padding: var(--space-075) var(--space-150);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}
.toolbar__sep { width: 1px; height: 1.25rem; margin-inline: var(--space-050); background: var(--color-border); }
.toolbar__count { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); margin-inline: var(--space-050) var(--space-100); }
.toolbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-050); font: var(--font-body-small); color: var(--color-text-subtlest); font-variant-numeric: tabular-nums; }
.toolbar.is-selecting { background: var(--color-bg-selected); }

/* ==========================================================================
   Painel de leitura
   ========================================================================== */
.reader { display: grid; gap: var(--space-300); padding: var(--space-300); background: var(--color-surface); }
.reader__head { display: flex; align-items: flex-start; gap: var(--space-150); flex-wrap: wrap; }
.reader__subject { flex: 1 1 18rem; min-width: 0; margin: 0; font: var(--font-page-title); letter-spacing: var(--letter-spacing-page-title); color: var(--color-text); text-wrap: balance; }
.reader__labels { display: flex; flex-wrap: wrap; gap: var(--space-050); margin-top: var(--space-100); }
.message { display: grid; gap: var(--space-200); }
.message__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-150); align-items: start; }
.message__from { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.message__addr { font-weight: var(--font-weight-regular); color: var(--color-text-subtlest); }
.message__to { display: inline-flex; align-items: center; gap: var(--space-025); font: var(--font-body-small); color: var(--color-text-subtle); border: 0; background: transparent; padding: 0; cursor: pointer; }
.message__to .i { transition: transform var(--duration-fast) var(--easing-standard); }
.message__to[aria-expanded="true"] .i { transform: rotate(180deg); }
/* Destinatários expandidos: rótulo (De, Para, Cc, Data) à esquerda, valores quebram por endereço. */
.message__recipients { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-025) var(--space-150); margin: var(--space-100) 0 0; font: var(--font-body-small); color: var(--color-text-subtle); }
.message__recipients dt { color: var(--color-text-subtlest); }
.message__recipients dd { margin: 0; overflow-wrap: anywhere; }
.message__time { display: flex; align-items: center; gap: var(--space-050); font: var(--font-body-small); color: var(--color-text-subtlest); white-space: nowrap; }
.message__body {
  max-width: var(--layout-reading-measure);
  font: var(--font-body-large); color: var(--color-text);
}
.message__body p { margin: 0 0 var(--space-200); }
/* Corpo HTML de terceiros: sempre num <iframe sandbox> sem allow-scripts. E-mails HTML são
   desenhados para fundo claro, então o quadro mantém fundo de papel também no tema escuro. */
.message__frame {
  display: block; width: 100%; max-width: var(--layout-reading-measure); min-height: 8rem;
  border: 0; border-radius: var(--radius-medium);
  background: var(--color-surface-paper);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);
  color-scheme: light;
}
.message--collapsed {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-150); align-items: center;
  padding: var(--space-100) var(--space-150);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium);
  color: var(--color-text-subtle); font: var(--font-body); cursor: pointer;
}
.message--collapsed:hover { background: var(--color-bg-neutral-subtle-hovered); }
.message--collapsed .snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-subtlest); }
.message--collapsed .snip b { color: var(--color-text); font-weight: var(--font-weight-semibold); }

/* L46 · Conversa em cards: recolhidas numa linha (.message--collapsed) e abertas uma abaixo da outra */
.conversation { display: grid; gap: var(--space-100); }
/* Sem caixa própria: a única caixa é a do corpo (.message__frame). Mensagens abertas seguidas ficam separadas por uma linha. */
.message.message--card { padding-block: var(--space-100); }
.message--card + .message--card { padding-top: var(--space-200); border-top: var(--border-width) solid var(--color-border); }
.message--collapsed { position: relative; }
.message--collapsed.is-unread::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-icon-brand); position: absolute; margin-left: -10px; }
.message--collapsed:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }
.conversation__more {
  display: flex; align-items: center; gap: var(--space-150);
  padding: var(--space-050) var(--space-150);
  border: 0; background: transparent; color: var(--color-text-subtle); font: var(--font-body-small); cursor: pointer;
}
.conversation__more::before, .conversation__more::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.conversation__more:hover { color: var(--color-text); }
.conversation__more:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }
.conversation__more .badge { flex: none; }

/* L47 · Texto citado de cada mensagem recolhido no "…" (mesma forma do .compose__quote-toggle) */
.message__quote-toggle { justify-self: start; padding-inline: var(--space-100); letter-spacing: .1em; }
.message--card .reply-bar { padding-top: var(--space-050); }
.message--card > .message__quote { margin-inline: 0; }
.reply-bar { display: flex; gap: var(--space-100); flex-wrap: wrap; }

/* ==========================================================================
   Anexo (ADS Media card, simplificado)
   ========================================================================== */
.attachments { display: flex; flex-wrap: wrap; gap: var(--space-100); }
.attachment {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-100); align-items: center;
  width: 13.5rem; max-width: 100%; padding: var(--space-100) var(--space-150) var(--space-100) var(--space-100);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium);
  background: var(--color-surface-raised); color: var(--color-text);
  text-align: left; cursor: pointer; font: var(--font-body);
}
.attachment__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-small); background: var(--color-bg-neutral); color: var(--color-icon); }
.attachment__icon--pdf { background: var(--color-bg-danger); color: var(--color-icon-danger); }
.attachment__icon--img { background: var(--color-bg-discovery); color: var(--color-icon-discovery); }
.attachment__icon--doc { background: var(--color-bg-information); color: var(--color-icon-brand); }
.attachment__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); }
.attachment__meta { font: var(--font-body-small); color: var(--color-text-subtlest); }
.attachment__action { position: absolute; right: var(--space-075); top: 50%; transform: translateY(-50%); display: none; }
.attachment:hover, .attachment.is-hover { background: var(--color-bg-neutral-subtle-hovered); box-shadow: var(--shadow-raised); }
.attachment:hover .attachment__action, .attachment.is-hover .attachment__action { display: inline-flex; }
.attachment.is-error { border-color: var(--color-border-danger); }
.attachment.is-error .attachment__meta { color: var(--color-text-danger); }
.attachment .progress { margin-top: var(--space-050); }
/* Somente informação: sem download nem abertura (ex.: recurso ainda indisponível). */
.attachment--static { cursor: default; }
.attachment--static:hover, .attachment--static.is-hover { background: var(--color-surface-raised); box-shadow: none; }

/* ==========================================================================
   Composição
   ========================================================================== */
.compose {
  display: flex; flex-direction: column;
  width: var(--layout-compose-width); max-width: 100%;
  border-radius: var(--radius-large);
  background: var(--color-surface-overlay);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.compose__bar {
  display: flex; align-items: center; gap: var(--space-050);
  padding: var(--space-075) var(--space-075) var(--space-075) var(--space-200);
  background: var(--color-surface-sunken); border-bottom: var(--border-width) solid var(--color-border);
}
.compose__title { flex: 1; font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.compose__fields { display: grid; padding-inline: var(--space-200); }
.compose__body { padding: var(--space-150) var(--space-200); min-height: 9rem; font: var(--font-body-large); color: var(--color-text); outline: none; }
.compose__format { display: flex; gap: var(--space-025); padding: var(--space-050) var(--space-150); border-top: var(--border-width) solid var(--color-border); flex-wrap: wrap; }
.compose__foot { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-150) var(--space-200); flex-wrap: wrap; }
.compose__status { font: var(--font-body-small); color: var(--color-text-subtlest); margin-right: auto; }
/* L23 · Resposta e encaminhamento dentro do painel de leitura: sem sombra, na largura da leitura.
   Responder fica abaixo da mensagem; encaminhar, acima. */
.compose--inline { width: 100%; max-width: var(--layout-reading-measure); box-shadow: none; border: var(--border-width) solid var(--color-border); background: var(--color-surface); }
.compose--inline .compose__body { min-height: 7rem; }
.compose--inline .chip-input > input { flex: 1; min-width: 3rem; }
.compose__toggle { margin-left: auto; flex: none; }
.compose__body textarea { display: block; width: 100%; min-height: inherit; border: 0; padding: 0; resize: vertical; background: transparent; color: inherit; font: inherit; outline: none; }
/* Mensagem original no encaminhamento: De, Enviado, Para, Assunto e o texto */
.message__quote {
  display: grid; gap: var(--space-075);
  margin: 0 var(--space-200) var(--space-150); padding-left: var(--space-150);
  border-left: 2px solid var(--color-border-bold);
  font: var(--font-body); color: var(--color-text-subtle);
}
.message__quote dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-025) var(--space-150); margin: 0; font: var(--font-body-small); }
.message__quote dt { font-weight: var(--font-weight-semibold); }
.message__quote dd { margin: 0; overflow-wrap: anywhere; }
.message__quote p { margin: 0; white-space: pre-wrap; }

/* ==========================================================================
   Banner (ADS Banner) e Section message (ADS Section Message)
   ========================================================================== */
.banner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-100);
  min-height: 3rem; padding: var(--space-150) var(--space-200);
  font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body);
  text-align: center;
}
.banner a { color: inherit; text-decoration: underline; font-weight: var(--font-weight-semibold); }
.banner--warning { background: var(--color-bg-warning-bold); color: var(--color-text-warning-inverse); }
.banner--error { background: var(--color-bg-danger-bold); color: var(--color-text-inverse); }
.banner--announcement { background: var(--color-bg-neutral-bold); color: var(--color-text-inverse); }

.section-message {
  --sm-bg: var(--color-bg-information); --sm-icon: var(--color-icon-brand);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-150);
  padding: var(--space-200);
  border-radius: var(--radius-small);
  background: var(--sm-bg); color: var(--color-text);
  font: var(--font-body);
}
.section-message > .i { color: var(--sm-icon); width: 20px; height: 20px; }
.section-message__title { margin: 0 0 var(--space-050); font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); }
.section-message p { margin: 0; }
.section-message__actions { display: flex; flex-wrap: wrap; gap: var(--space-200); margin-top: var(--space-100); }
.section-message__actions button { padding: 0; border: 0; background: none; color: var(--color-link); font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body); cursor: pointer; }
.section-message__actions button:hover { text-decoration: underline; }
.section-message--warning { --sm-bg: var(--color-bg-warning); --sm-icon: var(--color-icon-warning); }
.section-message--error { --sm-bg: var(--color-bg-danger); --sm-icon: var(--color-icon-danger); }
.section-message--success { --sm-bg: var(--color-bg-success); --sm-icon: var(--color-icon-success); }
.section-message--discovery { --sm-bg: var(--color-bg-discovery); --sm-icon: var(--color-icon-discovery); }

/* ==========================================================================
   Toast (ADS Flag)
   ========================================================================== */
.toast {
  --tt-icon: var(--color-icon-success);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-150); align-items: start;
  width: 25rem; max-width: 100%;
  padding: var(--space-200);
  border-radius: var(--radius-medium);
  background: var(--color-surface-overlay); color: var(--color-text);
  box-shadow: var(--shadow-overlay);
  font: var(--font-body);
}
.toast > .i { color: var(--tt-icon); width: 20px; height: 20px; }
.toast__title { margin: 0; font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); }
.toast__desc { margin: var(--space-050) 0 0; color: var(--color-text-subtle); }
.toast__actions { display: flex; gap: var(--space-200); margin-top: var(--space-100); }
.toast__actions button { padding: 0; border: 0; background: none; color: var(--color-link); font: var(--font-weight-medium) var(--font-size-body)/var(--line-height-body) var(--font-family-body); cursor: pointer; }
.toast__actions button:hover { text-decoration: underline; }
.toast__timer { grid-column: 1 / -1; margin-top: var(--space-050); }
.toast--info { --tt-icon: var(--color-icon-brand); }
.toast--warning { --tt-icon: var(--color-icon-warning); }
.toast--error { --tt-icon: var(--color-icon-danger); }

.toast-region {
  position: fixed; z-index: var(--z-flag);
  left: calc(var(--space-300) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--space-300) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--space-300) + env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-100);
  pointer-events: none;
}
.toast-region > .toast { pointer-events: auto; animation: toast-in var(--duration-slow) var(--easing-standard); }
@keyframes toast-in { from { transform: translateY(16px); opacity: 0; } }

/* ==========================================================================
   Modal (ADS Modal Dialog)
   ========================================================================== */
.blanket {
  position: fixed; inset: 0; z-index: var(--z-blanket);
  display: grid; place-items: center;
  padding: var(--space-200);
  background: var(--color-blanket);
}
.modal {
  display: flex; flex-direction: column;
  width: var(--layout-modal-small); max-width: 100%;
  border-radius: var(--radius-large);
  background: var(--color-surface-overlay); color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
.modal__head { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-300) var(--space-300) var(--space-100); }
.modal__head .i { color: var(--color-icon-danger); width: 20px; height: 20px; }
.modal__title { margin: 0; font: var(--font-section); letter-spacing: var(--letter-spacing-section); }
.modal__body { padding: var(--space-100) var(--space-300); font: var(--font-body); color: var(--color-text); }
.modal__body p { margin: 0 0 var(--space-150); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-100); padding: var(--space-300); flex-wrap: wrap; }
/* Ação reversível (ex.: sair da conta mantendo os dados): ícone de aviso em vez de perigo */
.modal--warning .modal__head .i { color: var(--color-icon-warning); }
/* Assistente com listas (abrir arquivo de e-mail, US15): largura média e o corpo rola. */
.modal--medium { width: var(--layout-modal-medium); max-height: 100%; }
.modal--medium .modal__body { min-height: 0; overflow-y: auto; }

/* L22 · Seletor de pastas num modal: lista com rolagem, seleção única (role="listbox") */
.folder-picker {
  display: grid; gap: var(--space-025); max-height: 16rem; overflow-y: auto;
  margin-top: var(--space-150); padding: var(--space-050);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium);
}
.folder-picker .nav-item[aria-selected="true"] { background: var(--color-bg-selected); color: var(--color-text-selected); }
.folder-picker .nav-item[aria-selected="true"] > .i { color: var(--color-icon-brand); }
.modal__foot--split > :first-child { margin-right: auto; }

/* ==========================================================================
   Menu (ADS Dropdown Menu) e Tooltip
   ========================================================================== */
.menu {
  display: grid; min-width: 14rem; max-width: 100%;
  padding-block: var(--space-075);
  border-radius: var(--radius-medium);
  background: var(--color-surface-overlay);
  box-shadow: var(--shadow-overlay);
}
.menu__heading { padding: var(--space-150) var(--space-200) var(--space-050); font: var(--font-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-subtlest); }
.menu__sep { height: 1px; margin-block: var(--space-075); background: var(--color-border); }
.menu-item {
  display: flex; align-items: center; gap: var(--space-150);
  min-height: 2.25rem; padding: var(--space-075) var(--space-200);
  border: 0; background: transparent; color: var(--color-text);
  font: var(--font-body); text-align: left; cursor: pointer; width: 100%;
  box-shadow: inset 2px 0 0 transparent;
}
.menu-item > .i { color: var(--color-icon); }
.menu-item__text { flex: 1; }
.menu-item:hover, .menu-item.is-hover { background: var(--color-bg-neutral-subtle-hovered); box-shadow: inset 2px 0 0 var(--color-border-bold); }
.menu-item:active { background: var(--color-bg-neutral-subtle-pressed); }
.menu-item[aria-checked="true"], .menu-item.is-selected { background: var(--color-bg-selected); color: var(--color-text-selected); box-shadow: inset 2px 0 0 var(--color-border-selected); }
.menu-item[aria-checked="true"] > .i, .menu-item.is-selected > .i { color: var(--color-icon-brand); }
.menu-item:disabled, .menu-item.is-disabled { color: var(--color-text-disabled); background: transparent; box-shadow: none; cursor: not-allowed; }
.menu-item:disabled > .i { color: var(--color-text-disabled); }
.menu-item--danger, .menu-item--danger > .i { color: var(--color-text-danger); }
.menu-item .kbd { margin-left: auto; }
/* L21 · Menu com busca, criação inline e mensagem de vazio (ex.: "Mover para") */
.menu--wide { min-width: 18rem; }
.menu__search { padding: var(--space-075) var(--space-150) var(--space-050); }
.menu__form { display: flex; gap: var(--space-075); align-items: center; padding: var(--space-050) var(--space-150) var(--space-075); }
.menu__form .input { flex: 1; min-width: 0; }
.menu__empty { padding: var(--space-075) var(--space-200); font: var(--font-body-small); color: var(--color-text-subtlest); }
/* L24 · Informação à direita do item (ex.: data do prazo) */
.menu-item__meta { margin-left: auto; font: var(--font-body-small); color: var(--color-text-subtlest); font-variant-numeric: tabular-nums; }

.tooltip {
  display: inline-flex; align-items: center; gap: var(--space-100);
  max-width: 15rem; padding: var(--space-025) var(--space-075);
  border-radius: var(--radius-small);
  background: var(--color-bg-neutral-bold); color: var(--color-text-inverse);
  font: var(--font-body-small);
}
.tooltip .kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .8; height: 1rem; }

/* Tooltip flutuante: uma camada fixa posicionada por script a partir de [data-tip],
   para não ser cortada por containers com overflow e respeitar os limites do card. */
.tooltip--floating {
  position: fixed; top: 0; left: 0; z-index: var(--z-tooltip);
  white-space: nowrap; pointer-events: none;
}
/* O display de .tooltip anularia o atributo hidden: sem esta regra, a camada vazia aparece no canto. */
.tooltip--floating[hidden] { display: none; }

/* ==========================================================================
   Grade de provedores (L16): "Adicionar conta". Sem logotipos de marca (L1):
   todos usam o envelope; "Outro" usa o globo. Indisponíveis ficam desabilitados
   com .lozenge "Em breve". Ver selecao.html.
   ========================================================================== */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-150); margin: 0; padding: 0; list-style: none; }
.provider-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-150);
  width: 100%; height: 100%; min-height: 4rem; padding: var(--space-150) var(--space-200);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-large);
  background: var(--color-surface-raised); color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer;
}
.provider-card:hover:not(:disabled), .provider-card.is-hover { border-color: var(--color-border-selected); background: var(--color-bg-neutral-subtle-hovered); }
.provider-card:focus-visible, .provider-card.is-focus { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }
.provider-card__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-medium); background: var(--color-bg-neutral); color: var(--color-icon); }
.provider-card__icon .i { width: 20px; height: 20px; }
.provider-card:not(:disabled) .provider-card__icon { background: var(--color-label-blue-bg); color: var(--color-label-blue-text); }
.provider-card__text { display: grid; gap: var(--space-025); min-width: 0; }
.provider-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100); font-weight: var(--font-weight-semibold); }
.provider-card__desc { font: var(--font-body-small); color: var(--color-text-subtlest); }
.provider-card:disabled { cursor: not-allowed; background: var(--color-surface); }
.provider-card:disabled .provider-card__name { color: var(--color-text-subtle); }

/* ==========================================================================
   Seletor de cor da conta (L17): rádios com amostras de .avatar nas 6 cores.
   Cada opção leva o nome da cor em .visually-hidden. Ver selecao.html.
   ========================================================================== */
.color-picker { display: flex; flex-wrap: wrap; gap: var(--space-150); min-width: 0; margin: 0; padding: 0; border: 0; }
.color-picker legend { padding: 0; margin-bottom: var(--space-100); font: var(--font-weight-semibold) var(--font-size-body-small)/var(--line-height-body-small) var(--font-family-body); color: var(--color-text-subtle); }
.color-swatch { position: relative; display: inline-grid; cursor: pointer; border-radius: var(--radius-round); }
.color-swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.color-swatch .avatar { pointer-events: none; }
.color-swatch:hover .avatar { box-shadow: 0 0 0 2px var(--color-surface-overlay), 0 0 0 4px var(--color-border); }
.color-swatch:has(input:checked) .avatar { box-shadow: 0 0 0 2px var(--color-surface-overlay), 0 0 0 4px var(--color-border-selected); }
.color-swatch:has(input:focus-visible) { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 6px; }
.color-swatch__check {
  position: absolute; right: -4px; bottom: -4px; display: none; place-items: center;
  width: 1rem; height: 1rem; border-radius: var(--radius-round);
  background: var(--color-bg-brand-bold); color: var(--color-text-inverse);
  box-shadow: 0 0 0 2px var(--color-surface-overlay);
}
.color-swatch__check .i { width: 10px; height: 10px; stroke-width: 3; }
.color-swatch:has(input:checked) .color-swatch__check { display: grid; }

/* ==========================================================================
   Empty state (ADS Empty State)
   ========================================================================== */
.empty {
  display: grid; justify-items: center; gap: var(--space-200);
  padding: var(--space-600) var(--space-300);
  text-align: center;
}
.empty__art { width: 6rem; height: 6rem; color: var(--color-icon-subtle); }
.empty__title { margin: 0; font: var(--font-section); letter-spacing: var(--letter-spacing-section); color: var(--color-text); text-wrap: balance; }
.empty__desc { margin: 0; max-width: 40ch; font: var(--font-body); color: var(--color-text-subtle); }
.empty__actions { display: flex; gap: var(--space-100); flex-wrap: wrap; justify-content: center; }
/* Aguardando ação fora do app (ex.: login no navegador): spinner grande no lugar da ilustração. */
.empty__spinner { color: var(--color-icon-brand); margin-block: var(--space-150); }

/* ==========================================================================
   Carregamento: spinner e skeleton (ADS Spinner / Skeleton)
   ========================================================================== */
.spinner {
  width: 1.5rem; height: 1.5rem; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.spinner--sm { width: 1rem; height: 1rem; }
.spinner--lg { width: 3rem; height: 3rem; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton { display: block; height: 0.75rem; border-radius: var(--radius-small); background: var(--color-bg-neutral-hovered); animation: pulse 1.4s ease-in-out infinite; }
.skeleton--circle { width: 1rem; height: 1rem; border-radius: 50%; }
.skeleton--avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.skeleton--title { height: 1.5rem; }
.skeleton--line { height: 1rem; }
@keyframes pulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  .skeleton { animation: none; }
  .toast-region > .toast { animation: none; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Privacidade e proteção local (L53–L57, US10)
   ========================================================================== */
/* L53 · Tela de desbloqueio: cobre a janela inteira antes de qualquer conteúdo. */
.unlock {
  display: grid; place-items: center;
  min-height: 30rem; padding: var(--space-400) var(--space-200);
  background: var(--color-canvas);
}
.unlock__card {
  display: grid; gap: var(--space-200); justify-items: center;
  width: 100%; max-width: 22rem; padding: var(--space-400) var(--space-300);
  border-radius: var(--radius-large); background: var(--color-surface); box-shadow: var(--shadow-raised);
  text-align: center;
}
.unlock__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--color-bg-neutral); color: var(--color-icon);
}
.unlock__icon .i { width: 24px; height: 24px; }
.unlock__title { margin: 0; font: var(--font-section); color: var(--color-text); }
.unlock__text { margin: 0; font: var(--font-body); color: var(--color-text-subtle); }
.unlock__form { display: grid; gap: var(--space-150); width: 100%; text-align: left; }
.unlock .section-message { text-align: left; }

/* L54 · Campo de senha: .input com o botão de mostrar no fim. */
.input--password { padding-right: var(--space-025); }
.input--password > .btn { flex: none; }

/* L55 · Conferência de link: o que o texto mostra e para onde o link leva. */
.link-check { display: grid; gap: var(--space-100); margin: 0; }
.link-check > div {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-100); align-items: baseline;
  padding: var(--space-100) var(--space-150); border-radius: var(--radius-small); background: var(--color-bg-neutral);
}
.link-check dt { font: var(--font-body-small); color: var(--color-text-subtlest); }
.link-check dd { margin: 0; font: var(--font-code); color: var(--color-text); overflow-wrap: anywhere; }
.link-check mark { background: var(--color-bg-warning); color: var(--color-text-warning); border-radius: var(--radius-xsmall); padding-inline: 2px; }

/* L56 · Linha de dados guardados por conta, com o espaço ocupado. */
.setting-list__end { display: flex; align-items: center; gap: var(--space-150); }
.setting-list__size { font: var(--font-body-small); color: var(--color-text-subtle); white-space: nowrap; }

/* L57 · Confirmação dentro de um modal (checkbox com texto longo). */
.confirm-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-100); align-items: start; font: var(--font-body); color: var(--color-text); cursor: pointer; }
.confirm-check .checkbox { margin-top: 2px; }

/* ==========================================================================
   Regras (L58–L63, US12)
   ========================================================================== */
/* L58 · Frase da regra: condições e ações como termos destacados, lidos como uma frase. */
.rule-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-050); font: var(--font-body-small); color: var(--color-text-subtle); }
.rule-term {
  display: inline-flex; align-items: center; gap: var(--space-050);
  padding: 0 var(--space-075); border-radius: var(--radius-small);
  background: var(--color-bg-neutral); color: var(--color-text);
  font: var(--font-weight-medium) var(--font-size-body-small)/1.6 var(--font-family-body);
}
.rule-term .i { width: 14px; height: 14px; color: var(--color-icon-subtle); }
.rule-term--action { background: var(--color-bg-information); color: var(--color-text-information); }
.rule-term--action .i { color: var(--color-icon-brand); }
.rule-term--danger { background: var(--color-bg-danger); color: var(--color-text-danger); }
.rule-term--danger .i { color: var(--color-icon-danger); }

/* L59 · Linha de regra na lista: alça, liga/desliga, nome com a frase, números e menu. */
.rule-list { display: grid; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); overflow: hidden; }
.rule-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-150);
  padding: var(--space-150) var(--space-150) var(--space-150) var(--space-100);
  background: var(--color-surface);
}
.rule-row + .rule-row { border-top: var(--border-width) solid var(--color-border); }
.rule-row:hover, .rule-row.is-hover { background: var(--color-bg-neutral-subtle-hovered); }
.rule-row.is-dragging { box-shadow: var(--shadow-overlay); position: relative; z-index: 1; }
.rule-row.is-off .rule-row__name, .rule-row.is-off .rule-sentence { opacity: .55; }
.rule-row__grip { display: grid; place-items: center; width: 1.25rem; color: var(--color-icon-subtle); cursor: grab; }
.rule-row__body { display: grid; gap: var(--space-050); min-width: 0; }
.rule-row__name { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.rule-row__stats { font: var(--font-body-small); color: var(--color-text-subtlest); white-space: nowrap; text-align: right; }
.rule-row__warn { display: flex; align-items: center; gap: var(--space-050); font: var(--font-body-small); color: var(--color-text-warning); }

/* L60 · Linha de condição do editor: campo, operador, valor e remover. */
.rule-cond { display: grid; grid-template-columns: 11rem 9rem minmax(0, 1fr) auto; gap: var(--space-100); align-items: center; }
.rule-cond > .select { width: 100%; min-width: 0; }
.rule-cond > .select select { width: 100%; min-width: 0; }
.rule-block { display: grid; gap: var(--space-100); padding: var(--space-200); border-radius: var(--radius-medium); background: var(--color-bg-neutral); }
.rule-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100); font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.rule-block__head .select { font-weight: var(--font-weight-regular); }
.rule-block__add { justify-self: start; }

/* L61 · Editor com prévia ao lado. */
.rule-editor { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-300); align-items: start; }
.rule-editor__main { display: grid; gap: var(--space-200); min-width: 0; }
.rule-editor__back { justify-self: start; }
.rule-preview { position: sticky; top: 0; display: grid; gap: var(--space-150); padding: var(--space-200); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.rule-preview__count { margin: 0; font: var(--font-card); color: var(--color-text); }
.rule-preview__hint { margin: 0; font: var(--font-body-small); color: var(--color-text-subtle); }
.rule-preview__list { display: grid; gap: var(--space-075); margin: 0; padding: 0; list-style: none; }
.rule-preview__item { display: grid; gap: 2px; padding-bottom: var(--space-075); border-bottom: var(--border-width) solid var(--color-border); font: var(--font-body-small); color: var(--color-text-subtle); }
.rule-preview__item b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.rule-preview__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* L62 · Modelos de regra: cartões clicáveis no estado vazio e em "Nova regra". */
.rule-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-150); }
.rule-template {
  display: grid; gap: var(--space-075); padding: var(--space-200); text-align: left; cursor: pointer;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); color: var(--color-text);
  font: var(--font-body);
}
.rule-template:hover, .rule-template.is-hover { border-color: var(--color-border-bold); background: var(--color-bg-neutral-subtle-hovered); }
.rule-template:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 2px; }
.rule-template__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-small); background: var(--color-bg-information); color: var(--color-icon-brand); }
.rule-template__title { font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); }
.rule-template__desc { font: var(--font-body-small); color: var(--color-text-subtle); }

/* L63 · Histórico das regras: uma linha por lote, com desfazer. */
.rule-history { display: grid; }
.rule-history__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--space-150); align-items: center; padding: var(--space-100) 0; border-bottom: var(--border-width) solid var(--color-border); font: var(--font-body-small); color: var(--color-text-subtle); }
.rule-history__row b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.rule-history__row.is-undone { opacity: .55; }

/* ==========================================================================
   Criptografia de ponta a ponta (L64–L69, US13 e US14)
   ========================================================================== */
/* L64 · Cartão de escolha: uma opção de um assistente, como rádio grande. */
.choice-list { display: grid; gap: var(--space-100); }
.choice-card {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--space-150); align-items: start;
  padding: var(--space-150) var(--space-200); cursor: pointer;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface);
}
.choice-card:hover, .choice-card.is-hover { background: var(--color-bg-neutral-subtle-hovered); }
.choice-card:has(input:checked), .choice-card.is-selected { border-color: var(--color-border-selected); background: var(--color-bg-selected); }
.choice-card input { margin: 3px 0 0; accent-color: var(--color-bg-brand-bold); }
.choice-card__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-small); background: var(--color-bg-neutral); color: var(--color-icon); }
.choice-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-075); font: var(--font-weight-semibold) var(--font-size-body)/var(--line-height-body) var(--font-family-body); color: var(--color-text); }
.choice-card__desc { margin: 2px 0 0; font: var(--font-body-small); color: var(--color-text-subtle); }

/* L65 · Impressão digital: grupos de 4, fonte mono, selecionável e com copiar. */
.fingerprint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-050) var(--space-100); font: var(--font-code); color: var(--color-text); letter-spacing: .02em; user-select: all; }
.fingerprint span:nth-child(5) { margin-right: var(--space-100); }
.fingerprint--compact { font-size: var(--font-size-body-small); color: var(--color-text-subtle); }

/* L66 · Gerenciador de chaves: barra, lista em tabela e detalhes ao lado. */
.key-manager { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-150); min-height: 0; }
.key-manager__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100); }
.key-manager__bar .input--search { flex: 1 1 14rem; }
.key-manager__body { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-200); min-height: 0; }
.key-table { width: 100%; border-collapse: collapse; font: var(--font-body-small); color: var(--color-text-subtle); }
.key-table th { position: sticky; top: 0; padding: var(--space-075) var(--space-100); text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text-subtlest); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.key-table td { padding: var(--space-100); border-bottom: var(--border-width) solid var(--color-border); vertical-align: middle; }
.key-table tr[aria-selected="true"] td { background: var(--color-bg-selected); }
.key-table tbody tr:hover td { background: var(--color-bg-neutral-subtle-hovered); }
.key-table__who { display: grid; gap: 2px; min-width: 0; }
.key-table__who b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.key-table__id { font: var(--font-code); font-size: var(--font-size-body-small); }
.key-details { display: grid; align-content: start; gap: var(--space-150); max-height: 100%; overflow: auto; padding: var(--space-200); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.key-details__title { margin: 0; font: var(--font-card); color: var(--color-text); }
.key-details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-050) var(--space-150); margin: 0; font: var(--font-body-small); }
.key-details dt { color: var(--color-text-subtlest); }
.key-details dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }

/* L67 · Selo de segurança da mensagem: no cabeçalho, com detalhes ao clicar. */
.sec-status { display: flex; flex-wrap: wrap; gap: var(--space-075); margin-top: var(--space-075); }
.sec-badge {
  display: inline-flex; align-items: center; gap: var(--space-050);
  padding: 2px var(--space-100); border: 0; border-radius: var(--radius-round); cursor: pointer;
  font: var(--font-weight-medium) var(--font-size-body-small)/1.5 var(--font-family-body);
  background: var(--color-bg-success); color: var(--color-text-success);
}
.sec-badge .i { width: 14px; height: 14px; }
.sec-badge--info { background: var(--color-bg-information); color: var(--color-text-information); }
.sec-badge--warning { background: var(--color-bg-warning); color: var(--color-text-warning); }
.sec-badge--danger { background: var(--color-bg-danger); color: var(--color-text-danger); }
.sec-badge:focus-visible { outline: var(--border-width-focused) solid var(--color-border-focused); outline-offset: 1px; }

/* L68 · Segurança no composer: cifrar, assinar e a tecnologia; chip do destinatário com o estado da chave. */
.compose__security { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-075); padding: var(--space-075) var(--space-200); border-top: var(--border-width) solid var(--color-border); background: var(--color-bg-neutral); }
.compose__security .btn[aria-pressed="true"] { background: var(--color-bg-selected); color: var(--color-text-selected); }
.compose__security-tech { margin-left: auto; font: var(--font-body-small); color: var(--color-text-subtle); }
.chip__key { display: inline-grid; place-items: center; width: 1rem; height: 1rem; color: var(--color-icon-success); }
.chip__key .i { width: 12px; height: 12px; }
.chip__key--missing { color: var(--color-icon-warning); }

/* L69 · Bloco de texto para copiar (CSR, chave pública). */
.pem-box { position: relative; margin: 0; padding: var(--space-150); padding-right: var(--space-500); max-height: 12rem; overflow: auto; border-radius: var(--radius-small); background: var(--color-bg-neutral); font: var(--font-code); font-size: var(--font-size-body-small); color: var(--color-text); white-space: pre; }
.pem-box__copy { position: absolute; top: var(--space-075); right: var(--space-075); }

/* Cabeçalho da folha com "Voltar" à esquerda (gerenciadores abertos a partir das Configurações). */
.settings-sheet__head > .settings-sheet__back { margin-left: 0; }

/* Etapas de um assistente: "1 de 3". */
.wizard-steps { margin: 0 0 var(--space-100); font: var(--font-body-small); color: var(--color-text-subtlest); }

/* ==========================================================================
   Arquivos de e-mail (L70–L72, US15): abrir backups de outros programas, sem conta
   ========================================================================== */

/* L70 · Área de soltar: cobre a janela enquanto um arquivo ou pasta é arrastado sobre ela. */
.drop-zone {
  display: grid; place-items: center; align-content: center; gap: var(--space-150);
  min-height: 16rem; padding: var(--space-400);
  border: var(--border-width-focused) dashed var(--color-border-focused); border-radius: var(--radius-large);
  background: var(--color-bg-selected); color: var(--color-text-selected);
  text-align: center;
}
.drop-zone .i { width: 2.5rem; height: 2.5rem; color: var(--color-icon-brand); }
.drop-zone__title { margin: 0; font: var(--font-section); color: var(--color-text); }
.drop-zone__desc { margin: 0; max-width: 44ch; font: var(--font-body); color: var(--color-text-subtle); }
.drop-zone--overlay { position: fixed; inset: var(--space-200); z-index: var(--z-blanket); pointer-events: none; box-shadow: var(--shadow-overlay); }

/* L71 · Arquivo local na coluna de contas e nos menus: neutro e com ícone no lugar da inicial. */
.avatar--archive { --av-bg: var(--color-bg-neutral); --av-fg: var(--color-icon); }
.avatar--archive .i { width: 1rem; height: 1rem; }
.avatar--lg.avatar--archive .i { width: 1.25rem; height: 1.25rem; }

/* L72 · Resumo da importação: três números lado a lado. */
.import-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-100); margin: 0; }
.import-summary > div {
  display: grid; gap: var(--space-025); padding: var(--space-150);
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-medium);
  background: var(--color-surface-raised);
}
.import-summary dt { font: var(--font-body-small); color: var(--color-text-subtle); }
.import-summary dd { margin: 0; font: var(--font-section); color: var(--color-text); font-variant-numeric: tabular-nums; }
.import-summary .is-danger dd { color: var(--color-text-danger); }

/* ==========================================================================
   Documentação e páginas de destaque (L78–L80, US docs). O trecho entre os marcadores é copiado para o site de
   documentação (docs-site/scripts/sync-ds.mjs), que não carrega o resto deste arquivo.
   ========================================================================== */
/* @docs-site:start */
/* Amostra de gradiente (páginas do DS). */
.gradient-swatch { display: grid; align-content: end; min-height: 6rem; padding: var(--space-150); border-radius: var(--radius-large); color: #fff; font: var(--font-weight-semibold) var(--font-size-body)/1.3 var(--font-family-body); text-shadow: 0 1px 2px rgb(0 0 0 / .25); }

/* ---------- L78 · Brilho no topo da página e título em gradiente (só no início de páginas de destaque) ---------- */
.page-glow { position: relative; isolation: isolate; overflow: hidden; }
.page-glow::before {
  content: ""; position: absolute; inset: -8rem -10% auto -10%; height: min(30rem, 140%); z-index: -1;
  background: var(--page-glow, var(--gradient-aurora)); opacity: .22; filter: blur(64px); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
}
.page-glow--ocean  { --page-glow: var(--gradient-ocean); }
.page-glow--aurora { --page-glow: var(--gradient-aurora); }
.page-glow--sunset { --page-glow: var(--gradient-sunset); }
.page-glow--meadow { --page-glow: var(--gradient-meadow); }
.page-glow--potato { --page-glow: var(--gradient-potato); }
.text-gradient { background: var(--page-glow, var(--gradient-aurora)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- L79 · Ícones de marca (preenchidos, não traço) e o seletor de idioma ---------- */
.i--brand { fill: currentColor; stroke: none; }
.lang-button { display: inline-flex; align-items: center; gap: var(--space-075); }
.lang-button__code { font: var(--font-weight-semibold) var(--font-size-body-small)/1 var(--font-family-body); letter-spacing: .02em; color: var(--color-text-subtle); }

/* ---------- L80 · Timeline vertical e horizontal ---------- */
.timeline { --tl-marker: 1.5rem; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-300); }
.timeline__item { position: relative; display: grid; grid-template-columns: var(--tl-marker) minmax(0, 1fr); column-gap: var(--space-200); }
.timeline__marker { position: relative; z-index: 1; display: grid; place-items: center; width: var(--tl-marker); height: var(--tl-marker); border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text-inverse); }
.timeline__marker .i { width: .875rem; height: .875rem; }
.timeline__item:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--tl-marker) / 2 - 1px); top: var(--tl-marker); bottom: calc(var(--space-300) * -1); width: 2px; background: var(--color-border); }
.timeline__item.is-done .timeline__marker { border-color: var(--color-bg-brand-bold); background: var(--color-bg-brand-bold); }
.timeline__item.is-done:not(:last-child)::after { background: var(--color-bg-brand-bold); }
.timeline__item.is-current .timeline__marker { border-color: var(--color-bg-brand-bold); box-shadow: 0 0 0 4px var(--color-bg-selected); }
.timeline__item.is-current .timeline__marker::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-bg-brand-bold); }
.timeline__content { display: grid; gap: var(--space-050); padding-top: .125rem; }
.timeline__date { font: var(--font-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-subtlest); }
.timeline__title { margin: 0; font: var(--font-weight-semibold) var(--font-size-body-large)/1.35 var(--font-family-body); color: var(--color-text); }
.timeline__body { margin: 0; font: var(--font-body); color: var(--color-text-subtle); }
.timeline__item.is-upcoming .timeline__title { color: var(--color-text-subtle); }
/* Horizontal: a linha atravessa os marcadores; o texto fica embaixo. Rola na largura em telas estreitas. */
.timeline--horizontal { grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: 0; overflow-x: auto; padding-bottom: var(--space-100); }
.timeline--horizontal .timeline__item { grid-template-columns: 1fr; row-gap: var(--space-150); padding-right: var(--space-200); }
.timeline--horizontal .timeline__item:not(:last-child)::after { left: var(--tl-marker); right: 0; top: calc(var(--tl-marker) / 2 - 1px); bottom: auto; width: auto; height: 2px; }
/* @docs-site:end */