/* Activity workspace separator — loaded last so it cannot be reset by shared console styles. */
.activity-workspace:not(.loading) {
  position: relative;
}

.activity-workspace:not(.loading)::before,
.activity-workspace:not(.loading)::after {
  content: "";
  position: absolute;
  z-index: 100;
  top: 50%;
  width: 5px;
  height: 42px;
  border-radius: 6px;
  background: #c9ff63;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, box-shadow .14s ease;
}

.activity-workspace:not(.loading)::before {
  left: calc(var(--activity-filter-width) + 1px);
}

.activity-workspace:not(.loading)::after {
  right: calc(var(--activity-detail-width) + 1px);
}

.activity-workspace:has(.activity-divider-left:is(:hover,:focus-visible,:active))::before,
.activity-workspace:has(.activity-divider-right:is(:hover,:focus-visible,:active))::after {
  opacity: 1;
}

.activity-workspace .activity-divider {
  position: relative !important;
  z-index: 30 !important;
  display: flex !important;
  width: 7px !important;
  min-width: 7px !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  cursor: col-resize !important;
  touch-action: none;
}

.activity-workspace .activity-divider::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 3px;
  width: 1px;
  background: #d7ddd7;
}

.activity-workspace .activity-divider::after {
  content: none !important;
}

.activity-workspace .activity-divider > span {
  position: relative !important;
  z-index: 31 !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: 5px !important;
  height: 42px !important;
  flex: 0 0 5px !important;
  border-radius: 6px !important;
  background: #c9ff63 !important;
  opacity: 0 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none;
  transition: box-shadow .14s ease, transform .14s ease;
}

.activity-workspace .activity-divider:hover > span,
.activity-workspace .activity-divider:focus-visible > span,
.activity-workspace .activity-divider:active > span {
  opacity: 1 !important;
  transform: scaleX(1.2) !important;
  box-shadow: 0 0 0 2px rgba(201,255,99,.25), 0 0 10px rgba(201,255,99,.7);
}

@media (max-width: 820px) {
  .activity-workspace:not(.loading)::before,
  .activity-workspace:not(.loading)::after { content: none; }
  .activity-workspace .activity-divider { display: none !important; }
}