/** Optional icon-only presentation of the native mail folder tree. */
.cm-folder-toggle[hidden] { display: none !important; }

@media screen and (min-width: 769px) {
  body.task-mail.cm-folder-rail:not(.action-compose) #layout-sidebar {
    position: relative;
    display: flex !important;
  }

  body.cm-folder-rail #layout-sidebar > .header .header-title {
    flex: 1 1 auto;
    /* Elastic reserves 24px for its header action; flex already reserves that target. */
    margin: 0 !important;
    text-align: left;
    font-size: 13px;
  }

  body.cm-folder-rail #layout-sidebar > .header .sidebar-menu { flex: 0 0 36px; }
  /* The toggle delegates the same medium Back operation; avoid two adjacent returns. */
  body.cm-folder-rail #layout-sidebar > .header .back-list-button { display: none !important; }

  .cm-folder-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    /* 12px header padding - 3px + 18px half-target = native folder axis (27px). */
    margin: 0 6px 0 -3px;
    padding: 0;
    border: 0;
    outline: none;
    border-radius: var(--cm-radius-control);
    background: transparent;
    color: var(--cm-color-text-muted);
    cursor: pointer;
  }

  .cm-folder-toggle::before {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url('../assets/icons/ui/lucide/regular/panel-left.svg') center / contain no-repeat;
    -webkit-mask: url('../assets/icons/ui/lucide/regular/panel-left.svg') center / contain no-repeat;
  }

  .cm-folder-toggle:hover {
    background: var(--cm-color-surface-hover);
    color: var(--cm-color-text);
  }

  .cm-folder-toggle:focus-visible {
    outline: 2px solid var(--cm-color-focus);
    outline-offset: -2px;
  }

  .cm-folder-toggle:focus:not(:focus-visible) { outline: none; }

  html:is(.layout-large, .layout-normal) body.task-mail.cm-folder-compact:not(.action-compose) #layout-sidebar {
    flex: 0 0 64px;
    width: 64px !important;
    min-width: 64px;
    max-width: 64px;
  }

  body.cm-folder-compact #layout-sidebar > .header {
    /* Absolute actions must use the pane, not Elastic's positioned 58px header. */
    position: static !important;
    overflow: visible;
    justify-content: center;
    padding: 0 !important;
  }

  body.cm-folder-compact .cm-folder-toggle { margin: 0; width: 36px; flex-basis: 36px; }
  body.cm-folder-compact #layout-sidebar > .header :is(.header-title, .back-list-button) { display: none !important; }

  /* Keep the real folder-actions trigger reachable, above the native quota. */
  body.cm-folder-compact #layout-sidebar > .header .sidebar-menu {
    position: absolute;
    top: auto !important;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    /* The native positioned scroller otherwise wins hit testing over this button. */
    z-index: 1;
  }

  body.cm-folder-compact #layout-sidebar > .scroller { padding-bottom: 44px; }
  body.cm-folder-compact #mailboxlist li.mailbox > a {
    position: relative;
    justify-content: center;
    gap: 0;
    /* Center on the compact pane's content, retaining the native 40px row pitch. */
    margin: 2px auto !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px;
    /* Elastic's 2px left marker otherwise offsets the centered glyph and badge. */
    border: 0 !important;
    border-radius: var(--cm-radius-control);
    /* The small count sits at the glyph's upper-right, not the pane edge. */
    overflow: visible;
    /* Text remains in native nodes and accessible names, not removed/rebuilt. */
    font-size: 0 !important;
  }

  body.cm-folder-compact #mailboxlist ul { margin-left: 4px; padding-left: 4px; }
  body.cm-folder-compact #mailboxlist li.mailbox > a .unreadcount {
    position: absolute !important;
    top: -3px;
    left: 25px;
    right: auto;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    margin: 0 !important;
    font-size: 9px;
    line-height: 14px;
  }

  body.cm-folder-compact #layout-sidebar .quota-widget { margin: 2px 4px !important; padding: 0 4px; gap: 4px; }
  body.cm-folder-compact #layout-sidebar .quota-widget .bar { display: none; }
  body.cm-folder-compact #layout-sidebar .quota-widget .count { min-width: 0; font-size: 10px; }

  /* Light refinement: one 28px axis in both states. Keep dark geometry intact. */
  html:not(.dark-mode) body.cm-folder-rail:not(.cm-folder-compact) .cm-folder-toggle {
    margin-left: -2px;
  }
  html:not(.dark-mode) body.cm-folder-rail:not(.cm-folder-compact) #mailboxlist li.mailbox > a {
    border-left: 0 !important;
    padding-inline: 11px !important;
  }
  html:not(.dark-mode):is(.layout-large, .layout-normal) body.task-mail.cm-folder-compact:not(.action-compose) #layout-sidebar {
    flex-basis: 56px;
    width: 56px !important;
    min-width: 56px;
    max-width: 56px;
  }
}