.saas-company-card>.v489-company-reset{margin:10px 0;border:1px solid color-mix(in srgb,#e84d5b 35%,var(--border,#d9e2ef));border-radius:14px;overflow:hidden}
.saas-company-card>.v489-company-reset>summary{padding:12px 14px}.saas-company-card>.v489-company-reset>form{padding:14px}
.msn-v33-inbox-tabs{min-width:0}.msn-v33-inbox-tabs a{min-width:0;white-space:nowrap}.msn-v33-inbox-tabs b{flex:0 0 auto}
@media(max-width:760px){.saas-company-card>.v489-company-reset>form{padding:12px}}

/* v489-ultrawide-settings */
@media (min-width:1721px) {
  body:has(.settings-shell) main.page:not(.auth-page) {
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
}

/* v489-settings-centered-v3 */

/* Margens laterais iguais na página de Configurações. */
@media (min-width:981px) {
  html body:has(.settings-shell):not(:has(.msn-v33-shell)):not(:has(.flows-hero)):not(:has(#flow-editor-app)) main.page:not(.auth-page) {
    box-sizing:border-box!important;
    inline-size:auto!important;
    width:auto!important;
    max-inline-size:none!important;
    max-width:none!important;
    margin-left:clamp(16px,2.4vw,44px)!important;
    margin-right:clamp(16px,2.4vw,44px)!important;
  }

  /* Centraliza o conteúdo da aba Aparência. */
  html body:has(.settings-shell) .settings-content > .section-head,
  html body:has(.settings-shell) .settings-content > .settings-personal-card,
  html body:has(.settings-shell) .settings-content > .wallpaper-settings-v451 {
    box-sizing:border-box!important;
    width:min(100%,980px)!important;
    max-width:980px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Remove as grandes placas de fundo assinaladas. */
html body:has(.settings-shell) .settings-shell,
html body:has(.settings-shell) .settings-nav,
html body:has(.settings-shell) .settings-content {
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* Mantém o espaçamento estrutural sem criar faixa colorida. */
html body:has(.settings-shell) .settings-shell {
  align-items:start!important;
}

html body:has(.settings-shell) .settings-nav,
html body:has(.settings-shell) .settings-content {
  background-clip:border-box!important;
}

/* v489-global-centered-v4 */

/*
 * A página ocupa toda a tela para manter o scroll no canto direito.
 * O espaçamento visual é criado por padding interno simétrico.
 */
@media (min-width:761px) {
  html body:not(:has(.msn-v33-shell)):not(:has(#flow-editor-app)) main.page:not(.auth-page),
  html body:has(.settings-shell):not(:has(.msn-v33-shell)):not(:has(#flow-editor-app)) main.page:not(.auth-page) {
    box-sizing:border-box!important;
    inline-size:100%!important;
    width:100%!important;
    max-inline-size:none!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-inline:0!important;
    padding-left:clamp(16px,2.4vw,44px)!important;
    padding-right:clamp(16px,2.4vw,44px)!important;
  }

  /* Reserva o espaço do Dock quando ele estiver em uma lateral. */
  html body:not(.dock-autohide).dock-pos-left:not(:has(.msn-v33-shell)):not(:has(#flow-editor-app)) main.page:not(.auth-page) {
    padding-left:calc(var(--dock-reserved-size,82px) + clamp(16px,2.4vw,44px))!important;
  }

  html body:not(.dock-autohide).dock-pos-right:not(:has(.msn-v33-shell)):not(:has(#flow-editor-app)) main.page:not(.auth-page) {
    padding-right:calc(var(--dock-reserved-size,82px) + clamp(16px,2.4vw,44px))!important;
  }
}

/* Remove somente os grandes fundos estruturais, os “tapetes”. */
html body main.page:not(.auth-page) :is(
  .settings-shell,
  .settings-nav,
  .settings-content,
  .audience-shell,
  .audience-filters,
  .audience-list-panel,
  .contact-detail,
  .campaign-shell,
  .campaign-list-card,
  .campaign-detail-card,
  .broadcast-shell,
  .broadcast-list-card,
  .broadcast-detail-card,
  .schedule-shell,
  .schedule-calendar-card,
  .schedule-side,
  .schedule-detail-card,
  .billing-shell,
  .billing-list,
  .billing-detail,
  .automation-shell,
  .automation-card,
  .flow-shell,
  .flow-list-card,
  .tasks-shell,
  .tasks-list,
  .tasks-detail,
  .task-list-card,
  .task-detail-card,
  .utilities-shell
) {
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* Mantém os conteúdos ocupando corretamente a área central. */
html body main.page:not(.auth-page) :is(
  .settings-shell,
  .audience-shell,
  .campaign-shell,
  .broadcast-shell,
  .schedule-shell,
  .billing-shell,
  .automation-shell,
  .flow-shell,
  .tasks-shell,
  .utilities-shell
) {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Preserva fundos indispensáveis no Bate-papo e no editor de Fluxos. */
html body:has(.msn-v33-shell) main.page:not(.auth-page),
html body:has(#flow-editor-app) main.page:not(.auth-page) {
  background:transparent!important;
}

/* v489-glass-containers-chat-v5 */

/*
 * Somente as estruturas externas permanecem transparentes.
 * Elas organizam o layout, mas não criam o antigo “tapete”.
 */
html body main.page:not(.auth-page) :is(
  .settings-shell,
  .audience-shell,
  .campaign-shell,
  .broadcast-shell,
  .schedule-shell,
  .billing-shell,
  .billing-workspace,
  .automation-shell,
  .flow-shell,
  .flows-shell,
  .tasks-shell,
  .utilities-shell
) {
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/*
 * Painéis funcionais com o acabamento translúcido dos APPs.
 * --panel-alpha é atualizado pelo controle “Transparência dos blocos”.
 */
html body main.page:not(.auth-page) :is(
  .settings-hero,
  .settings-nav,
  .settings-content,

  .audience-hero,
  .audience-toolbar,
  .audience-filters,
  .audience-list-panel,
  .contact-detail,

  .campaign-hero,
  .campaign-toolbar,
  .campaign-list-card,
  .campaign-detail-card,

  .broadcast-hero,
  .broadcast-toolbar,
  .broadcast-list-card,
  .broadcast-detail-card,

  .schedule-hero,
  .schedule-toolbar,
  .schedule-calendar-card,
  .schedule-side,
  .schedule-detail-card,

  .billing-hero,
  .billing-filterbar,
  .billing-list,
  .billing-detail,
  .billing-period-bar,
  .billing-stats > article,

  .automation-hero,
  .automation-tabs,
  .automation-card,

  .flows-hero,
  .flows-toolbar,
  .flow-list-card,
  .flow-folders,

  .utilities-hero,
  .utility-filterbar,
  .task-list-card,
  .task-detail-card
) {
  box-sizing:border-box!important;
  background:color-mix(
    in srgb,
    var(--surface-solid,#fff) calc(var(--panel-alpha,.90) * 100%),
    transparent
  )!important;
  border:1px solid color-mix(
    in srgb,
    var(--border,#d9e2ef) 82%,
    transparent
  )!important;
  box-shadow:0 12px 32px rgba(20,35,70,.09)!important;
  backdrop-filter:blur(13px) saturate(116%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(116%)!important;
  background-clip:padding-box!important;
}

/* Espaço interno para as barras que antes ficavam diretamente no papel de parede. */
html body main.page:not(.auth-page) :is(
  .audience-toolbar,
  .campaign-toolbar,
  .broadcast-toolbar,
  .schedule-toolbar,
  .billing-filterbar,
  .flows-toolbar,
  .utility-filterbar
) {
  padding:10px 12px!important;
  border-radius:var(--v484-radius,18px)!important;
}

/*
 * O Bate-papo tinha limites próprios de 1640/1800 px.
 * Agora ocupa a largura disponível, mantendo margens internas iguais.
 * O scroll continua pertencendo à página e rente ao navegador.
 */
@media (min-width:761px) {
  html body:has(.msn-v33-shell) main.page:not(.auth-page) {
    box-sizing:border-box!important;
    inline-size:100%!important;
    width:100%!important;
    max-inline-size:none!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-inline:0!important;
    padding-left:clamp(12px,1.25vw,24px)!important;
    padding-right:clamp(12px,1.25vw,24px)!important;
  }

  html body:has(.msn-v33-shell) :is(
    .msn-v33-shell,
    .msn-v33-shell.empty-contact,
    .msn-v33-shell.has-contact
  ) {
    box-sizing:border-box!important;
    inline-size:100%!important;
    width:100%!important;
    max-inline-size:none!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* v489-preferences-layout-v6 */

/* Centralização única para toda a área de Preferências. */
html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs) > :is(
  .section-head,
  .personal-pref-tabs,
  .prefs-head,
  .focus-quick,
  .settings-personal-card,
  .trusted-devices-card
) {
  box-sizing:border-box!important;
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Abas superiores equilibradas. */
html body:has(.settings-shell) .personal-pref-tabs {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  padding:6px!important;
  border-radius:16px!important;
  overflow:hidden!important;
}

html body:has(.settings-shell) .personal-pref-tabs a {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:8px 12px!important;
  text-align:center!important;
  border-radius:11px!important;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s ease!important;
}

html body:has(.settings-shell) .personal-pref-tabs a:hover {
  background:color-mix(
    in srgb,
    var(--accent) 8%,
    transparent
  )!important;
}

/* Cabeçalho da opção escolhida. */
html body:has(.settings-shell) .prefs-head {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-top:25px!important;
  margin-bottom:12px!important;
}

/* Os três modos de Foco agora ocupam três colunas centralizadas. */
html body:has(.settings-shell) .focus-quick {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:0!important;
  margin-bottom:18px!important;
}

html body:has(.settings-shell) .focus-quick form {
  min-width:0!important;
  margin:0!important;
}

/* Novo acabamento dos botões de Foco. */
html body:has(.settings-shell) .focus-card {
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:96px!important;
  padding:14px!important;
  border:1px solid color-mix(
    in srgb,
    var(--border,#d9e2ef) 90%,
    transparent
  )!important;
  border-radius:18px!important;
  outline:none!important;
  background:color-mix(
    in srgb,
    var(--surface-solid,#fff) 92%,
    transparent
  )!important;
  color:var(--text,var(--ink))!important;
  box-shadow:0 8px 22px rgba(25,40,75,.07)!important;
  font-weight:800!important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease!important;
}

html body:has(.settings-shell) .focus-card:hover {
  transform:translateY(-2px)!important;
  border-color:color-mix(
    in srgb,
    var(--accent) 42%,
    var(--border,#d9e2ef)
  )!important;
  box-shadow:0 12px 28px rgba(25,40,75,.12)!important;
}

html body:has(.settings-shell) .focus-card.active {
  background:color-mix(
    in srgb,
    var(--accent) 10%,
    var(--surface-solid,#fff)
  )!important;
  border-color:var(--accent)!important;
  box-shadow:
    0 10px 28px color-mix(in srgb,var(--accent) 17%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)!important;
}

html body:has(.settings-shell) .focus-card.active::after {
  content:"✓";
  position:absolute;
  top:10px;
  right:11px;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

html body:has(.settings-shell) .focus-card i {
  display:grid!important;
  place-items:center!important;
  width:43px!important;
  height:43px!important;
  margin:0!important;
  border-radius:14px!important;
  background:color-mix(
    in srgb,
    var(--accent) 14%,
    var(--surface-solid,#fff)
  )!important;
  box-shadow:none!important;
  font-size:20px!important;
  font-style:normal!important;
}

html body:has(.settings-shell)
.focus-quick form:nth-child(1) .focus-card i::before {
  content:"💼";
}

html body:has(.settings-shell)
.focus-quick form:nth-child(2) .focus-card i::before {
  content:"🔕";
}

html body:has(.settings-shell)
.focus-quick form:nth-child(3) .focus-card i::before {
  content:"🌙";
}

/* Um único painel central para as configurações inferiores. */
html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs) > .settings-personal-card {
  min-width:0!important;
  margin-top:14px!important;
  padding:10px 16px 16px!important;
  border:1px solid color-mix(
    in srgb,
    var(--border,#d9e2ef) 86%,
    transparent
  )!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:color-mix(
    in srgb,
    var(--surface-solid,#fff) calc(var(--panel-alpha,.90) * 100%),
    transparent
  )!important;
  box-shadow:0 12px 32px rgba(20,35,70,.09)!important;
  backdrop-filter:blur(13px) saturate(116%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(116%)!important;
}

/* Linhas limpas, com nomes à esquerda e controles à direita. */
html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs)
.settings-personal-card > .setting-row {
  box-sizing:border-box!important;
  width:100%!important;
  min-height:62px!important;
  margin:0!important;
  padding:13px 12px!important;
  background:transparent!important;
  border-top:0!important;
  border-bottom:1px solid color-mix(
    in srgb,
    var(--border,#d9e2ef) 78%,
    transparent
  )!important;
  border-radius:0!important;
}

html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs)
.settings-personal-card > .setting-row > :last-child {
  margin-left:auto!important;
}

/* Dias de trabalho dentro do mesmo padrão das outras configurações. */
html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs) .week-pills {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:100%!important;
  min-height:62px!important;
  padding:13px 12px!important;
  border-bottom:1px solid color-mix(
    in srgb,
    var(--border,#d9e2ef) 78%,
    transparent
  )!important;
}

html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs) .week-pills::before {
  content:"Dias de trabalho";
  margin-right:auto;
  font-weight:600;
}

html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs) .week-pills span {
  width:34px!important;
  height:34px!important;
  cursor:pointer!important;
}

/* Impede campos excessivamente compridos. */
html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs)
.setting-row > input:not([type="checkbox"]):not([type="range"]):not([type="color"]) {
  width:min(100%,360px)!important;
  max-width:360px!important;
  margin-left:auto!important;
}

html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs) .time-pair {
  justify-content:flex-end!important;
  margin-left:auto!important;
}

html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs)
.settings-personal-card > label:not(.setting-row) {
  box-sizing:border-box!important;
  display:grid!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
  padding:16px 12px 4px!important;
}

html body:has(.settings-shell)
.settings-content:has(> .personal-pref-tabs)
.settings-personal-card textarea {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-height:92px!important;
}

/* Evita qualquer deslocamento horizontal nesta página. */
html body:has(.settings-shell) main.page:not(.auth-page),
html body:has(.settings-shell) .settings-content {
  overflow-x:hidden!important;
}

/* Ajustes responsivos. */
@media (max-width:760px) {
  html body:has(.settings-shell) .personal-pref-tabs {
    display:flex!important;
    overflow-x:auto!important;
    justify-content:flex-start!important;
  }

  html body:has(.settings-shell) .personal-pref-tabs a {
    flex:0 0 auto!important;
    min-width:120px!important;
  }

  html body:has(.settings-shell) .focus-quick {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  html body:has(.settings-shell) .focus-card {
    min-height:88px!important;
    padding:10px 5px!important;
    font-size:12px!important;
  }

  html body:has(.settings-shell)
  .settings-content:has(> .personal-pref-tabs) > .settings-personal-card {
    padding:7px 10px 12px!important;
  }

  html body:has(.settings-shell)
  .settings-content:has(> .personal-pref-tabs) .time-pair {
    width:100%!important;
  }
}

@media (max-width:480px) {
  html body:has(.settings-shell) .focus-quick {
    grid-template-columns:1fr!important;
  }

  html body:has(.settings-shell) .focus-card {
    min-height:76px!important;
    flex-direction:row!important;
  }

  html body:has(.settings-shell)
  .settings-content:has(> .personal-pref-tabs) .week-pills {
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
  }

  html body:has(.settings-shell)
  .settings-content:has(> .personal-pref-tabs) .week-pills::before {
    flex-basis:100%!important;
    margin-bottom:4px!important;
  }
}

/* v489-settings-seamless-v8 */

/*
 * Mantém o fundo e a estrutura das Configurações visíveis durante
 * a navegação entre Aparência, Identidade, Preferências, Equipe etc.
 */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  body:has(.settings-shell) .settings-hero {
    view-transition-name: v489-settings-hero;
  }

  body:has(.settings-shell) .settings-nav {
    view-transition-name: v489-settings-navigation;
  }

  body:has(.settings-shell) .settings-content {
    view-transition-name: v489-settings-content;
  }

  ::view-transition-group(v489-settings-hero),
  ::view-transition-group(v489-settings-navigation),
  ::view-transition-group(v489-settings-content) {
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(.2,.75,.25,1);
  }

  ::view-transition-old(v489-settings-content) {
    animation: v489-settings-content-out 80ms ease both;
  }

  ::view-transition-new(v489-settings-content) {
    animation: v489-settings-content-in 180ms ease both;
  }

  @keyframes v489-settings-content-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  @keyframes v489-settings-content-in {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}