/* The same frame surrounds mail, contacts and every subsequent module. */
:root { --rf-navigation-width: 256px; }
#rf-suite-sidebar {
  position: fixed;
  inset: var(--rf-topbar-height) auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--rf-navigation-width);
  color: var(--rf-text);
}
#rf-module-tools { flex: 1 1 auto; min-height: 0; overflow: auto; }
html[data-rf-skin="gmail_like"] body.rf-has-topbar #rf-module-tools > #layout-sidebar {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px 8px !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#rf-module-tools #layout-sidebar > .scroller { flex: 0 0 auto; overflow: visible; }
/* Its native resize handle projects past the fixed sidebar after reparenting. */
#rf-module-tools #layout-sidebar > .column-resizer { display: none; }
#rf-module-tools #layout-sidebar > .header {
  display: flex;
  align-items: center;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  gap: 8px;
  border: 0;
  background: transparent;
}
#rf-module-tools #layout-sidebar > .header .header-title { flex: 1; margin: 0 !important; width: auto; font-size: 13px; line-height: 20px; text-align: left; }
#rf-module-tools #layout-sidebar > .header .sidebar-menu { order: 1; display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 32px; padding: 0; border-radius: 8px; }
#rf-module-tools #layout-sidebar > .header .sidebar-menu::before { width: auto; height: auto; margin: 0; font-size: 14px; line-height: 20px; }
#rf-module-tools #layout-sidebar > .header .back-list-button { display: none !important; }
#rf-suite-navigation {
  flex: 0 0 auto;
  max-height: 55%;
  overflow: auto;
  margin: 0 16px;
  padding: 8px 0 6px;
  border-top: 1px solid var(--rf-border);
}
.rf-suite-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
#rf-suite-navigation :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 5px 1px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rf-text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}
#rf-suite-navigation .rf-suite-shortcut { flex-direction: column; min-height: 48px; position: relative; }
#rf-suite-navigation .rf-suite-density {
  flex-direction: row;
  width: 100%;
  min-height: 22px;
  height: 22px;
  margin-top: 2px;
  padding: 0;
  color: var(--rf-muted);
}
#rf-suite-navigation .rf-suite-density::before {
  content: "\f078";
  font: 900 11px/1 Icons;
}
#rf-suite-navigation .rf-suite-density:hover { background: var(--rf-accent-soft); color: var(--rf-text); }
.rf-suite-badge {
  position: absolute; top: 0; left: calc(50% + 5px); min-width: 16px; max-width: 35px;
  height: 16px; padding: 0 4px; border-radius: 9px; background: #d44c68; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--rf-surface); pointer-events: none;
}
.rf-suite-badge-total, .rf-suite-badge-error { background: var(--rf-muted); color: var(--rf-surface); }
.rf-suite-badge[hidden] { display: none; }
#rf-suite-navigation :is(a, button):not(.rf-suite-density)::before { font: 900 17px/20px Icons; }
#rf-suite-navigation .rf-suite-mail::before { content: "\f0e0"; }
#rf-suite-navigation .rf-suite-contacts::before { content: "\f2b9"; }
#rf-suite-navigation .rf-suite-admin::before { content: "\f0e8"; }
#rf-suite-navigation .rf-suite-calendar::before { content: "\f073"; }
#rf-suite-navigation .rf-suite-tasks::before { content: "\f0ae"; }
#rf-suite-navigation .rf-suite-chat::before { content: "\f086"; }
#rf-suite-navigation .rf-suite-meet::before { content: "\f03d"; }
#rf-suite-navigation .rf-suite-files::before { content: "\f07b"; }
#rf-suite-navigation .rf-suite-documents::before { content: "\f15c"; }
#rf-suite-navigation .rf-suite-team::before { content: "\f0c0"; }
#rf-suite-navigation .rf-suite-booking::before { content: "\f274"; }
#rf-suite-navigation .rf-suite-scheduled::before { content: "\f017"; }
#rf-suite-navigation .rf-suite-signatures::before { content: "\f5b7"; }
#rf-suite-navigation .rf-suite-filters::before { content: "\f0b0"; }
/* Uma cor por serviço (só o ícone; o rótulo segue a cor do texto). */
#rf-suite-navigation .rf-suite-mail::before { color: #4c8dff; }
#rf-suite-navigation .rf-suite-contacts::before { color: #14b8a6; }
#rf-suite-navigation .rf-suite-admin::before { color: #476d90; }
#rf-suite-navigation .rf-suite-calendar::before { color: #ef4444; }
#rf-suite-navigation .rf-suite-tasks::before { color: #22a34a; }
#rf-suite-navigation .rf-suite-chat::before { color: #8b5cf6; }
#rf-suite-navigation .rf-suite-meet::before { color: #0ea5e9; }
#rf-suite-navigation .rf-suite-files::before { color: #f59e0b; }
#rf-suite-navigation .rf-suite-documents::before { color: #6366f1; }
#rf-suite-navigation .rf-suite-team::before { color: #ec4899; }
#rf-suite-navigation .rf-suite-booking::before { color: #06b6d4; }
#rf-suite-navigation .rf-suite-scheduled::before { color: #84cc16; }
#rf-suite-navigation .rf-suite-signatures::before { color: #f97316; }
#rf-suite-navigation .rf-suite-filters::before { color: #64748b; }
#rf-suite-navigation :disabled { color: var(--rf-muted); opacity: .72; cursor: default; }
#rf-suite-navigation .rf-suite-admin[hidden] { display: none; }
#rf-suite-navigation [aria-current="page"] { color: var(--rf-accent-strong); background: var(--rf-accent-soft); }
#rf-suite-navigation a:not(.disabled):hover { background: var(--rf-accent-soft); }
#rf-suite-navigation :focus-visible { outline: 2px solid var(--rf-accent-strong); outline-offset: -2px; }
html.rf-suite-compact:not(.rf-sidebar-collapsed) #rf-suite-navigation { max-height: none; padding-block: 6px; }
html.rf-suite-compact:not(.rf-sidebar-collapsed) .rf-suite-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
}
html.rf-suite-compact:not(.rf-sidebar-collapsed) #rf-suite-navigation .rf-suite-shortcut {
  flex: 0 0 36px;
  width: 36px;
  min-height: 32px;
  padding: 4px 0;
}
html.rf-suite-compact:not(.rf-sidebar-collapsed) .rf-suite-label { display: none; }
html.rf-suite-compact:not(.rf-sidebar-collapsed) #rf-suite-navigation .rf-suite-shortcut::before { font-size: 15px; line-height: 18px; }
html.rf-suite-compact #rf-suite-navigation .rf-suite-density::before { content: "\f077"; }
body.rf-has-topbar #layout-menu, body.rf-has-topbar .task-menu-button { display: none !important; }
@media (min-width: 768px) {
  html.rf-sidebar-collapsed { --rf-navigation-width: 72px; }
  html[data-rf-skin="gmail_like"] body.rf-has-topbar #layout {
    width: calc(100% - var(--rf-navigation-width)) !important;
    margin-left: var(--rf-navigation-width) !important;
  }
  html[data-rf-skin="gmail_like"] body.rf-has-topbar.task-mail:is(.action-none, .action-show) #layout { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-rf-skin="gmail_like"] body.rf-has-topbar.task-mail.action-none #layout-list,
  html[data-rf-skin="gmail_like"] body.rf-has-topbar.task-mail.action-show #layout-content { grid-column: 1 !important; }
  html.rf-sidebar-collapsed #rf-suite-navigation { margin-inline: 8px; }
  html.rf-sidebar-collapsed .rf-suite-items { grid-template-columns: 1fr; gap: 0; }
  html.rf-sidebar-collapsed #rf-suite-navigation .rf-suite-shortcut { min-height: 36px; }
  html.rf-sidebar-collapsed .rf-suite-label { display: none; }
  html.rf-sidebar-collapsed #rf-suite-navigation .rf-suite-density { display: none; }
  html.rf-sidebar-collapsed #rf-module-tools > #layout-sidebar { padding-inline: 8px !important; }
  html.rf-sidebar-collapsed #rf-module-tools .rf-contact-primary { padding-inline: 0; }
  html.rf-sidebar-collapsed #rf-module-tools .rf-contact-create { min-height: 44px; padding-inline: 0; }
  html.rf-sidebar-collapsed #rf-module-tools .rf-contact-create .inner,
  html.rf-sidebar-collapsed #rf-module-tools #directorylist-header { display: none; }
  html.rf-sidebar-collapsed #rf-module-tools #directorylist li > a { justify-content: center; margin-inline: 0; padding-inline: 0; font-size: 0; gap: 0; }
}
@media (max-width: 767px) {
  #rf-suite-sidebar { display: none; width: min(290px, 85vw); background: var(--rf-surface); border-right: 1px solid var(--rf-border); box-shadow: 10px 0 30px rgb(0 0 0 / 18%); }
  html.rf-sidebar-mobile-open #rf-suite-sidebar { display: flex; }
  #rf-suite-navigation { max-height: 55%; }
}

/* Botão de nova mensagem agrupado à busca do cabeçalho, com atalho visível. */
.rf-app-compose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0 auto 0 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #15803d;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgb(21 128 61 / 14%);
  font-size: var(--rf-control-font-size);
  font-weight: 650;
  line-height: var(--rf-control-line-height);
  white-space: nowrap;
}
.rf-app-compose::before {
  content: "\f044";
  font: 900 15px/1 Icons;
}
.rf-app-compose:hover { background: #166534; }
.rf-app-compose:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.rf-app-compose .rf-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 5px;
  background: rgb(255 255 255 / 16%);
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Compose sempre em modal ampla; a página por baixo preserva lista e busca. */
dialog.rf-compose-modal {
  width: min(1160px, 94vw);
  height: min(840px, 90vh);
  padding: 0;
  border: 1px solid var(--rf-border);
  border-radius: 16px;
  background: var(--rf-surface);
  color: var(--rf-text);
  box-shadow: 0 24px 64px rgb(15 23 42 / 30%);
  overflow: hidden;
}
dialog.rf-compose-modal::backdrop { background: rgb(15 23 42 / 45%); }
dialog.rf-compose-modal[open] { display: flex; }
dialog.rf-compose-modal iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--rf-surface); }

@media (max-width: 600px) {
  .rf-app-compose { gap: 0; margin: 0 4px 0 auto; padding: 0 9px; }
  .rf-app-compose .inner, .rf-app-compose .rf-kbd { display: none; }
}