mcos

/* ============================================================
   macOS Traffic-Light Controls (Corner-Edge Close Hitbox)
   ============================================================ */

:root {
  --spring-fast: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-gentle: cubic-bezier(0.34, 1.2, 0.55, 1);
  --spring-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 1. Duplicate nav-bar controls hide */
#nav-bar .titlebar-buttonbox-container,
#nav-bar .titlebar-buttonbox,
#nav-bar > .titlebar-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* 2. Controls container - zero right margin/padding so it touches the corner */
#TabsToolbar .titlebar-buttonbox-container {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#TabsToolbar .titlebar-buttonbox {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* 3. Button order: Minimize -> Maximize -> Close */
#TabsToolbar .titlebar-min {
  order: 1 !important;
}
#TabsToolbar .titlebar-max,
#TabsToolbar .titlebar-restore {
  order: 2 !important;
}
#TabsToolbar .titlebar-close {
  order: 3 !important;
}

/* 4. Native Windows icons hide */
.titlebar-button *,
.titlebar-button > .toolbarbutton-icon,
.titlebar-button-icon {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Maximize vs Restore toggle */
#main-window[sizemode="maximized"] .titlebar-max,
:root[sizemode="maximized"] .titlebar-max {
  display: none !important;
}
#main-window:not([sizemode="maximized"]) .titlebar-restore,
:root:not([sizemode="maximized"]) .titlebar-restore {
  display: none !important;
}

/* 5. Base Buttons Hitbox */
#TabsToolbar .titlebar-button {
  appearance: none !important;
  -moz-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: default !important;
}

/* CLOSE BUTTON - Screen ke extreme right corner tak flush */
#TabsToolbar .titlebar-close {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  margin-right: 0 !important;
  padding-right: 2px !important;
}

/* 6. Centered macOS Dots */
#TabsToolbar .titlebar-button::before {
  content: "" !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  border-radius: 999px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.35) !important;
  transition:
    height 400ms var(--spring-elastic),
    min-height 400ms var(--spring-elastic),
    background-color 300ms var(--spring-smooth),
    box-shadow 350ms var(--spring-smooth),
    transform 220ms var(--spring-gentle) !important;
}

/* Colors */
#TabsToolbar .titlebar-close::before {
  background-color: #ff5f56 !important;
}
#TabsToolbar .titlebar-min::before {
  background-color: #ffbd2e !important;
}
#TabsToolbar .titlebar-max::before,
#TabsToolbar .titlebar-restore::before {
  background-color: #27c93f !important;
}

/* 7. Hover Effects */
#TabsToolbar .titlebar-button:hover::before {
  height: 24px !important;
  min-height: 24px !important;
  transform: scale(1.1) !important;
}

#TabsToolbar .titlebar-close:hover::before {
  background-color: #ff3b30 !important;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.65) !important;
}
#TabsToolbar .titlebar-min:hover::before {
  background-color: #ff9500 !important;
  box-shadow: 0 0 10px rgba(255, 149, 0, 0.65) !important;
}
#TabsToolbar .titlebar-max:hover::before,
#TabsToolbar .titlebar-restore:hover::before {
  background-color: #28cd41 !important;
  box-shadow: 0 0 10px rgba(40, 205, 65, 0.65) !important;
}

/* Click feedback */
#TabsToolbar .titlebar-button:active::before {
  transform: scale(0.85) !important;
  transition-duration: 80ms !important;
}